| | ```php |
| | <!DOCTYPE html> |
| | <html lang="fr" data-theme="dark"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Grand Fantasia - Serveur Privé Élite</title> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> |
| | <style> |
| | :root { |
| | --primary-purple: |
| | --primary-dark: |
| | --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | --neon-glow: 0 0 10px rgba(138, 43, 226, 0.7), 0 0 20px rgba(138, 43, 226, 0.5); |
| | } |
| | |
| | body { |
| | font-family: 'Inter', sans-serif; |
| | background: var(--primary-dark); |
| | min-height: 100vh; |
| | margin: 0; |
| | padding: 0; |
| | color: |
| | overflow-x: hidden; |
| | } |
| | |
| | .raiden-theme { |
| | background: rgba(15, 15, 35, 0.95); |
| | border: 1px solid rgba(138, 43, 226, 0.3); |
| | backdrop-filter: blur(20px); |
| | border-radius: 20px; |
| | box-shadow: var(--neon-glow); |
| | } |
| | |
| | .raiden-btn { |
| | background: var(--primary-gradient); |
| | border: none; |
| | border-radius: 12px; |
| | padding: 16px 32px; |
| | font-weight: 600; |
| | transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| | position: relative; |
| | overflow: hidden; |
| | } |
| | |
| | .raiden-btn::before { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: -100%; |
| | width: 100%; |
| | height: 100%; |
| | background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
| | transition: left 0.5s; |
| | } |
| | |
| | .raiden-btn:hover::before { |
| | left: 100%; |
| | } |
| | |
| | .raiden-btn:hover { |
| | transform: translateY(-3px) scale(1.02); |
| | box-shadow: 0 10px 30px rgba(138, 43, 226, 0.6); |
| | } |
| | |
| | .server-status { |
| | position: fixed; |
| | top: 20px; |
| | left: 20px; |
| | width: 16px; |
| | height: 16px; |
| | border-radius: 50%; |
| | z-index: 1000; |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | .online { |
| | background: |
| | box-shadow: 0 0 20px rgba(0, 255, 136, 0.8); |
| | } |
| | |
| | .offline { |
| | background: |
| | box-shadow: 0 0 20px rgba(255, 71, 87, 0.8); |
| | } |
| | |
| | @keyframes pulse { |
| | 0% { transform: scale(1); } |
| | 50% { transform: scale(1.2); } |
| | 100% { transform: scale(1); } |
| | } |
| | |
| | .floating-element { |
| | animation: float 6s ease-in-out infinite; |
| | } |
| | |
| | @keyframes float { |
| | 0%, 100% { transform: translateY(0px) rotate(0deg); } |
| | 50% { transform: translateY(-20px) rotate(5deg); } |
| | } |
| | |
| | .glow-text { |
| | text-shadow: 0 0 10px rgba(138, 43, 226, 0.8), 0 0 20px rgba(138, 43, 226, 0.6); |
| | } |
| | |
| | .parallax-bg { |
| | background-attachment: fixed; |
| | background-position: center; |
| | background-repeat: no-repeat; |
| | background-size: cover; |
| | } |
| | |
| | .card-hover { |
| | transition: all 0.3s ease; |
| | border: 1px solid rgba(138, 43, 226, 0.2); |
| | } |
| | |
| | .card-hover:hover { |
| | transform: translateY(-8px); |
| | box-shadow: 0 25px 50px rgba(138, 43, 226, 0.3); |
| | border-color: rgba(138, 43, 226, 0.5); |
| | } |
| | |
| | .typewriter { |
| | overflow: hidden; |
| | border-right: 3px solid var(--primary-purple); |
| | white-space: nowrap; |
| | animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; |
| | } |
| | |
| | @keyframes typing { |
| | from { width: 0; } |
| | to { width: 100%; } |
| | } |
| | |
| | @keyframes blink-caret { |
| | from, to { border-color: transparent; } |
| | 50% { border-color: var(--primary-purple); } |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen"> |
| | <!-- Animated Background Elements --> |
| | <div class="fixed inset-0 -z-10 opacity-20"> |
| | <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-600 rounded-full blur-3xl opacity-40 animate-pulse"></div> |
| | <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-blue-600 rounded-full blur-3xl opacity-30 animate-pulse delay-1000"></div> |
| | </div> |
| | |
| | <!-- Main Content --> |
| | <div class="flex items-center justify-center min-h-screen p-4"> |
| | <?php |
| | $server_host = "localhost"; |
| | $login_port = 3306; |
| | $server_status = @fsockopen($server_host, $login_port, $errno, $errstr, 1); |
| | $status_class = $server_status ? 'online' : 'offline'; |
| | if ($server_status) fclose($server_status); |
| | ?> |
| | <div class="server-status <?php echo $status_class; ?>"></div> |
| | <div class="raiden-theme w-full max-w-6xl p-8 mx-4"> |
| | <!-- Hero Section --> |
| | <div class="text-center mb-16"> |
| | <div class="floating-element inline-block mb-6"> |
| | <img src="http://static.photos/fantasy/1200x630/42" alt="Grand Fantasia Logo" class="w-24 h-24 rounded-full border-4 border-purple-600 shadow-2xl"> |
| | </div> |
| | <h1 class="text-5xl md:text-7xl font-black mb-6 font-['Orbitron'] glow-text text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"> |
| | GRAND FANTASIA |
| | </h1> |
| | <p class="text-2xl text-purple-200 mb-12 typewriter">L'Évolution Ultime du Serveur Privé</p> |
| | <!-- Formulaire d'inscription moderne --> |
| | <form class="max-w-2xl mx-auto mb-16 space-y-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label class="block text-left text-purple-200 mb-3 text-lg"> |
| | <i class="fas fa-user-circle mr-2"></i>Nom d'utilisateur |
| | </label> |
| | <input type="text" |
| | class="w-full px-6 py-4 bg-gray-900 border-2 border-purple-600 rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-500/30 text-white transition-all duration-300" |
| | placeholder="Votre nom légendaire..."> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-left text-purple-200 mb-3 text-lg"> |
| | <i class="fas fa-envelope mr-2"></i>Email |
| | </label> |
| | <input type="email" |
| | class="w-full px-6 py-4 bg-gray-900 border-2 border-purple-600 rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-500/30 text-white transition-all duration-300" |
| | placeholder="votre@email.com"> |
| | </div> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| | <div> |
| | <label class="block text-left text-purple-200 mb-3 text-lg"> |
| | <i class="fas fa-lock mr-2"></i>Mot de passe |
| | </label> |
| | <input type="password" |
| | class="w-full px-6 py-4 bg-gray-900 border-2 border-purple-600 rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-500/30 text-white transition-all duration-300" |
| | placeholder="Votre mot de passe secret"> |
| | </div> |
| | |
| | <div> |
| | <label class="block text-left text-purple-200 mb-3 text-lg"> |
| | <i class="fas fa-lock mr-2"></i>Confirmer le mot de passe |
| | </label> |
| | <input type="password" |
| | class="w-full px-6 py-4 bg-gray-900 border-2 border-purple-600 rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-500/30 text-white transition-all duration-300" |
| | placeholder="Confirmez votre mot de passe"> |
| | </div> |
| | </div> |
| | |
| | <button type="submit" class="raiden-btn text-white text-xl font-bold w-full mt-8"> |
| | <i class="fas fa-rocket mr-3"></i>DÉMARRER L'AVENTURE |
| | </button> |
| | </form> |
| | <!-- Dashboard Modern --> |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto mb-16"> |
| | <div class="card-hover bg-gray-900/50 p-6 rounded-2xl border border-purple-600/30 text-center"> |
| | <div class="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-chart-line text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-purple-300 mb-2">Statistiques Live</h3> |
| | <p class="text-gray-400">Monitorage en temps réel</p> |
| | </div> |
| | |
| | <div class="card-hover bg-gray-900/50 p-6 rounded-2xl border border-purple-600/30 text-center"> |
| | <div class="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-users text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-blue-300 mb-2">Communauté</h3> |
| | <p class="text-gray-400">500+ joueurs actifs</p> |
| | </div> |
| | |
| | <div class="card-hover bg-gray-900/50 p-6 rounded-2xl border border-purple-600/30 text-center"> |
| | <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-shield-alt text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-green-300 mb-2">Sécurité</h3> |
| | <p class="text-gray-400">Protection anti-cheat</p> |
| | </div> |
| | |
| | <div class="card-hover bg-gray-900/50 p-6 rounded-2xl border border-purple-600/30 text-center"> |
| | <div class="w-16 h-16 bg-pink-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-star text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-pink-300 mb-2">Premium</h3> |
| | <p class="text-gray-400">Contenu exclusif</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <!-- Histoire du projet enrichie --> |
| | <div class="mt-20 border-t border-purple-600/30 pt-12"> |
| | <h2 class="text-4xl font-bold mb-12 text-center font-['Playfair_Display'] glow-text"> |
| | <i class="fas fa-scroll mr-4"></i>L'Épopée de Grand Fantasia |
| | </h2> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16"> |
| | <div class="space-y-6"> |
| | <h3 class="text-2xl font-bold text-purple-300">🎮 Une Révolution Numérique</h3> |
| | <p class="text-lg leading-relaxed text-gray-300"> |
| | Grand Fantasia n'est pas qu'un serveur de jeu - c'est une plateforme d'apprentissage révolutionnaire |
| | où la technologie rencontre la créativité. Inspiré par l'élégance cyberpunk et la puissance mystique, |
| | notre projet fusionne l'art du code avec la magie du gaming. |
| | </p> |
| | <p class="text-lg leading-relaxed text-gray-300"> |
| | Chaque ligne de code raconte une histoire, chaque fonction représente un sortilège, et chaque database |
| | devient un grimoire de connaissances précieuses. |
| | </p> |
| | </div> |
| | <div class="flex justify-center"> |
| | <img src="http://static.photos/technology/640x360/7" alt="Technologie Avancée" class="rounded-2xl shadow-2xl w-full max-w-md"> |
| | </div> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16"> |
| | <div class="flex justify-center order-2 lg:order-1"> |
| | <img src="http://static.photos/education/640x360/15" alt="Apprentissage Communautaire" class="rounded-2xl shadow-2xl w-full max-w-md"> |
| | </div> |
| | <div class="space-y-6 order-1 lg:order-2"> |
| | <h3 class="text-2xl font-bold text-blue-300">📚 L'Apprentissage par la Pratique</h3> |
| | <p class="text-lg leading-relaxed text-gray-300"> |
| | Gérer un serveur comme Grand Fantasia offre une expérience éducative incomparable. Vous maîtrisez : |
| | </p> |
| | <ul class="space-y-3 text-gray-300"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-3"></i> Administration système avancée</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-3"></i> Développement full-stack</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-3"></i> Cybersécurité et optimisation</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-400 mr-3"></i> Gestion de communauté</li> |
| | </ul> |
| | </div> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16"> |
| | <div class="space-y-6"> |
| | <h3 class="text-2xl font-bold text-pink-300">🌟 Notre Philosophie</h3> |
| | <p class="text-lg leading-relaxed text-gray-300"> |
| | Chez Grand Fantasia, nous transformons l'apprentissage en aventure épique. Chaque bug devient un dragon à vaincre, |
| | chaque feature un trésor à découvrir, et chaque membre un héros de sa propre quête numérique. |
| | </p> |
| | <p class="text-lg leading-relaxed text-gray-300"> |
| | Notre communauté internationale de développeurs, designers et gamers crée ensemble un écosystème où |
| | l'innovation n'a pas de limites et où la curiosité est toujours récompensée. |
| | </p> |
| | </div> |
| | <div class="flex justify-center"> |
| | <img src="http://static.photos/gaming/640x360/23" alt="Communauté Gaming" class="rounded-2xl shadow-2xl w-full max-w-md"> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-12 p-8 bg-gradient-to-r from-purple-900/30 to-blue-900/30 rounded-2xl border border-purple-600/20"> |
| | <p class="text-2xl italic font-['Playfair_Display'] text-purple-200 leading-relaxed"> |
| | "Dans le cosmos numérique de Grand Fantasia, nous ne construisons pas simplement un serveur - |
| | nous forgeons une légende où chaque joueur devient architecte de son propre destin virtuel, |
| | et où l'apprentissage est la magie qui propulse notre évolution collective." |
| | </p> |
| | </div> |
| | </div> |
| | |
| | <!-- Section Features Modern --> |
| | <div class="mt-20 border-t border-purple-600/30 pt-12"> |
| | <h2 class="text-4xl font-bold mb-12 text-center font-['Playfair_Display'] glow-text"> |
| | <i class="fas fa-gem mr-4"></i>Fonctionnalités Exclusives |
| | </h2> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="card-hover p-6 bg-gray-900/50 rounded-2xl text-center"> |
| | <i class="fas fa-bolt text-5xl text-yellow-400 mb-4"></i> |
| | <h3 class="text-xl font-bold text-yellow-300 mb-3">Performance Ultime</h3> |
| | <p class="text-gray-400">Serveur optimisé avec latency < 20ms worldwide</p> |
| | </div> |
| | |
| | <div class="card-hover p-6 bg-gray-900/50 rounded-2xl text-center"> |
| | <i class="fas fa-crown text-5xl text-purple-400 mb-4"></i> |
| | <h3 class="text-xl font-bold text-purple-300 mb-3">Contenu Exclusive</h3> |
| | <p class="text-gray-400">Quêtes, items et zones uniques à Grand Fantasia</p> |
| | </div> |
| | |
| | <div class="card-hover p-6 bg-gray-900/50 rounded-2xl text-center"> |
| | <i class="fas fa-shield-virus text-5xl text-green-400 mb-4"></i> |
| | <h3 class="text-xl font-bold text-green-300 mb-3">Anti-Cheat IA</h3> |
| | <p class="text-gray-400">Système de détection intelligent basé sur machine learning</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | <script> |
| | // Animations avancées |
| | document.addEventListener('DOMContentLoaded', function() { |
| | |
| | const observerOptions = { |
| | threshold: 0.1, |
| | rootMargin: '0px 0px -50px 0px' |
| | }; |
| | |
| | const observer = new IntersectionObserver((entries) => { |
| | entries.forEach(entry => { |
| | if (entry.isIntersecting) { |
| | entry.target.style.opacity = '1'; |
| | entry.target.style.transform = 'translateY(0)'; |
| | } |
| | }); |
| | }, observerOptions); |
| | |
| | document.querySelectorAll('.card-hover').forEach(card => { |
| | card.style.opacity = '0'; |
| | card.style.transform = 'translateY(50px)'; |
| | card.style.transition = 'all 0.8s cubic-bezier(0.4, 0, 0.2, 1)'; |
| | observer.observe(card); |
| | }); |
| | |
| | |
| | document.querySelectorAll('.raiden-btn').forEach(btn => { |
| | btn.addEventListener('mouseenter', function(e) { |
| | const x = e.pageX - btn.offsetLeft; |
| | const y = e.pageY - btn.offsetTop; |
| | |
| | btn.style.setProperty('--x', x + 'px'); |
| | btn.style.setProperty('--y', y + 'px'); |
| | }); |
| | }); |
| | |
| | |
| | window.addEventListener('scroll', function() { |
| | const scrolled = window.pageYOffset; |
| | const parallaxElements = document.querySelectorAll('.parallax-bg'); |
| | |
| | parallaxElements.forEach(element => { |
| | const speed = 0.5; |
| | element.style.transform = `translateY(${scrolled * speed}px)`; |
| | }); |
| | }); |
| | }); |
| | </script> |
| | </body> |
| | </html> |
| | ``` |
