la page ai assistant

ai-assistant.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<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>

components/sidebar.js

@@ -239,9 +239,9 @@ class CustomSidebar extends HTMLElement {
               <div class="menu-icon">
                 <i class="fas fa-bolt"></i>
 </div>
-              <div class="menu-text">AI Assistant</div>
+              <a href="ai-assistant.html" class="menu-text">AI Assistant</a>
             </div>
-            <div class="menu-item">
+<div class="menu-item">
               <div class="menu-icon">
                 <i class="fas fa-cog"></i>
 </div>

script.js

@@ -107,12 +107,71 @@ const searchInput = document.getElementById('search');
     }
 });
 // AI Assistant functionality
-document.querySelector('.ai-assistant-btn').addEventListener('click', function() {
-    // This would open a modal or sidebar for AI assistant
-    console.log('AI Assistant opened');
-    // In a real implementation, this would trigger the AI assistant UI
-});
+function initAIAssistant() {
+    const chatInput = document.querySelector('.ai-assistant input[type="text"]');
+    const sendBtn = document.querySelector('.ai-assistant button');
+    
+    if (chatInput && sendBtn) {
+        sendBtn.addEventListener('click', function() {
+            const message = chatInput.value.trim();
+            if (message) {
+                addUserMessage(message);
+                chatInput.value = '';
+                // Simulate AI response after a short delay
+                setTimeout(() => {
+                    addAIMessage("I'm your AI assistant. In a real implementation, this would be a response from the AI service.");
+                }, 1000);
+            }
+        });
+        
+        chatInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                sendBtn.click();
+            }
+        });
+    }
+}
+
+function addUserMessage(message) {
+    const chatContainer = document.getElementById('chat-messages');
+    if (chatContainer) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'flex items-start justify-end';
+        messageDiv.innerHTML = `
+            <div class="bg-indigo-600 text-white rounded-lg p-4 max-w-3xl">
+                <p>${message}</p>
+            </div>
+            <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-white ml-3 flex-shrink-0">
+                <i class="fas fa-user"></i>
+            </div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+}
+
+function addAIMessage(message) {
+    const chatContainer = document.getElementById('chat-messages');
+    if (chatContainer) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'flex items-start';
+        messageDiv.innerHTML = `
+            <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">${message}</p>
+            </div>
+        `;
+        chatContainer.appendChild(messageDiv);
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }
+}
 
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initSidebar();
+    initAIAssistant();
 // Responsive adjustments
 window.addEventListener('resize', function() {
     // Add any responsive adjustments here