| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BoomBuddy: The Skibidi Odyssey</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> |
| @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Permanent+Marker&display=swap'); |
| |
| :root { |
| --neon-pink: #ff6ec7; |
| --neon-blue: #00f7ff; |
| --neon-yellow: #fff01f; |
| --neon-green: #00ff7f; |
| --neon-purple: #c724ff; |
| } |
| |
| body { |
| font-family: 'Comic Neue', cursive; |
| background-color: #111; |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .title-font { |
| font-family: 'Permanent Marker', cursive; |
| } |
| |
| .neon-text-pink { |
| text-shadow: 0 0 5px var(--neon-pink), 0 0 15px var(--neon-pink); |
| color: var(--neon-pink); |
| } |
| |
| .neon-text-blue { |
| text-shadow: 0 0 5px var(--neon-blue), 0 0 15px var(--neon-blue); |
| color: var(--neon-blue); |
| } |
| |
| .neon-text-yellow { |
| text-shadow: 0 0 5px var(--neon-yellow), 0 0 15px var(--neon-yellow); |
| color: var(--neon-yellow); |
| } |
| |
| .neon-text-green { |
| text-shadow: 0 0 5px var(--neon-green), 0 0 15px var(--neon-green); |
| color: var(--neon-green); |
| } |
| |
| .neon-text-purple { |
| text-shadow: 0 0 5px var(--neon-purple), 0 0 15px var(--neon-purple); |
| color: var(--neon-purple); |
| } |
| |
| .neon-border-pink { |
| box-shadow: 0 0 5px var(--neon-pink), 0 0 15px var(--neon-pink), inset 0 0 5px var(--neon-pink); |
| border: 2px solid var(--neon-pink); |
| } |
| |
| .neon-border-blue { |
| box-shadow: 0 0 5px var(--neon-blue), 0 0 15px var(--neon-blue), inset 0 0 5px var(--neon-blue); |
| border: 2px solid var(--neon-blue); |
| } |
| |
| .neon-border-yellow { |
| box-shadow: 0 0 5px var(--neon-yellow), 0 0 15px var(--neon-yellow), inset 0 0 5px var(--neon-yellow); |
| border: 2px solid var(--neon-yellow); |
| } |
| |
| .neon-border-green { |
| box-shadow: 0 0 5px var(--neon-green), 0 0 15px var(--neon-green), inset 0 0 5px var(--neon-green); |
| border: 2px solid var(--neon-green); |
| } |
| |
| .neon-border-purple { |
| box-shadow: 0 0 5px var(--neon-purple), 0 0 15px var(--neon-purple), inset 0 0 5px var(--neon-purple); |
| border: 2px solid var(--neon-purple); |
| } |
| |
| .skibidi-spin { |
| animation: skibidi-spin 3s infinite linear; |
| } |
| |
| @keyframes skibidi-spin { |
| 0% { transform: rotate(0deg); } |
| 25% { transform: rotate(5deg); } |
| 50% { transform: rotate(0deg); } |
| 75% { transform: rotate(-5deg); } |
| 100% { transform: rotate(0deg); } |
| } |
| |
| .skibidi-bounce { |
| animation: skibidi-bounce 2s infinite; |
| } |
| |
| @keyframes skibidi-bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-20px); } |
| } |
| |
| .skibidi-pulse { |
| animation: skibidi-pulse 1.5s infinite; |
| } |
| |
| @keyframes skibidi-pulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| } |
| |
| .skibidi-flicker { |
| animation: skibidi-flicker 1.5s infinite alternate; |
| } |
| |
| @keyframes skibidi-flicker { |
| 0%, 18%, 22%, 25%, 53%, 57%, 100% { |
| opacity: 1; |
| } |
| 20%, 24%, 55% { |
| opacity: 0.3; |
| } |
| } |
| |
| .comic-box { |
| clip-path: polygon( |
| 0% 0%, |
| 100% 0%, |
| 100% 75%, |
| 75% 75%, |
| 75% 100%, |
| 50% 75%, |
| 0% 75% |
| ); |
| } |
| |
| .speech-bubble { |
| position: relative; |
| background: white; |
| border-radius: 1em; |
| color: black; |
| padding: 1rem; |
| } |
| |
| .speech-bubble:after { |
| content: ''; |
| position: absolute; |
| bottom: -10px; |
| left: 20px; |
| border-width: 15px 15px 0; |
| border-style: solid; |
| border-color: white transparent; |
| } |
| |
| .app-screen { |
| border-radius: 30px; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .app-notch { |
| position: absolute; |
| top: 0; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 40%; |
| height: 30px; |
| background: #111; |
| border-bottom-left-radius: 15px; |
| border-bottom-right-radius: 15px; |
| z-index: 10; |
| } |
| |
| .feature-icon { |
| width: 60px; |
| height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 20px; |
| font-size: 28px; |
| } |
| |
| .glow-hover:hover { |
| transform: scale(1.05); |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="relative overflow-hidden bg-black neon-border-purple"> |
| <div class="container mx-auto px-4 py-12 md:py-20"> |
| <div class="text-center"> |
| <div class="inline-block mb-6 neon-border-yellow rounded-full p-2 skibidi-bounce"> |
| <div class="rounded-full bg-black p-4 neon-border-pink"> |
| <span class="text-4xl">🚐</span> |
| </div> |
| </div> |
| <h1 class="text-5xl md:text-7xl font-bold title-font neon-text-pink mb-4"> |
| Boom<span class="neon-text-yellow">Buddy</span> |
| </h1> |
| <p class="text-xl md:text-2xl neon-text-blue mb-8"> |
| The <span class="neon-text-green">Skibidi Odyssey</span> of Piglet & Henley |
| </p> |
| <div class="max-w-3xl mx-auto"> |
| <div class="app-screen neon-border-blue mx-auto relative" style="max-width: 300px; height: 500px;"> |
| <div class="app-notch"></div> |
| <div class="absolute inset-0 bg-gradient-to-b from-purple-900 to-black flex items-center justify-center"> |
| <div class="text-center p-6"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-20 h-20 rounded-full neon-border-pink bg-black flex items-center justify-center overflow-hidden"> |
| <span class="text-4xl">🐷</span> |
| </div> |
| <div class="w-20 h-20 rounded-full neon-border-blue bg-black flex items-center justify-center overflow-hidden -ml-4"> |
| <span class="text-4xl">👦</span> |
| </div> |
| </div> |
| <h3 class="text-2xl font-bold neon-text-yellow mb-4">Boom Festival Mode</h3> |
| <p class="mb-6">Activating <span class="neon-text-green">Skibidi Chaos</span>...</p> |
| <button class="px-6 py-3 bg-pink-600 hover:bg-pink-700 rounded-full font-bold neon-border-pink skibidi-pulse"> |
| Let's Go! |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-black to-transparent z-10"></div> |
| </header> |
|
|
| |
| <section class="py-16 bg-black"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text-yellow title-font"> |
| <span class="neon-text-pink">Skibidi-Powered</span> Features |
| </h2> |
| |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-blue hover:neon-border-pink transition glow-hover"> |
| <div class="feature-icon neon-border-blue mb-4"> |
| <span class="neon-text-blue">🗺️</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 neon-text-blue">Live Skibidi Map</h3> |
| <p class="text-gray-300"> |
| GPS with chaotic voice nav ("Oi Piglet, turn left or I'm telling Nan!") |
| </p> |
| <div class="mt-4 text-sm neon-text-yellow"> |
| <span class="inline-block px-2 py-1 rounded-full bg-gray-800">Drop Skibidi Bombs</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-pink hover:neon-border-yellow transition glow-hover"> |
| <div class="feature-icon neon-border-pink mb-4"> |
| <span class="neon-text-pink">🎭</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 neon-text-pink">AI Story Mode</h3> |
| <p class="text-gray-300"> |
| Turns your nonsense into Shakespearean sonnets or comic strips |
| </p> |
| <div class="mt-4 text-sm neon-text-blue"> |
| <span class="inline-block px-2 py-1 rounded-full bg-gray-800">"Henley farted on a cow" → Art</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-yellow hover:neon-border-green transition glow-hover"> |
| <div class="feature-icon neon-border-yellow mb-4"> |
| <span class="neon-text-yellow">💨</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 neon-text-yellow">Perfume Spray Meter</h3> |
| <p class="text-gray-300"> |
| Track sneaky Jean Paul Gaultier attacks with motion sensors |
| </p> |
| <div class="mt-4 text-sm neon-text-pink"> |
| <span class="inline-block px-2 py-1 rounded-full bg-gray-800">Unlock "Nasal Assassin" badge</span> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-green hover:neon-border-blue transition glow-hover"> |
| <div class="feature-icon neon-border-green mb-4"> |
| <span class="neon-text-green">🎥</span> |
| </div> |
| <h3 class="text-xl font-bold mb-3 neon-text-green">Chaos Cam</h3> |
| <p class="text-gray-300"> |
| Trippy filters for Insta360 with "HenleyVision" fisheye madness |
| </p> |
| <div class="mt-4 text-sm neon-text-yellow"> |
| <span class="inline-block px-2 py-1 rounded-full bg-gray-800">Meme overlays included</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gradient-to-b from-black to-purple-900"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 neon-text-green title-font"> |
| <span class="neon-text-yellow">Skibidi</span> In Action |
| </h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="text-center"> |
| <div class="app-screen neon-border-pink mx-auto mb-6 relative" style="height: 400px;"> |
| <div class="app-notch"></div> |
| <div class="absolute inset-0 bg-gradient-to-b from-pink-900 to-black p-4"> |
| <div class="h-full flex flex-col"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-sm neon-text-yellow">📍 12km to Boom</span> |
| <span class="text-sm neon-text-blue">🐷👦</span> |
| </div> |
| <div class="flex-1 bg-gray-800 rounded-xl neon-border-blue p-4 mb-4"> |
| <div class="h-full bg-gray-900 rounded-lg flex items-center justify-center"> |
| <span class="text-4xl">🗺️</span> |
| </div> |
| </div> |
| <div class="bg-gray-800 rounded-full p-3 neon-border-yellow"> |
| <p class="text-sm neon-text-pink">"Turn right ya melt or we'll miss the Skibidi toilets!"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold neon-text-blue">Live Skibidi Map</h3> |
| <p class="text-gray-300">Chaotic navigation with custom avatars</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="app-screen neon-border-yellow mx-auto mb-6 relative" style="height: 400px;"> |
| <div class="app-notch"></div> |
| <div class="absolute inset-0 bg-gradient-to-b from-yellow-900 to-black p-4"> |
| <div class="h-full flex flex-col"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-sm neon-text-pink">Spray Attack!</span> |
| <span class="text-sm neon-text-green">3/5 Today</span> |
| </div> |
| <div class="flex-1 bg-gray-800 rounded-xl neon-border-pink p-4 mb-4 flex flex-col items-center justify-center"> |
| <div class="w-24 h-24 rounded-full neon-border-green flex items-center justify-center mb-4"> |
| <span class="text-4xl">💨</span> |
| </div> |
| <p class="text-sm neon-text-yellow mb-4">"Piglet didn't see that coming!"</p> |
| <div class="w-full bg-gray-900 rounded-full h-2 mb-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| <p class="text-xs neon-text-blue">Next level: Nasal Ninja</p> |
| </div> |
| <button class="bg-pink-600 hover:bg-pink-700 rounded-full py-2 px-4 text-sm neon-border-pink"> |
| SPRAY NOW |
| </button> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold neon-text-pink">Perfume Spray Meter</h3> |
| <p class="text-gray-300">Track your sneaky fragrance attacks</p> |
| </div> |
| |
| |
| <div class="text-center"> |
| <div class="app-screen neon-border-green mx-auto mb-6 relative" style="height: 400px;"> |
| <div class="app-notch"></div> |
| <div class="absolute inset-0 bg-gradient-to-b from-green-900 to-black p-4"> |
| <div class="h-full flex flex-col"> |
| <div class="flex justify-between items-center mb-4"> |
| <span class="text-sm neon-text-yellow">AI Story Generator</span> |
| <span class="text-sm neon-text-pink">#BoomChronicles</span> |
| </div> |
| <div class="flex-1 bg-gray-800 rounded-xl neon-border-yellow p-4 mb-4 overflow-hidden"> |
| <div class="h-full bg-gray-900 rounded-lg flex flex-col"> |
| <div class="p-2 border-b border-gray-700 neon-text-blue text-xs"> |
| "Henley tried to eat a bug →" |
| </div> |
| <div class="flex-1 p-4 flex items-center justify-center"> |
| <div class="text-center"> |
| <span class="text-4xl mb-2">🦗</span> |
| <p class="text-xs neon-text-pink">"The Ballad of Henley and the Brave Cricket"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="flex space-x-2"> |
| <button class="flex-1 bg-blue-600 hover:bg-blue-700 rounded-full py-2 text-xs neon-border-blue"> |
| POEM |
| </button> |
| <button class="flex-1 bg-purple-600 hover:bg-purple-700 rounded-full py-2 text-xs neon-border-purple"> |
| COMIC |
| </button> |
| <button class="flex-1 bg-pink-600 hover:bg-pink-700 rounded-full py-2 text-xs neon-border-pink"> |
| MEME |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold neon-text-yellow">AI Story Mode</h3> |
| <p class="text-gray-300">Turn chaos into art automatically</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-black neon-border-purple"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-6 neon-text-yellow title-font"> |
| Ready for <span class="neon-text-pink">Skibidi</span> Mode? |
| </h2> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto neon-text-blue"> |
| The ultimate festival companion for Piglet & Henley's wildest adventure yet! |
| </p> |
| |
| <div class="flex flex-wrap justify-center gap-6 mb-12"> |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-blue max-w-xs"> |
| <h3 class="text-xl font-bold mb-3 neon-text-pink">Festival Survival Kit</h3> |
| <ul class="text-left space-y-2 text-sm"> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-blue-600 mr-2 flex items-center justify-center">1</span> Toilet Zone Radar</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-pink-600 mr-2 flex items-center justify-center">2</span> Nan Emergency Button</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-yellow-600 mr-2 flex items-center justify-center">3</span> Boring Convo Escape</li> |
| </ul> |
| </div> |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-pink max-w-xs"> |
| <h3 class="text-xl font-bold mb-3 neon-text-yellow">Secret Messaging</h3> |
| <ul class="text-left space-y-2 text-sm"> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-green-600 mr-2 flex items-center justify-center">1</span> Private Meme Exchange</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-purple-600 mr-2 flex items-center justify-center">2</span> Roast Roulette</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-yellow-600 mr-2 flex items-center justify-center">3</span> Auto Podcast Maker</li> |
| </ul> |
| </div> |
| |
| <div class="bg-gray-900 p-6 rounded-2xl neon-border-yellow max-w-xs"> |
| <h3 class="text-xl font-bold mb-3 neon-text-green">Post-Boom Memories</h3> |
| <ul class="text-left space-y-2 text-sm"> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-pink-600 mr-2 flex items-center justify-center">1</span> The Skibidi Scrolls</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-blue-600 mr-2 flex items-center justify-center">2</span> Chaos Timeline</li> |
| <li class="flex items-center"><span class="inline-block w-6 h-6 rounded-full bg-green-600 mr-2 flex items-center justify-center">3</span> "Best Dance Fail" Awards</li> |
| </ul> |
| </div> |
| </div> |
| |
| <button class="px-8 py-4 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-700 hover:to-purple-700 rounded-full font-bold text-xl neon-border-yellow skibidi-pulse"> |
| Download BoomBuddy |
| </button> |
| |
| <p class="mt-6 text-sm neon-text-blue"> |
| * Private app - not available to normies * |
| </p> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-black neon-border-green py-8"> |
| <div class="container mx-auto px-4 text-center"> |
| <div class="flex justify-center space-x-6 mb-6"> |
| <a href="#" class="text-2xl neon-text-pink hover:neon-text-yellow"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="text-2xl neon-text-blue hover:neon-text-pink"><i class="fab fa-tiktok"></i></a> |
| <a href="#" class="text-2xl neon-text-yellow hover:neon-text-green"><i class="fab fa-youtube"></i></a> |
| </div> |
| <p class="neon-text-purple mb-2"> |
| Made with 💨 (Jean Paul Gaultier) for Piglet & Henley |
| </p> |
| <p class="text-sm text-gray-500"> |
| © 2023 Skibidi Technologies Ltd. (Not a real company, just like Henley's haircut) |
| </p> |
| </div> |
| </footer> |
|
|
| |
| <div class="fixed bottom-6 right-6 text-5xl neon-text-yellow skibidi-spin"> |
| <span class="inline-block">🤪</span> |
| </div> |
| |
| <div class="fixed top-1/4 left-6 text-3xl neon-text-pink skibidi-bounce"> |
| <span class="inline-block">🐷</span> |
| </div> |
| |
| <div class="fixed bottom-1/3 left-10 text-2xl neon-text-blue skibidi-flicker"> |
| <span class="inline-block">👦</span> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const features = document.querySelectorAll('.glow-hover'); |
| |
| features.forEach(feature => { |
| feature.addEventListener('mouseenter', function() { |
| this.style.boxShadow = `0 0 15px ${this.classList.contains('neon-border-blue') ? 'var(--neon-blue)' : |
| this.classList.contains('neon-border-pink') ? 'var(--neon-pink)' : |
| this.classList.contains('neon-border-yellow') ? 'var(--neon-yellow)' : 'var(--neon-green)'}`; |
| }); |
| |
| feature.addEventListener('mouseleave', function() { |
| this.style.boxShadow = ''; |
| }); |
| }); |
| |
| |
| const downloadBtn = document.querySelector('button'); |
| downloadBtn.addEventListener('click', function() { |
| this.classList.add('animate__animated', 'animate__rubberBand'); |
| setTimeout(() => { |
| this.classList.remove('animate__animated', 'animate__rubberBand'); |
| }, 1000); |
| |
| |
| alert("BoomBuddy is downloading to your Skibidi device!\n(Just kidding, this is a concept app for Piglet & Henley)"); |
| }); |
| }); |
| </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=thetwistedpixie/boom-buddy-skibidi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
