Spaces:

ID221183
/

anycoder-9f2c1de9

Running

App Files Files Community

ID221183 commited on Dec 18, 2025

Commit

03d3b5b

verified ·

1 Parent(s): 2c8e7f5

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +731 -19

index.html CHANGED Viewed

@@ -1,19 +1,731 @@
-<!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>Babana - The Ultimate Banana Experience</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-yellow: #FFE135;
+            --dark-yellow: #FFD700;
+            --light-yellow: #FFF8DC;
+            --green: #7FB069;
+            --brown: #8B4513;
+            --dark-brown: #654321;
+            --shadow: rgba(0, 0, 0, 0.1);
+            --text-dark: #2C3E50;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+        /* Animated background bananas */
+        .floating-bananas {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden;
+            z-index: 1;
+        }
+        .floating-banana {
+            position: absolute;
+            font-size: 2rem;
+            animation: float 15s infinite linear;
+            opacity: 0.1;
+        }
+        @keyframes float {
+            from {
+                transform: translateX(-100px) rotate(0deg);
+            }
+            to {
+                transform: translateX(calc(100vw + 100px)) rotate(360deg);
+            }
+        }
+        /* Header */
+        header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 1rem 2rem;
+            box-shadow: 0 4px 20px var(--shadow);
+            position: relative;
+            z-index: 10;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            font-size: 1.8rem;
+            font-weight: bold;
+            color: var(--text-dark);
+        }
+        .banana-icon {
+            font-size: 2.5rem;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        nav {
+            display: flex;
+            gap: 2rem;
+        }
+        nav button {
+            background: none;
+            border: none;
+            color: var(--text-dark);
+            font-size: 1rem;
+            cursor: pointer;
+            padding: 0.5rem 1rem;
+            border-radius: 25px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        nav button::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            background: var(--primary-yellow);
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            transition: width 0.5s, height 0.5s;
+        }
+        nav button:hover::before {
+            width: 100%;
+            height: 100%;
+        }
+        nav button:hover {
+            color: var(--text-dark);
+            transform: translateY(-2px);
+        }
+        nav button span {
+            position: relative;
+            z-index: 1;
+        }
+        /* Main Container */
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 2rem;
+            position: relative;
+            z-index: 5;
+        }
+        /* Sections */
+        .section {
+            display: none;
+            animation: fadeIn 0.5s ease;
+        }
+        .section.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        /* Game Section */
+        .game-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px var(--shadow);
+            text-align: center;
+        }
+        .game-title {
+            font-size: 2.5rem;
+            color: var(--text-dark);
+            margin-bottom: 1rem;
+        }
+        .score-board {
+            display: flex;
+            justify-content: center;
+            gap: 3rem;
+            margin-bottom: 2rem;
+        }
+        .score-item {
+            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
+            padding: 1rem 2rem;
+            border-radius: 15px;
+            box-shadow: 0 4px 15px rgba(255, 209, 0, 0.3);
+        }
+        .score-label {
+            font-size: 0.9rem;
+            color: var(--text-dark);
+            margin-bottom: 0.5rem;
+        }
+        .score-value {
+            font-size: 2rem;
+            font-weight: bold;
+            color: var(--text-dark);
+        }
+        .banana-game-area {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1.5rem;
+            margin: 2rem auto;
+            max-width: 600px;
+        }
+        .banana-card {
+            background: linear-gradient(135deg, var(--light-yellow), var(--primary-yellow));
+            border-radius: 15px;
+            padding: 2rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 15px var(--shadow);
+        }
+        .banana-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(circle, transparent, rgba(255, 255, 255, 0.3));
+            transform: rotate(45deg);
+            transition: all 0.5s;
+            opacity: 0;
+        }
+        .banana-card:hover::before {
+            animation: shine 0.5s ease;
+        }
+        @keyframes shine {
+            0% {
+                transform: translateX(-100%) translateY(-100%) rotate(45deg);
+                opacity: 0;
+            }
+            50% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateX(100%) translateY(100%) rotate(45deg);
+                opacity: 0;
+            }
+        }
+        .banana-card:hover {
+            transform: translateY(-5px) scale(1.05);
+            box-shadow: 0 8px 25px rgba(255, 209, 0, 0.4);
+        }
+        .banana-card.peeled {
+            background: linear-gradient(135deg, #FFF, #F0F0F0);
+            transform: rotate(180deg) scale(0.9);
+        }
+        .banana-emoji {
+            font-size: 3rem;
+            margin-bottom: 0.5rem;
+            transition: all 0.3s ease;
+        }
+        .banana-card:hover .banana-emoji {
+            transform: scale(1.2) rotate(10deg);
+        }
+        .banana-card.peeled .banana-emoji {
+            filter: grayscale(100%);
+            opacity: 0.5;
+        }
+        /* Facts Section */
+        .facts-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px var(--shadow);
+        }
+        .fact-card {
+            background: linear-gradient(135deg, var(--light-yellow), white);
+            border-radius: 15px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            border-left: 5px solid var(--primary-yellow);
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .fact-card:hover {
+            transform: translateX(10px);
+            box-shadow: 0 5px 20px var(--shadow);
+        }
+        .fact-number {
+            display: inline-block;
+            background: var(--primary-yellow);
+            color: var(--text-dark);
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 30px;
+            font-weight: bold;
+            margin-right: 1rem;
+        }
+        .fact-text {
+            color: var(--text-dark);
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+        /* Counter Section */
+        .counter-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px var(--shadow);
+            text-align: center;
+        }
+        .big-counter {
+            font-size: 5rem;
+            font-weight: bold;
+            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin: 2rem 0;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        .counter-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+        .btn {
+            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
+            border: none;
+            color: var(--text-dark);
+            padding: 1rem 2rem;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(255, 209, 0, 0.3);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 20px rgba(255, 209, 0, 0.4);
+        }
+        .btn:active {
+            transform: translateY(0);
+        }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: white;
+            margin-top: 3rem;
+            position: relative;
+            z-index: 5;
+        }
+        .footer-link {
+            color: var(--primary-yellow);
+            text-decoration: none;
+            font-weight: bold;
+            transition: all 0.3s ease;
+        }
+        .footer-link:hover {
+            color: white;
+            text-shadow: 0 0 10px rgba(255, 209, 0, 0.5);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            header {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            nav {
+                flex-wrap: wrap;
+                justify-content: center;
+            }
+            .game-title {
+                font-size: 1.8rem;
+            }
+            .score-board {
+                gap: 1rem;
+            }
+            .big-counter {
+                font-size: 3rem;
+            }
+            .banana-game-area {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: linear-gradient(135deg, var(--primary-yellow), var(--dark-yellow));
+            color: var(--text-dark);
+            padding: 1rem 2rem;
+            border-radius: 10px;
+            box-shadow: 0 5px 20px var(--shadow);
+            transform: translateX(400px);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+    </style>
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="floating-bananas" id="floatingBananas"></div>
+    <!-- Header -->
+    <header>
+        <div class="logo">
+            <span class="banana-icon">🍌</span>
+            <span>Babana</span>
+        </div>
+        <nav>
+            <button onclick="showSection('game')"><span>🎮 Game</span></button>
+            <button onclick="showSection('facts')"><span>📚 Facts</span></button>
+            <button onclick="showSection('counter')"><span>🔢 Counter</span></button>
+        </nav>
+    </header>
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Game Section -->
+        <section id="game" class="section active">
+            <div class="game-container">
+                <h1 class="game-title">🍌 Banana Peeling Challenge 🍌</h1>
+                <div class="score-board">
+                    <div class="score-item">
+                        <div class="score-label">Bananas Peeled</div>
+                        <div class="score-value" id="peeledCount">0</div>
+                    </div>
+                    <div class="score-item">
+                        <div class="score-label">Time</div>
+                        <div class="score-value" id="gameTime">0s</div>
+                    </div>
+                    <div class="score-item">
+                        <div class="score-label">High Score</div>
+                        <div class="score-value" id="highScore">0</div>
+                    </div>
+                </div>
+                <button class="btn" onclick="startGame()">Start New Game</button>
+                <div class="banana-game-area" id="bananaGameArea">
+                    <!-- Bananas will be generated here -->
+                </div>
+            </div>
+        </section>
+        <!-- Facts Section -->
+        <section id="facts" class="section">
+            <div class="facts-container">
+                <h1 class="game-title">🍌 Amazing Banana Facts 🍌</h1>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">1</span>
+                    <span class="fact-text">Bananas are berries, but strawberries aren't! Botanically, bananas develop from a flower containing one ovary.</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">2</span>
+                    <span class="fact-text">Humans have been cultivating bananas for over 7,000 years, making them one of the oldest cultivated fruits.</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">3</span>
+                    <span class="fact-text">A cluster of bananas is called a "hand," and a single banana is a "finger."</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">4</span>
+                    <span class="fact-text">Bananas are naturally radioactive due to their potassium content, but you'd need to eat millions to be affected.</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">5</span>
+                    <span class="fact-text">The banana plant is technically a herb, and the banana itself is a berry - the largest herbaceous flowering plant!</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">6</span>
+                    <span class="fact-text">India is the world's largest banana producer, growing over 30 million tons annually.</span>
+                </div>
+                <div class="fact-card" onclick="animateFact(this)">
+                    <span class="fact-number">7</span>
+                    <span class="fact-text">Bananas can help improve your mood due to their tryptophan content, which the body converts to serotonin.</span>
+                </div>
+            </div>
+        </section>
+        <!-- Counter Section -->
+        <section id="counter" class="section">
+            <div class="counter-container">
+                <h1 class="game-title">🍌 Banana Counter 🍌</h1>
+                <p style="color: var(--text-dark); font-size: 1.2rem; margin-bottom: 1rem;">How many bananas have you eaten today?</p>
+                <div class="big-counter" id="bananaCounter">0</div>
+                <div class="counter-buttons">
+                    <button class="btn" onclick="incrementCounter()">Add Banana 🍌</button>
+                    <button class="btn" onclick="decrementCounter()">Remove Banana 🗑️</button>
+                    <button class="btn" onclick="resetCounter()">Reset 🔄</button>
+                </div>
+                <div style="margin-top: 2rem;">
+                    <p style="color: var(--text-dark); font-size: 1rem;" id="bananaMessage">Start counting your bananas!</p>
+                </div>
+            </div>
+        </section>
+    </div>
+    <!-- Footer -->
+    <footer>
+        <p>Made with 🍌 love | Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link">anycoder</a></p>
+    </footer>
+    <!-- Toast Notification -->
+    <div class="toast" id="toast"></div>
+    <script>
+        // Initialize floating bananas
+        function createFloatingBananas() {
+            const container = document.getElementById('floatingBananas');
+            for (let i = 0; i < 5; i++) {
+                const banana = document.createElement('div');
+                banana.className = 'floating-banana';
+                banana.textContent = '🍌';
+                banana.style.top = Math.random() * 100 + '%';
+                banana.style.animationDelay = Math.random() * 15 + 's';
+                banana.style.animationDuration = (15 + Math.random() * 10) + 's';
+                container.appendChild(banana);
+            }
+        }
+        // Section Navigation
+        function showSection(sectionName) {
+            const sections = document.querySelectorAll('.section');
+            sections.forEach(section => {
+                section.classList.remove('active');
+            });
+            document.getElementById(sectionName).classList.add('active');
+        }
+        // Game Logic
+        let gameActive = false;
+        let peeledCount = 0;
+        let gameTime = 0;
+        let gameTimer = null;
+        let highScore = localStorage.getItem('bananaHighScore') || 0;
+        document.getElementById('highScore').textContent = highScore;
+        function startGame() {
+            gameActive = true;
+            peeledCount = 0;
+            gameTime = 0;
+            document.getElementById('peeledCount').textContent = peeledCount;
+            document.getElementById('gameTime').textContent = '0s';
+            generateBananas();
+            startTimer();
+            showToast('Game Started! Peel all the bananas! 🍌');
+        }
+        function generateBananas() {
+            const gameArea = document.getElementById('bananaGameArea');
+            gameArea.innerHTML = '';
+            for (let i = 0; i < 8; i++) {
+                const bananaCard = document.createElement('div');
+                bananaCard.className = 'banana-card';
+                bananaCard.innerHTML = `
+                    <div class="banana-emoji">🍌</div>
+                    <div style="color: var(--text-dark); font-weight: bold;">Click to Peel!</div>
+                `;
+                bananaCard.onclick = function() { peelBanana(this); };
+                gameArea.appendChild(bananaCard);
+            }
+        }
+        function peelBanana(card) {
+            if (!gameActive || card.classList.contains('peeled')) return;
+            card.classList.add('peeled');
+            card.innerHTML = `
+                <div class="banana-emoji">🍌</div>
+                <div style="color: var(--text-dark); font-weight: bold;">Peeled!</div>
+            `;
+            peeledCount++;
+            document.getElementById('peeledCount').textContent = peeledCount;
+            if (peeledCount === 8) {
+                endGame();
+            }
+        }
+        function startTimer() {
+            if (gameTimer) clearInterval(gameTimer);
+            gameTimer = setInterval(() => {
+                gameTime++;
+                document.getElementById('gameTime').textContent = gameTime + 's';
+            }, 1000);
+        }
+        function endGame() {
+            gameActive = false;
+            clearInterval(gameTimer);
+            if (peeledCount > highScore) {
+                highScore = peeledCount;
+                localStorage.setItem('bananaHighScore', highScore);
+                document.getElementById('highScore').textContent = highScore;
+                showToast(`🎉 New High Score: ${highScore} bananas!`);
+            } else {
+                showToast(`Game Over! You peeled ${peeledCount} bananas in ${gameTime} seconds!`);
+            }
+        }
+        // Counter Logic
+        let bananaCount = 0;
+        function incrementCounter() {
+            bananaCount++;
+            updateCounter();
+            animateCounterChange();
+        }
+        function decrementCounter() {
+            if (bananaCount > 0) {
+                bananaCount--;
+                updateCounter();
+                animateCounterChange();
+            }
+        }
+        function resetCounter() {
+            bananaCount = 0;
+            updateCounter();
+            showToast('Counter reset! 🔄');
+        }
+        function updateCounter() {
+            document.getElementById('bananaCounter').textContent = bananaCount;
+            updateMessage();
+        }
+        function updateMessage() {
+            const messageEl = document.getElementById('bananaMessage');
+            if (bananaCount === 0) {
+                messageEl.textContent = "Start counting your bananas!";
+            } else if (bananaCount < 3) {
+                messageEl.textContent = "That's a good start! 🍌";
+            } else if (bananaCount < 6) {
+                messageEl.textContent = "You're on a roll! 🍌🍌🍌";
+            } else {
+                messageEl.textContent = "Wow! That's a lot of bananas! 🍌🍌🍌🍌🍌🍌";
+            }
+        }
+        function animateCounterChange() {
+            const counter = document.getElementById('bananaCounter');
+            counter.style.transform = 'scale(1.3)';
+            setTimeout(() => {
+                counter.style.transform = 'scale(1)';
+            }, 200);
+        }
+        // Fact Animation
+        function animateFact(card) {
+            card.style.transform = 'scale(1.05)';
+            card.style.background = 'linear-gradient(135deg, var(--primary-yellow), var(--light-yellow))';
+            setTimeout(() => {
+                card.style.transform = '';
+                card.style.background = '';
+            }, 300);
+        }
+        // Toast Notification
+        function showToast(message) {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+        // Initialize
+        createFloatingBananas();
+        generateBananas();
+    </script>
+</body>
+</html>