You need to write the HTML code in one file! In general, it will be a program in the most modern style with very cool animations! I want to make a New Year's gift for my mother, whose name is Ekaterina Yurievna! First, when you run this code, there should be an inscription at the top saying "Year in Review 2025" and a huge button with a fingerprint image below, with the text "Place your finger for scanning." The user should hold their finger on the fingerprint button for 3 seconds, and then a beautiful animation will appear, followed by a slide with the text "Ekaterina Yurievna, we have recognized you! Let's see your year in review!" ВСЕ ДОЛЖНО БЫТЬ НА РУССКОМ!!!!
f4c30a2 verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Годовой Отчёт 2025</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> | |
| <style> | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| @keyframes confetti { | |
| 0% { transform: translateY(0) rotate(0); opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } | |
| } | |
| .fingerprint-btn { | |
| transition: all 0.3s ease; | |
| } | |
| .fingerprint-btn:active { | |
| transform: scale(0.95); | |
| } | |
| .scanning { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| opacity: 0; | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s forwards; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(50px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 to-blue-800 min-h-screen flex flex-col items-center justify-center text-white p-4 font-sans overflow-hidden"> | |
| <div id="app" class="w-full max-w-2xl text-center"> | |
| <!-- Initial Screen --> | |
| <div id="initial-screen"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-8 animate-bounce">Годовой Обзор 2025</h1> | |
| <div class="relative"> | |
| <button id="fingerprint-btn" class="fingerprint-btn bg-white bg-opacity-20 rounded-full p-8 mb-6 border-4 border-white border-opacity-30 hover:bg-opacity-30 transition-all duration-300"> | |
| <div class="w-32 h-32 md:w-40 md:h-40 bg-white bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i data-feather="fingerprint" class="w-20 h-20 md:w-24 md:h-24"></i> | |
| </div> | |
| </button> | |
| <p class="text-xl md:text-2xl font-medium">Приложите палец для сканирования</p> | |
| </div> | |
| </div> | |
| <!-- Recognition Screen (hidden initially) --> | |
| <div id="recognition-screen" class="hidden"> | |
| <div class="relative"> | |
| <div id="confetti-container" class="absolute inset-0 overflow-hidden pointer-events-none"></div> | |
| <div class="bg-white bg-opacity-20 backdrop-blur-lg rounded-3xl p-8 md:p-12 slide-in"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Екатерина Юрьевна, мы вас узнали!</h2> | |
| <p class="text-xl md:text-2xl mb-8">Давайте посмотрим ваш годовой отчёт!</p> | |
| <button id="continue-btn" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105"> | |
| Продолжить | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| const fingerprintBtn = document.getElementById('fingerprint-btn'); | |
| const initialScreen = document.getElementById('initial-screen'); | |
| const recognitionScreen = document.getElementById('recognition-screen'); | |
| const confettiContainer = document.getElementById('confetti-container'); | |
| let pressTimer; | |
| let isScanning = false; | |
| // Finger press simulation | |
| fingerprintBtn.addEventListener('mousedown', startScanning); | |
| fingerprintBtn.addEventListener('touchstart', startScanning); | |
| fingerprintBtn.addEventListener('mouseup', cancelScanning); | |
| fingerprintBtn.addEventListener('mouseleave', cancelScanning); | |
| fingerprintBtn.addEventListener('touchend', cancelScanning); | |
| function startScanning(e) { | |
| e.preventDefault(); | |
| isScanning = true; | |
| fingerprintBtn.classList.add('scanning'); | |
| pressTimer = setTimeout(() => { | |
| completeScanning(); | |
| }, 3000); | |
| } | |
| function cancelScanning() { | |
| if (isScanning) { | |
| clearTimeout(pressTimer); | |
| fingerprintBtn.classList.remove('scanning'); | |
| isScanning = false; | |
| } | |
| } | |
| function completeScanning() { | |
| fingerprintBtn.classList.remove('scanning'); | |
| isScanning = false; | |
| // Hide initial screen | |
| initialScreen.classList.add('hidden'); | |
| // Show recognition screen | |
| recognitionScreen.classList.remove('hidden'); | |
| // Create confetti | |
| createConfetti(); | |
| } | |
| function createConfetti() { | |
| const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; | |
| for (let i = 0; i < 100; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.classList.add('confetti'); | |
| confetti.style.left = Math.random() * 100 + '%'; | |
| confetti.style.top = -10 + 'px'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.width = Math.random() * 10 + 5 + 'px'; | |
| confetti.style.height = Math.random() * 10 + 5 + 'px'; | |
| confetti.style.animation = `confetti ${Math.random() * 3 + 2}s linear forwards`; | |
| confetti.style.animationDelay = Math.random() * 0.5 + 's'; | |
| confettiContainer.appendChild(confetti); | |
| } | |
| } | |
| // Continue button functionality | |
| document.getElementById('continue-btn').addEventListener('click', function() { | |
| alert('Здесь будет продолжаться ваш специальный подарок для мамы!'); | |
| }); | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |