Upload files to "templates"

This commit is contained in:
2024-11-29 14:35:49 -05:00
parent 007ce3959d
commit 48463d414b
4 changed files with 114 additions and 143 deletions

View File

@ -1,35 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
{% if theme == 'dark' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/dark_theme.css') }}">
{% elif theme == 'modern' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/modern_theme.css') }}">
{% elif theme == 'vampire' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/vampire_theme.css') }}">
{% elif theme == 'nordic' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/nordic_theme.css') }}">
{% elif theme == 'halloween' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/halloween_theme.css') }}">
{% else %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/light_theme.css') }}">
{% endif %}
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<link id="theme-stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/' + theme + '_theme.css') }}">
</head>
<body>
<header>
<!-- Burger icon for smaller screens -->
<div class="burger" onclick="toggleMenu()">
<div></div>
<div></div>
<div></div>
</div>
<!-- Navigation menu -->
<nav class="nav-links">
<div class="nav-left">
<!-- Search Bar -->
<div class="search-bar">
<form action="/search" method="GET">
<input type="text" name="query" placeholder="Search..." aria-label="Search">
<button type="submit">🔍</button>
</form>
</div>
</div>
<!-- Centered Links -->
<div class="nav-center">
<a href="/">Home</a>
@ -52,7 +43,6 @@
</div>
<a href="/rule_creation">Rule Creation</a>
</div>
<!-- Right-Aligned Links -->
<div class="nav-right">
{% if current_user.is_authenticated %}
@ -64,15 +54,8 @@
{% endif %}
</div>
</nav>
<!-- Theme Toggle Slider -->
<label class="switch">
<input type="checkbox" id="theme-toggle">
<span class="slider"></span>
</label>
</header>
<div class="tip">
{{ random_tip | safe }}
@ -83,56 +66,40 @@
</main>
<script>
// Theme toggle functionality
const themeToggle = document.getElementById('theme-toggle');
const themeStylesheet = document.getElementById('theme-stylesheet');
const body = document.body;
// Check for stored theme in localStorage
if (localStorage.getItem('theme') === 'light') {
themeToggle.checked = true;
body.classList.add('light-theme');
body.classList.remove('dark-theme');
themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
} else {
themeToggle.checked = false;
body.classList.add('dark-theme');
body.classList.remove('light-theme');
themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
}
// Initialize theme on page load
const currentTheme = localStorage.getItem('theme') || 'modern';
body.classList.add(`${currentTheme}-theme`);
themeToggle.checked = currentTheme === 'light';
// Event listener for theme toggle
themeToggle.addEventListener('change', function() {
if (this.checked) {
body.classList.remove('dark-theme');
body.classList.add('light-theme');
themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
localStorage.setItem('theme', 'light');
} else {
body.classList.remove('light-theme');
body.classList.add('dark-theme');
themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
localStorage.setItem('theme', 'dark');
themeToggle.addEventListener('change', async function () {
const newTheme = this.checked ? 'light' : 'modern';
// Apply theme immediately
body.classList.remove('modern-theme', 'light-theme');
body.classList.add(`${newTheme}-theme`);
// Save the new theme locally
localStorage.setItem('theme', newTheme);
// Send the update to the backend asynchronously
try {
const response = await fetch('/set_theme', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ theme: newTheme }),
});
if (!response.ok) {
console.error('Failed to update theme on the server:', response.statusText);
}
} catch (error) {
console.error('Error updating theme on the backend:', error);
}
});
const navLinks = document.querySelectorAll('.nav-links a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
// Remove active class from all links
navLinks.forEach(link => link.classList.remove('active'));
// Add active class to clicked link
this.classList.add('active');
});
});
// Burger menu toggle function for mobile
function toggleMenu() {
const navLinks = document.querySelector('.nav-links');
navLinks.classList.toggle('active');
}
</script>
</script>
</body>
</html>