240 lines
8.7 KiB
HTML
240 lines
8.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - {{ super() }}{% endblock %}
|
|
|
|
{% 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="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>
|
|
|
|
<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>
|
|
{% 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">
|
|
<h3>Preview</h3>
|
|
<iframe id="theme-preview-frame" src="" frameborder="0" scrolling="no"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>
|
|
Custom Themes
|
|
<a href="/help/css" target="_blank" class="help-link" title="Open CSS guide in new window">(?)</a>
|
|
</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>
|
|
.help-link {
|
|
font-size: 0.9rem;
|
|
vertical-align: middle;
|
|
text-decoration: none;
|
|
color: var(--primary-color);
|
|
}
|
|
.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;
|
|
}
|
|
.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);
|
|
|
|
// --- 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 %} |