naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

Browse Source 
- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark)
  + opacity variants --cyan-ai-10/20/30/40/50/80
- Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with
  var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files
- Shadow glow colours also updated (suppressed by box-shadow:none in light mode)
- TypeScript: 0 errors
This commit is contained in:
ectasy663
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/AI/AITutorChat.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useRef, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
@@ -111,7 +111,7 @@ export function AITutorChat() {
return (
<Button
onClick={() => setIsOpen(true)}
className="fixed bottom-6 right-6 h-14 w-14 rounded-full flex items-center justify-center z-50 bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 transition-transform hover:scale-105"
className="fixed bottom-6 right-6 h-14 w-14 rounded-full flex items-center justify-center z-50 bg-[var(--cyan-ai)] text-background hover:bg-[var(--cyan-ai-80)] transition-transform hover:scale-105"
>
<Bot size={28} />
</Button>

6
src/components/AI/AdaptiveStudyPlan.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -59,7 +59,7 @@ export function AdaptiveStudyPlan() {
<div className="flex items-center justify-between">
<CardTitle className="text-xl flex items-center gap-2">
<BrainCircuit className="text-primary" /> Adaptive Study Plan
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
<Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
</CardTitle>
<div className="flex items-center gap-2 bg-secondary/50 px-3 py-1 rounded-full text-xs font-bold text-foreground">
<Clock size={14} className="text-primary" /> Today: {totalTime} min
@@ -86,7 +86,7 @@ export function AdaptiveStudyPlan() {
</div>
{/* Card */}
<div className="flex-1 p-4 rounded-xl border border-border bg-background shadow-sm transition-all hover:shadow-md hover:border-[#00F0FF]/30">
<div className="flex-1 p-4 rounded-xl border border-border bg-background shadow-sm transition-all hover:shadow-md hover:border-[var(--cyan-ai-30)]">
<div className={`flex items-center justify-between mb-1.5 ${isSkipped ? 'opacity-50' : ''}`}>
<span className="text-[10px] uppercase font-bold tracking-wider text-muted-foreground bg-secondary/50 px-2 py-0.5 rounded-md">
{item.type}

8
src/components/AI/CollegePredictorCard.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -67,14 +67,14 @@ export function CollegePredictorCard() {
const TAB_COLORS: Record<string, string> = {
Reach: "bg-purple-500/10 border-purple-500/20 text-purple-400",
Target: "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]",
Target: "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]",
Safety: "bg-green-500/10 border-green-500/20 text-green-400",
}
const INACTIVE = "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"
return (
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col gap-4">
{/* Tabs */}
<div className="flex gap-1.5">
@@ -100,7 +100,7 @@ export function CollegePredictorCard() {
<div className="flex flex-col gap-2">
{colleges.map((col) => (
<div key={col.name} className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-border hover:bg-white/10 transition-colors group/item">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[#00F0FF]/10 text-[#00F0FF]" : "bg-green-500/10 text-green-400"}`}>
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]" : "bg-green-500/10 text-green-400"}`}>
#{col.rank}
</div>
<div className="flex-1 min-w-0">

4
src/components/AI/DailyChallengeBanner.tsx
View File

@@ -1,10 +1,10 @@
"use client"
"use client"
import { useState, useEffect } from "react"
import { Flame, ArrowRight, Timer, BookOpen, TrendingUp } from "lucide-react"
const FOCUS_TOPICS = [
{ subject: "Physics", topic: "Rotational Dynamics", color: "from-blue-600/30 to-[#00F0FF]/20", accent: "#00F0FF", icon: "⚛️", questions: 12, weightage: "8–12 marks" },
{ subject: "Physics", topic: "Rotational Dynamics", color: "from-blue-600/30 to-[var(--cyan-ai-20)]", accent: "var(--cyan-ai)", icon: "⚛️", questions: 12, weightage: "8–12 marks" },
{ subject: "Chemistry", topic: "Organic Reaction Mechanisms", color: "from-amber-600/30 to-yellow-500/20", accent: "#F59E0B", icon: "🧪", questions: 10, weightage: "6–10 marks" },
{ subject: "Biology", topic: "Human Nervous System", color: "from-green-600/30 to-emerald-400/20", accent: "#10B981", icon: "🧬", questions: 14, weightage: "10–14 marks" },
{ subject: "Maths", topic: "Integral Calculus", color: "from-purple-600/30 to-violet-400/20", accent: "#A78BFA", icon: "∫", questions: 15, weightage: "12–15 marks" },

8
src/components/AI/ExamStrategyCard.tsx
View File

@@ -1,11 +1,11 @@
import { Card, CardContent } from "@/components/ui/card"
import { Card, CardContent } from "@/components/ui/card"
import { Printer } from "lucide-react"
import Link from "next/link"
export function ExamStrategyCard() {
return (
<div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 min-h-[440px] overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 min-h-[440px] overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col h-full justify-between">
<div className="grid grid-cols-2 gap-3">
<div className="p-3.5 rounded-lg bg-white/5 border border-border text-center flex flex-col justify-center">
@@ -30,8 +30,8 @@ export function ExamStrategyCard() {
</div>
</div>
<div className="mt-4 flex items-center justify-center gap-2 p-3 rounded-lg bg-[#00F0FF]/10 border border-dashed border-[#00F0FF]/20 text-xs md:text-sm text-[#00F0FF] font-bold cursor-pointer hover:bg-[#00F0FF]/20 transition-colors">
<Printer size={18} className="stroke-[#00F0FF]" />
<div className="mt-4 flex items-center justify-center gap-2 p-3 rounded-lg bg-[var(--cyan-ai-10)] border border-dashed border-[var(--cyan-ai-20)] text-xs md:text-sm text-[var(--cyan-ai)] font-bold cursor-pointer hover:bg-[var(--cyan-ai-20)] transition-colors">
<Printer size={18} className="stroke-[var(--cyan-ai)]" />
Print Exam Day Blueprint
</div>
</CardContent>

6
src/components/AI/FeatureIndex.tsx
View File

@@ -1,4 +1,4 @@
import Link from "next/link"
import Link from "next/link"
const features = [
{ name: "Mistake Tracking", href: "/dashboard/ai-coach/mistakes" },
@@ -19,9 +19,9 @@ export function FeatureIndex() {
<Link
key={f.name}
href={f.href}
className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-extrabold bg-[#00F0FF]/10 border border-[#00F0FF]/30 text-[#00F0FF] hover:bg-[#00F0FF] hover:text-black transition-all shadow-[0_0_12px_rgba(0,240,255,0.1)] group"
className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-extrabold bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai)] hover:text-black transition-all shadow-[0_0_12px_rgba(12,96,96,0.1)] group"
>
<span className="size-2 rounded-full bg-[#00F0FF] group-hover:bg-black transition-colors" />
<span className="size-2 rounded-full bg-[var(--cyan-ai)] group-hover:bg-black transition-colors" />
<span>{f.name}</span>
<span className="text-[10px] opacity-75">→</span>
</Link>

4
src/components/AI/MistakeHeatmap.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
@@ -39,7 +39,7 @@ export function MistakeHeatmap() {
<div className="flex items-center justify-between">
<CardTitle className="text-xl flex items-center gap-2">
<Flame className="text-orange-500" /> Mistake Heatmap
<Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
<Badge variant="outline" className="border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] rounded-md text-[10px] uppercase font-bold ml-2 hidden sm:flex">AI Coach</Badge>
</CardTitle>
<Info size={16} className="text-muted-foreground" />
</div>

22
src/components/AI/MistakeReviewCard.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -89,7 +89,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div className="flex justify-between items-center relative py-4 px-2">
<div className="absolute top-1/2 left-0 right-0 h-0.5 bg-secondary -translate-y-1/2 z-0" />
<div
className="absolute top-1/2 left-0 h-0.5 bg-[#00F0FF] -translate-y-1/2 z-0 transition-all"
className="absolute top-1/2 left-0 h-0.5 bg-[var(--cyan-ai)] -translate-y-1/2 z-0 transition-all"
style={{ width: mistake.review_count >= 1 ? (mistake.review_count >= 2 ? "67%" : "33%") : "0%" }}
/>
@@ -102,10 +102,10 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div key={i} className={`relative z-10 flex flex-col items-center gap-1.5 ${step.active ? "scale-110" : step.done ? "opacity-70" : "opacity-40"}`}>
<div className={`rounded-full border-2 border-background ${
step.done ? "w-3.5 h-3.5 bg-green-500" :
step.active ? "w-4 h-4 border-[3px] border-[#00F0FF] bg-background shadow-[0_0_10px_rgba(0,240,255,0.5)]" :
step.active ? "w-4 h-4 border-[3px] border-[var(--cyan-ai)] bg-background shadow-[0_0_10px_rgba(12,96,96,0.5)]" :
"w-3.5 h-3.5 bg-secondary"
}`} />
<span className={`text-xs font-bold ${step.active ? "text-[#00F0FF]" : step.done ? "text-green-400" : "text-muted-foreground"}`}>
<span className={`text-xs font-bold ${step.active ? "text-[var(--cyan-ai)]" : step.done ? "text-green-400" : "text-muted-foreground"}`}>
{step.label}
</span>
<span className="text-[11px] text-muted-foreground font-semibold">{step.date}</span>
@@ -114,7 +114,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
</div>
{/* Question Card */}
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[540px] h-full relative overflow-hidden flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[540px] h-full relative overflow-hidden flex flex-col justify-between group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-6 flex-1 flex flex-col justify-between">
{/* Meta Tags */}
<div className="flex items-center gap-2 mb-4 flex-wrap">
@@ -151,7 +151,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
btnClass = "border-red-500 bg-red-500/10 text-red-500"
}
} else if (isSelected) {
btnClass = "border-[#00F0FF] bg-[#00F0FF]/10 text-[#00F0FF] shadow-[0_0_15px_rgba(0,240,255,0.15)]"
btnClass = "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] shadow-[0_0_15px_rgba(12,96,96,0.15)]"
}
return (
@@ -177,16 +177,16 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<button
onClick={handleCheck}
disabled={!selected || isSubmitting}
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity disabled:opacity-50"
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 text-background hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isSubmitting ? "Checking..." : "Submit Answer"}
</button>
</div>
) : (
<>
<div className="mt-5 p-4 rounded-xl border border-[#00F0FF]/20 bg-[#00F0FF]/5">
<h4 className="text-[13px] font-bold text-[#00F0FF] mb-2 flex items-center gap-2">
<Flame size={16} className="fill-[#00F0FF]/20" />
<div className="mt-5 p-4 rounded-xl border border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]">
<h4 className="text-[13px] font-bold text-[var(--cyan-ai)] mb-2 flex items-center gap-2">
<Flame size={16} className="fill-[var(--cyan-ai-20)]" />
AI Explanation
</h4>
<div className="prose prose-sm dark:prose-invert max-w-none text-[13px] text-muted-foreground leading-relaxed [&>p]:m-0">
@@ -198,7 +198,7 @@ export function MistakeReviewCard({ data, onNext, onSubmitReview }: MistakeRevie
<div className="mt-5 flex justify-end">
<button
onClick={handleNext}
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[#00F0FF] to-teal-400 text-background hover:opacity-90 transition-opacity"
className="px-6 py-2.5 rounded-xl font-bold text-sm bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 text-background hover:opacity-90 transition-opacity"
>
Next Question →
</button>

12
src/components/AI/ProgressShare.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
@@ -43,7 +43,7 @@ export function ProgressShare() {
<CardHeader className="pb-2">
<CardTitle className="text-xl flex items-center justify-between">
<div className="flex items-center gap-2">
<ImageIcon className="text-[#00F0FF]" size={24} />
<ImageIcon className="text-[var(--cyan-ai)]" size={24} />
Share Your Wins
</div>
</CardTitle>
@@ -53,17 +53,17 @@ export function ProgressShare() {
<CardContent className="flex-1 flex flex-col justify-between gap-6 pt-2">
{/* Mock Preview of the OG Image */}
<div className="w-full rounded-xl overflow-hidden border border-border/50 shadow-md bg-gradient-to-br from-indigo-900/40 to-black relative aspect-[1200/630] flex flex-col items-center justify-center p-4 transition-transform group-hover:scale-[1.02]">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-[#00F0FF]/20 via-transparent to-transparent opacity-50" />
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-[var(--cyan-ai-20)] via-transparent to-transparent opacity-50" />
<div className="relative z-10 w-full flex flex-col h-full">
<div className="flex justify-between items-start w-full">
<div className="flex items-center gap-2">
<div className="w-8 h-8 rounded-lg bg-[#00F0FF] flex items-center justify-center">
<div className="w-8 h-8 rounded-lg bg-[var(--cyan-ai)] flex items-center justify-center">
<Sparkles size={16} className="text-black" />
</div>
<span className="text-sm font-black text-white tracking-wider">PRAGATIVEER</span>
</div>
<div className="text-[10px] font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-2 py-1 rounded-full border border-[#00F0FF]/20">
<div className="text-[10px] font-bold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2 py-1 rounded-full border border-[var(--cyan-ai-20)]">
Weekly Report
</div>
</div>
@@ -91,7 +91,7 @@ export function ProgressShare() {
</div>
</div>
<Button onClick={handleDownload} variant="outline" className="w-full h-11 font-bold text-sm hover:bg-[#00F0FF]/10 hover:text-[#00F0FF] hover:border-[#00F0FF]/30 transition-colors" disabled={downloading}>
<Button onClick={handleDownload} variant="outline" className="w-full h-11 font-bold text-sm hover:bg-[var(--cyan-ai-10)] hover:text-[var(--cyan-ai)] hover:border-[var(--cyan-ai-30)] transition-colors" disabled={downloading}>
{downloading ? <Loader2 size={18} className="mr-2 animate-spin" /> : <Download size={18} className="mr-2" />}
Download Scorecard PNG
</Button>

14
src/components/AI/ReadinessGauge.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -69,7 +69,7 @@ export function ReadinessGauge() {
return (
<div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] relative overflow-hidden flex-1 flex flex-col justify-between p-5 min-h-[440px] group hover:border-[var(--cyan-ai-30)] transition-colors">
{/* Background glow decoration */}
<div className="absolute -top-1/2 -right-1/4 w-48 h-48 bg-[radial-gradient(circle,rgba(94,196,184,0.06)_0%,transparent_70%)] rounded-full pointer-events-none" />
@@ -89,11 +89,11 @@ export function ReadinessGauge() {
<svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
<defs>
<linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="#00F0FF" />
<stop offset="0%" stopColor="var(--cyan-ai)" />
<stop offset="100%" stopColor="#3B82F6" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[#00F0FF]/10" />
<circle cx="50" cy="50" r="45" stroke="currentColor" strokeWidth="6" fill="transparent" className="text-[var(--cyan-ai-10)]" />
<circle
cx="50" cy="50" r="45"
stroke="url(#scoreGradient)"
@@ -147,7 +147,7 @@ export function ReadinessGauge() {
{/* Subject Bars */}
<div className="space-y-2 mb-4 relative z-10">
{[
{ name: "Physics", val: isZero ? 0 : 68, color: "#00F0FF" },
{ name: "Physics", val: isZero ? 0 : 68, color: "var(--cyan-ai)" },
{ name: "Chemistry", val: isZero ? 0 : 74, color: "#F59E0B" },
{ name: "Biology / Maths", val: isZero ? 0 : 82, color: "#10B981" },
].map(sub => (
@@ -173,8 +173,8 @@ export function ReadinessGauge() {
</span>
</div>
<div className="mt-auto px-3.5 py-3 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-lg text-xs md:text-sm text-[#00F0FF] font-bold flex items-center gap-2 relative z-10">
<Flame size={18} className="fill-[#00F0FF]/20 shrink-0" />
<div className="mt-auto px-3.5 py-3 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-lg text-xs md:text-sm text-[var(--cyan-ai)] font-bold flex items-center gap-2 relative z-10">
<Flame size={18} className="fill-[var(--cyan-ai-20)] shrink-0" />
{isZero
? "Complete your first diagnostic test to establish your personalized readiness score."
: "Your speed has dropped slightly. Focus on time-bound practice today."}

20
src/components/AI/StudyPlanCard.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -69,7 +69,7 @@ export function StudyPlanCard() {
switch(type) {
case "Revision": return "bg-yellow-500/10 text-yellow-500"
case "Mistake_Review": return "bg-red-500/10 text-red-500"
case "DPS": return "bg-[#00F0FF]/10 text-[#00F0FF]"
case "DPS": return "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]"
case "Micro_test": return "bg-green-500/10 text-green-500"
case "Test": return "bg-purple-500/10 text-purple-500"
default: return "bg-secondary text-muted-foreground"
@@ -90,18 +90,18 @@ export function StudyPlanCard() {
return (
<div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<div className="px-5 py-4 flex justify-between items-center border-b border-border">
<div className="text-sm font-bold text-muted-foreground">
{new Date().toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
</div>
<div className="text-xs text-[#00F0FF] font-bold">{progressPercent}% Completed</div>
<div className="text-xs text-[var(--cyan-ai)] font-bold">{progressPercent}% Completed</div>
</div>
{/* Progress bar */}
<div className="h-[3px] bg-[#00F0FF]/10 w-full">
<div className="h-[3px] bg-[var(--cyan-ai-10)] w-full">
<div
className="h-full bg-gradient-to-r from-[#00F0FF] to-teal-400 rounded-r-[2px] transition-all duration-500"
className="h-full bg-gradient-to-r from-[var(--cyan-ai)] to-teal-400 rounded-r-[2px] transition-all duration-500"
style={{ width: `${progressPercent}%` }}
/>
</div>
@@ -123,14 +123,14 @@ export function StudyPlanCard() {
onClick={() => toggleTask(idx, isDone ? "Pending" : "Done")}
className={`flex items-center gap-3 px-4 py-2.5 transition-colors cursor-pointer border-l-[3px] ${
isDone ? "opacity-60 border-green-500 hover:bg-white/5" :
isCurrent ? "border-[#00F0FF] bg-[#00F0FF]/5 hover:bg-[#00F0FF]/10" :
isCurrent ? "border-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] hover:bg-[var(--cyan-ai-10)]" :
"border-transparent hover:bg-white/5"
}`}
>
{/* Custom Checkbox */}
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-all ${
isDone ? "bg-green-500 border-green-500" :
isCurrent ? "border-[#00F0FF] shadow-[0_0_0_0_rgba(0,240,255,0.3)] animate-[pulse-border_2s_infinite]" :
isCurrent ? "border-[var(--cyan-ai)] shadow-[0_0_0_0_rgba(12,96,96,0.3)] animate-[pulse-border_2s_infinite]" :
"border-muted-foreground"
}`}>
{isDone && <Check size={12} className="stroke-white stroke-[3px]" />}
@@ -157,8 +157,8 @@ export function StudyPlanCard() {
</Card>
<style dangerouslySetInnerHTML={{__html: `
@keyframes pulse-border {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(0, 240, 255, 0); }
0%, 100% { box-shadow: 0 0 0 0 rgba(12, 96, 96, 0.3); }
50% { box-shadow: 0 0 0 6px rgba(12, 96, 96, 0); }
}
`}} />
</div>

12
src/components/AI/StudyTimeOptimizationCard.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Flame, Star, Clock, TrendingUp, Sparkles } from "lucide-react"
import { useState } from "react"
@@ -38,7 +38,7 @@ export function StudyTimeOptimizationCard() {
return (
<div>
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[440px] flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[440px] flex flex-col justify-between group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex-1 flex flex-col gap-4">
{/* Header stats */}
<div className="flex items-center gap-3 flex-wrap">
@@ -86,7 +86,7 @@ export function StudyTimeOptimizationCard() {
{hovered === i && (
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
<div className="text-foreground">{slot.label}</div>
<div className={slot.peak ? "text-yellow-400" : "text-[#00F0FF]"}>
<div className={slot.peak ? "text-yellow-400" : "text-[var(--cyan-ai)]"}>
Score: {slot.score}%
</div>
</div>
@@ -96,9 +96,9 @@ export function StudyTimeOptimizationCard() {
slot.peak
? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]"
: hovered === i
? "bg-gradient-to-t from-[#00F0FF]/70 to-[#00F0FF]"
? "bg-gradient-to-t from-[var(--cyan-ai-80)] to-[var(--cyan-ai)]"
: isDemo
? "bg-gradient-to-t from-[#00F0FF]/20 to-[#00F0FF]/50"
? "bg-gradient-to-t from-[var(--cyan-ai-20)] to-[var(--cyan-ai-10)]"
: "bg-white/5 border border-white/10"
}`}
style={{ height: isDemo ? `${(slot.h / maxH) * 100}%` : "4px" }}
@@ -123,7 +123,7 @@ export function StudyTimeOptimizationCard() {
{[
{ label: "Morning", time: "6–9 AM", eff: isDemo ? 60 : 0, color: "text-muted-foreground" },
{ label: "Peak", time: "2–5 PM", eff: isDemo ? 95 : 0, color: isDemo ? "text-yellow-400" : "text-muted-foreground" },
{ label: "Evening", time: "7–9 PM", eff: isDemo ? 73 : 0, color: isDemo ? "text-[#00F0FF]" : "text-muted-foreground" },
{ label: "Evening", time: "7–9 PM", eff: isDemo ? 73 : 0, color: isDemo ? "text-[var(--cyan-ai)]" : "text-muted-foreground" },
].map(slot => (
<div key={slot.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30">
<div className={`text-base font-black ${slot.color}`}>{slot.eff}%</div>

20
src/components/AI/TutorChat.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { useState, useRef, useEffect } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -94,10 +94,10 @@ export function TutorChat() {
return (
<div className="flex flex-col h-full min-h-[500px]">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden flex flex-col group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 overflow-hidden flex flex-col group hover:border-[var(--cyan-ai-30)] transition-colors">
{/* Chat Header */}
<div className="px-4 py-3 bg-[#00F0FF]/5 border-b border-border flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#00F0FF] to-blue-500 flex items-center justify-center shrink-0">
<div className="px-4 py-3 bg-[var(--cyan-ai-10)] border-b border-border flex items-center gap-3">
<div className="w-9 h-9 rounded-full bg-gradient-to-br from-[var(--cyan-ai)] to-blue-500 flex items-center justify-center shrink-0">
<BrainCircuit size={18} className="text-background" />
</div>
<div className="flex-1">
@@ -106,7 +106,7 @@ export function TutorChat() {
<span className="w-1.5 h-1.5 rounded-full bg-green-500" /> Online · JEE &amp; NEET specialist
</div>
</div>
<div className="flex items-center gap-1.5 text-[11px] font-bold text-[#00F0FF] bg-[#00F0FF]/10 px-2.5 py-1 rounded-full border border-[#00F0FF]/20">
<div className="flex items-center gap-1.5 text-[11px] font-bold text-[var(--cyan-ai)] bg-[var(--cyan-ai-10)] px-2.5 py-1 rounded-full border border-[var(--cyan-ai-20)]">
<Sparkles size={10} /> AI Powered
</div>
</div>
@@ -118,8 +118,8 @@ export function TutorChat() {
<div className="max-w-[85%] flex flex-col gap-1">
<div className={`p-3.5 text-sm leading-relaxed ${
msg.role === "user"
? "bg-[#00F0FF] text-background rounded-[12px] rounded-br-[4px] font-bold"
: "bg-[#00F0FF]/10 border border-[#00F0FF]/20 text-primary rounded-[12px] rounded-bl-[4px] font-medium"
? "bg-[var(--cyan-ai)] text-background rounded-[12px] rounded-br-[4px] font-bold"
: "bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] text-primary rounded-[12px] rounded-bl-[4px] font-medium"
}`}>
<div className="prose prose-sm dark:prose-invert max-w-none [&>p]:m-0">
{msg.role === "assistant" ? (
@@ -144,7 +144,7 @@ export function TutorChat() {
<button
key={p}
onClick={() => sendMessage(p)}
className="text-xs font-bold px-3 py-1.5 rounded-full border border-border/50 bg-white/5 text-muted-foreground hover:border-[#00F0FF]/40 hover:text-[#00F0FF] hover:bg-[#00F0FF]/5 transition-all"
className="text-xs font-bold px-3 py-1.5 rounded-full border border-border/50 bg-white/5 text-muted-foreground hover:border-[var(--cyan-ai-40)] hover:text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai-10)] transition-all"
>
{p}
</button>
@@ -160,13 +160,13 @@ export function TutorChat() {
onChange={e => setInput(e.target.value)}
onKeyDown={e => { if (e.key === "Enter") handleSend() }}
placeholder="Ask about any JEE or NEET concept..."
className="flex-1 bg-white/5 border border-border rounded-full px-4 py-2.5 text-sm text-primary font-medium focus:outline-none focus:border-[#00F0FF] focus:bg-[#00F0FF]/5 transition-colors"
className="flex-1 bg-white/5 border border-border rounded-full px-4 py-2.5 text-sm text-primary font-medium focus:outline-none focus:border-[var(--cyan-ai)] focus:bg-[var(--cyan-ai-10)] transition-colors"
disabled={streaming}
/>
<button
onClick={handleSend}
disabled={!input.trim() || streaming}
className="w-9 h-9 rounded-full bg-[#00F0FF] flex items-center justify-center shrink-0 hover:bg-[#00F0FF]/90 transition-transform hover:scale-105 disabled:opacity-50 disabled:hover:scale-100"
className="w-9 h-9 rounded-full bg-[var(--cyan-ai)] flex items-center justify-center shrink-0 hover:bg-[var(--cyan-ai-80)] transition-transform hover:scale-105 disabled:opacity-50 disabled:hover:scale-100"
>
{streaming ? <Loader2 className="animate-spin text-background" size={16} /> : <Send size={16} className="text-background" />}
</button>

20
src/components/AI/WeeklyProgressReport.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client"
import { TrendingUp, TrendingDown, Brain, Zap, Target, Clock } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
@@ -33,7 +33,7 @@ export function WeeklyProgressReport() {
return (
<div className="flex flex-col h-full">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] flex-1 flex flex-col group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col gap-4 h-full">
{/* Summary chips */}
<div className="flex items-center gap-2 flex-wrap">
@@ -41,7 +41,7 @@ export function WeeklyProgressReport() {
<TrendingUp size={12} />
{avgAccuracy}% avg accuracy
</div>
<div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
<div className={`flex items-center gap-1.5 text-xs font-bold px-2.5 py-1 rounded-full border ${trendUp ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] border-[var(--cyan-ai-20)]" : "bg-red-500/10 text-red-500 border-red-500/20"}`}>
{trendUp ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
{trendUp ? "+" : ""}{trend}{UNIT} vs Mon
</div>
@@ -57,7 +57,7 @@ export function WeeklyProgressReport() {
<button
key={m}
onClick={() => setMetric(m)}
className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`}
className={`flex-1 py-1.5 text-xs font-bold rounded-lg border transition-all capitalize ${metric === m ? "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]" : "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"}`}
>
{m === "accuracy" ? "Accuracy" : m === "questions" ? "Questions" : "Study Hrs"}
</button>
@@ -93,7 +93,7 @@ export function WeeklyProgressReport() {
{hovered === i && (
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
<div>{day}</div>
<div className="text-[#00F0FF]">{DATA[i]}{UNIT}</div>
<div className="text-[var(--cyan-ai)]">{DATA[i]}{UNIT}</div>
</div>
)}
<div
@@ -101,9 +101,9 @@ export function WeeklyProgressReport() {
!isDemo
? "bg-white/5 border border-white/10"
: i === 6
? "bg-gradient-to-t from-[#00F0FF]/60 to-[#00F0FF]"
? "bg-gradient-to-t from-[var(--cyan-ai-50)] to-[var(--cyan-ai)]"
: hovered === i
? "bg-gradient-to-t from-[#00F0FF]/40 to-[#00F0FF]/80"
? "bg-gradient-to-t from-[var(--cyan-ai-40)] to-[var(--cyan-ai-80)]"
: "bg-gradient-to-t from-white/10 to-white/25"
}`}
style={{ height: isDemo ? `${(DATA[i] / maxVal) * 100}%` : "4px" }}
@@ -127,7 +127,7 @@ export function WeeklyProgressReport() {
<div className="grid grid-cols-3 gap-2">
{[
{ label: "Avg Accuracy", value: `${avgAccuracy}%`, icon: <Target size={12} className="text-green-400" /> },
{ label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[#00F0FF]" /> },
{ label: "Questions / Day", value: isDemo ? `${Math.round(QUESTIONS.reduce((a, b) => a + b, 0) / 7)}` : "0", icon: <Zap size={12} className="text-[var(--cyan-ai)]" /> },
{ label: "Study Hrs / Day", value: isDemo ? `${(HOURS.reduce((a, b) => a + b, 0) / 7).toFixed(1)}h` : "0.0h", icon: <Clock size={12} className="text-amber-400" /> },
].map(stat => (
<div key={stat.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30 text-center">
@@ -139,13 +139,13 @@ export function WeeklyProgressReport() {
</div>
{/* AI insight */}
<div className="px-3 py-2.5 bg-[#00F0FF]/10 border border-[#00F0FF]/20 rounded-xl text-xs text-[#00F0FF] font-medium flex items-start gap-2.5">
<div className="px-3 py-2.5 bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-20)] rounded-xl text-xs text-[var(--cyan-ai)] font-medium flex items-start gap-2.5">
<Brain size={15} className="shrink-0 mt-0.5" />
<div>
{isDemo ? (
<>
<span className="font-black text-white">Sign errors in Thermodynamics</span> — detected in your last 3 attempts (W = −PΔV misapplied). We&apos;ve queued 3 targeted practice questions for tomorrow.{" "}
<span className="text-[#00F0FF]/80"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span>
<span className="text-[var(--cyan-ai-80)]"><strong className="text-white">Tip:</strong> You peak at 7–9 PM. Schedule the hardest topics then.</span>
</>
) : (
<>