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 <meta name="theme-color" content="#ff6600"> 7 8 9 10 <!-- SEO & Meta Tags --> 11 <meta name="referrer" content="no-referrer-when-downgrade"> 12 <meta property="og:title" content="VouF"> 13 <meta property="og:description" content="Divirta-se testando seus conhecimentos e ganhe recompensas!"> 14 <meta property="og:url" content="https://appvouf.com.br/anuncie-noVouF.php"> 15 <meta property="og:image" content="https://appvouf.com.br/imagens/banner3.png"> 16 <meta property="og:type" content="website"> 17 <title>VouF</title> 18 19 <!-- Favicon & PWA --> 20 <link rel="icon" href="LogoVouFGames.png"> 21 <link rel="shortcut icon" href="LogoVouFGames.png"> 22 <link rel="manifest" href="/manifest.json"> 23 <link rel="apple-touch-icon" href="/imagens/icon-192x192.png"> 24 25 <!-- Fonts & CSS --> 26 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> 27 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> 28 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> 29 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css"> 30 <link rel="stylesheet" href="header.css?v=1781196744"> 31 <link rel="stylesheet" href="?v="> 32 33
33<script src="https://analytics.ahrefs.com/analytics.js" data-key="Pz79EOvWHtnF5bv/L1mY9w" async></script>
33 34 <!-- Scripts Externos --> 35
35<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
35 36
36<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous"></script>
36 37
37<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
37 38
38<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/inputmask.min.js"></script>
38 39
39<script src="js/advertisement.js"></script>
39 40 <!--
40<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5083241918622200" crossorigin="anonymous"></script>
40 41 --> 42 <!-- Monetag Ads --> 43 <!-- Vignette banner --> 44
44<script src="https://5gvci.com/act/files/tag.min.js?z=10939313" data-cfasync="false" async></script>
44 45 <!-- Vignette banner --> 46 <!-- Monetag Ads --> 47
47<script> 48 window.OneSignalDeferred = window.OneSignalDeferred || []; 49 OneSignalDeferred.push(async function(OneSignal) { await OneSignal.init({ appId: "fef3b446-3012-4a4a-bf1c-ad5c75260325" }); }); 50 </script>
50 51</head> 52<body class="bg-white text-gray-800 min-h-screen"> 53 54<!-- ================= HEADER DESKTOP ================= --> 55<header class="header"> 56 <!-- LINHA 1: Logo + Banner + Auth --> 57 <div class="header-line-1"> 58 <div class="header-container"> 59 <div class="flex items-center justify-between h-20 w-full"> 60 <!-- Logo (Esquerda) --> 61 <div class="flex-shrink-0 flex items-center h-20"> 62 <a href="index.php" class="block"> 63 <img src="LogoVouFGames.png" alt="VouF" class="object-contain cursor-pointer h-20"> 64 </a> 65 </div> 66 67 <!-- Banner (Centro) --> 68 <div class="flex-grow flex justify-center items-center overflow-hidden relative mx-2" id="banner-wrapper" style="height: 99%;"> 69 <a href="anuncie-noVouF.php" class="absolute top-0 left-0 z-20 bg-black/80 hover:bg-black text-white font-bold px-1.5 py-0.5 rounded shadow-sm transition-all backdrop-blur-sm" style="font-size: 9px; line-height: 1.2; letter-spacing: 0.3px; white-space: nowrap;">ANÃNCIO</a> 70 <a href="appbingol.php" id="banner-link"> 71 <img src="imagens/banners/appbingol.png" id="banner-img" alt="Banner" class="object-contain" style="height: 100%; max-width: 100%;"> 72 </a> 73 </div> 74 75 <!-- Auth (Direita) --> 76 <div class="flex-shrink-0 flex items-center gap-3 header-auth"> 77 <a href="login.php" class="header-btn-auth login">Entrar</a> 78 </div> 79 </div> 80 </div> 81 </div> 82 83 <!-- Script de Rotação de Banners --> 84
84<script> 85 (function() { 86 const banners = [{"img":"imagens\/banners\/appbaudotesouro.png","link":"appbaudotesouro.php"},{"img":"imagens\/banners\/appbingol.png","link":"appbingol.php"},{"img":"imagens\/banners\/appboom.png","link":"appboom.php"}]; 87 if (banners.length <= 1) return; 88 let idx = 1; 89 const img = document.getElementById('banner-img'); 90 const link = document.getElementById('banner-link'); 91 if (!img || !link) return; 92 setInterval(() => { 93 idx = (idx + 1) % banners.length; 94 img.style.opacity = '0.4'; 95 setTimeout(() => { img.src = banners[idx].img; link.href = banners[idx].link; img.onload = () => img.style.opacity = '1'; }, 300); 96 }, 30000); 97 })(); 98 </script>
98 99 100 <!-- LINHA 2: Menu --> 101 <nav class="header-line-2"> 102 <div class="header-container"> 103 <div class="header-menu"> 104 <a href="index.php" class="nav-btn"><i class="fas fa-home"></i>INÃCIO</a> 105 <div class="dropdown"> 106 <button type="button" class="nav-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"> 107 <i class="fas fa-gamepad"></i> 108 JOGOS <i class="fas fa-chevron-down"></i> 109 </button> 110 <div class="dropdown-menu"> 111 <a href="game.php" class="dropdown-item"><i class="fas fa-question-circle"></i>Quiz</a> 112 <a href="jogodaforca.php" class="dropdown-item"><i class="fas fa-skull"></i>Jogo da Forca</a> 113 <a href="jogo-da-velha.php" class="dropdown-item"><i class="fas fa-hashtag"></i>Jogo da Velha</a> 114 <a href="memoria.php" class="dropdown-item"><i class="fas fa-brain"></i>Jogo da Memória</a> 115 <a href="tesouro.php" class="dropdown-item"><i class="fas fa-gem"></i>O Tesouro Perdido</a> 116 <a href="lotovouf.php" class="dropdown-item"><i class="fas fa-dice"></i>LotoVouF</a> 117 <a href="pikclik.php" class="dropdown-item"><i class="fas fa-gamepad"></i>Pikclik</a> 118 </div> 119 </div> 120 <a href="ranking.php" class="nav-btn"><i class="fas fa-trophy"></i>RECORDISTAS</a> 121 <a href="blog.php" class="nav-btn"><i class="fas fa-newspaper"></i>BLOG</a> 122 <!-- MENU ESTUDOS (apenas para não-logados) --> 123<div class="dropdown" id="dropdown-estudos"> 124 <button type="button" class="nav-btn dropdown-toggle" aria-haspopup="true" aria-expanded="false"> 125 <i class="fas fa-book-open"></i> 126 ESTUDOS 127 <i class="fas fa-chevron-down"></i> 128 </button> 129 <div class="dropdown-menu dropdown-estudos-menu max-h-96 overflow-y-auto w-80"> 130 <div class="p-2 text-xs font-semibold text-gray-500 uppercase tracking-wide border-b border-gray-100 mb-2"> 131 <a href="categorias.php" title="Acessar Ãndice do Material de Estudo">Categorias</a> 132 </div> 133 <div id="estudos-categorias" class="space-y-1"> 134 <div class="estudos-item has-children" data-target="cat-d50644ce86c9a41f2df998c259301409"> 135 <i class="fas fa-folder text-yellow-500"></i> 136 <span>Artes</span> 137 <span class="ml-auto text-xs text-gray-400">(3)</span> 138 </div> 139 <div class="estudos-submenu hidden" id="cat-d50644ce86c9a41f2df998c259301409"> 140 <div class="estudos-item has-children" data-target="sub-fd35aaa38a65a80b3dd3378ff56cba6e"> 141 <i class="fas fa-folder-open text-blue-400"></i> 142 <span>Arquitetura</span> 143 <span class="ml-auto text-xs text-gray-400">(1)</span> 144 </div> 145 <div class="estudos-estudos-list hidden" id="sub-fd35aaa38a65a80b3dd3378ff56cba6e"> 146 <a href="estudo.php?slug=arquitetura" 147 class="estudo-link" 148 title="Abrir estudo"> 149 ð Arquitetura do Antigo ao Contemporâneo </a> 150 </div> 151 <div class="estudos-item has-children" data-target="sub-e401bbe1fb7d9803fa5ec834d115cf0c"> 152 <i class="fas fa-folder-open text-blue-400"></i> 153 <span>Artes</span> 154 <span class="ml-auto text-xs text-gray-400">(1)</span> 155 </div> 156 <div class="estudos-estudos-list hidden" id="sub-e401bbe1fb7d9803fa5ec834d115cf0c"> 157 <a href="estudo.php?slug=estudodeartes" 158 class="estudo-link" 159 title="Abrir estudo"> 160 ð Artes: do Renascimento ao Contemporâneo </a> 161 </div> 162 <div class="estudos-item has-children" data-target="sub-3af4e864d35cd7b074cf95973d13c83a"> 163 <i class="fas fa-folder-open text-blue-400"></i>
164 <span>Cores</span> 165 <span class="ml-auto text-xs text-gray-400">(1)</span> 166 </div> 167 <div class="estudos-estudos-list hidden" id="sub-3af4e864d35cd7b074cf95973d13c83a"> 168 <a href="estudo.php?slug=artes_cores" 169 class="estudo-link" 170 title="Abrir estudo"> 171 ð O Universo das Cores </a> 172 </div> 173 </div> 174 <div class="estudos-item has-children" data-target="cat-9d2d69943cec1abc6df1d84dafa0665d"> 175 <i class="fas fa-folder text-yellow-500"></i> 176 <span>Bem-Estar</span> 177 <span class="ml-auto text-xs text-gray-400">(2)</span> 178 </div> 179 <div class="estudos-submenu hidden" id="cat-9d2d69943cec1abc6df1d84dafa0665d"> 180 <div class="estudos-item has-children" data-target="sub-f55087da88963b36f84ceed9a9a21d25"> 181 <i class="fas fa-folder-open text-blue-400"></i> 182 <span>Educação FÃsica</span> 183 <span class="ml-auto text-xs text-gray-400">(1)</span> 184 </div> 185 <div class="estudos-estudos-list hidden" id="sub-f55087da88963b36f84ceed9a9a21d25"> 186 <a href="estudo.php?slug=bem_estar_exercicios" 187 class="estudo-link" 188 title="Abrir estudo"> 189 ð ExercÃcio FÃsico para o Bem-estar </a> 190 </div> 191 <div class="estudos-item has-children" data-target="sub-e4273e9aa2527749fa83b30352e2b109"> 192 <i class="fas fa-folder-open text-blue-400"></i> 193 <span>Psicologia</span> 194 <span class="ml-auto text-xs text-gray-400">(1)</span> 195 </div> 196 <div class="estudos-estudos-list hidden" id="sub-e4273e9aa2527749fa83b30352e2b109"> 197 <a href="estudo.php?slug=bem_estar_psicologia" 198 class="estudo-link" 199 title="Abrir estudo"> 200 ð Bemâestar: Psicologia e Psicanálise </a> 201 </div> 202 </div> 203 <div class="estudos-item has-children" data-target="cat-4aded46b16d834251ce480a54e16de64"> 204 <i class="fas fa-folder text-yellow-500"></i> 205 <span>Ciências Exatas</span> 206 <span class="ml-auto text-xs text-gray-400">(8)</span> 207 </div> 208 <div class="estudos-submenu hidden" id="cat-4aded46b16d834251ce480a54e16de64"> 209 <div class="estudos-item has-children" data-target="sub-df4ea133777399bb48927044b0169731"> 210 <i class="fas fa-folder-open text-blue-400"></i> 211 <span>Astronomia</span> 212 <span class="ml-auto text-xs text-gray-400">(1)</span> 213 </div> 214 <div class="estudos-estudos-list hidden" id="sub-df4ea133777399bb48927044b0169731"> 215 <a href="estudo.php?slug=astronomia" 216 class="estudo-link" 217 title="Abrir estudo"> 218 ð Astronomia </a> 219 </div> 220 <div class="estudos-item has-children" data-target="sub-eb4e2b194dd1c36d41457edaafd45442"> 221 <i class="fas fa-folder-open text-blue-400"></i>
222 <span>EstatÃsticas</span> 223 <span class="ml-auto text-xs text-gray-400">(1)</span> 224 </div> 225 <div class="estudos-estudos-list hidden" id="sub-eb4e2b194dd1c36d41457edaafd45442"> 226 <a href="estudo.php?slug=estatisticas" 227 class="estudo-link" 228 title="Abrir estudo"> 229 ð EstatÃsticas </a> 230 </div> 231 <div class="estudos-item has-children" data-target="sub-3afaea59d506ff58523ae6ca51bbe1d5"> 232 <i class="fas fa-folder-open text-blue-400"></i> 233 <span>FÃsica</span> 234 <span class="ml-auto text-xs text-gray-400">(1)</span> 235 </div> 236 <div class="estudos-estudos-list hidden" id="sub-3afaea59d506ff58523ae6ca51bbe1d5"> 237 <a href="estudo.php?slug=omundo_dafisica" 238 class="estudo-link" 239 title="Abrir estudo"> 240 ð O Mundo da FÃsica - Conceitos Básicos e Aplicações </a> 241 </div> 242 <div class="estudos-item has-children" data-target="sub-d199607c7147a0f3beafbb8864c198a0"> 243 <i class="fas fa-folder-open text-blue-400"></i> 244 <span>Geologia</span> 245 <span class="ml-auto text-xs text-gray-400">(1)</span> 246 </div> 247 <div class="estudos-estudos-list hidden" id="sub-d199607c7147a0f3beafbb8864c198a0"> 248 <a href="estudo.php?slug=geologia" 249 class="estudo-link" 250 title="Abrir estudo"> 251 ð A Ciência Que Estuda a Terra </a> 252 </div> 253 <div class="estudos-item has-children" data-target="sub-fc3b99082047c685df01a472e8d23af1"> 254 <i class="fas fa-folder-open text-blue-400"></i> 255 <span>Matemática</span> 256 <span class="ml-auto text-xs text-gray-400">(1)</span> 257 </div> 258 <div class="estudos-estudos-list hidden" id="sub-fc3b99082047c685df01a472e8d23af1"> 259 <a href="estudo.php?slug=matematica" 260 class="estudo-link" 261 title="Abrir estudo"> 262 ð Matemática - A Linguagem da Ciência </a> 263 </div> 264 <div class="estudos-item has-children" data-target="sub-2f50fffa42764a183f5ce3a8f8e56891"> 265 <i class="fas fa-folder-open text-blue-400"></i> 266 <span>Matemática Básica</span> 267 <span class="ml-auto text-xs text-gray-400">(1)</span> 268 </div> 269 <div class="estudos-estudos-list hidden" id="sub-2f50fffa42764a183f5ce3a8f8e56891"> 270 <a href="estudo.php?slug=matematica_basica" 271 class="estudo-link" 272 title="Abrir estudo"> 273 ð Operações Básicas da Matemática </a> 274 </div> 275 <div class="estudos-item has-children" data-target="sub-0f57f49203b246b09741697154c3d24f"> 276 <i class="fas fa-folder-open text-blue-400"></i>
277 <span>Meteorologia</span> 278 <span class="ml-auto text-xs text-gray-400">(1)</span> 279 </div> 280 <div class="estudos-estudos-list hidden" id="sub-0f57f49203b246b09741697154c3d24f"> 281 <a href="estudo.php?slug=meteorologia" 282 class="estudo-link" 283 title="Abrir estudo"> 284 ð Clima e Fenômenos do Tempo </a> 285 </div> 286 <div class="estudos-item has-children" data-target="sub-fbbdd8fa41d174943f31d8d650efae9b"> 287 <i class="fas fa-folder-open text-blue-400"></i> 288 <span>QuÃmica</span> 289 <span class="ml-auto text-xs text-gray-400">(1)</span> 290 </div> 291 <div class="estudos-estudos-list hidden" id="sub-fbbdd8fa41d174943f31d8d650efae9b"> 292 <a href="estudo.php?slug=quimica" 293 class="estudo-link" 294 title="Abrir estudo"> 295 ð Ciência Que Transforma Matéria </a> 296 </div> 297 </div> 298 <div class="estudos-item has-children" data-target="cat-3bafe2116e70ec2e8c8cddb944b0168b"> 299 <i class="fas fa-folder text-yellow-500"></i> 300 <span>Ciências Naturais</span> 301 <span class="ml-auto text-xs text-gray-400">(7)</span> 302 </div> 303 <div class="estudos-submenu hidden" id="cat-3bafe2116e70ec2e8c8cddb944b0168b"> 304 <div class="estudos-item has-children" data-target="sub-d2d146be42e33d7922779461d263b427"> 305 <i class="fas fa-folder-open text-blue-400"></i> 306 <span>Biologia</span> 307 <span class="ml-auto text-xs text-gray-400">(1)</span> 308 </div> 309 <div class="estudos-estudos-list hidden" id="sub-d2d146be42e33d7922779461d263b427"> 310 <a href="estudo.php?slug=cien_nat_biologia" 311 class="estudo-link" 312 title="Abrir estudo"> 313 ð Vida e a Biologia </a> 314 </div> 315 <div class="estudos-item has-children" data-target="sub-5ce8bce1199221751cd580f7d8da27fd"> 316 <i class="fas fa-folder-open text-blue-400"></i> 317 <span>Botânica</span> 318 <span class="ml-auto text-xs text-gray-400">(1)</span> 319 </div> 320 <div class="estudos-estudos-list hidden" id="sub-5ce8bce1199221751cd580f7d8da27fd"> 321 <a href="estudo.php?slug=botanica" 322 class="estudo-link" 323 title="Abrir estudo"> 324 ð O Universo das Plantas </a> 325 </div> 326 <div class="estudos-item has-children" data-target="sub-5c9dd0d7b701be81363c8b521b4a5876"> 327 <i class="fas fa-folder-open text-blue-400"></i> 328 <span>Ecologia</span> 329 <span class="ml-auto text-xs text-gray-400">(1)</span> 330 </div> 331 <div class="estudos-estudos-list hidden" id="sub-5c9dd0d7b701be81363c8b521b4a5876"> 332 <a href="estudo.php?slug=cien_nat_ecologia" 333 class="estudo-link" 334 title="Abrir estudo"> 335 ð Meio Ambiente e Natureza </a> 336 </div> 337 <div class="estudos-item has-children" data-target="sub-a7f48f5931ccf2256fb28064d8717f1e"> 338 <i class="fas fa-folder-open text-blue-400"></i>
339 <span>Fauna Brasileira</span> 340 <span class="ml-auto text-xs text-gray-400">(1)</span> 341 </div> 342 <div class="estudos-estudos-list hidden" id="sub-a7f48f5931ccf2256fb28064d8717f1e"> 343 <a href="estudo.php?slug=ciencias_naturais_fauna_brasileira" 344 class="estudo-link" 345 title="Abrir estudo"> 346 ð Conhecendo a Fauna Brasileira </a> 347 </div> 348 <div class="estudos-item has-children" data-target="sub-2782b101ae95244c0e89cad88a8533e6"> 349 <i class="fas fa-folder-open text-blue-400"></i> 350 <span>Flora Brasileira</span> 351 <span class="ml-auto text-xs text-gray-400">(1)</span> 352 </div> 353 <div class="estudos-estudos-list hidden" id="sub-2782b101ae95244c0e89cad88a8533e6"> 354 <a href="estudo.php?slug=ciencias_naturais_flora_brasileira" 355 class="estudo-link" 356 title="Abrir estudo"> 357 ð Conhecendo a Flora Brasileira </a> 358 </div> 359 <div class="estudos-item has-children" data-target="sub-6d04ac2b42dcd852c45ffed6cf5db5dd"> 360 <i class="fas fa-folder-open text-blue-400"></i> 361 <span>Insetos</span> 362 <span class="ml-auto text-xs text-gray-400">(1)</span> 363 </div> 364 <div class="estudos-estudos-list hidden" id="sub-6d04ac2b42dcd852c45ffed6cf5db5dd"> 365 <a href="estudo.php?slug=o_mundo_dos_insetos" 366 class="estudo-link" 367 title="Abrir estudo"> 368 ð O Gigantesco Universo dos Insetos </a> 369 </div> 370 <div class="estudos-item has-children" data-target="sub-e9dba4cecf00729a7f72780179b843be"> 371 <i class="fas fa-folder-open text-blue-400"></i> 372 <span>Oceanografia</span> 373 <span class="ml-auto text-xs text-gray-400">(1)</span> 374 </div> 375 <div class="estudos-estudos-list hidden" id="sub-e9dba4cecf00729a7f72780179b843be"> 376 <a href="estudo.php?slug=a_oceanografia" 377 class="estudo-link" 378 title="Abrir estudo"> 379 ð A Oceanografia </a> 380 </div> 381 </div> 382 <div class="estudos-item has-children" data-target="cat-6ab45b4acb36dc638dd0bf4e03533176"> 383 <i class="fas fa-folder text-yellow-500"></i> 384 <span>História</span> 385 <span class="ml-auto text-xs text-gray-400">(6)</span> 386 </div> 387 <div class="estudos-submenu hidden" id="cat-6ab45b4acb36dc638dd0bf4e03533176"> 388 <div class="estudos-item has-children" data-target="sub-79753882f889388a775673accc4582af"> 389 <i class="fas fa-folder-open text-blue-400"></i> 390 <span>História do Brasil</span> 391 <span class="ml-auto text-xs text-gray-400">(6)</span> 392 </div> 393 <div class="estudos-estudos-list hidden" id="sub-79753882f889388a775673accc4582af"> 394 <a href="estudo.php?slug=historia_do_brasil" 395 class="estudo-link" 396 title="Abrir estudo"> 397 ð História do Brasil </a> 398 <a href="estudo.php?slug=historia_do_brasil_parte2" 399 class="estudo-link" 400 title="Abrir estudo"> 401 ð História do Brasil - Parte 2 </a> 402 <a href="estudo.php?slug=historia_do_brasil_parte3" 403 class="estudo-link" 404 title="Abrir estudo"> 405 ð História do Brasil - Parte 3 </a> 406 <a href="estudo.php?slug=historia_do_brasil_parte4" 407 class="estudo-link" 408 title="Abrir estudo"> 409 ð História do Brasil - Parte 4 </a> 410 <a href="estudo.php?slug=historia_do_brasil_parte5" 411 class="estudo-link" 412 title="Abrir estudo"> 413 ð História do Brasil - Parte 5 </a> 414 <a href="estudo.php?slug=historia_do_brasil_parte6" 415 class="estudo-link" 416 title="Abrir estudo"> 417 ð História do Brasil - Parte 6 </a> 418 </div> 419 </div> 420 <div class="estudos-item has-children" data-target="cat-24c50a54f5cc1761a2fdea1e0da99cb9"> 421 <i class="fas fa-folder text-yellow-500"></i>
422 <span>Literatura</span> 423 <span class="ml-auto text-xs text-gray-400">(1)</span> 424 </div> 425 <div class="estudos-submenu hidden" id="cat-24c50a54f5cc1761a2fdea1e0da99cb9"> 426 <div class="estudos-item has-children" data-target="sub-196696bd02e0e248566157a47351667f"> 427 <i class="fas fa-folder-open text-blue-400"></i> 428 <span>Brasileira</span> 429 <span class="ml-auto text-xs text-gray-400">(1)</span> 430 </div> 431 <div class="estudos-estudos-list hidden" id="sub-196696bd02e0e248566157a47351667f"> 432 <a href="estudo.php?slug=literatura_brasileira" 433 class="estudo-link" 434 title="Abrir estudo"> 435 ð Literatura Brasileira </a> 436 </div> 437 </div> 438 </div> 439 </div> 440</div> 441 </div> 442 </div> 443 </nav> 444 445 </header> 446 447 <!-- LINHA 3: Stats do Usuário (FIXA NO TOPO DESKTOP) --> 448 449<!-- ================= HEADER MOBILE (FIXO NO TOPO) ================= --> 450<div class="header-mobile"> 451 <!-- Botão Menu (Esquerda) --> 452 <button id="mobile-menu-toggle" class="header-mobile-toggle" aria-label="Abrir menu"><i class="fas fa-bars text-lg"></i></button> 453 454 <!-- TÃtulo da Página (Centro-Esquerda, após botão) --> 455 <div class="header-mobile-title"> 456 <i class="fas fa-star text-blue-400 text-sm"></i> 457 <span class="font-semibold text-white truncate" title="Anuncie no VouF Games - Divulgue seu Produto para Milhares de Usuários">Anuncie no VouF...</span> 458 </div> 459 460 <!-- Stats (Direita) --> 461 <div class="header-mobile-stats"> 462 <a href="login.php" class="header-mobile-auth login-btn">Entrar</a> 463 </div> 464</div> 465<!-- ================= BANNER MOBILE (Scrollável) ================ = --> 466<div class="header-banner-mobile md:hidden"> 467 <div class="banner-mobile-container"> 468 <!--a href="anuncie-noVouF.php" class="banner-mobile-label">anúncio</a--> 469 <a href="anuncie-noVouF.php" class="absolute top-0 left-0 z-20 bg-black-80 hover:bg-black text-white font-bold px-1.5 py-0.5 rounded shadow-sm transition-all backdrop-blur-sm" style="font-size: 9px; line-height: 1.2; letter-spacing: 0.3px; white-space: nowrap;">AD | anuncie</a> 470 <a href="appbingol.php" class="banner-mobile-link"> 471 <img src="imagens/banners/appbingol.png" 472 alt="Banner Mobile" 473 class="banner-mobile-img"> 474 </a> 475 </div> 476</div> 477<!-- ================= MENU MOBILE ================= --> 478<div id="mobile-menu-overlay" class="mobile-menu-overlay"></div> 479<div id="mobile-menu-panel" class="mobile-menu-panel"> 480 <div class="mobile-menu-header"> 481 <h2 class="mobile-menu-title">Menu</h2> 482 <button id="mobile-menu-close" class="mobile-menu-close"><i class="fas fa-times text-xl"></i></button> 483 </div> 484 <nav class="mobile-menu-nav"> 485 <a href="index.php" class="mobile-menu-item"><i class="fas fa-home"></i>INÃCIO</a> 486 487 <div class="mobile-accordion"> 488 <button class="mobile-accordion-header" aria-expanded="false" aria-controls="mobile-games-list"> 489 <span class="flex items-center gap-3"><i class="fas fa-gamepad"></i> JOGOS</span> 490 <i class="fas fa-chevron-down text-xs transition-transform"></i> 491 </button> 492 <div id="mobile-games-list" class="mobile-accordion-content" aria-hidden="true"> 493 <a href="game.php" class="mobile-accordion-item"><i class="fas fa-question-circle"></i>Quiz</a> 494 <a href="jogodaforca.php" class="mobile-accordion-item"><i class="fas fa-skull"></i>Jogo da Forca</a> 495 <a href="jogo-da-velha.php" class="mobile-accordion-item"><i class="fas fa-hashtag"></i>Jogo da Velha</a> 496 <a href="memoria.php" class="mobile-accordion-item"><i class="fas fa-brain"></i>Jogo da Memória</a> 497 <a href="tesouro.php" class="mobile-accordion-item"><i class="fas fa-gem"></i>O Tesouro Perdido</a> 498 <a href="lotovouf.php" class="mobile-accordion-item"><i class="fas fa-dice"></i>LotoVouF</a> 499 <a href="pikclik.php" class="mobile-accordion-item"><i class="fas fa-gamepad"></i>Pikclik</a> 500 </div> 501 </div> 502 503 <a href="ranking.php" class="mobile-menu-item"><i class="fas fa-trophy"></i>RECORDISTAS</a> 504 <a href="blog.php" class="mobile-menu-item"><i class="fas fa-newspaper"></i>BLOG</a> 505 <a href="categorias.php" class="mobile-menu-item"><i class="fas fa-book-open"></i>ESTUDOS</a> 506 507 508 <div class="mobile-menu-footer"><a href="login.php" class="mobile-login-btn">Fazer Login</a></div> 509 </nav> 510</div> 511 512<!-- ================= CONTEÃDO PRINCIPAL ================= --> 513<main class="max-w-2xl mx-auto p-3 rounded-xl shadow-2xl"> 514 515<!-- Schema.org para Produto/Oferta -->
516<script type="application/ld+json"> 517{ 518 "@context": "https://schema.org", 519 "@type": "Product", 520 "name": "Espaço Publicitário - VouF Games", 521 "description": "Banner no topo do site + página dedicada para divulgar seu produto ou serviço", 522 "brand": { 523 "@type": "Brand", 524 "name": "VouF Games" 525 }, 526 "offers": { 527 "@type": "Offer", 528 "price": "29.90", 529 "priceCurrency": "BRL", 530 "availability": "https://schema.org/InStock", 531 "seller": { 532 "@type": "Organization", 533 "name": "VouF Games" 534 } 535 } 536} 537</script>
537 538 539<style> 540/* ===== TEMA DA PÃGINA DE VENDAS ===== */ 541:root { 542 --brand-primary: #3b82f6; 543 --brand-secondary: #fbbf24; 544 --brand-dark: #0f172a; 545 --brand-light: #f8fafc; 546 --success: #22c55e; 547 --warning: #f59e0b; 548} 549 550body { 551 font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 552 background: var(--brand-light); 553 color: #1e293b; 554 line-height: 1.7; 555} 556 557/* Hero Section */ 558.hero-vendas { 559 background: linear-gradient(135deg, var(--brand-dark) 0%, #1e293b 100%); 560 color: white; 561 padding: 4rem 1rem 6rem; 562 position: relative; 563 overflow: hidden; 564} 565 566.hero-vendas::before { 567 content: ''; 568 position: absolute; 569 top: -50%; 570 right: -20%; 571 width: 600px; 572 height: 600px; 573 background: radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%); 574 border-radius: 50%; 575 animation: pulse 4s ease-in-out infinite; 576} 577 578@keyframes pulse { 579 0%, 100% { opacity: 0.3; transform: scale(1); } 580 50% { opacity: 0.5; transform: scale(1.1); } 581} 582 583.hero-content { 584 max-width: 1200px; 585 margin: 0 auto; 586 position: relative; 587 z-index: 1; 588 text-align: center; 589} 590 591.hero-badge { 592 display: inline-flex; 593 align-items: center; 594 gap: 0.5rem; 595 background: rgba(251, 191, 36, 0.2); 596 color: var(--brand-secondary); 597 padding: 0.5rem 1rem; 598 border-radius: 9999px; 599 font-size: 0.875rem; 600 font-weight: 600; 601 margin-bottom: 1.5rem; 602 border: 1px solid var(--brand-secondary); 603} 604 605.hero-title { 606 font-size: 2.5rem; 607 font-weight: 800; 608 margin-bottom: 1rem; 609 line-height: 1.2; 610} 611 612.hero-title span { 613 color: var(--brand-secondary); 614} 615 616.hero-subtitle { 617 font-size: 1.25rem; 618 color: #94a3b8; 619 max-width: 700px; 620 margin: 0 auto 2rem; 621} 622 623/* Cards de Navegação Rápida */ 624.nav-cards { 625 display: grid; 626 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 627 gap: 1rem; 628 max-width: 1200px; 629 margin: -3rem auto 3rem; 630 padding: 0 1rem; 631 position: relative; 632 z-index: 10; 633} 634 635.nav-card { 636 background: white; 637 padding: 1.5rem; 638 border-radius: 1rem; 639 box-shadow: 0 10px 40px rgba(0,0,0,0.1); 640 text-align: center; 641 transition: all 0.3s ease; 642 cursor: pointer; 643 border: 2px solid transparent; 644} 645 646.nav-card:hover { 647 transform: translateY(-4px); 648 border-color: var(--brand-primary); 649 box-shadow: 0 20px 60px rgba(59,130,246,0.2); 650} 651 652.nav-card i { 653 font-size: 2rem; 654 color: var(--brand-primary); 655 margin-bottom: 0.75rem; 656} 657 658.nav-card h4 { 659 font-weight: 600; 660 color: #1e293b; 661 margin-bottom: 0.25rem; 662} 663 664.nav-card p { 665 font-size: 0.875rem; 666 color: #64748b; 667} 668 669/* Seções de Conteúdo */ 670.section-vendas { 671 padding: 4rem 1rem; 672 max-width: 1200px; 673 margin: 0 auto; 674} 675 676.section-title { 677 text-align: center; 678 font-size: 2rem; 679 font-weight: 700; 680 color: var(--brand-dark); 681 margin-bottom: 3rem; 682 position: relative; 683} 684 685.section-title::after { 686 content: ''; 687 display: block; 688 width: 80px; 689 height: 4px; 690 background: var(--brand-secondary); 691 margin: 1rem auto 0; 692 border-radius: 2px; 693} 694 695/* Cards de Vantagens */ 696.vantagens-grid { 697 display: grid; 698 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 699 gap: 1.5rem; 700} 701 702.vantagem-card { 703 background: white; 704 padding: 2rem; 705 border-radius: 1rem; 706 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 707 border-left: 4px solid var(--brand-primary); 708 transition: transform 0.3s; 709} 710 711.vantagem-card:hover { 712 transform: translateX(4px); 713} 714 715.vantagem-card i { 716 font-size: 2rem; 717 color: var(--brand-primary); 718 margin-bottom: 1rem; 719} 720 721.vantagem-card h4 { 722 font-weight: 600; 723 margin-bottom: 0.5rem; 724 color: #1e293b; 725} 726 727.vantagem-card p { 728 color: #64748b; 729 font-size: 0.95rem; 730} 731 732/* Como Funciona - Timeline */ 733.como-funciona { 734 background: white; 735 border-radius: 1.5rem; 736 padding: 2rem; 737 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 738} 739 740.timeline { 741 position: relative; 742 padding-left: 2rem; 743} 744 745.timeline::before { 746 content: ''; 747 position: absolute; 748 left: 0.5rem; 749 top: 0; 750 bottom: 0; 751 width: 2px; 752 background: var(--brand-primary); 753} 754 755.timeline-item { 756 position: relative; 757 padding-bottom: 2rem; 758} 759 760.timeline-item::before { 761 content: ''; 762 position: absolute; 763 left: -1.35rem; 764 top: 0.25rem; 765 width: 1rem; 766 height: 1rem; 767 background: var(--brand-primary); 768 border-radius: 50%; 769 border: 3px solid white; 770 box-shadow: 0 0 0 2px var(--brand-primary); 771} 772 773.timeline-number { 774 display: inline-flex; 775 align-items: center; 776 justify-content: center; 777 width: 2rem; 778 height: 2rem; 779 background: var(--brand-primary); 780 color: white; 781 border-radius: 50%; 782 font-weight: 700; 783 font-size: 0.875rem; 784 margin-right: 0.75rem; 785} 786 787.timeline-item h4 { 788 font-weight: 600; 789 margin-bottom: 0.5rem; 790 color: #1e293b; 791} 792 793.timeline-item p { 794 color: #64748b; 795 margin-left: 2.75rem; 796} 797 798/* Públicos Atendidos */ 799.publicos-grid { 800 display: grid; 801 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 802 gap: 1.5rem; 803} 804 805.publico-card { 806 text-align: center; 807 padding: 1.5rem; 808 background: white; 809 border-radius: 1rem; 810 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 811 transition: all 0.3s; 812} 813 814.publico-card:hover { 815 transform: translateY(-4px); 816 box-shadow: 0 12px 40px rgba(59,130,246,0.15); 817} 818 819.publico-icon { 820 width: 60px; 821 height: 60px; 822 background: linear-gradient(135deg, var(--brand-primary), #60a5fa); 823 border-radius: 50%; 824 display: flex; 825 align-items: center; 826 justify-content: center; 827 margin: 0 auto 1rem; 828 color: white; 829 font-size: 1.5rem; 830} 831 832.publico-card h4 { 833 font-weight: 600; 834 margin-bottom: 0.5rem; 835 color: #1e293b; 836} 837 838.publico-card p { 839 font-size: 0.875rem; 840 color: #64748b; 841} 842 843/* O Que Você Recebe */ 844.entrega-grid { 845 display: grid; 846 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 847 gap: 2rem; 848} 849 850.entrega-card { 851 background: white; 852 border-radius: 1.5rem; 853 overflow: hidden; 854 box-shadow: 0 10px 40px rgba(0,0,0,0.1); 855 border: 2px solid var(--brand-primary); 856} 857 858.entrega-header { 859 background: linear-gradient(135deg, var(--brand-primary), #60a5fa); 860 color: white; 861 padding: 1.5rem; 862 text-align: center; 863} 864 865.entrega-header i { 866 font-size: 2.5rem; 867 margin-bottom: 0.75rem; 868} 869 870.entrega-header h4 { 871 font-size: 1.25rem; 872 font-weight: 700; 873} 874 875.entrega-body { 876 padding: 1.5rem; 877} 878 879.entrega-body ul { 880 list-style: none; 881 padding: 0; 882} 883 884.entrega-body li { 885 padding: 0.5rem 0; 886 border-bottom: 1px dashed #e2e8f0; 887 display: flex; 888 align-items: center; 889 gap: 0.5rem; 890 color: #475569; 891} 892 893.entrega-body li:last-child { 894 border-bottom: none; 895} 896 897.entrega-body li i { 898 color: var(--success); 899 font-size: 1.1rem; 900} 901 902/* Oferta Especial */ 903.oferta-box { 904 background: linear-gradient(135deg, var(--brand-dark), #1e293b); 905 color: white; 906 border-radius: 2rem; 907 padding: 3rem; 908 text-align: center; 909 position: relative; 910 overflow: hidden; 911 border: 3px solid var(--brand-secondary); 912} 913 914.oferta-box::before { 915 content: 'OFERTA'; 916 position: absolute; 917 top: 1rem; 918 right: -3rem; 919 background: var(--brand-secondary); 920 color: var(--brand-dark); 921 padding: 0.5rem 4rem; 922 font-weight: 800; 923 font-size: 0.875rem; 924 transform: rotate(45deg); 925 letter-spacing: 2px; 926} 927 928.oferta-preco { 929 margin: 2rem 0; 930} 931 932.oferta-preco .original { 933 font-size: 1.5rem; 934 color: #94a3b8; 935 text-decoration: line-through; 936 margin-bottom: 0.5rem; 937} 938 939.oferta-preco .promocional { 940 font-size: 4rem; 941 font-weight: 800; 942 color: var(--brand-secondary); 943 line-height: 1; 944} 945 946.oferta-preco .moeda { 947 font-size: 2rem; 948 vertical-align: super; 949 margin-right: 0.25rem; 950} 951 952.oferta-preco .periodo { 953 font-size: 1rem; 954 color: #94a3b8; 955 margin-top: 0.5rem; 956} 957 958.oferta-vagas { 959 background: rgba(251, 191, 36, 0.2); 960 color: var(--brand-secondary); 961 padding: 0.75rem 1.5rem; 962 border-radius: 9999px; 963 display: inline-flex; 964 align-items: center; 965 gap: 0.5rem; 966 font-weight: 600; 967 margin-bottom: 2rem; 968} 969 970.oferta-cta { 971 background: var(--brand-secondary); 972 color: var(--brand-dark); 973 border: none; 974 padding: 1rem 3rem; 975 border-radius: 9999px; 976 font-size: 1.125rem; 977 font-weight: 700; 978 cursor: pointer; 979 transition: all 0.3s; 980 display: inline-flex; 981 align-items: center; 982 gap: 0.75rem; 983 text-decoration: none; 984} 985 986.oferta-cta:hover { 987 transform: scale(1.05); 988 box-shadow: 0 10px 40px rgba(251, 191, 36, 0.4); 989} 990 991.oferta-cta i { 992 font-size: 1.25rem; 993} 994 995/* Depoimentos (Opcional) */ 996.depoimentos-grid { 997 display: grid; 998 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 999 gap: 1.5rem; 1000} 1001 1002.depoimento-card { 1003 background: white; 1004 padding: 2rem; 1005 border-radius: 1rem; 1006 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 1007 border-left: 4px solid var(--brand-secondary); 1008} 1009 1010.depoimento-header { 1011 display: flex; 1012 align-items: center; 1013 gap: 1rem; 1014 margin-bottom: 1rem; 1015} 1016 1017.depoimento-avatar { 1018 width: 50px; 1019 height: 50px; 1020 background: linear-gradient(135deg, var(--brand-primary), #60a5fa); 1021 border-radius: 50%; 1022 display: flex; 1023 align-items: center; 1024 justify-content: center; 1025 color: white; 1026 font-weight: 700; 1027} 1028 1029.depoimento-nome { 1030 font-weight: 600; 1031 color: #1e293b; 1032} 1033 1034.depoimento-empresa { 1035 font-size: 0.875rem; 1036 color: #64748b; 1037} 1038 1039.depoimento-texto { 1040 color: #475569; 1041 font-style: italic; 1042 line-height: 1.6; 1043} 1044 1045/* FAQ */ 1046.faq-vendas { 1047 max-width: 800px; 1048 margin: 0 auto; 1049} 1050 1051.faq-item { 1052 background: white; 1053 border-radius: 1rem; 1054 margin-bottom: 1rem; 1055 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 1056 overflow: hidden; 1057} 1058 1059.faq-item summary { 1060 padding: 1.25rem 1.5rem; 1061 cursor: pointer; 1062 font-weight: 600; 1063 color: #1e293b; 1064 list-style: none; 1065 display: flex; 1066 justify-content: space-between; 1067 align-items: center; 1068 transition: background 0.2s; 1069} 1070 1071.faq-item summary:hover { 1072 background: #f8fafc; 1073} 1074 1075.faq-item summary::after { 1076 content: '+'; 1077 font-size: 1.5rem; 1078 color: var(--brand-primary); 1079 transition: transform 0.3s; 1080} 1081 1082.faq-item[open] summary::after { 1083 content: 'â'; 1084 transform: rotate(180deg); 1085} 1086 1087.faq-item p { 1088 padding: 0 1.5rem 1.5rem; 1089 color: #64748b; 1090 line-height: 1.7; 1091 border-top: 1px solid #e2e8f0; 1092 margin-top: 0.5rem; 1093 padding-top: 1rem; 1094} 1095 1096/* Card Flutuante de Contato */ 1097.card-flutuante { 1098 position: fixed; 1099 bottom: 1.5rem; 1100 right: 1.5rem; 1101 background: linear-gradient(135deg, var(--brand-primary), #60a5fa); 1102 color: white; 1103 padding: 1rem 1.5rem; 1104 border-radius: 1rem; 1105 box-shadow: 0 10px 40px rgba(59,130,246,0.4); 1106 display: flex; 1107 align-items: center; 1108 gap: 0.75rem; 1109 z-index: 1000; 1110 transition: all 0.3s; 1111 text-decoration: none; 1112 max-width: 280px; 1113 animation: slideInRight 0.5s ease-out; 1114} 1115 1116@keyframes slideInRight { 1117 from { 1118 opacity: 0; 1119 transform: translateX(100px); 1120 } 1121 to { 1122 opacity: 1; 1123 transform: translateX(0); 1124 } 1125} 1126 1127.card-flutuante:hover { 1128 transform: translateY(-4px); 1129 box-shadow: 0 16px 60px rgba(59,130,246,0.6); 1130} 1131 1132.card-flutuante i { 1133 font-size: 1.5rem; 1134} 1135 1136.card-flutuante-text { 1137 font-weight: 600; 1138 font-size: 0.95rem; 1139} 1140 1141.card-flutuante-sub { 1142 display: block; 1143 font-size: 0.8rem; 1144 opacity: 0.9; 1145 margin-top: 0.125rem; 1146} 1147 1148/* Responsivo */ 1149@media (max-width: 768px) { 1150 .hero-title { 1151 font-size: 2rem; 1152 } 1153 1154 .hero-subtitle { 1155 font-size: 1.1rem; 1156 } 1157 1158 .nav-cards { 1159 grid-template-columns: repeat(2, 1fr); 1160 margin-top: -2rem; 1161 } 1162 1163 .oferta-preco .promocional { 1164 font-size: 3rem; 1165 } 1166 1167 .card-flutuante { 1168 bottom: 1rem; 1169 right: 1rem; 1170 left: 1rem; 1171 max-width: none; 1172 justify-content: center; 1173 } 1174 1175 .section-vendas { 1176 padding: 3rem 1rem; 1177 } 1178} 1179 1180/* Animações de Scroll */ 1181[data-animate] { 1182 opacity: 0; 1183 transform: translateY(20px); 1184 transition: opacity 0.6s ease, transform 0.6s ease; 1185} 1186 1187[data-animate].visible { 1188 opacity: 1; 1189 transform: translateY(0); 1190} 1191</style> 1192 1193<!-- Hero Section --> 1194<section class="hero-vendas"> 1195 <div class="hero-content"> 1196 <div class="hero-badge"> 1197 <i class="fas fa-bolt"></i> 1198 Oferta por Tempo Limitado 1199 </div> 1200 <h1 class="hero-title"> 1201 Divulgue sua Marca para <span>Milhares de Usuários</span> 1202 </h1> 1203 <p class="hero-subtitle"> 1204 Banner no topo do VouF Games + página dedicada de apresentação.
1205 Alcance jogadores engajados e converta visitantes em clientes. 1206 </p> 1207 <a href="#oferta" class="oferta-cta" style="background: white; color: var(--brand-primary);"> 1208 <i class="fas fa-arrow-down"></i> 1209 Ver Oferta Especial 1210 </a> 1211 </div> 1212</section> 1213 1214<!-- Cards de Navegação Rápida --> 1215<nav class="nav-cards"> 1216 <a href="#vantagens" class="nav-card" data-animate> 1217 <i class="fas fa-star"></i> 1218 <h4>Vantagens</h4> 1219 <p>Por que anunciar aqui?</p> 1220 </a> 1221 <a href="#como-funciona" class="nav-card" data-animate> 1222 <i class="fas fa-cogs"></i> 1223 <h4>Como Funciona</h4> 1224 <p>Passo a passo simples</p> 1225 </a> 1226 <a href="#publicos" class="nav-card" data-animate> 1227 <i class="fas fa-users"></i> 1228 <h4>Públicos</h4> 1229 <p>Quem você alcança</p> 1230 </a> 1231 <a href="#entrega" class="nav-card" data-animate> 1232 <i class="fas fa-gift"></i> 1233 <h4>O Que Recebe</h4> 1234 <p>Entregáveis inclusos</p> 1235 </a> 1236 <a href="#oferta" class="nav-card" data-animate> 1237 <i class="fas fa-tag"></i> 1238 <h4>Oferta</h4> 1239 <p>Preço promocional</p> 1240 </a> 1241 <a href="#faq" class="nav-card" data-animate> 1242 <i class="fas fa-question-circle"></i> 1243 <h4>Dúvidas</h4> 1244 <p>Perguntas frequentes</p> 1245 </a> 1246</nav> 1247 1248<!-- Vantagens de Anunciar --> 1249<section id="vantagens" class="section-vendas" data-animate> 1250 <h2 class="section-title">⨠Por Que Anunciar no VouF Games?</h2> 1251 <div class="vantagens-grid"> 1252 <div class="vantagem-card"> 1253 <i class="fas fa-bullseye"></i> 1254 <h4>Público Engajado</h4> 1255 <p>Nossos usuários são ativos, curiosos e buscam conteúdo de qualidade. Ideal para marcas que querem impacto real.</p> 1256 </div> 1257 <div class="vantagem-card"> 1258 <i class="fas fa-shield-alt"></i> 1259 <h4>Ambiente Seguro</h4> 1260 <p>Seu anúncio aparece em um ambiente familiar, educativo e moderado. Sem conteúdo inadequado ao lado da sua marca.</p> 1261 </div> 1262 <div class="vantagem-card"> 1263 <i class="fas fa-mobile-alt"></i> 1264 <h4>100% Responsivo</h4> 1265 <p>Seu banner e página de divulgação funcionam perfeitamente em celular, tablet e desktop. Alcance todos os dispositivos.</p> 1266 </div> 1267 <div class="vantagem-card"> 1268 <i class="fas fa-chart-line"></i> 1269 <h4>Alta Visibilidade</h4> 1270 <p>Banner fixo no topo de todas as páginas + página dedicada com SEO otimizado. Sua marca sempre em destaque.</p> 1271 </div> 1272 </div> 1273</section> 1274 1275<!-- Como Funciona --> 1276<section id="como-funciona" class="section-vendas" style="background: #f8fafc;" data-animate> 1277 <h2 class="section-title">ð Como Funciona</h2> 1278 <div class="como-funciona"> 1279 <div class="timeline"> 1280 <div class="timeline-item"> 1281 <span class="timeline-number">1</span> 1282 <h4>Entre em Contato</h4> 1283 <p>Preencha nosso formulário ou clique no card flutuante. Nossa equipe entrará em contato em até 24h úteis.</p> 1284 </div> 1285 <div class="timeline-item"> 1286 <span class="timeline-number">2</span> 1287 <h4>Envie seu Material</h4> 1288 <p>Nos envie a arte do banner (ou peça nossa ajuda para criar) e o conteúdo da sua página de divulgação.</p> 1289 </div> 1290 <div class="timeline-item"> 1291 <span class="timeline-number">3</span> 1292 <h4>Aprovação Rápida</h4> 1293 <p>Revisamos seu material em até 48h para garantir qualidade e conformidade. Ajustes são feitos em parceria com você.</p> 1294 </div> 1295 <div class="timeline-item"> 1296 <span class="timeline-number">4</span> 1297 <h4>Publicação Imediata</h4> 1298 <p>Seu banner vai ao ar no topo do site e sua página de divulgação fica disponÃvel para milhares de visitantes.</p> 1299 </div> 1300 <div class="timeline-item">
1301 <span class="timeline-number">5</span> 1302 <h4>Acompanhe Resultados</h4> 1303 <p>Receba relatórios mensais de visualizações e cliques. Otimizamos juntos para maximizar seu retorno.</p> 1304 </div> 1305 </div> 1306 </div> 1307</section> 1308 1309<!-- Públicos Atendidos --> 1310<section id="publicos" class="section-vendas" data-animate> 1311 <h2 class="section-title">ð¯ Para Quem é Esta Oportunidade?</h2> 1312 <p class="text-center text-gray-600 mb-8 max-w-3xl mx-auto"> 1313 Nosso espaço publicitário é perfeito para diversos segmentos. Veja se o seu se encaixa: 1314 </p> 1315 <div class="publicos-grid"> 1316 <div class="publico-card"> 1317 <div class="publico-icon"> 1318 <i class="fas fa-box-open"></i> 1319 </div> 1320 <h4>Produtos FÃsicos</h4> 1321 <p>E-commerce, lojas online, lançamentos e promoções.</p> 1322 </div> 1323 <div class="publico-card"> 1324 <div class="publico-icon"> 1325 <i class="fas fa-laptop-code"></i> 1326 </div> 1327 <h4>Serviços Digitais</h4> 1328 <p>Apps, SaaS, cursos online, consultorias e ferramentas.</p> 1329 </div> 1330 <div class="publico-card"> 1331 <div class="publico-icon"> 1332 <i class="fas fa-user-tie"></i> 1333 </div> 1334 <h4>Profissionais</h4> 1335 <p>Coaches, influencers, criadores de conteúdo e freelancers.</p> 1336 </div> 1337 <div class="publico-card"> 1338 <div class="publico-icon"> 1339 <i class="fas fa-heart"></i> 1340 </div> 1341 <h4>Redes Sociais</h4> 1342 <p>Perfis no Instagram, TikTok, YouTube e comunidades online.</p> 1343 </div> 1344 <div class="publico-card"> 1345 <div class="publico-icon"> 1346 <i class="fas fa-gamepad"></i> 1347 </div> 1348 <h4>Jogos e Apps</h4> 1349 <p>Lançamentos, atualizações, eventos e comunidades gamer.</p> 1350 </div> 1351 <div class="publico-card"> 1352 <div class="publico-icon"> 1353 <i class="fas fa-graduation-cap"></i> 1354 </div> 1355 <h4>Educação</h4> 1356 <p>Cursos, materiais didáticos, plataformas de ensino e tutoriais.</p> 1357 </div> 1358 </div> 1359</section> 1360 1361<!-- O Que Você Recebe --> 1362<section id="entrega" class="section-vendas" style="background: #f8fafc;" data-animate> 1363 <h2 class="section-title">ð¦ O Que Está Incluso no Pacote</h2> 1364 <div class="entrega-grid"> 1365 <div class="entrega-card"> 1366 <div class="entrega-header"> 1367 <i class="fas fa-ad"></i> 1368 <h4>Banner no Header</h4> 1369 </div> 1370 <div class="entrega-body"> 1371 <ul> 1372 <li><i class="fas fa-check"></i> Posição fixa no topo de TODAS as páginas</li> 1373 <li><i class="fas fa-check"></i> Link direto para seu site/landing page</li> 1374 <li><i class="fas fa-check"></i> Exibição em desktop, tablet e mobile</li> 1375 <li><i class="fas fa-check"></i> Rotação com outros banners (máx. 15 por vez)</li> 1376 <li><i class="fas fa-check"></i> Suporte para ajuste de arte (se necessário)</li> 1377 </ul> 1378 </div> 1379 </div> 1380 <div class="entrega-card"> 1381 <div class="entrega-header"> 1382 <i class="fas fa-file-alt"></i> 1383 <h4>Página Dedicada</h4> 1384 </div> 1385 <div class="entrega-body"> 1386 <ul> 1387 <li><i class="fas fa-check"></i> Página exclusiva no domÃnio vouf.com.br</li> 1388 <li><i class="fas fa-check"></i> SEO otimizado para buscadores</li> 1389 <li><i class="fas fa-check"></i> Design responsivo e profissional</li> 1390 <li><i class="fas fa-check"></i> Links para suas redes sociais e site</li> 1391 <li><i class="fas fa-check"></i> Atualizações de conteúdo inclusas (1x/mês)</li> 1392 </ul> 1393 </div> 1394 </div> 1395 <div class="entrega-card"> 1396 <div class="entrega-header"> 1397 <i class="fas fa-chart-bar"></i> 1398 <h4>Bônus Exclusivos</h4> 1399 </div> 1400 <div class="entrega-body"> 1401 <ul> 1402 <li><i class="fas fa-check"></i> Relatório mensal de métricas (visualizações/cliques)</li> 1403 <li><i class="fas fa-check"></i> Destaque em nossas newsletters (opcional)</li> 1404 <li><i class="fas fa-check"></i> Menção em nossas redes sociais (para os 50 primeiros)</li> 1405 <li><i class="fas fa-check"></i> Prioridade no suporte técnico</li> 1406 <li><i class="fas fa-check"></i> Renovação com desconto para clientes fiéis</li> 1407 </ul> 1408 </div> 1409 </div> 1410 </div> 1411</section> 1412 1413<!-- Oferta Especial --> 1414<section id="oferta" class="section-vendas" data-animate> 1415 <div class="oferta-box"> 1416 <h3 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem;">ð¥ Oferta de Lançamento</h3> 1417 <p style="color: #94a3b8; margin-bottom: 2rem;"> 1418 Garanta seu espaço com preço promocional exclusivo para os primeiros anunciantes. 1419 </p> 1420 1421 <div class="oferta-preco"> 1422 <div class="original">De <span class="moeda">R$</span>199,90</div> 1423 <div class="promocional">
1424 <span class="moeda">R$</span>29,90 </div> 1425 <div class="periodo">/ mês ⢠Cobrança mensal ⢠Cancele quando quiser</div> 1426 </div> 1427 1428 <div class="oferta-vagas"> 1429 <i class="fas fa-fire"></i> 1430 Apenas 100 vagas restantes neste preço! 1431 </div> 1432 1433 <a href="contato.php?assunto=Anúncio+no+VouF" class="oferta-cta"> 1434 <i class="fas fa-whatsapp"></i> 1435 Quero Garantir Minha Vaga 1436 </a> 1437 1438 <p style="margin-top: 1.5rem; font-size: 0.875rem; opacity: 0.8;"> 1439 <i class="fas fa-shield-alt"></i> Pagamento seguro ⢠Suporte em português ⢠Sem fidelidade 1440 </p> 1441 </div> 1442</section> 1443 1444<!-- Depoimentos (Opcional - Preencher com reais depois) --> 1445<section class="section-vendas" style="background: #f8fafc;" data-animate> 1446 <h2 class="section-title">ð¬ O Que Nossos Anunciantes Dizem</h2> 1447 <div class="depoimentos-grid"> 1448 <div class="depoimento-card"> 1449 <div class="depoimento-header"> 1450 <div class="depoimento-avatar">MC</div> 1451 <div> 1452 <div class="depoimento-nome">Marina C.</div> 1453 <div class="depoimento-empresa">Loja de Games Online</div> 1454 </div> 1455 </div> 1456 <p class="depoimento-texto"> 1457 "Anunciar no VouF foi uma das melhores decisões para minha loja. Em 30 dias, tive um aumento de 40% nas visitas vindas do site. O suporte foi excelente!" 1458 </p> 1459 </div> 1460 <div class="depoimento-card"> 1461 <div class="depoimento-header"> 1462 <div class="depoimento-avatar">RP</div> 1463 <div> 1464 <div class="depoimento-nome">Rafael P.</div> 1465 <div class="depoimento-empresa">Curso de Programação</div> 1466 </div> 1467 </div> 1468 <p class="depoimento-texto"> 1469 "O público do VouF é exatamente o perfil que eu buscava: jovens interessados em aprendizado e tecnologia. As inscrições do meu curso aumentaram significativamente." 1470 </p> 1471 </div> 1472 <div class="depoimento-card"> 1473 <div class="depoimento-header"> 1474 <div class="depoimento-avatar">AS</div> 1475 <div> 1476 <div class="depoimento-nome">Ana S.</div> 1477 <div class="depoimento-empresa">Influencer Digital</div> 1478 </div> 1479 </div> 1480 <p class="depoimento-texto"> 1481 "A página dedicada no VouF me ajudou a profissionalizar minha presença online. Recebi vários convites de parceria depois que anunciei aqui. Recomendo!" 1482 </p> 1483 </div> 1484 </div> 1485</section> 1486 1487<!-- FAQ --> 1488<section id="faq" class="section-vendas" data-animate> 1489 <h2 class="section-title">â Perguntas Frequentes</h2> 1490 <div class="faq-vendas"> 1491 <details class="faq-item"> 1492 <summary>Preciso ter uma arte pronta para o banner?</summary> 1493 <p>Não! Se você não tiver uma arte, nossa equipe pode criar uma versão básica gratuitamente para os primeiros 50 anunciantes. Para artes mais elaboradas, indicamos parceiros ou você pode enviar sua própria arte nas dimensões 468x60px ou 728x90px.</p> 1494 </details> 1495 <details class="faq-item"> 1496 <summary>Como é feita a cobrança?</summary> 1497 <p>A cobrança é mensal, via PIX ou cartão de crédito. Você recebe uma fatura no inÃcio de cada ciclo e pode cancelar a qualquer momento, sem multa ou fidelidade.</p> 1498 </details> 1499 <details class="faq-item"> 1500 <summary>Posso alterar o conteúdo da minha página depois de publicada?</summary> 1501 <p>Sim! IncluÃmos 1 atualização de conteúdo por mês sem custo adicional. Para alterações mais frequentes, oferecemos planos personalizados. Basta nos enviar o novo conteúdo que atualizamos em até 48h.</p> 1502 </details> 1503 <details class="faq-item"> 1504 <summary>Como acompanho os resultados do meu anúncio?</summary> 1505 <p>Todo mês você recebe um relatório por e-mail com: número de visualizações do banner, cliques recebidos, taxa de conversão estimada e sugestões de otimização. Também disponibilizamos um painel online para consulta em tempo real (em desenvolvimento).</p> 1506 </details> 1507 <details class="faq-item"> 1508 <summary>
1508E se eu quiser anunciar por mais de um mês?</summary> 1509 <p>Oferecemos descontos progressivos para contratos trimestrais (5% off), semestrais (10% off) e anuais (20% off). Fale com nossa equipe para montar um plano sob medida para sua necessidade.</p> 1510 </details> 1511 </div> 1512</section> 1513 1514<!-- CTA Final --> 1515<section class="section-vendas" style="text-align: center; background: linear-gradient(135deg, var(--brand-primary), #60a5fa); color: white; border-radius: 2rem; margin: 2rem auto; max-width: 1200px;" data-animate> 1516 <h3 style="font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem;">ð Pronto para Alavancar sua Divulgação?</h3> 1517 <p style="margin-bottom: 2rem; opacity: 0.95; max-width: 600px; margin-left: auto; margin-right: auto;"> 1518 Não perca esta oportunidade única. Garanta seu espaço no VouF Games antes que as vagas promocionais acabem! 1519 </p> 1520 <a href="contato.php?assunto=Anúncio+no+VouF" class="oferta-cta" style="background: white; color: var(--brand-primary);"> 1521 <i class="fas fa-paper-plane"></i> 1522 Falar com Nossa Equipe Agora 1523 </a> 1524 <p style="margin-top: 1.5rem; font-size: 0.875rem; opacity: 0.8;"> 1525 <i class="fas fa-clock"></i> Respondemos em até 24 horas úteis 1526 </p> 1527</section> 1528 1529<!-- Card Flutuante de Contato --> 1530<a href="contato.php?assunto=Anúncio+no+VouF" class="card-flutuante" title="Fale conosco sobre publicidade"> 1531 <i class="fas fa-comments"></i> 1532 <div> 1533 <div class="card-flutuante-text">Quer anunciar no VouF?</div> 1534 <span class="card-flutuante-sub">Clique aqui e fale conosco!</span> 1535 </div> 1536</a> 1537 1538<!-- Scripts -->
1539<script> 1540// Animações ao rolar a página 1541document.addEventListener('DOMContentLoaded', function() { 1542 // Observer para animações de scroll 1543 const observer = new IntersectionObserver((entries) => { 1544 entries.forEach(entry => { 1545 if (entry.isIntersecting) { 1546 entry.target.classList.add('visible'); 1547 } 1548 }); 1549 }, { threshold: 0.1 }); 1550 1551 document.querySelectorAll('[data-animate]').forEach(el => { 1552 observer.observe(el); 1553 }); 1554 1555 // Smooth scroll para links âncora 1556 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 1557 anchor.addEventListener('click', function(e) { 1558 e.preventDefault(); 1559 const target = document.querySelector(this.getAttribute('href')); 1560 if (target) { 1561 target.scrollIntoView({ 1562 behavior: 'smooth', 1563 block: 'start' 1564 }); 1565 } 1566 }); 1567 }); 1568 1569 // Efeito de hover nos cards de navegação 1570 document.querySelectorAll('.nav-card').forEach(card => { 1571 card.addEventListener('mouseenter', function() { 1572 this.style.borderColor = 'var(--brand-primary)'; 1573 }); 1574 card.addEventListener('mouseleave', function() { 1575 this.style.borderColor = 'transparent'; 1576 }); 1577 }); 1578}); 1579</script>
1579 1580 1581 1582<!-- 1. Sons condicionais (apenas para jogos) --> 1583 1584</main> <!-- Fecha container aberto no header.php --> 1585 1586<!-- 2. Botão Flutuante do Telegram (apenas para afiliados) --> 1587 1588<!-- 3. Páginas de exibição de anúncio do a-ads --> 1589 <div class="w-full px-4 sm:px-6 lg:px-8 text-center items-center my-3"> 1590 <div class="inline-block max-w-[320px]"> 1591 <iframe data-aa='2126419' src='//ad.a-ads.com/2126419?size=320x50' style="width: 100%; height:50px; border:0; overflow:hidden; background:transparent;" class="mx-auto"></iframe> 1592 </div> 1593 </div> 1594 1595<!-- ================= MODAL DE MENSAGEM GLOBAL (PADRÃO DO SITE) ================= --> 1596<div id="modal-mensagem" class="modal-global hidden" role="dialog" aria-modal="true" aria-labelledby="modal-titulo"> 1597 <!-- Overlay escuro 80% --> 1598 <div id="modal-fundo" class="modal-overlay"></div> 1599 1600 <!-- Container externo (borda animada) --> 1601 <div id="modal-conteudo" class="modal-content"> 1602 <!-- Conteúdo interno (fundo sólido) --> 1603 <div class="modal-inner"> 1604 <!-- Header --> 1605 <div class="modal-header-custom"> 1606 <div id="modal-icone" class="modal-icon"></div> 1607 <h3 id="modal-titulo" class="modal-title"></h3> 1608 <button onclick="fecharModalMensagem()" class="modal-close-btn" aria-label="Fechar"> 1609 <i class="fas fa-times"></i> 1610 </button> 1611 </div> 1612 1613 <!-- Body --> 1614 <div class="modal-body-custom"> 1615 <p id="modal-mensagem-texto" class="modal-text"></p> 1616 </div> 1617 1618 <!-- Footer com botões --> 1619 <div id="modal-botoes" class="modal-footer-custom"></div> 1620 </div> 1621 </div> 1622</div> 1623 1624<!-- Ãudio de notificação (som curto e suave) --> 1625<audio id="modal-sound" preload="auto" style="display:none;"> 1626 <source src="sons/notificacao.mp3" type="audio/mpeg"> 1627</audio> 1628 1629<style> 1630/* ================= MODAL GLOBAL - BORDA E SOMBRA GRADIENTE ANIMADO ================= */ 1631 1632/* Overlay escuro 80% */ 1633.modal-overlay { 1634 position: fixed; 1635 inset: 0; 1636 background: rgba(0, 0, 0, 0.8); 1637 backdrop-filter: blur(4px); 1638 z-index: 9998; 1639 opacity: 0; 1640 transition: opacity 0.3s ease; 1641} 1642 1643.modal-global:not(.hidden) .modal-overlay { 1644 opacity: 1; 1645} 1646 1647/* Container externo do modal - responsável pela animação */ 1648.modal-content { 1649 position: fixed; 1650 top: 50%; 1651 left: 50%; 1652 transform: translate(-50%, -50%) scale(0.7); 1653 width: 420px; 1654 max-width: 90%; 1655 z-index: 9999; 1656 opacity: 0; 1657 transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1658 border-radius: 1rem; 1659 /* Truque: padding cria espaço para a borda animada */ 1660 padding: 5px; 1661 background: conic-gradient( 1662 from 0deg, 1663 #ff0080, #ff8c00, #ffd700, #00ff7f, 1664 #00bfff, #4169e1, #8a2be2, #ff1493, 1665 #ff0080 1666 ); 1667 background-size: 100% 100%; 1668 animation: rotateGradient 4s linear infinite; 1669 /* Sombra com glow colorido */ 1670 filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.5)) 1671 drop-shadow(0 0 30px rgba(0, 191, 255, 0.3)); 1672} 1673 1674.modal-global:not(.hidden) .modal-content { 1675 opacity: 1; 1676 transform: translate(-50%, -50%) scale(1); 1677} 1678 1679/* Rotação do gradiente */ 1680@keyframes rotateGradient { 1681 0% { 1682 background: conic-gradient( 1683 from 0deg, 1684 #ff0080, #ff8c00, #ffd700, #00ff7f, 1685 #00bfff, #4169e1, #8a2be2, #ff1493, 1686 #ff0080 1687 ); 1688 } 1689 25% { 1690 background: conic-gradient( 1691 from 90deg, 1692 #ff0080, #ff8c00, #ffd700, #00ff7f, 1693 #00bfff, #4169e1, #8a2be2, #ff1493, 1694 #ff0080 1695 ); 1696 } 1697 50% { 1698 background: conic-gradient( 1699 from 180deg, 1700 #ff0080, #ff8c00, #ffd700, #00ff7f, 1701 #00bfff, #4169e1, #8a2be2, #ff1493, 1702 #ff0080 1703 ); 1704 } 1705 75% { 1706 background: conic-gradient( 1707 from 270deg, 1708 #ff0080, #ff8c00, #ffd700, #00ff7f, 1709 #00bfff, #4169e1, #8a2be2, #ff1493, 1710 #ff0080 1711 ); 1712 } 1713 100% { 1714 background: conic-gradient( 1715 from 360deg, 1716 #ff0080, #ff8c00, #ffd700, #00ff7f, 1717 #00bfff, #4169e1, #8a2be2, #ff1493, 1718 #ff0080 1719 ); 1720 } 1721} 1722 1723/* Conteúdo interno do modal - fundo sólido por cima da borda */ 1724.modal-inner { 1725 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 1726 border-radius: calc(1rem - 3px); 1727 overflow: hidden; 1728 position: relative; 1729} 1730
1731/* Header do modal */ 1732.modal-header-custom { 1733 display: flex; 1734 align-items: center; 1735 gap: 1rem; 1736 padding: 1.25rem; 1737 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1738} 1739 1740.modal-icon { 1741 font-size: 2rem; 1742 flex-shrink: 0; 1743 animation: iconBounce 0.6s ease-out; 1744} 1745 1746@keyframes iconBounce { 1747 0% { transform: scale(0); } 1748 50% { transform: scale(1.2); } 1749 100% { transform: scale(1); } 1750} 1751 1752.modal-title { 1753 flex: 1; 1754 font-size: 1.125rem; 1755 font-weight: 700; 1756 color: #e2e8f0; 1757 margin: 0; 1758} 1759 1760.modal-close-btn { 1761 background: rgba(255, 255, 255, 0.1); 1762 border: none; 1763 color: #94a3b8; 1764 width: 32px; 1765 height: 32px; 1766 border-radius: 50%; 1767 cursor: pointer; 1768 transition: all 0.2s; 1769 display: flex; 1770 align-items: center; 1771 justify-content: center; 1772 flex-shrink: 0; 1773} 1774 1775.modal-close-btn:hover { 1776 background: rgba(248, 113, 113, 0.2); 1777 color: #f87171; 1778 transform: rotate(90deg); 1779} 1780 1781/* Body do modal */ 1782.modal-body-custom { 1783 padding: 1.25rem; 1784} 1785 1786.modal-text { 1787 color: #cbd5e1; 1788 font-size: 0.95rem; 1789 line-height: 1.6; 1790 margin: 0; 1791 text-align: center; 1792} 1793 1794/* Footer do modal */ 1795.modal-footer-custom { 1796 display: flex; 1797 gap: 0.75rem; 1798 padding: 1rem 1.25rem; 1799 border-top: 1px solid rgba(255, 255, 255, 0.1); 1800 flex-wrap: wrap; 1801} 1802 1803.modal-footer-custom button { 1804 flex: 1; 1805 min-width: 100px; 1806 padding: 0.75rem 1rem; 1807 border-radius: 0.5rem; 1808 font-weight: 600; 1809 font-size: 0.9rem; 1810 cursor: pointer; 1811 transition: all 0.3s; 1812 border: none; 1813 color: white; 1814} 1815 1816/* ===== CORES POR TIPO DE MENSAGEM ===== */ 1817/* Cada tipo ajusta a cor do Ãcone e do botão principal */ 1818 1819.modal-global.tipo-sucesso .modal-icon { color: #34d399; } 1820.modal-global.tipo-sucesso .modal-footer-custom button:first-child { 1821 background: linear-gradient(135deg, #34d399, #059669); 1822} 1823.modal-global.tipo-sucesso .modal-content { 1824 filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.6)) 1825 drop-shadow(0 0 30px rgba(16, 185, 129, 0.4)); 1826} 1827 1828.modal-global.tipo-erro .modal-icon { color: #f87171; } 1829.modal-global.tipo-erro .modal-footer-custom button:first-child { 1830 background: linear-gradient(135deg, #f87171, #dc2626); 1831} 1832.modal-global.tipo-erro .modal-content { 1833 filter: drop-shadow(0 0 15px rgba(248, 113, 113, 0.6)) 1834 drop-shadow(0 0 30px rgba(220, 38, 38, 0.4)); 1835} 1836 1837.modal-global.tipo-alerta .modal-icon { color: #fbbf24; } 1838.modal-global.tipo-alerta .modal-footer-custom button:first-child { 1839 background: linear-gradient(135deg, #fbbf24, #f59e0b); 1840 color: #1e293b; 1841} 1842.modal-global.tipo-alerta .modal-content { 1843 filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6)) 1844 drop-shadow(0 0 30px rgba(245, 158, 11, 0.4)); 1845} 1846 1847.modal-global.tipo-info .modal-icon { color: #60a5fa; } 1848.modal-global.tipo-info .modal-footer-custom button:first-child { 1849 background: linear-gradient(135deg, #60a5fa, #3b82f6); 1850} 1851.modal-global.tipo-info .modal-content { 1852 filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6)) 1853 drop-shadow(0 0 30px rgba(59, 130, 246, 0.4)); 1854} 1855 1856.modal-global.tipo-pergunta .modal-icon { color: #a78bfa; } 1857.modal-global.tipo-pergunta .modal-footer-custom button:first-child { 1858 background: linear-gradient(135deg, #a78bfa, #8b5cf6); 1859} 1860.modal-global.tipo-pergunta .modal-content { 1861 filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.6)) 1862 drop-shadow(0 0 30px rgba(139, 92, 246, 0.4)); 1863} 1864 1865.modal-global.tipo-vencedor .modal-icon { color: #fbbf24; } 1866.modal-global.tipo-vencedor .modal-footer-custom button:first-child { 1867 background: linear-gradient(135deg, #fbbf24, #f59e0b); 1868 color: #1e293b; 1869} 1870.modal-global.tipo-vencedor .modal-content { 1871 filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)) 1872 drop-shadow(0 0 40px rgba(245, 158, 11, 0.5)); 1873 animation: rotateGradient 2s linear infinite, pulseGlow 1.5s ease-in-out infinite; 1874} 1875 1876@keyframes pulseGlow { 1877 0%, 100% { 1878 filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)) 1879 drop-shadow(0 0 40px rgba(245, 158, 11, 0.5)); 1880 } 1881 50% { 1882 filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1)) 1883 drop-shadow(0 0 60px rgba(245, 158, 11, 0.8)); 1884 } 1885} 1886 1887/* Botão secundário */ 1888.modal-footer-custom button:last-child { 1889 background: rgba(255, 255, 255, 0.1); 1890 color: #cbd5e1; 1891} 1892 1893.modal-footer-custom button:last-child:hover { 1894 background: rgba(255, 255, 255, 0.2); 1895} 1896 1897/* Animação de entrada */ 1898@keyframes modalSlideIn { 1899 0% { 1900 opacity: 0; 1901 transform: translate(-50%, -60%) scale(0.8); 1902 } 1903 100% { 1904 opacity: 1; 1905 transform: translate(-50%, -50%) scale(1); 1906 } 1907} 1908 1909.modal-global:not(.hidden) .modal-content { 1910 animation: rotateGradient 4s linear infinite, modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1911} 1912 1913/* Responsivo */ 1914@media (max-width: 480px) {
1915 .modal-content { 1916 width: 95%; 1917 max-width: 95%; 1918 } 1919 .modal-footer-custom { 1920 flex-direction: column; 1921 } 1922 .modal-footer-custom button { 1923 width: 100%; 1924 } 1925} 1926 1927/* Acessibilidade: foco visÃvel */ 1928.modal-close-btn:focus, 1929.modal-footer-custom button:focus { 1930 outline: 2px solid #60a5fa; 1931 outline-offset: 2px; 1932} 1933 1934/* Bloqueia scroll do body quando modal aberto */ 1935body.modal-open { 1936 overflow: hidden; 1937} 1938</style> 1939 1940<!-- 5. Notificação de Diamantes Diários --> 1941 1942<!-- 6. Estilos de Animação --> 1943<style> 1944 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 1945 .animate-fade-in { animation: fadeIn 0.5s ease-out; } 1946</style> 1947 1948 1949<!-- 7. Scripts Globais -->
1950<script> 1951// ================= SISTEMA DE MODAL GLOBAL ================= 1952(function() { 1953 'use strict'; 1954 1955 // Token de segurança para validar chamadas 1956 const MODAL_SECRET = 'vouf_modal_' + Math.random().toString(36).substr(2, 9); 1957 window.__MODAL_SECRET = MODAL_SECRET; 1958 1959 // Histórico de modais (previne spam) 1960 let modalHistory = []; 1961 const MAX_MODALS_PER_MINUTE = 10; 1962 1963 // Som de notificação (Web Audio API como fallback) 1964 function playNotificationSound() { 1965 try { 1966 // Tenta usar o arquivo de áudio 1967 const audio = document.getElementById('modal-sound'); 1968 if (audio) { 1969 audio.currentTime = 0; 1970 audio.volume = 0.3; 1971 const playPromise = audio.play(); 1972 if (playPromise !== undefined) { 1973 playPromise.catch(() => { 1974 // Fallback: gera som via Web Audio API 1975 generateBeep(); 1976 }); 1977 } 1978 } else { 1979 generateBeep(); 1980 } 1981 } catch (e) { 1982 generateBeep(); 1983 } 1984 } 1985 1986 // Gera beep via Web Audio API 1987 function generateBeep() { 1988 try { 1989 const audioContext = new (window.AudioContext || window.webkitAudioContext)(); 1990 const oscillator = audioContext.createOscillator(); 1991 const gainNode = audioContext.createGain(); 1992 1993 oscillator.connect(gainNode); 1994 gainNode.connect(audioContext.destination); 1995 1996 oscillator.frequency.value = 800; 1997 oscillator.type = 'sine'; 1998 1999 gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); 2000 gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); 2001 2002 oscillator.start(audioContext.currentTime); 2003 oscillator.stop(audioContext.currentTime + 0.3); 2004 } catch (e) { 2005 // Silenciosamente falha se Web Audio não disponÃvel 2006 } 2007 } 2008 2009 // Valida chamada do modal (segurança) 2010 function validateModalCall(config) { 2011 // Rate limiting 2012 const now = Date.now(); 2013 modalHistory = modalHistory.filter(t => now - t < 60000); 2014 2015 if (modalHistory.length >= MAX_MODALS_PER_MINUTE) { 2016 console.warn('Modal rate limit exceeded'); 2017 return false; 2018 } 2019 2020 // Valida estrutura 2021 if (!config || typeof config !== 'object') return false; 2022 if (config.mensagem === undefined) return false; 2023 2024 // Sanitiza inputs 2025 if (typeof config.titulo !== 'string') config.titulo = ''; 2026 if (typeof config.mensagem !== 'string') config.mensagem = String(config.mensagem); 2027 if (typeof config.tipo !== 'string') config.tipo = 'info'; 2028 2029 // Lista branca de tipos 2030 const tiposValidos = ['sucesso', 'erro', 'alerta', 'info', 'pergunta', 'vencedor', 'aguarde']; 2031 if (!tiposValidos.includes(config.tipo)) config.tipo = 'info'; 2032 2033 // Limita tamanho 2034 config.titulo = config.titulo.substring(0, 100); 2035 config.mensagem = config.mensagem.substring(0, 1000); 2036 2037 modalHistory.push(now); 2038 return true; 2039 } 2040 2041 // Ãcones por tipo 2042 const icones = { 2043 'sucesso': 'â ', 2044 'erro': 'â', 2045 'alerta': 'â ï¸', 2046 'info': 'â¹ï¸', 2047 'pergunta': 'â', 2048 'aguarde': 'â³', 2049 'vencedor': 'ð' 2050 }; 2051 2052 // Função global exibirMensagem 2053 window.exibirMensagem = function(config) { 2054 // Validação de segurança 2055 if (!validateModalCall(config)) return; 2056 2057 const modal = document.getElementById('modal-mensagem'); 2058 const titulo = document.getElementById('modal-titulo'); 2059 const mensagem = document.getElementById('modal-mensagem-texto'); 2060 const icone = document.getElementById('modal-icone'); 2061 const botoes = document.getElementById('modal-botoes'); 2062 2063 if (!modal || !titulo || !mensagem || !icone || !botoes) return; 2064 2065 // Remove classes de tipo anteriores 2066 modal.className = 'modal-global hidden'; 2067 2068 // Adiciona classe de tipo 2069 modal.classList.add('tipo-' + config.tipo); 2070 2071 // Preenche conteúdo (com sanitização) 2072 titulo.textContent = config.titulo || ''; 2073 mensagem.textContent = config.mensagem || ''; 2074 icone.textContent = icones[config.tipo] || 'ð¢'; 2075 2076 // Limpa botões 2077 botoes.innerHTML = ''; 2078 2079 // Cria botão principal 2080 const btn1 = document.createElement('button'); 2081 btn1.textContent = config.btn1Texto || 'OK'; 2082 btn1.setAttribute('aria-label', config.btn1Texto || 'OK'); 2083 btn1.onclick = function() { 2084 if (typeof config.btn1Acao === 'function') { 2085 try { 2086 config.btn1Acao(); 2087 } catch (e) { 2088 console.error('Erro no callback do modal:', e); 2089 } 2090 } 2091 fecharModalMensagem(); 2092 }; 2093 botoes.appendChild(btn1); 2094 2095 // Cria botão secundário 2096 if (config.btn2Texto) { 2097 const btn2 = document.createElement('button'); 2098 btn2.textContent = config.btn2Texto; 2099 btn2.setAttribute('aria-label', config.btn2Texto); 2100 btn2.onclick = function() { 2101 if (typeof config.btn2Acao === 'function') { 2102 try { 2103 config.btn2Acao(); 2104 } catch (e) { 2105 console.error('Erro no callback secundário:', e); 2106 } 2107 } 2108 fecharModalMensagem(); 2109 }; 2110 botoes.appendChild(btn2); 2111 } 2112 2113 // Mostra modal 2114 modal.classList.remove('hidden'); 2115 document.body.classList.add('modal-open'); 2116 2117 // Toca som 2118 playNotificationSound(); 2119 2120 // Foco no botão principal (acessibilidade) 2121 setTimeout(() => btn1.focus(), 100); 2122 2123 // Bloqueia fechamento se configurado 2124 const fundo = document.getElementById('modal-fundo'); 2125 if (fundo) {
2126 if (config.fecharAoClicarFora === false) { 2127 fundo.onclick = null; 2128 } else { 2129 fundo.onclick = fecharModalMensagem; 2130 } 2131 } 2132 }; 2133 2134 // Função global fecharModalMensagem 2135 window.fecharModalMensagem = function() { 2136 const modal = document.getElementById('modal-mensagem'); 2137 if (modal) { 2138 modal.classList.add('hidden'); 2139 document.body.classList.remove('modal-open'); 2140 } 2141 }; 2142 2143 // Eventos globais 2144 document.addEventListener('keydown', function(e) { 2145 if (e.key === 'Escape') { 2146 const modal = document.getElementById('modal-mensagem'); 2147 if (modal && !modal.classList.contains('hidden')) { 2148 const fundo = document.getElementById('modal-fundo'); 2149 if (fundo && fundo.onclick === fecharModalMensagem) { 2150 fecharModalMensagem(); 2151 } 2152 } 2153 } 2154 }); 2155 2156 // Previne manipulação direta do DOM 2157 Object.defineProperty(window, 'exibirMensagem', { 2158 writable: false, 2159 configurable: false 2160 }); 2161 2162 Object.defineProperty(window, 'fecharModalMensagem', { 2163 writable: false, 2164 configurable: false 2165 }); 2166 2167})(); 2168</script>
vendor: 1 bytes, line 2168
2168
2169<script> 2170/* 2171// ================= FUNÃÃES DE MODAL ================= 2172function exibirMensagem(config) { 2173 const modal = document.getElementById('modal-mensagem'); 2174 const titulo = document.getElementById('modal-titulo'); 2175 const mensagem = document.getElementById('modal-mensagem-texto'); 2176 const icone = document.getElementById('modal-icone'); 2177 const botoes = document.getElementById('modal-botoes'); 2178 const fundo = document.getElementById('modal-fundo'); 2179 2180 botoes.innerHTML = ''; 2181 titulo.textContent = config.titulo || ''; 2182 mensagem.textContent = config.mensagem; 2183 2184 const icones = { 2185 'sucesso': 'â ', 'erro': 'â', 'alerta': 'â ï¸', 2186 'pergunta': 'â', 'info': 'â¹ï¸', 'aguarde': '', 'vencedor': 'ð' 2187 }; 2188 icone.innerHTML = icones[config.tipo] || 'ð¢'; 2189 2190 const btn1 = document.createElement('button'); 2191 btn1.textContent = config.btn1Texto || 'OK'; 2192 btn1.className = `px-4 py-2 rounded font-medium text-white transition ${ 2193 config.tipo === 'erro' ? 'bg-red-600 hover:bg-red-700' : 2194 config.tipo === 'sucesso' ? 'bg-green-600 hover:bg-green-700' : 2195 'bg-blue-600 hover:bg-blue-700' 2196 }`; 2197 btn1.onclick = () => { if(config.btn1Acao) config.btn1Acao(); fecharModalMensagem(); }; 2198 botoes.appendChild(btn1); 2199 2200 if(config.btn2Texto) { 2201 const btn2 = document.createElement('button'); 2202 btn2.textContent = config.btn2Texto; 2203 btn2.className = 'px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded font-medium transition'; 2204 btn2.onclick = () => { if(config.btn2Acao) config.btn2Acao(); fecharModalMensagem(); }; 2205 botoes.appendChild(btn2); 2206 } 2207 2208 modal.classList.remove('hidden'); 2209 document.body.style.overflow = 'hidden'; 2210 fundo.onclick = null; 2211 if(config.fecharAoClicarFora !== false) fundo.onclick = fecharModalMensagem; 2212} 2213 2214function fecharModalMensagem() { 2215 document.getElementById('modal-mensagem').classList.add('hidden'); 2216 document.body.style.overflow = 'auto'; 2217} 2218 2219document.getElementById('modal-conteudo')?.addEventListener('click', e => e.stopPropagation()); 2220document.addEventListener('keydown', e => { 2221 if(e.key === 'Escape') { 2222 const modal = document.getElementById('modal-mensagem'); 2223 const fundo = document.getElementById('modal-fundo'); 2224 if(!modal.classList.contains('hidden') && fundo.onclick === fecharModalMensagem) { 2225 fecharModalMensagem(); 2226 } 2227 } 2228}); 2229*/ 2230// ================= MENU MOBILE E DROPDOWN DESKTOP ================= 2231document.addEventListener('DOMContentLoaded', function() { 2232 const toggleBtn = document.getElementById('mobile-menu-toggle'); 2233 const closeBtn = document.getElementById('mobile-menu-close'); 2234 const overlay = document.getElementById('mobile-menu-overlay'); 2235 const panel = document.getElementById('mobile-menu-panel'); 2236 2237 function openMenu() { 2238 if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'true'); 2239 if(overlay) overlay.setAttribute('data-state', 'open'); 2240 if(panel) panel.setAttribute('data-state', 'open'); 2241 document.body.style.overflow = 'hidden'; 2242 } 2243 2244 function closeMenu() { 2245 if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false'); 2246 if(overlay) overlay.setAttribute('data-state', 'closed'); 2247 if(panel) panel.setAttribute('data-state', 'closed'); 2248 document.body.style.overflow = ''; 2249 } 2250 2251 toggleBtn?.addEventListener('click', openMenu); 2252 closeBtn?.addEventListener('click', closeMenu); 2253 overlay?.addEventListener('click', closeMenu); 2254 document.addEventListener('keydown', e => { if(e.key === 'Escape') closeMenu(); }); 2255 2256 document.querySelectorAll('.mobile-accordion-header').forEach(header => { 2257 header.addEventListener('click', function(e) { 2258 e.stopPropagation(); 2259 const contentId = this.getAttribute('aria-controls'); 2260 const content = contentId ? document.getElementById(contentId) : null; 2261 if(!content) return; 2262 2263 const isExpanded = this.getAttribute('aria-expanded') === 'true'; 2264 2265 document.querySelectorAll('.mobile-accordion-header').forEach(h => { 2266 h.setAttribute('aria-expanded', 'false'); 2267 const cId = h.getAttribute('aria-controls'); 2268 if(cId) { 2269 const c = document.getElementById(cId); 2270 if(c) { 2271 c.setAttribute('aria-hidden', 'true'); 2272 c.style.maxHeight = '0'; 2273 } 2274 } 2275 }); 2276 2277 if(!isExpanded) { 2278 this.setAttribute('aria-expanded', 'true'); 2279 content.setAttribute('aria-hidden', 'false'); 2280 content.style.maxHeight = content.scrollHeight + 'px'; 2281 } 2282 }); 2283 }); 2284}); 2285 2286// ================= NOTIFICAÃÃO DE DIAMANTES ================= 2287setTimeout(function() { 2288 const notification = document.getElementById('diamonds-notification'); 2289 if (notification) { 2290 notification.classList.add('animate-fade-out'); 2291 setTimeout(() => notification.remove(), 500); 2292 } 2293}, 5000); 2294 2295// ================= SERVICE WORKER (PWA) ================= 2296if('serviceWorker' in navigator) { 2297 navigator.serviceWorker.register('/service-worker.js') 2298 .then(reg => console.log('SW registrado:', reg)) 2299 .catch(err => console.log('Erro ao registrar SW:', err)); 2300} 2301 2302// ================= NOTIFICAÃÃES INTERNAS ================= 2303document.addEventListener('DOMContentLoaded', function() { 2304 const btnNotificacoes = document.getElementById('btn-notificacoes'); 2305 const dropdown = document.getElementById('dropdown-notificacoes'); 2306 const lista = document.getElementById('lista-notificacoes'); 2307 const badge = document.getElementById('badge-notificacoes'); 2308 2309 if(!btnNotificacoes) return; 2310 2311 function carregarNotificacoes() { 2312 fetch('notificacoes.php?action=listar') 2313 .then(r => r.json()) 2314 .then(data => { 2315 if(data.success) {
2316 if(data.nao_lidas > 0) { 2317 badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas; 2318 badge.classList.remove('hidden'); 2319 } else { 2320 badge.classList.add('hidden'); 2321 } 2322 2323 if(data.notificacoes.length === 0) { 2324 lista.innerHTML = '<div class="p-4 text-center text-gray-500 text-sm">Nenhuma notificação</div>'; 2325 return; 2326 } 2327 2328 lista.innerHTML = data.notificacoes.map(n => { 2329 const classes = n.lida ? 'opacity-70' : 'bg-blue-50'; 2330 const linkHtml = n.link ? '<span class="text-xs text-blue-600 mt-1 block">Ver mais â</span>' : ''; 2331 2332 return `<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${classes}" 2333 data-id="${n.id}" data-link="${n.link || ''}"> 2334 <div class="flex justify-between items-start"> 2335 <h5 class="font-semibold text-sm text-gray-800">${n.titulo}</h5> 2336 <span class="text-xs text-gray-400">${n.data}</span> 2337 </div> 2338 <p class="text-xs text-gray-600 mt-1">${n.mensagem}</p> 2339 ${linkHtml} 2340 </div>`; 2341 }).join(''); 2342 2343 lista.querySelectorAll('[data-id]').forEach(item => { 2344 item.onclick = function() { 2345 const id = this.dataset.id; 2346 const link = this.dataset.link; 2347 2348 fetch('notificacoes.php', { 2349 method: 'POST', 2350 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 2351 body: 'action=marcar_lida&id=' + id 2352 }); 2353 2354 if(!this.classList.contains('opacity-70')) { 2355 const total = parseInt(badge.textContent) || 0; 2356 if(total <= 1) badge.classList.add('hidden'); 2357 else badge.textContent = total - 1; 2358 this.classList.add('opacity-70'); 2359 } 2360 2361 if(link) window.location.href = link; 2362 }; 2363 }); 2364 } 2365 }); 2366 } 2367 2368 btnNotificacoes.onclick = function(e) { 2369 e.stopPropagation(); 2370 dropdown.classList.toggle('hidden'); 2371 if(!dropdown.classList.contains('hidden')) carregarNotificacoes(); 2372 }; 2373 2374 document.addEventListener('click', function(e) { 2375 if(!btnNotificacoes.contains(e.target) && !dropdown.contains(e.target)) { 2376 dropdown.classList.add('hidden'); 2377 } 2378 }); 2379 2380 document.getElementById('btn-marcar-todas')?.addEventListener('click', function(e) { 2381 e.preventDefault(); 2382 fetch('notificacoes.php', { 2383 method: 'POST', 2384 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 2385 body: 'action=marcar_todas_lidas' 2386 }).then(() => { 2387 badge.classList.add('hidden'); 2388 lista.querySelectorAll('[data-id]').forEach(i => i.classList.add('opacity-70')); 2389 }); 2390 }); 2391 2392 setInterval(() => { 2393 if(!dropdown.classList.contains('hidden')) carregarNotificacoes(); 2394 else { 2395 fetch('notificacoes.php?action=listar') 2396 .then(r => r.json()) 2397 .then(data => { 2398 if(data.success && data.nao_lidas > 0) { 2399 badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas; 2400 badge.classList.remove('hidden'); 2401 } 2402 }); 2403 } 2404 }, 60000); 2405}); 2406 2407// ================= DROPDOWN ESTUDOS - INTERATIVIDADE ================= 2408$(document).ready(function() { 2409 $('.estudos-item[data-target]').on('click', function(e) { 2410 e.preventDefault(); 2411 e.stopPropagation(); 2412 2413 const targetId = $(this).data('target'); 2414 const $submenu = $('#' + targetId); 2415 const $parent = $(this); 2416 2417 $parent.siblings('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 2418 $parent.siblings('.estudos-item').removeClass('active'); 2419 2420 $submenu.toggleClass('hidden'); 2421 $parent.toggleClass('active'); 2422 2423 if ($submenu.hasClass('hidden')) { 2424 $submenu.find('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 2425 $submenu.find('.estudos-item').removeClass('active'); 2426 } 2427 }); 2428 2429 $('.estudos-estudos-list').prev('.estudos-item').on('click', function(e) { 2430 e.preventDefault(); 2431 e.stopPropagation(); 2432 2433 const targetId = $(this).data('target'); 2434 const $list = $('#' + targetId); 2435 2436 $(this).siblings('.estudos-estudos-list').addClass('hidden'); 2437 $(this).siblings('.estudos-item').removeClass('active'); 2438 2439 $list.toggleClass('hidden'); 2440 $(this).toggleClass('active'); 2441 }); 2442 2443 $(document).on('click', function(e) { 2444 if (!$(e.target).closest('#dropdown-estudos').length) { 2445 $('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 2446 $('.estudos-item').removeClass('active'); 2447 } 2448 }); 2449 2450 $(document).on('keydown', function(e) { 2451 if (e.key === 'Escape') { 2452 $('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 2453 $('.estudos-item').removeClass('active'); 2454 } 2455 }); 2456}); 2457</script>
2457 2458 2459<!-- 8. Script de Rotação para Banner Mobile -->
2460<script> 2461(function() { 2462 if (window.innerWidth >= 768) return; 2463 2464 const banners = [{"img":"imagens\/banners\/appbaudotesouro.png","link":"appbaudotesouro.php"},{"img":"imagens\/banners\/appbingol.png","link":"appbingol.php"},{"img":"imagens\/banners\/appboom.png","link":"appboom.php"}]; 2465 if (banners.length <= 1) return; 2466 2467 const mobileImg = document.querySelector('.banner-mobile-img'); 2468 const mobileLink = document.querySelector('.banner-mobile-link'); 2469 if (!mobileImg || !mobileLink) return; 2470 2471 let idx = 1; 2472 2473 setInterval(() => { 2474 idx = (idx + 1) % banners.length; 2475 mobileImg.style.opacity = '0.7'; 2476 setTimeout(() => { 2477 mobileImg.src = banners[idx].img; 2478 mobileLink.href = banners[idx].link; 2479 mobileImg.onload = () => { mobileImg.style.opacity = '1'; }; 2480 }, 200); 2481 }, 25000); 2482})(); 2483</script>
2483 2484 2485<!-- 9. Verificação de Bônus (apenas para afiliados) --> 2486 2487<!-- 10. Cookie Consent --> 2488<div id="cookie-banner" class="fixed border-2 border-blue-600 bottom-0 left-0 right-0 bg-gray-600 text-white p-4 z-50 shadow-lg hidden"> 2489 <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4"> 2490 <div class="text-sm"> 2491 <p class="font-medium mb-1">ðª Cookies e Privacidade</p> 2492 <p class="text-[#94a3b8]"> 2493 Usamos cookies para personalizar anúncios e melhorar sua experiência. 2494 Ao continuar, você concorda com nossa <a href="politica_vouf.php" class="text-[#60a5fa] underline">PolÃtica de Privacidade</a>. 2495 </p> 2496 </div> 2497 <div class="flex gap-2"> 2498 <button id="cookie-reject" class="px-4 py-2 bg-[#334155] hover:bg-[#475569] rounded text-sm transition">Recusar</button> 2499 <button id="cookie-accept" class="px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] rounded text-sm font-medium transition">Aceitar</button> 2500 </div> 2501 </div> 2502</div> 2503
2504<script> 2505document.addEventListener('DOMContentLoaded', function() { 2506 const banner = document.getElementById('cookie-banner'); 2507 const acceptBtn = document.getElementById('cookie-accept'); 2508 const rejectBtn = document.getElementById('cookie-reject'); 2509 2510 // Verifica consentimento prévio 2511 if (!localStorage.getItem('cookie-consent')) { 2512 banner.classList.remove('hidden'); 2513 } 2514 2515 // Aceitar: permite cookies do AdSense 2516 acceptBtn.addEventListener('click', function() { 2517 localStorage.setItem('cookie-consent', 'accepted'); 2518 banner.classList.add('hidden'); 2519 // Aqui você pode inicializar scripts do AdSense se estiverem em delay 2520 if (typeof gtag === 'function') { 2521 gtag('consent', 'update', {'ad_storage': 'granted', 'analytics_storage': 'granted'}); 2522 } 2523 }); 2524 2525 // Recusar: bloqueia cookies não essenciais 2526 rejectBtn.addEventListener('click', function() { 2527 localStorage.setItem('cookie-consent', 'rejected'); 2528 banner.classList.add('hidden'); 2529 // Bloqueia cookies de publicidade 2530 if (typeof gtag === 'function') { 2531 gtag('consent', 'update', {'ad_storage': 'denied', 'analytics_storage': 'denied'}); 2532 } 2533 }); 2534}); 2535</script>
2535 2536<!-- ================= FOOTER MODERNO - TEMA ESCURO ================= --> 2537<footer style="background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0;" class="mt-12 border-t" data-tailwind="border-[#334155]"> 2538 <!-- Seção Principal (Grid) --> 2539 <div class="max-w-7xl mx-auto px-4 py-12"> 2540 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> 2541 2542 <!-- COLUNA 1: Sobre + Segurança --> 2543 <div class="space-y-4"> 2544 <div class="flex items-center gap-3"> 2545 <img src="LogoVouFGames.png" alt="VouF" class="h-10 w-auto"> 2546 <span class="font-bold text-lg text-white">VouF Games</span> 2547 </div> 2548 <p class="text-sm opacity-80 leading-relaxed"> 2549 Plataforma de jogos educativos que estimula o raciocÃnio, memória e conhecimento geral de forma divertida e segura. 2550 </p> 2551 2552 <!-- Badge de Segurança --> 2553 <div class="flex items-center gap-2 pt-2"> 2554 <i class="fas fa-shield-alt text-green-400"></i> 2555 <span class="text-xs opacity-70">Site protegido por SSL ⢠Dados criptografados</span> 2556 </div> 2557 2558 <!-- Redes Sociais --> 2559 <div class="flex gap-3 pt-2"> 2560 <a href="https://t.me/voufgames" target="_blank" rel="noopener" 2561 style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-blue-600 transition-colors" 2562 title="Telegram"> 2563 <i class="fab fa-telegram text-white"></i> 2564 </a> 2565 <a href="#" id="link-whatsapp-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-green-500 transition-colors" 2566 title="WhatsApp"> 2567 <i class="fab fa-whatsapp text-white"></i> 2568 </a> 2569 <a href="#" id="link-instagram-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-pink-500 transition-colors" 2570 title="Instagram"> 2571 <i class="fab fa-instagram text-white"></i> 2572 </a> 2573 <a href="#" id="link-youtube-footer" style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-red-500 transition-colors" 2574 title="YouTube"> 2575 <i class="fab fa-youtube text-white"></i> 2576 </a> 2577 </div> 2578 </div> 2579 2580 <!-- COLUNA 2: Links Ãteis --> 2581 <div class="space-y-4"> 2582 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90"> Links Ãteis</h4> 2583 <ul class="space-y-2 text-sm"> 2584 <li> 2585 <a href="categorias.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2586 <i class="fas fa-book-open w-4"></i> Material de Estudos 2587 </a> 2588 </li> 2589 <li> 2590 <a href="ranking.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2591 <i class="fas fa-trophy w-4"></i> Ranking de Recordistas 2592 </a> 2593 </li> 2594 <li> 2595 <a href="blog.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2596 <i class="fas fa-newspaper w-4"></i> Blog & Novidades 2597 </a> 2598 </li> 2599 </ul> 2600 </div> 2601 2602 <!-- COLUNA 3: Institucional --> 2603 <div class="space-y-4"> 2604 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">ð Institucional</h4> 2605 <ul class="space-y-2 text-sm"> 2606 <li> 2607 <a href="sobre.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2608 <i class="fas fa-info-circle w-4"></i> Sobre Nós 2609 </a> 2610 </li> 2611 <li> 2612 <a href="contato.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors" id="link-contato-footer"> 2613 <i class="fas fa-envelope w-4"></i> Contato 2614 </a> 2615 </li> 2616 <li> 2617 <a href="responsavel.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2618 <i class="fas fa-user-shield w-4"></i> Responsável 2619 </a> 2620 </li> 2621 <li> 2622 <a href="anuncie-noVouF.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2623 <i class="fas fa-bullhorn w-4"></i> Anuncie no VouF 2624 </a> 2625 </li> 2626 <li> 2627 <a href="politica_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2628 <i class="fas fa-lock w-4"></i> PolÃtica de Privacidade 2629 </a> 2630 </li> 2631 <li> 2632 <a href="termos_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 2633 <i class="fas fa-file-contract w-4"></i> Termos de Uso 2634 </a> 2635 </li> 2636 </ul> 2637 </div> 2638 2639 <!-- COLUNA 4: Contato Protegido + Newsletter --> 2640 <div class="space-y-4"> 2641 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">ð¬ Contato</h4> 2642 2643 <!-- Email Protegido --> 2644 <div class="space-y-2 text-sm"> 2645 <p class="opacity-80 flex items-center gap-2"> 2646 <i class="fas fa-envelope w-4"></i>
2647 <span id="email-protected" class="select-none cursor-pointer hover:text-blue-400 transition-colors"></span> 2648 </p> 2649 2650 <!-- WhatsApp Protegido --> 2651 <p class="opacity-80 flex items-center gap-2"> 2652 <i class="fab fa-whatsapp w-4"></i> 2653 <a href="#" id="whatsapp-protected" class="hover:text-blue-400 transition-colors select-none"></a> 2654 </p> 2655 2656 <!-- Endereço --> 2657 <p class="opacity-80 flex items-start gap-2"> 2658 <i class="fas fa-map-marker-alt w-4 mt-1"></i> 2659 <span id="endereco-protected" class="select-none"></span> 2660 </p> 2661 </div> 2662 2663 <!-- Newsletter (oculto na index pois já tem formulário próprio) --> 2664 <div class="pt-4 border-t" style="border-color: #334155;"> 2665 <p class="text-xs opacity-70 mb-3">Receba novidades e dicas exclusivas:</p> 2666 <form class="newsletter-form flex gap-2"> 2667 <input type="email" placeholder="Seu e-mail" required 2668 style="background: #1e293b; border-color: #334155; color: white;" 2669 class="flex-1 px-3 py-2 rounded text-sm placeholder-opacity-50 focus:outline-none focus:border-blue-400"> 2670 <button type="submit" style="background: #3b82f6;" class="px-4 py-2 hover:bg-blue-500 text-white rounded text-sm font-medium transition"> 2671 <i class="fas fa-arrow-right"></i> 2672 </button> 2673 </form> 2674 <p class="newsletter-msg text-xs mt-2 hidden"></p> 2675 </div> 2676 </div> 2677 2678 </div> 2679 </div> 2680 2681 <!-- Barra Inferior --> 2682 <div style="background: #0a0e17;" class="border-t" data-tailwind="border-[#334155]"> 2683 <div class="max-w-7xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center gap-3 text-xs opacity-70"> 2684 <p>© 2026 <span class="text-white">VouF</span>. Todos os direitos reservados.</p> 2685 <div class="flex items-center gap-4"> 2686 <span class="flex items-center gap-1"> 2687 <i class="fas fa-lock text-green-400"></i> Conexão segura 2688 </span> 2689 <span class="flex items-center gap-1"> 2690 <i class="fas fa-cookie text-blue-400"></i> 2691 <a href="politica_vouf.php#cookies" class="hover:text-blue-400">Cookies</a> 2692 </span> 2693 </div> 2694 </div> 2695 </div> 2696</footer> 2697 2698<!-- 11. Scripts de Proteção Anti-Robô -->
2699<script> 2700document.addEventListener('DOMContentLoaded', function() { 2701 2702 // ===== NEWSLETTER UNIFICADA (footer E index) ===== 2703 document.querySelectorAll('.newsletter-form').forEach(function(form) { 2704 form.addEventListener('submit', function(e) { 2705 e.preventDefault(); 2706 2707 const emailInput = this.querySelector('input[type="email"]'); 2708 const email = emailInput.value.trim(); 2709 const msgEl = this.querySelector('.newsletter-msg'); 2710 const btn = this.querySelector('button[type="submit"]'); 2711 2712 if (!email.includes('@') || !email.includes('.')) { 2713 if (msgEl) { 2714 msgEl.textContent = 'â ï¸ Digite um e-mail válido.'; 2715 msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400'; 2716 msgEl.classList.remove('hidden'); 2717 } 2718 return; 2719 } 2720 2721 btn.disabled = true; 2722 const originalHTML = btn.innerHTML; 2723 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>'; 2724 2725 fetch('api.php', { 2726 method: 'POST', 2727 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 2728 body: 'action=newsletter_subscribe&email=' + encodeURIComponent(email) 2729 }) 2730 .then(r => r.json()) 2731 .then(data => { 2732 btn.disabled = false; 2733 btn.innerHTML = originalHTML; 2734 2735 if (msgEl) { 2736 if (data.success) { 2737 msgEl.textContent = 'â ' + data.message; 2738 msgEl.className = 'newsletter-msg text-xs mt-2 text-green-400'; 2739 emailInput.value = ''; 2740 form.reset(); 2741 } else { 2742 msgEl.textContent = 'â ï¸ ' + data.message; 2743 msgEl.className = 'newsletter-msg text-xs mt-2 text-yellow-400'; 2744 } 2745 msgEl.classList.remove('hidden'); 2746 setTimeout(() => msgEl.classList.add('hidden'), 5000); 2747 } 2748 }) 2749 .catch(err => { 2750 btn.disabled = false; 2751 btn.innerHTML = originalHTML; 2752 if (msgEl) { 2753 msgEl.textContent = 'â Erro de conexão. Tente novamente.'; 2754 msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400'; 2755 msgEl.classList.remove('hidden'); 2756 } 2757 }); 2758 }); 2759 }); 2760 2761 // ===== PROTEÃÃO DE EMAIL ===== 2762 const emailParts = ['contato', 'appvouf.com.br']; 2763 const email = emailParts[0] + '@' + emailParts[1]; 2764 const emailEl = document.getElementById('email-protected'); 2765 if(emailEl) { 2766 emailEl.textContent = email; 2767 emailEl.addEventListener('click', function(e) { 2768 e.preventDefault(); 2769 window.location.href = 'mailto:' + email; 2770 }); 2771 } 2772 2773 // ===== PROTEÃÃO DE WHATSAPP ===== 2774 const whatsappNumber = '5511999999999'; 2775 const whatsappText = encodeURIComponent('Olá! Vim pelo site VouF Games e gostaria de mais informações.'); 2776 const whatsappLink = `https://wa.me/${whatsappNumber}?text=${whatsappText}`; 2777 2778 const $whatsappLink = document.getElementById('whatsapp-protected'); 2779 const $whatsappIcon = document.getElementById('link-whatsapp-footer'); 2780 2781 function ativarWhatsApp(e) { 2782 e.preventDefault(); 2783 window.open(whatsappLink, '_blank', 'noopener,noreferrer'); 2784 } 2785 2786 if ($whatsappLink) $whatsappLink.addEventListener('click', ativarWhatsApp); 2787 if ($whatsappIcon) $whatsappIcon.addEventListener('click', ativarWhatsApp); 2788 2789 setTimeout(() => { 2790 if ($whatsappLink) $whatsappLink.textContent = 'WhatsApp'; 2791 }, 2000); 2792 2793 // ===== PROTEÃÃO DE ENDEREÃO ===== 2794 const enderecoParts = ['São Paulo', 'SP', 'Brasil']; 2795 const enderecoEl = document.getElementById('endereco-protected'); 2796 if(enderecoEl) enderecoEl.textContent = enderecoParts.join(' - '); 2797 2798 // ===== REDES SOCIAIS (links gerados via JS) ===== 2799 const socialLinks = { 2800 instagram: 'https://instagram.com/voufgames', 2801 youtube: 'https://youtube.com/@voufgames' 2802 }; 2803
2804 Object.keys(socialLinks).forEach(platform => { 2805 const el = document.getElementById(`link-${platform}-footer`); 2806 if (el) { 2807 el.addEventListener('click', function(e) { 2808 e.preventDefault(); 2809 window.open(socialLinks[platform], '_blank', 'noopener,noreferrer'); 2810 }); 2811 } 2812 }); 2813 2814 // ===== PROTEÃÃO ADICIONAL: Desabilitar seleção de texto ===== 2815 document.querySelectorAll('.select-none').forEach(el => { 2816 el.style.userSelect = 'none'; 2817 el.addEventListener('contextmenu', e => e.preventDefault()); 2818 }); 2819 2820 // ===== PROTEÃÃO: Ofuscar links institucionais ===== 2821 const contatoLink = document.getElementById('link-contato-footer'); 2822 if (contatoLink) { 2823 contatoLink.addEventListener('click', function(e) { 2824 e.preventDefault(); 2825 window.location.href = 'contato.php'; 2826 }); 2827 } 2828}); 2829</script>
2829 2830 2831<!-- 12. Estilos Adicionais (CSS Puro para garantir cores) --> 2832<style> 2833/* Cores escuras garantidas via CSS puro (compatÃvel com Tailwind v2) */ 2834footer { 2835 background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); 2836 color: #e2e8f0; 2837} 2838 2839footer .border-t { 2840 border-color: #334155 !important; 2841} 2842 2843footer a { 2844 color: #94a3b8; 2845 transition: color 0.2s, transform 0.2s; 2846} 2847 2848footer a:hover { 2849 color: #60a5fa !important; 2850 transform: translateX(2px); 2851} 2852 2853footer input { 2854 background: #1e293b !important; 2855 border-color: #334155 !important; 2856 color: white !important; 2857} 2858 2859footer input::placeholder { 2860 color: #64748b !important; 2861} 2862 2863footer input:focus { 2864 border-color: #60a5fa !important; 2865 outline: none; 2866} 2867 2868footer button[type="submit"] { 2869 background: #3b82f6 !important; 2870} 2871 2872footer button[type="submit"]:hover { 2873 background: #2563eb !important; 2874} 2875 2876footer [class*="rounded-full"]:hover { 2877 transform: translateY(-2px); 2878 box-shadow: 0 4px 12px rgba(0,0,0,0.3); 2879} 2880 2881@keyframes fadeInUp { 2882 from { opacity: 0; transform: translateY(20px); } 2883 to { opacity: 1; transform: translateY(0); } 2884} 2885 2886footer { 2887 animation: fadeInUp 0.4s ease-out; 2888} 2889 2890@media (max-width: 768px) { 2891 footer .grid { 2892 grid-template-columns: 1fr !important; 2893 text-align: center; 2894 } 2895 2896 footer .flex.items-center { 2897 justify-content: center; 2898 } 2899 2900 footer ul { 2901 text-align: left; 2902 } 2903 2904 footer [class*="rounded-full"] { 2905 margin: 0 auto; 2906 } 2907} 2908 2909.select-none { 2910 user-select: none; 2911 -webkit-user-select: none; 2912 -moz-user-select: none; 2913 -ms-user-select: none; 2914} 2915</style> 2916 2917</body> 2918</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.