274 lines
10 KiB
HTML
274 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#006600">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<link rel="manifest" href="manifest.json">
|
|
<title>Portugais pour Tous</title>
|
|
<link rel="stylesheet" href="style.css?v=4">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="hidden">
|
|
<header>
|
|
<div class="header-left">
|
|
<span class="header-flag">🇵🇹</span>
|
|
<h1>Portugais</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="user-points-badge" id="header-points">
|
|
<span class="points-icon">⭐</span>
|
|
<span class="points-value" id="header-points-val">0</span>
|
|
</div>
|
|
<div class="user-avatar" id="header-avatar">🇵🇹</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav id="bottom-nav">
|
|
<button class="nav-btn active" data-tab="dashboard">
|
|
<span class="nav-icon">🏠</span>
|
|
<span class="nav-label">Accueil</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="translator">
|
|
<span class="nav-icon">🔄</span>
|
|
<span class="nav-label">Traduire</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="phrases">
|
|
<span class="nav-icon">💬</span>
|
|
<span class="nav-label">Phrases</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="games">
|
|
<span class="nav-icon">🎮</span>
|
|
<span class="nav-label">Jeux</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="exercises">
|
|
<span class="nav-icon">📝</span>
|
|
<span class="nav-label">Exercices</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="vocab">
|
|
<span class="nav-icon">📖</span>
|
|
<span class="nav-label">Vocab.</span>
|
|
</button>
|
|
<button class="nav-btn" data-tab="admin" id="nav-admin" style="display:none">
|
|
<span class="nav-icon">⚙️</span>
|
|
<span class="nav-label">Admin</span>
|
|
</button>
|
|
<button class="nav-btn" id="btn-logout">
|
|
<span class="nav-icon">🚪</span>
|
|
<span class="nav-label">Quitter</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<main id="content">
|
|
<!-- DASHBOARD -->
|
|
<section id="tab-dashboard" class="tab active">
|
|
<div class="dashboard-welcome" id="dashboard-welcome"></div>
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card stat-points">
|
|
<div class="stat-icon">⭐</div>
|
|
<div class="stat-value" id="dash-total-points">0</div>
|
|
<div class="stat-label">Points totaux</div>
|
|
</div>
|
|
<div class="stat-card stat-streak">
|
|
<div class="stat-icon">🔥</div>
|
|
<div class="stat-value" id="dash-streak">0</div>
|
|
<div class="stat-label">Jours consécutifs</div>
|
|
</div>
|
|
<div class="stat-card stat-today">
|
|
<div class="stat-icon">📈</div>
|
|
<div class="stat-value" id="dash-today-points">0</div>
|
|
<div class="stat-label">Points aujourd'hui</div>
|
|
</div>
|
|
<div class="stat-card stat-exercises">
|
|
<div class="stat-icon">✅</div>
|
|
<div class="stat-value" id="dash-today-exercises">0</div>
|
|
<div class="stat-label">Exercices aujourd'hui</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dash-section">
|
|
<h3>🎯 Exercice du jour</h3>
|
|
<div class="daily-exercise-card" id="daily-exercise">
|
|
<p>Commence un jeu ou un exercice pour gagner des points !</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dash-section">
|
|
<h3>🏆 Classement</h3>
|
|
<div id="dash-leaderboard" class="leaderboard"></div>
|
|
</div>
|
|
|
|
<div class="dash-section">
|
|
<h3>📊 Ton activité (7 derniers jours)</h3>
|
|
<div id="dash-history" class="history-chart"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TRANSLATOR -->
|
|
<section id="tab-translator" class="tab">
|
|
<div class="translator-card">
|
|
<div class="lang-selector">
|
|
<button id="lang-from" class="lang-btn" data-lang="pt">🇵🇹 Portugais</button>
|
|
<button id="swap-lang" class="swap-btn">⇄</button>
|
|
<button id="lang-to" class="lang-btn" data-lang="fr">🇫🇷 Français</button>
|
|
</div>
|
|
<div class="translator-body">
|
|
<div class="input-group">
|
|
<textarea id="input-text" placeholder="Écrivez ou collez le texte..." rows="4"></textarea>
|
|
<div class="input-actions">
|
|
<button id="listen-input" class="icon-btn" title="Écouter">🔊</button>
|
|
<button id="clear-input" class="icon-btn" title="Effacer">✕</button>
|
|
</div>
|
|
</div>
|
|
<button id="translate-btn" class="primary-btn">Traduire</button>
|
|
<div class="input-group output-group">
|
|
<div id="output-text" class="output-area" contenteditable="false"></div>
|
|
<div class="input-actions">
|
|
<button id="listen-output" class="icon-btn" title="Écouter">🔊</button>
|
|
<button id="copy-output" class="icon-btn" title="Copier">📋</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PHRASES -->
|
|
<section id="tab-phrases" class="tab">
|
|
<div class="category-tabs" id="phrase-categories"></div>
|
|
<div id="phrases-list" class="card-list"></div>
|
|
</section>
|
|
|
|
<!-- GAMES -->
|
|
<section id="tab-games" class="tab">
|
|
<h2>Choisis un jeu !</h2>
|
|
<div class="game-menu">
|
|
<div class="game-card" data-game="colors">
|
|
<div class="game-emoji">🎨</div>
|
|
<h3>Les Couleurs</h3>
|
|
<p>Apprends les couleurs</p>
|
|
</div>
|
|
<div class="game-card" data-game="animals">
|
|
<div class="game-emoji">🐾</div>
|
|
<h3>Les Animaux</h3>
|
|
<p>Devine les animaux</p>
|
|
</div>
|
|
<div class="game-card" data-game="numbers">
|
|
<div class="game-emoji">🔢</div>
|
|
<h3>Les Nombres</h3>
|
|
<p>Compte en portugais</p>
|
|
</div>
|
|
<div class="game-card" data-game="memory">
|
|
<div class="game-emoji">🧠</div>
|
|
<h3>Memory</h3>
|
|
<p>Retrouve les paires</p>
|
|
</div>
|
|
<div class="game-card" data-game="quiz">
|
|
<div class="game-emoji">❓</div>
|
|
<h3>Quiz</h3>
|
|
<p>Teste-toi !</p>
|
|
</div>
|
|
<div class="game-card" data-game="dragdrop">
|
|
<div class="game-emoji">🎯</div>
|
|
<h3>Associe</h3>
|
|
<p>Relie les mots</p>
|
|
</div>
|
|
<div class="game-card" data-game="scramble">
|
|
<div class="game-emoji">🔤</div>
|
|
<h3>Embaralha</h3>
|
|
<p>Remets les lettres !</p>
|
|
</div>
|
|
<div class="game-card" data-game="bingo">
|
|
<div class="game-emoji">🎤</div>
|
|
<h3>Bingo</h3>
|
|
<p>Écoute et trouve !</p>
|
|
</div>
|
|
<div class="game-card" data-game="catch">
|
|
<div class="game-emoji">🖐️</div>
|
|
<h3>Apanha</h3>
|
|
<p>Tape sur les mots !</p>
|
|
</div>
|
|
<div class="game-card" data-game="riddle">
|
|
<div class="game-emoji">🤔</div>
|
|
<h3>O que é?</h3>
|
|
<p>Devinettes amusantes</p>
|
|
</div>
|
|
</div>
|
|
<div id="game-area" class="hidden"></div>
|
|
<button id="back-to-games" class="secondary-btn hidden">← Retour aux jeux</button>
|
|
</section>
|
|
|
|
<!-- EXERCISES -->
|
|
<section id="tab-exercises" class="tab">
|
|
<h2>Exercices</h2>
|
|
<div class="game-menu">
|
|
<div class="game-card" data-exercise="fill">
|
|
<div class="game-emoji">✏️</div>
|
|
<h3>Complète la phrase</h3>
|
|
<p>Remplis les mots manquants</p>
|
|
</div>
|
|
<div class="game-card" data-exercise="listenwrite">
|
|
<div class="game-emoji">👂</div>
|
|
<h3>Écoute et écris</h3>
|
|
<p>Tape ce que tu entends</p>
|
|
</div>
|
|
<div class="game-card" data-exercise="translate">
|
|
<div class="game-emoji">🌐</div>
|
|
<h3>Traduis la phrase</h3>
|
|
<p>FR → PT</p>
|
|
</div>
|
|
<div class="game-card" data-exercise="conjugation">
|
|
<div class="game-emoji">📚</div>
|
|
<h3>Conjugaison</h3>
|
|
<p>Conjugue les verbes</p>
|
|
</div>
|
|
</div>
|
|
<div id="exercise-area" class="hidden"></div>
|
|
<button id="back-to-exercises" class="secondary-btn hidden">← Retour aux exercices</button>
|
|
</section>
|
|
|
|
<!-- VOCABULARY -->
|
|
<section id="tab-vocab" class="tab">
|
|
<div class="category-tabs" id="vocab-categories"></div>
|
|
<div id="vocab-grid" class="vocab-grid"></div>
|
|
</section>
|
|
|
|
<!-- ADMIN -->
|
|
<section id="tab-admin" class="tab">
|
|
<h2>Administration</h2>
|
|
<div class="admin-section">
|
|
<h3>Ajouter un utilisateur</h3>
|
|
<form id="add-user-form" class="admin-form">
|
|
<input type="text" id="new-username" placeholder="Nom d'utilisateur" required>
|
|
<input type="text" id="new-displayname" placeholder="Nom affiché" required>
|
|
<input type="password" id="new-password" placeholder="Mot de passe" required>
|
|
<select id="new-avatar">
|
|
<option value="🇵🇹">🇵🇹 Portugal</option>
|
|
<option value="👦">👦 Garçon</option>
|
|
<option value="👧">👧 Fille</option>
|
|
<option value="👨">👨 Homme</option>
|
|
<option value="👩">👩 Femme</option>
|
|
<option value="🧒">🧒 Enfant</option>
|
|
<option value="👦🏻">👦🏻 Petit garçon</option>
|
|
<option value="👧🏻">👧🏻 Petite fille</option>
|
|
</select>
|
|
<button type="submit" class="primary-btn">Ajouter</button>
|
|
</form>
|
|
</div>
|
|
<div class="admin-section">
|
|
<h3>Utilisateurs</h3>
|
|
<div id="admin-users-list" class="admin-users"></div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="toast" class="toast hidden"></div>
|
|
|
|
<script src="data.js?v=4"></script>
|
|
<script src="app.js?v=4"></script>
|
|
</body>
|
|
</html>
|