226 lines
5.7 KiB
HTML
226 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Baby Monitor</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 800px;
|
|
margin: 2rem auto;
|
|
padding: 0 1rem;
|
|
background-color: #f0f0f0;
|
|
}
|
|
.burger-menu {
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
cursor: pointer;
|
|
z-index: 1000;
|
|
background: white;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.burger-menu div {
|
|
width: 25px;
|
|
height: 3px;
|
|
background-color: #333;
|
|
margin: 5px 0;
|
|
transition: 0.3s;
|
|
}
|
|
.menu-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: -250px;
|
|
width: 250px;
|
|
height: 100vh;
|
|
background: white;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
|
transition: left 0.3s;
|
|
z-index: 999;
|
|
padding: 4rem 1rem 1rem 1rem;
|
|
}
|
|
.menu-overlay.open {
|
|
left: 0;
|
|
}
|
|
.menu-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
z-index: 998;
|
|
}
|
|
.menu-backdrop.open {
|
|
display: block;
|
|
}
|
|
.menu-item {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #eee;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.menu-item:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
.menu-item.admin {
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
.menu-item.logout {
|
|
color: #dc3545;
|
|
font-weight: 600;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.user-info {
|
|
background: #e3f2fd;
|
|
padding: 1rem;
|
|
border-radius: 4px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
button {
|
|
padding: 0.75rem 1.5rem;
|
|
background-color: #dc3545;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
button:hover {
|
|
background-color: #c82333;
|
|
}
|
|
.admin-button {
|
|
background-color: #667eea;
|
|
}
|
|
.admin-button:hover {
|
|
background-color: #5568d3;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.loading {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="burger-menu" id="burgerMenu">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="menu-backdrop" id="menuBackdrop"></div>
|
|
|
|
<div class="menu-overlay" id="menuOverlay">
|
|
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div id="content" class="loading">
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const token = localStorage.getItem("access_token");
|
|
const username = localStorage.getItem("username");
|
|
|
|
// Burger menu functionality
|
|
const burgerMenu = document.getElementById("burgerMenu");
|
|
const menuOverlay = document.getElementById("menuOverlay");
|
|
const menuBackdrop = document.getElementById("menuBackdrop");
|
|
|
|
function toggleMenu() {
|
|
menuOverlay.classList.toggle("open");
|
|
menuBackdrop.classList.toggle("open");
|
|
}
|
|
|
|
function closeMenu() {
|
|
menuOverlay.classList.remove("open");
|
|
menuBackdrop.classList.remove("open");
|
|
}
|
|
|
|
burgerMenu.addEventListener("click", toggleMenu);
|
|
menuBackdrop.addEventListener("click", closeMenu);
|
|
|
|
document.getElementById("menuLogout").addEventListener("click", () => {
|
|
closeMenu();
|
|
logout();
|
|
});
|
|
|
|
// Check if user is logged in
|
|
if (!token) {
|
|
window.location.href = "/login.html";
|
|
} else {
|
|
// Fetch current user info including admin status
|
|
fetch("/api/me", {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
return response.json();
|
|
} else {
|
|
// Token invalid, redirect to login
|
|
localStorage.removeItem("access_token");
|
|
localStorage.removeItem("username");
|
|
window.location.href = "/login.html";
|
|
throw new Error("Authentication failed");
|
|
}
|
|
})
|
|
.then((user) => {
|
|
// Show authenticated content
|
|
document.getElementById("content").innerHTML = `
|
|
<h1>Welcome to Baby Monitor!</h1>
|
|
<div class="user-info">
|
|
<p><strong>Logged in as:</strong> ${username}</p>
|
|
</div>
|
|
<p>Your session is active.</p>
|
|
`;
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error:", error);
|
|
});
|
|
}
|
|
|
|
async function logout() {
|
|
const token = localStorage.getItem("access_token");
|
|
|
|
try {
|
|
await fetch("/api/logout", {
|
|
method: "POST",
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("Logout error:", error);
|
|
} finally {
|
|
// Clear local storage and redirect
|
|
localStorage.removeItem("access_token");
|
|
localStorage.removeItem("username");
|
|
window.location.href = "/login.html";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|