Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JusProtege - Gestão de Processos Jurídicos</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, #1e3a8a 0%, #1e40af 100%); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 70px; | |
| } | |
| .sidebar-collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .logo-text { | |
| display: none; | |
| } | |
| .sidebar-collapsed .menu-item { | |
| justify-content: center; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chatbot-container { | |
| transition: all 0.3s ease; | |
| bottom: -400px; | |
| } | |
| .chatbot-container.open { | |
| bottom: 0; | |
| } | |
| .document-preview { | |
| height: 200px; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| width: 100%; | |
| position: fixed; | |
| bottom: 0; | |
| height: 60px; | |
| z-index: 1000; | |
| flex-direction: row; | |
| overflow-x: auto; | |
| } | |
| .sidebar-collapsed { | |
| width: 100%; | |
| height: 60px; | |
| } | |
| .sidebar-collapsed .menu-item { | |
| flex-direction: column; | |
| padding: 10px; | |
| min-width: 60px; | |
| } | |
| .sidebar-collapsed .menu-item i { | |
| margin-right: 0; | |
| margin-bottom: 5px; | |
| } | |
| .main-content { | |
| margin-bottom: 80px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar bg-blue-900 text-white flex flex-col w-64"> | |
| <div class="p-4 flex items-center"> | |
| <div class="bg-white p-2 rounded-lg mr-3"> | |
| <i class="fas fa-balance-scale text-blue-900 text-xl"></i> | |
| </div> | |
| <span class="logo-text font-bold text-xl">JusProtege</span> | |
| </div> | |
| <div class="px-4 pb-4"> | |
| <div class="bg-blue-800 rounded-lg p-3 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3"> | |
| <span class="text-white font-bold">AD</span> | |
| </div> | |
| <div class="sidebar-text"> | |
| <div class="font-medium">Admin User</div> | |
| <div class="text-xs text-blue-200">Administrador</div> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="flex-1 overflow-y-auto"> | |
| <div class="px-2 space-y-1"> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md bg-blue-800 text-white"> | |
| <i class="fas fa-tachometer-alt mr-3 text-blue-300"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span class="sidebar-text">Clientes</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-file-contract mr-3"></i> | |
| <span class="sidebar-text">Contratos</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| <span class="sidebar-text">Agendamentos</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-comments mr-3"></i> | |
| <span class="sidebar-text">Consultas</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-folder-open mr-3"></i> | |
| <span class="sidebar-text">Processos</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span class="sidebar-text">Relatórios</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-money-bill-wave mr-3"></i> | |
| <span class="sidebar-text">Financeiro</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center px-3 py-3 text-sm font-medium rounded-md text-blue-200 hover:bg-blue-800 hover:text-white"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Configurações</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="p-4"> | |
| <button onclick="toggleSidebar()" class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md text-white bg-blue-800 hover:bg-blue-700"> | |
| <i class="fas fa-chevron-left mr-2 sidebar-text"></i> | |
| <span class="sidebar-text">Recolher Menu</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden main-content"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button onclick="toggleSidebar()" class="mr-4 text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold text-gray-900">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <div class="relative"> | |
| <button onclick="toggleUserDropdown()" class="flex items-center space-x-2 focus:outline-none"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">AD</span> | |
| </div> | |
| <span class="hidden md:inline">Admin User</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Perfil</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Configurações</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sair</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-4 bg-gray-50"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4 card-hover transition duration-300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-user-plus text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Novos Clientes</p> | |
| <p class="text-2xl font-bold">24</p> | |
| <p class="text-xs text-green-500">+12% este mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 card-hover transition duration-300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-file-contract text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Contratos</p> | |
| <p class="text-2xl font-bold">156</p> | |
| <p class="text-xs text-blue-500">+8% este mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 card-hover transition duration-300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-calendar-check text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Consultas</p> | |
| <p class="text-2xl font-bold">87</p> | |
| <p class="text-xs text-purple-500">+15% este mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 card-hover transition duration-300"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-money-bill-wave text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Receita</p> | |
| <p class="text-2xl font-bold">R$ 42,580</p> | |
| <p class="text-xs text-yellow-500">+22% este mês</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Clients and Plans --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Recent Clients --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden lg:col-span-2"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h2 class="text-lg font-semibold text-gray-900">Clientes Recentes</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">AC</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Acme Corp</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">PREMIUM</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Contratado em 15/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">TC</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Tech Solutions</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">ESSENCIAL</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Contratado em 12/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">MF</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Mega Foods</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">START</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Contratado em 10/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">GC</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Global Corp</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800">CORPORATIVO</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Contratado em 05/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-right"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Ver todos</a> | |
| </div> | |
| </div> | |
| <!-- Plans Overview --> | |
| <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-900">Distribuição de Planos</h2> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="h-64"> | |
| <canvas id="plansChart"></canvas> | |
| </div> | |
| <div class="mt-4 space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm text-gray-600">PREMIUM - 35%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm text-gray-600">ESSENCIAL - 30%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-sm text-gray-600">START - 25%</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-orange-500 mr-2"></div> | |
| <span class="text-sm text-gray-600">CORPORATIVO - 10%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Appointments --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-semibold text-gray-900">Próximos Agendamentos</h2> | |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-plus mr-1"></i> Novo Agendamento | |
| </button> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">AC</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Acme Corp</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmado</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Consulta Jurídica - 20/06/2023 às 14:30</p> | |
| </div> | |
| <div class="ml-4 flex space-x-2"> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">TC</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Tech Solutions</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pendente</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Revisão de Contrato - 22/06/2023 às 10:00</p> | |
| </div> | |
| <div class="ml-4 flex space-x-2"> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <span class="text-white font-bold">MF</span> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-sm font-medium text-gray-900">Mega Foods</h3> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Confirmado</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Parecer Jurídico - 25/06/2023 às 16:15</p> | |
| </div> | |
| <div class="ml-4 flex space-x-2"> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-phone"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <button class="p-1 text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-right"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Ver todos</a> | |
| </div> | |
| </div> | |
| <!-- Documents and Contracts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> | |
| <!-- Recent Documents --> | |
| <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-900">Documentos Recentes</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">Contrato de Prestação de Serviços</h3> | |
| <p class="text-sm text-gray-500">Enviado por Acme Corp em 18/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-600"> | |
| <i class="fas fa-file-word"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">Minuta de Notificação</h3> | |
| <p class="text-sm text-gray-500">Enviado por Tech Solutions em 17/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-10 h-10 rounded bg-yellow-100 flex items-center justify-center text-yellow-600"> | |
| <i class="fas fa-file-image"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="text-sm font-medium text-gray-900">Comprovante de Pagamento</h3> | |
| <p class="text-sm text-gray-500">Enviado por Mega Foods em 16/06/2023</p> | |
| </div> | |
| <div class="ml-4"> | |
| <button class="text-blue-600 hover:text-blue-800"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-right"> | |
| <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Ver todos</a> | |
| </div> | |
| </div> | |
| <!-- Contract Generator --> | |
| <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-900">Gerador de Contratos</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de Contrato</label> | |
| <select class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Contrato de Prestação de Serviços</option> | |
| <option>Contrato Social</option> | |
| <option>Contrato de Trabalho</option> | |
| <option>Contrato de Franquia</option> | |
| <option>Termo de Confidencialidade</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Cliente</label> | |
| <select class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Acme Corp</option> | |
| <option>Tech Solutions</option> | |
| <option>Mega Foods</option> | |
| <option>Global Corp</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Modelo</label> | |
| <select class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> | |
| <option>Padrão</option> | |
| <option>Personalizado para START</option> | |
| <option>Personalizado para ESSENCIAL</option> | |
| <option>Personalizado para PREMIUM</option> | |
| <option>Personalizado para CORPORATIVO</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-end"> | |
| <button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-file-download mr-1"></i> Gerar Contrato | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Chatbot Button --> | |
| <button onclick="toggleChatbot()" class="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-blue-600 text-white shadow-lg flex items-center justify-center hover:bg-blue-700 focus:outline-none z-50"> | |
| <i class="fas fa-robot text-xl"></i> | |
| </button> | |
| <!-- Chatbot Container --> | |
| <div id="chatbotContainer" class="chatbot-container fixed right-6 w-80 bg-white rounded-t-lg shadow-xl border border-gray-200 z-50"> | |
| <div class="bg-blue-600 text-white px-4 py-3 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-medium">Assistente Jurídico</h3> | |
| <button onclick="toggleChatbot()" class="text-white hover:text-gray-200"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto bg-gray-50"> | |
| <div class="mb-4"> | |
| <div class="bg-blue-100 rounded-lg p-3 text-sm text-gray-800"> | |
| Olá! Sou o assistente virtual da JusProtege. Como posso ajudar você hoje? | |
| </div> | |
| </div> | |
| <div class="mb-4 flex justify-end"> | |
| <div class="bg-blue-600 rounded-lg p-3 text-sm text-white max-w-xs"> | |
| Gostaria de saber mais sobre o plano ESSENCIAL. | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="bg-blue-100 rounded-lg p-3 text-sm text-gray-800"> | |
| O plano ESSENCIAL inclui 4 consultas jurídicas por mês, 2 contratos sob demanda, 1 parecer jurídico simples e muito mais por R$ 397/mês. Posso enviar mais detalhes? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Digite sua mensagem..." class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Toggle sidebar | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebar.classList.toggle('sidebar-collapsed'); | |
| } | |
| // Toggle user dropdown | |
| function toggleUserDropdown() { | |
| const dropdown = document.getElementById('userDropdown'); | |
| dropdown.classList.toggle('hidden'); | |
| } | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const dropdown = document.getElementById('userDropdown'); | |
| const button = document.querySelector('[onclick="toggleUserDropdown()"]'); | |
| if (!button.contains(event.target) && !dropdown.contains(event.target)) { | |
| dropdown.classList.add('hidden'); | |
| } | |
| }); | |
| // Toggle chatbot | |
| function toggleChatbot() { | |
| const chatbot = document.getElementById('chatbotContainer'); | |
| chatbot.classList.toggle('open'); | |
| } | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Plans Chart | |
| const plansCtx = document.getElementById('plansChart').getContext('2d'); | |
| const plansChart = new Chart(plansCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['START', 'ESSENCIAL', 'PREMIUM', 'CORPORATIVO'], | |
| datasets: [{ | |
| data: [25, 30, 35, 10], | |
| backgroundColor: [ | |
| '#f59e0b', | |
| '#3b82f6', | |
| '#10b981', | |
| '#f97316' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| cutout: '70%' | |
| } | |
| }); | |
| }); | |
| </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=JEFFERSON1995/jusprotege2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |