Spaces:

derricka59
/

quantumsync-ai-interface-nebula-edition

Running

App Files Files Community

derricka59 commited on Oct 8, 2025

Commit

e4bab04

verified ·

1 Parent(s): 96d8704

You didn't fix my shat input box is so positioned wrong and the menu button doesn't work its supposed to make the sidebar slide out so I can access it's feature

Browse files

Files changed (2) hide show

index.html +22 -17
instructions.html +47 -10

index.html CHANGED Viewed

@@ -171,24 +171,23 @@
                     <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">
@@ -334,7 +333,10 @@
             sidebar.classList.toggle('-translate-x-full');
         }
-        menuButton.addEventListener('click', toggleSidebar);
         // Close sidebar when clicking outside on mobile
         document.addEventListener('click', function(event) {
@@ -352,7 +354,10 @@
             if (window.innerWidth >= 1024) {
                 sidebar.classList.remove('-translate-x-full');
             } else {
-                sidebar.classList.add('-translate-x-full');
             }
         }

                     <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">
             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) {
                 sidebar.classList.remove('-translate-x-full');
             } else {
+                if (!sidebar.classList.contains('-translate-x-full')) {
+                    // Only close if it's not already closed
+                    sidebar.classList.add('-translate-x-full');
+                }
             }
         }

instructions.html CHANGED Viewed

@@ -75,10 +75,9 @@
     </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">
-        <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>
@@ -109,13 +108,13 @@
     <!-- 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">
@@ -258,7 +257,45 @@
                 historyItem.textContent = item;
                 historyContainer.appendChild(historyItem);
             });
         });
-    </script>
 </body>
 </html>

     </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>
     <!-- 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">
                 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>