221 lines
15 KiB
HTML
221 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Wordle‑Cheater (DE)</title>
|
||
<meta name="description" content="Wordle‑Cheater: Finde deutsche 5‑Buchstaben‑Wörter anhand bekannter Buchstaben und Positionen. Quellen: OpenThesaurus und wordfreq." />
|
||
<meta name="robots" content="index,follow" />
|
||
<link rel="canonical" href="{{ request.url_root }}" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="Wordle‑Cheater (DE)" />
|
||
<meta property="og:description" content="Finde deutsche 5‑Buchstaben‑Wörter mit Positions- und Buchstabenfiltern. Quellen: OpenThesaurus & wordfreq." />
|
||
<meta property="og:url" content="{{ request.url_root }}" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<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') }}" />
|
||
<link rel="manifest" href="/manifest.webmanifest" />
|
||
<meta name="theme-color" content="#0b1220" />
|
||
<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; --error:#b91c1c; }
|
||
[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; --error:#ef4444; }
|
||
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; }
|
||
.page-header { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
|
||
.page-header h1 { margin: 0; }
|
||
@media (max-width: 480px) { .page-header h1 { font-size: 1.5rem; } }
|
||
.grid { display: grid; grid-template-columns: repeat(5, 3rem); gap: .5rem; }
|
||
.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; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; text-transform: uppercase; }
|
||
.text-input { font-size: 1.1rem; padding: .5rem; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: .375rem; width: 100%; box-sizing: border-box; font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; text-transform: uppercase; }
|
||
label { font-weight: 600; display: block; margin-top: 1rem; margin-bottom: .25rem; }
|
||
.results { margin-top: 1.5rem; }
|
||
.results-box { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
|
||
.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: 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: var(--skip-bg); color: var(--skip-text); border-radius: .25rem; }
|
||
.hint { margin-top: .25rem; color: var(--muted); font-size: .9rem; }
|
||
.inline-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
|
||
.filter-box { border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .75rem; margin: .5rem 0 1rem; }
|
||
.word-list { list-style: none; padding: 0; margin: 0; }
|
||
.word-list li { display: inline-block; margin: 0 .25rem .25rem 0; }
|
||
fieldset { border: 1px solid var(--border); border-radius: .5rem; padding: .75rem; }
|
||
legend { font-weight: 700; padding: 0 .25rem; }
|
||
.theme-toggle { background: var(--button-bg); color: var(--button-text); border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .6rem; font-size: .95rem; margin-top: 0; }
|
||
.theme-toggle:focus { outline: 2px solid #3b82f6; outline-offset: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="#results" class="skip-link">Zum Ergebnisbereich springen</a>
|
||
<div class="container">
|
||
<header class="page-header">
|
||
<button id="theme-toggle" class="theme-toggle" aria-pressed="false" aria-label="Theme umschalten" title="Theme umschalten">🌞/🌙</button>
|
||
<h1>Wordle‑Cheater (Deutsch)</h1>
|
||
</header>
|
||
<p>Wortliste geladen: <strong>{{ words_count }}</strong> Wörter</p>
|
||
|
||
<main id="main" role="main">
|
||
<form id="search-form" method="post" aria-describedby="form-hint">
|
||
<p id="form-hint" class="hint">Gib bekannte Buchstaben ein. Leere Felder werden ignoriert.</p>
|
||
|
||
<fieldset>
|
||
<legend>Buchstaben mit korrekter Position</legend>
|
||
<div class="grid" aria-describedby="pos-hint">
|
||
<input id="pos1" name="pos1" maxlength="1" aria-label="Position 1" inputmode="text" autocomplete="off" pattern="[A-Za-zÄÖÜäöüß]" value="{{ pos[0] }}" />
|
||
<input id="pos2" name="pos2" maxlength="1" aria-label="Position 2" inputmode="text" autocomplete="off" pattern="[A-Za-zÄÖÜäöüß]" value="{{ pos[1] }}" />
|
||
<input id="pos3" name="pos3" maxlength="1" aria-label="Position 3" inputmode="text" autocomplete="off" pattern="[A-Za-zÄÖÜäöüß]" value="{{ pos[2] }}" />
|
||
<input id="pos4" name="pos4" maxlength="1" aria-label="Position 4" inputmode="text" autocomplete="off" pattern="[A-Za-zÄÖÜäöüß]" value="{{ pos[3] }}" />
|
||
<input id="pos5" name="pos5" maxlength="1" aria-label="Position 5" inputmode="text" autocomplete="off" pattern="[A-Za-zÄÖÜäöüß]" value="{{ pos[4] }}" />
|
||
</div>
|
||
<p id="pos-hint" class="hint">Je Feld genau ein Buchstabe. Umlaute (ä, ö, ü) und ß sind erlaubt.</p>
|
||
</fieldset>
|
||
|
||
<label for="includes">Weitere enthaltene Buchstaben (beliebige Reihenfolge)</label>
|
||
<input id="includes" name="includes" class="text-input" aria-describedby="includes-hint" inputmode="text" autocomplete="off" value="{{ includes }}" />
|
||
<p id="includes-hint" class="hint">Mehrere Buchstaben ohne Trennzeichen eingeben (z. B. „aei“).</p>
|
||
|
||
<label for="excludes">Ausgeschlossene Buchstaben</label>
|
||
<input id="excludes" name="excludes" class="text-input" aria-describedby="excludes-hint" inputmode="text" autocomplete="off" value="{{ excludes }}" />
|
||
<p id="excludes-hint" class="hint">Buchstaben, die nicht vorkommen (z. B. „rst“).</p>
|
||
|
||
<button type="submit">Suchen</button>
|
||
</form>
|
||
|
||
{% if results is not none %}
|
||
<div class="results" id="results" role="region" aria-labelledby="results-title">
|
||
<h2 id="results-title">Vorschläge (<span id="visible-count">{{ results|length }}</span>)</h2>
|
||
<fieldset class="filter-box" role="group">
|
||
<legend>Wortquellen‑Filter</legend>
|
||
<div class="inline-controls">
|
||
<label><input id="filter-ot" type="checkbox" name="use_ot" form="search-form" {% if use_ot %}checked{% endif %}/> OT (OpenThesaurus)</label>
|
||
<label><input id="filter-wf" type="checkbox" name="use_wf" form="search-form" {% if use_wf %}checked{% endif %}/> WF (wordfreq)</label>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="filter-box" role="group">
|
||
<legend>Umlaute</legend>
|
||
<div class="inline-controls">
|
||
<label><input id="filter-umlaut" type="checkbox" /> Umlaute einbeziehen (ä, ö, ü, ß)</label>
|
||
</div>
|
||
</fieldset>
|
||
<div class="results-box">
|
||
{% if results|length == 0 %}
|
||
<p>Keine Treffer. Bitte Bedingungen anpassen.</p>
|
||
{% else %}
|
||
<details open>
|
||
<summary>Liste anzeigen</summary>
|
||
<ul class="word-list">
|
||
{% for w in results %}
|
||
{% set srcs = sources_map.get(w, []) %}
|
||
{% set has_umlaut = ('ä' in w or 'ö' in w or 'ü' in w or 'ß' in w) %}
|
||
<li data-sources="{{ srcs|join(' ') }}" data-umlaut="{{ 1 if has_umlaut else 0 }}">
|
||
<span class="badge">{{ w }}
|
||
{% for s in srcs %}
|
||
{% if s == 'ot' %}
|
||
<span class="source ot">OT</span>
|
||
{% elif s == 'wf' %}
|
||
<span class="source wf">WF</span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</span>
|
||
</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</details>
|
||
{% endif %}
|
||
</div>
|
||
<p>
|
||
<strong>Legende:</strong>
|
||
<span class="source wf">WF</span> = <a href="https://pypi.org/project/wordfreq/" target="_blank" rel="noopener noreferrer">Wordfreq</a>,
|
||
<span class="source ot">OT</span> = <a href="https://www.openthesaurus.de" target="_blank" rel="noopener noreferrer">OpenThesaurus</a>
|
||
</p>
|
||
</div>
|
||
{% endif %}
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
Yet another <a href="https://gitea.elpatron.me/elpatron/wordle-cheater" rel="noopener noreferrer">Open Source Project</a>, vibe coded in less than 1 hour 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') + ')';
|
||
}
|
||
setTheme(currentTheme());
|
||
btn.addEventListener('click', function() {
|
||
var next = currentTheme() === 'dark' ? 'light' : 'dark';
|
||
setTheme(next);
|
||
});
|
||
})();
|
||
</script>
|
||
<script>
|
||
function applyFilters() {
|
||
var ot = document.getElementById('filter-ot');
|
||
var wf = document.getElementById('filter-wf');
|
||
var uml = document.getElementById('filter-umlaut');
|
||
if (!ot || !wf) return;
|
||
var allowed = [];
|
||
if (ot.checked) allowed.push('ot');
|
||
if (wf.checked) allowed.push('wf');
|
||
var items = document.querySelectorAll('.word-list li');
|
||
var visible = 0;
|
||
items.forEach(function(li) {
|
||
var sources = (li.dataset.sources || '').split(/\s+/).filter(Boolean);
|
||
var hasUmlaut = li.dataset.umlaut === '1';
|
||
var showSource = allowed.length === 0 ? false : sources.some(function(s){ return allowed.indexOf(s) !== -1; });
|
||
var showUmlaut = uml && uml.checked ? true : !hasUmlaut; // an => alle, aus => ohne Umlaute
|
||
var show = showSource && showUmlaut;
|
||
li.style.display = show ? '' : 'none';
|
||
if (show) visible++;
|
||
});
|
||
var countEl = document.getElementById('visible-count');
|
||
if (countEl) countEl.textContent = String(visible);
|
||
}
|
||
window.addEventListener('load', function() {
|
||
var ot = document.getElementById('filter-ot');
|
||
var wf = document.getElementById('filter-wf');
|
||
var uml = document.getElementById('filter-umlaut');
|
||
if (ot) ot.addEventListener('change', applyFilters);
|
||
if (wf) wf.addEventListener('change', applyFilters);
|
||
if (uml) uml.addEventListener('change', applyFilters);
|
||
applyFilters();
|
||
});
|
||
</script>
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', function() {
|
||
navigator.serviceWorker.register('/sw.js');
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|