Aplikacija - Visoki standardi servis za čišćenje

<!DOCTYPE html>
<html lang=”hr”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>
<meta name=”theme-color” content=”#0EA5A0″>
<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=”Visoki Standardi”>
<title>Visoki Standardi</title>
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap” rel=”stylesheet”>
<link rel=”manifest” href=’data:application/manifest+json,{“name”:”Visoki Standardi”,”short_name”:”VS”,”start_url”:”.”,”display”:”standalone”,”background_color”:”%230b1f21″,”theme_color”:”%230EA5A0″}’>
<style>
:root{
–teal:#0EA5A0; –teal-dark:#087f7b; –teal-soft:#d9f3f1;
–ink:#0b1f21; –ink-2:#3d5658; –line:#dbe6e5; –bg:#f3f8f7; –card:#fff;
–safe-b: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:Roboto,system-ui,sans-serif;background:var(–bg);color:var(–ink);-webkit-font-smoothing:antialiased;padding-bottom:calc(140px + var(–safe-b))}
header{background:var(–ink);color:#fff;padding:calc(14px + env(safe-area-inset-top,0px)) 20px 18px;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#19c9c2,#0EA5A0);display:grid;place-items:center;font-weight:900;font-size:19px;position:relative;letter-spacing:-.5px}
.logo::after{content:”✦”;position:absolute;top:2px;right:7px;font-size:9px}
.brand h1{font-size:17px;font-weight:700;line-height:1.1}
.brand small{display:block;font-size:12px;color:#9fc7c5;font-weight:400;margin-top:2px}
main{padding:18px 16px 0}
section{display:none}section.active{display:block}
h2{font-size:24px;font-weight:900;letter-spacing:-.4px;margin:2px 0 4px}
.lead{color:var(–ink-2);font-size:14px;margin-bottom:18px;line-height:1.45}
.group{margin-bottom:22px}
.group h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(–teal-dark);font-weight:700;margin-bottom:10px}
.item{background:var(–card);border:1px solid var(–line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.name{font-weight:500;font-size:15px}
.price{font-size:13px;color:var(–ink-2)}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(–line);border-radius:10px;overflow:hidden}
.qty button{width:38px;height:36px;border:0;background:#fff;font-size:20px;color:var(–teal-dark);font-weight:500}
.qty button:active{background:var(–teal-soft)}
.qty span{min-width:30px;text-align:center;font-weight:700;font-size:15px}
.addons{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(–line);gap:6px;flex-wrap:wrap}
.item.on .addons{display:flex}
.chip{border:1.5px solid var(–line);border-radius:999px;padding:6px 11px;font-size:13px;color:var(–ink-2);background:#fff}
.chip.on{border-color:var(–teal);background:var(–teal-soft);color:var(–teal-dark);font-weight:500}
.summary{position:fixed;left:0;right:0;bottom:calc(64px + var(–safe-b));background:var(–ink);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(120%);transition:transform .25s;z-index:9}
.summary.show{transform:none}
.summary .tot{font-size:22px;font-weight:900}
.summary .tot small{font-size:12px;color:#9fc7c5;font-weight:400;display:block}
.btn{border:0;border-radius:12px;padding:13px 18px;font-weight:700;font-size:15px;font-family:inherit;background:var(–teal);color:#fff;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn.block{width:100%}
.btn.ghost{background:var(–teal-soft);color:var(–teal-dark)}
.btn:disabled{opacity:.45}
.note{font-size:13px;color:var(–ink-2);background:var(–teal-soft);border-radius:12px;padding:12px 14px;line-height:1.45;margin-bottom:14px}
nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(–line);display:flex;padding-bottom:var(–safe-b);z-index:10}
nav button{flex:1;border:0;background:none;padding:10px 4px 8px;font-family:inherit;font-size:11px;color:var(–ink-2);display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:500}
nav button svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav button.active{color:var(–teal-dark)}
/* photo */
.drop{border:2px dashed var(–teal);border-radius:16px;background:#fff;padding:28px 16px;text-align:center;color:var(–teal-dark);font-weight:500;margin-bottom:14px}
.drop input{display:none}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(–line)}
textarea,input[type=text],input[type=date],select{width:100%;border:1px solid var(–line);border-radius:12px;padding:12px;font:inherit;font-size:15px;background:#fff;margin-bottom:12px;color:var(–ink)}
label.lbl{display:block;font-size:12px;font-weight:700;color:var(–ink-2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.08em}
/* reminders */
.rem{background:#fff;border:1px solid var(–line);border-radius:14px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.rem b{display:block;font-size:15px}
.rem span{font-size:13px;color:var(–ink-2)}
.rem.due{border-color:var(–teal);background:var(–teal-soft)}
.rem button{border:0;background:none;color:#b33;font-weight:700;font-family:inherit}
.empty{text-align:center;color:var(–ink-2);padding:30px 10px;font-size:14px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:calc(150px + var(–safe-b));transform:translateX(-50%) translateY(20px);background:var(–ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%)}
</style>
</head>
<body>
<header>
<div class=”brand”>
<div class=”logo”>VS</div>
<div><h1>Visoki Standardi</h1><small>Dubinsko čišćenje · Zagreb i okolica</small></div>
</div>
</header>

<main>
<!– KALKULATOR –>
<section id=”s-kalk” class=”active”>
<h2>Složi svoju uslugu</h2>
<p class=”lead”>Odaberi što čistimo, dodaj doplate po komadu i odmah vidiš cijenu. Cijene su “od”. Minimalna narudžba za izlazak je 50 €.</p>
<div id=”cats”></div>
</section>

<!– SLIKAJ –>
<section id=”s-foto”>
<h2>Slikaj i pošalji</h2>
<p class=”lead”>Slikaj namještaj ili mrlju, dodaj par riječi, a mi javimo točnu cijenu i termin na WhatsApp.</p>
<label class=”drop”>
<input type=”file” accept=”image/*” capture=”environment” multiple id=”file”>
📷 Slikaj ili odaberi fotke
</label>
<div class=”thumbs” id=”thumbs”></div>
<label class=”lbl”>Što te muči?</label>
<textarea id=”opis” rows=”3″ placeholder=”npr. Kutna garnitura, mrlje od kave, imamo psa”></textarea>
<button class=”btn block” id=”sendFoto”>
<svg width=”20″ height=”20″ viewBox=”0 0 24 24″ fill=”#fff”><path d=”M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5 14.2c-.2.6-1.2 1.1-1.7 1.2-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.6-1.1-4.3-3.8-4.4-4-.1-.2-1-1.4-1-2.6s.6-1.9.9-2.1c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.1.1.3 0 .5l-.3.5-.4.5c-.1.1-.3.3-.1.5.2.3.7 1.2 1.6 1.9 1.1 1 2 1.3 2.3 1.4.3.1.5.1.6-.1l.9-1.1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.3.1.2.1.8-.1 1.4z”/></svg>
Pošalji na WhatsApp
</button>
<p class=”note” style=”margin-top:14px”>Napomena za test: iz preglednika se fotka ne može zalijepiti direktno u WhatsApp poruku — otvori se chat s tekstom, a fotke dodaš klikom na spajalicu. U pravoj aplikaciji (App Store / Play) fotke idu automatski.</p>
</section>

<!– PODSJETNIK –>
<section id=”s-rem”>
<h2>Podsjetnik</h2>
<p class=”lead”>Zaštita od grinja traje do 6 mjeseci. Postavi podsjetnik i javimo ti kad je vrijeme za osvježenje.</p>
<label class=”lbl”>Što smo očistili</label>
<select id=”remWhat”>
<option>Kutna garnitura</option><option>Sofa</option><option>Madrac</option><option>Generalno čišćenje stana</option><option>Stakla</option><option>Podovi</option>
</select>
<label class=”lbl”>Datum čišćenja</label>
<input type=”date” id=”remDate”>
<label class=”lbl”>Podsjeti me za</label>
<select id=”remMonths”>
<option value=”3″>3 mjeseca</option><option value=”6″ selected>6 mjeseci (istek zaštite od grinja)</option><option value=”12″>12 mjeseci</option>
</select>
<button class=”btn block ghost” id=”addRem”>Postavi podsjetnik</button>
<div style=”height:18px”></div>
<div id=”remList”></div>
</section>
</main>

<div class=”summary” id=”sum”>
<div class=”tot”><span id=”tot”>0 €</span><small id=”totNote”>Ukupno, cijene su “od”</small></div>
<button class=”btn” id=”sendKalk”>Naruči</button>
</div>

<nav>
<button class=”active” data-s=”kalk”><svg viewBox=”0 0 24 24″><rect x=”4″ y=”2″ width=”16″ height=”20″ rx=”2″/><line x1=”8″ y1=”6″ x2=”16″ y2=”6″/><line x1=”8″ y1=”11″ x2=”8″ y2=”11″/><line x1=”12″ y1=”11″ x2=”12″ y2=”11″/><line x1=”16″ y1=”11″ x2=”16″ y2=”11″/><line x1=”8″ y1=”15″ x2=”8″ y2=”15″/><line x1=”12″ y1=”15″ x2=”12″ y2=”15″/><line x1=”16″ y1=”15″ x2=”16″ y2=”18″/></svg>Kalkulator</button>
<button data-s=”foto”><svg viewBox=”0 0 24 24″><path d=”M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z”/><circle cx=”12″ cy=”13″ r=”4″/></svg>Slikaj</button>
<button data-s=”rem”><svg viewBox=”0 0 24 24″><path d=”M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9″/><path d=”M13.7 21a2 2 0 0 1-3.4 0″/></svg>Podsjetnik</button>
</nav>
<div class=”toast” id=”toast”></div>

/* ———- CJENIK (iz narudžbenice, 8/2026) ———- */
// doplate: dez = dezinfekcija parom, dlake, grinje, koza = +50%
const D=(dez,dlake,grinje,koza)=>({dez,dlake,grinje,koza});
const CATS=[
{name:’Kutne garniture’,items:[
{n:’Kutna L’,p:49,a:D(25,20,15,true)},
{n:’Kutna XL’,p:69,a:D(30,20,15,true)},
{n:’Kutna XXL’,p:79,a:D(35,30,15,true)},
{n:’Kutna XXXL’,p:89,a:D(40,30,15,true)},
{n:’Madrac kutne (razvlačenje)’,p:15,a:D()},
{n:’Jastuci kutne’,p:3,a:D()}]},
{name:’Sofe i fotelje’,items:[
{n:’Trosjed’,p:45,a:D(20,20,20,true)},
{n:’Dvosjed’,p:39,a:D(15,20,15,true)},
{n:’Fotelja’,p:29,a:D(10,20,10,true)},
{n:’Tabure’,p:15,a:D(10,20,5,true)}]},
{name:’Stolci’,items:[
{n:’Stolac – samo sjedalo’,p:6,a:D()},
{n:’Stolac – sjedalo i naslon’,p:9,a:D()},
{n:’Stolac fotelja’,p:20,a:D()}]},
{name:’Madraci (obostrano)’,items:[
{n:’Madrac za jednu osobu’,p:45,a:D(20,null,15)},
{n:’Madrac za dvije osobe’,p:65,a:D(30,null,20)},
{n:’Dječji madrac’,p:30,a:D(10,null,10)},
{n:’Okvir kreveta’,p:25,a:D(25)}]},
];
const ADD_LBL={dez:’Dezinfekcija parom 180°C’,dlake:’Uklanjanje dlaka ljubimaca’,grinje:’Zaštita od grinja do 6 mj.’,koza:’Kožni namještaj +50%’};
const state={};

/* ———- FOTO ———- */
const files=[];
document.getElementById(‘file’).onchange=e=>{
[…e.target.files].forEach(f=>{files.push(f);const img=document.createElement(‘img’);img.src=URL.createObjectURL(f);document.getElementById(‘thumbs’).appendChild(img);});
};
document.getElementById(‘sendFoto’).onclick=async()=>{
const opis=document.getElementById(‘opis’).value.trim();
const msg=`Pozdrav! Šaljem ${files.length||”} fotk${files.length===1?’u’:’e’} iz VS aplikacije za procjenu.\n${opis?’\nOpis: ‘+opis:”}\n\nMolim cijenu i termin. Hvala!`;
if(navigator.canShare&&files.length&&navigator.canShare({files})){
try{await navigator.share({files,text:msg});return;}catch(err){}
}
wa(msg);
};

/* ———- PODSJETNICI ———- */
const KEY=’vs_rem’;
const rems=()=>JSON.parse(localStorage.getItem(KEY)||'[]’);
document.getElementById(‘remDate’).valueAsDate=new Date();
document.getElementById(‘addRem’).onclick=()=>{
const d=new Date(document.getElementById(‘remDate’).value); if(isNaN(d)) return toast(‘Odaberi datum’);
d.setMonth(d.getMonth()+ +document.getElementById(‘remMonths’).value);
const r=rems(); r.push({what:document.getElementById(‘remWhat’).value,due:d.toISOString().slice(0,10)});
localStorage.setItem(KEY,JSON.stringify(r)); listRems(); toast(‘Podsjetnik postavljen’);
if(‘Notification’ in window&&Notification.permission===’default’) Notification.requestPermission();
};
function listRems(){
const r=rems(), el=document.getElementById(‘remList’);
if(!r.length){el.innerHTML='<div class=”empty”>Još nemaš podsjetnika.<br>Postavi prvi nakon sljedećeg čišćenja.</div>’;return;}
const today=new Date().toISOString().slice(0,10);
el.innerHTML=r.sort((a,b)=>a.due.localeCompare(b.due)).map((x,i)=>{
const due=x.due<=today; const [y,m,dd]=x.due.split(‘-‘);
return `<div class=”rem ${due?’due’:”}”><div><b>${x.what}</b><span>${due?’Vrijeme je za osvježenje · ‘:’Podsjetnik: ‘}${dd}.${m}.${y}.</span></div>
${due?`<button class=”btn” style=”padding:9px 12px;font-size:13px” onclick=”wa(‘Pozdrav! Podsjetnik iz VS aplikacije: vrijeme je za ponovno čišćenje (${x.what}). Molim termin.’)”>Naruči</button>`:`<button onclick=”delRem(${i})”>Obriši</button>`}</div>`;}).join(”);
}
function delRem(i){const r=rems();r.splice(i,1);localStorage.setItem(KEY,JSON.stringify(r));listRems();}
listRems();

/* ———- UTIL ———- */
function wa(msg){location.href=`https://wa.me/${PHONE}?text=${encodeURIComponent(msg)}`;}
function toast(t){const e=document.getElementById(‘toast’);e.textContent=t;e.classList.add(‘show’);setTimeout(()=>e.classList.remove(‘show’),2000);}
document.querySelectorAll(‘nav button’).forEach(b=>b.onclick=()=>{
document.querySelectorAll(‘nav button’).forEach(x=>x.classList.toggle(‘active’,x===b));
document.querySelectorAll(‘section’).forEach(s=>s.classList.toggle(‘active’,s.id===’s-‘+b.dataset.s));
window.scrollTo(0,0);
});
render();
</script>
</body>
</html>