Redesign: gemeinsames Design-System für Frontend und Backend
Some checks failed
CI / PHP Lint (push) Waiting to run
CI / PHP Lint-1 (push) Waiting to run
CI / Unit Tests & Static Analysis (push) Waiting to run
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Some checks failed
CI / PHP Lint (push) Waiting to run
CI / PHP Lint-1 (push) Waiting to run
CI / Unit Tests & Static Analysis (push) Waiting to run
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite dupliziertem Inline-CSS. Design-System - Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important- Overrides mehr) - Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States - Schrift Inter mit System-Fallback Oberfläche - Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation und Benutzerbereich; schlanke Topbar mit Breadcrumb - Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben gekoppelt - Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und Ticket-Darstellung des erstellten Codes inkl. QR-Code - Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten - Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt bewusst eigenständig ohne externe Abhängigkeiten) - Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt Nebenbei behoben - Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der Voucher-Seite und bei der 2FA-Einrichtung nie gerendert - assets/global.css wurde in mehreren Admin-Seiten über einen falschen Pfad eingebunden ($adminBase = '' statt '../') - TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein "valid API key required"-Banner mehr im Einstellungs-Editor - Tabellen in Cards scrollen horizontal statt zu überlaufen Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer Abschnitt "Design-System", Version 2.5.0). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
bad70a631f
commit
498c7e28e0
43 changed files with 2165 additions and 1740 deletions
195
index.php
195
index.php
|
|
@ -284,112 +284,69 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= htmlspecialchars($appTitle) ?></title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="assets/global.css">
|
||||
<?php if ($captchaMode === 'hcaptcha' && $hcaptchaSiteKey !== ''): ?>
|
||||
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
|
||||
<?php endif; ?>
|
||||
<script>(function(){ const t=localStorage.getItem('theme')||'light'; document.documentElement.setAttribute('data-theme',t); })();</script>
|
||||
<?php if ($voucherCreated): ?>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSe2keRB6Q5pBUtIxCY7bQMsVB0ANBpd6JDg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<?php endif; ?>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }
|
||||
.header { max-width: 1200px; margin: 0 auto 30px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 15px 25px; border-radius: 15px; }
|
||||
.header-title { color: white; font-size: 20px; font-weight: 600; }
|
||||
.header-right { display: flex; align-items: center; gap: 10px; }
|
||||
.btn-header { background: white; color: #667eea; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s; border: none; cursor: pointer; }
|
||||
.btn-header:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
|
||||
.container { max-width: 600px; margin: 0 auto; background: var(--bg-card); border-radius: 20px; box-shadow: 0 20px 60px var(--shadow-lg); padding: 40px; }
|
||||
h1 { text-align: center; color: var(--text-primary); margin-bottom: 30px; font-size: 28px; }
|
||||
.logo { max-width: 250px; display: block; margin: 0 auto 30px; }
|
||||
.alert { padding: 14px; border-radius: 10px; margin-bottom: 25px; font-size: 14px; }
|
||||
.alert-error { background: #fee; border: 1px solid #fcc; color: #c33; }
|
||||
.alert-success { background: #efe; border: 1px solid #cfc; color: #3c3; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-weight: 500; font-size: 14px; }
|
||||
input[type="text"], input[type="number"], input[type="email"], select { width: 100%; padding: 14px; border: 2px solid var(--border-color); border-radius: 10px; font-size: 15px; transition: all 0.2s; background: var(--bg-input); color: var(--text-primary); }
|
||||
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
|
||||
.btn { width: 100%; padding: 16px; background: var(--accent); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
|
||||
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
|
||||
.btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
|
||||
.btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); margin-top: 10px; }
|
||||
.btn-outline:hover { background: var(--accent); color: white; }
|
||||
.mode-tabs { display: flex; gap: 8px; margin-bottom: 25px; background: var(--bg-hover); padding: 6px; border-radius: 12px; }
|
||||
.mode-tab { flex: 1; padding: 10px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; background: transparent; color: var(--text-secondary); transition: all 0.2s; }
|
||||
.mode-tab.active { background: var(--bg-card); color: var(--accent); box-shadow: 0 2px 8px var(--shadow); }
|
||||
.template-dropdown { margin-bottom: 20px; padding: 15px; background: var(--bg-hover); border-radius: 12px; border: 2px solid var(--border-color); }
|
||||
.template-dropdown label { color: var(--text-secondary); font-size: 13px; margin-bottom: 6px; }
|
||||
.template-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
|
||||
.voucher-result { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 25px; }
|
||||
.voucher-code { font-size: 32px; font-weight: bold; letter-spacing: 2px; margin: 20px 0; font-family: 'Courier New', monospace; cursor: pointer; }
|
||||
.voucher-code:hover { opacity: 0.85; }
|
||||
.voucher-info { font-size: 14px; opacity: 0.9; margin-top: 10px; }
|
||||
.qr-wrapper { display: flex; flex-direction: column; align-items: center; margin: 20px 0 0; }
|
||||
.qr-wrapper canvas, .qr-wrapper img { border: 6px solid white; border-radius: 8px; }
|
||||
.qr-label { font-size: 12px; opacity: 0.8; margin-top: 8px; }
|
||||
.instruction-box { background: var(--bg-hover); padding: 20px; border-radius: 10px; margin-top: 25px; }
|
||||
.instruction-box h3 { color: var(--text-primary); margin-bottom: 10px; font-size: 16px; }
|
||||
.instruction-box p, .instruction-box div { color: var(--text-secondary); line-height: 1.6; font-size: 14px; }
|
||||
.empty-state { text-align: center; padding: 40px; color: var(--text-muted); }
|
||||
.email-option { background: var(--bg-hover); border: 2px solid var(--border-color); border-radius: 12px; padding: 20px; margin: 20px 0; transition: all 0.2s; }
|
||||
.email-option.active { background: var(--bg-hover); border-color: var(--accent); }
|
||||
.email-checkbox-wrapper { display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
||||
.email-checkbox-wrapper input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent); }
|
||||
.email-checkbox-wrapper label { margin: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
|
||||
.email-input-wrapper { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s; }
|
||||
.email-input-wrapper.show { max-height: 120px; opacity: 1; margin-top: 15px; }
|
||||
.bulk-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
|
||||
.bulk-table th { background: var(--bg-hover); color: var(--text-secondary); padding: 10px 12px; text-align: left; font-size: 12px; text-transform: uppercase; }
|
||||
.bulk-table td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 14px; }
|
||||
.bulk-table tr:last-child td { border-bottom: none; }
|
||||
.bulk-table code { background: var(--bg-hover); padding: 4px 8px; border-radius: 4px; font-family: monospace; letter-spacing: 1px; cursor: pointer; }
|
||||
.bulk-table code:hover { opacity: 0.75; }
|
||||
.copy-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
||||
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||
/* Seitenspezifisch: Druckansicht der Voucher-Karten.
|
||||
Die Druckvorlage ist am Bildschirm ausgeblendet und erscheint nur im Druck. */
|
||||
#printArea { display: none; }
|
||||
@media print {
|
||||
#printArea { display: block; }
|
||||
body * { visibility: hidden; }
|
||||
#printArea, #printArea * { visibility: visible; }
|
||||
#printArea { position: absolute; left: 0; top: 0; width: 100%; background: white; }
|
||||
#printArea { position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
|
||||
.no-print { display: none !important; }
|
||||
.print-page-break { page-break-after: always; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.container { padding: 25px 20px; border-radius: 15px; }
|
||||
.header { padding: 12px 15px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="app-body">
|
||||
|
||||
<div style="position:fixed;top:15px;right:20px;display:flex;gap:8px;z-index:10;" class="no-print">
|
||||
<div class="lang-switcher">
|
||||
<?php foreach (I18n::getAvailable() as $code => $label): ?>
|
||||
<button class="lang-btn <?= I18n::getLanguage() === $code ? 'active' : '' ?>"
|
||||
onclick="switchLanguage('<?= $code ?>')"><?= strtoupper($code) ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button id="darkModeBtn" class="dark-mode-toggle" onclick="toggleDarkMode()" title="Dark Mode">🌙</button>
|
||||
</div>
|
||||
|
||||
<?php if ($currentUser): ?>
|
||||
<div class="header no-print">
|
||||
<div class="header-title">👋 <?= __('hello', ['name' => htmlspecialchars($currentUser['name'])]) ?></div>
|
||||
<div class="header-right">
|
||||
<?php if ($auth->isAdmin()): ?>
|
||||
<a href="admin/" class="btn-header">⚙️ <?= __('nav_administration') ?></a>
|
||||
<header class="app-topbar no-print">
|
||||
<a href="index.php" class="brand">
|
||||
<span class="brand-mark"><i class="fas fa-wifi"></i></span>
|
||||
<span class="brand-name"><?= htmlspecialchars($appTitle) ?></span>
|
||||
</a>
|
||||
<div class="app-actions">
|
||||
<div class="lang-switcher">
|
||||
<?php foreach (I18n::getAvailable() as $code => $label): ?>
|
||||
<button class="lang-btn <?= I18n::getLanguage() === $code ? 'active' : '' ?>"
|
||||
onclick="switchLanguage('<?= $code ?>')"><?= strtoupper($code) ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<button id="darkModeBtn" class="dark-mode-toggle" onclick="toggleDarkMode()" title="Dark Mode">
|
||||
<i class="fas fa-moon"></i>
|
||||
</button>
|
||||
<?php if ($currentUser): ?>
|
||||
<?php if ($auth->isAdmin()): ?>
|
||||
<a href="admin/" class="btn btn-secondary">
|
||||
<i class="fas fa-sliders"></i> <span class="hide-mobile"><?= __('nav_administration') ?></span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<div class="user-menu">
|
||||
<div class="user-avatar"><?= strtoupper(mb_substr($currentUser['name'], 0, 1)) ?></div>
|
||||
<div class="user-name hide-mobile"><?= htmlspecialchars($currentUser['name']) ?></div>
|
||||
<a href="logout.php" class="icon-btn" title="<?= __('btn_logout') ?>" style="width:28px;height:28px;font-size:11px;">
|
||||
<i class="fas fa-arrow-right-from-bracket"></i>
|
||||
</a>
|
||||
</div>
|
||||
<?php elseif ($publicAccess): ?>
|
||||
<a href="login.php" class="btn btn-secondary">
|
||||
<i class="fas fa-right-to-bracket"></i> <?= __('btn_login') ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<a href="logout.php" class="btn-header"><?= __('btn_logout') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php elseif ($publicAccess): ?>
|
||||
<div class="header no-print">
|
||||
<div class="header-title"><?= htmlspecialchars($appTitle) ?></div>
|
||||
<div class="header-right">
|
||||
<a href="login.php" class="btn-header">🔐 <?= __('btn_login') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<?php if ($logoUrl && !$voucherCreated && !$bulkCreated): ?>
|
||||
|
|
@ -397,7 +354,10 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<?php endif; ?>
|
||||
|
||||
<?php if (!$voucherCreated && !$bulkCreated): ?>
|
||||
<h1><?= htmlspecialchars($appTitle) ?></h1>
|
||||
<div class="app-card-head">
|
||||
<h1><?= htmlspecialchars($appTitle) ?></h1>
|
||||
<p><?= __('app_subtitle') ?></p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($error): ?>
|
||||
|
|
@ -410,13 +370,19 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
</div>
|
||||
|
||||
<div class="voucher-result no-print">
|
||||
<div style="font-size:18px;margin-bottom:10px;"><?= __('voucher_success_title') ?></div>
|
||||
<div class="result-label"><i class="fas fa-circle-check"></i> <?= __('voucher_success_title') ?></div>
|
||||
<div class="voucher-code" id="voucherCode" onclick="copyCode()" title="Klicken zum Kopieren">
|
||||
<?= htmlspecialchars($voucherCode) ?>
|
||||
</div>
|
||||
<div class="voucher-info">
|
||||
<?= str_replace('{minutes}', $voucherData['expire_min'], __('voucher_validity')) ?>
|
||||
<i class="fas fa-copy"></i> <?= __('voucher_copy_hint') ?>
|
||||
</div>
|
||||
<div class="voucher-meta">
|
||||
<span><i class="fas fa-clock"></i> <?= str_replace('{minutes}', $voucherData['expire_min'], __('voucher_validity')) ?></span>
|
||||
<span><i class="fas fa-location-dot"></i> <?= htmlspecialchars($voucherData['site_name']) ?></span>
|
||||
<span><i class="fas fa-mobile-screen"></i> <?= (int)$voucherData['max_uses'] ?> <?= __('label_devices') ?></span>
|
||||
</div>
|
||||
<div class="ticket-divider"></div>
|
||||
<div class="qr-wrapper no-print">
|
||||
<div id="qrcode"></div>
|
||||
<div class="qr-label"><?= __('voucher_qr_label') ?></div>
|
||||
|
|
@ -430,15 +396,22 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="get" class="no-print" style="margin-top:15px;">
|
||||
<button type="submit" class="btn"><?= __('btn_new_code') ?></button>
|
||||
</form>
|
||||
<button onclick="window.print()" class="btn btn-outline no-print" style="margin-top:10px;">
|
||||
🖨️ <?= __('voucher_print_btn') ?>
|
||||
</button>
|
||||
<div class="no-print" style="display:flex;gap:10px;margin-top:18px;">
|
||||
<form method="get" style="flex:1;">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block">
|
||||
<i class="fas fa-plus"></i> <?= __('btn_new_code') ?>
|
||||
</button>
|
||||
</form>
|
||||
<button onclick="window.print()" class="btn btn-secondary btn-lg">
|
||||
<i class="fas fa-print"></i> <?= __('voucher_print_btn') ?>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?php elseif ($bulkCreated): ?>
|
||||
<h1 style="font-size:22px;margin-bottom:20px;"><?= str_replace('{count}', count($bulkVouchers), __('bulk_results')) ?></h1>
|
||||
<div class="app-card-head">
|
||||
<h1><?= str_replace('{count}', count($bulkVouchers), __('bulk_results')) ?></h1>
|
||||
<p><?= __('bulk_results_hint') ?></p>
|
||||
</div>
|
||||
|
||||
<div id="printArea">
|
||||
<?php foreach ($bulkVouchers as $idx => $bv): ?>
|
||||
|
|
@ -472,21 +445,21 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="copy-hint" style="margin-top:8px;">Code anklicken zum Kopieren</p>
|
||||
<p class="copy-hint"><i class="fas fa-copy"></i> <?= __('voucher_copy_hint') ?></p>
|
||||
</div>
|
||||
|
||||
<div class="no-print" style="display:flex;gap:10px;margin-top:20px;">
|
||||
<button onclick="window.print()" class="btn" style="flex:1;">
|
||||
🖨️ <?= __('bulk_print_all') ?>
|
||||
<button onclick="window.print()" class="btn btn-primary btn-lg" style="flex:1;">
|
||||
<i class="fas fa-print"></i> <?= __('bulk_print_all') ?>
|
||||
</button>
|
||||
<form method="get" style="flex:1;">
|
||||
<button type="submit" class="btn btn-outline" style="width:100%;"><?= __('btn_new_code') ?></button>
|
||||
<button type="submit" class="btn btn-secondary btn-lg btn-block"><?= __('btn_new_code') ?></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<?php elseif (empty($sites)): ?>
|
||||
<div class="empty-state">
|
||||
<div style="font-size:60px;margin-bottom:20px;opacity:0.3;">📶</div>
|
||||
<div class="empty-icon"><i class="fas fa-wifi"></i></div>
|
||||
<p><?= __('voucher_no_sites') ?><br>
|
||||
<?php if ($auth->isAdmin()): ?>
|
||||
<a href="admin/" style="color:var(--accent);"><?= __('voucher_no_sites_admin') ?></a>
|
||||
|
|
@ -570,7 +543,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<div class="email-checkbox-wrapper">
|
||||
<input type="checkbox" id="send_email" name="send_email" onchange="toggleEmailField()">
|
||||
<label for="send_email">
|
||||
✉️ <?= __('voucher_email_send') ?>
|
||||
<i class="fas fa-envelope" style="color:var(--accent);"></i> <?= __('voucher_email_send') ?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="email-input-wrapper" id="email_field">
|
||||
|
|
@ -587,7 +560,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<div class="email-option">
|
||||
<div class="email-checkbox-wrapper">
|
||||
<input type="checkbox" id="send_sms" name="send_sms" onchange="document.getElementById('sms_field').style.display=this.checked?'block':'none'">
|
||||
<label for="send_sms">📱 Code per SMS versenden</label>
|
||||
<label for="send_sms"><i class="fas fa-comment-sms" style="color:var(--accent);"></i> Code per SMS versenden</label>
|
||||
</div>
|
||||
<div id="sms_field" style="display:none;margin-top:12px;">
|
||||
<label for="recipient_phone">Telefonnummer (international, z.B. +49170…)</label>
|
||||
|
|
@ -596,8 +569,8 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<button type="submit" class="btn" id="submitBtn">
|
||||
<?= __('voucher_create_btn') ?>
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" id="submitBtn">
|
||||
<i class="fas fa-ticket"></i> <?= __('voucher_create_btn') ?>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -617,7 +590,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
<label for="bulk_count"><?= __('bulk_quantity') ?></label>
|
||||
<input type="number" id="bulk_count" name="bulk_count"
|
||||
min="1" max="20" value="5" required>
|
||||
<p style="font-size:12px;color:var(--text-muted);margin-top:5px;"><?= __('bulk_quantity_hint') ?></p>
|
||||
<p class="form-hint"><?= __('bulk_quantity_hint') ?></p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -646,7 +619,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn" id="bulkSubmitBtn">
|
||||
<button type="submit" class="btn btn-primary btn-lg btn-block" id="bulkSubmitBtn">
|
||||
<?= str_replace('{count}', '<span id="bulkCountLabel">5</span>', __('bulk_create_btn')) ?>
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -670,7 +643,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
new QRCode(document.getElementById('qrcode'), {
|
||||
text: '<?= addslashes($voucherCode) ?>',
|
||||
width: 160, height: 160,
|
||||
colorDark: '#ffffff', colorLight: 'transparent',
|
||||
colorDark: '#101625', colorLight: '#ffffff',
|
||||
correctLevel: QRCode.CorrectLevel.M
|
||||
});
|
||||
});
|
||||
|
|
@ -742,7 +715,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
const btn = document.getElementById('submitBtn');
|
||||
if (!btn || btn.disabled) { e.preventDefault(); return; }
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '⏳ <?= __('voucher_creating') ?>';
|
||||
btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> <?= __('voucher_creating') ?>';
|
||||
});
|
||||
|
||||
document.getElementById('bulkForm')?.addEventListener('submit', function(e) {
|
||||
|
|
@ -750,7 +723,7 @@ function buildPrintCard($template, $data, $instructionHeader, $instructionText,
|
|||
if (!btn || btn.disabled) { e.preventDefault(); return; }
|
||||
const count = document.getElementById('bulk_count').value;
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '⏳ <?= addslashes(str_replace('{count}', "' + count + '", __('bulk_creating'))) ?>';
|
||||
btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> <?= addslashes(str_replace('{count}', "' + count + '", __('bulk_creating'))) ?>';
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue