Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Assistant | EduPulse</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body class="bg-surface-1"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar Component --> | |
| <script src="components/sidebar.js"></script> | |
| <custom-sidebar></custom-sidebar> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header Component --> | |
| <script src="components/header.js"></script> | |
| <custom-header></custom-header> | |
| <!-- Main Workspace --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-900">AI Teaching Assistant</h1> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Status: <span class="text-green-600 font-medium">Online</span></span> | |
| <div class="h-2 w-2 rounded-full bg-green-500"></div> | |
| </div> | |
| </div> | |
| <!-- AI Chat Interface --> | |
| <div class="card p-6 mb-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="h-12 w-12 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-lg font-bold">EduAI Assistant</h2> | |
| <p class="text-sm text-gray-500">Ready to help with your teaching needs</p> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="h-96 overflow-y-auto mb-6 space-y-4" id="chat-messages"> | |
| <!-- AI Welcome Message --> | |
| <div class="flex items-start"> | |
| <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3 flex-shrink-0"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="bg-indigo-50 rounded-lg p-4 max-w-3xl"> | |
| <p class="text-gray-800">Hello! I'm your AI Teaching Assistant. How can I help you today? Here are some things I can do:</p> | |
| <ul class="list-disc pl-5 mt-2 text-gray-700"> | |
| <li>Generate lesson plan ideas</li> | |
| <li>Create quiz questions</li> | |
| <li>Suggest teaching strategies</li> | |
| <li>Help with content creation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="flex items-center"> | |
| <input type="text" placeholder="Ask me anything about teaching..." | |
| class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="mb-8"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <button class="card p-4 text-left hover:bg-indigo-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600 mr-3"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Generate Lesson Plan</h3> | |
| <p class="text-sm text-gray-500">Create a custom lesson plan</p> | |
| </div> | |
| </div> | |
| </button> | |
| <button class="card p-4 text-left hover:bg-indigo-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600 mr-3"> | |
| <i class="fas fa-question-circle"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Create Quiz Questions</h3> | |
| <p class="text-sm text-gray-500">Generate assessment questions</p> | |
| </div> | |
| </div> | |
| </button> | |
| <button class="card p-4 text-left hover:bg-indigo-50 transition"> | |
| <div class="flex items-center"> | |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600 mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Teaching Strategies</h3> | |
| <p class="text-sm text-gray-500">Get activity ideas</p> | |
| </div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="card p-6"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Recent Activities</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Generated lesson plan for "Introduction to Calculus"</p> | |
| <p class="text-sm text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3"> | |
| <i class="fas fa-question-circle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Created 15 quiz questions for Biology Basics</p> | |
| <p class="text-sm text-gray-500">1 day ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 rounded-full bg-gray-100 text-gray-600 mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="font-medium">Suggested 3 teaching strategies for engaging students</p> | |
| <p class="text-sm text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/header.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |