Spaces:

Remsky
/

hamstagotchi

Running

App Files Files Community

Remsky commited on Apr 14

Commit

00619ac

verified ·

1 Parent(s): 6cc0a3c

Update index.html

Browse files

Files changed (1) hide show

index.html +375 -18

index.html CHANGED Viewed

@@ -1,19 +1,376 @@
-<!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>Pixel Hamster Care</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes hamsterWalk {
+            0%, 100% { transform: translateX(0) rotate(0deg); }
+            25% { transform: translateX(5px) rotate(5deg); }
+            75% { transform: translateX(-5px) rotate(-5deg); }
+        }
+        @keyframes hamsterEat {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05) translateY(-3px); }
+        }
+        @keyframes hamsterClean {
+            0%, 100% { transform: rotate(0deg); }
+            25% { transform: rotate(15deg); }
+            75% { transform: rotate(-15deg); }
+        }
+        @keyframes hamsterHappy {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        .hamster-animation-walk {
+            animation: hamsterWalk 0.8s infinite;
+        }
+        .hamster-animation-eat {
+            animation: hamsterEat 0.5s infinite;
+        }
+        .hamster-animation-clean {
+            animation: hamsterClean 0.6s infinite;
+        }
+        .hamster-animation-happy {
+            animation: hamsterHappy 0.7s infinite;
+        }
+        .pixel-art {
+            image-rendering: pixelated;
+            image-rendering: -moz-crisp-edges;
+            image-rendering: crisp-edges;
+        }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+        .action-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .action-button:active {
+            transform: translateY(0);
+        }
+        .notification {
+            animation: fadeInOut 2s ease-in-out;
+            opacity: 0;
+        }
+        @keyframes fadeInOut {
+            0%, 100% { opacity: 0; transform: translateY(10px); }
+            20%, 80% { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body class="bg-amber-50 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-md w-full bg-amber-100 rounded-2xl shadow-xl overflow-hidden border-4 border-amber-300">
+        <div class="bg-amber-300 p-4 flex justify-between items-center">
+            <h1 class="text-2xl font-bold text-amber-800">Pixel Hamster Care</h1>
+            <div class="text-amber-700 font-mono">Day: <span id="day-counter">1</span></div>
+        </div>
+        <div class="p-6 flex flex-col items-center">
+            <!-- Status bars -->
+            <div class="w-full mb-6 space-y-2">
+                <div class="flex items-center">
+                    <span class="w-20 text-amber-900 font-medium">Hunger:</span>
+                    <div class="flex-1 h-4 bg-amber-200 rounded-full overflow-hidden">
+                        <div id="hunger-bar" class="h-full bg-red-500 progress-bar" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <span class="w-20 text-amber-900 font-medium">Happiness:</span>
+                    <div class="flex-1 h-4 bg-amber-200 rounded-full overflow-hidden">
+                        <div id="happiness-bar" class="h-full bg-green-500 progress-bar" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div class="flex items-center">
+                    <span class="w-20 text-amber-900 font-medium">Cleanliness:</span>
+                    <div class="flex-1 h-4 bg-amber-200 rounded-full overflow-hidden">
+                        <div id="clean-bar" class="h-full bg-blue-500 progress-bar" style="width: 100%"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Hamster display -->
+            <div class="relative w-48 h-48 bg-amber-200 rounded-xl border-2 border-amber-300 flex items-center justify-center mb-6">
+                <div id="hamster-container" class="hamster-animation-walk">
+                    <!-- Pixel art hamster SVG -->
+                    <svg id="hamster" class="pixel-art" width="120" height="120" viewBox="0 0 120 120">
+                        <!-- Body -->
+                        <rect x="40" y="50" width="40" height="30" fill="#D1A684" />
+                        <rect x="35" y="45" width="10" height="10" fill="#D1A684" />
+                        <rect x="75" y="45" width="10" height="10" fill="#D1A684" />
+                        <!-- Head -->
+                        <rect x="45" y="35" width="30" height="20" fill="#D1A684" />
+                        <!-- Ears -->
+                        <rect x="40" y="30" width="10" height="10" fill="#D1A684" />
+                        <rect x="70" y="30" width="10" height="10" fill="#D1A684" />
+                        <rect x="42" y="32" width="6" height="6" fill="#F5D5B9" />
+                        <rect x="72" y="32" width="6" height="6" fill="#F5D5B9" />
+                        <!-- Eyes -->
+                        <rect x="50" y="40" width="5" height="5" fill="#333" />
+                        <rect x="65" y="40" width="5" height="5" fill="#333" />
+                        <!-- Nose -->
+                        <rect x="45" y="45" width="5" height="5" fill="#333" />
+                        <rect x="70" y="45" width="5" height="5" fill="#333" />
+                        <!-- Cheeks -->
+                        <rect x="45" y="50" width="10" height="5" fill="#F5A9A9" />
+                        <rect x="65" y="50" width="10" height="5" fill="#F5A9A9" />
+                        <!-- Mouth -->
+                        <rect x="55" y="50" width="10" height="5" fill="#333" />
+                        <!-- Arms -->
+                        <rect x="35" y="55" width="5" height="15" fill="#D1A684" />
+                        <rect x="80" y="55" width="5" height="15" fill="#D1A684" />
+                        <!-- Legs -->
+                        <rect x="45" y="80" width="10" height="5" fill="#D1A684" />
+                        <rect x="65" y="80" width="10" height="5" fill="#D1A684" />
+                        <!-- Tail -->
+                        <rect x="30" y="55" width="10" height="5" fill="#D1A684" />
+                    </svg>
+                </div>
+                <!-- Cage elements -->
+                <div class="absolute bottom-2 left-2 w-16 h-8 bg-amber-400 rounded"></div>
+                <div class="absolute top-2 right-2 w-12 h-6 bg-amber-500 rounded"></div>
+                <!-- Notification -->
+                <div id="notification" class="notification absolute top-0 left-0 right-0 bg-amber-400 text-amber-900 text-center py-1 font-medium hidden"></div>
+            </div>
+            <!-- Action buttons -->
+            <div class="grid grid-cols-3 gap-4 w-full">
+                <button id="feed-btn" class="action-button bg-red-400 hover:bg-red-500 text-white font-bold py-3 px-4 rounded-lg transition-all flex flex-col items-center">
+                    <svg class="w-8 h-8 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    Feed
+                </button>
+                <button id="play-btn" class="action-button bg-green-400 hover:bg-green-500 text-white font-bold py-3 px-4 rounded-lg transition-all flex flex-col items-center">
+                    <svg class="w-8 h-8 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                    </svg>
+                    Play
+                </button>
+                <button id="clean-btn" class="action-button bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded-lg transition-all flex flex-col items-center">
+                    <svg class="w-8 h-8 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+                    </svg>
+                    Clean
+                </button>
+            </div>
+        </div>
+        <div class="bg-amber-200 p-4 text-center text-amber-800">
+            <p id="hamster-message">Hello! I'm your new hamster friend!</p>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const state = {
+            hunger: 100,
+            happiness: 100,
+            cleanliness: 100,
+            day: 1,
+            isSleeping: false,
+            currentAnimation: 'walk',
+            messages: [
+                "Hello! I'm your new hamster friend!",
+                "I'm getting hungry...",
+                "Play with me!",
+                "My cage is getting dirty...",
+                "I love you!",
+                "Zzz... zzz...",
+                "That was fun!",
+                "Yummy!",
+                "Ahh, so clean now!",
+                "I'm bored...",
+                "Wheel time!"
+            ]
+        };
+        // DOM elements
+        const hungerBar = document.getElementById('hunger-bar');
+        const happinessBar = document.getElementById('happiness-bar');
+        const cleanBar = document.getElementById('clean-bar');
+        const dayCounter = document.getElementById('day-counter');
+        const hamsterContainer = document.getElementById('hamster-container');
+        const hamsterMessage = document.getElementById('hamster-message');
+        const notification = document.getElementById('notification');
+        const feedBtn = document.getElementById('feed-btn');
+        const playBtn = document.getElementById('play-btn');
+        const cleanBtn = document.getElementById('clean-btn');
+        // Game loop
+        let gameLoop = setInterval(() => {
+            // Decrease stats over time
+            state.hunger = Math.max(0, state.hunger - 1);
+            state.happiness = Math.max(0, state.happiness - 0.8);
+            state.cleanliness = Math.max(0, state.cleanliness - 0.5);
+            // Update UI
+            updateBars();
+            // Random hamster actions
+            if (Math.random() < 0.1) {
+                randomHamsterAction();
+            }
+            // Check for day change
+            if (state.hunger <= 0 || state.happiness <= 0 || state.cleanliness <= 0) {
+                showNotification("Your hamster ran away! Starting new day...");
+                resetDay();
+            }
+            // Random messages
+            if (Math.random() < 0.2) {
+                showRandomMessage();
+            }
+        }, 2000);
+        // Update status bars
+        function updateBars() {
+            hungerBar.style.width = `${state.hunger}%`;
+            happinessBar.style.width = `${state.happiness}%`;
+            cleanBar.style.width = `${state.cleanliness}%`;
+            // Change colors based on level
+            hungerBar.className = `h-full progress-bar ${state.hunger > 50 ? 'bg-red-500' : state.hunger > 20 ? 'bg-orange-500' : 'bg-yellow-300'}`;
+            happinessBar.className = `h-full progress-bar ${state.happiness > 50 ? 'bg-green-500' : state.happiness > 20 ? 'bg-yellow-500' : 'bg-red-400'}`;
+            cleanBar.className = `h-full progress-bar ${state.cleanliness > 50 ? 'bg-blue-500' : state.cleanliness > 20 ? 'bg-purple-400' : 'bg-gray-400'}`;
+        }
+        // Random hamster animation
+        function randomHamsterAction() {
+            const actions = ['walk', 'sleep', 'happy'];
+            const randomAction = actions[Math.floor(Math.random() * actions.length)];
+            changeAnimation(randomAction);
+            if (randomAction === 'sleep') {
+                hamsterMessage.textContent = "Zzz... zzz...";
+            }
+        }
+        // Change hamster animation
+        function changeAnimation(animation) {
+            hamsterContainer.classList.remove(
+                'hamster-animation-walk',
+                'hamster-animation-eat',
+                'hamster-animation-clean',
+                'hamster-animation-happy'
+            );
+            state.currentAnimation = animation;
+            switch(animation) {
+                case 'walk':
+                    hamsterContainer.classList.add('hamster-animation-walk');
+                    break;
+                case 'eat':
+                    hamsterContainer.classList.add('hamster-animation-eat');
+                    break;
+                case 'clean':
+                    hamsterContainer.classList.add('hamster-animation-clean');
+                    break;
+                case 'happy':
+                    hamsterContainer.classList.add('hamster-animation-happy');
+                    break;
+                case 'sleep':
+                    // No animation for sleep, just static
+                    break;
+            }
+        }
+        // Show random message
+        function showRandomMessage() {
+            if (state.hunger < 30) {
+                hamsterMessage.textContent = "I'm so hungry!";
+            } else if (state.happiness < 30) {
+                hamsterMessage.textContent = "I'm bored... play with me!";
+            } else if (state.cleanliness < 30) {
+                hamsterMessage.textContent = "My cage is dirty!";
+            } else {
+                const randomIndex = Math.floor(Math.random() * state.messages.length);
+                hamsterMessage.textContent = state.messages[randomIndex];
+            }
+        }
+        // Show notification
+        function showNotification(message) {
+            notification.textContent = message;
+            notification.classList.remove('hidden');
+            notification.style.animation = 'none';
+            void notification.offsetWidth; // Trigger reflow
+            notification.style.animation = 'fadeInOut 2s ease-in-out';
+            setTimeout(() => {
+                notification.classList.add('hidden');
+            }, 2000);
+        }
+        // Reset day
+        function resetDay() {
+            state.hunger = 100;
+            state.happiness = 100;
+            state.cleanliness = 100;
+            state.day++;
+            dayCounter.textContent = state.day;
+            updateBars();
+            changeAnimation('happy');
+            hamsterMessage.textContent = "Yay! A new day!";
+        }
+        // Event listeners
+        feedBtn.addEventListener('click', () => {
+            state.hunger = Math.min(100, state.hunger + 25);
+            updateBars();
+            changeAnimation('eat');
+            showNotification("Nom nom nom!");
+            setTimeout(() => changeAnimation('happy'), 1500);
+        });
+        playBtn.addEventListener('click', () => {
+            state.happiness = Math.min(100, state.happiness + 25);
+            updateBars();
+            changeAnimation('happy');
+            showNotification("Wheee! So fun!");
+        });
+        cleanBtn.addEventListener('click', () => {
+            state.cleanliness = Math.min(100, state.cleanliness + 25);
+            updateBars();
+            changeAnimation('clean');
+            showNotification("Ahh, so fresh!");
+            setTimeout(() => changeAnimation('happy'), 1500);
+        });
+        // Initial setup
+        updateBars();
+    </script>
+</body>
 </html>