Spaces:

matthewspring
/

anycoder-609cacf6

Running

App Files Files Community

matthewspring commited on Feb 5

Commit

99fdfda

verified ·

1 Parent(s): a0fefad

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +186 -526

index.html CHANGED Viewed

@@ -3,606 +3,266 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Rock Paper Scissors Game</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary: #4a6fa5;
-            --secondary: #166088;
-            --accent: #4fc3f7;
-            --background: #f5f7fa;
-            --text: #333;
-            --light: #fff;
-            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --transition: all 0.3s ease;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
-            background-color: var(--background);
-            color: var(--text);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
             padding: 2rem;
-            line-height: 1.6;
         }
         header {
-            width: 100%;
-            max-width: 800px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-        h1 {
-            color: var(--secondary);
-            font-size: 2.5rem;
-            text-align: center;
-            margin-bottom: 0.5rem;
-        }
-        .logo {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-weight: bold;
-            color: var(--primary);
-        }
-        .logo i {
-            font-size: 1.5rem;
         }
-        .built-with {
-            font-size: 0.9rem;
-            color: var(--secondary);
             text-decoration: none;
-            transition: var(--transition);
         }
-        .built-with:hover {
-            color: var(--accent);
         }
-        .game-container {
-            background-color: var(--light);
-            border-radius: 12px;
-            box-shadow: var(--shadow);
-            padding: 2rem;
             width: 100%;
-            max-width: 800px;
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-        }
-        .scoreboard {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            background-color: rgba(74, 111, 165, 0.1);
-            border-radius: 8px;
-        }
-        .score {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-        }
-        .score-value {
-            font-size: 2rem;
-            font-weight: bold;
-            color: var(--secondary);
         }
-        .score-label {
-            font-size: 0.9rem;
             color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
-        .vs {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: var(--accent);
         }
-        .choices {
-            display: flex;
-            justify-content: space-between;
-            gap: 1rem;
         }
-        .choice {
-            flex: 1;
             display: flex;
-            flex-direction: column;
-            align-items: center;
             gap: 1rem;
-        }
-        .choice-title {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: var(--primary);
-        }
-        .choice-icon {
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            background-color: var(--light);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3rem;
-            box-shadow: var(--shadow);
-            transition: var(--transition);
-            border: 4px solid transparent;
-        }
-        .user-choice .choice-icon {
-            cursor: pointer;
-        }
-        .user-choice .choice-icon:hover {
-            transform: scale(1.05);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-        .user-choice .choice-icon.active {
-            border-color: var(--accent);
-            background-color: rgba(79, 195, 247, 0.1);
-        }
-        .computer-choice .choice-icon {
-            background-color: rgba(22, 96, 136, 0.1);
-        }
-        .options {
-            display: flex;
             justify-content: center;
-            gap: 1rem;
-            margin-top: 1rem;
         }
-        .btn {
             padding: 0.8rem 1.5rem;
             border: none;
-            border-radius: 8px;
-            background-color: var(--primary);
-            color: var(--light);
-            font-weight: bold;
             cursor: pointer;
-            transition: var(--transition);
-            box-shadow: var(--shadow);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
         }
-        .btn:hover {
-            background-color: var(--secondary);
-            transform: translateY(-2px);
         }
-        .btn:active {
-            transform: translateY(0);
         }
-        .btn-reset {
-            background-color: #e74c3c;
         }
-        .btn-reset:hover {
-            background-color: #c0392b;
         }
-        .result {
-            text-align: center;
-            font-size: 1.5rem;
-            font-weight: bold;
-            min-height: 2rem;
-            margin-top: 1rem;
-            color: var(--secondary);
-            transition: var(--transition);
         }
-        .result.win {
-            color: #27ae60;
         }
-        .result.lose {
-            color: #e74c3c;
         }
-        .stats {
             margin-top: 2rem;
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-        .stats-title {
-            font-size: 1.2rem;
-            color: var(--primary);
-            border-bottom: 2px solid var(--accent);
-            padding-bottom: 0.5rem;
         }
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1rem;
-        }
-        .stat-item {
-            background-color: rgba(74, 111, 165, 0.1);
-            padding: 1rem;
-            border-radius: 8px;
-            text-align: center;
-        }
-        .stat-value {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: var(--secondary);
-        }
-        .stat-label {
-            font-size: 0.8rem;
-            color: var(--primary);
-            text-transform: uppercase;
-            letter-spacing: 1px;
         }
-        @media (max-width: 768px) {
-            .game-container {
-                padding: 1.5rem;
-            }
-            .choices {
-                flex-direction: column;
-            }
-            .scoreboard {
-                flex-direction: column;
-                gap: 1rem;
-            }
-            .stats-grid {
-                grid-template-columns: 1fr;
             }
-        }
-        @media (max-width: 480px) {
             h1 {
                 font-size: 2rem;
             }
-            .choice-icon {
-                width: 80px;
-                height: 80px;
-                font-size: 2.5rem;
-            }
-            .options {
-                flex-direction: column;
-            }
-            .btn {
-                width: 100%;
-                justify-content: center;
             }
         }
-        /* Animation classes */
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
-        }
-        .bounce {
-            animation: bounce 0.5s ease infinite;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .pulse {
-            animation: pulse 1s ease infinite;
-        }
-        @keyframes shake {
-            0%, 100% { transform: translateX(0); }
-            25% { transform: translateX(-5px); }
-            75% { transform: translateX(5px); }
-        }
-        .shake {
-            animation: shake 0.5s ease infinite;
-        }
     </style>
 </head>
 <body>
     <header>
-        <div class="logo">
-            <i class="fas fa-hand-scissors"></i>
-            <span>Rock Paper Scissors</span>
-        </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a>
     </header>
-    <div class="game-container">
-        <h1>Choose Your Weapon!</h1>
-        <div class="scoreboard">
-            <div class="score">
-                <div class="score-value" id="user-score">0</div>
-                <div class="score-label">You</div>
-            </div>
-            <div class="vs">VS</div>
-            <div class="score">
-                <div class="score-value" id="computer-score">0</div>
-                <div class="score-label">Computer</div>
-            </div>
-        </div>
-        <div class="choices">
-            <div class="choice user-choice">
-                <div class="choice-title">Your Choice</div>
-                <div class="choice-icon" data-choice="rock"><i class="fas fa-hand-rock"></i></div>
-                <div class="choice-icon" data-choice="paper"><i class="fas fa-hand-paper"></i></div>
-                <div class="choice-icon" data-choice="scissors"><i class="fas fa-hand-scissors"></i></div>
-            </div>
-            <div class="choice computer-choice">
-                <div class="choice-title">Computer's Choice</div>
-                <div class="choice-icon" id="computer-choice"><i class="fas fa-question"></i></div>
-            </div>
         </div>
-        <div class="result" id="result">Make your move!</div>
-        <div class="options">
-            <button class="btn" id="play-btn"><i class="fas fa-play"></i> Play</button>
-            <button class="btn btn-reset" id="reset-btn"><i class="fas fa-redo"></i> Reset</button>
         </div>
-        <div class="stats">
-            <div class="stats-title">Game Statistics</div>
-            <div class="stats-grid">
-                <div class="stat-item">
-                    <div class="stat-value" id="games-played">0</div>
-                    <div class="stat-label">Games Played</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value" id="win-rate">0%</div>
-                    <div class="stat-label">Win Rate</div>
-                </div>
-                <div class="stat-item">
-                    <div class="stat-value" id="last-5">0-0-0</div>
-                    <div class="stat-label">Last 5 Games</div>
-                </div>
-            </div>
         </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            // Game elements
-            const userChoiceIcons = document.querySelectorAll('.user-choice .choice-icon');
-            const computerChoiceIcon = document.getElementById('computer-choice');
-            const resultDisplay = document.getElementById('result');
-            const userScoreDisplay = document.getElementById('user-score');
-            const computerScoreDisplay = document.getElementById('computer-score');
-            const playBtn = document.getElementById('play-btn');
-            const resetBtn = document.getElementById('reset-btn');
-            // Stats elements
-            const gamesPlayedDisplay = document.getElementById('games-played');
-            const winRateDisplay = document.getElementById('win-rate');
-            const last5Display = document.getElementById('last-5');
-            // Game state
-            let userChoice = null;
-            let computerChoice = null;
-            let userScore = 0;
-            let computerScore = 0;
-            let gamesPlayed = 0;
-            let wins = 0;
-            let losses = 0;
-            let draws = 0;
-            let last5Results = [];
-            // Icon mappings
-            const choiceIcons = {
-                rock: '<i class="fas fa-hand-rock"></i>',
-                paper: '<i class="fas fa-hand-paper"></i>',
-                scissors: '<i class="fas fa-hand-scissors"></i>',
-                unknown: '<i class="fas fa-question"></i>'
-            };
-            // Initialize the game
-            initGame();
-            function initGame() {
-                // Set up event listeners
-                userChoiceIcons.forEach(icon => {
-                    icon.addEventListener('click', function() {
-                        // Remove active class from all icons
-                        userChoiceIcons.forEach(i => i.classList.remove('active'));
-                        // Add active class to clicked icon
-                        this.classList.add('active');
-                        // Set user choice
-                        userChoice = this.getAttribute('data-choice');
-                        // Enable play button
-                        playBtn.disabled = false;
-                    });
-                });
-                playBtn.addEventListener('click', playGame);
-                resetBtn.addEventListener('click', resetGame);
-                // Disable play button initially
-                playBtn.disabled = true;
-            }
-            function playGame() {
-                if (!userChoice) return;
-                // Generate computer choice
-                computerChoice = generateComputerChoice();
-                computerChoiceIcon.innerHTML = choiceIcons[computerChoice];
-                // Determine winner
-                const result = determineWinner(userChoice, computerChoice);
-                // Update scores and display result
-                updateGame(result);
-                // Update statistics
-                updateStats(result);
-                // Disable play button until new choice is made
-                playBtn.disabled = true;
-            }
-            function generateComputerChoice() {
-                const choices = ['rock', 'paper', 'scissors'];
-                const randomIndex = Math.floor(Math.random() * choices.length);
-                return choices[randomIndex];
-            }
-            function determineWinner(user, computer) {
-                if (user === computer) {
-                    return 'draw';
-                }
-                if (
-                    (user === 'rock' && computer === 'scissors') ||
-                    (user === 'paper' && computer === 'rock') ||
-                    (user === 'scissors' && computer === 'paper')
-                ) {
-                    return 'win';
                 }
-                return 'lose';
-            }
-            function updateGame(result) {
-                gamesPlayed++;
-                // Update scores and result display
-                switch (result) {
-                    case 'win':
-                        userScore++;
-                        resultDisplay.textContent = 'You Win!';
-                        resultDisplay.className = 'result win';
-                        computerChoiceIcon.classList.add('shake');
-                        break;
-                    case 'lose':
-                        computerScore++;
-                        resultDisplay.textContent = 'You Lose!';
-                        resultDisplay.className = 'result lose';
-                        computerChoiceIcon.classList.add('bounce');
-                        break;
-                    case 'draw':
-                        resultDisplay.textContent = "It's a Draw!";
-                        resultDisplay.className = 'result';
-                        computerChoiceIcon.classList.add('pulse');
-                        break;
-                }
-                // Update score displays
-                userScoreDisplay.textContent = userScore;
-                computerScoreDisplay.textContent = computerScore;
-                // Remove animations after they complete
                 setTimeout(() => {
-                    computerChoiceIcon.className = 'choice-icon';
-                    computerChoiceIcon.innerHTML = choiceIcons[computerChoice];
-                }, 1000);
             }
-            function updateStats(result) {
-                // Update win/loss/draw counts
-                if (result === 'win') wins++;
-                else if (result === 'lose') losses++;
-                else draws++;
-                // Update last 5 results
-                last5Results.unshift(result);
-                if (last5Results.length > 5) {
-                    last5Results.pop();
-                }
-                // Calculate win rate
-                const winRate = gamesPlayed > 0 ? Math.round((wins / gamesPlayed) * 100) : 0;
-                // Update displays
-                gamesPlayedDisplay.textContent = gamesPlayed;
-                winRateDisplay.textContent = `${winRate}%`;
-                // Format last 5 results
-                const last5Formatted = last5Results.map(r => {
-                    if (r === 'win') return 'W';
-                    if (r === 'lose') return 'L';
-                    return 'D';
-                }).join('-');
-                last5Display.textContent = last5Results.length > 0 ? last5Formatted : '0-0-0';
-            }
-            function resetGame() {
-                // Reset game state
-                userChoice = null;
-                computerChoice = null;
-                userScore = 0;
-                computerScore = 0;
-                gamesPlayed = 0;
-                wins = 0;
-                losses = 0;
-                draws = 0;
-                last5Results = [];
-                // Reset displays
-                userScoreDisplay.textContent = '0';
-                computerScoreDisplay.textContent = '0';
-                resultDisplay.textContent = 'Make your move!';
-                resultDisplay.className = 'result';
-                computerChoiceIcon.innerHTML = choiceIcons.unknown;
-                computerChoiceIcon.className = 'choice-icon';
-                // Reset stats
-                gamesPlayedDisplay.textContent = '0';
-                winRateDisplay.textContent = '0%';
-                last5Display.textContent = '0-0-0';
-                // Reset UI
-                userChoiceIcons.forEach(icon => icon.classList.remove('active'));
-                playBtn.disabled = true;
-            }
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Oops! My Fault</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --primary: #ff6b6b;
+            --secondary: #4ecdc4;
+            --dark: #292f36;
+            --light: #f7fff7;
+            --accent: #ff9f1c;
         }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
+            background: linear-gradient(135deg, var(--light), #e2f3f8);
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             align-items: center;
+            justify-content: center;
             padding: 2rem;
+            color: var(--dark);
         }
         header {
+            position: absolute;
+            top: 1rem;
+            left: 1rem;
         }
+        header a {
+            color: var(--dark);
             text-decoration: none;
+            font-size: 0.9rem;
+            opacity: 0.7;
+            transition: opacity 0.3s;
         }
+        header a:hover {
+            opacity: 1;
         }
+        .container {
+            background-color: white;
+            border-radius: 1.5rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            padding: 3rem;
+            max-width: 600px;
             width: 100%;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
         }
+        h1 {
             color: var(--primary);
+            margin-bottom: 1.5rem;
+            font-size: 2.5rem;
         }
+        p {
+            font-size: 1.1rem;
+            line-height: 1.6;
+            margin-bottom: 2rem;
+            color: var(--dark);
         }
+        .emoji {
+            font-size: 4rem;
+            margin-bottom: 1.5rem;
+            animation: bounce 2s infinite;
         }
+        .buttons {
             display: flex;
             gap: 1rem;
             justify-content: center;
+            flex-wrap: wrap;
         }
+        button {
             padding: 0.8rem 1.5rem;
             border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s ease;
         }
+        .primary-btn {
+            background-color: var(--primary);
+            color: white;
         }
+        .primary-btn:hover {
+            background-color: #ff5252;
+            transform: translateY(-2px);
         }
+        .secondary-btn {
+            background-color: var(--secondary);
+            color: white;
         }
+        .secondary-btn:hover {
+            background-color: #3dbeb6;
+            transform: translateY(-2px);
         }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: var(--accent);
+            opacity: 0;
         }
+        @keyframes bounce {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
         }
+        .hidden {
+            display: none;
         }
+        .message-box {
+            background-color: rgba(255, 255, 255, 0.9);
+            padding: 2rem;
+            border-radius: 1rem;
             margin-top: 2rem;
+            animation: fadeIn 0.5s;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+        @media (max-width: 600px) {
+            .container {
+                padding: 2rem 1.5rem;
             }
             h1 {
                 font-size: 2rem;
             }
+            .emoji {
+                font-size: 3rem;
             }
         }
     </style>
 </head>
 <body>
     <header>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
     </header>
+    <div class="container">
+        <div class="emoji">😅</div>
+        <h1>Oops! My Fault</h1>
+        <p>Looks like something went wrong, but don't worry! Feel free to attempt again or try something different.</p>
+        <div class="buttons">
+            <button class="primary-btn" id="tryAgainBtn">Try Again</button>
+            <button class="secondary-btn" id="somethingElseBtn">Do Something Else</button>
         </div>
+        <div id="tryAgainMessage" class="message-box hidden">
+            <h2>You're Persistent! 🎉</h2>
+            <p>That's the spirit! Trying again often leads to success. Here's a virtual high-five! ✋</p>
+            <div class="emoji">👏</div>
         </div>
+        <div id="somethingElseMessage" class="message-box hidden">
+            <h2>Great Choice! 🌟</h2>
+            <p>Sometimes a fresh approach is exactly what you need. What would you like to try next?</p>
+            <div class="emoji">🤔</div>
         </div>
     </div>
     <script>
+        const tryAgainBtn = document.getElementById('tryAgainBtn');
+        const somethingElseBtn = document.getElementById('somethingElseBtn');
+        const tryAgainMessage = document.getElementById('tryAgainMessage');
+        const somethingElseMessage = document.getElementById('somethingElseMessage');
+        tryAgainBtn.addEventListener('click', () => {
+            tryAgainMessage.classList.remove('hidden');
+            somethingElseMessage.classList.add('hidden');
+            createConfetti();
+        });
+        somethingElseBtn.addEventListener('click', () => {
+            somethingElseMessage.classList.remove('hidden');
+            tryAgainMessage.classList.add('hidden');
+        });
+        function createConfetti() {
+            const container = document.querySelector('.container');
+            for (let i = 0; i < 50; i++) {
+                const confetti = document.createElement('div');
+                confetti.classList.add('confetti');
+                // Random properties
+                const size = Math.random() * 10 + 5;
+                const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                const left = Math.random() * 100;
+                const animationDuration = Math.random() * 3 + 2;
+                confetti.style.width = `${size}px`;
+                confetti.style.height = `${size}px`;
+                confetti.style.backgroundColor = color;
+                confetti.style.left = `${left}%`;
+                confetti.style.top = '-10px';
+                confetti.style.position = 'absolute';
+                confetti.style.borderRadius = '50%';
+                confetti.style.opacity = '1';
+                // Animation
+                confetti.style.animation = `fall ${animationDuration}s linear forwards`;
+                // Keyframes
+                const keyframes = `
+                    @keyframes fall {
+                        to {
+                            transform: translateY(calc(100vh + 20px)) rotate(${Math.random() * 360}deg);
+                            opacity: 0;
+                        }
+                    }
+                `;
+                // Add style if not already present
+                if (!document.getElementById('confettiAnimation')) {
+                    const style = document.createElement('style');
+                    style.id = 'confettiAnimation';
+                    style.innerHTML = keyframes;
+                    document.head.appendChild(style);
                 }
+                container.appendChild(confetti);
+                // Remove confetti after animation
                 setTimeout(() => {
+                    confetti.remove();
+                }, animationDuration * 1000);
             }
+        }
     </script>
 </body>
 </html>