Všechny systémyEnergy+

Energy+

Pro energetiku a služby: oranžová, kalkulačky a živá simulace toku energie.

Ukázkový web Stáhnout .MD pro AI

Co to je

Univerzální systém pro energetiku a technické služby postavený na interakci. Bílá a inkoustová plocha, jediná oranžová #f24f00, jediná zelená #00c752, velké písmo a kalkulačky místo dlouhých textů.

Výchozí je světlé téma, tmavé přepnete v hlavičce.

Pravidla

  • Barvy jsou přesně #f24f00 a #00c752. Žádné světlejší ani tmavší varianty, při najetí se používá inkoustová nebo bílá. Oranžová značí i chyby ve formulářích.
  • Oranžová je akce a výrazná plocha, zelená jen výhoda, úspora a živý stav. Text na zelené je inkoustový.
  • Bílý text na oranžové jen velký a tučný, od 19 px. Oranžový text na bílé jen tučný nebo velký.
  • Odkazy v textu a kartách jsou podtržené linkou 1 px nejvýš 4 px pod textem, při najetí podtržení zmizí. Odkazy v nabídkách jsou bez podtržení a při najetí se podtrhnou.
  • Plochy, fotky, pole a ovládací prvky mají ostré rohy. Tlačítka mají seříznutý pravý horní roh jako značka. Kulaté jsou jen tečky stavu a jezdec posuvníku.
  • Písmo: Archivo s proměnnou šířkou, nadpisy rozšířené a řez 600. Popisky a technické údaje JetBrains Mono ve verzálkách. Čísla vždy tabulková.
  • Každá sekce začíná linkou s číslem a popiskem. Velké plochy se střídají bílá, šedá, inkoustová a oranžová.
  • Když jde něco spočítat nebo vyzkoušet, dáváme nástroj místo textu.
  • Telefon se píše ve tvaru +420 123 456 789.

Pohyb a stavy

  • Při najetí se tlačítko obrátí na obrys ve své barvě. Tlačítka, karty ani fotky se při najetí neposouvají a nezvětšují.
  • Drobný pohyb mají ovládací prvky a nástroje: podklad přepínače přejede, čísla v kalkulačkách doběhnou, barvy přejdou za 0,2 s. Křivka je cubic-bezier(.2,.8,.2,1).
  • Simulace se po zobrazení spustí sama a jde zastavit. Slunce pluje po obloze a tečky na vedení ukazují směr toku energie.
  • Tloušťka písmen se vlní jen ve velké výzvě. Ostatní nadpisy, text a sekce se při posouvání stránky neanimují.
  • Odpovědi v dotazech se rozbalí bez animace, ikona se změní z plus na minus.
  • Při omezeném pohybu se vše zobrazí hned a nic se nespouští samo.
  • Všechny nástroje fungují i z klávesnice.

Klávesy

  • Ctrl K otevře hledání, šipky vybírají, Enter otevře, Esc zavře.

Obrázky a ukázka

Fotky v ukázce jsou z Pexels, zdarma i pro komerční použití. Přehled je v souboru zdroje/src/energy/fotky.txt. Ikony jsou ze sady Phosphor (MIT), písma z Google Fonts.

Firma Energy+ je smyšlená, ukázkové ceny, výpočty, údaje a novinky taky.

Barvy

Hlavní barvy

orange#f24f00Jediná oranžová systému: hlavní akce, odkazy, ikony a pásy. Žádné odvozené odstíny.
green#00c752Jediná zelená systému: výhoda, úspora a živý stav. Text na ní je vždy inkoustový.

Neutrální

ink#0e0f11Nadpisy, tmavé pásy a tlačítko účtu.
graphite#363738Plochy o stupeň světlejší na tmavém pásu.
steel#63666aDoplňkový text na světlé ploše.
mist-300#dadfe3Dělicí linky.
mist-100#eef1f3Panely a klidné plochy.
white#ffffffPodklad stránky a text na tmavém.

Barvy podle použití (světlé, tmavé)

surface-page#ffffff / #0e0f11Podklad stránky.
surface-soft#eef1f3 / #17191cPanely a karty.
surface-card#ffffff / #1f2226Řádek nebo karta na panelu.
text-primary#0e0f11 / #ffffffNadpisy a hlavní text.
text-body#63666a / #b9bdc2Doplňkový text.
line#dadfe3 / #ffffff24Dělicí linky.
line-control#8a8e93 / #ffffff80Rámeček polí a přepínačů, drží 3:1.
mark#f24f00 / #f24f00Odkazy, ikony a čísla.
accent#f24f00 / #f24f00Hlavní tlačítko a oranžové plochy.
on-accent#ffffff / #ffffffText na oranžové, velký a tučný.
live#00c752 / #00c752Živý stav a úspora.
on-live#0e0f11 / #0e0f11Text na zelené.
danger#f24f00 / #f24f00Text a rámeček chyby ve formuláři, stejná oranžová jako značka.

Typografie

Rozměry

Mezery a šířky

NázevHodnotaUkázkaPoužití
space-88pxMezi nadpisem a popisem.
space-1616pxVnitřní skupiny.
space-2424pxMezera mřížky.
space-3232pxVnitřní odsazení panelu.
space-4848pxNadpis sekce a obsah.
gutterclamp(16px,3vw,48px)Boční okraj stránky.
sectionclamp(64px,9vw,144px)Odsazení sekce.
wrap1440pxŠířka obsahu.
header-height76pxVýška hlavní lišty.

Rádiusy

NázevHodnotaUkázkaPoužití
radius-00Plochy, fotky, pole a ovládací prvky.
radius-full999pxJen tečky stavu, volba v seznamu a jezdec.
cut14pxSeříznutý pravý horní roh tlačítek jako ve značce, u malých tlačítek 10 px.

Komponenty

Základy

Tlačítka

Oranžová plocha se seříznutým pravým horním rohem jako ve značce, tučný text 19 px a šipka. Při najetí se obrátí na obrys: rámeček a text v barvě tlačítka, uvnitř barva podkladu. Při odesílání se text změní na točící se kolečko.

HTML kód
<div class="row"><a class="en-btn" href="#"><span>Sjednat online</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="en-btn en-btn--ink" href="#"><span>Přihlásit se</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="en-btn en-btn--outline" href="#"><span>Více informací</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div><div class="row en-ink" style="margin-top:24px;padding:24px"><a class="en-btn" href="#"><span>Sjednat online</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="en-btn en-btn--outline" href="#"><span>Více informací</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div><div class="row" style="margin-top:24px"><button class="en-btn is-loading" type="button"><span>Odesílám</span></button></div>

Odkaz se šipkou

Tučný oranžový odkaz se šipkou, podtržený linkou 1 px. Při najetí podtržení zmizí.

HTML kód
<div class="row"><a class="en-more" href="#"><span>Zjistit více</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="en-more" href="#"><span>Všechny novinky</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div>

Štítek a živý stav

Zelený štítek označuje výhodu, tepající tečka živý údaj. Text na zelené je vždy inkoustový.

HTML kód
<div class="row"><span class="en-badge">Pro vás nejvýhodnější</span><span class="en-live"><i></i>Síť v provozu</span></div>

Nadpis sekce

Linka přes celou šířku, vlevo číslo a popisek, vpravo velký nadpis.

HTML kód
<header class="en-head"><p class="en-mono en-head__index"><b>01</b>Tarify</p><div class="en-head__main"><h2 class="en-d2">Kolik zaplatíte</h2><p class="en-lede">Posuňte spotřebu a hned uvidíte cenu všech tarifů.</p><a class="en-more" href="#"><span>Zjistit více</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></header>

Posuvník

Popisek nad posuvníkem, velká hodnota vpravo. Jezdec se při držení zvětší a hodnota se průběžně přepočítává.

HTML kód
<div style="max-width:560px"><div class="en-range"><div class="en-range__top"><label for="en-ukazka">Roční spotřeba</label><output class="en-range__value" for="en-ukazka"><b>4.5</b> MWh</output></div><input class="en-range__input" id="en-ukazka" max="30" min="0.5" name="ukazka" step="0.1" type="range" value="4.5"/><div aria-hidden="true" class="en-range__ticks"><span>0,5</span><span>10</span><span>20</span><span>30</span></div></div></div>

Přepínače

Volba jedné z několika možností s přejíždějícím podkladem a vypínač ano nebo ne.

HTML kód
<div style="max-width:560px;display:grid;gap:24px"><fieldset class="en-seg" data-en-seg=""><legend class="en-mono">Orientace střechy</legend><div class="en-seg__track"><i class="en-seg__thumb"></i><label><input checked="" name="ukazka-seg" type="radio" value="1"/><span>Jih</span></label><label><input name="ukazka-seg" type="radio" value="2"/><span>Východ, západ</span></label><label><input name="ukazka-seg" type="radio" value="3"/><span>Sever</span></label></div></fieldset><label class="en-toggle"><input checked="" name="ukazka-vyp" role="switch" type="checkbox"/><i></i><span>Přidat domácí baterii</span></label></div>

Čipy

Filtr obsahu. Aktivní čip je inkoustový, položky se přeskupí bez načtení stránky.

HTML kód
<div aria-label="Téma" class="en-chips" role="group"><button class="is-active" data-cat="all" type="button">Vše</button><button data-cat="prechod" type="button">Přechod</button><button data-cat="vyuctovani" type="button">Vyúčtování</button><button data-cat="technologie" type="button">Technologie</button></div>

Oznámení

Krátká zpráva dole uprostřed, sama zmizí. Potvrzuje kopírování nebo zpětnou vazbu.

HTML kód
<button class="en-btn en-btn--ink" data-en-toast="Hotovo, změnu jsme uložili." type="button"><span>Ukázat oznámení</span></button>

Navigace

Horní lišta

Přepínač publika, živý stav sítě a rychlé odkazy. Pod 900 px zůstává jen přepínač.

HTML kód
<div class="en-top"><div class="en-wrap"><nav aria-label="Pro koho"><a aria-current="true" href="#">Domácnosti</a><a href="#">Firmy</a><a href="#">Obce</a></nav><nav aria-label="Rychlé odkazy" class="en-top__side"><span class="en-live"><i></i>Síť v provozu</span><a href="#">Poruchy a výpadky</a><a href="#">Ceníky</a><a href="#">Novinky</a></nav></div></div>

Hlavička

Lepí se k hornímu okraji a po odjetí se zmenší. Obsahuje hledání, přepnutí tématu a tlačítko účtu.

HTML kód
<header class="en-header" data-en-header=""><div class="en-wrap"><a class="en-logo" href="#"><span class="en-logo__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M213.85,125.46l-112,120a8,8,0,0,1-13.69-7l14.66-73.33L45.19,143.49a8,8,0,0,1-3-13l112-120a8,8,0,0,1,13.69,7L153.18,90.9l57.63,21.61a8,8,0,0,1,3,12.95Z"></path></svg></span>Energy<b>+</b></a><nav aria-label="Hlavní" class="en-nav"><div class="en-nav__item"><a aria-current="page" href="#">Elektřina<svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></a><div class="en-mega"><div class="en-wrap"><div><p class="en-mono">Chci elektřinu</p><ul><li><a href="#"><span>Spočítat tarif</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Srovnání tarifů</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Jak přechod probíhá</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div><p class="en-mono">Už elektřinu mám</p><ul><li><a href="#"><span>Změna záloh</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Samoodečet</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Přepis odběru</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div class="en-mega__preview mat-lampa"></div></div></div></div><div class="en-nav__item"><a href="#">Fotovoltaika<svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"></path></svg></a><div class="en-mega"><div class="en-wrap"><div><p class="en-mono">Technologie</p><ul><li><a href="#"><span>Kalkulačka úspory</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Den elektrárny</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Sestavy na míru</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div><p class="en-mono">Pro výrobce</p><ul><li><a href="#"><span>Výkup přetoků</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Sdílení elektřiny</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Nabíječka auta</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div class="en-mega__preview mat-dum"></div></div></div></div><div class="en-nav__item"><a href="#">Novinky</a></div><div class="en-nav__item"><a href="#">Podpora</a></div><div class="en-nav__item"><a href="#">Kontakt</a></div></nav><div class="en-header__tools"><button class="en-tool en-tool--search" data-en-palette-open="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg><span>Hledat</span></button><button aria-label="Přepnout světlé a tmavé téma" class="en-tool en-tool--theme" data-en-theme="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"></path></svg></button><a class="en-account" href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"></path></svg><span>Můj účet</span></a><details class="en-menu"><summary aria-label="Otevřít nabídku"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></summary><nav aria-label="Mobilní" class="en-menu__panel"><a href="#"><span class="en-mono">01</span>Elektřina</a><a href="#"><span class="en-mono">02</span>Fotovoltaika</a><a href="#"><span class="en-mono">03</span>Novinky</a><a href="#"><span class="en-mono">04</span>Podpora</a><a href="#"><span class="en-mono">05</span>Kontakt</a></nav></details></div></div></header><div style="height:24px"></div>

Rozbalené menu

Panel se zobrazí při najetí nebo přechodu klávesnicí. Vlevo odkazy ve dvou sloupcích, vpravo fotka. Odkaz se při najetí podtrhne.

HTML kód
<div class="en-mega is-open"><div class="en-wrap"><div><p class="en-mono">Chci elektřinu</p><ul><li><a href="#"><span>Spočítat tarif</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Srovnání tarifů</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Jak přechod probíhá</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div><p class="en-mono">Už elektřinu mám</p><ul><li><a href="#"><span>Změna záloh</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Samoodečet</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Přepis odběru</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div><div class="en-mega__preview mat-lampa"></div></div></div>

Rychlé hledání

Otevírá se tlačítkem v hlavičce nebo klávesou Ctrl K. Filtruje bez diakritiky, šipky vybírají, Enter otevře.

HTML kód
<div style="max-width:720px"><div class="en-search" data-en-quick=""><label class="en-d3" for="en-hledat">Co potřebujete vyřídit?</label><div class="en-search__box"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path></svg><input autocomplete="off" id="en-hledat" spellcheck="false" type="search"/></div><ul class="en-search__list"><li data-keys="zalohy platba mesicni"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path></svg><span>Změna záloh</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="stav elektromeru odecet"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg><span>Samoodečet</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="stehovani novy majitel prepis"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M240,208H224V136l2.34,2.34A8,8,0,0,0,237.66,127L139.31,28.68a16,16,0,0,0-22.62,0L18.34,127a8,8,0,0,0,11.32,11.31L32,136v72H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM48,120l80-80,80,80v88H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48Zm96,88H112V160h32Z"></path></svg><span>Přepis odběrného místa</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="vypadek porucha proud"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"></path></svg><span>Nahlásit poruchu</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="cena cenik kalkulacka elektrina"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg><span>Spočítat tarif</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="tabulka porovnani"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path></svg><span>Srovnání tarifů</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="solar uspora panel strecha"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M32,104a8,8,0,0,1,8-8H56a8,8,0,0,1,0,16H40A8,8,0,0,1,32,104ZM71.43,58.75A8,8,0,0,0,82.75,47.43L71.43,36.12A8,8,0,0,0,60.12,47.43ZM128,40a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V32A8,8,0,0,0,128,40Zm50.91,21.09a8,8,0,0,0,5.66-2.34l11.31-11.32a8,8,0,0,0-11.31-11.31L173.25,47.43a8,8,0,0,0,5.66,13.66ZM192,104a8,8,0,0,0,8,8h16a8,8,0,0,0,0-16H200A8,8,0,0,0,192,104ZM88,112a8,8,0,0,0,8-8,32,32,0,0,1,64,0,8,8,0,0,0,16,0,48,48,0,0,0-96,0A8,8,0,0,0,88,112ZM238.91,220a8,8,0,0,1-6.91,4H24a8,8,0,0,1-7-11.94l40.69-72a8,8,0,0,1,7-4.06H191.3a8,8,0,0,1,7,4.06l40.69,72A8,8,0,0,1,238.91,220Zm-52.27-68H162.27l3.48,16h29.93Zm-37.26,16-3.48-16H110.1l-3.48,16Zm-46.24,16-5.21,24h60.14l-5.21-24ZM60.32,168H90.25l3.48-16H69.36ZM37.71,208H81.55l5.22-24H51.28Zm180.58,0-13.57-24H169.23l5.22,24Z"></path></svg><span>Kalkulačka fotovoltaiky</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="ulozeni zaloha"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,56H32A24,24,0,0,0,8,80v96a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V80A24,24,0,0,0,200,56Zm8,120a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H200a8,8,0,0,1,8,8Zm48-80v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM138.81,123.79a8,8,0,0,1,.35,7.79l-16,32a8,8,0,0,1-14.32-7.16L119.06,136H100a8,8,0,0,1-7.16-11.58l16-32a8,8,0,1,1,14.32,7.16L112.94,120H132A8,8,0,0,1,138.81,123.79Z"></path></svg><span>Domácí baterie</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="clanky zpravy"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-32-80a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,136Zm0,32a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,168Z"></path></svg><span>Novinky</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li data-keys="telefon email adresa"><a href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg><span>Kontakt</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul><p class="en-search__empty" hidden="">Nic takového jsme nenašli. Zavolejte nám na <a href="#">+420 123 456 789</a>.</p></div></div>

Kotvy na stránce

Lepí se pod hlavičkou a zvýrazňuje aktuální část stránky.

HTML kód
<nav aria-label="Na této stránce" class="en-subnav" data-en-spy=""><div class="en-wrap"><a href="#">Tarify</a><a href="#">Srovnání</a><a href="#">Přechod</a><a href="#">Dotazy</a></div></nav>

Patička

Tmavá patička se sloupci odkazů, stavem sítě, údaji o firmě a tlačítkem nahoru.

HTML kód
<footer class="en-footer en-ink"><div class="en-wrap"><div class="en-footer__grid"><div><p class="en-mono">Často potřebujete</p><ul><li><a href="#">Změna záloh</a></li><li><a href="#">Samoodečet</a></li><li><a href="#">Nahlášení poruchy</a></li></ul></div><div><p class="en-mono">Služby</p><ul><li><a href="#">Elektřina</a></li><li><a href="#">Fotovoltaika</a></li><li><a href="#">Novinky</a></li></ul></div><div><p class="en-mono">Podpora</p><ul><li><a href="#">Časté dotazy</a></li><li><a href="#">Kontakt</a></li><li><a href="#">Osobní údaje</a></li></ul></div><div><p class="en-mono">Kontakt</p><ul><li><a href="#">+420 123 456 789</a></li><li><a href="#">info@energy.example</a></li><li>Sadová 8, 602 00 Brno</li></ul></div></div><div class="en-footer__bottom"><span class="en-live"><i></i>Síť v provozu</span><p>Smyšlená firma, ukázka design systému Energy+. Energy+ s.r.o., IČO 12345678, zapsaná v obchodním rejstříku vedeném Krajským soudem v Brně, oddíl C, vložka 12345.</p><button aria-label="Nahoru" class="en-totop" data-en-top="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,117.66a8,8,0,0,1-11.32,0L136,59.31V216a8,8,0,0,1-16,0V59.31L61.66,117.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0l72,72A8,8,0,0,1,205.66,117.66Z"></path></svg></button></div></div></footer>

Úvody

Úvod se záložkami

Fotka přes celou šířku a tři záložky s tématy. Přepínají se kliknutím, samy se nestřídají.

HTML kód
<section class="en-stage" data-en-stage=""><div class="en-stage__slides"><article class="en-stage__slide is-active"><div class="en-stage__photo mat-dum"></div><div class="en-wrap en-stage__copy"><h1 class="en-d1 en-stage__title">Vlastní elektřina ze střechy</h1><div class="en-stage__foot"><p class="en-lede">Návrh zdarma, montáž do tří měsíců.</p><a class="en-btn" href="#"><span>Spočítat úsporu</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div></article><article class="en-stage__slide"><div class="en-stage__photo mat-ulice"></div><div class="en-wrap en-stage__copy"><h2 class="en-d1 en-stage__title">Elektřina pro domácnost se stálou cenou</h2><div class="en-stage__foot"><p class="en-lede">Přechod k nám vyřídíme za vás.</p><a class="en-btn" href="#"><span>Vybrat tarif</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div></article><article class="en-stage__slide"><div class="en-stage__photo mat-mesto"></div><div class="en-wrap en-stage__copy"><h2 class="en-d1 en-stage__title">Elektřina a plyn pro vaši firmu</h2><div class="en-stage__foot"><p class="en-lede">Jedna faktura a stálá cena na tři roky.</p><a class="en-btn" href="#"><span>Chci nabídku</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div></article></div><div class="en-stage__tabs"><div aria-label="Témata úvodu" class="en-wrap" role="tablist"><button aria-selected="true" class="is-active" role="tab" type="button"><span class="en-mono">01</span>Fotovoltaika<i></i></button><button aria-selected="false" role="tab" type="button"><span class="en-mono">02</span>Domácnost<i></i></button><button aria-selected="false" role="tab" type="button"><span class="en-mono">03</span>Firmy<i></i></button></div></div></section>

Úvod podstránky

Fotka přes celou šířku, dole drobečková navigace, nadpis a nepovinné tlačítko.

HTML kód
<section class="en-pagehero"><div class="en-pagehero__photo mat-farma"></div><div class="en-wrap en-pagehero__copy"><nav aria-label="Drobečková navigace" class="en-crumbs en-mono"><a href="#">Domů</a><span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>Fotovoltaika</span></nav><h1 class="en-d1">Fotovoltaika s montáží do 3 měsíců</h1><div class="en-stage__foot"><p class="en-lede">Vyrábějte vlastní elektřinu a kupujte jen to, co vám chybí.</p><a class="en-btn" href="#"><span>Chci návrh zdarma</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div></section>

Rychlé akce

Čtyři nejčastější úkoly hned pod úvodem. Při najetí se buňka podbarví.

HTML kód
<nav aria-label="Rychlé akce" class="en-quick"><div class="en-wrap"><a class="en-quick__cell" href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M207.06,72.67A111.24,111.24,0,0,0,128,40h-.4C66.07,40.21,16,91,16,153.13V176a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V152A111.25,111.25,0,0,0,207.06,72.67ZM224,176H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,176H32V153.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V80a8,8,0,0,0,16,0V56.33A96.14,96.14,0,0,1,221,128H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg><span class="en-d4">Spočítat tarif</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a><a class="en-quick__cell" href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"></path></svg><span class="en-d4">Nahlásit poruchu</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a><a class="en-quick__cell" href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path></svg><span class="en-d4">Změnit zálohy</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a><a class="en-quick__cell" href="#"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg><span class="en-d4">Zadat samoodečet</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg></a></div></nav>

Nástroje

Kalkulačka tarifu

Předvolba nebo posuvník přepočítají všechny tarify. Nejvýhodnější karta ztmavne a dostane štítek, ostatní ukazují rozdíl v korunách. Čísla se přepočítávají plynule.

HTML kód
<div data-en-calc=""><div class="en-calc__controls"><fieldset class="en-seg" data-en-seg=""><legend class="en-mono">Kde elektřinu spotřebujete</legend><div class="en-seg__track"><i class="en-seg__thumb"></i><label><input name="typ" type="radio" value="1.8"/><span>Byt</span></label><label><input checked="" name="typ" type="radio" value="4.5"/><span>Dům</span></label><label><input name="typ" type="radio" value="9"/><span>S čerpadlem</span></label><label><input name="typ" type="radio" value="18"/><span>Firma</span></label></div></fieldset><div class="en-range"><div class="en-range__top"><label for="en-spotreba">Roční spotřeba</label><output class="en-range__value" for="en-spotreba"><b>4.5</b> MWh</output></div><input class="en-range__input" id="en-spotreba" max="30" min="0.5" name="spotreba" step="0.1" type="range" value="4.5"/><div aria-hidden="true" class="en-range__ticks"><span>0,5</span><span>10</span><span>20</span><span>30</span></div></div><div class="en-calc__sum"><p class="en-mono">Za rok zaplatíte</p><p><b class="en-num" data-year="">0</b> Kč</p></div></div><div class="en-calc__cards"><article class="en-tariff" data-fixed="99" data-rate="2590"><div class="en-tariff__top"><p class="en-mono">1 rok</p><span class="en-badge">Pro vás nejvýhodnější</span></div><h3 class="en-d3">Online na 1 rok</h3><p class="en-tariff__price"><b class="en-num" data-price="">0</b><span>Kč/měs.</span></p><p class="en-tariff__delta" data-delta=""> </p><dl><div><dt>Cena za MWh</dt><dd>2 590 Kč</dd></div><div><dt>Stálá platba</dt><dd>99 Kč/měs.</dd></div><div><dt>V kostce</dt><dd>Správa jen online</dd></div></dl><a class="en-btn" href="#"><span>Sjednat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></article><article class="en-tariff" data-fixed="129" data-rate="2490"><div class="en-tariff__top"><p class="en-mono">3 roky</p><span class="en-badge">Pro vás nejvýhodnější</span></div><h3 class="en-d3">Stálá cena na 3 roky</h3><p class="en-tariff__price"><b class="en-num" data-price="">0</b><span>Kč/měs.</span></p><p class="en-tariff__delta" data-delta=""> </p><dl><div><dt>Cena za MWh</dt><dd>2 490 Kč</dd></div><div><dt>Stálá platba</dt><dd>129 Kč/měs.</dd></div><div><dt>V kostce</dt><dd>Cena se nezmění</dd></div></dl><a class="en-btn" href="#"><span>Sjednat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></article><article class="en-tariff" data-fixed="149" data-rate="2890"><div class="en-tariff__top"><p class="en-mono">Bez fixace</p><span class="en-badge">Pro vás nejvýhodnější</span></div><h3 class="en-d3">Bez závazku</h3><p class="en-tariff__price"><b class="en-num" data-price="">0</b><span>Kč/měs.</span></p><p class="en-tariff__delta" data-delta=""> </p><dl><div><dt>Cena za MWh</dt><dd>2 890 Kč</dd></div><div><dt>Stálá platba</dt><dd>149 Kč/měs.</dd></div><div><dt>V kostce</dt><dd>Výpověď kdykoli</dd></div></dl><a class="en-btn" href="#"><span>Sjednat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></article><article class="en-tariff" data-fixed="249" data-rate="2190"><div class="en-tariff__top"><p class="en-mono">Bez fixace</p><span class="en-badge">Pro vás nejvýhodnější</span></div><h3 class="en-d3">Podle burzy</h3><p class="en-tariff__price"><b class="en-num" data-price="">0</b><span>Kč/měs.</span></p><p class="en-tariff__delta" data-delta=""> </p><dl><div><dt>Cena za MWh</dt><dd>2 190 Kč</dd></div><div><dt>Stálá platba</dt><dd>249 Kč/měs.</dd></div><div><dt>V kostce</dt><dd>Cena se mění po hodinách</dd></div></dl><a class="en-btn" href="#"><span>Sjednat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></article></div><p class="en-note">Orientační ceny včetně DPH. Smyšlené údaje pro ukázku.</p></div>

Den elektrárny

Simulace 24 hodin. Tažením v grafu se mění čas, slunce putuje po vyznačené dráze a tečky na vedení ukazují, kam proud teče. Čím silnější tok, tím rychleji běží. Po zobrazení se spustí sama, jde zastavit.

HTML kód
<section class="en-day en-ink" data-en-day="" id="den"><div class="en-wrap"><header class="en-head"><p class="en-mono en-head__index"><b>02</b>Simulace</p><div class="en-head__main"><h2 class="en-d2">Jeden den vaší elektrárny</h2><p class="en-lede">Přetáhněte čas a sledujte, odkud proud teče a kam míří. Hodnoty jsou ukázkové.</p></div></header><div class="en-day__scene"><div aria-hidden="true" class="en-day__sky"><svg class="en-day__arc" preserveaspectratio="none" viewbox="0 0 100 100"><path d="M8.00 88.00 L9.75 83.03 L11.50 78.08 L13.25 73.17 L15.00 68.33 L16.75 63.57 L18.50 58.92 L20.25 54.39 L22.00 50.00 L23.75 45.78 L25.50 41.73 L27.25 37.89 L29.00 34.26 L30.75 30.86 L32.50 27.71 L34.25 24.81 L36.00 22.18 L37.75 19.84 L39.50 17.79 L41.25 16.03 L43.00 14.59 L44.75 13.46 L46.50 12.65 L48.25 12.16 L50.00 12.00 L51.75 12.16 L53.50 12.65 L55.25 13.46 L57.00 14.59 L58.75 16.03 L60.50 17.79 L62.25 19.84 L64.00 22.18 L65.75 24.81 L67.50 27.71 L69.25 30.86 L71.00 34.26 L72.75 37.89 L74.50 41.73 L76.25 45.78 L78.00 50.00 L79.75 54.39 L81.50 58.92 L83.25 63.57 L85.00 68.33 L86.75 73.17 L88.50 78.08 L90.25 83.03 L92.00 88.00" vector-effect="non-scaling-stroke"></path></svg><span class="en-day__sun"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z"></path></svg></span><span class="en-day__moon"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M240,96a8,8,0,0,1-8,8H216v16a8,8,0,0,1-16,0V104H184a8,8,0,0,1,0-16h16V72a8,8,0,0,1,16,0V88h16A8,8,0,0,1,240,96ZM144,56h8v8a8,8,0,0,0,16,0V56h8a8,8,0,0,0,0-16h-8V32a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16Zm72.77,97a8,8,0,0,1,1.43,8A96,96,0,1,1,95.07,37.8a8,8,0,0,1,10.6,9.06A88.07,88.07,0,0,0,209.14,150.33,8,8,0,0,1,216.77,153Zm-19.39,14.88c-1.79.09-3.59.14-5.38.14A104.11,104.11,0,0,1,88,64c0-1.79,0-3.59.14-5.38A80,80,0,1,0,197.38,167.86Z"></path></svg></span></div><svg aria-hidden="true" class="en-day__lines" preserveaspectratio="none" viewbox="0 0 100 100"><path class="en-day__wire" d="M20 22 H80" vector-effect="non-scaling-stroke"></path><path class="en-day__wire" d="M50 22 V74" vector-effect="non-scaling-stroke"></path><path class="en-day__wire" d="M20 22 V74" vector-effect="non-scaling-stroke"></path><path class="en-day__wire" d="M20 74 H50" vector-effect="non-scaling-stroke"></path><g class="en-flow" data-flow="solarJoint"><path class="en-flow__line" d="M20 22 H50" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M20 22 H50" vector-effect="non-scaling-stroke"></path></g><g class="en-flow" data-flow="jointGrid"><path class="en-flow__line" d="M50 22 H80" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M50 22 H80" vector-effect="non-scaling-stroke"></path></g><g class="en-flow" data-flow="gridJoint"><path class="en-flow__line" d="M80 22 H50" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M80 22 H50" vector-effect="non-scaling-stroke"></path></g><g class="en-flow" data-flow="jointHome"><path class="en-flow__line" d="M50 22 V74" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M50 22 V74" vector-effect="non-scaling-stroke"></path></g><g class="en-flow" data-flow="solarBattery"><path class="en-flow__line" d="M20 22 V74" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M20 22 V74" vector-effect="non-scaling-stroke"></path></g><g class="en-flow" data-flow="batteryHome"><path class="en-flow__line" d="M20 74 H50" vector-effect="non-scaling-stroke"></path><path class="en-flow__dots" d="M20 74 H50" vector-effect="non-scaling-stroke"></path></g></svg><div class="en-node" data-node="solar" style="--x:20;--y:22"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M32,104a8,8,0,0,1,8-8H56a8,8,0,0,1,0,16H40A8,8,0,0,1,32,104ZM71.43,58.75A8,8,0,0,0,82.75,47.43L71.43,36.12A8,8,0,0,0,60.12,47.43ZM128,40a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V32A8,8,0,0,0,128,40Zm50.91,21.09a8,8,0,0,0,5.66-2.34l11.31-11.32a8,8,0,0,0-11.31-11.31L173.25,47.43a8,8,0,0,0,5.66,13.66ZM192,104a8,8,0,0,0,8,8h16a8,8,0,0,0,0-16H200A8,8,0,0,0,192,104ZM88,112a8,8,0,0,0,8-8,32,32,0,0,1,64,0,8,8,0,0,0,16,0,48,48,0,0,0-96,0A8,8,0,0,0,88,112ZM238.91,220a8,8,0,0,1-6.91,4H24a8,8,0,0,1-7-11.94l40.69-72a8,8,0,0,1,7-4.06H191.3a8,8,0,0,1,7,4.06l40.69,72A8,8,0,0,1,238.91,220Zm-52.27-68H162.27l3.48,16h29.93Zm-37.26,16-3.48-16H110.1l-3.48,16Zm-46.24,16-5.21,24h60.14l-5.21-24ZM60.32,168H90.25l3.48-16H69.36ZM37.71,208H81.55l5.22-24H51.28Zm180.58,0-13.57-24H169.23l5.22,24Z"></path></svg><span class="en-mono">Střecha</span><b>0 kW</b></div><div class="en-node" data-node="grid" style="--x:80;--y:22"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M237.66,18.34a8,8,0,0,0-11.32,0l-52.4,52.41-5.37-5.38a32.05,32.05,0,0,0-45.26,0L100,88.69l-6.34-6.35A8,8,0,0,0,82.34,93.66L88.69,100,65.37,123.31a32,32,0,0,0,0,45.26l5.38,5.37-52.41,52.4a8,8,0,0,0,11.32,11.32l52.4-52.41,5.37,5.38a32,32,0,0,0,45.26,0L156,167.31l6.34,6.35a8,8,0,0,0,11.32-11.32L167.31,156l23.32-23.31a32,32,0,0,0,0-45.26l-5.38-5.37,52.41-52.4A8,8,0,0,0,237.66,18.34Zm-116.29,161a16,16,0,0,1-22.62,0L76.69,157.25a16,16,0,0,1,0-22.62L100,111.31,144.69,156Zm57.94-57.94L156,144.69,111.31,100l23.32-23.31a16,16,0,0,1,22.62,0l22.06,22A16,16,0,0,1,179.31,121.37ZM88.57,35A8,8,0,0,1,103.43,29l8,20A8,8,0,0,1,96.57,55ZM24.57,93A8,8,0,0,1,35,88.57l20,8A8,8,0,0,1,49,111.43l-20-8A8,8,0,0,1,24.57,93ZM231.43,163a8,8,0,0,1-10.4,4.46l-20-8A8,8,0,1,1,207,144.57l20,8A8,8,0,0,1,231.43,163Zm-64,58.06A8,8,0,0,1,152.57,227l-8-20A8,8,0,0,1,159.43,201Z"></path></svg><span class="en-mono">Síť</span><b>0 kW</b></div><div class="en-node" data-node="battery" style="--x:20;--y:74"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,56H32A24,24,0,0,0,8,80v96a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V80A24,24,0,0,0,200,56Zm8,120a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H200a8,8,0,0,1,8,8Zm48-80v64a8,8,0,0,1-16,0V96a8,8,0,0,1,16,0ZM138.81,123.79a8,8,0,0,1,.35,7.79l-16,32a8,8,0,0,1-14.32-7.16L119.06,136H100a8,8,0,0,1-7.16-11.58l16-32a8,8,0,1,1,14.32,7.16L112.94,120H132A8,8,0,0,1,138.81,123.79Z"></path></svg><span class="en-mono">Baterie</span><b>0 kW</b></div><div class="en-node" data-node="home" style="--x:50;--y:74"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M240,208H224V136l2.34,2.34A8,8,0,0,0,237.66,127L139.31,28.68a16,16,0,0,0-22.62,0L18.34,127a8,8,0,0,0,11.32,11.31L32,136v72H16a8,8,0,0,0,0,16H240a8,8,0,0,0,0-16ZM48,120l80-80,80,80v88H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48Zm96,88H112V160h32Z"></path></svg><span class="en-mono">Dům</span><b>0 kW</b></div><p class="en-day__clock"><b class="en-num" data-clock="">13:00</b><span class="en-mono" data-state="">Slunce pokrývá dům</span></p></div><div class="en-day__time"><button aria-label="Spustit nebo zastavit" class="en-day__play" data-play="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M200,32H160a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm0,176H160V48h40ZM96,32H56A16,16,0,0,0,40,48V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V48A16,16,0,0,0,96,32Zm0,176H56V48H96Z"></path></svg></button><div><div class="en-day__chart"><svg aria-hidden="true" preserveaspectratio="none" viewbox="0 0 960 120"><path class="en-day__prod" vector-effect="non-scaling-stroke"></path><path class="en-day__use" vector-effect="non-scaling-stroke"></path></svg><i class="en-day__head"></i><input aria-label="Čas během dne" max="95" min="0" step="1" type="range" value="52"/></div><div aria-hidden="true" class="en-day__hours"><span>0:00</span><span>6:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div><p class="en-day__legend en-mono"><span>Výroba</span><span>Spotřeba</span></p></div></div><dl class="en-day__sum"><div><dt class="en-mono">Vyrobeno</dt><dd><b data-sum="made">0</b> kWh</dd></div><div><dt class="en-mono">Spotřebováno doma</dt><dd><b data-sum="self">0</b> %</dd></div><div><dt class="en-mono">Prodáno do sítě</dt><dd><b data-sum="sold">0</b> kWh</dd></div><div><dt class="en-mono">Ušetřeno</dt><dd><b data-sum="saved">0</b> Kč</dd></div></dl></div></section>

Kalkulačka fotovoltaiky

Účet, střecha, orientace a baterie přepočítají výkon, úsporu a návratnost. Sloupce ukazují bilanci po jednotlivých letech: šedé roky se sestava splácí, zelené už vydělává.

HTML kód
<div class="en-solar" data-en-solar=""><div class="en-solar__controls"><div class="en-range"><div class="en-range__top"><label for="en-ucet">Měsíční účet za elektřinu</label><output class="en-range__value" for="en-ucet"><b>3200</b> Kč</output></div><input class="en-range__input" id="en-ucet" max="8000" min="800" name="ucet" step="100" type="range" value="3200"/><div aria-hidden="true" class="en-range__ticks"><span>800</span><span>3 200</span><span>5 600</span><span>8 000</span></div></div><div class="en-range"><div class="en-range__top"><label for="en-strecha">Plocha střechy</label><output class="en-range__value" for="en-strecha"><b>40</b> m²</output></div><input class="en-range__input" id="en-strecha" max="80" min="15" name="strecha" step="1" type="range" value="40"/><div aria-hidden="true" class="en-range__ticks"><span>15</span><span>35</span><span>60</span><span>80</span></div></div><fieldset class="en-seg" data-en-seg=""><legend class="en-mono">Orientace střechy</legend><div class="en-seg__track"><i class="en-seg__thumb"></i><label><input checked="" name="orientace" type="radio" value="1"/><span>Jih</span></label><label><input name="orientace" type="radio" value="0.85"/><span>Východ, západ</span></label><label><input name="orientace" type="radio" value="0.6"/><span>Sever</span></label></div></fieldset><label class="en-toggle"><input checked="" name="baterie" role="switch" type="checkbox"/><i></i><span>Přidat domácí baterii</span></label></div><div class="en-solar__result"><dl><div><dt class="en-mono">Výkon elektrárny</dt><dd><b class="en-num" data-out="power">0</b> kWp</dd></div><div><dt class="en-mono">Úspora za rok</dt><dd><b class="en-num" data-out="saving">0</b> Kč</dd></div><div><dt class="en-mono">Cena sestavy</dt><dd><b class="en-num" data-out="price">0</b> Kč</dd></div><div class="is-green"><dt class="en-mono">Zaplatí se za</dt><dd><b class="en-num" data-out="years">0</b> let</dd></div></dl><div class="en-solar__chart"><p class="en-mono">Celková bilance za 25 let</p><div aria-hidden="true" class="en-solar__bars"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div><p aria-hidden="true" class="en-solar__axis en-mono"><span>1. rok</span><span>25. rok</span></p></div><a class="en-btn" href="#"><span>Chci přesný návrh</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div><p class="en-note">Orientační výpočet s ukázkovými cenami.</p></div>

Kontrola výpadku

Zadáte PSČ a hned vidíte stav oblasti. Špatný tvar ohlásí chyba pod polem.

HTML kód
<div style="max-width:720px"><form class="en-outage" data-en-outage="" novalidate=""><div class="en-field"><label for="en-psc">PSČ odběrného místa</label><div class="en-outage__row"><div class="en-control"><input aria-describedby="en-psc-err" autocomplete="postal-code" class="en-input" id="en-psc" inputmode="numeric" maxlength="6"/></div><button class="en-btn en-btn--ink" type="submit"><span>Zkontrolovat</span></button></div><p class="en-field__err" hidden="" id="en-psc-err"></p></div><div class="en-outage__result" hidden="" role="status"></div></form></div>

Karty a panely

Srovnání tarifů

Tabulka s lepicím prvním sloupcem, zvýrazní řádek pod kurzorem. Fajfka je oranžová, křížek šedý. Vypínač schová shodné řádky.

HTML kód
<div class="en-compare" data-en-compare=""><label class="en-toggle"><input name="rozdily" role="switch" type="checkbox"/><i></i><span>Jen rozdíly</span></label><div aria-label="Srovnání tarifů" class="en-compare__scroll" role="region" tabindex="0"><table><thead><tr><td></td><th scope="col">Online na 1 rok</th><th scope="col">Stálá cena na 3 roky</th><th scope="col">Bez závazku</th><th scope="col">Podle burzy</th></tr></thead><tbody><tr><th scope="row">Cena za MWh</th><td data-v="2 590 Kč">2 590 Kč</td><td data-v="2 490 Kč">2 490 Kč</td><td data-v="2 890 Kč">2 890 Kč</td><td data-v="2 190 Kč">2 190 Kč</td></tr><tr><th scope="row">Stálá platba</th><td data-v="99 Kč">99 Kč</td><td data-v="129 Kč">129 Kč</td><td data-v="149 Kč">149 Kč</td><td data-v="249 Kč">249 Kč</td></tr><tr><th scope="row">Fixace</th><td data-v="1 rok">1 rok</td><td data-v="3 roky">3 roky</td><td data-v="Ne">Ne</td><td data-v="Ne">Ne</td></tr><tr><th scope="row">Výpověď kdykoli</th><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td></tr><tr><th scope="row">Správa online</th><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td></tr><tr><th scope="row">Vyúčtování e-mailem</th><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td></tr><tr><th scope="row">Papírové faktury</th><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td></tr><tr><th scope="row">Cena podle burzy</th><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="0"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg><span class="en-sr">Ne</span></td><td data-v="1"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg><span class="en-sr">Ano</span></td></tr></tbody></table></div></div>

Panel účtu

Záložky mění text i obrazovku v náhledu aplikace, sloupce grafu při změně vyrostou.

HTML kód
<div class="en-accountpanel en-ink" data-en-tabs=""><div class="en-accountpanel__copy"><p class="en-mono">Zákaznický účet</p><h2 class="en-d2">Všechno v jedné aplikaci</h2><div aria-label="Části aplikace" class="en-tabs" role="tablist"><i class="en-tabs__thumb"></i><button aria-controls="en-tab-0" aria-selected="true" role="tab" type="button">Spotřeba</button><button aria-controls="en-tab-1" aria-selected="false" role="tab" type="button">Zálohy</button><button aria-controls="en-tab-2" aria-selected="false" role="tab" type="button">Vyúčtování</button></div><p class="en-lede" id="en-tab-0" role="tabpanel">Sledujte spotřebu po hodinách a porovnejte ji s minulým rokem.</p><p class="en-lede" hidden="" id="en-tab-1" role="tabpanel">Výši záloh změníte jedním posunem, nová platí od dalšího měsíce.</p><p class="en-lede" hidden="" id="en-tab-2" role="tabpanel">Všechny faktury na jednom místě, vždy ke stažení.</p><a class="en-btn" href="#"><span>Přihlásit se</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div><div aria-hidden="true" class="en-device"><div class="en-device__screen is-active"><span class="en-mono">Tento měsíc</span><b class="en-d3">312 kWh</b><div class="en-device__bars"><i style="height:46%"></i><i style="height:62%"></i><i style="height:38%"></i><i style="height:74%"></i><i style="height:58%"></i><i style="height:88%"></i><i style="height:52%"></i></div></div><div class="en-device__screen"><span class="en-mono">Měsíční záloha</span><b class="en-d3">1 450 Kč</b><div class="en-device__bars"><i style="height:70%"></i><i style="height:70%"></i><i style="height:70%"></i><i style="height:70%"></i><i style="height:70%"></i><i style="height:70%"></i><i style="height:70%"></i></div></div><div class="en-device__screen"><span class="en-mono">Přeplatek za rok</span><b class="en-d3">1 820 Kč</b><div class="en-device__bars"><i style="height:82%"></i><i style="height:74%"></i><i style="height:60%"></i><i style="height:48%"></i><i style="height:40%"></i><i style="height:30%"></i><i style="height:24%"></i></div></div></div></div>

Přehled v číslech

Mřížka různě velkých ploch s čísly, křivkou a kruhem.

HTML kód
<div class="en-bento"><article class="en-bento__a en-ink"><p class="en-mono">Vyrobeno letos</p><p><b class="en-num">2 400</b> MWh</p><svg aria-hidden="true" class="en-spark" preserveaspectratio="none" viewbox="0 0 300 80"><polyline points="0,70 40,62 80,66 120,44 160,50 200,28 240,34 300,8"></polyline></svg></article><article class="en-bento__b"><p class="en-mono">Vlastní spotřeba</p><div class="en-bento__ring"><svg aria-hidden="true" class="en-ring" viewbox="0 0 120 120"><circle cx="60" cy="60" r="52"></circle><circle class="en-ring__value" cx="60" cy="60" pathlength="100" r="52" style="--v:62"></circle></svg><b class="en-num">62 %</b></div></article><article class="en-bento__c mat-montaz"><p class="en-mono">Vlastní montážní týmy</p></article><article class="en-bento__d en-orange"><p class="en-mono">Dispečink</p><p class="en-num">24 hodin</p><p>Poruchu nahlásíte kdykoli, i o víkendu.</p></article><article class="en-bento__e en-greenbox"><p class="en-mono">Méně CO₂</p><p><b class="en-num">1 830</b> t</p><p>Za letošní rok u našich zákazníků.</p></article></div>

Karty s fotkou

Čtyři karty vedle sebe s fotkou, nadpisem a textem. Text je vidět vždy.

HTML kód
<div class="en-folds"><a class="en-fold mat-rodina" href="#"><span class="en-mono">01</span><div class="en-fold__copy"><h3 class="en-d3">Domácnost</h3><p>Tarify, přechod k nám a správa odběru online.</p></div></a><a class="en-fold mat-mesto" href="#"><span class="en-mono">02</span><div class="en-fold__copy"><h3 class="en-d3">Firmy</h3><p>Stálá cena, jedna faktura a vlastní správce.</p></div></a><a class="en-fold mat-montaz" href="#"><span class="en-mono">03</span><div class="en-fold__copy"><h3 class="en-d3">Fotovoltaika</h3><p>Návrh, montáž a servis od jedné firmy.</p></div></a><a class="en-fold mat-nabijeni" href="#"><span class="en-mono">04</span><div class="en-fold__copy"><h3 class="en-d3">Elektroauto</h3><p>Nabíječka doma a levnější noční proud.</p></div></a></div>

Pás technologií

Vodorovný pás, jde táhnout myší, posouvat šipkami i prstem. Dole průběh.

HTML kód
<div class="en-rail" data-en-rail=""><div aria-label="Technologie" class="en-rail__track" role="region" tabindex="0"><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-panely"></i></span><h3 class="en-d3">Fotovoltaika</h3><span class="en-mono">od 189 000 Kč</span></a><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-montaz"></i></span><h3 class="en-d3">Domácí baterie</h3><span class="en-mono">od 89 000 Kč</span></a><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-nabijeni"></i></span><h3 class="en-d3">Nabíječka auta</h3><span class="en-mono">od 24 900 Kč</span></a><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-vitr"></i></span><h3 class="en-d3">Komunitní energie</h3><span class="en-mono">podíl od 5 000 Kč</span></a><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-stozar"></i></span><h3 class="en-d3">Nová přípojka</h3><span class="en-mono">od 18 000 Kč</span></a><a class="en-railcard" draggable="false" href="#"><span class="en-railcard__photo"><i class="mat-lampa"></i></span><h3 class="en-d3">Chytré řízení domu</h3><span class="en-mono">od 12 900 Kč</span></a></div><div class="en-rail__bar"><i class="en-rail__progress"><b></b></i><button aria-label="Předchozí" data-prev="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg></button><button aria-label="Další" data-next="" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button></div></div>

Panel s odkazy

Bílé řádky na šedém panelu. Při najetí se text podtrhne linkou 1 px.

HTML kód
<div style="max-width:560px"><div class="en-panel"><h3 class="en-d3">Nejčastější požadavky</h3><ul class="en-linkrows"><li><a href="#"><span>Změna záloh</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Samoodečet</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Přepis odběrného místa</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span>Nahlášení poruchy</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul></div></div>

Stav sítě

Tři panely se živou tečkou a malým grafem.

HTML kód
<div class="en-grid en-grid--3"><article class="en-status"><div class="en-status__top"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M32,104a8,8,0,0,1,8-8H56a8,8,0,0,1,0,16H40A8,8,0,0,1,32,104ZM71.43,58.75A8,8,0,0,0,82.75,47.43L71.43,36.12A8,8,0,0,0,60.12,47.43ZM128,40a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V32A8,8,0,0,0,128,40Zm50.91,21.09a8,8,0,0,0,5.66-2.34l11.31-11.32a8,8,0,0,0-11.31-11.31L173.25,47.43a8,8,0,0,0,5.66,13.66ZM192,104a8,8,0,0,0,8,8h16a8,8,0,0,0,0-16H200A8,8,0,0,0,192,104ZM88,112a8,8,0,0,0,8-8,32,32,0,0,1,64,0,8,8,0,0,0,16,0,48,48,0,0,0-96,0A8,8,0,0,0,88,112ZM238.91,220a8,8,0,0,1-6.91,4H24a8,8,0,0,1-7-11.94l40.69-72a8,8,0,0,1,7-4.06H191.3a8,8,0,0,1,7,4.06l40.69,72A8,8,0,0,1,238.91,220Zm-52.27-68H162.27l3.48,16h29.93Zm-37.26,16-3.48-16H110.1l-3.48,16Zm-46.24,16-5.21,24h60.14l-5.21-24ZM60.32,168H90.25l3.48-16H69.36ZM37.71,208H81.55l5.22-24H51.28Zm180.58,0-13.57-24H169.23l5.22,24Z"></path></svg><span class="en-live"><i></i>Živě</span></div><h3 class="en-d4">Sluneční elektrárny</h3><p>42 % spotřeby zákazníků</p><span aria-hidden="true" class="en-status__bars"><i style="height:20%"></i><i style="height:34%"></i><i style="height:62%"></i><i style="height:88%"></i><i style="height:96%"></i><i style="height:80%"></i><i style="height:54%"></i></span></article><article class="en-status"><div class="en-status__top"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M184,184a32,32,0,0,1-32,32c-13.7,0-26.95-8.93-31.5-21.22a8,8,0,0,1,15-5.56C137.74,195.27,145,200,152,200a16,16,0,0,0,0-32H40a8,8,0,0,1,0-16H152A32,32,0,0,1,184,184Zm-64-80a32,32,0,0,0,0-64c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C105.74,60.73,113,56,120,56a16,16,0,0,1,0,32H24a8,8,0,0,0,0,16Zm88-32c-13.7,0-26.95,8.93-31.5,21.22a8,8,0,0,0,15,5.56C193.74,92.73,201,88,208,88a16,16,0,0,1,0,32H32a8,8,0,0,0,0,16H208a32,32,0,0,0,0-64Z"></path></svg><span class="en-live"><i></i>Živě</span></div><h3 class="en-d4">Větrné elektrárny</h3><p>Všechny turbíny v provozu</p><span aria-hidden="true" class="en-status__bars"><i style="height:64%"></i><i style="height:58%"></i><i style="height:72%"></i><i style="height:80%"></i><i style="height:66%"></i><i style="height:74%"></i><i style="height:70%"></i></span></article><article class="en-status"><div class="en-status__top"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M237.66,18.34a8,8,0,0,0-11.32,0l-52.4,52.41-5.37-5.38a32.05,32.05,0,0,0-45.26,0L100,88.69l-6.34-6.35A8,8,0,0,0,82.34,93.66L88.69,100,65.37,123.31a32,32,0,0,0,0,45.26l5.38,5.37-52.41,52.4a8,8,0,0,0,11.32,11.32l52.4-52.41,5.37,5.38a32,32,0,0,0,45.26,0L156,167.31l6.34,6.35a8,8,0,0,0,11.32-11.32L167.31,156l23.32-23.31a32,32,0,0,0,0-45.26l-5.38-5.37,52.41-52.4A8,8,0,0,0,237.66,18.34Zm-116.29,161a16,16,0,0,1-22.62,0L76.69,157.25a16,16,0,0,1,0-22.62L100,111.31,144.69,156Zm57.94-57.94L156,144.69,111.31,100l23.32-23.31a16,16,0,0,1,22.62,0l22.06,22A16,16,0,0,1,179.31,121.37ZM88.57,35A8,8,0,0,1,103.43,29l8,20A8,8,0,0,1,96.57,55ZM24.57,93A8,8,0,0,1,35,88.57l20,8A8,8,0,0,1,49,111.43l-20-8A8,8,0,0,1,24.57,93ZM231.43,163a8,8,0,0,1-10.4,4.46l-20-8A8,8,0,1,1,207,144.57l20,8A8,8,0,0,1,231.43,163Zm-64,58.06A8,8,0,0,1,152.57,227l-8-20A8,8,0,0,1,159.43,201Z"></path></svg><span class="en-live"><i></i>Živě</span></div><h3 class="en-d4">Distribuční síť</h3><p>Bez hlášených poruch</p><span aria-hidden="true" class="en-status__bars"><i style="height:92%"></i><i style="height:96%"></i><i style="height:94%"></i><i style="height:98%"></i><i style="height:96%"></i><i style="height:95%"></i><i style="height:97%"></i></span></article></div>

Obsah

Přínosy

Velké řádky s číslem oddělené linkou.

HTML kód
<ul class="en-lines"><li><span class="en-mono">01</span><h3 class="en-d3">Stálá cena</h3><p>Cenu znáte na celou dobu smlouvy a měnit se nebude.</p></li><li><span class="en-mono">02</span><h3 class="en-d3">Vše online</h3><p>Zálohy, samoodečet i vyúčtování vyřídíte na počítači i v telefonu.</p></li><li><span class="en-mono">03</span><h3 class="en-d3">Přechod za vás</h3><p>Papírování se starým dodavatelem zařídíme a o každém kroku vám dáme vědět.</p></li></ul>

Postup v krocích

Čtyři kroky vedle sebe, na telefonu pod sebou. Štítek, nadpis i text začínají ve všech kartách na stejné výšce.

HTML kód
<ol class="en-steps"><li><span class="en-mono">Krok 1</span><h3 class="en-d3">Nezávazná poptávka</h3><p>Napíšete nám, co vás zajímá. Stačí minuta.</p></li><li><span class="en-mono">Krok 2</span><h3 class="en-d3">Návrh a cena</h3><p>Spočítáme úsporu a pošleme nabídku do dvou dnů.</p></li><li><span class="en-mono">Krok 3</span><h3 class="en-d3">Smlouva online</h3><p>Podepíšete na dálku, bez papírů a cest.</p></li><li><span class="en-mono">Krok 4</span><h3 class="en-d3">Přechod nebo montáž</h3><p>Se starým dodavatelem to vyřídíme za vás.</p></li></ol>

Výpis novinek

Velké řádky s datem a podtrženým nadpisem. Při najetí podtržení zmizí.

HTML kód
<ul class="en-news"><li><a href="#"><span class="en-mono">6. listopadu 2026</span><h3 class="en-d3">Nové tarify pro domácnosti platí od prosince</h3><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span class="en-mono">5. listopadu 2026</span><h3 class="en-d3">V Brně otevíráme zákaznické centrum</h3><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span class="en-mono">3. listopadu 2026</span><h3 class="en-d3">Jak číst vyúčtování v pěti krocích</h3><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li><li><a href="#"><span class="en-mono">29. října 2026</span><h3 class="en-d3">Sdílení elektřiny mezi sousedy spouštíme od ledna</h3><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></li></ul>

Karty novinek

Mřížka s filtrem podle tématu.

HTML kód
<div data-en-filter=""><div aria-label="Téma novinek" class="en-chips" role="group"><button class="is-active" data-cat="all" type="button">Vše</button><button data-cat="zakaznici" type="button">Zákazníci</button><button data-cat="technologie" type="button">Technologie</button><button data-cat="firma" type="button">Firma</button></div><div class="en-grid en-grid--3 en-newsgrid en-filter__items"><a class="en-newscard" data-cat="zakaznici" href="#"><span class="en-newscard__photo"><i class="mat-lampa"></i></span><span class="en-mono">Zákazníci / 6. listopadu 2026</span><h2 class="en-d3">Nové tarify pro domácnosti platí od prosince</h2></a><a class="en-newscard" data-cat="firma" href="#"><span class="en-newscard__photo"><i class="mat-mesto"></i></span><span class="en-mono">Firma / 5. listopadu 2026</span><h2 class="en-d3">V Brně otevíráme zákaznické centrum</h2></a><a class="en-newscard" data-cat="zakaznici" href="#"><span class="en-newscard__photo"><i class="mat-doma"></i></span><span class="en-mono">Zákazníci / 3. listopadu 2026</span><h2 class="en-d3">Jak číst vyúčtování v pěti krocích</h2></a><a class="en-newscard" data-cat="technologie" href="#"><span class="en-newscard__photo"><i class="mat-stozar"></i></span><span class="en-mono">Technologie / 29. října 2026</span><h2 class="en-d3">Sdílení elektřiny mezi sousedy spouštíme od ledna</h2></a><a class="en-newscard" data-cat="technologie" href="#"><span class="en-newscard__photo"><i class="mat-panely"></i></span><span class="en-mono">Technologie / 21. října 2026</span><h2 class="en-d3">Domácí baterie zvládne i výpadek sítě</h2></a><a class="en-newscard" data-cat="firma" href="#"><span class="en-newscard__photo"><i class="mat-vitr"></i></span><span class="en-mono">Firma / 14. října 2026</span><h2 class="en-d3">Podpořili jsme stavbu větrného parku</h2></a></div></div>

Témata s fotkou

Otevřený řádek přepne fotku vedle sebe. Otevřený je vždy jen jeden.

HTML kód
<div class="en-topics" data-en-topics=""><div class="en-accordion"><details data-photo="panely" name="tema-vzorek" open=""><summary>Započtení přebytků<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Co doma nespotřebujete, pošlete do sítě a my to započítáme do vyúčtování.</p></div></details><details data-photo="stozar" name="tema-vzorek"><summary>Výkup přetoků<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Přebytky vykupujeme podle aktuálního ceníku, bez licence a bez papírování.</p></div></details><details data-photo="vitr" name="tema-vzorek"><summary>Sdílení elektřiny<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Přebytky můžete posílat rodičům nebo na chalupu, stačí registrace.</p></div></details><details data-photo="dum" name="tema-vzorek"><summary>Domácí baterie<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Večer doma využijete elektřinu vyrobenou přes den.</p></div></details></div><div class="en-topics__photo"><span class="mat-panely is-active" data-photo="panely"></span><span class="mat-stozar" data-photo="stozar"></span><span class="mat-vitr" data-photo="vitr"></span><span class="mat-dum" data-photo="dum"></span></div></div>

Časté dotazy

Filtr podle tématu a rozbalení jedné odpovědi. Ikona se změní z plus na minus, bez animace.

HTML kód
<div data-en-filter=""><div aria-label="Téma dotazů" class="en-chips" role="group"><button class="is-active" data-cat="all" type="button">Vše</button><button data-cat="prechod" type="button">Přechod</button><button data-cat="vyuctovani" type="button">Vyúčtování</button><button data-cat="technologie" type="button">Technologie</button></div><div class="en-accordion en-filter__items"><details data-cat="prechod" name="dotazy-vzorek" open=""><summary>Musím něco měnit v domě?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Ne. Elektřina teče stejnými dráty a elektroměr zůstává.</p></div></details><details data-cat="prechod" name="dotazy-vzorek"><summary>Jak dlouho přechod trvá?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Obvykle do tří týdnů. O každém kroku vám pošleme zprávu.</p></div></details><details data-cat="prechod" name="dotazy-vzorek"><summary>Hrozí při změně výpadek?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Nehrozí. Změna dodavatele je jen administrativní.</p></div></details><details data-cat="vyuctovani" name="dotazy-vzorek"><summary>Kdy dostanu vyúčtování?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Jednou ročně, vždy do 30 dnů od odečtu. Najdete ho i v aplikaci.</p></div></details><details data-cat="vyuctovani" name="dotazy-vzorek"><summary>Jak změním výši záloh?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>V účtu posunem jezdce, nová výše platí od dalšího měsíce.</p></div></details><details data-cat="technologie" name="dotazy-vzorek"><summary>Vyplatí se mi baterie?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Pokud přes den nejste doma, zvedne vlastní spotřebu až na dvojnásobek.</p></div></details><details data-cat="technologie" name="dotazy-vzorek"><summary>Co když vypadne síť?<span class="en-accordion__mark"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span></summary><div><p>Sestava se záložním režimem napájí vybrané okruhy i bez sítě.</p></div></details></div></div>

Hodnocení

Velké číslo a pět hvězd.

HTML kód
<div class="en-rating"><p class="en-num">94 %</p><div><span class="en-rating__stars"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"></path></svg></span><p>zákazníků s naší fotovoltaikou nás doporučuje.</p></div></div>

Článek s obsahem

Obsah se lepí vlevo a zvýrazňuje aktuální část, text do 760 px.

HTML kód
<div class="en-article"><nav aria-label="Obsah článku" class="en-article__toc" data-en-spy=""><p class="en-mono">Obsah</p><a href="#">Kde začít</a><a href="#">Jak upravit zálohu</a><a href="#">Když si nevíte rady</a></nav><div class="en-prose"><p class="en-lede">Na vyúčtování je pět údajů a podle nich se rozhoduje, kolik zaplatíte. Stačí je najít a během chvíle poznáte, jestli vám sedí záloha i tarif.</p><h2 class="en-d3" id="zacatek">Kde začít</h2><ul><li>Spotřeba v MWh za celé období</li><li>Cena za MWh</li><li>Stálá platba</li><li>Regulovaná část určená státem</li><li>Přeplatek nebo nedoplatek</li></ul><p>Regulovanou část ovlivnit nemůžete, je stejná u všech dodavatelů. Porovnávejte proto jen cenu za MWh a stálou platbu.</p><h2 class="en-d3" id="zaloha">Jak upravit zálohu</h2><ol><li>Přihlaste se do účtu.</li><li>Otevřete odběrné místo a zvolte změnu záloh.</li><li>Potvrďte novou výši, začne platit od dalšího měsíce.</li></ol><h2 class="en-d3" id="pomoc">Když si nevíte rady</h2><p>Zavolejte na <a href="#">+420 123 456 789</a> nebo napište na <a href="#">info@energy.example</a>. Vyúčtování s vámi projdeme řádek po řádku.</p></div></div>

Zásady a podmínky

Dokument s obsahem po straně, třemi údaji v kostce, tabulkou účelů a právy po řádcích. Kontakty na konci jdou zkopírovat.

HTML kód
<div class="en-article"><nav aria-label="Obsah zásad" class="en-article__toc" data-en-spy=""><p class="en-mono">Obsah</p><a href="#">Kdo údaje spravuje</a><a href="#">Jaké údaje máme</a><a href="#">Proč a jak dlouho</a><a href="#">Komu je předáváme</a><a href="#">Vaše práva</a><a href="#">Kde se ptát</a></nav><div class="en-doc"><p class="en-lede">Údaje od vás používáme jen k tomu, kvůli čemu jste nám je dali. Neprodáváme je a nepůjčujeme je pro reklamu.</p><ul class="en-facts"><li><span class="en-mono">Poptávku smažeme za</span><b class="en-num">3 roky</b><p>od posledního kontaktu</p></li><li><span class="en-mono">Na žádost odpovíme do</span><b class="en-num">5 dnů</b><p>počítáme jen pracovní dny</p></li><li><span class="en-mono">Údaje ukládáme</span><b class="en-num">v EU</b><p>na serverech v Česku</p></li></ul><div class="en-prose"><h2 class="en-d3" id="spravce">Kdo údaje spravuje</h2><p>Energy+ s.r.o., IČO 12345678, Sadová 8, 602 00 Brno, zapsaná v obchodním rejstříku vedeném Krajským soudem v Brně, oddíl C, vložka 12345.</p><h2 class="en-d3" id="udaje">Jaké údaje máme</h2><ul><li>Jméno a příjmení, případně název firmy</li><li>E-mail a telefon</li><li>Adresu a číslo odběrného místa</li><li>Spotřebu a platby, pokud u nás odebíráte</li></ul><h2 class="en-d3" id="ucel">Proč a jak dlouho</h2><div aria-label="Účely zpracování" class="en-table" role="region" tabindex="0"><table><thead><tr><th scope="col">Účel</th><th scope="col">Důvod</th><th scope="col">Jak dlouho</th></tr></thead><tbody><tr><th scope="row">Odpověď na poptávku</th><td>Váš zájem o nabídku</td><td>3 roky od posledního kontaktu</td></tr><tr><th scope="row">Smlouva a vyúčtování</th><td>Plnění smlouvy</td><td>Po dobu smlouvy a 3 roky po ní</td></tr><tr><th scope="row">Účetnictví a daně</th><td>Povinnost ze zákona</td><td>10 let</td></tr><tr><th scope="row">Novinky e-mailem</th><td>Váš souhlas</td><td>Do odvolání souhlasu</td></tr></tbody></table></div><h2 class="en-d3" id="predani">Komu je předáváme</h2><p>Jen tam, kde je to nutné: distributorovi kvůli přepisu odběrného místa, montážní firmě kvůli fotovoltaice a účetní kanceláři. Každý z nich smí údaje použít jen pro nás.</p><h2 class="en-d3" id="prava">Vaše práva</h2><dl><div><dt>Přístup</dt><dd>Řekneme vám, jaké údaje o vás máme, a pošleme vám jejich kopii.</dd></div><div><dt>Oprava</dt><dd>Chybný údaj opravíme, jakmile nám dáte vědět.</dd></div><div><dt>Výmaz</dt><dd>Smažeme vše, co nemusíme držet ze zákona.</dd></div><div><dt>Námitka</dt><dd>Když nesouhlasíte s tím, jak údaje používáme, posoudíme to a ozveme se.</dd></div><div><dt>Odvolání souhlasu</dt><dd>Novinky odhlásíte odkazem v každém e-mailu.</dd></div><div><dt>Stížnost</dt><dd>Když nebudete spokojeni, obraťte se na Úřad pro ochranu osobních údajů.</dd></div></dl><h2 class="en-d3" id="dotazy">Kde se ptát</h2><p>Napište nebo zavolejte, odpovíme do pěti pracovních dnů.</p></div><ul class="en-contacts"><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg><a href="#">+420 123 456 789</a><button aria-label="Zkopírovat +420 123 456 789" class="en-contacts__copy" data-copy-text="+420 123 456 789" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg></button></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg><a href="#">info@energy.example</a><button aria-label="Zkopírovat info@energy.example" class="en-contacts__copy" data-copy-text="info@energy.example" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg></button></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg><span>Sadová 8, 602 00 Brno</span></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg><span>Po až pá 8.00 až 18.00</span></li></ul></div></div>

Výzvy a formuláře

Poptávka v krocích

Tři kroky s průběhem. Nejdřív dlaždice, pak údaje o místě, nakonec kontakt. Každý krok se kontroluje zvlášť a chyba vrátí kurzor na první chybné pole.

HTML kód
<div style="max-width:720px"><form class="en-wizard" data-en-wizard="" novalidate=""><div class="en-wizard__progress"><span class="en-mono" data-step-label="">Krok 1 ze 3</span><i><b></b></i></div><fieldset class="en-step"><legend class="en-d3">O co máte zájem?</legend><div class="en-tiles" data-required="Vyberte alespoň jednu možnost."><label class="en-tile"><input name="tema[]" type="checkbox" value="Elektřina"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg><span>Elektřina</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Plyn"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M173.79,51.48a221.25,221.25,0,0,0-41.67-34.34,8,8,0,0,0-8.24,0A221.25,221.25,0,0,0,82.21,51.48C54.59,80.48,40,112.47,40,144a88,88,0,0,0,176,0C216,112.47,201.41,80.48,173.79,51.48ZM96,184c0-27.67,22.53-47.28,32-54.3,9.48,7,32,26.63,32,54.3a32,32,0,0,1-64,0Zm77.27,15.93A47.8,47.8,0,0,0,176,184c0-44-42.09-69.79-43.88-70.86a8,8,0,0,0-8.24,0C122.09,114.21,80,140,80,184a47.8,47.8,0,0,0,2.73,15.93A71.88,71.88,0,0,1,56,144c0-34.41,20.4-63.15,37.52-81.19A216.21,216.21,0,0,1,128,33.54a215.77,215.77,0,0,1,34.48,29.27C193.49,95.5,200,125,200,144A71.88,71.88,0,0,1,173.27,199.93Z"></path></svg><span>Plyn</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Fotovoltaika"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M32,104a8,8,0,0,1,8-8H56a8,8,0,0,1,0,16H40A8,8,0,0,1,32,104ZM71.43,58.75A8,8,0,0,0,82.75,47.43L71.43,36.12A8,8,0,0,0,60.12,47.43ZM128,40a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V32A8,8,0,0,0,128,40Zm50.91,21.09a8,8,0,0,0,5.66-2.34l11.31-11.32a8,8,0,0,0-11.31-11.31L173.25,47.43a8,8,0,0,0,5.66,13.66ZM192,104a8,8,0,0,0,8,8h16a8,8,0,0,0,0-16H200A8,8,0,0,0,192,104ZM88,112a8,8,0,0,0,8-8,32,32,0,0,1,64,0,8,8,0,0,0,16,0,48,48,0,0,0-96,0A8,8,0,0,0,88,112ZM238.91,220a8,8,0,0,1-6.91,4H24a8,8,0,0,1-7-11.94l40.69-72a8,8,0,0,1,7-4.06H191.3a8,8,0,0,1,7,4.06l40.69,72A8,8,0,0,1,238.91,220Zm-52.27-68H162.27l3.48,16h29.93Zm-37.26,16-3.48-16H110.1l-3.48,16Zm-46.24,16-5.21,24h60.14l-5.21-24ZM60.32,168H90.25l3.48-16H69.36ZM37.71,208H81.55l5.22-24H51.28Zm180.58,0-13.57-24H169.23l5.22,24Z"></path></svg><span>Fotovoltaika</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Tepelné čerpadlo"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M212,56a28,28,0,1,0,28,28A28,28,0,0,0,212,56Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,96Zm-84,57V88a8,8,0,0,0-16,0v65a32,32,0,1,0,16,0Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,120,200Zm40-66V48a40,40,0,0,0-80,0v86a64,64,0,1,0,80,0Zm-40,98a48,48,0,0,1-27.42-87.4A8,8,0,0,0,96,138V48a24,24,0,0,1,48,0v90a8,8,0,0,0,3.42,6.56A48,48,0,0,1,120,232Z"></path></svg><span>Tepelné čerpadlo</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Nabíječka auta"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M134.62,123.51a8,8,0,0,1,.81,7.46l-16,40A8,8,0,0,1,104.57,165l11.61-29H96a8,8,0,0,1-7.43-11l16-40A8,8,0,1,1,119.43,91l-11.61,29H128A8,8,0,0,1,134.62,123.51ZM248,86.63V168a24,24,0,0,1-48,0V128a8,8,0,0,0-8-8H176v88h16a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H48V56A24,24,0,0,1,72,32h80a24,24,0,0,1,24,24v48h16a24,24,0,0,1,24,24v40a8,8,0,0,0,16,0V86.63A8,8,0,0,0,229.66,81L210.34,61.66a8,8,0,0,1,11.32-11.32L241,69.66A23.85,23.85,0,0,1,248,86.63ZM160,208V56a8,8,0,0,0-8-8H72a8,8,0,0,0-8,8V208Z"></path></svg><span>Nabíječka auta</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Něco jiného"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><span>Něco jiného</span></label></div><p class="en-field__err" hidden=""></p></fieldset><fieldset class="en-step" hidden=""><legend class="en-d3">Pár údajů o místě</legend><div class="en-field"><span class="en-field__label" id="en-misto">Pro koho to bude</span><details class="en-ms"><summary aria-describedby="en-misto">- vyberte -</summary><div aria-labelledby="en-misto" class="en-ms__list" role="group"><div class="en-ms__group"><label><input name="misto" type="radio" value="Domácnost"/>Domácnost</label><label><input name="misto" type="radio" value="Bytový dům"/>Bytový dům</label><label><input name="misto" type="radio" value="Firma"/>Firma</label><label><input name="misto" type="radio" value="Obec"/>Obec</label></div></div></details></div><div class="en-range"><div class="en-range__top"><label for="en-vydaje">Měsíční účet za energie</label><output class="en-range__value" for="en-vydaje"><b>2800</b> Kč</output></div><input class="en-range__input" id="en-vydaje" max="12000" min="500" name="vydaje" step="100" type="range" value="2800"/><div aria-hidden="true" class="en-range__ticks"><span>500</span><span>4 000</span><span>8 000</span><span>12 000</span></div></div></fieldset><fieldset class="en-step" hidden=""><legend class="en-d3">Kam se vám ozveme?</legend><div class="en-form"><div class="en-field en-form__full"><label for="en-jmeno">Jméno a příjmení (firma)</label><div class="en-control"><input aria-describedby="en-jmeno-err" autocomplete="name" class="en-input" data-msg="Vyplňte jméno a příjmení." id="en-jmeno" maxlength="200" name="jmeno" required="" type="text"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-jmeno-err"></p></div><div class="en-field"><label for="en-email">E-mail</label><div class="en-control"><input aria-describedby="en-email-err" autocomplete="email" class="en-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="en-email" maxlength="200" name="email" required="" type="email"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-email-err"></p></div><div class="en-field"><label for="en-telefon">Telefon</label><div class="en-control"><input aria-describedby="en-telefon-err" autocomplete="tel" class="en-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="en-telefon" maxlength="200" name="telefon" required="" type="tel"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-telefon-err"></p></div><div class="en-field en-form__full"><label for="en-zprava">Zpráva</label><div class="en-control"><textarea class="en-input" id="en-zprava" maxlength="5000" name="zprava" rows="3"></textarea></div></div><div class="en-field en-consent en-form__full"><input aria-describedby="en-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="en-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="en-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="en-field__err" hidden="" id="en-souhlas-err"></p></div><div aria-hidden="true" class="en-form__hp"><label for="en-web">Web</label><input autocomplete="off" id="en-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="en-form__error en-form__full" hidden="" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 123 456 789</a>.</p></div></fieldset><div class="en-wizard__actions"><button class="en-btn en-btn--outline" data-back="" hidden="" type="button"><span>Zpět</span></button><button class="en-btn" data-next="" type="button"><span>Pokračovat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button><button class="en-btn" hidden="" type="submit"><span>Odeslat poptávku</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button></div></form><div class="en-form__ok" hidden="" tabindex="-1"><span class="en-form__tick"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span><h3 class="en-d3">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do dvou pracovních dnů. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div>

Formulář

Popisek je vždy nad polem, zástupný text v poli se nepoužívá. Jméno se jmenuje Jméno a příjmení (firma). E-mail, telefon a souhlas jsou povinné. Správné pole dostane zelenou fajfku, chyba se ukáže pod polem po jeho opuštění. Odeslání skočí na první chybné pole a po něm se formulář vymění za poděkování.

HTML kód
<div style="max-width:720px"><form class="en-form" data-en-form="" novalidate=""><div class="en-field en-form__full"><label for="en-jmeno">Jméno a příjmení (firma)</label><div class="en-control"><input aria-describedby="en-jmeno-err" autocomplete="name" class="en-input" data-msg="Vyplňte jméno a příjmení." id="en-jmeno" maxlength="200" name="jmeno" required="" type="text"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-jmeno-err"></p></div><div class="en-field"><label for="en-email">E-mail</label><div class="en-control"><input aria-describedby="en-email-err" autocomplete="email" class="en-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="en-email" maxlength="200" name="email" required="" type="email"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-email-err"></p></div><div class="en-field"><label for="en-telefon">Telefon</label><div class="en-control"><input aria-describedby="en-telefon-err" autocomplete="tel" class="en-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="en-telefon" maxlength="200" name="telefon" required="" type="tel"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-telefon-err"></p></div><div class="en-field"><span class="en-field__label" id="en-zajem">O co máte zájem</span><details class="en-ms"><summary aria-describedby="en-zajem">- vyberte -</summary><div aria-labelledby="en-zajem" class="en-ms__list" role="group"><div class="en-ms__group"><label><input name="zajem[]" type="checkbox" value="Elektřina"/>Elektřina</label><label><input name="zajem[]" type="checkbox" value="Plyn"/>Plyn</label><label><input name="zajem[]" type="checkbox" value="Fotovoltaika"/>Fotovoltaika</label><label><input name="zajem[]" type="checkbox" value="Tepelné čerpadlo"/>Tepelné čerpadlo</label><label><input name="zajem[]" type="checkbox" value="Nabíječka auta"/>Nabíječka auta</label></div><div class="en-ms__group"><label><input name="zajem[]" type="checkbox" value="Něco jiného, nechám si poradit"/>Něco jiného, nechám si poradit</label></div></div></details></div><div class="en-field"><span class="en-field__label" id="en-misto">Pro koho to bude</span><details class="en-ms"><summary aria-describedby="en-misto">- vyberte -</summary><div aria-labelledby="en-misto" class="en-ms__list" role="group"><div class="en-ms__group"><label><input name="misto" type="radio" value="Domácnost"/>Domácnost</label><label><input name="misto" type="radio" value="Bytový dům"/>Bytový dům</label><label><input name="misto" type="radio" value="Firma"/>Firma</label><label><input name="misto" type="radio" value="Obec"/>Obec</label></div></div></details></div><div class="en-field en-form__full"><label for="en-zprava">Zpráva</label><div class="en-control"><textarea class="en-input" id="en-zprava" maxlength="5000" name="zprava" rows="3"></textarea></div></div><div class="en-field en-consent en-form__full"><input aria-describedby="en-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="en-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="en-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="en-field__err" hidden="" id="en-souhlas-err"></p></div><div aria-hidden="true" class="en-form__hp"><label for="en-web">Web</label><input autocomplete="off" id="en-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="en-form__error en-form__full" hidden="" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 123 456 789</a>.</p><div class="en-form__full"><button class="en-btn" type="submit"><span>Odeslat poptávku</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button></div></form><div class="en-form__ok" hidden="" tabindex="-1"><span class="en-form__tick"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span><h3 class="en-d3">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do dvou pracovních dnů. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div>

Pás s poptávkou

Oranžový pás přes celou šířku. Vlevo nadpis a fotka, vpravo karta s poptávkou v krocích.

HTML kód
<section class="en-band en-orange" id="poptavka"><div class="en-wrap en-band__in"><div class="en-band__copy"><p class="en-mono">Konzultace zdarma</p><h2 class="en-d2">Tři kroky a ozveme se vám</h2><div class="en-band__photo mat-technik"></div></div><div class="en-band__card"><form class="en-wizard" data-en-wizard="" novalidate=""><div class="en-wizard__progress"><span class="en-mono" data-step-label="">Krok 1 ze 3</span><i><b></b></i></div><fieldset class="en-step"><legend class="en-d3">O co máte zájem?</legend><div class="en-tiles" data-required="Vyberte alespoň jednu možnost."><label class="en-tile"><input name="tema[]" type="checkbox" value="Elektřina"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z"></path></svg><span>Elektřina</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Plyn"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M173.79,51.48a221.25,221.25,0,0,0-41.67-34.34,8,8,0,0,0-8.24,0A221.25,221.25,0,0,0,82.21,51.48C54.59,80.48,40,112.47,40,144a88,88,0,0,0,176,0C216,112.47,201.41,80.48,173.79,51.48ZM96,184c0-27.67,22.53-47.28,32-54.3,9.48,7,32,26.63,32,54.3a32,32,0,0,1-64,0Zm77.27,15.93A47.8,47.8,0,0,0,176,184c0-44-42.09-69.79-43.88-70.86a8,8,0,0,0-8.24,0C122.09,114.21,80,140,80,184a47.8,47.8,0,0,0,2.73,15.93A71.88,71.88,0,0,1,56,144c0-34.41,20.4-63.15,37.52-81.19A216.21,216.21,0,0,1,128,33.54a215.77,215.77,0,0,1,34.48,29.27C193.49,95.5,200,125,200,144A71.88,71.88,0,0,1,173.27,199.93Z"></path></svg><span>Plyn</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Fotovoltaika"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M32,104a8,8,0,0,1,8-8H56a8,8,0,0,1,0,16H40A8,8,0,0,1,32,104ZM71.43,58.75A8,8,0,0,0,82.75,47.43L71.43,36.12A8,8,0,0,0,60.12,47.43ZM128,40a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V32A8,8,0,0,0,128,40Zm50.91,21.09a8,8,0,0,0,5.66-2.34l11.31-11.32a8,8,0,0,0-11.31-11.31L173.25,47.43a8,8,0,0,0,5.66,13.66ZM192,104a8,8,0,0,0,8,8h16a8,8,0,0,0,0-16H200A8,8,0,0,0,192,104ZM88,112a8,8,0,0,0,8-8,32,32,0,0,1,64,0,8,8,0,0,0,16,0,48,48,0,0,0-96,0A8,8,0,0,0,88,112ZM238.91,220a8,8,0,0,1-6.91,4H24a8,8,0,0,1-7-11.94l40.69-72a8,8,0,0,1,7-4.06H191.3a8,8,0,0,1,7,4.06l40.69,72A8,8,0,0,1,238.91,220Zm-52.27-68H162.27l3.48,16h29.93Zm-37.26,16-3.48-16H110.1l-3.48,16Zm-46.24,16-5.21,24h60.14l-5.21-24ZM60.32,168H90.25l3.48-16H69.36ZM37.71,208H81.55l5.22-24H51.28Zm180.58,0-13.57-24H169.23l5.22,24Z"></path></svg><span>Fotovoltaika</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Tepelné čerpadlo"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M212,56a28,28,0,1,0,28,28A28,28,0,0,0,212,56Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,96Zm-84,57V88a8,8,0,0,0-16,0v65a32,32,0,1,0,16,0Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,120,200Zm40-66V48a40,40,0,0,0-80,0v86a64,64,0,1,0,80,0Zm-40,98a48,48,0,0,1-27.42-87.4A8,8,0,0,0,96,138V48a24,24,0,0,1,48,0v90a8,8,0,0,0,3.42,6.56A48,48,0,0,1,120,232Z"></path></svg><span>Tepelné čerpadlo</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Nabíječka auta"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M134.62,123.51a8,8,0,0,1,.81,7.46l-16,40A8,8,0,0,1,104.57,165l11.61-29H96a8,8,0,0,1-7.43-11l16-40A8,8,0,1,1,119.43,91l-11.61,29H128A8,8,0,0,1,134.62,123.51ZM248,86.63V168a24,24,0,0,1-48,0V128a8,8,0,0,0-8-8H176v88h16a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H48V56A24,24,0,0,1,72,32h80a24,24,0,0,1,24,24v48h16a24,24,0,0,1,24,24v40a8,8,0,0,0,16,0V86.63A8,8,0,0,0,229.66,81L210.34,61.66a8,8,0,0,1,11.32-11.32L241,69.66A23.85,23.85,0,0,1,248,86.63ZM160,208V56a8,8,0,0,0-8-8H72a8,8,0,0,0-8,8V208Z"></path></svg><span>Nabíječka auta</span></label><label class="en-tile"><input name="tema[]" type="checkbox" value="Něco jiného"/><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg><span>Něco jiného</span></label></div><p class="en-field__err" hidden=""></p></fieldset><fieldset class="en-step" hidden=""><legend class="en-d3">Pár údajů o místě</legend><div class="en-field"><span class="en-field__label" id="en-misto">Pro koho to bude</span><details class="en-ms"><summary aria-describedby="en-misto">- vyberte -</summary><div aria-labelledby="en-misto" class="en-ms__list" role="group"><div class="en-ms__group"><label><input name="misto" type="radio" value="Domácnost"/>Domácnost</label><label><input name="misto" type="radio" value="Bytový dům"/>Bytový dům</label><label><input name="misto" type="radio" value="Firma"/>Firma</label><label><input name="misto" type="radio" value="Obec"/>Obec</label></div></div></details></div><div class="en-range"><div class="en-range__top"><label for="en-vydaje">Měsíční účet za energie</label><output class="en-range__value" for="en-vydaje"><b>2800</b> Kč</output></div><input class="en-range__input" id="en-vydaje" max="12000" min="500" name="vydaje" step="100" type="range" value="2800"/><div aria-hidden="true" class="en-range__ticks"><span>500</span><span>4 000</span><span>8 000</span><span>12 000</span></div></div></fieldset><fieldset class="en-step" hidden=""><legend class="en-d3">Kam se vám ozveme?</legend><div class="en-form"><div class="en-field en-form__full"><label for="en-jmeno">Jméno a příjmení (firma)</label><div class="en-control"><input aria-describedby="en-jmeno-err" autocomplete="name" class="en-input" data-msg="Vyplňte jméno a příjmení." id="en-jmeno" maxlength="200" name="jmeno" required="" type="text"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-jmeno-err"></p></div><div class="en-field"><label for="en-email">E-mail</label><div class="en-control"><input aria-describedby="en-email-err" autocomplete="email" class="en-input" data-msg="Vyplňte e-mail." data-msg-format="Zadejte e-mail ve tvaru jmeno@domena.cz." id="en-email" maxlength="200" name="email" required="" type="email"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-email-err"></p></div><div class="en-field"><label for="en-telefon">Telefon</label><div class="en-control"><input aria-describedby="en-telefon-err" autocomplete="tel" class="en-input" data-msg="Vyplňte telefon." data-msg-format="Zadejte telefon, např. 123 456 789 nebo +420 123 456 789." id="en-telefon" maxlength="200" name="telefon" required="" type="tel"/><span class="en-control__ok"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span></div><p class="en-field__err" hidden="" id="en-telefon-err"></p></div><div class="en-field en-form__full"><label for="en-zprava">Zpráva</label><div class="en-control"><textarea class="en-input" id="en-zprava" maxlength="5000" name="zprava" rows="3"></textarea></div></div><div class="en-field en-consent en-form__full"><input aria-describedby="en-souhlas-err" data-msg="Potvrďte prosím souhlas se zpracováním osobních údajů." id="en-souhlas" name="souhlas" required="" type="checkbox" value="1"/><label for="en-souhlas">Souhlasím se zpracováním <a href="#">osobních údajů</a> za účelem odpovědi na moji poptávku.</label><p class="en-field__err" hidden="" id="en-souhlas-err"></p></div><div aria-hidden="true" class="en-form__hp"><label for="en-web">Web</label><input autocomplete="off" id="en-web" name="web" tabindex="-1" type="text"/></div><input name="kontrola" type="hidden" value=""/><p class="en-form__error en-form__full" hidden="" role="alert">Poptávku se nepodařilo odeslat. Zkontrolujte prosím vyplněná pole nebo nám zavolejte na <a href="#">+420 123 456 789</a>.</p></div></fieldset><div class="en-wizard__actions"><button class="en-btn en-btn--outline" data-back="" hidden="" type="button"><span>Zpět</span></button><button class="en-btn" data-next="" type="button"><span>Pokračovat</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button><button class="en-btn" hidden="" type="submit"><span>Odeslat poptávku</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></button></div></form><div class="en-form__ok" hidden="" tabindex="-1"><span class="en-form__tick"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span><h3 class="en-d3">Děkujeme, poptávku jsme dostali.</h3><p>Ozveme se do dvou pracovních dnů. V ukázce se nic neodesílá.</p><p>Spěcháte? Volejte <a href="#">+420 123 456 789</a>.</p></div></div></div></section>

Velká výzva

Oranžový pás s velkým textem a tlačítkem. Tloušťka písmen se pomalu vlní a reaguje na kurzor. Na konci stránky, jen jednou.

HTML kód
<section class="en-closing en-orange"><div class="en-wrap"><h2 aria-label="Přepněte na Energy+" class="en-d0 en-closing__title" data-en-voltage=""><span class="en-closing__line">Přepněte</span> <span class="en-closing__line">na Energy+</span></h2><div class="en-closing__foot"><p class="en-lede">Přechod vyřídíme za vás. Nic neplatíte a o proud nepřijdete ani na minutu.</p><a class="en-btn en-btn--ink" href="#"><span>Spočítat cenu</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></div></section>

Kontakty

Oranžová ikona a údaj. Telefon a e-mail jdou zkopírovat, potvrdí to oznámení.

HTML kód
<div style="max-width:560px"><ul class="en-contacts"><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg><a href="#">+420 123 456 789</a><button aria-label="Zkopírovat +420 123 456 789" class="en-contacts__copy" data-copy-text="+420 123 456 789" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg></button></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"></path></svg><a href="#">info@energy.example</a><button aria-label="Zkopírovat info@energy.example" class="en-contacts__copy" data-copy-text="info@energy.example" type="button"><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg></button></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg><span>Sadová 8, 602 00 Brno</span></li><li><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"></path></svg><span>Po až pá 8.00 až 18.00</span></li></ul></div>

Stránka nenalezena

Tmavá stránka s nadpisem, vysvětlením a cestou zpět.

HTML kód
<section class="en-lost en-ink"><div class="en-wrap"><p class="en-mono">Chyba 404</p><h1 class="en-d1">Tady je výpadek</h1><p class="en-lede">Stránka tu není. Vraťte se na úvod, nebo zavolejte na <a href="#">+420 123 456 789</a>.</p><a class="en-btn" href="#"><span>Zpět na úvod</span><svg aria-hidden="true" class="en-icon" viewbox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></div></section>

Stránky ukázkového webu

Domů Elektřina Fotovoltaika Podpora Novinky Článek Kontakt Osobní údaje Stránka nenalezena