ramforth/MultiChatOverlay
3
2
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2: User experience enhancements to templates handling, dashboard and overlays.

Browse Source
This commit is contained in:
ramforth
2025-11-17 11:55:53 +01:00
parent 6010666dcf
commit 6af58808ad
10 changed files with 368 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
templates/dashboard.html
View File

@@ -1,53 +1,143 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - MultiChatOverlay</title>
{% extends "base.html" %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
{% block title %}Dashboard - {{ super() }}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>Dashboard</h1>
<p>Welcome, <strong>{{ user.username }}</strong>! You are successfully logged in.</p>
<div class="overlay-url-container">
<p>Your unique overlay URL:</p>
<code>{{ overlay_url }}</code>
</div>
{% block content %}
<div class="card">
<h2>Welcome, {{ user.username }}!</h2>
<p>This is your personal dashboard. Here you can manage your overlay settings and find your unique URL.</p>
</div>
<div class="settings-container">
<h3>Overlay Theme</h3>
<form id="theme-form">
<select name="overlay_theme" id="overlay_theme">
<option value="dark-purple" {% if current_theme == 'dark-purple' %}selected{% endif %}>Dark Purple</option>
<option value="bright-green" {% if current_theme == 'bright-green' %}selected{% endif %}>Bright Green</option>
</select>
<button type="submit">Save Theme</button>
</form>
<p id="save-status"></p>
</div>
<p><a href="/logout">Logout</a></p>
<div class="card">
<h2>Your Overlay URL</h2>
<p>Copy this URL and add it as a "Browser Source" in your streaming software (e.g., OBS, Streamlabs).</p>
<div class="url-box">
<input type="text" id="overlayUrl" value="{{ overlay_url }}" readonly>
<button id="copyButton" class="btn">Copy</button>
</div>
</div>
<script>
document.getElementById('theme-form').addEventListener('submit', async (e) => {
e.preventDefault();
const theme = document.getElementById('overlay_theme').value;
const response = await fetch('/api/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ overlay_theme: theme })
});
const result = await response.json();
document.getElementById('save-status').textContent = result.message;
});
</script>
</body>
</html>
<div class="card">
<h2>Overlay Theme</h2>
<p>Choose a theme for your chat overlay. Your selection will be saved automatically.</p>
<div class="theme-selector-container">
<div class="theme-options">
<label for="theme-select">Select a theme:</label>
<select id="theme-select" name="theme">
<option value="dark-purple" {% if current_theme == 'dark-purple' %}selected{% endif %}>Dark Purple</option>
<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>
</select>
</div>
<div class="theme-preview">
<h3>Preview</h3>
<iframe id="theme-preview-frame" src="" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<a href="/logout" class="btn logout-btn">Logout</a>
<style>
.url-box {
display: flex;
gap: 10px;
}
.url-box input {
flex-grow: 1;
padding: 10px;
border: 1px solid var(--border-color);
background-color: var(--background-color);
color: var(--text-color);
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;
gap: 2rem;
align-items: start;
}
.theme-options select {
width: 100%;
padding: 10px;
border-radius: 6px;
border: 1px solid var(--border-color);
background-color: var(--surface-color);
color: var(--text-color);
font-size: 1rem;
}
.theme-preview {
border: 1px solid var(--border-color);
border-radius: 8px;
background-color: var(--background-color);
}
.theme-preview h3 {
margin: 0;
padding: 0.75rem 1rem;
font-size: 1rem;
border-bottom: 1px solid var(--border-color);
}
#theme-preview-frame {
width: 100%;
height: 150px;
border-radius: 0 0 8px 8px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Copy URL Logic ---
const copyButton = document.getElementById('copyButton');
const overlayUrlInput = document.getElementById('overlayUrl');
copyButton.addEventListener('click', () => {
overlayUrlInput.select();
document.execCommand('copy');
copyButton.textContent = 'Copied!';
setTimeout(() => { copyButton.textContent = 'Copy'; }, 2000);
});
// --- Theme Selector Logic ---
const themeSelect = document.getElementById('theme-select');
const previewFrame = document.getElementById('theme-preview-frame');
const baseUrl = "{{ settings.APP_BASE_URL }}";
const userId = "{{ user.id }}";
// Function to update preview and save settings
function updateTheme(selectedTheme) {
// Update iframe preview
previewFrame.src = `${baseUrl}/overlay/${userId}?theme_override=${selectedTheme}`;
// Save the setting to the backend
fetch('/api/settings', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ overlay_theme: selectedTheme }),
})
.then(response => response.json())
.then(data => {
console.log('Settings saved:', data.message);
})
.catch(error => console.error('Error saving settings:', error));
}
// Event listener for dropdown change
themeSelect.addEventListener('change', (event) => {
updateTheme(event.target.value);
});
// Set initial preview on page load
updateTheme(themeSelect.value);
});
</script>
{% endblock %}