groovetoon-interactive / monkeys.html
Sam5920's picture
a picture of two monkeys
329eb21 verified
<!DOCTYPE html>
<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>