3

assets/css/custom.css

@@ -36,6 +36,9 @@ body {
     position: relative;
     overflow: hidden;
     transition: background-color 0.3s ease;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
 .video-panel .panel-label {

assets/js/main.js

@@ -15,7 +15,12 @@ document.addEventListener('DOMContentLoaded', function () {
     const modalSaveBtn = document.getElementById('modal-save-btn');
     const sceneNameInput = document.getElementById('scene-name-input');
     const sceneTypeSelect = document.getElementById('scene-type-select');
+    
+    // Source settings elements
+    const colorSettings = document.getElementById('source-color-group');
+    const imageSettings = document.getElementById('source-image-group');
     const sceneColorInput = document.getElementById('scene-color-input');
+    const sceneImageUrlInput = document.getElementById('scene-image-url-input');
 
     // Data Store
     let scenes = [];
@@ -72,12 +77,19 @@ document.addEventListener('DOMContentLoaded', function () {
         if (!scene) return;
 
         activePreviewSceneId = scene.id;
-
+        
+        // Clear previous styles
+        previewPanel.style.backgroundColor = '#000';
+        previewPanel.style.backgroundImage = 'none';
         previewContent.textContent = scene.name;
+
         switch (scene.type) {
             case 'color':
                 previewPanel.style.backgroundColor = scene.value;
                 break;
+            case 'image':
+                previewPanel.style.backgroundImage = `url('${scene.value}')`;
+                break;
             default:
                 previewPanel.style.backgroundColor = '#000';
                 break;
@@ -89,6 +101,7 @@ document.addEventListener('DOMContentLoaded', function () {
         activePreviewSceneId = null;
         previewContent.textContent = 'Select a Scene';
         previewPanel.style.backgroundColor = '#000';
+        previewPanel.style.backgroundImage = 'none';
         renderSceneList();
     }
 
@@ -127,6 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
         programContent.textContent = previewScene.name;
         programPanel.style.backgroundColor = previewPanel.style.backgroundColor;
+        programPanel.style.backgroundImage = previewPanel.style.backgroundImage;
         
         clearPreview();
     });
@@ -139,6 +153,12 @@ document.addEventListener('DOMContentLoaded', function () {
     modalCloseBtn.addEventListener('click', hideModal);
     modalCancelBtn.addEventListener('click', hideModal);
 
+    sceneTypeSelect.addEventListener('change', (e) => {
+        const type = e.target.value;
+        colorSettings.style.display = type === 'color' ? 'block' : 'none';
+        imageSettings.style.display = type === 'image' ? 'block' : 'none';
+    });
+
     modalSaveBtn.addEventListener('click', () => {
         const name = sceneNameInput.value.trim();
         if (!name) {
@@ -146,7 +166,17 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
         const type = sceneTypeSelect.value;
-        const value = sceneColorInput.value; // For now, only color
+        let value;
+
+        if (type === 'color') {
+            value = sceneColorInput.value;
+        } else if (type === 'image') {
+            value = sceneImageUrlInput.value.trim();
+            if (!value) {
+                alert('Please enter an image URL.');
+                return;
+            }
+        }
 
         const newScene = addScene(name, type, value);
         updatePreview(newScene.id);
@@ -154,6 +184,10 @@ document.addEventListener('DOMContentLoaded', function () {
         // Reset form and hide modal
         sceneNameInput.value = '';
         sceneColorInput.value = '#1e90ff';
+        sceneImageUrlInput.value = '';
+        sceneTypeSelect.value = 'color';
+        colorSettings.style.display = 'block';
+        imageSettings.style.display = 'none';
         hideModal();
     });
 
@@ -161,8 +195,8 @@ document.addEventListener('DOMContentLoaded', function () {
     function initialize() {
         // Add some default scenes
         addScene('Main Camera', 'color', '#003366');
+        addScene('Starting Soon Screen', 'image', 'https://images.pexels.com/photos/1762851/pexels-photo-1762851.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
         addScene('Screen Share', 'color', '#006633');
-        addScene('Starting Soon', 'color', '#333333');
 
         // Set initial program scene for display
         const firstScene = scenes[0];
@@ -170,7 +204,8 @@ document.addEventListener('DOMContentLoaded', function () {
             activeProgramSceneId = firstScene.id;
             programContent.textContent = firstScene.name;
             programPanel.style.backgroundColor = firstScene.value;
-        }
+            programPanel.style.backgroundImage = 'none';
+}
         
         // Select the second scene for preview initially
         if (scenes.length > 1) {
@@ -179,4 +214,4 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     initialize();
-});
+});

index.php

@@ -94,14 +94,20 @@
                             <label for="scene-type-select" class="form-label">Source Type</label>
                             <select class="form-select" id="scene-type-select">
                                 <option value="color">Solid Color</option>
-                                <option value="image" disabled>Image (soon)</option>
+                                <option value="image">Image</option>
                                 <option value="video" disabled>Video (soon)</option>
                             </select>
                         </div>
-                        <div id="source-color-group" class="mb-3">
+
+                        <div id="source-color-group" class="mb-3 source-settings">
                             <label for="scene-color-input" class="form-label">Background Color</label>
                             <input type="color" class="form-control form-control-color" id="scene-color-input" value="#1e90ff">
                         </div>
+
+                        <div id="source-image-group" class="mb-3 source-settings" style="display: none;">
+                            <label for="scene-image-url-input" class="form-label">Image URL</label>
+                            <input type="url" class="form-control" id="scene-image-url-input" placeholder="https://example.com/image.jpg">
+                        </div>
                         <!-- Other source type options will go here -->
                     </form>
                 </div>