Файловый менеджер - Редактировать - /home/gqdcvggs/imators.com/2025/index.html
Назад
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bonne Année 2025! - Imators</title> <script src="https://cdn.tailwindcss.com"></script> <style> .gradient-text { background: linear-gradient(135deg, #FFD700 0%, #FF6B6B 50%, #4158D0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .card-gradient { background: linear-gradient(135deg, rgba(29, 29, 29, 0.8) 0%, rgba(23, 23, 23, 0.9) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } .animate-fade-in { animation: fadeInUp 0.6s ease-out forwards; } .animate-fade-out { animation: fadeOutDown 0.6s ease-out forwards; } .bg-pattern { background-color: #000000; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 25px 25px; } .button-gradient { background: linear-gradient(135deg, #4158D0 0%, #C850C0 50%, #FFCC70 100%); transition: all 0.3s ease; } .button-gradient:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(65, 88, 208, 0.3); } .input-focus { transition: all 0.3s ease; } .input-focus:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); } </style> </head> <body class="bg-pattern min-h-screen flex flex-col items-center justify-center p-4"> <!-- Logo --> <div class="absolute top-6 left-6 z-50"> <img src="https://cdn.imators.com/logo.png" alt="Imators Logo" class="h-16 object-contain"> </div> <!-- Conteneur principal --> <div class="w-full max-w-xl mx-auto"> <!-- Message initial --> <div id="welcomeScreen" class="text-center animate-fade-in"> <h1 class="text-7xl font-bold gradient-text mb-6"> 2025 </h1> <p class="text-4xl text-white font-light mb-4"> Une nouvelle année commence </p> <p class="text-xl text-gray-400"> De la part de toute l'équipe Imators </p> </div> <!-- Zone de saisie --> <div id="inputScreen" class="hidden"> <div class="card-gradient rounded-2xl p-8 shadow-xl"> <h2 class="text-2xl text-white font-light text-center mb-8"> Découvre ton message personnalisé </h2> <p class="mt-2 text-xs text-yellow-400">Attention ! Merci de ne pas inclure d'emoji, et de mettre votre prénom entier avec une majuscule. Il se peut que le message par défaut vous soit affiché, mais il vient du cœur.</p> <input type="text" id="nameInput" class="w-full bg-black/50 text-white text-xl p-4 rounded-xl border border-gray-800 input-focus outline-none text-center mb-6" placeholder="Entre ton prénom..." autocomplete="off" > <button onclick="handleSubmit()" class="w-full button-gradient text-white font-medium py-4 px-6 rounded-xl text-lg" > Voir mon message </button> </div> </div> <!-- Message personnalisé --> <div id="messageScreen" class="hidden"> <div class="card-gradient rounded-2xl p-8 shadow-xl"> <p id="personalMessage" class="text-2xl text-white text-center mb-8"></p> <button onclick="closeMessage()" class="w-full button-gradient text-white font-medium py-3 px-6 rounded-xl" > Terminer </button> </div> </div> <!-- Message final --> <div id="thankYouScreen" class="hidden text-center"> <p class="text-3xl text-white font-light mb-4">Au revoir!</p> <p class="text-xl text-gray-400">À bientôt sur Imators</p> </div> </div> <script> let messages = null; async function loadMessages() { try { const response = await fetch('name.json'); messages = await response.json(); console.log('Messages chargés avec succès'); } catch (error) { console.error('Erreur de chargement:', error); messages = { nom_messages: [{ nom: "default", message: "Meilleurs vœux pour 2025! 🎉" }] }; } } function showScreen(hideId, showId) { const hideElement = document.getElementById(hideId); const showElement = document.getElementById(showId); hideElement.classList.add('animate-fade-out'); setTimeout(() => { hideElement.classList.add('hidden'); showElement.classList.remove('hidden'); showElement.classList.add('animate-fade-in'); }, 600); } function handleSubmit() { const nameInput = document.getElementById('nameInput'); const name = nameInput.value.trim(); if (!name) return; const messageObj = messages.nom_messages.find( m => m.nom.toLowerCase() === name.toLowerCase() ) || messages.nom_messages.find(m => m.nom === "default"); document.getElementById('personalMessage').textContent = messageObj.message; showScreen('inputScreen', 'messageScreen'); } function closeMessage() { showScreen('messageScreen', 'thankYouScreen'); setTimeout(() => window.close(), 3000); } window.onload = async () => { await loadMessages(); setTimeout(() => { showScreen('welcomeScreen', 'inputScreen'); }, 3000); document.getElementById('nameInput').addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSubmit(); }); }; </script> </body> </html>
| ver. 1.6 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0 |
proxy
|
phpinfo
|
Настройка