Spaces:

dennis20014
/

fun-stuff

Running

App Files Files Community

dennis20014 commited on Jul 11, 2025

Commit

4977d53

verified ·

1 Parent(s): 78ac06f

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +944 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Fun Stuff
-emoji: 📈
-colorFrom: red
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: fun-stuff
+emoji: 🐳
+colorFrom: blue
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,944 @@
-<!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>Digital Monster Digivice</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        @keyframes shake {
+            0% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            50% { transform: translateX(5px); }
+            75% { transform: translateX(-5px); }
+            100% { transform: translateX(0); }
+        }
+        @keyframes float {
+            0% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0); }
+        }
+        .digivice-screen {
+            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
+        }
+        .digimon-sprite {
+            image-rendering: pixelated;
+        }
+        .button-glow {
+            box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7);
+        }
+        .notification {
+            animation: pulse 1s infinite;
+        }
+        .hungry {
+            animation: shake 0.5s infinite;
+        }
+        .happy {
+            animation: float 2s infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
+    <div class="relative w-full max-w-md">
+        <!-- Digivice Body -->
+        <div class="relative bg-black rounded-3xl p-6 shadow-2xl border-4 border-gray-800 overflow-hidden">
+            <!-- Antenna -->
+            <div class="absolute -top-6 left-1/2 transform -translate-x-1/2 w-4 h-8 bg-red-600 rounded-t-full"></div>
+            <!-- Screen Area -->
+            <div class="digivice-screen rounded-xl p-4 mb-6 h-64 relative overflow-hidden">
+                <!-- Screen Content -->
+                <div id="screen-content" class="h-full flex flex-col">
+                    <!-- Default screen will be loaded here -->
+                </div>
+                <!-- Screen Glow Effect -->
+                <div class="absolute inset-0 rounded-xl pointer-events-none" style="box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);"></div>
+            </div>
+            <!-- Buttons -->
+            <div class="flex justify-between mb-4">
+                <button id="btn-a" class="bg-blue-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-blue-500 transition-all">
+                    A
+                </button>
+                <button id="btn-b" class="bg-red-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-red-500 transition-all">
+                    B
+                </button>
+            </div>
+            <div class="flex justify-center space-x-4">
+                <button id="btn-up" class="bg-yellow-500 text-gray-900 w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-yellow-400 transition-all">
+                    <i class="fas fa-arrow-up"></i>
+                </button>
+                <button id="btn-down" class="bg-yellow-500 text-gray-900 w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-yellow-400 transition-all">
+                    <i class="fas fa-arrow-down"></i>
+                </button>
+            </div>
+            <div class="flex justify-center mt-4">
+                <button id="btn-c" class="bg-green-600 text-white w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold hover:bg-green-500 transition-all">
+                    C
+                </button>
+            </div>
+            <!-- Speaker Holes -->
+            <div class="flex justify-center space-x-1 mt-6">
+                <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+                <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+                <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+                <div class="w-2 h-2 bg-gray-400 rounded-full"></div>
+            </div>
+            <!-- Battery Indicator -->
+            <div class="absolute bottom-2 right-4 flex items-center">
+                <span class="text-xs text-white mr-1">BATT</span>
+                <div class="w-12 h-4 border border-gray-400 rounded flex overflow-hidden">
+                    <div id="battery-level" class="bg-green-500 h-full w-full"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Strap Holder -->
+        <div class="absolute -left-2 top-1/2 transform -translate-y-1/2 w-4 h-16 bg-gray-700 rounded-l"></div>
+        <div class="absolute -right-2 top-1/2 transform -translate-y-1/2 w-4 h-16 bg-gray-700 rounded-r"></div>
+    </div>
+    <script>
+        // Digimon Data
+        const digimonData = {
+            botamon: {
+                name: "Botamon",
+                stage: "Baby I",
+                sprite: "●",
+                color: "text-purple-300",
+                evolutions: ["koromon"],
+                requirements: { careMistakes: 3, battles: 0, age: 1 }
+            },
+            koromon: {
+                name: "Koromon",
+                stage: "Baby II",
+                sprite: "●",
+                color: "text-pink-300",
+                evolutions: ["agumon", "betamon"],
+                requirements: { careMistakes: 3, battles: 0, age: 2 }
+            },
+            agumon: {
+                name: "Agumon",
+                stage: "Child",
+                sprite: `
+                   /\\_/\\
+                  ( o.o )
+                   > ^ <
+                `,
+                color: "text-yellow-300",
+                evolutions: ["greymon", "tyrannomon"],
+                requirements: { careMistakes: 5, battles: 5, age: 4 }
+            },
+            betamon: {
+                name: "Betamon",
+                stage: "Child",
+                sprite: `
+                    /\\_/\\
+                   ( x.x )
+                    > ~ <
+                `,
+                color: "text-blue-300",
+                evolutions: ["seadramon", "devimon"],
+                requirements: { careMistakes: 5, battles: 5, age: 4 }
+            },
+            greymon: {
+                name: "Greymon",
+                stage: "Adult",
+                sprite: `
+                   /\\___/\\
+                  (  o.o  )
+                  /   ^   \\
+                `,
+                color: "text-orange-300",
+                evolutions: ["metalgreymon", "skullgreymon"],
+                requirements: { careMistakes: 8, battles: 15, age: 8 }
+            },
+            tyrannomon: {
+                name: "Tyrannomon",
+                stage: "Adult",
+                sprite: `
+                   /\\___/\\
+                  (  O.O  )
+                  /   ^   \\
+                `,
+                color: "text-red-300",
+                evolutions: ["mastertyrannomon"],
+                requirements: { careMistakes: 8, battles: 15, age: 8 }
+            },
+            seadramon: {
+                name: "Seadramon",
+                stage: "Adult",
+                sprite: `
+                    ~\\___/~
+                    (  o.o )
+                    /   ^  \\
+                `,
+                color: "text-teal-300",
+                evolutions: ["megaseadramon"],
+                requirements: { careMistakes: 8, battles: 15, age: 8 }
+            },
+            devimon: {
+                name: "Devimon",
+                stage: "Adult",
+                sprite: `
+                   /\\___/\\
+                  (  X.X  )
+                   /  ^  \\
+                `,
+                color: "text-purple-500",
+                evolutions: ["mydoomon"],
+                requirements: { careMistakes: 8, battles: 15, age: 8 }
+            }
+        };
+        // Game State
+        let gameState = {
+            currentDigimon: null,
+            digimonList: [],
+            selectedDigimon: null,
+            screen: "main",
+            stats: {
+                hunger: 100,
+                happiness: 100,
+                energy: 100,
+                cleanliness: 100,
+                age: 0,
+                battles: 0,
+                wins: 0,
+                losses: 0,
+                careMistakes: 0,
+                lastFed: Date.now(),
+                lastPlayed: Date.now(),
+                lastCleaned: Date.now(),
+                lastSleep: Date.now()
+            },
+            time: {
+                day: 1,
+                hour: 8,
+                minute: 0,
+                paused: false
+            },
+            notifications: []
+        };
+        // DOM Elements
+        const screenContent = document.getElementById('screen-content');
+        const batteryLevel = document.getElementById('battery-level');
+        const buttons = {
+            a: document.getElementById('btn-a'),
+            b: document.getElementById('btn-b'),
+            c: document.getElementById('btn-c'),
+            up: document.getElementById('btn-up'),
+            down: document.getElementById('btn-down')
+        };
+        // Initialize the game
+        function initGame() {
+            // Start with a new Digimon
+            createNewDigimon();
+            // Start game loop
+            setInterval(gameLoop, 1000);
+            // Set up button listeners
+            setupButtons();
+            // Initial render
+            renderScreen();
+        }
+        // Game loop
+        function gameLoop() {
+            if (gameState.time.paused) return;
+            // Update time
+            gameState.time.minute += 5;
+            if (gameState.time.minute >= 60) {
+                gameState.time.minute = 0;
+                gameState.time.hour++;
+                if (gameState.time.hour >= 24) {
+                    gameState.time.hour = 0;
+                    gameState.time.day++;
+                    gameState.stats.age++;
+                    checkEvolution();
+                }
+            }
+            // Update stats
+            updateStats();
+            // Check for notifications
+            checkNotifications();
+            // Update battery (random for effect)
+            if (Math.random() < 0.01) {
+                updateBattery();
+            }
+            // Render
+            renderScreen();
+        }
+        // Update Digimon stats over time
+        function updateStats() {
+            const now = Date.now();
+            const hoursSinceFed = (now - gameState.stats.lastFed) / (1000 * 60 * 60);
+            const hoursSincePlayed = (now - gameState.stats.lastPlayed) / (1000 * 60 * 60);
+            const hoursSinceCleaned = (now - gameState.stats.lastCleaned) / (1000 * 60 * 60);
+            const hoursSinceSleep = (now - gameState.stats.lastSleep) / (1000 * 60 * 60);
+            // Hunger decreases over time
+            if (hoursSinceFed > 2) {
+                gameState.stats.hunger = Math.max(0, gameState.stats.hunger - 5);
+                if (gameState.stats.hunger < 30 && !gameState.notifications.includes('hungry')) {
+                    gameState.notifications.push('hungry');
+                }
+            }
+            // Happiness decreases if not played with
+            if (hoursSincePlayed > 3) {
+                gameState.stats.happiness = Math.max(0, gameState.stats.happiness - 3);
+                if (gameState.stats.happiness < 30 && !gameState.notifications.includes('bored')) {
+                    gameState.notifications.push('bored');
+                }
+            }
+            // Cleanliness decreases over time
+            if (hoursSinceCleaned > 4) {
+                gameState.stats.cleanliness = Math.max(0, gameState.stats.cleanliness - 4);
+                if (gameState.stats.cleanliness < 30 && !gameState.notifications.includes('dirty')) {
+                    gameState.notifications.push('dirty');
+                }
+            }
+            // Energy decreases if not slept
+            if (hoursSinceSleep > 6) {
+                gameState.stats.energy = Math.max(0, gameState.stats.energy - 4);
+                if (gameState.stats.energy < 30 && !gameState.notifications.includes('tired')) {
+                    gameState.notifications.push('tired');
+                }
+            }
+            // Care mistakes if stats get too low
+            if (gameState.stats.hunger <= 0 || gameState.stats.happiness <= 0 ||
+                gameState.stats.cleanliness <= 0 || gameState.stats.energy <= 0) {
+                gameState.stats.careMistakes++;
+                // Reset stats to prevent multiple care mistakes at once
+                if (gameState.stats.hunger <= 0) gameState.stats.hunger = 30;
+                if (gameState.stats.happiness <= 0) gameState.stats.happiness = 30;
+                if (gameState.stats.cleanliness <= 0) gameState.stats.cleanliness = 30;
+                if (gameState.stats.energy <= 0) gameState.stats.energy = 30;
+                gameState.notifications.push('careMistake');
+            }
+        }
+        // Check for evolution conditions
+        function checkEvolution() {
+            if (!gameState.currentDigimon) return;
+            const currentDigiData = digimonData[gameState.currentDigimon];
+            const requirements = currentDigiData.requirements;
+            // Check if requirements are met
+            if (gameState.stats.age >= requirements.age &&
+                gameState.stats.battles >= requirements.battles &&
+                gameState.stats.careMistakes <= requirements.careMistakes) {
+                // Randomly select an evolution path
+                const possibleEvolutions = currentDigiData.evolutions;
+                const nextEvolution = possibleEvolutions[Math.floor(Math.random() * possibleEvolutions.length)];
+                // Evolve the Digimon
+                gameState.currentDigimon = nextEvolution;
+                gameState.notifications.push('evolution');
+            }
+        }
+        // Create a new Digimon
+        function createNewDigimon() {
+            gameState.currentDigimon = "botamon";
+            gameState.digimonList.push({
+                name: "Botamon",
+                type: "botamon",
+                stats: { ...gameState.stats }
+            });
+            gameState.selectedDigimon = 0;
+            // Reset stats
+            gameState.stats = {
+                hunger: 100,
+                happiness: 100,
+                energy: 100,
+                cleanliness: 100,
+                age: 0,
+                battles: 0,
+                wins: 0,
+                losses: 0,
+                careMistakes: 0,
+                lastFed: Date.now(),
+                lastPlayed: Date.now(),
+                lastCleaned: Date.now(),
+                lastSleep: Date.now()
+            };
+            gameState.notifications.push('newDigimon');
+        }
+        // Update battery level (visual effect only)
+        function updateBattery() {
+            const levels = ['w-0', 'w-1/4', 'w-1/2', 'w-3/4', 'w-full'];
+            const colors = ['bg-red-500', 'bg-yellow-500', 'bg-green-500'];
+            // Randomly change battery level for effect
+            const randomLevel = levels[Math.floor(Math.random() * levels.length)];
+            const randomColor = colors[Math.floor(Math.random() * colors.length)];
+            batteryLevel.className = `h-full ${randomLevel} ${randomColor}`;
+        }
+        // Check for notifications
+        function checkNotifications() {
+            // Check if any stats are critically low
+            if (gameState.stats.hunger < 20 && !gameState.notifications.includes('starving')) {
+                gameState.notifications.push('starving');
+            }
+            if (gameState.stats.happiness < 20 && !gameState.notifications.includes('depressed')) {
+                gameState.notifications.push('depressed');
+            }
+            if (gameState.stats.cleanliness < 20 && !gameState.notifications.includes('filthy')) {
+                gameState.notifications.push('filthy');
+            }
+            if (gameState.stats.energy < 20 && !gameState.notifications.includes('exhausted')) {
+                gameState.notifications.push('exhausted');
+            }
+        }
+        // Render the current screen
+        function renderScreen() {
+            let content = '';
+            switch (gameState.screen) {
+                case 'main':
+                    content = renderMainScreen();
+                    break;
+                case 'stats':
+                    content = renderStatsScreen();
+                    break;
+                case 'care':
+                    content = renderCareScreen();
+                    break;
+                case 'battle':
+                    content = renderBattleScreen();
+                    break;
+                case 'digivolve':
+                    content = renderDigivolveScreen();
+                    break;
+                case 'settings':
+                    content = renderSettingsScreen();
+                    break;
+                default:
+                    content = renderMainScreen();
+            }
+            screenContent.innerHTML = content;
+            // Add notification indicator if any
+            if (gameState.notifications.length > 0) {
+                const notificationBtn = document.getElementById('notification-btn');
+                if (notificationBtn) {
+                    notificationBtn.classList.add('notification');
+                }
+            }
+        }
+        // Render main screen
+        function renderMainScreen() {
+            const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null;
+            const hour = gameState.time.hour.toString().padStart(2, '0');
+            const minute = gameState.time.minute.toString().padStart(2, '0');
+            let digimonDisplay = '';
+            if (digimon) {
+                // Add animation classes based on state
+                let animationClass = '';
+                if (gameState.notifications.includes('hungry') || gameState.notifications.includes('starving')) {
+                    animationClass = 'hungry';
+                } else if (gameState.stats.happiness > 70) {
+                    animationClass = 'happy';
+                }
+                digimonDisplay = `
+                    <div class="flex-1 flex flex-col items-center justify-center ${digimon.color} ${animationClass}">
+                        <pre class="digimon-sprite text-4xl mb-2">${digimon.sprite}</pre>
+                        <div class="text-center">
+                            <div class="text-lg font-bold">${digimon.name}</div>
+                            <div class="text-xs">${digimon.stage}</div>
+                        </div>
+                    </div>
+                `;
+            } else {
+                digimonDisplay = `
+                    <div class="flex-1 flex items-center justify-center text-white">
+                        No Digimon
+                    </div>
+                `;
+            }
+            return `
+                <div class="h-full flex flex-col">
+                    <!-- Status Bar -->
+                    <div class="flex justify-between items-center text-white text-xs mb-2">
+                        <div>Day ${gameState.time.day}</div>
+                        <div>${hour}:${minute}</div>
+                        <div id="notification-btn" class="w-4 h-4 rounded-full bg-red-500 ${gameState.notifications.length > 0 ? 'notification' : 'opacity-0'}"></div>
+                    </div>
+                    <!-- Digimon Display -->
+                    ${digimonDisplay}
+                    <!-- Menu Options -->
+                    <div class="grid grid-cols-3 gap-2 text-white text-xs text-center mt-auto">
+                        <div class="bg-blue-800 p-1 rounded">STATS</div>
+                        <div class="bg-green-800 p-1 rounded">CARE</div>
+                        <div class="bg-red-800 p-1 rounded">BATTLE</div>
+                    </div>
+                </div>
+            `;
+        }
+        // Render stats screen
+        function renderStatsScreen() {
+            const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null;
+            return `
+                <div class="h-full flex flex-col text-white">
+                    <div class="text-center font-bold mb-2">${digimon ? digimon.name : 'No Digimon'} STATS</div>
+                    <div class="flex-1 grid grid-cols-2 gap-2 text-xs">
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>HUNGER</div>
+                            <div class="w-full bg-gray-700 h-4 rounded mt-1">
+                                <div class="bg-red-500 h-full rounded" style="width: ${gameState.stats.hunger}%"></div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>HAPPINESS</div>
+                            <div class="w-full bg-gray-700 h-4 rounded mt-1">
+                                <div class="bg-yellow-500 h-full rounded" style="width: ${gameState.stats.happiness}%"></div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>ENERGY</div>
+                            <div class="w-full bg-gray-700 h-4 rounded mt-1">
+                                <div class="bg-blue-500 h-full rounded" style="width: ${gameState.stats.energy}%"></div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>CLEANLINESS</div>
+                            <div class="w-full bg-gray-700 h-4 rounded mt-1">
+                                <div class="bg-green-500 h-full rounded" style="width: ${gameState.stats.cleanliness}%"></div>
+                            </div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>AGE</div>
+                            <div>${gameState.stats.age} days</div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>BATTLES</div>
+                            <div>${gameState.stats.wins}W/${gameState.stats.losses}L</div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>CARE MISTAKES</div>
+                            <div>${gameState.stats.careMistakes}</div>
+                        </div>
+                        <div class="bg-gray-800 p-2 rounded">
+                            <div>STAGE</div>
+                            <div>${digimon ? digimon.stage : 'N/A'}</div>
+                        </div>
+                    </div>
+                    <div class="mt-auto text-center text-xs">
+                        Press B to return
+                    </div>
+                </div>
+            `;
+        }
+        // Render care screen
+        function renderCareScreen() {
+            return `
+                <div class="h-full flex flex-col text-white">
+                    <div class="text-center font-bold mb-2">CARE MENU</div>
+                    <div class="flex-1 grid grid-cols-2 gap-2">
+                        <button id="care-feed" class="bg-red-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('hungry') ? 'button-glow' : ''}">
+                            <i class="fas fa-utensils text-2xl mb-1"></i>
+                            <div class="text-xs">FEED</div>
+                        </button>
+                        <button id="care-play" class="bg-yellow-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('bored') ? 'button-glow' : ''}">
+                            <i class="fas fa-gamepad text-2xl mb-1"></i>
+                            <div class="text-xs">PLAY</div>
+                        </button>
+                        <button id="care-clean" class="bg-blue-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('dirty') ? 'button-glow' : ''}">
+                            <i class="fas fa-shower text-2xl mb-1"></i>
+                            <div class="text-xs">CLEAN</div>
+                        </button>
+                        <button id="care-sleep" class="bg-purple-600 p-2 rounded flex flex-col items-center justify-center ${gameState.notifications.includes('tired') ? 'button-glow' : ''}">
+                            <i class="fas fa-moon text-2xl mb-1"></i>
+                            <div class="text-xs">SLEEP</div>
+                        </button>
+                        <button id="care-medicine" class="bg-green-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-pills text-2xl mb-1"></i>
+                            <div class="text-xs">MEDICINE</div>
+                        </button>
+                        <button id="care-scold" class="bg-gray-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-angry text-2xl mb-1"></i>
+                            <div class="text-xs">SCOLD</div>
+                        </button>
+                    </div>
+                    <div class="mt-auto text-center text-xs">
+                        Press B to return
+                    </div>
+                </div>
+            `;
+        }
+        // Render battle screen
+        function renderBattleScreen() {
+            const opponents = ["Numemon", "Gazimon", "Gotsumon", "Patamon", "Gabumon"];
+            const randomOpponent = opponents[Math.floor(Math.random() * opponents.length)];
+            return `
+                <div class="h-full flex flex-col text-white">
+                    <div class="text-center font-bold mb-2">BATTLE MENU</div>
+                    <div class="flex-1 flex flex-col items-center justify-center">
+                        <div class="text-lg mb-4">VS ${randomOpponent}</div>
+                        <div class="grid grid-cols-2 gap-4 w-full">
+                            <button id="battle-fight" class="bg-red-600 p-2 rounded">
+                                <div class="text-xs">FIGHT</div>
+                            </button>
+                            <button id="battle-run" class="bg-blue-600 p-2 rounded">
+                                <div class="text-xs">RUN</div>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mt-auto text-center text-xs">
+                        Press B to return
+                    </div>
+                </div>
+            `;
+        }
+        // Render digivolve screen
+        function renderDigivolveScreen() {
+            const digimon = gameState.currentDigimon ? digimonData[gameState.currentDigimon] : null;
+            const nextStage = digimon ? digimon.evolutions[0] : null;
+            const nextDigimon = nextStage ? digimonData[nextStage] : null;
+            return `
+                <div class="h-full flex flex-col items-center justify-center text-white">
+                    <div class="text-center font-bold mb-4">DIGIVOLUTION!</div>
+                    <div class="flex items-center justify-center space-x-8 mb-4">
+                        <div class="text-center">
+                            <pre class="digimon-sprite text-4xl ${digimon.color}">${digimon.sprite}</pre>
+                            <div class="text-xs">${digimon.name}</div>
+                        </div>
+                        <div class="text-2xl">→</div>
+                        <div class="text-center">
+                            <pre class="digimon-sprite text-4xl ${nextDigimon.color}">${nextDigimon.sprite}</pre>
+                            <div class="text-xs">${nextDigimon.name}</div>
+                        </div>
+                    </div>
+                    <div class="text-center text-xs mb-4">
+                        Your ${digimon.name} is evolving into ${nextDigimon.name}!
+                    </div>
+                    <button id="digivolve-confirm" class="bg-green-600 px-4 py-2 rounded">
+                        CONTINUE
+                    </button>
+                </div>
+            `;
+        }
+        // Render settings screen
+        function renderSettingsScreen() {
+            return `
+                <div class="h-full flex flex-col text-white">
+                    <div class="text-center font-bold mb-2">SETTINGS</div>
+                    <div class="flex-1 grid grid-cols-2 gap-2">
+                        <button id="settings-time" class="bg-blue-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-clock text-2xl mb-1"></i>
+                            <div class="text-xs">TIME</div>
+                        </button>
+                        <button id="settings-sound" class="bg-green-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-volume-up text-2xl mb-1"></i>
+                            <div class="text-xs">SOUND</div>
+                        </button>
+                        <button id="settings-reset" class="bg-red-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-trash text-2xl mb-1"></i>
+                            <div class="text-xs">RESET</div>
+                        </button>
+                        <button id="settings-about" class="bg-yellow-600 p-2 rounded flex flex-col items-center justify-center">
+                            <i class="fas fa-info-circle text-2xl mb-1"></i>
+                            <div class="text-xs">ABOUT</div>
+                        </button>
+                    </div>
+                    <div class="mt-auto text-center text-xs">
+                        Press B to return
+                    </div>
+                </div>
+            `;
+        }
+        // Handle button presses
+        function setupButtons() {
+            // A Button - Contextual action
+            buttons.a.addEventListener('click', () => {
+                switch (gameState.screen) {
+                    case 'main':
+                        // Toggle between Digimon and menu
+                        break;
+                    case 'care':
+                        // Default action in care menu
+                        break;
+                    case 'battle':
+                        // Attack in battle
+                        break;
+                }
+            });
+            // B Button - Back/return
+            buttons.b.addEventListener('click', () => {
+                if (gameState.screen !== 'main') {
+                    gameState.screen = 'main';
+                    renderScreen();
+                } else {
+                    // Check notifications
+                    if (gameState.notifications.length > 0) {
+                        handleNotification();
+                    }
+                }
+            });
+            // C Button - Menu
+            buttons.c.addEventListener('click', () => {
+                if (gameState.screen === 'main') {
+                    gameState.screen = 'settings';
+                    renderScreen();
+                }
+            });
+            // Up Button - Navigate up
+            buttons.up.addEventListener('click', () => {
+                if (gameState.screen === 'main') {
+                    gameState.screen = 'stats';
+                    renderScreen();
+                }
+            });
+            // Down Button - Navigate down
+            buttons.down.addEventListener('click', () => {
+                if (gameState.screen === 'main') {
+                    gameState.screen = 'care';
+                    renderScreen();
+                } else if (gameState.screen === 'care') {
+                    gameState.screen = 'battle';
+                    renderScreen();
+                }
+            });
+            // Care menu buttons
+            document.addEventListener('click', (e) => {
+                if (e.target.closest('#care-feed')) {
+                    feedDigimon();
+                } else if (e.target.closest('#care-play')) {
+                    playWithDigimon();
+                } else if (e.target.closest('#care-clean')) {
+                    cleanDigimon();
+                } else if (e.target.closest('#care-sleep')) {
+                    putDigimonToSleep();
+                } else if (e.target.closest('#battle-fight')) {
+                    startBattle();
+                } else if (e.target.closest('#digivolve-confirm')) {
+                    confirmEvolution();
+                }
+            });
+        }
+        // Handle notifications
+        function handleNotification() {
+            if (gameState.notifications.length === 0) return;
+            const notification = gameState.notifications.shift();
+            let message = '';
+            switch (notification) {
+                case 'hungry':
+                    message = `${digimonData[gameState.currentDigimon].name} is hungry!`;
+                    break;
+                case 'starving':
+                    message = `${digimonData[gameState.currentDigimon].name} is starving!`;
+                    break;
+                case 'bored':
+                    message = `${digimonData[gameState.currentDigimon].name} wants to play!`;
+                    break;
+                case 'depressed':
+                    message = `${digimonData[gameState.currentDigimon].name} is depressed!`;
+                    break;
+                case 'dirty':
+                    message = `${digimonData[gameState.currentDigimon].name} needs cleaning!`;
+                    break;
+                case 'filthy':
+                    message = `${digimonData[gameState.currentDigimon].name} is filthy!`;
+                    break;
+                case 'tired':
+                    message = `${digimonData[gameState.currentDigimon].name} is tired!`;
+                    break;
+                case 'exhausted':
+                    message = `${digimonData[gameState.currentDigimon].name} is exhausted!`;
+                    break;
+                case 'careMistake':
+                    message = `Care mistake! ${digimonData[gameState.currentDigimon].name} wasn't cared for properly.`;
+                    break;
+                case 'newDigimon':
+                    message = `A new Digimon has appeared!`;
+                    break;
+                case 'evolution':
+                    gameState.screen = 'digivolve';
+                    break;
+                default:
+                    message = `Notification: ${notification}`;
+            }
+            if (message) {
+                alert(message); // In a real app, we'd show this in the Digivice screen
+            }
+            renderScreen();
+        }
+        // Care actions
+        function feedDigimon() {
+            gameState.stats.hunger = Math.min(100, gameState.stats.hunger + 30);
+            gameState.stats.lastFed = Date.now();
+            removeNotification('hungry');
+            removeNotification('starving');
+            renderScreen();
+        }
+        function playWithDigimon() {
+            gameState.stats.happiness = Math.min(100, gameState.stats.happiness + 30);
+            gameState.stats.energy = Math.max(0, gameState.stats.energy - 10);
+            gameState.stats.lastPlayed = Date.now();
+            removeNotification('bored');
+            removeNotification('depressed');
+            renderScreen();
+        }
+        function cleanDigimon() {
+            gameState.stats.cleanliness = Math.min(100, gameState.stats.cleanliness + 40);
+            gameState.stats.lastCleaned = Date.now();
+            removeNotification('dirty');
+            removeNotification('filthy');
+            renderScreen();
+        }
+        function putDigimonToSleep() {
+            gameState.stats.energy = Math.min(100, gameState.stats.energy + 50);
+            gameState.stats.lastSleep = Date.now();
+            removeNotification('tired');
+            removeNotification('exhausted');
+            renderScreen();
+        }
+        function removeNotification(type) {
+            gameState.notifications = gameState.notifications.filter(n => n !== type);
+        }
+        // Battle system
+        function startBattle() {
+            const winChance = 0.5 +
+                (gameState.stats.happiness / 200) +
+                (gameState.stats.energy / 200) -
+                (gameState.stats.careMistakes * 0.05);
+            const didWin = Math.random() < winChance;
+            if (didWin) {
+                gameState.stats.battles++;
+                gameState.stats.wins++;
+                gameState.stats.happiness = Math.min(100, gameState.stats.happiness + 10);
+                alert(`${digimonData[gameState.currentDigimon].name} won the battle!`);
+            } else {
+                gameState.stats.battles++;
+                gameState.stats.losses++;
+                gameState.stats.energy = Math.max(0, gameState.stats.energy - 20);
+                alert(`${digimonData[gameState.currentDigimon].name} lost the battle...`);
+            }
+            gameState.screen = 'main';
+            renderScreen();
+        }
+        // Evolution
+        function confirmEvolution() {
+            gameState.screen = 'main';
+            renderScreen();
+        }
+        // Initialize the game when the page loads
+        window.addEventListener('DOMContentLoaded', initGame);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dennis20014/fun-stuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>