[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68a0670542fc819195aeacc8eaad6b67","versionInt","title","School Lectures & Notes Portal (class 11) — React Single‑file App","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Search, PlayCircle, BookOpen, Plus, Trash2, CheckCircle2, Sun, Moon, Share2, Link2 } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from \"@/components/ui/dropdown-menu\";\nimport { Badge } from \"@/components/ui/badge\";\n\n// ---------------------------\n// Helper utils\n// ---------------------------\nconst STORAGE_KEY = \"class11_portal_data_v1\";\nconst THEME_KEY = \"class11_portal_theme\";\n\nconst defaultSubjects = [\n { id: \"phy\", name: \"Physics\", color: \"from-sky-400 to-blue-600\" },\n { id: \"chem\", name: \"Chemistry\", color: \"from-rose-400 to-pink-600\" },\n { id: \"math\", name: \"Mathematics\", color: \"from-emerald-400 to-teal-600\" },\n { id: \"bio\", name: \"Biology\", color: \"from-lime-400 to-green-600\" },\n { id: \"eng\", name: \"English\", color: \"from-amber-400 to-orange-600\" },\n { id: \"cs\", name: \"Computer Science\", color: \"from-fuchsia-400 to-purple-600\" },\n];\n\nconst demoData = {\n subjects: defaultSubjects,\n videos: [\n {\n id: cryptoRandomId(),\n subject: \"phy\",\n title: \"Units & Measurements (Lecture 1)\",\n url: \"https://www.youtube.com/watch?v=YpJXK9d1FfA\",\n description: \"Base & derived quantities, SI units, significant figures.\",\n date: \"2025-08-10\",\n tags: [\"SI\", \"significant figures\"],\n },\n {\n id: cryptoRandomId(),\n subject: \"chem\",\n title: \"Mole Concept Crash Course\",\n url: \"https://www.youtube.com/watch?v=GQrt1g0q6jA\",\n description: \"Avogadro number, molar mass, limiting reagent quick tricks.\",\n date: \"2025-08-12\",\n tags: [\"mole\", \"stoichiometry\"],\n },\n ],\n notes: [\n {\n id: cryptoRandomId(),\n subject: \"math\",\n title: \"Sets & Relations – Summary PDF\",\n link: \"https://example.com/notes/sets-relations.pdf\",\n description: \"One-page recap with examples & solved problems.\",\n date: \"2025-08-05\",\n },\n ],\n watched: {}, // { videoId: true }\n};\n\nfunction getStoredData() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return demoData;\n const parsed = JSON.parse(raw);\n return { ...demoData, ...parsed };\n } catch {\n return demoData;\n }\n}\n\nfunction saveData(data) {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(data));\n}\n\nfunction cryptoRandomId() {\n // reasonably unique id for client-side usage\n const bytes = crypto.getRandomValues(new Uint8Array(8));\n return Array.from(bytes, (b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nfunction youtubeIdFromUrl(url) {\n try {\n const u = new URL(url);\n if (u.hostname.includes(\"youtu.be\")) {\n return u.pathname.replace(\"/\", \"\");\n }\n if (u.searchParams.get(\"v\")) return u.searchParams.get(\"v\");\n // handle embed links\n const parts = u.pathname.split(\"/\").filter(Boolean);\n const idx = parts.indexOf(\"embed\");\n if (idx >= 0 && parts[idx + 1]) return parts[idx + 1];\n } catch {}\n // if just an id was pasted\n if (/^[a-zA-Z0-9_-]{11}$/.test(url)) return url;\n return null;\n}\n\nfunction formatDate(iso) {\n if (!iso) return \"\";\n try {\n return new Date(iso).toLocaleDateString();\n } catch {\n return iso;\n }\n}\n\nfunction SubjectPill({ subjectId, subjects }) {\n const s = subjects.find((x) => x.id === subjectId);\n return (\n \n \n {s?.name || subjectId}\n \n );\n}\n\n// ---------------------------\n// Main App\n// ---------------------------\nexport default function SchoolLecturesPortal() {\n const [data, setData] = useState(getStoredData());\n const [query, setQuery] = useState(\"\");\n const [activeTab, setActiveTab] = useState(\"dashboard\");\n const [theme, setTheme] = useState(() => localStorage.getItem(THEME_KEY) || \"light\");\n\n useEffect(() => {\n document.documentElement.classList.toggle(\"dark\", theme === \"dark\");\n localStorage.setItem(THEME_KEY, theme);\n }, [theme]);\n\n useEffect(() => saveData(data), [data]);\n\n const filteredVideos = useMemo(() => {\n const q = query.toLowerCase();\n return data.videos.filter(v =>\n v.title.toLowerCase().includes(q) ||\n v.description?.toLowerCase().includes(q) ||\n v.tags?.some(t => t.toLowerCase().includes(q))\n );\n }, [query, data.videos]);\n\n const filteredNotes = useMemo(() => {\n const q = query.toLowerCase();\n return data.notes.filter(n =>\n n.title.toLowerCase().includes(q) ||\n n.description?.toLowerCase().includes(q)\n );\n }, [query, data.notes]);\n\n const progressBySubject = useMemo(() => {\n const map = {};\n data.subjects.forEach(s => { map[s.id] = { total: 0, watched: 0 }; });\n data.videos.forEach(v => {\n if (!map[v.subject]) map[v.subject] = { total: 0, watched: 0 };\n map[v.subject].total += 1;\n if (data.watched[v.id]) map[v.subject].watched += 1;\n });\n return map;\n }, [data]);\n\n function toggleWatched(id) {\n setData(prev => ({ ...prev, watched: { ...prev.watched, [id]: !prev.watched[id] } }));\n }\n\n function addVideo(newVideo) {\n setData(prev => ({ ...prev, videos: [{ ...newVideo, id: cryptoRandomId() }, ...prev.videos] }));\n }\n\n function addNote(newNote) {\n setData(prev => ({ ...prev, notes: [{ ...newNote, id: cryptoRandomId() }, ...prev.notes] }));\n }\n\n function removeVideo(id) {\n setData(prev => ({ ...prev, videos: prev.videos.filter(v => v.id !== id) }));\n }\n\n function removeNote(id) {\n setData(prev => ({ ...prev, notes: prev.notes.filter(n => n.id !== id) }));\n }\n\n function shareVideoLink(video) {\n const url = new URL(window.location.href);\n url.searchParams.set(\"focus\", video.id);\n navigator.clipboard.writeText(url.toString());\n alert(\"Share link copied to clipboard!\");\n }\n\n const focusId = useMemo(() => new URLSearchParams(window.location.search).get(\"focus\"), []);\n\n return (\n

Class 11 — Lectures & Notes

\n School Portal\n

\n \n setQuery(e.target.value)}\n placeholder=\"Search lectures, notes, tags…\"\n className=\"pl-8 w-64 md:w-96\"\n />\n

\n \n

\n \n \n Dashboard\n Lectures\n Notes\n Subjects\n Admin\n \n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n\n \n

\n );\n}\n\n// ---------------------------\n// Dashboard\n// ---------------------------\nfunction Dashboard({ data, progressBySubject, onSetTab, focusId }) {\n const focusedVideo = data.videos.find(v => v.id === focusId);\n return (\n

\n {focusedVideo && (\n \n \n

\n \n

{focusedVideo.title}

\n \n •\n {formatDate(focusedVideo.date)}\n

{focusedVideo.description}

\n \n

\n \n \n )}\n\n

Your Subjects

\n \n

\n\n

Recent Lectures

\n \n

\n {data.videos.slice(0, 6).map((v) => (\n \n ))}\n

\n\n

Latest Notes

\n \n

\n {data.notes.slice(0, 6).map((n) => (\n \n ))}\n

\n );\n}\n\n// ---------------------------\n// Lectures List\n// ---------------------------\nfunction LecturesList({ data, videos, onWatched, onRemove, onShare }) {\n const [selected, setSelected] = useState(null);\n return (\n

\n \n {videos.map((v) => (\n \n \n

\n \n

{v.title}

\n \n \n \n \n \n Share\n onShare(v)}>Copy link\n \n \n

\n \n · {formatDate(v.date)}\n {v.tags?.map((t) => (\n #{t}\n ))}\n

{v.description}

\n \n \n \n

\n \n \n ))}\n \n

\n\n

\n \n \n

Quick Tips

Upload your lecture to YouTube (Unlisted or Public).
Copy the video link and add it from the Admin tab.
Use tags like \"kinematics\", \"mole\" for better search.
Students can mark videos as Watched to track progress.

\n \n \n

\n\n \n

\n );\n}\n\n// ---------------------------\n// Notes\n// ---------------------------\nfunction NotesList({ data, notes, onRemove }) {\n return (\n

\n {notes.map((n) => (\n onRemove(n.id)} />\n ))}\n

\n );\n}\n\nfunction NoteCard({ n, subjects, onRemove }) {\n return (\n \n \n

{n.title}

\n {onRemove && (\n \n )}\n

\n \n · {formatDate(n.date)}\n

{n.description}

\n \n Open Note\n \n \n \n );\n}\n\n// ---------------------------\n// Subjects Grid\n// ---------------------------\nfunction SubjectsGrid({ subjects, data, progressBySubject, compact=false }) {\n return (\n

\n {subjects.map((s) => {\n const p = progressBySubject[s.id] || { total: 0, watched: 0 };\n const pct = p.total ? Math.round((p.watched / p.total) * 100) : 0;\n return (\n \n

\n \n

{s.name}

\n {p.watched}/{p.total} watched\n

\n \n \n );\n })}\n

\n );\n}\n\n// ---------------------------\n// Admin Panel\n// ---------------------------\nfunction AdminPanel({ subjects, onAddVideo, onAddNote }) {\n const [video, setVideo] = useState({ subject: subjects[0]?.id || \"\", title: \"\", url: \"\", description: \"\", date: new Date().toISOString().slice(0,10), tags: \"\" });\n const [note, setNote] = useState({ subject: subjects[0]?.id || \"\", title: \"\", link: \"\", description: \"\", date: new Date().toISOString().slice(0,10) });\n\n function handleAddVideo(e) {\n e.preventDefault();\n const id = youtubeIdFromUrl(video.url);\n if (!id) return alert(\"Please paste a valid YouTube link or ID.\");\n const cleanUrl = `https://www.youtube.com/watch?v=${id}`;\n const tags = video.tags.split(\",\").map(t => t.trim()).filter(Boolean);\n onAddVideo({ ...video, url: cleanUrl, tags });\n setVideo(v => ({ ...v, title: \"\", url: \"\", description: \"\", tags: \"\" }));\n }\n\n function handleAddNote(e) {\n e.preventDefault();\n if (!note.link) return alert(\"Please add a note link (PDF/Drive/Doc). \");\n onAddNote(note);\n setNote(n => ({ ...n, title: \"\", link: \"\", description: \"\" }));\n }\n\n return (\n

\n \n \n

Add Lecture (YouTube)

\n Subject\n \n setVideo({ ...video, title: e.target.value })} />\n setVideo({ ...video, url: e.target.value })} />\n

setVideo({ ...video, description: e.target.value })} />\n            <Input type=\"date\" value={video.date} onChange={(e) => setVideo({ ...video, date: e.target.value })} />\n            <Input placeholder=\"Tags (comma-separated)\" value={video.tags} onChange={(e) => setVideo({ ...video, tags: e.target.value })} />\n            <div className=\"flex gap-2\">\n              <Button type=\"submit\">Add Lecture</Button>\n              <Button type=\"button\" variant=\"outline\" onClick={() => setVideo({ subject: subjects[0]?.id || \"\", title: \"\", url: \"\", description: \"\", date: new Date().toISOString().slice(0,10), tags: \"\" })}>Reset</Button>\n            </div>\n            <p className=\"text-xs text-slate-500\">Tip: Upload to YouTube as <b>Unlisted</b> if you want only students with the link to watch.</p>\n          </form>\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardContent className=\"p-4 space-y-3\">\n          <h3 className=\"font-semibold text-lg flex items-center gap-2\"><Plus className=\"h-4 w-4\"/> Add Note (PDF/Drive link)</h3>\n          <form onSubmit={handleAddNote} className=\"space-y-3\">\n            <label className=\"block text-sm\">Subject</label>\n            <select className=\"w-full rounded-md border border-slate-300 bg-transparent p-2 dark:border-slate-700\" value={note.subject} onChange={(e) => setNote({ ...note, subject: e.target.value })}>\n              {subjects.map((s) => (\n                <option key={s.id} value={s.id}>{s.name}</option>\n              ))}\n            </select>\n            <Input placeholder=\"Note title\" value={note.title} onChange={(e) => setNote({ ...note, title: e.target.value })} />\n            <Input placeholder=\"Link to PDF/Doc/Drive\" value={note.link} onChange={(e) => setNote({ ...note, link: e.target.value })} />\n            <Textarea placeholder=\"Short description\" value={note.description} onChange={(e) => setNote({ ...note, description: e.target.value })} />\n            <Input type=\"date\" value={note.date} onChange={(e) => setNote({ ...note, date: e.target.value })} />\n            <div className=\"flex gap-2\">\n              <Button type=\"submit\">Add Note</Button>\n              <Button type=\"button\" variant=\"outline\" onClick={() => setNote({ subject: subjects[0]?.id || \"\", title: \"\", link: \"\", description: \"\", date: new Date().toISOString().slice(0,10) })}>Reset</Button>\n            </div>\n            <p className=\"text-xs text-slate-500\">Tip: Store PDFs on Google Drive with link sharing set to <b>Anyone with the link</b>.</p>\n          </form>\n        </CardContent>\n      </Card>\n\n      <Card className=\"md:col-span-2\">\n        <CardContent className=\"p-4\">\n          <h3 className=\"font-semibold mb-2\">How this works</h3>\n          <ol className=\"list-decimal pl-5 space-y-1 text-sm text-slate-700 dark:text-slate-300\">\n            <li>Upload recorded lectures to <b>YouTube</b>.</li>\n            <li>Copy the URL and paste it into <b>Add Lecture</b> above (the app extracts the video ID).</li>\n            <li>Add note links (PDF/Drive/Docs) for handouts and assignments.</li>\n            <li>Share the site URL with students. They can search, filter, watch, and track progress.</li>\n          </ol>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\n// ---------------------------\n// Lecture Card (used on Dashboard)\n// ---------------------------\nfunction LectureCard({ v, subjects }) {\n  return (\n    <Card className=\"overflow-hidden\">\n      <div className=\"aspect-video\">\n        <YouTubeEmbed url={v.url} title={v.title} />\n      </div>\n      <CardContent className=\"p-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"font-semibold line-clamp-1\">{v.title}</h3>\n          <span className=\"text-xs text-slate-500\">{formatDate(v.date)}</span>\n        </div>\n        <div className=\"mt-1 text-sm text-slate-600 dark:text-slate-400\">\n          <SubjectPill subjectId={v.subject} subjects={subjects} />\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n\n// ---------------------------\n// YouTube Embed\n// ---------------------------\nfunction YouTubeEmbed({ url, title }) {\n  const id = youtubeIdFromUrl(url);\n  if (!id) return (\n    <div className=\"h-full w-full bg-slate-100 dark:bg-slate-800 grid place-items-center text-sm text-slate-500\">Invalid YouTube URL</div>\n  );\n  const src = `https://www.youtube.com/embed/${id}`;\n  return (\n    <div className=\"h-full w-full bg-black/5\">\n      <iframe\n        className=\"h-full w-full\"\n        src={src}\n        title={title || \"YouTube video\"}\n        frameBorder=\"0\"\n        allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n        allowFullScreen\n      />\n    </div>\n  );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","2490877368481721294","traceTime",1780729189039]
</article></body></html>