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

172
public/index.html
View File

@@ -355,7 +355,7 @@
.logout-btn {
position: fixed;
top: 2rem;
right: 8rem;
right: 12rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, #dc3545, #c82333);
border: none;
@@ -423,7 +423,7 @@
}
.logout-btn {
right: 6rem;
right: 8rem;
}
}
@@ -436,13 +436,115 @@
50% { opacity: 0.7; }
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>
</head>
<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">
<!-- Admin Login Button -->
<a href="login.html" class="admin-login-btn" id="adminLoginBtn">🔐 Admin Login</a>
<a href="dashboard.html" class="dashboard-btn" id="dashboardBtn" style="display: none;">📊 Dashboard</a>
<a href="/login" class="admin-login-btn" id="adminLoginBtn">🔐 Login</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>
<div class="header-section">
@@ -511,6 +613,8 @@
<!-- Supabase CDN -->
<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>
// Supabase configuration
@@ -520,6 +624,61 @@
// Initialize Supabase client
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
async function checkAuth() {
try {
@@ -538,6 +697,10 @@
}
} catch (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) {
console.error('Error during logout:', error);
window.location.reload();
}
}