|
|
<!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> |
