80 lines
2.8 KiB
HTML
80 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" id="html" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NewsArchiver</title>
|
|
<meta name="description" content="NewsArchiver - Archive news articles from RSS feeds">
|
|
<meta property="og:title" content="NewsArchiver">
|
|
<meta property="og:description" content="Archive news articles from RSS feeds">
|
|
<meta property="og:type" content="website">
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E📰%3C/text%3E%3C/svg%3E">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<style>
|
|
#theme-toggle {
|
|
background: none;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--primary-color);
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#theme-toggle:hover {
|
|
background-color: var(--accent-color);
|
|
color: white;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.theme-icon {
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>NewsArchiver</h1>
|
|
<nav>
|
|
<a href="/">Archives</a>
|
|
<a href="/status">Status</a>
|
|
<button id="theme-toggle" aria-label="Toggle dark mode">
|
|
<span class="theme-icon" id="theme-icon">☀️</span>
|
|
<span id="theme-text">Light</span>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
<script>
|
|
const html = document.getElementById('html');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const themeText = document.getElementById('theme-text');
|
|
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
setTheme(savedTheme);
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
const currentTheme = html.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
|
setTheme(newTheme);
|
|
});
|
|
|
|
function setTheme(theme) {
|
|
html.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
|
|
if (theme === 'dark') {
|
|
themeIcon.textContent = '☀️';
|
|
themeText.textContent = 'Light';
|
|
} else {
|
|
themeIcon.textContent = '🌙';
|
|
themeText.textContent = 'Dark';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |