Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GrooveToon - Interactive Dancing Character</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 Stage --> | |
| <main class="flex-1 flex flex-col items-center justify-center px-4 py-8"> | |
| <!-- Dance Floor --> | |
| <div class="relative w-full max-w-4xl"> | |
| <!-- Stage Lights --> | |
| <div class="absolute -top-20 left-1/4 w-32 h-32 bg-primary-500/20 rounded-full blur-3xl animate-pulse-slow"></div> | |
| <div class="absolute -top-20 right-1/4 w-32 h-32 bg-secondary-500/20 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div> | |
| <!-- Spotlight --> | |
| <div class="absolute top-0 left-1/2 -translate-x-1/2 w-96 h-[600px] bg-gradient-to-b from-primary-500/10 to-transparent pointer-events-none"></div> | |
| <!-- Character Container --> | |
| <div class="relative flex justify-center items-end min-h-[500px] pb-8"> | |
| <groove-character id="dancer"></groove-character> | |
| </div> | |
| <!-- Floor Reflection --> | |
| <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[80%] h-24 bg-gradient-to-t from-primary-500/10 to-transparent rounded-full blur-xl"></div> | |
| </div> | |
| <!-- Controls --> | |
| <groove-controls></groove-controls> | |
| </main> | |
| <!-- Footer --> | |
| <groove-footer></groove-footer> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="components/groove-header.js"></script> | |
| <script src="components/groove-character.js"></script> | |
| <script src="components/groove-controls.js"></script> | |
| <script src="components/groove-footer.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |