??? - ?????/title> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Poppins:wght@500;600&display=swap" rel="stylesheet"> </head> <body> <div id="login-page" class="page active"> <div class="login-container"> <div class="logo-section"> <img src="logo.webp" alt="??? Logo" class="logo"> <h1 class="app-name">???</h1> <p class="app-tagline">????????????</p> </div> <div class="form-section"> <div class="form-tabs"> <button class="tab-btn active" data-tab="login">???</button> <button class="tab-btn" data-tab="register">???</button> </div> <form id="login-form" class="form active"> <div class="input-group"> <label for="login-phone">?????/label> <input type="tel" id="login-phone" placeholder="?????????" maxlength="11"> </div> <div class="input-group"> <label for="login-password">???</label> <input type="password" id="login-password" placeholder="????????> </div> <button type="submit" class="primary-btn">???</button> <p class="forgot-password">????????/p> </form> <form id="register-form" class="form"> <div class="input-group"> <label for="register-phone">?????/label> <input type="tel" id="register-phone" placeholder="?????????" maxlength="11"> </div> <div class="input-group"> <label for="register-name">???</label> <input type="text" id="register-name" placeholder="????????> </div> <div class="input-group"> <label for="register-password">???</label> <input type="password" id="register-password" placeholder="?????????6-20???"> </div> <div class="input-group"> <label for="register-confirm">??????</label> <input type="password" id="register-confirm" placeholder="???????????> </div> <button type="submit" class="primary-btn">???</button> </form> </div> </div> </div> <div id="home-page" class="page"> <header class="app-header"> <div class="header-left"> <img src="logo.webp" alt="???" class="header-logo"> <div class="user-info"> <h2 class="user-name">?????</h2> <p class="user-role">????????/p> </div> </div> <button class="icon-btn" id="notif-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M15 17H20L18.5952 15.5952C18.2069 15.2069 18 14.6762 18 14.1213V9C18 6.79086 16.2091 5 14 5V3.5C14 2.67157 13.3284 2 12.5 2C11.6716 2 11 2.67157 11 3.5V5C8.79086 5 7 6.79086 7 9V14.1213C7 14.6762 6.79307 15.2069 6.40482 15.5952L5 17H15ZM10 19C10 19.5523 10.4477 20 11 20H13C13.5523 20 14 19.5523 14 19" stroke="#1e293b" stroke-width="2" stroke-linecap="round"/> </svg> <span class="badge">3</span> </button> </header> <main class="main-content"> <section class="quick-actions"> <h3 class="section-title">??????</h3> <div class="action-grid"> <button class="action-card" id="photo-grade-btn"> <div class="action-icon grade-icon"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> <rect x="4" y="6" width="24" height="20" stroke="#2563eb" stroke-width="2"/> <circle cx="12" cy="14" r="4" stroke="#2563eb" stroke-width="2"/> <path d="M24 24L18 18" stroke="#2563eb" stroke-width="2" stroke-linecap="round"/> </svg> </div> <p class="action-name">??????</p> </button> <button class="action-card" id="class-list-btn"> <div class="action-icon class-icon"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> <circle cx="10" cy="10" r="4" stroke="#0891b2" stroke-width="2"/> <circle cx="22" cy="10" r="4" stroke="#0891b2" stroke-width="2"/> <circle cx="10" cy="22" r="4" stroke="#0891b2" stroke-width="2"/> <circle cx="22" cy="22" r="4" stroke="#0891b2" stroke-width="2"/> </svg> </div> <p class="action-name">??????</p> </button> <button class="action-card" id="wrong-answer-btn"> <div class="action-icon wrong-icon"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> <rect x="6" y="4" width="20" height="24" rx="2" stroke="#f59e0b" stroke-width="2"/> <path d="M12 12l8 8M20 12l-8 8" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/> </svg> </div> <p class="action-name">??????</p> </button> <button class="action-card" id="overview-btn"> <div class="action-icon overview-icon"> <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> <rect x="4" y="20" width="8" height="8" fill="#10b981"/> <rect x="12" y="14" width="8" height="14" fill="#3b82f6"/> <rect x="20" y="8" width="8" height="20" fill="#6366f1"/> </svg> </div> <p class="action-name">??????</p> </button> </div> </section> <section class="recent-classes"> <div class="section-header"> <h3 class="section-title">??????</h3> <button class="see-all">??????</button> </div> <div class="class-list"> <div class="class-card"> <div class="class-info"> <div class="class-name">????????/div> <div class="class-meta"> <span class="meta-item"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <circle cx="7" cy="5" r="3" stroke="#64748b" stroke-width="1.5"/> <path d="M2 13c0-3 2-5 5-5s5 2 5 5" stroke="#64748b" stroke-width="1.5"/> </svg> 42?? </span> <span class="meta-item"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <rect x="2" y="3" width="10" height="8" rx="1" stroke="#64748b" stroke-width="1.5"/> <path d="M4 1V3M10 1V3" stroke="#64748b" stroke-width="1.5" stroke-linecap="round"/> </svg> ??? </span> </div> </div> <div class="class-stat"> <div class="stat-value">78%</div> <div class="stat-label">?????/div> </div> </div> <div class="class-card"> <div class="class-info"> <div class="class-name">????????/div> <div class="class-meta"> <span class="meta-item"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <circle cx="7" cy="5" r="3" stroke="#64748b" stroke-width="1.5"/> <path d="M2 13c0-3 2-5 5-5s5 2 5 5" stroke="#64748b" stroke-width="1.5"/> </svg> 40?? </span> <span class="meta-item"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none"> <rect x="2" y="3" width="10" height="8" rx="1" stroke="#64748b" stroke-width="1.5"/> <path d="M4 1V3M10 1V3" stroke="#64748b" stroke-width="1.5" stroke-linecap="round"/> </svg> ??? </span> </div> </div> <div class="class-stat"> <div class="stat-value">82%</div> <div class="stat-label">?????/div> </div> </div> </div> </section> </main> <nav class="bottom-nav"> <button class="nav-item active"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <path d="M3 7l7-5 7 5v9a1 1 0 01-1 1h-4v-6H8v6H4a1 1 0 01-1-1V7z" fill="currentColor"/> </svg> <span>???</span> </button> <button class="nav-item"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="7" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/> <circle cx="13" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/> <circle cx="7" cy="13" r="3" stroke="currentColor" stroke-width="1.5"/> <circle cx="13" cy="13" r="3" stroke="currentColor" stroke-width="1.5"/> </svg> <span>???</span> </button> <button class="nav-item"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <rect x="3" y="2" width="14" height="16" rx="1" stroke="currentColor" stroke-width="1.5"/> <path d="M7 6h6M7 10h6M7 14h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg> <span>???</span> </button> <button class="nav-item"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> <circle cx="10" cy="6" r="3" stroke="currentColor" stroke-width="1.5"/> <path d="M3 16c0-3 3-5 7-5s7 2 7 5" stroke="currentColor" stroke-width="1.5"/> </svg> <span>???</span> </button> </nav> </div> <div id="grading-page" class="page"> <header class="app-header"> <button class="icon-btn" id="back-to-home"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M15 18l-6-6 6-6" stroke="#1e293b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <h1 class="page-title">??????</h1> <div style="width:24px;"></div> </header> <main class="main-content"> <div class="upload-area" id="upload-area"> <div class="upload-content"> <div class="upload-icon"> <svg width="64" height="64" viewBox="0 0 64 64" fill="none"> <rect x="4" y="12" width="56" height="44" rx="4" stroke="#cbd5e1" stroke-width="2.5" stroke-dasharray="8 4"/> <circle cx="18" cy="28" r="6" stroke="#cbd5e1" stroke-width="2"/> <path d="M52 50L38 32l-8 10-6-7L12 50" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round"/> </svg> </div> <p class="upload-text">?????????????????/p> <p class="upload-hint">??? JPG??NG????????? 10MB</p> <input type="file" id="file-input" accept="image/*" capture="environment"> </div> </div> <div class="preview-area" id="preview-area" style="display:none;"> <img id="preview-image" alt="Preview"> <div class="preview-controls"> <button class="secondary-btn" id="reselect-btn">??????</button> <button class="primary-btn" id="start-grade-btn">???????/button> </div> </div> <div class="grading-progress" id="grading-progress" style="display:none;"> <div class="loading-spinner"> <div class="spinner-ring"></div> <div class="spinner-ring"></div> <div class="spinner-ring"></div> </div> <p class="progress-text">AI????????..</p> <p class="progress-hint">??? 30 ????????/p> </div> </main> </div> <div id="overview-page" class="page"> <header class="app-header"> <button class="icon-btn" id="back-to-home2"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M15 18l-6-6 6-6" stroke="#1e293b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <h1 class="page-title">??????</h1> <div style="width:24px;"></div> </header> <main class="main-content"> <div class="overview-cards"> <div class="overview-card primary"> <div class="overview-label">??????</div> <div class="overview-value">128</div> <div class="overview-change up"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 9V3M6 3L3 6M6 3L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> +12% </div> </div> <div class="overview-card secondary"> <div class="overview-label">????????/div> <div class="overview-value">78%</div> <div class="overview-change up"> <svg width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 9V3M6 3L3 6M6 3L9 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> +5% </div> </div> </div> <section class="weak-points"> <h3 class="section-title">????????Top5</h3> <div class="weak-list"> <div class="weak-item"> <div class="weak-rank">1</div> <div class="weak-content"> <div class="weak-name">?????? - ??????</div> <div class="weak-meta">??? 32 ??/div> </div> <div class="weak-bar"> <div class="weak-progress" style="width:85%;"></div> </div> </div> <div class="weak-item"> <div class="weak-rank">2</div> <div class="weak-content"> <div class="weak-name">??????</div> <div class="weak-meta">??? 24 ??/div> </div> <div class="weak-bar"> <div class="weak-progress" style="width:65%;"></div> </div> </div> <div class="weak-item"> <div class="weak-rank">3</div> <div class="weak-content"> <div class="weak-name">?????- ??????</div> <div class="weak-meta">??? 18 ??/div> </div> <div class="weak-bar"> <div class="weak-progress" style="width:50%;"></div> </div> </div> </div> </section> </main> </div> <script src="app.js"></script> </body> </html>