|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="h-full"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Netflixy Digits - Top 10 Counters</title> |
|
|
<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> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
netflix: { |
|
|
'50': '#fff1f1', |
|
|
'100': '#ffdfdf', |
|
|
'200': '#ffc5c5', |
|
|
'300': '#ff9d9d', |
|
|
'400': '#ff6464', |
|
|
'500': '#ff2e2e', |
|
|
'600': '#ed1515', |
|
|
'700': '#c80d0d', |
|
|
'800': '#a50f0f', |
|
|
'900': '#881414', |
|
|
'950': '#4b0404', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'glow': 'glow 2s ease-in-out infinite alternate', |
|
|
'pop-in': 'popIn 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6) forwards', |
|
|
'zoom-in': 'zoomIn 1.5s ease-out forwards', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-black h-full overflow-hidden flex items-center justify-center"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-16 text-center"> |
|
|
<div class="inline-flex gap-4"> |
|
|
<button id="zoom-btn" class="bg-netflix-700 hover:bg-netflix-600 text-white px-4 py-2 rounded-lg transition-all"> |
|
|
Zoom Animation |
|
|
</button> |
|
|
<button id="pop-btn" class="bg-netflix-700 hover:bg-netflix-600 text-white px-4 py-2 rounded-lg transition-all"> |
|
|
Pop Animation |
|
|
</button> |
|
|
<button id="glow-btn" class="bg-netflix-700 hover:bg-netflix-600 text-white px-4 py-2 rounded-lg transition-all"> |
|
|
Glow Animation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
