Starting implementation of user made custom CSS templates

templates/dashboard.html

@@ -28,6 +28,13 @@
                 <option value="bright-green" {% if current_theme == 'bright-green' %}selected{% endif %}>Bright Green</option>
                 <option value="minimal-light" {% if current_theme == 'minimal-light' %}selected{% endif %}>Minimal Light</option>
                 <option value="hacker-green" {% if current_theme == 'hacker-green' %}selected{% endif %}>Hacker Green</option>
+                {% if custom_themes %}
+                <optgroup label="Your Themes">
+                    {% for theme in custom_themes %}
+                    <option value="custom-{{ theme.id }}" {% if current_theme == 'custom-' ~ theme.id %}selected{% endif %}>{{ theme.name }}</option>
+                    {% endfor %}
+                </optgroup>
+                {% endif %}
             </select>
         </div>
         <div class="theme-preview">
@@ -37,7 +44,32 @@
     </div>
 </div>
 
-<a href="/logout" class="btn logout-btn">Logout</a>
+<div class="card">
+    <h2>Custom Themes</h2>
+    <p>Create your own themes with CSS. These are private to your account.</p>
+    
+    <div id="custom-themes-list">
+        {% for theme in custom_themes %}
+        <div class="custom-theme-item" id="theme-item-{{ theme.id }}">
+            <span>{{ theme.name }}</span>
+            <button class="delete-theme-btn" data-theme-id="{{ theme.id }}">Delete</button>
+        </div>
+        {% endfor %}
+    </div>
+
+    <form id="theme-form" class="theme-form">
+        <h3>Create New Theme</h3>
+        <div class="form-group">
+            <label for="theme-name">Theme Name</label>
+            <input type="text" id="theme-name" name="name" required>
+        </div>
+        <div class="form-group">
+            <label for="theme-css">CSS Content</label>
+            <textarea id="theme-css" name="css_content" rows="8" required placeholder="body { color: red; }"></textarea>
+        </div>
+        <button type="submit" class="btn-primary">Save Theme</button>
+    </form>
+</div>
 
 <style>
     .url-box {
@@ -53,13 +85,6 @@
         border-radius: 6px;
         font-family: monospace;
     }
-    .logout-btn {
-        margin-top: 1rem;
-        background-color: #c72c41;
-    }
-    .logout-btn:hover {
-        background-color: #a62636;
-    }
     .theme-selector-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -138,6 +163,69 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Set initial preview on page load
     updateTheme(themeSelect.value);
+
+    // --- Custom Theme Creation Logic ---
+    const themeForm = document.getElementById('theme-form');
+    themeForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        const formData = new FormData(themeForm);
+        const data = Object.fromEntries(formData.entries());
+
+        fetch('/api/themes', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data),
+        })
+        .then(response => response.json())
+        .then(newTheme => {
+            // Add new theme to the list and dropdown without reloading
+            addThemeToList(newTheme);
+            addThemeToSelect(newTheme);
+            themeForm.reset(); // Clear the form
+        })
+        .catch(error => console.error('Error creating theme:', error));
+    });
+
+    // --- Custom Theme Deletion Logic ---
+    const themesListContainer = document.getElementById('custom-themes-list');
+    themesListContainer.addEventListener('click', function(event) {
+        if (event.target.classList.contains('delete-theme-btn')) {
+            const themeId = event.target.dataset.themeId;
+            if (confirm('Are you sure you want to delete this theme?')) {
+                fetch(`/api/themes/${themeId}`, { method: 'DELETE' })
+                .then(response => {
+                    if (response.ok) {
+                        // Remove theme from the list and dropdown
+                        document.getElementById(`theme-item-${themeId}`).remove();
+                        document.querySelector(`#theme-select option[value="custom-${themeId}"]`).remove();
+                    }
+                })
+                .catch(error => console.error('Error deleting theme:', error));
+            }
+        }
+    });
+
+    function addThemeToList(theme) {
+        const list = document.getElementById('custom-themes-list');
+        const item = document.createElement('div');
+        item.className = 'custom-theme-item';
+        item.id = `theme-item-${theme.id}`;
+        item.innerHTML = `<span>${theme.name}</span><button class="delete-theme-btn" data-theme-id="${theme.id}">Delete</button>`;
+        list.appendChild(item);
+    }
+
+    function addThemeToSelect(theme) {
+        let optgroup = document.querySelector('#theme-select optgroup[label="Your Themes"]');
+        if (!optgroup) {
+            optgroup = document.createElement('optgroup');
+            optgroup.label = 'Your Themes';
+            themeSelect.appendChild(optgroup);
+        }
+        const option = document.createElement('option');
+        option.value = `custom-${theme.id}`;
+        option.textContent = theme.name;
+        optgroup.appendChild(option);
+    }
 });
 </script>
 {% endblock %}

templates/overlay-custom.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Chat Overlay</title>
+    <link rel="stylesheet" href="{{ url_for('static', path='css/overlay-base.css') }}">
+    <link rel="stylesheet" href="/css/custom/{{ theme_id }}">
+</head>
+<body>
+    <div class="chat-container">
+        <!-- Chat messages will be injected here by the WebSocket client -->
+    </div>
+</body>
+</html>