Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mr. Mxyzptlk - | Fourlabs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="icon" type="image/x-icon" href="/static/imgs/icon.svg"> | |
| <link rel="stylesheet" href="/static/style/dashboard.css"> | |
| <link rel="stylesheet" type="text/css" href="/static/style/alert.css"> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#21223a', | |
| secondary: '#ff580f', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div id="alert-container" style="position: fixed; top: 80px; right: 20px; z-index: 1000; width: 100%; max-width: 500px;"></div> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-primary text-white w-64 md:w-20 lg:w-64 fixed h-full overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="w-full flex flex-col items-center justify-center"> | |
| <img | |
| alt="logo" | |
| loading="lazy" | |
| width="100" | |
| height="100" | |
| decoding="async" | |
| data-nimg="1" | |
| class="w-36" | |
| src="/static/imgs/logo-branco-labs.svg" | |
| style="color: transparent;margin-top: 8px;" | |
| > | |
| <p | |
| class="text-[10px] text-white mt-2 text-center" | |
| style="margin-top: -1px; margin-left: 12px;font-size: 9px;"> | |
| Inovação e experimentação | |
| </p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center"> | |
| <span class="font-bold">MS</span> | |
| </div> | |
| <div class="lg:block hidden"> | |
| <h3 class="font-semibold">Marlon Sousa</h3> | |
| <p class="text-xs text-gray-400">Admin</p> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i class="fa-solid fa-server text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Instances</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/chat/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i class="fa-solid fa-comment text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Chat Model</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i data-feather="activity" class="text-secondary w-5 h-5 mr-3"></i> | |
| <span class="ml-3 lg:block hidden">Monitoring</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/settings/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i class="fa-solid fa-screwdriver-wrench text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Configurações</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-700"> | |
| <form id="logout-form" method="POST" action="/account/logout/" class="hidden"> | |
| <input type="hidden" name="csrfmiddlewaretoken" value="z7pEvywKWWqYiTLM5Bk3w7XoNX0Jyhomj466YTwdN7wBa8OVfQS2Yq5QaKH8UAur"> | |
| </form> | |
| <a href="#" onclick="document.getElementById('logout-form').submit(); return false;" class="sidebar-item flex items-center p-3 rounded-lg"> | |
| <i class="fas fa-sign-out-alt text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 ml-0 md:ml-20 lg:ml-64 overflow-y-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobileToggleSidebar" class="text-gray-600 lg:hidden block"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-bold text-primary"></h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="/launch/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> | |
| Launch New Instance | |
| </a> | |
| <div class="relative"> | |
| <button id="notificationsBtn" class="relative"> | |
| <i class="fas fa-bell text-xl text-gray-600"></i> | |
| <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">0</span> | |
| </button> | |
| <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50"> | |
| <div class="py-1"> | |
| <div class="px-4 py-2 border-b border-gray-200"> | |
| <h3 class="text-sm font-medium text-gray-700">Notifications</h3> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-50 text-center"> | |
| <a href="#" class="text-sm font-medium text-secondary hover:text-primary">View all notifications</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 animate-fade-in"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <h3 class="text-2xl font-semibold text-dark">Configurações da Instância</h3> | |
| <div class="flex items-center space-x-2 text-sm text-gray-500"> | |
| <i data-feather="info" class="w-4 h-4"></i> | |
| <span>Todos os campos são obrigatórios</span> | |
| </div> | |
| </div> | |
| <form id="deployForm" method="post"> | |
| <input type="hidden" name="csrfmiddlewaretoken" value="z7pEvywKWWqYiTLM5Bk3w7XoNX0Jyhomj466YTwdN7wBa8OVfQS2Yq5QaKH8UAur"> | |
| <div class="grid grid-cols-1 lg:grid-cols-1 gap-8"> | |
| <!-- Availability Zone --> | |
| <div> | |
| <label class="block text-sm font-semibold text-dark mb-3 flex items-center"> | |
| <i data-feather="globe" class="w-4 h-4 mr-2 text-secondary"></i> | |
| Zona de Disponibilidade | |
| </label> | |
| <select name="availability_zone" class="w-full px-4 py-3 border border-gray-200 rounded-xl" required id="id_availability_zone"> | |
| <option value="" selected>---------</option> | |
| <option value="a0d1cf94-272f-48e4-826c-d7f5f9a3ceb5">southamerica-east1</option> | |
| </select> | |
| <p class="text-xs text-gray-500 mt-2">Recomendado: Mais próxima da sua localização</p> | |
| </div> | |
| </div> | |
| <!-- LLM Model --> | |
| <div class="mb-8 mt-8"> | |
| <label class="block text-sm font-semibold text-dark mb-4 flex items-center"> | |
| <i data-feather="cpu" class="w-4 h-4 mr-2 text-secondary"></i> | |
| Modelo LLM do Ollama | |
| </label> | |
| <!-- Tabs Navigation --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <div class="flex space-x-8"> | |
| <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-secondary border-secondary" data-tab="light"> | |
| <i class="fa-solid fa-feather mr-2"></i> | |
| Leve | |
| </button> | |
| <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-gray-500 border-transparent hover:text-gray-700" data-tab="medium"> | |
| <i class="fa-solid fa-microchip mr-2"></i> | |
| Médio | |
| </button> | |
| <button type="button" class="tab-button py-3 px-1 border-b-2 font-medium text-sm transition-all duration-300 text-gray-500 border-transparent hover:text-gray-700" data-tab="heavy"> | |
| <i class="fa-solid fa-server mr-2"></i> | |
| Pesado | |
| </button> | |
| </div> | |
| <!-- Light Models Tab --> | |
| <div id="light-tab" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="95d05e19-6063-4fa2-804a-c551e37358b5" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">deepseek-r1:1.5b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 2 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="5fef64b9-ac1d-4461-a9e9-148582e780f0" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">deepseek-r1:7b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 5 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="65674ada-0236-49ce-881e-c626ac44da07" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">deepseek-r1:8b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 5 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="a74754f0-abe0-4691-a719-2b9ef0d2e0e8" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">gemma3:12b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 8 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="6eae46ac-f250-4ade-8f1a-b27a2ffee743" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">gemma3:1b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 1 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="e7cd232e-e411-48d0-96d1-d29fe615889b" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">gemma3:4b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 4 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="5944bd6f-bca5-4315-92e6-e587bf57d5c8" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">llama3:8b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 5 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="bf35414d-d84b-4ed6-8320-5b27b48b3821" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">llama3.1:8b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 5 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="0b685e78-a520-4d3a-8adc-f3f3305d4162" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">llama3.2:3b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 2 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="acada2a7-eaa8-4284-866b-704cc5f6f208" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">phi3:14b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 8 GB | |
| </p> | |
| </div> | |
| </label> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="4480debb-4323-45fe-8449-5aeff0b6a6f6" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-feather text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">phi3:3.8b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Leve – 2 GB | |
| </p> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Medium Models Tab --> | |
| <div id="medium-tab" class="tab-content hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <label class="cursor-pointer"> | |
| <!-- o input vem primeiro e é peer --> | |
| <input type="radio" name="llm_model" value="dda12d53-04d9-4099-8773-bf41d5e5933e" class="hidden peer" required> | |
| <!-- este div é estilizado conforme o estado do radio --> | |
| <div class="border-2 border-gray-200 rounded-xl p-5 transition-all duration-300 | |
| peer-checked:border-secondary hover:border-secondary hover:shadow-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3 | |
| peer-checked:ring-2 peer-checked:ring-secondary"> | |
| <i class="fa-solid fa-microchip text-gray-700"></i> | |
| </div> | |
| <h4 class="font-semibold text-dark">phi4:14b</h4> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| Médio – 9 GB | |
| </p> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Heavy Models Tab --> | |
| <div id="heavy-tab" class="tab-content hidden"> | |
| <div class="text-center py-12"> | |
| <i class="fa-solid fa-server text-4xl text-gray-300 mb-4"></i> | |
| <h4 class="font-semibold text-dark mb-2">Modelos Pesados</h4> | |
| <p class="text-sm text-gray-600"> | |
| Em breve disponíveis | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" class="w-full bg-gradient-to-r from-secondary to-accent hover:from-secondary/90 hover:to-accent/90 text-white font-semibold py-4 px-8 rounded-xl transition-all duration-300 hover:shadow-xl flex items-center justify-center group"> | |
| <i data-feather="cloud" class="w-5 h-5 mr-2 group-hover:animate-bounce"></i> | |
| Iniciar Deploy da Instância | |
| <i data-feather="arrow-right" class="w-5 h-5 ml-2 opacity-0 group-hover:opacity-100 transition-opacity"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| points: 12.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Tab functionality | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const tabId = this.getAttribute('data-tab'); | |
| // Update tab buttons | |
| document.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('text-secondary', 'border-secondary'); | |
| btn.classList.add('text-gray-500', 'border-transparent', 'hover:text-gray-700'); | |
| }); | |
| this.classList.remove('text-gray-500', 'border-transparent', 'hover:text-gray-700'); | |
| this.classList.add('text-secondary', 'border-secondary'); | |
| // Show selected tab content | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| content.classList.remove('active'); | |
| }); | |
| const selectedTab = document.getElementById(tabId + '-tab'); | |
| selectedTab.classList.remove('hidden'); | |
| selectedTab.classList.add('active'); | |
| }); | |
| }); | |
| // Pagination functionality | |
| document.querySelectorAll('.pagination a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically fetch the next page of results | |
| // For demo purposes we'll just show an alert | |
| if(this.textContent.trim() === '2' || this.textContent.trim() === '3') { | |
| alert('Loading page ' + this.textContent.trim()); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <script src="/static/script/alert.js"></script> | |
| </body> | |
| </html> | |