1. <!DOCTYPE html>
  2. <html lang="pt-BR">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>GTGOTMIZER PRO</title>
  7. <style>
  8.   /* Reset e base */
  9.   * { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
  10.   body { overflow-x:hidden; background: #0a0a0a; color: #fff; }
  11.  
  12.   /* Fundo animado com partículas */
  13.   canvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
  14.  
  15.   /* Menu */
  16.   nav { position: fixed; top:0; width:100%; padding:20px; display:flex; justify-content:space-between; background:rgba(0,0,0,0.5); backdrop-filter: blur(10px); z-index:10; }
  17.   nav a { color:#fff; text-decoration:none; margin:0 15px; font-weight:bold; transition:0.3s; }
  18.   nav a:hover { color:#00ffea; }
  19.  
  20.   /* Hero section */
  21.   .hero { height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
  22.   .hero h1 { font-size:3em; margin-bottom:20px; }
  23.   .typing { border-right: .15em solid #00ffea; white-space: nowrap; overflow: hidden; }
  24.  
  25.   /* Cards animados */
  26.   .cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:50px; }
  27.   .card { background: rgba(255,255,255,0.05); padding:30px; border-radius:15px; width:250px; text-align:center; transition: transform 0.5s, background 0.5s; }
  28.   .card:hover { transform: translateY(-10px) scale(1.05); background: rgba(0,255,234,0.2); }
  29.  
  30.   /* Botões animados */
  31.   .btn { padding:12px 25px; border:none; border-radius:50px; cursor:pointer; font-weight:bold; background:linear-gradient(45deg, #00ffea, #0077ff); color:#000; transition:0.3s; }
  32.   .btn:hover { transform: scale(1.1); background:linear-gradient(45deg, #0077ff, #00ffea); }
  33.  
  34.   /* Footer */
  35.   footer { text-align:center; padding:20px; background:rgba(0,0,0,0.7); }
  36.  
  37.   /* Animação de scroll fade-in */
  38.   .fade-in { opacity:0; transform:translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out; }
  39.   .fade-in.show { opacity:1; transform:translateY(0); }
  40.  
  41.   /* Modal de anúncio */
  42.   .modal {
  43.     display: flex;
  44.     justify-content: center;
  45.     align-items: center;
  46.     position: fixed; top:0; left:0;
  47.     width:100%; height:100%;
  48.     background: rgba(0,0,0,0.7);
  49.     backdrop-filter: blur(8px);
  50.     z-index: 999;
  51.   }
  52.  
  53.   .modal-content {
  54.     background: rgba(0,0,0,0.85);
  55.     padding: 30px;
  56.     border-radius: 20px;
  57.     text-align: center;
  58.     width: 300px;
  59.     position: relative;
  60.     color: #fff;
  61.     box-shadow: 0 0 20px #00ffea;
  62.     animation: modalIn 0.5s ease-out;
  63.   }
  64.  
  65.   @keyframes modalIn {
  66.     from { transform: scale(0.5); opacity:0; }
  67.     to { transform: scale(1); opacity:1; }
  68.   }
  69.  
  70.   .close {
  71.     position: absolute;
  72.     top:10px; right:15px;
  73.     font-size: 25px;
  74.     cursor: pointer;
  75.     color: #ff4444;
  76.     font-weight: bold;
  77.     transition: 0.3s;
  78.   }
  79.  
  80.   .close:hover { color: #fff; }
  81.  
  82. </style>
  83. </head>
  84. <body>
  85.  
  86. <!-- Modal de doação PIX -->
  87. <div id="donationModal" class="modal">
  88.   <div class="modal-content">
  89.     <span id="closeModal" class="close">&times;</span>
  90.     <h2>🚀 Apoie a Atualização!</h2>
  91.     <p>Faça uma doação via PIX para continuar melhorando o GTGOTMIZER PRO:</p>
  92.     <p><strong>PIX: 53933115833</strong></p>
  93.     <button class="btn" id="copyPix">Copiar PIX</button>
  94.   </div>
  95. </div>
  96.  
  97. <!-- Menu -->
  98. <nav>
  99.   <div>GTGOTMIZER PRO</div>
  100.   <div>
  101.     <a href="#hero">Home</a>
  102.     <a href="#cards">Features</a>
  103.     <a href="#contact">Contato</a>
  104.   </div>
  105. </nav>
  106.  
  107. <!-- Hero -->
  108. <section class="hero" id="hero">
  109.   <h1>Bem-vindo ao <span class="typing"></span></h1>
  110.   <button class="btn">Começar</button>
  111. </section>
  112.  
  113. <!-- Cards -->
  114. <section class="cards" id="cards">
  115.   <div class="card fade-in">Animação 1</div>
  116.   <div class="card fade-in">Animação 2</div>
  117.   <div class="card fade-in">Animação 3</div>
  118.   <div class="card fade-in">Animação 4</div>
  119. </section>
  120.  
  121. <!-- Footer -->
  122. <footer id="contact">
  123.   &copy; 2026 GTGOTMIZER PRO - Todos os direitos reservados
  124. </footer>
  125.  
  126. <!-- Fundo animado -->
  127. <canvas id="bgCanvas"></canvas>
  128.  
  129. <script>
  130.   // Fundo de partículas
  131.   const canvas = document.getElementById('bgCanvas');
  132.   const ctx = canvas.getContext('2d');
  133.   let w = canvas.width = window.innerWidth;
  134.   let h = canvas.height = window.innerHeight;
  135.   const particles = [];
  136.   const particleCount = 100;
  137.  
  138.   window.addEventListener('resize', () => { w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; });
  139.  
  140.   for(let i=0;i<particleCount;i++){
  141.     particles.push({ x: Math.random()*w, y: Math.random()*h, r: Math.random()*3+1, dx: (Math.random()-0.5)*1.5, dy: (Math.random()-0.5)*1.5 });
  142.   }
  143.  
  144.   function animateParticles(){
  145.     ctx.clearRect(0,0,w,h);
  146.     particles.forEach(p=>{
  147.       p.x+=p.dx; p.y+=p.dy;
  148.       if(p.x<0||p.x>w)p.dx*=-1;
  149.       if(p.y<0||p.y>h)p.dy*=-1;
  150.       ctx.beginPath();
  151.       ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
  152.       ctx.fillStyle='rgba(0,255,234,0.7)';
  153.       ctx.fill();
  154.     });
  155.     requestAnimationFrame(animateParticles);
  156.   }
  157.   animateParticles();
  158.  
  159.   // Efeito typing
  160.   const typingText = "GTGOTMIZER PRO!";
  161.   const typingSpan = document.querySelector('.typing');
  162.   let index=0;
  163.   function typeEffect(){
  164.     if(index<typingText.length){
  165.       typingSpan.textContent += typingText[index++];
  166.       setTimeout(typeEffect,150);
  167.     }
  168.   }
  169.   typeEffect();
  170.  
  171.   // Scroll fade-in
  172.   const faders = document.querySelectorAll('.fade-in');
  173.   window.addEventListener('scroll', () => {
  174.     faders.forEach(f=>{
  175.       const rect = f.getBoundingClientRect();
  176.       if(rect.top < window.innerHeight - 50){
  177.         f.classList.add('show');
  178.       }
  179.     });
  180.   });
  181.  
  182.   // Modal de doação
  183.   const modal = document.getElementById('donationModal');
  184.   const closeBtn = document.getElementById('closeModal');
  185.   const copyPixBtn = document.getElementById('copyPix');
  186.  
  187.   closeBtn.onclick = () => modal.style.display = 'none';
  188.  
  189.   // Fechar ao clicar fora da caixa
  190.   window.onclick = (e) => { if(e.target === modal) modal.style.display='none'; }
  191.  
  192.   // Copiar PIX para área de transferência
  193.   copyPixBtn.onclick = () => {
  194.     navigator.clipboard.writeText('53933115833');
  195.     copyPixBtn.textContent = 'PIX Copiado!';
  196.   };
  197. </script>
  198.  
  199. </body>
  200. </html>