132 lines
3.9 KiB
HTML
132 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>QA Счётчик</title>
|
||
<link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="./design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
|
||
<style>
|
||
.qa-counter-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 60vh;
|
||
gap: var(--kt-ai-space-10);
|
||
}
|
||
.qa-counter-display {
|
||
font-size: clamp(80px, 15vw, 160px);
|
||
font-weight: var(--kt-ai-weight-bold);
|
||
font-family: var(--kt-ai-font-mono);
|
||
color: var(--kt-ai-fg);
|
||
line-height: 1;
|
||
padding: var(--kt-ai-space-9) var(--kt-ai-space-12);
|
||
background: var(--kt-ai-card-bg);
|
||
border: 2px solid var(--kt-ai-border-strong);
|
||
border-radius: var(--kt-ai-radius-3xl);
|
||
min-width: 280px;
|
||
text-align: center;
|
||
}
|
||
.qa-counter-actions {
|
||
display: flex;
|
||
gap: var(--kt-ai-space-4);
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
.qa-counter-actions .kt-ai-btn {
|
||
min-width: 120px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<div style="display:flex;align-items:center;gap:var(--kt-ai-space-3)">
|
||
<img src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" height="28">
|
||
<strong>QA Счётчик</strong>
|
||
</div>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span class="kt-ai-chip" data-tone="orange">Демо-данные</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="kt-ai-wrap">
|
||
<div class="qa-counter-wrap">
|
||
<div>
|
||
<h1 style="text-align:center;margin-bottom:var(--kt-ai-space-2)">Счётчик QA</h1>
|
||
<p style="text-align:center;color:var(--kt-ai-fg-muted)">Нажимайте кнопки для изменения значения</p>
|
||
</div>
|
||
|
||
<div class="qa-counter-display" id="counterValue">0</div>
|
||
|
||
<div class="qa-counter-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" data-size="lg" id="btnMinus">
|
||
− Минус
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" id="btnPlus">
|
||
+ Плюс
|
||
</button>
|
||
<button class="kt-ai-btn" data-variant="danger" data-size="lg" id="btnReset">
|
||
⟲ Сброс
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 QA Счётчик</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span style="color:var(--kt-ai-fg-muted)">Тестовый прототип</span>
|
||
</footer>
|
||
|
||
<script>
|
||
(function() {
|
||
var STORAGE_KEY = 'qa-counter-value';
|
||
var display = document.getElementById('counterValue');
|
||
var btnPlus = document.getElementById('btnPlus');
|
||
var btnMinus = document.getElementById('btnMinus');
|
||
var btnReset = document.getElementById('btnReset');
|
||
|
||
// Загрузка из localStorage
|
||
var savedValue = localStorage.getItem(STORAGE_KEY);
|
||
var currentValue = savedValue !== null ? parseInt(savedValue, 10) : 0;
|
||
|
||
function updateDisplay() {
|
||
display.textContent = currentValue;
|
||
}
|
||
|
||
function saveValue() {
|
||
localStorage.setItem(STORAGE_KEY, currentValue.toString());
|
||
}
|
||
|
||
btnPlus.addEventListener('click', function() {
|
||
currentValue++;
|
||
saveValue();
|
||
updateDisplay();
|
||
});
|
||
|
||
btnMinus.addEventListener('click', function() {
|
||
currentValue--;
|
||
saveValue();
|
||
updateDisplay();
|
||
});
|
||
|
||
btnReset.addEventListener('click', function() {
|
||
currentValue = 0;
|
||
saveValue();
|
||
updateDisplay();
|
||
});
|
||
|
||
// Первичная отрисовка
|
||
updateDisplay();
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|