// Made by tools/make_web.py from the files in web/ - edit those, not this.
#pragma once

const char APP_HTML[] = R"~~~(<!doctype html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#0f172a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Alarm">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icon.png">
<link rel="icon" href="/icon.png">
<title>Motion Alarm</title>
<style>
:root{--bg:#0f172a;--card:#1e293b;--key:#334155;--text:#f1f5f9;--muted:#94a3b8;--off:#475569;--arming:#b45309;--armed:#1d4ed8;--count:#c2410c;--alarm:#dc2626;--ok:#15803d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:16px;padding-top:max(16px,env(safe-area-inset-top))}
.wrap{max-width:440px;margin:0 auto}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h1{font-size:20px;margin:0}
#conn{font-size:13px;color:var(--muted)}
#conn i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:6px}
#conn.bad i{background:var(--alarm)}
.status{border-radius:18px;padding:22px 16px;text-align:center;background:var(--off);transition:background .3s}
.status .big{font-size:36px;font-weight:800;letter-spacing:1px}
.status .sub{margin-top:4px;font-size:17px}
.s-ARMING{background:var(--arming)}.s-ARMED{background:var(--armed)}.s-COUNTDOWN{background:var(--count)}
.s-ALARM{background:var(--alarm);animation:flash 1s infinite}
@keyframes flash{50%{background:#7f1d1d}}
.card{background:var(--card);border-radius:16px;padding:16px;margin-top:14px}
.dots{display:flex;justify-content:center;gap:12px;height:20px;margin-bottom:14px}
.dots span{width:15px;height:15px;border-radius:50%;border:2px solid var(--muted)}
.dots span.f{background:var(--text);border-color:var(--text)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
button{font:inherit;border:0;border-radius:14px;color:var(--text);cursor:pointer}
.pad button{background:var(--key);font-size:26px;font-weight:600;padding:13px 0}
.pad button:active{filter:brightness(1.3)}
.act{width:100%;margin-top:12px;padding:16px;font-size:19px;font-weight:700;background:var(--armed)}
.act.off{background:var(--ok)}
.act:disabled{opacity:.4}
#msg{min-height:24px;text-align:center;margin-top:10px;font-weight:600}
.row{display:flex;gap:10px}
.row button{flex:1;padding:13px;font-size:15px;font-weight:600;background:var(--key)}
.info{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;margin-top:12px}
h2{font-size:13px;margin:0 0 6px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.8px}
ul{list-style:none;margin:0;padding:0}
li{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--key);font-size:15px}
li:first-child{border-top:0}
li time{color:var(--muted);font-size:13px;white-space:nowrap;margin-left:10px}
.topic{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;background:var(--bg);padding:8px 12px;border-radius:8px;margin:8px 0;user-select:all;word-break:break-all}
.small{font-size:14px;color:var(--muted)}
a{color:#93c5fd}
</style></head><body><div class="wrap">
<header><h1>Motion Alarm</h1><div id="conn"><i></i><span>Connecting&hellip;</span></div></header>
<div id="st" class="status"><div class="big" id="big">&hellip;</div><div class="sub" id="sub">&nbsp;</div></div>
<div class="card">
  <div class="dots" id="dots"></div>
  <div class="pad" id="pad"></div>
  <button class="act" id="act" disabled>&hellip;</button>
  <div id="msg"></div>
</div>
<div class="card">
  <div class="row"><button id="test">Test siren</button><button id="mute">Sound: on</button></div>
  <div class="info"><span id="sensor">Sensor: &ndash;</span><span id="count"></span></div>
</div>
<div class="card"><h2>History</h2><ul id="ev"><li>Nothing yet</li></ul></div>
<div class="card"><h2>Phone alerts</h2>
  <div class="small">In the free <b>ntfy</b> app, tap <b>+</b> and subscribe to:</div>
  <div class="topic" id="topic">&hellip;</div>
  <div class="small">You'll get an alert whenever the siren goes off, wherever you are. <a id="sub" href="#">Open in ntfy</a></div>
</div>
</div>
<script>
const $=id=>document.getElementById(id);
let code='',S=null,busy=false;
const NAMES={OFF:['OFF','Movement is ignored'],ARMING:['ARMING','Leave the room now'],ARMED:['ARMED','Watching for movement'],COUNTDOWN:['MOTION!','Type the code to stop it'],ALARM:['ALARM!','The siren is going off']};
['1','2','3','4','5','6','7','8','9','⌫','0','OK'].forEach(k=>{const b=document.createElement('button');b.textContent=k;b.onclick=()=>press(k);$('pad').appendChild(b)});
function say(t,good){$('msg').textContent=t;$('msg').style.color=good?'#86efac':'#fca5a5'}
function press(k){if(k==='OK'){go();return}if(k==='⌫')code=code.slice(0,-1);else if(code.length<8)code+=k;say('');dots()}
function dots(){const d=$('dots');d.innerHTML='';for(let i=0;i<Math.max(4,code.length);i++){const s=document.createElement('span');if(i<code.length)s.className='f';d.appendChild(s)}upd()}
function upd(){const a=$('act');if(!S){a.disabled=true;return}const off=S.state==='OFF';a.textContent=off?'Arm':S.state==='ARMING'?'Cancel':'Turn off';a.className='act'+(off?'':' off');a.disabled=busy||code.length<4}
async function cmd(a){busy=true;upd();try{const r=await fetch('/api/cmd',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams({a:a,c:code})});const j=await r.json();say(j.msg,j.ok);return j.ok}catch(e){say('Could not reach the alarm');return false}finally{busy=false;poll()}}
async function go(){if(!S||code.length<4)return;if(await cmd(S.state==='OFF'?'arm':'disarm')){code='';dots()}}
function needCode(a){if(code.length<4){say('Type your code first');return}cmd(a)}
$('act').onclick=go;$('test').onclick=()=>needCode('test');$('mute').onclick=()=>needCode('mute');
function when(s){if(s<60)return'just now';const d=new Date(Date.now()-s*1000),t=d.toLocaleTimeString([],{hour:'numeric',minute:'2-digit'});return(Date.now()-d<864e5&&d.getDate()===new Date().getDate())?t:d.toLocaleDateString([],{weekday:'short'})+' '+t}
function render(){const n=NAMES[S.state]||[S.state,''];$('st').className='status s-'+S.state;$('big').textContent=n[0];let sub=n[1];if(S.left>0)sub+=' · '+S.left+' s';if(S.locked>0)sub='Too many wrong codes – wait '+S.locked+' s';$('sub').textContent=sub;
$('mute').textContent='Sound: '+(S.muted?'off':'on');$('sensor').textContent='Sensor: '+(S.motion?'sees movement':'quiet');$('count').textContent=S.alarms+(S.alarms==1?' alarm':' alarms')+' since start';
$('topic').textContent=S.topic;$('sub').href='ntfy://ntfy.sh/'+S.topic;const ul=$('ev');ul.innerHTML='';if(!S.events.length)ul.innerHTML='<li>Nothing yet</li>';
S.events.forEach(e=>{const li=document.createElement('li'),a=document.createElement('span'),b=document.createElement('time');a.textContent=e.m;b.textContent=when(e.ago);li.append(a,b);ul.appendChild(li)});upd()}
async function poll(){try{const r=await fetch('/api/status',{cache:'no-store'});S=await r.json();render();$('conn').className='';$('conn').lastChild.textContent='Connected'}catch(e){$('conn').className='bad';$('conn').lastChild.textContent='Not connected'}}
dots();poll();setInterval(poll,1500);
</script></body></html>
)~~~";
const char SETUP_HTML[] = R"~~~(<!doctype html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Alarm Wi-Fi setup</title>
<style>
body{margin:0;background:#0f172a;color:#f1f5f9;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:16px}
.wrap{max-width:440px;margin:0 auto}
h1{font-size:22px}
.card{background:#1e293b;border-radius:16px;padding:16px;margin-top:14px}
label{display:block;margin:12px 0 6px;color:#94a3b8;font-size:14px}
select,input{width:100%;box-sizing:border-box;font:inherit;padding:12px;border-radius:10px;border:1px solid #475569;background:#0f172a;color:#f1f5f9}
button{width:100%;margin-top:16px;padding:15px;font:inherit;font-weight:700;font-size:18px;border:0;border-radius:14px;background:#1d4ed8;color:#fff}
.topic{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;background:#0f172a;padding:8px 12px;border-radius:8px;margin:8px 0;user-select:all;word-break:break-all}
.small{font-size:14px;color:#94a3b8}
#m{margin-top:14px;font-weight:600;color:#86efac}
</style></head><body><div class="wrap">
<h1>Connect the alarm to your Wi-Fi</h1>
<div class="card"><b>Step 1: phone alerts</b>
  <div class="small">In the free <b>ntfy</b> app, tap <b>+</b> and subscribe to this topic. Once the alarm is on your Wi-Fi, ntfy will send you the link to its app.</div>
  <div class="topic" id="t">&hellip;</div>
</div>
<form class="card" id="f"><b>Step 2: your Wi-Fi</b>
  <label for="s">Wi-Fi name</label>
  <select id="s"><option value="">Looking&hellip;</option></select>
  <label for="s2">Not in the list? Type it here</label>
  <input id="s2" autocomplete="off" autocapitalize="none">
  <label for="p">Wi-Fi password</label>
  <input id="p" type="password" autocomplete="off">
  <label><input type="checkbox" id="show" style="width:auto"> Show password</label>
  <button>Connect</button>
  <div id="m"></div>
</form>
</div>
<script>
const $=id=>document.getElementById(id);
$('show').onchange=()=>{$('p').type=$('show').checked?'text':'password'};
fetch('/api/setupinfo').then(r=>r.json()).then(j=>{$('t').textContent=j.topic;const s=$('s');s.innerHTML='';
j.nets.forEach(n=>{const o=document.createElement('option');o.value=o.textContent=n;s.appendChild(o)});if(!j.nets.length)s.innerHTML='<option value="">None found - type it below</option>'});
$('f').onsubmit=async e=>{e.preventDefault();const ssid=$('s2').value.trim()||$('s').value;if(!ssid){$('m').textContent='Pick or type your Wi-Fi name';return}
try{await fetch('/api/wifi',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams({s:ssid,p:$('p').value})})}catch(e){}
$('m').textContent='Saved! The alarm is joining your Wi-Fi now. Switch your phone back to your normal Wi-Fi, then watch for the ntfy alert with the app link.'};
</script></body></html>
)~~~";
const char MANIFEST_JSON[] = R"~~~({"name":"Motion Alarm","short_name":"Alarm","start_url":"/","display":"standalone","background_color":"#0f172a","theme_color":"#0f172a","icons":[{"src":"/icon.png","sizes":"192x192","type":"image/png","purpose":"any"}]}
)~~~";
