added analytics tracker
This commit is contained in:
+200
-96
@@ -1,109 +1,213 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calculator</title>
|
||||
</head>
|
||||
<body style="margin:0; background:#0f1b30; display:flex; justify-content:center; padding:40px 16px;">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Calculator</title>
|
||||
<script
|
||||
defer
|
||||
src="https://analytics.bastamasta.dev/script.js"
|
||||
data-website-id="802eb590-1dbd-42c2-997a-c5ad9f1537eb"
|
||||
></script>
|
||||
</head>
|
||||
<body
|
||||
style="
|
||||
margin: 0;
|
||||
background: #0f1b30;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 40px 16px;
|
||||
"
|
||||
>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.wrap {
|
||||
background: #1a2a4a;
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
color: #fff;
|
||||
}
|
||||
.title {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.input-row {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.input-row label {
|
||||
font-size: 12px;
|
||||
color: #8eb4e0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
.input-row input[type="number"] {
|
||||
width: 100%;
|
||||
background: #253659;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
padding: 12px 16px;
|
||||
outline: none;
|
||||
}
|
||||
.op-select {
|
||||
width: 100%;
|
||||
background: #253659;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 13px 16px;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.calc-btn {
|
||||
width: 100%;
|
||||
background: #3b82f6;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.calc-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
.calc-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.log-box {
|
||||
background: #253659;
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: none;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.log-line {
|
||||
font-size: 14px;
|
||||
color: #5bc4f5;
|
||||
font-family: monospace;
|
||||
margin-bottom: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.log-line.show {
|
||||
opacity: 1;
|
||||
}
|
||||
.result-box {
|
||||
background: #2a3f6e;
|
||||
border-radius: 12px;
|
||||
padding: 18px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
.result-val {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: #5bc4f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
.wrap {
|
||||
background: #1a2a4a; border-radius: 16px; padding: 28px 24px;
|
||||
max-width: 480px; width: 100%; font-family: sans-serif; color: #fff;
|
||||
}
|
||||
.title { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 24px; }
|
||||
.input-row { margin-bottom: 14px; }
|
||||
.input-row label { font-size: 12px; color: #8eb4e0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; display: block; }
|
||||
.input-row input[type="number"] { width: 100%; background: #253659; border: none; border-radius: 10px; color: #fff; font-size: 22px; font-weight: 600; padding: 12px 16px; outline: none; }
|
||||
.op-select { width: 100%; background: #253659; border: none; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 500; padding: 13px 16px; outline: none; appearance: none; cursor: pointer; margin-bottom: 14px; }
|
||||
.calc-btn { width: 100%; background: #3b82f6; color: #fff; border: none; border-radius: 12px; font-size: 18px; font-weight: 700; padding: 16px; cursor: pointer; margin-bottom: 16px; }
|
||||
.calc-btn:hover { background: #2563eb; }
|
||||
.calc-btn:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.log-box { background: #253659; border-radius: 12px; padding: 16px; display: none; margin-bottom: 16px; }
|
||||
.log-line { font-size: 14px; color: #5bc4f5; font-family: monospace; margin-bottom: 8px; opacity: 0; transition: opacity 0.4s; }
|
||||
.log-line.show { opacity: 1; }
|
||||
.result-box { background: #2a3f6e; border-radius: 12px; padding: 18px; text-align: center; display: none; }
|
||||
.result-val { font-size: 36px; font-weight: 700; color: #5bc4f5; }
|
||||
</style>
|
||||
<div class="wrap">
|
||||
<div class="title">Calculator</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="title">Calculator</div>
|
||||
<div class="input-row">
|
||||
<label>First number</label>
|
||||
<input type="number" id="num1" value="12" />
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<label>First number</label>
|
||||
<input type="number" id="num1" value="12">
|
||||
</div>
|
||||
<select class="op-select" id="op">
|
||||
<option value="add">Addition (+)</option>
|
||||
<option value="sub" selected>Subtraction (-)</option>
|
||||
<option value="mul">Multiplication (×)</option>
|
||||
<option value="div">Division (÷)</option>
|
||||
<option value="mod">Modulo (%)</option>
|
||||
<option value="pow">Power (^)</option>
|
||||
</select>
|
||||
|
||||
<select class="op-select" id="op">
|
||||
<option value="add">Addition (+)</option>
|
||||
<option value="sub" selected>Subtraction (-)</option>
|
||||
<option value="mul">Multiplication (×)</option>
|
||||
<option value="div">Division (÷)</option>
|
||||
<option value="mod">Modulo (%)</option>
|
||||
<option value="pow">Power (^)</option>
|
||||
</select>
|
||||
<div class="input-row">
|
||||
<label>Second number</label>
|
||||
<input type="number" id="num2" value="12" />
|
||||
</div>
|
||||
|
||||
<div class="input-row">
|
||||
<label>Second number</label>
|
||||
<input type="number" id="num2" value="12">
|
||||
</div>
|
||||
<button class="calc-btn" id="calcBtn" onclick="startCalc()">
|
||||
Calculate
|
||||
</button>
|
||||
|
||||
<button class="calc-btn" id="calcBtn" onclick="startCalc()">Calculate</button>
|
||||
<div class="log-box" id="logBox"></div>
|
||||
<div class="result-box" id="resultBox">
|
||||
<div class="result-val">Hello World</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log-box" id="logBox"></div>
|
||||
<div class="result-box" id="resultBox">
|
||||
<div class="result-val">Hello World</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const fakeLogs = [
|
||||
"Initializing AI core...",
|
||||
"Fetching data from NASA servers...",
|
||||
"Installing Einstein mind module...",
|
||||
"Reading secret NASA research papers...",
|
||||
"Consulting with Nikola Tesla's ghost...",
|
||||
"Optimizing multiverse calculations...",
|
||||
"Cross-referencing string theory...",
|
||||
"Decrypting alien mathematics...",
|
||||
"Calibrating quantum entanglement...",
|
||||
"Compiling 47 years of research...",
|
||||
"Verifying with Stephen Hawking's backup drive...",
|
||||
"Finalizing calculations...",
|
||||
];
|
||||
|
||||
<script>
|
||||
const fakeLogs = [
|
||||
"Initializing AI core...",
|
||||
"Fetching data from NASA servers...",
|
||||
"Installing Einstein mind module...",
|
||||
"Reading secret NASA research papers...",
|
||||
"Consulting with Nikola Tesla's ghost...",
|
||||
"Optimizing multiverse calculations...",
|
||||
"Cross-referencing string theory...",
|
||||
"Decrypting alien mathematics...",
|
||||
"Calibrating quantum entanglement...",
|
||||
"Compiling 47 years of research...",
|
||||
"Verifying with Stephen Hawking's backup drive...",
|
||||
"Finalizing calculations..."
|
||||
];
|
||||
async function startCalc() {
|
||||
const logBox = document.getElementById("logBox");
|
||||
const resultBox = document.getElementById("resultBox");
|
||||
const btn = document.getElementById("calcBtn");
|
||||
|
||||
async function startCalc() {
|
||||
const logBox = document.getElementById("logBox");
|
||||
const resultBox = document.getElementById("resultBox");
|
||||
const btn = document.getElementById("calcBtn");
|
||||
logBox.innerHTML = "";
|
||||
logBox.style.display = "block";
|
||||
resultBox.style.display = "none";
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Computing...";
|
||||
|
||||
logBox.innerHTML = "";
|
||||
logBox.style.display = "block";
|
||||
resultBox.style.display = "none";
|
||||
btn.disabled = true;
|
||||
btn.textContent = "Computing...";
|
||||
const selected = [...fakeLogs]
|
||||
.sort(() => 0.5 - Math.random())
|
||||
.slice(0, 8 + Math.floor(Math.random() * 3));
|
||||
selected[selected.length - 1] = "Finalizing calculations...";
|
||||
|
||||
const selected = [...fakeLogs].sort(() => 0.5 - Math.random()).slice(0, 8 + Math.floor(Math.random() * 3));
|
||||
selected[selected.length - 1] = "Finalizing calculations...";
|
||||
for (let i = 0; i < selected.length; i++) {
|
||||
await new Promise((r) =>
|
||||
setTimeout(r, 900 + Math.random() * 500),
|
||||
);
|
||||
const line = document.createElement("div");
|
||||
line.className = "log-line";
|
||||
line.textContent = "> " + selected[i];
|
||||
logBox.appendChild(line);
|
||||
setTimeout(() => line.classList.add("show"), 20);
|
||||
logBox.scrollTop = logBox.scrollHeight;
|
||||
}
|
||||
|
||||
for (let i = 0; i < selected.length; i++) {
|
||||
await new Promise(r => setTimeout(r, 900 + Math.random() * 500));
|
||||
const line = document.createElement("div");
|
||||
line.className = "log-line";
|
||||
line.textContent = "> " + selected[i];
|
||||
logBox.appendChild(line);
|
||||
setTimeout(() => line.classList.add("show"), 20);
|
||||
logBox.scrollTop = logBox.scrollHeight;
|
||||
}
|
||||
|
||||
await new Promise(r => setTimeout(r, 800));
|
||||
resultBox.style.display = "block";
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Calculate";
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
await new Promise((r) => setTimeout(r, 800));
|
||||
resultBox.style.display = "block";
|
||||
btn.disabled = false;
|
||||
btn.textContent = "Calculate";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user