|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NEXUS | Interface Futuriste</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-blue: #0ff0fc; |
|
|
--neon-pink: #ff2ced; |
|
|
--neon-purple: #9d00ff; |
|
|
--dark-bg: #0a0a1a; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Rajdhani', sans-serif; |
|
|
background-color: var(--dark-bg); |
|
|
color: white; |
|
|
overflow-x: hidden; |
|
|
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke="%230ff0fc" stroke-width="2"/><circle cx="8" cy="8" r="1" fill="%230ff0fc"/></svg>'), auto; |
|
|
} |
|
|
|
|
|
h1, h2, h3, .font-orbitron { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 2px; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.neon-box { |
|
|
border: 1px solid var(--neon-blue); |
|
|
box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.neon-box::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient( |
|
|
to bottom right, |
|
|
transparent, transparent, transparent, |
|
|
var(--neon-blue), |
|
|
transparent, transparent, transparent |
|
|
); |
|
|
transform: rotate(30deg); |
|
|
animation: shine 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes shine { |
|
|
0% { left: -50%; top: -50%; } |
|
|
100% { left: 150%; top: 150%; } |
|
|
} |
|
|
|
|
|
.glitch { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.glitch::before, .glitch::after { |
|
|
content: attr(data-text); |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.glitch::before { |
|
|
color: var(--neon-pink); |
|
|
animation: glitch-effect 3s infinite; |
|
|
clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); |
|
|
} |
|
|
|
|
|
.glitch::after { |
|
|
color: var(--neon-purple); |
|
|
animation: glitch-effect 2s infinite reverse; |
|
|
clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); |
|
|
} |
|
|
|
|
|
@keyframes glitch-effect { |
|
|
0% { transform: translate(0); } |
|
|
20% { transform: translate(-3px, 3px); } |
|
|
40% { transform: translate(-3px, -3px); } |
|
|
60% { transform: translate(3px, 3px); } |
|
|
80% { transform: translate(3px, -3px); } |
|
|
100% { transform: translate(0); } |
|
|
} |
|
|
|
|
|
.holographic-card { |
|
|
background: rgba(10, 10, 30, 0.7); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 10px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 8px 32px 0 rgba(0, 255, 252, 0.2); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.holographic-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 12px 40px 0 rgba(0, 255, 252, 0.3); |
|
|
} |
|
|
|
|
|
.scanline { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient( |
|
|
to bottom, |
|
|
transparent 0%, |
|
|
rgba(0, 255, 252, 0.1) 50%, |
|
|
transparent 100% |
|
|
); |
|
|
animation: scan 8s linear infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes scan { |
|
|
0% { transform: translateY(-100%); } |
|
|
100% { transform: translateY(100%); } |
|
|
} |
|
|
|
|
|
.particles { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
z-index: -1; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.terminal { |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
border: 1px solid var(--neon-blue); |
|
|
border-radius: 5px; |
|
|
font-family: 'Courier New', monospace; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.terminal-header { |
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
padding: 5px 10px; |
|
|
border-bottom: 1px solid var(--neon-blue); |
|
|
} |
|
|
|
|
|
.terminal-body { |
|
|
padding: 15px; |
|
|
height: 200px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.terminal-input { |
|
|
color: var(--neon-blue); |
|
|
} |
|
|
|
|
|
.cursor { |
|
|
display: inline-block; |
|
|
width: 10px; |
|
|
height: 15px; |
|
|
background: var(--neon-blue); |
|
|
animation: blink 1s infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
.cyber-button { |
|
|
position: relative; |
|
|
padding: 15px 30px; |
|
|
background: transparent; |
|
|
color: var(--neon-blue); |
|
|
border: 2px solid var(--neon-blue); |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 3px; |
|
|
cursor: pointer; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.cyber-button:hover { |
|
|
color: var(--dark-bg); |
|
|
background: var(--neon-blue); |
|
|
box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); |
|
|
} |
|
|
|
|
|
.cyber-button::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.4), transparent); |
|
|
transition: 0.5s; |
|
|
} |
|
|
|
|
|
.cyber-button:hover::before { |
|
|
left: 100%; |
|
|
} |
|
|
|
|
|
.hexagon { |
|
|
position: relative; |
|
|
width: 60px; |
|
|
height: 34.64px; |
|
|
background-color: var(--neon-blue); |
|
|
margin: 17.32px 0; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.hexagon:before, |
|
|
.hexagon:after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
border-left: 30px solid transparent; |
|
|
border-right: 30px solid transparent; |
|
|
} |
|
|
|
|
|
.hexagon:before { |
|
|
bottom: 100%; |
|
|
border-bottom: 17.32px solid var(--neon-blue); |
|
|
} |
|
|
|
|
|
.hexagon:after { |
|
|
top: 100%; |
|
|
border-top: 17.32px solid var(--neon-blue); |
|
|
} |
|
|
|
|
|
.hexagon-container { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
|
|
|
.data-stream { |
|
|
position: relative; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); |
|
|
margin: 20px 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.data-stream::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(90deg, transparent, rgba(0, 255, 252, 0.8), transparent); |
|
|
animation: stream 2s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes stream { |
|
|
0% { transform: translateX(-100%); } |
|
|
100% { transform: translateX(100%); } |
|
|
} |
|
|
|
|
|
.grid-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: |
|
|
linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px), |
|
|
linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px); |
|
|
background-size: 50px 50px; |
|
|
pointer-events: none; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.empire-panel { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 80%; |
|
|
max-width: 800px; |
|
|
background: rgba(10, 10, 30, 0.95); |
|
|
border: 2px solid var(--neon-pink); |
|
|
box-shadow: 0 0 30px var(--neon-pink); |
|
|
padding: 30px; |
|
|
z-index: 1000; |
|
|
display: none; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.empire-panel h2 { |
|
|
color: var(--neon-pink); |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.empire-panel p { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.empire-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
z-index: 999; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.auto-pilot-active { |
|
|
position: fixed; |
|
|
bottom: 20px; |
|
|
left: 20px; |
|
|
background: rgba(0, 255, 0, 0.2); |
|
|
border: 1px solid rgba(0, 255, 0, 0.5); |
|
|
padding: 10px 20px; |
|
|
border-radius: 5px; |
|
|
display: none; |
|
|
z-index: 1001; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); } |
|
|
} |
|
|
|
|
|
.robot-mode-active { |
|
|
position: fixed; |
|
|
bottom: 60px; |
|
|
left: 20px; |
|
|
background: rgba(0, 255, 252, 0.2); |
|
|
border: 1px solid rgba(0, 255, 252, 0.5); |
|
|
padding: 10px 20px; |
|
|
border-radius: 5px; |
|
|
display: none; |
|
|
z-index: 1001; |
|
|
animation: pulse-blue 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse-blue { |
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(0, 255, 252, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 255, 252, 0); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased"> |
|
|
|
|
|
<div class="grid-overlay"></div> |
|
|
|
|
|
|
|
|
<div id="particles-js" class="particles"></div> |
|
|
|
|
|
|
|
|
<div id="auto-pilot-indicator" class="auto-pilot-active"> |
|
|
<i class="fas fa-robot mr-2"></i> AUTOPILOTE ACTIVÉ |
|
|
</div> |
|
|
|
|
|
<div id="robot-mode-indicator" class="robot-mode-active"> |
|
|
<i class="fas fa-cogs mr-2"></i> MODE ROBOTISÉ ACTIVÉ |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="empire-overlay" class="empire-overlay"></div> |
|
|
|
|
|
<div id="empire-panel" class="empire-panel"> |
|
|
<h2 class="text-3xl font-orbitron">MON EMPIRE</h2> |
|
|
<p>Système impérial activé. Tous les modules sont maintenant sous votre contrôle absolu.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6"> |
|
|
<div class="p-4 border border-neon-purple rounded"> |
|
|
<h3 class="font-orbitron text-neon-purple mb-2">STATUT DU SYSTÈME</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Puissance:</span> |
|
|
<span class="text-neon-blue">100%</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Contrôle:</span> |
|
|
<span class="text-neon-pink">Total</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Réseaux:</span> |
|
|
<span class="text-neon-purple">Synchronisés</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border border-neon-blue rounded"> |
|
|
<h3 class="font-orbitron text-neon-blue mb-2">COMMANDES</h3> |
|
|
<div class="space-y-2"> |
|
|
<button id="activate-all" class="cyber-button w-full border-neon-blue"> |
|
|
<i class="fas fa-power-off mr-2"></i> TOUT ACTIVER |
|
|
</button> |
|
|
<button id="robotize-all" class="cyber-button w-full border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black"> |
|
|
<i class="fas fa-robot mr-2"></i> ROBOTISER TOUT |
|
|
</button> |
|
|
<button id="auto-pilot" class="cyber-button w-full border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black"> |
|
|
<i class="fas fa-space-shuttle mr-2"></i> AUTOPILOTE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end space-x-4"> |
|
|
<button id="close-empire" class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black"> |
|
|
FERMER |
|
|
</button> |
|
|
<button id="confirm-empire" class="cyber-button bg-neon-purple text-black hover:bg-neon-blue"> |
|
|
CONFIRMER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16 items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<div class="hexagon-container"> |
|
|
<div class="hexagon"></div> |
|
|
</div> |
|
|
<span class="ml-3 font-orbitron text-xl neon-text">NEXUS</span> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<div class="ml-10 flex items-baseline space-x-8"> |
|
|
<a href="#" class="text-white hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300 neon-text">ACCUEIL</a> |
|
|
<a href="#services" class="text-gray-300 hover:text-neon-pink px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">SERVICES</a> |
|
|
<a href="#technologies" class="text-gray-300 hover:text-neon-purple px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">TECHNOLOGIES</a> |
|
|
<a href="#contact" class="text-gray-300 hover:text-neon-blue px-3 py-2 rounded-md text-sm font-medium font-orbitron transition-all duration-300">CONTACT</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button id="mobile-menu-button" class="cyber-button text-xs">MENU</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden fixed inset-0 z-40 bg-black bg-opacity-90 backdrop-filter backdrop-blur-lg"> |
|
|
<div class="flex items-center justify-center h-full"> |
|
|
<div class="text-center"> |
|
|
<button id="close-mobile-menu" class="absolute top-4 right-4 text-2xl text-neon-pink"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<div class="space-y-6"> |
|
|
<a href="#" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">ACCUEIL</a> |
|
|
<a href="#services" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">SERVICES</a> |
|
|
<a href="#technologies" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">TECHNOLOGIES</a> |
|
|
<a href="#contact" class="block text-2xl font-orbitron text-neon-blue hover:text-neon-pink">CONTACT</a> |
|
|
<button id="empire-btn-mobile" class="cyber-button text-xl mt-10 border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black"> |
|
|
MON EMPIRE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div class="absolute inset-0 z-0"> |
|
|
<div class="scanline"></div> |
|
|
</div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10 text-center"> |
|
|
<h1 class="glitch text-6xl md:text-8xl font-bold mb-6 neon-text" data-text="NEXUS">NEXUS</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Interface quantique de nouvelle génération pour l'ère numérique</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button id="access-btn" class="cyber-button"> |
|
|
<i class="fas fa-key mr-2"></i> ACCÉDER |
|
|
</button> |
|
|
<button id="demo-btn" class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black"> |
|
|
<i class="fas fa-play mr-2"></i> DÉMO |
|
|
</button> |
|
|
<button id="empire-btn" class="cyber-button border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black"> |
|
|
<i class="fas fa-crown mr-2"></i> MON EMPIRE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute top-1/4 left-1/4 w-10 h-10 rounded-full bg-neon-blue opacity-20 animate-pulse"></div> |
|
|
<div class="absolute top-1/3 right-1/4 w-16 h-16 rounded-full bg-neon-pink opacity-20 animate-pulse" style="animation-delay: 0.5s;"></div> |
|
|
<div class="absolute bottom-1/4 left-1/3 w-20 h-20 rounded-full bg-neon-purple opacity-20 animate-pulse" style="animation-delay: 1s;"></div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="data-stream"></div> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20 relative"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">NOS SERVICES</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="holographic-card p-8 relative overflow-hidden"> |
|
|
<div class="text-neon-blue text-4xl mb-4"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 font-orbitron">INTELLIGENCE QUANTIQUE</h3> |
|
|
<p class="text-gray-300">Algorithmes quantiques révolutionnaires pour résoudre des problèmes complexes en temps réel.</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-blue bg-opacity-20 text-neon-blue rounded-full">Nouveau</span> |
|
|
</div> |
|
|
<button class="cyber-button w-full mt-6 activate-service" data-service="quantique"> |
|
|
<i class="fas fa-power-off mr-2"></i> ACTIVER |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card p-8 relative overflow-hidden"> |
|
|
<div class="text-neon-pink text-4xl mb-4"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 font-orbitron">CYBER-SÉCURITÉ</h3> |
|
|
<p class="text-gray-300">Protection avancée contre les menaces cybernétiques avec cryptographie post-quantique.</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-pink bg-opacity-20 text-neon-pink rounded-full">Sécurisé</span> |
|
|
</div> |
|
|
<button class="cyber-button w-full mt-6 border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black activate-service" data-service="securite"> |
|
|
<i class="fas fa-power-off mr-2"></i> ACTIVER |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="holographic-card p-8 relative overflow-hidden"> |
|
|
<div class="text-neon-purple text-4xl mb-4"> |
|
|
<i class="fas fa-cloud"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 font-orbitron">CLOUD NEURAL</h3> |
|
|
<p class="text-gray-300">Infrastructure cloud distribuée avec apprentissage automatique intégré à chaque nœud.</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-block px-3 py-1 text-xs font-semibold bg-neon-purple bg-opacity-20 text-neon-purple rounded-full">Évolutif</span> |
|
|
</div> |
|
|
<button class="cyber-button w-full mt-6 border-neon-purple text-neon-purple hover:bg-neon-purple hover:text-black activate-service" data-service="cloud"> |
|
|
<i class="fas fa-power-off mr-2"></i> ACTIVER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="data-stream"></div> |
|
|
|
|
|
|
|
|
<section id="technologies" class="py-20 bg-black bg-opacity-50 relative"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">TECHNOLOGIES</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h3 class="text-3xl font-bold mb-6 font-orbitron">PLATEFORME NEXUS CORE</h3> |
|
|
<p class="text-gray-300 mb-8">Notre technologie brevetée utilise des réseaux neuronaux quantiques hybrides pour offrir des performances inégalées.</p> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-4 h-4 rounded-full bg-neon-blue mr-2"></div> |
|
|
<span class="font-orbitron">Calcul Quantique</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-neon-blue h-2 rounded-full" style="width: 95%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-4 h-4 rounded-full bg-neon-pink mr-2"></div> |
|
|
<span class="font-orbitron">Sécurité</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-neon-pink h-2 rounded-full" style="width: 98%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-4 h-4 rounded-full bg-neon-purple mr-2"></div> |
|
|
<span class="font-orbitron">Vitesse</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-800 rounded-full h-2"> |
|
|
<div class="bg-neon-purple h-2 rounded-full" style="width: 99%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="activate-tech" class="cyber-button mt-10 w-full"> |
|
|
<i class="fas fa-bolt mr-2"></i> ACTIVER LES TECHNOLOGIES |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="terminal neon-box"> |
|
|
<div class="terminal-header flex items-center"> |
|
|
<div class="flex space-x-2 mr-4"> |
|
|
<div class="w-3 h-3 rounded-full bg-red-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500"></div> |
|
|
</div> |
|
|
<span class="text-xs">nexus-core-terminal</span> |
|
|
</div> |
|
|
<div class="terminal-body"> |
|
|
<div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input">init core_system</span></div> |
|
|
<div class="terminal-line text-purple-300">> Initializing quantum neural network...</div> |
|
|
<div class="terminal-line text-blue-300">> Loading AI modules: 100%</div> |
|
|
<div class="terminal-line text-green-300">> System ready</div> |
|
|
<div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input">run diagnostics</span></div> |
|
|
<div class="terminal-line"> |
|
|
<span class="text-yellow-300">> Running full diagnostic...</span> |
|
|
<div class="mt-2"> |
|
|
<div class="flex"> |
|
|
<span class="w-24">CPU:</span> |
|
|
<span class="text-neon-blue">[||||||||||] 100%</span> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<span class="w-24">MEM:</span> |
|
|
<span class="text-neon-pink">[||||||||| ] 87%</span> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<span class="w-24">Q-BITS:</span> |
|
|
<span class="text-neon-purple">[||||||||||] 100%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="terminal-line"><span class="text-green-400">user@nexus:~$</span> <span class="terminal-input"><span class="cursor"></span></span></div> |
|
|
</div> |
|
|
|
|
|
<button id="terminal-control" class="cyber-button w-full mt-6 border-neon-blue text-neon-blue hover:bg-neon-blue hover:text-black"> |
|
|
<i class="fas fa-terminal mr-2"></i> PRENDRE LE CONTRÔLE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="data-stream"></div> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 relative"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 font-orbitron neon-text">CONTACT</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> |
|
|
<div class="holographic-card p-8"> |
|
|
<h3 class="text-2xl font-bold mb-6 font-orbitron">ENVOYEZ-NOUS UN MESSAGE</h3> |
|
|
|
|
|
<form id="contact-form"> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-300 mb-2">NOM</label> |
|
|
<input type="text" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue focus:ring-1 focus:ring-neon-blue rounded px-4 py-2 outline-none transition duration-300" required> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-300 mb-2">EMAIL</label> |
|
|
<input type="email" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-pink focus:ring-1 focus:ring-neon-pink rounded px-4 py-2 outline-none transition duration-300" required> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-300 mb-2">MESSAGE</label> |
|
|
<textarea rows="5" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-purple focus:ring-1 focus:ring-neon-purple rounded px-4 py-2 outline-none transition duration-300" required></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="cyber-button w-full"> |
|
|
<i class="fas fa-paper-plane mr-2"></i> ENVOYER |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6 font-orbitron">INFORMATIONS</h3> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="text-neon-blue text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-orbitron text-lg mb-1">ADRESSE</h4> |
|
|
<p class="text-gray-300">Nexus Tower, Quantum District<br>Neo-Tokyo, Japon</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-neon-pink text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-orbitron text-lg mb-1">TÉLÉPHONE</h4> |
|
|
<p class="text-gray-300">+81 3-XXXX-XXXX</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="text-neon-purple text-xl mr-4 mt-1"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-orbitron text-lg mb-1">EMAIL</h4> |
|
|
<p class="text-gray-300">contact@nexus.io</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12"> |
|
|
<h4 class="font-orbitron text-lg mb-4">RÉSEAUX SOCIAUX</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-neon-blue flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-black transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-neon-pink flex items-center justify-center text-neon-pink hover:bg-neon-pink hover:text-black transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-neon-purple flex items-center justify-center text-neon-purple hover:bg-neon-purple hover:text-black transition duration-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full border border-neon-blue flex items-center justify-center text-neon-blue hover:bg-neon-blue hover:text-black transition duration-300"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="emergency-contact" class="cyber-button w-full mt-10 border-red-500 text-red-500 hover:bg-red-500 hover:text-black"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> CONTACT D'URGENCE |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black bg-opacity-80 py-12 border-t border-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-6 md:mb-0"> |
|
|
<div class="hexagon-container"> |
|
|
<div class="hexagon"></div> |
|
|
</div> |
|
|
<span class="ml-3 font-orbitron text-xl neon-text">NEXUS</span> |
|
|
</div> |
|
|
|
|
|
<div class="text-center md:text-right"> |
|
|
<p class="text-gray-400 text-sm">© 2023 NEXUS Technologies. Tous droits réservés.</p> |
|
|
<p class="text-gray-500 text-xs mt-2">Interface quantique v4.2.1</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-8 right-8 z-50"> |
|
|
<button id="fab" class="w-16 h-16 rounded-full bg-neon-blue text-black flex items-center justify-center shadow-lg hover:shadow-xl transition duration-300 transform hover:scale-110"> |
|
|
<i class="fas fa-arrow-up text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const particleCount = 500; |
|
|
const particles = new THREE.BufferGeometry(); |
|
|
const particlePositions = new Float32Array(particleCount * 3); |
|
|
const particleSizes = new Float32Array(particleCount); |
|
|
|
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const i3 = i * 3; |
|
|
particlePositions[i3] = (Math.random() - 0.5) * 2000; |
|
|
particlePositions[i3 + 1] = (Math.random() - 0.5) * 2000; |
|
|
particlePositions[i3 + 2] = (Math.random() - 0.5) * 2000; |
|
|
particleSizes[i] = Math.random() * 3; |
|
|
} |
|
|
|
|
|
particles.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3)); |
|
|
particles.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1)); |
|
|
|
|
|
const particleMaterial = new THREE.PointsMaterial({ |
|
|
color: 0x0ff0fc, |
|
|
size: 1, |
|
|
sizeAttenuation: true, |
|
|
transparent: true, |
|
|
opacity: 0.8, |
|
|
blending: THREE.AdditiveBlending |
|
|
}); |
|
|
|
|
|
const particleSystem = new THREE.Points(particles, particleMaterial); |
|
|
|
|
|
|
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
camera.position.z = 100; |
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({ alpha: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
document.getElementById('particles-js').appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
particleSystem.rotation.x += 0.0005; |
|
|
particleSystem.rotation.y += 0.001; |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
animate(); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
gsap.registerPlugin(ScrollTrigger); |
|
|
|
|
|
|
|
|
gsap.utils.toArray('.holographic-card').forEach(card => { |
|
|
gsap.from(card, { |
|
|
scrollTrigger: { |
|
|
trigger: card, |
|
|
start: "top 80%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
y: 50, |
|
|
opacity: 0, |
|
|
duration: 1, |
|
|
ease: "power3.out" |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const terminalLines = document.querySelectorAll('.terminal-line'); |
|
|
let delay = 0; |
|
|
|
|
|
terminalLines.forEach((line, index) => { |
|
|
if (index < terminalLines.length - 1) { |
|
|
gsap.set(line, { opacity: 0 }); |
|
|
gsap.to(line, { |
|
|
scrollTrigger: { |
|
|
trigger: '.terminal', |
|
|
start: "top 70%", |
|
|
toggleActions: "play none none none" |
|
|
}, |
|
|
opacity: 1, |
|
|
delay: delay, |
|
|
duration: 0.5 |
|
|
}); |
|
|
delay += 0.5; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const fab = document.getElementById('fab'); |
|
|
fab.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const cyberButtons = document.querySelectorAll('.cyber-button'); |
|
|
cyberButtons.forEach(button => { |
|
|
button.addEventListener('mouseenter', () => { |
|
|
gsap.to(button, { |
|
|
'text-shadow': '0 0 5px #0ff0fc, 0 0 10px #0ff0fc', |
|
|
duration: 0.3 |
|
|
}); |
|
|
}); |
|
|
|
|
|
button.addEventListener('mouseleave', () => { |
|
|
gsap.to(button, { |
|
|
'text-shadow': 'none', |
|
|
duration: 0.3 |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const headings = document.querySelectorAll('.glitch'); |
|
|
headings.forEach(heading => { |
|
|
if (Math.random() > 0.7) { |
|
|
heading.style.animation = 'none'; |
|
|
void heading.offsetWidth; |
|
|
heading.style.animation = null; |
|
|
} |
|
|
}); |
|
|
}, 3000); |
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', (e) => { |
|
|
const follower = document.createElement('div'); |
|
|
follower.className = 'mouse-follower'; |
|
|
follower.style.position = 'fixed'; |
|
|
follower.style.left = e.clientX + 'px'; |
|
|
follower.style.top = e.clientY + 'px'; |
|
|
follower.style.width = '10px'; |
|
|
follower.style.height = '10px'; |
|
|
follower.style.backgroundColor = 'rgba(0, 255, 252, 0.3)'; |
|
|
follower.style.borderRadius = '50%'; |
|
|
follower.style.pointerEvents = 'none'; |
|
|
follower.style.zIndex = '9999'; |
|
|
follower.style.transform = 'translate(-50%, -50%)'; |
|
|
document.body.appendChild(follower); |
|
|
|
|
|
gsap.to(follower, { |
|
|
scale: 0, |
|
|
opacity: 0, |
|
|
duration: 0.5, |
|
|
onComplete: () => { |
|
|
follower.remove(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const empireBtn = document.getElementById('empire-btn'); |
|
|
const empireBtnMobile = document.getElementById('empire-btn-mobile'); |
|
|
const empirePanel = document.getElementById('empire-panel'); |
|
|
const empireOverlay = document.getElementById('empire-overlay'); |
|
|
const closeEmpire = document.getElementById('close-empire'); |
|
|
const confirmEmpire = document.getElementById('confirm-empire'); |
|
|
const activateAll = document.getElementById('activate-all'); |
|
|
const robotizeAll = document.getElementById('robotize-all'); |
|
|
const autoPilot = document.getElementById('auto-pilot'); |
|
|
const autoPilotIndicator = document.getElementById('auto-pilot-indicator'); |
|
|
const robotModeIndicator = document.getElementById('robot-mode-indicator'); |
|
|
|
|
|
function openEmpirePanel() { |
|
|
empirePanel.style.display = 'block'; |
|
|
empireOverlay.style.display = 'block'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
function closeEmpirePanel() { |
|
|
empirePanel.style.display = 'none'; |
|
|
empireOverlay.style.display = 'none'; |
|
|
document.body.style.overflow = ''; |
|
|
} |
|
|
|
|
|
empireBtn.addEventListener('click', openEmpirePanel); |
|
|
empireBtnMobile.addEventListener('click', openEmpirePanel); |
|
|
closeEmpire.addEventListener('click', closeEmpirePanel); |
|
|
empireOverlay.addEventListener('click', closeEmpirePanel); |
|
|
|
|
|
confirmEmpire.addEventListener('click', () => { |
|
|
closeEmpirePanel(); |
|
|
|
|
|
const confirmation = document.createElement('div'); |
|
|
confirmation.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
confirmation.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-purple text-center max-w-md"> |
|
|
<i class="fas fa-check-circle text-neon-purple text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">EMPIRE CONFIRMÉ</h3> |
|
|
<p class="mb-6">Tous les systèmes sont maintenant sous votre contrôle.</p> |
|
|
<button class="cyber-button px-8" id="close-confirmation">CONTINUER</button> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(confirmation); |
|
|
|
|
|
document.getElementById('close-confirmation').addEventListener('click', () => { |
|
|
confirmation.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
activateAll.addEventListener('click', () => { |
|
|
const serviceButtons = document.querySelectorAll('.activate-service'); |
|
|
serviceButtons.forEach(button => { |
|
|
button.innerHTML = '<i class="fas fa-check mr-2"></i> ACTIVÉ'; |
|
|
button.classList.add('bg-neon-blue', 'text-black'); |
|
|
button.classList.remove('border-neon-blue', 'border-neon-pink', 'border-neon-purple', 'text-neon-blue', 'text-neon-pink', 'text-neon-purple'); |
|
|
|
|
|
|
|
|
const card = button.closest('.holographic-card'); |
|
|
gsap.to(card, { |
|
|
boxShadow: '0 0 30px rgba(0, 255, 252, 0.5)', |
|
|
duration: 0.5, |
|
|
yoyo: true, |
|
|
repeat: 1 |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const activationMessage = document.createElement('div'); |
|
|
activationMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-neon-blue px-4 py-2 rounded font-orbitron z-50'; |
|
|
activationMessage.innerHTML = '<i class="fas fa-bolt mr-2 text-neon-blue"></i> TOUS LES SYSTÈMES ACTIVÉS'; |
|
|
document.body.appendChild(activationMessage); |
|
|
|
|
|
setTimeout(() => { |
|
|
gsap.to(activationMessage, { |
|
|
opacity: 0, |
|
|
duration: 0.5, |
|
|
onComplete: () => activationMessage.remove() |
|
|
}); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
robotizeAll.addEventListener('click', () => { |
|
|
robotModeIndicator.style.display = 'block'; |
|
|
|
|
|
|
|
|
const interactiveElements = document.querySelectorAll('button, a, input, textarea'); |
|
|
interactiveElements.forEach(el => { |
|
|
el.style.transition = 'all 0.3s'; |
|
|
el.style.borderColor = 'var(--neon-blue)'; |
|
|
|
|
|
if (el.tagName === 'BUTTON' || el.tagName === 'A') { |
|
|
el.classList.add('font-orbitron'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const audio = new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...'); |
|
|
audio.volume = 0.3; |
|
|
audio.play(); |
|
|
|
|
|
|
|
|
const robotMessage = document.createElement('div'); |
|
|
robotMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-neon-blue px-4 py-2 rounded font-orbitron z-50'; |
|
|
robotMessage.innerHTML = '<i class="fas fa-robot mr-2 text-neon-blue"></i> MODE ROBOTISÉ ACTIVÉ'; |
|
|
document.body.appendChild(robotMessage); |
|
|
|
|
|
setTimeout(() => { |
|
|
gsap.to(robotMessage, { |
|
|
opacity: 0, |
|
|
duration: 0.5, |
|
|
onComplete: () => robotMessage.remove() |
|
|
}); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
autoPilot.addEventListener('click', () => { |
|
|
autoPilotIndicator.style.display = 'block'; |
|
|
|
|
|
|
|
|
let currentSection = 0; |
|
|
const sections = ['hero', 'services', 'technologies', 'contact']; |
|
|
|
|
|
function autoScroll() { |
|
|
if (currentSection < sections.length) { |
|
|
document.getElementById(sections[currentSection]).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
currentSection++; |
|
|
setTimeout(autoScroll, 3000); |
|
|
} else { |
|
|
currentSection = 0; |
|
|
setTimeout(autoScroll, 3000); |
|
|
} |
|
|
} |
|
|
|
|
|
autoScroll(); |
|
|
|
|
|
|
|
|
const autoPilotMessage = document.createElement('div'); |
|
|
autoPilotMessage.className = 'fixed bottom-4 right-4 bg-black bg-opacity-80 border border-green-500 px-4 py-2 rounded font-orbitron z-50'; |
|
|
autoPilotMessage.innerHTML = '<i class="fas fa-space-shuttle mr-2 text-green-500"></i> AUTOPILOTE ACTIVÉ'; |
|
|
document.body.appendChild(autoPilotMessage); |
|
|
|
|
|
setTimeout(() => { |
|
|
gsap.to(autoPilotMessage, { |
|
|
opacity: 0, |
|
|
duration: 0.5, |
|
|
onComplete: () => autoPilotMessage.remove() |
|
|
}); |
|
|
}, 3000); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
const closeMobileMenu = document.getElementById('close-mobile-menu'); |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
mobileMenu.style.display = 'block'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
}); |
|
|
|
|
|
closeMobileMenu.addEventListener('click', () => { |
|
|
mobileMenu.style.display = 'none'; |
|
|
document.body.style.overflow = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.getElementById('contact-form'); |
|
|
contactForm.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const submitMessage = document.createElement('div'); |
|
|
submitMessage.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
submitMessage.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-blue text-center max-w-md"> |
|
|
<i class="fas fa-paper-plane text-neon-blue text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">MESSAGE ENVOYÉ</h3> |
|
|
<p class="mb-6">Votre message a été transmis aux systèmes centraux.</p> |
|
|
<button class="cyber-button px-8" id="close-submit">CONTINUER</button> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(submitMessage); |
|
|
|
|
|
document.getElementById('close-submit').addEventListener('click', () => { |
|
|
submitMessage.remove(); |
|
|
contactForm.reset(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const emergencyContact = document.getElementById('emergency-contact'); |
|
|
emergencyContact.addEventListener('click', () => { |
|
|
|
|
|
const emergencyPanel = document.createElement('div'); |
|
|
emergencyPanel.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
emergencyPanel.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-red-500 text-center max-w-md"> |
|
|
<i class="fas fa-exclamation-triangle text-red-500 text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">CONTACT D'URGENCE</h3> |
|
|
<p class="mb-6">Activation du protocole d'urgence. Tous les systèmes sont en alerte.</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="cyber-button border-red-500 text-red-500 hover:bg-red-500 hover:text-black" id="confirm-emergency"> |
|
|
<i class="fas fa-check mr-2"></i> CONFIRMER |
|
|
</button> |
|
|
<button class="cyber-button" id="cancel-emergency"> |
|
|
<i class="fas fa-times mr-2"></i> ANNULER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(emergencyPanel); |
|
|
|
|
|
document.getElementById('confirm-emergency').addEventListener('click', () => { |
|
|
|
|
|
document.body.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; |
|
|
setTimeout(() => { |
|
|
document.body.style.backgroundColor = 'var(--dark-bg)'; |
|
|
}, 500); |
|
|
|
|
|
|
|
|
const emergencyActivated = document.createElement('div'); |
|
|
emergencyActivated.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
emergencyActivated.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-red-500 text-center max-w-md"> |
|
|
<i class="fas fa-shield-alt text-red-500 text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">PROTOCOLE ACTIVÉ</h3> |
|
|
<p class="mb-6">Toutes les unités ont été alertées. Assistance en route.</p> |
|
|
<button class="cyber-button border-red-500 text-red-500 hover:bg-red-500 hover:text-black px-8" id="close-emergency"> |
|
|
<i class="fas fa-times mr-2"></i> FERMER |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
emergencyPanel.remove(); |
|
|
document.body.appendChild(emergencyActivated); |
|
|
|
|
|
document.getElementById('close-emergency').addEventListener('click', () => { |
|
|
emergencyActivated.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-emergency').addEventListener('click', () => { |
|
|
emergencyPanel.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const terminalControl = document.getElementById('terminal-control'); |
|
|
terminalControl.addEventListener('click', () => { |
|
|
|
|
|
const terminalBody = document.querySelector('.terminal-body'); |
|
|
const newLines = [ |
|
|
'> Taking control of terminal...', |
|
|
'> Bypassing security protocols...', |
|
|
'> Access granted', |
|
|
'user@nexus:~# <span class="text-neon-blue">systemctl start nexus-core</span>', |
|
|
'> Starting Nexus Core v4.2.1', |
|
|
'> All systems online', |
|
|
'> Welcome, ADMIN' |
|
|
]; |
|
|
|
|
|
let lineDelay = 0; |
|
|
newLines.forEach(line => { |
|
|
setTimeout(() => { |
|
|
const newLine = document.createElement('div'); |
|
|
newLine.className = 'terminal-line'; |
|
|
newLine.innerHTML = line; |
|
|
terminalBody.appendChild(newLine); |
|
|
terminalBody.scrollTop = terminalBody.scrollHeight; |
|
|
}, lineDelay); |
|
|
lineDelay += 500; |
|
|
}); |
|
|
|
|
|
|
|
|
const terminalHeader = document.querySelector('.terminal-header span'); |
|
|
terminalHeader.textContent = 'nexus-core-terminal [ADMIN]'; |
|
|
terminalHeader.classList.add('text-neon-blue'); |
|
|
|
|
|
|
|
|
terminalControl.innerHTML = '<i class="fas fa-check mr-2"></i> CONTRÔLE ACQUIS'; |
|
|
terminalControl.classList.add('bg-neon-blue', 'text-black'); |
|
|
terminalControl.classList.remove('border-neon-blue', 'text-neon-blue'); |
|
|
}); |
|
|
|
|
|
|
|
|
const activateTech = document.getElementById('activate-tech'); |
|
|
activateTech.addEventListener('click', () => { |
|
|
|
|
|
const progressBars = document.querySelectorAll('.h-2.rounded-full'); |
|
|
gsap.to(progressBars[0], { width: '100%', duration: 1, ease: 'power2.out' }); |
|
|
gsap.to(progressBars[1], { width: '100%', duration: 1, ease: 'power2.out', delay: 0.2 }); |
|
|
gsap.to(progressBars[2], { width: '100%', duration: 1, ease: 'power2.out', delay: 0.4 }); |
|
|
|
|
|
|
|
|
activateTech.innerHTML = '<i class="fas fa-check mr-2"></i> TECHNOLOGIES ACTIVÉES'; |
|
|
activateTech.classList.add('bg-neon-blue', 'text-black'); |
|
|
|
|
|
|
|
|
const techSection = document.getElementById('technologies'); |
|
|
gsap.to(techSection, { |
|
|
boxShadow: '0 0 50px rgba(0, 255, 252, 0.3)', |
|
|
duration: 1, |
|
|
yoyo: true, |
|
|
repeat: 1 |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const accessBtn = document.getElementById('access-btn'); |
|
|
accessBtn.addEventListener('click', () => { |
|
|
|
|
|
const accessPanel = document.createElement('div'); |
|
|
accessPanel.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
accessPanel.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-blue text-center max-w-md"> |
|
|
<i class="fas fa-key text-neon-blue text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">ACCÈS SYSTÈME</h3> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-300 mb-2 text-left">IDENTIFIANT</label> |
|
|
<input type="text" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue rounded px-4 py-2 outline-none mb-4"> |
|
|
|
|
|
<label class="block text-gray-300 mb-2 text-left">MOT DE PASSE</label> |
|
|
<input type="password" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 focus:border-neon-blue rounded px-4 py-2 outline-none"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="cyber-button border-neon-blue text-neon-blue hover:bg-neon-blue hover:text-black" id="confirm-access"> |
|
|
<i class="fas fa-unlock mr-2"></i> ACCÉDER |
|
|
</button> |
|
|
<button class="cyber-button" id="cancel-access"> |
|
|
<i class="fas fa-times mr-2"></i> ANNULER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(accessPanel); |
|
|
|
|
|
document.getElementById('confirm-access').addEventListener('click', () => { |
|
|
|
|
|
const successPanel = document.createElement('div'); |
|
|
successPanel.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
successPanel.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-green-500 text-center max-w-md"> |
|
|
<i class="fas fa-check-circle text-green-500 text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">ACCÈS AUTORISÉ</h3> |
|
|
<p class="mb-6">Bienvenue dans le système Nexus Core.</p> |
|
|
<button class="cyber-button border-green-500 text-green-500 hover:bg-green-500 hover:text-black px-8" id="close-access"> |
|
|
<i class="fas fa-arrow-right mr-2"></i> CONTINUER |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
accessPanel.remove(); |
|
|
document.body.appendChild(successPanel); |
|
|
|
|
|
document.getElementById('close-access').addEventListener('click', () => { |
|
|
successPanel.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('cancel-access').addEventListener('click', () => { |
|
|
accessPanel.remove(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const demoBtn = document.getElementById('demo-btn'); |
|
|
demoBtn.addEventListener('click', () => { |
|
|
|
|
|
const demoPanel = document.createElement('div'); |
|
|
demoPanel.className = 'fixed inset-0 flex items-center justify-center z-50'; |
|
|
demoPanel.innerHTML = ` |
|
|
<div class="bg-black bg-opacity-90 p-10 rounded-lg border border-neon-pink text-center max-w-md"> |
|
|
<i class="fas fa-play text-neon-pink text-6xl mb-6"></i> |
|
|
<h3 class="font-orbitron text-2xl mb-4">DÉMO SYSTÈME</h3> |
|
|
<p class="mb-6">Lancement de la démonstration des capacités Nexus...</p> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<button class="cyber-button border-neon-pink text-neon-pink hover:bg-neon-pink hover:text-black" id="confirm-demo"> |
|
|
<i class="fas fa-rocket mr-2"></i> LANCER |
|
|
</button> |
|
|
<button class="cyber-button" id="cancel-demo"> |
|
|
<i class="fas fa-times mr-2"></i> ANNULER |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
document.body.appendChild(demoPanel); |
|
|
|
|
|
document.getElementById('confirm-demo').addEventListener('click', () => { |
|
|
|
|
|
</html> |
