Spaces:

FourLabs-UN2
/

android-test-pilot

Running

App Files Files Community

FourLabs-UN2 commited on Oct 22, 2025

Commit

bb99454

verified ·

1 Parent(s): 504bb6f

o chatbot deve ser em uma novo página

Browse files

Files changed (4) hide show

chatbot.html +117 -0
components/sidebar.js +7 -4
index.html +5 -61
script.js +0 -18

chatbot.html ADDED Viewed

	@@ -0,0 +1,117 @@

+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot - Android Test Pilot</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#21223a',
+                        secondary: '#ff580f',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-primary min-h-screen text-white">
+    <custom-sidebar></custom-sidebar>
+    <main class="ml-64 p-8">
+        <div class="max-w-6xl mx-auto">
+            <div class="bg-primary rounded-2xl border border-gray-700 p-8 shadow-2xl">
+                <div class="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 class="text-3xl font-bold mb-2">Chatbot de Testes</h1>
+                        <p class="text-gray-300">Teste seu aplicativo Android usando comandos em linguagem natural</p>
+                    </div>
+                    <div class="flex items-center gap-4">
+                        <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2">
+                            <i data-feather="circle" class="w-3 h-3"></i>
+                            Emulador Conectado
+                        </span>
+                        <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                            <i data-feather="settings" class="w-4 h-4"></i>
+                            Configurações
+                        </button>
+                    </div>
+                </div>
+                <div class="grid lg:grid-cols-4 gap-8">
+                    <!-- Área do Chat -->
+                    <div class="lg:col-span-3">
+                        <div class="bg-gray-900 rounded-2xl p-6 h-96 overflow-y-auto mb-4">
+                            <div class="text-center text-gray-400 py-8">
+                                <i data-feather="message-square" class="w-12 h-12 mx-auto mb-4"></i>
+                                <p>Chat iniciado. Digite comandos em linguagem natural para testar seu aplicativo.</p>
+                            </div>
+                        </div>
+                        <div class="flex gap-2">
+                            <input
+                                type="text"
+                                placeholder="Digite seu comando..."
+                                class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50"
+                            >
+                            <button class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2">
+                                <i data-feather="send" class="w-4 h-4"></i>
+                                Enviar
+                            </button>
+                        </div>
+                    </div>
+                    <!-- Painel de Ações Rápidas -->
+                    <div class="lg:col-span-1">
+                        <div class="bg-gray-800 rounded-2xl p-6 border border-gray-700">
+                            <h3 class="text-lg font-semibold mb-4 flex items-center gap-2">
+                                <i data-feather="zap" class="w-5 h-5 text-secondary"></i>
+                                Ações Rápidas
+                            </h3>
+                            <div class="space-y-3">
+                                <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-3 rounded-lg flex items-center gap-2 transition-all">
+                                    <i data-feather="download" class="w-4 h-4"></i>
+                                    Instalar APK
+                                </button>
+                                <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-3 rounded-lg flex items-center gap-2 transition-all">
+                                    <i data-feather="play" class="w-4 h-4"></i>
+                                    Executar App
+                                </button>
+                                <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-3 rounded-lg flex items-center gap-2 transition-all">
+                                    <i data-feather="camera" class="w-4 h-4"></i>
+                                    Capturar Tela
+                                </button>
+                                <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-3 rounded-lg flex items-center gap-2 transition-all">
+                                    <i data-feather="bar-chart-2" class="w-4 h-4"></i>
+                                    Performance
+                                </button>
+                                <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-3 rounded-lg flex items-center gap-2 transition-all">
+                                    <i data-feather="alert-circle" class="w-4 h-4"></i>
+                                    Logs de Erro
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

components/sidebar.js CHANGED Viewed

@@ -147,13 +147,17 @@ class CustomSidebar extends HTMLElement {
           </div>
           <div class="logo-text">Test Pilot</div>
         </div>
         <nav class="nav-items">
-          <a href="#" class="nav-item active">
             <i data-feather="home"></i>
             <span>Dashboard</span>
           </a>
           <a href="#" class="nav-item">
             <i data-feather="play"></i>
             <span>Testes Ativos</span>
@@ -174,8 +178,7 @@ class CustomSidebar extends HTMLElement {
             <span>Configurações</span>
           </a>
         </nav>
-        <div class="sidebar-footer">
           <div class="user-profile">
             <div class="user-avatar">
               <i data-feather="user"></i>

           </div>
           <div class="logo-text">Test Pilot</div>
         </div>
         <nav class="nav-items">
+          <a href="index.html" class="nav-item active">
             <i data-feather="home"></i>
             <span>Dashboard</span>
           </a>
+          <a href="chatbot.html" class="nav-item">
+            <i data-feather="message-square"></i>
+            <span>Chatbot</span>
+          </a>
           <a href="#" class="nav-item">
             <i data-feather="play"></i>
             <span>Testes Ativos</span>
             <span>Configurações</span>
           </a>
         </nav>
+<div class="sidebar-footer">
           <div class="user-profile">
             <div class="user-avatar">
               <i data-feather="user"></i>

index.html CHANGED Viewed

@@ -117,60 +117,15 @@
                     <button onclick="closeTestModal()" class="px-4 py-2 text-gray-300 hover:text-white transition-colors">
                         Cancelar
                     </button>
-                    <button onclick="startChatbot()" class="bg-secondary hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition-colors duration-300 flex items-center gap-2">
                         <i data-feather="play" class="w-4 h-4"></i>
                         Iniciar Teste
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Modal do Chatbot -->
-    <div id="chatbotModal" class="fixed inset-0 bg-black bg-opacity-75 hidden flex items-center justify-center z-50 p-4">
-        <div class="bg-primary rounded-2xl border border-gray-700 w-full max-w-4xl h-5/6 flex flex-col">
-            <div class="p-4 border-b border-gray-700 flex justify-between items-center">
-                <h3 class="text-lg font-semibold">Chatbot de Testes - Android Emulator</h3>
-                <button onclick="closeChatbot()" class="text-gray-400 hover:text-white">
-                    <i data-feather="x"></i>
-                </button>
-            </div>
-            <div class="flex-1 p-4 overflow-y-auto bg-gray-900 rounded-lg m-4">
-                <div class="text-center text-gray-400 py-8">
-                    <i data-feather="message-square" class="w-12 h-12 mx-auto mb-4"></i>
-                    <p>Chatbot iniciado. Digite comandos em linguagem natural para testar seu aplicativo.</p>
-                </div>
-            </div>
-            <div class="p-4 border-t border-gray-700">
-                <div class="flex gap-2 justify-center flex-wrap">
-                    <button class="bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-2 rounded-lg flex items-center gap-2 transition-all">
-                        <i data-feather="download" class="w-4 h-4"></i>
-                        Instalar Aplicativo
-                    </button>
-                    <button class="bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-2 rounded-lg flex items-center gap-2 transition-all">
-                        <i data-feather="play" class="w-4 h-4"></i>
-                        Rodar Testes
-                    </button>
-                    <button class="bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-2 rounded-lg flex items-center gap-2 transition-all">
-                        <i data-feather="image" class="w-4 h-4"></i>
-                        Abrir Evidências
-                    </button>
-                    <button class="bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-2 rounded-lg flex items-center gap-2 transition-all">
-                        <i data-feather="trash-2" class="w-4 h-4"></i>
-                        Excluir Mensagens
-                    </button>
-                    <button class="bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary px-4 py-2 rounded-lg flex items-center gap-2 transition-all">
-                        <i data-feather="settings" class="w-4 h-4"></i>
-                        Configuração
-                    </button>
-                </div>
             </div>
         </div>
     </div>
-    <script src="components/sidebar.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
@@ -184,18 +139,7 @@
             document.getElementById('testModal').classList.add('hidden');
             document.getElementById('testModal').classList.remove('flex');
         }
-        function startChatbot() {
-            closeTestModal();
-            document.getElementById('chatbotModal').classList.remove('hidden');
-            document.getElementById('chatbotModal').classList.add('flex');
-        }
-        function closeChatbot() {
-            document.getElementById('chatbotModal').classList.add('hidden');
-            document.getElementById('chatbotModal').classList.remove('flex');
-        }
-    </script>
 <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
 </html>

                     <button onclick="closeTestModal()" class="px-4 py-2 text-gray-300 hover:text-white transition-colors">
                         Cancelar
                     </button>
+                    <a href="chatbot.html" class="bg-secondary hover:bg-orange-600 text-white px-6 py-2 rounded-lg transition-colors duration-300 flex items-center gap-2">
                         <i data-feather="play" class="w-4 h-4"></i>
                         Iniciar Teste
+                    </a>
+</div>
             </div>
         </div>
     </div>
+<script src="components/sidebar.js"></script>
     <script src="script.js"></script>
     <script>
         feather.replace();
             document.getElementById('testModal').classList.add('hidden');
             document.getElementById('testModal').classList.remove('flex');
         }
+</script>
 <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -11,24 +11,6 @@ window.closeTestModal = function() {
     document.getElementById('testModal').classList.add('hidden');
     document.getElementById('testModal').classList.remove('flex');
 }
-window.startChatbot = function() {
-    const fileInput = document.getElementById('apkUpload');
-    if (fileInput.files.length === 0) {
-        alert('Por favor, selecione um arquivo .apk para continuar.');
-        return;
-    }
-    closeTestModal();
-    document.getElementById('chatbotModal').classList.remove('hidden');
-    document.getElementById('chatbotModal').classList.add('flex');
-}
-window.closeChatbot = function() {
-    document.getElementById('chatbotModal').classList.add('hidden');
-    document.getElementById('chatbotModal').classList.remove('flex');
-}
 // Drag and drop para upload de arquivo
 document.addEventListener('DOMContentLoaded', function() {
     const dropZone = document.querySelector('[class*="border-dashed"]');

     document.getElementById('testModal').classList.add('hidden');
     document.getElementById('testModal').classList.remove('flex');
 }
 // Drag and drop para upload de arquivo
 document.addEventListener('DOMContentLoaded', function() {
     const dropZone = document.querySelector('[class*="border-dashed"]');