Skip to content

Instantly share code, notes, and snippets.

@Dmatys

Dmatys/Index.html

Created March 27, 2026 18:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Dmatys/f11a26e330875f33597052a683e1e873 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Dmatys/f11a26e330875f33597052a683e1e873 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Index.html
!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EnergySave</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
:root { --g:#2ECC71; --dg:#1a9e52; --bg:#0f1923; --c1:#1a2634; --c2:#223044; --txt:#f0f4f8; --m:#8899aa; --a:#4FC3F7; }
body { font-family:-apple-system,sans-serif; background:var(--bg); color:var(--txt); min-height:100vh; }
.sc { display:none; min-height:100vh; flex-direction:column; }
.sc.on { display:flex; }
#s0 { background:linear-gradient(160deg,#0f1923,#1a3a2a); align-items:center; justify-content:center; text-align:center; padding:40px 22px; }
.logo { width:90px; height:90px; border-radius:50%; background:linear-gradient(135deg,var(--g),var(--a)); display:flex; align-items:center; justify-content:center; font-size:40px; margin:0 auto 24px; animation:pu 2.5s infinite; }
@keyframes pu { 0%,100%{box-shadow:0 0 30px rgba(46,204,113,.3)} 50%{box-shadow:0 0 60px rgba(46,204,113,.6)} }
h1 { font-size:30px; font-weight:900; margin-bottom:10px; }
h1 span { color:var(--g); }
.sub { color:var(--m); font-size:15px; line-height:1.6; max-width:290px; margin:0 auto 30px; }
.stats { display:flex; gap:10px; margin-bottom:32px; width:100%; }
.st { background:var(--c1); border-radius:14px; padding:14px 6px; flex:1; text-align:center; }
.st .n { font-size:19px; font-weight:800; color:var(--g); }
.st .l { font-size:10px; color:var(--m); margin-top:3px; }
.btn { background:linear-gradient(135deg,var(--g),var(--dg)); color:#fff; border:none; border-radius:14px; padding:15px; font-size:16px; font-weight:700; cursor:pointer; width:100%; box-shadow:0 4px 20px rgba(46,204,113,.4); }
.btn2 { background:transparent; border:1.5px solid rgba(255,255,255,.15); color:var(--m); border-radius:14px; padding:13px; font-size:14px; cursor:pointer; width:100%; margin-top:10px; }
/* CHAT */
#s1 { background:var(--bg); }
.pb { height:3px; background:rgba(255,255,255,.06); }
.pf { height:100%; background:var(--g); transition:width .5s; }
.hdr { background:var(--c1); padding:13px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); }
.av { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--g),var(--a)); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.hdr h3 { font-size:14px; font-weight:700; }
.hdr p { font-size:11px; color:var(--g); }
.dot { width:6px; height:6px; border-radius:50%; background:var(--g); display:inline-block; margin-right:3px; animation:bl 1.5s infinite; }
@keyframes bl { 0%,100%{opacity:1} 50%{opacity:.3} }
.msgs { flex:1; overflow-y:auto; padding:16px 13px; display:flex; flex-direction:column; gap:11px; }
.m { max-width:83%; animation:fi .4s; }
@keyframes fi { from{opacity:0;transform:translateY(7px)} to{opacity:1} }
.m.b { align-self:flex-start; }
.m.u { align-self:flex-end; }
.bb { padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; }
.m.b .bb { background:var(--c2); border-bottom-left-radius:3px; }
.m.u .bb { background:linear-gradient(135deg,var(--g),var(--dg)); border-bottom-right-radius:3px; color:#fff; }
.mt { font-size:10px; color:var(--m); margin-top:2px; padding:0 3px; }
.m.u .mt { text-align:right; }
.typ { display:flex; align-items:center; gap:4px; background:var(--c2); padding:10px 14px; border-radius:16px; border-bottom-left-radius:3px; width:fit-content; }
.typ span { width:6px; height:6px; border-radius:50%; background:var(--m); animation:bo 1.2s infinite; }
.typ span:nth-child(2){animation-delay:.2s} .typ span:nth-child(3){animation-delay:.4s}
@keyframes bo { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }
.qrs { display:flex; flex-wrap:wrap; gap:7px; padding:0 13px 8px; }
.qr { background:var(--c2); border:1.5px solid rgba(46,204,113,.3); border-radius:18px; padding:7px 13px; font-size:12px; color:var(--g); cursor:pointer; }
.qr:active { background:var(--g); color:#fff; }
.ci { padding:10px 13px; background:var(--c1); display:flex; align-items:center; gap:9px; border-top:1px solid rgba(255,255,255,.06); }
.ci input { flex:1; background:var(--c2); border:1.5px solid rgba(255,255,255,.08); border-radius:22px; padding:9px 14px; color:var(--txt); font-size:14px; outline:none; }
.ci input::placeholder { color:var(--m); }
.mic { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--g),var(--dg)); border:none; color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; box-shadow:0 4px 14px rgba(46,204,113,.4); }
.mic.r { animation:re 1s infinite; background:#e74c3c; }
@keyframes re { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.4)} 50%{box-shadow:0 0 0 10px rgba(231,76,60,0)} }
/* REPORT */
#s2 { background:var(--bg); overflow-y:auto; }
.rh { background:linear-gradient(160deg,#1a3a2a,#0f1923); padding:34px 20px 24px; text-align:center; }
.rh h2 { font-size:21px; font-weight:800; margin-bottom:7px; }
.bdg { background:linear-gradient(135deg,var(--g),var(--a)); border-radius:18px; padding:16px 26px; margin:16px 0; display:inline-block; }
.bdg .amt { font-size:38px; font-weight:900; color:#fff; }
.bdg .lbl { font-size:12px; color:rgba(255,255,255,.8); }
.rb { padding:16px 13px; display:flex; flex-direction:column; gap:11px; }
.rc { background:var(--c1); border-radius:16px; padding:15px; border-left:4px solid var(--g); }
.rc.md { border-left-color:var(--a); }
.rc.lw { border-left-color:#f39c12; }
.rt { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.ri { font-size:24px; }
.rtl { font-size:14px; font-weight:700; }
.pr { font-size:10px; padding:2px 8px; border-radius:9px; background:rgba(46,204,113,.15); color:var(--g); margin-top:2px; display:inline-block; }
.pr.md { background:rgba(79,195,247,.15); color:var(--a); }
.pr.lw { background:rgba(243,156,18,.15); color:#f39c12; }
.rd { font-size:12px; color:var(--m); line-height:1.5; margin-bottom:9px; }
.rm { display:flex; gap:12px; }
.rmi .v { font-size:14px; font-weight:700; color:var(--g); }
.rmi .v.b { color:var(--a); }
.rmi .k { font-size:10px; color:var(--m); }
.fb { width:100%; padding:11px; background:linear-gradient(135deg,var(--g),var(--dg)); border:none; border-radius:11px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; margin-top:9px; }
.cs { padding:0 13px 34px; }
.cb { width:100%; padding:16px; background:linear-gradient(135deg,var(--g),var(--dg)); border:none; border-radius:15px; color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 5px 22px rgba(46,204,113,.4); }
</style>
</head>
<body>
<div id="s0" class="sc on">
<div class="logo">⚡</div>
<h1>Energy<span>Save</span></h1>
<p class="sub">Узнайте где вы теряете деньги на энергии — и как сэкономить до 60%</p>
<div class="stats">
<div class="st"><div class="n">€840</div><div class="l">экономия/год</div></div>
<div class="st"><div class="n">5 мин</div><div class="l">аудит</div></div>
<div class="st"><div class="n">FREE</div><div class="l">бесплатно</div></div>
</div>
<button class="btn" onclick="startAudit()">🎙️ Начать голосовой аудит</button>
<button class="btn2" onclick="go('s2')">Посмотреть пример отчёта →</button>
</div>
<div id="s1" class="sc">
<div class="pb"><div class="pf" id="pf" style="width:0%"></div></div>
<div class="hdr">
<div class="av">🤖</div>
<div><h3>EnergyAI Ассистент</h3><p><span class="dot"></span>онлайн · анализирует ваш дом</p></div>
</div>
<div class="msgs" id="msgs"></div>
<div class="qrs" id="qrs"></div>
<div class="ci">
<input type="text" id="inp" placeholder="Напишите или нажмите 🎙️" onkeydown="if(event.key==='Enter')st()">
<button class="mic" id="mb" onclick="tm()">🎙️</button>
</div>
</div>
<div id="s2" class="sc">
<div class="rh">
<p style="color:var(--m);font-size:12px;margin-bottom:6px">📍 Варшава · Панельный дом 85м²</p>
<h2>Ваш план энергосбережения</h2>
<div class="bdg"><div class="amt">€1 200</div><div class="lbl">потенциальная экономия в год</div></div>
<p style="color:var(--m);font-size:12px">Окупаемость: <strong style="color:var(--g)">3–5 лет</strong></p>
</div>
<div class="rb">
<div class="rc">
<div class="rt"><div class="ri">🌡️</div><div><div class="rtl">Замена котла</div><div class="pr">🔴 Высокий приоритет</div></div></div>
<div class="rd">Котёл Junkers 2005г — КПД 72%. Конденсационный котёл даст 95%+. Самая быстрая окупаемость.</div>
<div class="rm">
<div class="rmi"><div class="v">€380</div><div class="k">экономия/год</div></div>
<div class="rmi"><div class="v b">€2 400</div><div class="k">стоимость</div></div>
<div class="rmi"><div class="v">6 лет</div><div class="k">окупаемость</div></div>
</div>
<button class="fb" onclick="alert('🔨 Найдено 4 подрядчика:\n\n1. TermoMax Warszawa ⭐4.9\n2. EcoHeat Polska ⭐4.8\n3. Kotły Expert ⭐4.7\n4. GreenBoiler ⭐4.6')">🔍 Найти подрядчика</button>
</div>
<div class="rc md">
<div class="rt"><div class="ri">🪟</div><div><div class="rtl">Замена окон</div><div class="pr md">🟡 Средний приоритет</div></div></div>
<div class="rd">Однокамерные стеклопакеты теряют 25% тепла. Тройные снизят теплопотери на 40%.</div>
<div class="rm">
<div class="rmi"><div class="v">€280</div><div class="k">экономия/год</div></div>
<div class="rmi"><div class="v b">€4 500</div><div class="k">стоимость</div></div>
<div class="rmi"><div class="v">16 лет</div><div class="k">окупаемость</div></div>
</div>
<button class="fb" onclick="alert('🪟 Найдено 6 поставщиков окон!')">🔍 Найти подрядчика</button>
</div>
<div class="rc md">
<div class="rt"><div class="ri">☀️</div><div><div class="rtl">Солнечные панели</div><div class="pr md">🟡 Средний приоритет</div></div></div>
<div class="rd">4 кВт система покроет 65% электроэнергии. Субсидия Mój Prąd до 6 000 PLN.</div>
<div class="rm">
<div class="rmi"><div class="v">€350</div><div class="k">экономия/год</div></div>
<div class="rmi"><div class="v b">€5 500</div><div class="k">после субсидии</div></div>
<div class="rmi"><div class="v">9 лет</div><div class="k">окупаемость</div></div>
</div>
<button class="fb" onclick="alert('☀️ Найдено 3 инсталлятора!')">🔍 Найти подрядчика</button>
</div>
<div class="rc lw">
<div class="rt"><div class="ri">💨</div><div><div class="rtl">Рекуперация воздуха</div><div class="pr lw">🟢 Перспектива</div></div></div>
<div class="rd">Система рекуперации вернёт до 80% тепла из вытяжного воздуха. Рекомендуем после котла и окон.</div>
<div class="rm">
<div class="rmi"><div class="v">€190</div><div class="k">экономия/год</div></div>
<div class="rmi"><div class="v b">€3 200</div><div class="k">стоимость</div></div>
<div class="rmi"><div class="v">17 лет</div><div class="k">окупаемость</div></div>
</div>
<button class="fb" onclick="alert('💨 Найдено 2 специалиста по вентиляции!')">🔍 Найти подрядчика</button>
</div>
</div>
<div class="cs">
<button class="cb" onclick="alert('📋 Финальная версия:\nВведите email — получите PDF-отчёт и мы свяжем вас с подрядчиком!')">📋 Получить полный отчёт</button>
<button class="btn2" style="margin-top:10px" onclick="go('s0')">← На главную</button>
</div>
</div>
<script>
function go(id){document.querySelectorAll('.sc').forEach(s=>s.classList.remove('on'));document.getElementById(id).classList.add('on');window.scrollTo(0,0);}
const conv=[
{b:"Привет! 👋 Я ваш персональный энергоаудитор.\n\nПомогу понять где вы теряете деньги на отоплении. Займёт 5 минут. Готовы?",r:["Да, поехали! 🚀","Как это работает?"],p:5},
{b:"Отлично!\n\nУ вас квартира или частный дом?",r:["🏢 Квартира","🏠 Частный дом"],p:18},
{b:"Примерно какого года постройки и какая площадь?",r:["До 1990, ~70м²","До 1990, ~90м²","После 2000, ~85м²"],p:32},
{b:"Понял — панельный дом 80-х. Такие дома теряют больше всего тепла через окна и стыки.\n\nОкна уже менялись?",r:["Нет, оригинальные","Да, 10+ лет назад","Новые, до 5 лет"],p:46},
{b:"Теперь про отопление — централизованное или свой котёл?",r:["Центральное","Свой газовый котёл","Тепловой насос","Электрическое"],p:60},
{b:"Хорошо! Знаете марку котла и год? Или сфотографируйте — определю модель 📸",r:["Junkers, ~2005","Vaillant, ~2010","Не знаю","📸 Сфотографировать"],p:73},
{b:"Последнее! Сколько примерно платите за отопление + электричество зимой в месяц?",r:["До €100","€100–200","€200–350","Больше €350"],p:87},
{b:"Отлично! Данных достаточно 🎯\n\nСчитаю ваш энергетический профиль...",r:[],p:95,last:true}
];
let step=0,rec=false;
function ts(){return new Date().toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});}
function addM(t,b){const m=document.getElementById('msgs'),d=document.createElement('div');d.className='m '+(b?'b':'u');d.innerHTML=`<div class="bb">${t.replace(/\n/g,'<br>')}</div><div class="mt">${ts()}</div>`;m.appendChild(d);m.scrollTop=m.scrollHeight;}
function showT(){const m=document.getElementById('msgs'),d=document.createElement('div');d.className='m b';d.id='ty';d.innerHTML='<div class="typ"><span></span><span></span><span></span></div>';m.appendChild(d);m.scrollTop=m.scrollHeight;}
function rmT(){const t=document.getElementById('ty');if(t)t.remove();}
function setQR(rs){const q=document.getElementById('qrs');q.innerHTML='';rs.forEach(r=>{const b=document.createElement('button');b.className='qr';b.textContent=r;b.onclick=()=>pick(r);q.appendChild(b);});}
function pick(t){document.getElementById('qrs').innerHTML='';addM(t,false);step++;setTimeout(next,700);}
function st(){const i=document.getElementById('inp'),t=i.value.trim();if(!t)return;i.value='';document.getElementById('qrs').innerHTML='';addM(t,false);step++;setTimeout(next,700);}
function tm(){const b=document.getElementById('mb');if(!rec){rec=true;b.textContent='⏹️';b.classList.add('r');setTimeout(()=>{rec=false;b.textContent='🎙️';b.classList.remove('r');const fa=["Квартира, панельный","85 квадратов, 1982 год","Котёл Junkers","Около €180 зимой"];addM('🎙️ '+fa[Math.min(step,fa.length-1)],false);step++;setTimeout(next,700);},1800);}}
function next(){if(step>=conv.length)return;const c=conv[step];showT();document.getElementById('pf').style.width=c.p+'%';setTimeout(()=>{rmT();addM(c.b,true);if(c.r&&c.r.length)setQR(c.r);if(c.last){setTimeout(()=>{document.getElementById('pf').style.width='100%';setTimeout(()=>go('s2'),700);},2000);}},c.b.length>80?1500:900);}
function startAudit(){go('s1');document.getElementById('msgs').innerHTML='';step=0;setTimeout(next,400);}
</script>
</body>
</html>
@Dmatys

Dmatys commented Mar 27, 2026

Copy link
Copy Markdown
Author

First version

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment