diff --git a/client/src/views/UuidSelector.vue b/client/src/views/UuidSelector.vue index 984dfdc..30b7715 100644 --- a/client/src/views/UuidSelector.vue +++ b/client/src/views/UuidSelector.vue @@ -17,6 +17,16 @@ 🔍 + +
+ +
+
@@ -114,6 +124,7 @@ const loading = ref(true); const allUuids = ref([]); const searchQuery = ref(''); const filteredUuids = ref([]); +const qrMode = ref(false); const qrCanvas = ref(); const printContainer = ref(); @@ -188,7 +199,16 @@ function formatUuid(uuid: string): string { } function selectUuid(uuid: string) { - router.push(`/${uuid}`); + if (qrMode.value) { + // Find the UUID info and show QR modal + const uuidInfo = allUuids.value.find(u => u.uuid === uuid); + if (uuidInfo) { + printQR(uuidInfo); + } + } else { + // Normal behavior: navigate to the UUID + router.push(`/${uuid}`); + } } function selectRandom() { @@ -581,6 +601,65 @@ async function copyToClipboard() { opacity: 0.6; } +/* QR Mode Toggle Styles */ +.qr-mode-container { + margin: 15px 0 25px 0; + display: flex; + justify-content: center; +} + +.qr-mode-label { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + padding: 12px 20px; + background: rgba(102, 126, 234, 0.1); + border-radius: 25px; + border: 2px solid transparent; + transition: all 0.3s ease; + user-select: none; +} + +.qr-mode-label:hover { + background: rgba(102, 126, 234, 0.15); + border-color: rgba(102, 126, 234, 0.3); + transform: translateY(-1px); +} + +.qr-mode-checkbox { + width: 18px; + height: 18px; + border: 2px solid #667eea; + border-radius: 4px; + background: white; + cursor: pointer; + transition: all 0.3s ease; + position: relative; +} + +.qr-mode-checkbox:checked { + background: #667eea; + border-color: #667eea; +} + +.qr-mode-checkbox:checked::after { + content: '✓'; + position: absolute; + top: -2px; + left: 2px; + color: white; + font-size: 14px; + font-weight: bold; +} + +.qr-mode-text { + font-size: 16px; + font-weight: 600; + color: #667eea; + transition: color 0.3s ease; +} + .uuids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); @@ -926,6 +1005,19 @@ async function copyToClipboard() { .title { font-size: 2rem; } + + .qr-mode-container { + margin: 10px 0 20px 0; + } + + .qr-mode-label { + padding: 10px 16px; + font-size: 14px; + } + + .qr-mode-text { + font-size: 14px; + } .uuids-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));