Auto-commit before push to git.mycloud24.ru
This commit is contained in:
InviteMe Developer
+171
-16
@@ -1,9 +1,144 @@
|
||||
:root {
|
||||
--bg-color: #0f172a;
|
||||
--surface-color: rgba(30, 41, 59, 0.85);
|
||||
--surface-border: rgba(148, 163, 184, 0.15);
|
||||
--text-color: #e2e8f0;
|
||||
--text-muted: #94a3b8;
|
||||
--accent-color: #06b6d4;
|
||||
--accent-glow: rgba(6, 182, 212, 0.35);
|
||||
--success-color: #10b981;
|
||||
--danger-color: #ef4444;
|
||||
--warning-color: #f59e0b;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--bg-color);
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 25%),
|
||||
radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08) 0%, transparent 25%);
|
||||
color: var(--text-color);
|
||||
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent-color) !important;
|
||||
text-shadow: 0 0 12px var(--accent-glow);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: var(--text-color) !important;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--surface-color);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.table {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(odd) > * {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.table-hover > tbody > tr:hover > * {
|
||||
background-color: rgba(6, 182, 212, 0.08);
|
||||
}
|
||||
|
||||
.table-secondary > * {
|
||||
background-color: rgba(148, 163, 184, 0.15) !important;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-control-color {
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid var(--surface-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
background-color: rgba(15, 23, 42, 0.8);
|
||||
border-color: var(--accent-color);
|
||||
box-shadow: 0 0 0 0.25rem var(--accent-glow);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
|
||||
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border-color: var(--accent-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.alert {
|
||||
border: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.checkin-container {
|
||||
@@ -14,12 +149,12 @@ body {
|
||||
.qr-reader {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
border: 2px dashed #dee2e6;
|
||||
border-radius: 8px;
|
||||
border: 2px dashed var(--surface-border);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
background-color: rgba(15, 23, 42, 0.5);
|
||||
}
|
||||
|
||||
.guest-photo {
|
||||
@@ -27,9 +162,10 @@ body {
|
||||
max-width: 300px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border: 3px solid #dee2e6;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 16px;
|
||||
border: 3px solid var(--surface-border);
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.guest-photo-placeholder {
|
||||
@@ -39,18 +175,23 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 12px;
|
||||
color: #6c757d;
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
|
||||
border-radius: 16px;
|
||||
color: var(--text-muted);
|
||||
font-size: 1.2rem;
|
||||
border: 2px dashed var(--surface-border);
|
||||
}
|
||||
|
||||
#search-results .list-group-item {
|
||||
cursor: pointer;
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
border-color: var(--surface-border);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#search-results .list-group-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
background-color: rgba(6, 182, 212, 0.12);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@@ -58,10 +199,24 @@ body {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.table th {
|
||||
white-space: nowrap;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.display-6 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
div[style*="max-width: 600px"] {
|
||||
background: var(--surface-color) !important;
|
||||
border: 1px solid var(--surface-border) !important;
|
||||
}
|
||||
|
||||
+79
-27
@@ -1,7 +1,9 @@
|
||||
let html5QrCode = null;
|
||||
let currentToken = null;
|
||||
let availableCameras = [];
|
||||
|
||||
const qrReader = document.getElementById("qr-reader");
|
||||
const cameraSelect = document.getElementById("camera-select");
|
||||
const startScanBtn = document.getElementById("start-scan");
|
||||
const stopScanBtn = document.getElementById("stop-scan");
|
||||
const searchInput = document.getElementById("search-input");
|
||||
@@ -12,6 +14,8 @@ const guestName = document.getElementById("guest-name");
|
||||
const guestDepartment = document.getElementById("guest-department");
|
||||
const guestPosition = document.getElementById("guest-position");
|
||||
const guestEmail = document.getElementById("guest-email");
|
||||
const guestEvent = document.getElementById("guest-event");
|
||||
const eventSelect = document.getElementById("event-select");
|
||||
const checkInStatus = document.getElementById("check-in-status");
|
||||
const checkInBtn = document.getElementById("check-in-btn");
|
||||
const resetBtn = document.getElementById("reset-btn");
|
||||
@@ -24,6 +28,7 @@ function resetGuestCard() {
|
||||
guestDepartment.textContent = "";
|
||||
guestPosition.textContent = "";
|
||||
guestEmail.textContent = "";
|
||||
if (guestEvent) guestEvent.textContent = "";
|
||||
checkInStatus.classList.add("d-none");
|
||||
checkInStatus.className = "alert d-none";
|
||||
checkInBtn.disabled = false;
|
||||
@@ -53,6 +58,9 @@ function showGuest(guest) {
|
||||
guestDepartment.textContent = guest.department;
|
||||
guestPosition.textContent = guest.position || "";
|
||||
guestEmail.textContent = guest.email;
|
||||
if (guestEvent) {
|
||||
guestEvent.textContent = guest.event_name ? `Мероприятие: ${guest.event_name}` : "";
|
||||
}
|
||||
|
||||
if (guest.checked_in) {
|
||||
checkInStatus.classList.remove("d-none", "alert-success", "alert-warning");
|
||||
@@ -79,39 +87,76 @@ function loadGuestByToken(token) {
|
||||
});
|
||||
}
|
||||
|
||||
// QR Scanner
|
||||
startScanBtn.addEventListener("click", () => {
|
||||
html5QrCode = new Html5Qrcode("qr-reader");
|
||||
// Camera selection
|
||||
function populateCameras() {
|
||||
Html5Qrcode.getCameras()
|
||||
.then(cameras => {
|
||||
if (cameras && cameras.length) {
|
||||
const cameraId = cameras[0].id;
|
||||
html5QrCode.start(
|
||||
cameraId,
|
||||
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
||||
(decodedText) => {
|
||||
html5QrCode.stop();
|
||||
stopScanBtn.classList.add("d-none");
|
||||
startScanBtn.classList.remove("d-none");
|
||||
availableCameras = cameras || [];
|
||||
cameraSelect.innerHTML = '<option value="">-- Выберите камеру --</option>';
|
||||
|
||||
// Extract token from URL
|
||||
const url = new URL(decodedText);
|
||||
const token = url.searchParams.get("token");
|
||||
if (token) {
|
||||
loadGuestByToken(token);
|
||||
}
|
||||
},
|
||||
(errorMessage) => {}
|
||||
);
|
||||
startScanBtn.classList.add("d-none");
|
||||
stopScanBtn.classList.remove("d-none");
|
||||
} else {
|
||||
alert("Камеры не найдены");
|
||||
if (availableCameras.length === 0) {
|
||||
cameraSelect.innerHTML += '<option value="" disabled>Камеры не найдены</option>';
|
||||
return;
|
||||
}
|
||||
|
||||
availableCameras.forEach((camera, index) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = camera.id;
|
||||
option.textContent = camera.label || `Камера ${index + 1}`;
|
||||
cameraSelect.appendChild(option);
|
||||
});
|
||||
|
||||
// Try to select back camera by default
|
||||
const backCamera = availableCameras.find(c =>
|
||||
c.label.toLowerCase().includes("back") ||
|
||||
c.label.toLowerCase().includes("задняя") ||
|
||||
c.label.toLowerCase().includes("environment")
|
||||
);
|
||||
if (backCamera) {
|
||||
cameraSelect.value = backCamera.id;
|
||||
} else if (availableCameras.length > 0) {
|
||||
cameraSelect.value = availableCameras[availableCameras.length - 1].id;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
alert("Ошибка доступа к камере: " + err.message);
|
||||
console.error("Ошибка получения списка камер:", err);
|
||||
cameraSelect.innerHTML = '<option value="">Ошибка доступа к камерам</option>';
|
||||
});
|
||||
}
|
||||
|
||||
// QR Scanner
|
||||
startScanBtn.addEventListener("click", () => {
|
||||
const cameraId = cameraSelect.value;
|
||||
if (!cameraId) {
|
||||
alert("Сначала выберите камеру");
|
||||
return;
|
||||
}
|
||||
|
||||
html5QrCode = new Html5Qrcode("qr-reader");
|
||||
html5QrCode.start(
|
||||
cameraId,
|
||||
{ fps: 10, qrbox: { width: 250, height: 250 } },
|
||||
(decodedText) => {
|
||||
html5QrCode.stop();
|
||||
stopScanBtn.classList.add("d-none");
|
||||
startScanBtn.classList.remove("d-none");
|
||||
|
||||
// Extract token from URL
|
||||
try {
|
||||
const url = new URL(decodedText);
|
||||
const token = url.searchParams.get("token");
|
||||
if (token) {
|
||||
loadGuestByToken(token);
|
||||
}
|
||||
} catch (e) {
|
||||
// If decodedText is not a URL, treat it as token
|
||||
loadGuestByToken(decodedText);
|
||||
}
|
||||
},
|
||||
(errorMessage) => {}
|
||||
);
|
||||
startScanBtn.classList.add("d-none");
|
||||
stopScanBtn.classList.remove("d-none");
|
||||
});
|
||||
|
||||
stopScanBtn.addEventListener("click", () => {
|
||||
@@ -132,7 +177,12 @@ searchInput.addEventListener("input", (e) => {
|
||||
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
fetch(`/api/guests/search?q=${encodeURIComponent(query)}`)
|
||||
const eventId = eventSelect ? eventSelect.value : "";
|
||||
let url = `/api/guests/search?q=${encodeURIComponent(query)}`;
|
||||
if (eventId) {
|
||||
url += `&event_id=${encodeURIComponent(eventId)}`;
|
||||
}
|
||||
fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(guests => {
|
||||
searchResults.innerHTML = "";
|
||||
@@ -190,6 +240,8 @@ resetBtn.addEventListener("click", resetGuestCard);
|
||||
|
||||
// If token is in URL (scanned via external scanner)
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
populateCameras();
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const token = urlParams.get("token");
|
||||
if (token) {
|
||||
|
||||
Reference in New Issue
Block a user