MODE ULTRA

OFFRE LIMITEE

25,31 €

Quantité

Référence de l'article: 6534 HEBZ 7483 HIER 7863 ECZO 9874 HERB 9843 HEBF 8245 EFHJ

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interface Futuriste</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div class="background"></div> <div class="grid"></div>  <header class="navbar"> <div class="logo">NEXUS</div> <nav> <button onclick="showSection('accueil')">Accueil</button> <button onclick="showSection('dashboard')">Dashboard</button> <button onclick="showSection('profil')">Profil</button> <button onclick="showSection('parametres')">Paramètres</button> </nav> <button class="menu-button" onclick="toggleMenu()">☰</button> </header>  <main>  <section id="accueil" class="section active"> <div class="hero"> <div class="hero-content"> <span class="badge">SYSTEM ONLINE</span> <h1> Bienvenue dans <span>le futur.</span> </h1> <p> Une interface moderne, rapide et adaptable à presque tous les projets web. </p> <div class="actions"> <button class="button primary" onclick="startApplication()"> Lancer </button> <button class="button secondary" onclick="showSection('dashboard')"> Explorer </button> </div> </div> </div> </section>  <section id="dashboard" class="section"> <h2>Dashboard</h2> <div class="cards"> <div class="card"> <span class="icon">◈</span> <h3>Connexion</h3> <p id="connectionStatus">En attente</p> </div> <div class="card"> <span class="icon">◉</span> <h3>Utilisation</h3> <p id="usage">0</p> </div> <div class="card"> <span class="icon">◇</span> <h3>Statut</h3> <p id="systemStatus">Actif</p> </div> </div> <button class="button primary" onclick="connectApplication()"> Connecter </button> </section>  <section id="profil" class="section"> <h2>Profil</h2> <div class="profile-card"> <div class="avatar"> N </div> <div> <h3 id="nickname">Utilisateur</h3> <p id="creationDate"> Date de création : inconnue </p> </div> </div> </section>  <section id="parametres" class="section"> <h2>Paramètres</h2> <div class="settings"> <label> Couleur principale <input type="color" id="colorPicker" value="#00ffff" onchange="changeColor()"> </label> <label> Mode lumineux <input type="checkbox" id="lightMode" onchange="toggleLightMode()"> </label> <label> Animations <input type="checkbox" id="animations" checked onchange="toggleAnimations()"> </label> </div> </section> </main>  <div id="notification" class="notification"> Action effectuée </div> <script src="script.js"></script> </body> </html>

/* ===================================================== VARIABLES PRINCIPALES ===================================================== */ :root { /* Couleurs */ --primary: #00ffff; --secondary: #7c3cff; --background: #050711; --background-2: #0b1020; --text: #ffffff; --text-muted: #9ca3af; /* Transparence */ --glass: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.12); /* Effets */ --blur: 20px; --glow: 0 0 30px rgba(0, 255, 255, 0.35); /* Dimensions */ --radius: 20px; --max-width: 1200px; /* Animations */ --speed: 0.3s; } /* ===================================================== RESET ===================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-height: 100vh; background: radial-gradient( circle at 20% 20%, rgba(0,255,255,0.10), transparent 30% ), radial-gradient( circle at 80% 80%, rgba(124,60,255,0.12), transparent 30% ), var(--background); color: var(--text); font-family: Inter, Arial, sans-serif; overflow-x: hidden; } /* ===================================================== FOND ===================================================== */ .background { position: fixed; inset: 0; z-index: -3; background: linear-gradient( rgba(5,7,17,0.55), rgba(5,7,17,0.85) ), url("background.jpg"); background-size: cover; background-position: center; filter: saturate(1.2); } .grid { position: fixed; inset: 0; z-index: -2; opacity: 0.15; background-image: linear-gradient( rgba(255,255,255,0.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.08) 1px, transparent 1px ); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) scale(1.5); } /* ===================================================== NAVIGATION ===================================================== */ .navbar { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: min( calc(100% - 40px), var(--max-width) ); padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(var(--blur)); z-index: 1000; } .logo { font-size: 20px; font-weight: 800; letter-spacing: 4px; color: var(--primary); text-shadow: 0 0 15px var(--primary); } nav { display: flex; gap: 10px; } nav button, .menu-button { border: 0; background: transparent; color: var(--text-muted); padding: 10px 15px; border-radius: 10px; cursor: pointer; transition: var(--speed); } nav button:hover, .menu-button:hover { color: var(--primary); background: rgba(0,255,255,0.08); } /* ===================================================== SECTIONS ===================================================== */ main { width: min( calc(100% - 40px), var(--max-width) ); margin: auto; } .section { min-height: 100vh; padding-top: 130px; display: none; animation: sectionIn 0.5s ease; } .section.active { display: block; } @keyframes sectionIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== HERO ===================================================== */ .hero { min-height: 80vh; display: flex; align-items: center; } .hero-content { max-width: 750px; } .badge { display: inline-block; padding: 8px 14px; border: 1px solid var(--primary); border-radius: 50px; color: var(--primary); font-size: 12px; letter-spacing: 2px; margin-bottom: 25px; } h1 { font-size: clamp( 50px, 9vw, 110px ); line-height: 0.95; margin-bottom: 30px; } h1 span { color: var(--primary); text-shadow: 0 0 30px var(--primary); } h2 { font-size: 45px; margin-bottom: 35px; } .hero p { color: var(--text-muted); font-size: 18px; line-height: 1.7; max-width: 600px; } /* ===================================================== BOUTONS ===================================================== */ .actions { display: flex; gap: 15px; margin-top: 35px; flex-wrap: wrap; } .button { border: 0; padding: 15px 28px; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform var(--speed), box-shadow var(--speed); } .button:hover { transform: translateY(-4px); } .primary { background: var(--primary); color: #001010; box-shadow: var(--glow); } .secondary { background: var(--glass); color: white; border: 1px solid var(--glass-border); backdrop-filter: blur(10px); } /* ===================================================== CARTES ===================================================== */ .cards { display: grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap: 20px; margin-bottom: 30px; } .card { padding: 30px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); transition: transform var(--speed), border var(--speed); } .card:hover { transform: translateY(-8px) scale(1.02); border-color: var(--primary); } .icon { font-size: 35px; color: var(--primary); } .card h3 { margin-top: 20px; margin-bottom: 10px; } .card p { color: var(--text-muted); } /* ===================================================== PROFIL ===================================================== */ .profile-card { display: flex; align-items: center; gap: 20px; padding: 30px; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur)); } .avatar { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #001010; font-size: 28px; font-weight: bold; box-shadow: var(--glow); } /* ===================================================== PARAMETRES ===================================================== */ .settings { display: grid; gap: 20px; } .settings label { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); } /* ===================================================== NOTIFICATION ===================================================== */ .notification { position: fixed; right: 25px; bottom: 25px; padding: 15px 20px; border-radius: 12px; background: rgba(0,0,0,0.8); border: 1px solid var(--primary); color: var(--primary); transform: translateY(100px); opacity: 0; transition: 0.3s; z-index: 2000; } .notification.show { transform: translateY(0); opacity: 1; } /* ===================================================== MOBILE ===================================================== */ .menu-button { display: none; } @media (max-width: 700px) { nav { display: none; } .menu-button { display: block; } h1 { font-size: 55px; } }

3. script.js

/* ===================================================== VARIABLES ===================================================== */ let applicationActive = false; let connectionActive = false; let usageCount = 0; let nickname = "Utilisateur"; let creationDate = new Date(); let animationsEnabled = true; /* ===================================================== NAVIGATION ===================================================== */ function showSection(sectionName) { const sections = document.querySelectorAll(".section"); sections.forEach(section => { section.classList.remove("active"); }); const selected = document.getElementById(sectionName); if (selected) { selected.classList.add("active"); window.scrollTo({ top: 0, behavior: "smooth" }); } } /* ===================================================== MENU ===================================================== */ function toggleMenu() { const nav = document.querySelector("nav"); if (nav.style.display === "flex") { nav.style.display = "none"; } else { nav.style.display = "flex"; nav.style.flexDirection = "column"; } } /* ===================================================== LANCER APPLICATION ===================================================== */ function startApplication() { applicationActive = true; usageCount++; document.getElementById("usage") .textContent = usageCount; showNotification( "Application lancée" ); } /* ===================================================== CONNEXION ===================================================== */ function connectApplication() { connectionActive = true; document.getElementById( "connectionStatus" ).textContent = "Connecté"; showNotification( "Connexion établie" ); } /* ===================================================== NOTIFICATION ===================================================== */ function showNotification(message) { const notification = document.getElementById( "notification" ); notification.textContent = message; notification.classList.add("show"); setTimeout(() => { notification.classList.remove("show"); }, 2500); } /* ===================================================== COULEUR ===================================================== */ function changeColor() { const color = document.getElementById( "colorPicker" ).value; document.documentElement .style .setProperty( "--primary", color ); } /* ===================================================== MODE LUMINEUX ===================================================== */ function toggleLightMode() { const enabled = document.getElementById( "lightMode" ).checked; if (enabled) { document.documentElement .style .setProperty( "--background", "#eeeeee" ); document.documentElement .style .setProperty( "--text", "#111111" ); } else { document.documentElement .style .setProperty( "--background", "#050711" ); document.documentElement .style .setProperty( "--text", "#ffffff" ); } } /* ===================================================== ANIMATIONS ===================================================== */ function toggleAnimations() { animationsEnabled = document.getElementById( "animations" ).checked; if (!animationsEnabled) { document.documentElement .style .setProperty( "--speed", "0s" ); } else { document.documentElement .style .setProperty( "--speed", "0.3s" ); } } /* ===================================================== PROFIL ===================================================== */ document.getElementById( "nickname" ).textContent = nickname; document.getElementById( "creationDate" ).textContent = "Date de création : " + creationDate.toLocaleDateString( "fr-FR" );