61 lines
2.7 KiB
HTML
61 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Статистика кликов</title>
|
||
<style>
|
||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||
.hero{background:var(--ink);color:var(--white)}
|
||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;margin:4px}
|
||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||
.counter{margin-left:8px;font-weight:700;color:var(--cyan)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<section class="hero"><div class="container">
|
||
<h1>Сбор статистики нажатий</h1>
|
||
<p>Нажимайте на кнопки — счётчик будет сохраняться в браузере.</p>
|
||
</div></section>
|
||
<section class="section"><div class="container">
|
||
<h2>Кнопки</h2>
|
||
<div id="buttons"></div>
|
||
</div></section>
|
||
<script>
|
||
// Список кнопок, которые нужно отслеживать
|
||
const buttonLabels = ['Кнопка A', 'Кнопка B', 'Кнопка C'];
|
||
// Хранилище счётчиков в localStorage
|
||
const storageKey = 'clickStats';
|
||
let stats = JSON.parse(localStorage.getItem(storageKey)) || {};
|
||
// Инициализируем нули, если кнопки новые
|
||
buttonLabels.forEach(label => { if(!(label in stats)) stats[label]=0; });
|
||
// Сохраняем при загрузке (на случай новых кнопок)
|
||
localStorage.setItem(storageKey, JSON.stringify(stats));
|
||
const container = document.getElementById('buttons');
|
||
buttonLabels.forEach((label,i)=>{
|
||
const btn = document.createElement('button');
|
||
btn.className = 'btn';
|
||
btn.textContent = label;
|
||
const cnt = document.createElement('span');
|
||
cnt.className = 'counter';
|
||
cnt.id = 'cnt-'+i;
|
||
cnt.textContent = stats[label];
|
||
btn.addEventListener('click',()=>{
|
||
stats[label]++;
|
||
cnt.textContent = stats[label];
|
||
localStorage.setItem(storageKey, JSON.stringify(stats));
|
||
});
|
||
container.appendChild(btn);
|
||
container.appendChild(cnt);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|