<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filtros para CRM</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>CRM - Filtros de Clientes</h1>
<div class="filters">
<label for="status">Status:</label>
<select id="status">
<option value="all">Todos</option>
<option value="ativo">Ativo</option>
<option value="inativo">Inativo</option>
</select>
<label for="segmento">Segmento:</label>
<select id="segmento">
<option value="all">Todos</option>
<option value="esportes">Esportes</option>
<option value="cassino">Cassino</option>
<option value="poker">Poker</option>
</select>
<label for="prioridade">Prioridade:</label>
<select id="prioridade">
<option value="all">Todos</option>
<option value="alta">Alta</option>
<option value="media">Média</option>
<option value="baixa">Baixa</option>
</select>
<button id="filtrar">Filtrar</button>
</div>
</header>
<section class="clients-container">
<div class="client" data-status="ativo" data-segmento="esportes" data-prioridade="alta">
João Silva - Esportes - Ativo - Alta - joao1@email.com
</div>
<div class="client" data-status="inativo" data-segmento="cassino" data-prioridade="media">
Maria Souza - Cassino - Inativo - Média - maria@email.com
</div>
<div class="client" data-status="ativo" data-segmento="poker" data-prioridade="baixa">
Ana Lima - Poker - Ativo - Baixa - ana@email.com
</div>
<div class="client" data-status="ativo" data-segmento="esportes" data-prioridade="media">
Carlos Pereira - Esportes - Ativo - Média - carlos@email.com
</div>
<div class="client" data-status="ativo" data-segmento="esportes" data-prioridade="media">
Juliana Martins - Esportes - Ativo - Média - juliana@email.com
</div>
<div class="client" data-status="ativo" data-segmento="cassino" data-prioridade="media">
Fernanda Oliveira - Cassino - Ativo - Média - fernanda@email.com
</div>
<div class="client" data-status="ativo" data-segmento="poker" data-prioridade="media">
Pedro Ferreira - Poker - Ativo - Média - pedro@email.com
</div>
<div class="client" data-status="ativo" data-segmento="esportes" data-prioridade="media">
Ricardo Andrade - Esportes - Ativo - Média - ricardo@email.com
</div>
<div class="client" data-status="ativo" data-segmento="poker" data-prioridade="media">
Beatriz Ramos - Poker - Ativo - Média - beatriz@email.com
</div>
<div class="client" data-status="ativo" data-segmento="cassino" data-prioridade="media">
Luiz Torres - Cassino - Ativo - Média - luiz@email.com
</div>
<!-- Adicione mais clientes aqui -->
</section>
<script src="script.js"></script>
</html>