Untitled 725

Guest

Mar 18th, 2026

Never

Not a member of gistpad yet? Sign Up, it unlocks many cool features!

None 15.70 KB | None | 0 0

copy raw download clone embed print report

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTGOTMIZER PRO</title>
<style>
/* Reset e base */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
body { overflow-x:hidden; background: #0a0a0a; color: #fff; }
/* Fundo animado com partículas */
canvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }
/* Menu */
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; }
nav a { color:#fff; text-decoration:none; margin:0 15px; font-weight:bold; transition:0.3s; }
nav a:hover { color:#00ffea; }
/* Hero section */
.hero { height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.hero h1 { font-size:3em; margin-bottom:20px; }
.typing { border-right: .15em solid #00ffea; white-space: nowrap; overflow: hidden; }
/* Cards animados */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:50px; }
.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; }
.card:hover { transform: translateY(-10px) scale(1.05); background: rgba(0,255,234,0.2); }
/* Botões animados */
.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; }
.btn:hover { transform: scale(1.1); background:linear-gradient(45deg, #0077ff, #00ffea); }
/* Footer */
footer { text-align:center; padding:20px; background:rgba(0,0,0,0.7); }
/* Animação de scroll fade-in */
.fade-in { opacity:0; transform:translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out; }
.fade-in.show { opacity:1; transform:translateY(0); }
/* Modal de anúncio */
.modal {
display: flex;
justify-content: center;
align-items: center;
position: fixed; top:0; left:0;
width:100%; height:100%;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px);
z-index: 999;
}
.modal-content {
background: rgba(0,0,0,0.85);
padding: 30px;
border-radius: 20px;
text-align: center;
width: 300px;
position: relative;
color: #fff;
box-shadow: 0 0 20px #00ffea;
animation: modalIn 0.5s ease-out;
}
@keyframes modalIn {
from { transform: scale(0.5); opacity:0; }
to { transform: scale(1); opacity:1; }
}
.close {
position: absolute;
top:10px; right:15px;
font-size: 25px;
cursor: pointer;
color: #ff4444;
font-weight: bold;
transition: 0.3s;
}
.close:hover { color: #fff; }
</style>
</head>
<body>
<div id="donationModal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close">×</span>
<h2>🚀 Apoie a Atualização!</h2>
<p>Faça uma doação via PIX para continuar melhorando o GTGOTMIZER PRO:</p>
<p><strong>PIX: 53933115833</strong></p>
<button class="btn" id="copyPix">Copiar PIX</button>
</div>
</div>
<nav>
<div>GTGOTMIZER PRO</div>
<div>
<a href="#hero">Home</a>
<a href="#cards">Features</a>
<a href="#contact">Contato</a>
</div>
</nav>
<section class="hero" id="hero">
<h1>Bem-vindo ao <span class="typing"></span></h1>
<button class="btn">Começar</button>
</section>
<section class="cards" id="cards">
<div class="card fade-in">Animação 1</div>
<div class="card fade-in">Animação 2</div>
<div class="card fade-in">Animação 3</div>
<div class="card fade-in">Animação 4</div>
</section>
<footer id="contact">
© 2026 GTGOTMIZER PRO - Todos os direitos reservados
</footer>
<canvas id="bgCanvas"></canvas>
<script>
// Fundo de partículas
const canvas = document.getElementById('bgCanvas');
const ctx = canvas.getContext('2d');
let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;
const particles = [];
const particleCount = 100;
window.addEventListener('resize', () => { w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; });
for(let i=0;i<particleCount;i++){
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 });
}
function animateParticles(){
ctx.clearRect(0,0,w,h);
particles.forEach(p=>{
p.x+=p.dx; p.y+=p.dy;
if(p.x<0||p.x>w)p.dx*=-1;
if(p.y<0||p.y>h)p.dy*=-1;
ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.fillStyle='rgba(0,255,234,0.7)';
ctx.fill();
});
requestAnimationFrame(animateParticles);
}
animateParticles();
// Efeito typing
const typingText = "GTGOTMIZER PRO!";
const typingSpan = document.querySelector('.typing');
let index=0;
function typeEffect(){
if(index<typingText.length){
typingSpan.textContent += typingText[index++];
setTimeout(typeEffect,150);
}
}
typeEffect();
// Scroll fade-in
const faders = document.querySelectorAll('.fade-in');
window.addEventListener('scroll', () => {
faders.forEach(f=>{
const rect = f.getBoundingClientRect();
if(rect.top < window.innerHeight - 50){
f.classList.add('show');
}
});
});
// Modal de doação
const modal = document.getElementById('donationModal');
const closeBtn = document.getElementById('closeModal');
const copyPixBtn = document.getElementById('copyPix');
closeBtn.onclick = () => modal.style.display = 'none';
// Fechar ao clicar fora da caixa
window.onclick = (e) => { if(e.target === modal) modal.style.display='none'; }
// Copiar PIX para área de transferência
copyPixBtn.onclick = () => {
navigator.clipboard.writeText('53933115833');
copyPixBtn.textContent = 'PIX Copiado!';
};
</script>
</body>
</html>

RAW Gist Data Copied

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTGOTMIZER PRO</title>
<style>
  /* Reset e base */
  * { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }
  body { overflow-x:hidden; background: #0a0a0a; color: #fff; }

/* Fundo animado com partículas */
  canvas { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* Menu */
  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; }
  nav a { color:#fff; text-decoration:none; margin:0 15px; font-weight:bold; transition:0.3s; }
  nav a:hover { color:#00ffea; }

/* Hero section */
  .hero { height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
  .hero h1 { font-size:3em; margin-bottom:20px; }
  .typing { border-right: .15em solid #00ffea; white-space: nowrap; overflow: hidden; }

/* Cards animados */
  .cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:50px; }
  .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; }
  .card:hover { transform: translateY(-10px) scale(1.05); background: rgba(0,255,234,0.2); }

/* Botões animados */
  .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; }
  .btn:hover { transform: scale(1.1); background:linear-gradient(45deg, #0077ff, #00ffea); }

/* Footer */
  footer { text-align:center; padding:20px; background:rgba(0,0,0,0.7); }

/* Animação de scroll fade-in */
  .fade-in { opacity:0; transform:translateY(20px); transition: opacity 1s ease-out, transform 1s ease-out; }
  .fade-in.show { opacity:1; transform:translateY(0); }

/* Modal de anúncio */
  .modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed; top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 999;
  }

.modal-content {
    background: rgba(0,0,0,0.85);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    width: 300px;
    position: relative;
    color: #fff;
    box-shadow: 0 0 20px #00ffea;
    animation: modalIn 0.5s ease-out;
  }

@keyframes modalIn {
    from { transform: scale(0.5); opacity:0; }
    to { transform: scale(1); opacity:1; }
  }

.close {
    position: absolute;
    top:10px; right:15px;
    font-size: 25px;
    cursor: pointer;
    color: #ff4444;
    font-weight: bold;
    transition: 0.3s;
  }

.close:hover { color: #fff; }

</style>
</head>
<body>

<div id="donationModal" class="modal">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <h2>🚀 Apoie a Atualização!</h2>
    <p>Faça uma doação via PIX para continuar melhorando o GTGOTMIZER PRO:</p>
    <p><strong>PIX: 53933115833</strong></p>
    <button class="btn" id="copyPix">Copiar PIX</button>
  </div>
</div>

<nav>
  <div>GTGOTMIZER PRO</div>
  <div>
    <a href="#hero">Home</a>
    <a href="#cards">Features</a>
    <a href="#contact">Contato</a>
  </div>
</nav>

<section class="hero" id="hero">
  <h1>Bem-vindo ao <span class="typing"></span></h1>
  <button class="btn">Começar</button>
</section>

<section class="cards" id="cards">
  <div class="card fade-in">Animação 1</div>
  <div class="card fade-in">Animação 2</div>
  <div class="card fade-in">Animação 3</div>
  <div class="card fade-in">Animação 4</div>
</section>

<canvas id="bgCanvas"></canvas>

window.addEventListener('resize', () => { w=canvas.width=window.innerWidth; h=canvas.height=window.innerHeight; });

for(let i=0;i<particleCount;i++){
    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 });
  }

function animateParticles(){
    ctx.clearRect(0,0,w,h);
    particles.forEach(p=>{
      p.x+=p.dx; p.y+=p.dy;
      if(p.x<0||p.x>w)p.dx*=-1;
      if(p.y<0||p.y>h)p.dy*=-1;
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
      ctx.fillStyle='rgba(0,255,234,0.7)';
      ctx.fill();
    });
    requestAnimationFrame(animateParticles);
  }
  animateParticles();

// Efeito typing
  const typingText = "GTGOTMIZER PRO!";
  const typingSpan = document.querySelector('.typing');
  let index=0;
  function typeEffect(){
    if(index<typingText.length){
      typingSpan.textContent += typingText[index++];
      setTimeout(typeEffect,150);
    }
  }
  typeEffect();

// Scroll fade-in
  const faders = document.querySelectorAll('.fade-in');
  window.addEventListener('scroll', () => {
    faders.forEach(f=>{
      const rect = f.getBoundingClientRect();
      if(rect.top < window.innerHeight - 50){
        f.classList.add('show');
      }
    });
  });

// Modal de doação
  const modal = document.getElementById('donationModal');
  const closeBtn = document.getElementById('closeModal');
  const copyPixBtn = document.getElementById('copyPix');

closeBtn.onclick = () => modal.style.display = 'none';

// Fechar ao clicar fora da caixa
  window.onclick = (e) => { if(e.target === modal) modal.style.display='none'; }

// Copiar PIX para área de transferência
  copyPixBtn.onclick = () => {
    navigator.clipboard.writeText('53933115833');
    copyPixBtn.textContent = 'PIX Copiado!';
  };
</script>

</body>
</html>