Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GrooveToon - Monkey Business</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#fff1f2', | |
| 100: '#ffe4e6', | |
| 200: '#fecdd3', | |
| 300: '#fda4af', | |
| 400: '#fb7185', | |
| 500: '#f43f5e', | |
| 600: '#e11d48', | |
| 700: '#be123c', | |
| 800: '#9f1239', | |
| 900: '#881337', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| }, | |
| animation: { | |
| 'bounce-slow': 'bounce 2s infinite', | |
| 'pulse-slow': 'pulse 3s infinite', | |
| 'spin-slow': 'spin 8s linear infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-neutral-950 text-white min-h-screen overflow-x-hidden"> | |
| <!-- WebGL Background Canvas --> | |
| <canvas id="bgCanvas" class="fixed inset-0 w-full h-full pointer-events-none"></canvas> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <groove-header></groove-header> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col items-center justify-center px-4 py-8"> | |
| <div class="max-w-4xl w-full glass rounded-3xl p-8 text-center"> | |
| <h1 class="text-4xl font-display mb-6 text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500"> | |
| Monkey Business | |
| </h1> | |
| <div class="relative overflow-hidden rounded-2xl mb-8"> | |
| <img src="http://static.photos/nature/1024x576/42" | |
| alt="Two monkeys playing" | |
| class="w-full h-auto object-cover transition-transform duration-500 hover:scale-105"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div> | |
| </div> | |
| <p class="text-lg mb-6"> | |
| These two monkeys are getting their groove on! Just like our dancing character, they love to move to the beat. | |
| </p> | |
| <a href="index.html" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-full font-bold hover:scale-105 transition-transform"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> | |
| Back to Dancing | |
| </a> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <groove-footer></groove-footer> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="components/groove-header.js"></script> | |
| <script src="components/groove-footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> |