|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Czech Language Explorer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.card-flip { |
|
|
perspective: 1000px; |
|
|
} |
|
|
.card-inner { |
|
|
transition: transform 0.8s; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
.card-flip:hover .card-inner { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
.card-front, .card-back { |
|
|
backface-visibility: hidden; |
|
|
} |
|
|
.card-back { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
.typewriter { |
|
|
overflow: hidden; |
|
|
border-right: .15em solid #4f46e5; |
|
|
white-space: nowrap; |
|
|
margin: 0 auto; |
|
|
letter-spacing: .15em; |
|
|
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; |
|
|
} |
|
|
@keyframes typing { |
|
|
from { width: 0 } |
|
|
to { width: 100% } |
|
|
} |
|
|
@keyframes blink-caret { |
|
|
from, to { border-color: transparent } |
|
|
50% { border-color: #4f46e5; } |
|
|
} |
|
|
.czech-flag { |
|
|
background: linear-gradient(to bottom, white 33%, #d7141a 33% 66%, #11457e 66%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<div class="czech-flag w-20 h-14 mx-auto mb-4 rounded shadow-lg"></div> |
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">Czech Language Explorer</h1> |
|
|
<p class="text-lg text-gray-600">Discover the beauty of Czech language and culture</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-comments text-indigo-600 text-2xl mr-3"></i> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Can I speak Czech?</h2> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4">Absolutely! Czech is a West Slavic language spoken by over 10 million people. While it has a reputation for being challenging, with its complex grammar and unique sounds, it's a beautiful language to learn.</p> |
|
|
<div class="typewriter text-indigo-700 font-medium text-lg mb-2">Ahoj! Jak se máš? (Hello! How are you?)</div> |
|
|
<p class="text-gray-600">Start with these basic phrases and explore more below!</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12"> |
|
|
|
|
|
<div class="card-flip h-64"> |
|
|
<div class="card-inner relative w-full h-full"> |
|
|
<div class="card-front absolute w-full h-full bg-indigo-600 rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-white"> |
|
|
<i class="fas fa-handshake text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-2">Greetings</h3> |
|
|
<p>Essential Czech phrases</p> |
|
|
</div> |
|
|
<div class="card-back absolute w-full h-full bg-white rounded-xl shadow-lg p-6"> |
|
|
<h3 class="text-lg font-bold text-indigo-700 mb-3">Common Greetings</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li><span class="font-medium">Dobrý den</span> - Good day</li> |
|
|
<li><span class="font-medium">Ahoj</span> - Hello/Hi</li> |
|
|
<li><span class="font-medium">Na shledanou</span> - Goodbye</li> |
|
|
<li><span class="font-medium">Dobrou noc</span> - Good night</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-flip h-64"> |
|
|
<div class="card-inner relative w-full h-full"> |
|
|
<div class="card-front absolute w-full h-full bg-emerald-600 rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-white"> |
|
|
<i class="fas fa-utensils text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-2">Food & Drinks</h3> |
|
|
<p>Order like a local</p> |
|
|
</div> |
|
|
<div class="card-back absolute w-full h-full bg-white rounded-xl shadow-lg p-6"> |
|
|
<h3 class="text-lg font-bold text-emerald-700 mb-3">Dining Phrases</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li><span class="font-medium">Pivo, prosím</span> - Beer, please</li> |
|
|
<li><span class="font-medium">Kolik to stojí?</span> - How much does it cost?</li> |
|
|
<li><span class="font-medium">Dobrou chuť</span> - Enjoy your meal</li> |
|
|
<li><span class="font-medium">To bylo výborné</span> - That was delicious</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-flip h-64"> |
|
|
<div class="card-inner relative w-full h-full"> |
|
|
<div class="card-front absolute w-full h-full bg-amber-600 rounded-xl shadow-lg p-6 flex flex-col justify-center items-center text-white"> |
|
|
<i class="fas fa-map-marked-alt text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-bold mb-2">Travel</h3> |
|
|
<p>Navigate with ease</p> |
|
|
</div> |
|
|
<div class="card-back absolute w-full h-full bg-white rounded-xl shadow-lg p-6"> |
|
|
<h3 class="text-lg font-bold text-amber-700 mb-3">Travel Phrases</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li><span class="font-medium">Kde je...?</span> - Where is...?</li> |
|
|
<li><span class="font-medium">Kolik je hodin?</span> - What time is it?</li> |
|
|
<li><span class="font-medium">Pomoc!</span> - Help!</li> |
|
|
<li><span class="font-medium">Nerozumím</span> - I don't understand</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-volume-up text-indigo-600 text-2xl mr-3"></i> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Pronunciation Tips</h2> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Unique Czech Sounds</h3> |
|
|
<ul class="space-y-2 text-gray-700"> |
|
|
<li><span class="font-medium">ř</span> - Like a rolled "r" with "zh" (unique to Czech)</li> |
|
|
<li><span class="font-medium">ch</span> - Like the "ch" in Scottish "loch"</li> |
|
|
<li><span class="font-medium">c</span> - Like "ts" in "cats"</li> |
|
|
<li><span class="font-medium">ě</span> - Like "ye" in "yes"</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-800 mb-2">Stress Pattern</h3> |
|
|
<p class="text-gray-700 mb-3">Czech words are always stressed on the first syllable. This makes the rhythm of the language quite different from English.</p> |
|
|
<button id="pronounceBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-play mr-2"></i> Hear Basic Phrases |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-graduation-cap text-indigo-600 text-2xl mr-3"></i> |
|
|
<h2 class="text-2xl font-semibold text-gray-800">Quick Czech Quiz</h2> |
|
|
</div> |
|
|
<div id="quizContainer" class="space-y-4"> |
|
|
<div class="quiz-question"> |
|
|
<p class="font-medium text-gray-800 mb-2">1. How do you say "Thank you" in Czech?</p> |
|
|
<div class="space-y-2"> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q1" value="a" class="form-radio text-indigo-600"> |
|
|
<span>Prosím</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q1" value="b" class="form-radio text-indigo-600"> |
|
|
<span>Děkuji</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q1" value="c" class="form-radio text-indigo-600"> |
|
|
<span>Ahoj</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-question"> |
|
|
<p class="font-medium text-gray-800 mb-2">2. What does "Pivo" mean?</p> |
|
|
<div class="space-y-2"> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q2" value="a" class="form-radio text-indigo-600"> |
|
|
<span>Water</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q2" value="b" class="form-radio text-indigo-600"> |
|
|
<span>Beer</span> |
|
|
</label> |
|
|
<label class="flex items-center space-x-2 cursor-pointer"> |
|
|
<input type="radio" name="q2" value="c" class="form-radio text-indigo-600"> |
|
|
<span>Food</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
<button id="checkQuizBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg"> |
|
|
Check Answers |
|
|
</button> |
|
|
<div id="quizResult" class="hidden mt-4 p-4 rounded-lg"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-16 text-center text-gray-600"> |
|
|
<p>Explore more about Czech language and culture!</p> |
|
|
<p class="mt-2">© 2023 Czech Language Explorer</p> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('pronounceBtn').addEventListener('click', function() { |
|
|
const phrases = [ |
|
|
"Ahoj (Hello)", |
|
|
"Dobrý den (Good day)", |
|
|
"Děkuji (Thank you)", |
|
|
"Prosím (Please/You're welcome)", |
|
|
"Na shledanou (Goodbye)" |
|
|
]; |
|
|
|
|
|
let i = 0; |
|
|
const pronounceNext = () => { |
|
|
if (i < phrases.length) { |
|
|
alert(phrases[i]); |
|
|
i++; |
|
|
setTimeout(pronounceNext, 1500); |
|
|
} |
|
|
}; |
|
|
|
|
|
pronounceNext(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('checkQuizBtn').addEventListener('click', function() { |
|
|
const answers = { |
|
|
q1: 'b', |
|
|
q2: 'b' |
|
|
}; |
|
|
|
|
|
let score = 0; |
|
|
const userAnswers = { |
|
|
q1: document.querySelector('input[name="q1"]:checked')?.value, |
|
|
q2: document.querySelector('input[name="q2"]:checked')?.value |
|
|
}; |
|
|
|
|
|
if (userAnswers.q1 === answers.q1) score++; |
|
|
if (userAnswers.q2 === answers.q2) score++; |
|
|
|
|
|
const resultDiv = document.getElementById('quizResult'); |
|
|
resultDiv.classList.remove('hidden'); |
|
|
|
|
|
if (score === 2) { |
|
|
resultDiv.className = 'bg-green-100 text-green-800 mt-4 p-4 rounded-lg'; |
|
|
resultDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Výborně! (Excellent!) You got both answers correct!'; |
|
|
} else if (score === 1) { |
|
|
resultDiv.className = 'bg-yellow-100 text-yellow-800 mt-4 p-4 rounded-lg'; |
|
|
resultDiv.innerHTML = '<i class="fas fa-check mr-2"></i> Not bad! You got 1 out of 2 correct. Keep practicing!'; |
|
|
} else { |
|
|
resultDiv.className = 'bg-red-100 text-red-800 mt-4 p-4 rounded-lg'; |
|
|
resultDiv.innerHTML = '<i class="fas fa-times-circle mr-2"></i> Try again! Review the phrases and give it another shot.'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ghust68/git-clone-https-huggingface-co-spaces-amgh344-la" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
