| | <!DOCTYPE html>
|
| | <html lang="en">
|
| | <head>
|
| | <meta charset="UTF-8" />
|
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
| | <title>Interconnected Subject Explorer</title>
|
| | <script src="https://cdn.tailwindcss.com"></script>
|
| | <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
| | <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
| | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| | <style>
|
| | html.dark { background: #1a2233; }
|
| | ::selection { background: #fbbf24; color: #1a2233; }
|
| | .fade-in { animation: fadeIn .5s; }
|
| | @keyframes fadeIn { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }
|
| | .glass {
|
| | background: rgba(255,255,255,0.82);
|
| | backdrop-filter: blur(7px) saturate(1.2);
|
| | }
|
| | html.dark .glass {
|
| | background: rgba(28,32,46,0.90);
|
| | color: #f1f5f9;
|
| | }
|
| | .scenario-active {
|
| | outline: 3px solid #6366f1;
|
| | box-shadow: 0 2px 24px 0 #6366f140;
|
| | z-index: 10;
|
| | }
|
| | </style>
|
| | </head>
|
| | <body class="bg-slate-100 dark:bg-slate-900">
|
| | <div id="root"></div>
|
| | <script type="text/babel">
|
| | const { useState, useMemo, useEffect, useCallback } = React;
|
| |
|
| | const SUBJECTS = [
|
| | { key: "math", name: "Mathematics", icon: "➗", color: "bg-indigo-500", accent: "from-indigo-400 to-fuchsia-500" },
|
| | { key: "science", name: "Science", icon: "🔬", color: "bg-green-600", accent: "from-green-400 to-cyan-500" },
|
| | { key: "history", name: "History", icon: "📜", color: "bg-yellow-600", accent: "from-yellow-400 to-orange-400" },
|
| | { key: "art", name: "Art", icon: "🎨", color: "bg-pink-500", accent: "from-pink-400 to-rose-400" },
|
| | { key: "geography", name: "Geography", icon: "🗺️", color: "bg-blue-500", accent: "from-blue-400 to-green-300" },
|
| | { key: "cs", name: "Computer Science", icon: "💻", color: "bg-slate-700", accent: "from-slate-600 to-emerald-400" },
|
| | { key: "economics", name: "Economics", icon: "💹", color: "bg-orange-600", accent: "from-orange-400 to-yellow-400" },
|
| | { key: "literature", name: "Literature", icon: "📚", color: "bg-red-500", accent: "from-red-400 to-yellow-300" }
|
| | ];
|
| |
|
| | function darkModeInit() {
|
| | const mql = window.matchMedia("(prefers-color-scheme: dark)");
|
| | if (mql.matches) document.documentElement.classList.add('dark');
|
| | }
|
| | darkModeInit();
|
| |
|
| | function App() {
|
| | const [apiKey, setApiKey] = useState("");
|
| | const [currentSubject, setCurrentSubject] = useState(SUBJECTS[0].key);
|
| | const [aiLoading, setAiLoading] = useState(false);
|
| | const [aiError, setAiError] = useState("");
|
| | const [aiData, setAiData] = useState({});
|
| | const [inputPrompt, setInputPrompt] = useState("");
|
| | const [activeScenario, setActiveScenario] = useState(null);
|
| | const [projectNotes, setProjectNotes] = useState("");
|
| | const [pbLoading, setPbLoading] = useState(false);
|
| | const [pbError, setPbError] = useState("");
|
| | const [pbResult, setPbResult] = useState("");
|
| | // Per-subject "What I'm studying this week"
|
| | const [subjectNotes, setSubjectNotes] = useState({});
|
| |
|
| | const subjectMeta = useMemo(() => SUBJECTS.find(s=>s.key===currentSubject), [currentSubject]);
|
| | const currentSubjectNote = subjectNotes[currentSubject] || "";
|
| |
|
| | // AI request handler (for ideas/scenarios)
|
| | const fetchAIContent = useCallback(async () => {
|
| | if (!apiKey || !apiKey.startsWith("sk-")) { setAiError("Please enter a valid OpenAI API key."); return; }
|
| | setAiLoading(true); setAiError(""); setActiveScenario(null);
|
| | const extraContext = [
|
| | inputPrompt ? inputPrompt : null,
|
| | currentSubjectNote ? `This week, the student is studying: "${currentSubjectNote}" in ${subjectMeta.name}.` : null
|
| | ].filter(Boolean).join(" ");
|
| | const prompt = `
|
| | You are an educational AI agent. For the subject "${subjectMeta.name}", perform the following:
|
| | 1. Generate five engaging, critical-thinking ideas or inquiry questions for students, encouraging them to explore and analyze complex concepts within this subject. Each should be a concise, thought-provoking prompt.
|
| | 2. Propose nine creative real-life scenarios, each showing how "${subjectMeta.name}" connects with at least one other school subject (from: Mathematics, Science, History, Art, Geography, Computer Science, Economics, Literature), and describe a real-world application for each. Clearly specify which subjects are involved.
|
| |
|
| | ${extraContext ? "User context: " + extraContext : ""}
|
| |
|
| | Format the result as valid JSON with two top-level keys:
|
| | - "ideas": array of strings (five items).
|
| | - "scenarios": array of objects, each with:
|
| | - "title": string,
|
| | - "subjects": array of strings (subject names),
|
| | - "application": string (practical real-life connection).
|
| |
|
| | Output ONLY the JSON, no commentary.
|
| | `.trim();
|
| | try {
|
| | const res = await fetch("https://api.openai.com/v1/chat/completions", {
|
| | method: "POST",
|
| | headers: {
|
| | "Content-Type": "application/json",
|
| | Authorization: `Bearer ${apiKey}`
|
| | },
|
| | body: JSON.stringify({
|
| | model: "gpt-4o-mini",
|
| | messages: [
|
| | { role: "system", content: "You are a helpful educational agent. Only return valid JSON, no markdown or commentary." },
|
| | { role: "user", content: prompt }
|
| | ],
|
| | temperature: 0.74,
|
| | max_tokens: 1200
|
| | })
|
| | });
|
| | if (!res.ok) throw new Error(`API error (${res.status})`);
|
| | const data = await res.json();
|
| | const txt = data.choices[0].message.content;
|
| | const start = txt.indexOf("{"), end = txt.lastIndexOf("}");
|
| | const jsonString = (start !== -1 && end !== -1) ? txt.slice(start, end+1) : "";
|
| | const result = JSON.parse(jsonString);
|
| | setAiData(prev => ({...prev, [currentSubject]: result}));
|
| | } catch (e) {
|
| | setAiError("Failed to load AI ideas: " + (e.message || "Unknown error"));
|
| | } finally { setAiLoading(false); }
|
| | }, [apiKey, currentSubject, subjectMeta, inputPrompt, currentSubjectNote]);
|
| |
|
| | useEffect(() => {
|
| | setAiError(""); setActiveScenario(null); setProjectNotes("");
|
| | setPbError(""); setPbResult(""); setPbLoading(false);
|
| | }, [currentSubject]);
|
| |
|
| | useEffect(()=>{
|
| | function toggle(e){
|
| | if(e.ctrlKey && e.key==="k"){
|
| | document.documentElement.classList.toggle("dark");
|
| | e.preventDefault();
|
| | }
|
| | }
|
| | window.addEventListener("keydown", toggle);
|
| | return ()=>window.removeEventListener("keydown",toggle);
|
| | },[]);
|
| |
|
| | // Canvas content for each subject
|
| | const canvasContent = useMemo(() => {
|
| | const d = aiData[currentSubject];
|
| | return (
|
| | <div className="fade-in px-1 sm:px-8 pt-1 pb-4">
|
| | {/* User custom input for the subject */}
|
| | <div className="mb-6">
|
| | <label className="block font-semibold text-indigo-800 dark:text-indigo-200 mb-1">
|
| | What are you studying in {subjectMeta.name} this week?
|
| | </label>
|
| | <input
|
| | type="text"
|
| | className="w-full px-3 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| | placeholder={`E.g., Algebraic fractions, Newton's Laws, Ancient Egypt, Poetry, ...`}
|
| | value={currentSubjectNote}
|
| | onChange={e=>{
|
| | setSubjectNotes(notes => ({
|
| | ...notes,
|
| | [currentSubject]: e.target.value
|
| | }));
|
| | }}
|
| | aria-label={`What are you studying in ${subjectMeta.name} this week?`}
|
| | />
|
| | </div>
|
| | {/* Ideas */}
|
| | {d && (
|
| | <div className="mb-7">
|
| | <h3 className="text-2xl font-semibold mb-2 tracking-tight text-indigo-900 dark:text-indigo-200">
|
| | Ideas to Explore (Critical Thinking)
|
| | </h3>
|
| | <ul className="grid gap-2">
|
| | {d.ideas.map((idea, i) =>
|
| | <li key={i}
|
| | className="rounded-xl px-4 py-2 bg-gradient-to-br from-white via-indigo-50/60 to-indigo-100 dark:from-slate-800 dark:via-slate-700 dark:to-indigo-900/40 shadow-sm border-l-4 border-indigo-400 dark:border-indigo-500">
|
| | {idea}
|
| | </li>
|
| | )}
|
| | </ul>
|
| | </div>
|
| | )}
|
| | {/* Scenarios */}
|
| | {d && (
|
| | <div>
|
| | <h3 className="text-2xl font-semibold mb-2 tracking-tight text-emerald-900 dark:text-emerald-200">
|
| | Interconnected Scenarios (Real-Life Applications)
|
| | </h3>
|
| | <ul className="grid gap-3">
|
| | {d.scenarios.map((sc, i) =>
|
| | <li key={i}
|
| | className={
|
| | "glass rounded-xl px-5 py-4 shadow transition hover:scale-[1.025] cursor-pointer " +
|
| | (activeScenario === i ? "scenario-active" : "")
|
| | }
|
| | onClick={()=>{setActiveScenario(i); setProjectNotes(""); setPbResult(""); setPbError(""); setPbLoading(false);}}
|
| | tabIndex={0}
|
| | aria-label={`Activate scenario ${i+1}: ${sc.title}`}>
|
| | <div className="flex items-center mb-1">
|
| | <span className="font-bold text-lg">{sc.title}</span>
|
| | <span className="ml-3 flex flex-wrap gap-1 text-xs">
|
| | {sc.subjects.map((s,j) =>
|
| | <span key={j}
|
| | className={`inline-block rounded px-2 py-0.5 font-semibold ${{
|
| | Mathematics:"bg-indigo-200 text-indigo-900 dark:bg-indigo-700 dark:text-indigo-100",
|
| | Science:"bg-green-200 text-green-900 dark:bg-green-700 dark:text-green-100",
|
| | History:"bg-yellow-200 text-yellow-900 dark:bg-yellow-700 dark:text-yellow-100",
|
| | Art:"bg-pink-200 text-pink-900 dark:bg-pink-700 dark:text-pink-100",
|
| | Geography:"bg-blue-200 text-blue-900 dark:bg-blue-700 dark:text-blue-100",
|
| | "Computer Science":"bg-slate-300 text-slate-900 dark:bg-slate-700 dark:text-slate-100",
|
| | Economics:"bg-orange-200 text-orange-900 dark:bg-orange-700 dark:text-orange-100",
|
| | Literature:"bg-red-200 text-red-900 dark:bg-red-700 dark:text-red-100"
|
| | }[s]||"bg-slate-200 text-slate-700 dark:bg-slate-600 dark:text-slate-200"}`}>{s}</span>
|
| | )}
|
| | </span>
|
| | </div>
|
| | <div className="pl-1 text-base leading-snug text-slate-800 dark:text-slate-200">{sc.application}</div>
|
| | </li>
|
| | )}
|
| | </ul>
|
| | </div>
|
| | )}
|
| | {!d && (
|
| | <div className="text-lg text-center mt-12 text-slate-500 dark:text-slate-300">
|
| | <div className="animate-pulse">Ask AI for critical thinking ideas and scenarios!</div>
|
| | </div>
|
| | )}
|
| | </div>
|
| | );
|
| | }, [aiData, currentSubject, activeScenario, subjectMeta, subjectNotes, currentSubjectNote]);
|
| |
|
| | // Project-Based Learning section (shows when a scenario is active)
|
| | function ProjectPanel() {
|
| | const d = aiData[currentSubject];
|
| | if (!d || activeScenario==null || !d.scenarios[activeScenario]) return null;
|
| | const sc = d.scenarios[activeScenario];
|
| |
|
| | // Handler for project-based learning AI request
|
| | async function askAIForProject() {
|
| | if (!apiKey || !apiKey.startsWith("sk-")) { setPbError("Please enter a valid OpenAI API key."); return; }
|
| | setPbLoading(true); setPbError(""); setPbResult("");
|
| | const thisWeekNote = subjectNotes[currentSubject] ? `This week, the student is studying: "${subjectNotes[currentSubject]}" in ${subjectMeta.name}.` : "";
|
| | const prompt = `
|
| | A student has chosen the following scenario for a project-based learning activity:
|
| | Title: ${sc.title}
|
| | Subjects Involved: ${sc.subjects.join(", ")}
|
| | Real-Life Application: ${sc.application}
|
| | ${thisWeekNote}
|
| |
|
| | Create a detailed, multi-step project-based learning activity that:
|
| | - Guides the student through a meaningful investigation or creation process related to this scenario.
|
| | - Specifies a driving question, expected outcomes, and assessment ideas.
|
| | - Incorporates collaboration, creativity, real-world research, and presentation or product.
|
| | - Is practical for students in middle or high school.
|
| |
|
| | Format your answer as clear markdown with sections: **Driving Question**, **Project Steps**, **Expected Outcomes**, **Assessment Ideas**.
|
| | `.trim();
|
| | try {
|
| | const res = await fetch("https://api.openai.com/v1/chat/completions", {
|
| | method: "POST",
|
| | headers: {
|
| | "Content-Type": "application/json",
|
| | Authorization: `Bearer ${apiKey}`
|
| | },
|
| | body: JSON.stringify({
|
| | model: "gpt-4o-mini",
|
| | messages: [
|
| | { role: "system", content: "You are an expert in project-based learning. Return clear, structured markdown only." },
|
| | { role: "user", content: prompt }
|
| | ],
|
| | temperature: 0.72,
|
| | max_tokens: 650
|
| | })
|
| | });
|
| | if (!res.ok) throw new Error(`API error (${res.status})`);
|
| | const data = await res.json();
|
| | let answer = data.choices[0].message.content.trim();
|
| | if (answer.startsWith("```")) answer = answer.replace(/^```[a-z]*\s*/,'').replace(/```$/,'');
|
| | setPbResult(answer);
|
| | } catch (e) {
|
| | setPbError("Failed to load project activity: " + (e.message || "Unknown error"));
|
| | } finally { setPbLoading(false); }
|
| | }
|
| |
|
| | return (
|
| | <div className="fade-in mt-8 mb-6 max-w-2xl mx-auto glass p-6 rounded-3xl border border-indigo-300 dark:border-indigo-700 shadow-xl">
|
| | <h3 className="text-2xl font-bold mb-2 text-fuchsia-700 dark:text-fuchsia-200">Project-Based Learning: <span className="text-indigo-900 dark:text-indigo-200">{sc.title}</span></h3>
|
| | <div className="mb-2 text-base font-semibold text-emerald-700 dark:text-emerald-200">
|
| | Subjects Involved:
|
| | <span className="ml-2">{sc.subjects.join(", ")}</span>
|
| | </div>
|
| | <div className="mb-2 text-base">
|
| | <span className="font-semibold text-indigo-700 dark:text-indigo-300">Real-Life Connection:</span> {sc.application}
|
| | </div>
|
| | <div className="mb-4 text-slate-700 dark:text-slate-300">
|
| | <span className="font-semibold">Project Steps & Tips:</span>
|
| | <ol className="list-decimal ml-6 mt-1 space-y-1">
|
| | <li>Define the main question/problem you want to solve, inspired by the scenario.</li>
|
| | <li>Research how the connected subjects apply to the scenario—collect data, examples, or cases.</li>
|
| | <li>Design an experiment, model, creative product, or presentation that integrates concepts from each subject.</li>
|
| | <li>Document your findings with evidence, analysis, and reflections.</li>
|
| | <li>Share your project with peers or your teacher—get feedback and discuss real-world impacts.</li>
|
| | </ol>
|
| | </div>
|
| | <textarea
|
| | className="w-full min-h-[80px] rounded-lg border px-3 py-2 bg-white/90 dark:bg-slate-800 border-indigo-200 dark:border-indigo-500 shadow text-base mb-3"
|
| | placeholder="Use this space to brainstorm ideas, outline your project, or write your project plan..."
|
| | value={projectNotes}
|
| | onChange={e=>setProjectNotes(e.target.value)}
|
| | />
|
| | <div className="flex flex-wrap gap-3 mt-1 mb-3">
|
| | <button
|
| | className="px-4 py-1 rounded-lg font-bold text-white bg-fuchsia-600 hover:bg-fuchsia-700 shadow transition"
|
| | onClick={()=>setProjectNotes("")}
|
| | >Clear Notes</button>
|
| | <button
|
| | className="px-4 py-1 rounded-lg font-bold bg-indigo-200 text-indigo-900 dark:bg-indigo-700 dark:text-indigo-100 shadow"
|
| | onClick={()=>setActiveScenario(null)}
|
| | >Close Project</button>
|
| | <button
|
| | className="px-4 py-1 rounded-lg font-bold bg-emerald-500 text-white hover:bg-emerald-600 shadow transition"
|
| | onClick={askAIForProject}
|
| | disabled={pbLoading}
|
| | aria-label="Ask AI for a detailed project-based learning activity"
|
| | >
|
| | {pbLoading ? <span className="animate-pulse">Thinking...</span> : "Ask AI for a Project Plan"}
|
| | </button>
|
| | </div>
|
| | {pbError && <div className="mb-2 px-3 py-2 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 font-semibold text-center">{pbError}</div>}
|
| | {pbResult && (
|
| | <div className="prose prose-indigo dark:prose-invert max-w-full mt-4 border-t pt-4">
|
| | <MarkdownRenderer markdown={pbResult}/>
|
| | </div>
|
| | )}
|
| | </div>
|
| | );
|
| | }
|
| |
|
| | function MarkdownRenderer({markdown}) {
|
| | let html = markdown
|
| | .replace(/(^|\n)### (.*)/g, '$1<h3>$2</h3>')
|
| | .replace(/(^|\n)## (.*)/g, '$1<h2>$2</h2>')
|
| | .replace(/(^|\n)# (.*)/g, '$1<h1>$2</h1>')
|
| | .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
|
| | .replace(/\*(.*?)\*/g, '<i>$1</i>')
|
| | .replace(/^\s*-\s+(.*)$/gm, '<ul><li>$1</li></ul>')
|
| | .replace(/^\s*\d+\.\s+(.*)$/gm, '<ol><li>$1</li></ol>')
|
| | .replace(/\n{2,}/g, '<br/><br/>');
|
| | html = html.replace(/<\/ul>\s*<ul>/g, '');
|
| | html = html.replace(/<\/ol>\s*<ol>/g, '');
|
| | return <div dangerouslySetInnerHTML={{__html: html}} />;
|
| | }
|
| |
|
| | function SubjectTabs() {
|
| | return (
|
| | <div className="flex flex-wrap gap-2 mb-4 sm:mb-6">
|
| | {SUBJECTS.map(s =>
|
| | <button key={s.key}
|
| | className={
|
| | "group flex items-center px-4 py-2 rounded-2xl shadow-sm border-2 focus:outline-none text-lg font-semibold tracking-tight transition-all duration-150 " +
|
| | (currentSubject===s.key
|
| | ? `${s.color} bg-gradient-to-r ${s.accent} border-transparent text-white scale-105`
|
| | : "bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:scale-105 hover:border-indigo-400 dark:hover:border-indigo-300")
|
| | }
|
| | onClick={() => setCurrentSubject(s.key)}
|
| | aria-label={`Switch to ${s.name}`}
|
| | >
|
| | <span className="mr-2 text-2xl">{s.icon}</span> {s.name}
|
| | </button>
|
| | )}
|
| | </div>
|
| | );
|
| | }
|
| |
|
| | return (
|
| | <div className="min-h-screen flex flex-col items-center pb-16 bg-gradient-to-br from-indigo-100 via-slate-100 to-pink-50 dark:from-slate-900 dark:via-slate-900 dark:to-indigo-950 transition-colors duration-300">
|
| | <header className="w-full max-w-4xl mx-auto pt-10 pb-4">
|
| | <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-2 text-slate-800 dark:text-white tracking-tight text-center">
|
| | Interconnected Subject Explorer
|
| | </h1>
|
| | <p className="text-lg sm:text-xl text-center max-w-2xl mx-auto text-slate-600 dark:text-slate-300">
|
| | Explore how your school subjects connect and find real-world meaning—with interactive canvases and instant AI-powered scenarios.
|
| | </p>
|
| | </header>
|
| | <main className="w-full max-w-4xl flex-1 fade-in">
|
| | <section className="rounded-3xl glass shadow-lg p-4 sm:p-8">
|
| | <div className="flex flex-wrap items-center gap-3 mb-6">
|
| | <input
|
| | type="password"
|
| | className="flex-1 px-4 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| | style={{minWidth:160, maxWidth:290}}
|
| | placeholder="OpenAI API key (sk-...)" value={apiKey}
|
| | onChange={e=>setApiKey(e.target.value)}
|
| | aria-label="OpenAI API Key"
|
| | />
|
| | <input
|
| | type="text"
|
| | className="flex-1 px-4 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| | style={{minWidth:160, maxWidth:300}}
|
| | placeholder="Add an extra prompt (optional)" value={inputPrompt}
|
| | onChange={e=>setInputPrompt(e.target.value)}
|
| | aria-label="Additional prompt for AI"
|
| | />
|
| | <button
|
| | className={`px-6 py-2 rounded-xl font-bold text-lg shadow transition-all
|
| | bg-indigo-600 hover:bg-indigo-700 text-white ${aiLoading ? "opacity-50" : ""}`}
|
| | disabled={aiLoading || !apiKey}
|
| | onClick={fetchAIContent}
|
| | aria-label="Generate ideas and scenarios with AI"
|
| | >
|
| | {aiLoading
|
| | ? <span className="animate-pulse flex items-center gap-2">
|
| | <svg className="w-5 h-5 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
|
| | <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
| | <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
| | </svg>
|
| | Thinking...
|
| | </span>
|
| | : "Ask AI"
|
| | }
|
| | </button>
|
| | </div>
|
| | <SubjectTabs/>
|
| | <div className="min-h-[320px]">{canvasContent}</div>
|
| | {aiError && <div className="mt-6 px-3 py-2 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 font-semibold text-center">{aiError}</div>}
|
| | {ProjectPanel()}
|
| | </section>
|
| | </main>
|
| | <footer className="w-full max-w-3xl text-center mt-10 mb-6 text-slate-500 dark:text-slate-400 text-xs">
|
| | <div>
|
| | <span className="font-bold">Tip:</span> Press <kbd>Ctrl</kbd>+<kbd>K</kbd> to toggle dark mode. <span className="ml-2">No API keys are stored.</span>
|
| | </div>
|
| | <div className="mt-1">
|
| | Made for educational exploration. © {new Date().getFullYear()}
|
| | </div>
|
| | </footer>
|
| | </div>
|
| | );
|
| | }
|
| |
|
| | ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|
| | </script>
|
| | </body>
|
| | </html>
|
| |
|
