yes

client/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SnowWorld - Narrowcasting Display</title>
+    <link rel="icon" type="image/svg+xml" href="http://localhost:3000/favicon.svg">
     <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>

client/js/display.js

@@ -7,15 +7,29 @@ class DisplayManager {
         this.transitionDuration = 1000; // 1 second
         this.isPlaying = false;
         this.zone = this.getZoneFromURL() || 'reception';
+        this.zoneData = null;
         this.init();
     }
 
-    init() {
+    async init() {
         this.setupEventListeners();
+        await this.loadZoneData();
         this.updateZoneDisplay();
         this.hideLoadingScreen();
     }
 
+    async loadZoneData() {
+        try {
+            const response = await fetch(`http://localhost:3000/api/zones`);
+            if (!response.ok) throw new Error('Failed to fetch zones');
+            const zones = await response.json();
+            this.zoneData = zones.find(z => z.id === this.zone) || null;
+        } catch (error) {
+            console.error('Error loading zone data:', error);
+            this.zoneData = null;
+        }
+    }
+
     setupEventListeners() {
         // Handle visibility change (tab switching)
         document.addEventListener('visibilitychange', () => {
@@ -44,12 +58,25 @@ class DisplayManager {
 
     updateZoneDisplay() {
         const zoneElement = document.getElementById('currentZone');
+        const zoneIconElement = document.querySelector('#zoneIndicator .zone-info i');
+        
         if (zoneElement) {
             zoneElement.textContent = this.getZoneDisplayName(this.zone);
         }
+        
+        // Update icon if we have zone data
+        if (zoneIconElement && this.zoneData && this.zoneData.icon) {
+            zoneIconElement.className = `fas ${this.zoneData.icon}`;
+        }
     }
 
     getZoneDisplayName(zoneId) {
+        // Use zone data from server if available
+        if (this.zoneData && this.zoneData.name) {
+            return this.zoneData.name;
+        }
+        
+        // Fallback to hardcoded names
         const zoneNames = {
             'reception': 'Receptie',
             'restaurant': 'Restaurant',
@@ -167,6 +194,15 @@ class DisplayManager {
                 `;
                 break;
 
+            case 'text':
+                element.innerHTML = `
+                    <div class="text-content">
+                        <h2 class="text-content-title">${contentItem.title}</h2>
+                        <div class="text-content-body">${contentItem.textContent}</div>
+                    </div>
+                `;
+                break;
+
             default:
                 element.innerHTML = `
                     <div class="content-placeholder">
@@ -335,10 +371,11 @@ class DisplayManager {
         this.loadContent(newContent);
     }
 
-    setZone(zone) {
+    async setZone(zone) {
         if (this.zone !== zone) {
             console.log(`Zone changed from ${this.zone} to ${zone}`);
             this.zone = zone;
+            await this.loadZoneData();
             this.updateZoneDisplay();
             
             // Request new content for this zone

client/styles.css

@@ -166,6 +166,37 @@ body {
     backdrop-filter: blur(10px);
 }
 
+/* Text Content Styles */
+.text-content {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.95) 100%);
+    color: var(--text-primary);
+    padding: 4rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    max-width: 80%;
+    max-height: 70%;
+    overflow: auto;
+    text-align: center;
+    backdrop-filter: blur(10px);
+    border: 2px solid rgba(255, 255, 255, 0.3);
+}
+
+.text-content-title {
+    font-size: 3rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin-bottom: 2rem;
+    text-shadow: 2px 2px 4px rgba(0, 102, 204, 0.1);
+}
+
+.text-content-body {
+    font-size: 1.8rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
 .content-placeholder i {
     font-size: 6rem;
     margin-bottom: 1rem;