Pathory

[tonystark-cloud]

import { useState, useEffect } from "react";

// Images / Icons (URLs can be replaced with your own)
const icons = {
ai: "https://img.icons8.com/emoji/48/000000/robot-emoji.png",
quiz: "https://img.icons8.com/emoji/48/000000/memo-emoji.png",
timeline: "https://img.icons8.com/emoji/48/000000/calendar-emoji.png",
subjects: "https://img.icons8.com/emoji/48/000000/books-emoji.png",
courses: "https://img.icons8.com/emoji/48/000000/mortar-board-emoji.png",
university: "https://img.icons8.com/emoji/48/000000/university-emoji.png",
tests: "https://img.icons8.com/emoji/48/000000/test-tube-emoji.png",
};

// Sample test papers
const sampleTests = [
{ title: "Class 11 Physics Test", link: "https://example.com/11physics.pdf" },
{ title: "Class 11 Chemistry Test", link: "https://example.com/11chemistry.pdf" },
{ title: "Class 12 Physics Test", link: "https://example.com/12physics.pdf" },
{ title: "Class 12 Maths Test", link: "https://example.com/12maths.pdf" },
{ title: "JEE Sample Paper", link: "https://example.com/jee.pdf" },
{ title: "NEET Sample Paper", link: "https://example.com/neet.pdf" },
{ title: "CUET Sample Paper", link: "https://example.com/cuet.pdf" },
];

// Main App
export default function App() {
const [interest, setInterest] = useState("");
const [aiResult, setAiResult] = useState("");
const [timeline, setTimeline] = useState([]);
const [goal, setGoal] = useState("");
const [quizAnswer, setQuizAnswer] = useState("");
const [quizResult, setQuizResult] = useState("");

useEffect(() => {
const saved = JSON.parse(localStorage.getItem("pathory_timeline"));
if (saved) setTimeline(saved);
}, []);

useEffect(() => {
localStorage.setItem("pathory_timeline", JSON.stringify(timeline));
}, [timeline]);

const analyzeInterest = () => {
let result = "";
if (interest === "science")
result =
"Science + Maths → Careers: Engineer, Developer, Scientist";
else if (interest === "medical")
result =
"Science + Biology → Careers: Doctor, Nurse, Pharmacist";
else if (interest === "commerce")
result =
"Commerce → Careers: CA, Business Analyst, MBA";
else if (interest === "arts")
result =
"Arts → Careers: Lawyer, Journalist, Civil Services";
else if (interest === "skills")
result =
"Vocational → Careers: Technician, Designer, Freelancer";
else result = "Please select your interest";

setAiResult(result);

};

const addGoal = () => {
if (!goal) return;
setTimeline([...timeline, goal]);
setGoal("");
};

const takeQuiz = () => {
let res = "";
if (quizAnswer === "math") res = "Best suited: Science PCM → Engineering / Tech";
else if (quizAnswer === "bio") res = "Best suited: Science PCB → Medical / Health";
else if (quizAnswer === "commerce") res = "Best suited: Commerce → CA / CS / Business";
else if (quizAnswer === "arts") res = "Best suited: Arts → Law / Psychology / Media";
else res = "Please select an answer";
setQuizResult(res);
};

return (

🚀 Pathory

<p style={{ color: "#555" }}>All-in-One Career & Study Planner App

  {/* AI Career Advisor */}
  <div style={styles.card}>
    <img src={icons.ai} alt="AI" style={styles.icon} />
    <h2>🧠 AI Career Advisor</h2>
    <select
      value={interest}
      onChange={(e) => setInterest(e.target.value)}
      style={styles.select}
    >
      <option value="">Select Interest</option>
      <option value="science">Science & Technology</option>
      <option value="medical">Medical & Health</option>
      <option value="commerce">Business & Finance</option>
      <option value="arts">Arts & Law</option>
      <option value="skills">Skill-Based Careers</option>
    </select>
    <button onClick={analyzeInterest} style={styles.button}>
      Analyze Career
    </button>
    {aiResult && <p style={{ marginTop: 10 }}>{aiResult}</p>}
  </div>

  {/* Career Quiz */}
  <div style={styles.card}>
    <img src={icons.quiz} alt="Quiz" style={styles.icon} />
    <h2>📝 Career Quiz</h2>
    <p>What do you enjoy the most?</p>
    <select
      value={quizAnswer}
      onChange={(e) => setQuizAnswer(e.target.value)}
      style={styles.select}
    >
      <option value="">Select</option>
      <option value="math">Math & Logic</option>
      <option value="bio">Biology</option>
      <option value="commerce">Business</option>
      <option value="arts">Creativity / Arts</option>
    </select>
    <button onClick={takeQuiz} style={styles.button}>
      Get Quiz Result
    </button>
    {quizResult && <p style={{ marginTop: 10 }}>{quizResult}</p>}
  </div>

  {/* Timeline Builder */}
  <div style={styles.card}>
    <img src={icons.timeline} alt="Timeline" style={styles.icon} />
    <h2>🗓️ Create Your Study Timeline</h2>
    <input
      placeholder="Enter your goal e.g. Engineer"
      value={goal}
      onChange={(e) => setGoal(e.target.value)}
      style={styles.input}
    />
    <button onClick={addGoal} style={styles.button}>
      Add to Timeline
    </button>
    {timeline.length > 0 && (
      <ol>
        {timeline.map((t, i) => (
          <li key={i}>{t}</li>
        ))}
      </ol>
    )}
  </div>

  {/* Subjects Info */}
  <div style={styles.card}>
    <img src={icons.subjects} alt="Subjects" style={styles.icon} />
    <h2>📘 Class 11 & 12 Subjects</h2>
    <ul>
      <li>Engineering → Physics, Chemistry, Maths</li>
      <li>Medical → Physics, Chemistry, Biology</li>
      <li>Commerce → Accounts, Economics, Maths</li>
      <li>Arts → History, Political Science, English</li>
    </ul>
  </div>

  {/* Courses after 12 */}
  <div style={styles.card}>
    <img src={icons.courses} alt="Courses" style={styles.icon} />
    <h2>🎯 Courses After Class 12</h2>
    <ul>
      <li>Engineering → B.Tech (JEE)</li>
      <li>Medical → MBBS / Nursing (NEET)</li>
      <li>Commerce → B.Com / CA / CS</li>
      <li>Arts → BA / Law / Journalism</li>
      <li>Skills → Diploma / ITI / Certifications</li>
    </ul>
  </div>

  {/* Universities */}
  <div style={styles.card}>
    <img src={icons.university} alt="University" style={styles.icon} />
    <h2>🏫 Popular Universities & Exams</h2>
    <ul>
      <li>IITs – Engineering (JEE)</li>
      <li>AIIMS – Medical (NEET)</li>
      <li>Delhi University – UG (CUET)</li>
      <li>NLUs – Law (CLAT)</li>
    </ul>
  </div>

  {/* Sample Test Papers */}
  <div style={styles.card}>
    <img src={icons.tests} alt="Tests" style={styles.icon} />
    <h2>📄 Sample Test Papers</h2>
    <ul>
      {sampleTests.map((test, i) => (
        <li key={i}>
          <a href={test.link} target="_blank" rel="noreferrer" style={{ color: "#4a90e2" }}>
            {test.title}
          </a>
        </li>
      ))}
    </ul>
  </div>
</div>

);
}

// Styles
const styles = {
app: {
fontFamily: "Arial",
padding: 20,
background: "#f0f4ff",
minHeight: "100vh",
},
card: {
background: "#fff",
padding: 15,
marginBottom: 15,
borderRadius: 12,
boxShadow: "0 6px 15px rgba(0,0,0,0.15)",
position: "relative",
},
icon: {
width: 40,
height: 40,
position: "absolute",
top: 15,
right: 15,
},
select: {
padding: 8,
fontSize: 16,
borderRadius: 6,
width: "100%",
marginBottom: 10,
},
input: {
padding: 8,
fontSize: 16,
width: "100%",
borderRadius: 6,
marginBottom: 10,
boxSizing: "border-box",
},
button: {
padding: "8px 12px",
fontSize: 16,
borderRadius: 6,
backgroundColor: "#4a90e2",
color: "#fff",
border: "none",
cursor: "pointer",
marginTop: 5,
},
};