Compare commits
2 Commits
f154ebf033
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 79fc2eacdc | |||
| 9074b17a83 |
7170
package-lock.json
generated
7170
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -16,263 +16,201 @@ import {
|
||||
BookOpen,
|
||||
Home,
|
||||
Video,
|
||||
User,
|
||||
Target,
|
||||
Zap,
|
||||
Trophy,
|
||||
LayoutGrid,
|
||||
} from "lucide-react";
|
||||
|
||||
import { useState } from "react";
|
||||
import logo from "../assets/ed_logo1.png";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useAuthStore } from "../stores/authStore";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
|
||||
|
||||
export function AppSidebar() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [open, setOpen] = useState(true);
|
||||
const user = useAuthStore((s) => s.user);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Sidebar
|
||||
variant="floating"
|
||||
className="pointer-events-none border-0 bg-transparent px-0 py-0"
|
||||
>
|
||||
<div className="pointer-events-auto fixed inset-y-2 left-2 flex w-64 flex-col overflow-hidden rounded-[1.75rem] bg-[rgba(249,240,255,0.82)] shadow-[0_18px_45px_rgba(15,23,42,0.16)] transition-colors duration-300">
|
||||
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(168,85,247,0.18),transparent_55%),radial-gradient(circle_at_bottom,rgba(249,115,22,0.1),transparent_55%)]" />
|
||||
<Sidebar className="border-r bg-black text-white">
|
||||
{/* HEADER */}
|
||||
<SidebarHeader>
|
||||
<div className="flex items-center justify-between px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex rounded-md w-10 h-10 border overflow-hidden">
|
||||
<img
|
||||
src={logo}
|
||||
className="w-full h-full object-cover object-left"
|
||||
alt="Logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative flex h-full flex-col">
|
||||
{/* HEADER */}
|
||||
<SidebarHeader className="px-3 pb-4 pt-1">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<div className="flex items-center gap-3 rounded-2xl px-2 py-2">
|
||||
<div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-linear-to-br from-purple-400 to-purple-500 shadow-[0_6px_18px_rgba(168,85,247,0.55)]">
|
||||
<img
|
||||
src={logo}
|
||||
className="h-full w-full object-cover object-left"
|
||||
alt="Logo"
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-satoshi-medium text-black">
|
||||
Edbridge Scholars
|
||||
</span>
|
||||
<span className="text-xs text-gray-400 font-satoshi">
|
||||
Student
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown size={16} />
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
{/* CONTENT */}
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="text-gray-400 font-satoshi">
|
||||
Platform
|
||||
</SidebarGroupLabel>
|
||||
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton asChild>
|
||||
<NavLink
|
||||
to="/student/home"
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? "bg-zinc-800 text-white"
|
||||
: "text-zinc-400 hover:bg-zinc-800"
|
||||
}
|
||||
>
|
||||
<Home size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">Home</span>
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
className="cursor-pointer"
|
||||
asChild
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<div>
|
||||
<BookOpen size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">Practice</span>
|
||||
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`ml-auto transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-satoshi-medium text-slate-900">
|
||||
Edbridge Scholars
|
||||
</span>
|
||||
<span className="font-satoshi text-xs text-slate-400">
|
||||
Student
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
|
||||
{/* CONTENT */}
|
||||
<SidebarContent className="px-1">
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="px-2 text-[0.7rem] font-satoshi tracking-[0.16em] text-slate-400">
|
||||
PLATFORM
|
||||
</SidebarGroupLabel>
|
||||
|
||||
<SidebarMenu className="mt-1 space-y-1.5">
|
||||
{/* HOME */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
</SidebarMenuButton>
|
||||
{open && (
|
||||
<SidebarMenuSub className="space-y-3 mt-2">
|
||||
<NavLink
|
||||
to="/student/practice"
|
||||
className="text-black text-sm flex items-center gap-3"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/home"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Home
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-orange-400" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Home</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
{/* PRACTICE */}
|
||||
<SidebarMenuItem
|
||||
onMouseEnter={() => setOpen(true)}
|
||||
onMouseLeave={() => setOpen(false)}
|
||||
>
|
||||
<SidebarMenuButton
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
asChild
|
||||
<LayoutGrid size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">
|
||||
Practice your way
|
||||
</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/targeted-practice"
|
||||
className="text-black text-sm flex items-center gap-3"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/practice"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<BookOpen
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-purple-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Practice</span>
|
||||
<ChevronDown
|
||||
size={16}
|
||||
className={`ml-auto text-slate-400 transition-transform ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
{open && (
|
||||
<SidebarMenuSub className="mt-2 space-y-1.5 pl-3">
|
||||
<NavLink
|
||||
to="/student/practice/targeted-practice"
|
||||
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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Target size={18} className="text-slate-400" />
|
||||
<span>Targeted Practice</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/drills"
|
||||
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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Zap size={18} className="text-slate-400" />
|
||||
<span>Drills</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/hard-test-modules"
|
||||
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"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Trophy size={18} className="text-slate-400" />
|
||||
<span>Hard Test Modules</span>
|
||||
</NavLink>
|
||||
</SidebarMenuSub>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
<Target size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">
|
||||
Targeted Practice
|
||||
</span>
|
||||
</NavLink>
|
||||
|
||||
{/* LESSONS */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
<NavLink
|
||||
to="/student/practice/drills"
|
||||
className="text-black text-sm flex items-center gap-3"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/lessons"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Video
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-cyan-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Lessons</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
{/* REWARDS */}
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
className="group cursor-pointer rounded-2xl px-2 py-2.5 transition-colors duration-200 hover:bg-white"
|
||||
<Zap size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">Drills</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/student/practice/hard-test-modules"
|
||||
className="text-black text-sm flex items-center gap-3"
|
||||
>
|
||||
<NavLink
|
||||
to="/student/rewards"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-2.5 text-sm font-satoshi ${
|
||||
isActive
|
||||
? "text-slate-900"
|
||||
: "text-slate-500 group-hover:text-slate-900"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
<Trophy
|
||||
size={18}
|
||||
className={
|
||||
isActive ? "text-emerald-500" : "text-slate-400"
|
||||
}
|
||||
/>
|
||||
<span>Rewards</span>
|
||||
</>
|
||||
)}
|
||||
</NavLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<Trophy size={18} className="text-black" />
|
||||
<span className="font-satoshi text-black">
|
||||
Hard Test Modules
|
||||
</span>
|
||||
</NavLink>
|
||||
</SidebarMenuSub>
|
||||
)}
|
||||
</SidebarMenuItem>
|
||||
|
||||
{/* FOOTER – links to profile */}
|
||||
<SidebarFooter className="mt-auto px-3 pb-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate("/student/profile")}
|
||||
className="flex w-full items-center gap-3 rounded-2xl bg-white/60 px-3 py-2 text-left shadow-sm ring-1 ring-white/80 hover:bg-white"
|
||||
>
|
||||
<Avatar>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback className="bg-linear-to-br from-purple-400 to-purple-500 font-satoshi-bold uppercase text-white">
|
||||
{user?.name.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-medium text-slate-900">{user?.name}</span>
|
||||
<span className="text-xs text-slate-400">{user?.email}</span>
|
||||
</div>
|
||||
<ChevronDown size={16} className="ml-auto text-slate-400" />
|
||||
</button>
|
||||
</SidebarFooter>
|
||||
{/* DOCS */}
|
||||
<SidebarMenuItem>
|
||||
<NavLink
|
||||
to={`/student/lessons`}
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? "bg-zinc-800 text-white"
|
||||
: "text-zinc-400 hover:bg-zinc-800"
|
||||
}
|
||||
>
|
||||
<SidebarMenuButton className="cursor-pointer">
|
||||
<Video size={18} className="text-black" />
|
||||
<span className="text-black font-satoshi">Lessons</span>
|
||||
</SidebarMenuButton>
|
||||
</NavLink>
|
||||
</SidebarMenuItem>
|
||||
|
||||
{/* SETTINGS */}
|
||||
<SidebarMenuItem>
|
||||
<NavLink
|
||||
to={`/student/rewards`}
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? "bg-zinc-800 text-white"
|
||||
: "text-zinc-400 hover:bg-zinc-800"
|
||||
}
|
||||
>
|
||||
<SidebarMenuButton className="cursor-pointer">
|
||||
<Trophy size={18} className="text-black" />
|
||||
<span className="text-black font-satoshi">Rewards</span>
|
||||
</SidebarMenuButton>
|
||||
</NavLink>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<NavLink
|
||||
to={`/student/profile`}
|
||||
className={({ isActive }) =>
|
||||
isActive
|
||||
? "bg-zinc-800 text-white"
|
||||
: "text-zinc-400 hover:bg-zinc-800"
|
||||
}
|
||||
>
|
||||
<SidebarMenuButton className="cursor-pointer">
|
||||
<User size={18} className="text-black" />
|
||||
<span className="text-black font-satoshi">Profile</span>
|
||||
</SidebarMenuButton>
|
||||
</NavLink>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
{/* FOOTER */}
|
||||
<SidebarFooter>
|
||||
<div className="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-white/10 cursor-pointer">
|
||||
<Avatar>
|
||||
<AvatarImage src={user?.avatar_url} />
|
||||
<AvatarFallback className="font-satoshi-bold bg-linear-to-br from-purple-400 to-purple-500 uppercase">
|
||||
{user?.name.slice(0, 1)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col text-sm">
|
||||
<span className="font-medium text-black">{user?.name}</span>
|
||||
<span className="text-xs text-gray-400">{user?.email}</span>
|
||||
</div>
|
||||
<ChevronDown size={16} className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { X } from "lucide-react";
|
||||
import type { InventoryItem, ActiveEffect } from "../types/quest";
|
||||
import {
|
||||
@ -43,7 +44,6 @@ const STYLES = `
|
||||
to { transform: translateY(0); opacity:1; }
|
||||
}
|
||||
|
||||
/* Sea shimmer bg */
|
||||
.inv-sheet::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0; pointer-events: none; z-index: 0;
|
||||
@ -58,7 +58,6 @@ const STYLES = `
|
||||
100% { background-position: 100% 100%, 0% 100%; }
|
||||
}
|
||||
|
||||
/* Gold orb top-right */
|
||||
.inv-sheet::after {
|
||||
content: '';
|
||||
position: absolute; top: -60px; right: -40px; z-index: 0;
|
||||
@ -67,7 +66,6 @@ const STYLES = `
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Handle ── */
|
||||
.inv-handle-row {
|
||||
display: flex; justify-content: center;
|
||||
padding: 0.75rem 0 0; flex-shrink: 0; position: relative; z-index: 2;
|
||||
@ -77,7 +75,6 @@ const STYLES = `
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.inv-header {
|
||||
position: relative; z-index: 2;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
@ -108,7 +105,6 @@ const STYLES = `
|
||||
background: rgba(251,191,36,0.1);
|
||||
}
|
||||
|
||||
/* ── Active effects banner ── */
|
||||
.inv-active-bar {
|
||||
position: relative; z-index: 2;
|
||||
display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
|
||||
@ -140,7 +136,6 @@ const STYLES = `
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
|
||||
/* ── Divider ── */
|
||||
.inv-divider {
|
||||
position: relative; z-index: 2;
|
||||
height: 1px; margin: 0.85rem 1.3rem 0;
|
||||
@ -154,7 +149,6 @@ const STYLES = `
|
||||
text-transform: uppercase; color: rgba(255,255,255,0.25);
|
||||
}
|
||||
|
||||
/* ── Scrollable item grid ── */
|
||||
.inv-scroll {
|
||||
position: relative; z-index: 2;
|
||||
flex: 1; overflow-y: auto; scrollbar-width: none;
|
||||
@ -162,7 +156,6 @@ const STYLES = `
|
||||
}
|
||||
.inv-scroll::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ── Empty state ── */
|
||||
.inv-empty {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; gap: 0.6rem;
|
||||
@ -173,7 +166,6 @@ const STYLES = `
|
||||
}
|
||||
.inv-empty-icon { font-size: 2.5rem; opacity: 0.4; }
|
||||
|
||||
/* ── Loading skeleton ── */
|
||||
.inv-skeleton-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
|
||||
}
|
||||
@ -187,12 +179,10 @@ const STYLES = `
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Item grid ── */
|
||||
.inv-grid {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* ── Item card ── */
|
||||
.inv-card {
|
||||
border-radius: 20px; padding: 1rem;
|
||||
border: 1.5px solid rgba(255,255,255,0.07);
|
||||
@ -213,8 +203,6 @@ const STYLES = `
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.inv-card:active { transform: translateY(0) scale(0.98); }
|
||||
|
||||
/* Active card styling */
|
||||
.inv-card.is-active {
|
||||
border-color: rgba(251,191,36,0.4);
|
||||
background: rgba(251,191,36,0.06);
|
||||
@ -223,26 +211,17 @@ const STYLES = `
|
||||
border-color: rgba(251,191,36,0.6);
|
||||
background: rgba(251,191,36,0.09);
|
||||
}
|
||||
|
||||
/* Just-activated flash */
|
||||
@keyframes invActivateFlash {
|
||||
0% { background: rgba(251,191,36,0.25); border-color: rgba(251,191,36,0.8); }
|
||||
100%{ background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.4); }
|
||||
}
|
||||
.inv-card.just-activated {
|
||||
animation: invActivateFlash 0.9s ease forwards;
|
||||
}
|
||||
|
||||
/* Card shimmer overlay */
|
||||
.inv-card.just-activated { animation: invActivateFlash 0.9s ease forwards; }
|
||||
.inv-card-sheen {
|
||||
position: absolute; inset: 0; pointer-events: none;
|
||||
background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.04) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease;
|
||||
transform: translateX(-100%); transition: transform 0.5s ease;
|
||||
}
|
||||
.inv-card:hover .inv-card-sheen { transform: translateX(100%); }
|
||||
|
||||
/* Icon area */
|
||||
.inv-card-icon-wrap {
|
||||
width: 44px; height: 44px; border-radius: 14px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
@ -258,30 +237,23 @@ const STYLES = `
|
||||
.inv-card-active-dot {
|
||||
position: absolute; top: -3px; right: -3px;
|
||||
width: 10px; height: 10px; border-radius: 50%;
|
||||
background: #fbbf24;
|
||||
border: 2px solid #08111f;
|
||||
background: #fbbf24; border: 2px solid #08111f;
|
||||
animation: invDotPulse 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes invDotPulse {
|
||||
0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.6); }
|
||||
50% { box-shadow: 0 0 0 5px rgba(251,191,36,0); }
|
||||
}
|
||||
|
||||
/* Card text */
|
||||
.inv-card-name {
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.82rem; font-weight: 900; color: #fff;
|
||||
line-height: 1.2;
|
||||
font-size: 0.82rem; font-weight: 900; color: #fff; line-height: 1.2;
|
||||
}
|
||||
.inv-card.is-active .inv-card-name { color: #fbbf24; }
|
||||
.inv-card-desc {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.63rem; font-weight: 600;
|
||||
color: rgba(255,255,255,0.38); line-height: 1.4;
|
||||
flex: 1;
|
||||
color: rgba(255,255,255,0.38); line-height: 1.4; flex: 1;
|
||||
}
|
||||
|
||||
/* Qty + type row */
|
||||
.inv-card-meta {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
gap: 0.4rem; margin-top: auto;
|
||||
@ -299,11 +271,8 @@ const STYLES = `
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.22);
|
||||
}
|
||||
|
||||
/* Activate button */
|
||||
.inv-activate-btn {
|
||||
width: 100%;
|
||||
padding: 0.48rem;
|
||||
width: 100%; padding: 0.48rem;
|
||||
border-radius: 10px; border: none; cursor: pointer;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
font-size: 0.7rem; font-weight: 900;
|
||||
@ -315,10 +284,7 @@ const STYLES = `
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
color: rgba(255,255,255,0.6);
|
||||
}
|
||||
.inv-activate-btn.idle:hover {
|
||||
background: rgba(255,255,255,0.12);
|
||||
color: white;
|
||||
}
|
||||
.inv-activate-btn.idle:hover { background: rgba(255,255,255,0.12); color: white; }
|
||||
.inv-activate-btn.activating {
|
||||
background: rgba(251,191,36,0.1);
|
||||
border: 1px solid rgba(251,191,36,0.25);
|
||||
@ -330,8 +296,7 @@ const STYLES = `
|
||||
.inv-activate-btn.active-state {
|
||||
background: rgba(251,191,36,0.12);
|
||||
border: 1px solid rgba(251,191,36,0.3);
|
||||
color: #fbbf24;
|
||||
cursor: default;
|
||||
color: #fbbf24; cursor: default;
|
||||
}
|
||||
.inv-activate-btn.success-flash {
|
||||
background: rgba(74,222,128,0.18);
|
||||
@ -339,24 +304,17 @@ const STYLES = `
|
||||
color: #4ade80;
|
||||
animation: invSuccessScale 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
|
||||
}
|
||||
@keyframes invSuccessScale {
|
||||
from { transform: scale(0.94); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
@keyframes invSuccessScale { from{transform:scale(0.94)} to{transform:scale(1)} }
|
||||
.inv-activate-btn:disabled { pointer-events: none; }
|
||||
|
||||
/* Time remaining on active button */
|
||||
.inv-active-time {
|
||||
font-family: 'Nunito Sans', sans-serif;
|
||||
font-size: 0.55rem; font-weight: 700;
|
||||
color: rgba(251,191,36,0.5);
|
||||
font-size: 0.55rem; font-weight: 700; color: rgba(251,191,36,0.5);
|
||||
}
|
||||
|
||||
/* ── Toast ── */
|
||||
.inv-toast {
|
||||
position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom));
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 90;
|
||||
z-index: 9999;
|
||||
display: flex; align-items: center; gap: 0.55rem;
|
||||
padding: 0.7rem 1.2rem;
|
||||
background: linear-gradient(135deg, #1a3a1a, #0d2010);
|
||||
@ -380,13 +338,11 @@ const ITEM_ICON: Record<string, string> = {
|
||||
title: "🏴☠️",
|
||||
coin_boost: "🪙",
|
||||
};
|
||||
const ITEM_ICON_DEFAULT = "📦";
|
||||
|
||||
function itemIcon(effectType: string): string {
|
||||
return ITEM_ICON[effectType] ?? ITEM_ICON_DEFAULT;
|
||||
return ITEM_ICON[effectType] ?? "📦";
|
||||
}
|
||||
|
||||
// ─── Check if an item is currently active ─────────────────────────────────────
|
||||
function isItemActive(
|
||||
item: InventoryItem,
|
||||
activeEffects: ActiveEffect[],
|
||||
@ -438,33 +394,23 @@ const ItemCard = ({
|
||||
style={{ "--ci-delay": `${index * 0.045}s` } as React.CSSProperties}
|
||||
>
|
||||
<div className="inv-card-sheen" />
|
||||
|
||||
{/* Icon */}
|
||||
<div className="inv-card-icon-wrap">
|
||||
{itemIcon(inv.item.effect_type)}
|
||||
{isActive && <div className="inv-card-active-dot" />}
|
||||
</div>
|
||||
|
||||
{/* Name + description */}
|
||||
<p className="inv-card-name">{inv.item.name}</p>
|
||||
<p className="inv-card-desc">{inv.item.description}</p>
|
||||
|
||||
{/* Qty + type */}
|
||||
<div className="inv-card-meta">
|
||||
<span className="inv-card-qty">×{inv.quantity}</span>
|
||||
<span className="inv-card-type">
|
||||
{inv.item.type.replace(/_/g, " ")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Time remaining if active */}
|
||||
{isActive && activeEffect && (
|
||||
<div className="inv-active-time">
|
||||
{formatTimeLeft(activeEffect.expires_at)} remaining
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Activate button */}
|
||||
<button
|
||||
className={`inv-activate-btn ${btnState}`}
|
||||
onClick={() => !isActive && !isActivating && onActivate(inv.id)}
|
||||
@ -504,11 +450,9 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
const [toastMsg, setToastMsg] = useState("");
|
||||
const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// ── Fetch on open ──────────────────────────────────────────────────────────
|
||||
useEffect(() => {
|
||||
if (!token) return;
|
||||
let cancelled = false;
|
||||
|
||||
const fetchInv = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
@ -520,31 +464,24 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchInv();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [token]);
|
||||
|
||||
// ── Activate ──────────────────────────────────────────────────────────────
|
||||
const handleActivate = useCallback(
|
||||
async (itemId: string) => {
|
||||
if (!token) return;
|
||||
activateItemOptimistic(itemId);
|
||||
|
||||
try {
|
||||
const updatedInv = await api.activateItem(token, itemId);
|
||||
activateItemSuccess(updatedInv, itemId);
|
||||
|
||||
// Find item name for toast
|
||||
const name = items.find((i) => i.id === itemId)?.item.name ?? "Item";
|
||||
setToastMsg(
|
||||
`${itemIcon(items.find((i) => i.id === itemId)?.item.effect_type ?? "")} ${name} activated!`,
|
||||
);
|
||||
setShowToast(true);
|
||||
|
||||
// Auto-clear success state + toast
|
||||
if (toastTimer.current) clearTimeout(toastTimer.current);
|
||||
toastTimer.current = setTimeout(() => {
|
||||
setShowToast(false);
|
||||
@ -560,7 +497,6 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
[token, items],
|
||||
);
|
||||
|
||||
// Cleanup timer on unmount
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (toastTimer.current) clearTimeout(toastTimer.current);
|
||||
@ -570,18 +506,19 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
|
||||
const liveEffects = getLiveEffects(activeEffects);
|
||||
|
||||
return (
|
||||
// Portal the entire modal to document.body so it always
|
||||
// renders at the top of the DOM tree, escaping any parent
|
||||
// stacking context, overflow:hidden, or z-index constraints.
|
||||
return createPortal(
|
||||
<>
|
||||
<style>{STYLES}</style>
|
||||
|
||||
<div className="inv-overlay" onClick={onClose}>
|
||||
<div className="inv-sheet" onClick={(e) => e.stopPropagation()}>
|
||||
{/* Handle */}
|
||||
<div className="inv-handle-row">
|
||||
<div className="inv-handle" />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="inv-header">
|
||||
<div className="inv-header-left">
|
||||
<span className="inv-eyebrow">⚓ Pirate's Hold</span>
|
||||
@ -592,7 +529,6 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Active effects bar */}
|
||||
{liveEffects.length > 0 && (
|
||||
<div className="inv-active-bar">
|
||||
{liveEffects.map((e) => (
|
||||
@ -616,7 +552,6 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
: "Your hold"}
|
||||
</p>
|
||||
|
||||
{/* Scroll area */}
|
||||
<div className="inv-scroll">
|
||||
{loading && items.length === 0 ? (
|
||||
<div className="inv-skeleton-grid">
|
||||
@ -649,7 +584,6 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error inline */}
|
||||
{error && (
|
||||
<p
|
||||
style={{
|
||||
@ -668,8 +602,8 @@ export const InventoryModal = ({ onClose }: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success toast */}
|
||||
{showToast && <div className="inv-toast">{toastMsg}</div>}
|
||||
</>
|
||||
</>,
|
||||
document.body,
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { QuizData } from '../types';
|
||||
import { CheckCircle2, XCircle, ChevronRight } from 'lucide-react';
|
||||
import React, { useState } from "react";
|
||||
import { type QuizData } from "../../types/lesson";
|
||||
import { CheckCircle2, XCircle, ChevronRight } from "lucide-react";
|
||||
|
||||
interface QuizProps {
|
||||
data: QuizData;
|
||||
@ -21,20 +21,24 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
||||
const handleSubmit = () => {
|
||||
if (!selectedId) return;
|
||||
setIsSubmitted(true);
|
||||
const selectedOption = data.options.find(opt => opt.id === selectedId);
|
||||
const selectedOption = data.options.find((opt) => opt.id === selectedId);
|
||||
if (selectedOption?.isCorrect && onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
};
|
||||
|
||||
const selectedOption = data.options.find(opt => opt.id === selectedId);
|
||||
const selectedOption = data.options.find((opt) => opt.id === selectedId);
|
||||
const isCorrect = selectedOption?.isCorrect;
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-2xl mx-auto bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mt-6">
|
||||
<div className="p-6">
|
||||
<h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">Concept Check</h4>
|
||||
<p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">{data.question}</p>
|
||||
<h4 className="text-sm font-bold text-slate-400 uppercase tracking-wider mb-2">
|
||||
Concept Check
|
||||
</h4>
|
||||
<p className="text-lg font-medium text-slate-900 mb-6 whitespace-pre-line">
|
||||
{data.question}
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{data.options.map((option) => {
|
||||
@ -52,11 +56,11 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
||||
icon = <XCircle className="w-5 h-5 text-red-600" />;
|
||||
}
|
||||
} else if (option.isCorrect) {
|
||||
// Highlight correct answer if wrong one was picked
|
||||
borderClass = "border-green-200 bg-green-50/50";
|
||||
// Highlight correct answer if wrong one was picked
|
||||
borderClass = "border-green-200 bg-green-50/50";
|
||||
}
|
||||
} else if (selectedId === option.id) {
|
||||
borderClass = "border-indigo-600 bg-indigo-50";
|
||||
borderClass = "border-indigo-600 bg-indigo-50";
|
||||
}
|
||||
|
||||
return (
|
||||
@ -67,14 +71,22 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
||||
className={`w-full text-left p-4 rounded-lg border-2 transition-all duration-200 flex items-center justify-between group ${borderClass} ${bgClass}`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
|
||||
isSubmitted && option.isCorrect ? 'bg-green-200 text-green-800' :
|
||||
isSubmitted && option.id === selectedId ? 'bg-red-200 text-red-800' :
|
||||
selectedId === option.id ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-500'
|
||||
}`}>
|
||||
<span
|
||||
className={`w-6 h-6 flex items-center justify-center rounded-full text-xs font-bold mr-3 ${
|
||||
isSubmitted && option.isCorrect
|
||||
? "bg-green-200 text-green-800"
|
||||
: isSubmitted && option.id === selectedId
|
||||
? "bg-red-200 text-red-800"
|
||||
: selectedId === option.id
|
||||
? "bg-indigo-600 text-white"
|
||||
: "bg-slate-100 text-slate-500"
|
||||
}`}
|
||||
>
|
||||
{option.id}
|
||||
</span>
|
||||
<span className="text-slate-700 group-hover:text-slate-900">{option.text}</span>
|
||||
<span className="text-slate-700 group-hover:text-slate-900">
|
||||
{option.text}
|
||||
</span>
|
||||
</div>
|
||||
{icon}
|
||||
</button>
|
||||
@ -85,21 +97,33 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
||||
|
||||
{/* Feedback Section */}
|
||||
{isSubmitted && (
|
||||
<div className={`p-6 border-t ${isCorrect ? 'bg-green-50 border-green-100' : 'bg-slate-50 border-slate-100'}`}>
|
||||
<div
|
||||
className={`p-6 border-t ${isCorrect ? "bg-green-50 border-green-100" : "bg-slate-50 border-slate-100"}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className={`mt-1 p-1 rounded-full ${isCorrect ? 'bg-green-200' : 'bg-slate-200'}`}>
|
||||
{isCorrect ? <CheckCircle2 className="w-4 h-4 text-green-700" /> : <div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">i</div>}
|
||||
</div>
|
||||
<div>
|
||||
<p className={`font-bold ${isCorrect ? 'text-green-800' : 'text-slate-800'} mb-1`}>
|
||||
{isCorrect ? "That's right!" : "Not quite."}
|
||||
</p>
|
||||
<p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
|
||||
<div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
|
||||
<span className="font-semibold block mb-1">Explanation:</span>
|
||||
{data.explanation}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`mt-1 p-1 rounded-full ${isCorrect ? "bg-green-200" : "bg-slate-200"}`}
|
||||
>
|
||||
{isCorrect ? (
|
||||
<CheckCircle2 className="w-4 h-4 text-green-700" />
|
||||
) : (
|
||||
<div className="w-4 h-4 text-slate-500 font-bold text-center leading-4">
|
||||
i
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
className={`font-bold ${isCorrect ? "text-green-800" : "text-slate-800"} mb-1`}
|
||||
>
|
||||
{isCorrect ? "That's right!" : "Not quite."}
|
||||
</p>
|
||||
<p className="text-slate-600 mb-2">{selectedOption?.feedback}</p>
|
||||
<div className="text-sm text-slate-500 bg-white p-3 rounded border border-slate-200">
|
||||
<span className="font-semibold block mb-1">Explanation:</span>
|
||||
{data.explanation}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@ -110,9 +134,9 @@ const Quiz: React.FC<QuizProps> = ({ data, onComplete }) => {
|
||||
onClick={handleSubmit}
|
||||
disabled={!selectedId}
|
||||
className={`px-6 py-2 rounded-full font-semibold transition-all flex items-center ${
|
||||
selectedId
|
||||
? 'bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5'
|
||||
: 'bg-slate-200 text-slate-400 cursor-not-allowed'
|
||||
selectedId
|
||||
? "bg-slate-900 text-white hover:bg-slate-800 shadow-md transform hover:-translate-y-0.5"
|
||||
: "bg-slate-200 text-slate-400 cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
Check Answer <ChevronRight className="w-4 h-4 ml-1" />
|
||||
|
||||
@ -244,14 +244,7 @@ function Sidebar({
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col",
|
||||
// For the custom floating pill sidebar we render our own card,
|
||||
// so keep this container visually transparent.
|
||||
variant === "floating"
|
||||
? "bg-transparent"
|
||||
: "bg-sidebar group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||
)}
|
||||
className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@ -22,8 +22,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.home-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -151,7 +149,7 @@ const STYLES = `
|
||||
}
|
||||
.h-tab-btn.active { color:#1e1b4b; border-bottom-color:#a855f7; }
|
||||
|
||||
/* ── Practice sheet ── */
|
||||
/* ── Practice sheet card ── */
|
||||
.h-sheet-grid {
|
||||
display:grid; gap:0.85rem;
|
||||
grid-template-columns: 1fr;
|
||||
@ -243,18 +241,6 @@ const STYLES = `
|
||||
.h-anim-3 { animation-delay:0.15s; }
|
||||
.h-anim-4 { animation-delay:0.2s; }
|
||||
.h-anim-5 { animation-delay:0.25s; }
|
||||
|
||||
/* Desktop / wide tweaks */
|
||||
@media (min-width: 900px) {
|
||||
.home-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
||||
.h-sheet-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
||||
|
||||
/* nudge blobs so they align visually with the centered container */
|
||||
.h-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||
.h-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.h-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.h-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Sheet card ───────────────────────────────────────────────────────────────
|
||||
|
||||
@ -33,10 +33,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.ls-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
|
||||
@ -24,8 +24,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.pr-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -65,20 +63,6 @@ const STYLES = `
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Desktop / wide layout */
|
||||
@media (min-width: 900px) {
|
||||
.pr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
||||
.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-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.pr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.pr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
|
||||
.pr-hero { padding: 2rem; }
|
||||
.pr-hero-icon-bg { right: -60px; top: -40px; opacity: 0.12; }
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
@keyframes prPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
|
||||
@ -19,8 +19,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.pf-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -57,34 +55,6 @@ const STYLES = `
|
||||
display: flex; flex-direction: column; gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Desktop / web layout: wider container and two-column grid */
|
||||
@media (min-width: 900px) {
|
||||
.pf-inner {
|
||||
max-width: var(--content-max);
|
||||
padding: 2.5rem 2.5rem 4rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 420px;
|
||||
grid-template-rows: auto;
|
||||
gap: 1.5rem 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Hero spans full width */
|
||||
.pf-hero { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.5rem; }
|
||||
|
||||
/* Keep page title centered across the full layout */
|
||||
.pf-page-title { grid-column: 1 / -1; }
|
||||
|
||||
/* Place first section (Account) in left column */
|
||||
.pf-inner > section:nth-of-type(1) { grid-column: 1 / 2; }
|
||||
|
||||
/* Right column wrapper (Legal + Support) */
|
||||
.pf-right-col { grid-column: 2 / 3; display: flex; flex-direction: column; gap: 1.5rem; }
|
||||
|
||||
/* Make signout button centered and constrained width */
|
||||
.pf-signout-btn { grid-column: 1 / -1; justify-self: center; width: 420px; }
|
||||
}
|
||||
|
||||
@keyframes pfPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
to { opacity:1; transform: scale(1) translateY(0); }
|
||||
@ -337,18 +307,17 @@ export const Profile = () => {
|
||||
<SettingsGroup rows={ACCOUNT_ROWS} />
|
||||
</section>
|
||||
|
||||
{/* Right column: Legal + Support (stacked) */}
|
||||
<div className="pf-right-col pf-anim pf-anim-3">
|
||||
<section className="pf-section">
|
||||
<p className="pf-section-label">Legal</p>
|
||||
<SettingsGroup rows={LEGAL_ROWS} />
|
||||
</section>
|
||||
{/* Legal */}
|
||||
<section className="pf-section pf-anim pf-anim-3">
|
||||
<p className="pf-section-label">Legal</p>
|
||||
<SettingsGroup rows={LEGAL_ROWS} />
|
||||
</section>
|
||||
|
||||
<section className="pf-section">
|
||||
<p className="pf-section-label">Support</p>
|
||||
<SettingsGroup rows={SUPPORT_ROWS} />
|
||||
</section>
|
||||
</div>
|
||||
{/* Support */}
|
||||
<section className="pf-section pf-anim pf-anim-4">
|
||||
<p className="pf-section-label">Support</p>
|
||||
<SettingsGroup rows={SUPPORT_ROWS} />
|
||||
</section>
|
||||
|
||||
{/* Sign out */}
|
||||
<button
|
||||
|
||||
@ -33,8 +33,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.rw-screen {
|
||||
height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -68,6 +66,7 @@ const STYLES = `
|
||||
|
||||
.rw-sticky-top {
|
||||
position:relative;z-index:2;
|
||||
background:#fffbf4;
|
||||
flex-shrink:0;
|
||||
padding:2rem 1.25rem 0;
|
||||
}
|
||||
@ -86,26 +85,6 @@ const STYLES = `
|
||||
}
|
||||
.rw-scroll-inner { max-width:580px;margin:0 auto; }
|
||||
|
||||
/* Desktop: wider centered layout */
|
||||
@media (min-width: 900px) {
|
||||
.rw-sticky-top-inner { max-width: var(--content-max); padding: 2rem 2rem 1.25rem; }
|
||||
.rw-scroll-inner { max-width: var(--content-max); }
|
||||
.rw-scroll-area { padding: 1.5rem 2.5rem 10rem; }
|
||||
|
||||
/* Make empty state sit visually centered within larger canvas */
|
||||
.rw-empty { padding: 5rem 1rem; }
|
||||
|
||||
/* Slightly larger island pill on wide screens and rebalance blobs */
|
||||
.rw-island-wrap { max-width: 420px; left:auto; right:calc((100vw - 256px - var(--content-max)) / 2); top:240px; bottom:auto; transform:none; margin-left:150px; }
|
||||
.rw-island-card { gap: 0.75rem; }
|
||||
|
||||
/* Rebalance decorative blobs on wide screens */
|
||||
.rw-blob-1 { left: -120px; top: -100px; width:300px; height:300px; }
|
||||
.rw-blob-2 { left: 6%; bottom: -40px; }
|
||||
.rw-blob-3 { right: -100px; top: 8%; width:260px; height:260px; }
|
||||
.rw-blob-4 { right: 2%; bottom: 6%; }
|
||||
}
|
||||
|
||||
@keyframes rwPopIn {
|
||||
from{opacity:0;transform:scale(0.92) translateY(12px);}
|
||||
to{opacity:1;transform:scale(1) translateY(0);}
|
||||
@ -198,9 +177,8 @@ const STYLES = `
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
gap:0.5rem;
|
||||
width:auto;
|
||||
width:calc(100% - 2rem);
|
||||
max-width:300px;
|
||||
top:auto;
|
||||
}
|
||||
|
||||
.rw-island-card {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Outlet, NavLink, useLocation } from "react-router-dom";
|
||||
import { Home, BookOpen, Award, User, Video, Map } from "lucide-react";
|
||||
import { SidebarProvider } from "../../components/ui/sidebar";
|
||||
import { SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar";
|
||||
import { AppSidebar } from "../../components/AppSidebar";
|
||||
|
||||
const NAV_ITEMS = [
|
||||
@ -174,11 +174,6 @@ const STYLES = `
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Ensure the dock is hidden on desktop (md and up) */
|
||||
@media (min-width: 768px) {
|
||||
.sl-dock-wrap { display: none !important; }
|
||||
}
|
||||
|
||||
/* Quest mode: active label uses Cinzel for the pirate feel */
|
||||
.quest-mode .sl-dock-item.active .sl-dock-label {
|
||||
font-family: 'Sorts Mill Goudy', serif;
|
||||
@ -195,11 +190,6 @@ const STYLES = `
|
||||
.quest-mode .sl-dock-item:not(.active):hover .sl-dock-icon {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Ensure the dock is hidden on desktop (md and up) */
|
||||
@media (min-width: 768px) {
|
||||
.sl-dock-wrap { display: none !important; }
|
||||
}
|
||||
`;
|
||||
|
||||
export function StudentLayout() {
|
||||
@ -214,13 +204,11 @@ export function StudentLayout() {
|
||||
<style>{STYLES}</style>
|
||||
<div className="flex min-h-screen w-full overflow-x-hidden">
|
||||
{/* Desktop Sidebar */}
|
||||
<div className="hidden md:block">
|
||||
<AppSidebar />
|
||||
</div>
|
||||
<AppSidebar />
|
||||
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
{/* Extra bottom padding so content clears the floating dock */}
|
||||
<main className="flex-1 pb-24 md:pb-0">
|
||||
<SidebarTrigger className="hidden md:block" />
|
||||
<main className="flex-1 md:pb-0">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@ -24,8 +24,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.dr-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -215,31 +213,14 @@ const STYLES = `
|
||||
|
||||
/* CTA bar */
|
||||
.dr-cta-bar {
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
position:fixed;bottom:96px;left:0;right:0;z-index:10;
|
||||
padding:0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
|
||||
|
||||
}
|
||||
.dr-cta-inner {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.dr-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
|
||||
.dr-topic-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
|
||||
.dr-cta-bar { left: var(--sidebar-width); right: 0; }
|
||||
|
||||
/* Align decorative blobs relative to the centered content container */
|
||||
.dr-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
|
||||
.dr-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
|
||||
.dr-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
.dr-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
max-width:560px;margin:0 auto;
|
||||
display:flex;gap:0.75rem;align-items:center;
|
||||
}
|
||||
|
||||
.dr-next-btn {
|
||||
|
||||
@ -26,8 +26,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.htm-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -181,35 +179,16 @@ const STYLES = `
|
||||
|
||||
/* CTA bar */
|
||||
.htm-cta-bar {
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
|
||||
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
|
||||
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
|
||||
}
|
||||
.htm-cta-bar.hidden {
|
||||
transform: translateY(100%); opacity: 0; pointer-events: none;
|
||||
}
|
||||
.htm-cta-inner {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.htm-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
|
||||
.htm-cta-bar { left: var(--sidebar-width); right: 0; }
|
||||
.htm-cta-inner { max-width: var(--content-max); margin: 0 auto; }
|
||||
|
||||
/* align blobs to centered content */
|
||||
.htm-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
|
||||
.htm-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
|
||||
.htm-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
.htm-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
|
||||
/* make module cards slightly wider on desktop */
|
||||
.htm-card { min-height: 220px; }
|
||||
max-width: 560px; margin: 0 auto;
|
||||
}
|
||||
|
||||
.htm-start-btn {
|
||||
|
||||
@ -25,8 +25,6 @@ const DOTS = [
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.pt-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -66,17 +64,6 @@ const STYLES = `
|
||||
display: flex; flex-direction: column; gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* Desktop / wide layout */
|
||||
@media (min-width: 900px) {
|
||||
.pt-inner { max-width: var(--content-max); padding: 3rem 1.5rem 6rem; }
|
||||
.pt-stats-row { grid-template-columns: repeat(3, 1fr); }
|
||||
|
||||
.pt-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||
.pt-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.pt-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.pt-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
}
|
||||
|
||||
/* ── Pop-in animation ── */
|
||||
@keyframes ptPopIn {
|
||||
from { opacity:0; transform: scale(0.92) translateY(12px); }
|
||||
|
||||
@ -9,8 +9,6 @@ import { useExamConfigStore } from "../../../stores/useExamConfigStore";
|
||||
const STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800;900&family=Nunito+Sans:wght@400;600&display=swap');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.results-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -74,17 +72,6 @@ const STYLES = `
|
||||
display: flex; flex-direction: column; gap: 1rem;
|
||||
}
|
||||
|
||||
/* Desktop / wide layout */
|
||||
@media (min-width: 900px) {
|
||||
.results-inner { max-width: var(--content-max); padding: 3rem 1.5rem 4rem; }
|
||||
.stats-grid { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.r-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||
.r-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.r-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.r-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.results-header {
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { Navigate, useNavigate } from "react-router-dom";
|
||||
import { BlockMath, InlineMath } from "react-katex";
|
||||
import {
|
||||
Binary,
|
||||
Calculator,
|
||||
@ -17,9 +16,6 @@ import {
|
||||
BookOpen,
|
||||
ZoomIn,
|
||||
ZoomOut,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Highlighter,
|
||||
} from "lucide-react";
|
||||
|
||||
import { api } from "../../../utils/api";
|
||||
@ -89,8 +85,6 @@ const DOTS = [
|
||||
const GLOBAL_STYLES = `
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;600;700&display=swap');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.test-screen {
|
||||
min-height: 100vh;
|
||||
background: ${COLORS.bg};
|
||||
@ -251,115 +245,6 @@ const GLOBAL_STYLES = `
|
||||
/* Incorrect flash */
|
||||
@keyframes tFlashRed { 0%,100%{background:transparent;}50%{background:rgba(239,68,68,0.15);} }
|
||||
.t-flash-red { animation:tFlashRed 0.6s ease; }
|
||||
|
||||
/* Highlighting */
|
||||
.t-highlight {
|
||||
background: rgba(251, 191, 36, 0.42);
|
||||
border-radius: 6px;
|
||||
padding: 0 2px;
|
||||
box-shadow: inset 0 -1px 0 rgba(217, 119, 6, 0.25);
|
||||
}
|
||||
|
||||
/* Desktop / wide tweaks */
|
||||
@media (min-width: 900px) {
|
||||
.t-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 120px); top: -120px; width: 300px; height: 300px; }
|
||||
.t-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 20px); bottom: -80px; width: 220px; height: 220px; }
|
||||
.t-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 40px); top: 10%; width: 260px; height: 260px; }
|
||||
.t-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 10px); bottom: 6%; width: 180px; height: 180px; }
|
||||
|
||||
/* Desktop split layout */
|
||||
.t-desktop-shell {
|
||||
max-width: var(--content-max);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.t-split-layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.t-split-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.t-split-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.t-split-divider {
|
||||
position: relative;
|
||||
width: 10px;
|
||||
cursor: col-resize;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.t-split-divider-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 3px;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 999px;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
.t-split-divider-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid #e5e7eb;
|
||||
background: white;
|
||||
box-shadow: 0 4px 12px rgba(15,23,42,0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-split-divider-dots {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(to bottom, #c4b5fd, #a855f7);
|
||||
}
|
||||
.t-split-divider:hover .t-split-divider-bar {
|
||||
background: #c4b5fd;
|
||||
}
|
||||
.t-split-divider:hover .t-split-divider-handle {
|
||||
border-color: #c4b5fd;
|
||||
box-shadow: 0 6px 18px rgba(129,140,248,0.3);
|
||||
}
|
||||
|
||||
/* Directions button (desktop only) */
|
||||
.t-directions-btn {
|
||||
font-weight: 900;
|
||||
font-size: 0.78rem;
|
||||
padding: 0.35rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
border: 2.5px solid ${COLORS.border};
|
||||
background: white;
|
||||
color: ${COLORS.text};
|
||||
box-shadow: 0 3px 10px rgba(0,0,0,0.06);
|
||||
}
|
||||
.t-directions-btn:hover {
|
||||
border-color: ${COLORS.borderPurple};
|
||||
background: #fdf4ff;
|
||||
box-shadow: 0 6px 14px rgba(0,0,0,0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.t-directions-btn.active {
|
||||
background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
|
||||
border-color: ${COLORS.primaryDark};
|
||||
color: white;
|
||||
box-shadow: 0 4px 0 ${COLORS.primaryDark}, 0 8px 18px rgba(168,85,247,0.28);
|
||||
}
|
||||
.t-directions-btn.active:hover {
|
||||
box-shadow: 0 6px 0 ${COLORS.primaryDark}, 0 12px 22px rgba(168,85,247,0.32);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// ─── Confetti ─────────────────────────────────────────────────────────────────
|
||||
@ -384,9 +269,6 @@ interface IncorrectEntry {
|
||||
originalIndex: number;
|
||||
}
|
||||
|
||||
type HighlightRange = { start: number; end: number };
|
||||
type HighlightsByField = Record<string, HighlightRange[]>;
|
||||
|
||||
const Confetti = ({ active }: { active: boolean }) => {
|
||||
const [particles, setParticles] = useState<ConfettiParticle[]>([]);
|
||||
useEffect(() => {
|
||||
@ -745,19 +627,6 @@ export const Test = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [feedback, setFeedback] = useState<FeedbackState>(null);
|
||||
const [showConfetti, setShowConfetti] = useState(false);
|
||||
const [showDirections, setShowDirections] = useState(false);
|
||||
const [timerVisible, setTimerVisible] = useState(true);
|
||||
const [leftColumnWidth, setLeftColumnWidth] = useState(350); // desktop only (re-centered on mount)
|
||||
const dragRef = useRef<{ startX: number; startWidth: number } | null>(null);
|
||||
const [isDraggingDivider, setIsDraggingDivider] = useState(false);
|
||||
const userAdjustedSplitRef = useRef(false);
|
||||
const desktopShellRef = useRef<HTMLDivElement | null>(null);
|
||||
const [isMdUp, setIsMdUp] = useState(false);
|
||||
const HIGHLIGHTS_STORAGE_KEY = "edbridge_highlights_v1";
|
||||
const [highlightMode, setHighlightMode] = useState(false);
|
||||
const [highlightsByField, setHighlightsByField] = useState<HighlightsByField>(
|
||||
{},
|
||||
);
|
||||
const [showIncorrectFlash, setShowIncorrectFlash] = useState(false);
|
||||
|
||||
// ── Retry / targeted state ──────────────────────────────────────────────────
|
||||
@ -786,111 +655,6 @@ export const Test = () => {
|
||||
? currentModule?.questions[retryQueue[retryIndex]?.originalIndex]
|
||||
: currentModule?.questions[questionIndex];
|
||||
|
||||
// close directions when question changes
|
||||
useEffect(() => {
|
||||
setShowDirections(false);
|
||||
}, [currentQuestion?.id]);
|
||||
|
||||
// Handle separator drag (desktop only)
|
||||
const handleSeparatorMouseDown = (e: React.MouseEvent) => {
|
||||
if (e.button !== 0) return;
|
||||
e.preventDefault(); // prevent text selection kick-off
|
||||
userAdjustedSplitRef.current = true;
|
||||
dragRef.current = {
|
||||
startX: e.clientX,
|
||||
startWidth: leftColumnWidth,
|
||||
};
|
||||
setIsDraggingDivider(true);
|
||||
};
|
||||
|
||||
// Center the splitter on initial desktop load (and on resize until user drags)
|
||||
useEffect(() => {
|
||||
const centerSplit = () => {
|
||||
if (userAdjustedSplitRef.current) return;
|
||||
if (typeof window === "undefined") return;
|
||||
if (window.innerWidth < 768) return; // md breakpoint
|
||||
const shell = desktopShellRef.current;
|
||||
if (!shell) return;
|
||||
const w = shell.getBoundingClientRect().width;
|
||||
// Account for divider+margin so the handle lands near visual center.
|
||||
const target = Math.round((w - 40) / 2);
|
||||
setLeftColumnWidth(Math.max(300, Math.min(600, target)));
|
||||
};
|
||||
|
||||
centerSplit();
|
||||
window.addEventListener("resize", centerSplit);
|
||||
return () => window.removeEventListener("resize", centerSplit);
|
||||
}, []);
|
||||
|
||||
// True responsive check (portals ignore parent display:none)
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const mq = window.matchMedia("(min-width: 768px)");
|
||||
const update = () => setIsMdUp(mq.matches);
|
||||
update();
|
||||
mq.addEventListener("change", update);
|
||||
return () => mq.removeEventListener("change", update);
|
||||
}, []);
|
||||
|
||||
// Highlights persistence (desktop/web feature; safe on mobile too)
|
||||
useEffect(() => {
|
||||
try {
|
||||
const raw = localStorage.getItem(HIGHLIGHTS_STORAGE_KEY);
|
||||
if (!raw) return;
|
||||
const parsed = JSON.parse(raw) as HighlightsByField;
|
||||
if (parsed && typeof parsed === "object") setHighlightsByField(parsed);
|
||||
} catch {
|
||||
// ignore corrupted storage
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
HIGHLIGHTS_STORAGE_KEY,
|
||||
JSON.stringify(highlightsByField),
|
||||
);
|
||||
} catch {
|
||||
// ignore quota / private mode issues
|
||||
}
|
||||
}, [HIGHLIGHTS_STORAGE_KEY, highlightsByField]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!dragRef.current) return;
|
||||
const delta = e.clientX - dragRef.current.startX;
|
||||
const newWidth = Math.max(
|
||||
300,
|
||||
Math.min(600, dragRef.current.startWidth + delta),
|
||||
);
|
||||
setLeftColumnWidth(newWidth);
|
||||
};
|
||||
const handleMouseUp = () => {
|
||||
dragRef.current = null;
|
||||
setIsDraggingDivider(false);
|
||||
};
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Prevent text selection while dragging divider
|
||||
useEffect(() => {
|
||||
if (!isDraggingDivider) return;
|
||||
const prevUserSelect = document.body.style.userSelect;
|
||||
const prevCursor = document.body.style.cursor;
|
||||
document.body.style.userSelect = "none";
|
||||
document.body.style.cursor = "col-resize";
|
||||
return () => {
|
||||
document.body.style.userSelect = prevUserSelect;
|
||||
document.body.style.cursor = prevCursor;
|
||||
};
|
||||
}, [isDraggingDivider]);
|
||||
|
||||
const currentAnswer = currentQuestion
|
||||
? (answers[currentQuestion.id] ?? "")
|
||||
: "";
|
||||
@ -1177,163 +941,6 @@ export const Test = () => {
|
||||
const formatTime = (s: number) =>
|
||||
`${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
|
||||
|
||||
const mergeHighlightRanges = (ranges: HighlightRange[]) => {
|
||||
const sorted = ranges
|
||||
.filter((r) => Number.isFinite(r.start) && Number.isFinite(r.end))
|
||||
.map((r) => ({ start: Math.max(0, r.start), end: Math.max(0, r.end) }))
|
||||
.filter((r) => r.end > r.start)
|
||||
.sort((a, b) => a.start - b.start);
|
||||
|
||||
const merged: HighlightRange[] = [];
|
||||
for (const r of sorted) {
|
||||
const last = merged[merged.length - 1];
|
||||
if (!last || r.start > last.end) merged.push(r);
|
||||
else last.end = Math.max(last.end, r.end);
|
||||
}
|
||||
return merged;
|
||||
};
|
||||
|
||||
const addHighlight = (fieldKey: string, start: number, end: number) => {
|
||||
const s = Math.min(start, end);
|
||||
const e = Math.max(start, end);
|
||||
if (!fieldKey || s === e) return;
|
||||
|
||||
setHighlightsByField((prev) => {
|
||||
const cur = prev[fieldKey] ?? [];
|
||||
const next = mergeHighlightRanges([...cur, { start: s, end: e }]);
|
||||
return { ...prev, [fieldKey]: next };
|
||||
});
|
||||
};
|
||||
|
||||
const renderQuestionTextWithHighlights = (
|
||||
text: string,
|
||||
highlights: HighlightRange[],
|
||||
) => {
|
||||
const merged = mergeHighlightRanges(highlights);
|
||||
const parts = text.split(/(\$\$.*?\$\$|\$.*?\$)/g);
|
||||
let pos = 0;
|
||||
let pieceIdx = 0;
|
||||
|
||||
const renderPlain = (plain: string, basePos: number) => {
|
||||
const segStart = basePos;
|
||||
const segEnd = basePos + plain.length;
|
||||
const overlapping = merged.filter(
|
||||
(h) => h.end > segStart && h.start < segEnd,
|
||||
);
|
||||
if (!overlapping.length) {
|
||||
const key = `p-${pieceIdx++}`;
|
||||
return <span key={key}>{plain}</span>;
|
||||
}
|
||||
|
||||
const nodes: React.ReactNode[] = [];
|
||||
let cursor = 0;
|
||||
for (const h of overlapping) {
|
||||
const localStart = Math.max(0, h.start - segStart);
|
||||
const localEnd = Math.min(plain.length, h.end - segStart);
|
||||
if (localStart > cursor) {
|
||||
nodes.push(
|
||||
<span key={`t-${pieceIdx++}`}>
|
||||
{plain.slice(cursor, localStart)}
|
||||
</span>,
|
||||
);
|
||||
}
|
||||
nodes.push(
|
||||
<mark key={`m-${pieceIdx++}`} className="t-highlight">
|
||||
{plain.slice(localStart, localEnd)}
|
||||
</mark>,
|
||||
);
|
||||
cursor = Math.max(cursor, localEnd);
|
||||
}
|
||||
if (cursor < plain.length) {
|
||||
nodes.push(<span key={`t-${pieceIdx++}`}>{plain.slice(cursor)}</span>);
|
||||
}
|
||||
return <span key={`w-${pieceIdx++}`}>{nodes}</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{parts.map((part, index) => {
|
||||
if (part.startsWith("$$")) {
|
||||
const inner = part.slice(2, -2);
|
||||
const len = inner.length;
|
||||
const hasOverlap = merged.some(
|
||||
(h) => h.end > pos && h.start < pos + len,
|
||||
);
|
||||
const node = <BlockMath key={index}>{inner}</BlockMath>;
|
||||
pos += len;
|
||||
if (!hasOverlap) return node;
|
||||
return (
|
||||
<span key={index} className="t-highlight">
|
||||
{node}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (part.startsWith("$")) {
|
||||
const inner = part.slice(1, -1);
|
||||
const len = inner.length;
|
||||
const hasOverlap = merged.some(
|
||||
(h) => h.end > pos && h.start < pos + len,
|
||||
);
|
||||
const node = <InlineMath key={index}>{inner}</InlineMath>;
|
||||
pos += len;
|
||||
if (!hasOverlap) return node;
|
||||
return (
|
||||
<span key={index} className="t-highlight">
|
||||
{node}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
const base = pos;
|
||||
pos += part.length;
|
||||
return <span key={index}>{renderPlain(part, base)}</span>;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const HighlightableRichText = ({
|
||||
fieldKey,
|
||||
text,
|
||||
className,
|
||||
}: {
|
||||
fieldKey: string;
|
||||
text: string;
|
||||
className?: string;
|
||||
}) => {
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const highlights = highlightsByField[fieldKey] ?? [];
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={rootRef}
|
||||
className={className}
|
||||
onMouseUp={() => {
|
||||
if (!highlightMode) return;
|
||||
const root = rootRef.current;
|
||||
if (!root) return;
|
||||
const sel = window.getSelection();
|
||||
if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
|
||||
const range = sel.getRangeAt(0);
|
||||
if (
|
||||
!root.contains(range.startContainer) ||
|
||||
!root.contains(range.endContainer)
|
||||
)
|
||||
return;
|
||||
const selected = range.toString();
|
||||
if (!selected.trim()) return;
|
||||
|
||||
const pre = document.createRange();
|
||||
pre.selectNodeContents(root);
|
||||
pre.setEnd(range.startContainer, range.startOffset);
|
||||
const start = pre.toString().length;
|
||||
addHighlight(fieldKey, start, start + selected.length);
|
||||
}}
|
||||
>
|
||||
{renderQuestionTextWithHighlights(text, highlights)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ── Render helpers ───────────────────────────────────────────────────────────
|
||||
const renderOptions = (question?: Question) => {
|
||||
if (!question?.options?.length) return null;
|
||||
@ -1491,14 +1098,14 @@ export const Test = () => {
|
||||
key={i}
|
||||
className="flex items-center gap-4 p-4 bg-gray-50 rounded-2xl border-2 border-gray-100"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center shrink-0">
|
||||
<div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
|
||||
<Check size={20} className="text-purple-600" />
|
||||
</div>
|
||||
<span className="font-bold text-gray-700">{text}</span>
|
||||
</div>
|
||||
))}
|
||||
{isTargeted && (
|
||||
<div className="flex items-center gap-4 p-4 bg-linear-to-r from-purple-50 to-orange-50 rounded-2xl border-2 border-purple-200">
|
||||
<div className="flex items-center gap-4 p-4 bg-gradient-to-r from-purple-50 to-orange-50 rounded-2xl border-2 border-purple-200">
|
||||
<span className="text-3xl">🎯</span>
|
||||
<div>
|
||||
<p className="font-bold text-purple-800">Targeted Mode</p>
|
||||
@ -1554,104 +1161,26 @@ export const Test = () => {
|
||||
<header
|
||||
className={`fixed left-0 right-0 bg-white/95 backdrop-blur-sm border-b-2 border-purple-100 px-4 pt-6 pb-4 z-20 ${retryMode ? "top-10" : "top-0"}`}
|
||||
>
|
||||
<div className="mx-auto max-w-2xl md:max-w-(--content-max)">
|
||||
{/* Mobile header (unchanged) */}
|
||||
<div className="md:hidden">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`t-q-badge ${isCurrentMarked ? "reviewing" : ""}`}
|
||||
>
|
||||
{isCurrentMarked ? "🔖 " : ""}Q
|
||||
{retryMode ? retryIndex + 1 : questionIndex + 1}
|
||||
</span>
|
||||
<span className="text-sm font-bold text-gray-400">
|
||||
of {currentModule?.questions.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="t-timer">
|
||||
{timerVisible
|
||||
? `${Math.floor(time / 60)}:${String(time % 60).padStart(2, "0")}`
|
||||
: "--:--"}
|
||||
</div>
|
||||
<button
|
||||
className="mt-1 text-xs text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setTimerVisible((v) => !v)}
|
||||
>
|
||||
{timerVisible ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-center font-bold">
|
||||
{currentModule?.module_title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Desktop header (web only) */}
|
||||
<div className="hidden md:flex items-start justify-between gap-6 relative">
|
||||
{/* Left: section/module + directions */}
|
||||
<div className="flex flex-col">
|
||||
<div className="text-sm font-semibold text-gray-700">
|
||||
{currentQuestion?.section || ""}
|
||||
</div>
|
||||
<div className="text-base font-bold text-gray-700">
|
||||
{currentModule?.module_title}
|
||||
</div>
|
||||
<button
|
||||
className={`mt-2 t-btn-3d t-directions-btn ${showDirections ? "active" : ""}`}
|
||||
onClick={() => setShowDirections((v) => !v)}
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span
|
||||
className={`t-q-badge ${isCurrentMarked ? "reviewing" : ""}`}
|
||||
>
|
||||
Directions
|
||||
</button>
|
||||
{isCurrentMarked ? "🔖 " : ""}Q
|
||||
{retryMode ? retryIndex + 1 : questionIndex + 1}
|
||||
</span>
|
||||
<span className="text-sm font-bold text-gray-400">
|
||||
of {currentModule?.questions.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Middle: time + hide + question number (perfectly centered) */}
|
||||
<div className="flex flex-col items-center absolute left-1/2 -translate-x-1/2 top-0">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="t-timer">
|
||||
{timerVisible
|
||||
? `${Math.floor(time / 60)}:${String(time % 60).padStart(2, "0")}`
|
||||
: "--:--"}
|
||||
</div>
|
||||
<button
|
||||
className="mt-1 text-xs text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setTimerVisible((v) => !v)}
|
||||
>
|
||||
{timerVisible ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className="mt-2 flex items-center gap-2 cursor-pointer"
|
||||
onClick={() => setShowNavigator(true)}
|
||||
>
|
||||
<span
|
||||
className={`t-q-badge ${isCurrentMarked ? "reviewing" : ""}`}
|
||||
>
|
||||
{isCurrentMarked ? "🔖 " : ""}Q
|
||||
{retryMode ? retryIndex + 1 : questionIndex + 1}
|
||||
</span>
|
||||
<span className="text-sm font-bold text-gray-400">
|
||||
of {currentModule?.questions.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: highlights */}
|
||||
<div className="flex items-start">
|
||||
<button
|
||||
onClick={() => setHighlightMode((v) => !v)}
|
||||
className={`t-btn-3d px-5 py-3 flex items-center gap-2 ${
|
||||
highlightMode ? "t-btn-primary" : "t-btn-outline"
|
||||
}`}
|
||||
title="Highlights & Notes"
|
||||
>
|
||||
<Highlighter size={18} />
|
||||
<span className="font-black">Highlights & Notes</span>
|
||||
</button>
|
||||
<div className="t-timer">
|
||||
{Math.floor(time / 60)}:{String(time % 60).padStart(2, "0")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-center font-bold text-gray-700">
|
||||
{currentModule?.module_title}
|
||||
</h1>
|
||||
{isTargeted && retryMode && (
|
||||
<p className="text-center text-orange-500 font-bold text-sm mt-2">
|
||||
🔥 Reviewing incorrect answers — get them right to finish!
|
||||
@ -1662,108 +1191,23 @@ export const Test = () => {
|
||||
|
||||
{/* Question content */}
|
||||
<section
|
||||
className={`flex-1 px-4 ${isMCQ ? "pb-110" : "pb-32"} ${retryMode ? "pt-36 md:pt-52" : "pt-28 md:pt-44"}`}
|
||||
className={`flex-1 px-4 ${isMCQ ? "pb-110" : "pb-32"} ${retryMode ? "pt-36" : "pt-28"}`}
|
||||
>
|
||||
{/* Mobile layout (unchanged) */}
|
||||
<div className="block md:hidden">
|
||||
<div className="max-w-2xl mx-auto pt-4">
|
||||
<div className="space-y-6">
|
||||
{showDirections ? (
|
||||
<div className="t-card p-6 flex-1">
|
||||
<p className="font-semibold text-gray-700 leading-relaxed">
|
||||
{renderQuestionText(currentQuestion?.explanation || "")}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentQuestion?.context && (
|
||||
<div className="t-card p-6">
|
||||
<p className="font-semibold text-gray-700 leading-relaxed">
|
||||
{renderQuestionText(currentQuestion.context)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="t-card t-card-purple p-6">
|
||||
<p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
|
||||
{currentQuestion?.text &&
|
||||
renderQuestionText(currentQuestion.text)}
|
||||
</p>
|
||||
</div>
|
||||
{!isMCQ && renderShortAnswer(currentQuestion)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop layout with draggable separator */}
|
||||
<div className="hidden md:block">
|
||||
<div
|
||||
ref={desktopShellRef}
|
||||
className="t-desktop-shell pt-8"
|
||||
style={{ paddingBottom: 160 }}
|
||||
>
|
||||
<div className="t-split-layout">
|
||||
{/* Left column: passage / directions */}
|
||||
<div
|
||||
className="t-split-left"
|
||||
style={{
|
||||
width: leftColumnWidth,
|
||||
minWidth: 300,
|
||||
maxWidth: 600,
|
||||
}}
|
||||
>
|
||||
{showDirections ? (
|
||||
<div className="t-card p-6 flex-1">
|
||||
<HighlightableRichText
|
||||
fieldKey={`${currentQuestion?.id ?? "unknown"}:explanation`}
|
||||
text={currentQuestion?.explanation || ""}
|
||||
className="font-semibold text-gray-700 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentQuestion?.context && (
|
||||
<div className="t-card p-6">
|
||||
<HighlightableRichText
|
||||
fieldKey={`${currentQuestion?.id ?? "unknown"}:context`}
|
||||
text={currentQuestion.context}
|
||||
className="font-semibold text-gray-700 leading-relaxed"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Draggable divider */}
|
||||
<div
|
||||
className="t-split-divider mx-3"
|
||||
onMouseDown={handleSeparatorMouseDown}
|
||||
onDragStart={(e) => e.preventDefault()}
|
||||
>
|
||||
<div className="t-split-divider-bar" />
|
||||
<div className="t-split-divider-handle">
|
||||
<div className="t-split-divider-dots" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right column: question + options/answer */}
|
||||
<div className="t-split-right flex-1">
|
||||
<div className="t-card t-card-purple p-6 mt-4">
|
||||
{currentQuestion?.text && (
|
||||
<HighlightableRichText
|
||||
fieldKey={`${currentQuestion.id}:text`}
|
||||
text={currentQuestion.text}
|
||||
className="font-bold text-lg text-[#1e1b4b] leading-relaxed"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!isMCQ && renderShortAnswer(currentQuestion)}
|
||||
{isMCQ && renderOptions(currentQuestion)}
|
||||
</div>
|
||||
<div className="max-w-2xl mx-auto space-y-6 pt-4">
|
||||
{currentQuestion?.context && (
|
||||
<div className="t-card p-6">
|
||||
<p className="font-semibold text-gray-700 leading-relaxed">
|
||||
{renderQuestionText(currentQuestion.context)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="t-card t-card-purple p-6">
|
||||
<p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
|
||||
{currentQuestion?.text &&
|
||||
renderQuestionText(currentQuestion.text)}
|
||||
</p>
|
||||
</div>
|
||||
{!isMCQ && renderShortAnswer(currentQuestion)}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@ -1773,25 +1217,23 @@ export const Test = () => {
|
||||
className="fixed bottom-0 left-0 right-0 bg-white border-t-2 border-gray-100 py-4 px-4"
|
||||
style={{ zIndex: 20 }}
|
||||
>
|
||||
<div className="mx-auto max-w-2xl md:max-w-(--content-max) flex items-center justify-between gap-3">
|
||||
<div className="max-w-2xl mx-auto flex items-center justify-between gap-3">
|
||||
{/* Back button (non-targeted) */}
|
||||
{!isTargeted && (
|
||||
<button
|
||||
disabled={isFirstQuestion}
|
||||
onClick={prevQuestion}
|
||||
className="t-btn-3d t-btn-outline px-5 py-3 disabled:opacity-40 flex items-center gap-2"
|
||||
className="t-btn-3d t-btn-outline px-5 py-3 disabled:opacity-40"
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
<span className="hidden md:inline font-black">Previous</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Menu */}
|
||||
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="t-btn-3d t-btn-outline px-5 py-3 flex items-center gap-2">
|
||||
<button className="t-btn-3d t-btn-outline px-5 py-3">
|
||||
<Menu size={18} />
|
||||
<span className="hidden md:inline font-black">Menu</span>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="rounded-2xl border-2 border-gray-100 p-2">
|
||||
@ -1872,46 +1314,19 @@ export const Test = () => {
|
||||
|
||||
{/* ── Mark for Review button (non-targeted) ── */}
|
||||
{!isTargeted && (
|
||||
<>
|
||||
{/* Mobile: keep existing icon-only button */}
|
||||
{!isMdUp ? (
|
||||
<button
|
||||
className={`t-bookmark-btn ${isCurrentMarked ? "marked" : ""}`}
|
||||
onClick={toggleMark}
|
||||
title={
|
||||
isCurrentMarked ? "Remove review mark" : "Mark for review"
|
||||
}
|
||||
>
|
||||
{isCurrentMarked ? (
|
||||
<BookMarked size={18} color="white" />
|
||||
) : (
|
||||
<Bookmark size={18} color="#9ca3af" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
className={`t-bookmark-btn ${isCurrentMarked ? "marked" : ""}`}
|
||||
onClick={toggleMark}
|
||||
title={
|
||||
isCurrentMarked ? "Remove review mark" : "Mark for review"
|
||||
}
|
||||
>
|
||||
{isCurrentMarked ? (
|
||||
<BookMarked size={18} color="white" />
|
||||
) : (
|
||||
/* Desktop/web: icon + text */
|
||||
<button
|
||||
onClick={toggleMark}
|
||||
className={`t-btn-3d px-5 py-3 flex items-center gap-2 ${
|
||||
isCurrentMarked ? "t-btn-primary" : "t-btn-outline"
|
||||
}`}
|
||||
title={
|
||||
isCurrentMarked ? "Remove review mark" : "Mark for review"
|
||||
}
|
||||
>
|
||||
{isCurrentMarked ? (
|
||||
<BookMarked size={18} color="white" />
|
||||
) : (
|
||||
<Bookmark size={18} color="#9ca3af" />
|
||||
)}
|
||||
<span className="font-black">
|
||||
{isCurrentMarked
|
||||
? "Marked for review"
|
||||
: "Mark for review"}
|
||||
</span>
|
||||
</button>
|
||||
<Bookmark size={18} color="#9ca3af" />
|
||||
)}
|
||||
</>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Question navigator dialog */}
|
||||
@ -2069,8 +1484,8 @@ export const Test = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* MCQ Options Drawer (mobile only) */}
|
||||
{isMCQ && !isMdUp && (
|
||||
{/* MCQ Options Drawer */}
|
||||
{isMCQ && (
|
||||
<Drawer.Root
|
||||
modal={false}
|
||||
snapPoints={[0.35, 0.6, 0.95]}
|
||||
|
||||
@ -68,8 +68,6 @@ const getSectionMeta = (section?: string) =>
|
||||
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');
|
||||
|
||||
:root { --content-max: 1100px; }
|
||||
|
||||
.tp-screen {
|
||||
min-height: 100vh;
|
||||
background: #fffbf4;
|
||||
@ -353,35 +351,16 @@ const STYLES = `
|
||||
|
||||
/* ── Bottom CTA bar ── */
|
||||
.tp-cta-bar {
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
position: fixed; bottom: 96px; left: 0; right: 0; z-index: 10;
|
||||
padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom));
|
||||
background: rgba(255, 251, 244, 0.9);
|
||||
background: rgba(255,251,244,0.9);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-top: 2px solid #f3f4f6;
|
||||
}
|
||||
.tp-cta-inner {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.tp-inner { max-width: var(--content-max); padding: 3rem 1.5rem 10rem; }
|
||||
.tp-topic-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
|
||||
.tp-cta-bar { left: var(--sidebar-width); right: 0; }
|
||||
|
||||
/* Align decorative blobs relative to the centered content container */
|
||||
.tp-blob-3 { right: calc((100vw - var(--content-max)) / 2 - 48px); }
|
||||
.tp-blob-1 { left: calc((100vw - var(--content-max)) / 2 - 56px); }
|
||||
.tp-blob-2 { left: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
.tp-blob-4 { right: calc((100vw - var(--content-max)) / 2 + 12px); }
|
||||
max-width: 560px; margin: 0 auto;
|
||||
display: flex; gap: 0.75rem; align-items: center;
|
||||
}
|
||||
|
||||
/* Next / Start button */
|
||||
|
||||
Reference in New Issue
Block a user