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="Blog VouF Games"> 13 <meta property="og:description" content="Confira as últimas novidades, dicas de jogos, estratégias e conteúdos exclusivos no Blog do VouF Games. Aprenda enquanto se diverte!"> 14 <meta property="og:url" content="https://appvouf.com.br/blog.php"> 15 <meta property="og:image" content="https://appvouf.com.br/imagens/og/blog.jpg"> 16 <meta property="og:type" content="website"> 17 <title>Blog VouF Games</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="blog.css?v=1780454458"> 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="appboom.php" id="banner-link"> 71 <img src="imagens/banners/appboom.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 = 2; 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="Blog">Blog</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="appboom.php" class="banner-mobile-link"> 471 <img src="imagens/banners/appboom.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 Blog --> 516
516<script type="application/ld+json"> 517 { 518 "@context": "https://schema.org", 519 "@type": "Blog", 520 "name": "Blog VouF Games", 521 "description": "Dicas, estratégias e novidades sobre jogos educativos", 522 "url": "https://appvouf.com.br/blog.php", 523 "publisher": { 524 "@type": "Organization", 525 "name": "VouF Games" 526 } 527 } 528 </script>
528 529 530 <!-- Cabeçalho do Blog --> 531 <div class="max-w-5xl mx-auto px-4 py-8 text-center"> 532 <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">ð° Blog VouF Games</h1> 533 <p class="text-lg text-gray-600 max-w-2xl mx-auto"> 534 Dicas de jogos, estratégias vencedoras, novidades da plataforma e conteúdos exclusivos para você evoluir enquanto se diverte. 535 </p> 536 </div> 537 538 <!-- Grid de Posts --> 539 <div class="max-w-6xl mx-auto px-4 pb-12"> 540 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> 541 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 542 <a href="blog.php?slug=quiz_nas_escolas" class="block"> 543 <img src="imagens/uploads/blog_quiz_nas_escolas_03.png" 544 alt="Quiz VouF Acelerador do Aprendizado" 545 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 546 </a> 547 548 <div class="p-5"> 549 <!-- Categoria e Data --> 550 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 551 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 552 <span><i class="far fa-calendar mr-1"></i> 14/06/2026</span> 553 </div> 554 555 <!-- TÃtulo e Resumo --> 556 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 557 <a href="blog.php?slug=quiz_nas_escolas"> 558 Quiz VouF Acelerador do Aprendizado </a> 559 </h2> 560 561 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 562 existe um elemento frequentemente subestimado que pode revolucionar seu desenvolvimento acadêmico: o treinamento cognitivo através de jogos de raciocÃnio, estratégia e conhecimento geral. </p> 563 564 <!-- Link Leia Mais --> 565 <a href="blog.php?slug=quiz_nas_escolas" 566 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 567 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 568 </a> 569 </div> 570 </article> 571 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 572 <a href="blog.php?slug=quiz_vouf_preparacao_para_vida" class="block"> 573 <img src="imagens/uploads/blog_quiz_vouf_preparacao_para_vida_03.png" 574 alt="Quiz VouF - Mais Ãtil do Que Você Imagina" 575 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 576 </a> 577 578 <div class="p-5"> 579 <!-- Categoria e Data --> 580 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 581 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 582 <span><i class="far fa-calendar mr-1"></i> 12/06/2026</span> 583 </div> 584 585 <!-- TÃtulo e Resumo --> 586 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 587 <a href="blog.php?slug=quiz_vouf_preparacao_para_vida"> 588 Quiz VouF - Mais Ãtil do Que Você Imagina </a> 589 </h2> 590 591 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 592 </p> 593 594 <!-- Link Leia Mais --> 595 <a href="blog.php?slug=quiz_vouf_preparacao_para_vida" 596 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 597 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 598 </a> 599 </div> 600 </article> 601 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 602 <a href="blog.php?slug=conhecimento_biblico_quiz_vouf" class="block"> 603 <img src="imagens/uploads/blog_conhecimento_biblico_quiz_vouf.png" 604 alt="Reforçando o Conhecimento BÃblico com o Quiz VouF" 605 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 606 </a> 607 608 <div class="p-5"> 609 <!-- Categoria e Data --> 610 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 611 <sp
611an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Conhecimento BÃblico</span> 612 <span><i class="far fa-calendar mr-1"></i> 07/06/2026</span> 613 </div> 614 615 <!-- TÃtulo e Resumo --> 616 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 617 <a href="blog.php?slug=conhecimento_biblico_quiz_vouf"> 618 Reforçando o Conhecimento BÃblico com o Quiz VouF </a> 619 </h2> 620 621 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 622 Como o Quiz VouF pode se tornar um aliado poderoso no seu estudo bÃblico, fortalecendo sua fé e ajudando você a compreender os planos de Deus revelados através de Jesus Cristo. </p> 623 624 <!-- Link Leia Mais --> 625 <a href="blog.php?slug=conhecimento_biblico_quiz_vouf" 626 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 627 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 628 </a> 629 </div> 630 </article> 631 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 632 <a href="blog.php?slug=quiz_para_concursos" class="block"> 633 <img src="imagens/uploads/blog_quiz_para_concursos.png" 634 alt="Quiz como Aliado na Preparação para Concursos" 635 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 636 </a> 637 638 <div class="p-5"> 639 <!-- Categoria e Data --> 640 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 641 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 642 <span><i class="far fa-calendar mr-1"></i> 02/06/2026</span> 643 </div> 644 645 <!-- TÃtulo e Resumo --> 646 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 647 <a href="blog.php?slug=quiz_para_concursos"> 648 Quiz como Aliado na Preparação para Concursos </a> 649 </h2> 650 651 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 652 Como transformar o hábito de jogar no quiz do VouF Games em uma ferramenta poderosa de aprovação. </p> 653 654 <!-- Link Leia Mais --> 655 <a href="blog.php?slug=quiz_para_concursos" 656 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 657 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 658 </a> 659 </div> 660 </article> 661 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 662 <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional" class="block"> 663 <img src="imagens/uploads/blog_Quiz_VouF_Orientacao_Vocacional.png" 664 alt=" O Quiz Como Espelho Vocacional" 665 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 666 </a> 667 668 <div class="p-5"> 669 <!-- Categoria e Data --> 670 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 671 <sp
671an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Comportamento</span> 672 <span><i class="far fa-calendar mr-1"></i> 01/06/2026</span> 673 </div> 674 675 <!-- TÃtulo e Resumo --> 676 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 677 <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional"> 678 O Quiz Como Espelho Vocacional </a> 679 </h2> 680 681 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 682 Descobrindo Sua Trajetória Profissional Através do Conhecimento </p> 683 684 <!-- Link Leia Mais --> 685 <a href="blog.php?slug=Quiz_VouF_Orientacao_Vocacional" 686 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 687 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 688 </a> 689 </div> 690 </article> 691 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 692 <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes" class="block"> 693 <img src="imagens/uploads/blog_Mente_em_Desenvolvimento_Estudos_Distracoes.png" 694 alt="A Era Digital e a Mente em Desenvolvimento" 695 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 696 </a> 697 698 <div class="p-5"> 699 <!-- Categoria e Data --> 700 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 701 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 702 <span><i class="far fa-calendar mr-1"></i> 31/05/2026</span> 703 </div> 704 705 <!-- TÃtulo e Resumo --> 706 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 707 <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes"> 708 A Era Digital e a Mente em Desenvolvimento </a> 709 </h2> 710 711 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 712 A tecnologia pode ser o maior acelerador cognitivo que já conhecemos ou o principal sabotador do desenvolvimento cerebral. A diferença reside inteiramente na intenção de uso e na qualidade do conteúdo consumido. </p> 713 714 <!-- Link Leia Mais --> 715 <a href="blog.php?slug=Mente_em_Desenvolvimento_Estudos_Distracoes" 716 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 717 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 718 </a> 719 </div> 720 </article> 721 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 722 <a href="blog.php?slug=estudar_questionario_VouF_aprendizado" class="block"> 723 <img src="imagens/uploads/blog_estudar_questionario_VouF_aprendizado.png" 724 alt="Reforçando o aprendizado com questionários" 725 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 726 </a> 727 728 <div class="p-5"> 729 <!-- Categoria e Data --> 730 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 731 <sp
731an class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 732 <span><i class="far fa-calendar mr-1"></i> 31/05/2026</span> 733 </div> 734 735 <!-- TÃtulo e Resumo --> 736 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 737 <a href="blog.php?slug=estudar_questionario_VouF_aprendizado"> 738 Reforçando o aprendizado com questionários </a> 739 </h2> 740 741 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 742 Descubra como os quizzes estratégicos podem transformar sua preparação acadêmica e potencializar sua memória de longo prazo </p> 743 744 <!-- Link Leia Mais --> 745 <a href="blog.php?slug=estudar_questionario_VouF_aprendizado" 746 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 747 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 748 </a> 749 </div> 750 </article> 751 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 752 <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos" class="block"> 753 <img src="imagens/uploads/blog_beneficios_Jogos_VouF_Games_Estudos.png" 754 alt="Transforme sua Rotina de Estudos" 755 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 756 </a> 757 758 <div class="p-5"> 759 <!-- Categoria e Data --> 760 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 761 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Educação</span> 762 <span><i class="far fa-calendar mr-1"></i> 29/05/2026</span> 763 </div> 764 765 <!-- TÃtulo e Resumo --> 766 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 767 <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos"> 768 Transforme sua Rotina de Estudos </a> 769 </h2> 770 771 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 772 Descubra, com a psicopedagoga Dra. Eleonora, como cada jogo do VouF pode potencializar seu aprendizado de forma leve e eficaz. </p> 773 774 <!-- Link Leia Mais --> 775 <a href="blog.php?slug=beneficios_Jogos_VouF_Games_Estudos" 776 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 777 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 778 </a> 779 </div> 780 </article> 781 <article class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow group"> 782 <a href="blog.php?slug=bem-vindo-vouf-games" class="block"> 783 <img src="imagens/uploads/img_6a18f46cadfd3.png"
784 alt="Bem-vindo a sua Nova Jornada de Conhecimento!" 785 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"> 786 </a> 787 788 <div class="p-5"> 789 <!-- Categoria e Data --> 790 <div class="flex items-center gap-3 text-xs text-gray-500 mb-3"> 791 <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded">Apresentação</span> 792 <span><i class="far fa-calendar mr-1"></i> 28/05/2026</span> 793 </div> 794 795 <!-- TÃtulo e Resumo --> 796 <h2 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors"> 797 <a href="blog.php?slug=bem-vindo-vouf-games"> 798 Bem-vindo a sua Nova Jornada de Conhecimento! </a> 799 </h2> 800 801 <p class="text-gray-600 text-sm mb-4 line-clamp-3"> 802 Conheça o VouF Games: jogos educativos, ranking, material de estudos e uma comunidade que aprende brincando. </p> 803 804 <!-- Link Leia Mais --> 805 <a href="blog.php?slug=bem-vindo-vouf-games" 806 class="inline-flex items-center text-blue-600 font-medium text-sm hover:underline"> 807 Ler mais <i class="fas fa-arrow-right ml-1 text-xs"></i> 808 </a> 809 </div> 810 </article> 811 </div> 812 813 <!-- Paginação --> 814 </div> 815 816 <!-- CTA para Newsletter (opcional) --> 817 <div class="bg-blue-50 border-t border-blue-200 py-12"> 818 <div class="max-w-3xl mx-auto px-4 text-center"> 819 <h3 class="text-xl font-bold text-gray-900 mb-3">ð§ Receba novidades no seu email</h3> 820 <p class="text-gray-600 mb-6">Cadastre-se para receber dicas exclusivas e ser o primeiro a saber das novidades.</p> 821 <form class="newsletter-form flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> 822 <input type="email" placeholder="Seu melhor email" required 823 class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> 824 <button type="submit" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition"> 825 Assinar 826 </button> 827 </form> 828<p class="newsletter-msg text-xs mt-2 hidden"> 829<p class="newsletter-msg text-xs mt-3 text-neon-secondary">Ao assinar, você concorda com nossa <a href="politica_vouf.php" target="_blank" title="Ver polÃticas numa nova janela">PolÃtica de Privacidade</a>.</p> 830 831 </div> 832 </div> 833 834  835<!-- 1. Sons condicionais (apenas para jogos) --> 836 837</main> <!-- Fecha container aberto no header.php --> 838 839<!-- 2. Botão Flutuante do Telegram (apenas para afiliados) --> 840 841<!-- 3. Páginas de exibição de anúncio do a-ads --> 842 <div class="w-full px-4 sm:px-6 lg:px-8 text-center items-center my-3"> 843 <div class="inline-block max-w-[320px]"> 844 <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> 845 </div> 846 </div> 847 848<!-- ================= MODAL DE MENSAGEM GLOBAL (PADRÃO DO SITE) ================= --> 849<div id="modal-mensagem" class="modal-global hidden" role="dialog" aria-modal="true" aria-labelledby="modal-titulo"> 850 <!-- Overlay escuro 80% --> 851 <div id="modal-fundo" class="modal-overlay"></div> 852 853 <!-- Container externo (borda animada) --> 854 <div id="modal-conteudo" class="modal-content"> 855 <!-- Conteúdo interno (fundo sólido) --> 856 <div class="modal-inner"> 857 <!-- Header --> 858 <div class="modal-header-custom"> 859 <div id="modal-icone" class="modal-icon"></div> 860 <h3 id="modal-titulo" class="modal-title"></h3> 861 <button onclick="fecharModalMensagem()" class="modal-close-btn" aria-label="Fechar"> 862 <i class="fas fa-times"></i> 863 </button> 864 </div> 865 866 <!-- Body --> 867 <div class="modal-body-custom"> 868 <p id="modal-mensagem-texto" class="modal-text"></p> 869 </div> 870
871 <!-- Footer com botões --> 872 <div id="modal-botoes" class="modal-footer-custom"></div> 873 </div> 874 </div> 875</div> 876 877<!-- Ãudio de notificação (som curto e suave) --> 878<audio id="modal-sound" preload="auto" style="display:none;"> 879 <source src="sons/notificacao.mp3" type="audio/mpeg"> 880</audio> 881 882<style> 883/* ================= MODAL GLOBAL - BORDA E SOMBRA GRADIENTE ANIMADO ================= */ 884 885/* Overlay escuro 80% */ 886.modal-overlay { 887 position: fixed; 888 inset: 0; 889 background: rgba(0, 0, 0, 0.8); 890 backdrop-filter: blur(4px); 891 z-index: 9998; 892 opacity: 0; 893 transition: opacity 0.3s ease; 894} 895 896.modal-global:not(.hidden) .modal-overlay { 897 opacity: 1; 898} 899 900/* Container externo do modal - responsável pela animação */ 901.modal-content { 902 position: fixed; 903 top: 50%; 904 left: 50%; 905 transform: translate(-50%, -50%) scale(0.7); 906 width: 420px; 907 max-width: 90%; 908 z-index: 9999; 909 opacity: 0; 910 transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 911 border-radius: 1rem; 912 /* Truque: padding cria espaço para a borda animada */ 913 padding: 5px; 914 background: conic-gradient( 915 from 0deg, 916 #ff0080, #ff8c00, #ffd700, #00ff7f, 917 #00bfff, #4169e1, #8a2be2, #ff1493, 918 #ff0080 919 ); 920 background-size: 100% 100%; 921 animation: rotateGradient 4s linear infinite; 922 /* Sombra com glow colorido */ 923 filter: drop-shadow(0 0 15px rgba(255, 0, 128, 0.5)) 924 drop-shadow(0 0 30px rgba(0, 191, 255, 0.3)); 925} 926 927.modal-global:not(.hidden) .modal-content { 928 opacity: 1; 929 transform: translate(-50%, -50%) scale(1); 930} 931 932/* Rotação do gradiente */ 933@keyframes rotateGradient { 934 0% { 935 background: conic-gradient( 936 from 0deg, 937 #ff0080, #ff8c00, #ffd700, #00ff7f, 938 #00bfff, #4169e1, #8a2be2, #ff1493, 939 #ff0080 940 ); 941 } 942 25% { 943 background: conic-gradient( 944 from 90deg, 945 #ff0080, #ff8c00, #ffd700, #00ff7f, 946 #00bfff, #4169e1, #8a2be2, #ff1493, 947 #ff0080 948 ); 949 } 950 50% { 951 background: conic-gradient( 952 from 180deg, 953 #ff0080, #ff8c00, #ffd700, #00ff7f, 954 #00bfff, #4169e1, #8a2be2, #ff1493, 955 #ff0080 956 ); 957 } 958 75% { 959 background: conic-gradient( 960 from 270deg, 961 #ff0080, #ff8c00, #ffd700, #00ff7f, 962 #00bfff, #4169e1, #8a2be2, #ff1493, 963 #ff0080 964 ); 965 } 966 100% { 967 background: conic-gradient( 968 from 360deg, 969 #ff0080, #ff8c00, #ffd700, #00ff7f, 970 #00bfff, #4169e1, #8a2be2, #ff1493, 971 #ff0080 972 ); 973 } 974} 975 976/* Conteúdo interno do modal - fundo sólido por cima da borda */ 977.modal-inner { 978 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 979 border-radius: calc(1rem - 3px); 980 overflow: hidden; 981 position: relative; 982} 983 984/* Header do modal */ 985.modal-header-custom { 986 display: flex; 987 align-items: center; 988 gap: 1rem; 989 padding: 1.25rem; 990 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 991} 992 993.modal-icon { 994 font-size: 2rem; 995 flex-shrink: 0; 996 animation: iconBounce 0.6s ease-out; 997} 998 999@keyframes iconBounce { 1000 0% { transform: scale(0); } 1001 50% { transform: scale(1.2); } 1002 100% { transform: scale(1); } 1003} 1004 1005.modal-title { 1006 flex: 1; 1007 font-size: 1.125rem; 1008 font-weight: 700; 1009 color: #e2e8f0; 1010 margin: 0; 1011} 1012 1013.modal-close-btn { 1014 background: rgba(255, 255, 255, 0.1); 1015 border: none; 1016 color: #94a3b8; 1017 width: 32px; 1018 height: 32px; 1019 border-radius: 50%; 1020 cursor: pointer; 1021 transition: all 0.2s; 1022 display: flex; 1023 align-items: center; 1024 justify-content: center; 1025 flex-shrink: 0; 1026} 1027 1028.modal-close-btn:hover { 1029 background: rgba(248, 113, 113, 0.2); 1030 color: #f87171; 1031 transform: rotate(90deg); 1032} 1033 1034/* Body do modal */ 1035.modal-body-custom { 1036 padding: 1.25rem; 1037} 1038 1039.modal-text { 1040 color: #cbd5e1; 1041 font-size: 0.95rem; 1042 line-height: 1.6; 1043 margin: 0; 1044 text-align: center; 1045} 1046 1047/* Footer do modal */ 1048.modal-footer-custom { 1049 display: flex; 1050 gap: 0.75rem; 1051 padding: 1rem 1.25rem; 1052 border-top: 1px solid rgba(255, 255, 255, 0.1); 1053 flex-wrap: wrap; 1054} 1055 1056.modal-footer-custom button { 1057 flex: 1; 1058 min-width: 100px; 1059 padding: 0.75rem 1rem; 1060 border-radius: 0.5rem; 1061 font-weight: 600; 1062 font-size: 0.9rem; 1063 cursor: pointer; 1064 transition: all 0.3s; 1065 border: none; 1066 color: white; 1067} 1068 1069/* ===== CORES POR TIPO DE MENSAGEM ===== */ 1070/* Cada tipo ajusta a cor do Ãcone e do botão principal */ 1071 1072.modal-global.tipo-sucesso .modal-icon { color: #34d399; } 1073.modal-global.tipo-sucesso .modal-footer-custom button:first-child { 1074 background: linear-gradient(135deg, #34d399, #059669); 1075} 1076.modal-global.tipo-sucesso .modal-content { 1077 filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.6)) 1078 drop-shadow(0 0 30px rgba(16, 185, 129, 0.4)); 1079} 1080 1081.modal-global.tipo-erro .modal-icon { color: #f87171; } 1082.modal-global.tipo-erro .modal-footer-custom button:first-child { 1083 background: linear-gradient(135deg, #f87171, #dc2626); 1084} 1085.modal-global.tipo-erro .modal-content { 1086 filter: drop-shadow(0 0 15px rgba(248, 113, 113, 0.6)) 1087 drop-shadow(0 0 30px rgba(220, 38, 38, 0.4)); 1088} 1089 1090.modal-global.tipo-alerta .modal-icon { color: #fbbf24; } 1091.modal-global.tipo-alerta .modal-footer-custom button:first-child { 1092 background: linear-gradient(135deg, #fbbf24, #f59e0b); 1093 color: #1e293b; 1094} 1095.modal-global.tipo-alerta .modal-content { 1096 filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6)) 1097 drop-shadow(0 0 30px rgba(245, 158, 11, 0.4)); 1098} 1099 1100.modal-global.tipo-info .modal-icon { color: #60a5fa; } 1101.modal-global.tipo-info .modal-footer-custom button:first-child { 1102 background: linear-gradient(135deg, #60a5fa, #3b82f6); 1103} 1104.modal-global.tipo-info .modal-content { 1105 filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.6)) 1106 drop-shadow(0 0 30px rgba(59, 130, 246, 0.4)); 1107} 1108 1109.modal-global.tipo-pergunta .modal-icon { color: #a78bfa; } 1110.modal-global.tipo-pergunta .modal-footer-custom button:first-child { 1111 background: linear-gradient(135deg, #a78bfa, #8b5cf6); 1112} 1113.modal-global.tipo-pergunta .modal-content { 1114 filter: drop-shadow(0 0 15px rgba(167, 139, 250, 0.6)) 1115 drop-shadow(0 0 30px rgba(139, 92, 246, 0.4)); 1116} 1117
1118.modal-global.tipo-vencedor .modal-icon { color: #fbbf24; } 1119.modal-global.tipo-vencedor .modal-footer-custom button:first-child { 1120 background: linear-gradient(135deg, #fbbf24, #f59e0b); 1121 color: #1e293b; 1122} 1123.modal-global.tipo-vencedor .modal-content { 1124 filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)) 1125 drop-shadow(0 0 40px rgba(245, 158, 11, 0.5)); 1126 animation: rotateGradient 2s linear infinite, pulseGlow 1.5s ease-in-out infinite; 1127} 1128 1129@keyframes pulseGlow { 1130 0%, 100% { 1131 filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.8)) 1132 drop-shadow(0 0 40px rgba(245, 158, 11, 0.5)); 1133 } 1134 50% { 1135 filter: drop-shadow(0 0 30px rgba(251, 191, 36, 1)) 1136 drop-shadow(0 0 60px rgba(245, 158, 11, 0.8)); 1137 } 1138} 1139 1140/* Botão secundário */ 1141.modal-footer-custom button:last-child { 1142 background: rgba(255, 255, 255, 0.1); 1143 color: #cbd5e1; 1144} 1145 1146.modal-footer-custom button:last-child:hover { 1147 background: rgba(255, 255, 255, 0.2); 1148} 1149 1150/* Animação de entrada */ 1151@keyframes modalSlideIn { 1152 0% { 1153 opacity: 0; 1154 transform: translate(-50%, -60%) scale(0.8); 1155 } 1156 100% { 1157 opacity: 1; 1158 transform: translate(-50%, -50%) scale(1); 1159 } 1160} 1161 1162.modal-global:not(.hidden) .modal-content { 1163 animation: rotateGradient 4s linear infinite, modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1164} 1165 1166/* Responsivo */ 1167@media (max-width: 480px) { 1168 .modal-content { 1169 width: 95%; 1170 max-width: 95%; 1171 } 1172 .modal-footer-custom { 1173 flex-direction: column; 1174 } 1175 .modal-footer-custom button { 1176 width: 100%; 1177 } 1178} 1179 1180/* Acessibilidade: foco visÃvel */ 1181.modal-close-btn:focus, 1182.modal-footer-custom button:focus { 1183 outline: 2px solid #60a5fa; 1184 outline-offset: 2px; 1185} 1186 1187/* Bloqueia scroll do body quando modal aberto */ 1188body.modal-open { 1189 overflow: hidden; 1190} 1191</style> 1192 1193<!-- 5. Notificação de Diamantes Diários --> 1194 1195<!-- 6. Estilos de Animação --> 1196<style> 1197 @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 1198 .animate-fade-in { animation: fadeIn 0.5s ease-out; } 1199</style> 1200 1201 1202<!-- 7. Scripts Globais -->
1203<script> 1204// ================= SISTEMA DE MODAL GLOBAL ================= 1205(function() { 1206 'use strict'; 1207 1208 // Token de segurança para validar chamadas 1209 const MODAL_SECRET = 'vouf_modal_' + Math.random().toString(36).substr(2, 9); 1210 window.__MODAL_SECRET = MODAL_SECRET; 1211 1212 // Histórico de modais (previne spam) 1213 let modalHistory = []; 1214 const MAX_MODALS_PER_MINUTE = 10; 1215 1216 // Som de notificação (Web Audio API como fallback) 1217 function playNotificationSound() { 1218 try { 1219 // Tenta usar o arquivo de áudio 1220 const audio = document.getElementById('modal-sound'); 1221 if (audio) { 1222 audio.currentTime = 0; 1223 audio.volume = 0.3; 1224 const playPromise = audio.play(); 1225 if (playPromise !== undefined) { 1226 playPromise.catch(() => { 1227 // Fallback: gera som via Web Audio API 1228 generateBeep(); 1229 }); 1230 } 1231 } else { 1232 generateBeep(); 1233 } 1234 } catch (e) { 1235 generateBeep(); 1236 } 1237 } 1238 1239 // Gera beep via Web Audio API 1240 function generateBeep() { 1241 try { 1242 const audioContext = new (window.AudioContext || window.webkitAudioContext)(); 1243 const oscillator = audioContext.createOscillator(); 1244 const gainNode = audioContext.createGain(); 1245 1246 oscillator.connect(gainNode); 1247 gainNode.connect(audioContext.destination); 1248 1249 oscillator.frequency.value = 800; 1250 oscillator.type = 'sine'; 1251 1252 gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); 1253 gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3); 1254 1255 oscillator.start(audioContext.currentTime); 1256 oscillator.stop(audioContext.currentTime + 0.3); 1257 } catch (e) { 1258 // Silenciosamente falha se Web Audio não disponÃvel 1259 } 1260 } 1261 1262 // Valida chamada do modal (segurança) 1263 function validateModalCall(config) { 1264 // Rate limiting 1265 const now = Date.now(); 1266 modalHistory = modalHistory.filter(t => now - t < 60000); 1267 1268 if (modalHistory.length >= MAX_MODALS_PER_MINUTE) { 1269 console.warn('Modal rate limit exceeded'); 1270 return false; 1271 } 1272 1273 // Valida estrutura 1274 if (!config || typeof config !== 'object') return false; 1275 if (config.mensagem === undefined) return false; 1276 1277 // Sanitiza inputs 1278 if (typeof config.titulo !== 'string') config.titulo = ''; 1279 if (typeof config.mensagem !== 'string') config.mensagem = String(config.mensagem); 1280 if (typeof config.tipo !== 'string') config.tipo = 'info'; 1281 1282 // Lista branca de tipos 1283 const tiposValidos = ['sucesso', 'erro', 'alerta', 'info', 'pergunta', 'vencedor', 'aguarde']; 1284 if (!tiposValidos.includes(config.tipo)) config.tipo = 'info'; 1285 1286 // Limita tamanho 1287 config.titulo = config.titulo.substring(0, 100); 1288 config.mensagem = config.mensagem.substring(0, 1000); 1289 1290 modalHistory.push(now); 1291 return true; 1292 } 1293 1294 // Ãcones por tipo 1295 const icones = { 1296 'sucesso': 'â ', 1297 'erro': 'â', 1298 'alerta': 'â ï¸', 1299 'info': 'â¹ï¸', 1300 'pergunta': 'â', 1301 'aguarde': 'â³', 1302 'vencedor': 'ð' 1303 }; 1304 1305 // Função global exibirMensagem 1306 window.exibirMensagem = function(config) { 1307 // Validação de segurança 1308 if (!validateModalCall(config)) return; 1309 1310 const modal = document.getElementById('modal-mensagem'); 1311 const titulo = document.getElementById('modal-titulo'); 1312 const mensagem = document.getElementById('modal-mensagem-texto'); 1313 const icone = document.getElementById('modal-icone'); 1314 const botoes = document.getElementById('modal-botoes'); 1315 1316 if (!modal || !titulo || !mensagem || !icone || !botoes) return; 1317 1318 // Remove classes de tipo anteriores 1319 modal.className = 'modal-global hidden'; 1320 1321 // Adiciona classe de tipo 1322 modal.classList.add('tipo-' + config.tipo); 1323 1324 // Preenche conteúdo (com sanitização) 1325 titulo.textContent = config.titulo || ''; 1326 mensagem.textContent = config.mensagem || ''; 1327 icone.textContent = icones[config.tipo] || 'ð¢'; 1328 1329 // Limpa botões 1330 botoes.innerHTML = ''; 1331 1332 // Cria botão principal 1333 const btn1 = document.createElement('button'); 1334 btn1.textContent = config.btn1Texto || 'OK'; 1335 btn1.setAttribute('aria-label', config.btn1Texto || 'OK'); 1336 btn1.onclick = function() { 1337 if (typeof config.btn1Acao === 'function') { 1338 try { 1339 config.btn1Acao(); 1340 } catch (e) { 1341 console.error('Erro no callback do modal:', e); 1342 } 1343 } 1344 fecharModalMensagem(); 1345 }; 1346 botoes.appendChild(btn1); 1347 1348 // Cria botão secundário 1349 if (config.btn2Texto) { 1350 const btn2 = document.createElement('button'); 1351 btn2.textContent = config.btn2Texto; 1352 btn2.setAttribute('aria-label', config.btn2Texto); 1353 btn2.onclick = function() { 1354 if (typeof config.btn2Acao === 'function') { 1355 try { 1356 config.btn2Acao(); 1357 } catch (e) { 1358 console.error('Erro no callback secundário:', e); 1359 } 1360 } 1361 fecharModalMensagem(); 1362 }; 1363 botoes.appendChild(btn2); 1364 } 1365 1366 // Mostra modal 1367 modal.classList.remove('hidden'); 1368 document.body.classList.add('modal-open'); 1369 1370 // Toca som 1371 playNotificationSound(); 1372 1373 // Foco no botão principal (acessibilidade) 1374 setTimeout(() => btn1.focus(), 100); 1375 1376 // Bloqueia fechamento se configurado 1377 const fundo = document.getElementById('modal-fundo'); 1378 if (fundo) {
1379 if (config.fecharAoClicarFora === false) { 1380 fundo.onclick = null; 1381 } else { 1382 fundo.onclick = fecharModalMensagem; 1383 } 1384 } 1385 }; 1386 1387 // Função global fecharModalMensagem 1388 window.fecharModalMensagem = function() { 1389 const modal = document.getElementById('modal-mensagem'); 1390 if (modal) { 1391 modal.classList.add('hidden'); 1392 document.body.classList.remove('modal-open'); 1393 } 1394 }; 1395 1396 // Eventos globais 1397 document.addEventListener('keydown', function(e) { 1398 if (e.key === 'Escape') { 1399 const modal = document.getElementById('modal-mensagem'); 1400 if (modal && !modal.classList.contains('hidden')) { 1401 const fundo = document.getElementById('modal-fundo'); 1402 if (fundo && fundo.onclick === fecharModalMensagem) { 1403 fecharModalMensagem(); 1404 } 1405 } 1406 } 1407 }); 1408 1409 // Previne manipulação direta do DOM 1410 Object.defineProperty(window, 'exibirMensagem', { 1411 writable: false, 1412 configurable: false 1413 }); 1414 1415 Object.defineProperty(window, 'fecharModalMensagem', { 1416 writable: false, 1417 configurable: false 1418 }); 1419 1420})(); 1421</script>
vendor: 1 bytes, line 1421
1421
1422<script> 1423/* 1424// ================= FUNÃÃES DE MODAL ================= 1425function exibirMensagem(config) { 1426 const modal = document.getElementById('modal-mensagem'); 1427 const titulo = document.getElementById('modal-titulo'); 1428 const mensagem = document.getElementById('modal-mensagem-texto'); 1429 const icone = document.getElementById('modal-icone'); 1430 const botoes = document.getElementById('modal-botoes'); 1431 const fundo = document.getElementById('modal-fundo'); 1432 1433 botoes.innerHTML = ''; 1434 titulo.textContent = config.titulo || ''; 1435 mensagem.textContent = config.mensagem; 1436 1437 const icones = { 1438 'sucesso': 'â ', 'erro': 'â', 'alerta': 'â ï¸', 1439 'pergunta': 'â', 'info': 'â¹ï¸', 'aguarde': '', 'vencedor': 'ð' 1440 }; 1441 icone.innerHTML = icones[config.tipo] || 'ð¢'; 1442 1443 const btn1 = document.createElement('button'); 1444 btn1.textContent = config.btn1Texto || 'OK'; 1445 btn1.className = `px-4 py-2 rounded font-medium text-white transition ${ 1446 config.tipo === 'erro' ? 'bg-red-600 hover:bg-red-700' : 1447 config.tipo === 'sucesso' ? 'bg-green-600 hover:bg-green-700' : 1448 'bg-blue-600 hover:bg-blue-700' 1449 }`; 1450 btn1.onclick = () => { if(config.btn1Acao) config.btn1Acao(); fecharModalMensagem(); }; 1451 botoes.appendChild(btn1); 1452 1453 if(config.btn2Texto) { 1454 const btn2 = document.createElement('button'); 1455 btn2.textContent = config.btn2Texto; 1456 btn2.className = 'px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded font-medium transition'; 1457 btn2.onclick = () => { if(config.btn2Acao) config.btn2Acao(); fecharModalMensagem(); }; 1458 botoes.appendChild(btn2); 1459 } 1460 1461 modal.classList.remove('hidden'); 1462 document.body.style.overflow = 'hidden'; 1463 fundo.onclick = null; 1464 if(config.fecharAoClicarFora !== false) fundo.onclick = fecharModalMensagem; 1465} 1466 1467function fecharModalMensagem() { 1468 document.getElementById('modal-mensagem').classList.add('hidden'); 1469 document.body.style.overflow = 'auto'; 1470} 1471 1472document.getElementById('modal-conteudo')?.addEventListener('click', e => e.stopPropagation()); 1473document.addEventListener('keydown', e => { 1474 if(e.key === 'Escape') { 1475 const modal = document.getElementById('modal-mensagem'); 1476 const fundo = document.getElementById('modal-fundo'); 1477 if(!modal.classList.contains('hidden') && fundo.onclick === fecharModalMensagem) { 1478 fecharModalMensagem(); 1479 } 1480 } 1481}); 1482*/ 1483// ================= MENU MOBILE E DROPDOWN DESKTOP ================= 1484document.addEventListener('DOMContentLoaded', function() { 1485 const toggleBtn = document.getElementById('mobile-menu-toggle'); 1486 const closeBtn = document.getElementById('mobile-menu-close'); 1487 const overlay = document.getElementById('mobile-menu-overlay'); 1488 const panel = document.getElementById('mobile-menu-panel'); 1489 1490 function openMenu() { 1491 if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'true'); 1492 if(overlay) overlay.setAttribute('data-state', 'open'); 1493 if(panel) panel.setAttribute('data-state', 'open'); 1494 document.body.style.overflow = 'hidden'; 1495 } 1496 1497 function closeMenu() { 1498 if(toggleBtn) toggleBtn.setAttribute('aria-expanded', 'false'); 1499 if(overlay) overlay.setAttribute('data-state', 'closed'); 1500 if(panel) panel.setAttribute('data-state', 'closed'); 1501 document.body.style.overflow = ''; 1502 } 1503 1504 toggleBtn?.addEventListener('click', openMenu); 1505 closeBtn?.addEventListener('click', closeMenu); 1506 overlay?.addEventListener('click', closeMenu); 1507 document.addEventListener('keydown', e => { if(e.key === 'Escape') closeMenu(); }); 1508 1509 document.querySelectorAll('.mobile-accordion-header').forEach(header => { 1510 header.addEventListener('click', function(e) { 1511 e.stopPropagation(); 1512 const contentId = this.getAttribute('aria-controls'); 1513 const content = contentId ? document.getElementById(contentId) : null; 1514 if(!content) return; 1515 1516 const isExpanded = this.getAttribute('aria-expanded') === 'true'; 1517 1518 document.querySelectorAll('.mobile-accordion-header').forEach(h => { 1519 h.setAttribute('aria-expanded', 'false'); 1520 const cId = h.getAttribute('aria-controls'); 1521 if(cId) { 1522 const c = document.getElementById(cId); 1523 if(c) { 1524 c.setAttribute('aria-hidden', 'true'); 1525 c.style.maxHeight = '0'; 1526 } 1527 } 1528 }); 1529 1530 if(!isExpanded) { 1531 this.setAttribute('aria-expanded', 'true'); 1532 content.setAttribute('aria-hidden', 'false'); 1533 content.style.maxHeight = content.scrollHeight + 'px'; 1534 } 1535 }); 1536 }); 1537}); 1538 1539// ================= NOTIFICAÃÃO DE DIAMANTES ================= 1540setTimeout(function() { 1541 const notification = document.getElementById('diamonds-notification'); 1542 if (notification) { 1543 notification.classList.add('animate-fade-out'); 1544 setTimeout(() => notification.remove(), 500); 1545 } 1546}, 5000); 1547 1548// ================= SERVICE WORKER (PWA) ================= 1549if('serviceWorker' in navigator) { 1550 navigator.serviceWorker.register('/service-worker.js') 1551 .then(reg => console.log('SW registrado:', reg)) 1552 .catch(err => console.log('Erro ao registrar SW:', err)); 1553} 1554 1555// ================= NOTIFICAÃÃES INTERNAS ================= 1556document.addEventListener('DOMContentLoaded', function() { 1557 const btnNotificacoes = document.getElementById('btn-notificacoes'); 1558 const dropdown = document.getElementById('dropdown-notificacoes'); 1559 const lista = document.getElementById('lista-notificacoes'); 1560 const badge = document.getElementById('badge-notificacoes'); 1561 1562 if(!btnNotificacoes) return; 1563 1564 function carregarNotificacoes() { 1565 fetch('notificacoes.php?action=listar') 1566 .then(r => r.json()) 1567 .then(data => { 1568 if(data.success) {
1569 if(data.nao_lidas > 0) { 1570 badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas; 1571 badge.classList.remove('hidden'); 1572 } else { 1573 badge.classList.add('hidden'); 1574 } 1575 1576 if(data.notificacoes.length === 0) { 1577 lista.innerHTML = '<div class="p-4 text-center text-gray-500 text-sm">Nenhuma notificação</div>'; 1578 return; 1579 } 1580 1581 lista.innerHTML = data.notificacoes.map(n => { 1582 const classes = n.lida ? 'opacity-70' : 'bg-blue-50'; 1583 const linkHtml = n.link ? '<span class="text-xs text-blue-600 mt-1 block">Ver mais â</span>' : ''; 1584 1585 return `<div class="p-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer ${classes}" 1586 data-id="${n.id}" data-link="${n.link || ''}"> 1587 <div class="flex justify-between items-start"> 1588 <h5 class="font-semibold text-sm text-gray-800">${n.titulo}</h5> 1589 <span class="text-xs text-gray-400">${n.data}</span> 1590 </div> 1591 <p class="text-xs text-gray-600 mt-1">${n.mensagem}</p> 1592 ${linkHtml} 1593 </div>`; 1594 }).join(''); 1595 1596 lista.querySelectorAll('[data-id]').forEach(item => { 1597 item.onclick = function() { 1598 const id = this.dataset.id; 1599 const link = this.dataset.link; 1600 1601 fetch('notificacoes.php', { 1602 method: 'POST', 1603 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 1604 body: 'action=marcar_lida&id=' + id 1605 }); 1606 1607 if(!this.classList.contains('opacity-70')) { 1608 const total = parseInt(badge.textContent) || 0; 1609 if(total <= 1) badge.classList.add('hidden'); 1610 else badge.textContent = total - 1; 1611 this.classList.add('opacity-70'); 1612 } 1613 1614 if(link) window.location.href = link; 1615 }; 1616 }); 1617 } 1618 }); 1619 } 1620 1621 btnNotificacoes.onclick = function(e) { 1622 e.stopPropagation(); 1623 dropdown.classList.toggle('hidden'); 1624 if(!dropdown.classList.contains('hidden')) carregarNotificacoes(); 1625 }; 1626 1627 document.addEventListener('click', function(e) { 1628 if(!btnNotificacoes.contains(e.target) && !dropdown.contains(e.target)) { 1629 dropdown.classList.add('hidden'); 1630 } 1631 }); 1632 1633 document.getElementById('btn-marcar-todas')?.addEventListener('click', function(e) { 1634 e.preventDefault(); 1635 fetch('notificacoes.php', { 1636 method: 'POST', 1637 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 1638 body: 'action=marcar_todas_lidas' 1639 }).then(() => { 1640 badge.classList.add('hidden'); 1641 lista.querySelectorAll('[data-id]').forEach(i => i.classList.add('opacity-70')); 1642 }); 1643 }); 1644 1645 setInterval(() => { 1646 if(!dropdown.classList.contains('hidden')) carregarNotificacoes(); 1647 else { 1648 fetch('notificacoes.php?action=listar') 1649 .then(r => r.json()) 1650 .then(data => { 1651 if(data.success && data.nao_lidas > 0) { 1652 badge.textContent = data.nao_lidas > 99 ? '99+' : data.nao_lidas; 1653 badge.classList.remove('hidden'); 1654 } 1655 }); 1656 } 1657 }, 60000); 1658}); 1659 1660// ================= DROPDOWN ESTUDOS - INTERATIVIDADE ================= 1661$(document).ready(function() { 1662 $('.estudos-item[data-target]').on('click', function(e) { 1663 e.preventDefault(); 1664 e.stopPropagation(); 1665 1666 const targetId = $(this).data('target'); 1667 const $submenu = $('#' + targetId); 1668 const $parent = $(this); 1669 1670 $parent.siblings('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 1671 $parent.siblings('.estudos-item').removeClass('active'); 1672 1673 $submenu.toggleClass('hidden'); 1674 $parent.toggleClass('active'); 1675 1676 if ($submenu.hasClass('hidden')) { 1677 $submenu.find('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 1678 $submenu.find('.estudos-item').removeClass('active'); 1679 } 1680 }); 1681 1682 $('.estudos-estudos-list').prev('.estudos-item').on('click', function(e) { 1683 e.preventDefault(); 1684 e.stopPropagation(); 1685 1686 const targetId = $(this).data('target'); 1687 const $list = $('#' + targetId); 1688 1689 $(this).siblings('.estudos-estudos-list').addClass('hidden'); 1690 $(this).siblings('.estudos-item').removeClass('active'); 1691 1692 $list.toggleClass('hidden'); 1693 $(this).toggleClass('active'); 1694 }); 1695 1696 $(document).on('click', function(e) { 1697 if (!$(e.target).closest('#dropdown-estudos').length) { 1698 $('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 1699 $('.estudos-item').removeClass('active'); 1700 } 1701 }); 1702 1703 $(document).on('keydown', function(e) { 1704 if (e.key === 'Escape') { 1705 $('.estudos-submenu, .estudos-estudos-list').addClass('hidden'); 1706 $('.estudos-item').removeClass('active'); 1707 } 1708 }); 1709}); 1710</script>
1710 1711 1712<!-- 8. Script de Rotação para Banner Mobile -->
1713<script> 1714(function() { 1715 if (window.innerWidth >= 768) return; 1716 1717 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"}]; 1718 if (banners.length <= 1) return; 1719 1720 const mobileImg = document.querySelector('.banner-mobile-img'); 1721 const mobileLink = document.querySelector('.banner-mobile-link'); 1722 if (!mobileImg || !mobileLink) return; 1723 1724 let idx = 2; 1725 1726 setInterval(() => { 1727 idx = (idx + 1) % banners.length; 1728 mobileImg.style.opacity = '0.7'; 1729 setTimeout(() => { 1730 mobileImg.src = banners[idx].img; 1731 mobileLink.href = banners[idx].link; 1732 mobileImg.onload = () => { mobileImg.style.opacity = '1'; }; 1733 }, 200); 1734 }, 25000); 1735})(); 1736</script>
1736 1737 1738<!-- 9. Verificação de Bônus (apenas para afiliados) --> 1739 1740<!-- 10. Cookie Consent --> 1741<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"> 1742 <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4"> 1743 <div class="text-sm"> 1744 <p class="font-medium mb-1">ðª Cookies e Privacidade</p> 1745 <p class="text-[#94a3b8]"> 1746 Usamos cookies para personalizar anúncios e melhorar sua experiência. 1747 Ao continuar, você concorda com nossa <a href="politica_vouf.php" class="text-[#60a5fa] underline">PolÃtica de Privacidade</a>. 1748 </p> 1749 </div> 1750 <div class="flex gap-2"> 1751 <button id="cookie-reject" class="px-4 py-2 bg-[#334155] hover:bg-[#475569] rounded text-sm transition">Recusar</button> 1752 <button id="cookie-accept" class="px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] rounded text-sm font-medium transition">Aceitar</button> 1753 </div> 1754 </div> 1755</div> 1756
1757<script> 1758document.addEventListener('DOMContentLoaded', function() { 1759 const banner = document.getElementById('cookie-banner'); 1760 const acceptBtn = document.getElementById('cookie-accept'); 1761 const rejectBtn = document.getElementById('cookie-reject'); 1762 1763 // Verifica consentimento prévio 1764 if (!localStorage.getItem('cookie-consent')) { 1765 banner.classList.remove('hidden'); 1766 } 1767 1768 // Aceitar: permite cookies do AdSense 1769 acceptBtn.addEventListener('click', function() { 1770 localStorage.setItem('cookie-consent', 'accepted'); 1771 banner.classList.add('hidden'); 1772 // Aqui você pode inicializar scripts do AdSense se estiverem em delay 1773 if (typeof gtag === 'function') { 1774 gtag('consent', 'update', {'ad_storage': 'granted', 'analytics_storage': 'granted'}); 1775 } 1776 }); 1777 1778 // Recusar: bloqueia cookies não essenciais 1779 rejectBtn.addEventListener('click', function() { 1780 localStorage.setItem('cookie-consent', 'rejected'); 1781 banner.classList.add('hidden'); 1782 // Bloqueia cookies de publicidade 1783 if (typeof gtag === 'function') { 1784 gtag('consent', 'update', {'ad_storage': 'denied', 'analytics_storage': 'denied'}); 1785 } 1786 }); 1787}); 1788</script>
1788 1789<!-- ================= FOOTER MODERNO - TEMA ESCURO ================= --> 1790<footer style="background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); color: #e2e8f0;" class="mt-12 border-t" data-tailwind="border-[#334155]"> 1791 <!-- Seção Principal (Grid) --> 1792 <div class="max-w-7xl mx-auto px-4 py-12"> 1793 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> 1794 1795 <!-- COLUNA 1: Sobre + Segurança --> 1796 <div class="space-y-4"> 1797 <div class="flex items-center gap-3"> 1798 <img src="LogoVouFGames.png" alt="VouF" class="h-10 w-auto"> 1799 <span class="font-bold text-lg text-white">VouF Games</span> 1800 </div> 1801 <p class="text-sm opacity-80 leading-relaxed"> 1802 Plataforma de jogos educativos que estimula o raciocÃnio, memória e conhecimento geral de forma divertida e segura. 1803 </p> 1804 1805 <!-- Badge de Segurança --> 1806 <div class="flex items-center gap-2 pt-2"> 1807 <i class="fas fa-shield-alt text-green-400"></i> 1808 <span class="text-xs opacity-70">Site protegido por SSL ⢠Dados criptografados</span> 1809 </div> 1810 1811 <!-- Redes Sociais --> 1812 <div class="flex gap-3 pt-2"> 1813 <a href="https://t.me/voufgames" target="_blank" rel="noopener" 1814 style="background: #1e293b;" class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-blue-600 transition-colors" 1815 title="Telegram"> 1816 <i class="fab fa-telegram text-white"></i> 1817 </a> 1818 <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" 1819 title="WhatsApp"> 1820 <i class="fab fa-whatsapp text-white"></i> 1821 </a> 1822 <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" 1823 title="Instagram"> 1824 <i class="fab fa-instagram text-white"></i> 1825 </a> 1826 <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" 1827 title="YouTube"> 1828 <i class="fab fa-youtube text-white"></i> 1829 </a> 1830 </div> 1831 </div> 1832 1833 <!-- COLUNA 2: Links Ãteis --> 1834 <div class="space-y-4"> 1835 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90"> Links Ãteis</h4> 1836 <ul class="space-y-2 text-sm"> 1837 <li> 1838 <a href="categorias.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1839 <i class="fas fa-book-open w-4"></i> Material de Estudos 1840 </a> 1841 </li> 1842 <li> 1843 <a href="ranking.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1844 <i class="fas fa-trophy w-4"></i> Ranking de Recordistas 1845 </a> 1846 </li> 1847 <li> 1848 <a href="blog.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1849 <i class="fas fa-newspaper w-4"></i> Blog & Novidades 1850 </a> 1851 </li> 1852 </ul> 1853 </div> 1854 1855 <!-- COLUNA 3: Institucional --> 1856 <div class="space-y-4"> 1857 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">ð Institucional</h4> 1858 <ul class="space-y-2 text-sm"> 1859 <li> 1860 <a href="sobre.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1861 <i class="fas fa-info-circle w-4"></i> Sobre Nós 1862 </a> 1863 </li> 1864 <li> 1865 <a href="contato.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors" id="link-contato-footer"> 1866 <i class="fas fa-envelope w-4"></i> Contato 1867 </a> 1868 </li> 1869 <li> 1870 <a href="responsavel.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1871 <i class="fas fa-user-shield w-4"></i> Responsável 1872 </a> 1873 </li> 1874 <li> 1875 <a href="anuncie-noVouF.php" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1876 <i class="fas fa-bullhorn w-4"></i> Anuncie no VouF 1877 </a> 1878 </li> 1879 <li> 1880 <a href="politica_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1881 <i class="fas fa-lock w-4"></i> PolÃtica de Privacidade 1882 </a> 1883 </li> 1884 <li> 1885 <a href="termos_vouf.php" target="_blank" class="flex items-center gap-2 opacity-80 hover:text-blue-400 transition-colors"> 1886 <i class="fas fa-file-contract w-4"></i> Termos de Uso 1887 </a> 1888 </li> 1889 </ul> 1890 </div> 1891 1892 <!-- COLUNA 4: Contato Protegido + Newsletter --> 1893 <div class="space-y-4"> 1894 <h4 class="font-semibold text-white text-sm uppercase tracking-wide opacity-90">ð¬ Contato</h4> 1895 1896 <!-- Email Protegido --> 1897 <div class="space-y-2 text-sm"> 1898 <p class="opacity-80 flex items-center gap-2"> 1899 <i class="fas fa-envelope w-4"></i>
1900 <span id="email-protected" class="select-none cursor-pointer hover:text-blue-400 transition-colors"></span> 1901 </p> 1902 1903 <!-- WhatsApp Protegido --> 1904 <p class="opacity-80 flex items-center gap-2"> 1905 <i class="fab fa-whatsapp w-4"></i> 1906 <a href="#" id="whatsapp-protected" class="hover:text-blue-400 transition-colors select-none"></a> 1907 </p> 1908 1909 <!-- Endereço --> 1910 <p class="opacity-80 flex items-start gap-2"> 1911 <i class="fas fa-map-marker-alt w-4 mt-1"></i> 1912 <span id="endereco-protected" class="select-none"></span> 1913 </p> 1914 </div> 1915 1916 <!-- Newsletter (oculto na index pois já tem formulário próprio) --> 1917 <div class="pt-4 border-t" style="border-color: #334155;"> 1918 <p class="text-xs opacity-70 mb-3">Receba novidades e dicas exclusivas:</p> 1919 <form class="newsletter-form flex gap-2"> 1920 <input type="email" placeholder="Seu e-mail" required 1921 style="background: #1e293b; border-color: #334155; color: white;" 1922 class="flex-1 px-3 py-2 rounded text-sm placeholder-opacity-50 focus:outline-none focus:border-blue-400"> 1923 <button type="submit" style="background: #3b82f6;" class="px-4 py-2 hover:bg-blue-500 text-white rounded text-sm font-medium transition"> 1924 <i class="fas fa-arrow-right"></i> 1925 </button> 1926 </form> 1927 <p class="newsletter-msg text-xs mt-2 hidden"></p> 1928 </div> 1929 </div> 1930 1931 </div> 1932 </div> 1933 1934 <!-- Barra Inferior --> 1935 <div style="background: #0a0e17;" class="border-t" data-tailwind="border-[#334155]"> 1936 <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"> 1937 <p>© 2026 <span class="text-white">VouF</span>. Todos os direitos reservados.</p> 1938 <div class="flex items-center gap-4"> 1939 <span class="flex items-center gap-1"> 1940 <i class="fas fa-lock text-green-400"></i> Conexão segura 1941 </span> 1942 <span class="flex items-center gap-1"> 1943 <i class="fas fa-cookie text-blue-400"></i> 1944 <a href="politica_vouf.php#cookies" class="hover:text-blue-400">Cookies</a> 1945 </span> 1946 </div> 1947 </div> 1948 </div> 1949</footer> 1950 1951<!-- 11. Scripts de Proteção Anti-Robô -->
1952<script> 1953document.addEventListener('DOMContentLoaded', function() { 1954 1955 // ===== NEWSLETTER UNIFICADA (footer E index) ===== 1956 document.querySelectorAll('.newsletter-form').forEach(function(form) { 1957 form.addEventListener('submit', function(e) { 1958 e.preventDefault(); 1959 1960 const emailInput = this.querySelector('input[type="email"]'); 1961 const email = emailInput.value.trim(); 1962 const msgEl = this.querySelector('.newsletter-msg'); 1963 const btn = this.querySelector('button[type="submit"]'); 1964 1965 if (!email.includes('@') || !email.includes('.')) { 1966 if (msgEl) { 1967 msgEl.textContent = 'â ï¸ Digite um e-mail válido.'; 1968 msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400'; 1969 msgEl.classList.remove('hidden'); 1970 } 1971 return; 1972 } 1973 1974 btn.disabled = true; 1975 const originalHTML = btn.innerHTML; 1976 btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>'; 1977 1978 fetch('api.php', { 1979 method: 'POST', 1980 headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 1981 body: 'action=newsletter_subscribe&email=' + encodeURIComponent(email) 1982 }) 1983 .then(r => r.json()) 1984 .then(data => { 1985 btn.disabled = false; 1986 btn.innerHTML = originalHTML; 1987 1988 if (msgEl) { 1989 if (data.success) { 1990 msgEl.textContent = 'â ' + data.message; 1991 msgEl.className = 'newsletter-msg text-xs mt-2 text-green-400'; 1992 emailInput.value = ''; 1993 form.reset(); 1994 } else { 1995 msgEl.textContent = 'â ï¸ ' + data.message; 1996 msgEl.className = 'newsletter-msg text-xs mt-2 text-yellow-400'; 1997 } 1998 msgEl.classList.remove('hidden'); 1999 setTimeout(() => msgEl.classList.add('hidden'), 5000); 2000 } 2001 }) 2002 .catch(err => { 2003 btn.disabled = false; 2004 btn.innerHTML = originalHTML; 2005 if (msgEl) { 2006 msgEl.textContent = 'â Erro de conexão. Tente novamente.'; 2007 msgEl.className = 'newsletter-msg text-xs mt-2 text-red-400'; 2008 msgEl.classList.remove('hidden'); 2009 } 2010 }); 2011 }); 2012 }); 2013 2014 // ===== PROTEÃÃO DE EMAIL ===== 2015 const emailParts = ['contato', 'appvouf.com.br']; 2016 const email = emailParts[0] + '@' + emailParts[1]; 2017 const emailEl = document.getElementById('email-protected'); 2018 if(emailEl) { 2019 emailEl.textContent = email; 2020 emailEl.addEventListener('click', function(e) { 2021 e.preventDefault(); 2022 window.location.href = 'mailto:' + email; 2023 }); 2024 } 2025 2026 // ===== PROTEÃÃO DE WHATSAPP ===== 2027 const whatsappNumber = '5511999999999'; 2028 const whatsappText = encodeURIComponent('Olá! Vim pelo site VouF Games e gostaria de mais informações.'); 2029 const whatsappLink = `https://wa.me/${whatsappNumber}?text=${whatsappText}`; 2030 2031 const $whatsappLink = document.getElementById('whatsapp-protected'); 2032 const $whatsappIcon = document.getElementById('link-whatsapp-footer'); 2033 2034 function ativarWhatsApp(e) { 2035 e.preventDefault(); 2036 window.open(whatsappLink, '_blank', 'noopener,noreferrer'); 2037 } 2038 2039 if ($whatsappLink) $whatsappLink.addEventListener('click', ativarWhatsApp); 2040 if ($whatsappIcon) $whatsappIcon.addEventListener('click', ativarWhatsApp); 2041 2042 setTimeout(() => { 2043 if ($whatsappLink) $whatsappLink.textContent = 'WhatsApp'; 2044 }, 2000); 2045 2046 // ===== PROTEÃÃO DE ENDEREÃO ===== 2047 const enderecoParts = ['São Paulo', 'SP', 'Brasil']; 2048 const enderecoEl = document.getElementById('endereco-protected'); 2049 if(enderecoEl) enderecoEl.textContent = enderecoParts.join(' - '); 2050 2051 // ===== REDES SOCIAIS (links gerados via JS) ===== 2052 const socialLinks = { 2053 instagram: 'https://instagram.com/voufgames', 2054 youtube: 'https://youtube.com/@voufgames' 2055 }; 2056
2057 Object.keys(socialLinks).forEach(platform => { 2058 const el = document.getElementById(`link-${platform}-footer`); 2059 if (el) { 2060 el.addEventListener('click', function(e) { 2061 e.preventDefault(); 2062 window.open(socialLinks[platform], '_blank', 'noopener,noreferrer'); 2063 }); 2064 } 2065 }); 2066 2067 // ===== PROTEÃÃO ADICIONAL: Desabilitar seleção de texto ===== 2068 document.querySelectorAll('.select-none').forEach(el => { 2069 el.style.userSelect = 'none'; 2070 el.addEventListener('contextmenu', e => e.preventDefault()); 2071 }); 2072 2073 // ===== PROTEÃÃO: Ofuscar links institucionais ===== 2074 const contatoLink = document.getElementById('link-contato-footer'); 2075 if (contatoLink) { 2076 contatoLink.addEventListener('click', function(e) { 2077 e.preventDefault(); 2078 window.location.href = 'contato.php'; 2079 }); 2080 } 2081}); 2082</script>
2082 2083 2084<!-- 12. Estilos Adicionais (CSS Puro para garantir cores) --> 2085<style> 2086/* Cores escuras garantidas via CSS puro (compatÃvel com Tailwind v2) */ 2087footer { 2088 background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); 2089 color: #e2e8f0; 2090} 2091 2092footer .border-t { 2093 border-color: #334155 !important; 2094} 2095 2096footer a { 2097 color: #94a3b8; 2098 transition: color 0.2s, transform 0.2s; 2099} 2100 2101footer a:hover { 2102 color: #60a5fa !important; 2103 transform: translateX(2px); 2104} 2105 2106footer input { 2107 background: #1e293b !important; 2108 border-color: #334155 !important; 2109 color: white !important; 2110} 2111 2112footer input::placeholder { 2113 color: #64748b !important; 2114} 2115 2116footer input:focus { 2117 border-color: #60a5fa !important; 2118 outline: none; 2119} 2120 2121footer button[type="submit"] { 2122 background: #3b82f6 !important; 2123} 2124 2125footer button[type="submit"]:hover { 2126 background: #2563eb !important; 2127} 2128 2129footer [class*="rounded-full"]:hover { 2130 transform: translateY(-2px); 2131 box-shadow: 0 4px 12px rgba(0,0,0,0.3); 2132} 2133 2134@keyframes fadeInUp { 2135 from { opacity: 0; transform: translateY(20px); } 2136 to { opacity: 1; transform: translateY(0); } 2137} 2138 2139footer { 2140 animation: fadeInUp 0.4s ease-out; 2141} 2142 2143@media (max-width: 768px) { 2144 footer .grid { 2145 grid-template-columns: 1fr !important; 2146 text-align: center; 2147 } 2148 2149 footer .flex.items-center { 2150 justify-content: center; 2151 } 2152 2153 footer ul { 2154 text-align: left; 2155 } 2156 2157 footer [class*="rounded-full"] { 2158 margin: 0 auto; 2159 } 2160} 2161 2162.select-none { 2163 user-select: none; 2164 -webkit-user-select: none; 2165 -moz-user-select: none; 2166 -ms-user-select: none; 2167} 2168</style> 2169 2170</body> 2171</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.