elpatron/wordle-cheater
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: elpatron:750bee4991868d9c0678001a89b04127d6c20db2
Branches Tags
elpatron:main
...
compare: elpatron:f87a56e55d3f0c1bcd4382742fe2bf54ca186ae4
Branches Tags
elpatron:main

2 Commits
750bee4991 ... f87a56e55d

Author SHA1 Message Date
elpatron
f87a56e55d Change footer 2025-08-19 12:01:32 +02:00
elpatron
801081c1d6 Dark-Theme mit Umschalter (Light/Dark), CSS-Variablen und Persistenz via localStorage 2025-08-19 11:59:55 +02:00
1 changed files with 71 additions and 7 deletions
Expand all files Collapse all files

78
templates/index.html
View File

@@ -15,32 +15,75 @@
<meta name="twitter:title" content="Wordle‑Cheater (DE)" />
<meta name="twitter:description" content="Finde deutsche 5‑Buchstaben‑Wörter mit Positions- und Buchstabenfiltern. Quellen: OpenThesaurus & wordfreq." />
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}" />
<meta name="color-scheme" content="light dark" />
<script>
(function() {
try {
var saved = localStorage.getItem('theme');
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = saved || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})();
</script>
<style>
:root {
--bg: #ffffff;
--text: #111827;
--muted: #6b7280;
--badge-bg: #e5e7eb;
--badge-text: #111827;
--border: #e5e7eb;
--skip-bg: #111827;
--skip-text: #ffffff;
--button-bg: #111827;
--button-text: #ffffff;
--input-bg: #ffffff;
--input-text: #111827;
}
[data-theme="dark"] {
--bg: #0b1220;
--text: #e5e7eb;
--muted: #9ca3af;
--badge-bg: #374151;
--badge-text: #f9fafb;
--border: #334155;
--skip-bg: #e5e7eb;
--skip-text: #111827;
--button-bg: #e5e7eb;
--button-text: #111827;
--input-bg: #111827;
--input-text: #e5e7eb;
}
html, body { background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 2rem; }
.container { max-width: 800px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
.grid input { text-align: center; font-size: 1.25rem; padding: .4rem; }
.grid input { text-align: center; font-size: 1.25rem; padding: .4rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; }
label { font-weight: 600; display: block; margin-top: 1rem; margin-bottom: .25rem; }
.results { margin-top: 1.5rem; }
.badge { display: inline-block; padding: .25rem .5rem; background: #e5e7eb; color: #111827; border-radius: .375rem; margin-right: .25rem; margin-bottom: .25rem; }
.badge { display: inline-block; padding: .25rem .5rem; background: var(--badge-bg); color: var(--badge-text); border-radius: .375rem; margin-right: .25rem; margin-bottom: .25rem; }
.source { font-size: .75rem; padding: .1rem .35rem; border-radius: .25rem; margin-left: .25rem; }
.source.ot { background: #dbeafe; color: #1e40af; }
.source.wf { background: #dcfce7; color: #065f46; }
button { margin-top: 1rem; padding: .5rem 1rem; font-size: 1rem; }
summary { cursor: pointer; }
.footer { margin-top: 2rem; font-size: .9rem; color: #6b7280; }
.footer { margin-top: 2rem; font-size: .9rem; color: var(--muted); }
.footer a { color: inherit; text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: #111827; color: #ffffff; border-radius: .25rem; }
.hint { margin-top: .25rem; color: #374151; font-size: .9rem; }
.skip-link:focus { position: static; width: auto; height: auto; padding: .5rem .75rem; background: var(--skip-bg); color: var(--skip-text); border-radius: .25rem; }
.hint { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.word-list { list-style: none; padding: 0; margin: 0; }
.word-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
fieldset { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .75rem; }
fieldset { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
legend { font-weight: 700; padding: 0 .25rem; }
.theme-toggle { position: fixed; top: .75rem; left: .75rem; z-index: 100; background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; }
.theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
</style>
</head>
<body>
<button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
<a href="#results" class="skip-link">Zum Ergebnisbereich springen</a>
<div class="container">
<h1>Wordle‑Cheater (Deutsch)</h1>
@@ -109,8 +152,29 @@
</main>
<footer class="footer">
Made in 2025 with ❤️ and ☕ by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
Another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater">Open Source Project</a>, vibe coded in 2025 with ❤️ and ☕ by <a href="mailto:elpatron@mailbox.org">Markus F.J. Busche</a>
</footer>
</div>
<script>
(function() {
var btn = document.getElementById('theme-toggle');
if (!btn) return;
function currentTheme() { return document.documentElement.getAttribute('data-theme') || 'light'; }
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
try { localStorage.setItem('theme', theme); } catch (e) {}
btn.setAttribute('aria-pressed', theme === 'dark');
btn.textContent = theme === 'dark' ? '🌙' : '🌞';
btn.title = 'Theme umschalten (' + (theme === 'dark' ? 'Dunkel' : 'Hell') + ')';
}
// init label/state
setTheme(currentTheme());
btn.addEventListener('click', function() {
var next = currentTheme() === 'dark' ? 'light' : 'dark';
setTheme(next);
});
})();
</script>
</body>
</html>