Mery3391/YAMNET
0
1<!DOCTYPE html>2<html lang="fr" dir="ltr">3<head>4 <meta charset="UTF-8"/>5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>6 <title>DarijaEmotions — Darija AI</title>7 <link rel="stylesheet" href="css/base.css"/>8 <link rel="stylesheet" href="css/app.css"/>9</head>10<body>11 12<div class="app-layout">13 14 <!-- ══════════════ TOPBAR ══════════════ -->15 <header class="topbar">16 <div class="brand">17 <!-- Logo badge : 4 emojis -->18 <div class="brand-logo-badge">19 <span class="em">😊</span>20 <span class="em">😢</span>21 <span class="em">😠</span>22 <span class="em">😐</span>23 </div>24 <div class="brand-text">25 <h1>DarijaEmotions</h1>26 <p data-i18n="brand_sub">Darija · AI Analysis</p>27 </div>28 </div>29 30 <div class="topbar-right">31 <!-- Language switcher -->32 <div class="lang-switcher">33 <button class="lang-btn" data-lang="ar">عربي</button>34 <button class="lang-btn active" data-lang="fr">FR</button>35 <button class="lang-btn" data-lang="en">EN</button>36 </div>37 38 <!-- Dark/Light mode toggle -->39 <button class="theme-toggle" id="theme-toggle" aria-label="Changer de thème">40 <svg class="theme-icon-light" viewBox="0 0 24 24" style="display:none">41 <circle cx="12" cy="12" r="5"/>42 <line x1="12" y1="1" x2="12" y2="3"/>43 <line x1="12" y1="21" x2="12" y2="23"/>44 <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>45 <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>46 <line x1="1" y1="12" x2="3" y2="12"/>47 <line x1="21" y1="12" x2="23" y2="12"/>48 <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>49 <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>50 </svg>51 <svg class="theme-icon-dark" viewBox="0 0 24 24">52 <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>53 </svg>54 </button>55 56 <!-- User pill -->57 <div class="user-menu">58 <div class="user-pill" id="user-pill">59 <div class="user-avatar" id="user-avatar">?</div>60 <span id="user-name">—</span>61 <svg class="user-pill-caret" viewBox="0 0 24 24">62 <polyline points="6 9 12 15 18 9"/>63 </svg>64 </div>65 <div class="user-dropdown" id="user-dropdown">66 <button class="dropdown-item danger" onclick="logout()">67 <svg viewBox="0 0 24 24">68 <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>69 <polyline points="16 17 21 12 16 7"/>70 <line x1="21" y1="12" x2="9" y2="12"/>71 </svg>72 <span data-i18n="logout">Déconnexion</span>73 </button>74 </div>75 </div>76 </div>77 </header>78 79 <!-- ══════════════ DASHBOARD ══════════════ -->80 <main class="dashboard">81 82 <!-- ── COL GAUCHE : Upload ── -->83 <div class="card upload-card">84 <div class="card-inner">85 <p class="label">86 <span class="label-dot"></span>87 <span data-i18n="section_upload">Fichier Audio</span>88 </p>89 90 <!-- Drop zone -->91 <div class="upload-zone" id="drop-zone">92 <input type="file" id="audio-file" accept=".wav,.mp3,.ogg,.flac"/>93 <div class="upload-icon-wrap">94 <svg viewBox="0 0 24 24">95 <polyline points="16 16 12 12 8 16"/>96 <line x1="12" y1="12" x2="12" y2="21"/>97 <path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/>98 </svg>99 </div>100 <p class="upload-title" data-i18n="drop_title">Glissez votre fichier ici</p>101 <p class="upload-sub" data-i18n="drop_sub">WAV · MP3 · OGG · FLAC</p>102 </div>103 104 <!-- File chip -->105 <div class="file-chip" id="file-chip">106 <div class="file-chip-icon">107 <svg viewBox="0 0 24 24">108 <path d="M9 18V5l12-2v13"/>109 <circle cx="6" cy="18" r="3"/>110 <circle cx="18" cy="16" r="3"/>111 </svg>112 </div>113 <div class="file-chip-info">114 <div class="file-chip-name" id="chip-name">—</div>115 <div class="file-chip-size" id="chip-size">—</div>116 </div>117 <button class="file-chip-clear" id="file-clear-btn" aria-label="Supprimer le fichier">118 <svg viewBox="0 0 24 24">119 <line x1="18" y1="6" x2="6" y2="18"/>120 <line x1="6" y1="6" x2="18" y2="18"/>121 </svg>122 </button>123 </div>124 125 <!-- Error -->126 <div class="alert-error" id="alert-error">127 <svg viewBox="0 0 24 24">128 <circle cx="12" cy="12" r="10"/>129 <line x1="12" y1="8" x2="12" y2="12"/>130 <line x1="12" y1="16" x2="12.01" y2="16"/>131 </svg>132 <span id="alert-error-text"></span>133 </div>134 135 <!-- Progress -->136 <div class="progress-wrap" id="progress-wrap">137 <p class="progress-text" data-i18n="analyzing">Analyse en cours…</p>138 <div class="progress-track">139 <div class="progress-fill"></div>140 </div>141 </div>142 143 <!-- Analyze button -->144 <button class="btn-analyze" id="analyze-btn" disabled>145 <svg viewBox="0 0 24 24">146 <polygon points="5 3 19 12 5 21 5 3"/>147 </svg>148 <span data-i18n="analyze_btn">Analyser l'émotion</span>149 </button>150 </div>151 </div>152 153 <!-- ── COL DROITE : Result ── -->154 <div class="card result-card">155 <div class="card-inner" style="padding-bottom:0">156 <p class="label">157 <span class="label-dot"></span>158 <span data-i18n="section_result">Résultat</span>159 </p>160 </div>161 162 <!-- Placeholder -->163 <div class="result-placeholder" id="result-placeholder">164 <svg viewBox="0 0 24 24">165 <path d="M9 18V5l12-2v13"/>166 <circle cx="6" cy="18" r="3"/>167 <circle cx="18" cy="16" r="3"/>168 </svg>169 <p data-i18n="result_waiting">Importez un fichier audio pour démarrer l'analyse</p>170 </div>171 172 <!-- Result content -->173 <div class="result-content" id="result-content">174 175 <!-- Emotion hero -->176 <div class="emotion-hero" id="emotion-hero">177 <span class="emotion-emoji-3d" id="result-emoji">😐</span>178 <div class="emotion-info">179 <div class="emotion-name" id="result-emotion">—</div>180 <div class="emotion-meta">181 <span class="conf-badge" id="result-conf">— %</span>182 <span class="file-tag">183 <svg viewBox="0 0 24 24">184 <path d="M9 18V5l12-2v13"/>185 <circle cx="6" cy="18" r="3"/>186 <circle cx="18" cy="16" r="3"/>187 </svg>188 <span id="result-file">—</span>189 </span>190 </div>191 </div>192 </div>193 194 <!-- Scores -->195 <div class="scores-panel">196 <p class="scores-heading" data-i18n="score_dist">Distribution des scores</p>197 <div id="scores-list"></div>198 </div>199 200 </div>201 </div>202 203 <!-- ── COL GAUCHE ROW 2 : History ── -->204 <div class="card history-card">205 <div class="card-inner">206 <div class="history-head">207 <p class="label" style="margin-bottom:0">208 <span class="label-dot"></span>209 <span data-i18n="section_history">Historique</span>210 </p>211 <button class="history-clear" id="history-clear-btn">212 <svg viewBox="0 0 24 24">213 <polyline points="3 6 5 6 21 6"/>214 <path d="M19 6l-1 14H6L5 6"/>215 <path d="M10 11v6M14 11v6"/>216 </svg>217 <span data-i18n="clear_history">Effacer</span>218 </button>219 </div>220 221 <div class="history-empty" id="history-empty">222 <svg viewBox="0 0 24 24">223 <path d="M9 18V5l12-2v13"/>224 <circle cx="6" cy="18" r="3"/>225 <circle cx="18" cy="16" r="3"/>226 </svg>227 <span data-i18n="history_empty">Aucune analyse pour l'instant</span>228 </div>229 230 <div class="history-list" id="history-list"></div>231 </div>232 </div>233 234 </main>235 236 <!-- FOOTER -->237 <footer>238 DarijaEmotions · Darija Emotion AI | 239 <a href="#">FastAPI + YAMNet</a>240 </footer>241 242</div>243 244<script src="js/i18n.js"></script>245<script src="js/zellige.js"></script>246<script src="js/auth.js"></script>247<script src="js/app.js"></script>248 249</body>250</html>