Hugging Face's logo

Spaces:
adriano2005
/
ddsaasdsda
Running

App Files Community
ddsaasdsda / index.html
adriano2005's picture
adriano2005
Update index.html
c79b275 verified
raw
history blame contribute delete
31.2 kB
 <!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>VPS Vitalícia - Elite Cloud Computing</title>
<!-- 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;800;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
<!-- Scripts -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'neon': '#00ff00',
'neon-glow': '#00ff0044',
'dark-bg': '#020202',
'dark-card': '#0a0a0a',
'dark-border': '#1a1a1a',
'red-pill': '#ff3333',
},
fontFamily: {
'sans': ['Inter', 'sans-serif'],
'mono': ['JetBrains Mono', 'monospace'],
},
}
}
}
</script>
<style>
:root {
--neon: #00ff00;
--red-pill: #ff3333;
--dark-bg: #020202;
--transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-medium: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
background-color: var(--dark-bg);
color: #e0e0e0;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* == GRADIENT TEXT == */
.text-gradient-green {
background: linear-gradient(135deg, #fff 30%, var(--neon) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* == PROFESSIONAL GRADIENTS == */
.bg-grad-dark {
background: radial-gradient(circle at top, #0a1a0a 0%, #020202 100%);
}
.glass-panel {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 255, 0, 0.05);
transition: var(--transition-medium);
}
.glass-panel:hover {
border-color: rgba(0, 255, 0, 0.3);
box-shadow: 0 0 40px rgba(0, 255, 0, 0.08);
transform: translateY(-8px);
}
/* == MONITOR PLAYER == */
.monitor-frame {
position: relative;
border: 2px solid #1a1a1a;
border-radius: 24px;
background: #000;
padding: 8px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
transition: var(--transition-slow);
}
.monitor-frame:hover {
border-color: var(--neon);
box-shadow: 0 0 60px rgba(0, 255, 0, 0.15);
transform: translateY(-10px) scale(1.01);
}
/* == VSL VERTICAL MOCKUP == */
.vsl-vertical {
width: 100%;
max-width: 300px;
aspect-ratio: 9/16;
margin: 0 auto;
border-radius: 32px;
border: 6px solid #1a1a1a;
background: #000;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
position: relative;
transition: var(--transition-slow);
}
.vsl-vertical:hover {
transform: translateY(-10px) rotate(1deg);
box-shadow: 0 30px 60px rgba(0, 255, 0, 0.1);
}
.vsl-vertical::after {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 35%; height: 18px;
background: #1a1a1a;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
z-index: 10;
}
/* == BUTTONS == */
.btn-elite {
background: linear-gradient(135deg, var(--neon) 0%, #00cc00 100%);
color: #000;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition-medium);
box-shadow: 0 10px 20px rgba(0, 255, 0, 0.1);
}
.btn-elite:hover {
transform: scale(1.08) translateY(-3px);
box-shadow: 0 20px 40px rgba(0, 255, 0, 0.4);
}
/* == ANCHOR SECTION (RED vs GREEN) == */
.anchor-card-red {
background: rgba(255, 51, 51, 0.01);
border: 1px solid rgba(255, 51, 51, 0.05);
transition: var(--transition-slow);
}
.anchor-card-red:hover {
border-color: rgba(255, 51, 51, 0.3);
background: rgba(255, 51, 51, 0.03);
transform: translateY(-10px);
}
.anchor-card-green {
background: rgba(0, 255, 0, 0.01);
border: 1px solid rgba(0, 255, 0, 0.05);
transition: var(--transition-slow);
}
.anchor-card-green:hover {
border-color: rgba(0, 255, 0, 0.4);
background: rgba(0, 255, 0, 0.04);
transform: translateY(-12px);
box-shadow: 0 20px 50px rgba(0, 255, 0, 0.1);
}
/* == UTILITIES == */
.neon-dot {
width: 8px; height: 8px;
background: var(--neon);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 10px var(--neon);
margin-right: 8px;
}
.custom-grid {
background-image: linear-gradient(rgba(0, 255, 0, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 0, 0.015) 1px, transparent 1px);
background-size: 40px 40px;
}
/* == AESTHETIC GLOW ORBS == */
.glow-orb {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 255, 0, 0.03) 0%, transparent 70%);
filter: blur(80px);
z-index: -1;
pointer-events: none;
animation: float 8s infinite ease-in-out;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(50px, 50px); }
}
/* == AUTO GLOW ANIMATION (SIMULATING HOVER) == */
@keyframes autoGlowEffect {
0%, 100% {
filter: drop-shadow(0 0 0px transparent);
transform: scale(1);
color: inherit;
}
50% {
filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 20px var(--neon));
transform: scale(1.2);
color: var(--neon);
}
}
.auto-glow-icon {
animation: autoGlowEffect 3s infinite ease-in-out !important;
display: inline-block;
}
/* == PERFORMANCE HIBERNATION (ULTRA FLUIDITY) == */
.vps-active .glow-orb { animation: none !important; display: none !important; }
.vps-active .custom-grid { background-image: none !important; background-color: #000 !important; }
.vps-active #siteContent { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.vps-active body { overflow: hidden !important; background: #000 !important; }
</style>
</head>
<body class="custom-grid">
<div class="glow-orb top-[-200px] left-[-200px]"></div>
<div class="glow-orb bottom-[-200px] right-[-200px]" style="animation-delay: -4s;"></div>
<div id="siteContent">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 border-b border-dark-border bg-dark-bg/60 backdrop-blur-xl transition-all duration-400">
<div class="container mx-auto px-6 py-5 flex justify-between items-center">
<div class="flex items-center space-x-2 group cursor-pointer">
<span class="text-2xl font-black tracking-tighter text-white transition-all duration-300 group-hover:text-neon">INFINITY<span class="text-neon">VPS</span></span>
</div>
<div class="hidden md:flex items-center space-x-10 text-[10px] font-black uppercase tracking-[0.3em] text-gray-500">
<a href="#teste" class="hover:text-neon transition-all duration-300">Teste Real</a>
<a href="#vsl" class="hover:text-neon transition-all duration-300">O Método</a>
<a href="#precos" class="hover:text-neon transition-all duration-300">Planos</a>
<a href="https://wa.me/SEU_NUMERO_AQUI" class="btn-elite px-8 py-2.5 rounded-full">Acesso Vitalício</a>
</div>
</div>
</nav>
<!-- Hero & Player Section -->
<section id="teste" class="pt-40 pb-24 px-6 bg-grad-dark">
<div class="container mx-auto text-center">
<div data-aos="fade-down" data-aos-duration="800" class="inline-flex items-center space-x-2 px-5 py-2 rounded-full bg-neon/5 border border-neon/10 text-neon text-[9px] font-black uppercase tracking-[0.4em] mb-10">
<span class="neon-dot animate-pulse"></span> Servidor Online & Disponível
</div>
<h1 data-aos="fade-up" data-aos-duration="800" class="text-6xl md:text-8xl font-black leading-[0.9] mb-8 text-gradient-green tracking-tighter">
Sua Liberdade<br>Digital <span class="text-neon">Aqui.</span>
</h1>
<p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 text-xl max-w-2xl mx-auto mb-16 font-medium leading-relaxed">
Pague uma única vez. Use para sempre. Experimente agora mesmo o poder de um computador 8GB RAM na nuvem.
</p>
<!-- MONITOR PLAYER -->
<div data-aos="zoom-in" data-aos-duration="1000" class="max-w-5xl mx-auto monitor-frame group cursor-pointer overflow-hidden" onclick="ativarExperienciaTotal()">
<div class="aspect-video bg-black relative overflow-hidden rounded-2xl">
<img src="https://storage.googleapis.com/telepost-local/files-v2/69739aaa01498c987624aadc/photo/O5YNYODYC.jpg" alt="VPS Preview" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-all duration-500">
<div class="absolute inset-0 flex flex-col items-center justify-center">
<div class="flex items-center justify-center transition-all duration-500 group-hover:scale-125">
<div class="w-20 h-20 flex items-center justify-center">
<i data-feather="play" class="text-neon/40 fill-current w-16 h-16 ml-1"></i>
</div>
</div>
<span class="mt-10 text-white font-black uppercase tracking-[0.5em] text-[10px] opacity-60 group-hover:opacity-100 transition-all duration-500">INICIAR PC REMOTO TESTE GRATUITO</span>
</div>
</div>
</div>
<!-- PROVA SOCIAL RÁPIDA -->
<div data-aos="fade-up" data-aos-delay="500" class="mt-12 flex flex-wrap justify-center items-center gap-8 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
<div class="flex items-center space-x-2">
<i data-feather="users" class="w-4 h-4 auto-glow-icon" style="animation-delay: 0s;"></i>
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-300">+<span class="counter" data-target="2400" data-speed="2000">0</span> Usuários Ativos</span>
</div>
<div class="flex items-center space-x-2">
<i data-feather="star" class="w-4 h-4 text-neon fill-current auto-glow-icon" style="animation-delay: 1s;"></i>
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-300"><span class="counter" data-target="4.9" data-decimals="1" data-speed="2000">0.0</span>/5 Avaliação Média</span>
</div>
<div class="flex items-center space-x-2">
<i data-feather="check-circle" class="text-neon auto-glow-icon" style="animation-delay: 2s;"></i>
<span class="text-[10px] font-bold uppercase tracking-widest text-gray-300">Entrega Instantânea</span>
</div>
</div>
</div>
</section>
<!-- VSL Section -->
<section id="vsl" class="py-32 px-6 border-y border-dark-border">
<div class="container mx-auto">
<div class="grid lg:grid-cols-2 gap-24 items-center max-w-6xl mx-auto">
<div data-aos="fade-right" data-aos-duration="800" class="relative order-2 lg:order-1">
<div class="absolute -inset-20 bg-neon/5 blur-[120px] rounded-full opacity-50"></div>
<div class="vsl-vertical">
<iframe
class="w-full h-full"
src="https://www.youtube.com/embed/SEU_VIDEO_ID"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="800" class="order-1 lg:order-2">
<h2 class="text-5xl font-black mb-10 leading-tight tracking-tighter">O Segredo dos <span class="text-neon">Devs</span> Finalmente Revelado.</h2>
<p class="text-gray-500 text-xl mb-12 leading-relaxed font-medium">Assista ao vídeo ao lado e entenda como configuramos uma infraestrutura de alta performance que roda 24h por dia sem cobrar um centavo de mensalidade.</p>
<div class="space-y-8 mb-16">
<div class="flex items-start space-x-6 group">
<div class="mt-1 bg-neon/5 p-3 rounded-xl border border-neon/10 transition-all duration-300 group-hover:bg-neon group-hover:border-transparent"><i data-feather="cpu" class="text-neon group-hover:text-black w-6 h-6 transition-colors duration-300"></i></div>
<div>
<h4 class="text-white font-bold text-lg">Hardware de Elite</h4>
<p class="text-gray-500 text-base">8GB de RAM e Processamento de última geração.</p>
</div>
</div>
<div class="flex items-start space-x-6 group">
<div class="mt-1 bg-neon/5 p-3 rounded-xl border border-neon/10 transition-all duration-300 group-hover:bg-neon group-hover:border-transparent"><i data-feather="shield" class="text-neon group-hover:text-black w-6 h-6 transition-colors duration-300"></i></div>
<div>
<h4 class="text-white font-bold text-lg">Privacidade Total</h4>
<p class="text-gray-500 text-base">Seu rastro digital termina aqui. 100% anônimo.</p>
</div>
</div>
</div>
<a href="#precos" class="btn-elite w-full py-6 rounded-2xl flex items-center justify-center text-xl">
<i data-feather="arrow-down" class="mr-3"></i> Ver Oferta Vitalícia
</a>
</div>
</div>
</div>
</section>
<!-- ANCHOR PRICING SECTION (RED vs GREEN) -->
<section id="precos" class="py-32 px-6 bg-dark-bg">
<div class="container mx-auto max-w-5xl">
<div class="text-center mb-20">
<h2 data-aos="fade-up" data-aos-duration="800" class="text-5xl font-black mb-6 tracking-tighter">Você tem <span class="text-neon">Duas Opções</span></h2>
<p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 uppercase tracking-[0.5em] text-[9px] font-black">Escolha o seu caminho digital</p>
</div>
<div class="grid md:grid-cols-2 gap-10 items-stretch">
<!-- OPTION 1: RED PILL -->
<div data-aos="fade-right" data-aos-duration="800" class="anchor-card-red p-14 rounded-[3rem] flex flex-col text-center">
<span class="text-red-pill text-[13px] font-black uppercase tracking-[0.5em] mb-8">Caminho Comum</span>
<p class="text-white text-lg mb-4 font-medium">Continuar pagando</p>
<div class="flex items-baseline justify-center mb-6">
<span class="text-red-pill text-3xl font-black mr-2">R$</span>
<span class="text-red-pill text-8xl font-black tracking-tighter" style="text-shadow: 0 0 30px rgba(255, 51, 51, 0.2);"><span class="counter" data-target="150" data-speed="2000">0</span></span>
<span class="text-red-pill/60 text-2xl font-bold ml-2">/ mês</span>
</div>
<p class="text-white/70 text-base mb-10 leading-relaxed">Todos os meses para alugar servidores lentos e limitados.</p>
<div class="mt-auto pt-10 border-t border-white/5">
<span class="text-red-pill text-[11px] font-black uppercase tracking-[0.4em]">Gasto Anual: R$ <span class="counter" data-target="1800" data-speed="2000">0</span>,00</span>
</div>
</div>
<!-- OPTION 2: GREEN PILL -->
<div data-aos="fade-left" data-aos-duration="800" class="anchor-card-green p-14 rounded-[3rem] flex flex-col text-center border-neon/20 bg-neon/[0.02] relative overflow-hidden">
<div class="absolute top-0 right-0 bg-neon text-black text-[10px] font-black px-6 py-2 rounded-bl-2xl uppercase tracking-tighter">Recomendado</div>
<span class="text-neon text-[13px] font-black uppercase tracking-[0.5em] mb-8">Caminho Infinity</span>
<p class="text-white text-lg mb-4 font-medium">Garantir sua liberdade hoje por</p>
<div class="flex items-baseline justify-center mb-6">
<span class="text-neon text-3xl font-black mr-2">R$</span>
<span class="text-neon text-7xl font-black tracking-tighter" style="text-shadow: 0 0 40px rgba(0, 255, 0, 0.4);"><span class="counter" data-target="85.25" data-decimals="2" data-speed="2000">0.00</span></span>
</div>
<p class="text-white font-bold text-base mb-12 leading-relaxed">Pagamento ÚNICO. Acesso Vitalício. Sem taxas escondidas.</p>
<a href="https://wa.me/SEU_NUMERO_AQUI" class="btn-elite w-full py-6 rounded-2xl flex items-center justify-center text-xl mt-auto">
<i data-feather="zap" class="mr-3 fill-current"></i> Ativar Vitalício
</a>
</div>
</div>
<p class="text-center mt-16 text-gray-300 text-[10px] font-black uppercase tracking-[0.5em]">Acesso Imediato • Ativação em 2 Minutos • Suporte 24/7</p>
</div>
</section>
<!-- Benefits Section -->
<section id="beneficios" class="py-32 px-6 border-t border-dark-border">
<div class="container mx-auto">
<div class="text-center mb-24">
<h2 data-aos="fade-up" data-aos-duration="800" class="text-5xl font-black mb-6 tracking-tighter">Infraestrutura <span class="text-neon">Sem Limites</span></h2>
<p data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="text-gray-500 uppercase tracking-[0.5em] text-[9px] font-black">Tecnologia Cloud de Próxima Geração</p>
</div>
<div class="grid md:grid-cols-3 gap-10">
<div data-aos="fade-up" data-aos-delay="100" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="globe" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">IP Americano Nativo</h3>
<p class="text-gray-500 text-base leading-relaxed">Acesse serviços exclusivos dos EUA com latência mínima e compatibilidade total com proxies residenciais.</p>
</div>
<div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="activity" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Uptime de 99.9%</h3>
<p class="text-gray-500 text-base leading-relaxed">Seus bots e automações nunca param. Estabilidade garantida por clusters de servidores redundantes.</p>
</div>
<div data-aos="fade-up" data-aos-delay="300" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="unlock" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Zero Mensalidade</h3>
<p class="text-gray-500 text-base leading-relaxed">O fim dos boletos. Um único investimento para uma vida inteira de processamento na nuvem.</p>
</div>
<div data-aos="fade-up" data-aos-delay="400" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="zap" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">NVMe SSD Storage</h3>
<p class="text-gray-500 text-base leading-relaxed">Velocidade de leitura e escrita ultra-rápida para carregar qualquer aplicação em segundos.</p>
</div>
<div data-aos="fade-up" data-aos-delay="500" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="server" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Escalabilidade</h3>
<p class="text-gray-500 text-base leading-relaxed">Precisa de mais poder? Nossa rede cresce com você, sem interrupções ou migrações complexas.</p>
</div>
<div data-aos="fade-up" data-aos-delay="600" data-aos-duration="800" class="glass-panel p-12 rounded-[2.5rem]">
<i data-feather="cpu" class="text-neon w-12 h-12 mb-10"></i>
<h3 class="text-2xl font-bold mb-6 text-white tracking-tight">Processamento Isolado</h3>
<p class="text-gray-500 text-base leading-relaxed">Sua VPS roda em um ambiente dedicado, garantindo que 100% dos recursos contratados sejam seus.</p>
</div>
</div>
</div>
</section>
<!-- Footer (RODAPÉ COMPLETO PARA CONVERSÃO) -->
<footer class="py-24 border-t border-dark-border bg-dark-card/30">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-3 gap-16 mb-20">
<!-- GARANTIA -->
<div class="flex flex-col items-center md:items-start text-center md:text-left">
<div class="flex items-center space-x-4 mb-6">
<i data-feather="shield" class="text-neon w-10 h-10"></i>
<h4 class="text-white font-black uppercase tracking-widest text-sm">Garantia Incondicional</h4>
</div>
<p class="text-gray-500 text-sm leading-relaxed">Compre nossa infraestrutura sem riscos. Se não for o que você esperava, devolvemos seu investimento em até 7 dias.</p>
</div>
<!-- CONTATOS -->
<div class="flex flex-col items-center text-center">
<h4 class="text-white font-black uppercase tracking-widest text-sm mb-8">Suporte & Redes</h4>
<div class="flex space-x-6">
<a href="#" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="instagram"></i></a>
<a href="#" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="youtube"></i></a>
<a href="https://wa.me/SEU_NUMERO_AQUI" class="w-12 h-12 rounded-full border border-dark-border flex items-center justify-center hover:border-neon hover:text-neon transition-all duration-300"><i data-feather="message-circle"></i></a>
</div>
</div>
<!-- LOGO & COPY -->
<div class="flex flex-col items-center md:items-end text-center md:text-right">
<span class="text-2xl font-black tracking-tighter text-white mb-4">INFINITY<span class="text-neon">VPS</span></span>
<p class="text-gray-600 text-[10px] font-bold uppercase tracking-widest">© 2024 Elite Cloud Computing. Todos os direitos reservados.</p>
</div>
</div>
</div>
</footer>
</div>
<!-- VPS EXPERIENCE OVERLAY -->
<div id="appContainer" class="fixed inset-0 z-[100] bg-black hidden flex-col">
<div class="h-14 bg-[#0a0a0a] border-b border-white/5 flex items-center justify-between px-6">
<div class="flex items-center space-x-4">
<div class="flex space-x-1.5">
<div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/40"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div>
<div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/40"></div>
</div>
<span class="text-[10px] font-mono text-white uppercase tracking-widest">Aviso: Outro usuário testando interromperá seu controle.</span>
</div>
<button onclick="fecharExperiencia()" class="bg-red-600 hover:bg-red-700 text-white p-1 rounded-sm transition-colors">
<i data-feather="x" class="w-5 h-5"></i>
</button>
</div>
<div class="flex-1 relative">
<iframe id="mainIframe" src="" class="w-full h-full border-none"></iframe>
</div>
</div>
<script>
// INITIALIZE AOS & FEATHER
AOS.init({
once: true,
mirror: false
});
feather.replace();
// COUNTER ANIMATION (OPTIMIZED FOR MOBILE FLUIDITY)
function initCounters() {
const counters = document.querySelectorAll('.counter');
const animate = (counter) => {
const target = parseFloat(counter.getAttribute('data-target'));
const decimals = parseInt(counter.getAttribute('data-decimals')) || 0;
const duration = parseInt(counter.getAttribute('data-speed')) || 2000;
let startTime = null;
const updateCount = (timestamp) => {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp - startTime) / duration, 1);
const currentCount = progress * target;
counter.innerText = currentCount.toFixed(decimals).replace('.', ',');
if (progress < 1) {
requestAnimationFrame(updateCount);
} else {
counter.innerText = target.toFixed(decimals).replace('.', ',');
}
};
requestAnimationFrame(updateCount);
};
const observerOptions = {
threshold: 0.2
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animate(entry.target);
observer.unobserve(entry.target);
}
});
}, observerOptions);
counters.forEach(counter => observer.observe(counter));
}
document.addEventListener('DOMContentLoaded', initCounters);
// VPS EXPERIENCE LOGIC
function ativarExperienciaTotal() {
// HIBERNAÇÃO: Esconde o site e ativa o modo VPS
document.body.classList.add('vps-active');
const overlay = document.getElementById('appContainer');
const mainIframe = document.getElementById('mainIframe');
overlay.style.display = 'flex';
mainIframe.src = "https://vpsgratuita.shop"; // Link correto restaurado
feather.replace();
}
function fecharExperiencia() {
// RESTAURAÇÃO: Remove a hibernação e volta o site
document.body.classList.remove('vps-active');
const overlay = document.getElementById('appContainer');
const mainIframe = document.getElementById('mainIframe');
overlay.style.display = 'none';
mainIframe.src = "about:blank";
feather.replace();
}
</script>
</body>
</html>