Hugging Face's logo

Spaces:
xlorfx
/
spysmartai
Running

App Files Community
spysmartai / index.html
xlorfx's picture
xlorfx
Add 1 files
9679556 verified
raw
history blame contribute delete
69.1 kB
 <!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpySmartAI - Monitoramento de Concorrentes</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://assets.pagar.me/checkout/1.1.0/checkout.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
background-attachment: fixed;
color: #ffffff;
}
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.card-glass {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-shadow {
box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.3);
}
#data-visualization {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
}
h1, h2, h3 {
font-family: 'Poppins', sans-serif;
}
.typing-cursor {
display: inline-block;
width: 10px;
height: 24px;
background: #a777e3;
margin-left: 4px;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.data-node {
position: absolute;
border-radius: 50%;
background: rgba(167, 119, 227, 0.6);
box-shadow: 0 0 20px rgba(167, 119, 227, 0.6);
}
.data-connection {
position: absolute;
height: 1px;
background: rgba(167, 119, 227, 0.4);
}
.social-icon {
transition: all 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
}
.plan-card {
transition: all 0.3s ease;
}
.plan-card:hover {
transform: translateY(-10px);
}
.feature-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
margin-bottom: 1rem;
}
.add-competitor-btn {
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(167, 119, 227, 0.7);
}
.add-competitor-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(167, 119, 227, 0.9);
}
.video-container {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.video-overlay:hover {
background: rgba(0, 0, 0, 0.1);
}
.play-button {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.play-button:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 0.3);
}
.locked-feature {
position: relative;
filter: blur(2px);
pointer-events: none;
}
.locked-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 12px;
z-index: 10;
}
.locked-icon {
background: rgba(255, 255, 255, 0.2);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
max-width: 400px;
margin: 0 auto;
padding: 2rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.payment-method {
display: flex;
align-items: center;
padding: 1rem;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.payment-method:hover {
background: rgba(255, 255, 255, 0.1);
}
.payment-method.active {
background: rgba(167, 119, 227, 0.2);
border: 1px solid rgba(167, 119, 227, 0.5);
}
.payment-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
border-radius: 6px;
}
.credit-card-form {
display: none;
}
.credit-card-form.active {
display: block;
}
.pix-form {
display: none;
}
.pix-form.active {
display: block;
}
.pagar-me-form {
display: none;
}
.pagar-me-form.active {
display: block;
}
.card-element {
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
margin-bottom: 1rem;
}
.gradient-text {
background: linear-gradient(135deg, #a777e3 0%, #6e8efb 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.signup-container {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hidden {
display: none !important;
}
.upgrade-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.upgrade-modal.active {
opacity: 1;
pointer-events: all;
}
.upgrade-content {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 16px;
padding: 2rem;
max-width: 500px;
width: 90%;
border: 1px solid rgba(167, 119, 227, 0.3);
box-shadow: 0 10px 30px -15px rgba(167, 119, 227, 0.3);
}
.plan-counter {
background: rgba(167, 119, 227, 0.2);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
display: inline-block;
margin-bottom: 1rem;
}
</style>
</head>
<body class="min-h-screen">
<!-- Visualização de dados animada -->
<div id="data-visualization"></div>
<!-- Upgrade Modal -->
<div id="upgradeModal" class="upgrade-modal">
<div class="upgrade-content">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">Upgrade Required</h3>
<button id="closeUpgradeModal" class="text-gray-400 hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<p class="text-gray-300 mb-6" id="upgradeMessage">You've reached the limit of your current plan. Upgrade to Pro to continue using this feature.</p>
<div class="flex justify-between">
<button id="cancelUpgrade" class="bg-gray-700 text-white py-2 px-6 rounded-lg hover:bg-gray-600 transition">
Maybe Later
</button>
<button id="confirmUpgrade" class="gradient-bg text-white py-2 px-6 rounded-lg hover:opacity-90 transition">
Upgrade to Pro
</button>
</div>
</div>
</div>
<!-- Página Inicial (Landing Page) -->
<div id="landingPage" class="container mx-auto px-4 py-8">
<!-- Header -->
<header class="flex justify-between items-center py-6">
<div class="flex items-center">
<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center mr-3">
<i class="fas fa-robot text-white"></i>
</div>
<h1 class="text-2xl font-bold">SpySmartAI</h1>
</div>
<div class="flex space-x-4">
<a href="#features" class="text-gray-300 hover:text-white">Recursos</a>
<a href="#pricing" class="text-gray-300 hover:text-white">Planos</a>
<a href="#how-it-works" class="text-gray-300 hover:text-white">Como Funciona</a>
<button id="loginBtn" class="text-white px-4 py-2 rounded-lg hover:opacity-90 transition gradient-bg">
Entrar
</button>
</div>
</header>
<!-- Hero Section -->
<section class="py-20 text-center">
<h1 class="text-5xl font-bold mb-6 max-w-3xl mx-auto">
Monitore seus concorrentes com <span id="typing-text" class="gradient-text">Inteligência Artificial</span><span class="typing-cursor"></span>
</h1>
<p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
Descubra estratégias, analise anúncios e acompanhe mudanças de preços automaticamente.
</p>
<div class="flex justify-center space-x-4">
<button id="startFreeTrial" class="gradient-bg text-white px-8 py-3 rounded-lg hover:opacity-90 transition font-medium">
Teste Grátis por 7 dias
</button>
<button id="watchDemo" class="bg-transparent border border-gray-600 text-white px-8 py-3 rounded-lg hover:bg-gray-800 transition font-medium flex items-center">
<i class="fas fa-play-circle mr-2"></i> Ver Demonstração
</button>
</div>
</section>
<!-- Video Demo -->
<section class="py-16">
<div class="video-container mx-auto max-w-4xl">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Demo Video" class="w-full h-auto">
<div class="video-overlay">
<div class="play-button">
<i class="fas fa-play text-white text-2xl"></i>
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features" class="py-20">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Recursos Poderosos</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
Tudo que você precisa para ficar à frente da concorrência
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="card-glass rounded-xl p-6 card-shadow">
<div class="feature-icon gradient-bg">
<i class="fas fa-chart-line text-white text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Monitoramento de Preços</h3>
<p class="text-gray-300">
Acompanhe automaticamente as mudanças de preços dos seus concorrentes e receba alertas em tempo real.
</p>
</div>
<div class="card-glass rounded-xl p-6 card-shadow">
<div class="feature-icon gradient-bg">
<i class="fas fa-ad text-white text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Análise de Anúncios</h3>
<p class="text-gray-300">
Descubra os anúncios que estão funcionando para seus concorrentes e identifique oportunidades.
</p>
</div>
<div class="card-glass rounded-xl p-6 card-shadow">
<div class="feature-icon gradient-bg">
<i class="fas fa-users text-white text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Público-Alvo</h3>
<p class="text-gray-300">
Entenda quem são os clientes dos seus concorrentes e como você pode alcançá-los melhor.
</p>
</div>
</div>
</section>
<!-- Dashboard Section (Hidden by default) -->
<section id="dashboardSection" class="py-20 hidden">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold">Dashboard de Monitoramento</h2>
<div class="flex items-center">
<div id="planCounter" class="plan-counter mr-4">
Análises: <span id="analysisCount">0</span>/<span id="analysisLimit">0</span> (Starter)
</div>
<button id="addCompetitorBtn" class="gradient-bg text-white px-4 py-2 rounded-lg hover:opacity-90 transition">
<i class="fas fa-plus mr-2"></i> Adicionar Concorrente
</button>
</div>
</div>
<!-- Add Competitor Form -->
<div id="addCompetitorForm" class="card-glass rounded-xl p-6 mb-8 hidden">
<h3 class="text-xl font-bold mb-4">Adicionar Novo Concorrente</h3>
<form id="competitorForm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-300 mb-1">Nome*</label>
<input type="text" id="competitorName" required class="w-full px-4 py-2 bg-gray-700 rounded-lg border border-gray-600">
</div>
<div>
<label class="block text-gray-300 mb-1">Site*</label>
<input type="url" id="competitorWebsite" required class="w-full px-4 py-2 bg-gray-700 rounded-lg border border-gray-600">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div>
<label class="block text-gray-300 mb-1">Instagram</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-lg bg-gray-600 text-gray-300">
<i class="fab fa-instagram"></i>
</span>
<input type="text" id="competitorInstagram" class="flex-1 px-4 py-2 bg-gray-700 rounded-r-lg border border-gray-600">
</div>
</div>
<div>
<label class="block text-gray-300 mb-1">Mercado Livre</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-lg bg-gray-600 text-gray-300">
<i class="fas fa-store"></i>
</span>
<input type="url" id="competitorMercadoLivre" class="flex-1 px-4 py-2 bg-gray-700 rounded-r-lg border border-gray-600">
</div>
</div>
<div>
<label class="block text-gray-300 mb-1">TikTok</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-l-lg bg-gray-600 text-gray-300">
<i class="fab fa-tiktok"></i>
</span>
<input type="text" id="competitorTikTok" class="flex-1 px-4 py-2 bg-gray-700 rounded-r-lg border border-gray-600">
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-1">Tipo de Análise*</label>
<select id="analysisType" class="w-full px-4 py-2 bg-gray-700 rounded-lg border border-gray-600">
<option value="pricing">Preços</option>
<option value="content">Conteúdo</option>
<option value="traffic">Tráfego Pago</option>
<option value="complete">Análise Completa</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-1">Observações</label>
<textarea id="competitorNotes" rows="3" class="w-full px-4 py-2 bg-gray-700 rounded-lg border border-gray-600"></textarea>
</div>
<div class="flex justify-end space-x-3">
<button type="button" id="cancelAddCompetitor" class="bg-gray-700 text-white py-2 px-6 rounded-lg hover:bg-gray-600 transition">
Cancelar
</button>
<button type="submit" class="gradient-bg text-white py-2 px-6 rounded-lg hover:opacity-90 transition">
Iniciar Monitoramento
</button>
</div>
</form>
</div>
<!-- Competitors List -->
<div class="card-glass rounded-xl p-6 mb-8">
<h3 class="text-xl font-bold mb-4">Concorrentes Monitorados</h3>
<div class="overflow-x-auto">
<table class="w-full">
<thead>
<tr class="text-left border-b border-gray-700">
<th class="pb-3">Nome</th>
<th class="pb-3">Site</th>
<th class="pb-3">Tipo de Análise</th>
<th class="pb-3">Última Atualização</th>
<th class="pb-3">Status</th>
<th class="pb-3">Ações</th>
</tr>
</thead>
<tbody id="competitorsList">
<!-- Competitors will be loaded here -->
</tbody>
</table>
</div>
</div>
<!-- AI Analysis Report -->
<div class="card-glass rounded-xl p-6 mb-8">
<h3 class="text-xl font-bold mb-4">Última Análise: <span id="currentCompetitor">Loja Exemplo</span></h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
<h4 class="font-bold text-purple-300 mb-2">Estratégias Detectadas</h4>
<ul id="detectedStrategies" class="list-disc list-inside text-sm text-gray-300 space-y-1">
<li>Promoções relâmpago às quartas-feiras</li>
<li>Uso intensivo de anúncios no Instagram</li>
<li>Preços dinâmicos baseados em concorrência</li>
</ul>
</div>
<div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
<h4 class="font-bold text-purple-300 mb-2">Pontos Fortes</h4>
<ul id="strengthsList" class="list-disc list-inside text-sm text-gray-300 space-y-1">
<li>Fotos de produtos em alta qualidade</li>
<li>Atendimento rápido via WhatsApp</li>
<li>Frete grátis acima de R$ 150</li>
</ul>
</div>
<div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
<h4 class="font-bold text-purple-300 mb-2">Sugestões</h4>
<ul id="suggestionsList" class="list-disc list-inside text-sm text-gray-300 space-y-1">
<li>Criar promoções nas mesmas datas</li>
<li>Melhorar descrições de produtos</li>
<li>Oferecer frete grátis em compras menores</li>
</ul>
</div>
</div>
<button id="downloadReport" class="text-purple-300 hover:text-white text-sm">
<i class="fas fa-download mr-1"></i> Baixar Relatório Completo
</button>
</div>
<!-- Alert Settings -->
<div class="card-glass rounded-xl p-6">
<h3 class="text-xl font-bold mb-4">Alertas Automáticos</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium">Mudanças de Preço</h4>
<p class="text-sm text-gray-400">Notificar quando houver variação superior a:</p>
</div>
<div class="flex items-center">
<input type="number" id="priceChangeThreshold" value="10" class="w-16 px-3 py-1 bg-gray-700 rounded-lg border border-gray-600 text-right">
<span class="ml-2">%</span>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<h4 class="font-medium">Novos Anúncios</h4>
<p class="text-sm text-gray-400">Notificar sobre novos anúncios</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="newAdsAlert" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500"></div>
</label>
</div>
<div class="pt-4 border-t border-gray-700">
<h4 class="font-medium mb-2">Canais de Notificação</h4>
<div class="flex flex-wrap gap-3">
<label class="inline-flex items-center">
<input type="checkbox" id="emailAlerts" class="rounded bg-gray-700 border-gray-600 text-purple-500 focus:ring-purple-500" checked>
<span class="ml-2 text-gray-300">E-mail</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" id="whatsappAlerts" class="rounded bg-gray-700 border-gray-600 text-purple-500 focus:ring-purple-500">
<span class="ml-2 text-gray-300">WhatsApp</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" id="telegramAlerts" class="rounded bg-gray-700 border-gray-600 text-purple-500 focus:ring-purple-500">
<span class="ml-2 text-gray-300">Telegram</span>
</label>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section id="how-it-works" class="py-20 bg-gray-900 bg-opacity-50 rounded-3xl">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Como Funciona</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
Em apenas 3 passos você começa a monitorar seus concorrentes
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">1</div>
<h3 class="text-xl font-bold mb-2">Adicione Concorrentes</h3>
<p class="text-gray-300">
Insira os sites e redes sociais dos concorrentes que deseja monitorar.
</p>
</div>
<div class="flex flex-col items-center text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">2</div>
<h3 class="text-xl font-bold mb-2">Configure Alertas</h3>
<p class="text-gray-300">
Defina quais tipos de mudanças você quer ser notificado.
</p>
</div>
<div class="flex flexocol items-center text-center">
<div class="w-16 h-16 rounded-full gradient-bg flex items-center justify-center mb-4 text-white text-xl font-bold">3</div>
<h3 class="text-xl font-bold mb-2">Receba Insights</h3>
<p class="text-gray-300">
Acesse relatórios completos e tome decisões baseadas em dados.
</p>
</div>
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-20">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Planos que se Adaptam a Você</h2>
<p class="text-gray-300 max-w-2xl mx-auto">
Teste grátis por 7 dias e depois escolha o plano ideal
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="plan-card card-glass rounded-xl p-6 card-shadow border-2 border-purple-500 relative">
<div class="absolute top-0 right-0 bg-purple-500 text-white px-3 py-1 text-xs font-bold rounded-bl-lg rounded-tr-lg">
POPULAR
</div>
<h3 class="text-xl font-bold mb-2">Starter</h3>
<p class="text-4xl font-bold mb-4">R$ 97<span class="text-lg text-gray-400">/mês</span></p>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Até 3 Concorrentes
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
20 Análises/mês
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Alertas Básicos (1x/dia)
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Histórico de 7 dias
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-400 mr-2"></i>
Exportação de Relatórios
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-400 mr-2"></i>
API Access
</li>
</ul>
<button class="w-full gradient-bg text-white py-3 px-6 rounded-lg hover:opacity-90 transition select-plan-btn" data-plan="starter">
Teste Grátis
</button>
</div>
<div class="plan-card card-glass rounded-xl p-6 card-shadow">
<h3 class="text-xl font-bold mb-2">Pro</h3>
<p class="text-4xl font-bold mb-4">R$ 197<span class="text-lg text-gray-400">/mês</span></p>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Concorrentes Ilimitados
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Análises Ilimitadas
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Alertas em Tempo Real
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Histórico Completo
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
Exportar Relatórios (PDF/CSV)
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
API Access (Webhooks)
</li>
</ul>
<button class="w-full gradient-bg text-white py-3 px-6 rounded-lg hover:opacity-90 transition select-plan-btn" data-plan="pro">
Assinar Agora
</button>
</div>
</div>
</section>
<!-- Login Modal -->
<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
<div class="login-container">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold">Acesse sua conta</h2>
<p class="text-gray-300">Entre para continuar</p>
</div>
<form id="loginForm">
<div class="mb-4">
<label for="loginEmail" class="block text-gray-300 mb-2">E-mail</label>
<input type="email" id="loginEmail" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div class="mb-6">
<label for="loginPassword" class="block text-gray-300 mb-2">Senha</label>
<input type="password" id="loginPassword" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<button type="submit" class="w-full gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition mb-4">
Entrar
</button>
<div class="text-center">
<p class="text-gray-400">Não tem uma conta? <a href="#" id="signupLink" class="text-purple-400 hover:text-purple-300">Cadastre-se</a></p>
</div>
</form>
</div>
</div>
<!-- Signup Modal -->
<div id="signupModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
<div class="signup-container">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold">Crie sua conta</h2>
<p class="text-gray-300">Comece seu teste gratuito de 7 dias</p>
</div>
<form id="signupForm">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="firstName" class="block text-gray-300 mb-2">Nome</label>
<input type="text" id="firstName" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="lastName" class="block text-gray-300 mb-2">Sobrenome</label>
<input type="text" id="lastName" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-300 mb-2">E-mail</label>
<input type="email" id="email" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="password" class="block text-gray-300 mb-2">Senha</label>
<input type="password" id="password" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div>
<label for="confirmPassword" class="block text-gray-300 mb-2">Confirme a Senha</label>
<input type="password" id="confirmPassword" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
</div>
<div class="mb-4">
<label for="company" class="block text-gray-300 mb-2">Empresa</label>
<input type="text" id="company" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<div class="mb-4">
<label for="position" class="block text-gray-300 mb-2">Cargo</label>
<input type="text" id="position" class="w-full px-4 py-2 bg-gray-800 rounded-lg border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" required>
</div>
<button type="submit" class="w-full gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition mb-4">
Criar Conta
</button>
<div class="text-center">
<p class="text-gray-400">Já tem uma conta? <a href="#" id="loginLink" class="text-purple-400 hover:text-purple-300">Entre</a></p>
</div>
</form>
</div>
</div>
<!-- Upgrade Plan Modal -->
<div id="upgradePlanModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
<div class="login-container">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold">Upgrade to Pro</h2>
<p class="text-gray-300">Unlock all features and remove limitations</p>
</div>
<div class="mb-6">
<div class="payment-method active" data-method="credit_card">
<div class="payment-icon gradient-bg">
<i class="fas fa-credit-card text-white"></i>
</div>
<div>
<h4 class="font-medium">Cartão de Crédito</h4>
<p class="text-sm text-gray-400">Pague com Visa, Mastercard ou outros</p>
</div>
</div>
<div class="payment-method" data-method="pix">
<div class="payment-icon gradient-bg">
<i class="fas fa-barcode text-white"></i>
</div>
<div>
<h4 class="font-medium">PIX</h4>
<p class="text-sm text-gray-400">Pagamento instantâneo via PIX</p>
</div>
</div>
<div class="payment-method" data-method="pagar_me">
<div class="payment-icon gradient-bg">
<i class="fas fa-credit-card text-white"></i>
</div>
<div>
<h4 class="font-medium">Pagar.me</h4>
<p class="text-sm text-gray-400">Pagamento via Pagar.me (cartão ou boleto)</p>
</div>
</div>
</div>
<div id="creditCardForm" class="credit-card-form active">
<div id="card-element" class="card-element"></div>
<button id="submitPayment" class="w-full gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition">
Pagar R$ 197/mês
</button>
</div>
<div id="pixForm" class="pix-form">
<div class="text-center mb-4">
<p class="text-gray-300 mb-2">Você receberá um QR Code para pagamento via PIX</p>
<div class="bg-white p-4 rounded-lg inline-block">
<div class="w-48 h-48 bg-gray-200 flex items-center justify-center">
<p class="text-gray-500">QR Code PIX</p>
</div>
</div>
</div>
<button id="confirmPixPayment" class="w-full gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition">
Gerar PIX
</button>
</div>
<div id="pagarMeForm" class="pagar-me-form">
<div class="text-center mb-4">
<p class="text-gray-300 mb-2">Você será redirecionado para o Pagar.me para finalizar o pagamento</p>
<div class="flex justify-center space-x-4">
<button id="pagarMeCreditCard" class="gradient-bg text-white py-2 px-4 rounded-lg hover:opacity-90 transition">
Cartão de Crédito
</button>
<button id="pagarMeBoleto" class="bg-gray-700 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition">
Boleto Bancário
</button>
</div>
</div>
</div>
<div class="text-center mt-6">
<button id="cancelUpgrade" class="text-gray-400 hover:text-white">
Cancelar
</button>
</div>
</div>
</div>
</div>
<script>
// =============================================
// CONFIGURAÇÕES DA APLICAÇÃO
// =============================================
const API_CONFIG = {
baseUrl: 'https://api.spysmartai.com/v1',
stripePublicKey: 'pk_test_your_stripe_public_key_here',
pagarmePublicKey: 'pk_test_your_pagarme_public_key_here',
mistralApiKey: 'sk_your_mistral_api_key_here',
n8nWebhookUrl: 'https://your-n8n-instance.com/webhook/path',
competitorEndpoint: 'https://seu-replit.seu-usuario.repl.co/add-competitor'
};
// =============================================
// BANCO DE DADOS SIMULADO (LOCALSTORAGE)
// =============================================
let usersDB = JSON.parse(localStorage.getItem('usersDB')) || [];
let currentUser = JSON.parse(localStorage.getItem('currentUser')) || null;
let competitors = JSON.parse(localStorage.getItem('competitors')) || [
{
id: '1',
name: 'Competidor 1',
website: 'www.competidor1.com.br',
instagram: '@competidor1',
mercadoLivre: 'loja.mercadolivre.com.br/competidor1',
tiktok: '@competidor1',
analysisType: 'complete',
notes: 'Principal concorrente no segmento de eletrônicos',
status: 'active',
lastUpdate: '2023-06-10'
},
{
id: '2',
name: 'Competidor 2',
website: 'www.competidor2.com.br',
instagram: '@competidor2',
mercadoLivre: 'loja.mercadolivre.com.br/competidor2',
tiktok: '@competidor2',
analysisType: 'pricing',
notes: 'Concorrente secundário com preços agressivos',
status: 'updating',
lastUpdate: '2023-06-09'
}
];
// =============================================
// ELEMENTOS DOM
// =============================================
const loginModal = document.getElementById('loginModal');
const loginBtn = document.getElementById('loginBtn');
const loginForm = document.getElementById('loginForm');
const signupModal = document.getElementById('signupModal');
const signupForm = document.getElementById('signupForm');
const signupLink = document.getElementById('signupLink');
const loginLink = document.getElementById('loginLink');
const startFreeTrialBtn = document.getElementById('startFreeTrial');
const typingText = document.getElementById('typing-text');
const landingPage = document.getElementById('landingPage');
const dashboardSection = document.getElementById('dashboardSection');
const addCompetitorBtn = document.getElementById('addCompetitorBtn');
const addCompetitorForm = document.getElementById('addCompetitorForm');
const cancelAddCompetitor = document.getElementById('cancelAddCompetitor');
const competitorForm = document.getElementById('competitorForm');
const competitorsList = document.getElementById('competitorsList');
const upgradeModal = document.getElementById('upgradeModal');
const closeUpgradeModal = document.getElementById('closeUpgradeModal');
const cancelUpgrade = document.getElementById('cancelUpgrade');
const confirmUpgrade = document.getElementById('confirmUpgrade');
const upgradePlanModal = document.getElementById('upgradePlanModal');
const paymentMethods = document.querySelectorAll('.payment-method');
const creditCardForm = document.getElementById('creditCardForm');
const pixForm = document.getElementById('pixForm');
const pagarMeForm = document.getElementById('pagarMeForm');
const pagarMeCreditCard = document.getElementById('pagarMeCreditCard');
const pagarMeBoleto = document.getElementById('pagarMeBoleto');
const planCounter = document.getElementById('planCounter');
const analysisCount = document.getElementById('analysisCount');
const analysisLimit = document.getElementById('analysisLimit');
const selectPlanBtns = document.querySelectorAll('.select-plan-btn');
// =============================================
// EVENT LISTENERS
// =============================================
loginBtn.addEventListener('click', showLoginModal);
startFreeTrialBtn.addEventListener('click', showSignupModal);
signupLink.addEventListener('click', switchToSignup);
loginLink.addEventListener('click', switchToLogin);
loginForm.addEventListener('submit', handleLogin);
signupForm.addEventListener('submit', handleSignup);
addCompetitorBtn.addEventListener('click', showAddCompetitorForm);
cancelAddCompetitor.addEventListener('click', hideAddCompetitorForm);
competitorForm.addEventListener('submit', handleAddCompetitor);
closeUpgradeModal?.addEventListener('click', hideUpgradeModal);
cancelUpgrade?.addEventListener('click', hideUpgradeModal);
confirmUpgrade?.addEventListener('click', showUpgradePlanModal);
paymentMethods.forEach(method => {
method.addEventListener('click', () => selectPaymentMethod(method));
});
selectPlanBtns.forEach(btn => {
btn.addEventListener('click', handlePlanSelection);
});
pagarMeCreditCard?.addEventListener('click', () => processPagarMePayment('credit_card'));
pagarMeBoleto?.addEventListener('click', () => processPagarMePayment('boleto'));
// Initialize Stripe
const stripe = Stripe(API_CONFIG.stripePublicKey);
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');
// =============================================
// FUNÇÕES PRINCIPAIS
// =============================================
function showLoginModal() {
loginModal.classList.remove('hidden');
signupModal.classList.add('hidden');
document.body.style.overflow = 'hidden';
}
function hideLoginModal() {
loginModal.classList.add('hidden');
document.body.style.overflow = '';
}
function showSignupModal() {
signupModal.classList.remove('hidden');
loginModal.classList.add('hidden');
document.body.style.overflow = 'hidden';
}
function hideSignupModal() {
signupModal.classList.add('hidden');
document.body.style.overflow = '';
}
function switchToSignup(e) {
e.preventDefault();
loginModal.classList.add('hidden');
signupModal.classList.remove('hidden');
}
function switchToLogin(e) {
e.preventDefault();
signupModal.classList.add('hidden');
loginModal.classList.remove('hidden');
}
function showDashboard() {
landingPage.classList.add('hidden');
dashboardSection.classList.remove('hidden');
loadCompetitors();
updatePlanCounter();
}
function showLandingPage() {
dashboardSection.classList.add('hidden');
landingPage.classList.remove('hidden');
}
function showAddCompetitorForm() {
// Check plan limits
if (currentUser?.plan === 'starter' && competitors.length >= 3) {
showUpgradeModal('Você atingiu o limite de 3 concorrentes no plano Starter. Faça upgrade para Pro para adicionar mais concorrentes.');
return;
}
addCompetitorForm.classList.remove('hidden');
addCompetitorBtn.classList.add('hidden');
}
function hideAddCompetitorForm() {
addCompetitorForm.classList.add('hidden');
addCompetitorBtn.classList.remove('hidden');
competitorForm.reset();
}
function showUpgradeModal(message) {
document.getElementById('upgradeMessage').textContent = message;
upgradeModal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function hideUpgradeModal() {
upgradeModal.classList.remove('active');
upgradePlanModal.classList.add('hidden');
document.body.style.overflow = '';
}
function showUpgradePlanModal() {
upgradePlanModal.classList.remove('hidden');
upgradeModal.classList.remove('active');
}
function selectPaymentMethod(method) {
paymentMethods.forEach(m => m.classList.remove('active'));
method.classList.add('active');
const methodType = method.getAttribute('data-method');
// Hide all forms first
creditCardForm.classList.remove('active');
pixForm.classList.remove('active');
pagarMeForm.classList.remove('active');
// Show selected form
if (methodType === 'credit_card') {
creditCardForm.classList.add('active');
} else if (methodType === 'pix') {
pixForm.classList.add('active');
} else if (methodType === 'pagar_me') {
pagarMeForm.classList.add('active');
}
}
function handlePlanSelection(e) {
const plan = e.currentTarget.getAttribute('data-plan');
if (plan === 'starter') {
showSignupModal();
} else {
showUpgradePlanModal();
}
}
function updatePlanCounter() {
if (!currentUser) return;
if (currentUser.plan === 'starter' || currentUser.plan === 'starter_trial') {
planCounter.classList.remove('hidden');
analysisCount.textContent = '5'; // Mock data
analysisLimit.textContent = '20';
} else {
planCounter.classList.add('hidden');
}
}
function processPagarMePayment(paymentMethod) {
// Configuração do checkout Pagar.me
const checkout = new PagarMeCheckout.Checkout({
encryption_key: API_CONFIG.pagarmePublicKey,
success: function(data) {
alert('Pagamento realizado com sucesso! ID da transação: ' + data.id);
hideUpgradeModal();
// Atualizar o plano do usuário para Pro
if (currentUser) {
currentUser.plan = 'pro';
localStorage.setItem('currentUser', JSON.stringify(currentUser));
alert('Seu plano foi atualizado para Pro com sucesso!');
updatePlanCounter();
}
},
error: function(err) {
console.error('Erro no pagamento:', err);
alert('Ocorreu um erro ao processar seu pagamento. Por favor, tente novamente.');
},
close: function() {
console.log('Modal de pagamento fechado');
}
});
// Configuração da transação
const paymentData = {
amount: 19700, // R$ 197,00 em centavos
buttonText: 'Pagar R$ 197,00',
customerData: 'true',
createToken: 'false',
paymentMethod: paymentMethod,
postbackUrl: API_CONFIG.n8nWebhookUrl,
items: [
{
id: 'pro_plan',
title: 'Plano Pro SpySmartAI',
unit_price: 19700,
quantity: 1,
tangible: false
}
],
customer: {
name: currentUser?.firstName + ' ' + currentUser?.lastName,
email: currentUser?.email,
external_id: currentUser?.id || 'guest_' + Date.now(),
type: 'individual',
country: 'br',
documents: [
{
type: 'cpf',
number: '00000000000' // Substituir por CPF real em produção
}
],
phone_numbers: ['+5511999999999'] // Substituir por telefone real em produção
},
billing: {
name: currentUser?.firstName + ' ' + currentUser?.lastName,
address: {
country: 'br',
state: 'sp',
city: 'São Paulo',
neighborhood: 'Centro',
street: 'Av. Paulista',
street_number: '1000',
zipcode: '01310000'
}
}
};
// Abrir modal de pagamento do Pagar.me
checkout.open(paymentData);
}
function handleLogin(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
// Simulação de login
const user = usersDB.find(u => u.email === email && u.password === password);
if (user) {
currentUser = user;
localStorage.setItem('currentUser', JSON.stringify(currentUser));
hideLoginModal();
showDashboard();
alert('Login realizado com sucesso!');
} else {
alert('E-mail ou senha incorretos');
}
}
function handleSignup(e) {
e.preventDefault();
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
const company = document.getElementById('company').value;
const position = document.getElementById('position').value;
if (password !== confirmPassword) {
alert('As senhas não coincidem');
return;
}
// Verificar se o usuário já existe
if (usersDB.some(u => u.email === email)) {
alert('Este e-mail já está cadastrado');
return;
}
// Criar novo usuário
const newUser = {
id: Date.now().toString(),
firstName,
lastName,
email,
password,
company,
position,
plan: 'starter_trial',
trialEnd: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
competitorsCount: 0,
analysisCount: 0
};
usersDB.push(newUser);
localStorage.setItem('usersDB', JSON.stringify(usersDB));
currentUser = newUser;
localStorage.setItem('currentUser', JSON.stringify(currentUser));
hideSignupModal();
showDashboard();
alert('Cadastro realizado com sucesso! Bem-vindo ao seu teste gratuito de 7 dias.');
}
function handleAddCompetitor(e) {
e.preventDefault();
// Check plan limits
if (currentUser?.plan === 'starter' && competitors.length >= 3) {
showUpgradeModal('Você atingiu o limite de 3 concorrentes no plano Starter. Faça upgrade para Pro para adicionar mais concorrentes.');
return;
}
const competitorData = {
id: Date.now().toString(),
name: document.getElementById('competitorName').value,
website: document.getElementById('competitorWebsite').value,
instagram: document.getElementById('competitorInstagram').value,
mercadoLivre: document.getElementById('competitorMercadoLivre').value,
tiktok: document.getElementById('competitorTikTok').value,
analysisType: document.getElementById('analysisType').value,
notes: document.getElementById('competitorNotes').value,
status: 'active',
lastUpdate: new Date().toISOString().split('T')[0]
};
// Simulação de chamada à API
try {
// Adiciona o concorrente localmente
competitors.push(competitorData);
localStorage.setItem('competitors', JSON.stringify(competitors));
// Atualiza a lista de concorrentes
loadCompetitors();
// Esconde o formulário
hideAddCompetitorForm();
alert('Concorrente adicionado com sucesso! A análise começará em breve.');
// Aqui você faria a chamada real à API
/*
const response = await fetch(API_CONFIG.competitorEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('authToken')}`
},
body: JSON.stringify(competitorData)
});
if (response.ok) {
loadCompetitors();
hideAddCompetitorForm();
alert('Concorrente adicionado com sucesso!');
} else {
throw new Error('Erro ao adicionar concorrente');
}
*/
} catch (error) {
console.error('Erro:', error);
alert('Falha ao adicionar concorrente');
}
}
function loadCompetitors() {
competitorsList.innerHTML = '';
if (competitors.length === 0) {
competitorsList.innerHTML = `
<tr>
<td colspan="6" class="py-4 text-center text-gray-400">
Nenhum concorrente cadastrado ainda. Clique em "Adicionar Concorrente" para começar.
</td>
</tr>
`;
return;
}
competitors.forEach(competitor => {
const statusClass = competitor.status === 'active' ? 'bg-green-500' : 'bg-yellow-500';
const statusText = competitor.status === 'active' ? 'Ativo' : 'Em Análise';
competitorsList.innerHTML += `
<tr class="border-b border-gray-700 hover:bg-gray-800">
<td class="py-4">${competitor.name}</td>
<td class="py-4">
<a href="https://${competitor.website}" target="_blank" class="text-purple-300 hover:text-purple-200">
${competitor.website}
</a>
</td>
<td class="py-4 capitalize">${competitor.analysisType}</td>
<td class="py-4">${competitor.lastUpdate}</td>
<td class="py-4">
<span class="inline-block w-3 h-3 rounded-full ${statusClass} mr-2"></span>
${statusText}
</td>
<td class="py-4">
<button class="text-purple-300 hover:text-white mr-3 view-report-btn" data-id="${competitor.id}">
<i class="fas fa-chart-bar"></i>
</button>
<button class="text-gray-400 hover:text-white delete-competitor-btn" data-id="${competitor.id}">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`;
});
// Adiciona event listeners aos botões
document.querySelectorAll('.view-report-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const competitorId = e.currentTarget.getAttribute('data-id');
viewCompetitorReport(competitorId);
});
});
document.querySelectorAll('.delete-competitor-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const competitorId = e.currentTarget.getAttribute('data-id');
deleteCompetitor(competitorId);
});
});
}
function viewCompetitorReport(competitorId) {
const competitor = competitors.find(c => c.id === competitorId);
if (!competitor) return;
// Check analysis limits for Starter plan
if (currentUser?.plan === 'starter' || currentUser?.plan === 'starter_trial') {
const remainingAnalyses = 20 - (currentUser.analysisCount || 0);
if (remainingAnalyses <= 0) {
showUpgradeModal('Você atingiu o limite de 20 análises mensais no plano Starter. Faça upgrade para Pro para análises ilimitadas.');
return;
}
// Increment analysis count
currentUser.analysisCount = (currentUser.analysisCount || 0) + 1;
localStorage.setItem('currentUser', JSON.stringify(currentUser));
updatePlanCounter();
}
// Atualiza o relatório na UI
document.getElementById('currentCompetitor').textContent = competitor.name;
// Aqui você buscaria os dados reais da API
// Por enquanto estamos usando dados mockados
const detectedStrategies = [
'Promoções relâmpago às quartas-feiras',
'Uso intensivo de anúncios no Instagram',
'Preços dinâmicos baseados em concorrência'
];
const strengthsList = [
'Fotos de produtos em alta qualidade',
'Atendimento rápido via WhatsApp',
'Frete grátis acima de R$ 150'
];
const suggestionsList = [
'Criar promoções nas mesmas datas',
'Melhorar descrições de produtos',
'Oferecer frete grátis em compras menores'
];
// Preenche as listas
const detectedStrategiesEl = document.getElementById('detectedStrategies');
const strengthsListEl = document.getElementById('strengthsList');
const suggestionsListEl = document.getElementById('suggestionsList');
detectedStrategiesEl.innerHTML = detectedStrategies.map(item => `<li>${item}</li>`).join('');
strengthsListEl.innerHTML = strengthsList.map(item => `<li>${item}</li>`).join('');
suggestionsListEl.innerHTML = suggestionsList.map(item => `<li>${item}</li>`).join('');
// Rola até a seção de relatórios
document.querySelector('#dashboardSection').scrollIntoView({
behavior: 'smooth'
});
}
function deleteCompetitor(competitorId) {
if (confirm('Tem certeza que deseja remover este concorrente?')) {
competitors = competitors.filter(c => c.id !== competitorId);
localStorage.setItem('competitors', JSON.stringify(competitors));
loadCompetitors();
alert('Concorrente removido com sucesso!');
}
}
// =============================================
// ANIMAÇÃO DE DIGITAÇÃO (HERO SECTION)
// =============================================
const typingWords = [
"Inteligência Artificial",
"Análise de Concorrentes",
"Monitoramento de Preços",
"Estratégias de Marketing",
"Dados em Tempo Real",
"Relatórios Automatizados"
];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
let typingSpeed = 100;
let pauseBetweenWords = 2000; // 2 segundos entre palavras
function typeWriter() {
const currentWord = typingWords[wordIndex];
const currentChar = currentWord.substring(0, charIndex);
typingText.textContent = currentChar;
if (!isDeleting && charIndex < currentWord.length) {
// Digitando
charIndex++;
typingSpeed = 100;
} else if (isDeleting && charIndex > 0) {
// Apagando
charIndex--;
typingSpeed = 50;
} else {
// Mudando de palavra
isDeleting = !isDeleting;
if (!isDeleting) {
wordIndex = (wordIndex + 1) % typingWords.length;
typingSpeed = 500; // Pausa antes de começar a digitar
} else {
typingSpeed = pauseBetweenWords; // Pausa antes de começar a apagar
}
}
setTimeout(typeWriter, typingSpeed);
}
// Iniciar animação de digitação
setTimeout(typeWriter, 1000);
// Check if user is logged in on page load
document.addEventListener('DOMContentLoaded', () => {
if (currentUser) {
showDashboard();
}
});
</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=xlorfx/spysmartai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>