<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miguel Clicker Ultra - 201 QI</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=JetBrains+Mono:wght@700&display=swap');
:root {
--neon-red: #ff3131;
--neon-gold: #fffb00;
}
body {
background-color: #020617;
color: #f8fafc;
font-family: 'Rajdhani', sans-serif;
overflow: hidden;
user-select: none;
touch-action: manipulation;
}
/* Estilo Natalício de Alta Performance */
.snowflakes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.snowflake { color: #fff; font-size: 1.2em; position: absolute; top: -10%; animation: fall linear infinite; opacity: 0.8; }
@keyframes fall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(110vh) rotate(360deg); } }
/* Botão Prenda com Efeito Ultra */
.pushable {
position: relative; background: #7f1d1d; border-radius: 20%; border: none; padding: 0; cursor: pointer;
box-shadow: 0 0 40px rgba(255, 49, 49, 0.2); transition: transform 0.1s, box-shadow 0.3s;
}
.pushable.active-bonus {
box-shadow: 0 0 60px var(--neon-gold);
animation: pulse-gold 1.5s infinite;
}
@keyframes pulse-gold {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.front {
display: flex; align-items: center; justify-content: center; position: relative;
width: 150px; height: 150px; border-radius: 20%; background: #dc2626;
color: white; font-size: 85px; transform: translateY(-10px);
transition: transform 50ms; border: 4px solid #fde047;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
.pushable:active .front { transform: translateY(-2px); }
/* Painéis Retro-Futuristas */
.panel-dev {
border: 2px solid #fbbf24;
background: rgba(0, 0, 0, 0.95);
font-family: 'JetBrains Mono', monospace;
box-shadow: inset 0 0 15px rgba(251, 191, 36, 0.2);
}
.floating-num {
position: absolute; pointer-events: none; animation: float-up 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
font-weight: 900; color: #fde047; z-index: 100; font-family: 'JetBrains Mono';
text-shadow: 2px 2px 0px #000;
}
@keyframes float-up { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-120px) scale(1.5); } }
.dev-glow { box-shadow: 0 0 30px #fbbf24; border-color: #fbbf24 !important; }
/* Layout Mobile amigável */
.shop-container::-webkit-scrollbar { width: 4px; }
.shop-container::-webkit-scrollbar-thumb { background: #fbbf24; border-radius: 10px; }
.meta-achieved {
animation: flash 0.5s 3;
}
@keyframes flash {
50% { background: #fbbf24; color: black; }
}
</style>
</head>
<body class="flex flex-col h-screen">
<div class="snowflakes" id="snow-container"></div>
<!-- Top Bar -->
<header class="p-4 bg-red-950/80 border-b-2 border-yellow-500 flex justify-between items-center z-10 backdrop-blur-sm">
<div class="flex flex-col">
<h1 class="text-2xl font-black text-yellow-400 italic tracking-tighter leading-none">MIGUEL ULTRA</h1>
<div id="meta-tag" class="text-[10px] font-bold text-green-400 uppercase tracking-widest mt-1">META: 16.777.216</div>
</div>
<div class="text-right">
<div id="coin-display" class="text-3xl font-black text-white tracking-tighter">0</div>
<div id="dev-status" class="text-[9px] text-red-500 font-bold uppercase">USER MODE</div>
</div>
</header>
<div class="flex-1 flex flex-col lg:flex-row overflow-hidden">
<!-- Game Stage -->
<div class="flex-1 flex flex-col items-center justify-center p-6 relative order-1">
<!-- Evento Natal 100% Label -->
<div class="absolute top-4 bg-yellow-500/20 border border-yellow-500 px-4 py-1 rounded-full animate-pulse">
<span class="text-yellow-400 text-xs font-bold uppercase italic">❄️ Natal Event x5 Ativo ❄️</span>
</div>
<div id="click-container" class="relative">
<button class="pushable" id="click-btn">
<span class="front" id="btn-icon">🎁</span>
</button>
</div>
<!-- Stats Display -->
<div class="mt-10 w-full max-w-sm bg-slate-900/90 p-5 rounded-2xl border-2 border-red-900 shadow-2xl backdrop-blur-md">
<div class="flex justify-between items-end mb-2">
<div class="flex flex-col">
<span class="text-[10px] text-white/50 font-bold uppercase">Poder de Clique</span>
<span id="vpc-display" class="text-xl font-black text-green-400 leading-none">5 letra / clique</span>
</div>
<div class="text-right">
<span id="current-meta-label" class="text-[10px] text-yellow-500 font-bold uppercase italic">Meta 1</span>
</div>
</div>
<div class="h-3 bg-black/50 rounded-full overflow-hidden border border-white/10 p-[1px]">
<div id="progress-bar" class="h-full bg-gradient-to-r from-red-600 via-yellow-500 to-green-500 w-0 transition-all duration-500 ease-out"></div>
</div>
<div class="flex justify-between mt-2 text-[10px] font-bold">
<span id="progress-percent" class="text-white">0%</span>
<span id="target-value" class="text-white/40">16.777.216</span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-4 mt-8">
<button id="ad-btn" onclick="openAd()" class="group relative px-8 py-3 bg-green-800 border-2 border-yellow-500 rounded-xl font-black text-white text-xs uppercase shadow-lg active:scale-95 transition-all">
<span class="relative z-10">🎄 BÓNUS 24.389x 🎄</span>
<div class="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl"></div>
</button>
<button id="dev-skip-btn" onclick="reward()" class="hidden px-8 py-3 bg-yellow-500 border-2 border-black rounded-xl font-black text-black text-xs uppercase animate-bounce shadow-xl">
⚡ SKIP AD (DEV)
</button>
</div>
</div>
<!-- Loja & Terminal Lateral -->
<div class="w-full lg:w-[400px] bg-slate-950 border-t-2 lg:border-t-0 lg:border-l-2 border-red-900 flex flex-col order-2 shadow-2xl">
<div class="p-4 border-b border-white/5">
<h2 class="text-sm font-black text-blue-400 uppercase italic tracking-widest">Loja de Upgrades (50)</h2>
</div>
<div id="shop" class="flex-1 overflow-y-auto p-2 shop-container space-y-2">
<!-- Itens injetados via JS -->
</div>
<!-- Terminal de QI (Oculto até Senha) -->
<div class="panel-dev p-4 border-t-2 border-yellow-600">
<div class="flex justify-between items-center mb-3">
<span class="text-[10px] text-yellow-500 font-bold uppercase">Console de 201 QI</span>
<span class="text-[8px] text-white/20 italic">v2.0.0-ULTRA</span>
</div>
<input type="password" id="dev-input" oninput="checkDev(this.value)" placeholder="INTRODUZA A SENHA MESTRE" class="w-full bg-black border border-yellow-900/50 p-3 text-yellow-500 text-xs font-bold rounded focus:outline-none placeholder:opacity-20 uppercase tracking-widest">
<div id="dev-tools" class="hidden mt-4 grid grid-cols-2 gap-2 animate-in fade-in slide-in-from-bottom-2">
<button onclick="setCoins(16777216)" class="text-[9px] bg-blue-900/40 border border-blue-500 p-2 rounded font-black hover:bg-blue-900 transition-colors">SET 16.777.216</button>
<button onclick="setCoins(67108864)" class="text-[9px] bg-purple-900/40 border border-purple-500 p-2 rounded font-black hover:bg-purple-900 transition-colors">SET 67.108.864</button>
<button onclick="setCoins(coins * 10)" class="text-[9px] bg-green-900/40 border border-green-500 p-2 rounded font-black hover:bg-green-900 transition-colors">X10 COINS</button>
<button onclick="vpc *= 10; updateUI()" class="text-[9px] bg-red-900/40 border border-red-500 p-2 rounded font-black hover:bg-red-900 transition-colors">X10 PODER</button>
</div>
</div>
</div>
</div>
<!-- Modal do Vídeo de Recompensa -->
<div id="video-modal" class="fixed inset-0 hidden flex-col items-center justify-center bg-black/95 z-[9999] p-6 text-center backdrop-blur-xl">
<div class="relative w-full max-w-lg">
<div class="absolute -top-10 left-0 right-0 text-yellow-500 font-black animate-pulse uppercase tracking-tighter">Sincronizando com a Matrix de Natal...</div>
<video id="ad-player" class="w-full border-4 border-red-600 rounded-2xl shadow-[0_0_50px_rgba(220,38,38,0.5)]" playsinline>
<source src="1000013899.mp4" type="video/mp4">
</video>
<div class="mt-6 flex flex-col items-center">
<div class="w-48 h-1 bg-white/10 rounded-full mb-4 overflow-hidden">
<div id="ad-progress" class="h-full bg-yellow-500 w-0 transition-all"></div>
</div>
<button onclick="reward()" class="text-white/10 text-[10px] uppercase font-bold hover:text-white transition-colors">Forçar Conclusão (Segurança)</button>
</div>
</div>
</div>
<script>
// --- CONFIGURAÇÃO DE ESTADO ---
let coins = 0;
let vpc = 1;
let adMult = 1;
let isDev = false;
const eventMult = 5; // Evento de Natal 100%
let currentMetaIndex = 0;
// As tuas metas preferidas
const metas = [16777216, 67108864, 281474976710656, Infinity];
const metaLabels = ["Meta: 16M", "Meta: 64M", "Meta: 16M²", "Génio Supremo"];
const secret = "2444666668888888";
// Gerador de 50 Itens com Nomes Épicos
const prefixes = ["Gorro", "Trenó", "Cubo", "Algoritmo", "Chip", "Sonda", "Neurónio", "Galáxia", "Fórmula", "Livro"];
const suffixes = ["de Natal", "de 201 QI", "do Miguel", "Espacial", "Infinito", "Ancestral", "Cibernético", "Dourado", "de Ouro", "Quântico"];
const shopData = [];
for(let i=1; i<=50; i++) {
const p = prefixes[(i-1) % prefixes.length];
const s = suffixes[Math.floor((i-1) / 5) % suffixes.length];
shopData.push({
name: `${p} ${s} #${i}`,
cost: Math.pow(1.88, i) * 12,
inc: Math.pow(1.68, i) * 2.5
});
}
// --- LÓGICA DO JOGO ---
function format(n) {
if (n >= 1e15) return n.toExponential(3).replace("e+", "E+");
if (n >= 1e9) return (n / 1e9).toFixed(2) + "B";
if (n >= 1e6) return (n / 1e6).toFixed(2) + "M";
return Math.floor(n).toLocaleString('pt-PT');
}
function checkDev(val) {
if (val === secret) {
isDev = true;
document.getElementById('dev-status').innerText = "DEV MODE ACTIVE";
document.getElementById('dev-status').className = "text-[9px] text-yellow-500 font-bold uppercase tracking-widest animate-pulse";
document.getElementById('dev-skip-btn').classList.remove('hidden');
document.getElementById('dev-tools').classList.remove('hidden');
document.getElementById('dev-input').classList.add('dev-glow');
showFloatingText("BEM-VINDO, MIGUEL", "yellow-400");
}
}
function setCoins(val) {
if(isDev) {
coins = val;
updateUI();
}
}
function updateUI() {
// Atualizar Dinheiro
document.getElementById('coin-display').innerText = format(coins);
// Poder de clique: Upgrades * Ad * EventoNatal
const power = vpc * adMult * eventMult;
document.getElementById('vpc-display').innerText = `${format(power)} letra / clique`;
// Progressão de Metas
const currentTarget = metas[currentMetaIndex];
if (coins >= currentTarget && currentTarget !== Infinity) {
currentMetaIndex++;
document.getElementById('meta-tag').innerText = "META: " + format(metas[currentMetaIndex]);
document.getElementById('target-value').innerText = format(metas[currentMetaIndex]);
document.getElementById('current-meta-label').innerText = metaLabels[currentMetaIndex];
document.getElementById('meta-tag').parentElement.classList.add('meta-achieved');
setTimeout(() => document.getElementById('meta-tag').parentElement.classList.remove('meta-achieved'), 2000);
}
const progress = Math.min((coins / currentTarget) * 100, 100);
document.getElementById('progress-bar').style.width = progress + '%';
document.getElementById('progress-percent').innerText = Math.floor(progress) + '%';
// Estilo do botão se houver bónus
if(adMult > 1) {
document.getElementById('click-btn').classList.add('active-bonus');
document.getElementById('btn-icon').innerText = '🌟';
} else {
document.getElementById('click-btn').classList.remove('active-bonus');
document.getElementById('btn-icon').innerText = '🎁';
}
renderShop();
}
function renderShop() {
const container = document.getElementById('shop');
const scrollPos = container.scrollTop;
container.innerHTML = '';
shopData.forEach((it, idx) => {
const canBuy = coins >= it.cost;
const b = document.createElement('button');
b.className = `w-full p-3 rounded-lg border-l-4 flex flex-col transition-all mb-2 ${
canBuy
? 'bg-slate-900 border-green-500 hover:bg-slate-800'
: 'bg-slate-950/50 border-red-900 opacity-40 grayscale'
}`;
b.onclick = () => {
if(canBuy) {
coins -= it.cost;
vpc += it.inc;
it.cost *= 2.45;
updateUI();
}
};
b.innerHTML = `
<div class="flex justify-between w-full">
<span class="text-[10px] font-black uppercase text-white">${idx + 1}. ${it.name}</span>
<span class="text-[10px] font-bold text-yellow-500">${format(it.cost)}</span>
</div>
<div class="text-[8px] text-green-400 font-bold uppercase mt-1">+${format(it.inc)} poder base</div>
`;
container.appendChild(b);
});
container.scrollTop = scrollPos;
}
// --- SISTEMA DE ANÚNCIOS (VÍDEO) ---
const adPlayer = document.getElementById('ad-player');
function openAd() {
const modal = document.getElementById('video-modal');
modal.style.display = 'flex';
adPlayer.currentTime = 0;
const playPromise = adPlayer.play();
if (playPromise !== undefined) {
playPromise.catch(() => {
// Fallback se o browser bloquear autoplay
setTimeout(reward, 3000);
});
}
// Barra de progresso do vídeo
const interval = setInterval(() => {
if(adPlayer.paused) {
clearInterval(interval);
return;
}
const p = (adPlayer.currentTime / adPlayer.duration) * 100;
document.getElementById('ad-progress').style.width = p + '%';
}, 100);
adPlayer.onended = () => {
clearInterval(interval);
reward();
};
}
function reward() {
adMult = 24389; // O teu segundo número favorito
document.getElementById('video-modal').style.display = 'none';
adPlayer.pause();
showFloatingText("QI BOOST: 24.389x!", "yellow-400");
// Bónus dura 45 segundos para ser generoso
setTimeout(() => {
adMult = 1;
updateUI();
showFloatingText("Bónus Expirado", "red-500");
}, 45000);
updateUI();
}
// --- CLIQUES ---
document.getElementById('click-btn').onclick = (e) => {
const gain = vpc * adMult * eventMult;
coins += gain;
updateUI();
// Efeito visual de clique
const n = document.createElement('div');
n.className = 'floating-num';
n.innerText = `+${format(gain)}`;
// Posição ajustada para mobile (touch) ou mouse
const x = e.clientX || (e.touches ? e.touches[0].clientX : window.innerWidth/2);
const y = e.clientY || (e.touches ? e.touches[0].clientY : window.innerHeight/2);
n.style.left = x + 'px';
n.style.top = y + 'px';
if(adMult > 1) {
n.style.color = '#fffb00';
n.style.fontSize = '2rem';
}
document.body.appendChild(n);
setTimeout(() => n.remove(), 800);
};
function showFloatingText(txt, colorClass) {
const n = document.createElement('div');
n.className = `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[999] text-2xl font-black text-${colorClass} uppercase italic pointer-events-none animate-bounce`;
n.innerText = txt;
document.body.appendChild(n);
setTimeout(() => n.remove(), 2000);
}
// --- AMBIENTE ---
function createSnow() {
const container = document.getElementById('snow-container');
for(let i=0; i<40; i++) {
const s = document.createElement('div');
s.className = 'snowflake';
s.innerText = '❄';
s.style.left = Math.random() * 100 + 'vw';
s.style.animationDuration = (Math.random() * 4 + 3) + 's';
s.style.opacity = Math.random();
s.style.fontSize = (Math.random() * 15 + 10) + 'px';
container.appendChild(s);
}
}
window.onload = () => {
createSnow();
updateUI();
// Prevenir menu de contexto no clique longo do telemóvel
document.addEventListener('contextmenu', event => event.preventDefault());
};
</script>
</body>
</html>