Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ass Muncher 🍑</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍑</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .ass-animation { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(255, 105, 180, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-indigo-800 to-pink-700 min-h-screen"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg" class="absolute inset-0 z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl md:text-7xl font-bold text-white glow ass-animation">🍑 Ass Muncher 🍑</h1> | |
| <p class="mt-4 text-xl text-pink-200">The ultimate digital ass-consuming experience</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 backdrop-blur-lg rounded-3xl p-8 max-w-2xl w-full shadow-2xl border border-pink-500 border-opacity-30"> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative mb-8"> | |
| <div class="w-48 h-48 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl"> | |
| <i data-feather="user" class="text-white w-24 h-24"></i> | |
| </div> | |
| <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 bg-pink-600 text-white px-4 py-1 rounded-full text-sm font-bold"> | |
| YOUR ASS | |
| </div> | |
| </div> | |
| <div class="w-full mb-8"> | |
| <div class="bg-gray-800 rounded-full h-6 mb-2 overflow-hidden"> | |
| <div id="consumption-bar" class="bg-gradient-to-r from-pink-500 to-purple-600 h-full rounded-full w-0 transition-all duration-1000"></div> | |
| </div> | |
| <div class="flex justify-between text-pink-200"> | |
| <span>Freshness</span> | |
| <span id="percentage">0%</span> | |
| </div> | |
| </div> | |
| <button id="munch-btn" class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white font-bold py-4 px-8 rounded-full text-xl shadow-lg transform transition duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-500 focus:ring-opacity-50"> | |
| <i data-feather="zap" class="mr-2"></i>MUNCH MY ASS | |
| </button> | |
| <div id="status-message" class="mt-6 text-center text-pink-200 min-h-[60px]"> | |
| <p>Ready to consume your digital posterior...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl w-full"> | |
| <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20"> | |
| <div class="text-pink-400 mb-3"> | |
| <i data-feather="shield" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-white text-xl font-semibold mb-2">Safe & Secure</h3> | |
| <p class="text-pink-200">Military-grade encryption ensures your ass remains protected during consumption.</p> | |
| </div> | |
| <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20"> | |
| <div class="text-pink-400 mb-3"> | |
| <i data-feather="zap" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-white text-xl font-semibold mb-2">Lightning Fast</h3> | |
| <p class="text-pink-200">Industry-leading algorithms munch your ass in milliseconds.</p> | |
| </div> | |
| <div class="bg-black bg-opacity-20 backdrop-blur-sm p-6 rounded-2xl border border-pink-500 border-opacity-20"> | |
| <div class="text-pink-400 mb-3"> | |
| <i data-feather="smile" class="w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-white text-xl font-semibold mb-2">Satisfaction Guaranteed</h3> | |
| <p class="text-pink-200">99.9% of users report increased satisfaction after ass consumption.</p> | |
| </div> | |
| </div> | |
| <footer class="mt-16 text-center text-pink-300"> | |
| <p>© 2023 Ass Muncher Inc. | All rights reserved | No butts were harmed in the making of this app</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xff69b4, | |
| color2: 0x9370db, | |
| backgroundColor: 0x000000 | |
| }); | |
| // Munch functionality | |
| const munchBtn = document.getElementById('munch-btn'); | |
| const consumptionBar = document.getElementById('consumption-bar'); | |
| const percentage = document.getElementById('percentage'); | |
| const statusMessage = document.getElementById('status-message'); | |
| let munchLevel = 0; | |
| munchBtn.addEventListener('click', () => { | |
| if (munchLevel >= 100) { | |
| munchLevel = 0; | |
| statusMessage.innerHTML = "<p class='text-yellow-300'>Ready for another round? Your ass has regenerated!</p>"; | |
| } | |
| munchLevel += 20; | |
| if (munchLevel > 100) munchLevel = 100; | |
| consumptionBar.style.width = `${munchLevel}%`; | |
| percentage.textContent = `${munchLevel}%`; | |
| // Update status messages | |
| if (munchLevel === 20) { | |
| statusMessage.innerHTML = "<p class='text-green-300'>Munching initiated... Your ass is delicious!</p>"; | |
| } else if (munchLevel === 40) { | |
| statusMessage.innerHTML = "<p class='text-blue-300'>Halfway there! This ass is exquisite!</p>"; | |
| } else if (munchLevel === 60) { | |
| statusMessage.innerHTML = "<p class='text-purple-300'>Getting closer... Mmm, so juicy!</p>"; | |
| } else if (munchLevel === 80) { | |
| statusMessage.innerHTML = "<p class='text-pink-300'>Almost complete! One final bite!</p>"; | |
| } else if (munchLevel === 100) { | |
| statusMessage.innerHTML = "<p class='text-red-300 font-bold'>ASS COMPLETELY MUNCHED! Click again to regenerate.</p>"; | |
| munchBtn.innerHTML = '<i data-feather="rotate-cw" class="mr-2"></i>REGENERATE ASS'; | |
| feather.replace(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |