The sidebar is out, but the menu buttoned it slides it back in doesn't work.Neither does any other button in the out.Except for the buttons in the sidebar, those are the only buttons that work, and they're stacked on top of each other and overlapping each other.It's not very responsive.The button should fit within the sidebar evenly.And they should not be on top of each other or touching each other
b792d54 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuantumSync AI Interface</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); | |
| z-index: 1000; | |
| } | |
| .history-item { | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .sidebar-button { | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| } | |
| .sidebar-footer { | |
| margin-top: auto; | |
| padding-top: 16px; | |
| } | |
| /* Message animations */ | |
| @keyframes messageSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message { | |
| animation: messageSlideIn 0.4s ease-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; | |
| } | |
| /* Pod card hover effects */ | |
| .pod-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Floating animation */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Pulse animation for active elements */ | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); } | |
| 50% { box-shadow: 0 0 30px rgba(139, 92, 246, 0.4); } | |
| } | |
| .pulse-active { | |
| animation: pulse-glow 2s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-background text-text overflow-hidden"> | |
| <!-- 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 flex flex-col gap-2"> | |
| <a href="ai-pods.html" class="sidebar-button 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 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="help-circle"></i> | |
| Instructions | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Chat Container --> | |
| <main class="flex-grow flex flex-col h-full"> | |
| <div class="chat-header sticky top-0 z-40 p-4 border-b border-gray-800 bg-surface"> | |
| <div class="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 class="text-lg font-bold">QuantumSync</span> | |
| </div> | |
| <div class="tools-container flex items-center gap-3"> | |
| <button class="tool-button bg-surface text-text-secondary p-2 rounded-lg border border-gray-800 hover:bg-gray-800 transition-colors duration-200"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <button class="tool-button bg-surface text-text-secondary p-2 rounded-lg border border-gray-800 hover:bg-gray-800 transition-colors duration-200"> | |
| <i data-feather="download"></i> | |
| </button> | |
| <button class="tool-button bg-surface text-text-secondary p-2 rounded-lg border border-gray-800 hover:bg-gray-800 transition-colors duration-200"> | |
| <i data-feather="share-2"></i> | |
| </button> | |
| <div class="profile-picture w-8 h-8 rounded-full bg-gradient-to-r from-primary to-purple-600 flex items-center justify-center text-white text-xs font-bold"> | |
| JS | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-grow flex flex-col h-full"> | |
| <div class="chat-window flex-grow p-6 overflow-y-auto"> | |
| <div class="message bot max-w-4xl mb-4 p-5 rounded-2xl bg-gray-900 text-text"> | |
| <h3 class="text-primary font-semibold text-lg mb-2">Key Accomplishments: QuantumSync Ecosystem Research Plan</h3> | |
| <p class="text-text-secondary">Welcome! I am QuantumSync AI. Below is a detailed summary of the key research and development milestones. Feel free to ask me to elaborate on any section.</p> | |
| </div> | |
| </div> | |
| <div class="chat-input-container p-6 border-t border-gray-800 mt-auto"> | |
| <div class="chat-input-area flex items-center p-3 rounded-2xl bg-gray-900 border border-gray-800"> | |
| <input type="file" id="fileInput" class="hidden"> | |
| <button id="fileAttachment" class="input-button bg-transparent border-none cursor-pointer p-2"> | |
| <i data-feather="paperclip"></i> | |
| </button> | |
| <input type="text" id="userInput" class="flex-grow border-none bg-transparent text-text text-base outline-none px-3" placeholder="Type your message..."> | |
| <button id="sendButton" class="input-button bg-gradient-to-r from-primary to-purple-600 rounded-full p-3"> | |
| <i data-feather="send"></i> | |
| </button> | |
| </div> | |
| <div class="file-upload-info text-sm text-text-secondary mt-1 text-center h-4" id="fileUploadInfo"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Activation Success Popup --> | |
| <div id="activationPopup" class="fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded-xl shadow-lg z-50 hidden"> | |
| <div class="flex items-center gap-2"> | |
| <i data-feather="check-circle" class="w-5 h-5"></i> | |
| <span>Activation Successful!</span> | |
| </div> | |
| </div> | |
| <!-- AI Pods Modal --> | |
| <div id="aiPodsModal" class="fixed inset-0 z-50 bg-black bg-opacity-70 hidden flex items-center justify-center"> | |
| <div class="modal-content bg-surface p-8 rounded-2xl w-11/12 max-w-4xl max-h-[85vh] overflow-y-auto"> | |
| <div class="modal-header flex justify-between items-center mb-6"> | |
| <h2 class="modal-title text-2xl font-bold text-primary">AI Pods - Custom Agent Training</h2> | |
| <button class="close-button text-3xl text-text-secondary cursor-pointer border-none bg-transparent">×</button> | |
| </div> | |
| <div class="tabs flex gap-3 mb-6 pb-4 border-b border-gray-800"> | |
| <div class="tab active px-5 py-3 cursor-pointer border-b-2 border-transparent transition-all duration-200 hover:text-primary" data-tab="overview">Overview</div> | |
| <div class="tab px-5 py-3 cursor-pointer border-b-2 border-transparent transition-all duration-200 hover:text-primary">Create Pod</div> | |
| </div> | |
| <div class="tab-content active" id="overview-tab"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold">Your AI Pods</h3> | |
| <button class="btn btn-primary bg-gradient-to-r from-primary to-purple-600 text-white px-5 py-3 rounded-xl border-none cursor-pointer font-medium hover:shadow-lg transition-all duration-300"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| New Pod | |
| </button> | |
| </div> | |
| <div class="pods-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> | |
| <!-- Sample Pod Cards --> | |
| <div class="pod-card gradient-border floating"> | |
| <div class="bg-gray-900 rounded-xl p-5 h-full"> | |
| <div class="pod-header flex justify-between items-center mb-3"> | |
| <div class="pod-name text-primary font-semibold">Customer Support Agent</div> | |
| <div class="pod-status trained bg-green-500 bg-opacity-20 text-green-400 px-3 py-1 rounded-full text-xs font-medium">trained</div> | |
| </div> | |
| <div class="pod-description text-text-secondary text-sm mb-3">Handles customer inquiries and support tickets</div> | |
| <div class="pod-stats flex gap-4 text-xs text-text-secondary"> | |
| <div class="pod-stat flex items-center gap-1"> | |
| <i data-feather="file-text" class="w-3 h-3"></i> | |
| 12 docs | |
| </div> | |
| <div class="pod-stat flex items-center gap-1"> | |
| <i data-feather="link" class="w-3 h-3"></i> | |
| 2 APIs | |
| </div> | |
| <div class="pod-stat flex items-center gap-1"> | |
| <i data-feather="activity" class="w-3 h-3"></i> | |
| 1 webhook | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="create-tab"> | |
| <h3 class="text-primary font-semibold text-lg mb-4">Configure Your AI Pod</h3> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">Pod Name</label> | |
| <input type="text" class="form-input w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base"> | |
| </div> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">Description</label> | |
| <input type="text" class="form-input w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base" placeholder="Brief description of this agent's purpose"> | |
| </div> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">System Prompt</label> | |
| <textarea class="form-textarea w-full p-4 bg-gray-900 border border-gray-800 rounded-xl text-text font-inter text-base min-h-32 resize-vertical" placeholder="Define the agent's personality, role, and behavior..."></textarea> | |
| </div> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">Training Data (JSON Format)</label> | |
| <div class="training-data-editor grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="json-editor bg-gray-900 border border-gray-800 rounded-xl p-4"> | |
| <h4 class="text-secondary font-semibold text-base mb-2">Input Examples</h4> | |
| <textarea class="form-textarea w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-mono text-sm">[ | |
| "What is network slicing?", | |
| "How does edge computing work?", | |
| "Tell me about 5G pricing" | |
| ]</textarea> | |
| </div> | |
| <div class="json-editor bg-gray-900 border border-gray-800 rounded-xl p-4"> | |
| <h4 class="text-secondary font-semibold text-base mb-2">Expected Outputs</h4> | |
| <textarea class="form-textarea w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-mono text-sm" placeholder='[ | |
| "Network slicing allows...", | |
| "Edge computing brings...", | |
| "Our 5G pricing starts at..." | |
| ]'></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">Upload Training Files</label> | |
| <div class="file-upload-area border-2 border-dashed border-gray-800 rounded-xl p-8 text-center cursor-pointer transition-all duration-300 hover:border-primary hover:bg-primary hover:bg-opacity-5" id="podFileUpload"> | |
| <i data-feather="upload-cloud" class="w-12 h-12 opacity-50 mb-3"></i> | |
| <p class="text-text-secondary mb-2">Drag & drop files here or click to browse</p> | |
| <p class="text-xs text-text-secondary">Supported: PDF, DOC, JSON, CSV, MP3, MP4</p> | |
| </div> | |
| <input type="file" id="podFilesInput" multiple class="hidden" accept=".pdf,.doc,.docx,.json,.csv,.mp3,.mp4"> | |
| <div class="uploaded-files mt-4" id="uploadedFilesList"></div> | |
| </div> | |
| <div class="form-group mb-5"> | |
| <label class="form-label block mb-2 font-medium text-text">API Configuration</label> | |
| <div class="api-config-section bg-gray-900 rounded-xl p-4 mt-3"> | |
| <h4 class="text-secondary font-semibold text-base mb-3">External API Connections</h4> | |
| <input type="text" class="form-input w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-inter text-sm" placeholder="API Endpoint URL"> | |
| <input type="text" class="form-input w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-text font-inter text-sm" placeholder="API Key (optional)"> | |
| <button class="btn btn-secondary bg-surface text-text border border-gray-800 px-4 py-2 rounded-lg cursor-pointer font-medium hover:shadow transition-all duration-200">Add API Connection</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <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 hover:bg-surface hover:text-text transition-all duration-200'; | |
| 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(); | |
| e.preventDefault(); | |
| 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 | |
| // Button functionality | |
| const newChatButton = document.getElementById('newChatButton'); | |
| const sendButton = document.getElementById('sendButton'); | |
| const fileAttachment = document.getElementById('fileAttachment'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const userInput = document.getElementById('userInput'); | |
| const fileUploadInfo = document.getElementById('fileUploadInfo'); | |
| newChatButton.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const historyContainer = document.getElementById('historyContainer'); | |
| const chatWindow = document.querySelector('.chat-window'); | |
| // Clear chat window | |
| chatWindow.innerHTML = '<div class="message bot max-w-4xl mb-4 p-5 rounded-2xl bg-gray-900 text-text"><h3 class="text-primary font-semibold text-lg mb-2">New Chat Started</h3><p class="text-text-secondary">Welcome! I am QuantumSync AI. How can I assist you today?</p></div>'; | |
| // Add to history | |
| const newItem = document.createElement('div'); | |
| newItem.className = 'history-item p-3 mb-2 rounded-xl cursor-pointer text-text-secondary whitespace-nowrap overflow-hidden text-ellipsis hover:bg-surface hover:text-text transition-all duration-200'; | |
| newItem.textContent = 'New Chat ' + new Date().toLocaleTimeString(); | |
| historyContainer.prepend(newItem); | |
| // Show activation popup | |
| const popup = document.getElementById('activationPopup'); | |
| popup.classList.remove('hidden'); | |
| setTimeout(() => popup.classList.add('hidden'), 3000); | |
| }); | |
| sendButton.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| const chatWindow = document.querySelector('.chat-window'); | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'message user max-w-4xl mb-4 p-5 rounded-2xl bg-primary bg-opacity-20 ml-auto text-right'; | |
| userMessage.innerHTML = `<p>${message}</p>`; | |
| chatWindow.appendChild(userMessage); | |
| // Clear input | |
| userInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const botMessage = document.createElement('div'); | |
| botMessage.className = 'message bot max-w-4xl mb-4 p-5 rounded-2xl bg-gray-900 text-text'; | |
| botMessage.innerHTML = `<p>I received your message: "${message}". How can I help you further?</p>`; | |
| chatWindow.appendChild(botMessage); | |
| chatWindow.scrollTop = chatWindow.scrollHeight; | |
| }, 1000); | |
| chatWindow.scrollTop = chatWindow.scrollHeight; | |
| } | |
| }); | |
| userInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| sendButton.click(); | |
| } | |
| }); | |
| fileAttachment.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| const file = e.target.files[0]; | |
| fileUploadInfo.textContent = `File selected: ${file.name}`; | |
| setTimeout(() => { | |
| fileUploadInfo.textContent = ''; | |
| }, 3000); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |