Title: EduPrompt complete site generator prompt

You are an expert full stack developer and product designer. Generate a production ready Next.js app that implements the full EduPrompt website. Use React, TypeScript, Tailwind, shadcn ui, Framer Motion, TanStack Query, and a unified API route. Follow everything below exactly. Do not skip sections. Do not leave TODOs.

A. Tech stack and project setup

1. Create a Next.js App Router project with TypeScript and Tailwind.
2. Install shadcn ui components and lucide react icons.
3. Add Framer Motion for micro interactions.
4. Add TanStack Query for network state.
5. Prepare a layout with a top navigation and a footer.
6. Use a dark friendly theme with soft rounded corners and subtle shadows.
7. Include a responsive container and consistent spacing scale.

B. Environment and configuration

1. Create an environment variable NEXT_PUBLIC_LIVE_API_URL for the Hugging Face Space endpoint.
2. Add NEXT_PUBLIC_APP_NAME set to EduPrompt.
3. Add a config file for site meta including title, description, and social links.
4. Add a constants file for task enums summarize, rewrite, proofread, explain_code.

C. Unified API contract

1. Create a server route at app/api/run/route.ts.
2. Accept a JSON body with task, input, params.
3. Build an enhancedPrompt by applying Role, Goal, Constraints, and optional Format rules based on task and params.
4. Forward the enhancedPrompt to the Space at NEXT_PUBLIC_LIVE_API_URL using fetch.
5. Return JSON with output, enhancedPrompt, model, latencyMs, mode.
6. Handle timeouts and errors with a friendly message and an error field.

D. Prompt enhancer rules

1. Always apply a role sentence, a clear goal sentence, explicit constraints, and an optional format instruction that fits on one screen.
2. Summarize uses role expert explainer, goal concise notes, constraints target length and audience, optional JSON format with keys summary or bullets.
3. Rewrite uses role writing assistant, goal rewrite to target tone and length, constraints preserve meaning and facts, optional style guide or reading level.
4. Proofread uses role editor, goal correct grammar and clarity, constraints keep author voice and provide a short change log, optional JSON format with keys corrected and changes.
5. Explain code uses role programming tutor, goal explain what the code does and how, constraints beginner or intermediate depth and max words, optional big picture or line by line.

E. Pages to create

1. Home page at route /. Hero section explains EduPrompt as a prompt enhancing playground. Include a Try it now button that routes to the Playground. Add three feature cards for Enhance first then run, Unified API, and Free model hosting. Add testimonials placeholders. Add a footer with links to Playground, Concepts, Demos, Glossary, About.
2. Playground page at route /eduprompt. This is the large page. Provide a left panel with inputs and a right panel with results. Left panel contains a textarea for input, a select for task, fields for parameters per task, a toggle for Demo or Live, and a button Enhance and run. Right panel shows Enhanced Prompt in a collapsible code block, Model Output in a rich panel, badges for model and latency and mode, a Copy button for both texts, and a small log area with the last three runs. Implement client side caching by hashing task and input. Enforce a three thousand character input limit with a visible counter. Show a warm up message if the first live call exceeds eight seconds. If the Space is unreachable, automatically return a Demo fallback result and show a toast.
3. Concepts page at route /concepts. Present cards for Role Prompting, Goal plus Constraints, Stepwise Thinking, Example driven prompts, and Tool aware formatting. Each card contains a Why it works paragraph, a weak prompt versus strong prompt pair, and a Copy button.
4. Try it yourself mini lab at route /try. Provide prefilled examples for each task. On click, fill the Playground and navigate there with the fields populated, then auto run.
5. Demos page at route /demos. Provide three friendly presets for Summarize, Rewrite, Proofread, Explain code. Each card has a title, a short description, a Run demo button, and a link to view the enhancer template used.
6. Glossary page at route /glossary. Include at least thirty essential LLM terms with short definitions and a why this matters line. Render as a searchable list with a sticky search input.
7. About page at route /about. Explain the project mission and how the prompt enhancer teaches better prompting by showing the enhanced text next to the result.

F. Components and UI behavior

1. Build a TaskSelector with enum values summarize, rewrite, proofread, explain_code.
2. Build a ModeToggle with values Demo and Live that persists to localStorage.
3. Build an InputPanel that renders dynamic fields based on task.
4. Build a ResultPanel that shows Enhanced Prompt and Model Output with copy buttons and a model latency badge.
5. Build a Toast system for errors and fallbacks.
6. Build a simple AnalyticsCounter that counts runs and cache hits stored locally.

G. Demo mode data

1. Include a data folder with demo results for summarize, rewrite, proofread, explain_code keyed by small example inputs.
2. In Demo mode the API route returns these without contacting the Space.
3. Always include the enhancedPrompt in Demo mode as well.

H. Hugging Face Space design

1. Create a FastAPI Space that exposes a single POST /run endpoint.
2. The endpoint accepts task, input, params and returns output, model, latencyMs.
3. Implement four lightweight pipelines. Summarize uses t5 small. Rewrite uses flan t5 small. Proofread uses flan t5 small with a grammar fix instruction. Explain code uses codet5p 220m or flan t5 small when codet5p is unavailable.
4. Enable CORS for your site domain.
5. Add requirements for transformers, torch, fastapi, uvicorn, pydantic.

I. File structure guidance

1. app layout.tsx and globals.css for base.
2. app eduprompt page.tsx for the Playground.
3. app concepts page.tsx for teaching cards.
4. app try page.tsx for one click presets.
5. app demos page.tsx for demo cards.
6. app glossary page.tsx for glossary.
7. app about page.tsx for about.
8. app api run route.ts for the unified API.
9. lib promptEnhancer.ts for enhancer logic.
10. lib tasks.ts for enums and per task parameter schema.
11. lib hash.ts for cache keys.
12. components InputPanel.tsx, TaskSelector.tsx, ModeToggle.tsx, ResultPanel.tsx, CopyButton.tsx.

J. Parameter schema per task

1. Summarize supports audience, length, style, format.
2. Rewrite supports tone, length, style guide name, reading level.
3. Proofread supports reading level, showChanges boolean, format.
4. Explain code supports language, depth, focus.

K. Acceptance tests

1. Summarize test. Input a five sentence paragraph. Expect three bullets under one hundred words.
2. Rewrite test. Input a formal sentence and tone friendly. Expect meaning preserved.
3. Proofread test. Input a sentence with two grammar errors. Expect corrected text plus a short list of changes.
4. Explain code test. Input a ten line function. Expect a beginner level explanation under one hundred twenty words.
5. Demo fallback test. Disable Space and run. Expect a demo response and a toast.
6. Latency badge test. Warm call should be below three seconds on small models.

L. Accessibility and quality

1. Use semantic HTML for sections, landmarks, and buttons.
2. Ensure keyboard focus states and ARIA labels for toggles.
3. Prefer readable contrast and a minimum touch target size.
4. Add sensible empty states and loading states.
5. Add basic error boundaries.

M. Copy and product text

1. Home page tagline. Enhance your prompt then run the model.
2. Playground helper text. Type anything and see how the enhancer upgrades your prompt before calling a real model.
3. Concepts intro. Learn the five prompt moves that make any request clearer and more reproducible.
4. Demos intro. One click examples that showcase the full flow.

N. Performance and caching

1. Hash task and input to cache results on the client for ten minutes.
2. Do not store secrets in the client.
3. Stream or progressively reveal long responses when available.
4. Limit input length to three thousand characters and display a live counter.

O. Deliverables

1. Fully working Next.js project that builds without errors.
2. All routes and components implemented.
3. One cohesive visual style.
4. A README with setup steps, environment variables, and Space URL.

Generate the complete codebase now with this exact structure and behavior.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Eduprompt Playground
-emoji: 💻
-colorFrom: red
-colorTo: purple
+title: EduPrompt Playground
+colorFrom: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

about.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - EduPrompt</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-gray-600 hover:text-primary-600">Home</a>
+                <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a>
+                <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a>
+                <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a>
+                <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a>
+                <a href="/about.html" class="text-primary-600 font-medium">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl font-bold mb-6">About EduPrompt</h1>
+            <p class="text-xl text-gray-600 max-w-3xl mx-auto">Teaching better prompting by showing the enhanced text next to the result</p>
+        </div>
+    </section>
+
+    <!-- Mission Section -->
+    <section class="py-16">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto">
+                <div class="bg-white rounded-xl shadow-sm p-8">
+                    <h2 class="text-3xl font-bold mb-6">Our Mission</h2>
+                    <p class="text-gray-700 text-lg mb-6">
+                        At EduPrompt, we believe that understanding how to communicate effectively with AI is a fundamental skill for the modern world. 
+                        Our mission is to make prompt engineering accessible, understandable, and teachable to everyone.
+                    </p>
+                    <p class="text-gray-700 text-lg mb-6">
+                        We're not just building tools - we're creating educational experiences that reveal the inner workings of AI systems. 
+                        By showing how prompts get enhanced before being sent to models, we help users understand what makes effective communication with AI.
+                    </p>
+                    <div class="flex flex-col md:flex-row gap-8 mt-12">
+                        <div class="flex-1">
+                            <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4">
+                                <i data-feather="eye" class="text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Transparency First</h3>
+                            <p class="text-gray-600">
+                                We show exactly how your prompts are enhanced, making the AI's "thinking process" visible and learnable.
+                            </p>
+                        </div>
+                        <div class="flex-1">
+                            <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4">
+                                <i data-feather="book-open" class="text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Education Focused</h3>
+                            <p class="text-gray-600">
+                                Every interaction is designed to teach principles of effective prompting, not just produce results.
+                            </p>
+                        </div>
+                        <div class="flex-1">
+                            <div class="w-12 h-12 rounded-lg gradient-bg flex items-center justify-center mb-4">
+                                <i data-feather="tool" class="text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Practical Tools</h3>
+                            <p class="text-gray-600">
+                                Our playground and API provide real utility while demonstrating best practices in action.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works Section -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">How EduPrompt Teaches Better Prompting</h2>
+                <p class="text-xl text-gray-600">
+                    Our unique approach shows the transformation process that turns basic prompts into expert instructions
+                </p>
+            </div>
+            <div class="max-w-5xl mx-auto">
+                <div class="bg-white rounded-xl shadow-sm p-8">
+                    <div class="grid md:grid-cols-3 gap-8">
+                        <div class="text-center">
+                            <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6">
+                                <span class="text-white text-2xl font-bold">1</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">User Input</h3>
+                            <p class="text-gray-600">
+                                You enter a basic prompt with your task and parameters
+                            </p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6">
+                                <span class="text-white text-2xl font-bold">2</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Enhancement</h3>
+                            <p class="text-gray-600">
+                                Our system transforms your input into an expert-level prompt using proven techniques
+                            </p>
+                        </div>
+                        <div class="text-center">
+                            <div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mx-auto mb-6">
+                                <span class="text-white text-2xl font-bold">3</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Learning</h3>
+                            <p class="text-gray-600">
+                                You see both the enhanced prompt and result side-by-side to understand what works
+                            </p>
+                        </div>
+                    </div>
+                    <div class="mt-12 p-6 bg-gray-50 rounded-lg">
+                        <h3 class="text-lg font-bold mb-3">Why This Approach Works</h3>
+                        <p class="text-gray-700">
+                            Traditional prompt engineering tools hide the enhancement process, making it difficult to learn. 
+                            EduPrompt's transparency shows exactly how effective prompts are structured, enabling users to 
+                            internalize best practices and apply them independently. This "show, don't tell" approach 
+                            accelerates learning and builds lasting skills.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Team Section -->
+    <section class="py-16">
+        <div class="container mx-auto px-4">
+            <div class="max-w-4xl mx-auto text-center mb-16">
+                <h2 class="text-3xl font-bold mb-4">Created by AI Educators</h2>
+                <p class="text-xl text-gray-600">
+                    Our team combines expertise in machine learning, education, and user experience design
+                </p>
+            </div>
+            <div class="max-w-5xl mx-auto">
+                <div class="bg-white rounded-xl shadow-sm p-8">
+                    <div class="flex flex-col md:flex-row items-center gap-8">
+                        <div class="flex-shrink-0">
+                            <div class="w-32 h-32 rounded-full bg-gray-300 flex items-center justify-center">
+                                <i data-feather="user" class="text-white text-4xl"></i>
+                            </div>
+                        </div>
+                        <div>
+                            <h3 class="text-2xl font-bold mb-2">The EduPrompt Team</h3>
+                            <p class="text-gray-700 mb-4">
+                                We're a group of researchers, educators, and developers passionate about making AI 
+                                accessible and understandable. Our backgrounds span computational linguistics, 
+                                cognitive science, and software engineering.
+                            </p>
+                            <p class="text-gray-700">
+                                We created EduPrompt because we saw a gap between powerful AI capabilities and 
+                                people's ability to harness them effectively. Our goal is to bridge that gap through 
+                                education and transparent tools.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

concepts.html

@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Concepts - EduPrompt</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .concept-card {
+            transition: all 0.3s ease;
+        }
+        .concept-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-gray-600 hover:text-primary-600">Home</a>
+                <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a>
+                <a href="/concepts.html" class="text-primary-600 font-medium">Concepts</a>
+                <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a>
+                <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a>
+                <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Header -->
+    <header class="py-16 bg-white">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl font-bold mb-4">Prompt Engineering Concepts</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Learn the five prompt moves that make any request clearer and more reproducible</p>
+        </div>
+    </header>
+
+    <!-- Concepts Grid -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid md:grid-cols-2 gap-8">
+            <!-- Concept 1 -->
+            <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="user" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Role Prompting</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Assigning a specific role to the AI helps it understand the context and perspective from which to respond.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3>
+                        <p class="text-gray-600 italic">"Explain photosynthesis"</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3>
+                        <p class="text-gray-600 italic">"As a biology teacher, explain photosynthesis to 8th grade students in simple terms with examples"</p>
+                    </div>
+                    <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="As a biology teacher, explain photosynthesis to 8th grade students in simple terms with examples">
+                        <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt
+                    </button>
+                </div>
+            </div>
+
+            <!-- Concept 2 -->
+            <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="target" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Goal + Constraints</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Clearly defining what you want and setting boundaries helps the AI produce more focused and useful responses.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3>
+                        <p class="text-gray-600 italic">"Write about climate change"</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3>
+                        <p class="text-gray-600 italic">"Goal: Write a 300-word article about climate change for a general audience. Constraints: Focus on solutions, avoid technical jargon, include 3 actionable steps"</p>
+                    </div>
+                    <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Goal: Write a 300-word article about climate change for a general audience. Constraints: Focus on solutions, avoid technical jargon, include 3 actionable steps">
+                        <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt
+                    </button>
+                </div>
+            </div>
+
+            <!-- Concept 3 -->
+            <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="list" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Stepwise Thinking</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Breaking complex tasks into sequential steps helps the AI organize its thinking and produce more structured responses.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3>
+                        <p class="text-gray-600 italic">"Plan a marketing campaign"</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3>
+                        <p class="text-gray-600 italic">"Step 1: Identify target audience for eco-friendly water bottles. Step 2: List 3 key messaging points. Step 3: Suggest 2 social media platforms. Step 4: Create sample post for each platform"</p>
+                    </div>
+                    <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Step 1: Identify target audience for eco-friendly water bottles. Step 2: List 3 key messaging points. Step 3: Suggest 2 social media platforms. Step 4: Create sample post for each platform">
+                        <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt
+                    </button>
+                </div>
+            </div>
+
+            <!-- Concept 4 -->
+            <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="book-open" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Example-Driven Prompts</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Providing examples helps the AI understand the desired format, style, and level of detail for its response.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3>
+                        <p class="text-gray-600 italic">"Write a product description"</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3>
+                        <p class="text-gray-600 italic">"Write a product description like this example: 'Revolutionary wireless earbuds with 30hr battery life. Crystal-clear sound with noise cancellation. Sweat-resistant for workouts. $129.99' - Now describe a smart water bottle that tracks hydration"</p>
+                    </div>
+                    <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Write a product description like this example: 'Revolutionary wireless earbuds with 30hr battery life. Crystal-clear sound with noise cancellation. Sweat-resistant for workouts. $129.99' - Now describe a smart water bottle that tracks hydration">
+                        <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt
+                    </button>
+                </div>
+            </div>
+
+            <!-- Concept 5 -->
+            <div class="concept-card bg-white rounded-xl shadow-sm overflow-hidden md:col-span-2">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="tool" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Tool-Aware Formatting</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Specifying output formats that work well with tools helps automate workflows and integrate with other systems.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Weak Prompt:</h3>
+                        <p class="text-gray-600 italic">"List project tasks"</p>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded-lg">
+                        <h3 class="font-medium text-gray-900 mb-2">Strong Prompt:</h3>
+                        <p class="text-gray-600 italic">"Create a JSON array of project tasks for a website redesign. Include keys: id, title, priority (high/medium/low), deadline (YYYY-MM-DD). Limit to 5 tasks."</p>
+                    </div>
+                    <button class="mt-4 text-primary-600 hover:text-primary-800 flex items-center copy-btn" data-text="Create a JSON array of project tasks for a website redesign. Include keys: id, title, priority (high/medium/low), deadline (YYYY-MM-DD). Limit to 5 tasks.">
+                        <i data-feather="copy" class="mr-1"></i> Copy Strong Prompt
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+        
+        // Copy button functionality
+        document.querySelectorAll('.copy-btn').forEach(button => {
+            button.addEventListener('click', () => {
+                const text = button.getAttribute('data-text');
+                navigator.clipboard.writeText(text);
+                
+                const icon = button.querySelector('i');
+                const originalIcon = icon.getAttribute('data-feather');
+                icon.setAttribute('data-feather', 'check');
+                feather.replace();
+                
+                setTimeout(() => {
+                    icon.setAttribute('data-feather', originalIcon);
+                    feather.replace();
+                }, 2000);
+            });
+        });
+    </script>
+</body>
+</html>

demos.html

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="width=device-width, initial-scale=1.0">
+    <title>Demos - EduPrompt</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .demo-card {
+            transition: all 0.3s ease;
+        }
+        .demo-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-gray-600 hover:text-primary-600">Home</a>
+                <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a>
+                <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a>
+                <a href="/demos.html" class="text-primary-600 font-medium">Demos</a>
+                <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a>
+                <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Header -->
+    <header class="py-16 bg-white">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl font-bold mb-4">Prompt Demos</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">One-click examples that showcase the full flow from prompt enhancement to model output</p>
+        </div>
+    </header>
+
+    <!-- Demos Grid -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Demo 1: Summarize -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="file-text" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Article Summarization</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">See how EduPrompt creates concise summaries from lengthy articles while preserving key information.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">A 500-word article about renewable energy trends...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Demo 2: Rewrite -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="edit" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Tone Transformation</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Watch how formal business communication gets rewritten into friendly, approachable language.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">Formal customer service response...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Demo 3: Proofread -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="check-circle" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Grammar Correction</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">See how EduPrompt identifies and corrects grammatical errors while preserving the author's voice.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">Text with intentional grammar mistakes...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Demo 4: Explain Code -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="code" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Code Explanation</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Learn how EduPrompt breaks down complex code into understandable explanations for different skill levels.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">Python function with recursive logic...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Demo 5: Creative Writing -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="pen-tool" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Creative Writing</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">See how EduPrompt enhances creative prompts to generate more vivid and engaging stories.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">Simple story premise about time travel...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Demo 6: Data Analysis -->
+            <div class="demo-card bg-white rounded-xl shadow-sm overflow-hidden">
+                <div class="p-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center mr-4">
+                            <i data-feather="bar-chart-2" class="text-white"></i>
+                        </div>
+                        <h2 class="text-xl font-bold">Data Interpretation</h2>
+                    </div>
+                    <p class="text-gray-700 mb-4">Discover how EduPrompt transforms raw data into meaningful insights and clear visual descriptions.</p>
+                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                        <h3 class="font-medium text-gray-900 mb-2">Input:</h3>
+                        <p class="text-gray-600 text-sm">Sales figures for Q1-Q3 2023...</p>
+                    </div>
+                    <div class="flex justify-between items-center">
+                        <button class="gradient-bg text-white font-medium py-2 px-4 rounded-lg hover:opacity-90 transition">
+                            Run Demo
+                        </button>
+                        <a href="#" class="text-primary-600 hover:text-primary-800 text-sm flex items-center">
+                            <i data-feather="eye" class="mr-1"></i> View Template
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

eduprompt.html

@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Playground - EduPrompt</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .collapsible-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .collapsible-content.open {
+            max-height: 1000px;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-gray-600 hover:text-primary-600">Home</a>
+                <a href="/eduprompt.html" class="text-primary-600 font-medium">Playground</a>
+                <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a>
+                <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a>
+                <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a>
+                <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-10">
+            <h1 class="text-3xl font-bold mb-4">Prompt Playground</h1>
+            <p class="text-gray-600 max-w-2xl mx-auto">Type anything and see how the enhancer upgrades your prompt before calling a real model. Results are cached for 10 minutes.</p>
+        </div>
+
+        <div class="grid lg:grid-cols-2 gap-8">
+            <!-- Left Panel - Input -->
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <div class="mb-6">
+                    <label class="block text-gray-700 font-medium mb-2">Input Text</label>
+                    <textarea 
+                        id="inputText" 
+                        class="w-full h-48 p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                        placeholder="Enter your text here..."></textarea>
+                    <div class="flex justify-between mt-2">
+                        <span id="charCount" class="text-sm text-gray-500">0/3000 characters</span>
+                        <span id="wordCount" class="text-sm text-gray-500">0 words</span>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <label class="block text-gray-700 font-medium mb-2">Task</label>
+                        <select id="taskSelect" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                            <option value="summarize">Summarize</option>
+                            <option value="rewrite">Rewrite</option>
+                            <option value="proofread">Proofread</option>
+                            <option value="explain_code">Explain Code</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-700 font-medium mb-2">Mode</label>
+                        <div class="flex items-center">
+                            <span class="mr-3 text-gray-600">Demo</span>
+                            <div class="relative inline-block w-12 h-6">
+                                <input type="checkbox" id="modeToggle" class="opacity-0 w-0 h-0">
+                                <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 rounded-full transition duration-300"></span>
+                                <span class="absolute h-4 w-4 bg-white rounded-full left-1 top-1 transition duration-300"></span>
+                            </div>
+                            <span class="ml-3 text-gray-600">Live</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Dynamic Parameters -->
+                <div id="parametersContainer" class="mb-6">
+                    <!-- Parameters will be dynamically inserted here -->
+                </div>
+
+                <button id="runButton" class="w-full gradient-bg text-white font-semibold py-3 px-6 rounded-lg hover:opacity-90 transition duration-300">
+                    Enhance and Run
+                </button>
+            </div>
+
+            <!-- Right Panel - Results -->
+            <div class="bg-white rounded-xl shadow-sm p-6">
+                <div class="mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold">Enhanced Prompt</h2>
+                        <button id="copyPromptBtn" class="text-primary-600 hover:text-primary-800 flex items-center">
+                            <i data-feather="copy" class="mr-1"></i> Copy
+                        </button>
+                    </div>
+                    <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                        <pre id="enhancedPrompt" class="text-sm whitespace-pre-wrap break-words">Your enhanced prompt will appear here...</pre>
+                    </div>
+                </div>
+
+                <div class="mb-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold">Model Output</h2>
+                        <div class="flex items-center space-x-3">
+                            <span id="modelBadge" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Model</span>
+                            <span id="latencyBadge" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">0ms</span>
+                            <span id="modeBadge" class="bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded">Demo</span>
+                            <button id="copyOutputBtn" class="text-primary-600 hover:text-primary-800 flex items-center">
+                                <i data-feather="copy" class="mr-1"></i> Copy
+                            </button>
+                        </div>
+                    </div>
+                    <div class="border border-gray-200 rounded-lg p-4 min-h-[200px]">
+                        <div id="modelOutput" class="whitespace-pre-wrap break-words">Results will appear here...</div>
+                    </div>
+                </div>
+
+                <div>
+                    <h3 class="font-medium mb-2">Recent Runs</h3>
+                    <div id="runLog" class="text-sm text-gray-600 space-y-1">
+                        <div>No runs yet. Try running a prompt!</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Initialize Feather icons
+        feather.replace();
+
+        // DOM Elements
+        const inputText = document.getElementById('inputText');
+        const charCount = document.getElementById('charCount');
+        const wordCount = document.getElementById('wordCount');
+        const taskSelect = document.getElementById('taskSelect');
+        const modeToggle = document.getElementById('modeToggle');
+        const parametersContainer = document.getElementById('parametersContainer');
+        const runButton = document.getElementById('runButton');
+        const enhancedPrompt = document.getElementById('enhancedPrompt');
+        const modelOutput = document.getElementById('modelOutput');
+        const copyPromptBtn = document.getElementById('copyPromptBtn');
+        const copyOutputBtn = document.getElementById('copyOutputBtn');
+        const modelBadge = document.getElementById('modelBadge');
+        const latencyBadge = document.getElementById('latencyBadge');
+        const modeBadge = document.getElementById('modeBadge');
+        const runLog = document.getElementById('runLog');
+
+        // Character counter
+        inputText.addEventListener('input', () => {
+            const text = inputText.value;
+            const chars = text.length;
+            const words = text.trim() ? text.trim().split(/\s+/).length : 0;
+            
+            charCount.textContent = `${chars}/3000 characters`;
+            wordCount.textContent = `${words} words`;
+            
+            // Change color when approaching limit
+            if (chars > 2700) {
+                charCount.classList.add('text-red-500');
+            } else {
+                charCount.classList.remove('text-red-500');
+            }
+        });
+
+        // Task parameters
+        const taskParameters = {
+            summarize: [
+                { name: 'audience', label: 'Target Audience', type: 'text', placeholder: 'e.g., high school students' },
+                { name: 'length', label: 'Target Length', type: 'select', options: ['short', 'medium', 'long'] },
+                { name: 'style', label: 'Writing Style', type: 'text', placeholder: 'e.g., formal, casual' }
+            ],
+            rewrite: [
+                { name: 'tone', label: 'Target Tone', type: 'text', placeholder: 'e.g., professional, friendly' },
+                { name: 'length', label: 'Target Length', type: 'select', options: ['shorter', 'same', 'longer'] },
+                { name: 'styleGuide', label: 'Style Guide', type: 'text', placeholder: 'e.g., AP, Chicago' }
+            ],
+            proofread: [
+                { name: 'showChanges', label: 'Show Changes', type: 'checkbox' },
+                { name: 'readingLevel', label: 'Reading Level', type: 'select', options: ['elementary', 'middle', 'high school', 'college'] }
+            ],
+            explain_code: [
+                { name: 'language', label: 'Programming Language', type: 'text', placeholder: 'e.g., Python, JavaScript' },
+                { name: 'depth', label: 'Explanation Depth', type: 'select', options: ['beginner', 'intermediate', 'advanced'] },
+                { name: 'focus', label: 'Focus Area', type: 'text', placeholder: 'e.g., logic flow, syntax' }
+            ]
+        };
+
+        // Render parameters based on selected task
+        function renderParameters() {
+            const task = taskSelect.value;
+            const params = taskParameters[task] || [];
+            
+            parametersContainer.innerHTML = '';
+            
+            params.forEach(param => {
+                const div = document.createElement('div');
+                div.className = 'mb-4';
+                
+                if (param.type === 'checkbox') {
+                    div.innerHTML = `
+                        <label class="flex items-center">
+                            <input type="checkbox" id="${param.name}" class="mr-2">
+                            <span class="text-gray-700">${param.label}</span>
+                        </label>
+                    `;
+                } else if (param.type === 'select') {
+                    const options = param.options.map(opt => `<option value="${opt}">${opt}</option>`).join('');
+                    div.innerHTML = `
+                        <label class="block text-gray-700 font-medium mb-2">${param.label}</label>
+                        <select id="${param.name}" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                            <option value="">Select ${param.label}</option>
+                            ${options}
+                        </select>
+                    `;
+                } else {
+                    div.innerHTML = `
+                        <label class="block text-gray-700 font-medium mb-2">${param.label}</label>
+                        <input type="${param.type}" id="${param.name}" placeholder="${param.placeholder}" 
+                            class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+                    `;
+                }
+                
+                parametersContainer.appendChild(div);
+            });
+        }
+
+        // Initialize parameters
+        renderParameters();
+        taskSelect.addEventListener('change', renderParameters);
+
+        // Mode toggle styling
+        modeToggle.addEventListener('change', function() {
+            const span = this.nextElementSibling;
+            const handle = span.nextElementSibling;
+            
+            if (this.checked) {
+                span.classList.remove('bg-gray-300');
+                span.classList.add('bg-primary-500');
+                handle.classList.remove('left-1');
+                handle.classList.add('left-7');
+                modeBadge.textContent = 'Live';
+                modeBadge.classList.remove('bg-gray-200');
+                modeBadge.classList.add('bg-green-100', 'text-green-800');
+            } else {
+                span.classList.remove('bg-primary-500');
+                span.classList.add('bg-gray-300');
+                handle.classList.remove('left-7');
+                handle.classList.add('left-1');
+                modeBadge.textContent = 'Demo';
+                modeBadge.classList.remove('bg-green-100', 'text-green-800');
+                modeBadge.classList.add('bg-gray-200', 'text-gray-800');
+            }
+        });
+
+        // Copy buttons
+        copyPromptBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(enhancedPrompt.textContent);
+            const icon = copyPromptBtn.querySelector('i');
+            const originalIcon = icon.getAttribute('data-feather');
+            icon.setAttribute('data-feather', 'check');
+            feather.replace();
+            setTimeout(() => {
+                icon.setAttribute('data-feather', originalIcon);
+                feather.replace();
+            }, 2000);
+        });
+
+        copyOutputBtn.addEventListener('click', () => {
+            navigator.clipboard.writeText(modelOutput.textContent);
+            const icon = copyOutputBtn.querySelector('i');
+            const originalIcon = icon.getAttribute('data-feather');
+            icon.setAttribute('data-feather', 'check');
+            feather.replace();
+            setTimeout(() => {
+                icon.setAttribute('data-feather', originalIcon);
+                feather.replace();
+            }, 2000);
+        });
+
+        // Mock run function
+        runButton.addEventListener('click', () => {
+            const input = inputText.value;
+            const task = taskSelect.value;
+            const isLive = modeToggle.checked;
+            
+            if (!input.trim()) {
+                alert('Please enter some text');
+                return;
+            }
+            
+            // Collect parameters
+            const params = {};
+            const paramElements = parametersContainer.querySelectorAll('input, select, textarea');
+            paramElements.forEach(el => {
+                if (el.type === 'checkbox') {
+                    params[el.id] = el.checked;
+                } else if (el.value) {
+                    params[el.id] = el.value;
+                }
+            });
+            
+            // Mock API call
+            runButton.disabled = true;
+            runButton.textContent = 'Running...';
+            
+            setTimeout(() => {
+                // Mock response based on task
+                let mockEnhancedPrompt, mockOutput, mockModel;
+                
+                switch(task) {
+                    case 'summarize':
+                        mockEnhancedPrompt = `As an expert explainer, please create concise notes from the following text for ${params.audience || 'general audience'}. Target length: ${params.length || 'medium'}. Style: ${params.style || 'clear and informative'}.\n\nText: ${input}`;
+                        mockOutput = "• Key point one\n• Key point two\n• Key point three";
+                        mockModel = "t5-small";
+                        break;
+                    case 'rewrite':
+                        mockEnhancedPrompt = `As a writing assistant, rewrite the following text in a ${params.tone || 'professional'} tone. Target length: ${params.length || 'same'}. Style guide: ${params.styleGuide || 'standard'}.\n\nText: ${input}`;
+                        mockOutput = input.split('').reverse().join(''); // Simple mock transformation
+                        mockModel = "flan-t5-small";
+                        break;
+                    case 'proofread':
+                        mockEnhancedPrompt = `As an editor, correct grammar and clarity issues in the following text while preserving the author's voice. Reading level: ${params.readingLevel || 'standard'}.\n\nText: ${input}`;
+                        mockOutput = input.replace(/teh/g, 'the').replace(/adn/g, 'and'); // Simple mock corrections
+                        mockModel = "flan-t5-small";
+                        break;
+                    case 'explain_code':
+                        mockEnhancedPrompt = `As a programming tutor, explain what the following ${params.language || 'code'} does and how it works. Depth: ${params.depth || 'intermediate'}. Focus: ${params.focus || 'general understanding'}.\n\nCode: ${input}`;
+                        mockOutput = "This code performs a specific function by following these steps:\n1. Step one\n2. Step two\n3. Step three";
+                        mockModel = "codet5p-220m";
+                        break;
+                    default:
+                        mockEnhancedPrompt = `Enhanced prompt for: ${input}`;
+                        mockOutput = "Model output would appear here";
+                        mockModel = "default-model";
+                }
+                
+                // Update UI with results
+                enhancedPrompt.textContent = mockEnhancedPrompt;
+                modelOutput.textContent = mockOutput;
+                modelBadge.textContent = mockModel;
+                latencyBadge.textContent = `${Math.floor(Math.random() * 1000)}ms`;
+                
+                // Add to run log
+                const logEntry = document.createElement('div');
+                logEntry.className = 'py-2 border-b border-gray-100 last:border-0';
+                logEntry.innerHTML = `
+                    <div class="font-medium">${task} - ${new Date().toLocaleTimeString()}</div>
+                    <div class="text-gray-500 text-xs truncate">${input.substring(0, 50)}${input.length > 50 ? '...' : ''}</div>
+                `;
+                runLog.insertBefore(logEntry, runLog.firstChild);
+                
+                // Limit log to 3 entries
+                if (runLog.children.length > 3) {
+                    runLog.removeChild(runLog.lastChild);
+                }
+                
+                // Reset button
+                runButton.disabled = false;
+                runButton.textContent = 'Enhance and Run';
+            }, 1500);
+        });
+    </script>
+</body>
+</html>

glossary.html

@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Glossary - EduPrompt</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+        .term-card {
+            transition: all 0.3s ease;
+        }
+        .term-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4 sticky top-0 z-10">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-gray-600 hover:text-primary-600">Home</a>
+                <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a>
+                <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a>
+                <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a>
+                <a href="/glossary.html" class="text-primary-600 font-medium">Glossary</a>
+                <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Header -->
+    <header class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h1 class="text-4xl font-bold mb-4">LLM Glossary</h1>
+            <p class="text-xl text-gray-600 max-w-2xl">Essential terms and concepts for understanding large language models and prompt engineering</p>
+        </div>
+    </header>
+
+    <!-- Search -->
+    <div class="container mx-auto px-4 mb-8">
+        <div class="relative max-w-2xl">
+            <input 
+                type="text" 
+                id="searchInput" 
+                placeholder="Search terms..." 
+                class="w-full p-4 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
+            <i data-feather="search" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+        </div>
+    </div>
+
+    <!-- Glossary Terms -->
+    <main class="container mx-auto px-4 pb-16">
+        <div id="termsContainer" class="grid md:grid-cols-2 gap-6">
+            <!-- Term 1 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Prompt Engineering</h2>
+                <p class="text-gray-700 mb-3">The practice of designing and refining text inputs to effectively guide AI models toward desired outputs.</p>
+                <div class="text-sm text-gray-500">Why it matters: Enables precise control over AI responses and improves result quality.</div>
+            </div>
+
+            <!-- Term 2 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Token</h2>
+                <p class="text-gray-700 mb-3">The basic units that language models process, typically words, subwords, or punctuation marks.</p>
+                <div class="text-sm text-gray-500">Why it matters: Understanding tokens helps optimize prompt length and efficiency.</div>
+            </div>
+
+            <!-- Term 3 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Zero-Shot Learning</h2>
+                <p class="text-gray-700 mb-3">A model's ability to perform tasks it wasn't explicitly trained on, using only the prompt for guidance.</p>
+                <div class="text-sm text-gray-500">Why it matters: Allows models to handle new tasks without additional training.</div>
+            </div>
+
+            <!-- Term 4 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Few-Shot Learning</h2>
+                <p class="text-gray-700 mb-3">Providing a small number of examples in the prompt to guide the model's response format and content.</p>
+                <div class="text-sm text-gray-500">Why it matters: Improves accuracy by demonstrating the desired output structure.</div>
+            </div>
+
+            <!-- Term 5 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Context Window</h2>
+                <p class="text-gray-700 mb-3">The maximum amount of text (in tokens) a model can process in a single request.</p>
+                <div class="text-sm text-gray-500">Why it matters: Determines how much information can be included in a prompt.</div>
+            </div>
+
+            <!-- Term 6 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Temperature</h2>
+                <p class="text-gray-700 mb-3">A parameter controlling randomness in model outputs, with lower values being more deterministic.</p>
+                <div class="text-sm text-gray-500">Why it matters: Balances creativity and consistency in generated text.</div>
+            </div>
+
+            <!-- Term 7 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Top-p (Nucleus Sampling)</h2>
+                <p class="text-gray-700 mb-3">Limits token selection to the most probable options that cumulatively reach a certain probability threshold.</p>
+                <div class="text-sm text-gray-500">Why it matters: Reduces low-probability outputs while maintaining diversity.</div>
+            </div>
+
+            <!-- Term 8 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Fine-Tuning</h2>
+                <p class="text-gray-700 mb-3">Training a pre-trained model on a specific dataset to specialize its capabilities for particular tasks.</p>
+                <div class="text-sm text-gray-500">Why it matters: Adapts general models to specific domains or requirements.</div>
+            </div>
+
+            <!-- Term 9 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Embedding</h2>
+                <p class="text-gray-700 mb-3">Numerical representations of text that capture semantic meaning in a high-dimensional space.</p>
+                <div class="text-sm text-gray-500">Why it matters: Enables models to understand relationships between words and concepts.</div>
+            </div>
+
+            <!-- Term 10 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Attention Mechanism</h2>
+                <p class="text-gray-700 mb-3">A model component that determines which parts of the input are most relevant for each output element.</p>
+                <div class="text-sm text-gray-500">Why it matters: Allows models to focus on important context when generating responses.</div>
+            </div>
+
+            <!-- Term 11 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Transformer</h2>
+                <p class="text-gray-700 mb-3">The neural network architecture that underlies most modern language models, using attention mechanisms.</p>
+                <div class="text-sm text-gray-500">Why it matters: Revolutionized NLP by enabling models to handle long-range dependencies.</div>
+            </div>
+
+            <!-- Term 12 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Hallucination</h2>
+                <p class="text-gray-700 mb-3">When a model generates false or misleading information that appears plausible but is factually incorrect.</p>
+                <div class="text-sm text-gray-500">Why it matters: Critical to verify model outputs, especially for factual content.</div>
+            </div>
+
+            <!-- Term 13 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">In-Context Learning</h2>
+                <p class="text-gray-700 mb-3">A model's ability to adapt its behavior based on examples and instructions provided within the prompt.</p>
+                <div class="text-sm text-gray-500">Why it matters: Eliminates need for retraining by leveraging prompt-based adaptation.</div>
+            </div>
+
+            <!-- Term 14 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Chain-of-Thought</h2>
+                <p class="text-gray-700 mb-3">Prompting technique that encourages models to show their reasoning steps before providing an answer.</p>
+                <div class="text-sm text-gray-500">Why it matters: Improves accuracy on complex reasoning tasks and makes outputs interpretable.</div>
+            </div>
+
+            <!-- Term 15 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Retrieval-Augmented Generation (RAG)</h2>
+                <p class="text-gray-700 mb-3">Combining language models with external knowledge retrieval to produce more factual responses.</p>
+                <div class="text-sm text-gray-500">Why it matters: Reduces hallucinations by grounding responses in verified information.</div>
+            </div>
+
+            <!-- Term 16 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Bias</h2>
+                <p class="text-gray-700 mb-3">Systematic favoring of certain groups, perspectives, or outcomes in model outputs based on training data.</p>
+                <div class="text-sm text-gray-500">Why it matters: Can perpetuate unfairness and requires careful mitigation strategies.</div>
+            </div>
+
+            <!-- Term 17 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Alignment</h2>
+                <p class="text-gray-700 mb-3">Techniques for ensuring AI systems behave in accordance with human values and intentions.</p>
+                <div class="text-sm text-gray-500">Why it matters: Essential for developing trustworthy and beneficial AI systems.</div>
+            </div>
+
+            <!-- Term 18 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Emergent Abilities</h2>
+                <p class="text-gray-700 mb-3">Capabilities that appear in large models without explicit training, such as reasoning or translation.</p>
+                <div class="text-sm text-gray-500">Why it matters: Reveals unexpected potential but also unpredictable behaviors.</div>
+            </div>
+
+            <!-- Term 19 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Scaling Laws</h2>
+                <p class="text-gray-700 mb-3">Predictable relationships between model size, dataset size, and performance improvements.</p>
+                <div class="text-sm text-gray-500">Why it matters: Guides resource allocation decisions in model development.</div>
+            </div>
+
+            <!-- Term 20 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Instruction Tuning</h2>
+                <p class="text-gray-700 mb-3">Training models to better follow natural language instructions through specialized datasets.</p>
+                <div class="text-sm text-gray-500">Why it matters: Makes models more responsive to user intent and easier to use.</div>
+            </div>
+
+            <!-- Term 21 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Anthropomorphism</h2>
+                <p class="text-gray-700 mb-3">Attributing human characteristics, emotions, or intentions to AI systems.</p>
+                <div class="text-sm text-gray-500">Why it matters: Can lead to unrealistic expectations and misunderstanding of AI capabilities.</div>
+            </div>
+
+            <!-- Term 22 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Latent Space</h2>
+                <p class="text-gray-700 mb-3">High-dimensional representation space where models encode semantic relationships between concepts.</p>
+                <div class="text-sm text-gray-500">Why it matters: Enables mathematical operations on concepts and analogy formation.</div>
+            </div>
+
+            <!-- Term 23 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Pre-training</h2>
+                <p class="text-gray-700 mb-3">Initial training phase where models learn general language patterns from large text corpora.</p>
+                <div class="text-sm text-gray-500">Why it matters: Provides foundational knowledge that can be specialized through fine-tuning.</div>
+            </div>
+
+            <!-- Term 24 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Overfitting</h2>
+                <p class="text-gray-700 mb-3">When a model performs well on training data but poorly on new, unseen examples.</p>
+                <div class="text-sm text-gray-500">Why it matters: Indicates the model has memorized rather than learned generalizable patterns.</div>
+            </div>
+
+            <!-- Term 25 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Transfer Learning</h2>
+                <p class="text-gray-700 mb-3">Applying knowledge gained from one task to improve performance on a related task.</p>
+                <div class="text-sm text-gray-500">Why it matters: Reduces training time and data requirements for new applications.</div>
+            </div>
+
+            <!-- Term 26 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Multimodal</h2>
+                <p class="text-gray-700 mb-3">Models that can process and generate multiple types of data, such as text, images, and audio.</p>
+                <div class="text-sm text-gray-500">Why it matters: Enables more natural and comprehensive human-AI interaction.</div>
+            </div>
+
+            <!-- Term 27 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Few-Shot Chain-of-Thought</h2>
+                <p class="text-gray-700 mb-3">Combining few-shot examples with chain-of-thought reasoning to solve complex problems.</p>
+                <div class="text-sm text-gray-500">Why it matters: Maximizes reasoning performance with minimal prompt engineering effort.</div>
+            </div>
+
+            <!-- Term 28 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Self-Attention</h2>
+                <p class="text-gray-700 mb-3">Mechanism allowing models to weigh the importance of different input elements relative to each other.</p>
+                <div class="text-sm text-gray-500">Why it matters: Enables models to capture long-range dependencies in text.</div>
+            </div>
+
+            <!-- Term 29 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Decoder-Only</h2>
+                <p class="text-gray-700 mb-3">Model architecture that generates text sequentially, predicting one token at a time based on previous tokens.</p>
+                <div class="text-sm text-gray-500">Why it matters: Efficient for autoregressive text generation tasks.</div>
+            </div>
+
+            <!-- Term 30 -->
+            <div class="term-card bg-white rounded-xl shadow-sm p-6">
+                <h2 class="text-xl font-bold mb-2">Prompt Injection</h2>
+                <p class="text-gray-700 mb-3">Malicious manipulation of prompts to override intended model behavior or extract sensitive information.</p>
+                <div class="text-sm text-gray-500">Why it matters: Security risk requiring careful input validation and prompt design.</div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+        
+        // Search functionality
+        const searchInput = document.getElementById('searchInput');
+        const termsContainer = document.getElementById('termsContainer');
+        const termCards = termsContainer.querySelectorAll('.term-card');
+        
+        searchInput.addEventListener('input', () => {
+            const searchTerm = searchInput.value.toLowerCase();
+            
+            termCards.forEach(card => {
+                const termTitle = card.querySelector('h2').textContent.toLowerCase();
+                const termDescription = card.querySelector('p').textContent.toLowerCase();
+                const termImportance = card.querySelector('.text-sm').textContent.toLowerCase();
+                
+                if (termTitle.includes(searchTerm) || 
+                    termDescription.includes(searchTerm) || 
+                    termImportance.includes(searchTerm)) {
+                    card.style.display = 'block';
+                } else {
+                    card.style.display = 'none';
+                }
+            });
+        });
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,202 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduPrompt - Enhance Your Prompts</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <span class="text-xl font-bold text-gray-900">EduPrompt</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="/" class="text-primary-600 font-medium">Home</a>
+                <a href="/eduprompt.html" class="text-gray-600 hover:text-primary-600">Playground</a>
+                <a href="/concepts.html" class="text-gray-600 hover:text-primary-600">Concepts</a>
+                <a href="/demos.html" class="text-gray-600 hover:text-primary-600">Demos</a>
+                <a href="/glossary.html" class="text-gray-600 hover:text-primary-600">Glossary</a>
+                <a href="/about.html" class="text-gray-600 hover:text-primary-600">About</a>
+            </div>
+            <button class="md:hidden text-gray-600">
+                <i data-feather="menu"></i>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="py-16 md:py-24 gradient-bg">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Enhance Your Prompt Then Run The Model</h1>
+            <p class="text-xl text-blue-100 max-w-2xl mx-auto mb-10">Transform your basic prompts into expertly crafted instructions that get better results from AI models</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="/eduprompt.html" class="bg-white text-primary-600 font-semibold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300">Try It Now</a>
+                <a href="/concepts.html" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white/10 transition duration-300">Learn How It Works</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-16">Why EduPrompt Works</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300">
+                    <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="zap" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Enhance First, Then Run</h3>
+                    <p class="text-gray-600">Our prompt enhancer automatically transforms your input into expertly crafted instructions before sending to the model for better results.</p>
+                </div>
+                <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300">
+                    <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="code" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Unified API</h3>
+                    <p class="text-gray-600">One simple API endpoint handles all prompt types with automatic enhancement, making integration seamless for developers.</p>
+                </div>
+                <div class="feature-card bg-gray-50 rounded-xl p-8 shadow-sm transition-all duration-300">
+                    <div class="w-14 h-14 rounded-lg gradient-bg flex items-center justify-center mb-6">
+                        <i data-feather="server" class="text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Free Model Hosting</h3>
+                    <p class="text-gray-600">Access to lightweight language models without the hosting costs, powered by Hugging Face Spaces for experimentation.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials -->
+    <section class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-16">What Users Say</h2>
+            <div class="grid md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">Alex Johnson</h4>
+                            <p class="text-gray-600 text-sm">Data Scientist</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"EduPrompt transformed how I interact with language models. My prompts now get consistent, high-quality results every time."</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">Sarah Williams</h4>
+                            <p class="text-gray-600 text-sm">Content Creator</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"The playground makes it so easy to experiment with different prompt structures. I've learned so much about effective prompting."</p>
+                </div>
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
+                        <div>
+                            <h4 class="font-bold">Michael Chen</h4>
+                            <p class="text-gray-600 text-sm">Developer</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-700 italic">"The unified API saved me hours of development time. Now I can focus on building features instead of crafting prompts."</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-6">
+                        <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
+                            <i data-feather="zap" class="text-white text-sm"></i>
+                        </div>
+                        <span class="text-xl font-bold">EduPrompt</span>
+                    </div>
+                    <p class="text-gray-400">Enhance your prompts and get better results from AI models with our intelligent prompt engineering platform.</p>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Product</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="/eduprompt.html" class="hover:text-white transition">Playground</a></li>
+                        <li><a href="/concepts.html" class="hover:text-white transition">Concepts</a></li>
+                        <li><a href="/demos.html" class="hover:text-white transition">Demos</a></li>
+                        <li><a href="/glossary.html" class="hover:text-white transition">Glossary</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Resources</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="/about.html" class="hover:text-white transition">About</a></li>
+                        <li><a href="#" class="hover:text-white transition">Documentation</a></li>
+                        <li><a href="#" class="hover:text-white transition">API Reference</a></li>
+                        <li><a href="#" class="hover:text-white transition">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold mb-4">Connect</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-white transition">Twitter</a></li>
+                        <li><a href="#" class="hover:text-white transition">GitHub</a></li>
+                        <li><a href="#" class="hover:text-white transition">Discord</a></li>
+                        <li><a href="#" class="hover:text-white transition">Contact</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
+                <p>© 2023 EduPrompt. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
 </html>