Spaces:
Running
Running
File size: 24,718 Bytes
5454e82 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Journey Through Ancient Egypt</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
egypt: {
gold: '#D4AF37',
sand: '#E1C16E',
stone: '#8B7D6B',
papyrus: '#F5F0E1',
hieroglyph: '#2C5F2D',
}
},
fontFamily: {
hiero: ['Noto Sans Egyptian Hieroglyphs', 'sans-serif'],
egypt: ['Cinzel', 'serif']
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Noto+Sans+Egyptian+Hieroglyphs&display=swap" rel="stylesheet">
<style>
.hieroglyph-bg {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="%23D4AF37" stroke-width="2"/><circle cx="50" cy="50" r="15" fill="none" stroke="%23D4AF37" stroke-width="2"/></svg>');
background-size: 100px 100px;
}
.pyramid {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.cartouche {
border: 3px solid #D4AF37;
border-radius: 50px;
padding: 10px 20px;
display: inline-block;
}
.scroll-text {
animation: scroll 20s linear infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.hieroglyphic {
font-family: 'Noto Sans Egyptian Hieroglyphs', sans-serif;
font-size: 2rem;
}
.egyptian-text {
font-family: 'Cinzel', serif;
}
</style>
</head>
<body class="bg-egypt-papyrus font-sans">
<!-- Header with Egyptian theme -->
<header class="bg-egypt-stone text-egypt-papyrus py-6 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full hieroglyph-bg opacity-10"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<i class="fas fa-sun text-3xl text-egypt-stone"></i>
</div>
<h1 class="text-3xl md:text-4xl font-bold egyptian-text">Journey Through Ancient Egypt</h1>
</div>
<nav class="flex space-x-6">
<a href="#" class="hover:text-egypt-gold transition">Temples</a>
<a href="#" class="hover:text-egypt-gold transition">Pharaohs</a>
<a href="#" class="hover:text-egypt-gold transition">Tombs</a>
<a href="#" class="hover:text-egypt-gold transition">Hieroglyphs</a>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative py-16 bg-gradient-to-r from-egypt-stone to-egypt-gold">
<div class="absolute inset-0 opacity-20">
<div class="absolute top-0 left-0 w-full h-full bg-repeat" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><path d=\"M20,20 L80,20 L80,80 L20,80 Z\" fill=\"none\" stroke=\"%23000\" stroke-width=\"1\"/><circle cx=\"50\" cy=\"50\" r=\"15\" fill=\"none\" stroke=\"%23000\" stroke-width=\"1\"/></svg>');"></div>
</div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl md:text-6xl font-bold text-egypt-papyrus mb-6 egyptian-text">Discover the Wonders of the Pharaohs</h2>
<p class="text-xl text-egypt-papyrus mb-8">Explore the secrets of one of the world's greatest civilizations. Marvel at architectural masterpieces and unlock the mysteries of hieroglyphic writing.</p>
<div class="flex justify-center space-x-4">
<button class="bg-egypt-papyrus text-egypt-stone px-6 py-3 rounded-full font-bold hover:bg-egypt-gold transition transform hover:scale-105">
Explore Pyramids
</button>
<button class="bg-transparent border-2 border-egypt-papyrus text-egypt-papyrus px-6 py-3 rounded-full font-bold hover:bg-egypt-papyrus hover:text-egypt-stone transition">
Decode Hieroglyphs
</button>
</div>
</div>
</div>
</section>
<!-- Hieroglyphic Translator Section -->
<section class="py-16 bg-egypt-papyrus">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold text-egypt-stone mb-4 egyptian-text">Hieroglyphic Translator</h2>
<p class="text-lg text-gray-700">Translate English text into ancient Egyptian hieroglyphs</p>
</div>
<div class="bg-white rounded-xl shadow-xl p-6 mb-12 border-2 border-egypt-gold">
<div class="mb-6">
<label for="englishInput" class="block text-lg font-medium text-egypt-stone mb-2">Enter English Text:</label>
<textarea id="englishInput" class="w-full h-32 p-4 border-2 border-egypt-gold rounded-lg focus:ring-2 focus:ring-egypt-gold focus:border-transparent" placeholder="Type your message here...">Hello Ancient Egypt</textarea>
</div>
<div class="flex justify-center my-6">
<button id="translateBtn" class="bg-egypt-gold hover:bg-egypt-stone text-white font-bold py-3 px-8 rounded-full transition transform hover:scale-105">
<i class="fas fa-exchange-alt mr-2"></i> Translate to Hieroglyphs
</button>
</div>
<div class="mb-4">
<label class="block text-lg font-medium text-egypt-stone mb-2">Hieroglyphic Translation:</label>
<div id="hieroglyphOutput" class="w-full min-h-32 p-6 border-2 border-egypt-gold rounded-lg bg-egypt-papyrus flex items-center justify-center hieroglyphic text-4xl">
๐๐๐๐ช๐
ฑ๐๐๐๐ช๐๐ด
</div>
</div>
<div class="mt-8">
<h3 class="text-xl font-bold text-egypt-stone mb-4">Hieroglyphic Reference</h3>
<div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4">
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">A</div>
</div>
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">B</div>
</div>
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">C</div>
</div>
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">D</div>
</div>
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">E</div>
</div>
<div class="bg-egypt-papyrus border border-egypt-gold rounded-lg p-3 text-center">
<div class="hieroglyphic text-3xl mb-1">๐</div>
<div class="text-xs">F</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ancient Egypt Highlights -->
<section class="py-16 bg-gradient-to-b from-egypt-papyrus to-egypt-sand">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center text-egypt-stone mb-12 egyptian-text">Explore Ancient Egypt</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Pyramid Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-egypt-gold transform transition hover:scale-105">
<div class="h-48 bg-egypt-stone relative">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-40 h-40 pyramid bg-gradient-to-b from-yellow-600 to-yellow-800"></div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-egypt-stone mb-2">The Great Pyramids</h3>
<p class="text-gray-700 mb-4">Marvel at the architectural marvels of Giza, built as eternal resting places for the pharaohs.</p>
<button class="text-egypt-gold font-semibold hover:underline">Explore More</button>
</div>
</div>
<!-- Temple Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-egypt-gold transform transition hover:scale-105">
<div class="h-48 bg-egypt-stone relative">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center text-egypt-papyrus">
<i class="fas fa-landmark text-6xl mb-2"></i>
<p class="text-xl font-bold">Karnak Temple</p>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-egypt-stone mb-2">Sacred Temples</h3>
<p class="text-gray-700 mb-4">Discover the grand temples dedicated to Egyptian gods, filled with hieroglyphic inscriptions.</p>
<button class="text-egypt-gold font-semibold hover:underline">Explore More</button>
</div>
</div>
<!-- Tomb Card -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-egypt-gold transform transition hover:scale-105">
<div class="h-48 bg-egypt-stone relative">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center text-egypt-papyrus">
<i class="fas fa-tombstone text-6xl mb-2"></i>
<p class="text-xl font-bold">Valley of the Kings</p>
</div>
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-egypt-stone mb-2">Royal Tombs</h3>
<p class="text-gray-700 mb-4">Uncover the treasures of pharaohs buried in elaborate tombs carved into limestone cliffs.</p>
<button class="text-egypt-gold font-semibold hover:underline">Explore More</button>
</div>
</div>
</div>
</div>
</section>
<!-- Pharaohs Section -->
<section class="py-16 bg-egypt-stone text-egypt-papyrus">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 egyptian-text">Legendary Pharaohs</h2>
<div class="max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row items-center bg-egypt-papyrus text-egypt-stone rounded-xl shadow-lg p-6 mb-8">
<div class="w-32 h-32 rounded-full bg-egypt-gold flex items-center justify-center mb-6 md:mb-0 md:mr-8">
<i class="fas fa-crown text-5xl text-egypt-stone"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2">Tutankhamun</h3>
<p class="mb-4">The boy king whose tomb's discovery in 1922 revealed incredible treasures and provided unprecedented insight into ancient Egyptian burial practices.</p>
<div class="cartouche text-egypt-gold">
<span class="hieroglyphic">๐๐
ฑ๐๐๐๐
ฑ๐ช</span>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row items-center bg-egypt-papyrus text-egypt-stone rounded-xl shadow-lg p-6">
<div class="w-32 h-32 rounded-full bg-egypt-gold flex items-center justify-center mb-6 md:mb-0 md:mr-8">
<i class="fas fa-sun text-5xl text-egypt-stone"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2">Ramses II</h3>
<p class="mb-4">Known as Ramses the Great, he was the third Egyptian pharaoh of the Nineteenth Dynasty and is often regarded as the greatest and most powerful pharaoh of the New Kingdom.</p>
<div class="cartouche text-egypt-gold">
<span class="hieroglyphic">๐๊ฅ-ms-sw</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Egyptian Gods Section -->
<section class="py-16 bg-egypt-papyrus">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center text-egypt-stone mb-12 egyptian-text">Major Egyptian Gods and Goddesses</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Ra -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">๐ณ</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Ra</h3>
</div>
<p class="text-gray-700 mb-3"><strong>God of the Sun</strong></p>
<p class="text-gray-700">The supreme sun god, believed to rule over all parts of the created world: the sky, the earth, and the underworld. Often depicted as a man with a falcon head and a sun disk on his head.</p>
</div>
<!-- Isis -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">๐ฟ</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Isis</h3>
</div>
<p class="text-gray-700 mb-3"><strong>Goddess of Magic and Motherhood</strong></p>
<p class="text-gray-700">Wife of Osiris and mother of Horus. Associated with magic, healing, and protection. Often depicted as a woman wearing a throne-shaped headdress or with wings.</p>
</div>
<!-- Anubis -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">๐ข</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Anubis</h3>
</div>
<p class="text-gray-700 mb-3"><strong>God of the Afterlife</strong></p>
<p class="text-gray-700">God of mummification and the afterlife. Depicted as a man with a jackal head. He weighed the hearts of the deceased against the feather of Ma'at to determine their fate.</p>
</div>
<!-- Horus -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">๐</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Horus</h3>
</div>
<p class="text-gray-700 mb-3"><strong>God of the Sky</strong></p>
<p class="text-gray-700">The sky god, often depicted as a falcon or a man with a falcon head. He was the patron of the pharaohs and represented divine kingship and the triumph of order over chaos.</p>
</div>
<!-- Hathor -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">๐จ</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Hathor</h3>
</div>
<p class="text-gray-700 mb-3"><strong>Goddess of Love and Music</strong></p>
<p class="text-gray-700">Goddess of love, beauty, music, and motherhood. Often depicted as a cow or a woman with cow horns and a sun disk. She was also a protective goddess of women and children.</p>
</div>
<!-- Thoth -->
<div class="bg-white rounded-xl shadow-lg p-6 border-2 border-egypt-gold transform transition hover:scale-105">
<div class="flex items-center mb-4">
<div class="w-16 h-16 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<span class="hieroglyphic text-2xl">้นฎ</span>
</div>
<h3 class="text-2xl font-bold text-egypt-stone">Thoth</h3>
</div>
<p class="text-gray-700 mb-3"><strong>God of Wisdom and Writing</strong></p>
<p class="text-gray-700">God of wisdom, writing, and knowledge. Depicted as a man with the head of an ibis or a baboon. He was the inventor of writing and scribe of the gods, maintaining the universe's records.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-egypt-stone text-egypt-papyrus py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center">
<div class="w-12 h-12 bg-egypt-gold rounded-full flex items-center justify-center mr-4">
<i class="fas fa-sun text-xl text-egypt-stone"></i>
</div>
<h3 class="text-2xl font-bold egyptian-text">Ancient Egypt</h3>
</div>
<p class="mt-4 max-w-md">Explore the wonders of one of the world's greatest civilizations. Discover the secrets of the Pharaohs, marvel at architectural masterpieces, and unlock the mysteries of hieroglyphic writing.</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-egypt-papyrus hover:text-egypt-gold text-2xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-egypt-papyrus hover:text-egypt-gold text-2xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-egypt-papyrus hover:text-egypt-gold text-2xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-egypt-papyrus hover:text-egypt-gold text-2xl"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="border-t border-egypt-gold mt-8 pt-8 text-center">
<p>© 2023 Journey Through Ancient Egypt. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Hieroglyphic translation mapping (simplified for demonstration)
const hieroglyphMap = {
'a': '๐', 'b': '๐', 'c': '๐', 'd': '๐', 'e': '๐', 'f': '๐',
'g': '๐', 'h': '๐ช', 'i': '๐น', 'j': '๐ณ', 'k': '๐', 'l': '๐ด',
'm': '๐
', 'n': '๐', 'o': '๐', 'p': '๐ช', 'q': '๐', 'r': '๐',
's': '๐ด', 't': '๐', 'u': '๐
ฑ', 'v': '๐', 'w': '๐
ฑ', 'x': '๐ก',
'y': '๐ช', 'z': '๐', ' ': ' ', '!': '๐น', '?': '๐ฏ'
};
// Function to translate English to hieroglyphs
function translateToHieroglyphs(text) {
return text.toLowerCase().split('').map(char => hieroglyphMap[char] || char).join('');
}
// Event listener for translation button
document.getElementById('translateBtn').addEventListener('click', function() {
const englishText = document.getElementById('englishInput').value;
const hieroglyphText = translateToHieroglyphs(englishText);
document.getElementById('hieroglyphOutput').textContent = hieroglyphText;
});
// Initialize with sample translation
window.addEventListener('load', function() {
document.getElementById('translateBtn').click();
});
</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=Akim92/ancient-egypt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |