Spaces:

ParulPandey
/

wonders-of-the-world

Running

App Files Files Community

Pp commited on Apr 1

Commit

32f6a1b

verified ·

1 Parent(s): 6d3937a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +347 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Wonders Of The World
-emoji: 📚
-colorFrom: gray
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: wonders-of-the-world
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,347 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wonders of the World Hunt</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>
+        .map-container {
+            position: relative;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .world-map {
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+        }
+        .target-area {
+            position: absolute;
+            background-color: rgba(255, 255, 0, 0.3);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            display: none;
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
+            70% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
+            100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
+        }
+        .celebration {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0,0,0,0.7);
+            z-index: 1000;
+            animation: fadeIn 0.5s;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00;
+            opacity: 0;
+        }
+    </style>
+</head>
+<body class="bg-blue-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold text-blue-800 mb-2">Wonders of the World Hunt</h1>
+            <p class="text-xl text-blue-600">Can you find all the amazing wonders?</p>
+        </header>
+        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 max-w-4xl mx-auto">
+            <div class="flex justify-between items-center mb-6">
+                <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4">
+                    <h2 id="current-wonder" class="text-2xl font-bold text-blue-800">Find the Great Wall of China</h2>
+                    <p id="level-info" class="text-blue-600">Level 1 of 7</p>
+                </div>
+                <div class="bg-green-100 rounded-full px-6 py-3 text-center">
+                    <p class="text-sm text-green-700">Score</p>
+                    <p id="score" class="text-2xl font-bold text-green-800">0</p>
+                </div>
+            </div>
+            <div id="feedback" class="hidden mb-6 p-4 rounded-lg"></div>
+            <div class="map-container">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/World_map_-_low_resolution.svg/1200px-World_map_-_low_resolution.svg.png"
+                     alt="World Map" class="world-map" id="world-map">
+                <div class="target-area pulse" id="target-area"></div>
+            </div>
+            <div class="mt-6 flex justify-between">
+                <button id="hint-btn" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg flex items-center">
+                    <i class="fas fa-lightbulb mr-2"></i> Get a Hint
+                </button>
+                <button id="next-btn" class="hidden bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg flex items-center">
+                    Next Wonder <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <div class="text-center">
+            <p class="text-blue-600">Click on the map where you think the wonder is located!</p>
+        </div>
+    </div>
+    <div id="celebration" class="celebration hidden">
+        <div class="bg-white p-8 rounded-xl text-center max-w-md">
+            <h2 class="text-3xl font-bold text-blue-800 mb-4">Congratulations!</h2>
+            <p class="text-xl mb-6">You've found all the wonders of the world!</p>
+            <button id="play-again" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg">
+                Play Again
+            </button>
+        </div>
+    </div>
+    <script>
+        // Game data
+        const wonders = [
+            {
+                name: "Great Wall of China",
+                hint: "This wonder is in Asia, in a country with a red flag with yellow stars.",
+                fact: "The Great Wall is over 13,000 miles long - that's longer than the distance from New York to Sydney!",
+                coordinates: { x: 78, y: 42 },
+                radius: 8
+            },
+            {
+                name: "Pyramids of Giza",
+                hint: "Look in Africa, near the northeast corner.",
+                fact: "The Great Pyramid was the tallest man-made structure for over 3,800 years!",
+                coordinates: { x: 55, y: 42 },
+                radius: 8
+            },
+            {
+                name: "Taj Mahal",
+                hint: "Find the country in South Asia that looks like a triangle pointing down.",
+                fact: "The Taj Mahal changes color depending on the time of day - pinkish in morning, white in day, golden at night!",
+                coordinates: { x: 70, y: 45 },
+                radius: 8
+            },
+            {
+                name: "Christ the Redeemer",
+                hint: "This statue is in South America, in a country that speaks Portuguese.",
+                fact: "The statue's arms stretch 92 feet wide - that's as long as a blue whale!",
+                coordinates: { x: 33, y: 65 },
+                radius: 10
+            },
+            {
+                name: "Machu Picchu",
+                hint: "Look in the Andes mountains of South America.",
+                fact: "Machu Picchu was built without any mortar - the stones fit together perfectly!",
+                coordinates: { x: 28, y: 65 },
+                radius: 10
+            },
+            {
+                name: "Colosseum",
+                hint: "Find the boot-shaped country in Europe.",
+                fact: "The Colosseum could hold 50,000 people and had a retractable roof!",
+                coordinates: { x: 52, y: 38 },
+                radius: 8
+            },
+            {
+                name: "Chichen Itza",
+                hint: "This Mayan pyramid is in North America, south of the United States.",
+                fact: "During spring and fall equinox, shadows create a snake-like shape on the pyramid!",
+                coordinates: { x: 20, y: 48 },
+                radius: 10
+            }
+        ];
+        // Game state
+        let currentLevel = 0;
+        let score = 0;
+        let attempts = 0;
+        let mapWidth, mapHeight;
+        // DOM elements
+        const worldMap = document.getElementById('world-map');
+        const targetArea = document.getElementById('target-area');
+        const currentWonder = document.getElementById('current-wonder');
+        const levelInfo = document.getElementById('level-info');
+        const feedback = document.getElementById('feedback');
+        const hintBtn = document.getElementById('hint-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const scoreDisplay = document.getElementById('score');
+        const celebration = document.getElementById('celebration');
+        const playAgainBtn = document.getElementById('play-again');
+        // Initialize game
+        function initGame() {
+            // Wait for map to load to get dimensions
+            worldMap.onload = function() {
+                mapWidth = worldMap.offsetWidth;
+                mapHeight = worldMap.offsetHeight;
+                loadLevel(currentLevel);
+            };
+            // Set up event listeners
+            worldMap.addEventListener('click', handleMapClick);
+            hintBtn.addEventListener('click', giveHint);
+            nextBtn.addEventListener('click', nextLevel);
+            playAgainBtn.addEventListener('click', resetGame);
+        }
+        // Load a level
+        function loadLevel(level) {
+            if (level >= wonders.length) {
+                showCelebration();
+                return;
+            }
+            const wonder = wonders[level];
+            currentWonder.textContent = `Find the ${wonder.name}`;
+            levelInfo.textContent = `Level ${level + 1} of ${wonders.length}`;
+            feedback.classList.add('hidden');
+            nextBtn.classList.add('hidden');
+            attempts = 0;
+            // Position target area (for correct answer)
+            const x = (wonder.coordinates.x / 100) * mapWidth;
+            const y = (wonder.coordinates.y / 100) * mapHeight;
+            const radius = (wonder.radius / 100) * mapWidth;
+            targetArea.style.width = `${radius * 2}px`;
+            targetArea.style.height = `${radius * 2}px`;
+            targetArea.style.left = `${x}px`;
+            targetArea.style.top = `${y}px`;
+        }
+        // Handle map click
+        function handleMapClick(e) {
+            if (nextBtn.classList.contains('hidden') === false) return;
+            const rect = worldMap.getBoundingClientRect();
+            const x = ((e.clientX - rect.left) / rect.width) * 100;
+            const y = ((e.clientY - rect.top) / rect.height) * 100;
+            const wonder = wonders[currentLevel];
+            const distance = Math.sqrt(
+                Math.pow(x - wonder.coordinates.x, 2) +
+                Math.pow(y - wonder.coordinates.y, 2)
+            );
+            attempts++;
+            if (distance <= wonder.radius) {
+                // Correct answer
+                score += Math.max(10 - attempts, 1);
+                scoreDisplay.textContent = score;
+                feedback.classList.remove('hidden');
+                feedback.className = 'bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6';
+                feedback.innerHTML = `
+                    <h3 class="font-bold text-xl mb-2">Correct! The ${wonder.name} is located here.</h3>
+                    <p class="mb-2">${wonder.fact}</p>
+                    <p class="text-sm">You earned ${Math.max(10 - attempts, 1)} points!</p>
+                `;
+                // Show target area
+                targetArea.style.display = 'block';
+                targetArea.style.backgroundColor = 'rgba(0, 255, 0, 0.3)';
+                nextBtn.classList.remove('hidden');
+            } else {
+                // Wrong answer
+                feedback.classList.remove('hidden');
+                feedback.className = 'bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6';
+                feedback.innerHTML = `
+                    <h3 class="font-bold text-xl mb-2">Not quite right!</h3>
+                    <p>Try again. Here's a hint: ${wonder.hint}</p>
+                `;
+            }
+        }
+        // Give hint
+        function giveHint() {
+            if (feedback.classList.contains('hidden') || feedback.classList.contains('bg-red-100')) {
+                const wonder = wonders[currentLevel];
+                feedback.classList.remove('hidden');
+                feedback.className = 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6';
+                feedback.innerHTML = `
+                    <h3 class="font-bold text-xl mb-2">Hint:</h3>
+                    <p>${wonder.hint}</p>
+                `;
+            }
+        }
+        // Go to next level
+        function nextLevel() {
+            currentLevel++;
+            targetArea.style.display = 'none';
+            loadLevel(currentLevel);
+        }
+        // Show celebration
+        function showCelebration() {
+            celebration.classList.remove('hidden');
+            createConfetti();
+        }
+        // Create confetti effect
+        function createConfetti() {
+            const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
+            for (let i = 0; i < 100; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                confetti.style.left = Math.random() * 100 + 'vw';
+                confetti.style.top = -10 + 'px';
+                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+                document.body.appendChild(confetti);
+                // Animate
+                const animation = confetti.animate([
+                    { top: '-10px', opacity: 0, transform: `rotate(0deg) scale(0.5)` },
+                    { top: '10%', opacity: 1, transform: `rotate(${Math.random() * 360}deg) scale(1)` },
+                    { top: '100vh', opacity: 0, transform: `rotate(${Math.random() * 360}deg) scale(0.5)` }
+                ], {
+                    duration: 2000 + Math.random() * 3000,
+                    delay: Math.random() * 2000
+                });
+                animation.onfinish = () => confetti.remove();
+            }
+        }
+        // Reset game
+        function resetGame() {
+            currentLevel = 0;
+            score = 0;
+            scoreDisplay.textContent = '0';
+            celebration.classList.add('hidden');
+            loadLevel(currentLevel);
+        }
+        // Start the game
+        initGame();
+    </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=pp/wonders-of-the-world" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>