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));