Skip to content

Instantly share code, notes, and snippets.

@Dmatys

Dmatys/gist:fd5da62e5c3f75393259b99a3eb6254f

Created March 27, 2026 18:39
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Dmatys/fd5da62e5c3f75393259b99a3eb6254f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment