Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SST Document Manager</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"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #10b981 0%, #ffffff 50%, #1f2937 100%); | |
| } | |
| .document-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .chat-bubble { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .pulse-alert { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Main Container --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 flex items-center justify-center border-b border-gray-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-shield-alt text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold">SST Manager</span> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-green-800"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Admin User</p> | |
| <p class="text-xs text-gray-400">[email protected]</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="p-2"> | |
| <p class="text-xs uppercase text-gray-400 mb-2 px-2">Menu Principal</p> | |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded bg-gray-700 text-white"> | |
| <i class="fas fa-tachometer-alt w-5"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1"> | |
| <i class="fas fa-file-alt w-5"></i> | |
| <span>Documentos SST</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1"> | |
| <i class="fas fa-leaf w-5"></i> | |
| <span>Ambientais</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1"> | |
| <i class="fas fa-building w-5"></i> | |
| <span>Terceiros</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 px-3 py-2 rounded hover:bg-gray-700 text-gray-300 hover:text-white mt-1"> | |
| <i class="fas fa-cog w-5"></i> | |
| <span>Configurações</span> | |
| </a> | |
| </div> | |
| <div class="p-2 mt-4"> | |
| <p class="text-xs uppercase text-gray-400 mb-2 px-2">Ramo de Atividade</p> | |
| <div class="px-2"> | |
| <select class="w-full bg-gray-700 text-white rounded px-3 py-2 text-sm border border-gray-600 focus:outline-none focus:ring-1 focus:ring-green-500"> | |
| <option>Construção Civil</option> | |
| <option>Indústria</option> | |
| <option>Comércio</option> | |
| <option>Serviços</option> | |
| <option>Saúde</option> | |
| </select> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="p-4 border-t border-gray-700"> | |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 rounded flex items-center justify-center space-x-2"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Sair</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <button id="sidebarToggle" class="text-gray-500 mr-4 md:hidden"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="relative"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span> | |
| </div> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-green-800"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Documentos SST</p> | |
| <p class="text-2xl font-bold">24</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-green-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-500">Vencendo em 30 dias</span> | |
| <span class="font-semibold text-red-500">3</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Documentos Ambientais</p> | |
| <p class="text-2xl font-bold">12</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-leaf text-blue-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-500">Próximos a vencer</span> | |
| <span class="font-semibold text-yellow-500">2</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 16%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">Certificados Terceiros</p> | |
| <p class="text-2xl font-bold">18</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-building text-purple-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-500">Vencidos</span> | |
| <span class="font-semibold text-red-500">1</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 8%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-gray-500">NRs Aplicáveis</p> | |
| <p class="text-2xl font-bold">8</p> | |
| </div> | |
| <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"> | |
| <i class="fas fa-clipboard-list text-orange-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-500">Atualizações recentes</span> | |
| <span class="font-semibold text-green-500">1</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mt-1"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 12%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Documents Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent Documents --> | |
| <div class="lg:col-span-2 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">Documentos Recentes</h2> | |
| <button class="text-sm text-green-600 hover:text-green-800 font-medium">Ver todos</button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Document Item --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">PPRA - 2023</p> | |
| <p class="text-sm text-gray-500">Construção Civil</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-green-600">Válido até 15/12/2023</p> | |
| <p class="text-xs text-gray-500">30 dias restantes</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Item with Alert --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer transition pulse-alert"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-file-word text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">PCMSO - 2023</p> | |
| <p class="text-sm text-gray-500">Construção Civil</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">Vence em 7 dias</p> | |
| <p class="text-xs text-gray-500">23/11/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Item --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-file-excel text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Laudo de Insalubridade</p> | |
| <p class="text-sm text-gray-500">NR-15</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-yellow-600">Vence em 15 dias</p> | |
| <p class="text-xs text-gray-500">01/12/2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Item --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer transition"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-file-pdf text-red-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">CART - 2023</p> | |
| <p class="text-sm text-gray-500">NR-18</p> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-green-600">Válido até 30/04/2024</p> | |
| <p class="text-xs text-gray-500">163 dias restantes</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions and SST Bot --> | |
| <div class="space-y-6"> | |
| <!-- Quick Actions --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-800">Ações Rápidas</h2> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <button class="w-full flex items-center space-x-3 bg-green-50 hover:bg-green-100 text-green-700 px-4 py-3 rounded-lg transition"> | |
| <i class="fas fa-plus-circle text-green-600"></i> | |
| <span>Novo Documento SST</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-3 bg-blue-50 hover:bg-blue-100 text-blue-700 px-4 py-3 rounded-lg transition"> | |
| <i class="fas fa-cloud-upload-alt text-blue-600"></i> | |
| <span>Upload em Massa</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-3 bg-purple-50 hover:bg-purple-100 text-purple-700 px-4 py-3 rounded-lg transition"> | |
| <i class="fas fa-building text-purple-600"></i> | |
| <span>Cadastrar Terceiro</span> | |
| </button> | |
| <button class="w-full flex items-center space-x-3 bg-yellow-50 hover:bg-yellow-100 text-yellow-700 px-4 py-3 rounded-lg transition"> | |
| <i class="fas fa-file-export text-yellow-600"></i> | |
| <span>Gerar Relatório</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- SST Bot --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">SST Bot Assistente</h2> | |
| <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xs"></i> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="bg-gray-100 rounded-lg p-3 mb-3"> | |
| <p class="text-sm text-gray-700">Olá! Sou o assistente de SST. Como posso ajudar você hoje?</p> | |
| </div> | |
| <div id="chatContainer" class="h-48 overflow-y-auto mb-3 space-y-2"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input type="text" id="chatInput" placeholder="Digite sua pergunta..." class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500"> | |
| <button id="sendChat" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 grid grid-cols-2 gap-2"> | |
| <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded"> | |
| O que é PPRA? | |
| </button> | |
| <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded"> | |
| NRs para construção | |
| </button> | |
| <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded"> | |
| PCMSO obrigatório? | |
| </button> | |
| <button class="quick-question bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded"> | |
| Documentos vencendo | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NRs Section --> | |
| <div class="mt-6 bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-800">NRs Aplicáveis ao Seu Ramo</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Construção Civil</span> | |
| <button class="text-sm text-green-600 hover:text-green-800 font-medium">Ver todas</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-4"> | |
| <!-- NR Card --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-gray-800">NR-18</span> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Atualizada</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Condições e Meio Ambiente de Trabalho na Indústria da Construção</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Última revisão: 2022</span> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-book-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- NR Card --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-gray-800">NR-35</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Ativa</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Trabalho em Altura</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Última revisão: 2021</span> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-book-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- NR Card --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-gray-800">NR-10</span> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Ativa</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Segurança em Instalações e Serviços em Eletricidade</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Última revisão: 2019</span> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-book-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- NR Card --> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-bold text-gray-800">NR-06</span> | |
| <span class="text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">Pendente</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Equipamento de Proteção Individual - EPI</p> | |
| <div class="flex justify-between items-center text-xs text-gray-500"> | |
| <span>Nova versão em análise</span> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i class="fas fa-book-open"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Document Upload Modal (Hidden by default) --> | |
| <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold text-gray-800">Upload de Documento</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2">Tipo de Documento</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500"> | |
| <option>Selecione...</option> | |
| <option>PPRA</option> | |
| <option>PCMSO</option> | |
| <option>Laudo de Insalubridade</option> | |
| <option>CART</option> | |
| <option>NR-10</option> | |
| <option>NR-35</option> | |
| <option>Outro</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2">Data de Validade</label> | |
| <input type="date" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-1 focus:ring-green-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2">Arquivo</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> | |
| <p class="text-gray-500">Arraste e solte arquivos aqui ou</p> | |
| <button class="mt-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm"> | |
| Selecione arquivos | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"> | |
| Cancelar | |
| </button> | |
| <button class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg"> | |
| Enviar Documento | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle sidebar on mobile | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('hidden'); | |
| document.querySelector('.sidebar').classList.toggle('block'); | |
| }); | |
| // Chat functionality for SST Bot | |
| document.getElementById('sendChat').addEventListener('click', function() { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Add user message | |
| const userMsg = document.createElement('div'); | |
| userMsg.className = 'flex justify-end'; | |
| userMsg.innerHTML = ` | |
| <div class="bg-green-100 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm text-gray-800">${message}</p> | |
| </div> | |
| `; | |
| document.getElementById('chatContainer').appendChild(userMsg); | |
| // Clear input | |
| input.value = ''; | |
| // Add bot response after a short delay | |
| setTimeout(() => { | |
| const botResponses = [ | |
| "O PPRA (Programa de Prevenção de Riscos Ambientais) é obrigatório para todas as empresas que admitam trabalhadores como empregados, conforme estabelece a NR-9.", | |
| "Para o ramo de construção civil, as NRs mais relevantes são: NR-18 (Condições de Trabalho na Construção), NR-35 (Trabalho em Altura), NR-10 (Segurança em Eletricidade) e NR-6 (EPIs).", | |
| "Sim, o PCMSO (Programa de Controle Médico de Saúde Ocupacional) é obrigatório conforme a NR-7 para todas as empresas que possuam empregados regidos pela CLT.", | |
| "Você tem 3 documentos vencendo em breve: PCMSO (7 dias), Laudo de Insalubridade (15 dias) e PPRA (30 dias)." | |
| ]; | |
| const randomResponse = botResponses[Math.floor(Math.random() * botResponses.length)]; | |
| const botMsg = document.createElement('div'); | |
| botMsg.className = 'flex justify-start'; | |
| botMsg.innerHTML = ` | |
| <div class="bg-gray-100 rounded-lg p-3 max-w-xs"> | |
| <p class="text-sm text-gray-700">${randomResponse}</p> | |
| </div> | |
| `; | |
| document.getElementById('chatContainer').appendChild(botMsg); | |
| // Scroll to bottom | |
| document.getElementById('chatContainer').scrollTop = document.getElementById('chatContainer').scrollHeight; | |
| }, 1000); | |
| } | |
| }); | |
| // Quick question buttons | |
| document.querySelectorAll('.quick-question').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const question = this.textContent.trim(); | |
| document.getElementById('chatInput').value = question; | |
| document.getElementById('sendChat').click(); | |
| }); | |
| }); | |
| // Modal functionality | |
| document.querySelectorAll('[data-modal-toggle="uploadModal"]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.getElementById('uploadModal').classList.remove('hidden'); | |
| }); | |
| }); | |
| document.getElementById('closeModal').addEventListener('click', function() { | |
| document.getElementById('uploadModal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(event) { | |
| if (event.target === document.getElementById('uploadModal')) { | |
| document.getElementById('uploadModal').classList.add('hidden'); | |
| } | |
| }); | |
| // Allow pressing Enter in chat input | |
| document.getElementById('chatInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| document.getElementById('sendChat').click(); | |
| } | |
| }); | |
| </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=Prstore38/sst-menager" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |