mirror of
https://github.com/Alvin-Zilverstand/narrow_casting_system.git
synced 2026-03-06 13:24:46 +01:00
🎿 Complete SnowWorld Narrowcasting System - MBO Challenge 18
✅ Full-stack narrowcasting platform implementation ✅ Real-time WebSocket communication for instant updates ✅ Zone-specific content distribution (reception, restaurant, skislope, lockers, shop) ✅ Professional admin dashboard with content management interface ✅ Beautiful client display with winter/snow theme matching SnowWorld branding ✅ Comprehensive technical documentation and test suite ✅ Docker deployment support with CI/CD pipeline ✅ All system tests passing successfully 🏗️ Technical Implementation: - Backend: Node.js/Express with SQLite database - Frontend: Vanilla HTML/CSS/JavaScript (no frameworks) - Real-time: Socket.io WebSocket communication - Database: Complete schema with content, schedule, zones, logs tables - Security: File validation, input sanitization, CORS protection - Performance: Optimized for fast loading and real-time updates 🚀 Features Delivered: - Content upload (images, videos) with drag-and-drop interface - Content scheduling and planning system - Weather widget with real-time snow information - Responsive design for all screen sizes - Comprehensive error handling and fallback mechanisms - Professional winter theme with snow animations - Keyboard shortcuts and accessibility features 📁 Project Structure: - /backend: Complete Node.js server with API and WebSocket - /admin: Professional admin dashboard interface - /client: Beautiful client display application - /deployment: Docker and deployment configurations - /docs: Comprehensive technical documentation - /test_system.js: Complete test suite (all tests passing) 🧪 Testing Results: - Server health: ✅ Online and responsive - API endpoints: ✅ All endpoints functional - Database operations: ✅ All operations successful - WebSocket communication: ✅ Real-time updates working - Zone distribution: ✅ 6 zones correctly loaded - Weather integration: ✅ Weather data available Ready for production deployment at SnowWorld! 🎿❄️
This commit is contained in:
Alvin-Zilverstand
120
client/index.html
Normal file
120
client/index.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SnowWorld - Narrowcasting Display</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Main Display Container -->
|
||||
<div id="displayContainer" class="display-container">
|
||||
<!-- Loading Screen -->
|
||||
<div id="loadingScreen" class="loading-screen active">
|
||||
<div class="loading-content">
|
||||
<div class="snowflake-loader">
|
||||
<i class="fas fa-snowflake"></i>
|
||||
</div>
|
||||
<h2>SnowWorld</h2>
|
||||
<p>Narrowcasting Systeem</p>
|
||||
<div class="loading-bar">
|
||||
<div class="loading-progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Display Area -->
|
||||
<div id="contentDisplay" class="content-display">
|
||||
<!-- Content will be dynamically loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Weather Widget -->
|
||||
<div id="weatherWidget" class="weather-widget">
|
||||
<div class="weather-content">
|
||||
<div class="weather-temp">
|
||||
<span id="temperature">-5</span>°C
|
||||
</div>
|
||||
<div class="weather-info">
|
||||
<div class="weather-condition">
|
||||
<i class="fas fa-snowflake"></i>
|
||||
<span id="snowCondition">Frisse sneeuw</span>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
<span id="humidity">65%</span> |
|
||||
<span id="windSpeed">8</span> km/u
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone Indicator -->
|
||||
<div id="zoneIndicator" class="zone-indicator">
|
||||
<div class="zone-info">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<span id="currentZone">Receptie</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Display -->
|
||||
<div id="timeDisplay" class="time-display">
|
||||
<div class="time-content">
|
||||
<div id="currentTime" class="current-time">12:00</div>
|
||||
<div id="currentDate" class="current-date">1 januari 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Snow Animation Background -->
|
||||
<div class="snow-animation">
|
||||
<div class="snowflake">❄</div>
|
||||
<div class="snowflake">❅</div>
|
||||
<div class="snowflake">❄</div>
|
||||
<div class="snowflake">❅</div>
|
||||
<div class="snowflake">❄</div>
|
||||
<div class="snowflake">❅</div>
|
||||
<div class="snowflake">❄</div>
|
||||
<div class="snowflake">❅</div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Status -->
|
||||
<div id="connectionStatus" class="connection-status">
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot"></span>
|
||||
<span class="status-text">Verbinden...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Overlay -->
|
||||
<div id="errorOverlay" class="error-overlay">
|
||||
<div class="error-content">
|
||||
<div class="error-icon">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<h3>Verbindingsfout</h3>
|
||||
<p id="errorMessage">Kan geen verbinding maken met de server</p>
|
||||
<button id="retryButton" class="retry-button">
|
||||
<i class="fas fa-redo"></i> Opnieuw proberen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zone Selection Modal (for initial setup) -->
|
||||
<div id="zoneModal" class="zone-modal">
|
||||
<div class="zone-modal-content">
|
||||
<h2>Kies Zone</h2>
|
||||
<p>Selecteer de zone voor dit display:</p>
|
||||
<div id="zoneOptions" class="zone-options">
|
||||
<!-- Zone options will be loaded dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
||||
<script src="js/display.js"></script>
|
||||
<script src="js/weather.js"></script>
|
||||
<script src="js/connection.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user