| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Meus Formulários | Dashboard</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> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --primary: #4F46E5; |
| --primary-light: #6366F1; |
| --primary-dark: #4338CA; |
| --secondary: #10B981; |
| --dark: #1F2937; |
| --light: #F9FAFB; |
| --gray: #6B7280; |
| --gray-light: #E5E7EB; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #F9FAFB; |
| color: #1F2937; |
| } |
| |
| .sidebar { |
| width: 280px; |
| transition: all 0.3s ease; |
| } |
| |
| .sidebar-collapsed { |
| width: 80px; |
| } |
| |
| .main-content { |
| margin-left: 280px; |
| transition: all 0.3s ease; |
| } |
| |
| .main-content-expanded { |
| margin-left: 80px; |
| } |
| |
| .nav-item.active { |
| background-color: #EEF2FF; |
| color: var(--primary); |
| border-left: 4px solid var(--primary); |
| } |
| |
| .nav-item.active svg { |
| color: var(--primary); |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); |
| } |
| |
| .form-card { |
| transition: all 0.2s ease; |
| border-radius: 12px; |
| } |
| |
| .form-card:hover { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); |
| } |
| |
| .status-badge { |
| font-size: 12px; |
| padding: 4px 10px; |
| border-radius: 20px; |
| font-weight: 500; |
| } |
| |
| .avatar-group .avatar { |
| margin-right: -10px; |
| border: 2px solid white; |
| transition: all 0.2s ease; |
| } |
| |
| .avatar-group .avatar:hover { |
| transform: scale(1.1); |
| z-index: 10; |
| } |
| |
| .dropdown-menu { |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); |
| border-radius: 8px; |
| border: 1px solid #E5E7EB; |
| } |
| |
| .search-input:focus { |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); |
| } |
| |
| .create-btn { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); |
| transition: all 0.2s ease; |
| } |
| |
| .create-btn:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.2s ease-in-out; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(-5px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .progress-bar { |
| height: 6px; |
| border-radius: 3px; |
| background-color: #E5E7EB; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| border-radius: 3px; |
| background-color: var(--primary); |
| } |
| |
| |
| .tooltip { |
| position: relative; |
| } |
| |
| .tooltip .tooltip-text { |
| visibility: hidden; |
| width: max-content; |
| background-color: #1F2937; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 6px 12px; |
| position: absolute; |
| z-index: 30; |
| left: 100%; |
| margin-left: 12px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| font-size: 13px; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
| |
| .tooltip .tooltip-text::after { |
| content: ""; |
| position: absolute; |
| top: 50%; |
| right: 100%; |
| margin-top: -5px; |
| border-width: 5px; |
| border-style: solid; |
| border-color: transparent #1F2937 transparent transparent; |
| } |
| |
| .tooltip:hover .tooltip-text { |
| visibility: visible; |
| opacity: 1; |
| } |
| |
| |
| .sidebar-collapsed .tooltip .tooltip-text { |
| left: 50%; |
| top: 100%; |
| margin-left: 0; |
| transform: translateX(-50%); |
| } |
| |
| .sidebar-collapsed .tooltip .tooltip-text::after { |
| top: -5px; |
| left: 50%; |
| right: auto; |
| margin-left: -5px; |
| border-color: transparent transparent #1F2937 transparent; |
| } |
| |
| |
| .sidebar-collapsed .nav-item { |
| justify-content: center; |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| .sidebar-collapsed .nav-item span { |
| display: none; |
| } |
| |
| .sidebar-collapsed .nav-item .badge-count { |
| display: none; |
| } |
| |
| .sidebar-collapsed .team-section { |
| display: none; |
| } |
| |
| .sidebar-collapsed .user-info .user-details { |
| display: none; |
| } |
| |
| .sidebar-collapsed .user-info svg { |
| display: none; |
| } |
| |
| .sidebar-collapsed .logo-text { |
| display: none; |
| } |
| |
| .sidebar-collapsed .logo-icon { |
| margin-right: 0; |
| } |
| |
| |
| .toggle-sidebar-tooltip { |
| position: relative; |
| } |
| |
| .toggle-sidebar-tooltip .tooltip-text { |
| visibility: hidden; |
| width: max-content; |
| background-color: #1F2937; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 6px 12px; |
| position: absolute; |
| z-index: 30; |
| left: 50%; |
| top: 100%; |
| transform: translateX(-50%); |
| opacity: 0; |
| transition: opacity 0.3s; |
| font-size: 13px; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
| |
| .toggle-sidebar-tooltip .tooltip-text::after { |
| content: ""; |
| position: absolute; |
| top: -5px; |
| left: 50%; |
| margin-left: -5px; |
| border-width: 5px; |
| border-style: solid; |
| border-color: transparent transparent #1F2937 transparent; |
| } |
| |
| .toggle-sidebar-tooltip:hover .tooltip-text { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="flex h-screen overflow-hidden"> |
| |
| <div class="sidebar bg-white shadow-sm flex flex-col fixed h-full z-20"> |
| <div class="p-6 flex items-center justify-between border-b border-gray-100"> |
| <div class="flex items-center"> |
| <div class="w-10 h-10 rounded-lg bg-indigo-100 flex items-center justify-center logo-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <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" /> |
| </svg> |
| </div> |
| <span class="ml-3 text-lg font-semibold text-gray-800 logo-text">FormsPro</span> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600 toggle-sidebar toggle-sidebar-tooltip"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> |
| </svg> |
| <span class="tooltip-text">Recolher menu</span> |
| </button> |
| </div> |
| |
| <div class="flex-1 overflow-y-auto py-4 px-2"> |
| <div class="space-y-1"> |
| <a href="#" class="nav-item active flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg tooltip"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> |
| </svg> |
| <span class="ml-3">Dashboard</span> |
| <span class="tooltip-text">Dashboard</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
| <svg xmlns="http://www.w3.org/200极/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <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" /> |
| </svg> |
| <span class="ml-3">Formulários</span> |
| <span class="ml-auto px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full badge-count">12</span> |
| <span class="tooltip-text">Formulários</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| <span class="ml-3">Respostas</span> |
| <span class="tooltip-text">Respostas</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> |
| </svg> |
| <span class="ml-3">Relatórios</span> |
| <span class="tooltip-text">Relatórios</span> |
| </a> |
| <a href="#" class="nav-item flex items-center px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg tooltip"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| <span class="ml-3">Configurações</span> |
| <span class="tooltip-text">Configurações</span> |
| </a> |
| </div> |
| |
| <div class="mt-8 px-4 team-section"> |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Equipe</h3> |
| <div class="mt-3 space-y-1"> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
| <div class="relative"> |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span> |
| </div> |
| <span class="ml-3">Ana Silva</span> |
| </a> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
| <div class="relative"> |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-gray-400"></span> |
| </div> |
| <span class="ml-3">Carlos Souza</span> |
| </a> |
| <a href="#" class="flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg"> |
| <div class="relative"> |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
| <span class="absolute bottom-0 right-0 block h-2 w-2 rounded-full ring-2 ring-white bg-green-400"></span> |
| </div> |
| <span class="ml-3">Maria Oliveira</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-4 border-t border-gray-100"> |
| <div class="relative dropdown"> |
| <button class="flex items-center w-full px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-lg user-info tooltip"> |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt=""> |
| <div class="ml-3 text-left user-details"> |
| <div class="font-medium">Ana Silva</div> |
| <div class="text-xs text-gray-500">ana@example.com</div> |
| </div> |
| <svg xmlns="http://www.w3.org/2000/svg" class="ml-auto h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> |
| </svg> |
| <span class="tooltip-text">Minha conta</span> |
| </button> |
| <div class="dropdown-menu absolute bottom-full left-0 mb-2 w-full hidden bg-white rounded-lg shadow-lg z-10 fade-in"> |
| <div class="py-1"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-cog mr-2 text-gray-500"></i> Configurações |
| </a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-exchange-alt mr-2 text-gray-500"></i> Trocar organização |
| </a> |
| <div class="border-t border-gray-200 my-1"></div> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-sign-out-alt mr-2 text-gray-500"></i> Sair |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="main-content flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="bg-white border-b border-gray-200"> |
| <div class="flex items-center justify-between px-6 py-4"> |
| <div class="flex items-center"> |
| <h1 class="text-xl font-semibold text-gray-900">Meus Formulários</h1> |
| <div class="ml-4 flex items-center"> |
| <div class="relative dropdown"> |
| <button class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"> |
| <span>Acme Inc.</span> |
| <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round, stroke-width="2" d="M19 9l-7 7-7-7" /> |
| </svg> |
| </button> |
| <div class="dropdown-menu absolute hidden mt-2 w-48 bg-white rounded-lg shadow-lg z-10 fade-in"> |
| <div class="py-1"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
| Acme Inc. |
| </a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
| Startup XYZ |
| </a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center"> |
| <img src="https极randomuser.me/api/portraits/women/68.jpg" class="w-5 h-5 rounded-full mr-2" alt=""> |
| Freelance |
| </a> |
| <div class="border-t border-gray-200 my-1"></div> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"> |
| <i class="fas fa-cog mr-2 text-gray-500"></i> Gerenciar organizações |
| </a> |
| </div> |
| </div> |
| </div> |
| <span class="ml-2 px-2 py-1 text-xs font-medium bg-indigo-100 text-indigo-800 rounded-full">Admin</span> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="flex items-center px-4 py-2.5 create-btn text-white font-medium rounded-lg transition-all duration-200 shadow-md"> |
| <i class="fas fa-plus mr-2"></i> |
| Criar novo |
| </button> |
| |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full"> |
| <i class="fas fa-bell"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6"> |
| <div class="bg-white rounded-xl shadow-sm p极"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Total de Formulários</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">12</p> |
| </div> |
| <div class="p-3 rounded-lg bg-indigo-100 text-indigo-600"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <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" /> |
| </svg> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center justify-between text-sm text-gray-500"> |
| <span>+2 desde o mês passado</span> |
| <span class="text-green-500 font-medium">+20%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Respostas Totais</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">501</p> |
| </div> |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none, viewBox="0 0 24 24" stroke="currentColor"> |
| <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" /> |
| </svg> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center justify-between text-sm text-gray-500"> |
| <span>+124 desde o mês passado</span> |
| <span class="text-green-500 font-medium">+33%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Taxa de Resposta</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">68%</p> |
| </div> |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /> |
| </svg> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center justify-between text-sm text-gray-500"> |
| <span>+8% desde o mês passado</span> |
| <span class="text-green-500 font-medium">+13%</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Colaboradores</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">5</p> |
| </div> |
| <div |
| </html> |
