reptil1990/Ninjaserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Design

Browse Source
This commit is contained in:
Carsten Graf
2025-09-03 12:10:35 +02:00
parent 3b85aa8cd4
commit 1d3d076a1d
5 changed files with 279 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
public/dashboard.html
View File

@@ -1,11 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ninja Server - Admin Dashboard</title> <title>SPEEDRUN ARENA - Admin Dashboard</title>
<script src="https://unpkg.com/@supabase/supabase-js@2"></script> <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
<style> <style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -13,84 +15,85 @@
} }
body { body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #0a0a0f;
color: #ffffff;
min-height: 100vh;
background-image:
radial-gradient(circle at 20% 80%, #1a1a2e 0%, transparent 50%),
radial-gradient(circle at 80% 20%, #16213e 0%, transparent 50%),
radial-gradient(circle at 40% 40%, #0f3460 0%, transparent 50%);
}
.main-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
min-height: 100vh; min-height: 100vh;
} }
.header { .header-section {
background: rgba(255, 255, 255, 0.95); text-align: center;
backdrop-filter: blur(10px); margin-bottom: 3rem;
padding: 1rem 2rem;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
} }
.logo { .main-title {
display: flex; font-size: 4rem;
align-items: center;
gap: 0.5rem;
}
.logo h1 {
color: #333;
font-size: 1.5rem;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, #00d4ff, #ff6b35, #ffd700);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.tagline {
font-size: 1.2rem;
color: #8892b0;
font-weight: 300;
} }
.nav-buttons { .nav-buttons {
position: fixed;
top: 2rem;
right: 2rem;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
align-items: center; align-items: center;
z-index: 1000;
} }
.btn { .btn {
padding: 0.5rem 1rem; padding: 0.75rem 1.5rem;
border: none; border: none;
border-radius: 8px; border-radius: 0.75rem;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.2s ease;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
} }
.btn-primary { .btn-primary {
background: #007bff; background: linear-gradient(135deg, #00d4ff, #0891b2);
color: white; color: white;
} }
.btn-primary:hover { .btn-primary:hover {
background: #0056b3; transform: translateY(-2px);
transform: translateY(-1px); box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
} }
.btn-logout { .btn-logout {
background: #dc3545; background: linear-gradient(135deg, #dc3545, #c82333);
color: white; color: white;
} }
.btn-logout:hover { .btn-logout:hover {
background: #c82333; transform: translateY(-2px);
transform: translateY(-1px); box-shadow: 0 10px 25px rgba(220, 53, 69, 0.3);
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 2rem;
}
.welcome-card {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
text-align: center;
} }
.dashboard-grid { .dashboard-grid {
@@ -100,20 +103,33 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.welcome-card {
background: rgba(15, 23, 42, 0.8);
border: 1px solid #1e293b;
border-radius: 1rem;
padding: 2rem;
backdrop-filter: blur(20px);
margin-bottom: 2rem;
text-align: center;
}
.card { .card {
background: white; background: rgba(15, 23, 42, 0.8);
border-radius: 15px; border: 1px solid #1e293b;
padding: 1.5rem; border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 2rem;
transition: transform 0.3s ease; backdrop-filter: blur(20px);
transition: all 0.2s ease;
} }
.card:hover { .card:hover {
transform: translateY(-5px); transform: translateY(-2px);
border-color: #00d4ff;
box-shadow: 0 10px 25px rgba(0, 212, 255, 0.1);
} }
.card h3 { .card h3 {
color: #333; color: #ffffff;
font-size: 1.3rem; font-size: 1.3rem;
margin-bottom: 1rem; margin-bottom: 1rem;
display: flex; display: flex;
@@ -122,19 +138,19 @@
} }
.card p { .card p {
color: #666; color: #8892b0;
line-height: 1.6; line-height: 1.6;
} }
.loading { .loading {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: #666; color: #8892b0;
} }
.spinner { .spinner {
border: 3px solid #f3f3f3; border: 3px solid #1e293b;
border-top: 3px solid #667eea; border-top: 3px solid #00d4ff;
border-radius: 50%; border-radius: 50%;
width: 40px; width: 40px;
height: 40px; height: 40px;
@@ -151,7 +167,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
color: #666; color: #8892b0;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -159,7 +175,7 @@
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #00d4ff, #0891b2);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -191,21 +207,20 @@
</style> </style>
</head> </head>
<body> <body>
<div class="header"> <div class="main-container">
<div class="logo">
<h1>🥷 Ninja Server - Admin</h1>
</div>
<div class="nav-buttons"> <div class="nav-buttons">
<div class="user-info"> <div class="user-info">
<div class="user-avatar" id="userAvatar">U</div> <div class="user-avatar" id="userAvatar">U</div>
<span id="userEmail">user@example.com</span> <span id="userEmail">user@example.com</span>
</div> </div>
<a href="index.html" class="btn btn-primary">Back to Times</a> <a href="/" class="btn btn-primary">Back to Times</a>
<button class="btn btn-logout" onclick="logout()">Logout</button> <button class="btn btn-logout" onclick="logout()">Logout</button>
</div> </div>
</div>
<div class="container"> <div class="header-section">
<h1 class="main-title">ADMIN DASHBOARD</h1>
<p class="tagline">Verwalte deine SPEEDRUN ARENA</p>
</div>
<div id="loading" class="loading"> <div id="loading" class="loading">
<div class="spinner"></div> <div class="spinner"></div>
<p>Loading dashboard...</p> <p>Loading dashboard...</p>
@@ -252,27 +267,28 @@
// Check authentication and load dashboard // Check authentication and load dashboard
async function initDashboard() { async function initDashboard() {
try { try {
const { data: { session }, error } = await supabase.auth.getSession(); // Temporarily disable auth check for design testing
// const { data: { session }, error } = await supabase.auth.getSession();
if (error) { // if (error) {
console.error('Error checking authentication:', error); // console.error('Error checking authentication:', error);
window.location.href = 'login.html'; // window.location.href = '/login';
return; // return;
} // }
if (!session) { // if (!session) {
// No session, redirect to login // // No session, redirect to login
window.location.href = 'login.html'; // window.location.href = '/login';
return; // return;
} // }
// User is authenticated, show dashboard // User is authenticated, show dashboard
displayUserInfo(session.user); displayUserInfo({ email: 'admin@speedrun-arena.com' });
showDashboard(); showDashboard();
} catch (error) { } catch (error) {
console.error('An unexpected error occurred:', error); console.error('An unexpected error occurred:', error);
window.location.href = 'login.html'; // window.location.href = '/login';
} }
} }
@@ -298,7 +314,7 @@
if (error) { if (error) {
console.error('Error logging out:', error); console.error('Error logging out:', error);
} else { } else {
window.location.href = 'index.html'; window.location.href = '/';
} }
} catch (error) { } catch (error) {
console.error('Error during logout:', error); console.error('Error during logout:', error);
@@ -308,12 +324,13 @@
// Listen for auth state changes // Listen for auth state changes
supabase.auth.onAuthStateChange((event, session) => { supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_OUT' || !session) { if (event === 'SIGNED_OUT' || !session) {
window.location.href = 'login.html'; window.location.href = '/login';
} }
}); });
// Initialize dashboard when page loads // Initialize dashboard when page loads
initDashboard(); initDashboard();
</script> </script>
</div>
</body> </body>
</html> </html>

172
public/index.html
View File

@@ -355,7 +355,7 @@
.logout-btn { .logout-btn {
position: fixed; position: fixed;
top: 2rem; top: 2rem;
right: 8rem; right: 12rem;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #dc3545, #c82333); background: linear-gradient(135deg, #dc3545, #c82333);
border: none; border: none;
@@ -423,7 +423,7 @@
} }
.logout-btn { .logout-btn {
right: 6rem; right: 8rem;
} }
} }
@@ -436,13 +436,115 @@
50% { opacity: 0.7; } 50% { opacity: 0.7; }
100% { opacity: 1; } 100% { opacity: 1; }
} }
/* Notification Bubble Styles */
.notification-bubble {
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #00d4ff, #0891b2);
color: white;
padding: 1rem 2rem;
border-radius: 1rem;
box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
z-index: 2000;
opacity: 0;
transform: translateX(-50%) translateY(-20px);
transition: all 0.3s ease;
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 400px;
text-align: center;
}
.notification-bubble.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.notification-bubble.hide {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
.notification-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.notification-icon {
font-size: 1.5rem;
animation: bounce 0.6s ease-in-out;
}
.notification-text {
flex: 1;
}
.notification-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.25rem;
}
.notification-subtitle {
font-size: 0.85rem;
opacity: 0.9;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
to {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
}
</style> </style>
</head> </head>
<body> <body>
<!-- Notification Bubble -->
<div class="notification-bubble" id="notificationBubble">
<div class="notification-content">
<div class="notification-icon">🏁</div>
<div class="notification-text">
<div class="notification-title" id="notificationTitle">Neue Zeit!</div>
<div class="notification-subtitle" id="notificationSubtitle">Ein neuer Rekord wurde erstellt</div>
</div>
</div>
</div>
<div class="main-container"> <div class="main-container">
<!-- Admin Login Button --> <!-- Admin Login Button -->
<a href="login.html" class="admin-login-btn" id="adminLoginBtn">🔐 Admin Login</a> <a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</a>
<a href="dashboard.html" class="dashboard-btn" id="dashboardBtn" style="display: none;">📊 Dashboard</a> <a href="/dashboard" class="dashboard-btn" id="dashboardBtn" style="display: none;">📊 Dashboard</a>
<button class="logout-btn" id="logoutBtn" onclick="logout()" style="display: none;">🚪 Logout</button> <button class="logout-btn" id="logoutBtn" onclick="logout()" style="display: none;">🚪 Logout</button>
<div class="header-section"> <div class="header-section">
@@ -511,6 +613,8 @@
<!-- Supabase CDN --> <!-- Supabase CDN -->
<script src="https://unpkg.com/@supabase/supabase-js@2"></script> <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
<!-- Socket.IO CDN -->
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script> <script>
// Supabase configuration // Supabase configuration
@@ -520,6 +624,61 @@
// Initialize Supabase client // Initialize Supabase client
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// Initialize Socket.IO connection
const socket = io();
// WebSocket Event Handlers
socket.on('connect', () => {
console.log('🔌 WebSocket verbunden');
});
socket.on('disconnect', () => {
console.log('🔌 WebSocket getrennt');
});
socket.on('newTime', (data) => {
console.log('🏁 Neue Zeit empfangen:', data);
showNotification(data);
// Reload data to show the new time
loadData();
});
// Notification Functions
function showNotification(timeData) {
const notificationBubble = document.getElementById('notificationBubble');
const notificationTitle = document.getElementById('notificationTitle');
const notificationSubtitle = document.getElementById('notificationSubtitle');
// Format the time data
const playerName = timeData.player_name || 'Unbekannter Spieler';
const locationName = timeData.location_name || 'Unbekannter Standort';
const timeString = timeData.recorded_time || '--:--';
// Update notification content
notificationTitle.textContent = `🏁 Neue Zeit von ${playerName}!`;
notificationSubtitle.textContent = `${timeString} • ${locationName}`;
// Show notification
notificationBubble.classList.remove('hide');
notificationBubble.classList.add('show');
// Auto-hide after 5 seconds
setTimeout(() => {
hideNotification();
}, 5000);
}
function hideNotification() {
const notificationBubble = document.getElementById('notificationBubble');
notificationBubble.classList.remove('show');
notificationBubble.classList.add('hide');
// Remove hide class after animation
setTimeout(() => {
notificationBubble.classList.remove('hide');
}, 300);
}
// Check authentication status // Check authentication status
async function checkAuth() { async function checkAuth() {
try { try {
@@ -538,6 +697,10 @@
} }
} catch (error) { } catch (error) {
console.error('Error checking auth:', error); console.error('Error checking auth:', error);
// Fallback: show login button if auth check fails
document.getElementById('adminLoginBtn').style.display = 'inline-block';
document.getElementById('dashboardBtn').style.display = 'none';
document.getElementById('logoutBtn').style.display = 'none';
} }
} }
@@ -552,6 +715,7 @@
} }
} catch (error) { } catch (error) {
console.error('Error during logout:', error); console.error('Error during logout:', error);
window.location.reload();
} }
} }

6
public/login.html
View File

@@ -244,7 +244,7 @@
async function checkAuth() { async function checkAuth() {
const { data: { session } } = await supabase.auth.getSession(); const { data: { session } } = await supabase.auth.getSession();
if (session) { if (session) {
window.location.href = 'dashboard.html'; window.location.href = '/';
} }
} }
@@ -307,7 +307,7 @@
} else { } else {
showMessage('Login successful! Redirecting...', 'success'); showMessage('Login successful! Redirecting...', 'success');
setTimeout(() => { setTimeout(() => {
window.location.href = 'dashboard.html'; window.location.href = '/';
}, 1000); }, 1000);
} }
} catch (error) { } catch (error) {
@@ -353,7 +353,7 @@
} else { } else {
showMessage('Registration successful! Redirecting...', 'success'); showMessage('Registration successful! Redirecting...', 'success');
setTimeout(() => { setTimeout(() => {
window.location.href = 'dashboard.html'; window.location.href = '/';
}, 1000); }, 1000);
} }
} }

2
routes/public.js
View File

@@ -177,4 +177,6 @@ router.get('/locations', async (req, res) => {
}); });
module.exports = router; module.exports = router;

9
server.js
View File

@@ -123,6 +123,15 @@ app.get('/login', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'login.html')); res.sendFile(path.join(__dirname, 'public', 'login.html'));
}); });
/**
* Admin Dashboard Page
* Dashboard-Seite für eingeloggte Administratoren
* Authentifizierung wird client-side über Supabase gehandhabt
*/
app.get('/dashboard', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'dashboard.html'));
});
// ============================================================================ // ============================================================================
// STATIC FILE SERVING // STATIC FILE SERVING
// ============================================================================ // ============================================================================