Documento (8) RPG
Uploaded by
cluis3094Documento (8) RPG
Uploaded by
cluis3094Esse código abaixo é o do gerador de bilhetes do rpg
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="Gerador de Missões
YshippCommerce para ganhar Golds com propagandas">
<title>Gerador de Brilhantes 𖥸⃝ Zona de Recompensas de
Paradis</title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700&display=swap');
:root {
--border-color: #8B7E66;
--bg-color: #F5F0E6;
--card-bg: #E8E6E1;
--accent: #5C4033;
--button-bg: #8B7E66;
--button-hover: #6B5E4C;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: var(--bg-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
.header-img-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
animation: glowFadeIn 5s ease-in forwards;
.header-img-overlay img {
width: 100%;
max-width: 800px;
filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 255, 255,
0.8));
.header-img {
width: 90%;
max-width: 450px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: transparent;
opacity: 0;
transition: opacity 0.5s ease-in;
.header-img.active {
opacity: 1;
.header-img.bright {
animation: brightenHeader 3s ease-in-out forwards;
.dialogue-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 1000;
display: none;
align-items: flex-start;
justify-content: flex-start;
.dialogue-overlay.active {
display: flex;
.character-img {
height: auto;
position: absolute;
left: 20px;
top: 200px;
background: transparent;
animation: fadeScale 0.5s ease-in;
pointer-events: none;
z-index: 1001;
max-width: 80vw;
width: 260px;
transition: opacity 4s ease-out;
.dialogue-text {
position: absolute;
left: 20px;
top: 30px;
max-width: 60%;
width: fit-content;
font-size: 16px;
color: #fff;
background: #000;
border-radius: 10px;
padding: 20px;
animation: slideInUp 0.5s ease-in;
z-index: 1002;
aria-live: "polite";
position: relative;
white-space: normal;
box-sizing: border-box;
transition: opacity 4s ease-out;
.dialogue-text::after {
content: '';
position: absolute;
bottom: -20px;
left: 30px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #000;
}
.dialogue-text.fade-out, .character-img.fade-out {
opacity: 0;
.submission-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 3000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInOut 10s forwards;
.submission-img {
width: 80%;
max-width: 400px;
animation: glowBrighten 4s forwards;
.submission-message {
background: rgba(0, 0, 0, 0.9);
color: #fff;
border-radius: 8px;
padding: 15px;
max-width: 80%;
font-size: 14px;
margin-top: 20px;
text-align: center;
text-shadow: 1px 1px 1px #000;
.container {
width: 100%;
max-width: 500px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
.header {
background-color: var(--accent);
color: white;
padding: 15px 20px;
text-align: center;
font-size: 20px;
font-weight: 600;
text-shadow: 1px 1px 1px #3A2B1F;
}
.form-container {
padding: 20px;
padding-top: 130px;
position: relative;
pointer-events: none;
opacity: 0.5;
transition: filter 0.3s ease;
.form-container.active {
pointer-events: auto;
opacity: 1;
.form-container.blur {
filter: blur(5px);
.status-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
padding: 15px;
background: var(--card-bg);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
gap: 10px;
text-align: center;
font-size: 0.9rem;
font-weight: 600;
color: #333;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
.status-bar div {
padding: 10px;
background: #f5f6fa;
border-radius: 8px;
transition: background 0.3s ease, transform 0.2s ease;
.status-bar div:hover {
background: var(--button-bg);
color: #ffffff;
transform: translateY(-3px);
.links {
padding: 0 20px 20px;
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 500px;
box-sizing: border-box;
}
.link-item {
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: 10px;
padding: 20px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
white-space: pre-wrap;
.link-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 4px solid transparent;
border-image: linear-gradient(to right, #8B7E66, #5C4033) 1;
pointer-events: none;
.link-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.link-item.nsfw {
background: #e74c3c;
color: #ffffff;
.link-item.nsfw:hover {
background: #c0392b;
.link-title {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
color: #333;
text-shadow: 1px 1px 1px #5C4033;
.nsfw-label {
font-size: 0.9rem;
margin-left: 5px;
.circles {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
.circle.not-validated {
background: #e74c3c;
.link-item.nsfw .circle.not-validated {
background: #000000;
.circle.active {
background: var(--accent);
transform: scale(1.1);
box-shadow: 0 0 8px rgba(92, 64, 51, 0.5);
.link-item.nsfw .circle.active {
background: #95a5a6;
box-shadow: none;
.circle.progress {
background: linear-gradient(to top, #e74c3c var(--progress-
height), var(--accent) var(--progress-height) 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80%
100%, 20% 100%, 0% 80%, 0% 20%);
.link-item.nsfw .circle.progress {
background: linear-gradient(to top, #000000 var(--progress-
height), #95a5a6 var(--progress-height) 100%);
.circle.blocked {
background: #95a5a6;
cursor: not-allowed;
.link-item.nsfw .circle.blocked {
background: #95a5a6;
.circle:hover:not(.active):not(.blocked) {
background: #3498db;
transform: scale(1.15);
.gold-amount {
margin-top: 10px;
font-size: 0.9rem;
color: #e67e22;
font-weight: 600;
margin-bottom: 15px;
.progress-bar {
height: 10px;
background: #ecf0f1;
border-radius: 5px;
margin: 10px 0;
.progress-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 5px;
transition: width 0.3s ease;
.tutorial-button {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 16px;
background: var(--button-bg);
border: none;
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
.tutorial-button:hover {
background: var(--button-hover);
transform: scale(1.05);
.btn {
background-color: var(--button-bg);
color: white;
border: none;
padding: 12px 20px;
width: 100%;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
margin-top: 20px;
.btn:hover {
background-color: var(--button-hover);
transform: scale(1.02);
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
z-index: 100;
.modal-content {
background: #ffffff;
padding: 30px;
border-radius: 15px;
text-align: center;
animation: slideIn 0.5s ease forwards;
max-width: 90%;
width: 500px;
box-sizing: border-box;
.modal-content h2 {
color: #2c3e50;
margin-bottom: 10px;
.modal-content p {
color: #7f8c8d;
margin-bottom: 20px;
.modal-content input, .modal-content textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #bdc3c7;
border-radius: 8px;
font-size: 1rem;
.modal-content button {
padding: 10px 20px;
background: var(--button-bg);
border: none;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
margin: 5px;
.modal-content button.cancel {
background: #e74c3c;
.modal-content button.cancel:hover {
background: #c0392b;
}
.admin-section {
margin: 20px 10px;
padding: 20px;
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
display: none;
width: 100%;
max-width: 100%;
box-sizing: border-box;
.admin-section input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #bdc3c7;
border-radius: 8px;
font-size: 1rem;
.admin-section button {
width: 100%;
padding: 12px;
background: var(--button-bg);
border: none;
color: #ffffff;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
@keyframes glowFadeIn {
from { opacity: 0; filter: brightness(2) drop-shadow(0 0 30px
rgba(255, 255, 255, 1)); }
to { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 20px
rgba(255, 255, 255, 0.8)); }
@keyframes fadeOutHeader {
from { opacity: 1; }
to { opacity: 0; }
@keyframes pulseBrightness {
from { filter: brightness(1); }
to { filter: brightness(1.5); }
@keyframes slideInUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
@keyframes fadeScale {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes fadeInOut {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
@keyframes glowBrighten {
from { filter: brightness(1); }
to { filter: brightness(3); }
@keyframes brightenHeader {
0% { filter: brightness(1); }
50% { filter: brightness(2); }
100% { filter: brightness(1); }
@keyframes slideIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
@media (max-width: 600px) {
.container {
max-width: 90%;
}
.header-img {
max-width: 400px;
.character-img {
max-width: 70vw;
.dialogue-text {
max-width: 80%;
font-size: 14px;
.submission-img {
max-width: 300px;
.submission-message {
font-size: 12px;
.header {
font-size: 18px;
.form-container {
padding: 15px;
padding-top: 120px;
}
input, select {
font-size: 14px;
.action-btn, .btn {
font-size: 14px;
.circle {
width: 25px;
height: 25px;
@media (max-width: 400px) {
.header {
font-size: 16px;
.form-container {
padding: 10px;
padding-top: 100px;
.link-title {
font-size: 1rem;
}
.gold-amount {
font-size: 0.8rem;
.tutorial-button {
padding: 6px 12px;
font-size: 0.8rem;
</style>
</head>
<body>
<div class="header-img-overlay" id="headerImgOverlay">
<img src="https://i.postimg.cc/Vvdf3V16/Png-Item-1257489.png"
alt="Cabeçalho Attack on Titan">
</div>
<div class="dialogue-overlay" id="dialogueOverlay">
<span class="sr-only">Os diálogos avançam automaticamente a
cada 12 segundos.</span>
<img class="character-img" id="characterImg" src=""
alt="Personagem">
<div class="dialogue-text" id="dialogueText"></div>
</div>
<div class="submission-overlay" id="submissionOverlay">
<img class="submission-img"
src="https://i.postimg.cc/2SpkKGtk/Png-Item-6931360.png"
alt="Símbolo de Oferenda">
<div class="submission-message">Ofereça seus corações! Suas
missões serão forjadas para a glória de Paradis!</div>
</div>
<div class="container">
<div class="header">Gerador de Brilhantes 𖥸⃝ Zona de
Recompensas de Paradis</div>
<div class="form-container" id="formContainer">
<img class="header-img" id="staticHeaderImg"
src="https://i.postimg.cc/Vvdf3V16/Png-Item-1257489.png"
alt="Cabeçalho Attack on Titan">
<div class="status-bar" role="region" aria-label="Resumo de
missões e Golds">
<div>MISSÕES DISPONÍVEIS <span id="links-available">64 /
64</span></div>
<div>GOLDS DISPONÍVEIS <span
id="golds-available">0</span></div>
<div>GOLDS TOTAIS <span id="golds-total">0</span></div>
</div>
<div class="links" role="main">
<div class="link-item" id="shortano">
<span class="link-title">Missões Shortano</span>
<div class="circles" id="shortano-circles" data-max="5" data-
golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/pXZYVuNYW
7c', 'Como Resolver a Missão Shortano (2025)')">Tutorial</button>
</div>
<div class="link-item" id="shortino">
<span class="link-title">Missões Shortino</span>
<div class="circles" id="shortino-circles" data-max="5" data-
golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_SH
ORTINO', 'Como Resolver a Missão Shortino
(2025)')">Tutorial</button>
</div>
<div class="link-item" id="fofas">
<span class="link-title">Missões Fofas</span>
<div class="circles" id="fofas-circles" data-max="1" data-
golds="50"></div>
<span class="gold-amount">50 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_FO
FAS', 'Como Resolver a Missão Fofas (2025)')">Tutorial</button>
</div>
<div class="link-item" id="clkspro">
<span class="link-title">Missões ClksPro</span>
<div class="circles" id="clkspro-circles" data-max="2" data-
golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CL
KSPRO', 'Como Resolver a Missão ClksPro (2025)')">Tutorial</button>
</div>
<div class="link-item nsfw" id="cbshort">
<span class="link-title">CBShort <span class="nsfw-
label">NSFW 🔞</span></span>
<div class="circles" id="cbshort-circles" data-max="1" data-
golds="100"></div>
<span class="gold-amount">100 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CB
SHORT', 'Como Resolver a Missão CBShort
(2025)')">Tutorial</button>
</div>
<div class="link-item" id="ouo">
<span class="link-title">Missões OuO</span>
<div class="circles" id="ouo-circles" data-max="2" data-
golds="50"></div>
<span class="gold-amount">50 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_O
UO', 'Como Resolver a Missão OuO (2025)')">Tutorial</button>
</div>
<div class="link-item nsfw" id="fclc">
<span class="link-title">Fclc <span class="nsfw-label">NSFW
🔞</span></span>
<div class="circles" id="fclc-circles" data-max="1" data-
golds="50"></div>
<span class="gold-amount">50 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_FC
LC', 'Como Resolver a Missão Fclc (2025)')">Tutorial</button>
</div>
<div class="link-item" id="cut-urls">
<span class="link-title">Missões Cut-Urls</span>
<div class="circles" id="cut-urls-circles" data-max="1" data-
golds="50"></div>
<span class="gold-amount">50 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CU
TURLS', 'Como Resolver a Missão Cut-Urls
(2025)')">Tutorial</button>
</div>
<div class="link-item nsfw" id="cliksh">
<span class="link-title">ClikSh <span class="nsfw-
label">NSFW 🔞</span></span>
<div class="circles" id="cliksh-circles" data-max="1" data-
golds="100"></div>
<span class="gold-amount">100 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CL
IKSH', 'Como Resolver a Missão ClikSh (2025)')">Tutorial</button>
</div>
<div class="link-item" id="clicksfly">
<span class="link-title">Missões Clicksfly</span>
<div class="circles" id="clicksfly-circles" data-max="1" data-
golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CL
ICKFLY', 'Como Resolver a Missão Clicksfly
(2025)')">Tutorial</button>
</div>
<div class="link-item" id="coinclix">
<span class="link-title">Missões Coinclix</span>
<div class="circles" id="coinclix-circles" data-max="10" data-
golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_CO
INCLIX', 'Como Resolver a Missão Coinclix
(2025)')">Tutorial</button>
</div>
<div class="link-item" id="payinc">
<span class="link-title">Missões Pay.Inc</span>
<div class="circles" id="payinc-circles" data-max="2" data-
golds="100"></div>
<span class="gold-amount">100 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_PA
YINC', 'Como Resolver a Missão Pay.Inc (2025)')">Tutorial</button>
</div>
<div class="link-item" id="earnnnow">
<span class="link-title">Missões EarnNow</span>
<div class="circles" id="earnnnow-circles" data-max="30"
data-golds="150"></div>
<span class="gold-amount">150 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_EA
RNNNOW', 'Como Resolver a Missão EarnNow
(2025)')">Tutorial</button>
</div>
<div class="link-item" id="encurtanet">
<span class="link-title">Missões EncurtaNet</span>
<div class="circles" id="encurtanet-circles" data-max="1"
data-golds="50"></div>
<span class="gold-amount">50 Golds por missão</span>
<div class="progress-bar"><div
class="progress-bar-fill"></div></div>
<button class="tutorial-button"
onclick="showTutorial('https://www.youtube.com/embed/VIDEO_ID_EN
CURTANET', 'Como Resolver a Missão EncurtaNet
(2025)')">Tutorial</button>
</div>
</div>
para Zona Comercial de Mitras">Ir para 𖤐⃝ 𝚉𝚘𝚗𝚊 𝙲𝚘𝚖𝚎𝚛𝚌𝚒𝚊𝚕 𝚍𝚎
<button class="btn" onclick="goToMitrasZone()" aria-label="Ir
𝙼𝚒𝚝𝚛𝚊𝚜</button>
<div class="status" id="status"></div>
</div>
</div>
<div id="welcomeModal" class="modal" role="dialog" aria-
labelledby="welcomeMessage">
<div class="modal-content">
<h2 id="welcomeMessage">Bem-vindo à Zona de Recompensas!
</h2>
<p></p>
<button onclick="closeModal('welcomeModal')" aria-
label="Fechar mensagem">OK</button>
</div>
</div>
<div id="codeModal" class="modal" role="dialog" aria-
labelledby="codeMessage">
<div class="modal-content">
<h2 id="codeMessage">Validar Missão de Propaganda</h2>
<p>Insira a data/hora e o código recebidos após completar a
missão.</p>
<input type="datetime-local" id="codeDataHora"
placeholder="Data e hora">
<input type="text" id="codeInput" placeholder="Código de 6
dígitos">
<button onclick="validarPropaganda()">Validar</button>
<button onclick="closeModal('codeModal')">Cancelar</button>
</div>
</div>
<div id="detailsModal" class="modal" role="dialog" aria-
labelledby="detailsMessage">
<div class="modal-content">
<h2 id="detailsMessage">Informações do Assinante</h2>
<p>Por favor, insira seus dados para confirmar a assinatura.</p>
<input type="text" id="memberName" placeholder="Nome
completo">
<input type="date" id="memberBirthdate" placeholder="Data de
nascimento">
<input type="email" id="memberEmail" placeholder="E-mail">
<input type="text" id="memberLinkConfirm" placeholder="Link
de divulgação">
<button onclick="submitMemberDetails()">Enviar</button>
<button class="cancel"
onclick="closeModal('detailsModal')">Cancelar</button>
</div>
</div>
<div id="withdrawModal" class="modal" role="dialog" aria-
labelledby="withdrawMessage">
<div class="modal-content">
<h2 id="withdrawMessage">Sacar Golds</h2>
<p>Você tem <span id="withdrawGolds">0</span> Golds
disponíveis. Escolha uma opção:</p>
<button onclick="withdrawPix()">Sacar via Pix</button>
<button onclick="transferToServices()">Transferir para Mercado
de Serviços</button>
<button class="cancel"
onclick="closeModal('withdrawModal')">Cancelar</button>
</div>
</div>
<div class="admin-section" id="adminSection">
<h3>Verificação de Missões (ADM)</h3>
<input type="datetime-local" id="dataHora" placeholder="Data e
hora para verificação">
<input type="password" id="senhaAdmin" placeholder="Senha do
ADM">
<button onclick="verificarBilhete()">Verificar Missão</button>
<div id="adminResultado"></div>
</div>
<script>
const APP_VERSION = "1.1.1";
let goldsAvailable =
parseInt(localStorage.getItem('goldsAvailable')) || 0;
let goldsTotal = parseInt(localStorage.getItem('goldsTotal')) || 0;
let linksAvailable = 64;
let currentLinkId = null;
let currentIndex = null;
let pendingMemberLink = null;
const CHAVE_SECRETA = "minhaChave123";
const linkProgress = {
'shortano': { current: 0, max: 5, golds: 150 },
'shortino': { current: 0, max: 5, golds: 150 },
'fofas': { current: 0, max: 1, golds: 50 },
'clkspro': { current: 0, max: 2, golds: 150 },
'cbshort': { current: 0, max: 1, golds: 100 },
'ouo': { current: 0, max: 2, golds: 50 },
'fclc': { current: 0, max: 1, golds: 50 },
'cut-urls': { current: 0, max: 1, golds: 50 },
'cliksh': { current: 0, max: 1, golds: 100 },
'clicksfly': { current: 0, max: 1, golds: 150 },
'coinclix': { current: 0, max: 10, golds: 150 },
'payinc': { current: 0, max: 2, golds: 100 },
'earnnnow': { current: 0, max: 30, golds: 150 },
'encurtanet': { current: 0, max: 1, golds: 50 }
};
const memberLinksProgress = {};
function recalcularGoldsDisponiveis() {
let total = 0;
Object.entries(linkProgress).forEach(([linkId, progress]) => {
const remainingClicks = progress.max - progress.current;
total += remainingClicks * progress.golds;
if (progress.current === progress.max && !
localStorage.getItem(`bonus:${linkId}`)) {
total += progress.max * progress.golds;
});
return total;
function resetarEstadoDiario() {
linksAvailable = 64;
Object.keys(linkProgress).forEach(linkId => {
linkProgress[linkId].current = 0;
for (let i = 0; i < linkProgress[linkId].max; i++) {
localStorage.removeItem(`${linkId}:${i}:date`);
localStorage.removeItem(`bonus:${linkId}`);
});
localStorage.setItem('usedCodes', JSON.stringify({}));
localStorage.setItem('lastResetDate', new Date().toDateString());
goldsAvailable = recalcularGoldsDisponiveis();
localStorage.setItem('goldsAvailable', goldsAvailable);
localStorage.setItem('linksAvailable', linksAvailable);
localStorage.setItem('linkProgress', JSON.stringify(linkProgress));
localStorage.setItem('appVersion', APP_VERSION);
inicializarBolinhas();
atualizarInterface();
function inicializarEstado() {
const storedVersion = localStorage.getItem('appVersion');
const isFirstVisit = !localStorage.getItem('yshippFirstVisit');
const lastResetDate = localStorage.getItem('lastResetDate');
const today = new Date().toDateString();
if (isFirstVisit || storedVersion !== APP_VERSION) {
localStorage.setItem('yshippFirstVisit', 'true');
localStorage.setItem('goldsTotal',
localStorage.getItem('goldsTotal') || '0');
localStorage.setItem('appVersion', APP_VERSION);
resetarEstadoDiario();
} else if (lastResetDate !== today) {
resetarEstadoDiario();
} else {
linksAvailable = parseInt(localStorage.getItem('linksAvailable')) ||
64;
const savedProgress = localStorage.getItem('linkProgress');
if (savedProgress) {
Object.assign(linkProgress, JSON.parse(savedProgress));
goldsAvailable = parseInt(localStorage.getItem('goldsAvailable'))
|| recalcularGoldsDisponiveis();
localStorage.setItem('goldsAvailable', goldsAvailable);
goldsTotal = parseInt(localStorage.getItem('goldsTotal')) || 0;
atualizarInterface();
function salvarEstado() {
localStorage.setItem('linkProgress', JSON.stringify(linkProgress));
localStorage.setItem('goldsAvailable', goldsAvailable);
localStorage.setItem('goldsTotal', goldsTotal);
localStorage.setItem('linksAvailable', linksAvailable);
localStorage.setItem('appVersion', APP_VERSION);
function inicializarBolinhas(linkId = null) {
const links = linkId ? [linkId] : Object.keys(linkProgress);
links.forEach(id => {
const container = document.getElementById(`${id}-circles`);
if (!container) return;
container.innerHTML = '';
const maxViews = linkProgress[id].max;
for (let i = 0; i < maxViews; i++) {
const circle = document.createElement('div');
circle.classList.add('circle', 'not-validated');
circle.dataset.index = i;
circle.addEventListener('click', () => abrirModalPropaganda(id,
i));
container.appendChild(circle);
verificarEstadoCirculo(id, i, circle);
});
}
function verificarEstadoCirculo(linkId, index, circle) {
const key = `${linkId}:${index}:date`;
const lastValidation = localStorage.getItem(key);
if (lastValidation) {
const lastDate = new Date(lastValidation);
const today = new Date();
if (lastDate.toDateString() === today.toDateString()) {
circle.classList.remove('not-validated');
circle.classList.add('active', 'blocked');
atualizarProgressoCirculo(linkId, index, circle);
} else {
circle.classList.remove('active', 'progress', 'blocked');
circle.classList.add('not-validated');
localStorage.removeItem(key);
function atualizarProgressoCirculo(linkId, index, circle) {
const key = `${linkId}:${index}:date`;
const lastValidation = localStorage.getItem(key);
if (lastValidation && circle.classList.contains('active')) {
const lastDate = new Date(lastValidation);
const now = new Date();
if (lastDate.toDateString() === now.toDateString()) {
const midnight = new Date(now);
midnight.setHours(24, 0, 0, 0);
const timeToMidnight = (midnight - now) / (1000 * 60 * 60);
const validationHour = lastDate.getHours() +
lastDate.getMinutes() / 60;
const totalHours = 24 - validationHour;
const progress = 1 - (timeToMidnight / totalHours);
const progressHeight = Math.min(progress * 100, 100);
circle.style.setProperty('--progress-height', `${progressHeight}
%`);
circle.classList.add('progress');
} else {
circle.classList.remove('active', 'progress', 'blocked');
circle.classList.add('not-validated');
localStorage.removeItem(key);
function atualizarInterface() {
document.getElementById('golds-available').textContent =
goldsAvailable;
document.getElementById('golds-total').textContent = goldsTotal;
document.getElementById('links-available').textContent = `$
{linksAvailable} / 64`;
Object.keys(linkProgress).forEach(linkId => {
const progress = linkProgress[linkId];
const progressPercent = (progress.current / progress.max) * 100;
const progressBarFill = document.querySelector(`#$
{linkId} .progress-bar-fill`);
if (progressBarFill) {
progressBarFill.style.width = `${progressPercent}%`;
}
if (progress.current === progress.max && !
localStorage.getItem(`bonus:${linkId}`)) {
linksAvailable++;
goldsAvailable += progress.max * progress.golds;
goldsTotal += progress.max * progress.golds;
localStorage.setItem(`bonus:${linkId}`, 'true');
alert(`Parabéns! Você completou todas as missões de ${linkId}
e ganhou 1 missão bônus e ${progress.max * progress.golds} Golds!
`);
});
inicializarBolinhas();
function abrirModalPropaganda(linkId, index) {
const progress = linkProgress[linkId];
if (progress.current >= progress.max) {
alert('Todas as missões já foram completadas. Volte amanhã!');
return;
const circles = document.getElementById(`${linkId}-
circles`).children;
if (circles[index].classList.contains('active')) {
alert('Esta missão já foi validada.');
return;
if (circles[index].classList.contains('blocked')) {
alert('Esta missão só pode ser validada novamente amanhã.');
return;
currentLinkId = linkId;
currentIndex = index;
const linkUrl = linkId === 'shortano' && index === 0
? 'http://shortano.link/shortanopropaganda1'
: 'https://seusite.com/pagina-destino';
window.open(linkUrl, '_blank');
const modal = document.getElementById('codeModal');
modal.style.display = 'flex';
function validarPropaganda() {
if (!currentLinkId || currentIndex === null) {
alert('Erro: Nenhuma missão selecionada.');
return;
const progress = linkProgress[currentLinkId];
const dataHoraInput =
document.getElementById('codeDataHora').value;
const codeInput =
document.getElementById('codeInput').value.trim();
if (!dataHoraInput || !codeInput) {
alert('Por favor, insira a data/hora e o código.');
return;
}
if (codeInput.length !== 6) {
alert('O código deve ter 6 caracteres.');
return;
const dataHora = new Date(dataHoraInput);
if (isNaN(dataHora.getTime())) {
alert('Data e horário inválidos.');
return;
const codigoEsperado = gerarCodigo(dataHora);
if (codeInput !== codigoEsperado) {
alert('Código inválido! Tente novamente.');
return;
const today = new Date().toDateString();
const usedCodes = JSON.parse(localStorage.getItem('usedCodes')
|| '{}');
const dataHoraFormatted = dataHora.toISOString();
for (let key in usedCodes) {
if (key !== `${currentLinkId}:${currentIndex}` &&
usedCodes[key].code === codeInput && usedCodes[key].dataHora
=== dataHoraFormatted && usedCodes[key].date === today) {
alert('Este código já foi utilizado para outra missão hoje. Por
favor, insira um novo código válido.');
return;
}
usedCodes[`${currentLinkId}:${currentIndex}`] = { code:
codeInput, dataHora: dataHoraFormatted, date: today };
localStorage.setItem('usedCodes', JSON.stringify(usedCodes));
const circles = document.getElementById(`${currentLinkId}-
circles`).children;
circles[currentIndex].classList.remove('not-validated');
circles[currentIndex].classList.add('active', 'blocked');
const key = `${currentLinkId}:${currentIndex}:date`;
localStorage.setItem(key, new Date().toISOString());
atualizarProgressoCirculo(currentLinkId, currentIndex,
circles[currentIndex]);
progress.current++;
goldsAvailable -= progress.golds;
goldsTotal += progress.golds;
linksAvailable--;
salvarEstado();
atualizarInterface();
const modal = document.getElementById('welcomeModal');
modal.style.display = 'flex';
modal.querySelector('p').textContent = `Você ganhou $
{progress.golds} Golds por completar uma missão de $
{currentLinkId}!`;
setTimeout(() => {
modal.style.display = 'none';
}, 3000);
if (progress.current >= progress.max) {
const linkItem = document.getElementById(currentLinkId);
linkItem.classList.add('completed');
const bilhete = gerarCodigo(new Date());
alert(`Missão gerada para ${currentLinkId}: ${bilhete}`);
closeModal('codeModal');
currentLinkId = null;
currentIndex = null;
function goToMitrasZone() {
window.open('https://linkpremiadoanime.blogspot.com/2025/04/merc
ado-de-servicos-yshippcommerce.html', '_blank');
function withdrawPix() {
if (goldsAvailable < 100000) {
alert('Golds insuficientes! Você precisa de 100000 Golds para
sacar.');
return;
const message = `Olá, desejo sacar ${goldsAvailable} Golds via
Pix. Por favor, envie as instruções.`;
const whatsappUrl = `https://wa.me/+5535984072446?text=$
{encodeURIComponent(message)}`;
window.open(whatsappUrl, '_blank');
goldsAvailable -= 100000;
goldsTotal -= 100000;
salvarEstado();
atualizarInterface();
closeModal('withdrawModal');
alert('Saque via Pix solicitado! Aguarde as instruções do
administrador.');
function transferToServices() {
if (goldsAvailable < 100000) {
alert('Golds insuficientes! Você precisa de 100000 Golds para
transferir.');
return;
goldsAvailable -= 100000;
goldsTotal -= 100000;
localStorage.setItem('marketplaceGolds',
parseInt(localStorage.getItem('marketplaceGolds') || '0') + 100000);
salvarEstado();
atualizarInterface();
closeModal('withdrawModal');
alert('100000 Golds transferidos para o Mercado de Serviços com
sucesso!');
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
if (modalId === 'codeModal') {
currentLinkId = null;
currentIndex = null;
if (modalId === 'detailsModal') {
pendingMemberLink = null;
async function obterIpUsuario() {
try {
const resposta = await fetch('https://api.ipify.org?format=json');
const dados = await resposta.json();
return dados.ip;
} catch (erro) {
console.error('Erro ao obter IP:', erro);
return null;
function gerarCodigo(dataHora) {
const minutos = Math.floor(new Date(dataHora).getTime() /
60000);
const hash = btoa(`${CHAVE_SECRETA}${minutos}`).slice(-6);
return hash;
async function verificarBilhete() {
const ipUsuario = await obterIpUsuario();
if (ipUsuario !== "193.186.4.203") {
alert("Acesso negado! Seu endereço IP não está autorizado.");
return;
const senhaAdmin =
document.getElementById('senhaAdmin').value;
if (senhaAdmin !== "6586") {
alert("Senha incorreta! Acesso negado.");
return;
const dataHoraInput =
document.getElementById('dataHora').value;
if (!dataHoraInput) {
alert("Por favor, insira uma data e horário.");
return;
const dataHora = new Date(dataHoraInput);
if (isNaN(dataHora.getTime())) {
alert("Data e horário inválidos.");
return;
const bilheteVerificado = gerarCodigo(dataHora);
const dataHoraFormatada = dataHora.toLocaleString('pt-BR');
const resultado = document.getElementById('adminResultado');
resultado.textContent = `Missão para ${dataHoraFormatada}: $
{bilheteVerificado}`;
}
function showTutorial(videoUrl, title) {
if (videoUrl) {
const modal = document.getElementById('codeModal');
modal.style.display = 'flex';
const iframe = document.createElement('iframe');
iframe.src = videoUrl;
iframe.title = title;
iframe.frameborder = '0';
iframe.allow = 'accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture';
iframe.allowFullscreen = true;
modal.querySelector('.modal-content').innerHTML = `<h2>$
{title}</h2><div
class="video-container">${iframe.outerHTML}</div><button
onclick="closeModal('codeModal')">Fechar</button>`;
window.onload = () => {
inicializarEstado();
setTimeout(() => {
headerImgOverlay.style.animation = 'glowFadeIn 5s ease-in
forwards, fadeOutHeader 1s ease-out 5s forwards';
setTimeout(() => {
headerImgOverlay.style.display = 'none';
staticHeaderImg.classList.add('active');
dialogueOverlay.classList.add('active');
showDialogue();
dialogueInterval = setInterval(advanceDialogue, 12000);
}, 6000);
}, 0);
};
let dialogueIndex = 0;
let dialogueInterval;
const dialogues = [
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Tch, mais um recruta sujo querendo Golds? Aqui na Zona
de Recompensas de Paradis, você só ganha completando missões.
Escolha suas tarefas e não me faça perder tempo limpando seu
sangue dos muros!'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Essas missões são como enfrentar Titãs – Shortano,
Shortino, ou até Fofas. Comece com algo que não me dê dor de
cabeça, ou vou te jogar pra fora da muralha!'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Depois de completar, valide com o código. Se errar, vai
esfregar o chão do quartel. E não tente enganar – eu vejo tudo, como
um Titã avistando presas!'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Se acumular 100.000 Golds, vá pra Zona Comercial de
Mitras. Mas se atrasar, vou te fazer limpar os esgotos com uma
escova de dentes. Mexa-se!'
];
function advanceDialogue() {
dialogueIndex++;
if (dialogueIndex < dialogues.length) {
showDialogue();
} else {
clearInterval(dialogueInterval);
characterImg.classList.add('fade-out');
dialogueText.classList.add('fade-out');
formContainer.classList.add('active', 'blur');
setTimeout(() => {
dialogueOverlay.style.display = 'none';
formContainer.classList.remove('blur');
staticHeaderImg.classList.add('bright');
}, 4000);
}
}
function showDialogue() {
const dialogue = dialogues[dialogueIndex];
characterImg.src = dialogue.image;
characterImg.style.width = dialogue.imageWidth;
dialogueText.textContent = dialogue.text;
</script>
</body>
</html>
Esse código abaixo é de inscrição
militar do rpg
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cartão de Identificação Militar</title>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;600;700&display=swap');
:root {
--border-color: #8B7E66;
--bg-color: #F5F0E6;
--card-bg: #E8E6E1;
--accent: #5C4033;
--button-bg: #8B7E66;
--button-hover: #6B5E4C;
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
body {
background-color: var(--bg-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
.container {
width: 100%;
max-width: 500px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
.header-img {
width: 90%;
max-width: 450px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: transparent;
opacity: 0;
transition: opacity 0.5s ease-in;
.header-img.active {
opacity: 1;
.header-img.bright {
animation: brightenHeader 3s ease-in-out forwards;
.header-img-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
animation: glowFadeIn 5s ease-in forwards;
.header-img-overlay img {
width: 100%;
max-width: 800px;
filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 255,
255, 0.8));
.header {
background-color: var(--accent);
color: white;
padding: 15px 20px;
text-align: center;
font-size: 20px;
font-weight: 600;
text-shadow: 1px 1px 1px #3A2B1F;
.form-container {
padding: 20px;
padding-top: 130px;
position: relative;
pointer-events: none;
opacity: 0.5;
transition: filter 0.3s ease;
.form-container.active {
pointer-events: auto;
opacity: 1;
.form-container.blur {
filter: blur(5px);
.form-group {
margin-bottom: 20px;
label {
display: block;
font-weight: 500;
margin-bottom: 5px;
color: #333;
text-shadow: 1px 1px 1px #5C4033;
input, select {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
background-color: var(--bg-color);
transition: border 0.3s;
input:focus, select:focus {
border-color: var(--accent);
outline: none;
.button-group {
display: flex;
gap: 10px;
margin-top: 10px;
.action-btn {
background-color: var(--button-bg);
color: white;
border: none;
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.action-btn:hover {
background-color: var(--button-hover);
transform: scale(1.05);
.action-btn:active {
transform: scale(0.95);
.btn {
background-color: var(--button-bg);
color: white;
border: none;
padding: 12px 20px;
width: 100%;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
.btn:hover {
background-color: var(--button-hover);
transform: scale(1.02);
}
.card-preview {
width: 100%;
margin-top: 30px;
margin-bottom: 20px;
background-color: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: 10px;
padding: 20px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
color: #333;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
.card-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 4px solid transparent;
border-image: linear-gradient(to right, #8B7E66, #5C4033) 1;
pointer-events: none;
.preview-title {
text-align: center;
margin-bottom: 10px;
font-weight: 600;
color: #333;
text-shadow: 1px 1px 1px #5C4033;
.next-btn {
position: absolute;
bottom: 5px;
left: 10px;
font-size: 12px;
color: #333;
text-decoration: underline;
cursor: pointer;
display: none;
.next-btn.show {
display: block;
.next-btn:hover {
color: var(--accent);
.status {
margin-top: 20px;
padding: 10px;
border-radius: 8px;
display: none;
opacity: 0;
transition: opacity 0.3s;
background: linear-gradient(to bottom, #F5F0E6, #E8E6E1);
.status.show {
display: block;
opacity: 1;
.success {
background: linear-gradient(to bottom, #d4edda, #c3e6cb);
color: #155724;
.error {
background: linear-gradient(to bottom, #f8d7da, #f5c6cb);
color: #721c24;
select option:disabled {
color: #999;
background-color: #f0f0f0;
.dialogue-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: none;
z-index: 1000;
display: none;
align-items: flex-start;
justify-content: flex-start;
.dialogue-overlay.active {
display: flex;
.character-img {
height: auto;
position: absolute;
left: 20px;
top: 200px;
background: transparent;
animation: fadeScale 0.5s ease-in;
pointer-events: none;
z-index: 1001;
max-width: 80vw;
width: 260px;
transition: opacity 4s ease-out;
.dialogue-text {
position: absolute;
left: 20px;
top: 30px;
max-width: 60%;
width: fit-content;
font-size: 16px;
color: #fff;
background: #000;
border-radius: 10px;
padding: 20px;
animation: slideInUp 0.5s ease-in;
z-index: 1002;
aria-live: "polite";
position: relative;
white-space: normal;
box-sizing: border-box;
transition: opacity 4s ease-out;
.dialogue-text::after {
content: '';
position: absolute;
bottom: -20px;
left: 30px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #000;
}
.dialogue-text.fade-out, .character-img.fade-out {
opacity: 0;
.submission-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 3000;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
animation: fadeInOut 10s forwards;
.submission-img {
width: 80%;
max-width: 400px;
animation: glowBrighten 4s forwards;
.submission-message {
background: rgba(0, 0, 0, 0.9);
color: #fff;
border-radius: 8px;
padding: 15px;
max-width: 80%;
font-size: 14px;
margin-top: 20px;
text-align: center;
text-shadow: 1px 1px 1px #000;
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
@keyframes glowFadeIn {
from { opacity: 0; filter: brightness(2) drop-shadow(0 0 30px
rgba(255, 255, 255, 1)); }
to { opacity: 1; filter: brightness(1.5) drop-shadow(0 0 20px
rgba(255, 255, 255, 0.8)); }
@keyframes fadeOutHeader {
from { opacity: 1; }
to { opacity: 0; }
@keyframes pulseBrightness {
from { filter: brightness(1); }
to { filter: brightness(1.5); }
@keyframes slideInUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
@keyframes fadeScale {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
@keyframes fadeInOut {
0% { opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; }
@keyframes glowBrighten {
from { filter: brightness(1); }
to { filter: brightness(3); }
}
@keyframes brightenHeader {
0% { filter: brightness(1); }
50% { filter: brightness(2); }
100% { filter: brightness(1); }
@media (max-width: 600px) {
.container {
max-width: 90%;
.header-img {
max-width: 400px;
.character-img {
max-width: 70vw;
.dialogue-text {
max-width: 80%;
font-size: 14px;
.submission-img {
max-width: 300px;
}
.submission-message {
font-size: 12px;
.next-btn {
font-size: 10px;
bottom: 3px;
left: 8px;
@media (max-width: 400px) {
.header {
font-size: 18px;
.form-container {
padding: 15px;
padding-top: 120px;
input, select {
font-size: 14px;
.action-btn, .btn {
font-size: 14px;
}
</style>
</head>
<body>
<div class="header-img-overlay" id="headerImgOverlay">
<img src="https://i.postimg.cc/Vvdf3V16/Png-Item-
1257489.png" alt="Cabeçalho Attack on Titan">
</div>
<div class="dialogue-overlay" id="dialogueOverlay">
<span class="sr-only">Os diálogos avançam automaticamente a
cada 12 segundos.</span>
<img class="character-img" id="characterImg" src=""
alt="Personagem">
<div class="dialogue-text" id="dialogueText"></div>
</div>
<div class="submission-overlay" id="submissionOverlay">
<img class="submission-img"
src="https://i.postimg.cc/2SpkKGtk/Png-Item-6931360.png"
alt="Símbolo de Oferenda">
<div class="submission-message">Ofereça seus corações! Seu
cartão será forjado para a glória das muralhas!</div>
</div>
<div class="container">
<div class="header">Cartão de Identificação Militar</div>
<div class="form-container" id="formContainer">
<img class="header-img" id="staticHeaderImg"
src="https://i.postimg.cc/Vvdf3V16/Png-Item-1257489.png"
alt="Cabeçalho Attack on Titan">
<div class="form-group">
<label for="nome">Nome de Guerra:</label>
<input type="text" id="nome" placeholder="Digite seu
pseudônimo de combate" required>
<div class="button-group">
<button class="action-btn" id="fontBtn">Escolher Fonte
Estilizada</button>
<button class="action-btn" id="nickBtn">Escolher
Nick</button>
</div>
</div>
<div class="form-group">
<label for="afiliacao">Afiliação (Muralha):</label>
<select id="afiliacao" required>
<option value="" disabled selected>Selecione sua
muralha</option>
<option value="Muralha Maria">Muralha
Maria</option>
<option value="Muralha Rose">Muralha Rose</option>
<option value="Muralha Sina">Muralha Sina</option>
</select>
</div>
<div class="form-group">
<label for="classe">Classe:</label>
<select id="classe" required title="Novos usuários devem
escolher População Civil. Outras classes são desbloqueadas após 200
compartilhamentos ou missões específicas.">
<option value="" disabled selected>Selecione sua
classe</option>
<option value="População Civil">População Civil
(𖣔⃝)</option>
<option value="Comerciante de Mitras"
disabled>Comerciante de Mitras (𖤐⃝) 🔒</option>
<option value="Trabalhador de Trost"
disabled>Trabalhador de Trost (𖣔⃝) 🔒</option>
<option value="Recruta do 104º Esquadrão"
disabled>Recruta do 104º Esquadrão (❖⃝) 🔒</option>
<option value="Tropa de Exploração" disabled>Tropa de
Exploração (⚔⃝) 🔒</option>
<option value="Comando Eldiano" disabled>Comando
Eldiano (² 𖣘⃝) 🔒</option>
<option value="Titãs Fundadores" disabled>Titãs
Fundadores (𖥸⃝) 🔒</option>
</select>
</div>
<h3 class="preview-title">Prévia do Cartão</h3>
<div class="card-preview" id="cardPreview">
Preencha os campos para forjar seu Cartão de Identificação
Militar
<span class="next-btn" id="nextBtn">Próximo</span>
</div>
<button class="btn" id="enviarBtn">Forjar e Enviar para
Validação</button>
<div class="status" id="status"></div>
</div>
</div>
<script>
const nomeInput = document.getElementById('nome');
const fontBtn = document.getElementById('fontBtn');
const nickBtn = document.getElementById('nickBtn');
const afiliacaoSelect = document.getElementById('afiliacao');
const classeSelect = document.getElementById('classe');
const cardPreview = document.getElementById('cardPreview');
const enviarBtn = document.getElementById('enviarBtn');
const statusDiv = document.getElementById('status');
const dialogueOverlay =
document.getElementById('dialogueOverlay');
const characterImg =
document.getElementById('characterImg');
const dialogueText = document.getElementById('dialogueText');
const formContainer =
document.getElementById('formContainer');
const headerImgOverlay =
document.getElementById('headerImgOverlay');
const staticHeaderImg =
document.getElementById('staticHeaderImg');
const submissionOverlay =
document.getElementById('submissionOverlay');
const nextBtn = document.getElementById('nextBtn');
const simbolos = {
'Muralha Maria': '𖣒⃝⚑⃝',
'Muralha Rose': '𖣔⃝⚑⃝',
'Muralha Sina': '𖣘⃝⚑⃝'
};
const fontes = [
{ css: 'font-family: "Times New Roman", serif', whatsapp:
name => name },
{ css: 'font-family: "Georgia", serif', whatsapp: name => name
},
{ css: 'font-family: "Courier New", monospace', whatsapp:
name => name },
{ css: 'font-family: "Arial Black", sans-serif', whatsapp: name
=> name },
{ css: "font-family: 'Impact', sans-serif", whatsapp: name =>
name }
];
const nicks = [
'𖣔⃝ Lýria Vëllstrom',
'⃝ Ëlara Künis',
'𖣒⃝ Sýrene D’Kavahl',
'⚔⃝ Nyxën Tháleia',
'𖨆⃝ Vëlira Mor’Ka',
'𖣔⃝ Tÿsha Krell',
'⚑⃝ Ëlwyra Vön’Eld',
'⚔⃝ Yvëska Rëndal',
'𖣒⃝ Këra Thën’La',
'⚑⃝ Aüren Lys’Vahl',
'⚔⃝ Elënya Vardis',
'𖣔⃝ Mïra Solvane',
'⚑⃝ Tália Vön’Rael',
'𖨆⃝ Ëris D\'Morwyn',
'𖣒⃝ Lÿss D’Vahr',
'⚔⃝ Nyssa Krälis',
'𖣔⃝ Ária Mürstein',
'⚑⃝ Kalÿne Dëllan',
'𖨆⃝ Rÿka Volth',
'𖣒⃝ Vëlza Kryn',
'⚑⃝ Dërion Halvek',
'𖣒⃝ Týrion Mërlin',
'⚔⃝ Zarek D’Mour',
'𖣔⃝ Káel Rüstmar',
'⚔⃝ Vënrik Thörn',
'𖨆⃝ Sören Grahn',
'⚑⃝ Malyek Orïn',
'𖣔⃝ Lÿsander Vell',
'⚑⃝ Nøx Eldrak',
'𖣒⃝ Kaärl Vön’Tross',
'⚑⃝ Draek Malrow',
'𖣒⃝ Jören Valtor',
'⚔⃝ Thäel D\'Gor',
'𖨆⃝ Kaël Vernis',
'𖣔⃝ Rúrik Taalven',
'⚑⃝ Eryk Solmar',
'𖣒⃝ Bäel Grimdar',
'⚔⃝ Nïvan Völtrax',
'𖨆⃝ Hëndrill Draev',
'𖣔⃝ Löran Feyr'
];
const dialogues = [
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-
1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Tch, mais um forasteiro correndo dos Titãs? Aqui nas
muralhas, ninguém entra sem um Cartão de Identificação Militar.
Preencha o formulário – Nome de Guerra, Muralha, e Classe. E não
ouse sujar meu portão com um nome ridículo.'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-
1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'A propósito, escolha uma Muralha decente – Maria,
Rose ou Sina. E só População Civil por enquanto, a menos que queira
limpar o chão com os Titãs primeiro.'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-
1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Depois de preencher, use "Escolher Fonte Estilizada"
para algo que não me dê dor de cabeça. Envie para @Armin_Oficial
no WhatsApp. E limpe seus pés antes de passar pelo portão.'
},
character: 'Levi',
image: 'https://i.postimg.cc/G2NwshwL/Png-Item-
1257615.png',
imageWidth: '260px',
imageHeight: 347,
text: 'Se eu pegar você atrasando o processo, vai esfregar
os muros com uma escova de dentes. Avance rápido e mostre que
tem algum valor aqui.'
];
let fontIndex = localStorage.getItem('fontIndex') ?
parseInt(localStorage.getItem('fontIndex')) : 0;
let nickIndex = localStorage.getItem('nickIndex') ?
parseInt(localStorage.getItem('nickIndex')) : 0;
let dialogueIndex = 0;
let dialogueInterval;
['nome', 'afiliacao', 'classe'].forEach(id => {
if (localStorage.getItem(id)) {
document.getElementById(id).value =
localStorage.getItem(id);
});
setTimeout(() => {
headerImgOverlay.style.animation = 'glowFadeIn 5s ease-in
forwards, fadeOutHeader 1s ease-out 5s forwards';
setTimeout(() => {
headerImgOverlay.style.display = 'none';
staticHeaderImg.classList.add('active');
dialogueOverlay.classList.add('active');
showDialogue();
dialogueInterval = setInterval(advanceDialogue, 12000);
}, 6000);
}, 0);
function advanceDialogue() {
dialogueIndex++;
if (dialogueIndex < dialogues.length) {
showDialogue();
} else {
clearInterval(dialogueInterval);
characterImg.classList.add('fade-out');
dialogueText.classList.add('fade-out');
formContainer.classList.add('active', 'blur');
setTimeout(() => {
dialogueOverlay.style.display = 'none';
formContainer.classList.remove('blur');
staticHeaderImg.classList.add('bright');
nextBtn.classList.add('show');
}, 4000);
function showDialogue() {
const dialogue = dialogues[dialogueIndex];
characterImg.src = dialogue.image;
characterImg.style.width = dialogue.imageWidth;
dialogueText.textContent = dialogue.text;
function atualizarPrevia() {
const nome = nomeInput.value.trim();
const afiliacao = afiliacaoSelect.value;
const classe = classeSelect.value;
let simbolo = afiliacao ? '■' : '';
const nomeFormatado = nome ? `${simbolo} ${nome}` : '';
const afiliacaoFormatada = afiliacao ? `■ ${afiliacao}` : '';
const separador = '----------------------------------';
cardPreview.style.cssText = fontes[fontIndex].css;
const card =
`=+=========================+=\n\
+★ CARD DE IDENTIFICAÇÃO MILITAR ★+\n\
=+=========================+=\n\
| Nome : ${nomeFormatado.padEnd(30)} \n\
${separador}\n\
| Afiliação : ${afiliacaoFormatada.padEnd(30)} \n\
${separador}\n\
| Classe : ${classe.padEnd(30)} \n\
${separador}\n\
| \n\
| ° Autorizado por: @Armin_Oficial \n\
| ° Monitorado pelo: Portão de Entrada \n\
| ° Estado: Em análise preliminar \n\
+=+==========================+=+`;
cardPreview.textContent = card;
localStorage.setItem('nome', nome);
localStorage.setItem('afiliacao', afiliacao);
localStorage.setItem('classe', classe);
localStorage.setItem('fontIndex', fontIndex);
localStorage.setItem('nickIndex', nickIndex);
fontBtn.addEventListener('click', () => {
fontIndex = (fontIndex + 1) % fontes.length;
atualizarPrevia();
});
nickBtn.addEventListener('click', () => {
nickIndex = (nickIndex + 1) % nicks.length;
nomeInput.value = nicks[nickIndex];
atualizarPrevia();
});
[nomeInput, afiliacaoSelect, classeSelect].forEach(input => {
input.addEventListener('input', atualizarPrevia);
input.addEventListener('change', atualizarPrevia);
});
classeSelect.addEventListener('change', () => {
if (classeSelect.value !== 'População Civil' &&
classeSelect.value !== '') {
alert('Novos usuários devem escolher População Civil.
Desbloqueie outras classes com 200 compartilhamentos ou
missões!');
classeSelect.value = 'População Civil';
atualizarPrevia();
}
});
nextBtn.addEventListener('click', () => {
alert('Avançando para a próxima etapa...');
});
enviarBtn.addEventListener('click', function() {
const nome = nomeInput.value.trim();
const afiliacao = afiliacaoSelect.value;
const classe = classeSelect.value;
if (!nome || !afiliacao || !classe) {
statusDiv.className = 'status error show';
statusDiv.textContent = 'Preencha todos os campos
obrigatórios (Nome de Guerra, Afiliação, Classe) para forjar o cartão.';
return;
let simbolo = simbolos[afiliacao];
const nomeEstilizado = fontes[fontIndex].whatsapp(nome);
const nomeFormatado = `${simbolo} ${nomeEstilizado}`;
const afiliacaoFormatada = `⚑⃝ ${afiliacao}`;
const separador = '----------------------------------';
const mensagem =
`═⟡═════════════════════════⟡═╗
╔⟡ 𖨶⃝ 𝑪𝑨𝑹𝑫 𝑫𝑬 𝑰𝑫𝑬𝑵𝑻𝑰𝑭𝑰𝑪𝑨ÇÃ𝑶 𝑴𝑰𝑳𝑰𝑻𝑨𝑹 𖨶⃝ ⟡╗
═⟡═════════════════════════⟡═╝
║ 𝘕𝘰𝘮𝘦 : ${nomeFormatado.padEnd(30)}
${separador}
║ 𝘈𝘧𝘪𝘭𝘪𝘢çã𝘰 : ${afiliacaoFormatada.padEnd(30)}
${separador}
║ 𝘊𝘭𝘢𝘴𝘴𝘦 : ${classe.padEnd(30)}
${separador}
║ ∘ 𝘈𝘶𝘵𝘰𝘳𝘪𝘻𝘢𝘥𝘰 𝘱𝘰𝘳: @Armin_Oficial
║ ∘ 𝘔𝘰𝘯𝘪𝘵𝘰𝘳𝘢𝘥𝘰 𝘱𝘦𝘭𝘰: Portão de Entrada
║ ∘ 𝗘𝘀𝘁𝗮𝗱𝗼: Em análise preliminar
╚═⟡══════════════════════════⟡═╝`;
const telefone = "5535984072446";
const whatsappLink = `https://wa.me/${telefone}?text=$
{encodeURIComponent(mensagem)}`;
submissionOverlay.style.display = 'flex';
setTimeout(() => {
submissionOverlay.style.display = 'none';
window.open(whatsappLink, '_blank');
statusDiv.className = 'status success show';
statusDiv.textContent = 'Cartão forjado nas forjas de
Mitras! Confirme o envio no WhatsApp para validação no Portão de
Entrada.';
}, 10000);
});
atualizarPrevia();
</script>
</body>
</html>
You might also like
- bombes.xml صفحة هبوط تحميل فيفا و العاب اخرىNo ratings yetbombes.xml صفحة هبوط تحميل فيفا و العاب اخرى44 pages
- Angular Shopping Store: From Scratch to Successful PaymentFrom EverandAngular Shopping Store: From Scratch to Successful PaymentNo ratings yet
