<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GP Staff Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<style>
body {
font-family: Arial, sans-serif;
background: #111;
color: white;
padding: 20px;
}
button {
background: #00aa55;
color: white;
border: none;
padding: 15px 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}
#status {
margin-top: 20px;
color: #aaa;
}
</style>
</head>
<body>
<h1>Granite Point Staff Dashboard</h1>
<button id="enableNotifications">
Enable Notifications
</button>
<div id="status">
Waiting...
</div>
<script>
const WORKER_URL = "https://empty-fog-2f93.paul-f5f.workers.dev/";
const status = document.getElementById("status");
async function registerServiceWorker() {
const registration = await navigator.serviceWorker.register('/service-worker.js');
status.innerText = "Service Worker Registered";
return registration;
}
async function subscribeUser(registration) {
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
alert("Notifications denied");
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: new Uint8Array([])
});
await fetch(WORKER_URL, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
type: "subscribe",
subscription
})
});
status.innerText = "Notifications Enabled";
}
document.getElementById("enableNotifications").onclick = async () => {
if (!('serviceWorker' in navigator)) {
alert("Service workers not supported");
return;
}
const registration = await registerServiceWorker();
await subscribeUser(registration);
};
</script>
</body>
</html>