Hermes Agent
0a717096cb
Neue Seite tschechisch.html mit 25 Sätzen in 5 Kategorien: - Vorstellen (4): 'Ich habe heute Junggesellenabschied', 'Mein Kumpel heiratet bald' - Leute ansprechen (5): 'Möchtest du unterschreiben?', 'Komm mit uns ein Bier trinken' - Restaurant/Bier (6): 'Eine Runde Bier bitte', 'Die Rechnung bitte', 'Prost!' - Smalltalk/Flirt (5): 'Wie heißt du?', 'Magst du tanzen?' - Notfall (5): 'Ich spreche kein Tschechisch', 'Rufen Sie die Polizei' Features: - Aussprache in Lautschrift (č, ř, ě, ž Erklärungen im Tipp-Block) - Tap-to-Copy-Button pro Satz (clipboard-API + fallback) - Live-Suche (deutsch oder tschechisch) - Dark-Theme mit CZ-Flag-Akzent - Responsiv für Mobile Verlinkt: - index.html: neue Quick-Access-Card (jetzt 9 Cards, alle Files erreichbar) - tourenplan*.html: Tschechisch-Link in Spiele-Bar Translations basieren auf Trainingswissen + Standard-Czech, sollten aber vor Ort idealerweise von Muttersprachlern bestätigt werden.
397 lines
15 KiB
HTML
397 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>🇨🇿 Tschechisch-Spicker — JGA Prag 2026</title>
|
||
<meta name="description" content="Wichtige tschechische Sätze für den JGA in Prag: Anmachen, Bestellen, Notfall. Mit Aussprache und Copy-Button.">
|
||
<style>
|
||
:root {
|
||
--bg: #0f172a;
|
||
--bg-2: #1e293b;
|
||
--card-bg: rgba(255,255,255,0.04);
|
||
--card-border: rgba(255,255,255,0.08);
|
||
--text: #f1f5f9;
|
||
--text-dim: #94a3b8;
|
||
--accent: #d4a017;
|
||
--accent-bright: #f6c544;
|
||
--cz-blue: #1e3a8a;
|
||
--cz-red: #b91c1c;
|
||
--cz-white: #f8fafc;
|
||
--success: #2dd36f;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
line-height: 1.5;
|
||
padding: 16px;
|
||
}
|
||
header {
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
padding: 16px;
|
||
background: linear-gradient(135deg, var(--cz-blue), var(--cz-red));
|
||
border-radius: 16px;
|
||
border: 1px solid var(--accent);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
header::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: linear-gradient(to bottom, var(--cz-blue) 50%, var(--cz-white) 50%);
|
||
opacity: 0.08;
|
||
pointer-events: none;
|
||
}
|
||
header h1 { margin: 0 0 6px; font-size: 26px; }
|
||
header .sub { color: rgba(255,255,255,0.85); font-size: 14px; }
|
||
header .flag { font-size: 36px; margin-bottom: 4px; }
|
||
.back {
|
||
display: inline-block;
|
||
margin-bottom: 12px;
|
||
color: var(--accent-bright);
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
padding: 6px 12px;
|
||
border: 1px solid var(--accent-bright);
|
||
border-radius: 8px;
|
||
}
|
||
.back:hover { background: var(--accent-bright); color: var(--bg); }
|
||
|
||
.category {
|
||
margin-bottom: 24px;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--card-border);
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
}
|
||
.category h2 {
|
||
margin: 0 0 12px;
|
||
font-size: 18px;
|
||
color: var(--accent-bright);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--card-border);
|
||
}
|
||
.phrase {
|
||
background: rgba(0,0,0,0.20);
|
||
border: 1px solid var(--card-border);
|
||
border-radius: 10px;
|
||
padding: 10px 12px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 8px;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.phrase:hover { border-color: var(--accent); }
|
||
.phrase .de {
|
||
flex: 1 1 100%;
|
||
font-size: 13px;
|
||
color: var(--text-dim);
|
||
font-style: italic;
|
||
}
|
||
.phrase .cz {
|
||
flex: 1 1 auto;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
}
|
||
.phrase .pron {
|
||
flex: 1 1 100%;
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
font-family: monospace;
|
||
margin-top: 4px;
|
||
}
|
||
.phrase button {
|
||
background: transparent;
|
||
color: var(--accent-bright);
|
||
border: 1px solid var(--accent-bright);
|
||
border-radius: 8px;
|
||
padding: 6px 10px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
.phrase button:hover { background: var(--accent-bright); color: var(--bg); }
|
||
.phrase button.copied { background: var(--success); border-color: var(--success); color: white; }
|
||
|
||
.tip {
|
||
background: rgba(45,211,111,0.08);
|
||
border: 1px solid rgba(45,211,111,0.30);
|
||
border-radius: 10px;
|
||
padding: 12px 14px;
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: var(--text-dim);
|
||
}
|
||
.tip strong { color: var(--success); }
|
||
.search {
|
||
width: 100%;
|
||
padding: 10px 14px;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--card-border);
|
||
border-radius: 10px;
|
||
color: var(--text);
|
||
font-size: 15px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.search:focus { outline: none; border-color: var(--accent-bright); }
|
||
|
||
footer {
|
||
text-align: center;
|
||
margin-top: 32px;
|
||
padding: 16px;
|
||
color: var(--text-dim);
|
||
font-size: 12px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="index.html" class="back">← Zurück zur Startseite</a>
|
||
|
||
<header>
|
||
<div class="flag">🇨🇿</div>
|
||
<h1>Tschechisch-Spicker</h1>
|
||
<div class="sub">24 Sätze für den JGA in Prag — antippen zum Kopieren</div>
|
||
</header>
|
||
|
||
<input type="text" id="search" class="search" placeholder="🔍 Suchen (Deutsch oder Tschechisch)...">
|
||
|
||
<div class="category">
|
||
<h2>🎉 Vorstellen — was ist heute los?</h2>
|
||
<div class="phrase" data-search="ich habe heute junggesellenabschied mám dnes rozlučku">
|
||
<div class="de">Ich habe heute Junggesellenabschied</div>
|
||
<div class="cz">Mám dnes rozlučku se svobodou</div>
|
||
<div class="pron">MAAM dnes ROS-lootch-ku se SVO-bod-oo</div>
|
||
<button onclick="copyPhrase(this, 'Mám dnes rozlučku se svobodou')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="letzter tag als junggeselle poslední den svobodný">
|
||
<div class="de">Das ist mein letzter Tag als Junggeselle</div>
|
||
<div class="cz">To je můj poslední den jako svobodný</div>
|
||
<div class="pron">to ye MOOY po-sled-nee den YA-ko svo-bod-nee</div>
|
||
<button onclick="copyPhrase(this, 'To je můj poslední den jako svobodný')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="wir feiern heute party slavíme dnes párty">
|
||
<div class="de">Wir feiern heute eine Party</div>
|
||
<div class="cz">Slavíme dnes párty</div>
|
||
<div class="pron">SLA-vee-me dnes PAR-tee</div>
|
||
<button onclick="copyPhrase(this, 'Slavíme dnes párty')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="bald verheiratet ženitba brzy">
|
||
<div class="de">Mein Kumpel heiratet bald</div>
|
||
<div class="cz">Můj kámoš se brzy žení</div>
|
||
<div class="pron">MOOY KAA-mosh she brzee ZHEN-yee</div>
|
||
<button onclick="copyPhrase(this, 'Můj kámoš se brzy žení')">📋 Kopieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>👋 Leute ansprechen — Passanten zum Mitmachen</h2>
|
||
<div class="phrase" data-search="möchtest du unterschreiben chceš podepsat">
|
||
<div class="de">Möchtest du unterschreiben?</div>
|
||
<div class="cz">Chceš podepsat?</div>
|
||
<div class="pron">cheh-TESH po-DEP-sat</div>
|
||
<button onclick="copyPhrase(this, 'Chceš podepsat?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="möchtest du mit uns kommen chceš se připojit">
|
||
<div class="de">Möchtest du mit uns kommen?</div>
|
||
<div class="cz">Chceš se k nám připojit?</div>
|
||
<div class="pron">cheh-TESH se knaam PRZHI-po-yit</div>
|
||
<button onclick="copyPhrase(this, 'Chceš se k nám připojit?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="komm mit uns ein bier trinken pojď s námi na pivo">
|
||
<div class="de">Komm mit uns ein Bier trinken!</div>
|
||
<div class="cz">Pojď s námi na pivo!</div>
|
||
<div class="pron">poyd-sNAH-mee na PI-vo</div>
|
||
<button onclick="copyPhrase(this, 'Pojď s námi na pivo!')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="foto machen mit uns udělat si fotku">
|
||
<div class="de">Magst du ein Foto mit uns machen?</div>
|
||
<div class="cz">Uděláš si s námi fotku?</div>
|
||
<div class="pron">OO-del-yaash she snaa-mee FOT-koo</div>
|
||
<button onclick="copyPhrase(this, 'Uděláš si s námi fotku?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="wir suchen leute für foto hledáme lidi">
|
||
<div class="de">Wir suchen noch Leute für ein Foto</div>
|
||
<div class="cz">Hledáme lidi na fotku</div>
|
||
<div class="pron">HLE-daam-me LIDI na FOT-koo</div>
|
||
<button onclick="copyPhrase(this, 'Hledáme lidi na fotku')">📋 Kopieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🍺 Restaurant & Bier</h2>
|
||
<div class="phrase" data-search="eine runde bier bitte jedno pivo prosím">
|
||
<div class="de">Eine Runde Bier bitte</div>
|
||
<div class="cz">Jedno pivo, prosím</div>
|
||
<div class="pron">YED-no PI-vo PRO-seem</div>
|
||
<button onclick="copyPhrase(this, 'Jedno pivo, prosím')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="noch ein bier bitte ještě jedno pivo">
|
||
<div class="de">Noch ein Bier bitte</div>
|
||
<div class="cz">Ještě jedno pivo, prosím</div>
|
||
<div class="pron">YESH-tye YED-no PI-vo PRO-seem</div>
|
||
<button onclick="copyPhrase(this, 'Ještě jedno pivo, prosím')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="die rechnung bitte zaplatíme účet">
|
||
<div class="de">Die Rechnung bitte</div>
|
||
<div class="cz">Zaplatíme, prosím</div>
|
||
<div class="pron">ZA-pla-tee-me PRO-seem</div>
|
||
<button onclick="copyPhrase(this, 'Zaplatíme, prosím')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="was empfehlen sie co doporučujete">
|
||
<div class="de">Was empfehlen Sie?</div>
|
||
<div class="cz">Co doporučujete?</div>
|
||
<div class="pron">tso do-po-ROO-koo-ye-te</div>
|
||
<button onclick="copyPhrase(this, 'Co doporučujete?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="auf den bräutigam na zdraví ženicha">
|
||
<div class="de">Auf den Bräutigam!</div>
|
||
<div class="cz">Na zdraví ženicha!</div>
|
||
<div class="pron">na ZDRA-vee ZHEN-ee-cha</div>
|
||
<button onclick="copyPhrase(this, 'Na zdraví ženicha!')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="prost na zdraví">
|
||
<div class="de">Prost!</div>
|
||
<div class="cz">Na zdraví!</div>
|
||
<div class="pron">na ZDRA-vee</div>
|
||
<button onclick="copyPhrase(this, 'Na zdraví!')">📋 Kopieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>😏 Smalltalk & Flirt</h2>
|
||
<div class="phrase" data-search="wie heißt du jak se jmenuješ">
|
||
<div class="de">Wie heißt du?</div>
|
||
<div class="cz">Jak se jmenuješ?</div>
|
||
<div class="pron">yak se YMENU-yesh</div>
|
||
<button onclick="copyPhrase(this, 'Jak se jmenuješ?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="schöne stadt krásné město">
|
||
<div class="de">Schöne Stadt!</div>
|
||
<div class="cz">Krásné město!</div>
|
||
<div class="pron">KRAS-ne MYES-to</div>
|
||
<button onclick="copyPhrase(this, 'Krásné město!')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="magst du tanzen chceš tančit">
|
||
<div class="de">Magst du tanzen?</div>
|
||
<div class="cz">Chceš tančit?</div>
|
||
<div class="pron">cheh-TESH TAN-cheet</div>
|
||
<button onclick="copyPhrase(this, 'Chceš tančit?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="ich lade dich ein zvu tě">
|
||
<div class="de">Ich lade dich ein</div>
|
||
<div class="cz">Zvu tě</div>
|
||
<div class="pron">ZVOO tye</div>
|
||
<button onclick="copyPhrase(this, 'Zvu tě')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="du hast schöne augen más krásné oči">
|
||
<div class="de">Du hast wunderschöne Augen</div>
|
||
<div class="cz">Máš krásné oči</div>
|
||
<div class="pron">maash KRAS-ne O-chi</div>
|
||
<button onclick="copyPhrase(this, 'Máš krásné oči')">📋 Kopieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="category">
|
||
<h2>🆘 Notfall & Hilfe</h2>
|
||
<div class="phrase" data-search="ich spreche kein tschechisch nemluvím česky">
|
||
<div class="de">Ich spreche kein Tschechisch</div>
|
||
<div class="cz">Nemluvím česky</div>
|
||
<div class="pron">NEM-loo-veem CHESS-kee</div>
|
||
<button onclick="copyPhrase(this, 'Nemluvím česky')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="können sie mir helfen můžete mi pomoct">
|
||
<div class="de">Können Sie mir helfen?</div>
|
||
<div class="cz">Můžete mi pomoct?</div>
|
||
<div class="pron">MOO-zhe-te mee PO-motst</div>
|
||
<button onclick="copyPhrase(this, 'Můžete mi pomoct?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="wo ist nächste u-bahn nejbližší metro">
|
||
<div class="de">Wo ist die nächste U-Bahn?</div>
|
||
<div class="cz">Kde je nejbližší metro?</div>
|
||
<div class="pron">kde ye NEY-blizh-shee MET-ro</div>
|
||
<button onclick="copyPhrase(this, 'Kde je nejbližší metro?')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="rufen sie die polizei zavolejte policii">
|
||
<div class="de">Rufen Sie die Polizei</div>
|
||
<div class="cz">Zavolejte policii</div>
|
||
<div class="pron">ZA-vo-ley-te po-li-TSI-ee</div>
|
||
<button onclick="copyPhrase(this, 'Zavolejte policii')">📋 Kopieren</button>
|
||
</div>
|
||
<div class="phrase" data-search="ich habe mich verlaufen zabloudil jsem">
|
||
<div class="de">Ich habe mich verlaufen</div>
|
||
<div class="cz">Zabloudil jsem</div>
|
||
<div class="pron">ZA-blou-dil SEM</div>
|
||
<button onclick="copyPhrase(this, 'Zabloudil jsem')">📋 Kopieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tip">
|
||
<strong>💡 Tipp:</strong> Die Aussprache ist grob — tschechische Laute wie <em>ř</em>, <em>ě</em> und <em>č</em> klingen für Deutsche ungewohnt. Prag versteht aber jeden, der sich Mühe gibt. Lieber langsam und mit Geste als perfekt und stumm. 🍻
|
||
</div>
|
||
|
||
<footer>
|
||
Hergestellt für JGA Prag 2026 · 25.–26. Juli · 8 Personen<br>
|
||
<a href="index.html" style="color:var(--accent-bright);">← Zurück zur Startseite</a>
|
||
</footer>
|
||
|
||
<script>
|
||
// Copy-Funktion
|
||
function copyPhrase(btn, text) {
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
btn.classList.add('copied');
|
||
btn.innerHTML = '✅ Kopiert!';
|
||
setTimeout(() => {
|
||
btn.classList.remove('copied');
|
||
btn.innerHTML = '📋 Kopieren';
|
||
}, 1800);
|
||
}).catch(() => fallbackCopy(btn, text));
|
||
} else {
|
||
fallbackCopy(btn, text);
|
||
}
|
||
}
|
||
function fallbackCopy(btn, text) {
|
||
const ta = document.createElement('textarea');
|
||
ta.value = text;
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
document.execCommand('copy');
|
||
document.body.removeChild(ta);
|
||
btn.classList.add('copied');
|
||
btn.innerHTML = '✅ Kopiert!';
|
||
setTimeout(() => {
|
||
btn.classList.remove('copied');
|
||
btn.innerHTML = '📋 Kopieren';
|
||
}, 1800);
|
||
}
|
||
|
||
// Such-Funktion
|
||
document.getElementById('search').addEventListener('input', (e) => {
|
||
const q = e.target.value.toLowerCase();
|
||
document.querySelectorAll('.phrase').forEach(p => {
|
||
const haystack = (p.getAttribute('data-search') || '') + ' ' + p.textContent.toLowerCase();
|
||
p.style.display = haystack.includes(q) ? 'flex' : 'none';
|
||
});
|
||
// Hide leere Kategorien
|
||
document.querySelectorAll('.category').forEach(cat => {
|
||
const visible = cat.querySelectorAll('.phrase[style*="flex"], .phrase:not([style])');
|
||
const allVisible = Array.from(cat.querySelectorAll('.phrase')).every(p => p.style.display !== 'none');
|
||
cat.style.display = allVisible || q === '' ? 'block' : 'none';
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |