Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PULSEDESK - Sistema de Chamados</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @keyframes heartbeat { | |
| 0% { transform: scale(0.95); } | |
| 25% { transform: scale(1.05); } | |
| 50% { transform: scale(0.95); } | |
| 75% { transform: scale(1.05); } | |
| 100% { transform: scale(0.95); } | |
| } | |
| .heartbeat { | |
| animation: heartbeat 1.5s infinite; | |
| } | |
| .tech-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #f7fafc; | |
| } | |
| .dark-mode .bg-white { | |
| background-color: #2d3748; | |
| } | |
| .dark-mode .bg-gray-100 { | |
| background-color: #4a5568; | |
| } | |
| .dark-mode .text-gray-800 { | |
| color: #f7fafc; | |
| } | |
| .dark-mode .border-gray-200 { | |
| border-color: #4a5568; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-3 flex items-center"> | |
| <div class="flex items-center"> | |
| <div class="relative w-12 h-12 mr-3"> | |
| <div class="absolute inset-0 bg-red-600 rounded-full"></div> | |
| <div class="absolute inset-2 flex items-center justify-center text-white"> | |
| <svg class="heartbeat w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <h1 class="tech-font text-2xl font-bold text-orange-500">PULSEDESK</h1> | |
| </div> | |
| <div class="ml-auto flex items-center"> | |
| <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> | |
| </svg> | |
| </button> | |
| <div class="ml-4"> | |
| <span class="text-sm font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1"> | |
| <!-- Sidebar --> | |
| <aside class="w-64 bg-white shadow-sm"> | |
| <nav class="p-4"> | |
| <ul> | |
| <li class="mb-2"> | |
| <button id="dashboardBtn" class="w-full text-left px-4 py-2 rounded bg-blue-100 text-blue-800 font-medium">Dashboard</button> | |
| </li> | |
| <li class="mb-2"> | |
| <button id="ticketsBtn" class="w-full text-left px-4 py-2 rounded hover:bg-gray-100">Chamados</button> | |
| </li> | |
| <li class="mb-2"> | |
| <button id="clientsBtn" class="w-full text-left px-4 py-2 rounded hover:bg-gray-100">Clientes</button> | |
| </li> | |
| <li class="mb-2"> | |
| <button id="reportsBtn" class="w-full text-left px-4 py-2 rounded hover:bg-gray-100">Relatórios</button> | |
| </li> | |
| <li class="mb-2"> | |
| <button id="settingsBtn" class="w-full text-left px-4 py-2 rounded hover:bg-gray-100">Configurações</button> | |
| </li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 p-6" id="dashboardContent"> | |
| <h2 class="text-2xl font-bold mb-6">Dashboard</h2> | |
| <!-- Status Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Chamados Abertos</p> | |
| <h3 class="text-2xl font-bold" id="openTickets">12</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Chamados em Andamento</p> | |
| <h3 class="text-2xl font-bold" id="inProgressTickets">8</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Chamados em Pausa</p> | |
| <h3 class="text-2xl font-bold" id="pausedTickets">3</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| </div> | |
| <div> | |
| <p class="text-gray-500">Chamados Finalizados</p> | |
| <h3 class="text-2xl font-bold" id="closedTickets">24</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Tickets --> | |
| <div class="bg-white rounded-lg shadow mb-8"> | |
| <div class="p-4 border-b"> | |
| <h3 class="font-medium">Últimos Chamados</h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Título</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4567</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Problema com impressora</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Empresa ABC</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Aberto</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/05/2023</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4566</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Acesso negado ao sistema</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Companhia XYZ</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Andamento</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">09/05/2023</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4565</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atualização de software</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Indústria 123</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Pausa</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">08/05/2023</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#4564</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Configuração de rede</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Serviços LTDA</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Finalizado</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">07/05/2023</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Charts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-medium mb-4">Status dos Chamados</h3> | |
| <div class="h-64"> | |
| <canvas id="ticketsStatusChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="font-medium mb-4">Chamados por Cliente</h3> | |
| <div class="h-64"> | |
| <canvas id="ticketsByClientChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t py-4"> | |
| <div class="container mx-auto px-4 text-center text-sm text-gray-500"> | |
| <p>PULSEDESK v1.0.0 - Sistema de Gerenciamento de Chamados</p> | |
| <p class="mt-1">© 2023 Todos os direitos reservados</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Modals --> | |
| <!-- Tickets Modal --> | |
| <div id="ticketsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-screen overflow-y-auto"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="text-lg font-medium">Novo Chamado</h3> | |
| <button id="closeTicketsModal" class="text-gray-500 hover:text-gray-700"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Departamento</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>TI</option> | |
| <option>Financeiro</option> | |
| <option>RH</option> | |
| <option>Comercial</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Equipamento</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Prioridade</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Baixa</option> | |
| <option>Média</option> | |
| <option>Alta</option> | |
| <option>Crítica</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Categoria</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Hardware</option> | |
| <option>Software</option> | |
| <option>Rede</option> | |
| <option>Outros</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Atribuir para</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Equipe de TI</option> | |
| <option>Suporte Técnico</option> | |
| <option>Administrador</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Título do Chamado</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Descrição Detalhada</label> | |
| <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button type="button" id="cancelTicket" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Cancelar</button> | |
| <button type="button" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Criar Chamado</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clients Modal --> | |
| <div id="clientsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-screen overflow-y-auto"> | |
| <div class="p-4 border-b flex justify-between items-center"> | |
| <h3 class="text-lg font-medium">Cadastro de Cliente</h3> | |
| <button id="closeClientsModal" class="text-gray-500 hover:text-gray-700"> | |
| <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <button id="clientInfoTab" class="border-b-2 border-blue-500 text-blue-600 px-1 py-4 text-sm font-medium">Informações do Cliente</button> | |
| <button id="departmentsTab" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Departamentos</button> | |
| <button id="employeesTab" class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-1 py-4 text-sm font-medium">Funcionários</button> | |
| </nav> | |
| </div> | |
| <!-- Client Info Tab Content --> | |
| <div id="clientInfoContent" class="mt-6"> | |
| <form> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome/Razão Social</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">CNPJ</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">E-mail</label> | |
| <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Telefone</label> | |
| <input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Endereço</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Cidade</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Estado</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>SP</option> | |
| <option>RJ</option> | |
| <option>MG</option> | |
| <option>RS</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Contrato</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nível de SLA</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Básico</option> | |
| <option>Padrão</option> | |
| <option>Premium</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button type="button" id="cancelClient" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Cancelar</button> | |
| <button type="button" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Salvar Cliente</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Departments Tab Content --> | |
| <div id="departmentsContent" class="mt-6 hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h4 class="text-md font-medium">Departamento de Cliente</h4> | |
| <button id="newDepartmentBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Novo Departamento</button> | |
| </div> | |
| <!-- New Department Form (Hidden by default) --> | |
| <div id="newDepartmentForm" class="bg-gray-50 p-4 rounded-md mb-6 hidden"> | |
| <h5 class="text-sm font-medium mb-4">Adicionar Novo Departamento</h5> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Nome do Departamento</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Responsável</label> | |
| <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-end space-x-3"> | |
| <button type="button" id="cancelNewDepartment" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray | |
| </html> |