Compare commits
1 Commits
web
...
21dbe336ca
| Author | SHA1 | Date | |
|---|---|---|---|
| 21dbe336ca |
@ -5,12 +5,6 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
|
<script src="https://www.geogebra.org/apps/deployggb.js"></script>
|
||||||
|
|
||||||
<script
|
|
||||||
defer
|
|
||||||
src="https://alt.omukk.dev/script.js"
|
|
||||||
data-website-id="e4aa7582-260a-4861-b363-eb1815d8b232"
|
|
||||||
></script>
|
|
||||||
<title>Edbridge Scholars</title>
|
<title>Edbridge Scholars</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -35,8 +35,6 @@
|
|||||||
"tailwind-merge": "^3.4.0",
|
"tailwind-merge": "^3.4.0",
|
||||||
"tailwindcss": "^4.1.18",
|
"tailwindcss": "^4.1.18",
|
||||||
"three": "^0.183.2",
|
"three": "^0.183.2",
|
||||||
"troika-three-text": "^0.52.4",
|
|
||||||
"troika-worker-utils": "^0.52.0",
|
|
||||||
"vaul": "^1.1.2",
|
"vaul": "^1.1.2",
|
||||||
"zustand": "^5.0.9"
|
"zustand": "^5.0.9"
|
||||||
},
|
},
|
||||||
@ -45,7 +43,6 @@
|
|||||||
"@types/node": "^24.10.1",
|
"@types/node": "^24.10.1",
|
||||||
"@types/react": "^19.2.5",
|
"@types/react": "^19.2.5",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@types/three": "^0.183.1",
|
|
||||||
"@vitejs/plugin-react": "^5.1.1",
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
"eslint": "^9.39.1",
|
"eslint": "^9.39.1",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
|||||||
700
pnpm-lock.yaml
generated
700
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,6 @@ import { Drills } from "./pages/student/drills/page";
|
|||||||
import { HardTestModules } from "./pages/student/hard-test-modules/page";
|
import { HardTestModules } from "./pages/student/hard-test-modules/page";
|
||||||
import { QuestMap } from "./pages/student/QuestMap";
|
import { QuestMap } from "./pages/student/QuestMap";
|
||||||
import { Register } from "./pages/auth/Register";
|
import { Register } from "./pages/auth/Register";
|
||||||
import { PracticeSheetList } from "./pages/student/practice-sheet/page";
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
@ -81,10 +80,6 @@ function App() {
|
|||||||
path: "practice/hard-test-modules",
|
path: "practice/hard-test-modules",
|
||||||
element: <HardTestModules />,
|
element: <HardTestModules />,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "practice/practice-sheet",
|
|
||||||
element: <PracticeSheetList />,
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -19,7 +19,6 @@ import {
|
|||||||
Trophy,
|
Trophy,
|
||||||
Map,
|
Map,
|
||||||
SquareLibrary,
|
SquareLibrary,
|
||||||
ListIcon,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@ -363,7 +362,6 @@ export function AppSidebar() {
|
|||||||
/>
|
/>
|
||||||
<span>Targeted Practice</span>
|
<span>Targeted Practice</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/student/practice/drills"
|
to="/student/practice/drills"
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
@ -398,23 +396,6 @@ export function AppSidebar() {
|
|||||||
/>
|
/>
|
||||||
<span>Hard Test Modules</span>
|
<span>Hard Test Modules</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
<NavLink
|
|
||||||
to="/student/practice/practice-sheet"
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`flex items-center gap-2.5 rounded-2xl px-2 py-2 text-sm font-satoshi transition-colors duration-200 ${
|
|
||||||
isActive
|
|
||||||
? "bg-white text-slate-900"
|
|
||||||
: "text-slate-500 hover:bg-white hover:text-slate-900"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ListIcon
|
|
||||||
size={18}
|
|
||||||
strokeWidth={3}
|
|
||||||
className="text-slate-400"
|
|
||||||
/>
|
|
||||||
<span>Practice Sheet</span>
|
|
||||||
</NavLink>
|
|
||||||
</SidebarMenuSub>
|
</SidebarMenuSub>
|
||||||
)}
|
)}
|
||||||
</SidebarMenuItem>
|
</SidebarMenuItem>
|
||||||
|
|||||||
@ -313,13 +313,6 @@ const STYLES = `
|
|||||||
display:flex;align-items:center;gap:0.5rem;
|
display:flex;align-items:center;gap:0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lg-success {
|
|
||||||
background:#f0fdf4;border:2px solid #bbf7d0;border-radius:14px;padding:0.8rem 1rem;
|
|
||||||
font-family:'Nunito Sans',sans-serif;font-size:0.82rem;font-weight:700;color:#15803d;
|
|
||||||
display:flex;align-items:center;gap:0.5rem;
|
|
||||||
animation: formPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lg-btn {
|
.lg-btn {
|
||||||
width:100%;padding:1rem;background:#f97316;color:white;border:none;border-radius:100px;cursor:pointer;
|
width:100%;padding:1rem;background:#f97316;color:white;border:none;border-radius:100px;cursor:pointer;
|
||||||
font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
|
font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;
|
||||||
@ -372,14 +365,8 @@ export const Login = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
const {
|
const { login, isAuthenticated, isLoading, error, clearError } =
|
||||||
login,
|
useAuthStore();
|
||||||
isAuthenticated,
|
|
||||||
isLoading,
|
|
||||||
error,
|
|
||||||
clearError,
|
|
||||||
registrationMessage,
|
|
||||||
} = useAuthStore();
|
|
||||||
const from =
|
const from =
|
||||||
(location.state as LocationState)?.from?.pathname || "/student/home";
|
(location.state as LocationState)?.from?.pathname || "/student/home";
|
||||||
|
|
||||||
@ -686,12 +673,6 @@ export const Login = () => {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{registrationMessage && (
|
|
||||||
<div className="lg-success">
|
|
||||||
<span>✅</span> {registrationMessage}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="lg-error">
|
<div className="lg-error">
|
||||||
<span>⚠️</span> {error}
|
<span>⚠️</span> {error}
|
||||||
|
|||||||
@ -1,22 +1,18 @@
|
|||||||
import { useState, useRef, useCallback } from "react";
|
import { useState } from "react";
|
||||||
import type { FormEvent, DragEvent } from "react";
|
import type { FormEvent } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useAuthStore } from "../../stores/authStore";
|
import { useAuthStore } from "../../stores/authStore";
|
||||||
import {
|
import {
|
||||||
Loader2,
|
Loader2,
|
||||||
Mail,
|
Mail,
|
||||||
Lock,
|
Lock,
|
||||||
|
ImageIcon,
|
||||||
BookOpen,
|
BookOpen,
|
||||||
Star,
|
Star,
|
||||||
Zap,
|
Zap,
|
||||||
Trophy,
|
Trophy,
|
||||||
Upload,
|
|
||||||
X,
|
|
||||||
Camera,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
|
||||||
import { api } from "../../utils/api";
|
|
||||||
|
|
||||||
const STYLES = `
|
const STYLES = `
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
||||||
|
|
||||||
@ -44,6 +40,7 @@ const STYLES = `
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Blobs inside left panel */
|
||||||
.rg-panel-blob {
|
.rg-panel-blob {
|
||||||
position: absolute; pointer-events: none; border-radius: 50%;
|
position: absolute; pointer-events: none; border-radius: 50%;
|
||||||
opacity: 0.18;
|
opacity: 0.18;
|
||||||
@ -76,6 +73,7 @@ const STYLES = `
|
|||||||
50% { transform: translate(-20px, -28px) scale(1.06); }
|
50% { transform: translate(-20px, -28px) scale(1.06); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Floating decorative shapes */
|
||||||
.rg-shape {
|
.rg-shape {
|
||||||
position: absolute; pointer-events: none;
|
position: absolute; pointer-events: none;
|
||||||
animation: floatShape 8s ease-in-out infinite;
|
animation: floatShape 8s ease-in-out infinite;
|
||||||
@ -85,6 +83,7 @@ const STYLES = `
|
|||||||
50% { transform: translateY(-16px) rotate(12deg); }
|
50% { transform: translateY(-16px) rotate(12deg); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Stars scattered */
|
||||||
.rg-star {
|
.rg-star {
|
||||||
position: absolute; pointer-events: none;
|
position: absolute; pointer-events: none;
|
||||||
color: #fde68a; opacity: 0.55;
|
color: #fde68a; opacity: 0.55;
|
||||||
@ -95,6 +94,7 @@ const STYLES = `
|
|||||||
50% { opacity: 0.9; transform: scale(1.3); }
|
50% { opacity: 0.9; transform: scale(1.3); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Left panel content */
|
||||||
.rg-panel-content {
|
.rg-panel-content {
|
||||||
position: relative; z-index: 1;
|
position: relative; z-index: 1;
|
||||||
display: flex; flex-direction: column;
|
display: flex; flex-direction: column;
|
||||||
@ -133,6 +133,7 @@ const STYLES = `
|
|||||||
font-size: 1rem; font-weight: 600; color: #c4b5fd; line-height: 1.6;
|
font-size: 1rem; font-weight: 600; color: #c4b5fd; line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Feature pills */
|
||||||
.rg-features { display: flex; flex-direction: column; gap: 0.85rem; }
|
.rg-features { display: flex; flex-direction: column; gap: 0.85rem; }
|
||||||
.rg-feature {
|
.rg-feature {
|
||||||
display: flex; align-items: center; gap: 0.85rem;
|
display: flex; align-items: center; gap: 0.85rem;
|
||||||
@ -162,6 +163,7 @@ const STYLES = `
|
|||||||
font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
|
font-size: 0.75rem; font-weight: 600; color: #a5b4fc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Social proof */
|
||||||
.rg-social-proof {
|
.rg-social-proof {
|
||||||
display: flex; align-items: center; gap: 0.75rem;
|
display: flex; align-items: center; gap: 0.75rem;
|
||||||
padding: 0.1rem 0;
|
padding: 0.1rem 0;
|
||||||
@ -181,7 +183,7 @@ const STYLES = `
|
|||||||
}
|
}
|
||||||
.rg-social-proof p strong { color: #fde68a; }
|
.rg-social-proof p strong { color: #fde68a; }
|
||||||
|
|
||||||
/* ─── RIGHT PANEL ─── */
|
/* ─── RIGHT PANEL (form) ─── */
|
||||||
.rg-right {
|
.rg-right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
@ -189,6 +191,7 @@ const STYLES = `
|
|||||||
position: relative; overflow: hidden;
|
position: relative; overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Subtle bg dots on right */
|
||||||
.rg-bg-dot {
|
.rg-bg-dot {
|
||||||
position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.10;
|
position: absolute; border-radius: 50%; pointer-events: none; opacity: 0.10;
|
||||||
animation: bgDotFloat 9s ease-in-out infinite;
|
animation: bgDotFloat 9s ease-in-out infinite;
|
||||||
@ -209,6 +212,7 @@ const STYLES = `
|
|||||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Form header */
|
||||||
.rg-form-header { display: flex; flex-direction: column; gap: 0.4rem; }
|
.rg-form-header { display: flex; flex-direction: column; gap: 0.4rem; }
|
||||||
.rg-form-header h1 {
|
.rg-form-header h1 {
|
||||||
font-size: 2rem; font-weight: 900; color: #1e1b4b;
|
font-size: 2rem; font-weight: 900; color: #1e1b4b;
|
||||||
@ -219,152 +223,41 @@ const STYLES = `
|
|||||||
font-size: 0.88rem; font-weight: 600; color: #9ca3af;
|
font-size: 0.88rem; font-weight: 600; color: #9ca3af;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── AVATAR UPLOAD ─── */
|
/* Avatar row */
|
||||||
.av-upload-wrap {
|
.rg-avatar-row {
|
||||||
display: flex;
|
display: flex; align-items: center; gap: 1.1rem;
|
||||||
align-items: center;
|
background: #f9fafb; border: 2.5px solid #f3f4f6;
|
||||||
gap: 1.25rem;
|
border-radius: 18px; padding: 0.9rem 1.1rem;
|
||||||
|
transition: border-color 0.2s;
|
||||||
}
|
}
|
||||||
|
.rg-avatar-row:focus-within { border-color: #c4b5fd; background: white; }
|
||||||
/* The circular avatar preview */
|
.rg-avatar-ring {
|
||||||
.av-circle {
|
width: 52px; height: 52px; border-radius: 50%;
|
||||||
position: relative;
|
border: 2.5px dashed #e5e7eb;
|
||||||
width: 72px; height: 72px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.av-circle-inner {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: linear-gradient(135deg, #ede9fe, #faf5ff);
|
|
||||||
border: 2.5px solid #e5e7eb;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
transition: border-color 0.25s, box-shadow 0.25s;
|
overflow: hidden; background: white; flex-shrink: 0;
|
||||||
position: relative;
|
transition: border-color 0.25s, border-style 0.25s;
|
||||||
}
|
}
|
||||||
.av-circle:hover .av-circle-inner {
|
.rg-avatar-ring.filled { border-style: solid; border-color: #a855f7; }
|
||||||
border-color: #a855f7;
|
.rg-avatar-ring img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
|
.rg-avatar-input-col { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
|
||||||
|
.rg-avatar-label {
|
||||||
|
font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase; color: #6b7280;
|
||||||
}
|
}
|
||||||
.av-circle-inner img {
|
.rg-avatar-input {
|
||||||
width: 100%; height: 100%; object-fit: cover;
|
background: transparent; border: none; outline: none;
|
||||||
}
|
|
||||||
.av-circle-inner.has-image {
|
|
||||||
border-color: #a855f7;
|
|
||||||
border-style: solid;
|
|
||||||
box-shadow: 0 0 0 3px rgba(168,85,247,0.15);
|
|
||||||
}
|
|
||||||
/* Camera overlay on hover */
|
|
||||||
.av-circle-overlay {
|
|
||||||
position: absolute; inset: 0; border-radius: 50%;
|
|
||||||
background: rgba(109,40,217,0.55);
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
opacity: 0; transition: opacity 0.2s;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.av-circle:hover .av-circle-overlay { opacity: 1; }
|
|
||||||
/* Remove button */
|
|
||||||
.av-remove-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: -3px; right: -3px;
|
|
||||||
width: 20px; height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ef4444;
|
|
||||||
border: 2px solid white;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.15s, background 0.15s;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.av-remove-btn:hover { background: #dc2626; transform: scale(1.15); }
|
|
||||||
|
|
||||||
/* Drop zone (right side) */
|
|
||||||
.av-dropzone {
|
|
||||||
flex: 1;
|
|
||||||
border: 2px dashed #e5e7eb;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 0.9rem 1.1rem;
|
|
||||||
display: flex; flex-direction: column;
|
|
||||||
align-items: flex-start; gap: 0.35rem;
|
|
||||||
background: #fafafa;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.2s, background 0.2s, transform 0.15s;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.av-dropzone:hover, .av-dropzone.dragover {
|
|
||||||
border-color: #a855f7;
|
|
||||||
background: #fdf4ff;
|
|
||||||
transform: scale(1.01);
|
|
||||||
}
|
|
||||||
.av-dropzone.dragover {
|
|
||||||
border-style: solid;
|
|
||||||
box-shadow: 0 0 0 4px rgba(168,85,247,0.1);
|
|
||||||
}
|
|
||||||
.av-dropzone-title {
|
|
||||||
font-size: 0.82rem; font-weight: 800; color: #1e1b4b;
|
|
||||||
display: flex; align-items: center; gap: 0.4rem;
|
|
||||||
}
|
|
||||||
.av-dropzone-sub {
|
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
font-size: 0.7rem; font-weight: 600; color: #9ca3af;
|
font-size: 0.85rem; font-weight: 600; color: #1e1b4b;
|
||||||
}
|
|
||||||
.av-dropzone-types {
|
|
||||||
display: flex; gap: 0.3rem; margin-top: 0.1rem;
|
|
||||||
}
|
|
||||||
.av-type-badge {
|
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
|
||||||
font-size: 0.62rem; font-weight: 700;
|
|
||||||
padding: 0.15rem 0.45rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: #ede9fe; color: #7c3aed;
|
|
||||||
letter-spacing: 0.04em; text-transform: uppercase;
|
|
||||||
}
|
|
||||||
/* Shimmer drag-over effect */
|
|
||||||
.av-dropzone.dragover::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute; inset: 0;
|
|
||||||
background: linear-gradient(120deg, transparent 30%, rgba(168,85,247,0.07) 50%, transparent 70%);
|
|
||||||
animation: shimmer 1s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes shimmer {
|
|
||||||
from { transform: translateX(-100%); }
|
|
||||||
to { transform: translateX(100%); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Upload progress bar */
|
|
||||||
.av-progress-wrap {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px; border-radius: 999px;
|
|
||||||
background: #f3f4f6; overflow: hidden;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
}
|
}
|
||||||
.av-progress-bar {
|
.rg-avatar-input::placeholder { color: #d1d5db; }
|
||||||
height: 100%; border-radius: 999px;
|
.rg-avatar-hint {
|
||||||
background: linear-gradient(90deg, #a855f7, #6d28d9);
|
|
||||||
transition: width 0.2s ease;
|
|
||||||
}
|
|
||||||
.av-uploading-label {
|
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
font-size: 0.7rem; font-weight: 700; color: #a855f7;
|
font-size: 0.7rem; font-weight: 600; color: #c4b5fd;
|
||||||
display: flex; align-items: center; gap: 0.3rem;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
}
|
|
||||||
.av-upload-spinner {
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
|
|
||||||
/* Upload error */
|
|
||||||
.av-upload-error {
|
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
|
||||||
font-size: 0.7rem; font-weight: 700; color: #e11d48;
|
|
||||||
margin-top: 0.2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fields */
|
/* Fields grid */
|
||||||
.rg-fields { display: flex; flex-direction: column; gap: 1rem; }
|
.rg-fields { display: flex; flex-direction: column; gap: 1rem; }
|
||||||
.rg-row { display: flex; gap: 1rem; }
|
.rg-row { display: flex; gap: 1rem; }
|
||||||
.rg-row .rg-field { flex: 1; }
|
.rg-row .rg-field { flex: 1; }
|
||||||
@ -414,6 +307,7 @@ const STYLES = `
|
|||||||
.rg-strength-hint.medium { color: #eab308; }
|
.rg-strength-hint.medium { color: #eab308; }
|
||||||
.rg-strength-hint.strong { color: #22c55e; }
|
.rg-strength-hint.strong { color: #22c55e; }
|
||||||
|
|
||||||
|
/* Error */
|
||||||
.rg-error {
|
.rg-error {
|
||||||
background: #fff1f2; border: 2px solid #fecdd3;
|
background: #fff1f2; border: 2px solid #fecdd3;
|
||||||
border-radius: 14px; padding: 0.8rem 1rem;
|
border-radius: 14px; padding: 0.8rem 1rem;
|
||||||
@ -422,6 +316,7 @@ const STYLES = `
|
|||||||
display: flex; align-items: center; gap: 0.5rem;
|
display: flex; align-items: center; gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Submit */
|
||||||
.rg-btn {
|
.rg-btn {
|
||||||
width: 100%; padding: 1rem;
|
width: 100%; padding: 1rem;
|
||||||
background: #a855f7; color: white; border: none;
|
background: #a855f7; color: white; border: none;
|
||||||
@ -441,6 +336,7 @@ const STYLES = `
|
|||||||
.rg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
|
.rg-btn:disabled:hover { transform: none; box-shadow: 0 4px 0 #d1d5db; }
|
||||||
|
|
||||||
.rg-spinner { animation: spin 0.8s linear infinite; }
|
.rg-spinner { animation: spin 0.8s linear infinite; }
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
.rg-form-footer {
|
.rg-form-footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -452,6 +348,7 @@ const STYLES = `
|
|||||||
}
|
}
|
||||||
.rg-link:hover { color: #7c3aed; }
|
.rg-link:hover { color: #7c3aed; }
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
.rg-left { display: none; }
|
.rg-left { display: none; }
|
||||||
.rg-right { padding: 2rem 1.5rem; }
|
.rg-right { padding: 2rem 1.5rem; }
|
||||||
@ -553,195 +450,13 @@ const BG_DOTS = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const INITIALS = ["JD", "AS", "MK", "RP", "LL"];
|
const INITIALS = ["JD", "AS", "MK", "RP", "LL"];
|
||||||
const ACCEPTED = ["image/jpeg", "image/png", "image/webp", "image/gif"];
|
|
||||||
|
|
||||||
// ─── Avatar Upload Component ───────────────────────────────────────────────
|
|
||||||
interface AvatarUploadProps {
|
|
||||||
avatarUrl: string;
|
|
||||||
onAvatarChange: (url: string) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
function AvatarUpload({
|
|
||||||
avatarUrl,
|
|
||||||
onAvatarChange,
|
|
||||||
disabled,
|
|
||||||
}: AvatarUploadProps) {
|
|
||||||
const [isDragOver, setIsDragOver] = useState(false);
|
|
||||||
const [isUploading, setIsUploading] = useState(false);
|
|
||||||
const [uploadProgress, setUploadProgress] = useState(0);
|
|
||||||
const [uploadError, setUploadError] = useState("");
|
|
||||||
const [previewUrl, setPreviewUrl] = useState("");
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const processFile = useCallback(
|
|
||||||
async (file: File) => {
|
|
||||||
if (!ACCEPTED.includes(file.type)) {
|
|
||||||
setUploadError("Please upload a JPG, PNG, WebP, or GIF image.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (file.size > 5 * 1024 * 1024) {
|
|
||||||
setUploadError("Image must be under 5 MB.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setUploadError("");
|
|
||||||
// Show local preview immediately
|
|
||||||
const local = URL.createObjectURL(file);
|
|
||||||
setPreviewUrl(local);
|
|
||||||
setIsUploading(true);
|
|
||||||
setUploadProgress(0);
|
|
||||||
|
|
||||||
// Fake progress ticks while uploading
|
|
||||||
const ticker = setInterval(() => {
|
|
||||||
setUploadProgress((p) => Math.min(p + 12, 85));
|
|
||||||
}, 120);
|
|
||||||
|
|
||||||
try {
|
|
||||||
const uploadedUrl = await api.uploadAvatar(file);
|
|
||||||
clearInterval(ticker);
|
|
||||||
setUploadProgress(100);
|
|
||||||
onAvatarChange(uploadedUrl);
|
|
||||||
setTimeout(() => {
|
|
||||||
setIsUploading(false);
|
|
||||||
setUploadProgress(0);
|
|
||||||
}, 600);
|
|
||||||
} catch {
|
|
||||||
clearInterval(ticker);
|
|
||||||
setIsUploading(false);
|
|
||||||
setUploadProgress(0);
|
|
||||||
setPreviewUrl("");
|
|
||||||
setUploadError("Upload failed. Please try again.");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[onAvatarChange],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setIsDragOver(false);
|
|
||||||
const file = e.dataTransfer.files[0];
|
|
||||||
if (file) processFile(file);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (file) processFile(file);
|
|
||||||
e.target.value = "";
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemove = (ev: React.MouseEvent) => {
|
|
||||||
ev.stopPropagation();
|
|
||||||
setPreviewUrl("");
|
|
||||||
onAvatarChange("");
|
|
||||||
setUploadError("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const displayUrl = previewUrl || avatarUrl;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="av-upload-wrap">
|
|
||||||
{/* Hidden file input */}
|
|
||||||
<input
|
|
||||||
ref={fileInputRef}
|
|
||||||
type="file"
|
|
||||||
accept={ACCEPTED.join(",")}
|
|
||||||
style={{ display: "none" }}
|
|
||||||
onChange={handleFileChange}
|
|
||||||
disabled={disabled || isUploading}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Avatar circle */}
|
|
||||||
<div
|
|
||||||
className="av-circle"
|
|
||||||
onClick={() =>
|
|
||||||
!disabled && !isUploading && fileInputRef.current?.click()
|
|
||||||
}
|
|
||||||
title="Click to change photo"
|
|
||||||
>
|
|
||||||
<div className={`av-circle-inner ${displayUrl ? "has-image" : ""}`}>
|
|
||||||
{displayUrl ? (
|
|
||||||
<img src={displayUrl} alt="Avatar preview" />
|
|
||||||
) : (
|
|
||||||
<Camera size={24} color="#c4b5fd" />
|
|
||||||
)}
|
|
||||||
<div className="av-circle-overlay">
|
|
||||||
<Camera size={18} color="white" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{displayUrl && !isUploading && (
|
|
||||||
<div
|
|
||||||
className="av-remove-btn"
|
|
||||||
onClick={handleRemove}
|
|
||||||
title="Remove photo"
|
|
||||||
>
|
|
||||||
<X size={10} color="white" strokeWidth={3} />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Drop zone */}
|
|
||||||
<div
|
|
||||||
className={`av-dropzone ${isDragOver ? "dragover" : ""}`}
|
|
||||||
onClick={() =>
|
|
||||||
!disabled && !isUploading && fileInputRef.current?.click()
|
|
||||||
}
|
|
||||||
onDragOver={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
setIsDragOver(true);
|
|
||||||
}}
|
|
||||||
onDragLeave={() => setIsDragOver(false)}
|
|
||||||
onDrop={handleDrop}
|
|
||||||
>
|
|
||||||
{isUploading ? (
|
|
||||||
<>
|
|
||||||
<div className="av-uploading-label">
|
|
||||||
<Loader2 size={12} className="av-upload-spinner" />
|
|
||||||
Uploading photo…
|
|
||||||
</div>
|
|
||||||
<div className="av-progress-wrap">
|
|
||||||
<div
|
|
||||||
className="av-progress-bar"
|
|
||||||
style={{ width: `${uploadProgress}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<div className="av-dropzone-title">
|
|
||||||
<Upload size={13} color="#a855f7" />
|
|
||||||
{displayUrl ? "Change photo" : "Upload a photo"}
|
|
||||||
</div>
|
|
||||||
<div className="av-dropzone-sub">
|
|
||||||
{isDragOver ? "Drop it here!" : "Click or drag & drop"}
|
|
||||||
</div>
|
|
||||||
<div className="av-dropzone-types">
|
|
||||||
{["PNG", "JPG", "WebP"].map((t) => (
|
|
||||||
<span key={t} className="av-type-badge">
|
|
||||||
{t}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
<span
|
|
||||||
className="av-type-badge"
|
|
||||||
style={{ background: "#fef3c7", color: "#b45309" }}
|
|
||||||
>
|
|
||||||
Max 5 MB
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{uploadError && <div className="av-upload-error">⚠️ {uploadError}</div>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Main Register Page ───────────────────────────────────────────────────
|
|
||||||
export const Register = () => {
|
export const Register = () => {
|
||||||
const [name, setName] = useState("");
|
const [name, setName] = useState("");
|
||||||
const [email, setEmail] = useState("");
|
const [email, setEmail] = useState("");
|
||||||
const [avatarUrl, setAvatarUrl] = useState("");
|
const [avatarUrl, setAvatarUrl] = useState("");
|
||||||
const [password, setPassword] = useState("");
|
const [password, setPassword] = useState("");
|
||||||
|
const [avatarError, setAvatarError] = useState(false);
|
||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { register, isLoading, error, clearError } = useAuthStore();
|
const { register, isLoading, error, clearError } = useAuthStore();
|
||||||
@ -758,7 +473,7 @@ export const Register = () => {
|
|||||||
avatar_url: avatarUrl,
|
avatar_url: avatarUrl,
|
||||||
password,
|
password,
|
||||||
});
|
});
|
||||||
if (success) navigate("/login", { replace: true });
|
if (success) navigate("/student/home", { replace: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -771,6 +486,7 @@ export const Register = () => {
|
|||||||
<div className="rg-panel-blob rg-panel-blob-2" />
|
<div className="rg-panel-blob rg-panel-blob-2" />
|
||||||
<div className="rg-panel-blob rg-panel-blob-3" />
|
<div className="rg-panel-blob rg-panel-blob-3" />
|
||||||
|
|
||||||
|
{/* Decorative floating dots */}
|
||||||
{PANEL_DOTS.map((d, i) => (
|
{PANEL_DOTS.map((d, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
@ -791,6 +507,7 @@ export const Register = () => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
{/* Stars */}
|
||||||
{[
|
{[
|
||||||
{ top: "14%", left: "20%", size: 14, delay: "0s" },
|
{ top: "14%", left: "20%", size: 14, delay: "0s" },
|
||||||
{ top: "28%", left: "78%", size: 10, delay: "0.7s" },
|
{ top: "28%", left: "78%", size: 10, delay: "0.7s" },
|
||||||
@ -813,6 +530,7 @@ export const Register = () => {
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
{/* Decorative ring shapes */}
|
||||||
{[
|
{[
|
||||||
{ size: 90, top: "72%", left: "5%", delay: "0.2s", dur: "10s" },
|
{ size: 90, top: "72%", left: "5%", delay: "0.2s", dur: "10s" },
|
||||||
{ size: 60, top: "8%", left: "55%", delay: "1.1s", dur: "13s" },
|
{ size: 60, top: "8%", left: "55%", delay: "1.1s", dur: "13s" },
|
||||||
@ -836,10 +554,13 @@ export const Register = () => {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
<div className="rg-panel-content">
|
<div className="rg-panel-content">
|
||||||
|
{/* Logo */}
|
||||||
<div className="rg-panel-logo">
|
<div className="rg-panel-logo">
|
||||||
<div className="rg-panel-logo-badge">📚</div>
|
<div className="rg-panel-logo-badge">📚</div>
|
||||||
<span className="rg-panel-logo-text">EdBridge</span>
|
<span className="rg-panel-logo-text">EdBridge</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Headline */}
|
||||||
<div className="rg-panel-headline">
|
<div className="rg-panel-headline">
|
||||||
<h2>
|
<h2>
|
||||||
Ace the SAT.
|
Ace the SAT.
|
||||||
@ -852,6 +573,8 @@ export const Register = () => {
|
|||||||
SAT scores with personalized practice.
|
SAT scores with personalized practice.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Feature pills */}
|
||||||
<div className="rg-features">
|
<div className="rg-features">
|
||||||
{FEATURES.map((f, i) => (
|
{FEATURES.map((f, i) => (
|
||||||
<div className="rg-feature" key={i}>
|
<div className="rg-feature" key={i}>
|
||||||
@ -865,6 +588,8 @@ export const Register = () => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Social proof */}
|
||||||
<div className="rg-social-proof">
|
<div className="rg-social-proof">
|
||||||
<div className="rg-avatars">
|
<div className="rg-avatars">
|
||||||
{INITIALS.map((s, i) => (
|
{INITIALS.map((s, i) => (
|
||||||
@ -903,20 +628,62 @@ export const Register = () => {
|
|||||||
))}
|
))}
|
||||||
|
|
||||||
<div className="rg-form-wrap">
|
<div className="rg-form-wrap">
|
||||||
|
{/* Header */}
|
||||||
<div className="rg-form-header">
|
<div className="rg-form-header">
|
||||||
<h1>Create your account ✨</h1>
|
<h1>Create your account ✨</h1>
|
||||||
<p>Fill in the details below to get started</p>
|
<p>Fill in the details below to get started</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── Avatar Upload ── */}
|
{/* Avatar URL row */}
|
||||||
<AvatarUpload
|
<div className="rg-avatar-row">
|
||||||
avatarUrl={avatarUrl}
|
<div
|
||||||
onAvatarChange={setAvatarUrl}
|
className={`rg-avatar-ring ${avatarUrl && !avatarError ? "filled" : ""}`}
|
||||||
|
>
|
||||||
|
{avatarUrl && !avatarError ? (
|
||||||
|
<img
|
||||||
|
src={avatarUrl}
|
||||||
|
alt="Avatar"
|
||||||
|
onError={() => setAvatarError(true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<ImageIcon size={20} color="#d1d5db" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="rg-avatar-input-col">
|
||||||
|
<span className="rg-avatar-label">
|
||||||
|
Avatar URL{" "}
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
textTransform: "none",
|
||||||
|
letterSpacing: 0,
|
||||||
|
color: "#c4b5fd",
|
||||||
|
fontSize: "0.68rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
(optional)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<input
|
||||||
|
className="rg-avatar-input"
|
||||||
|
type="url"
|
||||||
|
placeholder="https://example.com/photo.jpg"
|
||||||
|
value={avatarUrl}
|
||||||
|
onChange={(e) => {
|
||||||
|
setAvatarUrl(e.target.value);
|
||||||
|
setAvatarError(false);
|
||||||
|
}}
|
||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
/>
|
/>
|
||||||
|
<span className="rg-avatar-hint">
|
||||||
|
Paste any image URL to set your profile photo
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Fields */}
|
{/* Fields */}
|
||||||
<div className="rg-fields">
|
<div className="rg-fields">
|
||||||
|
{/* Name + Email row */}
|
||||||
<div className="rg-row">
|
<div className="rg-row">
|
||||||
<div className="rg-field">
|
<div className="rg-field">
|
||||||
<label className="rg-label" htmlFor="name">
|
<label className="rg-label" htmlFor="name">
|
||||||
@ -937,6 +704,7 @@ export const Register = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Email */}
|
||||||
<div className="rg-field">
|
<div className="rg-field">
|
||||||
<label className="rg-label" htmlFor="email">
|
<label className="rg-label" htmlFor="email">
|
||||||
Email
|
Email
|
||||||
@ -955,6 +723,7 @@ export const Register = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Password */}
|
||||||
<div className="rg-field">
|
<div className="rg-field">
|
||||||
<label className="rg-label" htmlFor="password">
|
<label className="rg-label" htmlFor="password">
|
||||||
Password
|
Password
|
||||||
@ -988,12 +757,14 @@ export const Register = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
{error && (
|
{error && (
|
||||||
<div className="rg-error">
|
<div className="rg-error">
|
||||||
<span>⚠️</span> {error}
|
<span>⚠️</span> {error}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Submit */}
|
||||||
<button
|
<button
|
||||||
className="rg-btn"
|
className="rg-btn"
|
||||||
onClick={handleSubmit}
|
onClick={handleSubmit}
|
||||||
@ -1001,7 +772,8 @@ export const Register = () => {
|
|||||||
>
|
>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 size={18} className="rg-spinner" /> Creating account…
|
<Loader2 size={18} className="rg-spinner" /> Creating
|
||||||
|
account...
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
"Create Account →"
|
"Create Account →"
|
||||||
|
|||||||
@ -1,4 +1,12 @@
|
|||||||
import { DraftingCompass, FileText, Target, Trophy, Zap } from "lucide-react";
|
import {
|
||||||
|
BookOpen,
|
||||||
|
Clock,
|
||||||
|
DraftingCompass,
|
||||||
|
Loader2,
|
||||||
|
Target,
|
||||||
|
Trophy,
|
||||||
|
Zap,
|
||||||
|
} from "lucide-react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { InfoHeader } from "../../components/InfoHeader";
|
import { InfoHeader } from "../../components/InfoHeader";
|
||||||
|
|
||||||
@ -18,13 +26,13 @@ const STYLES = `
|
|||||||
|
|
||||||
.pr-screen {
|
.pr-screen {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding-bottom: 40px;
|
|
||||||
background: #fffbf4;
|
background: #fffbf4;
|
||||||
font-family: 'Nunito', sans-serif;
|
font-family: 'Nunito', sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* On desktop, account for sidebar */
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.pr-screen {
|
.pr-screen {
|
||||||
padding-left: calc(17rem + 1.25rem);
|
padding-left: calc(17rem + 1.25rem);
|
||||||
@ -62,9 +70,10 @@ const STYLES = `
|
|||||||
display: flex; flex-direction: column; gap: 1.5rem;
|
display: flex; flex-direction: column; gap: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Desktop / wide layout */
|
||||||
@media (min-width: 900px) {
|
@media (min-width: 900px) {
|
||||||
.pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
.pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
||||||
.pr-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; }
|
.pr-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
||||||
|
|
||||||
.pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
.pr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||||
.pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
.pr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||||
@ -86,6 +95,29 @@ const STYLES = `
|
|||||||
.pr-anim-3 { animation-delay: 0.15s; }
|
.pr-anim-3 { animation-delay: 0.15s; }
|
||||||
.pr-anim-4 { animation-delay: 0.2s; }
|
.pr-anim-4 { animation-delay: 0.2s; }
|
||||||
|
|
||||||
|
/* ── Header ── */
|
||||||
|
.pr-header {
|
||||||
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
|
animation: prPopIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||||
|
}
|
||||||
|
.pr-logo-btn {
|
||||||
|
width: 44px; height: 44px; border-radius: 14px;
|
||||||
|
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
box-shadow: 0 4px 0 #5b21b644;
|
||||||
|
}
|
||||||
|
.pr-xp-chip {
|
||||||
|
display: flex; align-items: center; gap: 0.5rem;
|
||||||
|
background: white; border: 2.5px solid #e9d5ff;
|
||||||
|
border-radius: 100px; padding: 0.45rem 1rem;
|
||||||
|
font-size: 0.85rem; font-weight: 800; color: #7c3aed;
|
||||||
|
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.pr-xp-dot {
|
||||||
|
width: 8px; height: 8px; border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #a855f7, #7c3aed);
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Hero banner ── */
|
/* ── Hero banner ── */
|
||||||
.pr-hero {
|
.pr-hero {
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
@ -143,15 +175,15 @@ const STYLES = `
|
|||||||
/* ── Mode card ── */
|
/* ── Mode card ── */
|
||||||
.pr-mode-card {
|
.pr-mode-card {
|
||||||
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
background: white; border: 2.5px solid #f3f4f6; border-radius: 22px;
|
||||||
padding: 0;
|
padding: 1.1rem 1.25rem;
|
||||||
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
|
||||||
cursor: pointer; display: flex; flex-direction: column;
|
cursor: pointer; display: flex; flex-direction: column; gap: 0.85rem;
|
||||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||||
position: relative; overflow: hidden;
|
position: relative; overflow: hidden;
|
||||||
}
|
}
|
||||||
.pr-mode-card:hover {
|
.pr-mode-card:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-3px);
|
||||||
box-shadow: 0 14px 32px rgba(0,0,0,0.1);
|
box-shadow: 0 10px 24px rgba(0,0,0,0.08);
|
||||||
}
|
}
|
||||||
.pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
|
.pr-mode-card:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(0,0,0,0.06); }
|
||||||
|
|
||||||
@ -161,455 +193,71 @@ const STYLES = `
|
|||||||
.pr-mode-card.cyan:hover { border-color: #67e8f9; }
|
.pr-mode-card.cyan:hover { border-color: #67e8f9; }
|
||||||
.pr-mode-card.lime { border-color: #d9f99d; }
|
.pr-mode-card.lime { border-color: #d9f99d; }
|
||||||
.pr-mode-card.lime:hover { border-color: #bef264; }
|
.pr-mode-card.lime:hover { border-color: #bef264; }
|
||||||
.pr-mode-card.amber { border-color: #fde68a; }
|
|
||||||
.pr-mode-card.amber:hover { border-color: #fcd34d; }
|
|
||||||
|
|
||||||
/* Illustration strip at top of card */
|
|
||||||
.pr-card-illo {
|
|
||||||
width: 100%;
|
|
||||||
height: 110px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.pr-card-illo svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Card body below illustration */
|
|
||||||
.pr-card-body {
|
|
||||||
padding: 1rem 1.1rem 1rem;
|
|
||||||
display: flex; flex-direction: column; gap: 0.6rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr-mode-top {
|
.pr-mode-top {
|
||||||
display: flex; align-items: center; gap: 0.6rem;
|
display: flex; align-items: flex-start; justify-content: space-between;
|
||||||
}
|
}
|
||||||
.pr-mode-icon {
|
.pr-mode-icon {
|
||||||
width: 36px; height: 36px; border-radius: 12px;
|
width: 44px; height: 44px; border-radius: 14px;
|
||||||
display: flex; align-items: center; justify-content: center;
|
display: flex; align-items: center; justify-content: center;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
.pr-mode-icon.red { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 3px 0 #b91c1c44; }
|
.pr-mode-icon.red { background: linear-gradient(135deg, #f87171, #ef4444); box-shadow: 0 4px 0 #b91c1c44; }
|
||||||
.pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 3px 0 #0e7490aa; }
|
.pr-mode-icon.cyan { background: linear-gradient(135deg, #22d3ee, #06b6d4); box-shadow: 0 4px 0 #0e7490aa; }
|
||||||
.pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 3px 0 #4d7c0f44; }
|
.pr-mode-icon.lime { background: linear-gradient(135deg, #a3e635, #84cc16); box-shadow: 0 4px 0 #4d7c0f44; }
|
||||||
.pr-mode-icon.amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 3px 0 #92400e44; }
|
|
||||||
|
.pr-mode-badge {
|
||||||
|
width: 36px; height: 36px; border-radius: 50%;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.pr-mode-badge.red { background: #fff5f5; }
|
||||||
|
.pr-mode-badge.cyan { background: #ecfeff; }
|
||||||
|
.pr-mode-badge.lime { background: #f7ffe4; }
|
||||||
|
|
||||||
.pr-mode-title {
|
.pr-mode-title {
|
||||||
font-size: 0.95rem; font-weight: 900; color: #1e1b4b;
|
font-size: 1rem; font-weight: 900; color: #1e1b4b;
|
||||||
}
|
}
|
||||||
.pr-mode-desc {
|
.pr-mode-desc {
|
||||||
font-family: 'Nunito Sans', sans-serif;
|
font-family: 'Nunito Sans', sans-serif;
|
||||||
font-size: 0.76rem; font-weight: 600; color: #9ca3af;
|
font-size: 0.78rem; font-weight: 600; color: #9ca3af;
|
||||||
line-height: 1.4;
|
|
||||||
}
|
}
|
||||||
.pr-mode-arrow {
|
.pr-mode-arrow {
|
||||||
font-size: 0.75rem; font-weight: 800; margin-top: auto;
|
font-size: 0.75rem; font-weight: 800; margin-top: auto;
|
||||||
display: flex; align-items: center; gap: 0.25rem;
|
display: flex; align-items: center; gap: 0.25rem;
|
||||||
transition: gap 0.2s ease;
|
transition: gap 0.2s ease;
|
||||||
padding-top: 0.25rem;
|
|
||||||
}
|
}
|
||||||
.pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
|
.pr-mode-card:hover .pr-mode-arrow { gap: 0.5rem; }
|
||||||
.pr-mode-arrow.red { color: #ef4444; }
|
.pr-mode-arrow.red { color: #ef4444; }
|
||||||
.pr-mode-arrow.cyan { color: #06b6d4; }
|
.pr-mode-arrow.cyan { color: #06b6d4; }
|
||||||
.pr-mode-arrow.lime { color: #84cc16; }
|
.pr-mode-arrow.lime { color: #84cc16; }
|
||||||
.pr-mode-arrow.amber{ color: #f59e0b; }
|
|
||||||
|
|
||||||
/* Wiggle on hover for illustration elements */
|
|
||||||
.pr-mode-card:hover .illo-wiggle {
|
|
||||||
animation: illoWiggle 0.5s ease;
|
|
||||||
}
|
|
||||||
@keyframes illoWiggle {
|
|
||||||
0%,100%{transform:rotate(0deg);}
|
|
||||||
25%{transform:rotate(-5deg);}
|
|
||||||
75%{transform:rotate(5deg);}
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/* ── SVG Illustrations for each card ── */
|
|
||||||
|
|
||||||
const IlloTargeted = () => (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 260 110"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
preserveAspectRatio="xMidYMid slice"
|
|
||||||
>
|
|
||||||
<rect width="260" height="110" fill="#fff5f5" />
|
|
||||||
{/* soft bg circles */}
|
|
||||||
<circle cx="200" cy="55" r="70" fill="#fee2e2" opacity="0.6" />
|
|
||||||
<circle cx="220" cy="30" r="30" fill="#fecaca" opacity="0.4" />
|
|
||||||
{/* Target rings */}
|
|
||||||
<circle
|
|
||||||
cx="195"
|
|
||||||
cy="58"
|
|
||||||
r="44"
|
|
||||||
stroke="#fca5a5"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
cx="195"
|
|
||||||
cy="58"
|
|
||||||
r="30"
|
|
||||||
stroke="#f87171"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<circle cx="195" cy="58" r="16" fill="#ef4444" opacity="0.9" />
|
|
||||||
<circle cx="195" cy="58" r="6" fill="white" />
|
|
||||||
{/* Arrow hitting bullseye */}
|
|
||||||
<line
|
|
||||||
x1="130"
|
|
||||||
y1="20"
|
|
||||||
x2="187"
|
|
||||||
y2="56"
|
|
||||||
stroke="#dc2626"
|
|
||||||
strokeWidth="3"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<polygon points="187,56 178,46 192,49" fill="#dc2626" />
|
|
||||||
{/* Arrow fletching */}
|
|
||||||
<line
|
|
||||||
x1="130"
|
|
||||||
y1="20"
|
|
||||||
x2="120"
|
|
||||||
y2="12"
|
|
||||||
stroke="#dc2626"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="130"
|
|
||||||
y1="20"
|
|
||||||
x2="122"
|
|
||||||
y2="25"
|
|
||||||
stroke="#dc2626"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
{/* Sparkles */}
|
|
||||||
<circle cx="60" cy="35" r="4" fill="#fbbf24" opacity="0.7" />
|
|
||||||
<circle cx="80" cy="70" r="3" fill="#f87171" opacity="0.5" />
|
|
||||||
<circle cx="45" cy="75" r="5" fill="#fca5a5" opacity="0.4" />
|
|
||||||
<path d="M50 30 l3 -8 l3 8 l-6 0Z" fill="#ef4444" opacity="0.4" />
|
|
||||||
<path d="M100 80 l2 -6 l2 6 l-4 0Z" fill="#fca5a5" opacity="0.5" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const IlloDrills = () => (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 260 110"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
preserveAspectRatio="xMidYMid slice"
|
|
||||||
>
|
|
||||||
<rect width="260" height="110" fill="#ecfeff" />
|
|
||||||
<circle cx="50" cy="55" r="65" fill="#cffafe" opacity="0.5" />
|
|
||||||
<circle cx="25" cy="25" r="28" fill="#a5f3fc" opacity="0.35" />
|
|
||||||
{/* Stopwatch body */}
|
|
||||||
<circle
|
|
||||||
cx="70"
|
|
||||||
cy="62"
|
|
||||||
r="36"
|
|
||||||
fill="white"
|
|
||||||
stroke="#22d3ee"
|
|
||||||
strokeWidth="3"
|
|
||||||
/>
|
|
||||||
<circle
|
|
||||||
cx="70"
|
|
||||||
cy="62"
|
|
||||||
r="28"
|
|
||||||
fill="#ecfeff"
|
|
||||||
stroke="#67e8f9"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
/>
|
|
||||||
{/* Clock hands */}
|
|
||||||
<line
|
|
||||||
x1="70"
|
|
||||||
y1="62"
|
|
||||||
x2="70"
|
|
||||||
y2="40"
|
|
||||||
stroke="#06b6d4"
|
|
||||||
strokeWidth="3"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="70"
|
|
||||||
y1="62"
|
|
||||||
x2="88"
|
|
||||||
y2="70"
|
|
||||||
stroke="#0891b2"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<circle cx="70" cy="62" r="3.5" fill="#0891b2" />
|
|
||||||
{/* Crown / button */}
|
|
||||||
<rect x="64" y="22" width="12" height="6" rx="3" fill="#22d3ee" />
|
|
||||||
<rect x="56" y="18" width="8" height="5" rx="2.5" fill="#06b6d4" />
|
|
||||||
{/* Lightning bolts (speed) */}
|
|
||||||
<path
|
|
||||||
d="M148 20 l-10 22 h10 l-10 22"
|
|
||||||
stroke="#f59e0b"
|
|
||||||
strokeWidth="3"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M170 30 l-8 18 h8 l-8 18"
|
|
||||||
stroke="#fbbf24"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
fill="none"
|
|
||||||
opacity="0.7"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M192 38 l-6 14 h6 l-6 14"
|
|
||||||
stroke="#fcd34d"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
fill="none"
|
|
||||||
opacity="0.5"
|
|
||||||
/>
|
|
||||||
{/* Speed lines */}
|
|
||||||
<line
|
|
||||||
x1="115"
|
|
||||||
y1="52"
|
|
||||||
x2="140"
|
|
||||||
y2="52"
|
|
||||||
stroke="#22d3ee"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
opacity="0.5"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="120"
|
|
||||||
y1="62"
|
|
||||||
x2="138"
|
|
||||||
y2="62"
|
|
||||||
stroke="#22d3ee"
|
|
||||||
strokeWidth="1.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
opacity="0.35"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="118"
|
|
||||||
y1="72"
|
|
||||||
x2="136"
|
|
||||||
y2="72"
|
|
||||||
stroke="#22d3ee"
|
|
||||||
strokeWidth="1"
|
|
||||||
strokeLinecap="round"
|
|
||||||
opacity="0.25"
|
|
||||||
/>
|
|
||||||
{/* dots */}
|
|
||||||
<circle cx="220" cy="28" r="5" fill="#22d3ee" opacity="0.4" />
|
|
||||||
<circle cx="240" cy="75" r="4" fill="#06b6d4" opacity="0.3" />
|
|
||||||
<circle cx="210" cy="88" r="3" fill="#67e8f9" opacity="0.4" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const IlloHard = () => (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 260 110"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
preserveAspectRatio="xMidYMid slice"
|
|
||||||
>
|
|
||||||
<rect width="260" height="110" fill="#f7ffe4" />
|
|
||||||
<circle cx="210" cy="55" r="70" fill="#d9f99d" opacity="0.5" />
|
|
||||||
<circle cx="230" cy="20" r="30" fill="#bef264" opacity="0.3" />
|
|
||||||
{/* Trophy */}
|
|
||||||
<rect x="168" y="78" width="44" height="8" rx="4" fill="#84cc16" />
|
|
||||||
<rect x="182" y="68" width="16" height="12" rx="2" fill="#a3e635" />
|
|
||||||
<path
|
|
||||||
d="M163 28 h54 v28 a27 27 0 0 1 -54 0 Z"
|
|
||||||
fill="white"
|
|
||||||
stroke="#84cc16"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M163 38 Q148 38 148 52 Q148 63 163 63"
|
|
||||||
stroke="#a3e635"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
fill="none"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M217 38 Q232 38 232 52 Q232 63 217 63"
|
|
||||||
stroke="#a3e635"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
fill="none"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
{/* Star inside trophy */}
|
|
||||||
<path
|
|
||||||
d="M190 38 l3 9 h9 l-7 5 3 9 -8 -6 -8 6 3 -9 -7 -5 h9 Z"
|
|
||||||
fill="#fbbf24"
|
|
||||||
/>
|
|
||||||
{/* Mountain / difficulty hills */}
|
|
||||||
<path d="M20 90 L55 35 L90 90Z" fill="#86efac" opacity="0.7" />
|
|
||||||
<path d="M60 90 L95 50 L130 90Z" fill="#4ade80" opacity="0.5" />
|
|
||||||
<path d="M85 90 L120 40 L155 90Z" fill="#22c55e" opacity="0.35" />
|
|
||||||
{/* flag on tallest */}
|
|
||||||
<line
|
|
||||||
x1="120"
|
|
||||||
y1="40"
|
|
||||||
x2="120"
|
|
||||||
y2="22"
|
|
||||||
stroke="#16a34a"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<path d="M120 22 l12 5 l-12 5 Z" fill="#16a34a" />
|
|
||||||
{/* sparkles */}
|
|
||||||
<path
|
|
||||||
d="M30 28 l2 -5 l2 5 l5 2 l-5 2 l-2 5 l-2 -5 l-5 -2 Z"
|
|
||||||
fill="#fbbf24"
|
|
||||||
opacity="0.6"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M240 88 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
|
|
||||||
fill="#a3e635"
|
|
||||||
opacity="0.5"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const IlloSheet = () => (
|
|
||||||
<svg
|
|
||||||
viewBox="0 0 260 110"
|
|
||||||
fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
preserveAspectRatio="xMidYMid slice"
|
|
||||||
>
|
|
||||||
<rect width="260" height="110" fill="#fffbeb" />
|
|
||||||
<circle cx="55" cy="55" r="65" fill="#fef3c7" opacity="0.6" />
|
|
||||||
<circle cx="30" cy="80" r="30" fill="#fde68a" opacity="0.35" />
|
|
||||||
{/* Paper sheet */}
|
|
||||||
<rect
|
|
||||||
x="30"
|
|
||||||
y="18"
|
|
||||||
width="72"
|
|
||||||
height="82"
|
|
||||||
rx="8"
|
|
||||||
fill="white"
|
|
||||||
stroke="#fcd34d"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
/>
|
|
||||||
{/* Folded corner */}
|
|
||||||
<path d="M82 18 L102 38 L82 38 Z" fill="#fde68a" />
|
|
||||||
<path d="M82 18 L102 38" stroke="#fcd34d" strokeWidth="2" />
|
|
||||||
{/* Lines on paper */}
|
|
||||||
<line
|
|
||||||
x1="42"
|
|
||||||
y1="50"
|
|
||||||
x2="84"
|
|
||||||
y2="50"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="42"
|
|
||||||
y1="60"
|
|
||||||
x2="90"
|
|
||||||
y2="60"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="42"
|
|
||||||
y1="70"
|
|
||||||
x2="78"
|
|
||||||
y2="70"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
<line
|
|
||||||
x1="42"
|
|
||||||
y1="80"
|
|
||||||
x2="86"
|
|
||||||
y2="80"
|
|
||||||
stroke="#e5e7eb"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
/>
|
|
||||||
{/* Checkmark on first line */}
|
|
||||||
<path
|
|
||||||
d="M42 42 l5 5 l9 -9"
|
|
||||||
stroke="#22c55e"
|
|
||||||
strokeWidth="2.5"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
fill="none"
|
|
||||||
/>
|
|
||||||
{/* Pencil */}
|
|
||||||
<g transform="rotate(-35 155 55)">
|
|
||||||
<rect x="138" y="28" width="14" height="52" rx="3" fill="#fbbf24" />
|
|
||||||
<path d="M138 76 L145 90 L152 76 Z" fill="#f97316" />
|
|
||||||
<rect x="138" y="28" width="14" height="10" rx="3" fill="#9ca3af" />
|
|
||||||
<rect x="140" y="30" width="10" height="6" rx="2" fill="#d1d5db" />
|
|
||||||
</g>
|
|
||||||
{/* Stars / highlights */}
|
|
||||||
<path
|
|
||||||
d="M200 22 l2 -6 l2 6 l6 2 l-6 2 l-2 6 l-2 -6 l-6 -2 Z"
|
|
||||||
fill="#f59e0b"
|
|
||||||
opacity="0.7"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M230 65 l1.5 -4 l1.5 4 l4 1.5 l-4 1.5 l-1.5 4 l-1.5 -4 l-4 -1.5 Z"
|
|
||||||
fill="#fbbf24"
|
|
||||||
opacity="0.5"
|
|
||||||
/>
|
|
||||||
<circle cx="215" cy="88" r="4" fill="#fcd34d" opacity="0.4" />
|
|
||||||
<circle cx="240" cy="35" r="3" fill="#fbbf24" opacity="0.35" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
const MODE_CARDS = [
|
const MODE_CARDS = [
|
||||||
{
|
{
|
||||||
color: "red",
|
color: "red",
|
||||||
icon: <Target size={18} color="white" />,
|
icon: <Target size={20} color="white" />,
|
||||||
|
badge: <Loader2 size={22} color="#ef4444" />,
|
||||||
title: "Targeted Practice",
|
title: "Targeted Practice",
|
||||||
desc: "Focus on your weak spots and improve fast",
|
desc: "Focus on your weak spots and improve fast",
|
||||||
route: "/student/practice/targeted-practice",
|
route: "/student/practice/targeted-practice",
|
||||||
arrow: "Practice →",
|
arrow: "Practice →",
|
||||||
Illo: IlloTargeted,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: "cyan",
|
color: "cyan",
|
||||||
icon: <Zap size={18} color="white" />,
|
icon: <Zap size={20} color="white" />,
|
||||||
|
badge: <Clock size={22} color="#06b6d4" />,
|
||||||
title: "Drills",
|
title: "Drills",
|
||||||
desc: "Train speed and accuracy under pressure",
|
desc: "Train speed and accuracy under pressure",
|
||||||
route: "/student/practice/drills",
|
route: "/student/practice/drills",
|
||||||
arrow: "Drill →",
|
arrow: "Drill →",
|
||||||
Illo: IlloDrills,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
color: "lime",
|
color: "lime",
|
||||||
icon: <Trophy size={18} color="white" />,
|
icon: <Trophy size={20} color="white" />,
|
||||||
|
badge: <BookOpen size={22} color="#84cc16" />,
|
||||||
title: "Hard Modules",
|
title: "Hard Modules",
|
||||||
desc: "Push yourself with the toughest questions",
|
desc: "Push yourself with the toughest questions",
|
||||||
route: "/student/practice/hard-test-modules",
|
route: "/student/practice/hard-test-modules",
|
||||||
arrow: "Challenge →",
|
arrow: "Challenge →",
|
||||||
Illo: IlloHard,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: "amber",
|
|
||||||
icon: <FileText size={18} color="white" />,
|
|
||||||
title: "Practice Sheet",
|
|
||||||
desc: "Work through curated question sets at your own pace",
|
|
||||||
route: "/student/practice/practice-sheet",
|
|
||||||
arrow: "Start Sheet →",
|
|
||||||
Illo: IlloSheet,
|
|
||||||
},
|
},
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
@ -649,7 +297,6 @@ export const Practice = () => {
|
|||||||
<div className="pr-inner">
|
<div className="pr-inner">
|
||||||
{/* ── Header ── */}
|
{/* ── Header ── */}
|
||||||
<InfoHeader mode="LEVEL" />
|
<InfoHeader mode="LEVEL" />
|
||||||
|
|
||||||
{/* ── Hero banner ── */}
|
{/* ── Hero banner ── */}
|
||||||
<div className="pr-hero pr-anim pr-anim-1">
|
<div className="pr-hero pr-anim pr-anim-1">
|
||||||
<div className="pr-hero-icon-bg">
|
<div className="pr-hero-icon-bg">
|
||||||
@ -660,12 +307,7 @@ export const Practice = () => {
|
|||||||
<p className="pr-hero-sub">
|
<p className="pr-hero-sub">
|
||||||
Take a full adaptive test and benchmark your SAT readiness.
|
Take a full adaptive test and benchmark your SAT readiness.
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button className="pr-hero-btn">Take a practice test →</button>
|
||||||
onClick={() => navigate("/student/practice/practice-sheet")}
|
|
||||||
className="pr-hero-btn"
|
|
||||||
>
|
|
||||||
Take a practice test →
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── Practice modes ── */}
|
{/* ── Practice modes ── */}
|
||||||
@ -680,22 +322,19 @@ export const Practice = () => {
|
|||||||
className={`pr-mode-card ${card.color}`}
|
className={`pr-mode-card ${card.color}`}
|
||||||
onClick={() => navigate(card.route)}
|
onClick={() => navigate(card.route)}
|
||||||
>
|
>
|
||||||
{/* Illustration */}
|
|
||||||
<div className="pr-card-illo">
|
|
||||||
<card.Illo />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Body */}
|
|
||||||
<div className="pr-card-body">
|
|
||||||
<div className="pr-mode-top">
|
<div className="pr-mode-top">
|
||||||
<div className={`pr-mode-icon ${card.color}`}>
|
<div className={`pr-mode-icon ${card.color}`}>
|
||||||
{card.icon}
|
{card.icon}
|
||||||
</div>
|
</div>
|
||||||
|
<div className={`pr-mode-badge ${card.color}`}>
|
||||||
|
{card.badge}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<p className="pr-mode-title">{card.title}</p>
|
<p className="pr-mode-title">{card.title}</p>
|
||||||
</div>
|
|
||||||
<p className="pr-mode-desc">{card.desc}</p>
|
<p className="pr-mode-desc">{card.desc}</p>
|
||||||
<p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p className={`pr-mode-arrow ${card.color}`}>{card.arrow}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -12,7 +12,7 @@ import { ChestOpenModal } from "../../components/ChestOpenModal";
|
|||||||
import { InfoHeader } from "../../components/InfoHeader";
|
import { InfoHeader } from "../../components/InfoHeader";
|
||||||
import { Canvas, useThree, useFrame } from "@react-three/fiber";
|
import { Canvas, useThree, useFrame } from "@react-three/fiber";
|
||||||
import { Island3D } from "../../components/Island3D";
|
import { Island3D } from "../../components/Island3D";
|
||||||
import { OrbitControls, Stars } from "@react-three/drei";
|
import { Billboard, OrbitControls, Stars, Text } from "@react-three/drei";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
// ─── Map geometry ─────────────────────────────────────────────────────────────
|
// ─── Map geometry ─────────────────────────────────────────────────────────────
|
||||||
@ -860,6 +860,11 @@ const RouteSegment = ({
|
|||||||
{/* Travelling ship on the active leg */}
|
{/* Travelling ship on the active leg */}
|
||||||
{isActive && !isDone && (
|
{isActive && !isDone && (
|
||||||
<group ref={shipRef}>
|
<group ref={shipRef}>
|
||||||
|
<Billboard>
|
||||||
|
<Text fontSize={0.3} anchorX="center" anchorY="middle">
|
||||||
|
⛵
|
||||||
|
</Text>
|
||||||
|
</Billboard>
|
||||||
{/* Gold wake glow disk */}
|
{/* Gold wake glow disk */}
|
||||||
<mesh rotation-x={-Math.PI / 2} position-y={0.04}>
|
<mesh rotation-x={-Math.PI / 2} position-y={0.04}>
|
||||||
<circleGeometry args={[0.19, 16]} />
|
<circleGeometry args={[0.19, 16]} />
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1170,7 +1170,6 @@ export const Test = () => {
|
|||||||
const handleQuitExam = () => {
|
const handleQuitExam = () => {
|
||||||
useExamConfigStore.getState().clearPayload();
|
useExamConfigStore.getState().clearPayload();
|
||||||
quitExam();
|
quitExam();
|
||||||
navigate("/student/home", { replace: true });
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const toggleEliminate = (questionId: string, optionId: string) => {
|
const toggleEliminate = (questionId: string, optionId: string) => {
|
||||||
@ -1704,10 +1703,11 @@ export const Test = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{currentQuestion?.context_image_url && (
|
{currentQuestion?.context_image_url &&
|
||||||
|
currentQuestion.context_image_url !== "NULL" && (
|
||||||
<div className="t-card p-6">
|
<div className="t-card p-6">
|
||||||
<img
|
<img
|
||||||
src={currentQuestion.context_image_url}
|
src="https://placehold.co/600x400"
|
||||||
alt="Question context"
|
alt="Question context"
|
||||||
className="w-full h-auto rounded-xl"
|
className="w-full h-auto rounded-xl"
|
||||||
/>
|
/>
|
||||||
@ -1755,16 +1755,18 @@ export const Test = () => {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{currentQuestion?.context_image_url && (
|
{currentQuestion?.context_image_url &&
|
||||||
|
currentQuestion.context_image_url !== "NULL" && (
|
||||||
<div className="t-card p-6">
|
<div className="t-card p-6">
|
||||||
<img
|
<img
|
||||||
src={currentQuestion.context_image_url}
|
src="https://placehold.co/600x400"
|
||||||
alt="Question context"
|
alt="Question context"
|
||||||
className="w-full h-auto rounded-xl"
|
className="w-full h-auto rounded-xl"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{currentQuestion?.context && (
|
{currentQuestion?.context &&
|
||||||
|
currentQuestion.context !== "NULL" && (
|
||||||
<div className="t-card p-6">
|
<div className="t-card p-6">
|
||||||
<HighlightableRichText
|
<HighlightableRichText
|
||||||
fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
|
fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
|
||||||
|
|||||||
@ -284,38 +284,5 @@ class ApiClient {
|
|||||||
body: JSON.stringify(titleData),
|
body: JSON.stringify(titleData),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/*------------UPLOADS-------------- */
|
|
||||||
// token is optional — the /uploads/ endpoint appears to be public
|
|
||||||
// (no Authorization header in the curl example). Pass a token if needed.
|
|
||||||
async uploadAvatar(file: File, token?: string): Promise<string> {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append("file", file);
|
|
||||||
|
|
||||||
const headers: HeadersInit = { accept: "application/json" };
|
|
||||||
if (token) headers["Authorization"] = `Bearer ${token}`;
|
|
||||||
// Note: Do NOT set Content-Type manually — fetch sets it automatically
|
|
||||||
// with the correct multipart/form-data boundary when the body is FormData.
|
|
||||||
|
|
||||||
const url = `${this.baseURL}/uploads/`;
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: "POST",
|
|
||||||
headers,
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const error: ApiError = await response.json().catch(() => ({
|
|
||||||
message: "Upload failed",
|
|
||||||
}));
|
|
||||||
throw new Error(error.detail || error.message || "Upload failed");
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
// Adjust the field name below to match your API's response shape,
|
|
||||||
// e.g. data.url, data.file_url, data.avatar_url, etc.
|
|
||||||
return data.url as string;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const api = new ApiClient(API_URL);
|
export const api = new ApiClient(API_URL);
|
||||||
|
|||||||
@ -11,13 +11,4 @@ export default defineConfig({
|
|||||||
"@": path.resolve(__dirname, "./src"),
|
"@": path.resolve(__dirname, "./src"),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
build: {
|
|
||||||
rollupOptions: {
|
|
||||||
output: {
|
|
||||||
manualChunks: {
|
|
||||||
troika: ["troika-three-text", "troika-worker-utils"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user