Spaces:
No application file
No application file
| @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| :root { | |
| --accent: #00c896; | |
| --accent-soft: #e6faf4; | |
| --accent-dim: rgba(0, 200, 150, 0.15); | |
| --dark: #0d1117; | |
| --card-bg: #ffffff; | |
| --text-primary: #0d1117; | |
| --text-muted: #6b7280; | |
| --border: #e5e7eb; | |
| } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-primary); | |
| background: #f5f7fa; | |
| min-height: 100vh; | |
| } | |
| h1, h2 { font-family: 'Syne', sans-serif; } | |
| .bg-grid { | |
| position: fixed; inset: 0; z-index: 0; pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(0, 200, 150, 0.04) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 200, 150, 0.04) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .hero { | |
| position: relative; z-index: 1; | |
| padding: 5rem 2rem 0; | |
| text-align: center; | |
| display: flex; flex-direction: column; align-items: center; | |
| } | |
| .badge { | |
| display: inline-block; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; | |
| color: var(--accent); background: var(--accent-dim); | |
| border: 1px solid rgba(0, 200, 150, 0.3); border-radius: 100px; | |
| padding: 0.3rem 0.9rem; margin-bottom: 1.4rem; | |
| animation: fadeDown 0.5s ease both; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.4rem, 6vw, 3.8rem); font-weight: 800; | |
| color: var(--dark); letter-spacing: -0.02em; | |
| animation: fadeDown 0.5s 0.1s ease both; | |
| } | |
| .title-accent { color: var(--accent); } | |
| .tagline { | |
| font-size: 1.05rem; color: var(--text-muted); | |
| margin-top: 0.6rem; font-weight: 300; | |
| animation: fadeDown 0.5s 0.2s ease both; | |
| } | |
| .container { | |
| position: relative; z-index: 1; | |
| max-width: 660px; margin: 0 auto; padding: 0 1.5rem; | |
| } | |
| /* cartes */ | |
| .main-card, .results-card, .demo-card, .history-card { | |
| background: var(--card-bg); | |
| border-radius: 24px; border: 1px solid var(--border); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.07); | |
| margin-bottom: 3rem; overflow: hidden; | |
| animation: fadeUp 0.4s ease both; | |
| } | |
| .main-card { animation: fadeUp 0.5s 0.3s ease both; } | |
| .upload-section { padding: 2.5rem; } | |
| .upload-section h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.35rem; } | |
| .upload-section > p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; font-weight: 300; } | |
| .input-group { display: flex; flex-direction: column; gap: 0.5rem; } | |
| .input-group label { | |
| font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.88rem; | |
| color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; | |
| } | |
| .label-icon { font-size: 1rem; } | |
| .input-group input[type="url"] { | |
| padding: 0.8rem 1.1rem; border: 1.5px solid var(--border); border-radius: 12px; | |
| font-family: 'DM Sans', sans-serif; font-size: 0.92rem; color: var(--text-primary); | |
| background: #fafafa; outline: none; transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .input-group input[type="url"]:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-dim); | |
| background: white; | |
| } | |
| .input-group input[type="url"]::placeholder { | |
| color: #adb5bd; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; | |
| } | |
| .file-wrapper { position: relative; } | |
| .file-wrapper input[type="file"] { | |
| position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; | |
| } | |
| .file-custom { | |
| display: flex; align-items: center; gap: 0.75rem; | |
| padding: 0.9rem 1.1rem; border: 1.5px dashed #d1d5db; border-radius: 12px; | |
| background: #fafafa; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; | |
| transition: border-color 0.2s, background 0.2s, color 0.2s; | |
| } | |
| .file-wrapper:hover .file-custom { border-color: var(--accent); background: var(--accent-soft); color: #00a67d; } | |
| .file-custom svg { flex-shrink: 0; opacity: 0.6; } | |
| /* sélection du programme */ | |
| .programme-select { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; } | |
| .programme-label { | |
| font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.88rem; | |
| color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; | |
| } | |
| .programme-options { display: flex; flex-direction: column; gap: 0.5rem; } | |
| .programme-option { | |
| display: flex; flex-direction: column; gap: 0.1rem; | |
| padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: 12px; | |
| background: #fafafa; cursor: pointer; transition: border-color 0.2s, background 0.2s; | |
| } | |
| .programme-option input[type="radio"] { display: none; } | |
| .programme-option span { font-weight: 600; font-size: 0.88rem; color: var(--text-primary); } | |
| .programme-option small { font-size: 0.78rem; color: var(--text-muted); } | |
| .programme-option.active, | |
| .programme-option:hover { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .programme-option.active span { color: #00a67d; } | |
| /* séparateur */ | |
| .separator { | |
| display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0; | |
| font-size: 0.82rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; | |
| } | |
| .separator::before, .separator::after { content: ''; flex: 1; height: 1px; background: var(--border); } | |
| .separator span { color: #adb5bd; } | |
| /* bouton analyser */ | |
| .submit-btn { | |
| display: flex; align-items: center; justify-content: center; gap: 0.6rem; | |
| width: 100%; margin-top: 2rem; padding: 0.9rem 1.5rem; | |
| background: var(--dark); color: white; border: none; border-radius: 12px; | |
| font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; | |
| cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; | |
| } | |
| .submit-btn:hover { background: #1a2332; box-shadow: 0 6px 20px rgba(13,17,23,0.2); transform: translateY(-1px); } | |
| .submit-btn:active { transform: translateY(0); } | |
| .submit-btn svg { transition: transform 0.2s; } | |
| .submit-btn:hover svg { transform: translateX(3px); } | |
| /* erreur */ | |
| .hidden { display: none ; } | |
| .error-box { | |
| margin-top: 1rem; padding: 0.75rem 1rem; | |
| background: #fff0f0; border: 1.5px solid #fca5a5; | |
| border-radius: 10px; color: #b91c1c; font-size: 0.88rem; | |
| } | |
| /* résultats */ | |
| .results-header { padding: 1.8rem 2.5rem 1.2rem; border-bottom: 1px solid var(--border); } | |
| .results-header h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.2rem; } | |
| .results-header p { font-size: 0.88rem; color: var(--text-muted); font-weight: 300; } | |
| .video-wrapper { background: #000; width: 100%; line-height: 0; } | |
| .video-wrapper video { width: 100%; max-height: 420px; object-fit: contain; display: block; } | |
| .results-actions { padding: 1.5rem 2.5rem 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } | |
| .action-btn { | |
| display: inline-flex; align-items: center; gap: 0.5rem; | |
| padding: 0.75rem 1.3rem; border-radius: 12px; | |
| font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.88rem; | |
| text-decoration: none; border: none; cursor: pointer; | |
| transition: background 0.2s, transform 0.15s, box-shadow 0.2s; | |
| } | |
| .action-btn:hover { transform: translateY(-1px); } | |
| .action-btn:active { transform: translateY(0); } | |
| .btn-download { background: var(--accent); color: white; } | |
| .btn-download:hover { background: #00a67d; box-shadow: 0 4px 14px rgba(0,200,150,0.3); } | |
| .btn-replay { background: var(--dark); color: white; } | |
| .btn-replay:hover { background: #1a2332; box-shadow: 0 4px 14px rgba(13,17,23,0.2); } | |
| .btn-replay:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } | |
| /* historique */ | |
| .history-list { padding: 1rem 2.5rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; } | |
| .history-item { | |
| display: flex; align-items: center; justify-content: space-between; gap: 1rem; | |
| padding: 1rem 1.2rem; background: #f5f7fa; | |
| border: 1px solid var(--border); border-radius: 14px; | |
| } | |
| .history-info { display: flex; flex-direction: column; gap: 0.2rem; overflow: hidden; } | |
| .history-source { | |
| font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.88rem; | |
| color: var(--text-primary); white-space: nowrap; overflow: hidden; | |
| text-overflow: ellipsis; max-width: 280px; | |
| } | |
| .history-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); } | |
| .history-btns { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; } | |
| .history-btn { font-size: 0.8rem; padding: 0.5rem 1rem; } | |
| /* décorations */ | |
| .deco { | |
| position: fixed; top: 0; bottom: 0; width: 300px; | |
| pointer-events: none; z-index: 0; | |
| display: flex; flex-direction: column; justify-content: center; align-items: center; | |
| } | |
| .deco-left { left: 0; padding-left: 1.5rem; align-items: flex-start; gap: 2.5rem; } | |
| .deco-right { right: 0; padding-right: 1rem; align-items: flex-end; justify-content: flex-end; padding-bottom: 2rem; } | |
| .deco-robot { width: 260px; filter: drop-shadow(0 12px 32px rgba(0,0,0,0.1)); } | |
| .deco-sticker { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.07)); } | |
| .sticker-top { width: 230px; } | |
| .sticker-bottom { width: 210px; } | |
| /* footer */ | |
| .footer { position: relative; z-index: 1; text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.88rem; } | |
| .footer a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: color 0.2s; } | |
| .footer a:hover { color: var(--accent); } | |
| /* animations */ | |
| @keyframes fadeDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } | |
| @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } | |
| @media (max-width: 1200px) { .deco { display: none; } } | |
| @media (max-width: 768px) { | |
| .hero { padding: 3rem 1rem 2rem; } | |
| .container { padding: 0 1rem; } | |
| .upload-section { padding: 1.8rem; } | |
| } | |
| /* ── section live ──────────────────────────────────────────────────────── */ | |
| .live-card { | |
| background: var(--card-bg); | |
| border-radius: 24px; | |
| border: 1px solid var(--border); | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 20px 60px rgba(0,0,0,0.07); | |
| margin-bottom: 3rem; | |
| overflow: hidden; | |
| animation: fadeUp 0.4s 0.35s ease both; | |
| } | |
| .live-body { | |
| padding: 1.5rem 2.5rem 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.1rem; | |
| } | |
| /* zone caméra */ | |
| .live-preview-wrapper { | |
| position: relative; | |
| background: #0d1117; | |
| border-radius: 14px; | |
| overflow: hidden; | |
| width: 100%; | |
| aspect-ratio: 16/9; | |
| line-height: 0; | |
| } | |
| /* miroir : naturel pour l'utilisateur */ | |
| .live-preview-wrapper video { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| transform: scaleX(-1); | |
| } | |
| /* canvas landmarks par-dessus la vidéo */ | |
| #live-landmark-canvas { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| } | |
| .live-badge { | |
| position: absolute; | |
| top: 0.75rem; | |
| right: 0.75rem; | |
| z-index: 2; | |
| background: #ef4444; | |
| color: white; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.7rem; | |
| padding: 0.2rem 0.6rem; | |
| border-radius: 100px; | |
| animation: pulse-live 1.5s ease-in-out infinite; | |
| } | |
| @keyframes pulse-live { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| /* bandeau statut */ | |
| .live-status-bar { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.6rem; | |
| padding: 0.6rem 0.9rem; | |
| background: #f5f7fa; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| background: #9ca3af; | |
| transition: background 0.3s; | |
| } | |
| /* dot en-tête */ | |
| .live-dot { | |
| display: inline-block; | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: #d1d5db; | |
| margin-right: 0.5rem; | |
| vertical-align: middle; | |
| transition: background 0.3s; | |
| } | |
| .live-dot.active { | |
| background: #ef4444; | |
| animation: pulse-live 1.5s ease-in-out infinite; | |
| } | |
| /* stats détection */ | |
| .live-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0.5rem; | |
| } | |
| .stat-item { | |
| background: #f5f7fa; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 0.55rem 0.75rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.1rem; | |
| } | |
| .stat-label { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.63rem; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| } | |
| .stat-value { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.83rem; | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| /* boutons live */ | |
| .live-actions { | |
| display: flex; | |
| gap: 0.75rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn-live-start { | |
| background: var(--accent); | |
| color: white; | |
| } | |
| .btn-live-start:hover { | |
| background: #00a67d; | |
| box-shadow: 0 4px 14px rgba(0,200,150,0.3); | |
| } | |
| .btn-live-stop { | |
| background: #ef4444; | |
| color: white; | |
| } | |
| .btn-live-stop:hover { | |
| background: #dc2626; | |
| box-shadow: 0 4px 14px rgba(239,68,68,0.3); | |
| } | |
| .btn-live-stop:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| /* miniatures historique */ | |
| .history-item { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 0.75rem 1rem; | |
| background: #f5f7fa; | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| } | |
| .history-thumb-wrapper { | |
| position: relative; | |
| width: 116px; | |
| height: 68px; | |
| flex-shrink: 0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: pointer; | |
| background: #0d1117; | |
| } | |
| .history-thumb-video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .thumb-unavailable { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #e5e7eb; | |
| color: var(--text-muted); | |
| font-size: 0.68rem; | |
| text-align: center; | |
| line-height: 1.3; | |
| padding: 0.3rem; | |
| cursor: default; | |
| } | |
| .thumb-overlay { | |
| position: absolute; | |
| inset: 0; | |
| z-index: 1; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(0,0,0,0); | |
| transition: background 0.2s; | |
| } | |
| .history-thumb-wrapper:hover .thumb-overlay { | |
| background: rgba(0,0,0,0.45); | |
| } | |
| .thumb-play-icon { | |
| color: white; | |
| font-size: 1.3rem; | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); | |
| } | |
| .history-thumb-wrapper:hover .thumb-play-icon { | |
| opacity: 1; | |
| } | |
| .history-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.2rem; | |
| overflow: hidden; | |
| flex: 1; | |
| } | |
| .history-source { | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 240px; | |
| } | |
| .history-meta { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| } | |
| .history-btns { | |
| display: flex; | |
| gap: 0.5rem; | |
| flex-shrink: 0; | |
| flex-wrap: wrap; | |
| } | |
| .history-btn { font-size: 0.8rem; padding: 0.5rem 1rem; } | |
| /* modale */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1000; | |
| background: rgba(0,0,0,0.72); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| } | |
| .modal-overlay.hidden { display: none ; } | |
| .modal-box { | |
| background: var(--card-bg); | |
| border-radius: 20px; | |
| width: 100%; | |
| max-width: 640px; | |
| overflow: hidden; | |
| box-shadow: 0 30px 80px rgba(0,0,0,0.45); | |
| animation: scaleIn 0.18s cubic-bezier(0.34,1.56,0.64,1) both; | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 1.1rem 1.4rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .modal-title { | |
| font-family: 'Syne', sans-serif; | |
| font-weight: 700; | |
| font-size: 0.88rem; | |
| color: var(--text-primary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 520px; | |
| } | |
| .modal-close { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| color: var(--text-muted); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 6px; | |
| transition: background 0.15s, color 0.15s; | |
| flex-shrink: 0; | |
| margin-left: 0.75rem; | |
| } | |
| .modal-close:hover { background: #f3f4f6; color: var(--text-primary); } | |
| .modal-video-wrapper { background: #000; line-height: 0; } | |
| .modal-video-wrapper video { width: 100%; max-height: 360px; object-fit: contain; display: block; } | |
| .modal-footer { | |
| padding: 1.1rem 1.4rem; | |
| border-top: 1px solid var(--border); | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| @keyframes scaleIn { | |
| from { opacity: 0; transform: scale(0.93); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @media (max-width: 768px) { | |
| .live-body { padding: 1.2rem 1.4rem 1.6rem; } | |
| .live-stats { grid-template-columns: repeat(2, 1fr); } | |
| .history-thumb-wrapper { width: 88px; height: 52px; } | |
| .history-source { max-width: 140px; } | |
| .modal-box { border-radius: 14px; } | |
| .modal-video-wrapper video { max-height: 240px; } | |
| } | |
| .btn-sim { | |
| background: #6366f1; | |
| color: white; | |
| } | |
| .btn-sim:hover { | |
| background: #4f46e5; | |
| box-shadow: 0 4px 14px rgba(99,102,241,0.35); | |
| } | |
| .btn-sim:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |