Spaces:
Running
Running
Download index.html from CISKO007/FactBoost-Pro: direct link, hf CLI and curl.
- Browser
- Download file 64.3 kB
-
https://huggingface.co/spaces/CISKO007/FactBoost-Pro/resolve/main/index.html
- Command line
-
hf download hf://spaces/CISKO007/FactBoost-Pro/index.html
-
curl -L -o index.html https://huggingface.co/spaces/CISKO007/FactBoost-Pro/resolve/main/index.html
64.3 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FactBoost Pro - Redesign Mobile</title> | |
| <style> | |
| /* Modern CSS Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #6C63FF; | |
| --secondary: #4A44B5; | |
| --accent: #FF6584; | |
| --light: #F8F9FF; | |
| --dark: #2D2B42; | |
| --success: #4CAF50; | |
| --warning: #FFC107; | |
| --error: #F44336; | |
| --gray: #E0E0E0; | |
| --text-primary: #333333; | |
| --text-secondary: #777777; | |
| --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); | |
| --radius: 16px; | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, #F8F9FF 0%, #E6E9FF 100%); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| /* Header */ | |
| header { | |
| background: var(--primary); | |
| color: white; | |
| padding: 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| } | |
| .tagline { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| /* Navigation */ | |
| nav { | |
| display: flex; | |
| background: var(--dark); | |
| padding: 10px; | |
| } | |
| nav button { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| padding: 12px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border-radius: 8px; | |
| } | |
| nav button.active { | |
| background: var(--primary); | |
| } | |
| nav button:hover:not(.active) { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| /* Section commune */ | |
| section { | |
| padding: 20px; | |
| display: none; | |
| } | |
| section.active { | |
| display: block; | |
| } | |
| h2 { | |
| color: var(--dark); | |
| margin-bottom: 20px; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| } | |
| /* Authentification */ | |
| .auth-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .auth-toggle { | |
| display: flex; | |
| margin-bottom: 20px; | |
| background: var(--gray); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .auth-toggle button { | |
| flex: 1; | |
| padding: 12px; | |
| border: none; | |
| background: transparent; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .auth-toggle button.active { | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 14px; | |
| border: 2px solid var(--gray); | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus { | |
| border-color: var(--primary); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); | |
| } | |
| .social-login { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-btn { | |
| flex: 1; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| transition: var(--transition); | |
| } | |
| .google-btn { | |
| background: #DB4437; | |
| color: white; | |
| } | |
| .facebook-btn { | |
| background: #4267B2; | |
| color: white; | |
| } | |
| .social-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .submit-btn { | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| padding: 15px; | |
| border-radius: 12px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| width: 100%; | |
| margin-top: 10px; | |
| } | |
| .submit-btn:hover { | |
| background: var(--secondary); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3); | |
| } | |
| /* Apprendre section */ | |
| .quiz-filters { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| background: var(--light); | |
| border: 2px solid var(--gray); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .filter-btn.active { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .quiz-item { | |
| background: white; | |
| border: 2px solid var(--gray); | |
| border-radius: 12px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition); | |
| } | |
| .quiz-item:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .quiz-title { | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--dark); | |
| } | |
| .quiz-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .difficulty { | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| } | |
| .difficulty.easy { background: #E8F5E9; color: #2E7D32; } | |
| .difficulty.medium { background: #FFF8E1; color: #FF8F00; } | |
| .difficulty.hard { background: #FFEBEE; color: #C62828; } | |
| .progress-container { | |
| margin: 25px 0; | |
| } | |
| .progress-bar { | |
| height: 10px; | |
| background: var(--gray); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| margin-top: 10px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--primary); | |
| border-radius: 5px; | |
| width: 65%; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .stat-card { | |
| background: var(--light); | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| margin: 10px 0; | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Communauté section */ | |
| .community-cards { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .community-card { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border-left: 4px solid var(--primary); | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--dark); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card-content { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| } | |
| .user-info { | |
| flex: 1; | |
| } | |
| .username { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .timestamp { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Combats section */ | |
| .combat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .battle-btn { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .battle-btn:hover { | |
| background: #E05A72; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(255, 101, 132, 0.3); | |
| } | |
| .battle-history { | |
| margin-top: 25px; | |
| } | |
| .battle-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 15px; | |
| border-bottom: 1px solid var(--gray); | |
| } | |
| .battle-result { | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .battle-result.win { | |
| background: rgba(76, 175, 80, 0.1); | |
| color: var(--success); | |
| } | |
| .battle-result.loss { | |
| background: rgba(244, 67, 54, 0.1); | |
| color: var(--error); | |
| } | |
| /* Profil section */ | |
| .profile-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .profile-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| } | |
| .profile-info h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 5px; | |
| } | |
| .profile-info p { | |
| color: var(--text-secondary); | |
| margin-bottom: 5px; | |
| } | |
| .badges-container { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| margin: 25px 0; | |
| } | |
| .badge { | |
| background: var(--light); | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .badge-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| color: var(--primary); | |
| } | |
| .badge-name { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .badge-desc { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| margin-top: 5px; | |
| } | |
| .settings-grid { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; | |
| background: var(--light); | |
| border-radius: 12px; | |
| } | |
| .setting-label { | |
| font-weight: 500; | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 600px) { | |
| body { | |
| padding: 10px; | |
| } | |
| .container { | |
| border-radius: 12px; | |
| } | |
| nav { | |
| padding: 8px; | |
| } | |
| nav button { | |
| padding: 10px; | |
| font-size: 0.8rem; | |
| } | |
| section { | |
| padding: 15px; | |
| } | |
| h2 { | |
| font-size: 1.3rem; | |
| } | |
| .quiz-filters { | |
| gap: 8px; | |
| } | |
| .filter-btn { | |
| padding: 6px 12px; | |
| font-size: 0.8rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .badges-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Animation Classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Active state styles */ | |
| .quiz-item.active { | |
| border-color: var(--primary); | |
| background: rgba(108, 99, 255, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo">FactBoost Pro</div> | |
| <div class="tagline">Apprends de manière addictive</div> | |
| </header> | |
| <nav> | |
| <button class="nav-btn active" data-section="auth">Authentification</button> | |
| <button class="nav-btn" data-section="learn">Apprendre</button> | |
| <button class="nav-btn" data-section="community">Communauté</button> | |
| <button class="nav-btn" data-section="battle">Combats</button> | |
| <button class="nav-btn" data-section="profile">Profil</button> | |
| </nav> | |
| <!-- Authentification Section --> | |
| <section id="auth" class="active"> | |
| <h2>Connexion / Inscription</h2> | |
| <div class="auth-toggle"> | |
| <button class="auth-btn active" data-form="login">Connexion</button> | |
| <button class="auth-btn" data-form="register">Inscription</button> | |
| </div> | |
| <div class="auth-container"> | |
| <div id="login-form" class="form-section active"> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" placeholder="votre@email.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Mot de passe</label> | |
| <input type="password" id="password" placeholder="••••••••"> | |
| </div> | |
| <button class="submit-btn">Se connecter</button> | |
| <div class="social-login"> | |
| <button class="social-btn google-btn"> | |
| <span>Google</span> | |
| </button> | |
| <button class="social-btn facebook-btn"> | |
| <span>Facebook</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="register-form" class="form-section"> | |
| <div class="form-group"> | |
| <label for="username">Nom d'utilisateur</label> | |
| <input type="text" id="username" placeholder="Votre pseudo"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-email">Email</label> | |
| <input type="email" id="reg-email" placeholder="votre@email.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-password">Mot de passe</label> | |
| <input type="password" id="reg-password" placeholder="••••••••"> | |
| </div> | |
| <button class="submit-btn">S'inscrire</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Apprendre Section --> | |
| <section id="learn"> | |
| <h2>Section Apprendre</h2> | |
| <div class="quiz-filters"> | |
| <button class="filter-btn active">Toutes</button> | |
| <button class="filter-btn">Histoire</button> | |
| <button class="filter-btn">Science</button> | |
| <button class="filter-btn">Géographie</button> | |
| <button class="filter-btn">Culture</button> | |
| </div> | |
| <div class="quiz-list"> | |
| <div class="quiz-item active"> | |
| <div class="quiz-title">Quiz sur la Révolution Française</div> | |
| <div class="quiz-meta"> | |
| <span>Histoire</span> | |
| <span class="difficulty easy">Facile</span> | |
| </div> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Capitales du monde</div> | |
| <div class="quiz-meta"> | |
| <span>Géographie</span> | |
| <span class="difficulty medium">Moyen</span> | |
| </div> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Découvre les éléments chimiques</div> | |
| <div class="quiz-meta"> | |
| <span>Science</span> | |
| <span class="difficulty hard">Difficile</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="progress-container"> | |
| <h3>Progression</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| <p>65% des quiz complétés</p> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Quiz joués</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">85%</div> | |
| <div class="stat-label">Taux de réussite</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">12</div> | |
| <div class="stat-label">Niveau actuel</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">42</div> | |
| <div class="stat-label">Badges obtenus</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Communauté Section --> | |
| <section id="community"> | |
| <h2>Communauté</h2> | |
| <div class="community-cards"> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>🏆 Concours d'Histoire</span> | |
| </div> | |
| <div class="card-content"> | |
| Rejoins le concours mensuel sur les grandes découvertes scientifiques! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">A</div> | |
| <div class="user-info"> | |
| <div class="username">Admin FactBoost</div> | |
| <div class="timestamp">Il y a 2 heures</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>💬 Discussion générale</span> | |
| </div> | |
| <div class="card-content"> | |
| Partagez vos techniques d'apprentissage et vos astuces mémorielles! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">M</div> | |
| <div class="user-info"> | |
| <div class="username">Marie Dubois</div> | |
| <div class="timestamp">Hier</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>🚀 Club Science</span> | |
| </div> | |
| <div class="card-content"> | |
| Nouveau club dédié à la physique quantique - rejoignez-nous! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">P</div> | |
| <div class="user-info"> | |
| <div class="username">Pierre Martin</div> | |
| <div class="timestamp">5 jours ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Combats Section --> | |
| <section id="battle"> | |
| <h2>Combats en Temps Réel</h2> | |
| <div class="combat-header"> | |
| <h3>Trouve un adversaire</h3> | |
| <button class="battle-btn">Matchmaking</button> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Combat - Questions générales</div> | |
| <div class="quiz-meta"> | |
| <span>Live maintenant</span> | |
| <span class="difficulty medium">Moyen</span> | |
| </div> | |
| </div> | |
| <div class="battle-history"> | |
| <h3>Historique des combats</h3> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Jean Dupont</div> | |
| <div class="timestamp">Il y a 3 jours</div> | |
| </div> | |
| <div class="battle-result win">VICTOIRE</div> | |
| </div> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Marie Curie</div> | |
| <div class="timestamp">Il y a 1 semaine</div> | |
| </div> | |
| <div class="battle-result loss">DÉFAITE</div> | |
| </div> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Albert Einstein</div> | |
| <div class="timestamp">Il y a 2 semaines</div> | |
| </div> | |
| <div class="battle-result win">VICTOIRE</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Profil Section --> | |
| <section id="profile"> | |
| <h2>Profil Utilisateur</h2> | |
| <div class="profile-header"> | |
| <div class="profile-avatar">JD</div> | |
| <div class="profile-info"> | |
| <h3>Jean Dupont</h3> | |
| <p>Niveau 12 - Expert</p> | |
| <p>56 badges obtenus</p> | |
| </div> | |
| </div> | |
| <h3>Badges</h3> | |
| <div class="badges-container"> | |
| <div class="badge"> | |
| <div class="badge-icon">🥇</div> | |
| <div class="badge-name">Historien</div> | |
| <div class="badge-desc">10 quiz d'histoire réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🚀</div> | |
| <div class="badge-name">Scientifique</div> | |
| <div class="badge-desc">15 quiz de science réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🗺️</div> | |
| <div class="badge-name">Globe-trotteur</div> | |
| <div class="badge-desc">5 quiz de géographie réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🔥</div> | |
| <div class="badge-name">Série enflammée</div> | |
| <div class="badge-desc">5 jours consécutifs de quiz</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🏆</div> | |
| <div class="badge-name">Champion</div> | |
| <div class="badge-desc">3 victoires en combat</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">⏱️</div> | |
| <div class="badge-name">Chrono</div> | |
| <div class="badge-desc">Temps record sur quiz</div> | |
| </div> | |
| </div> | |
| <h3>Paramètres</h3> | |
| <div class="settings-grid"> | |
| <div class="setting-item"> | |
| <div class="setting-label">Notifications</div> | |
| <div class="toggle active">ON</div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="setting-label">Thème sombre</div> | |
| <div class="toggle">OFF</div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="setting-label">Connexion sociale</div> | |
| <div class="toggle active">ON</div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Navigation | |
| document.querySelectorAll('.nav-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.nav-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Hide all sections | |
| document.querySelectorAll('section').forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| // Show corresponding section | |
| const sectionId = button.getAttribute('data-section'); | |
| document.getElementById(sectionId).classList.add('active'); | |
| document.getElementById(sectionId).classList.add('fade-in'); | |
| // Remove animation class after it completes | |
| setTimeout(() => { | |
| document.getElementById(sectionId).classList.remove('fade-in'); | |
| }, 500); | |
| }); | |
| }); | |
| // Auth Toggle | |
| document.querySelectorAll('.auth-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.auth-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Hide all forms | |
| document.querySelectorAll('.form-section').forEach(form => { | |
| form.classList.remove('active'); | |
| }); | |
| // Show corresponding form | |
| const formId = button.getAttribute('data-form') === 'login' ? 'login-form' : 'register-form'; | |
| document.getElementById(formId).classList.add('active'); | |
| }); | |
| }); | |
| // Quiz Item Interaction | |
| document.querySelectorAll('.quiz-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| document.querySelectorAll('.quiz-item').forEach(i => { | |
| i.classList.remove('active'); | |
| }); | |
| item.classList.add('active'); | |
| }); | |
| }); | |
| // Filter Interaction | |
| document.querySelectorAll('.filter-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| button.classList.add('active'); | |
| }); | |
| }); | |
| // Toggle Switch Simulation | |
| document.querySelectorAll('.toggle').forEach(toggle => { | |
| toggle.addEventListener('click', function() { | |
| if (this.classList.contains('active')) { | |
| this.classList.remove('active'); | |
| this.textContent = 'OFF'; | |
| } else { | |
| this.classList.add('active'); | |
| this.textContent = 'ON'; | |
| } | |
| }); | |
| }); | |
| // Battle Button Animation | |
| document.querySelector('.battle-btn').addEventListener('click', function() { | |
| this.textContent = 'Recherche...'; | |
| this.disabled = true; | |
| setTimeout(() => { | |
| this.textContent = 'Matchmaking'; | |
| this.disabled = false; | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| ======= | |
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FactBoost Pro - Redesign Mobile</title> | |
| <style> | |
| /* Modern CSS Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary: #8A2BE2; | |
| --secondary: #4B0082; | |
| --accent: #00FFFF; | |
| --dark-bg: #0F0F1A; | |
| --darker-bg: #0A0A12; | |
| --card-bg: #1A1A2E; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B0B0D6; | |
| --text-accent: #00FFFF; | |
| --shadow: 0 4px 20px rgba(0, 0, 0, 0.5); | |
| --radius: 16px; | |
| --transition: all 0.3s ease; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: linear-gradient(135deg, var(--darker-bg) 0%, var(--dark-bg) 100%); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| background: var(--card-bg); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| border: 1px solid rgba(138, 43, 226, 0.3); | |
| } | |
| /* Header */ | |
| header { | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| color: white; | |
| padding: 20px; | |
| text-align: center; | |
| position: relative; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| text-shadow: 0 0 10px rgba(0, 255, 255, 0.7); | |
| } | |
| .tagline { | |
| font-size: 1rem; | |
| opacity: 0.9; | |
| } | |
| /* Navigation */ | |
| nav { | |
| display: flex; | |
| background: var(--darker-bg); | |
| padding: 10px; | |
| border-bottom: 1px solid rgba(138, 43, 226, 0.2); | |
| } | |
| nav button { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: var(--text-secondary); | |
| padding: 12px; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border-radius: 8px; | |
| } | |
| nav button.active { | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| color: white; | |
| box-shadow: 0 0 15px rgba(138, 43, 226, 0.5); | |
| } | |
| nav button:hover:not(.active) { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-primary); | |
| } | |
| /* Section commune */ | |
| section { | |
| padding: 20px; | |
| display: none; | |
| } | |
| section.active { | |
| display: block; | |
| } | |
| h2 { | |
| color: var(--text-accent); | |
| margin-bottom: 20px; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); | |
| } | |
| /* Authentification */ | |
| .auth-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .auth-toggle { | |
| display: flex; | |
| margin-bottom: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| border: 1px solid rgba(138, 43, 226, 0.3); | |
| } | |
| .auth-toggle button { | |
| flex: 1; | |
| padding: 12px; | |
| border: none; | |
| background: transparent; | |
| font-weight: 600; | |
| cursor: pointer; | |
| color: var(--text-secondary); | |
| } | |
| .auth-toggle button.active { | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| color: white; | |
| box-shadow: 0 0 10px rgba(138, 43, 226, 0.4); | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 14px; | |
| border: 2px solid rgba(138, 43, 226, 0.3); | |
| border-radius: 12px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| background: rgba(255, 255, 255, 0.07); | |
| color: var(--text-primary); | |
| } | |
| .form-group input:focus { | |
| border-color: var(--accent); | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.2); | |
| } | |
| .social-login { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-btn { | |
| flex: 1; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| transition: var(--transition); | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--text-primary); | |
| } | |
| .google-btn { | |
| background: linear-gradient(90deg, #DB4437 0%, #8A2BE2 100%); | |
| } | |
| .facebook-btn { | |
| background: linear-gradient(90deg, #4267B2 0%, #8A2BE2 100%); | |
| } | |
| .social-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3); | |
| } | |
| .submit-btn { | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| color: white; | |
| border: none; | |
| padding: 15px; | |
| border-radius: 12px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| width: 100%; | |
| margin-top: 10px; | |
| box-shadow: 0 0 15px rgba(138, 43, 226, 0.4); | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(138, 43, 226, 0.7); | |
| } | |
| /* Apprendre section */ | |
| .quiz-filters { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| background: rgba(255, 255, 255, 0.07); | |
| border: 1px solid rgba(138, 43, 226, 0.3); | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .filter-btn.active { | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| color: white; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); | |
| } | |
| .filter-btn:hover:not(.active) { | |
| background: rgba(255, 255, 255, 0.15); | |
| color: var(--text-primary); | |
| } | |
| .quiz-item { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(138, 43, 226, 0.2); | |
| border-radius: 12px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .quiz-item:hover { | |
| transform: translateY(-3px); | |
| border-color: var(--accent); | |
| box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2); | |
| } | |
| .quiz-title { | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--text-primary); | |
| } | |
| .quiz-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .difficulty { | |
| padding: 4px 10px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| } | |
| .difficulty.easy { | |
| background: rgba(0, 255, 127, 0.1); | |
| color: #00FF7F; | |
| border: 1px solid #00FF7F; | |
| } | |
| .difficulty.medium { | |
| background: rgba(255, 215, 0, 0.1); | |
| color: gold; | |
| border: 1px solid gold; | |
| } | |
| .difficulty.hard { | |
| background: rgba(255, 69, 0, 0.1); | |
| color: #FF4500; | |
| border: 1px solid #FF4500; | |
| } | |
| .progress-container { | |
| margin: 25px 0; | |
| } | |
| .progress-bar { | |
| height: 10px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 5px; | |
| overflow: hidden; | |
| margin-top: 10px; | |
| border: 1px solid rgba(138, 43, 226, 0.3); | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| border-radius: 5px; | |
| width: 65%; | |
| box-shadow: 0 0 10px rgba(138, 43, 226, 0.6); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(0, 255, 255, 0.2); | |
| } | |
| .stat-value { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--text-accent); | |
| margin: 10px 0; | |
| text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Communauté section */ | |
| .community-cards { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .community-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border-left: 4px solid var(--primary); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .community-card:hover { | |
| border-left: 4px solid var(--accent); | |
| box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2); | |
| } | |
| .card-title { | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--text-primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .card-content { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| box-shadow: 0 0 10px rgba(138, 43, 226, 0.5); | |
| } | |
| .user-info { | |
| flex: 1; | |
| } | |
| .username { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .timestamp { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Combats section */ | |
| .combat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .battle-btn { | |
| background: linear-gradient(90deg, #FF0080 0%, #8A2BE2 100%); | |
| color: white; | |
| border: none; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| box-shadow: 0 0 15px rgba(255, 0, 128, 0.4); | |
| } | |
| .battle-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 20px rgba(255, 0, 128, 0.7); | |
| } | |
| .battle-history { | |
| margin-top: 25px; | |
| } | |
| .battle-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 15px; | |
| border-bottom: 1px solid rgba(138, 43, 226, 0.2); | |
| background: rgba(255, 255, 255, 0.03); | |
| border-radius: 8px; | |
| margin-bottom: 10px; | |
| } | |
| .battle-result { | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| } | |
| .battle-result.win { | |
| background: rgba(0, 255, 127, 0.15); | |
| color: #00FF7F; | |
| border: 1px solid #00FF7F; | |
| box-shadow: 0 0 8px rgba(0, 255, 127, 0.3); | |
| } | |
| .battle-result.loss { | |
| background: rgba(255, 69, 0, 0.15); | |
| color: #FF4500; | |
| border: 1px solid #FF4500; | |
| box-shadow: 0 0 8px rgba(255, 69, 0, 0.3); | |
| } | |
| /* Profil section */ | |
| .profile-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| margin-bottom: 25px; | |
| } | |
| .profile-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| box-shadow: 0 0 20px rgba(138, 43, 226, 0.7); | |
| } | |
| .profile-info h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 5px; | |
| color: var(--text-accent); | |
| text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); | |
| } | |
| .profile-info p { | |
| color: var(--text-secondary); | |
| margin-bottom: 5px; | |
| } | |
| .badges-container { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| margin: 25px 0; | |
| } | |
| .badge { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(138, 43, 226, 0.2); | |
| transition: var(--transition); | |
| } | |
| .badge:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--accent); | |
| box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3); | |
| } | |
| .badge-icon { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| color: var(--text-accent); | |
| text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); | |
| } | |
| .badge-name { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--text-primary); | |
| } | |
| .badge-desc { | |
| font-size: 0.8rem; | |
| color: var(--text-secondary); | |
| margin-top: 5px; | |
| } | |
| .settings-grid { | |
| display: grid; | |
| gap: 15px; | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 15px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 12px; | |
| border: 1px solid rgba(138, 43, 226, 0.2); | |
| } | |
| .setting-label { | |
| font-weight: 500; | |
| color: var(--text-primary); | |
| } | |
| /* Responsive design */ | |
| @media (max-width: 600px) { | |
| body { | |
| padding: 10px; | |
| } | |
| .container { | |
| border-radius: 12px; | |
| } | |
| nav { | |
| padding: 8px; | |
| } | |
| nav button { | |
| padding: 10px; | |
| font-size: 0.8rem; | |
| } | |
| section { | |
| padding: 15px; | |
| } | |
| h2 { | |
| font-size: 1.3rem; | |
| } | |
| .quiz-filters { | |
| gap: 8px; | |
| } | |
| .filter-btn { | |
| padding: 6px 12px; | |
| font-size: 0.8rem; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .badges-container { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Animation Classes */ | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Active state styles */ | |
| .quiz-item.active { | |
| border-color: var(--accent); | |
| background: rgba(0, 255, 255, 0.05); | |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo">FactBoost Pro</div> | |
| <div class="tagline">Apprends de manière addictive</div> | |
| </header> | |
| <nav> | |
| <button class="nav-btn active" data-section="auth">Authentification</button> | |
| <button class="nav-btn" data-section="learn">Apprendre</button> | |
| <button class="nav-btn" data-section="community">Communauté</button> | |
| <button class="nav-btn" data-section="battle">Combats</button> | |
| <button class="nav-btn" data-section="profile">Profil</button> | |
| </nav> | |
| <!-- Authentification Section --> | |
| <section id="auth" class="active"> | |
| <h2>Connexion / Inscription</h2> | |
| <div class="auth-toggle"> | |
| <button class="auth-btn active" data-form="login">Connexion</button> | |
| <button class="auth-btn" data-form="register">Inscription</button> | |
| </div> | |
| <div class="auth-container"> | |
| <div id="login-form" class="form-section active"> | |
| <div class="form-group"> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" placeholder="votre@email.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="password">Mot de passe</label> | |
| <input type="password" id="password" placeholder="••••••••"> | |
| </div> | |
| <button class="submit-btn">Se connecter</button> | |
| <div class="social-login"> | |
| <button class="social-btn google-btn"> | |
| <span>Google</span> | |
| </button> | |
| <button class="social-btn facebook-btn"> | |
| <span>Facebook</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="register-form" class="form-section"> | |
| <div class="form-group"> | |
| <label for="username">Nom d'utilisateur</label> | |
| <input type="text" id="username" placeholder="Votre pseudo"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-email">Email</label> | |
| <input type="email" id="reg-email" placeholder="votre@email.com"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="reg-password">Mot de passe</label> | |
| <input type="password" id="reg-password" placeholder="••••••••"> | |
| </div> | |
| <button class="submit-btn">S'inscrire</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Apprendre Section --> | |
| <section id="learn"> | |
| <h2>Section Apprendre</h2> | |
| <div class="quiz-filters"> | |
| <button class="filter-btn active">Toutes</button> | |
| <button class="filter-btn">Histoire</button> | |
| <button class="filter-btn">Science</button> | |
| <button class="filter-btn">Géographie</button> | |
| <button class="filter-btn">Culture</button> | |
| </div> | |
| <div class="quiz-list"> | |
| <div class="quiz-item active"> | |
| <div class="quiz-title">Quiz sur la Révolution Française</div> | |
| <div class="quiz-meta"> | |
| <span>Histoire</span> | |
| <span class="difficulty easy">Facile</span> | |
| </div> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Capitales du monde</div> | |
| <div class="quiz-meta"> | |
| <span>Géographie</span> | |
| <span class="difficulty medium">Moyen</span> | |
| </div> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Découvre les éléments chimiques</div> | |
| <div class="quiz-meta"> | |
| <span>Science</span> | |
| <span class="difficulty hard">Difficile</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="progress-container"> | |
| <h3>Progression</h3> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| <p>65% des quiz complétés</p> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">24</div> | |
| <div class="stat-label">Quiz joués</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">85%</div> | |
| <div class="stat-label">Taux de réussite</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">12</div> | |
| <div class="stat-label">Niveau actuel</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">42</div> | |
| <div class="stat-label">Badges obtenus</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Communauté Section --> | |
| <section id="community"> | |
| <h2>Communauté</h2> | |
| <div class="community-cards"> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>🏆 Concours d'Histoire</span> | |
| </div> | |
| <div class="card-content"> | |
| Rejoins le concours mensuel sur les grandes découvertes scientifiques! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">A</div> | |
| <div class="user-info"> | |
| <div class="username">Admin FactBoost</div> | |
| <div class="timestamp">Il y a 2 heures</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>💬 Discussion générale</span> | |
| </div> | |
| <div class="card-content"> | |
| Partagez vos techniques d'apprentissage et vos astuces mémorielles! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">M</div> | |
| <div class="user-info"> | |
| <div class="username">Marie Dubois</div> | |
| <div class="timestamp">Hier</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="community-card"> | |
| <div class="card-title"> | |
| <span>🚀 Club Science</span> | |
| </div> | |
| <div class="card-content"> | |
| Nouveau club dédié à la physique quantique - rejoignez-nous! | |
| </div> | |
| <div class="user-profile"> | |
| <div class="avatar">P</div> | |
| <div class="user-info"> | |
| <div class="username">Pierre Martin</div> | |
| <div class="timestamp">5 jours ago</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Combats Section --> | |
| <section id="battle"> | |
| <h2>Combats en Temps Réel</h2> | |
| <div class="combat-header"> | |
| <h3>Trouve un adversaire</h3> | |
| <button class="battle-btn">Matchmaking</button> | |
| </div> | |
| <div class="quiz-item"> | |
| <div class="quiz-title">Combat - Questions générales</div> | |
| <div class="quiz-meta"> | |
| <span>Live maintenant</span> | |
| <span class="difficulty medium">Moyen</span> | |
| </div> | |
| </div> | |
| <div class="battle-history"> | |
| <h3>Historique des combats</h3> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Jean Dupont</div> | |
| <div class="timestamp">Il y a 3 jours</div> | |
| </div> | |
| <div class="battle-result win">VICTOIRE</div> | |
| </div> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Marie Curie</div> | |
| <div class="timestamp">Il y a 1 semaine</div> | |
| </div> | |
| <div class="battle-result loss">DÉFAITE</div> | |
| </div> | |
| <div class="battle-item"> | |
| <div> | |
| <div>vs Albert Einstein</div> | |
| <div class="timestamp">Il y a 2 semaines</div> | |
| </div> | |
| <div class="battle-result win">VICTOIRE</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Profil Section --> | |
| <section id="profile"> | |
| <h2>Profil Utilisateur</h2> | |
| <div class="profile-header"> | |
| <div class="profile-avatar">JD</div> | |
| <div class="profile-info"> | |
| <h3>Jean Dupont</h3> | |
| <p>Niveau 12 - Expert</p> | |
| <p>56 badges obtenus</p> | |
| </div> | |
| </div> | |
| <h3>Badges</h3> | |
| <div class="badges-container"> | |
| <div class="badge"> | |
| <div class="badge-icon">🥇</div> | |
| <div class="badge-name">Historien</div> | |
| <div class="badge-desc">10 quiz d'histoire réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🚀</div> | |
| <div class="badge-name">Scientifique</div> | |
| <div class="badge-desc">15 quiz de science réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🗺️</div> | |
| <div class="badge-name">Globe-trotteur</div> | |
| <div class="badge-desc">5 quiz de géographie réussis</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🔥</div> | |
| <div class="badge-name">Série enflammée</div> | |
| <div class="badge-desc">5 jours consécutifs de quiz</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">🏆</div> | |
| <div class="badge-name">Champion</div> | |
| <div class="badge-desc">3 victoires en combat</div> | |
| </div> | |
| <div class="badge"> | |
| <div class="badge-icon">⏱️</div> | |
| <div class="badge-name">Chrono</div> | |
| <div class="badge-desc">Temps record sur quiz</div> | |
| </div> | |
| </div> | |
| <h3>Paramètres</h3> | |
| <div class="settings-grid"> | |
| <div class="setting-item"> | |
| <div class="setting-label">Notifications</div> | |
| <div class="toggle active">ON</div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="setting-label">Thème sombre</div> | |
| <div class="toggle">OFF</div> | |
| </div> | |
| <div class="setting-item"> | |
| <div class="setting-label">Connexion sociale</div> | |
| <div class="toggle active">ON</div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| // Navigation | |
| document.querySelectorAll('.nav-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.nav-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Hide all sections | |
| document.querySelectorAll('section').forEach(section => { | |
| section.classList.remove('active'); | |
| }); | |
| // Show corresponding section | |
| const sectionId = button.getAttribute('data-section'); | |
| document.getElementById(sectionId).classList.add('active'); | |
| document.getElementById(sectionId).classList.add('fade-in'); | |
| // Remove animation class after it completes | |
| setTimeout(() => { | |
| document.getElementById(sectionId).classList.remove('fade-in'); | |
| }, 500); | |
| }); | |
| }); | |
| // Auth Toggle | |
| document.querySelectorAll('.auth-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons | |
| document.querySelectorAll('.auth-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Add active class to clicked button | |
| button.classList.add('active'); | |
| // Hide all forms | |
| document.querySelectorAll('.form-section').forEach(form => { | |
| form.classList.remove('active'); | |
| }); | |
| // Show corresponding form | |
| const formId = button.getAttribute('data-form') === 'login' ? 'login-form' : 'register-form'; | |
| document.getElementById(formId).classList.add('active'); | |
| }); | |
| }); | |
| // Quiz Item Interaction | |
| document.querySelectorAll('.quiz-item').forEach(item => { | |
| item.addEventListener('click', () => { | |
| document.querySelectorAll('.quiz-item').forEach(i => { | |
| i.classList.remove('active'); | |
| }); | |
| item.classList.add('active'); | |
| }); | |
| }); | |
| // Filter Interaction | |
| document.querySelectorAll('.filter-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.querySelectorAll('.filter-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| button.classList.add('active'); | |
| }); | |
| }); | |
| // Toggle Switch Simulation | |
| document.querySelectorAll('.toggle').forEach(toggle => { | |
| toggle.addEventListener('click', function() { | |
| if (this.classList.contains('active')) { | |
| this.classList.remove('active'); | |
| this.textContent = 'OFF'; | |
| } else { | |
| this.classList.add('active'); | |
| this.textContent = 'ON'; | |
| } | |
| }); | |
| }); | |
| // Battle Button Animation | |
| document.querySelector('.battle-btn').addEventListener('click', function() { | |
| this.textContent = 'Recherche...'; | |
| this.disabled = true; | |
| setTimeout(() => { | |
| this.textContent = 'Matchmaking'; | |
| this.disabled = false; | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| >>>>>>> REPLACE |