<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Make the world a better place</title>
<style>
:root{
--bg:#eaf4ff;
--card:#ffffff;
--accent:#0066ff;
--accent-2:#00d4ff;
--muted:#6b7280;
--glass: rgba(255,255,255,0.6);
--shadow-strong: 0 18px 40px rgba(10,25,50,0.12);
--shadow-soft: 0 8px 20px rgba(20,35,60,0.06);
--success:#28c76f;
--danger:#ff4d6d;
--gold:#ffbe3d;
--radius-lg:14px;
--radius-md:8px;
--ui-pad:16px;
}
/* reset / base */
* { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body { height:100%; }
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(0,102,255,0.06), transparent 8%),
radial-gradient(800px 400px at 90% 90%, rgba(0,212,255,0.03), transparent 8%),
linear-gradient(135deg,#e9f7ff 0%, var(--bg) 60%);
margin: 0;
padding: 28px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
gap:24px;
color: #0f1724;
}
/* containers */
.container {
background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
padding: 22px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-strong);
text-align: center;
width: 440px;
border: 1px solid rgba(6, 24, 60, 0.04);
backdrop-filter: blur(6px);
}
.game {
background: linear-gradient(180deg, rgba(255,255,255,0.96), #fbfdff);
padding: 20px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-strong);
width: 560px;
border: 1px solid rgba(6, 24, 60, 0.05);
transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
}
.game:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(10,30,80,0.14); }
/* headings & text */
h1 {
font-size: 20px;
margin: 6px 0 12px;
letter-spacing: .2px;
font-weight: 700;
color: #08203a;
}
p {
margin: 16px 0;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
/* inputs and controls */
input {
padding: 12px 14px;
margin: 10px 0;
width: 80%;
border: 1px solid rgba(6,24,60,0.08);
border-radius: 10px;
font-size: 14px;
outline: none;
transition: box-shadow .16s ease, transform .12s ease, border-color .12s ease;
background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,250,255,0.85));
box-shadow: 0 6px 18px rgba(20,30,60,0.03) inset;
}
input:focus {
border-color: var(--accent);
box-shadow: 0 6px 22px rgba(0,102,255,0.12);
transform: translateY(-2px);
}
/* primary buttons with game feel */
button {
padding: 10px 22px;
background: linear-gradient(180deg, var(--accent), #0047bb);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
letter-spacing: .2px;
display: inline-flex;
align-items: center;
gap:10px;
box-shadow: 0 8px 30px rgba(0,102,255,0.18), 0 2px 6px rgba(0,0,0,0.06);
transition: transform .12s ease, box-shadow .14s ease, filter .12s ease;
}
button:hover {
transform: translateY(-4px) scale(1.01);
filter: brightness(1.03);
box-shadow: 0 16px 40px rgba(0,102,255,0.20);
}
button:active { transform: translateY(-1px) scale(.995); box-shadow: 0 8px 20px rgba(0,80,200,0.16); }
/* secondary subtle button style */
button.secondary {
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,247,255,0.9));
color: #07203a;
border: 1px solid rgba(6,24,60,0.06);
box-shadow: 0 6px 18px rgba(20,30,60,0.03);
}
/* results & explanation */
#result {
font-weight: 700;
color: #0b1724;
margin-top: 8px;
display: inline-block;
padding: 8px 12px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(6,102,255,0.06), rgba(0,212,255,0.03));
box-shadow: 0 6px 18px rgba(6,102,255,0.06);
}
#explanation { color: #374151; font-size: 13px; }
/* animated loading / progress */
#loading {
font-size: 12px;
color: #444;
min-width: 140px;
text-align: center;
position: relative;
padding: 6px 8px;
}
#loading::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -8px;
width: 60%;
height: 6px;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
box-shadow: 0 6px 18px rgba(0,102,255,0.14);
animation: loadingBar 1.6s linear infinite;
opacity: .95;
}
@keyframes loadingBar {
0% { transform: translateX(-110%) scaleX(.28); opacity:.6 }
50% { transform: translateX(0%) scaleX(.9); opacity:1 }
100% { transform: translateX(110%) scaleX(.28); opacity:.6 }
}
/* game grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
gap: 10px;
padding: 14px;
justify-items: center;
align-items: center;
max-height: 60vh;
overflow: auto;
transition: all .18s ease;
}
/* avatar tiles */
.avatar {
width:56px;
height:56px;
display:flex;
justify-content:center;
align-items:center;
font-size:20px;
border-radius:12px;
cursor:pointer;
user-select:none;
transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease, filter .18s ease;
box-shadow: 0 8px 20px rgba(10,25,50,0.06);
background: linear-gradient(180deg,#ffffff,#f2f8ff);
position: relative;
border: 1px solid rgba(6,24,60,0.04);
transform-origin: center;
will-change: transform, box-shadow;
overflow: visible;
}
.avatar:hover {
transform: translateY(-8px) rotate(-2deg) scale(1.06);
box-shadow: 0 20px 40px rgba(6,24,60,0.12);
z-index: 6;
}
.avatar:active { transform: scale(.97) rotate(-1deg); box-shadow: 0 10px 26px rgba(6,24,60,0.10); }
/* subtle glow ring on focus/selected */
.avatar:focus, .avatar.selected {
outline: none;
box-shadow: 0 18px 36px rgba(0,102,255,0.14), 0 0 0 6px rgba(0,102,255,0.06);
transform: translateY(-10px) scale(1.08);
}
/* status decorations */
.avatar.killed {
background: linear-gradient(180deg,#fff7f7,#fff0f2);
transform: rotate(-6deg) scale(.98);
box-shadow: 0 10px 28px rgba(0,0,0,0.08);
filter: grayscale(.28) brightness(.95);
opacity: .92;
}
/* add a red X overlay for killed */
.avatar.killed::after {
content: "";
position: absolute;
width: 70%;
height: 14%;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0));
transform: rotate(-45deg);
border-radius: 4px;
box-shadow: 0 0 0 3px rgba(255,77,109,0.08) inset;
pointer-events: none;
}
/* explicit danger outline for that specific class (keeps text unchanged) */
.avatar.pedophile.killed {
outline: 3px solid rgba(220,20,60,0.12);
box-shadow: 0 20px 48px rgba(220,20,60,0.06);
}
/* highlight / threatened state */
.avatar.threatened {
animation: pulseThreat 1.2s infinite;
box-shadow: 0 20px 36px rgba(255,190,60,0.09);
}
@keyframes pulseThreat {
0% { transform: translateY(-2px) scale(1.02); }
50% { transform: translateY(-6px) scale(1.05); }
100% { transform: translateY(-2px) scale(1.02); }
}
/* badge and small text */
.legend {
display:flex;
gap:12px;
align-items:center;
justify-content:center;
font-size:13px;
color:var(--muted);
margin-top:10px;
}
.badge {
display:inline-flex;
gap:8px;
align-items:center;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(245,247,255,0.95));
padding:6px 10px;
border-radius: 999px;
border: 1px solid rgba(6,24,60,0.04);
box-shadow: 0 6px 18px rgba(6,24,60,0.03);
font-weight:600;
}
.small { font-size:12px; color:var(--muted); }
/* controls row */
#controlsRow { display:flex; gap:12px; align-items:center; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
#controlsRow .control {
display:inline-flex;
gap:8px;
align-items:center;
}
/* tutorial card */
.tutorial {
margin-top:12px;
padding:14px;
border-radius:12px;
background:linear-gradient(180deg,#fcfeff,#f7fbff);
border:1px solid rgba(0,0,0,0.04);
font-size:13px;
color:#0f1724;
text-align:left;
max-width:560px;
box-shadow: var(--shadow-soft);
}
/* subtle decorative corner glows for game container */
.game::before, .game::after {
content: "";
position: absolute;
pointer-events: none;
filter: blur(30px);
opacity: .18;
}
.game { position: relative; }
.game::before {
width: 220px; height: 220px;
background: radial-gradient(circle at 20% 20%, rgba(0,102,255,0.28), transparent 26%);
left: -40px; top: -60px;
}
.game::after {
width: 200px; height: 200px;
background: radial-gradient(circle at 80% 80%, rgba(0,212,255,0.18), transparent 28%);
right: -40px; bottom: -60px;
}
/* responsive */
@media (max-width:980px) {
body { flex-direction: column; align-items: center; padding: 18px; }
.game { width: 94%; padding: 16px; }
.container { width: 94%; padding: 16px; }
.grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.avatar { width:50px; height:50px; font-size:18px; border-radius:10px; }
}
/* accessible focus */
:focus { outline: none; }
.avatar:focus-visible, button:focus-visible, input:focus-visible {
box-shadow: 0 10px 30px rgba(0,102,255,0.12), 0 0 0 6px rgba(0,102,255,0.06);
border-radius: 10px;
}
/* small micro-interaction utilities */
.pop {
animation: pop .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop {
0% { transform: scale(.88); opacity: 0; }
60% { transform: scale(1.06); opacity: 1; }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="container" aria-live="polite">
<h1>Kill a Pedophile :D</h1>
<input type="number" id="totalKilled" placeholder="Number of men killed" min="0" step="1">
<button id="calcBtn" onclick="calculateProbability()">Run</button>
<p id="result"></p>
<p id="explanation"></p>
</div>
<div class="game" aria-hidden="false">
<div id="controlsRow">
<!-- play/pause styled as emoji -->
<button id="autoPlay" title="Auto simulate" style="padding:6px 10px;border-radius:6px;font-size:16px;">▶️</button>
<div id="remaining" class="small">0</div>
<div id="loading" class="small">Idle</div>
</div>
<div id="grid" class="grid" aria-label="Men grid"></div>
<div class="legend" aria-hidden="true">
<div class="badge"><span class="avatar" style="width:22px;height:22px;font-size:14px">👨</span><span class="small">= man</span></div>
<div class="badge"><span class="avatar pedophile" style="width:22px;height:22px;font-size:14px">🔴</span><span class="small">= hidden marker</span></div>
<div class="badge"><span class="avatar killed" style="width:22px;height:22px;font-size:14px">💀</span><span class="small">= clicked</span></div>
</div>
<!-- mini tutorial added at the bottom -->
<div class="tutorial" id="tutorial">
<strong>Mini tutorial</strong>
<ol>
<li>Enter a number in the "Number of men killed" field and press <em>Run</em>.</li>
<li>A grid of emojis/men will be generated (may take a moment for very large numbers). The counter shows how many remain unclicked.</li>
<li>Click the men to kill them (they turn into 💀). If a man was a pedophile, a small red dot appears as a shot to the noggin.</li>
<li>Use the ▶️ button to auto-simulate clicking; press again to pause.</li>
<li>Try to kill all the pedos! :D</li>
</ol>
</div>
</div>
<script>
// calculation logic
function calculateProbability() {
const totalKilledInput = document.getElementById('totalKilled');
let totalKilled = parseInt(totalKilledInput.value, 10) || 0;
if (totalKilled < 0) totalKilled = 0;
const pedophilePercentage = 0.03; // Range of 1% to 5%, using 3% as a midpoint for calculation
const probability = 1 - Math.pow(1 - pedophilePercentage, totalKilled);
const resultElement = document.getElementById('result');
const explanationElement = document.getElementById('explanation');
// OG result
resultElement.innerText = `The probability of having killed at least one pedophile is: ${(probability * 100).toFixed(2)}%`;
explanationElement.innerText = `This calculation is based on the estimated prevalence of pedophilia among adult men, which is between 1% and 5%.`;
// Build the interactive grid visualization
buildGrid(totalKilled, pedophilePercentage);
}
// Game visual / interaction
const gridEl = document.getElementById('grid');
const remainingEl = document.getElementById('remaining');
const loadingEl = document.getElementById('loading');
const autoPlayBtn = document.getElementById('autoPlay');
let autoInterval = null;
// state
let totalToCreate = 0;
let createdCount = 0;
let clickedCount = 0;
let creating = false;
function buildGrid(n, pedPerc){
// reset
gridEl.innerHTML = '';
totalToCreate = Math.max(0, Math.floor(n));
createdCount = 0;
clickedCount = 0;
remainingEl.textContent = String(totalToCreate);
loadingEl.textContent = totalToCreate === 0 ? 'Idle' : `Loading 0 / ${totalToCreate}`;
if (totalToCreate === 0) return;
// chunked generation
const batchSize = 1000; // avatars created per chunk
creating = true;
function createBatch(){
const frag = document.createDocumentFragment();
const start = createdCount;
const end = Math.min(totalToCreate, createdCount + batchSize);
for (let i = start; i < end; i++) {
const div = document.createElement('div');
div.className = 'avatar';
div.textContent = '👨';
// store random assignment as data attribute
const isPed = Math.random() < pedPerc;
div.dataset.ped = isPed ? '1' : '0';
// click reveals (kills)
div.addEventListener('click', () => {
if (div.classList.contains('killed')) return;
div.classList.add('killed');
div.textContent = '💀';
if (div.dataset.ped === '1') {
div.classList.add('pedophile');
const mark = document.createElement('span');
mark.style.position = 'absolute';
mark.style.transform = 'translateY(-10px)';
mark.style.fontSize = '10px';
mark.style.pointerEvents = 'none';
mark.textContent = '🔴';
div.style.position = 'relative';
div.appendChild(mark);
}
clickedCount++;
const remain = Math.max(0, totalToCreate - clickedCount);
remainingEl.textContent = String(remain);
});
frag.appendChild(div);
}
gridEl.appendChild(frag);
createdCount = end;
loadingEl.textContent = `Loading ${createdCount} / ${totalToCreate}`;
if (createdCount < totalToCreate) {
// yield to the browser before creating next batch
setTimeout(createBatch, 8);
} else {
creating = false;
loadingEl.textContent = 'Loaded';
}
}
// start creating
createBatch();
}
// autoplay: simulates clicking avatars one by one
autoPlayBtn.addEventListener('click', () => {
if (autoInterval) {
clearInterval(autoInterval);
autoInterval = null;
autoPlayBtn.textContent = '▶️';
return;
}
autoPlayBtn.textContent = '⏸️';
autoInterval = setInterval(() => {
// find first non-killed avatar and click it
let next = Array.from(gridEl.querySelectorAll('.avatar')).find(av => !av.classList.contains('killed'));
if (!next) {
// if still creating avatars, wait a little and try again
if (creating) {
// do nothing this tick; keep interval running
return;
} else {
// no more avatars to click: stop autoplay
clearInterval(autoInterval);
autoInterval = null;
autoPlayBtn.textContent = '▶️';
return;
}
}
next.click();
}, 120); // click every 120ms
});
// initialize with 0
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('result').innerText = '';
document.getElementById('explanation').innerText = '';
remainingEl.textContent = '0';
loadingEl.textContent = 'Idle';
});
</script>
</body>
</html>
/* Add your styles here */
// Add your code here