<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bet G3 - Diversão Garantida!</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="logo">🎉 Bet G3 🎉</div>
<div class="saldo-container">
💰 Saldo: <span id="saldo-jogador">1000</span> G3C
</div>
<button id="bonus-diario-btn">🎁 Bônus Diário!</button>
</header>
<main class="jogos-container">
<!-- Jogo: Cara ou Coroa -->
<section class="jogo-card" id="area-cara-coroa">
<h2>👑 Cara ou Coroa 🪙</h2>
<div class="aposta-controls">
<label for="aposta-cara-coroa">Sua Aposta:</label>
<input type="number" id="aposta-cara-coroa" value="10" min="1"> G3C
</div>
<div class="botoes-aposta">
<button data-escolha="CARA" class="btn-apostar-coc">Apostar em CARA</button>
<button data-escolha="COROA" class="btn-apostar-coc">Apostar em COROA</button>
</div>
<div id="visual-cara-coroa" class="visual-jogo">
<span class="moeda-display">❓</span>
</div>
<div id="resultado-cara-coroa" class="resultado-jogo">Faça sua aposta!</div>
</section>
<!-- Jogo: Roleta Divertida -->
<section class="jogo-card" id="area-roleta">
<h2>🎡 Roleta Divertida 🎰</h2>
<div class="aposta-controls">
<label for="aposta-roleta">Sua Aposta:</label>
<input type="number" id="aposta-roleta" value="10" min="1"> G3C
</div>
<p>Escolha onde apostar:</p>
<div class="botoes-aposta" id="opcoes-roleta">
<button data-aposta-roleta="VERMELHO" style="background-color: #e74c3c;">Vermelho</button>
<button data-aposta-roleta="PRETO" style="background-color: #555; color: white;">Preto</button> <!-- Cor ajustada -->
<button data-aposta-roleta="G3-ESPECIAL" style="background-color: #f1c40f; color: #333;">G3 Especial</button> <!-- Nova opção -->
</div>
<button id="girar-roleta-btn">GIRAR ROLETA!</button>
<div id="visual-roleta" class="visual-jogo">
<div class="roleta-container">
<svg id="roleta-svg" width="200" height="200" viewBox="0 0 200 200">
<!-- Fatias da roleta serão geradas pelo JavaScript -->
</svg>
<div class="ponteiro-roleta">▼</div>
</div>
</div>
<div id="resultado-roleta" class="resultado-jogo">Aposte e gire!</div>
</section>
<!-- Jogo: Caça-Níqueis G3 -->
<section class="jogo-card" id="area-caca-niqueis">
<h2>🌟 Caça-Níqueis G3 ✨</h2>
<div class="slot-machine">
<div class="reels">
<div class="reel" id="reel1">❓</div>
<div class="reel" id="reel2">❓</div>
<div class="reel" id="reel3">❓</div>
</div>
</div>
<div class="aposta-controls">
<label for="aposta-caca-niqueis">Sua Aposta:</label>
<input type="number" id="aposta-caca-niqueis" value="10" min="1"> G3C
</div>
<button id="girar-caca-niqueis-btn">GIRAR SLOTS!</button>
<div id="resultado-caca-niqueis" class="resultado-jogo">Pronto para a sorte?</div>
</section>
</main>
<footer>
<p>© 2025 BET G3 - Alunos do 9C Quesnel</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Dicas e Soluções em Marketing Digital