| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NexusCore - Plateforme Gaming Autonome</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;500;700&display=swap'); |
| |
| :root { |
| --primary: #00f0ff; |
| --secondary: #ff2d7b; |
| --dark: #0a0a1a; |
| --darker: #050510; |
| } |
| |
| body { |
| font-family: 'Rajdhani', sans-serif; |
| background-color: var(--darker); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .font-orbitron { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .neon-text { |
| text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 20px var(--secondary); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| } |
| |
| .game-card:hover { |
| transform: translateY(-10px) scale(1.02); |
| box-shadow: 0 25px 50px -12px rgba(0, 240, 255, 0.3); |
| } |
| |
| .glow { |
| box-shadow: 0 0 20px rgba(0, 240, 255, 0.7); |
| } |
| |
| .holographic { |
| background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 45, 123, 0.1)); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .cyber-border { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .cyber-border::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| border-radius: inherit; |
| padding: 2px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); |
| -webkit-mask-composite: xor; |
| mask-composite: exclude; |
| pointer-events: none; |
| } |
| |
| .scanline { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .scanline::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient( |
| to bottom, |
| transparent 0%, |
| rgba(0, 240, 255, 0.1) 10%, |
| transparent 20%, |
| rgba(255, 45, 123, 0.1) 30%, |
| transparent 40%, |
| rgba(0, 240, 255, 0.1) 50%, |
| transparent 60%, |
| rgba(255, 45, 123, 0.1) 70%, |
| transparent 80%, |
| rgba(0, 240, 255, 0.1) 90%, |
| transparent 100% |
| ); |
| animation: scan 8s linear infinite; |
| pointer-events: none; |
| } |
| |
| @keyframes scan { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| |
| @keyframes pulse { |
| 0% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| 100% { opacity: 1; } |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| |
| .terminal-text { |
| font-family: 'Courier New', monospace; |
| color: #00ff00; |
| text-shadow: 0 0 5px #00ff00; |
| } |
| |
| .typewriter { |
| overflow: hidden; |
| border-right: .15em solid var(--primary); |
| white-space: nowrap; |
| animation: typing 3.5s steps(40, end), blink-caret .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) } |
| } |
| |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| |
| .skeleton { |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
| background-color: rgba(255, 255, 255, 0.1); |
| border-radius: 0.25rem; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen scanline"> |
| |
| <nav class="bg-black/80 backdrop-blur-md border-b border-gray-800 fixed w-full z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <span class="font-orbitron text-2xl font-bold neon-text">NEXUS<span class="text-white">CORE</span></span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="#" class="text-white hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-home mr-1"></i> Hub |
| </a> |
| <a href="#" class="text-gray-300 hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-gamepad mr-1"></i> Jeux |
| </a> |
| <a href="#" class="text-gray-300 hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-users mr-1"></i> NexusNet |
| </a> |
| <a href="#" class="text-gray-300 hover:text-cyan-300 px-3 py-2 rounded-md text-sm font-medium flex items-center"> |
| <i class="fas fa-robot mr-1"></i> AI Assist |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-4 flex items-center md:ml-6"> |
| <div class="relative"> |
| <input type="text" placeholder="Recherche neuronale..." class="bg-gray-900/50 border border-gray-700 rounded-full px-4 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-transparent w-64 terminal-text"> |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> |
| <i class="fas fa-search"></i> |
| </button> |
| </div> |
| <div class="ml-4 relative"> |
| <div class="h-8 w-8 rounded-full gradient-bg flex items-center justify-center cursor-pointer"> |
| <i class="fas fa-user-astronaut text-white"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
| <span class="sr-only">Open main menu</span> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="fixed bottom-24 right-6 z-50 w-72 bg-gray-900/90 border border-cyan-500/30 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300" id="aiPanel"> |
| <div class="gradient-bg px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-robot mr-2 text-white"></i> |
| <span class="font-orbitron text-sm">NEXUS AI ASSISTANT</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-2 w-2 rounded-full bg-green-500 mr-1 animate-pulse"></div> |
| <span class="text-xs">ACTIVE</span> |
| </div> |
| </div> |
| <div class="p-4 h-48 overflow-y-auto terminal-text text-sm" id="aiChat"> |
| <p>> Système NexusCore initialisé</p> |
| <p>> Connexion établie avec la base de jeux</p> |
| <p>> Analyse des préférences utilisateur...</p> |
| <p>> Chargement des recommandations personnalisées</p> |
| <p class="typewriter">Bonjour joueur. Comment puis-je vous aider aujourd'hui?</p> |
| </div> |
| <div class="border-t border-gray-800 p-3"> |
| <div class="relative"> |
| <input type="text" placeholder="Tapez votre requête..." class="w-full bg-gray-800/50 border border-gray-700 rounded-full px-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-cyan-500 focus:border-transparent terminal-text"> |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-cyan-400"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <main class="pt-20 pb-16"> |
| |
| <section class="relative py-16 overflow-hidden"> |
| <div class="absolute inset-0 overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-b from-black/90 via-black/70 to-black/90 z-10"></div> |
| <video autoplay muted loop class="w-full h-full object-cover"> |
| <source src="https://cdn.akamai.steamstatic.com/steam/public/clusters/gametrailers/webm/steam_deck_oled_hero_loop.webm" type="video/webm"> |
| </video> |
| </div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20"> |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> |
| <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-7 lg:text-left"> |
| <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl font-orbitron"> |
| <span class="block">PLATEFORME DE JEUX</span> |
| <span class="block gradient-text">AUTO-PILOTÉE</span> |
| </h1> |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
| NexusCore analyse vos préférences en temps réel pour optimiser votre expérience gaming avec notre IA neuronale. |
| </p> |
| <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0"> |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
| <button class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-105"> |
| <i class="fas fa-rocket mr-2"></i> Explorer la Matrice |
| </button> |
| <button class="bg-white/10 hover:bg-white/20 text-white font-bold py-3 px-8 rounded-full flex items-center justify-center border border-white/20 transition-all duration-300 hover:scale-105"> |
| <i class="fas fa-terminal mr-2"></i> Accès Direct |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-5 lg:flex lg:items-center floating"> |
| <div class="cyber-border rounded-xl overflow-hidden w-full h-96 lg:h-auto lg:aspect-w-16 lg:aspect-h-9"> |
| <div class="holographic h-full flex items-center justify-center p-8"> |
| <div class="text-center"> |
| <div class="h-16 w-16 gradient-bg rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-gamepad text-white text-2xl"></i> |
| </div> |
| <h3 class="font-orbitron text-xl mb-2">JEU DU MOMENT</h3> |
| <p class="text-3xl font-bold mb-4" id="featuredGameTitle">Chargement...</p> |
| <div class="w-full bg-gray-800 rounded-full h-2.5 mb-4"> |
| <div class="gradient-bg h-2.5 rounded-full" style="width: 87%" id="featuredGameRating"></div> |
| </div> |
| <p class="text-sm text-gray-300 mb-6">Compatibilité neuronale: <span id="featuredGameCompatibility">94%</span></p> |
| <button class="gradient-bg hover:opacity-90 text-white font-bold py-2 px-6 rounded-full text-sm flex items-center mx-auto"> |
| <i class="fas fa-bolt mr-2"></i> Lancer en Cloud |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16"> |
| <div class="cyber-border rounded-xl overflow-hidden"> |
| <div class="gradient-bg px-6 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-database mr-3 text-white"></i> |
| <h2 class="font-orbitron text-xl">BASE DE JEUX NEXUS</h2> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-xs bg-black/30 px-2 py-1 rounded-full mr-3"> |
| <span class="h-2 w-2 rounded-full bg-green-500 inline-block mr-1"></span> |
| SYNC: 100% |
| </span> |
| <span class="text-xs">Dernière mise à jour: <span class="font-mono">NOW</span></span> |
| </div> |
| </div> |
| <div class="bg-gray-900/50 p-6"> |
| |
| <div class="flex overflow-x-auto pb-4 scrollbar-hide space-x-3 mb-6"> |
| <button class="flex-shrink-0 gradient-bg text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="all"> |
| Tous les jeux |
| </button> |
| <button class="flex-shrink-0 bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="popular"> |
| <i class="fas fa-fire mr-1"></i> Tendance |
| </button> |
| <button class="flex-shrink-0 bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="released"> |
| <i class="fas fa-star mr-1"></i> Nouveautés |
| </button> |
| <button class="flex-shrink-0 bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="pc"> |
| <i class="fas fa-desktop mr-1"></i> PC |
| </button> |
| <button class="flex-shrink-0 bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="action"> |
| <i class="fas fa-running mr-1"></i> Action |
| </button> |
| <button class="flex-shrink-0 bg-gray-800 hover:bg-gray-700 text-white text-xs font-bold px-4 py-2 rounded-full" data-filter="rpg"> |
| <i class="fas fa-dragon mr-1"></i> RPG |
| </button> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6" id="gameGrid"> |
| |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden h-full"> |
| <div class="skeleton h-48 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-6 w-3/4 mb-2"></div> |
| <div class="skeleton h-4 w-1/2 mb-4"></div> |
| <div class="skeleton h-4 w-full mb-4"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden h-full"> |
| <div class="skeleton h-48 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-6 w-3/4 mb-2"></div> |
| <div class="skeleton h-4 w-1/2 mb-4"></div> |
| <div class="skeleton h-4 w-full mb-4"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden h-full"> |
| <div class="skeleton h-48 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-6 w-3/4 mb-2"></div> |
| <div class="skeleton h-4 w-1/2 mb-4"></div> |
| <div class="skeleton h-4 w-full mb-4"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden h-full"> |
| <div class="skeleton h-48 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-6 w-3/4 mb-2"></div> |
| <div class="skeleton h-4 w-1/2 mb-4"></div> |
| <div class="skeleton h-4 w-full mb-4"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mt-8 flex justify-center"> |
| <button id="loadMoreBtn" class="gradient-bg hover:opacity-90 text-white font-bold py-2 px-6 rounded-full flex items-center"> |
| <i class="fas fa-sync-alt mr-2"></i> Charger plus de jeux |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16"> |
| <div class="cyber-border rounded-xl overflow-hidden"> |
| <div class="gradient-bg px-6 py-4"> |
| <div class="flex items-center"> |
| <i class="fas fa-brain mr-3 text-white"></i> |
| <h2 class="font-orbitron text-xl">RECOMMANDATIONS NEURONALES</h2> |
| </div> |
| <div class="mt-2 text-xs"> |
| <span class="font-mono">> Analyse comportementale complète. Adaptation en temps réel.</span> |
| </div> |
| </div> |
| <div class="bg-gray-900/50 p-6"> |
| <div class="flex overflow-x-auto pb-4 scrollbar-hide space-x-4" id="recommendations"> |
| |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden"> |
| <div class="skeleton h-36 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-5 w-3/4 mb-3"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden"> |
| <div class="skeleton h-36 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-5 w-3/4 mb-3"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden"> |
| <div class="skeleton h-36 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-5 w-3/4 mb-3"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden"> |
| <div class="skeleton h-36 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-5 w-3/4 mb-3"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 text-center"> |
| <p class="text-gray-400 text-sm">Ces recommandations évoluent en fonction de vos sessions de jeu</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16"> |
| <div class="cyber-border rounded-xl overflow-hidden"> |
| <div class="gradient-bg px-6 py-4 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fas fa-cloud mr-3 text-white"></i> |
| <h2 class="font-orbitron text-xl">NEXUS CLOUD GAMING</h2> |
| </div> |
| <div class="flex items-center"> |
| <span class="text-xs bg-black/30 px-2 py-1 rounded-full mr-2"> |
| <span class="h-2 w-2 rounded-full bg-green-500 inline-block mr-1"></span> |
| SERVEURS: ONLINE |
| </span> |
| <span class="text-xs">Latence: <span class="font-mono">8ms</span></span> |
| </div> |
| </div> |
| <div class="bg-gray-900/50 p-6"> |
| <div class="lg:grid lg:grid-cols-3 lg:gap-8"> |
| <div class="lg:col-span-2"> |
| <h3 class="text-xl font-bold mb-4">Jouez instantanément sur n'importe quel appareil</h3> |
| <p class="text-gray-300 mb-6"> |
| Notre technologie de streaming cloud vous permet d'accéder à votre bibliothèque complète sans téléchargement. |
| L'IA optimise automatiquement les paramètres pour votre connexion. |
| </p> |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div class="bg-gray-800/50 border border-gray-700 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="h-8 w-8 rounded-full bg-cyan-500/10 flex items-center justify-center mr-2"> |
| <i class="fas fa-tachometer-alt text-cyan-400"></i> |
| </div> |
| <span class="font-bold">Performance</span> |
| </div> |
| <p class="text-xs text-gray-400">120 FPS / 4K HDR</p> |
| </div> |
| <div class="bg-gray-800/50 border border-gray-700 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="h-8 w-8 rounded-full bg-purple-500/10 flex items-center justify-center mr-2"> |
| <i class="fas fa-globe-americas text-purple-400"></i> |
| </div> |
| <span class="font-bold">Couverture</span> |
| </div> |
| <p class="text-xs text-gray-400">25 centres de données</p> |
| </div> |
| </div> |
| <button class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-6 rounded-full flex items-center"> |
| <i class="fas fa-play mr-2"></i> Essayer maintenant |
| </button> |
| </div> |
| <div class="mt-8 lg:mt-0"> |
| <div class="holographic rounded-lg p-6 h-full"> |
| <h4 class="font-orbitron mb-4">VOS JEUX CLOUD</h4> |
| <div class="space-y-4" id="cloudGames"> |
| <div class="flex items-center"> |
| <div class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center mr-3"> |
| <i class="fas fa-gamepad"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-bold">Cyberpunk 2077</p> |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> |
| <div class="gradient-bg h-1.5 rounded-full" style="width: 75%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center mr-3"> |
| <i class="fas fa-gamepad"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-bold">Elden Ring</p> |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> |
| <div class="gradient-bg h-1.5 rounded-full" style="width: 92%"></div> |
| </div> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="h-10 w-10 rounded-full bg-gray-800 flex items-center justify-center mr-3"> |
| <i class="fas fa-gamepad"></i> |
| </div> |
| <div class="flex-1"> |
| <p class="font-bold">Starfield</p> |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> |
| <div class="gradient-bg h-1.5 rounded-full" style="width: 68%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-6 pt-4 border-t border-gray-700"> |
| <p class="text-xs text-gray-400">Stockage cloud disponible: <span class="font-bold text-white">1.2TB</span></p> |
| <div class="w-full bg-gray-700 rounded-full h-2 mt-2"> |
| <div class="gradient-bg h-2 rounded-full" style="width: 45%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-black/80 backdrop-blur-md border-t border-gray-800 mt-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-white font-bold mb-4 font-orbitron">NEXUSCORE</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">À propos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Technologie</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Carrières</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Presse</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4 font-orbitron">ASSISTANCE</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Centre d'aide</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Statut des serveurs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">FAQ</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Nous contacter</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4 font-orbitron">LÉGAL</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Conditions d'utilisation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Confidentialité</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Cookies</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Copyright</a></li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-white font-bold mb-4 font-orbitron">CONNECTER</h3> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-twitch"></i> |
| </a> |
| </div> |
| <div class="mt-6"> |
| <p class="text-gray-400 text-sm mb-2">Télécharger l'app</p> |
| <div class="flex space-x-2"> |
| <button class="bg-black text-white px-3 py-1 rounded flex items-center text-xs"> |
| <i class="fab fa-apple mr-1"></i> iOS |
| </button> |
| <button class="bg-black text-white px-3 py-1 rounded flex items-center text-xs"> |
| <i class="fab fa-android mr-1"></i> Android |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center"> |
| <span class="font-orbitron text-xl font-bold gradient-text">NEXUS<span class="text-white">CORE</span></span> |
| <span class="text-gray-400 text-sm ml-4">© 2023 Nexus Technologies. Tous droits réservés.</span> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <span class="text-gray-400 text-sm">Version système: <span class="font-mono">NEXUS-OS v4.2.1</span></span> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <script> |
| |
| const API_KEY = 'd4e5b8d7b5a84f4c8a5e0a3e3e3e3e3'; |
| const API_URL = 'https://api.rawg.io/api/games'; |
| |
| |
| let currentPage = 1; |
| let isLoading = false; |
| |
| |
| function formatDate(dateString) { |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; |
| return new Date(dateString).toLocaleDateString('fr-FR', options); |
| } |
| |
| |
| function getRandomPrice() { |
| const prices = [0, 9.99, 19.99, 29.99, 39.99, 49.99, 59.99]; |
| return prices[Math.floor(Math.random() * prices.length)]; |
| } |
| |
| |
| function getRandomDiscount() { |
| return Math.random() > 0.7 ? Math.floor(Math.random() * 60) + 10 : 0; |
| } |
| |
| |
| function getRandomRating() { |
| return (Math.random() * 2 + 3).toFixed(1); |
| } |
| |
| |
| function getRandomCompatibility() { |
| return Math.floor(Math.random() * 15) + 85; |
| } |
| |
| |
| async function fetchGames(page = 1, filter = '') { |
| try { |
| isLoading = true; |
| |
| |
| if (page === 1) { |
| document.getElementById('gameGrid').innerHTML = ` |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden h-full"> |
| <div class="skeleton h-48 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-6 w-3/4 mb-2"></div> |
| <div class="skeleton h-4 w-1/2 mb-4"></div> |
| <div class="skeleton h-4 w-full mb-4"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| `.repeat(4); |
| } |
| |
| let url = `${API_URL}?key=${API_KEY}&page=${page}&page_size=8`; |
| |
| |
| if (filter) { |
| switch(filter) { |
| case 'popular': |
| url += '&ordering=-rating'; |
| break; |
| case 'released': |
| url += '&ordering=-released'; |
| break; |
| case 'pc': |
| url += '&platforms=4'; |
| break; |
| case 'action': |
| url += '&genres=4'; |
| break; |
| case 'rpg': |
| url += '&genres=5'; |
| break; |
| } |
| } |
| |
| const response = await fetch(url); |
| const data = await response.json(); |
| |
| |
| displayGames(data.results, page === 1); |
| |
| |
| currentPage = page; |
| isLoading = false; |
| |
| return data; |
| } catch (error) { |
| console.error('Erreur lors du chargement des jeux:', error); |
| isLoading = false; |
| |
| |
| if (page === 1) { |
| document.getElementById('gameGrid').innerHTML = ` |
| <div class="col-span-4 text-center py-8"> |
| <i class="fas fa-exclamation-triangle text-yellow-500 text-4xl mb-4"></i> |
| <h3 class="text-xl font-bold mb-2">Erreur de chargement</h3> |
| <p class="text-gray-400">Impossible de charger les jeux. Veuillez réessayer plus tard.</p> |
| <button onclick="fetchGames()" class="mt-4 gradient-bg hover:opacity-90 text-white font-bold py-2 px-6 rounded-full"> |
| <i class="fas fa-sync-alt mr-2"></i> Réessayer |
| </button> |
| </div> |
| `; |
| } |
| } |
| } |
| |
| |
| function displayGames(games, clear = true) { |
| const gameGrid = document.getElementById('gameGrid'); |
| |
| if (clear) { |
| gameGrid.innerHTML = ''; |
| } |
| |
| games.forEach(game => { |
| const price = getRandomPrice(); |
| const discount = getRandomDiscount(); |
| const rating = getRandomRating(); |
| const compatibility = getRandomCompatibility(); |
| |
| gameGrid.innerHTML += ` |
| <div class="game-card bg-gray-900 rounded-lg overflow-hidden transition-all duration-300 ease-in-out cursor-pointer h-full" data-genres="${game.genres.map(g => g.id).join(',')}" data-platforms="${game.platforms.map(p => p.platform.id).join(',')}"> |
| <div class="relative"> |
| <img src="${game.background_image || 'https://via.placeholder.com/400x225?text=No+Image'}" alt="${game.name}" class="w-full h-48 object-cover"> |
| ${discount > 0 ? `<div class="absolute top-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded">-${discount}%</div>` : ''} |
| ${price === 0 ? `<div class="absolute top-2 left-2 bg-green-600/80 text-white text-xs px-2 py-1 rounded">GRATUIT</div>` : ''} |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-bold">${game.name}</h3> |
| <p class="text-gray-400 text-xs mb-2">${game.released ? formatDate(game.released) : 'Date inconnue'}</p> |
| <div class="flex items-center mt-1"> |
| <div class="flex"> |
| ${Array.from({length: 5}, (_, i) => |
| i < Math.floor(rating) ? |
| `<i class="fas fa-star text-yellow-400 text-xs"></i>` : |
| (i < rating ? `<i class="fas fa-star-half-alt text-yellow-400 text-xs"></i>` : `<i class="far fa-star text-yellow-400 text-xs"></i>`) |
| ).join('')} |
| </div> |
| <span class="text-gray-400 text-xs ml-1">(${rating})</span> |
| </div> |
| <div class="flex justify-between items-center mt-3"> |
| <div> |
| ${discount > 0 ? `<span class="text-gray-400 line-through text-sm">${(price / (1 - discount/100)).toFixed(2)}€</span>` : ''} |
| <span class="text-white font-bold ml-2">${price > 0 ? `${price.toFixed(2)}€` : 'Gratuit'}</span> |
| </div> |
| <button class="text-xs gradient-bg hover:opacity-90 text-white px-3 py-1 rounded-full"> |
| ${price > 0 ? 'Ajouter' : 'Jouer'} |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| }); |
| |
| |
| document.querySelectorAll('.game-card').forEach(card => { |
| card.addEventListener('mouseenter', () => { |
| card.classList.add('glow'); |
| }); |
| card.addEventListener('mouseleave', () => { |
| card.classList.remove('glow'); |
| }); |
| }); |
| } |
| |
| |
| async function fetchRecommendations() { |
| try { |
| |
| document.getElementById('recommendations').innerHTML = ` |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden"> |
| <div class="skeleton h-36 w-full"></div> |
| <div class="p-4"> |
| <div class="skeleton h-5 w-3/4 mb-3"></div> |
| <div class="skeleton h-8 w-full rounded-full"></div> |
| </div> |
| </div> |
| `.repeat(4); |
| |
| |
| const response = await fetch(`${API_URL}?key=${API_KEY}&page=1&page_size=6&ordering=-rating`); |
| const data = await response.json(); |
| |
| |
| displayRecommendations(data.results.slice(0, 4)); |
| } catch (error) { |
| console.error('Erreur lors du chargement des recommandations:', error); |
| |
| document.getElementById('recommendations').innerHTML = ` |
| <div class="col-span-4 text-center py-8"> |
| <i class="fas fa-exclamation-triangle text-yellow-500 text-4xl mb-4"></i> |
| <p class="text-gray-400">Les recommandations ne sont pas disponibles pour le moment.</p> |
| </div> |
| `; |
| } |
| } |
| |
| |
| function displayRecommendations(games) { |
| const recommendationsGrid = document.getElementById('recommendations'); |
| recommendationsGrid.innerHTML = ''; |
| |
| games.forEach(game => { |
| const compatibility = getRandomCompatibility(); |
| |
| recommendationsGrid.innerHTML += ` |
| <div class="flex-shrink-0 w-64 game-card bg-gray-900 rounded-lg overflow-hidden transition-all duration-300 ease-in-out cursor-pointer"> |
| <div class="relative"> |
| <img src="${game.background_image || 'https://via.placeholder.com/400x225?text=No+Image'}" alt="${game.name}" class="w-full h-36 object-cover"> |
| <div class="absolute top-2 left-2 bg-cyan-600/80 text-white text-xs px-2 py-1 rounded"> |
| <i class="fas fa-brain mr-1"></i> ${compatibility}% |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="text-white font-bold text-sm">${game.name}</h3> |
| <div class="flex justify-between items-center mt-3"> |
| <div> |
| <span class="text-white font-bold text-sm">${getRandomPrice() > 0 ? `${getRandomPrice().toFixed(2)}€` : 'Gratuit'}</span> |
| </div> |
| <button class="text-xs gradient-bg hover:opacity-90 text-white px-3 py-1 rounded-full"> |
| <i class="fas fa-bolt mr-1"></i> Démarrer |
| </button> |
| </div> |
| </div> |
| </div> |
| `; |
| }); |
| } |
| |
| |
| async function fetchFeaturedGame() { |
| try { |
| |
| const response = await fetch(`${API_URL}?key=${API_KEY}&page=1&page_size=1&ordering=-rating`); |
| const data = await response.json(); |
| |
| if (data.results.length > 0) { |
| const featuredGame = data.results[0]; |
| const rating = (featuredGame.rating * 20).toFixed(0); |
| |
| document.getElementById('featuredGameTitle').textContent = featuredGame.name; |
| document.getElementById('featuredGameRating').style.width = `${rating}%`; |
| document.getElementById('featuredGameCompatibility').textContent = `${getRandomCompatibility()}%`; |
| } |
| } catch (error) { |
| console.error('Erreur lors du chargement du jeu vedette:', error); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| fetchGames(); |
| fetchRecommendations(); |
| fetchFeaturedGame(); |
| |
| |
| document.getElementById('loadMoreBtn').addEventListener('click', () => { |
| if (!isLoading) { |
| fetchGames(currentPage + 1); |
| } |
| }); |
| |
| |
| document.querySelectorAll('[data-filter]').forEach(button => { |
| button.addEventListener('click', () => { |
| |
| document.querySelectorAll('[data-filter]').forEach(btn => { |
| btn.classList.remove('gradient-bg'); |
| btn.classList.add('bg-gray-800', 'hover:bg-gray-700'); |
| }); |
| |
| button.classList.add('gradient-bg'); |
| button.classList.remove('bg-gray-800', 'hover:bg-gray-700'); |
| |
| |
| fetchGames(1, button.dataset.filter); |
| }); |
| }); |
| |
| |
| setInterval(() => { |
| const latency = Math.floor(Math.random() * 5) + 5; |
| document.querySelectorAll('.font-mono').forEach(el => { |
| if (el.textContent.includes('ms')) { |
| el.textContent = `${latency}ms`; |
| } |
| }); |
| }, 3000); |
| |
| |
| const aiPanel = document.getElementById('aiPanel'); |
| const aiChat = document.getElementById('aiChat'); |
| |
| |
| setTimeout(() => { |
| aiChat.innerHTML += `<p>> Préparation des recommandations...</p>`; |
| }, 3000); |
| |
| setTimeout(() => { |
| aiChat.innerHTML += `<p>> Optimisation des paramètres système</p>`; |
| }, 6000); |
| |
| setTimeout(() => { |
| aiChat.innerHTML += `<p class="typewriter">Votre session est optimisée. Bon jeu!</p>`; |
| }, 9000); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/nexuscore" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
