feat: setup admin JSON generation and pdf viewer for free plan DPPs

This commit is contained in:
2026-07-27 14:56:25 +05:30
parent c214ca41b6
commit a5bb2d867c
74 changed files with 8546 additions and 915 deletions

View 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>