Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cute Piglets Adventure</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> | |
| .pig-animation { | |
| transition: all 0.3s ease; | |
| } | |
| .pig-animation:hover { | |
| transform: scale(1.05); | |
| } | |
| .action-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .action-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .bounce { | |
| animation: bounce 0.5s infinite; | |
| } | |
| .happy { | |
| color: #fbbf24; | |
| } | |
| .hungry { | |
| color: #ef4444; | |
| } | |
| .sleepy { | |
| color: #60a5fa; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-pink-50 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-pink-400 p-6 text-center"> | |
| <h1 class="text-3xl font-bold text-white">Cute Piglets Adventure</h1> | |
| <p class="text-pink-100 mt-2">Take care of your virtual piglet!</p> | |
| </div> | |
| <!-- Game Container --> | |
| <div class="p-6 md:p-8"> | |
| <!-- Piglet Display --> | |
| <div class="relative flex flex-col items-center mb-8"> | |
| <div class="relative w-48 h-48 bg-pink-100 rounded-full flex items-center justify-center shadow-lg pig-animation"> | |
| <img id="piglet-image" src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Piglet" class="w-40 h-40"> | |
| <div id="piglet-expression" class="absolute -top-4 text-4xl"></div> | |
| </div> | |
| <div id="piglet-name" class="mt-4 text-xl font-semibold text-pink-800">Piggy</div> | |
| <div id="piglet-age" class="text-pink-600">Age: 0 days</div> | |
| </div> | |
| <!-- Status Bars --> | |
| <div class="space-y-4 mb-8"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-pink-700">Hunger</span> | |
| <span id="hunger-value" class="text-sm font-medium text-pink-700">50%</span> | |
| </div> | |
| <div class="w-full bg-pink-200 rounded-full h-2.5"> | |
| <div id="hunger-bar" class="bg-pink-600 h-2.5 rounded-full progress-bar" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-yellow-700">Happiness</span> | |
| <span id="happiness-value" class="text-sm font-medium text-yellow-700">50%</span> | |
| </div> | |
| <div class="w-full bg-yellow-200 rounded-full h-2.5"> | |
| <div id="happiness-bar" class="bg-yellow-500 h-2.5 rounded-full progress-bar" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-blue-700">Energy</span> | |
| <span id="energy-value" class="text-sm font-medium text-blue-700">50%</span> | |
| </div> | |
| <div class="w-full bg-blue-200 rounded-full h-2.5"> | |
| <div id="energy-bar" class="bg-blue-500 h-2.5 rounded-full progress-bar" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <button id="feed-button" class="action-btn bg-green-500 hover:bg-green-600 text-white py-3 px-4 rounded-xl flex flex-col items-center"> | |
| <i class="fas fa-utensils text-2xl mb-1"></i> | |
| <span>Feed</span> | |
| </button> | |
| <button id="pet-button" class="action-btn bg-yellow-500 hover:bg-yellow-600 text-white py-3 px-4 rounded-xl flex flex-col items-center"> | |
| <i class="fas fa-hand-holding-heart text-2xl mb-1"></i> | |
| <span>Pet</span> | |
| </button> | |
| <button id="play-button" class="action-btn bg-blue-500 hover:bg-blue-600 text-white py-3 px-4 rounded-xl flex flex-col items-center"> | |
| <i class="fas fa-gamepad text-2xl mb-1"></i> | |
| <span>Play</span> | |
| </button> | |
| </div> | |
| <!-- Special Actions --> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <button id="sleep-button" class="action-btn bg-indigo-500 hover:bg-indigo-600 text-white py-3 px-4 rounded-xl flex flex-col items-center"> | |
| <i class="fas fa-moon text-2xl mb-1"></i> | |
| <span>Sleep</span> | |
| </button> | |
| <button id="wash-button" class="action-btn bg-purple-500 hover:bg-purple-600 text-white py-3 px-4 rounded-xl flex flex-col items-center"> | |
| <i class="fas fa-bath text-2xl mb-1"></i> | |
| <span>Wash</span> | |
| </button> | |
| </div> | |
| <!-- Messages --> | |
| <div id="message-box" class="bg-pink-100 border-l-4 border-pink-400 p-4 mb-6 rounded-r-lg hidden"> | |
| <p id="message-text" class="text-pink-800"></p> | |
| </div> | |
| <!-- Stats --> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <div class="grid grid-cols-3 gap-2 text-center"> | |
| <div> | |
| <div class="text-sm text-gray-600">Weight</div> | |
| <div id="weight" class="font-bold">5 kg</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-600">Mood</div> | |
| <div id="mood" class="font-bold">Content</div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-600">Clean</div> | |
| <div id="clean" class="font-bold">Clean</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| Click the buttons to interact with your piglet! | |
| </div> | |
| <script> | |
| // Game state | |
| const state = { | |
| hunger: 50, | |
| happiness: 50, | |
| energy: 50, | |
| cleanliness: 100, | |
| weight: 5, | |
| age: 0, | |
| mood: 'Content', | |
| isSleeping: false, | |
| name: 'Piggy' | |
| }; | |
| // DOM elements | |
| const pigletImage = document.getElementById('piglet-image'); | |
| const pigletExpression = document.getElementById('piglet-expression'); | |
| const feedButton = document.getElementById('feed-button'); | |
| const petButton = document.getElementById('pet-button'); | |
| const playButton = document.getElementById('play-button'); | |
| const sleepButton = document.getElementById('sleep-button'); | |
| const washButton = document.getElementById('wash-button'); | |
| const messageBox = document.getElementById('message-box'); | |
| const messageText = document.getElementById('message-text'); | |
| // Status bars | |
| const hungerBar = document.getElementById('hunger-bar'); | |
| const happinessBar = document.getElementById('happiness-bar'); | |
| const energyBar = document.getElementById('energy-bar'); | |
| const hungerValue = document.getElementById('hunger-value'); | |
| const happinessValue = document.getElementById('happiness-value'); | |
| const energyValue = document.getElementById('energy-value'); | |
| // Stats | |
| const weightDisplay = document.getElementById('weight'); | |
| const moodDisplay = document.getElementById('mood'); | |
| const cleanDisplay = document.getElementById('clean'); | |
| const pigletAge = document.getElementById('piglet-age'); | |
| // Update all displays | |
| function updateDisplays() { | |
| // Update progress bars | |
| hungerBar.style.width = `${state.hunger}%`; | |
| happinessBar.style.width = `${state.happiness}%`; | |
| energyBar.style.width = `${state.energy}%`; | |
| // Update values | |
| hungerValue.textContent = `${state.hunger}%`; | |
| happinessValue.textContent = `${state.happiness}%`; | |
| energyValue.textContent = `${state.energy}%`; | |
| // Update stats | |
| weightDisplay.textContent = `${state.weight} kg`; | |
| moodDisplay.textContent = state.mood; | |
| cleanDisplay.textContent = state.cleanliness > 70 ? 'Clean' : | |
| state.cleanliness > 30 ? 'Dirty' : 'Filthy'; | |
| // Update age | |
| pigletAge.textContent = `Age: ${state.age} days`; | |
| // Update expression and mood | |
| updateExpression(); | |
| } | |
| // Update piglet expression based on status | |
| function updateExpression() { | |
| pigletExpression.className = ''; | |
| if (state.isSleeping) { | |
| pigletExpression.innerHTML = '😴'; | |
| pigletExpression.classList.add('sleepy'); | |
| state.mood = 'Sleeping'; | |
| return; | |
| } | |
| if (state.hunger < 20) { | |
| pigletExpression.innerHTML = '😫'; | |
| pigletExpression.classList.add('hungry'); | |
| state.mood = 'Starving'; | |
| } else if (state.hunger > 80) { | |
| pigletExpression.innerHTML = '😋'; | |
| pigletExpression.classList.add('happy'); | |
| state.mood = 'Full'; | |
| } else if (state.happiness > 80) { | |
| pigletExpression.innerHTML = '😊'; | |
| pigletExpression.classList.add('happy'); | |
| state.mood = 'Happy'; | |
| } else if (state.happiness < 20) { | |
| pigletExpression.innerHTML = '😢'; | |
| state.mood = 'Sad'; | |
| } else if (state.energy > 80) { | |
| pigletExpression.innerHTML = '😃'; | |
| pigletExpression.classList.add('happy'); | |
| state.mood = 'Energetic'; | |
| } else if (state.energy < 20) { | |
| pigletExpression.innerHTML = '😴'; | |
| pigletExpression.classList.add('sleepy'); | |
| state.mood = 'Tired'; | |
| } else { | |
| pigletExpression.innerHTML = '🐷'; | |
| state.mood = 'Content'; | |
| } | |
| // Add bounce animation if very happy | |
| if (state.happiness > 90 && state.energy > 50) { | |
| pigletExpression.classList.add('bounce'); | |
| } | |
| } | |
| // Show message | |
| function showMessage(text) { | |
| messageText.textContent = text; | |
| messageBox.classList.remove('hidden'); | |
| setTimeout(() => { | |
| messageBox.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| // Feed the piglet | |
| feedButton.addEventListener('click', () => { | |
| if (state.isSleeping) { | |
| showMessage(`${state.name} is sleeping!`); | |
| return; | |
| } | |
| state.hunger = Math.max(0, state.hunger - 15); | |
| state.happiness = Math.min(100, state.happiness + 5); | |
| state.weight = Math.min(20, state.weight + 0.2); | |
| // Random chance to get dirty when eating | |
| if (Math.random() > 0.7) { | |
| state.cleanliness = Math.max(0, state.cleanliness - 10); | |
| showMessage(`${state.name} made a mess while eating!`); | |
| } else { | |
| showMessage(`Yum! ${state.name} enjoyed the food!`); | |
| } | |
| updateDisplays(); | |
| }); | |
| // Pet the piglet | |
| petButton.addEventListener('click', () => { | |
| if (state.isSleeping) { | |
| showMessage(`${state.name} is sleeping!`); | |
| return; | |
| } | |
| state.happiness = Math.min(100, state.happiness + 15); | |
| state.energy = Math.min(100, state.energy + 5); | |
| showMessage(`${state.name} loves your attention!`); | |
| updateDisplays(); | |
| }); | |
| // Play with the piglet | |
| playButton.addEventListener('click', () => { | |
| if (state.isSleeping) { | |
| showMessage(`${state.name} is sleeping!`); | |
| return; | |
| } | |
| if (state.energy < 20) { | |
| showMessage(`${state.name} is too tired to play!`); | |
| return; | |
| } | |
| state.energy = Math.max(0, state.energy - 15); | |
| state.happiness = Math.min(100, state.happiness + 20); | |
| state.hunger = Math.min(100, state.hunger + 10); | |
| // Random chance to get dirty when playing | |
| if (Math.random() > 0.6) { | |
| state.cleanliness = Math.max(0, state.cleanliness - 15); | |
| showMessage(`${state.name} got dirty while playing!`); | |
| } else { | |
| showMessage(`Wheee! ${state.name} had fun playing!`); | |
| } | |
| updateDisplays(); | |
| }); | |
| // Put piglet to sleep | |
| sleepButton.addEventListener('click', () => { | |
| if (state.isSleeping) { | |
| state.isSleeping = false; | |
| showMessage(`${state.name} woke up!`); | |
| } else { | |
| state.isSleeping = true; | |
| showMessage(`${state.name} is now sleeping...`); | |
| } | |
| updateDisplays(); | |
| }); | |
| // Wash the piglet | |
| washButton.addEventListener('click', () => { | |
| if (state.isSleeping) { | |
| showMessage(`${state.name} is sleeping!`); | |
| return; | |
| } | |
| state.cleanliness = 100; | |
| state.happiness = Math.max(0, state.happiness - 5); // Pigs don't always like baths | |
| showMessage(`${state.name} is now clean and fresh!`); | |
| updateDisplays(); | |
| }); | |
| // Game loop - passive changes over time | |
| setInterval(() => { | |
| if (!state.isSleeping) { | |
| // Normal state changes | |
| state.hunger = Math.min(100, state.hunger + 1); | |
| state.happiness = Math.max(0, state.happiness - 0.5); | |
| state.energy = Math.max(0, state.energy - 0.5); | |
| state.cleanliness = Math.max(0, state.cleanliness - 0.2); | |
| } else { | |
| // Sleeping state changes | |
| state.energy = Math.min(100, state.energy + 2); | |
| state.hunger = Math.min(100, state.hunger + 0.5); | |
| } | |
| // Age increases slowly | |
| if (Math.random() < 0.01) { | |
| state.age += 1; | |
| } | |
| updateDisplays(); | |
| }, 1000); | |
| // Initialize | |
| updateDisplays(); | |
| </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=porkz/cute-piglets-adventure" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |