Friederich Loheide
61810eb050
Für Empfang, Lobby oder Tagungsraum lässt sich je Site eine öffentliche Seite anlegen (kiosk.php), die auf einem Bildschirm oder Tablet läuft: ein großer Knopf, ein Klick, ein Zugangscode mit QR-Code. Nach einer einstellbaren Anzeigedauer springt der Bildschirm zurück, damit der nächste Gast nicht den Code seines Vorgängers sieht. Verwaltung unter Administration → Display-Seiten: - Site und optionales Voucher-Profil (bestimmt Laufzeit, Geräte, QoS) - eigene Überschrift und Text für den Bildschirm - Codes pro Tag, Wartezeit zwischen zwei Codes, Anzeigedauer - geheimer Link zum Kopieren, als QR-Code anzeigbar und jederzeit erneuerbar (der alte Link gilt dann sofort nicht mehr) Absicherung: der Link ist der Zugang, deshalb Tageslimit und Wartezeit je Display, CSRF-Token am Formular, `noindex` im Kopf und ein Eintrag im Audit-Log für jeden ausgegebenen Code. Webhooks werden für Kiosk-Codes bewusst nicht ausgelöst – ein Empfangsdisplay würde den Kanal fluten. Technik: - neue Tabelle `kiosks`, `vouchers.kiosk_id` hält die Herkunft fest (Migration 0005, database.sql nachgezogen) - includes/Kiosk.php kapselt Token, Limits und Profil-Auflösung - includes/VoucherService.php bündelt die Voucher-Erstellung, die vorher in index.php lag und für den Kiosk ein zweites Mal nötig gewesen wäre - Startbildschirm zeigt zusätzlich einen QR auf sich selbst, damit Gäste die Seite am eigenen Handy öffnen können Tests: 9 neue Fälle für Token-Prüfung, Wartezeit, Tageslimit und Profil-Auflösung (38 Tests gesamt), PHPStan deckt Kiosk.php mit ab. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
411 lines
20 KiB
PHP
411 lines
20 KiB
PHP
<?php
|
||
/**
|
||
* Verwaltung der öffentlichen Display-Seiten ("Kiosk").
|
||
*
|
||
* Jeder Kiosk gehört zu einer Site, hat einen geheimen Link und gibt über
|
||
* kiosk.php Zugangscodes aus – ohne Anmeldung, aber mit Tageslimit und
|
||
* Wartezeit zwischen zwei Codes.
|
||
*/
|
||
error_reporting(E_ALL);
|
||
ini_set('display_errors', 0);
|
||
ini_set('log_errors', 1);
|
||
|
||
require_once __DIR__ . '/../config.php';
|
||
require_once __DIR__ . '/../includes/Database.php';
|
||
require_once __DIR__ . '/../includes/Auth.php';
|
||
require_once __DIR__ . '/../includes/I18n.php';
|
||
require_once __DIR__ . '/../includes/Ui.php';
|
||
require_once __DIR__ . '/../includes/Kiosk.php';
|
||
|
||
$auth = new Auth();
|
||
$auth->requireAdmin();
|
||
I18n::init();
|
||
|
||
$db = Database::getInstance();
|
||
$appTitle = $db->getSetting('app_title', 'UniFi Voucher System');
|
||
|
||
$error = '';
|
||
$success = '';
|
||
|
||
/** Formularwerte einsammeln – für Anlegen und Bearbeiten identisch. */
|
||
function kioskInput(): array
|
||
{
|
||
return [
|
||
'site_id' => (int)($_POST['site_id'] ?? 0),
|
||
'template_id' => (int)($_POST['template_id'] ?? 0) ?: null,
|
||
'name' => trim((string)($_POST['name'] ?? '')),
|
||
'headline' => trim((string)($_POST['headline'] ?? '')),
|
||
'subline' => trim((string)($_POST['subline'] ?? '')),
|
||
'daily_limit' => max(0, (int)($_POST['daily_limit'] ?? Kiosk::DEFAULT_DAILY_LIMIT)),
|
||
'cooldown_seconds' => max(0, min(3600, (int)($_POST['cooldown_seconds'] ?? Kiosk::DEFAULT_COOLDOWN))),
|
||
'display_seconds' => max(10, min(600, (int)($_POST['display_seconds'] ?? Kiosk::DEFAULT_DISPLAY_SECONDS))),
|
||
'is_active' => isset($_POST['is_active']) ? 1 : 0,
|
||
];
|
||
}
|
||
|
||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_kiosk'])) {
|
||
if (!$auth->validateCsrfToken($_POST['csrf_token'] ?? '')) {
|
||
$error = __('error_csrf');
|
||
} else {
|
||
try {
|
||
$in = kioskInput();
|
||
if ($in['name'] === '') throw new Exception(__('error_name_req'));
|
||
if ($in['site_id'] <= 0) throw new Exception(__('error_site_req'));
|
||
|
||
$db->execute(
|
||
"INSERT INTO kiosks (site_id, template_id, name, token, headline, subline, daily_limit, cooldown_seconds, display_seconds, is_active, created_by)
|
||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 1, ?)",
|
||
[$in['site_id'], $in['template_id'], $in['name'], Kiosk::newToken(),
|
||
$in['headline'], $in['subline'], $in['daily_limit'], $in['cooldown_seconds'],
|
||
$in['display_seconds'], $_SESSION['user_id']]
|
||
);
|
||
$auth->writeAuditLog($_SESSION['user_id'], 'kiosk_created', 'kiosk', null, $in['name']);
|
||
$success = __('kiosks_added');
|
||
} catch (Exception $e) {
|
||
$error = $e->getMessage();
|
||
}
|
||
}
|
||
}
|
||
|
||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_kiosk'])) {
|
||
if (!$auth->validateCsrfToken($_POST['csrf_token'] ?? '')) {
|
||
$error = __('error_csrf');
|
||
} else {
|
||
try {
|
||
$id = (int)($_POST['kiosk_id'] ?? 0);
|
||
$in = kioskInput();
|
||
if ($in['name'] === '') throw new Exception(__('error_name_req'));
|
||
if ($in['site_id'] <= 0) throw new Exception(__('error_site_req'));
|
||
|
||
$db->execute(
|
||
"UPDATE kiosks SET site_id=?, template_id=?, name=?, headline=?, subline=?,
|
||
daily_limit=?, cooldown_seconds=?, display_seconds=?, is_active=?
|
||
WHERE id=?",
|
||
[$in['site_id'], $in['template_id'], $in['name'], $in['headline'], $in['subline'],
|
||
$in['daily_limit'], $in['cooldown_seconds'], $in['display_seconds'], $in['is_active'], $id]
|
||
);
|
||
$auth->writeAuditLog($_SESSION['user_id'], 'kiosk_updated', 'kiosk', $id, $in['name']);
|
||
$success = __('kiosks_updated');
|
||
} catch (Exception $e) {
|
||
$error = $e->getMessage();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Neuen Link erzeugen – der alte gilt damit sofort nicht mehr.
|
||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['renew_token'])) {
|
||
if (!$auth->validateCsrfToken($_POST['csrf_token'] ?? '')) {
|
||
$error = __('error_csrf');
|
||
} else {
|
||
$id = (int)($_POST['kiosk_id'] ?? 0);
|
||
$db->execute("UPDATE kiosks SET token = ? WHERE id = ?", [Kiosk::newToken(), $id]);
|
||
$auth->writeAuditLog($_SESSION['user_id'], 'kiosk_updated', 'kiosk', $id, 'Link erneuert');
|
||
$success = __('kiosks_token_renewed');
|
||
}
|
||
}
|
||
|
||
if (isset($_GET['delete'], $_GET['token'])) {
|
||
if ($auth->validateCsrfToken($_GET['token'])) {
|
||
$db->execute("DELETE FROM kiosks WHERE id = ?", [(int)$_GET['delete']]);
|
||
$auth->writeAuditLog($_SESSION['user_id'], 'kiosk_deleted', 'kiosk', (int)$_GET['delete'], '');
|
||
$success = __('kiosks_deleted');
|
||
} else {
|
||
$error = __('error_csrf');
|
||
}
|
||
}
|
||
|
||
$sites = $db->fetchAll("SELECT id, name FROM sites WHERE is_active = 1 ORDER BY name");
|
||
$templates = $db->fetchAll("SELECT id, name, max_uses, expire_minutes FROM voucher_templates WHERE is_active = 1 ORDER BY name");
|
||
$kiosks = $db->fetchAll(
|
||
"SELECT k.*, s.name AS site_name, t.name AS template_name,
|
||
(SELECT COUNT(*) FROM vouchers v WHERE v.kiosk_id = k.id) AS total_vouchers,
|
||
(SELECT COUNT(*) FROM vouchers v WHERE v.kiosk_id = k.id AND DATE(v.created_at) = CURDATE()) AS today_vouchers
|
||
FROM kiosks k
|
||
INNER JOIN sites s ON s.id = k.site_id
|
||
LEFT JOIN voucher_templates t ON t.id = k.template_id
|
||
ORDER BY k.is_active DESC, k.name"
|
||
);
|
||
|
||
$csrf = $auth->getCsrfToken();
|
||
$currentPage = 'kiosks';
|
||
$adminBase = '';
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html lang="<?= I18n::getLanguage() ?>">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title><?= __('kiosks_title') ?> – <?= htmlspecialchars($appTitle) ?></title>
|
||
<?= Ui::script('assets/vendor/qrcodejs/qrcode.min.js', '../') ?>
|
||
<?php require __DIR__ . '/../includes/admin_nav.php'; ?>
|
||
|
||
<div class="page-header">
|
||
<div>
|
||
<h1 class="page-title"><?= __('kiosks_title') ?></h1>
|
||
<p class="page-subtitle"><?= __('kiosks_subtitle') ?></p>
|
||
</div>
|
||
<button onclick="openAddModal()" class="btn btn-primary">
|
||
<i class="fas fa-plus" aria-hidden="true"></i> <?= __('kiosks_add') ?>
|
||
</button>
|
||
</div>
|
||
|
||
<?php if ($error): ?><div class="alert alert-error"><?= htmlspecialchars($error) ?></div><?php endif; ?>
|
||
<?php if ($success): ?><div class="alert alert-ok"><?= htmlspecialchars($success) ?></div><?php endif; ?>
|
||
|
||
<?php if (empty($sites)): ?>
|
||
<div class="empty-card">
|
||
<div class="empty-icon"><i class="fas fa-location-dot" aria-hidden="true"></i></div>
|
||
<p><?= __('kiosks_no_sites') ?></p>
|
||
<a href="sites.php" class="btn btn-primary" style="margin-top:16px;">
|
||
<i class="fas fa-plus" aria-hidden="true"></i> <?= __('sites_add') ?>
|
||
</a>
|
||
</div>
|
||
<?php elseif (empty($kiosks)): ?>
|
||
<div class="empty-card">
|
||
<div class="empty-icon"><i class="fas fa-display" aria-hidden="true"></i></div>
|
||
<p><?= __('kiosks_empty') ?></p>
|
||
<button onclick="openAddModal()" class="btn btn-primary" style="margin-top:16px;">
|
||
<i class="fas fa-plus" aria-hidden="true"></i> <?= __('kiosks_add') ?>
|
||
</button>
|
||
</div>
|
||
<?php else: ?>
|
||
<div class="sites-grid">
|
||
<?php foreach ($kiosks as $k): ?>
|
||
<?php $url = Kiosk::publicUrl($k['token']); ?>
|
||
<div class="site-card">
|
||
<div class="site-card-header">
|
||
<div>
|
||
<div class="site-name"><?= htmlspecialchars($k['name']) ?></div>
|
||
<div class="site-id-label"><?= htmlspecialchars($k['site_name']) ?></div>
|
||
</div>
|
||
<span class="badge <?= $k['is_active'] ? 'badge-success' : 'badge-neutral' ?>">
|
||
<?= $k['is_active'] ? __('status_active') : __('status_inactive') ?>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="site-info">
|
||
<div class="site-info-item">
|
||
<i class="fas fa-layer-group" aria-hidden="true"></i>
|
||
<?= $k['template_name'] ? htmlspecialchars($k['template_name']) : __('kiosks_no_template') ?>
|
||
</div>
|
||
<div class="site-info-item">
|
||
<i class="fas fa-gauge-high" aria-hidden="true"></i>
|
||
<?= (int)$k['today_vouchers'] ?><?= (int)$k['daily_limit'] > 0 ? ' / ' . (int)$k['daily_limit'] : '' ?>
|
||
<?= __('kiosks_today') ?>
|
||
</div>
|
||
<div class="site-info-item">
|
||
<i class="fas fa-ticket" aria-hidden="true"></i>
|
||
<?= (int)$k['total_vouchers'] ?> <?= __('kiosks_total') ?>
|
||
</div>
|
||
</div>
|
||
|
||
<label class="muted" style="display:block;margin-bottom:6px;"><?= __('kiosks_link') ?></label>
|
||
<div class="kiosk-link-row">
|
||
<input type="text" class="input" readonly value="<?= htmlspecialchars($url) ?>"
|
||
id="link-<?= (int)$k['id'] ?>" onclick="this.select()">
|
||
<button class="btn btn-secondary" type="button"
|
||
onclick="copyToClipboard('<?= htmlspecialchars($url, ENT_QUOTES) ?>', '<?= __('js_copied') ?>')"
|
||
title="<?= __('js_copy') ?>" aria-label="<?= __('js_copy') ?>">
|
||
<i class="fas fa-copy" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="site-actions">
|
||
<a class="btn btn-secondary btn-sm" href="<?= htmlspecialchars($url) ?>" target="_blank" rel="noopener">
|
||
<i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i> <?= __('kiosks_open') ?>
|
||
</a>
|
||
<button class="btn btn-secondary btn-sm" type="button"
|
||
onclick="showQr('<?= htmlspecialchars($url, ENT_QUOTES) ?>', '<?= htmlspecialchars($k['name'], ENT_QUOTES) ?>')">
|
||
<i class="fas fa-qrcode" aria-hidden="true"></i> <?= __('kiosks_qr') ?>
|
||
</button>
|
||
<button class="btn btn-secondary btn-sm" type="button"
|
||
onclick='openEditModal(<?= json_encode([
|
||
"id" => (int)$k["id"], "site_id" => (int)$k["site_id"],
|
||
"template_id" => (int)$k["template_id"], "name" => $k["name"],
|
||
"headline" => $k["headline"], "subline" => $k["subline"],
|
||
"daily_limit" => (int)$k["daily_limit"],
|
||
"cooldown_seconds" => (int)$k["cooldown_seconds"],
|
||
"display_seconds" => (int)$k["display_seconds"],
|
||
"is_active" => (int)$k["is_active"],
|
||
], JSON_HEX_APOS | JSON_HEX_QUOT) ?>)'>
|
||
<i class="fas fa-edit" aria-hidden="true"></i> <?= __('btn_edit') ?>
|
||
</button>
|
||
<form method="post" style="display:inline;"
|
||
onsubmit="return confirm('<?= __('kiosks_renew_confirm') ?>');">
|
||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrf) ?>">
|
||
<input type="hidden" name="kiosk_id" value="<?= (int)$k['id'] ?>">
|
||
<button class="btn btn-secondary btn-sm" type="submit" name="renew_token">
|
||
<i class="fas fa-rotate" aria-hidden="true"></i> <?= __('kiosks_renew') ?>
|
||
</button>
|
||
</form>
|
||
<a class="btn btn-danger-soft btn-sm"
|
||
href="?delete=<?= (int)$k['id'] ?>&token=<?= urlencode($csrf) ?>"
|
||
onclick="return confirm('<?= __('kiosks_delete_confirm') ?>');"
|
||
title="<?= __('btn_delete') ?>" aria-label="<?= __('btn_delete') ?>">
|
||
<i class="fas fa-trash" aria-hidden="true"></i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
<?php endif; ?>
|
||
|
||
<!-- Anlegen / Bearbeiten -->
|
||
<div class="modal" id="kioskModal">
|
||
<div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="kioskModalTitle">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="kioskModalTitle"><?= __('kiosks_add') ?></h2>
|
||
<button class="modal-close" type="button" onclick="closeModal()" aria-label="<?= __('btn_cancel') ?>">×</button>
|
||
</div>
|
||
<form method="post">
|
||
<div class="modal-body">
|
||
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrf) ?>">
|
||
<input type="hidden" name="kiosk_id" id="kiosk_id" value="">
|
||
|
||
<div class="form-group">
|
||
<label for="name"><?= __('kiosks_name') ?></label>
|
||
<input type="text" id="name" name="name" required placeholder="<?= __('kiosks_name_placeholder') ?>">
|
||
<div class="help-text"><?= __('kiosks_name_hint') ?></div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="site_id"><?= __('label_site') ?></label>
|
||
<select id="site_id" name="site_id" required>
|
||
<?php foreach ($sites as $s): ?>
|
||
<option value="<?= (int)$s['id'] ?>"><?= htmlspecialchars($s['name']) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="template_id"><?= __('kiosks_template') ?></label>
|
||
<select id="template_id" name="template_id">
|
||
<option value="0"><?= __('kiosks_no_template') ?></option>
|
||
<?php foreach ($templates as $t): ?>
|
||
<option value="<?= (int)$t['id'] ?>">
|
||
<?= htmlspecialchars($t['name']) ?> – <?= (int)$t['max_uses'] ?> <?= __('label_devices') ?>,
|
||
<?= (int)$t['expire_minutes'] ?> <?= __('minutes_short') ?>
|
||
</option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
<div class="help-text"><?= __('kiosks_template_hint') ?></div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<div class="form-group">
|
||
<label for="headline"><?= __('kiosks_headline') ?></label>
|
||
<input type="text" id="headline" name="headline" placeholder="<?= htmlspecialchars(__('kiosk_default_headline')) ?>">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="subline"><?= __('kiosks_subline') ?></label>
|
||
<textarea id="subline" name="subline" rows="2" placeholder="<?= htmlspecialchars(__('kiosk_default_subline')) ?>"></textarea>
|
||
</div>
|
||
|
||
<hr class="section-divider">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="daily_limit"><?= __('kiosks_daily_limit') ?></label>
|
||
<input type="number" id="daily_limit" name="daily_limit" min="0" value="<?= Kiosk::DEFAULT_DAILY_LIMIT ?>">
|
||
<div class="help-text"><?= __('kiosks_daily_limit_hint') ?></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cooldown_seconds"><?= __('kiosks_cooldown') ?></label>
|
||
<input type="number" id="cooldown_seconds" name="cooldown_seconds" min="0" max="3600" value="<?= Kiosk::DEFAULT_COOLDOWN ?>">
|
||
<div class="help-text"><?= __('kiosks_cooldown_hint') ?></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="display_seconds"><?= __('kiosks_display') ?></label>
|
||
<input type="number" id="display_seconds" name="display_seconds" min="10" max="600" value="<?= Kiosk::DEFAULT_DISPLAY_SECONDS ?>">
|
||
<div class="help-text"><?= __('kiosks_display_hint') ?></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkbox-group" id="activeRow" style="display:none;">
|
||
<input type="checkbox" id="is_active" name="is_active" checked>
|
||
<label for="is_active"><?= __('kiosks_active') ?></label>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal()"><?= __('btn_cancel') ?></button>
|
||
<button type="submit" name="add_kiosk" id="submitAdd" class="btn btn-primary">
|
||
<i class="fas fa-save" aria-hidden="true"></i> <?= __('btn_save') ?>
|
||
</button>
|
||
<button type="submit" name="edit_kiosk" id="submitEdit" class="btn btn-primary" style="display:none;">
|
||
<i class="fas fa-save" aria-hidden="true"></i> <?= __('btn_save') ?>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QR-Code des Links -->
|
||
<div class="modal" id="qrModal">
|
||
<div class="modal-content" style="max-width:420px;" role="dialog" aria-modal="true">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="qrTitle"><?= __('kiosks_qr') ?></h2>
|
||
<button class="modal-close" type="button" onclick="closeQr()" aria-label="<?= __('btn_cancel') ?>">×</button>
|
||
</div>
|
||
<div class="modal-body" style="text-align:center;">
|
||
<div id="qrTarget" style="display:inline-block;padding:14px;background:#fff;border-radius:12px;line-height:0;"></div>
|
||
<p class="help-text" style="margin-top:14px;"><?= __('kiosks_qr_hint') ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<div id="toast-container" role="status" aria-live="polite"></div>
|
||
<script src="../assets/global.js"></script>
|
||
<script>
|
||
function openAddModal() {
|
||
document.getElementById('kioskModalTitle').textContent = <?= json_encode(__('kiosks_add')) ?>;
|
||
document.querySelector('#kioskModal form').reset();
|
||
document.getElementById('kiosk_id').value = '';
|
||
document.getElementById('submitAdd').style.display = '';
|
||
document.getElementById('submitEdit').style.display = 'none';
|
||
document.getElementById('activeRow').style.display = 'none';
|
||
document.getElementById('kioskModal').classList.add('active');
|
||
}
|
||
|
||
function openEditModal(data) {
|
||
document.getElementById('kioskModalTitle').textContent = <?= json_encode(__('kiosks_edit')) ?>;
|
||
document.getElementById('kiosk_id').value = data.id;
|
||
document.getElementById('name').value = data.name || '';
|
||
document.getElementById('site_id').value = data.site_id;
|
||
document.getElementById('template_id').value = data.template_id || 0;
|
||
document.getElementById('headline').value = data.headline || '';
|
||
document.getElementById('subline').value = data.subline || '';
|
||
document.getElementById('daily_limit').value = data.daily_limit;
|
||
document.getElementById('cooldown_seconds').value = data.cooldown_seconds;
|
||
document.getElementById('display_seconds').value = data.display_seconds;
|
||
document.getElementById('is_active').checked = data.is_active === 1;
|
||
document.getElementById('submitAdd').style.display = 'none';
|
||
document.getElementById('submitEdit').style.display = '';
|
||
document.getElementById('activeRow').style.display = '';
|
||
document.getElementById('kioskModal').classList.add('active');
|
||
}
|
||
|
||
function closeModal() { document.getElementById('kioskModal').classList.remove('active'); }
|
||
|
||
function showQr(url, name) {
|
||
var target = document.getElementById('qrTarget');
|
||
target.innerHTML = '';
|
||
document.getElementById('qrTitle').textContent = name;
|
||
new QRCode(target, { text: url, width: 260, height: 260, colorDark: '#101625', colorLight: '#ffffff' });
|
||
document.getElementById('qrModal').classList.add('active');
|
||
}
|
||
|
||
function closeQr() { document.getElementById('qrModal').classList.remove('active'); }
|
||
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape') { closeModal(); closeQr(); }
|
||
});
|
||
document.querySelectorAll('.modal').forEach(function (m) {
|
||
m.addEventListener('click', function (e) { if (e.target === m) m.classList.remove('active'); });
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|