Files
pragativeer-v2/pragativeer-ai-coach-complete.html

1217 lines
62 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>PragatiVeer — AI Coach (Complete)</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================
ROOT VARIABLES & RESET
============================================ */
:root {
--navy: #0F233C;
--navy-light: #1A2F4A;
--teal: #5EC4B8;
--teal-dark: #4AA89D;
--amber: #FF8F00;
--gold: #f0c040;
--bg-void: #0A1628;
--bg-card: #0F1F35;
--bg-card-hover: #152642;
--text-primary: #F0F4F8;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--success: #22C55E;
--error: #EF4444;
--warning: #F59E0B;
--info: #60A5FA;
--border: rgba(94, 196, 184, 0.12);
--shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
--radius: 16px;
--radius-sm: 10px;
--radius-xs: 6px;
--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hindi: 'Noto Sans Devanagari', sans-serif;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font);
background: var(--bg-void);
color: var(--text-primary);
min-height: 100vh;
display: flex;
justify-content: center;
line-height: 1.6;
}
.app {
width: 100%;
max-width: 420px;
min-height: 100vh;
background: var(--bg-void);
position: relative;
padding-bottom: 90px;
}
/* ============================================
STATUS BAR
============================================ */
.status-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px 8px;
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.status-bar .time { font-weight: 600; color: var(--text-secondary); }
.status-icons { display: flex; gap: 6px; align-items: center; }
.status-icons svg { width: 16px; height: 16px; fill: var(--text-muted); }
/* ============================================
HEADER
============================================ */
.header {
padding: 8px 20px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo-icon {
width: 36px; height: 36px;
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 16px; color: var(--navy);
}
.logo-text { font-weight: 700; font-size: 16px; color: var(--text-primary); letter-spacing: -0.3px; }
.logo-text span { color: var(--teal); }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-btn {
width: 38px; height: 38px; border-radius: 50%;
background: var(--bg-card); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: var(--transition); position: relative;
}
.header-btn:hover { background: var(--bg-card-hover); border-color: rgba(94, 196, 184, 0.3); }
.header-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notification-dot {
position: absolute; top: 6px; right: 6px;
width: 8px; height: 8px; background: var(--amber);
border-radius: 50%; border: 2px solid var(--bg-void);
}
.avatar {
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--teal), #3B82F6);
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px; color: white;
cursor: pointer; border: 2px solid rgba(94, 196, 184, 0.3);
}
/* ============================================
GREETING
============================================ */
.greeting {
padding: 4px 20px 16px;
}
.greeting h1 {
font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.3;
}
.greeting h1 span { color: var(--teal); }
.greeting .sub {
font-size: 13px; color: var(--text-secondary); margin-top: 2px;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.greeting .sub .hindi { font-family: var(--font-hindi); }
.greeting .streak-badge {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(240, 192, 64, 0.12); color: var(--gold);
padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 8px;
}
.greeting .streak-badge svg { width: 14px; height: 14px; fill: var(--gold); }
/* ============================================
SECTION HEADERS
============================================ */
.section-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 20px 12px;
}
.section-header h2 {
font-size: 16px; font-weight: 700; color: var(--text-primary);
display: flex; align-items: center; gap: 8px;
}
.section-header .see-all {
font-size: 12px; color: var(--teal); font-weight: 600;
cursor: pointer; transition: var(--transition); text-decoration: none;
}
.section-header .see-all:hover { color: var(--teal-dark); }
/* ============================================
FEATURE BADGE
============================================ */
.feature-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; padding: 2px 8px;
border-radius: 4px; margin-bottom: 8px;
}
.feature-badge.ai { background: rgba(94, 196, 184, 0.12); color: var(--teal); }
.feature-badge.p0 { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.feature-badge.p1 { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
/* ============================================
1. EXAM READINESS SCORE (A-05)
============================================ */
.readiness-section { padding: 0 20px 20px; }
.readiness-card {
background: linear-gradient(135deg, var(--bg-card) 0%, #132A45 100%);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; position: relative; overflow: hidden;
}
.readiness-card::before {
content: ''; position: absolute; top: -50%; right: -20%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(94, 196, 184, 0.06) 0%, transparent 70%);
border-radius: 50%;
}
.readiness-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;
}
.readiness-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.readiness-trend {
display: flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 600; color: var(--success);
background: rgba(34, 197, 94, 0.1); padding: 2px 8px; border-radius: 20px;
}
.readiness-trend svg { width: 14px; height: 14px; stroke: var(--success); fill: none; stroke-width: 2.5; }
.readiness-body { display: flex; align-items: center; gap: 20px; }
.score-ring { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.score-ring svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.score-ring .bg-circle { fill: none; stroke: rgba(94, 196, 184, 0.1); stroke-width: 6; }
.score-ring .progress-circle {
fill: none; stroke: url(#scoreGradient); stroke-width: 6; stroke-linecap: round;
stroke-dasharray: 283; stroke-dashoffset: calc(283 - (283 * 72) / 100);
transition: stroke-dashoffset 1.5s ease;
}
.score-ring .score-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.score-ring .score-text .number { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.score-ring .score-text .label { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.readiness-details { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.readiness-detail-item { background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-xs); padding: 8px 10px; }
.readiness-detail-item .value { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.readiness-detail-item .value .change { font-size: 10px; font-weight: 600; margin-left: 2px; }
.readiness-detail-item .value .change.up { color: var(--success); }
.readiness-detail-item .value .change.down { color: var(--error); }
.readiness-detail-item .label { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.readiness-message {
margin-top: 14px; padding: 10px 14px;
background: rgba(94, 196, 184, 0.08); border: 1px solid rgba(94, 196, 184, 0.15);
border-radius: var(--radius-sm); font-size: 13px; color: var(--teal);
font-weight: 500; display: flex; align-items: center; gap: 8px;
}
.readiness-message svg { width: 18px; height: 18px; fill: none; stroke: var(--teal); stroke-width: 2; flex-shrink: 0; }
/* ============================================
2. TODAY'S STUDY PLAN (A-03)
============================================ */
.study-plan { padding: 0 20px; }
.plan-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
}
.plan-header {
padding: 14px 16px; display: flex; justify-content: space-between;
align-items: center; border-bottom: 1px solid var(--border);
}
.plan-header .date { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.plan-header .progress-text { font-size: 12px; color: var(--teal); font-weight: 600; }
.plan-progress-bar { height: 3px; background: rgba(94, 196, 184, 0.1); position: relative; }
.plan-progress-bar .fill {
height: 100%; width: 40%;
background: linear-gradient(90deg, var(--teal), var(--teal-dark));
border-radius: 0 2px 2px 0; transition: width 0.5s ease;
}
.plan-tasks { padding: 4px 0; }
.plan-task {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; transition: var(--transition);
cursor: pointer; border-left: 3px solid transparent;
}
.plan-task:hover { background: rgba(255, 255, 255, 0.02); }
.plan-task.completed { opacity: 0.6; border-left-color: var(--success); }
.plan-task.current { border-left-color: var(--teal); background: rgba(94, 196, 184, 0.04); }
.plan-task .checkbox {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--text-muted);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; transition: var(--transition);
}
.plan-task.completed .checkbox { background: var(--success); border-color: var(--success); }
.plan-task.completed .checkbox svg { width: 10px; height: 10px; stroke: white; fill: none; stroke-width: 3; }
.plan-task.current .checkbox { border-color: var(--teal); animation: pulse-border 2s infinite; }
@keyframes pulse-border {
0%, 100% { box-shadow: 0 0 0 0 rgba(94, 196, 184, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(94, 196, 184, 0); }
}
.plan-task .task-info { flex: 1; min-width: 0; }
.plan-task .task-info .title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.plan-task .task-info .meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.plan-task .task-duration {
font-size: 12px; font-weight: 600; color: var(--text-secondary);
background: rgba(255, 255, 255, 0.04); padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
}
.plan-task .task-tag {
font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; flex-shrink: 0;
}
.task-tag.revision { background: rgba(240, 192, 64, 0.12); color: var(--gold); }
.task-tag.practice { background: rgba(94, 196, 184, 0.12); color: var(--teal); }
.task-tag.test { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.task-tag.review { background: rgba(59, 130, 246, 0.12); color: var(--info); }
/* ============================================
3. MISTAKE TRACKING (A-01) + SPACED REP (A-02)
============================================ */
.mistake-section { padding: 0 20px; }
.mistake-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
display: flex; align-items: center; gap: 14px;
cursor: pointer; transition: var(--transition);
}
.mistake-card:hover { background: var(--bg-card-hover); border-color: rgba(94, 196, 184, 0.2); }
.mistake-icon {
width: 48px; height: 48px; border-radius: 12px;
background: rgba(239, 68, 68, 0.1);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mistake-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--error); stroke-width: 2; }
.mistake-info { flex: 1; min-width: 0; }
.mistake-info .title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.mistake-info .subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mistake-info .subtitle span { color: var(--error); font-weight: 600; }
.mistake-arrow { color: var(--text-muted); flex-shrink: 0; }
.mistake-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Spaced Repetition Queue */
.spaced-rep { padding: 0 20px; }
.sr-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
}
.sr-header {
display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
.sr-header .sr-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.sr-header .sr-count { font-size: 12px; color: var(--text-muted); }
.sr-timeline {
display: flex; justify-content: space-between; align-items: center;
padding: 0 4px; margin-bottom: 12px;
}
.sr-day {
display: flex; flex-direction: column; align-items: center; gap: 4px;
position: relative;
}
.sr-day .day-label { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.sr-day .day-dot {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
border: 2px solid var(--border);
color: var(--text-muted);
background: transparent;
}
.sr-day .day-dot.completed { background: var(--success); border-color: var(--success); color: white; }
.sr-day .day-dot.current { border-color: var(--teal); color: var(--teal); background: rgba(94, 196, 184, 0.1); }
.sr-day .day-dot.pending { border-color: var(--border); color: var(--text-muted); }
.sr-day .day-dot.mastered { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.sr-day .day-connector {
position: absolute; top: 14px; right: -50%; width: 100%;
height: 2px; background: var(--border); z-index: -1;
}
.sr-day .day-connector.done { background: var(--success); }
.sr-day:last-child .day-connector { display: none; }
.sr-questions {
display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.sr-question {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-xs); border: 1px solid var(--border);
transition: var(--transition); cursor: pointer;
}
.sr-question:hover { background: rgba(255, 255, 255, 0.04); }
.sr-question .q-icon {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.sr-question .q-icon.conceptual { background: var(--error); }
.sr-question .q-icon.calculation { background: var(--warning); }
.sr-question .q-icon.reading { background: var(--info); }
.sr-question .q-info { flex: 1; min-width: 0; }
.sr-question .q-info .q-text { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.sr-question .q-info .q-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.sr-question .q-attempt {
font-size: 10px; font-weight: 600; color: var(--text-muted);
background: rgba(255, 255, 255, 0.04); padding: 2px 6px; border-radius: 4px;
}
/* ============================================
4. AI TUTOR CHAT (A-04)
============================================ */
.chat-preview { padding: 0 20px; }
.chat-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
}
.chat-card-header {
padding: 12px 16px; display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border);
background: rgba(94, 196, 184, 0.04);
}
.chat-card-header .ai-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--teal), #3B82F6);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: white; flex-shrink: 0;
}
.chat-card-header .ai-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.chat-card-header .ai-status {
font-size: 11px; color: var(--success); display: flex; align-items: center; gap: 4px;
}
.chat-card-header .ai-status .dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--success);
}
.chat-card-header .msgs-left {
margin-left: auto; font-size: 11px; color: var(--text-muted);
}
.chat-card-header .msgs-left span { color: var(--amber); font-weight: 600; }
.chat-messages {
padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
max-height: 240px; overflow-y: auto;
}
.chat-msg {
display: flex; gap: 8px; max-width: 85%;
}
.chat-msg.ai { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .msg-bubble {
padding: 10px 14px; border-radius: 12px;
font-size: 13px; line-height: 1.5;
}
.chat-msg.ai .msg-bubble {
background: rgba(94, 196, 184, 0.08);
border: 1px solid rgba(94, 196, 184, 0.12);
color: var(--text-primary);
border-bottom-left-radius: 4px;
}
.chat-msg.user .msg-bubble {
background: var(--teal); color: var(--navy);
border-bottom-right-radius: 4px;
font-weight: 500;
}
.chat-msg .msg-time {
font-size: 10px; color: var(--text-muted); margin-top: 4px;
}
.chat-msg.user .msg-time { text-align: right; }
.chat-input-bar {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border-top: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
}
.chat-input-bar input {
flex: 1; background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border); border-radius: 20px;
padding: 8px 14px; font-size: 13px; color: var(--text-primary);
font-family: var(--font); outline: none;
transition: var(--transition);
}
.chat-input-bar input::placeholder { color: var(--text-muted); }
.chat-input-bar input:focus { border-color: var(--teal); background: rgba(94, 196, 184, 0.04); }
.chat-input-bar .send-btn {
width: 36px; height: 36px; border-radius: 50%;
background: var(--teal); border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: var(--transition); flex-shrink: 0;
}
.chat-input-bar .send-btn:hover { background: var(--teal-dark); transform: scale(1.05); }
.chat-input-bar .send-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--navy); stroke-width: 2.5; }
/* ============================================
5. COLLEGE PREDICTOR (A-07)
============================================ */
.predictor-section { padding: 0 20px; }
.predictor-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
}
.predictor-tabs {
display: flex; gap: 6px; margin-bottom: 14px;
}
.predictor-tab {
flex: 1; padding: 8px; text-align: center;
font-size: 11px; font-weight: 600; border-radius: var(--radius-xs);
cursor: pointer; transition: var(--transition);
background: rgba(255, 255, 255, 0.03); color: var(--text-muted);
border: 1px solid transparent;
}
.predictor-tab.active {
background: rgba(94, 196, 184, 0.08);
border-color: rgba(94, 196, 184, 0.2);
color: var(--teal);
}
.predictor-tab:hover { background: rgba(255, 255, 255, 0.06); }
.predictor-list { display: flex; flex-direction: column; gap: 8px; }
.predictor-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
transition: var(--transition);
}
.predictor-item:hover { background: rgba(255, 255, 255, 0.04); }
.predictor-item .college-rank {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.predictor-item .college-rank.reach { background: rgba(239, 68, 68, 0.12); color: var(--error); }
.predictor-item .college-rank.target { background: rgba(94, 196, 184, 0.12); color: var(--teal); }
.predictor-item .college-rank.safety { background: rgba(34, 197, 94, 0.12); color: var(--success); }
.predictor-item .college-info { flex: 1; min-width: 0; }
.predictor-item .college-info .name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.predictor-item .college-info .branch { font-size: 11px; color: var(--text-muted); }
.predictor-item .college-prob {
font-size: 12px; font-weight: 700; padding: 2px 8px;
border-radius: 4px; flex-shrink: 0;
}
.predictor-item .college-prob.high { color: var(--success); background: rgba(34, 197, 94, 0.1); }
.predictor-item .college-prob.med { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
.predictor-item .college-prob.low { color: var(--error); background: rgba(239, 68, 68, 0.1); }
.predictor-motivation {
margin-top: 12px; padding: 10px 14px;
background: rgba(240, 192, 64, 0.08);
border: 1px solid rgba(240, 192, 64, 0.15);
border-radius: var(--radius-sm);
font-size: 12px; color: var(--gold); font-weight: 500;
text-align: center;
}
/* ============================================
6. EXAM DAY STRATEGY (A-06)
============================================ */
.strategy-section { padding: 0 20px; }
.strategy-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
}
.strategy-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.strategy-item {
padding: 12px; border-radius: var(--radius-xs);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border);
text-align: center;
}
.strategy-item .s-icon {
font-size: 20px; margin-bottom: 4px;
}
.strategy-item .s-title {
font-size: 11px; font-weight: 600; color: var(--text-primary);
}
.strategy-item .s-desc {
font-size: 10px; color: var(--text-muted); margin-top: 2px;
}
.strategy-print {
margin-top: 12px; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 10px; border-radius: var(--radius-xs);
background: rgba(94, 196, 184, 0.08);
border: 1px dashed rgba(94, 196, 184, 0.2);
font-size: 12px; color: var(--teal); font-weight: 600;
cursor: pointer; transition: var(--transition);
}
.strategy-print:hover { background: rgba(94, 196, 184, 0.12); }
.strategy-print svg { width: 16px; height: 16px; fill: none; stroke: var(--teal); stroke-width: 2; }
/* ============================================
7. STUDY TIME OPTIMIZATION (A-08)
============================================ */
.optimization-section { padding: 0 20px; }
.optimization-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px;
}
.opt-chart {
display: flex; align-items: flex-end; gap: 6px;
height: 80px; padding: 0 4px; margin-bottom: 10px;
}
.opt-bar {
flex: 1; border-radius: 4px 4px 0 0;
background: linear-gradient(to top, rgba(94, 196, 184, 0.3), var(--teal));
min-height: 8px; transition: height 0.5s ease;
position: relative;
}
.opt-bar .bar-label {
position: absolute; bottom: -18px; left: 50%;
transform: translateX(-50%);
font-size: 8px; color: var(--text-muted); font-weight: 500;
white-space: nowrap;
}
.opt-bar.peak { background: linear-gradient(to top, rgba(240, 192, 64, 0.3), var(--gold)); }
.opt-insight {
padding: 10px 12px; margin-top: 4px;
background: rgba(240, 192, 64, 0.08);
border: 1px solid rgba(240, 192, 64, 0.15);
border-radius: var(--radius-xs);
font-size: 12px; color: var(--gold); font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.opt-insight svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; flex-shrink: 0; }
/* ============================================
QUICK STATS ROW
============================================ */
.quick-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; padding: 0 20px;
}
.stat-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 14px 12px;
text-align: center; transition: var(--transition);
}
.stat-card:hover { background: var(--bg-card-hover); }
.stat-card .stat-value { font-size: 20px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.stat-card .stat-value.teal { color: var(--teal); }
.stat-card .stat-value.amber { color: var(--amber); }
.stat-card .stat-value.gold { color: var(--gold); }
.stat-card .stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
/* ============================================
FEATURE INDEX
============================================ */
.feature-index {
padding: 0 20px 8px;
}
.feature-index-grid {
display: flex; flex-wrap: wrap; gap: 6px;
}
.feature-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 20px;
font-size: 10px; font-weight: 600;
background: rgba(94, 196, 184, 0.06);
border: 1px solid rgba(94, 196, 184, 0.1);
color: var(--teal);
cursor: pointer; transition: var(--transition);
}
.feature-chip:hover { background: rgba(94, 196, 184, 0.12); }
.feature-chip .chip-dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--teal);
}
/* ============================================
BOTTOM NAVIGATION
============================================ */
.bottom-nav {
position: fixed; bottom: 0; left: 50%;
transform: translateX(-50%);
width: 100%; max-width: 420px;
background: rgba(10, 22, 40, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
display: flex; justify-content: space-around;
padding: 8px 0 12px; z-index: 200;
}
.nav-item {
display: flex; flex-direction: column; align-items: center; gap: 2px;
cursor: pointer; transition: var(--transition);
padding: 4px 12px; border: none; background: none; position: relative;
}
.nav-item svg {
width: 22px; height: 22px;
fill: none; stroke: var(--text-muted);
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
transition: var(--transition);
}
.nav-item .nav-label { font-size: 10px; font-weight: 500; color: var(--text-muted); transition: var(--transition); }
.nav-item.active svg { stroke: var(--teal); }
.nav-item.active .nav-label { color: var(--teal); font-weight: 600; }
.nav-item.active::before {
content: ''; position: absolute; top: -1px;
width: 20px; height: 2px; background: var(--teal);
border-radius: 0 0 2px 2px;
}
.nav-item:hover svg { stroke: var(--text-secondary); }
/* ============================================
RESPONSIVE
============================================ */
@media (min-width: 768px) {
.app { max-width: 600px; padding: 0 20px 80px; }
.readiness-body { gap: 28px; }
.score-ring { width: 120px; height: 120px; }
.score-ring svg { width: 120px; height: 120px; }
.score-ring .score-text .number { font-size: 34px; }
.readiness-details { gap: 10px; }
.readiness-detail-item { padding: 10px 14px; }
.quick-stats { gap: 14px; }
.strategy-grid { grid-template-columns: repeat(4, 1fr); }
.bottom-nav { max-width: 600px; }
}
@media (min-width: 1024px) {
.app { max-width: 800px; padding: 0 40px 80px; }
.readiness-body { gap: 32px; }
.score-ring { width: 130px; height: 130px; }
.score-ring svg { width: 130px; height: 130px; }
.score-ring .score-text .number { font-size: 38px; }
.readiness-details { grid-template-columns: repeat(4, 1fr); }
.bottom-nav { max-width: 800px; }
}
/* ============================================
ANIMATIONS
============================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.readiness-section { animation: fadeInUp 0.5s ease; }
.section-header:nth-of-type(1) { animation: fadeInUp 0.5s ease 0.05s both; }
.study-plan { animation: fadeInUp 0.5s ease 0.08s both; }
.section-header:nth-of-type(2) { animation: fadeInUp 0.5s ease 0.1s both; }
.mistake-section { animation: fadeInUp 0.5s ease 0.12s both; }
.spaced-rep { animation: fadeInUp 0.5s ease 0.15s both; }
.section-header:nth-of-type(3) { animation: fadeInUp 0.5s ease 0.18s both; }
.chat-preview { animation: fadeInUp 0.5s ease 0.2s both; }
.section-header:nth-of-type(4) { animation: fadeInUp 0.5s ease 0.22s both; }
.predictor-section { animation: fadeInUp 0.5s ease 0.25s both; }
.section-header:nth-of-type(5) { animation: fadeInUp 0.5s ease 0.28s both; }
.strategy-section { animation: fadeInUp 0.5s ease 0.3s both; }
.section-header:nth-of-type(6) { animation: fadeInUp 0.5s ease 0.32s both; }
.optimization-section { animation: fadeInUp 0.5s ease 0.35s both; }
.quick-stats { animation: fadeInUp 0.5s ease 0.38s both; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
</style>
</head>
<body>
<!-- SVG Defs -->
<svg style="position:absolute;width:0;height:0;">
<defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#5EC4B8" />
<stop offset="100%" stop-color="#3B82F6" />
</linearGradient>
</defs>
</svg>
<div class="app">
<!-- ====== STATUS BAR ====== -->
<div class="status-bar">
<span class="time">9:41</span>
<div class="status-icons">
<svg viewBox="0 0 24 24"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
<svg viewBox="0 0 24 24"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
</div>
</div>
<!-- ====== HEADER ====== -->
<div class="header">
<div class="header-left">
<div class="logo">
<div class="logo-icon">PV</div>
<div class="logo-text">Pragati<span>Veer</span></div>
</div>
</div>
<div class="header-right">
<button class="header-btn" aria-label="Notifications">
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
<span class="notification-dot"></span>
</button>
<div class="avatar">R</div>
</div>
</div>
<!-- ====== GREETING ====== -->
<div class="greeting">
<h1>Namaste, <span>Rohan</span> 👋</h1>
<div class="sub">
<span class="hindi">आज का तुम्हारा AI कोच तैयार है</span>
<span>•</span>
<span>JEE Main 2027</span>
</div>
<div class="streak-badge">
<svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
12-day streak! 🔥
</div>
</div>
<!-- ====== FEATURE INDEX ====== -->
<div class="feature-index">
<div class="feature-index-grid">
<span class="feature-chip"><span class="chip-dot"></span> A-05 Readiness Score</span>
<span class="feature-chip"><span class="chip-dot"></span> A-03 Study Plan</span>
<span class="feature-chip"><span class="chip-dot"></span> A-01 Mistake Tracking</span>
<span class="feature-chip"><span class="chip-dot"></span> A-02 Spaced Repetition</span>
<span class="feature-chip"><span class="chip-dot"></span> A-04 AI Tutor</span>
<span class="feature-chip"><span class="chip-dot"></span> A-07 College Predictor</span>
<span class="feature-chip"><span class="chip-dot"></span> A-06 Exam Strategy</span>
<span class="feature-chip"><span class="chip-dot"></span> A-08 Time Optimization</span>
</div>
</div>
<!-- ================================================================ -->
<!-- 1. EXAM READINESS SCORE (A-05) -->
<!-- ================================================================ -->
<div class="readiness-section">
<div class="section-header" style="padding: 0 0 10px 0;">
<h2>🎯 Exam Readiness Score <span class="feature-badge ai">A-05</span></h2>
<span class="see-all">Trend →</span>
</div>
<div class="readiness-card">
<div class="readiness-header">
<span class="readiness-label">Updated daily • 19 Jul 2026</span>
<span class="readiness-trend">
<svg viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"/></svg>
+5 this week
</span>
</div>
<div class="readiness-body">
<div class="score-ring">
<svg viewBox="0 0 100 100">
<circle class="bg-circle" cx="50" cy="50" r="45"/>
<circle class="progress-circle" cx="50" cy="50" r="45"/>
</svg>
<div class="score-text">
<div class="number">72</div>
<div class="label">/100</div>
</div>
</div>
<div class="readiness-details">
<div class="readiness-detail-item">
<div class="value">78% <span class="change up">↑2%</span></div>
<div class="label">Accuracy (40%)</div>
</div>
<div class="readiness-detail-item">
<div class="value">65% <span class="change up">↑4%</span></div>
<div class="label">Syllabus (20%)</div>
</div>
<div class="readiness-detail-item">
<div class="value">82% <span class="change up">↑1%</span></div>
<div class="label">Consistency (10%)</div>
</div>
<div class="readiness-detail-item">
<div class="value">58% <span class="change down">↓3%</span></div>
<div class="label">Speed (20%)</div>
</div>
</div>
</div>
<div class="readiness-message">
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
<span><strong>NIT Surat</strong> is within reach! Improve your speed by 10% to target <strong>NIT Trichy</strong> 🎯</span>
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 2. TODAY'S STUDY PLAN (A-03) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>📋 Today's Study Plan <span class="feature-badge ai">A-03</span></h2>
<span class="see-all">See All →</span>
</div>
<div class="study-plan">
<div class="plan-card">
<div class="plan-header">
<span class="date">Sunday, 19 July 2026</span>
<span class="progress-text">2/5 done</span>
</div>
<div class="plan-progress-bar">
<div class="fill" style="width: 40%;"></div>
</div>
<div class="plan-tasks">
<div class="plan-task completed">
<div class="checkbox"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg></div>
<div class="task-info">
<div class="title">Revise Thermodynamics</div>
<div class="meta">Physics • Chapter 5</div>
</div>
<span class="task-tag revision">Revision</span>
<span class="task-duration">15 min</span>
</div>
<div class="plan-task current">
<div class="checkbox"></div>
<div class="task-info">
<div class="title">DPS — Electrostatics</div>
<div class="meta">Physics • 12 questions • Medium</div>
</div>
<span class="task-tag practice">Practice</span>
<span class="task-duration">20 min</span>
</div>
<div class="plan-task">
<div class="checkbox"></div>
<div class="task-info">
<div class="title">Mistake Review Session</div>
<div class="meta">7 questions from your error queue</div>
</div>
<span class="task-tag review">Review</span>
<span class="task-duration">10 min</span>
</div>
<div class="plan-task">
<div class="checkbox"></div>
<div class="task-info">
<div class="title">Micro-test — Organic Chem</div>
<div class="meta">Chemistry • 5 questions</div>
</div>
<span class="task-tag test">Test</span>
<span class="task-duration">5 min</span>
</div>
<div class="plan-task">
<div class="checkbox"></div>
<div class="task-info">
<div class="title">Weekly Test Analysis</div>
<div class="meta">Review mistakes from yesterday's test</div>
</div>
<span class="task-tag review">Review</span>
<span class="task-duration">10 min</span>
</div>
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 3. MISTAKE TRACKING (A-01) + SPACED REPETITION (A-02) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>🎯 Mistake Tracking <span class="feature-badge ai">A-01</span></h2>
<span class="see-all">Full Analysis →</span>
</div>
<div class="mistake-section">
<div class="mistake-card">
<div class="mistake-icon">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
</div>
<div class="mistake-info">
<div class="title">7 mistakes waiting for review</div>
<div class="subtitle">
<span>3</span> conceptual • <span>2</span> calculation • <span>2</span> time pressure
</div>
</div>
<div class="mistake-arrow">
<svg viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
</div>
</div>
</div>
<div class="section-header" style="padding-top: 12px;">
<h2>🔄 Spaced Repetition Queue <span class="feature-badge ai">A-02</span></h2>
<span class="see-all">All Questions →</span>
</div>
<div class="spaced-rep">
<div class="sr-card">
<div class="sr-header">
<span class="sr-title">SM-2 Algorithm • 12 active mistakes</span>
<span class="sr-count">3 mastered this week</span>
</div>
<div class="sr-timeline">
<div class="sr-day">
<span class="day-label">Day 1</span>
<div class="day-dot completed">✓</div>
<div class="day-connector done"></div>
</div>
<div class="sr-day">
<span class="day-label">Day 3</span>
<div class="day-dot current">3</div>
<div class="day-connector"></div>
</div>
<div class="sr-day">
<span class="day-label">Day 7</span>
<div class="day-dot pending">7</div>
<div class="day-connector"></div>
</div>
<div class="sr-day">
<span class="day-label">Day 14</span>
<div class="day-dot pending">14</div>
<div class="day-connector"></div>
</div>
<div class="sr-day">
<span class="day-label">Day 30</span>
<div class="day-dot pending">30</div>
</div>
</div>
<div class="sr-questions">
<div class="sr-question">
<span class="q-icon conceptual"></span>
<div class="q-info">
<div class="q-text">Coulomb's Law — Force between two charges in a medium</div>
<div class="q-meta">Physics • Electrostatics • Attempt 2/5</div>
</div>
<span class="q-attempt">Due today</span>
</div>
<div class="sr-question">
<span class="q-icon calculation"></span>
<div class="q-info">
<div class="q-text">Integration of rational functions by partial fractions</div>
<div class="q-meta">Maths • Calculus • Attempt 1/5</div>
</div>
<span class="q-attempt">Due today</span>
</div>
<div class="sr-question">
<span class="q-icon conceptual"></span>
<div class="q-info">
<div class="q-text">Electromagnetic Induction — Lenz's Law application</div>
<div class="q-meta">Physics • EMI • Attempt 3/5</div>
</div>
<span class="q-attempt">Tomorrow</span>
</div>
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 4. AI TUTOR CHAT (A-04) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>💬 AI Tutor Chat <span class="feature-badge ai">A-04</span></h2>
<span class="see-all">Full Chat →</span>
</div>
<div class="chat-preview">
<div class="chat-card">
<div class="chat-card-header">
<div class="ai-avatar">AI</div>
<div>
<div class="ai-name">PragatiVeer AI Tutor</div>
<div class="ai-status"><span class="dot"></span> Online • Context-aware</div>
</div>
<div class="msgs-left"><span>42</span> / 50 messages today</div>
</div>
<div class="chat-messages">
<div class="chat-msg user">
<div class="msg-bubble">
Can you explain why option C is wrong in today's DPS Q7? The one about electric field lines.
</div>
</div>
<div class="chat-msg ai">
<div class="msg-bubble">
Great question! Option C says "Electric field lines can intersect each other." This is incorrect because:<br><br>
• Electric field lines <strong>never intersect</strong> — at the point of intersection, there would be two different directions of the electric field, which is impossible.<br><br>
• I see you've made a similar mistake in <strong>Electrostatic Potential (Day 3)</strong> — want me to pull up that question for revision?
</div>
</div>
<div class="chat-msg user">
<div class="msg-bubble">
Yes please! And give me a similar practice question.
</div>
</div>
<div class="chat-msg ai">
<div class="msg-bubble">
Here's your previous mistake from <strong>Electrostatic Potential</strong> (attempted 19 Jul):<br><br>
<em>"Two point charges +4μC and -2μC are placed 10cm apart. Where is the electric field zero?"</em><br><br>
🔄 <strong>Similar question:</strong> Three charges +2q, -q, and +3q are placed at vertices of an equilateral triangle. Find the point where net electric field is zero.<br><br>
Want me to walk through the solution step by step? 🤔
</div>
</div>
</div>
<div class="chat-input-bar">
<input type="text" placeholder="Ask your doubt in Hindi or English..." />
<button class="send-btn" aria-label="Send">
<svg viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
</button>
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 5. COLLEGE PREDICTOR (A-07) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>🏛️ College Predictor <span class="feature-badge ai">A-07</span></h2>
<span class="see-all">Full List →</span>
</div>
<div class="predictor-section">
<div class="predictor-card">
<div class="predictor-tabs">
<div class="predictor-tab active">Reach 🚀</div>
<div class="predictor-tab">Target 🎯</div>
<div class="predictor-tab">Safety 🛡️</div>
</div>
<div class="predictor-list">
<div class="predictor-item">
<div class="college-rank reach">R</div>
<div class="college-info">
<div class="name">IIT Delhi</div>
<div class="branch">Computer Science</div>
</div>
<span class="college-prob low">15%</span>
</div>
<div class="predictor-item">
<div class="college-rank reach">R</div>
<div class="college-info">
<div class="name">IIT Bombay</div>
<div class="branch">Electrical Engineering</div>
</div>
<span class="college-prob low">22%</span>
</div>
<div class="predictor-item">
<div class="college-rank target">T</div>
<div class="college-info">
<div class="name">NIT Surat (SVNIT)</div>
<div class="branch">Computer Science</div>
</div>
<span class="college-prob med">68%</span>
</div>
<div class="predictor-item">
<div class="college-rank target">T</div>
<div class="college-info">
<div class="name">NIT Trichy</div>
<div class="branch">Mechanical Engineering</div>
</div>
<span class="college-prob med">55%</span>
</div>
<div class="predictor-item">
<div class="college-rank safety">S</div>
<div class="college-info">
<div class="name">IIIT Allahabad</div>
<div class="branch">IT</div>
</div>
<span class="college-prob high">89%</span>
</div>
</div>
<div class="predictor-motivation">
🎯 You need <strong>+35 marks</strong> to reach IIT Delhi CSE. At your current trajectory, <strong>NIT Surat CSE</strong> is your best target!
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 6. EXAM DAY STRATEGY (A-06) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>📋 Exam Day Strategy <span class="feature-badge ai">A-06</span></h2>
<span class="see-all">Full Strategy →</span>
</div>
<div class="strategy-section">
<div class="strategy-card">
<div class="strategy-grid">
<div class="strategy-item">
<div class="s-icon">⚡</div>
<div class="s-title">Start with Physics</div>
<div class="s-desc">Your strongest section — 78% accuracy</div>
</div>
<div class="strategy-item">
<div class="s-icon">⏱️</div>
<div class="s-title">45 min per section</div>
<div class="s-desc">Physics: 45m • Chem: 40m • Maths: 50m</div>
</div>
<div class="strategy-item">
<div class="s-icon">🎯</div>
<div class="s-title">Numerical first in Chem</div>
<div class="s-desc">You score 72% on numerical vs 58% on theory</div>
</div>
<div class="strategy-item">
<div class="s-icon">⏰</div>
<div class="s-title">Last 15 min sprint</div>
<div class="s-desc">You slow down — practice timed sprints!</div>
</div>
</div>
<div class="strategy-print">
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
Download Printable Strategy Card
</div>
</div>
</div>
<!-- ================================================================ -->
<!-- 7. STUDY TIME OPTIMIZATION (A-08) -->
<!-- ================================================================ -->
<div class="section-header">
<h2>⏰ Study Time Optimization <span class="feature-badge ai">A-08</span></h2>
<span class="see-all">Full Analysis →</span>
</div>
<div class="optimization-section">
<div class="optimization-card">
<div class="opt-chart">
<div class="opt-bar" style="height: 20%;"><span class="bar-label">6AM</span></div>
<div class="opt-bar" style="height: 30%;"><span class="bar-label">8AM</span></div>
<div class="opt-bar" style="height: 45%;"><span class="bar-label">10AM</span></div>
<div class="opt-bar" style="height: 55%;"><span class="bar-label">12PM</span></div>
<div class="opt-bar" style="height: 40%;"><span class="bar-label">2PM</span></div>
<div class="opt-bar" style="height: 35%;"><span class="bar-label">4PM</span></div>
<div class="opt-bar" style="height: 50%;"><span class="bar-label">6PM</span></div>
<div class="opt-bar peak" style="height: 90%;"><span class="bar-label">8PM</span></div>
<div class="opt-bar peak" style="height: 85%;"><span class="bar-label">10PM</span></div>
<div class="opt-bar" style="height: 60%;"><span class="bar-label">12AM</span></div>
</div>
<div class="opt-insight">
<svg viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
<span>You perform best between <strong>8 PM - 10 PM</strong> (92% accuracy). Schedule your most difficult topics then! 🌙</span>
</div>
</div>
</div>
<!-- ====== QUICK STATS ====== -->
<div class="section-header">
<h2>📊 This Week Overview</h2>
</div>
<div class="quick-stats">
<div class="stat-card">
<div class="stat-value teal">1,247</div>
<div class="stat-label">Questions Solved</div>
</div>
<div class="stat-card">
<div class="stat-value amber">78%</div>
<div class="stat-label">Avg Accuracy</div>
</div>
<div class="stat-card">
<div class="stat-value gold">#42</div>
<div class="stat-label">City Rank</div>
</div>
</div>
<!-- ====== BOTTOM NAV ====== -->
<nav class="bottom-nav">
<button class="nav-item" aria-label="Dashboard">
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<span class="nav-label">Home</span>
</button>
<button class="nav-item" aria-label="Practice">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
<span class="nav-label">Practice</span>
</button>
<button class="nav-item active" aria-label="AI Coach">
<svg viewBox="0 0 24 24"><path d="M12 2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
<span class="nav-label">AI Coach</span>
</button>
<button class="nav-item" aria-label="Tests">
<svg viewBox="0 0 24 24"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
<span class="nav-label">Tests</span>
</button>
<button class="nav-item" aria-label="Profile">
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-label">Profile</span>
</button>
</nav>
</div>
</body>
</html>