Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Guess the Location Game</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3a0ca3; | |
| --accent: #f72585; | |
| --light: #f8f9fa; | |
| --dark: #212529; | |
| --success: #4cc9f0; | |
| --warning: #f8961e; | |
| --danger: #e63946; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| color: var(--light); | |
| } | |
| .container { | |
| max-width: 800px; | |
| width: 100%; | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| padding: 30px; | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.2); | |
| margin-bottom: 30px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 24px; | |
| font-weight: 700; | |
| } | |
| .logo i { | |
| color: var(--accent); | |
| } | |
| .anycoder-link { | |
| font-size: 14px; | |
| color: var(--light); | |
| text-decoration: none; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| background: rgba(255, 255, 255, 0.2); | |
| transform: translateY(-2px); | |
| } | |
| .game-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| } | |
| @media (max-width: 768px) { | |
| .game-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .image-container { | |
| position: relative; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| height: 300px; | |
| background: var(--dark); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .location-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: all 0.5s ease; | |
| } | |
| .image-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| color: rgba(255, 255, 255, 0.7); | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .image-placeholder i { | |
| font-size: 60px; | |
| margin-bottom: 15px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .game-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .score-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .score-item { | |
| text-align: center; | |
| } | |
| .score-value { | |
| font-size: 28px; | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .score-label { | |
| font-size: 14px; | |
| opacity: 0.8; | |
| } | |
| .input-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .input-group { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| input { | |
| flex: 1; | |
| padding: 15px 20px; | |
| border: none; | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--light); | |
| font-size: 16px; | |
| outline: none; | |
| transition: all 0.3s ease; | |
| } | |
| input::placeholder { | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| input:focus { | |
| background: rgba(255, 255, 255, 0.15); | |
| box-shadow: 0 0 0 2px var(--accent); | |
| } | |
| button { | |
| padding: 15px 25px; | |
| border: none; | |
| border-radius: 12px; | |
| background: var(--primary); | |
| color: white; | |
| font-weight: 600; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| button:hover { | |
| background: var(--secondary); | |
| transform: translateY(-2px); | |
| } | |
| button:active { | |
| transform: translateY(0); | |
| } | |
| button:disabled { | |
| background: rgba(255, 255, 255, 0.2); | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .hint-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| } | |
| .hint-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| font-weight: 600; | |
| } | |
| .hint-text { | |
| line-height: 1.6; | |
| opacity: 0.9; | |
| } | |
| .result-container { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| display: none; | |
| } | |
| .result-icon { | |
| font-size: 50px; | |
| margin-bottom: 15px; | |
| } | |
| .result-text { | |
| font-size: 18px; | |
| margin-bottom: 20px; | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .controls button { | |
| flex: 1; | |
| } | |
| .btn-success { | |
| background: var(--success); | |
| } | |
| .btn-warning { | |
| background: var(--warning); | |
| } | |
| .btn-danger { | |
| background: var(--danger); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .pulse { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .level-indicator { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .level-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .level-dot.active { | |
| background: var(--accent); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="logo"> | |
| <i class="fas fa-globe-americas"></i> | |
| <span>Guess the Location</span> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a> | |
| </div> | |
| <div class="game-container"> | |
| <div class="image-container"> | |
| <div class="image-placeholder"> | |
| <i class="fas fa-map-marked-alt"></i> | |
| <p>Get ready to guess the location!</p> | |
| </div> | |
| <img class="location-image" src="" alt="Location to guess" style="display: none;"> | |
| </div> | |
| <div class="game-info"> | |
| <div class="score-container"> | |
| <div class="score-item"> | |
| <div class="score-value" id="score">0</div> | |
| <div class="score-label">Score</div> | |
| </div> | |
| <div class="score-item"> | |
| <div class="score-value" id="round">1/5</div> | |
| <div class="score-label">Round</div> | |
| </div> | |
| <div class="score-item"> | |
| <div class="score-value" id="streak">0</div> | |
| <div class="score-label">Streak</div> | |
| </div> | |
| </div> | |
| <div class="input-container"> | |
| <input type="text" id="guess-input" placeholder="Enter your guess..."> | |
| <div class="input-group"> | |
| <button id="submit-btn"> | |
| <i class="fas fa-paper-plane"></i> | |
| Submit Guess | |
| </button> | |
| <button id="hint-btn"> | |
| <i class="fas fa-lightbulb"></i> | |
| Hint | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hint-container"> | |
| <div class="hint-title"> | |
| <i class="fas fa-info-circle"></i> | |
| <span>Location Hint</span> | |
| </div> | |
| <div class="hint-text" id="hint-text"> | |
| Click the hint button to get a clue about this location. | |
| </div> | |
| </div> | |
| <div class="result-container" id="result-container"> | |
| <div class="result-icon" id="result-icon"></div> | |
| <div class="result-text" id="result-text"></div> | |
| <div class="controls"> | |
| <button class="btn-success" id="next-btn"> | |
| <i class="fas fa-forward"></i> | |
| Next Location | |
| </button> | |
| <button class="btn-warning" id="restart-btn"> | |
| <i class="fas fa-redo"></i> | |
| Restart Game | |
| </button> | |
| </div> | |
| </div> | |
| <div class="level-indicator"> | |
| <div class="level-dot active"></div> | |
| <div class="level-dot"></div> | |
| <div class="level-dot"></div> | |
| <div class="level-dot"></div> | |
| <div class="level-dot"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game data - locations with images and hints | |
| const locations = [ | |
| { | |
| name: "Eiffel Tower", | |
| image: "https://images.unsplash.com/photo-1543349689-9a4d426bee8e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", | |
| hint: "This iconic iron lattice tower is located in a European capital known as the City of Light.", | |
| country: "France", | |
| city: "Paris" | |
| }, | |
| { | |
| name: "Statue of Liberty", | |
| image: "https://images.unsplash.com/photo-1547471080-7cc2caa01a7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", | |
| hint: "This colossal neoclassical sculpture was a gift from France to the United States and stands on an island in New York Harbor.", | |
| country: "United States", | |
| city: "New York" | |
| }, | |
| { | |
| name: "Great Wall of China", | |
| image: "https://images.unsplash.com/photo-1518638150340-f706e86654de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", | |
| hint: "This ancient series of fortifications stretches across the northern borders of an Asian country.", | |
| country: "China", | |
| city: "Beijing (near)" | |
| }, | |
| { | |
| name: "Taj Mahal", | |
| image: "https://images.unsplash.com/photo-1564507592333-c60657eea523?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", | |
| hint: "This ivory-white marble mausoleum was built by a Mughal emperor in memory of his favorite wife.", | |
| country: "India", | |
| city: "Agra" | |
| }, | |
| { | |
| name: "Sydney Opera House", | |
| image: "https://images.unsplash.com/photo-1528072164453-f4e8ef0d475a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80", | |
| hint: "This multi-venue performing arts centre is known for its distinctive shell-like roofs and is located in a major Australian city.", | |
| country: "Australia", | |
| city: "Sydney" | |
| } | |
| ]; | |
| // Game state | |
| let currentLocationIndex = 0; | |
| let score = 0; | |
| let streak = 0; | |
| let gameActive = true; | |
| let hintsUsed = 0; | |
| // DOM elements | |
| const locationImage = document.querySelector('.location-image'); | |
| const imagePlaceholder = document.querySelector('.image-placeholder'); | |
| const guessInput = document.getElementById('guess-input'); | |
| const submitBtn = document.getElementById('submit-btn'); | |
| const hintBtn = document.getElementById('hint-btn'); | |
| const hintText = document.getElementById('hint-text'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const resultIcon = document.getElementById('result-icon'); | |
| const resultText = document.getElementById('result-text'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const scoreElement = document.getElementById('score'); | |
| const roundElement = document.getElementById('round'); | |
| const streakElement = document.getElementById('streak'); | |
| const levelDots = document.querySelectorAll('.level-dot'); | |
| // Initialize the game | |
| function initGame() { | |
| loadLocation(currentLocationIndex); | |
| updateUI(); | |
| gameActive = true; | |
| } | |
| // Load a location | |
| function loadLocation(index) { | |
| const location = locations[index]; | |
| // Show loading state | |
| locationImage.style.display = 'none'; | |
| imagePlaceholder.style.display = 'flex'; | |
| // Load image | |
| locationImage.src = location.image; | |
| locationImage.onload = function() { | |
| imagePlaceholder.style.display = 'none'; | |
| locationImage.style.display = 'block'; | |
| locationImage.classList.add('fade-in'); | |
| }; | |
| // Reset hint | |
| hintText.textContent = "Click the hint button to get a clue about this location."; | |
| hintsUsed = 0; | |
| // Clear input | |
| guessInput.value = ''; | |
| guessInput.focus(); | |
| // Hide result container | |
| resultContainer.style.display = 'none'; | |
| // Update level indicator | |
| levelDots.forEach((dot, i) => { | |
| if (i <= index) { | |
| dot.classList.add('active'); | |
| } else { | |
| dot.classList.remove('active'); | |
| } | |
| }); | |
| } | |
| // Update UI elements | |
| function updateUI() { | |
| scoreElement.textContent = score; | |
| roundElement.textContent = `${currentLocationIndex + 1}/${locations.length}`; | |
| streakElement.textContent = streak; | |
| } | |
| // Submit a guess | |
| function submitGuess() { | |
| if (!gameActive) return; | |
| const guess = guessInput.value.trim().toLowerCase(); | |
| const correctLocation = locations[currentLocationIndex]; | |
| // Check if guess is correct | |
| const isCorrect = | |
| guess.includes(correctLocation.name.toLowerCase()) || | |
| guess.includes(correctLocation.country.toLowerCase()) || | |
| guess.includes(correctLocation.city.toLowerCase()); | |
| // Show result | |
| showResult(isCorrect, correctLocation); | |
| // Update score | |
| if (isCorrect) { | |
| score += 10 - (hintsUsed * 3); | |
| streak++; | |
| } else { | |
| streak = 0; | |
| } | |
| updateUI(); | |
| gameActive = false; | |
| } | |
| // Show hint | |
| function showHint() { | |
| if (!gameActive || hintsUsed >= 2) return; | |
| const correctLocation = locations[currentLocationIndex]; | |
| if (hintsUsed === 0) { | |
| hintText.textContent = correctLocation.hint; | |
| } else if (hintsUsed === 1) { | |
| hintText.textContent = `This location is in ${correctLocation.country}.`; | |
| } | |
| hintsUsed++; | |
| } | |
| // Show result | |
| function showResult(isCorrect, location) { | |
| resultContainer.style.display = 'block'; | |
| resultContainer.classList.add('fade-in'); | |
| if (isCorrect) { | |
| resultIcon.className = 'result-icon fas fa-check-circle'; | |
| resultIcon.style.color = 'var(--success)'; | |
| resultText.textContent = `Correct! This is the ${location.name} in ${location.city}, ${location.country}.`; | |
| resultContainer.style.background = 'rgba(76, 201, 240, 0.2)'; | |
| } else { | |
| resultIcon.className = 'result-icon fas fa-times-circle'; | |
| resultIcon.style.color = 'var(--danger)'; | |
| resultText.textContent = `Sorry, that's incorrect. This is the ${location.name} in ${location.city}, ${location.country}.`; | |
| resultContainer.style.background = 'rgba(230, 57, 70, 0.2)'; | |
| } | |
| } | |
| // Next location | |
| function nextLocation() { | |
| if (currentLocationIndex < locations.length - 1) { | |
| currentLocationIndex++; | |
| loadLocation(currentLocationIndex); | |
| gameActive = true; | |
| } else { | |
| // Game completed | |
| showGameCompleted(); | |
| } | |
| } | |
| // Restart game | |
| function restartGame() { | |
| currentLocationIndex = 0; | |
| score = 0; | |
| streak = 0; | |
| initGame(); | |
| } | |
| // Show game completed | |
| function showGameCompleted() { | |
| resultContainer.style.display = 'block'; | |
| resultContainer.classList.add('fade-in'); | |
| resultIcon.className = 'result-icon fas fa-trophy'; | |
| resultIcon.style.color = 'var(--warning)'; | |
| resultText.textContent = `Congratulations! You completed the game with a score of ${score}.`; | |
| resultContainer.style.background = 'rgba(248, 150, 30, 0.2)'; | |
| nextBtn.disabled = true; | |
| nextBtn.innerHTML = '<i class="fas fa-flag-checkered"></i> Game Completed'; | |
| } | |
| // Event listeners | |
| submitBtn.addEventListener('click', submitGuess); | |
| hintBtn.addEventListener('click', showHint); | |
| nextBtn.addEventListener('click', nextLocation); | |
| restartBtn.addEventListener('click', restartGame); | |
| // Allow submitting with Enter key | |
| guessInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| submitGuess(); | |
| } | |
| }); | |
| // Initialize the game | |
| initGame(); | |
| </script> | |
| </body> | |
| </html> |