Spaces:

vallacaus
/

projetos

Running

App Files Files Community

projetos / index.html

vallacaus

criar a parte de campanhas deste projetos - Follow Up Deployment

192e2bb verified 10 months ago

raw

history blame contribute delete

61.4 kB

	<!DOCTYPE html>
	<html lang="pt-BR">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Marvin Brevo - Sistema de E-mail Marketing</title>
	<!-- Importação do Tailwind CSS -->
	<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">
	<!-- Configuração das cores principais em roxo -->
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: {
	50: '#f5f3ff',
	100: '#ede9fe',
	200: '#ddd6fe',
	300: '#c4b5fd',
	400: '#a78bfa',
	500: '#8b5cf6',
	600: '#7c3aed',
	700: '#6d28d9',
	800: '#5b21b6',
	900: '#4c1d95',
	}
	}
	}
	}
	}
	</script>
	<style>
	/* CSS personalizado para complementar o Tailwind */
	.sidebar-item:hover {
	background-color: rgba(139, 92, 246, 0.1);
	}
	.sidebar-item.active {
	background-color: rgba(139, 92, 246, 0.2);
	border-left: 4px solid #8b5cf6;
	}
	.contact-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	}
	.transition-all {
	transition: all 0.3s ease;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Container principal -->
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="hidden md:flex md:flex-shrink-0">
	<div class="flex flex-col w-64 bg-white border-r border-gray-200">
	<!-- Logo -->
	<div class="flex items-center justify-center h-16 px-4 bg-primary-800">
	<div class="flex items-center">
	<i class="fas fa-envelope text-white text-2xl mr-2"></i>
	<span class="text-white text-xl font-bold">MARVIN BREVO</span>
	</div>
	</div>
	<!-- Menu de navegação -->
	<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
	<div class="space-y-1">
	<!-- Dashboard -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-tachometer-alt mr-3 text-primary-600"></i>
	Dashboard
	</a>
	<!-- Campanhas -->
	<a href="#" class="sidebar-item active flex items-center px-2 py-3 text-sm font-medium rounded-md text-primary-800">
	<i class="fas fa-bullhorn mr-3 text-primary-600"></i>
	Campanhas
	</a>
	<!-- Contatos -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-users mr-3 text-primary-600"></i>
	Contatos
	</a>
	<!-- Listas -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-list mr-3 text-primary-600"></i>
	Listas
	</a>
	<!-- Templates -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-file-alt mr-3 text-primary-600"></i>
	Templates
	</a>
	<!-- Relatórios -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-chart-line mr-3 text-primary-600"></i>
	Relatórios
	</a>
	<!-- Integrações -->
	<a href="#" class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:text-primary-800">
	<i class="fas fa-plug mr-3 text-primary-600"></i>
	Integrações
	</a>
	</div>
	</div>
	<!-- Rodapé do sidebar -->
	<div class="p-4 border-t border-gray-200">
	<div class="flex items-center">
	<img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">John Doe</p>
	<p class="text-xs font-medium text-gray-500">Admin</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Conteúdo principal -->
	<div class="flex flex-col flex-1 overflow-hidden">
	<!-- Topbar -->
	<header class="bg-white shadow-sm">
	<div class="flex items-center justify-between px-4 py-3">
	<!-- Botão de menu mobile -->
	<div class="flex items-center md:hidden">
	<button type="button" class="text-gray-500 hover:text-gray-600" id="mobile-menu-button">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	<!-- Barra de pesquisa -->
	<div class="flex-1 max-w-md ml-4 md:ml-6">
	<div class="relative">
	<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	<input type="text" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Buscar...">
	</div>
	</div>
	<!-- Ícones de ações -->
	<div class="flex items-center space-x-4">
	<button type="button" class="p-1 text-gray-400 rounded-full hover:text-gray-500">
	<i class="fas fa-bell text-xl"></i>
	</button>
	<button type="button" class="p-1 text-gray-400 rounded-full hover:text-gray-500">
	<i class="fas fa-question-circle text-xl"></i>
	</button>
	<button type="button" class="p-1 text-gray-400 rounded-full hover:text-gray-500">
	<i class="fas fa-cog text-xl"></i>
	</button>
	</div>
	</div>
	</header>

	<!-- Conteúdo da página -->
	<main class="flex-1 overflow-y-auto bg-gray-50">
	<div class="px-4 py-6 sm:px-6 lg:px-8">
	<!-- Cabeçalho da página -->
	<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
	<div>
	<h1 class="text-2xl font-bold text-gray-900">Campanhas</h1>
	<p class="mt-1 text-sm text-gray-500">Gerencie todas as suas campanhas de e-mail</p>
	</div>
	<div class="mt-4 md:mt-0">
	<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	<i class="fas fa-plus mr-2"></i> Nova Campanha
	</button>
	</div>
	</div>

	<!-- Filtros avançados -->
	<div class="bg-white shadow rounded-lg p-4 mb-6">
	<div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0">
	<div class="flex-1">
	<label for="campaign-search" class="sr-only">Buscar campanhas</label>
	<div class="relative">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	<input type="text" id="campaign-search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Buscar por nome, assunto...">
	</div>
	</div>
	<div class="w-full md:w-48">
	<label for="campaign-status" class="sr-only">Status</label>
	<select id="campaign-status" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
	<option value="">Todos status</option>
	<option value="draft">Rascunho</option>
	<option value="scheduled">Programada</option>
	<option value="sending">Enviando</option>
	<option value="sent">Enviada</option>
	</select>
	</div>
	<div class="w-full md:w-48">
	<label for="campaign-date" class="sr-only">Período</label>
	<select id="campaign-date" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
	<option value="">Todos períodos</option>
	<option value="7days">Últimos 7 dias</option>
	<option value="30days">Últimos 30 dias</option>
	<option value="month">Este mês</option>
	<option value="year">Este ano</option>
	</select>
	</div>
	<div class="w-full md:w-48">
	<label for="campaign-type" class="sr-only">Tipo</label>
	<select id="campaign-type" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
	<option value="">Todos tipos</option>
	<option value="regular">Padrão</option>
	<option value="automation">Automatizada</option>
	<option value="transactional">Transacional</option>
	</select>
	</div>
	</div>
	</div>
	<div class="flex flex-col md:flex-row md:items-center md:space-x-4 space-y-4 md:space-y-0">
	<div class="flex-1">
	<label for="search" class="sr-only">Buscar campanhas</label>
	<div class="relative">
	<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
	<i class="fas fa-search text-gray-400"></i>
	</div>
	<input type="text" id="search" class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Buscar campanhas...">
	</div>
	</div>
	<div>
	<label for="status" class="sr-only">Status</label>
	<select id="status" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
	<option>Todos status</option>
	<option>Rascunho</option>
	<option>Programada</option>
	<option>Enviando</option>
	<option>Enviada</option>
	</select>
	</div>
	<div>
	<label for="date" class="sr-only">Data</label>
	<select id="date" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
	<option>Todos períodos</option>
	<option>Últimos 7 dias</option>
	<option>Últimos 30 dias</option>
	<option>Este mês</option>
	<option>Este ano</option>
	</select>
	</div>
	</div>
	</div>

	<!-- Lista de campanhas -->
	<div class="grid grid-cols-1 gap-5 mt-6 sm:grid-cols-2 lg:grid-cols-4">
	<!-- Total de contatos -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0 p-3 rounded-md bg-primary-100">
	<i class="fas fa-users text-primary-600 text-xl"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Total de Contatos</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">1,256</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-sm text-green-600 font-medium">+12%</span>
	<span class="text-sm text-gray-500 ml-1">últimos 30 dias</span>
	</div>
	</div>

	<!-- Taxa de abertura -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0 p-3 rounded-md bg-primary-100">
	<i class="fas fa-envelope-open-text text-primary-600 text-xl"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Taxa de Abertura</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">24.5%</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-sm text-green-600 font-medium">+2.3%</span>
	<span class="text-sm text-gray-500 ml-1">últimos 30 dias</span>
	</div>
	</div>

	<!-- Taxa de clique -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0 p-3 rounded-md bg-primary-100">
	<i class="fas fa-mouse-pointer text-primary-600 text-xl"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Taxa de Clique</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">3.42%</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-sm text-red-600 font-medium">-0.5%</span>
	<span class="text-sm text-gray-500 ml-1">últimos 30 dias</span>
	</div>
	</div>

	<!-- Campanhas ativas -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center">
	<div class="flex-shrink-0 p-3 rounded-md bg-primary-100">
	<i class="fas fa-bullhorn text-primary-600 text-xl"></i>
	</div>
	<div class="ml-5 w-0 flex-1">
	<dl>
	<dt class="text-sm font-medium text-gray-500 truncate">Campanhas Ativas</dt>
	<dd>
	<div class="text-lg font-medium text-gray-900">7</div>
	</dd>
	</dl>
	</div>
	</div>
	<div class="mt-4">
	<span class="text-sm text-green-600 font-medium">+2</span>
	<span class="text-sm text-gray-500 ml-1">últimos 30 dias</span>
	</div>
	</div>
	</div>

	<!-- Tabela de campanhas -->
	<div class="grid grid-cols-1 gap-5 mt-6 lg:grid-cols-2">
	<!-- Gráfico de desempenho -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center justify-between">
	<h2 class="text-lg font-medium text-gray-900">Desempenho das Campanhas</h2>
	<div class="relative">
	<select class="block appearance-none bg-white border border-gray-300 text-gray-700 py-1 px-4 pr-8 rounded leading-tight focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-sm">
	<option>Últimos 7 dias</option>
	<option>Últimos 30 dias</option>
	<option>Últimos 90 dias</option>
	<option selected>Este ano</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
	<i class="fas fa-chevron-down text-xs"></i>
	</div>
	</div>
	</div>
	<div class="mt-6">
	<!-- Área para o gráfico (simulado) -->
	<div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
	<p class="text-gray-500">Gráfico de desempenho aparecerá aqui</p>
	</div>
	</div>
	</div>

	<!-- Campanhas recentes -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center justify-between">
	<h2 class="text-lg font-medium text-gray-900">Campanhas Recentes</h2>
	<a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-700">Ver todas</a>
	</div>
	<div class="mt-4 space-y-4">
	<!-- Campanha 1 -->
	<div class="flex items-start">
	<div class="flex-shrink-0 p-2 rounded-md bg-purple-50">
	<i class="fas fa-envelope text-primary-600 text-lg"></i>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-gray-900">Promoção de Verão</h3>
	<span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">Enviada</span>
	</div>
	<p class="text-sm text-gray-500 mt-1">Enviada em 12 de Junho, 2023</p>
	<div class="mt-2 flex items-center text-xs text-gray-500">
	<span class="mr-3">Taxa de abertura: 28.5%</span>
	<span>Taxa de clique: 4.2%</span>
	</div>
	</div>
	</div>

	<!-- Campanha 2 -->
	<div class="flex items-start">
	<div class="flex-shrink-0 p-2 rounded-md bg-purple-50">
	<i class="fas fa-envelope text-primary-600 text-lg"></i>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-gray-900">Newsletter Mensal</h3>
	<span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">Enviada</span>
	</div>
	<p class="text-sm text-gray-500 mt-1">Enviada em 1 de Junho, 2023</p>
	<div class="mt-2 flex items-center text-xs text-gray-500">
	<span class="mr-3">Taxa de abertura: 32.1%</span>
	<span>Taxa de clique: 5.7%</span>
	</div>
	</div>
	</div>

	<!-- Campanha 3 -->
	<div class="flex items-start">
	<div class="flex-shrink-0 p-2 rounded-md bg-purple-50">
	<i class="fas fa-envelope text-primary-600 text-lg"></i>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-gray-900">Oferta Especial</h3>
	<span class="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">Programada</span>
	</div>
	<p class="text-sm text-gray-500 mt-1">Programada para 20 de Junho, 2023</p>
	<div class="mt-2 flex items-center text-xs text-gray-500">
	<span class="mr-3">Lista: Clientes Vip</span>
	<span>7.856 contatos</span>
	</div>
	</div>
	</div>

	<!-- Campanha 4 -->
	<div class="flex items-start">
	<div class="flex-shrink-0 p-2 rounded-md bg-purple-50">
	<i class="fas fa-envelope text-primary-600 text-lg"></i>
	</div>
	<div class="ml-3 flex-1">
	<div class="flex items-center justify-between">
	<h3 class="text-sm font-medium text-gray-900">Confirmação de Cadastro</h3>
	<span class="text-xs font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">Rascunho</span>
	</div>
	<p class="text-sm text-gray-500 mt-1">Criada em 5 de Junho, 2023</p>
	<div class="mt-2 flex items-center text-xs text-gray-500">
	<span class="mr-3">Template: Bem-vindo</span>
	<span>Automático</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Paginação -->
	<div class="mt-6 flex items-center justify-between">
	<div class="text-sm text-gray-500">
	Mostrando <span class="font-medium">1</span> a <span class="font-medium">10</span> de <span class="font-medium">42</span> campanhas
	</div>
	<div class="flex space-x-2">
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	Anterior
	</button>
	<button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	Próxima
	</button>
	</div>
	</div>
	<div class="grid grid-cols-1 gap-5 mt-6 lg:grid-cols-2">
	<!-- Contatos recentes -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center justify-between">
	<h2 class="text-lg font-medium text-gray-900">Contatos Recentes</h2>
	<div class="flex space-x-2">
	<button type="button" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	<i class="fas fa-plus mr-1"></i> Novo
	</button>
	<button type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	<i class="fas fa-download mr-1"></i> Exportar
	</button>
	</div>
	</div>
	<div class="mt-4">
	<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-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-mail</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
	<th scope="col" class="px-3 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr class="hover:bg-gray-50">
	<td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Ana Silva</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">ana.silva@exemplo.com</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">15/06/2023</td>
	<td class="px-3 py-3 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>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Carlos Mendes</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">carlos.mendes@exemplo.com</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">14/06/2023</td>
	<td class="px-3 py-3 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>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Mariana Costa</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">mariana.costa@exemplo.com</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">13/06/2023</td>
	<td class="px-3 py-3 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pendente</span>
	</td>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Pedro Alves</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">pedro.alves@exemplo.com</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">12/06/2023</td>
	<td class="px-3 py-3 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>
	</tr>
	<tr class="hover:bg-gray-50">
	<td class="px-3 py-3 whitespace-nowrap text-sm font-medium text-gray-900">Beatriz Rocha</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">beatriz.rocha@exemplo.com</td>
	<td class="px-3 py-3 whitespace-nowrap text-sm text-gray-500">11/06/2023</td>
	<td class="px-3 py-3 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>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="mt-4 flex items-center justify-between">
	<p class="text-sm text-gray-500">Mostrando <span class="font-medium">1</span> a <span class="font-medium">5</span> de <span class="font-medium">1256</span> contatos</p>
	<div class="flex space-x-2">
	<button type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	Anterior
	</button>
	<button type="button" class="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	Próxima
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Integração com Google -->
	<div class="p-5 bg-white rounded-lg shadow">
	<div class="flex items-center justify-between">
	<h2 class="text-lg font-medium text-gray-900">Integração com Google</h2>
	<button type="button" id="connectGoogleBtn" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fab fa-google mr-1"></i> Conectar
	</button>
	</div>
	<div class="mt-4">
	<div class="bg-blue-50 border-l-4 border-blue-400 p-4">
	<div class="flex">
	<div class="flex-shrink-0">
	<i class="fas fa-info-circle text-blue-400 text-xl"></i>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	Conecte sua conta do Google para sincronizar contatos do Google Contacts.
	</p>
	</div>
	</div>
	</div>
	<div class="mt-6">
	<div id="googleNotConnected" class="text-center">
	<i class="fas fa-google text-4xl text-gray-300"></i>
	<h3 class="mt-3 text-lg font-medium text-gray-900">Não conectado ao Google</h3>
	<p class="mt-1 text-sm text-gray-500">Conecte sua conta do Google para acessar seus contatos</p>
	<button type="button" id="showConnectModal" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
	<i class="fab fa-google mr-2"></i> Conectar ao Google
	</button>
	</div>
	<div id="googleConnected" class="hidden">
	<div class="flex items-center justify-between bg-green-50 p-3 rounded-md">
	<div class="flex items-center">
	<div class="p-2 rounded-md bg-green-100">
	<i class="fas fa-check text-green-600"></i>
	</div>
	<div class="ml-3">
	<h4 class="text-sm font-medium text-green-800">Conta do Google conectada</h4>
	<p class="text-xs text-green-600">Última sincronização: hoje às 14:32</p>
	</div>
	</div>
	<button type="button" class="text-sm font-medium text-green-800 hover:text-green-700">Desconectar</button>
	</div>
	<div class="mt-4">
	<h4 class="text-sm font-medium text-gray-900">Configurações de importação</h4>
	<div class="mt-2 space-y-4">
	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="syncAutomatically" name="syncAutomatically" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="syncAutomatically" class="font-medium text-gray-700">Sincronizar automaticamente</label>
	<p class="text-gray-500">Atualize seus contatos sempre que o Google Contacts for alterado</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="importNewContacts" name="importNewContacts" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="importNewContacts" class="font-medium text-gray-700">Importar novos contatos automaticamente</label>
	<p class="text-gray-500">Adicione novos contatos automaticamente às suas listas</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex items-center h-5">
	<input id="updateExisting" name="updateExisting" type="checkbox" class="focus:ring-primary-500 h-4 w-4 text-primary-600 border-gray-300 rounded">
	</div>
	<div class="ml-3 text-sm">
	<label for="updateExisting" class="font-medium text-gray-700">Atualizar contatos existentes</label>
	<p class="text-gray-500">Atualize informações de contatos existentes quando mudarem no Google</p>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-6">
	<h4 class="text-sm font-medium text-gray-900">Seus contatos do Google</h4>
	<p class="mt-1 text-sm text-gray-500">Você tem <span class="font-medium">187</span> contatos no Google Contacts</p>
	<div class="mt-4">
	<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
	Importar contatos agora
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<!-- Modal de conexão com o Google -->
	<div id="googleConnectModal" class="fixed z-50 inset-0 overflow-y-auto 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 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
	<div>
	<div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
	<i class="fab fa-google text-blue-600 text-xl"></i>
	</div>
	<div class="mt-3 text-center sm:mt-5">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Conectar conta do Google</h3>
	<div class="mt-2">
	<p class="text-sm text-gray-500">
	Para importar seus contatos do Google, autorize o Marvin Brevo a acessar sua conta do Google.
	</p>
	</div>
	</div>
	</div>
	<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
	<button type="button" id="authorizeGoogle" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:col-start-2 sm:text-sm">
	Autorizar com Google
	</button>
	<button type="button" id="cancelConnect" 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-primary-500 sm:mt-0 sm:col-start-1 sm:text-sm">
	Cancelar
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Modal de criação de campanha -->
	<div x-show="showCreateModal" class="fixed z-50 inset-0 overflow-y-auto" x-cloak>
	<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" @click="showCreateModal = false">
	<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 px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full sm:p-6">
	<div class="absolute top-0 right-0 pt-4 pr-4">
	<button type="button" class="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none" @click="showCreateModal = false">
	<span class="sr-only">Fechar</span>
	<i class="fas fa-times"></i>
	</button>
	</div>
	<div class="sm:flex sm:items-start">
	<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 sm:mx-0 sm:h-10 sm:w-10">
	<i class="fas fa-envelope text-primary-600"></i>
	</div>
	<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Criar nova campanha</h3>
	<div class="mt-2">
	<p class="text-sm text-gray-500">
	Selecione o tipo de campanha que deseja criar.
	</p>
	</div>
	</div>
	</div>
	<div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-3">
	<div class="border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-primary-500 hover:bg-primary-50 transition-all">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
	<i class="fas fa-envelope text-purple-600"></i>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">E-mail padrão</h4>
	<p class="text-xs text-gray-500">Campanha de e-mail única</p>
	</div>
	</div>
	</div>
	<div class="border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-primary-500 hover:bg-primary-50 transition-all">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
	<i class="fas fa-recycle text-blue-600"></i>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Automação</h4>
	<p class="text-xs text-gray-500">E-mails automatizados</p>
	</div>
	</div>
	</div>
	<div class="border border-gray-200 rounded-lg p-4 cursor-pointer hover:border-primary-500 hover:bg-primary-50 transition-all">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
	<i class="fas fa-exchange-alt text-green-600"></i>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Transacional</h4>
	<p class="text-xs text-gray-500">E-mails de transação</p>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
	<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:col-start-2 sm:text-sm">
	Continuar
	</button>
	<button type="button" 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-primary-500 sm:mt-0 sm:col-start-1 sm:text-sm" @click="showCreateModal = false">
	Cancelar
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Script JavaScript -->
	<script>
	// Menu mobile toggle
	document.getElementById('mobile-menu-button').addEventListener('click', function() {
	// Implementar funcionalidade do menu mobile aqui
	alert('Menu mobile será implementado aqui');
	});

	// Modal de conexão com o Google
	const showConnectModal = document.getElementById('showConnectModal');
	const googleConnectModal = document.getElementById('googleConnectModal');
	const cancelConnect = document.getElementById('cancelConnect');
	const authorizeGoogle = document.getElementById('authorizeGoogle');
	const googleNotConnected = document.getElementById('googleNotConnected');
	const googleConnected = document.getElementById('googleConnected');
	const connectGoogleBtn = document.getElementById('connectGoogleBtn');

	if(showConnectModal) {
	showConnectModal.addEventListener('click', () => {
	googleConnectModal.classList.remove('hidden');
	});
	}

	if(connectGoogleBtn) {
	connectGoogleBtn.addEventListener('click', () => {
	googleConnectModal.classList.remove('hidden');
	});
	}

	if(cancelConnect) {
	cancelConnect.addEventListener('click', () => {
	googleConnectModal.classList.add('hidden');
	});
	}

	if(authorizeGoogle) {
	authorizeGoogle.addEventListener('click', () => {
	// Simular autenticação com o Google
	setTimeout(() => {
	googleConnectModal.classList.add('hidden');
	googleNotConnected.classList.add('hidden');
	googleConnected.classList.remove('hidden');
	alert('Conta do Google conectada com sucesso!');
	}, 1000);
	});
	}

	// Exemplo de interação com o banco de dados (simulado)
	function connectToDatabase() {
	// Configurações do banco de dados
	const dbConfig = {
	host: 'localhost',
	database: 'marvin_brevo',
	username: 'marvin_brevo',
	password: 'gPZt@#4798'
	};

	console.log('Conectando ao banco de dados:', dbConfig);

	// Simulando uma conexão bem-sucedida
	return new Promise((resolve) => {
	setTimeout(() => {
	console.log('Conexão estabelecida com sucesso!');
	resolve({
	query: (sql, params) => {
	console.log('Executando query:', sql);
	// Simular retorno de dados
	if(sql.includes('contacts')) {
	return Promise.resolve([
	{id: 1, name: 'Ana Silva', email: 'ana.silva@exemplo.com', created_at: '2023-06-15', status: 'active'},
	{id: 2, name: 'Carlos Mendes', email: 'carlos.mendes@exemplo.com', created_at: '2023-06-14', status: 'active'}
	]);
	}
	return Promise.resolve([]);
	}
	});
	}, 500);
	});
	}

	// Ao carregar a página, simular conexão com o banco de dados
	window.addEventListener('DOMContentLoaded', () => {
	connectToDatabase().then(db => {
	// Simular consulta de contatos
	db.query('SELECT * FROM contacts LIMIT 5').then(results => {
	console.log('Contatos carregados:', results);
	});
	});
	});
	</script>

	<!-- Instruções de instalação (comentário HTML) -->
	<!--
	INSTRUÇÕES PARA IMPLEMENTAÇÃO:

	1. BANCO DE DADOS MYSQL:
	- Crie um banco de dados chamado 'marvin_brevo'
	- Crie um usuário 'marvin_brevo' com senha 'gPZt@#4798'
	- Conceda todas as permissões ao usuário para o banco 'marvin_brevo'

	2. ESTRUTURA DO BANCO DE DADOS:
	Aqui estão os comandos SQL para criar as tabelas básicas:

	CREATE TABLE `contacts` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`name` varchar(255) NOT NULL,
	`email` varchar(255) NOT NULL,
	`phone` varchar(20) DEFAULT NULL,
	`status` enum('active','pending','inactive') DEFAULT 'active',
	`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
	`updated_at` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`),
	UNIQUE KEY `email` (`email`)
	) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

	CREATE TABLE `campaigns` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`name` varchar(255) NOT NULL,
	`subject` varchar(255) NOT NULL,
	`status` enum('draft','scheduled','sending','sent') DEFAULT 'draft',
	`scheduled_at` datetime DEFAULT NULL,
	`sent_at` datetime DEFAULT NULL,
	`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
	) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

	CREATE TABLE `lists` (
	`id` int(11) NOT NULL AUTO_INCREMENT,
	`name` varchar(255) NOT NULL,
	`description` text DEFAULT NULL,
	`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`id`)
	) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

	CREATE TABLE `list_contacts` (
	`list_id` int(11) NOT NULL,
	`contact_id` int(11) NOT NULL,
	`subscribed_at` datetime DEFAULT CURRENT_TIMESTAMP,
	PRIMARY KEY (`list_id`,`contact_id`),
	KEY `contact_id` (`contact_id`),
	CONSTRAINT `list_contacts_ibfk_1` FOREIGN KEY (`list_id`) REFERENCES `lists` (`id`) ON DELETE CASCADE,
	CONSTRAINT `list_contacts_ibfk_2` FOREIGN KEY (`contact_id`) REFERENCES `contacts` (`id`) ON DELETE CASCADE
	) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

	3. SERVIDOR BACKEND:
	- Este é um frontend estático. Para funcionalidade completa, você precisará implementar:
	* PHP, Node.js ou outra linguagem server-side
	* Endpoints API para interação com o banco de dados
	* Autenticação OAuth com a API do Google

	4. INTEGRAÇÃO COM GOOGLE:
	- Registre sua aplicação no Console de Desenvolvedores do Google
	- Adicione credenciais OAuth 2.0
	- Implemente o fluxo de autenticação para acessar contatos via Google API
	- Armazene os tokens de acesso para sincronização contínua

	5. IMPLEMENTAÇÃO:
	- Coloque este arquivo HTML em seu servidor web (Apache, Nginx)
	- Configure as conexões com o banco de dados no backend
	- Teste todas as funcionalidades antes de colocar em produção
	-->
	<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=vallacaus/medical" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p><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=vallacaus/projetos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>