mirror of
https://github.com/onsonr/sonr.git
synced 2025-03-10 21:09:11 +00:00
139 lines
3.7 KiB
HTML
139 lines
3.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Sonr DWN</title>
|
||
|
|
|
||
|
|
<!-- HTMX -->
|
||
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
||
|
|
|
||
|
|
<!-- WASM Support -->
|
||
|
|
<script src="https://cdn.jsdelivr.net/gh/golang/go@go1.22.5/misc/wasm/wasm_exec.js"></script>
|
||
|
|
|
||
|
|
<!-- Main JS -->
|
||
|
|
<script src="main.js"></script>
|
||
|
|
|
||
|
|
<!-- Tailwind (assuming you're using it based on your classes) -->
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
|
||
|
|
<!-- Add manifest for PWA support -->
|
||
|
|
<link
|
||
|
|
rel="manifest"
|
||
|
|
href="/app.webmanifest"
|
||
|
|
crossorigin="use-credentials"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!-- Offline detection styles -->
|
||
|
|
<style>
|
||
|
|
.offline-indicator {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
body.offline .offline-indicator {
|
||
|
|
display: block;
|
||
|
|
background: #f44336;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0.5rem;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body
|
||
|
|
class="flex items-center justify-center h-full bg-zinc-50 lg:p-24 md:16 p-4"
|
||
|
|
>
|
||
|
|
<!-- Offline indicator -->
|
||
|
|
<div class="offline-indicator">
|
||
|
|
You are currently offline. Some features may be limited.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Loading indicator -->
|
||
|
|
<div
|
||
|
|
id="loading-indicator"
|
||
|
|
class="fixed top-0 left-0 w-full h-1 bg-blue-200 transition-all duration-300"
|
||
|
|
style="display: none"
|
||
|
|
>
|
||
|
|
<div class="h-full bg-blue-600 w-0 transition-all duration-300"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<main
|
||
|
|
class="flex-row items-center justify-center mx-auto w-fit max-w-screen-sm gap-y-3"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
id="content"
|
||
|
|
hx-get="/#"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="outerHTML"
|
||
|
|
hx-indicator="#loading-indicator"
|
||
|
|
>
|
||
|
|
Loading...
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- WASM Ready Indicator (hidden) -->
|
||
|
|
<div
|
||
|
|
id="wasm-status"
|
||
|
|
class="hidden fixed bottom-4 right-4 p-2 rounded-md bg-green-500 text-white"
|
||
|
|
hx-swap-oob="true"
|
||
|
|
>
|
||
|
|
WASM Ready
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Initialize service worker
|
||
|
|
if ("serviceWorker" in navigator) {
|
||
|
|
window.addEventListener("load", async function () {
|
||
|
|
try {
|
||
|
|
const registration =
|
||
|
|
await navigator.serviceWorker.register("/sw.js");
|
||
|
|
console.log(
|
||
|
|
"Service Worker registered with scope:",
|
||
|
|
registration.scope,
|
||
|
|
);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Service Worker registration failed:", error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// HTMX loading indicator
|
||
|
|
htmx.on("htmx:beforeRequest", function (evt) {
|
||
|
|
document.getElementById("loading-indicator").style.display = "block";
|
||
|
|
});
|
||
|
|
|
||
|
|
htmx.on("htmx:afterRequest", function (evt) {
|
||
|
|
document.getElementById("loading-indicator").style.display = "none";
|
||
|
|
});
|
||
|
|
|
||
|
|
// WASM ready event handler
|
||
|
|
document.addEventListener("wasm-ready", function () {
|
||
|
|
const status = document.getElementById("wasm-status");
|
||
|
|
status.classList.remove("hidden");
|
||
|
|
setTimeout(() => {
|
||
|
|
status.classList.add("hidden");
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Offline status handler
|
||
|
|
window.addEventListener("offline", function () {
|
||
|
|
document.body.classList.add("offline");
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("online", function () {
|
||
|
|
document.body.classList.remove("offline");
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initial offline check
|
||
|
|
if (!navigator.onLine) {
|
||
|
|
document.body.classList.add("offline");
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|