Spaces:
Running
Running
File size: 29,438 Bytes
3da1252 |
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 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Wright Brothers' First Airplane</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>
.airplane-part {
transition: all 0.3s ease;
cursor: pointer;
}
.airplane-part:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.timeline-item {
position: relative;
padding-left: 3rem;
}
.timeline-item:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background-color: #3b82f6;
}
.timeline-dot {
position: absolute;
left: -0.5rem;
top: 0;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background-color: #3b82f6;
}
.quiz-option {
transition: all 0.2s ease;
}
.quiz-option:hover {
background-color: #e0f2fe;
}
.quiz-option.correct {
background-color: #bbf7d0;
}
.quiz-option.incorrect {
background-color: #fecaca;
}
#airplane-diagram {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M20,50 L180,50 M100,20 L100,80 M80,30 L120,30 M80,70 L120,70" stroke="%233b82f6" stroke-width="1" stroke-dasharray="5,5"/></svg>');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<header class="bg-blue-600 text-white py-6 shadow-lg">
<div class="container mx-auto px-4">
<h1 class="text-4xl font-bold text-center">The Wright Flyer: Birth of Aviation</h1>
<p class="text-center mt-2 text-blue-100">How the Wright Brothers Built the World's First Successful Airplane</p>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<section class="mb-16">
<div class="flex flex-col md:flex-row gap-8 items-center">
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-blue-800 mb-4">The Dream of Flight</h2>
<p class="text-gray-700 mb-4">On December 17, 1903, at Kitty Hawk, North Carolina, Orville and Wilbur Wright achieved the first powered, sustained, and controlled airplane flight. Their aircraft, the Wright Flyer, marked the beginning of the aviation age.</p>
<p class="text-gray-700 mb-6">The brothers' success came after years of research, experimentation, and innovation. They approached the problem of flight with scientific rigor, solving challenges that had stumped others for centuries.</p>
<button onclick="playVideo()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 transition-colors">
<i class="fas fa-play"></i> Watch First Flight
</button>
</div>
<div class="md:w-1/2">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Wrightfirstflight_highres.jpg" alt="Wright Brothers First Flight" class="w-full rounded-lg shadow-xl border-4 border-white">
</div>
</div>
</section>
<section class="mb-16 bg-white p-6 rounded-xl shadow-md">
<h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Scientific Breakthroughs</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-3"><i class="fas fa-wind"></i></div>
<h3 class="font-bold text-xl mb-2">Wind Tunnel Testing</h3>
<p class="text-gray-700">The Wrights built their own wind tunnel to test over 200 wing designs, collecting precise data on lift and drag that contradicted existing tables.</p>
</div>
<div class="bg-blue-50 p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-3"><i class="fas fa-cogs"></i></div>
<h3 class="font-bold text-xl mb-2">Three-Axis Control</h3>
<p class="text-gray-700">They invented wing warping for roll control combined with a movable rudder and elevator, creating the first practical three-axis control system.</p>
</div>
<div class="bg-blue-50 p-6 rounded-lg">
<div class="text-blue-600 text-4xl mb-3"><i class="fas fa-bolt"></i></div>
<h3 class="font-bold text-xl mb-2">Lightweight Engine</h3>
<p class="text-gray-700">With Charlie Taylor, they built a 12-horsepower, 180-pound aluminum engine when no existing engine met their power-to-weight requirements.</p>
</div>
</div>
</section>
<section class="mb-16">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">The Wright Flyer's Key Components</h2>
<div class="bg-white p-6 rounded-xl shadow-md mb-8">
<div id="airplane-diagram" class="relative h-64 md:h-96 mb-6">
<!-- Interactive parts will be placed here -->
<div onclick="showPartInfo('wings')" class="airplane-part absolute top-1/4 left-1/4 w-1/2 h-1/4 bg-blue-100 bg-opacity-50 border-2 border-blue-300 rounded-lg flex items-center justify-center">
<span class="font-bold text-blue-800">Wings</span>
</div>
<div onclick="showPartInfo('engine')" class="airplane-part absolute top-1/2 left-1/4 w-1/4 h-1/6 bg-red-100 bg-opacity-50 border-2 border-red-300 rounded-lg flex items-center justify-center">
<span class="font-bold text-red-800">Engine</span>
</div>
<div onclick="showPartInfo('propellers')" class="airplane-part absolute top-1/2 left-3/4 w-1/4 h-1/6 bg-green-100 bg-opacity-50 border-2 border-green-300 rounded-lg flex items-center justify-center">
<span class="font-bold text-green-800">Propellers</span>
</div>
<div onclick="showPartInfo('controls')" class="airplane-part absolute top-3/4 left-1/3 w-1/3 h-1/6 bg-yellow-100 bg-opacity-50 border-2 border-yellow-300 rounded-lg flex items-center justify-center">
<span class="font-bold text-yellow-800">Controls</span>
</div>
</div>
<div id="part-info" class="bg-gray-50 p-4 rounded-lg hidden">
<h3 id="part-title" class="text-xl font-bold mb-2"></h3>
<p id="part-description" class="text-gray-700"></p>
<button onclick="hidePartInfo()" class="mt-3 text-blue-600 hover:text-blue-800 transition-colors">
<i class="fas fa-times"></i> Close
</button>
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-4">Materials Used</h3>
<ul class="space-y-2">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>Wings:</strong> Spruce wood framework covered with muslin fabric</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>Engine:</strong> Aluminum crankcase (revolutionary for the time)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>Propellers:</strong> Hand-carved spruce, designed using their wind tunnel data</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span><strong>Controls:</strong> Cables and pulleys for wing warping and rudder</span>
</li>
</ul>
</div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-4">Technical Specifications</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-500">Wingspan</p>
<p class="font-bold">40 ft 4 in (12.3 m)</p>
</div>
<div>
<p class="text-gray-500">Length</p>
<p class="font-bold">21 ft 1 in (6.4 m)</p>
</div>
<div>
<p class="text-gray-500">Height</p>
<p class="font-bold">9 ft 0 in (2.7 m)</p>
</div>
<div>
<p class="text-gray-500">Weight</p>
<p class="font-bold">605 lb (274 kg)</p>
</div>
<div>
<p class="text-gray-500">Engine Power</p>
<p class="font-bold">12 hp (8.9 kW)</p>
</div>
<div>
<p class="text-gray-500">Max Speed</p>
<p class="font-bold">30 mph (48 km/h)</p>
</div>
</div>
</div>
</div>
</section>
<section class="mb-16">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Development Timeline</h2>
<div class="space-y-8">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-2">1899</h3>
<p class="text-gray-700">The Wright brothers begin serious aeronautical research after being inspired by Otto Lilienthal's glider experiments. They build their first kite with wing-warping controls.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-2">1900-1902</h3>
<p class="text-gray-700">Series of glider tests at Kitty Hawk. They discover flaws in existing lift data and build their own wind tunnel to conduct systematic tests on wing shapes.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-2">1903</h3>
<p class="text-gray-700">Construction of the Wright Flyer with a purpose-built engine and propellers. After several failed attempts, they achieve four controlled flights on December 17, with the longest lasting 59 seconds and covering 852 feet.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold text-blue-700 mb-2">1904-1905</h3>
<p class="text-gray-700">Development of the Wright Flyer II and III, making significant improvements in control and reliability, including the first circular flight in 1904.</p>
</div>
</div>
</div>
</section>
<section class="mb-16 bg-blue-50 p-8 rounded-xl">
<h2 class="text-3xl font-bold text-blue-800 mb-8 text-center">Test Your Knowledge</h2>
<div id="quiz-container" class="space-y-6">
<div class="quiz-question bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold mb-4">1. What was the primary material used for the Wright Flyer's wings?</h3>
<div class="grid md:grid-cols-2 gap-3">
<div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
A) Spruce wood framework with muslin fabric covering
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
B) Aluminum framework with canvas covering
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
C) Steel framework with silk covering
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
D) Bamboo framework with paper covering
</div>
</div>
</div>
<div class="quiz-question bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold mb-4">2. What was the Wright brothers' key innovation that made controlled flight possible?</h3>
<div class="grid md:grid-cols-2 gap-3">
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
A) A more powerful engine than competitors
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
B) Lighter-than-air gas balloons
</div>
<div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
C) Three-axis control system (roll, pitch, yaw)
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
D) Jet propulsion technology
</div>
</div>
</div>
<div class="quiz-question bg-white p-6 rounded-xl shadow-md">
<h3 class="text-xl font-bold mb-4">3. How did the Wright brothers test their wing designs?</h3>
<div class="grid md:grid-cols-2 gap-3">
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
A) Computer simulations
</div>
<div onclick="checkAnswer(this, true)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
B) Wind tunnel experiments
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
C) Trial and error with full-scale gliders
</div>
<div onclick="checkAnswer(this, false)" class="quiz-option p-3 border border-gray-200 rounded-lg cursor-pointer">
D) Studying bird flight patterns exclusively
</div>
</div>
</div>
</div>
<div id="quiz-results" class="mt-8 hidden">
<div class="bg-white p-6 rounded-xl shadow-md text-center">
<h3 class="text-2xl font-bold mb-4">Quiz Results</h3>
<p id="score-display" class="text-xl mb-4"></p>
<button onclick="resetQuiz()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
Try Again
</button>
</div>
</div>
</section>
<section class="bg-white p-8 rounded-xl shadow-md">
<h2 class="text-3xl font-bold text-blue-800 mb-6 text-center">Explore More</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-bold mb-3">Interactive Simulation</h3>
<p class="text-gray-700 mb-4">Try your hand at flying a virtual Wright Flyer with our flight simulator.</p>
<button onclick="showSimulator()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition-colors">
Launch Simulator
</button>
</div>
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-bold mb-3">Further Reading</h3>
<ul class="space-y-2 text-blue-600">
<li><a href="#" class="hover:underline">The Wright Brothers' Notebooks</a></li>
<li><a href="#" class="hover:underline">Engineering Analysis of the Wright Flyer</a></li>
<li><a href="#" class="hover:underline">Aviation Pioneers Before the Wrights</a></li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-bold mb-3">Visit the Wright Flyer</h3>
<p class="text-gray-700 mb-4">The original 1903 Wright Flyer is on display at the Smithsonian National Air and Space Museum in Washington, D.C.</p>
<button onclick="showMap()" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg transition-colors">
View Museum Info
</button>
</div>
</div>
</section>
</main>
<footer class="bg-blue-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-bold">The Wright Flyer</h3>
<p class="text-blue-200">Celebrating the birth of aviation</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-facebook"></i></a>
<a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-white hover:text-blue-300 text-2xl"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="border-t border-blue-700 mt-6 pt-6 text-center text-blue-200">
<p>© 2023 Wright Flyer Educational Project. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Modal for video -->
<div id="video-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg overflow-hidden w-full max-w-4xl relative">
<button onclick="closeModal()" class="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 z-10">
<i class="fas fa-times"></i>
</button>
<div class="aspect-w-16 aspect-h-9">
<iframe id="video-frame" class="w-full h-96" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4 bg-gray-100">
<h3 class="text-xl font-bold">First Flight Reenactment</h3>
<p class="text-gray-700">Watch a recreation of the Wright brothers' historic first powered flight on December 17, 1903.</p>
</div>
</div>
</div>
<!-- Modal for simulator -->
<div id="simulator-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="bg-white rounded-lg overflow-hidden w-full max-w-4xl relative">
<button onclick="closeModal()" class="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 z-10">
<i class="fas fa-times"></i>
</button>
<div class="p-6">
<h3 class="text-2xl font-bold mb-4">Wright Flyer Simulator</h3>
<div class="bg-gray-100 h-64 rounded-lg flex items-center justify-center mb-4">
<p class="text-gray-500">Flight simulator would appear here</p>
</div>
<div class="grid grid-cols-3 gap-4 mb-4">
<button class="bg-blue-600 text-white py-2 rounded-lg">Take Off</button>
<button class="bg-blue-600 text-white py-2 rounded-lg">Turn Left</button>
<button class="bg-blue-600 text-white py-2 rounded-lg">Turn Right</button>
</div>
<p class="text-gray-700">Try to maintain control of the Wright Flyer using the same controls the brothers used in 1903.</p>
</div>
</div>
</div>
<script>
// Part information display
const partInfo = {
'wings': {
title: 'Wings',
description: 'The Wright Flyer had a wingspan of 40 feet 4 inches (12.3 m). The wings were built with spruce wood framework covered with muslin fabric. The airfoil shape was based on the Wrights\' wind tunnel tests, with a camber (curvature) of 1-in-20. The wings incorporated wing-warping for lateral control - the first practical system for controlling an aircraft in roll.'
},
'engine': {
title: 'Engine',
description: 'The Wright brothers designed and built their own 4-cylinder, water-cooled, gasoline engine with the help of their mechanic Charlie Taylor. It produced 12 horsepower (8.9 kW) and weighed 180 pounds (82 kg). The aluminum crankcase was revolutionary for its time. The engine had no throttle, running at essentially constant speed during flights.'
},
'propellers': {
title: 'Propellers',
description: 'The Wrights designed their own propellers after discovering that marine propeller theory didn\'t apply to air. Their twin, counter-rotating propellers were 8 feet 6 inches (2.6 m) in diameter, made of laminated spruce wood. They achieved an efficiency of about 70%, remarkable for the time. The propellers were connected to the engine by bicycle chains.'
},
'controls': {
title: 'Flight Controls',
description: 'The Wright Flyer had three-axis control: wing-warping for roll (lateral control), a movable rudder for yaw (directional control), and a forward elevator for pitch (longitudinal control). The pilot lay prone on the lower wing, operating the controls with his hips (for wing-warping) and hands (for elevator and rudder). This system became the basis for all aircraft control systems that followed.'
}
};
function showPartInfo(part) {
document.getElementById('part-info').classList.remove('hidden');
document.getElementById('part-title').textContent = partInfo[part].title;
document.getElementById('part-description').textContent = partInfo[part].description;
}
function hidePartInfo() {
document.getElementById('part-info').classList.add('hidden');
}
// Quiz functionality
let correctAnswers = 0;
let totalQuestions = 3;
function checkAnswer(element, isCorrect) {
// Remove any existing classes
element.parentElement.querySelectorAll('.quiz-option').forEach(opt => {
opt.classList.remove('correct', 'incorrect');
});
// Add appropriate class
if (isCorrect) {
element.classList.add('correct');
correctAnswers++;
} else {
element.classList.add('incorrect');
}
// Disable all options in this question
element.parentElement.querySelectorAll('.quiz-option').forEach(opt => {
opt.style.pointerEvents = 'none';
});
// Check if all questions are answered
checkQuizCompletion();
}
function checkQuizCompletion() {
const answeredQuestions = document.querySelectorAll('.quiz-option.correct, .quiz-option.incorrect').length / 4;
if (answeredQuestions === totalQuestions) {
showResults();
}
}
function showResults() {
document.getElementById('quiz-results').classList.remove('hidden');
document.getElementById('score-display').textContent = `You got ${correctAnswers} out of ${totalQuestions} correct!`;
// Scroll to results
document.getElementById('quiz-results').scrollIntoView({ behavior: 'smooth' });
}
function resetQuiz() {
// Reset counters
correctAnswers = 0;
// Reset all options
document.querySelectorAll('.quiz-option').forEach(opt => {
opt.classList.remove('correct', 'incorrect');
opt.style.pointerEvents = 'auto';
});
// Hide results
document.getElementById('quiz-results').classList.add('hidden');
}
// Modal functions
function playVideo() {
document.getElementById('video-modal').classList.remove('hidden');
document.getElementById('video-frame').src = 'https://www.youtube.com/embed/iMhdksPF8CM?autoplay=1';
document.body.style.overflow = 'hidden';
}
function showSimulator() {
document.getElementById('simulator-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
}
function showMap() {
alert('This would show museum location and information in a real implementation.');
}
function closeModal() {
document.getElementById('video-modal').classList.add('hidden');
document.getElementById('simulator-modal').classList.add('hidden');
document.getElementById('video-frame').src = '';
document.body.style.overflow = 'auto';
}
// Close modal when clicking outside content
window.onclick = function(event) {
if (event.target == document.getElementById('video-modal')) {
closeModal();
}
if (event.target == document.getElementById('simulator-modal')) {
closeModal();
}
}
</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=Boody123/my-awesom-spac" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |