U still didn't fix the input box for sending prompts to the chat bot it needs to be at the bottom of the screen and u removed my menu button none of the buttons on the other pages work either not on the AI pod or on the instructions page.
c2a8dcf verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Instructions - QuantumSync AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#8B5CF6', | |
| secondary: '#06D6A0', | |
| background: '#0F0F23', | |
| surface: '#1A1A2E', | |
| sidebar: '#161627', | |
| text: '#E2E8F0', | |
| 'text-secondary': '#94A3B8' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| * { box-sizing: border-box; } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0F0F23; | |
| color: #E2E8F0; | |
| margin: 0; | |
| display: flex; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: #1A1A2E; } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, #8B5CF6, #06D6A0); | |
| border-radius: 10px; | |
| } | |
| /* Sidebar animations */ | |
| .sidebar { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .history-item { | |
| transition: all 0.2s ease-in-out; | |
| } | |
| /* Glow effects */ | |
| .glow-primary { | |
| box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); | |
| } | |
| .gradient-border { | |
| background: linear-gradient(135deg, #8B5CF6, #06D6A0); | |
| padding: 1px; | |
| border-radius: 12px; | |
| } | |
| .gradient-border > div { | |
| background: #1A1A2E; | |
| border-radius: 11px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background text-text"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-sidebar flex flex-col p-3 border-r border-gray-800 lg:translate-x-0 -translate-x-full fixed lg:relative h-full transition-transform duration-300 z-50" id="sidebar"> | |
| <div class="sidebar-header flex items-center justify-between p-3 mb-5"> | |
| <span class="sidebar-title text-lg font-bold text-primary">History</span> | |
| <button id="newChatButton" class="bg-gradient-to-r from-primary to-purple-600 border-none text-white px-4 py-2 rounded-xl cursor-pointer font-medium flex items-center gap-2 hover:shadow-lg transition-all duration-300"> | |
| <i data-feather="plus"></i> | |
| New | |
| </button> | |
| </div> | |
| <div class="history-section flex-grow overflow-y-auto" id="historyContainer"> | |
| <!-- History items will be dynamically inserted --> | |
| </div> | |
| <div class="sidebar-footer pt-3 border-t border-gray-800"> | |
| <a href="index.html" class="sidebar-button w-full bg-transparent border-none text-text-secondary p-3 text-left rounded-xl cursor-pointer text-sm hover:bg-surface hover:text-text transition-all duration-200"> | |
| <i data-feather="message-square"></i> | |
| Chat | |
| </a> | |
| <a href="ai-pods.html" class="sidebar-button w-full bg-transparent border-none text-text-secondary p-3 text-left rounded-xl cursor-pointer text-sm hover:bg-surface hover:text-text transition-all duration-200"> | |
| <i data-feather="cpu"></i> | |
| AI Pods | |
| </a> | |
| <a href="instructions.html" class="sidebar-button w-full bg-primary bg-opacity-20 text-primary p-3 text-left rounded-xl cursor-pointer text-sm hover:bg-primary hover:bg-opacity-30 transition-all duration-200"> | |
| <i data-feather="help-circle"></i> | |
| Instructions | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="flex-grow flex flex-col h-screen overflow-y-auto"> | |
| <div class="chat-header sticky top-0 z-40 p-6 text-xl font-bold border-b border-gray-800 bg-surface flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <button id="menuButton" class="text-text-secondary hover:text-primary transition-colors duration-200"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <span>Instructions - QuantumSync AI</span> | |
| </div> | |
| </div> | |
| <div class="p-8 max-w-4xl mx-auto"> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-primary mb-4">QuantumSync AI Instructions</h1> | |
| <p class="text-text-secondary text-lg">Welcome to QuantumSync AI! This guide will help you get the most out of our AI platform.</p> | |
| </div> | |
| <div class="space-y-8"> | |
| <!-- Getting Started Section --> | |
| <div class="gradient-border"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-secondary mb-4">Getting Started</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start gap-4"> | |
| <div class="bg-primary bg-opacity-20 p-3 rounded-full"> | |
| <i data-feather="message-square" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-text mb-2">Starting a New Chat</h3> | |
| <p class="text-text-secondary">Click the "New" button in the sidebar to begin a fresh conversation with the AI assistant.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start gap-4"> | |
| <div class="bg-primary bg-opacity-20 p-3 rounded-full"> | |
| <i data-feather="clock" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-text mb-2">Managing History</h3> | |
| <p class="text-text-secondary">Your conversation history is automatically saved. Click on any previous conversation in the sidebar to resume where you left off.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Pods Section --> | |
| <div class="gradient-border"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-secondary mb-4">AI Pods</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start gap-4"> | |
| <div class="bg-primary bg-opacity-20 p-3 rounded-full"> | |
| <i data-feather="cpu" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-text mb-2">Custom AI Agents</h3> | |
| <p class="text-text-secondary mb-3">Create specialized AI agents tailored to specific tasks or domains using our AI Pods feature.</p> | |
| <ul class="text-text-secondary space-y-2 ml-4"> | |
| <li>• Upload training documents (PDF, DOC, JSON, CSV)</li> | |
| <li>• Configure custom system prompts</li> | |
| <li>• Connect external APIs and webhooks</li> | |
| <li>• Train with example inputs and outputs</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="gradient-border"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-secondary mb-4">Advanced Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-surface p-4 rounded-xl"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <i data-feather="code" class="w-5 h-5 text-primary"></i> | |
| <h3 class="font-semibold text-text">Code Blocks</h3> | |
| </div> | |
| <p class="text-text-secondary text-sm">The AI formats code responses with syntax highlighting. Use the copy button to easily copy code snippets.</p> | |
| </div> | |
| <div class="bg-surface p-4 rounded-xl"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <i data-feather="paperclip" class="w-5 h-5 text-primary"></i> | |
| <h3 class="font-semibold text-text">File Upload</h3> | |
| </div> | |
| <p class="text-text-secondary text-sm">Attach files to your messages to provide context or ask the AI to analyze documents.</p> | |
| </div> | |
| <div class="bg-surface p-4 rounded-xl"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <i data-feather="download" class="w-5 h-5 text-primary"></i> | |
| <h3 class="font-semibold text-text">Export</h3> | |
| </div> | |
| <p class="text-text-secondary text-sm">Export your conversations in various formats for documentation or sharing purposes.</p> | |
| </div> | |
| <div class="bg-surface p-4 rounded-xl"> | |
| <div class="flex items-center gap-3 mb-3"> | |
| <i data-feather="settings" class="w-5 h-5 text-primary"></i> | |
| <h3 class="font-semibold text-text">Customization</h3> | |
| </div> | |
| <p class="text-text-secondary text-sm">Choose from multiple themes and customize the interface to your preference.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tips Section --> | |
| <div class="gradient-border"> | |
| <div class="p-6"> | |
| <h2 class="text-2xl font-bold text-secondary mb-4">Pro Tips</h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="star" class="w-4 h-4 text-secondary mt-1 flex-shrink-0"></i> | |
| <p class="text-text-secondary">Be specific in your questions to get more accurate and helpful responses</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="star" class="w-4 h-4 text-secondary mt-1 flex-shrink-0"></i> | |
| <p class="text-text-secondary">Use the file upload feature to provide context for complex analysis tasks</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="star" class="w-4 h-4 text-secondary mt-1 flex-shrink-0"></i> | |
| <p class="text-text-secondary">Create specialized AI Pods for recurring tasks to improve efficiency</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <i data-feather="star" class="w-4 h-4 text-secondary mt-1 flex-shrink-0"></i> | |
| <p class="text-text-secondary">Use the history feature to maintain context across multiple sessions</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Add some sample history items | |
| const historyContainer = document.getElementById('historyContainer'); | |
| const sampleHistory = [ | |
| "5G Network Architecture Discussion", | |
| "Edge Computing Implementation Plan", | |
| "QuantumSync Product Roadmap Review" | |
| ]; | |
| sampleHistory.forEach(item => { | |
| const historyItem = document.createElement('div'); | |
| historyItem.className = 'history-item p-3 mb-2 rounded-xl cursor-pointer text-text-secondary whitespace-nowrap overflow-hidden text-ellipsis transition-all duration-200 hover:bg-surface hover:text-text'; | |
| historyItem.textContent = item; | |
| historyContainer.appendChild(historyItem); | |
| }); | |
| // Sidebar toggle functionality | |
| const sidebar = document.getElementById('sidebar'); | |
| const menuButton = document.getElementById('menuButton'); | |
| function toggleSidebar() { | |
| sidebar.classList.toggle('-translate-x-full'); | |
| } | |
| menuButton.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| toggleSidebar(); | |
| }); | |
| // Close sidebar when clicking outside on mobile | |
| document.addEventListener('click', function(event) { | |
| if (window.innerWidth < 1024) { | |
| const isClickInsideSidebar = sidebar.contains(event.target); | |
| const isClickInsideMenuButton = menuButton.contains(event.target); | |
| if (!isClickInsideSidebar && !isClickInsideMenuButton && !sidebar.classList.contains('-translate-x-full')) { | |
| toggleSidebar(); | |
| } | |
| } | |
| }); | |
| // Responsive sidebar handling | |
| function handleResize() { | |
| if (window.innerWidth >= 1024) { | |
| sidebar.classList.remove('-translate-x-full'); | |
| } else { | |
| if (!sidebar.classList.contains('-translate-x-full')) { | |
| sidebar.classList.add('-translate-x-full'); | |
| } | |
| } | |
| } | |
| window.addEventListener('resize', handleResize); | |
| handleResize(); // Initial check | |
| }); | |
| </script> | |
| </body> | |
| </html> |