Spaces:

akhaliq
/

anycoder-ed80265c

Running

App Files Files Community

akhaliq HF Staff commited on 13 days ago

Commit

db9a8a8

verified ·

1 Parent(s): 6bb3c7a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +632 -19

index.html CHANGED Viewed

@@ -1,19 +1,632 @@
-<!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>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>