feat: setup admin JSON generation and pdf viewer for free plan DPPs
This commit is contained in:
821
pragativeer-ai-coach-dashboard.html
Normal file
821
pragativeer-ai-coach-dashboard.html
Normal file
@@ -0,0 +1,821 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PragatiVeer — AI Coach Dashboard</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, sans-serif;
|
||||
background: #0f0f1a;
|
||||
color: #e0e0e0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #2a2a3e;
|
||||
}
|
||||
|
||||
.logo-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.logo-text span {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.tier-badge {
|
||||
background: linear-gradient(135deg, #7c3aed, #a855f7);
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: #2a2a3e;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #a855f7;
|
||||
border: 2px solid #a855f7;
|
||||
}
|
||||
|
||||
/* Greeting */
|
||||
.greeting {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.greeting h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.greeting p {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.greeting p span {
|
||||
color: #a855f7;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Stats Row */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #1a1a2e;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #2a2a3e;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #7c3aed40;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-value .unit {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.stat-change {
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-change.up { color: #22c55e; }
|
||||
.stat-change.down { color: #ef4444; }
|
||||
|
||||
/* Readiness Score - Special */
|
||||
.readiness-ring {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.readiness-ring svg {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.readiness-ring .bg { fill: none; stroke: #2a2a3e; stroke-width: 4; }
|
||||
.readiness-ring .progress { fill: none; stroke: #a855f7; stroke-width: 4; stroke-linecap: round; }
|
||||
|
||||
.readiness-value {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-card.readiness {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.readiness-text h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.readiness-text p {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Main Grid */
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #1a1a2e;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
border: 1px solid #2a2a3e;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
font-size: 12px;
|
||||
color: #a855f7;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-action:hover { text-decoration: underline; }
|
||||
|
||||
/* Mistake Heatmap */
|
||||
.heatmap-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.heatmap-subjects {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.heatmap-subject {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.heatmap-cells {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.heatmap-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.heatmap-cell {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.heatmap-cell:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.heatmap-cell.level-0 { background: #1a1a2e; border: 1px solid #2a2a3e; }
|
||||
.heatmap-cell.level-1 { background: #2d1b4e; }
|
||||
.heatmap-cell.level-2 { background: #4a1d6e; }
|
||||
.heatmap-cell.level-3 { background: #7c3aed; }
|
||||
.heatmap-cell.level-4 { background: #a855f7; }
|
||||
.heatmap-cell.level-5 { background: #22c55e; }
|
||||
|
||||
.heatmap-legend {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.heatmap-legend .dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Daily Plan */
|
||||
.plan-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #2a2a3e;
|
||||
}
|
||||
|
||||
.plan-item:last-child { border-bottom: none; }
|
||||
|
||||
.plan-check {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #3a3a5e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.plan-check.done {
|
||||
background: #22c55e;
|
||||
border-color: #22c55e;
|
||||
}
|
||||
|
||||
.plan-check.done::after {
|
||||
content: '✓';
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.plan-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.plan-name.done-text {
|
||||
text-decoration: line-through;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.plan-meta {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.plan-time {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plan-tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.plan-tag.physics { background: #7c3aed30; color: #a855f7; }
|
||||
.plan-tag.chemistry { background: #22c55e30; color: #22c55e; }
|
||||
.plan-tag.maths { background: #f59e0b30; color: #f59e0b; }
|
||||
.plan-tag.review { background: #ef444430; color: #ef4444; }
|
||||
|
||||
/* Bottom Row */
|
||||
.bottom-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* AI Insight */
|
||||
.insight-card {
|
||||
background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
|
||||
border: 1px solid #7c3aed30;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* Leaderboard Mini */
|
||||
.lb-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #2a2a3e;
|
||||
}
|
||||
|
||||
.lb-item:last-child { border-bottom: none; }
|
||||
|
||||
.lb-rank {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lb-rank.gold { background: #f59e0b30; color: #f59e0b; }
|
||||
.lb-rank.silver { background: #94a3b830; color: #94a3b8; }
|
||||
.lb-rank.bronze { background: #b4530930; color: #b45309; }
|
||||
.lb-rank.other { background: #2a2a3e; color: #666; }
|
||||
|
||||
.lb-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.lb-score {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.lb-badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
background: #7c3aed20;
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
/* Streak */
|
||||
.streak-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.streak-fire {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.streak-info h3 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.streak-info p {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.streak-days {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.streak-day {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.streak-day.active {
|
||||
background: #22c55e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.streak-day.inactive {
|
||||
background: #2a2a3e;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.streak-day.today {
|
||||
border: 2px solid #f59e0b;
|
||||
background: #f59e0b20;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.stats-row { grid-template-columns: repeat(2, 1fr); }
|
||||
.main-grid { grid-template-columns: 1fr; }
|
||||
.bottom-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.stats-row { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">PV</div>
|
||||
<div class="logo-text">Pragati<span>Veer</span></div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="tier-badge">✦ AI COACH</div>
|
||||
<div class="user-avatar">RK</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Greeting -->
|
||||
<div class="greeting">
|
||||
<h1>Good morning, Rohan! 👋</h1>
|
||||
<p>Your AI Coach has prepared today's plan. <span>You're on track for NIT Surat.</span></p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Readiness Score</div>
|
||||
<div class="stat-card readiness" style="padding:0; border:none; background:transparent;">
|
||||
<div class="readiness-ring">
|
||||
<svg viewBox="0 0 60 60">
|
||||
<circle class="bg" cx="30" cy="30" r="24"/>
|
||||
<circle class="progress" cx="30" cy="30" r="24" stroke-dasharray="150.8" stroke-dashoffset="45.2"/>
|
||||
</svg>
|
||||
<span class="readiness-value">72</span>
|
||||
</div>
|
||||
<div class="readiness-text">
|
||||
<h3>Good Progress</h3>
|
||||
<p>↑ 5 pts this week</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Streak</div>
|
||||
<div class="stat-value">23 <span class="unit">days</span></div>
|
||||
<div class="stat-change up">🔥 Best: 23 days</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Questions Solved</div>
|
||||
<div class="stat-value">1,247 <span class="unit">total</span></div>
|
||||
<div class="stat-change up">↑ 47 this week</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">Overall Accuracy</div>
|
||||
<div class="stat-value">74<span class="unit">%</span></div>
|
||||
<div class="stat-change up">↑ 3% this month</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid: Heatmap + Daily Plan -->
|
||||
<div class="main-grid">
|
||||
<!-- Mistake Heatmap -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">📊 Mistake Heatmap</div>
|
||||
<div class="card-action">View Details →</div>
|
||||
</div>
|
||||
<div class="heatmap-grid">
|
||||
<div class="heatmap-subjects">
|
||||
<div class="heatmap-subject">Physics</div>
|
||||
<div class="heatmap-subject">Chemistry</div>
|
||||
<div class="heatmap-subject">Maths</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="heatmap-row">
|
||||
<div class="heatmap-cell level-5" title="Electrostatics - 92%"></div>
|
||||
<div class="heatmap-cell level-4" title="Kinematics - 85%"></div>
|
||||
<div class="heatmap-cell level-2" title="Thermodynamics - 55%"></div>
|
||||
<div class="heatmap-cell level-3" title="Optics - 68%"></div>
|
||||
<div class="heatmap-cell level-1" title="SHM - 40%"></div>
|
||||
<div class="heatmap-cell level-4" title="Laws of Motion - 82%"></div>
|
||||
<div class="heatmap-cell level-3" title="Work Energy - 65%"></div>
|
||||
<div class="heatmap-cell level-5" title="Gravitation - 90%"></div>
|
||||
<div class="heatmap-cell level-2" title="Fluids - 50%"></div>
|
||||
<div class="heatmap-cell level-0" title="Waves - Not started"></div>
|
||||
</div>
|
||||
<div class="heatmap-row">
|
||||
<div class="heatmap-cell level-3" title="Mole Concept - 70%"></div>
|
||||
<div class="heatmap-cell level-5" title="Atomic Structure - 95%"></div>
|
||||
<div class="heatmap-cell level-1" title="GOC - 38%"></div>
|
||||
<div class="heatmap-cell level-2" title="Chemical Bonding - 52%"></div>
|
||||
<div class="heatmap-cell level-4" title="Thermodynamics - 80%"></div>
|
||||
<div class="heatmap-cell level-3" title="Equilibrium - 72%"></div>
|
||||
<div class="heatmap-cell level-5" title="Redox - 88%"></div>
|
||||
<div class="heatmap-cell level-2" title="Hydrocarbons - 48%"></div>
|
||||
<div class="heatmap-cell level-1" title="Periodic Table - 35%"></div>
|
||||
<div class="heatmap-cell level-0" title="Coordination - Not started"></div>
|
||||
</div>
|
||||
<div class="heatmap-row">
|
||||
<div class="heatmap-cell level-4" title="Sets & Relations - 83%"></div>
|
||||
<div class="heatmap-cell level-3" title="Functions - 67%"></div>
|
||||
<div class="heatmap-cell level-5" title="Trigonometry - 91%"></div>
|
||||
<div class="heatmap-cell level-2" title="Straight Lines - 45%"></div>
|
||||
<div class="heatmap-cell level-1" title="Circles - 30%"></div>
|
||||
<div class="heatmap-cell level-3" title="Limits - 62%"></div>
|
||||
<div class="heatmap-cell level-4" title="Differentiation - 78%"></div>
|
||||
<div class="heatmap-cell level-2" title="Integration - 55%"></div>
|
||||
<div class="heatmap-cell level-0" title="Vectors - Not started"></div>
|
||||
<div class="heatmap-cell level-0" title="3D Geometry - Not started"></div>
|
||||
</div>
|
||||
<div class="heatmap-legend">
|
||||
<span>Weak</span>
|
||||
<div class="dot" style="background:#2d1b4e"></div>
|
||||
<div class="dot" style="background:#4a1d6e"></div>
|
||||
<div class="dot" style="background:#7c3aed"></div>
|
||||
<div class="dot" style="background:#a855f7"></div>
|
||||
<div class="dot" style="background:#22c55e"></div>
|
||||
<span>Strong</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Plan -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">📋 Today's Study Plan</div>
|
||||
<div class="card-action">Regenerate →</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-item">
|
||||
<div class="plan-check done"></div>
|
||||
<div class="plan-info">
|
||||
<div class="plan-name done-text">DPS — Electrostatics + Kinematics</div>
|
||||
<div class="plan-meta">10 questions • Mixed difficulty</div>
|
||||
</div>
|
||||
<span class="plan-tag physics">Physics</span>
|
||||
<div class="plan-time">20 min</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-item">
|
||||
<div class="plan-check done"></div>
|
||||
<div class="plan-info">
|
||||
<div class="plan-name done-text">Mistake Review — Thermodynamics</div>
|
||||
<div class="plan-meta">5 re-attempts from spaced repetition queue</div>
|
||||
</div>
|
||||
<span class="plan-tag review">Review</span>
|
||||
<div class="plan-time">10 min</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-item">
|
||||
<div class="plan-check"></div>
|
||||
<div class="plan-info">
|
||||
<div class="plan-name">Micro-test — GOC (General Organic Chemistry)</div>
|
||||
<div class="plan-meta">5 questions • Your accuracy here: 38% ⚠️</div>
|
||||
</div>
|
||||
<span class="plan-tag chemistry">Chemistry</span>
|
||||
<div class="plan-time">5 min</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-item">
|
||||
<div class="plan-check"></div>
|
||||
<div class="plan-info">
|
||||
<div class="plan-name">Weekly Test — Full Syllabus (JEE Main Pattern)</div>
|
||||
<div class="plan-meta">90 questions • 3 hours • Sectional timing</div>
|
||||
</div>
|
||||
<span class="plan-tag maths">Test</span>
|
||||
<div class="plan-time">3 hrs</div>
|
||||
</div>
|
||||
|
||||
<div class="plan-item">
|
||||
<div class="plan-check"></div>
|
||||
<div class="plan-info">
|
||||
<div class="plan-name">Revise — Circles + Straight Lines</div>
|
||||
<div class="plan-meta">Formula sheet + 3 practice questions</div>
|
||||
</div>
|
||||
<span class="plan-tag maths">Maths</span>
|
||||
<div class="plan-time">15 min</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Grid -->
|
||||
<div class="bottom-grid">
|
||||
<!-- AI Insight -->
|
||||
<div class="card insight-card">
|
||||
<div class="insight-icon">🤖</div>
|
||||
<div class="card-title" style="margin-bottom:10px;">AI Coach Insight</div>
|
||||
<div class="insight-text">
|
||||
<strong>You keep making sign errors in Thermodynamics.</strong>
|
||||
In your last 3 attempts, you've used the wrong sign for work done (W = -PΔV).
|
||||
Review the First Law of Thermodynamics — we've queued 3 practice questions for tomorrow.
|
||||
</div>
|
||||
<div style="margin-top:14px; padding:10px; background:#2a2a3e; border-radius:10px; font-size:12px; color:#888;">
|
||||
💡 <strong style="color:#a855f7;">Tip:</strong> You perform best between 7-9 PM. Schedule difficult topics then.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leaderboard -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">🏆 City Leaderboard — Jaipur</div>
|
||||
<div class="card-action">This Week →</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-item">
|
||||
<div class="lb-rank gold">1</div>
|
||||
<div class="lb-name">Priya S.</div>
|
||||
<div class="lb-score">94%</div>
|
||||
<div class="lb-badge">🔥 45 day streak</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-item">
|
||||
<div class="lb-rank silver">2</div>
|
||||
<div class="lb-name">Arjun M.</div>
|
||||
<div class="lb-score">91%</div>
|
||||
<div class="lb-badge">30 day streak</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-item">
|
||||
<div class="lb-rank bronze">3</div>
|
||||
<div class="lb-name">Rohan K.</div>
|
||||
<div class="lb-score">87%</div>
|
||||
<div class="lb-badge" style="background:#f59e0b30; color:#f59e0b;">👈 You</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-item">
|
||||
<div class="lb-rank other">4</div>
|
||||
<div class="lb-name">Neha G.</div>
|
||||
<div class="lb-score">85%</div>
|
||||
</div>
|
||||
|
||||
<div class="lb-item">
|
||||
<div class="lb-rank other">5</div>
|
||||
<div class="lb-name">Vikram R.</div>
|
||||
<div class="lb-score">82%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Streak + Milestones -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">🔥 Streak & Milestones</div>
|
||||
<div class="card-action">Share →</div>
|
||||
</div>
|
||||
|
||||
<div class="streak-display">
|
||||
<div class="streak-fire">🔥</div>
|
||||
<div class="streak-info">
|
||||
<h3>23 Days</h3>
|
||||
<p>Longest streak: 23 days 🎉</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="streak-days">
|
||||
<div class="streak-day active">M</div>
|
||||
<div class="streak-day active">T</div>
|
||||
<div class="streak-day active">W</div>
|
||||
<div class="streak-day active">T</div>
|
||||
<div class="streak-day active">F</div>
|
||||
<div class="streak-day active">S</div>
|
||||
<div class="streak-day today">S</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:16px; display:flex; gap:8px; flex-wrap:wrap;">
|
||||
<div style="padding:6px 12px; background:#2a2a3e; border-radius:20px; font-size:11px; color:#888;">
|
||||
🏅 7-Day Streak ✅
|
||||
</div>
|
||||
<div style="padding:6px 12px; background:#2a2a3e; border-radius:20px; font-size:11px; color:#888;">
|
||||
🏅 21-Day Streak ✅
|
||||
</div>
|
||||
<div style="padding:6px 12px; background:#7c3aed20; border-radius:20px; font-size:11px; color:#a855f7; border:1px solid #7c3aed40;">
|
||||
🏆 30-Day Streak — 7 days away!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="margin-top:30px; text-align:center; font-size:11px; color:#444; padding:20px 0; border-top:1px solid #2a2a3e;">
|
||||
PragatiVeer — AI Coach Dashboard Mockup | Gyannetra Pvt Ltd | July 2026
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user