Education AI

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education AI</title>

<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background: #f4f7fb;
    color: #172033;
}

header {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: white;
    padding: 22px 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 25px;
    font-weight: bold;
}

nav button {
    border: none;
    background: rgba(255,255,255,.15);
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    margin-left: 8px;
    cursor: pointer;
}

.hero {
    text-align: center;
    padding: 55px 20px 35px;
}

.hero h1 {
    font-size: 45px;
    color: #2563eb;
}

.hero p {
    margin-top: 12px;
    color: #64748b;
    font-size: 18px;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

.section-title {
    margin: 30px 0 18px;
    font-size: 25px;
}

.classes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
}

.class-card {
    background: white;
    padding: 22px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    cursor: pointer;
    transition: .2s;
}

.class-card:hover {
    transform: translateY(-5px);
}

.class-card h3 {
    color: #2563eb;
}

.subjects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.subject {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.07);
}

.subject button {
    margin-top: 12px;
    background: #2563eb;
    color: white;
    border: none;
    padding: 9px 15px;
    border-radius: 8px;
    cursor: pointer;
}

.ai-box {
    margin: 40px 0;
    background: white;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0,0,0,.08);
}

.chat {
    height: 250px;
    overflow-y: auto;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    margin: 15px 0;
}

.message {
    padding: 10px 14px;
    border-radius: 12px;
    margin: 8px 0;
    max-width: 80%;
}

.user {
    background: #dbeafe;
    margin-left: auto;
}

.bot {
    background: #ede9fe;
}

.input-area {
    display: flex;
    gap: 10px;
}

.input-area input {
    flex: 1;
    padding: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    outline: none;
}

.input-area button {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 14px 20px;
    border-radius: 10px;
    cursor: pointer;
}

footer {
    margin-top: 50px;
    background: #172033;
    color: white;
    text-align: center;
    padding: 25px;
}

.dark {
    background: #0f172a;
    color: white;
}

.dark .class-card,
.dark .subject,
.dark .ai-box {
    background: #1e293b;
}

.dark .chat {
    background: #0f172a;
}

.dark .hero p {
    color: #cbd5e1;
}
</style>
</head>

<body>

<header>
    <div class="logo">🎓 Education AI</div>

    <nav>
        <button onclick="showHome()">Home</button>
        <button onclick="toggleDark()">🌙</button>
    </nav>
</header>

<section class="hero">
    <h1>Education AI</h1>
    <p>Learn Smarter. Understand Better.</p>
</section>

<div class="container">

    <h2 class="section-title">🎓 Choose Your Class</h2>

    <div class="classes" id="classes"></div>

    <h2 class="section-title">📚 Subjects</h2>

    <div class="subjects" id="subjects"></div>

    <div class="ai-box">

        <h2>🤖 Ask Education AI</h2>

        <div class="chat" id="chat">
            <div class="message bot">
                👋 Hello! I am Education AI.<br>
                Ask me any study question.
            </div>
        </div>

        <div class="input-area">
            <input
                id="question"
                placeholder="Ask your study question..."
                onkeydown="if(event.key==='Enter') askAI()"
            >
            <button onclick="askAI()">Ask AI</button>
        </div>

    </div>

</div>

<footer>
    © 2026 Education AI • Learn Smarter 🚀
</footer>

<script>

const classContainer = document.getElementById("classes");
const subjectContainer = document.getElementById("subjects");
const chat = document.getElementById("chat");

let selectedClass = "Class 10";

const subjects = {
    "Class 1": ["Mathematics","English","Hindi","Odia","EVS","Computer","GK"],
    "Class 2": ["Mathematics","English","Hindi","Odia","EVS","Computer","GK"],
    "Class 3": ["Mathematics","English","Hindi","Odia","EVS","Computer","GK"],
    "Class 4": ["Mathematics","English","Hindi","Odia","EVS","Computer","GK"],
    "Class 5": ["Mathematics","English","Hindi","Odia","EVS","Computer","GK"],

    "Class 6": ["Mathematics","Science","Social Science","English","Hindi","Odia","Computer"],
    "Class 7": ["Mathematics","Science","Social Science","English","Hindi","Odia","Computer"],
    "Class 8": ["Mathematics","Science","Social Science","English","Hindi","Odia","Computer"],

    "Class 9": ["Mathematics","Science","Social Science","English","Hindi","Odia","Computer"],
    "Class 10": ["Mathematics","Science","Social Science","English","Hindi","Odia","Computer"],

    "Class 11": [
        "Physics","Chemistry","Mathematics","Biology",
        "Accountancy","Business Studies","Economics",
        "History","Political Science","Geography",
        "English","Odia","Computer Science"
    ],

    "Class 12": [
        "Physics","Chemistry","Mathematics","Biology",
        "Accountancy","Business Studies","Economics",
        "History","Political Science","Geography",
        "English","Odia","Computer Science"
    ]
};


// Create classes

for(let i = 1; i <= 12; i++) {

    const card = document.createElement("div");

    card.className = "class-card";

    card.innerHTML = `
        <h3>Class ${i}</h3>
        <p>Explore subjects</p>
    `;

    card.onclick = () => selectClass("Class " + i);

    classContainer.appendChild(card);
}


// Select class

function selectClass(cls) {

    selectedClass = cls;

    subjectContainer.innerHTML = "";

    subjects[cls].forEach(subject => {

        const div = document.createElement("div");

        div.className = "subject";

        div.innerHTML = `
            <h3>📘 ${subject}</h3>
            <p>${cls}</p>
            <button onclick="startSubject('${subject}')">
                Study
            </button>
        `;

        subjectContainer.appendChild(div);
    });

    document.querySelector(".section-title:nth-of-type(2)")
        ?.scrollIntoView({behavior:"smooth"});
}


// Initial class

selectClass("Class 10");


// Subject

function startSubject(subject) {

    addMessage(
        `📚 ${subject} selected for ${selectedClass}.<br>
        What would you like to learn?`,
        "bot"
    );
}


// AI chat

function askAI() {

    const input = document.getElementById("question");

    const question = input.value.trim();

    if(!question) return;

    addMessage(question, "user");

    input.value = "";

    setTimeout(() => {

        let answer =
        `🤖 <b>Education AI</b><br><br>
        You asked: "${question}"<br><br>
        I can explain this topic step-by-step for
        <b>${selectedClass}</b>.<br><br>
        📖 Tip: In the full AI version, I will provide
        detailed explanations, examples and practice questions.`;

        addMessage(answer, "bot");

    }, 600);
}


// Add message

function addMessage(text, type) {

    const div = document.createElement("div");

    div.className = `message ${type}`;

    div.innerHTML = text;

    chat.appendChild(div);

    chat.scrollTop = chat.scrollHeight;
}


// Dark mode

function toggleDark() {

    document.body.classList.toggle("dark");

}


// Home

function showHome() {

    window.scrollTo({
        top:0,
        behavior:"smooth"
    });

}

</script>

</body>
</html>