42
Counting
Sort:
23 days ago
0
#11
98 | I kind of prefer the notes but maybe some of the other members do not like the notifications that result from it.
60
<!DOCTYPE html>
<html>
<head>
<title>Quantum Clicker: Ghost Protocol</title>
<style>
:root { --acc: #00ffa3; --panel-w: 420px; }
body { margin: 0; background: #000; color: #e0e0f0; font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
#bg-image {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: -2; background-size: cover; background-position: center;
transition: opacity 2s ease-in-out;
}
#overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at center, rgba(0,0,0,0) 20%, rgba(0,0,0,0.15) 100%);
z-index: -1; pointer-events: none;
}
#view-toggle {
position: fixed; top: 20px; left: 20px; z-index: 100;
background: rgba(0,0,0,0.3); border: 1px solid var(--acc);
color: var(--acc); padding: 8px 15px; border-radius: 4px;
font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; letter-spacing: 2px; backdrop-filter: blur(10px);
}
#main-ui { display: flex; width: 100vw; height: 100vh; }
.view-mode-active #main-ui { opacity: 0; pointer-events: none; }
#action-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#shop-container {
width: var(--panel-w); background: transparent;
display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.05);
}
#nav-bar {
display: flex; justify-content: space-around; padding: 10px;
background: rgba(0,0,0,0.2); backdrop-filter: blur(10px);
}
.nav-btn {
background: transparent; border: 1px solid rgba(0, 255, 163, 0.3);
color: var(--acc); font-size: 9px; font-weight: 900; padding: 4px 8px;
border-radius: 3px; cursor: pointer;
}
header { position: absolute; top: 60px; text-align: center; width: 100%; }
#score { font-size: 52px; font-weight: 900; color: var(--acc); margin: 0; text-shadow: 0 0 30px rgba(0, 255, 163, 0.5); }
#pps-main { font-size: 11px; opacity: 1; letter-spacing: 4px; font-weight: 800; text-transform: uppercase; }
#btn {
width: 280px; height: 280px; background: rgba(0,0,0,0.1);
border: 4px solid var(--acc); border-radius: 50%; cursor: pointer;
color: var(--acc); font-weight: 900; font-size: 24px;
transition: 0.1s; box-shadow: 0 0 50px rgba(0,0,0,0.2);
text-transform: uppercase; letter-spacing: 4px;
}
#btn:active { transform: scale(0.94); background: var(--acc); color: #000; }
#shop-list { flex: 1; overflow-y: auto; padding: 20px; }
/* NO BLUR - JUST PURE VISIBILITY */
.upgrade {
background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
padding: 16px; margin-bottom: 12px; display: none; /* Hidden by default */
justify-content: space-between; align-items: center;
border-radius: 12px; cursor: pointer; transition: transform 0.1s;
}
.upgrade:hover { background: rgba(0, 0, 0, 0.5); border-color: var(--acc); transform: scale(1.02); }
.upgrade:active { transform: scale(0.98); }
.u-id { font-size: 9px; opacity: 0.5; font-family: monospace; }
.u-name { font-weight: 800; font-size: 16px; color: #fff; }
.u-pps { font-size: 11px; color: var(--acc); font-weight: 900; }
.cost { font-weight: 900; font-family: monospace; font-size: 14px; color: var(--acc); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--acc); }
</style>
</head>
<body>
<div id="bg-image"></div>
<div id="overlay"></div>
<button id="view-toggle" onclick="toggleView()">View Background</button>
<div id="main-ui">
<div id="action-zone">
<header>
<h1 id="score">0</h1>
<div id="pps-main">0 / SEC</div>
</header>
<button id="btn" onclick="tap()">ENGAGE</button>
</div>
<div id="shop-container">
<div id="nav-bar">
<button class="nav-btn" onclick="jump(0)">1</button>
<button class="nav-btn" onclick="jump(1000)">1K</button>
<button class="nav-btn" onclick="jump(2000)">2K</button>
<button class="nav-btn" onclick="jump(3000)">3K</button>
<button class="nav-btn" onclick="jump(4000)">4K</button>
<button class="nav-btn" onclick="jump(4999)">5K</button>
</div>
<div id="shop-list"></div>
</div>
</div>
<script>
let score = 0, pps = 0, tapPower = 1, isViewMode = false;
const upgrades = [];
const gallery = [
"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1501854140801-50d01698950b?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?auto=format&fit=crop&w=1920&q=95"
];
function rotateImage() {
const bg = document.getElementById('bg-image');
bg.style.backgroundImage = `url('${gallery[Math.floor(Math.random() * gallery.length)]}')`;
}
function toggleView() {
isViewMode = !isViewMode;
document.body.classList.toggle('view-mode-active');
}
function jump(n) {
const el = document.getElementById("up-" + n);
if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
}
const pre = ["Nano", "Micro", "Turbo", "Hyper", "Mega", "Giga", "Tera", "Peta", "Exa", "Zetta", "Yotta", "Quantum", "Plasma", "Aether", "Void", "Cosmic", "Galactic", "Solar", "Nuclear", "Bio", "Cyber", "Dark", "Light", "Spirit", "Logic", "Data", "Cortex", "Prime", "Omega", "Infinity"];
const nns = ["Node", "Core", "Relay", "Array", "Matrix", "Engine", "Drive", "Web", "Mesh", "Forge", "Cell", "Warp", "Drill", "Vault", "Link"];
for(let i = 0; i < 5000; i++) {
upgrades.push({
id: i,
name: pre[i % pre.length] + " " + nns[Math.floor(i / pre.length) % nns.length],
cost: 15 * Math.pow(1.18, i),
power: Math.pow(1.15, i),
count: 0
});
}
function format(n) {
if (n >= 1.79e308) return "SINGULARITY";
if (n < 1000) return Math.floor(n).toLocaleString();
const sufs = ["","K","M","B","T","Qa","Qi","Sx","Sp","Oc","No","Dc","Ud","Dd","Td","Qd","Qn"];
let exp = Math.floor(Math.log10(n));
let idx = Math.floor(exp/3);
if (idx < sufs.length) return (n/Math.pow(10,idx*3)).toFixed(2)+" "+sufs[idx];
return n.toExponential(2).replace("e+", "e");
}
function tap() { score += tapPower; updateUI(); }
function buy(i) {
let u = upgrades[i];
if (score >= u.cost) {
score -= u.cost;
u.count++;
pps += u.power;
tapPower = 1 + (pps * 0.1);
u.cost *= 1.55;
updateUI();
save();
}
}
function updateUI() {
document.getElementById('score').innerText = format(score);
document.getElementById('pps-main').innerText = format(pps) + " / SEC";
const shopList = document.getElementById('shop-list');
upgrades.forEach((u, i) => {
let el = document.getElementById("up-" + i);
if (!el) {
el = document.createElement('div');
el.id = "up-"+i;
el.className = "upgrade";
el.onclick = () => buy(i);
shopList.appendChild(el);
}
// PERFECT VISIBILITY LOGIC
// Only show if affordable OR if you already own it
if (score >= u.cost || u.count > 0) {
el.style.display = "flex";
el.innerHTML = `
<div class="u-info">
<div class="u-id">#${i + 1}</div>
<div class="u-name">${u.name} [${u.count}]</div>
<div class="u-pps">+${format(u.power)}/s</div>
</div>
<div class="cost">${format(u.cost)}</div>
`;
} else {
el.style.display = "none"; // Vanish when unaffordable
}
});
}
function save() {
localStorage.setItem("qc_ghost_v39", JSON.stringify({
score, pps, tapPower, last: Date.now(),
counts: upgrades.map(u => u.count),
costs: upgrades.map(u => u.cost)
}));
}
function load() {
let s = localStorage.getItem("qc_ghost_v39");
if(s) {
let d = JSON.parse(s); score = d.score; pps = d.pps; tapPower = d.tapPower;
d.counts.forEach((q, i) => { upgrades[i].count = q; upgrades[i].cost = d.costs[i]; });
let away = (Date.now() - d.last) / 1000; if(away > 1) score += pps * away;
}
}
setInterval(() => { score += pps * 0.1; document.getElementById('score').innerText = format(score); }, 100);
setInterval(save, 10000);
setInterval(rotateImage, 300000);
load();
rotateImage();
updateUI();
</script>
</body>
</html>
sorry, thats buggy. here
<!DOCTYPE html>
<html>
<head>
<title>Quantum Clicker: Purified Engine</title>
<style>
:root { --acc: #00ffa3; --panel-w: 420px; }
body { margin: 0; background: #000; color: #e0e0f0; font-family: 'Inter', sans-serif; height: 100vh; overflow: hidden; }
#bg-image {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: -2; background-size: cover; background-position: center;
transition: opacity 2s ease-in-out; background-attachment: fixed;
}
#overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at center, rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 100%);
z-index: -1; pointer-events: none;
}
#main-ui { display: flex; width: 100vw; height: 100vh; }
#action-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#shop-container {
width: var(--panel-w); background: transparent;
display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,0.05);
}
#nav-bar {
display: flex; justify-content: space-around; padding: 10px;
background: rgba(0,0,0,0.3); backdrop-filter: blur(15px);
}
.nav-btn {
background: transparent; border: 1px solid var(--acc);
color: var(--acc); font-size: 9px; font-weight: 900; padding: 4px 8px;
border-radius: 3px; cursor: pointer; text-transform: uppercase;
}
header { position: absolute; top: 60px; text-align: center; width: 100%; }
#score { font-size: 52px; font-weight: 900; color: var(--acc); margin: 0; text-shadow: 0 0 30px rgba(0, 255, 163, 0.5); }
#pps-main { font-size: 11px; letter-spacing: 4px; font-weight: 800; text-transform: uppercase; }
#btn {
width: 280px; height: 280px; background: rgba(0,0,0,0.1);
border: 4px solid var(--acc); border-radius: 50%; cursor: pointer;
color: var(--acc); font-weight: 900; font-size: 24px;
transition: 0.1s; text-transform: uppercase; letter-spacing: 4px;
}
#btn:active { transform: scale(0.92); background: var(--acc); color: #000; }
#shop-list { flex: 1; overflow-y: auto; padding: 20px; }
.upgrade {
background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
padding: 16px; margin-bottom: 12px; display: flex;
justify-content: space-between; align-items: center;
border-radius: 12px; cursor: pointer;
}
.upgrade:hover { background: rgba(0, 0, 0, 0.6); border-color: var(--acc); }
.u-id { font-size: 9px; opacity: 0.6; font-family: monospace; }
.u-name { font-weight: 800; font-size: 16px; color: #fff; }
.u-pps { font-size: 11px; color: var(--acc); font-weight: 900; }
.cost { font-weight: 900; font-family: monospace; font-size: 14px; color: var(--acc); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--acc); }
</style>
</head>
<body>
<div id="bg-image"></div>
<div id="overlay"></div>
<div id="main-ui">
<div id="action-zone">
<header>
<h1 id="score">0</h1>
<div id="pps-main">0 / SEC</div>
</header>
<button id="btn" onclick="tap()">ENGAGE</button>
</div>
<div id="shop-container">
<div id="nav-bar">
<button class="nav-btn" onclick="jump(0)">1</button>
<button class="nav-btn" onclick="jump(1000)">1K</button>
<button class="nav-btn" onclick="jump(2000)">2K</button>
<button class="nav-btn" onclick="jump(3000)">3K</button>
<button class="nav-btn" onclick="jump(4000)">4K</button>
<button class="nav-btn" onclick="jump(4999)">5K</button>
</div>
<div id="shop-list"></div>
</div>
</div>
<script>
let score = 0, pps = 0, tapPower = 1;
const upgrades = [];
const gallery = [
"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1920&q=95",
"https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=1920&q=95"
];
function rotateImage() {
document.getElementById('bg-image').style.backgroundImage = `url('${gallery[Math.floor(Math.random() * gallery.length)]}')`;
}
function jump(n) {
const el = document.getElementById("up-" + n);
if(el) el.scrollIntoView({behavior:'smooth'});
}
const pre = ["Nano", "Micro", "Turbo", "Hyper", "Mega", "Giga", "Tera", "Peta", "Exa", "Zetta", "Yotta", "Quantum", "Plasma", "Aether", "Void", "Cosmic", "Galactic", "Solar", "Nuclear", "Bio", "Cyber", "Dark", "Light", "Spirit", "Logic", "Data", "Cortex", "Prime", "Omega", "Infinity"];
const nns = ["Node", "Core", "Relay", "Array", "Matrix", "Engine", "Drive", "Web", "Mesh", "Forge", "Cell", "Warp", "Drill", "Vault", "Link"];
// PURE MATH INITIALIZATION
for(let i = 0; i < 5000; i++) {
upgrades.push({
id: i,
name: pre[i % pre.length] + " " + nns[Math.floor(i / pre.length) % nns.length],
baseCost: 15 * Math.pow(1.18, i),
basePower: Math.pow(1.15, i),
count: 0,
cost: 0 // Calculated later
});
}
function format(n) {
if (n >= 1.79e308) return "SINGULARITY";
if (n < 1000) return Math.floor(n).toLocaleString();
const sufs = ["","K","M","B","T","Qa","Qi","Sx","Sp","Oc","No","Dc","Ud","Dd","Td","Qd","Qn"];
let exp = Math.floor(Math.log10(n));
let idx = Math.floor(exp/3);
if (idx < sufs.length) return (n/Math.pow(10,idx*3)).toFixed(2)+" "+sufs[idx];
return n.toExponential(2).replace("e+", "e");
}
function tap() { score += tapPower; updateUI(); }
function buy(i) {
let u = upgrades[i];
if (score >= u.cost) {
score -= u.cost;
u.count++;
recalcStats();
updateUI();
save();
}
}
function recalcStats() {
pps = 0;
upgrades.forEach(u => {
u.cost = u.baseCost * Math.pow(1.55, u.count);
pps += u.basePower * u.count;
});
tapPower = 1 + (pps * 0.1);
}
function updateUI() {
document.getElementById('score').innerText = format(score);
document.getElementById('pps-main').innerText = format(pps) + " / SEC";
const shopList = document.getElementById('shop-list');
upgrades.forEach((u, i) => {
let el = document.getElementById("up-" + i);
// PERFECT VISIBILITY: Own it OR can afford it
// Plus, only render if it's within 50 tiers of your current "highest" tier to kill lag
let visible = (score >= u.cost || u.count > 0);
if (visible) {
if (!el) {
el = document.createElement('div');
el.id = "up-"+i;
el.className = "upgrade";
el.onclick = () => buy(i);
shopList.appendChild(el);
}
el.style.display = "flex";
el.innerHTML = `
<div class="u-info">
<div class="u-id">#${i + 1}</div>
<div class="u-name">${u.name} [${u.count}]</div>
<div class="u-pps">+${format(u.basePower)}/s</div>
</div>
<div class="cost">${format(u.cost)}</div>
`;
} else if (el) {
el.style.display = "none";
}
});
}
function save() {
localStorage.setItem("qc_purified_v4", JSON.stringify({
score, counts: upgrades.map(u => u.count), last: Date.now()
}));
}
function load() {
let s = localStorage.getItem("qc_purified_v4");
if(s) {
let d = JSON.parse(s);
score = d.score;
d.counts.forEach((q, i) => { upgrades[i].count = q; });
recalcStats();
let away = (Date.now() - d.last) / 1000;
if(away > 1) score += pps * away;
} else {
recalcStats();
}
}
setInterval(() => { score += pps * 0.1; document.getElementById('score').innerText = format(score); }, 100);
setInterval(save, 10000);
setInterval(rotateImage, 300000);
load();
rotateImage();
updateUI();
</script>
</body>
</html>
still beta, ill send a better code sometime
993548
89