<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ad-Finder Game</title>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.scoreboard {
margin: 20px;
font-size: 1.5rem;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-rows: repeat(3, 250px);
gap: 10px;
margin-bottom: 80px;
}
.cell {
background: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
position: relative;
}
.ad-placeholder, .real-ad {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #e0e0e0;
font-weight: bold;
color: #555;
text-align: center;
}
.target-symbol {
font-size: 2rem;
cursor: pointer;
}
.sticky-ad {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
border-top: 2px solid #ccc;
text-align: center;
padding: 10px;
z-index: 999;
}
</style>
</head>
<body>
<div class="scoreboard">Punkte: <span id="score">0</span></div>
<div class="grid" id="grid"></div>
<div class="sticky-ad">
<!-- AdSense oder andere Ad-Integration -->
<div style="display:inline-block; width:300px; height:250px; background:#ddd;">Sticky Ad</div>
</div>
<script>
let score = 0;
const grid = document.getElementById("grid");
const scoreDisplay = document.getElementById("score");
function createCell(content, isTarget = false) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.innerHTML = content;
if (isTarget) {
const symbol = cell.querySelector(".target-symbol");
if (symbol) {
symbol.addEventListener("click", () => {
score++;
scoreDisplay.textContent = score;
setTimeout(renderGrid, 300);
});
}
}
return cell;
}
function renderGrid() {
grid.innerHTML = "";
const total = 9;
const adSlots = [1, 4];
const targetIndex = Math.floor(Math.random() * total);
for (let i = 0; i < total; i++) {
if (i === targetIndex) {
grid.appendChild(createCell("<div class='target-symbol'>🎯</div>", true));
} else if (adSlots.includes(i)) {
grid.appendChild(createCell("<div class='real-ad'>Echte Anzeige<br>(hier Ad-Code einfügen)</div>"));
} else {
grid.appendChild(createCell("<div class='ad-placeholder'>Werbeplatz</div>"));
}
}
}
renderGrid();
</script>
</body>
</html>