Spaces:
Running
Running
Crie a interface da área de "Gestão de Promoters" de um sistema web chamado "EventOps Pro", voltado para empresas que organizam eventos. Essa tela deve estar integrada a um painel administrativo. Utilize React + TailwindCSS (ou HTML/CSS/JS puro, se for necessário). A estrutura precisa ser funcional, visualmente clara e organizada para desktop. A tela deve conter: 1. **Título da Página:** "Gestão de Promoters" 2. **Botões principais no topo:** - [ + Cadastrar novo Promoter ] - [ Exportar Relatório ] (PDF ou Excel) - [ Gerar Links ou QR Codes ] 3. **Tabela/Listagem de Promoters** - Colunas: - Foto ou ícone do promoter - Nome completo - Telefone ou @Instagram - Link de venda (com botão de copiar) - Número de ingressos vendidos - Valor total em R$ - Comissão em R$ - Status (ativo/inativo) - Ações (editar / desativar / visualizar perfil) 4. **Filtros e busca lateral ou superior:** - Buscar por nome - Filtrar por status (ativo, inativo) - Filtrar por evento específico 5. **Modal de Cadastro de Promoter:** - Campos: - Nome completo - Telefone - Instagram (opcional) - CPF (opcional) - Evento vinculado - Porcentagem de comissão - Gerar link personalizado 6. **Detalhamento individual do promoter (ao clicar):** - Perfil com foto - Dados de contato - Lista de eventos vinculados - Desempenho por evento - Histórico de vendas - Total comissionado - Status de pagamento (pago / pendente) O layout deve ser responsivo, com ícones, tipografia clara e cores neutras com destaques visuais nos botões e status. A navegação deve ser fluida e profissional, com menus laterais se necessário. Pode usar ícones da biblioteca Lucide, Heroicons ou Font Awesome. Apenas o frontend. Pode usar dados fictícios para ilustrar a tabela e os gráficos de desempenho. - Initial Deployment
6c0f14c verified Download index.html from cortezzcs21/myspace: direct link, hf CLI and curl.
- Browser
- Download file 49.7 kB
-
https://huggingface.co/spaces/cortezzcs21/myspace/resolve/main/index.html
- Command line
-
hf download hf://spaces/cortezzcs21/myspace/index.html
-
curl -L -o index.html https://huggingface.co/spaces/cortezzcs21/myspace/resolve/main/index.html
49.7 kB
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EventOps Pro - Gestão de Promoters</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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .modal { | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .modal.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translateY(-20px); | |
| } | |
| .profile-card { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .link-copy:hover .copy-icon { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> | |
| <div class="p-4 border-b border-indigo-700"> | |
| <h1 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| EventOps Pro | |
| </h1> | |
| </div> | |
| <nav class="p-4"> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700"> | |
| <i class="fas fa-tachometer-alt mr-2"></i> Dashboard | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="block py-2 px-4 rounded bg-indigo-900"> | |
| <i class="fas fa-users mr-2"></i> Promoters | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700"> | |
| <i class="fas fa-ticket-alt mr-2"></i> Eventos | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700"> | |
| <i class="fas fa-chart-line mr-2"></i> Relatórios | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="block py-2 px-4 rounded hover:bg-indigo-700"> | |
| <i class="fas fa-cog mr-2"></i> Configurações | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-4 text-gray-600"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-2xl font-bold text-gray-800">Gestão de Promoters</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Buscar..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <span class="hidden md:inline">Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-wrap justify-between items-center mb-6 gap-4"> | |
| <div class="flex space-x-3"> | |
| <button onclick="openModal()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Cadastrar novo Promoter | |
| </button> | |
| <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-file-export mr-2"></i> Exportar Relatório | |
| </button> | |
| <button class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-qrcode mr-2"></i> Gerar Links/QR Codes | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-600">Filtrar:</span> | |
| <select class="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Todos os status</option> | |
| <option>Ativo</option> | |
| <option>Inativo</option> | |
| </select> | |
| <select class="border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>Todos os eventos</option> | |
| <option>Festa Junina 2023</option> | |
| <option>Carnaval 2024</option> | |
| <option>Ano Novo 2024</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Promoters Table --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Promoter</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contato</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Link de Venda</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ingressos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor Total</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comissão</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <!-- Row 1 --> | |
| <tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('1')"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ana Carolina Silva</div> | |
| <div class="text-sm text-gray-500">CPF: 123.456.789-00</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">(11) 98765-4321</div> | |
| <div class="text-sm text-gray-500">@anacarol</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="link-copy flex items-center"> | |
| <span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/ana-carol</span> | |
| <button onclick="event.stopPropagation(); copyLink('eventops.pro/ana-carol')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 87 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 8.700,00 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 870,00 | |
| </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"> | |
| Ativo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex space-x-2"> | |
| <button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); toggleStatus('1')" class="text-yellow-600 hover:text-yellow-900"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); openProfile('1')" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 2 --> | |
| <tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('2')"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Carlos Eduardo</div> | |
| <div class="text-sm text-gray-500">CPF: 987.654.321-00</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">(21) 99876-5432</div> | |
| <div class="text-sm text-gray-500">@carlosedu</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="link-copy flex items-center"> | |
| <span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/carlos-edu</span> | |
| <button onclick="event.stopPropagation(); copyLink('eventops.pro/carlos-edu')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 124 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 12.400,00 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 1.240,00 | |
| </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"> | |
| Ativo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex space-x-2"> | |
| <button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); toggleStatus('2')" class="text-yellow-600 hover:text-yellow-900"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); openProfile('2')" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 3 --> | |
| <tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('3')"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Juliana Santos</div> | |
| <div class="text-sm text-gray-500">CPF: 456.789.123-00</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">(31) 98765-1234</div> | |
| <div class="text-sm text-gray-500">@julianasantos</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="link-copy flex items-center"> | |
| <span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/juliana-santos</span> | |
| <button onclick="event.stopPropagation(); copyLink('eventops.pro/juliana-santos')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 56 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 5.600,00 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 560,00 | |
| </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"> | |
| Inativo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex space-x-2"> | |
| <button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); toggleStatus('3')" class="text-yellow-600 hover:text-yellow-900"> | |
| <i class="fas fa-check-circle"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); openProfile('3')" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 4 --> | |
| <tr class="hover:bg-gray-50 cursor-pointer" onclick="openProfile('4')"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Roberto Almeida</div> | |
| <div class="text-sm text-gray-500">CPF: 789.123.456-00</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">(41) 98765-4321</div> | |
| <div class="text-sm text-gray-500">@roberto.almeida</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="link-copy flex items-center"> | |
| <span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/roberto-almeida</span> | |
| <button onclick="event.stopPropagation(); copyLink('eventops.pro/roberto-almeida')" class="copy-icon ml-2 opacity-0 hover:opacity-100 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| 203 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 20.300,00 | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| R$ 2.030,00 | |
| </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"> | |
| Ativo | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <div class="flex space-x-2"> | |
| <button onclick="event.stopPropagation(); openModal()" class="text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); toggleStatus('4')" class="text-yellow-600 hover:text-yellow-900"> | |
| <i class="fas fa-ban"></i> | |
| </button> | |
| <button onclick="event.stopPropagation(); openProfile('4')" class="text-gray-600 hover:text-gray-900"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Anterior | |
| </a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| Próximo | |
| </a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Mostrando | |
| <span class="font-medium">1</span> | |
| a | |
| <span class="font-medium">4</span> | |
| de | |
| <span class="font-medium">12</span> | |
| resultados | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Anterior</span> | |
| <i class="fas fa-chevron-left"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 1 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 2 | |
| </a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> | |
| 3 | |
| </a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Próximo</span> | |
| <i class="fas fa-chevron-right"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Modal de Cadastro --> | |
| <div id="modal" class="modal fixed inset-0 z-50 hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title"> | |
| Cadastrar Novo Promoter | |
| </h3> | |
| <div class="mt-2 space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700">Nome Completo</label> | |
| <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">Telefone</label> | |
| <input type="text" id="phone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="instagram" class="block text-sm font-medium text-gray-700">Instagram (opcional)</label> | |
| <input type="text" id="instagram" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="cpf" class="block text-sm font-medium text-gray-700">CPF (opcional)</label> | |
| <input type="text" id="cpf" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| </div> | |
| <div> | |
| <label for="event" class="block text-sm font-medium text-gray-700">Evento Vinculado</label> | |
| <select id="event" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option>Selecione um evento</option> | |
| <option>Festa Junina 2023</option> | |
| <option>Carnaval 2024</option> | |
| <option>Ano Novo 2024</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="commission" class="block text-sm font-medium text-gray-700">Porcentagem de Comissão</label> | |
| <div class="mt-1 relative rounded-md shadow-sm"> | |
| <input type="text" id="commission" class="block w-full pr-12 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" value="10"> | |
| <div class="absolute inset-y-0 right-0 flex items-center"> | |
| <span class="h-full py-0 pl-2 pr-3 border-transparent bg-transparent text-gray-500 sm:text-sm">%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="generate-link" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="generate-link" class="ml-2 block text-sm text-gray-700">Gerar link personalizado</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Salvar | |
| </button> | |
| <button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancelar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Modal --> | |
| <div id="profile-modal" class="modal fixed inset-0 z-50 hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> | |
| Perfil do Promoter | |
| </h3> | |
| <button onclick="closeProfile()" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Left Column - Profile Info --> | |
| <div class="col-span-1"> | |
| <div class="profile-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <div class="flex flex-col items-center"> | |
| <img class="h-24 w-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> | |
| <h4 class="text-lg font-semibold">Ana Carolina Silva</h4> | |
| <p class="text-sm text-gray-500">Promoter desde: 15/03/2023</p> | |
| <div class="mt-4 w-full space-y-3"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-gray-400 mr-2"></i> | |
| <span class="text-sm">(11) 98765-4321</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fab fa-instagram text-gray-400 mr-2"></i> | |
| <span class="text-sm">@anacarol</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-id-card text-gray-400 mr-2"></i> | |
| <span class="text-sm">123.456.789-00</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-link text-gray-400 mr-2"></i> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-indigo-600 truncate max-w-xs">eventops.pro/ana-carol</span> | |
| <button onclick="copyLink('eventops.pro/ana-carol')" class="ml-1 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-copy text-sm"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 w-full"> | |
| <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"> | |
| Ativo | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Performance --> | |
| <div class="col-span-1"> | |
| <div class="profile-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="text-md font-semibold mb-4">Desempenho</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Total de ingressos vendidos</p> | |
| <p class="text-xl font-bold">87</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Valor total gerado</p> | |
| <p class="text-xl font-bold">R$ 8.700,00</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Comissão total</p> | |
| <p class="text-xl font-bold">R$ 870,00</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Status de pagamento</p> | |
| <div class="flex items-center"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"> | |
| Pendente | |
| </span> | |
| <button class="ml-2 text-xs text-indigo-600 hover:text-indigo-800"> | |
| Marcar como pago | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - Events --> | |
| <div class="col-span-1"> | |
| <div class="profile-card bg-white p-4 rounded-lg border border-gray-200"> | |
| <h4 class="text-md font-semibold mb-4">Eventos Vinculados</h4> | |
| <div class="space-y-3"> | |
| <div class="border-b pb-2"> | |
| <p class="font-medium">Festa Junina 2023</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Ingressos: 45</span> | |
| <span>R$ 450,00</span> | |
| </div> | |
| </div> | |
| <div class="border-b pb-2"> | |
| <p class="font-medium">Carnaval 2024</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Ingressos: 32</span> | |
| <span>R$ 320,00</span> | |
| </div> | |
| </div> | |
| <div class="border-b pb-2"> | |
| <p class="font-medium">Ano Novo 2024</p> | |
| <div class="flex justify-between text-sm text-gray-500"> | |
| <span>Ingressos: 10</span> | |
| <span>R$ 100,00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sales History --> | |
| <div class="mt-6"> | |
| <h4 class="text-md font-semibold mb-4">Histórico de Vendas</h4> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Evento</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ingressos</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Valor</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comissão</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 500,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 50,00</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 1.000,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 100,00</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/06/2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Festa Junina 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 3.000,00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">R$ 300,00</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="button" onclick="closeProfile()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Fechar | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Modal functions | |
| function openModal() { | |
| document.getElementById('modal').classList.remove('hidden'); | |
| } | |
| function closeModal() { | |
| document.getElementById('modal').classList.add('hidden'); | |
| } | |
| // Profile modal functions | |
| function openProfile(id) { | |
| document.getElementById('profile-modal').classList.remove('hidden'); | |
| } | |
| function closeProfile() { | |
| document.getElementById('profile-modal').classList.add('hidden'); | |
| } | |
| // Toggle status | |
| function toggleStatus(id) { | |
| alert('Status do promoter ID ' + id + ' alterado'); | |
| } | |
| // Copy link function | |
| function copyLink(link) { | |
| navigator.clipboard.writeText(link); | |
| alert('Link copiado: ' + link); | |
| } | |
| // Close modals when clicking outside | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('modal'); | |
| const profileModal = document.getElementById('profile-modal'); | |
| if (event.target === modal) { | |
| closeModal(); | |
| } | |
| if (event.target === profileModal) { | |
| closeProfile(); | |
| } | |
| } | |
| </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=cortezzcs21/myspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |