Spaces:
Paused
Paused
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelDrive — Stockage cloud chiffré Zero-Knowledge</title> | |
| <meta name="description" content="Importez, chiffrez (AES-256-GCM) et partagez vos fichiers en toute confidentialité. Stockage cloud zero-knowledge."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:site_name" content="PixelDrive"> | |
| <meta property="og:title" content="PixelDrive — Stockage cloud chiffré Zero-Knowledge"> | |
| <meta property="og:description" content="Importez, chiffrez (AES-256-GCM) et partagez vos fichiers en toute confidentialité."> | |
| <meta property="og:image" content="/banner.png"> | |
| <meta name="theme-color" content="#4f46e5"> | |
| <link rel="icon" type="image/png" href="/banner.png"> | |
| <link rel="manifest" href="/manifest.json"> | |
| <style> | |
| :root { | |
| --bg-dark: #0a0a0f; | |
| --bg-panel: #12121a; | |
| --bg-card: #18181b; | |
| --primary: #6366f1; | |
| --primary-hover: #4f46e5; | |
| --primary-glow: rgba(99, 102, 241, 0.3); | |
| --text-main: #f4f4f5; | |
| --text-muted: #a1a1aa; | |
| --text-dim: #71717a; | |
| --border: #27272a; | |
| --success: #22c55e; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --radius: 12px; | |
| --radius-lg: 20px; | |
| --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font); | |
| background: var(--bg-dark); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* ========== ANIMATIONS ========== */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 0.4; } | |
| 50% { opacity: 0.8; } | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes modalIn { | |
| from { opacity: 0; transform: scale(0.95) translateY(20px); } | |
| to { opacity: 1; transform: scale(1) translateY(0); } | |
| } | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: opacity 0.6s ease, transform 0.6s ease; | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* ========== NAVBAR ========== */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 1000; | |
| padding: 1rem 2rem; | |
| background: rgba(10, 10, 15, 0.8); | |
| backdrop-filter: blur(20px); | |
| border-bottom: 1px solid rgba(39, 39, 42, 0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .navbar.scrolled { | |
| background: rgba(10, 10, 15, 0.95); | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .nav-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .nav-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| text-decoration: none; | |
| } | |
| .nav-logo svg { | |
| width: 32px; | |
| height: 32px; | |
| color: var(--primary); | |
| } | |
| .nav-logo span { | |
| background: linear-gradient(135deg, var(--primary), #a78bfa); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| .nav-links a:not(.btn) { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| cursor: pointer; | |
| } | |
| .nav-links a:not(.btn):hover { color: var(--text-main); } | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| /* ========== BUTTONS ========== */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 10px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| cursor: pointer; | |
| border: none; | |
| font-family: inherit; | |
| } | |
| .btn svg { width: 18px; height: 18px; } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-hover)); | |
| color: white; | |
| box-shadow: 0 4px 15px var(--primary-glow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px var(--primary-glow); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-main); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--primary); | |
| } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text-muted); | |
| } | |
| .btn-ghost:hover { color: var(--text-main); } | |
| .btn-lg { | |
| padding: 1rem 2rem; | |
| font-size: 1.1rem; | |
| border-radius: var(--radius); | |
| } | |
| .btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; } | |
| /* ========== HERO ========== */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 8rem 2rem 4rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg { | |
| position: absolute; | |
| inset: 0; | |
| overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), | |
| radial-gradient(ellipse at 70% 80%, rgba(167, 139, 250, 0.1) 0%, transparent 50%); | |
| animation: pulse 8s ease-in-out infinite; | |
| } | |
| .hero-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.4; | |
| animation: float 10s ease-in-out infinite; | |
| } | |
| .hero-orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: var(--primary); | |
| top: 10%; | |
| right: -10%; | |
| animation-delay: 0s; | |
| } | |
| .hero-orb-2 { | |
| width: 300px; | |
| height: 300px; | |
| background: #a78bfa; | |
| bottom: 10%; | |
| left: -5%; | |
| animation-delay: -3s; | |
| } | |
| .hero-orb-3 { | |
| width: 200px; | |
| height: 200px; | |
| background: var(--success); | |
| top: 50%; | |
| left: 50%; | |
| opacity: 0.2; | |
| animation-delay: -6s; | |
| } | |
| .hero-content { | |
| max-width: 900px; | |
| text-align: center; | |
| position: relative; | |
| z-index: 1; | |
| animation: fadeInUp 0.8s ease; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: 99px; | |
| font-size: 0.85rem; | |
| color: var(--primary); | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-badge svg { width: 16px; height: 16px; } | |
| .hero-title { | |
| font-size: clamp(2.5rem, 6vw, 4.5rem); | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 1.5rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero-title .gradient { | |
| background: linear-gradient(135deg, var(--primary), #a78bfa, var(--primary)); | |
| background-size: 200% 200%; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| animation: gradientShift 5s ease infinite; | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1.1rem, 2vw, 1.35rem); | |
| color: var(--text-muted); | |
| max-width: 650px; | |
| margin: 0 auto 2.5rem; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-legal { | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| margin-bottom: 3rem; | |
| } | |
| .hero-legal a { | |
| color: var(--primary); | |
| text-decoration: underline; | |
| cursor: pointer; | |
| } | |
| .hero-stats { | |
| display: flex; | |
| gap: 3rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| padding-top: 2rem; | |
| border-top: 1px solid var(--border); | |
| } | |
| .hero-stat { | |
| text-align: center; | |
| } | |
| .hero-stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .hero-stat-label { | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| } | |
| /* ========== SECTIONS ========== */ | |
| section { | |
| padding: 6rem 2rem; | |
| position: relative; | |
| } | |
| .section-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .section-header { | |
| text-align: center; | |
| max-width: 700px; | |
| margin: 0 auto 4rem; | |
| } | |
| .section-tag { | |
| display: inline-block; | |
| padding: 0.4rem 1rem; | |
| background: rgba(99, 102, 241, 0.1); | |
| border-radius: 99px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 1rem; | |
| } | |
| .section-title { | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .section-desc { | |
| font-size: 1.1rem; | |
| color: var(--text-muted); | |
| } | |
| /* ========== FEATURES ========== */ | |
| .features-section { | |
| background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-panel) 50%, var(--bg-dark) 100%); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .feature-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--primary), transparent); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(99, 102, 241, 0.5); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| } | |
| .feature-card:hover::before { opacity: 1; } | |
| .feature-icon { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.25rem; | |
| } | |
| .feature-icon svg { width: 28px; height: 28px; } | |
| .feature-icon.purple { background: rgba(99, 102, 241, 0.15); color: var(--primary); } | |
| .feature-icon.green { background: rgba(34, 197, 94, 0.15); color: var(--success); } | |
| .feature-icon.orange { background: rgba(245, 158, 11, 0.15); color: var(--warning); } | |
| .feature-icon.red { background: rgba(239, 68, 68, 0.15); color: var(--danger); } | |
| .feature-icon.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; } | |
| .feature-icon.pink { background: rgba(236, 72, 153, 0.15); color: #ec4899; } | |
| .feature-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .feature-desc { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| } | |
| /* ========== HOW IT WORKS ========== */ | |
| .steps-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| position: relative; | |
| } | |
| .step-card { | |
| text-align: center; | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .step-number { | |
| width: 64px; | |
| height: 64px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--primary-hover)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin: 0 auto 1.5rem; | |
| box-shadow: 0 8px 30px var(--primary-glow); | |
| } | |
| .step-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .step-desc { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| } | |
| /* ========== SECURITY ========== */ | |
| .security-section { | |
| background: var(--bg-panel); | |
| } | |
| .security-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .security-visual { | |
| position: relative; | |
| } | |
| .security-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2rem; | |
| position: relative; | |
| } | |
| .security-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .security-lock { | |
| width: 48px; | |
| height: 48px; | |
| background: rgba(34, 197, 94, 0.15); | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--success); | |
| } | |
| .security-lock svg { width: 24px; height: 24px; } | |
| .security-card-title { font-weight: 600; } | |
| .security-card-subtitle { font-size: 0.85rem; color: var(--text-dim); } | |
| .encryption-demo { | |
| font-family: 'SF Mono', Monaco, Consolas, monospace; | |
| font-size: 0.8rem; | |
| background: var(--bg-dark); | |
| border-radius: 10px; | |
| padding: 1.25rem; | |
| overflow-x: auto; | |
| } | |
| .encryption-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid rgba(39, 39, 42, 0.5); | |
| } | |
| .encryption-line:last-child { border-bottom: none; } | |
| .encryption-label { | |
| color: var(--text-dim); | |
| min-width: 80px; | |
| } | |
| .encryption-value { | |
| color: var(--success); | |
| word-break: break-all; | |
| } | |
| .encryption-value.encrypted { color: var(--primary); } | |
| .security-points { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .security-point { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: flex-start; | |
| } | |
| .security-point-icon { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 10px; | |
| background: rgba(99, 102, 241, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--primary); | |
| flex-shrink: 0; | |
| } | |
| .security-point-icon svg { width: 22px; height: 22px; } | |
| .security-point-title { | |
| font-weight: 600; | |
| margin-bottom: 0.25rem; | |
| } | |
| .security-point-desc { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* ========== SPECS ========== */ | |
| .specs-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| margin-top: 3rem; | |
| } | |
| .spec-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| text-align: center; | |
| } | |
| .spec-value { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin-bottom: 0.25rem; | |
| } | |
| .spec-label { | |
| font-size: 0.85rem; | |
| color: var(--text-dim); | |
| } | |
| /* ========== LEGAL NOTICE ========== */ | |
| .legal-section { | |
| background: var(--bg-dark); | |
| } | |
| .legal-box { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 2.5rem; | |
| } | |
| .legal-box h3 { | |
| font-size: 1.3rem; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .legal-box h3 svg { width: 22px; height: 22px; color: var(--warning); } | |
| .legal-box p { | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| font-size: 0.95rem; | |
| } | |
| .legal-box ul { | |
| color: var(--text-muted); | |
| padding-left: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| font-size: 0.95rem; | |
| } | |
| .legal-box ul li { margin-bottom: 0.5rem; } | |
| .legal-box .legal-cta { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| /* ========== CTA ========== */ | |
| .cta-section { | |
| background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-panel) 100%); | |
| text-align: center; | |
| } | |
| .cta-box { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(167, 139, 250, 0.05)); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| border-radius: var(--radius-lg); | |
| padding: 4rem 3rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta-box::before { | |
| content: ''; | |
| position: absolute; | |
| top: -100px; | |
| right: -100px; | |
| width: 300px; | |
| height: 300px; | |
| background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .cta-title { | |
| font-size: clamp(1.8rem, 4vw, 2.5rem); | |
| font-weight: 700; | |
| margin-bottom: 1rem; | |
| } | |
| .cta-desc { | |
| color: var(--text-muted); | |
| margin-bottom: 2rem; | |
| font-size: 1.1rem; | |
| } | |
| .cta-features { | |
| display: flex; | |
| gap: 2rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| margin-top: 2rem; | |
| font-size: 0.9rem; | |
| color: var(--text-dim); | |
| } | |
| .cta-feature { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .cta-feature svg { width: 16px; height: 16px; color: var(--success); } | |
| /* ========== FOOTER ========== */ | |
| .footer { | |
| background: var(--bg-panel); | |
| border-top: 1px solid var(--border); | |
| padding: 3rem 2rem; | |
| } | |
| .footer-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .footer-top { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| } | |
| .footer-logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| } | |
| .footer-logo svg { width: 24px; height: 24px; color: var(--primary); } | |
| .footer-links { | |
| display: flex; | |
| gap: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: color 0.2s; | |
| cursor: pointer; | |
| } | |
| .footer-links a:hover { color: var(--text-main); } | |
| .footer-bottom { | |
| padding-top: 1.5rem; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .footer-copy { | |
| color: var(--text-dim); | |
| font-size: 0.85rem; | |
| } | |
| .footer-legal-links { | |
| display: flex; | |
| gap: 1.5rem; | |
| } | |
| .footer-legal-links a { | |
| color: var(--text-dim); | |
| text-decoration: none; | |
| font-size: 0.8rem; | |
| cursor: pointer; | |
| transition: color 0.2s; | |
| } | |
| .footer-legal-links a:hover { color: var(--primary); } | |
| /* ========== MODAL CGU ========== */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| backdrop-filter: blur(4px); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| padding: 1rem; | |
| } | |
| .modal-overlay.active { display: flex; } | |
| .modal { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| width: 100%; | |
| max-width: 700px; | |
| padding: 1.5rem; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| animation: modalIn 0.3s ease; | |
| } | |
| .modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-title { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .modal-title svg { width: 22px; height: 22px; color: var(--primary); } | |
| .close-modal { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 8px; | |
| transition: all 0.2s; | |
| } | |
| .close-modal:hover { background: rgba(255,255,255,0.1); color: var(--text-main); } | |
| .close-modal svg { width: 20px; height: 20px; } | |
| .tos-frame { | |
| width: 100%; | |
| height: 55vh; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--bg-dark); | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .modal-actions .btn { flex: 1; } | |
| /* ========== MOBILE MENU ========== */ | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-main); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| } | |
| .mobile-menu-btn svg { width: 24px; height: 24px; } | |
| /* ========== RESPONSIVE ========== */ | |
| @media (max-width: 900px) { | |
| .security-grid { | |
| grid-template-columns: 1fr; | |
| gap: 3rem; | |
| } | |
| .nav-links { display: none; } | |
| .mobile-menu-btn { display: block; } | |
| .nav-actions .btn-ghost { display: none; } | |
| } | |
| @media (max-width: 600px) { | |
| section { padding: 4rem 1.5rem; } | |
| .hero { padding: 7rem 1.5rem 3rem; } | |
| .hero-stats { gap: 1.5rem; } | |
| .cta-box { padding: 2.5rem 1.5rem; } | |
| .footer-top, .footer-bottom { flex-direction: column; text-align: center; } | |
| .features-grid { grid-template-columns: 1fr; } | |
| .legal-box { padding: 1.5rem; } | |
| .modal { padding: 1.25rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAVBAR --> | |
| <nav class="navbar" id="navbar"> | |
| <div class="nav-container"> | |
| <a href="/" class="nav-logo"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| <span>PixelDrive</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#features">Fonctionnalités</a> | |
| <a href="#how-it-works">Comment ça marche</a> | |
| <a href="#security">Sécurité</a> | |
| <a onclick="openTos()">CGU</a> | |
| </div> | |
| <div class="nav-actions"> | |
| <a href="/panel" class="btn btn-ghost">Se connecter</a> | |
| <a href="/panel" class="btn btn-primary btn-sm">Créer un compte</a> | |
| <button class="mobile-menu-btn" onclick="toggleMobileMenu()"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="hero-bg"> | |
| <div class="hero-orb hero-orb-1"></div> | |
| <div class="hero-orb hero-orb-2"></div> | |
| <div class="hero-orb hero-orb-3"></div> | |
| </div> | |
| <div class="hero-content"> | |
| <div class="hero-badge"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> | |
| Chiffrement Zero-Knowledge | |
| </div> | |
| <h1 class="hero-title"> | |
| Vos fichiers, <span class="gradient">chiffrés</span> et<br> | |
| <span class="gradient">inviolables</span>. | |
| </h1> | |
| <p class="hero-subtitle"> | |
| PixelDrive est un cloud de stockage nouvelle génération où vos fichiers sont chiffrés avec AES-256-GCM avant même d'être stockés. Personne ne peut les lire. Pas même nous. | |
| </p> | |
| <div class="hero-actions"> | |
| <a href="/panel" class="btn btn-primary btn-lg"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg> | |
| Créer un compte gratuit | |
| </a> | |
| <a href="/panel" class="btn btn-secondary btn-lg"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg> | |
| Se connecter | |
| </a> | |
| </div> | |
| <p class="hero-legal"> | |
| En créant un compte, vous acceptez nos | |
| <a onclick="openTos()">Conditions Générales d'Utilisation</a>. | |
| Vous êtes seul responsable du contenu que vous stockez. | |
| </p> | |
| <div class="hero-stats"> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">100 Go</div> | |
| <div class="hero-stat-label">de stockage par utilisateur</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">AES-256</div> | |
| <div class="hero-stat-label">chiffrement militaire</div> | |
| </div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">100 Go</div> | |
| <div class="hero-stat-label">de transfert par jour</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FEATURES --> | |
| <section id="features" class="features-section"> | |
| <div class="section-container"> | |
| <div class="section-header animate-on-scroll"> | |
| <span class="section-tag">Fonctionnalités</span> | |
| <h2 class="section-title">Tout ce dont vous avez besoin,<br>rien de superflu</h2> | |
| <p class="section-desc">Une interface épurée, des fonctionnalités puissantes, et une confidentialité absolue.</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon purple"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> | |
| </div> | |
| <h3 class="feature-title">Chiffrement Zero-Knowledge</h3> | |
| <p class="feature-desc">Vos fichiers sont chiffrés avec AES-256-GCM avant leur stockage. Les clés de déchiffrement ne quittent jamais le processus de traitement. Nous ne pouvons techniquement pas lire vos données.</p> | |
| </div> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon green"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg> | |
| </div> | |
| <h3 class="feature-title">Partage flexible</h3> | |
| <p class="feature-desc">Créez des liens publics avec expiration automatique (1h à 30 jours), partagez avec des utilisateurs spécifiques en lecture ou écriture, et générez des QR codes instantanément.</p> | |
| </div> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon orange"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> | |
| </div> | |
| <h3 class="feature-title">Galerie & Aperçu intégré</h3> | |
| <p class="feature-desc">Visualisez vos images, vidéos, fichiers audio et PDF directement dans le navigateur. Votre galerie photos s'affiche en vue masonry élégante avec génération automatique de miniatures.</p> | |
| </div> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon red"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg> | |
| </div> | |
| <h3 class="feature-title">Éditeur de texte intégré</h3> | |
| <p class="feature-desc">Modifiez vos fichiers texte, code, Markdown et JSON directement dans PixelDrive. Rendu Markdown en temps réel et coloration pour tous vos fichiers de développement.</p> | |
| </div> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon blue"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg> | |
| </div> | |
| <h3 class="feature-title">Application Web Progressive</h3> | |
| <p class="feature-desc">Installez PixelDrive sur votre téléphone ou votre ordinateur comme une vraie application. Fonctionne hors-ligne pour l'interface, avec un thème sombre ou clair.</p> | |
| </div> | |
| <div class="feature-card animate-on-scroll"> | |
| <div class="feature-icon pink"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg> | |
| </div> | |
| <h3 class="feature-title">Suivi d'activité complet</h3> | |
| <p class="feature-desc">Historique détaillé de toutes vos actions : uploads, téléchargements, partages, modifications. Statistiques de stockage avec graphiques sur 7 jours et notifications en temps réel.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- HOW IT WORKS --> | |
| <section id="how-it-works"> | |
| <div class="section-container"> | |
| <div class="section-header animate-on-scroll"> | |
| <span class="section-tag">Simplicité</span> | |
| <h2 class="section-title">Comment ça marche ?</h2> | |
| <p class="section-desc">Trois étapes simples pour un stockage véritablement privé.</p> | |
| </div> | |
| <div class="steps-grid"> | |
| <div class="step-card animate-on-scroll"> | |
| <div class="step-number">1</div> | |
| <h3 class="step-title">Importez vos fichiers</h3> | |
| <p class="step-desc">Glissez-déposez, collez depuis votre presse-papiers ou sélectionnez vos fichiers. L'upload se fait par chunks de 5 Mo avec reprise automatique en cas d'interruption.</p> | |
| </div> | |
| <div class="step-card animate-on-scroll"> | |
| <div class="step-number">2</div> | |
| <h3 class="step-title">Chiffrement automatique</h3> | |
| <p class="step-desc">Chaque fichier est chiffré avec une clé unique AES-256-GCM, transformé en données binaires puis stocké de manière distribuée. Le fichier original n'est jamais conservé.</p> | |
| </div> | |
| <div class="step-card animate-on-scroll"> | |
| <div class="step-number">3</div> | |
| <h3 class="step-title">Partagez en sécurité</h3> | |
| <p class="step-desc">Générez des liens publics éphémères avec QR code, ou partagez directement avec d'autres utilisateurs PixelDrive avec permissions granulaires (lecture/écriture).</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECURITY --> | |
| <section id="security" class="security-section"> | |
| <div class="section-container"> | |
| <div class="section-header animate-on-scroll"> | |
| <span class="section-tag">Sécurité</span> | |
| <h2 class="section-title">Une architecture pensée<br>pour la confidentialité</h2> | |
| </div> | |
| <div class="security-grid"> | |
| <div class="security-visual animate-on-scroll"> | |
| <div class="security-card"> | |
| <div class="security-card-header"> | |
| <div class="security-lock"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg> | |
| </div> | |
| <div> | |
| <div class="security-card-title">Chiffrement AES-256-GCM</div> | |
| <div class="security-card-subtitle">Standard militaire</div> | |
| </div> | |
| </div> | |
| <div class="encryption-demo"> | |
| <div class="encryption-line"> | |
| <span class="encryption-label">Original</span> | |
| <span class="encryption-value">document_confidentiel.pdf</span> | |
| </div> | |
| <div class="encryption-line"> | |
| <span class="encryption-label">Clé</span> | |
| <span class="encryption-value">7f3a9b2c... (256 bits)</span> | |
| </div> | |
| <div class="encryption-line"> | |
| <span class="encryption-label">IV</span> | |
| <span class="encryption-value">96 bits aléatoires</span> | |
| </div> | |
| <div class="encryption-line"> | |
| <span class="encryption-label">Résultat</span> | |
| <span class="encryption-value encrypted">█▓▒░ a8f2c9e1... ░▒▓█</span> | |
| </div> | |
| <div class="encryption-line"> | |
| <span class="encryption-label">Auth</span> | |
| <span class="encryption-value">Tag GCM 128 bits ✓</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="security-points animate-on-scroll"> | |
| <div class="security-point"> | |
| <div class="security-point-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> | |
| </div> | |
| <div> | |
| <div class="security-point-title">Zero-Knowledge par conception</div> | |
| <p class="security-point-desc">Les clés de déchiffrement sont dérivées de secrets serveur et ne sont jamais exposées. Même en cas de piratage de la base de données, vos fichiers restent illisibles.</p> | |
| </div> | |
| </div> | |
| <div class="security-point"> | |
| <div class="security-point-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> | |
| </div> | |
| <div> | |
| <div class="security-point-title">Liens éphémères</div> | |
| <p class="security-point-desc">Tous les liens de partage expirent automatiquement après la durée choisie (1h, 24h, 7 jours ou 30 jours). Aucune trace permanente de vos partages.</p> | |
| </div> | |
| </div> | |
| <div class="security-point"> | |
| <div class="security-point-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg> | |
| </div> | |
| <div> | |
| <div class="security-point-title">Mots de passe renforcés</div> | |
| <p class="security-point-desc">Hachage avec scrypt et sel unique par utilisateur. Comparaison à temps constant pour prévenir les attaques par timing. Minimum 8 caractères requis.</p> | |
| </div> | |
| </div> | |
| <div class="security-point"> | |
| <div class="security-point-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> | |
| </div> | |
| <div> | |
| <div class="security-point-title">Protection NSFW</div> | |
| <p class="security-point-desc">Analyse automatique des images uploadées via modèle IA pour bloquer les contenus inappropriés, garantissant une plateforme saine pour tous.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="specs-grid animate-on-scroll"> | |
| <div class="spec-card"> | |
| <div class="spec-value">100 Go</div> | |
| <div class="spec-label">Stockage par utilisateur</div> | |
| </div> | |
| <div class="spec-card"> | |
| <div class="spec-value">100 Go</div> | |
| <div class="spec-label">Transfert quotidien</div> | |
| </div> | |
| <div class="spec-card"> | |
| <div class="spec-value">5 Mo</div> | |
| <div class="spec-label">Taille des chunks</div> | |
| </div> | |
| <div class="spec-card"> | |
| <div class="spec-value">30 jours</div> | |
| <div class="spec-label">Durée max des liens</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LEGAL NOTICE --> | |
| <section class="legal-section"> | |
| <div class="section-container"> | |
| <div class="legal-box animate-on-scroll"> | |
| <h3> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| Responsabilité de l'utilisateur | |
| </h3> | |
| <p> | |
| PixelDrive est un outil de stockage neutre. En utilisant ce service, vous reconnaissez et acceptez que : | |
| </p> | |
| <ul> | |
| <li><strong>Vous êtes seul responsable</strong> du contenu que vous stockez, partagez et diffusez via PixelDrive.</li> | |
| <li><strong>Vous garantissez</strong> détenir tous les droits nécessaires sur les fichiers que vous hébergez.</li> | |
| <li><strong>Vous vous engagez</strong> à ne pas stocker de contenu illégal, diffamatoire, ou portant atteinte aux droits d'autrui.</li> | |
| <li><strong>Le chiffrement</strong> de vos fichiers est irréversible sans la clé. En cas de perte de vos identifiants, vos données sont définitivement perdues.</li> | |
| <li><strong>PixelDrive ne peut en aucun cas</strong> être tenu responsable de l'usage fait des fichiers par ses utilisateurs.</li> | |
| </ul> | |
| <p> | |
| Pour plus de détails, veuillez lire attentivement nos Conditions Générales d'Utilisation avant de créer un compte. | |
| </p> | |
| <div class="legal-cta"> | |
| <button class="btn btn-secondary" onclick="openTos()"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg> | |
| Lire les CGU complètes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="cta-section"> | |
| <div class="section-container"> | |
| <div class="cta-box animate-on-scroll"> | |
| <h2 class="cta-title">Prêt à sécuriser vos fichiers ?</h2> | |
| <p class="cta-desc">Créez votre compte en 30 secondes et commencez à stocker vos fichiers en toute confidentialité.</p> | |
| <a href="/panel" class="btn btn-primary btn-lg"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5v14"/></svg> | |
| Commencer gratuitement | |
| </a> | |
| <div class="cta-features"> | |
| <div class="cta-feature"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> | |
| Aucun engagement | |
| </div> | |
| <div class="cta-feature"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> | |
| Installation PWA | |
| </div> | |
| <div class="cta-feature"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> | |
| Chiffré de bout en bout | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer class="footer"> | |
| <div class="footer-container"> | |
| <div class="footer-top"> | |
| <div class="footer-logo"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/> | |
| </svg> | |
| PixelDrive | |
| </div> | |
| <div class="footer-links"> | |
| <a href="#features">Fonctionnalités</a> | |
| <a href="#security">Sécurité</a> | |
| <a href="/panel">Accéder à l'app</a> | |
| <a onclick="openTos()">CGU</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <div class="footer-copy">© 2026 PixelDrive. Stockage cloud chiffré Zero-Knowledge. Tous droits réservés.</div> | |
| <div class="footer-legal-links"> | |
| <a onclick="openTos()">Conditions Générales d'Utilisation</a> | |
| <a onclick="openTos()">Mentions légales</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- MODAL CGU --> | |
| <div class="modal-overlay" id="tos-modal" onclick="if(event.target === this) closeTos()"> | |
| <div class="modal"> | |
| <div class="modal-header"> | |
| <div class="modal-title"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> | |
| Conditions Générales d'Utilisation | |
| </div> | |
| <button class="close-modal" onclick="closeTos()"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <iframe id="tos-frame" src="/tos.html" class="tos-frame" title="CGU PixelDrive"></iframe> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeTos()">Fermer</button> | |
| <button class="btn btn-primary" onclick="closeTos(); window.location.href='/panel';">J'accepte et je crée un compte</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // ========== NAVBAR SCROLL ========== | |
| window.addEventListener('scroll', () => { | |
| document.getElementById('navbar').classList.toggle('scrolled', window.scrollY > 50); | |
| }); | |
| // ========== ANIMATE ON SCROLL ========== | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach((entry, i) => { | |
| if (entry.isIntersecting) { | |
| setTimeout(() => entry.target.classList.add('visible'), i * 100); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el)); | |
| // ========== SMOOTH SCROLL ========== | |
| document.querySelectorAll('a[href^="#"]').forEach(a => { | |
| a.addEventListener('click', e => { | |
| e.preventDefault(); | |
| const t = document.querySelector(a.getAttribute('href')); | |
| if (t) t.scrollIntoView({ behavior: 'smooth' }); | |
| }); | |
| }); | |
| // ========== MODAL CGU ========== | |
| function openTos() { | |
| document.getElementById('tos-modal').classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| function closeTos() { | |
| document.getElementById('tos-modal').classList.remove('active'); | |
| document.body.style.overflow = ''; | |
| } | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') closeTos(); | |
| }); | |
| // ========== MOBILE MENU ========== | |
| function toggleMobileMenu() { | |
| const links = document.querySelector('.nav-links'); | |
| links.style.display = links.style.display === 'flex' ? 'none' : 'flex'; | |
| links.style.position = 'absolute'; | |
| links.style.top = '100%'; | |
| links.style.left = '0'; | |
| links.style.right = '0'; | |
| links.style.flexDirection = 'column'; | |
| links.style.background = 'rgba(10, 10, 15, 0.98)'; | |
| links.style.padding = '1rem 2rem 2rem'; | |
| links.style.borderBottom = '1px solid var(--border)'; | |
| links.style.gap = '1rem'; | |
| } | |
| </script> | |
| </body> | |
| </html> |