| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HF 3 Million Models Celebration!</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet"> |
| <style> |
| body { font-family: 'Inter', sans-serif; } |
| .gradient-bg { |
| background: linear-gradient(135deg, #ffda79 0%, #ff9a9e 100%); |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| } |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-slate-100 min-h-screen flex items-center justify-center p-4 overflow-hidden"> |
|
|
| |
| <div class="relative bg-white rounded-3xl shadow-2xl p-8 md:p-12 max-w-md w-full text-center transform transition-all hover:scale-105 duration-300 border-4 border-yellow-400"> |
| |
| |
| <div class="text-6xl mb-6 animate-float"> |
| 🤗 |
| </div> |
|
|
| <h1 class="text-slate-800 text-2xl md:text-3xl font-bold mb-2"> |
| A Massive Milestone! |
| </h1> |
| |
| <p class="text-slate-500 mb-8"> |
| The community has grown beyond imagination. |
| </p> |
|
|
| |
| <div class="bg-slate-900 text-white rounded-2xl py-6 px-4 mb-8 shadow-inner relative overflow-hidden"> |
| <div class="relative z-10"> |
| <span id="counter" class="text-5xl md:text-6xl font-black tracking-tighter">0</span> |
| <span class="text-3xl font-bold ml-2 text-yellow-400">+</span> |
| <div class="text-sm font-medium uppercase tracking-widest text-slate-400 mt-2">Models on the Hub</div> |
| </div> |
| |
| <div class="absolute -right-4 -bottom-4 w-24 h-24 bg-yellow-500 rounded-full opacity-20 blur-2xl"></div> |
| </div> |
|
|
| <button id="celebrateBtn" class="bg-yellow-400 hover:bg-yellow-500 text-slate-900 font-bold py-3 px-8 rounded-full transition-colors shadow-lg active:scale-95"> |
| Celebrate Again! 🎉 |
| </button> |
| |
| <div class="mt-6 text-xs text-slate-400 font-medium"> |
| Powered by the Open ML Community |
| </div> |
| </div> |
|
|
| <script> |
| const counterElement = document.getElementById('counter'); |
| const celebrateBtn = document.getElementById('celebrateBtn'); |
| const targetNumber = 3000000; |
| let currentNumber = 0; |
| let animationFinished = false; |
| |
| function animateCounter() { |
| const duration = 2000; |
| const startTime = performance.now(); |
| |
| function update(currentTime) { |
| const elapsed = currentTime - startTime; |
| const progress = Math.min(elapsed / duration, 1); |
| |
| |
| const easeOutExpo = 1 - Math.pow(2, -10 * progress); |
| |
| currentNumber = Math.floor(easeOutExpo * targetNumber); |
| |
| |
| counterElement.innerText = currentNumber.toLocaleString(); |
| |
| if (progress < 1) { |
| requestAnimationFrame(update); |
| } else { |
| animationFinished = true; |
| triggerConfetti(); |
| } |
| } |
| requestAnimationFrame(update); |
| } |
| |
| function triggerConfetti() { |
| const scalar = 2; |
| const triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' }); |
| |
| confetti({ |
| particleCount: 150, |
| spread: 70, |
| origin: { y: 0.6 }, |
| colors: ['#FFD700', '#FF69B4', '#00BFFF', '#32CD32'], |
| shapes: [triangle, 'circle'], |
| scalar |
| }); |
| } |
| |
| |
| window.onload = () => { |
| animateCounter(); |
| }; |
| |
| |
| celebrateBtn.onclick = () => { |
| if(!animationFinished) return; |
| triggerConfetti(); |
| |
| |
| document.querySelector('.relative.bg-white').classList.add('scale-110'); |
| setTimeout(() => { |
| document.querySelector('.relative.bg-white').classList.remove('scale-110'); |
| }, 100); |
| }; |
| </script> |
| </body> |
| </html> |
