121 lines
4.5 KiB
HTML
121 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Live Confusion Alerts</title>
|
||
|
||
<!-- Tailwind DEV CDN (for production, use your compiled CSS) -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.min.js"></script>
|
||
|
||
<!-- Tailwind Config (Dark Mode + Theme Colors) -->
|
||
<script>
|
||
tailwind.config = {
|
||
darkMode: 'class',
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
background: '#121418', // dark slate with blue/gray tone
|
||
surface: '#1e2127', // a bit lighter for containers/cards
|
||
border: '#2a2d34', // visible but subtle borders
|
||
primary: '#4f8cff', // soft blue that pops but is not neon
|
||
text: '#e4e4e7', // light gray for high contrast
|
||
muted: '#a0a0ad', // for subdued text
|
||
},
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
</head>
|
||
<body class="bg-background min-h-screen">
|
||
<nav class="bg-white border-gray-200 dark:bg-gray-900">
|
||
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
|
||
<a href="{{url_for('main.index')}}" class="flex items-center space-x-3 rtl:space-x-reverse">
|
||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Tutortool</span>
|
||
</a>
|
||
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
|
||
<ul class="font-medium flex flex-col justify-between md:justify-evenly p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||
<li>
|
||
<a href="{{url_for('main.admin')}}"
|
||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
||
Deck Admin
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="{{url_for('main.banner')}}"
|
||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
|
||
Banner
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="{{url_for('main.confused_notifications')}}"
|
||
class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500"
|
||
aria-current="page">
|
||
Confused
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div class="max-w-3xl mx-auto mt-12 px-4">
|
||
<h1 class="text-3xl font-bold mb-6 dark:text-white">Live Confusion Alerts</h1>
|
||
<div id="notif-list" class="space-y-4 text-gray-700">
|
||
<p class="italic text-gray-500">Waiting for students to click “I’m confused…”</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Socket.IO client (served by your Flask-SocketIO) -->
|
||
<script>
|
||
const notifList = document.getElementById("notif-list");
|
||
const socket = io();
|
||
|
||
socket.on("confused", data => {
|
||
// Remove placeholder if it’s still there
|
||
if (notifList.children.length === 1 &&
|
||
notifList.children[0].classList.contains("italic")) {
|
||
notifList.innerHTML = "";
|
||
}
|
||
|
||
// Build a new alert box
|
||
const box = document.createElement("div");
|
||
box.className = [
|
||
"flex items-start",
|
||
"bg-red-50 border border-red-400",
|
||
"text-red-800 px-4 py-3 rounded-lg shadow",
|
||
"relative"
|
||
].join(" ");
|
||
|
||
// Message text
|
||
const who = data.who || "Someone";
|
||
const now = new Date().toLocaleTimeString();
|
||
box.innerHTML = `
|
||
<div class="flex-1">
|
||
<strong class="font-semibold">Confused!</strong>
|
||
<p>${who} clicked “I’m confused.” at ${now}</p>
|
||
</div>
|
||
`;
|
||
|
||
// Close button
|
||
const btn = document.createElement("button");
|
||
btn.className = "ml-4 text-red-600 hover:text-red-900 focus:outline-none";
|
||
btn.setAttribute("aria-label", "Dismiss");
|
||
btn.innerHTML = "×";
|
||
btn.onclick = () => box.remove();
|
||
|
||
box.appendChild(btn);
|
||
|
||
// Prepend new alert
|
||
notifList.prepend(box);
|
||
|
||
// Auto‐remove after 20 s
|
||
setTimeout(() => box.remove(), 20000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|