VPS 4 Builder
331 lines
24 KiB
HTML
331 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clube67 — Clube de Benefícios Premium</title>
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<!-- Stylesheet -->
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="bg-slate-950 text-slate-100 font-sans min-h-screen selection:bg-indigo-500/30 selection:text-indigo-200 overflow-x-hidden">
|
|
<!-- Dynamic Background Orbs -->
|
|
<div class="fixed -top-40 -left-40 w-96 h-96 rounded-full bg-indigo-600/10 blur-[120px] pointer-events-none animate-pulse duration-[8000ms]"></div>
|
|
<div class="fixed top-1/2 -right-40 w-[500px] h-[500px] rounded-full bg-violet-600/10 blur-[150px] pointer-events-none animate-pulse duration-[10000ms]"></div>
|
|
|
|
<!-- Top Header -->
|
|
<header class="sticky top-0 z-40 backdrop-blur-md bg-slate-950/75 border-b border-slate-900/80 px-6 py-4">
|
|
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-violet-500 flex items-center justify-center font-display font-black text-xl text-white shadow-lg shadow-logo">
|
|
67
|
|
</div>
|
|
<div>
|
|
<h1 class="font-display font-black text-lg tracking-wide text-white uppercase leading-none">Clube67</h1>
|
|
<span class="brand-subtitle font-bold text-slate-500 uppercase">Premium Benefícios</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex bg-slate-900/60 p-1 rounded-xl border border-slate-800/80">
|
|
<button id="tab-catalog" class="nav-tab active flex items-center gap-2 px-5 py-2.5 rounded-lg text-xs font-bold tracking-wide uppercase transition-all duration-300">
|
|
<i data-lucide="tag" class="w-3.5 h-3.5"></i> Catálogo
|
|
</button>
|
|
<button id="tab-redeem" class="nav-tab flex items-center gap-2 px-5 py-2.5 rounded-lg text-xs font-bold tracking-wide uppercase transition-all duration-300">
|
|
<i data-lucide="qr-code" class="w-3.5 h-3.5"></i> Resgate
|
|
</button>
|
|
<button id="tab-analytics" class="nav-tab flex items-center gap-2 px-5 py-2.5 rounded-lg text-xs font-bold tracking-wide uppercase transition-all duration-300">
|
|
<i data-lucide="bar-chart-3" class="w-3.5 h-3.5"></i> Analytics
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-6 py-12">
|
|
<!-- SECTION 1: CATALOG -->
|
|
<section id="section-catalog" class="content-section">
|
|
<div class="mb-10 text-center md:text-left">
|
|
<h2 class="font-display font-black text-3xl md:text-4xl text-white tracking-tight mb-3">
|
|
Seus Benefícios <span class="bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">Exclusivos</span>
|
|
</h2>
|
|
<p class="text-slate-400 text-sm max-w-2xl leading-relaxed">
|
|
Explore descontos e vantagens premium selecionados sob medida para você nos melhores estabelecimentos parceiros do Mato Grosso do Sul.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Search & Filters Container -->
|
|
<div class="bg-slate-900/40 border border-slate-800/50 rounded-2xl p-6 backdrop-blur-md mb-8 flex flex-col md:flex-row gap-6 items-center justify-between">
|
|
<!-- Search bar -->
|
|
<div class="relative w-full md:max-w-md">
|
|
<span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-500 pointer-events-none">
|
|
<i data-lucide="search" class="w-4 h-4"></i>
|
|
</span>
|
|
<input type="text" id="search-input" name="search-input" placeholder="Buscar parceiro ou benefício..." class="w-full bg-slate-950/60 border border-slate-800 rounded-xl pl-11 pr-4 py-3 text-sm focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/20 text-slate-100 placeholder:text-slate-500 transition-all duration-300">
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="flex flex-wrap gap-2 justify-center" id="category-filters">
|
|
<button class="filter-pill active" data-category="all">Todos</button>
|
|
<button class="filter-pill" data-category="saude">🩺 Saúde</button>
|
|
<button class="filter-pill" data-category="odontologia">🦷 Odonto</button>
|
|
<button class="filter-pill" data-category="gastronomia">🍔 Gastronomia</button>
|
|
<button class="filter-pill" data-category="lazer">🌴 Lazer</button>
|
|
<button class="filter-pill" data-category="farmacia">💊 Farmácia</button>
|
|
<button class="filter-pill" data-category="educacao">📚 Educação</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits Grid -->
|
|
<div id="benefits-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Loading State -->
|
|
<div class="col-span-full py-20 text-center" id="catalog-loading">
|
|
<div class="w-10 h-10 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
|
<p class="text-slate-400 text-sm">Carregando benefícios exclusivos...</p>
|
|
</div>
|
|
<!-- Dynamic cards will be injected here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 2: REDEEM -->
|
|
<section id="section-redeem" class="content-section hidden">
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="text-center mb-10">
|
|
<h2 class="font-display font-black text-3xl text-white tracking-tight mb-3">Validação & Resgate de Código</h2>
|
|
<p class="text-slate-400 text-sm leading-relaxed">
|
|
Selecione um benefício no catálogo para resgatar. Abaixo você pode visualizar e simular o fluxo de validação segura por Token QR Code.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Active Voucher Container -->
|
|
<div class="bg-slate-900/35 border border-slate-800/80 rounded-3xl p-8 backdrop-blur-xl relative overflow-hidden shadow-2xl" id="redeem-card-empty">
|
|
<div class="text-center py-12 text-slate-500">
|
|
<i data-lucide="tag" class="w-12 h-12 mx-auto mb-4 text-slate-600 animate-bounce"></i>
|
|
<h3 class="font-display font-bold text-white text-base mb-1">Nenhum cupom ativo no momento</h3>
|
|
<p class="text-xs max-w-sm mx-auto leading-relaxed">Navegue pelo Catálogo de Benefícios e selecione a oferta desejada clicando em "Resgatar Voucher".</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-slate-900/35 border border-slate-800/80 rounded-3xl p-8 backdrop-blur-xl relative overflow-hidden shadow-2xl hidden" id="redeem-card-active">
|
|
<div class="absolute top-0 right-0 w-40 h-40 bg-indigo-500/5 rounded-full blur-3xl pointer-events-none"></div>
|
|
|
|
<div class="flex items-center gap-4 mb-8 pb-6 border-b border-slate-800/80">
|
|
<div class="w-12 h-12 rounded-xl bg-indigo-600/10 border border-indigo-500/20 flex items-center justify-center text-xl" id="voucher-icon">🩺</div>
|
|
<div>
|
|
<h3 class="font-display font-black text-lg text-white leading-snug" id="voucher-title">Clube Odonto Plus</h3>
|
|
<p class="text-xs text-slate-400" id="voucher-partner">ScoreOdonto Ltda</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code & Laser Scanner -->
|
|
<div class="flex flex-col items-center justify-center mb-8">
|
|
<div class="relative w-48 h-48 bg-white p-4 rounded-2xl shadow-xl shadow-indigo-600/5 border border-slate-700/20 overflow-hidden">
|
|
<!-- Simulated QR Code Image -->
|
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=C67-A9X2B&color=0f172a" id="qr-code-img" class="w-full h-full object-contain" alt="QR Code">
|
|
<!-- Laser scan bar -->
|
|
<div class="absolute left-0 right-0 h-1 bg-indigo-500 shadow-lg shadow-indigo-500/80 animate-scan"></div>
|
|
</div>
|
|
|
|
<!-- Token Display -->
|
|
<div class="mt-5 px-6 py-2 bg-slate-950/80 border border-slate-800 rounded-xl">
|
|
<span class="text-xs font-bold tracking-[0.25em] text-indigo-400 uppercase font-mono" id="voucher-token">C67-A9X2B</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timer Countdown -->
|
|
<div class="space-y-3 mb-8">
|
|
<div class="flex items-center justify-between text-xs font-bold text-slate-400">
|
|
<span>Token expira em:</span>
|
|
<span class="text-indigo-400 font-mono" id="timer-text">05:00</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-slate-950 rounded-full overflow-hidden">
|
|
<div class="h-full bg-gradient-to-r from-indigo-500 to-violet-500 transition-all duration-1000" id="timer-bar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simulator Trigger -->
|
|
<div class="flex flex-col gap-3">
|
|
<button id="btn-validate" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-display font-bold py-4 rounded-xl text-xs uppercase tracking-widest shadow-lg shadow-button transition-all duration-300">
|
|
Simular Validação (Estabelecimento)
|
|
</button>
|
|
<button id="btn-cancel" class="w-full bg-slate-950 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 text-slate-400 hover:text-white font-display font-bold py-4 rounded-xl text-xs uppercase tracking-widest transition-all duration-300">
|
|
Cancelar Resgate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 3: ANALYTICS -->
|
|
<section id="section-analytics" class="content-section hidden">
|
|
<div class="mb-10 text-center md:text-left">
|
|
<h2 class="font-display font-black text-3xl text-white tracking-tight mb-3">Painel de Performance do Parceiro</h2>
|
|
<p class="text-slate-400 text-sm max-w-2xl leading-relaxed">
|
|
Acompanhe em tempo real a tração da sua marca, a economia estimada gerada para os membros do Clube67 e os picos de resgate semanais.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<!-- Stat 1 -->
|
|
<div class="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden hover:border-indigo-500/30 transition-all duration-300">
|
|
<div class="absolute -top-6 -right-6 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Membros Ativos</span>
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-600/10 flex items-center justify-center text-indigo-400">
|
|
<i data-lucide="users" class="w-4 h-4"></i>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-display font-black text-3xl text-white mb-2" id="stat-members">1,248</h3>
|
|
<span class="text-10px font-bold text-emerald-400 flex items-center gap-1">
|
|
<i data-lucide="trending-up" class="w-3 h-3"></i> +12.4% este mês
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Stat 2 -->
|
|
<div class="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden hover:border-indigo-500/30 transition-all duration-300">
|
|
<div class="absolute -top-6 -right-6 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Resgates (Mês)</span>
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-600/10 flex items-center justify-center text-indigo-400">
|
|
<i data-lucide="ticket" class="w-4 h-4"></i>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-display font-black text-3xl text-white mb-2" id="stat-redemptions">384</h3>
|
|
<span class="text-10px font-bold text-emerald-400 flex items-center gap-1">
|
|
<i data-lucide="trending-up" class="w-3 h-3"></i> +8.2% esta semana
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Stat 3 -->
|
|
<div class="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-md relative overflow-hidden hover:border-indigo-500/30 transition-all duration-300">
|
|
<div class="absolute -top-6 -right-6 w-24 h-24 bg-indigo-500/5 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Economia Gerada</span>
|
|
<div class="w-8 h-8 rounded-lg bg-indigo-600/10 flex items-center justify-center text-indigo-400">
|
|
<i data-lucide="piggy-bank" class="w-4 h-4"></i>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-display font-black text-3xl text-white mb-2" id="stat-savings">R$ 14,820</h3>
|
|
<span class="text-10px font-bold text-emerald-400 flex items-center gap-1">
|
|
<i data-lucide="trending-up" class="w-3 h-3"></i> +15.1% de economia
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Grid -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
<!-- Chart 1: SVG Radial Goal (Left) -->
|
|
<div class="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-md lg:col-span-4 flex flex-col items-center justify-between min-h-[350px]">
|
|
<div class="w-full">
|
|
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Atingimento de Meta</h4>
|
|
<p class="text-10px text-slate-500">Resgates cumulativos em relação ao objetivo mensal</p>
|
|
</div>
|
|
|
|
<!-- SVG Circular gauge -->
|
|
<div class="relative w-40 h-40 flex items-center justify-center my-6">
|
|
<svg class="w-full h-full transform -rotate-90">
|
|
<circle cx="80" cy="80" r="64" class="stroke-slate-950 fill-transparent" stroke-width="10" />
|
|
<circle cx="80" cy="80" r="64" id="radial-progress-bar" class="stroke-indigo-500 fill-transparent transition-all duration-1000" stroke-width="10" stroke-dasharray="402" stroke-dashoffset="402" stroke-linecap="round" />
|
|
</svg>
|
|
<div class="absolute flex flex-col items-center justify-center">
|
|
<span class="font-display font-black text-3xl text-white" id="radial-percentage">0%</span>
|
|
<span class="text-9px font-bold uppercase tracking-wider text-slate-500">Completado</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center w-full">
|
|
<span class="text-xs font-semibold text-slate-300">Faltam apenas <span class="text-indigo-400">16 resgates</span> para bater o recorde!</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 2: Weekday vertical bar chart (Right) -->
|
|
<div class="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6 backdrop-blur-md lg:col-span-8 flex flex-col justify-between min-h-[350px]">
|
|
<div>
|
|
<h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Fluxo de Resgates por Dia</h4>
|
|
<p class="text-10px text-slate-500">Análise de picos semanais de resgates de cupons no estabelecimento</p>
|
|
</div>
|
|
|
|
<!-- Vertical bars container -->
|
|
<div class="flex items-end justify-between h-40 px-4 my-6 gap-3">
|
|
<!-- Monday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">12</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-seg"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Seg</span>
|
|
</div>
|
|
<!-- Tuesday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">25</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-ter"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Ter</span>
|
|
</div>
|
|
<!-- Wednesday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">42</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-qua"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Qua</span>
|
|
</div>
|
|
<!-- Thursday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">30</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-qui"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Qui</span>
|
|
</div>
|
|
<!-- Friday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">58</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-sex"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Sex</span>
|
|
</div>
|
|
<!-- Saturday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">70</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-sab"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Sáb</span>
|
|
</div>
|
|
<!-- Sunday -->
|
|
<div class="flex-1 flex flex-col items-center gap-2 group">
|
|
<span class="text-9px font-bold font-mono text-slate-500 group-hover:text-indigo-400 transition-colors opacity-0 group-hover:opacity-100 transition-opacity">18</span>
|
|
<div class="w-full bg-slate-950/80 rounded-t-lg h-40 flex items-end overflow-hidden border border-slate-900/20">
|
|
<div class="bg-gradient-to-t from-indigo-600 to-violet-500 w-full rounded-t-lg transition-all duration-1000" style="height: 0%" id="bar-dom"></div>
|
|
</div>
|
|
<span class="text-10px font-semibold text-slate-400">Dom</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center text-xs text-slate-400">
|
|
<span>Pico de atividades: <span class="text-white font-bold">Sábado</span></span>
|
|
<span>Atualizado há 5m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-slate-900/80 py-8 px-6 text-center text-slate-600 text-[10px] font-bold uppercase tracking-widest">
|
|
© 2026 Clube67. Todos os direitos reservados.
|
|
</footer>
|
|
|
|
<!-- Script -->
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|