<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.webmanifest" />
<title>Kandil Companion</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
background: #050505;
color: #f5f5f5;
margin: 0;
padding: 2rem;
}
main {
max-width: 640px;
margin: 0 auto;
}
button {
background: #06b6d4;
border: none;
border-radius: 6px;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #041214;
cursor: pointer;
}
pre {
background: #0f172a;
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
}
</style>
</head>
<body>
<main>
<h1>Kandil PWA Companion</h1>
<p>Install this page to pin Kandil insights on your home screen.</p>
<button id="installBtn">Install</button>
<section>
<h2>Live Context</h2>
<pre id="context">Waiting for data…</pre>
</section>
</main>
<script>
async function refreshContext() {
try {
const resp = await fetch("/context");
const data = await resp.json();
document.getElementById("context").textContent = JSON.stringify(
data,
null,
2
);
} catch (err) {
console.error(err);
}
}
refreshContext();
setInterval(refreshContext, 5000);
window.addEventListener("load", () => {
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js");
}
});
let deferredPrompt;
const installBtn = document.getElementById("installBtn");
installBtn.style.display = "none";
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
installBtn.style.display = "block";
});
installBtn.addEventListener("click", async () => {
if (!deferredPrompt) return;
deferredPrompt.prompt();
deferredPrompt = null;
installBtn.style.display = "none";
});
</script>
</body>
</html>