Spaces:

Mudrock10
/

anycoder-f4908e10

Running

App Files Files Community

Mudrock10 commited on Dec 9, 2025

Commit

234846d

verified ·

1 Parent(s): 6ba44af

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +472 -19

index.html CHANGED Viewed

@@ -1,19 +1,472 @@
-<!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>Try Again - Interactive Experience</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;
+        }
+        :root {
+            --primary-color: #6366f1;
+            --secondary-color: #8b5cf6;
+            --accent-color: #ec4899;
+            --dark-color: #1f2937;
+            --light-color: #f3f4f6;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --error-color: #ef4444;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+            color: var(--dark-color);
+            overflow-x: hidden;
+        }
+        .header {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 100;
+        }
+        .header a {
+            color: white;
+            text-decoration: none;
+            font-size: 14px;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 8px 16px;
+            border-radius: 20px;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .header a:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+        .container {
+            max-width: 800px;
+            width: 100%;
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 40px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 5px;
+            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
+        }
+        .emoji {
+            font-size: 80px;
+            margin-bottom: 20px;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-20px); }
+        }
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 20px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            color: #6b7280;
+            margin-bottom: 30px;
+        }
+        .game-area {
+            background: var(--light-color);
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            min-height: 200px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        .target {
+            width: 60px;
+            height: 60px;
+            background: var(--primary-color);
+            border-radius: 50%;
+            position: absolute;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+        }
+        .target:hover {
+            transform: scale(1.2);
+            background: var(--secondary-color);
+        }
+        .score {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+            color: var(--dark-color);
+        }
+        .btn {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.1rem;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin: 10px;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
+        }
+        .btn:active {
+            transform: translateY(1px);
+        }
+        .btn-secondary {
+            background: linear-gradient(135deg, var(--accent-color), var(--warning-color));
+        }
+        .stats {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 30px;
+            flex-wrap: wrap;
+        }
+        .stat-item {
+            background: white;
+            padding: 15px 25px;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            margin: 10px;
+            min-width: 120px;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #6b7280;
+            margin-bottom: 5px;
+        }
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        .message {
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            font-weight: 500;
+            animation: fadeIn 0.5s ease;
+        }
+        .message.success {
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--success-color);
+            border: 1px solid rgba(16, 185, 129, 0.2);
+        }
+        .message.error {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--error-color);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .particles {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            overflow: hidden;
+        }
+        .particle {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: var(--primary-color);
+            border-radius: 50%;
+            opacity: 0.5;
+            animation: float 3s infinite ease-in-out;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) translateX(0); }
+            33% { transform: translateY(-30px) translateX(30px); }
+            66% { transform: translateY(30px) translateX(-30px); }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 20px;
+            }
+            h1 {
+                font-size: 2rem;
+            }
+            .emoji {
+                font-size: 60px;
+            }
+            .stats {
+                flex-direction: column;
+                align-items: center;
+            }
+            .stat-item {
+                margin: 10px 0;
+                width: 80%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
+    </div>
+    <div class="container">
+        <div class="particles" id="particles"></div>
+        <div class="emoji">🎯</div>
+        <h1>Try Again</h1>
+        <p class="subtitle">Click the targets as fast as you can! Miss one? No problem, just try again!</p>
+        <div class="message" id="message"></div>
+        <div class="game-area" id="gameArea">
+            <div class="score">Score: <span id="score">0</span></div>
+            <div class="target" id="target">🎯</div>
+        </div>
+        <div class="stats">
+            <div class="stat-item">
+                <div class="stat-label">Best Score</div>
+                <div class="stat-value" id="bestScore">0</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">Attempts</div>
+                <div class="stat-value" id="attempts">0</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-label">Accuracy</div>
+                <div class="stat-value" id="accuracy">0%</div>
+            </div>
+        </div>
+        <button class="btn" id="startBtn">Start Game</button>
+        <button class="btn btn-secondary" id="resetBtn">Reset</button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const gameArea = document.getElementById('gameArea');
+            const target = document.getElementById('target');
+            const scoreElement = document.getElementById('score');
+            const bestScoreElement = document.getElementById('bestScore');
+            const attemptsElement = document.getElementById('attempts');
+            const accuracyElement = document.getElementById('accuracy');
+            const startBtn = document.getElementById('startBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const messageElement = document.getElementById('message');
+            const particlesContainer = document.getElementById('particles');
+            let score = 0;
+            let bestScore = localStorage.getItem('bestScore') || 0;
+            let attempts = 0;
+            let hits = 0;
+            let gameActive = false;
+            let targetTimeout;
+            bestScoreElement.textContent = bestScore;
+            function showMessage(text, type) {
+                messageElement.textContent = text;
+                messageElement.className = `message ${type}`;
+                setTimeout(() => {
+                    messageElement.textContent = '';
+                    messageElement.className = 'message';
+                }, 3000);
+            }
+            function createParticles() {
+                for (let i = 0; i < 20; i++) {
+                    const particle = document.createElement('div');
+                    particle.className = 'particle';
+                    particle.style.left = Math.random() * 100 + '%';
+                    particle.style.top = Math.random() * 100 + '%';
+                    particle.style.animationDelay = Math.random() * 3 + 's';
+                    particlesContainer.appendChild(particle);
+                }
+            }
+            function moveTarget() {
+                if (!gameActive) return;
+                const gameAreaRect = gameArea.getBoundingClientRect();
+                const maxX = gameAreaRect.width - 60;
+                const maxY = gameAreaRect.height - 60;
+                const randomX = Math.random() * maxX;
+                const randomY = Math.random() * maxY;
+                target.style.left = randomX + 'px';
+                target.style.top = randomY + 'px';
+                targetTimeout = setTimeout(moveTarget, 1500);
+            }
+            function startGame() {
+                if (gameActive) return;
+                gameActive = true;
+                score = 0;
+                attempts = 0;
+                hits = 0;
+                scoreElement.textContent = score;
+                attemptsElement.textContent = attempts;
+                accuracyElement.textContent = '0%';
+                startBtn.textContent = 'Game Running...';
+                startBtn.disabled = true;
+                showMessage('Game started! Click the target!', 'success');
+                moveTarget();
+            }
+            function endGame() {
+                gameActive = false;
+                clearTimeout(targetTimeout);
+                if (score > bestScore) {
+                    bestScore = score;
+                    localStorage.setItem('bestScore', bestScore);
+                    bestScoreElement.textContent = bestScore;
+                    showMessage(`New high score: ${score}!`, 'success');
+                } else {
+                    showMessage(`Game over! Score: ${score}`, 'error');
+                }
+                startBtn.textContent = 'Start Game';
+                startBtn.disabled = false;
+            }
+            function resetGame() {
+                gameActive = false;
+                clearTimeout(targetTimeout);
+                score = 0;
+                attempts = 0;
+                hits = 0;
+                scoreElement.textContent = score;
+                attemptsElement.textContent = attempts;
+                accuracyElement.textContent = '0%';
+                target.style.left = '50%';
+                target.style.top = '50%';
+                target.style.transform = 'translate(-50%, -50%)';
+                startBtn.textContent = 'Start Game';
+                startBtn.disabled = false;
+                showMessage('Game reset!', 'success');
+            }
+            target.addEventListener('click', function() {
+                if (!gameActive) return;
+                hits++;
+                score += 10;
+                scoreElement.textContent = score;
+                // Visual feedback
+                target.style.transform = 'scale(1.5)';
+                setTimeout(() => {
+                    target.style.transform = 'scale(1)';
+                }, 200);
+                // Move target immediately
+                clearTimeout(targetTimeout);
+                moveTarget();
+            });
+            gameArea.addEventListener('click', function(e) {
+                if (!gameActive || e.target === target) return;
+                attempts++;
+                attemptsElement.textContent = attempts;
+                const accuracy = attempts > 0 ? Math.round((hits / attempts) * 100) : 0;
+                accuracyElement.textContent = accuracy + '%';
+                if (accuracy < 30) {
+                    showMessage('Keep trying! You can do better!', 'error');
+                }
+            });
+            startBtn.addEventListener('click', startGame);
+            resetBtn.addEventListener('click', resetGame);
+            // Initialize particles
+            createParticles();
+        });
+    </script>
+</body>
+</html>