Spaces:

davydluben
/

test

Running

App Files Files Community

davydluben commited on Jul 5

Commit

6096dbc

verified ·

1 Parent(s): e052773

Мне нужно чтобы терминал сюи создание задачр и все было в отдельных вкладках! И улучшить адаптацию для телефонов - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +133 -60

index.html CHANGED Viewed

@@ -21,6 +21,23 @@
         }
     </script>
     <style>
         .console-scrollbar::-webkit-scrollbar {
             width: 8px;
         }
@@ -75,6 +92,18 @@
         .glow {
             box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
         }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -87,15 +116,26 @@
                 </div>
                 <h1 class="text-2xl font-bold">AI Agent Console</h1>
             </div>
-            <div class="flex items-center space-x-4">
-                <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">
-                    <i class="fas fa-cog mr-2"></i>Settings
                 </button>
                 <div class="relative">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
-                        <span class="font-bold">U</span>
                     </div>
-                    <span class="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-800"></span>
                 </div>
             </div>
         </div>
@@ -103,11 +143,9 @@
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            <!-- Left Column: Chat and Tasks -->
-            <div class="space-y-8">
-                <!-- Task Creation -->
-                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
                     <h2 class="text-xl font-bold mb-4 flex items-center">
                         <i class="fas fa-tasks mr-2 text-indigo-400"></i> Task Management
                     </h2>
@@ -126,13 +164,17 @@
                     </div>
                 </div>
                 <!-- Chat Interface -->
                 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
                     <h2 class="text-xl font-bold mb-4 flex items-center">
                         <i class="fas fa-comments mr-2 text-indigo-400"></i> AI Communication
                     </h2>
-                    <div id="chatContainer" class="h-80 overflow-y-auto mb-4 bg-gray-700 rounded-lg p-4 console-scrollbar">
                         <div class="chat-message mb-4">
                             <div class="flex items-start mb-2">
                                 <div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3">
@@ -154,55 +196,59 @@
                     </div>
                 </div>
             </div>
-            <!-- Right Column: Console -->
-            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-xl font-bold flex items-center">
-                        <i class="fas fa-terminal mr-2 text-indigo-400"></i> Agent Console
-                    </h2>
-                    <div class="flex space-x-2">
-                        <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm">
-                            <i class="fas fa-sync-alt mr-1"></i> Refresh
-                        </button>
-                        <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm">
-                            <i class="fas fa-trash mr-1"></i> Clear
-                        </button>
-                    </div>
-                </div>
-                <div id="consoleOutput" class="bg-console-bg text-console-text font-mono text-sm p-4 rounded-lg h-[calc(100%-3rem)] overflow-y-auto console-scrollbar">
-                    <div class="mb-2">
-                        <span class="text-green-400">user@ai-console:~$</span>
-                        <span>agent --start</span>
-                    </div>
-                    <div class="mb-2 text-green-500">AI Agent initialized successfully</div>
-                    <div class="mb-2">
-                        <span class="text-green-400">user@ai-console:~$</span>
-                        <span>agent --status</span>
-                    </div>
-                    <div class="mb-2">
-                        Agent Status: <span class="text-green-500">Active</span><br>
-                        Memory Usage: <span class="text-yellow-300">42%</span><br>
-                        Tasks in Queue: <span class="text-blue-300">3</span>
-                    </div>
-                    <div class="mb-2">
-                        <span class="text-green-400">user@ai-console:~$</span>
-                        <span>agent --task "Analyze user preferences"</span>
-                    </div>
-                    <div class="mb-2">
-                        <span class="text-cyan-300">[TASK]</span> Starting analysis of user preferences...<br>
-                        <span class="text-cyan-300">[TASK]</span> Loading user profile data...<br>
-                        <span class="text-green-500">[SUCCESS]</span> Profile loaded successfully<br>
-                        <span class="text-cyan-300">[TASK]</span> Processing historical interactions...<br>
-                        <span class="text-yellow-300">[WARNING]</span> Incomplete data in interaction history<br>
-                        <span class="text-cyan-300">[TASK]</span> Generating preference model...<br>
-                        <span class="text-green-500">[SUCCESS]</span> Preference model created<br>
-                        <span class="text-green-500">[TASK COMPLETE]</span> Analysis finished in 1.42s
                     </div>
-                    <div class="mb-2">
-                        <span class="text-green-400">user@ai-console:~$</span>
-                        <span class="terminal-cursor"></span>
                     </div>
                 </div>
             </div>
@@ -396,6 +442,33 @@
             ];
             addConsoleOutput(activities[Math.floor(Math.random() * activities.length)]);
         }, 15000);
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=davydluben/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

         }
     </script>
     <style>
+        /* Mobile-first responsive styles */
+        @media (max-width: 640px) {
+            .container {
+                padding-left: 1rem;
+                padding-right: 1rem;
+            }
+            .bg-gray-800 {
+                padding: 1rem;
+            }
+            #chatContainer, #consoleOutput {
+                height: 300px;
+            }
+            .chat-bubble-ai, .chat-bubble-user {
+                max-width: 90%;
+            }
+        }
         .console-scrollbar::-webkit-scrollbar {
             width: 8px;
         }
         .glow {
             box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
         }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active-tab {
+            display: block;
+        }
+        .active-tab {
+            background-color: #4f46e5;
+        }
     </style>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
                 </div>
                 <h1 class="text-2xl font-bold">AI Agent Console</h1>
             </div>
+            <div class="flex items-center space-x-2">
+                <nav class="flex space-x-1 bg-gray-700 p-1 rounded-lg overflow-x-auto whitespace-nowrap">
+                    <button data-tab="tasks" class="tab-btn px-3 sm:px-4 py-2 rounded-md transition hover:bg-gray-600 active-tab">
+                        <i class="fas fa-tasks mr-1 sm:mr-2"></i><span class="hidden sm:inline">Tasks</span>
+                    </button>
+                    <button data-tab="chat" class="tab-btn px-3 sm:px-4 py-2 rounded-md transition hover:bg-gray-600">
+                        <i class="fas fa-comments mr-1 sm:mr-2"></i><span class="hidden sm:inline">Chat</span>
+                    </button>
+                    <button data-tab="console" class="tab-btn px-3 sm:px-4 py-2 rounded-md transition hover:bg-gray-600">
+                        <i class="fas fa-terminal mr-1 sm:mr-2"></i><span class="hidden sm:inline">Console</span>
+                    </button>
+                </nav>
+                <button class="bg-indigo-600 hover:bg-indigo-700 px-3 sm:px-4 py-2 rounded-lg transition ml-2">
+                    <i class="fas fa-cog mr-1 sm:mr-2"></i><span class="hidden sm:inline">Settings</span>
                 </button>
                 <div class="relative">
+                    <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
+                        <span class="font-bold text-sm sm:text-base">U</span>
                     </div>
+                    <span class="absolute top-0 right-0 w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full border-2 border-gray-800"></span>
                 </div>
             </div>
         </div>
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <!-- Tab Content -->
+        <div id="tasks-tab" class="tab-content active-tab">
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
                     <h2 class="text-xl font-bold mb-4 flex items-center">
                         <i class="fas fa-tasks mr-2 text-indigo-400"></i> Task Management
                     </h2>
                     </div>
                 </div>
+            </div>
+        <div id="chat-tab" class="tab-content hidden">
+            <div class="grid grid-cols-1 gap-8">
                 <!-- Chat Interface -->
                 <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
                     <h2 class="text-xl font-bold mb-4 flex items-center">
                         <i class="fas fa-comments mr-2 text-indigo-400"></i> AI Communication
                     </h2>
+                    <div id="chatContainer" class="h-[500px] overflow-y-auto mb-4 bg-gray-700 rounded-lg p-4 console-scrollbar">
                         <div class="chat-message mb-4">
                             <div class="flex items-start mb-2">
                                 <div class="bg-gradient-to-r from-purple-500 to-indigo-500 w-8 h-8 rounded-full flex items-center justify-center mr-3">
                     </div>
                 </div>
             </div>
+        </div>
+        <div id="console-tab" class="tab-content hidden">
+            <div class="grid grid-cols-1 gap-8">
+                <!-- Console -->
+                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-xl font-bold flex items-center">
+                            <i class="fas fa-terminal mr-2 text-indigo-400"></i> Agent Console
+                        </h2>
+                        <div class="flex space-x-2">
+                            <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm">
+                                <i class="fas fa-sync-alt mr-1"></i> Refresh
+                            </button>
+                            <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg text-sm">
+                                <i class="fas fa-trash mr-1"></i> Clear
+                            </button>
+                        </div>
                     </div>
+                    <div id="consoleOutput" class="bg-console-bg text-console-text font-mono text-sm p-4 rounded-lg h-[500px] overflow-y-auto console-scrollbar">
+                        <div class="mb-2">
+                            <span class="text-green-400">user@ai-console:~$</span>
+                            <span>agent --start</span>
+                        </div>
+                        <div class="mb-2 text-green-500">AI Agent initialized successfully</div>
+                        <div class="mb-2">
+                            <span class="text-green-400">user@ai-console:~$</span>
+                            <span>agent --status</span>
+                        </div>
+                        <div class="mb-2">
+                            Agent Status: <span class="text-green-500">Active</span><br>
+                            Memory Usage: <span class="text-yellow-300">42%</span><br>
+                            Tasks in Queue: <span class="text-blue-300">3</span>
+                        </div>
+                        <div class="mb-2">
+                            <span class="text-green-400">user@ai-console:~$</span>
+                            <span>agent --task "Analyze user preferences"</span>
+                        </div>
+                        <div class="mb-2">
+                            <span class="text-cyan-300">[TASK]</span> Starting analysis of user preferences...<br>
+                            <span class="text-cyan-300">[TASK]</span> Loading user profile data...<br>
+                            <span class="text-green-500">[SUCCESS]</span> Profile loaded successfully<br>
+                            <span class="text-cyan-300">[TASK]</span> Processing historical interactions...<br>
+                            <span class="text-yellow-300">[WARNING]</span> Incomplete data in interaction history<br>
+                            <span class="text-cyan-300">[TASK]</span> Generating preference model...<br>
+                            <span class="text-green-500">[SUCCESS]</span> Preference model created<br>
+                            <span class="text-green-500">[TASK COMPLETE]</span> Analysis finished in 1.42s
+                        </div>
+                        <div class="mb-2">
+                            <span class="text-green-400">user@ai-console:~$</span>
+                            <span class="terminal-cursor"></span>
+                        </div>
                     </div>
                 </div>
             </div>
             ];
             addConsoleOutput(activities[Math.floor(Math.random() * activities.length)]);
         }, 15000);
+        // Tab switching functionality
+        const tabButtons = document.querySelectorAll('.tab-btn');
+        const tabContents = document.querySelectorAll('.tab-content');
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const tabId = button.getAttribute('data-tab');
+                // Update active tab button
+                tabButtons.forEach(btn => {
+                    btn.classList.remove('active-tab');
+                    btn.classList.remove('bg-indigo-600');
+                    btn.classList.add('hover:bg-gray-600');
+                });
+                button.classList.add('active-tab', 'bg-indigo-600');
+                button.classList.remove('hover:bg-gray-600');
+                // Show selected tab content
+                tabContents.forEach(content => {
+                    content.classList.remove('active-tab');
+                    content.classList.add('hidden');
+                });
+                document.getElementById(`${tabId}-tab`).classList.add('active-tab');
+                document.getElementById(`${tabId}-tab`).classList.remove('hidden');
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=davydluben/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>