diff --git a/templates/create_qr_code.html b/templates/create_qr_code.html index 2a1469f..369e3a5 100644 --- a/templates/create_qr_code.html +++ b/templates/create_qr_code.html @@ -1,656 +1,672 @@ + + + + Create QR Code - QR Management System + + - + .btn-secondary:hover { + background: var(--gray-300); + } - -
-
-
-

- - Create New QR Code -

-

Generate a QR code for attendance tracking at your location

-
+ .btn-outline { + background: transparent; + color: var(--gray-600); + border: 2px solid var(--gray-300); + } -
- - - Bulk Import from Excel - -
+ .btn-outline:hover { + background: var(--gray-100); + border-color: var(--gray-400); + color: var(--gray-700); + } -
- - -
-
-

- - Basic Information -

-

Provide the basic details for your QR code

-
+ .error-message { + color: var(--error-color); + font-size: 0.875rem; + margin-top: 0.5rem; + } -
- - - A unique name to identify this QR code -
- 0/100 + .form-group.has-error input, + .form-group.has-error textarea { + border-color: var(--error-color); + } + + /* Responsive adjustments */ + @media (max-width: 768px) { + .form-row { + grid-template-columns: 1fr; + } + + .qr-preview-container { + flex-direction: column; + text-align: center; + } + + .range-input-group { + flex-direction: column; + gap: 0.5rem; + align-items: stretch; + } + + .range-value { + text-align: center; + } + } + + @media (max-width: 640px) { + .container { + padding: 0 0.5rem; + } + + .form-container { + padding: 1.5rem; + } + + .form-actions { + flex-direction: column; + } + } + + /* Animation for preview updates */ + .qr-preview { + animation: pulse 0.3s ease-in-out; + } + + @keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } + } + + /* Toast notification styles */ + .toast { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + } + + .toast-content { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--gray-800); + } + + .toast-content i { + font-size: 1.1rem; + } + + + + + +
+
+
+

+ + Create New QR Code +

+

Generate a QR code for attendance tracking at your location

+
+ + + + + + +
+
+

+ + Basic Information +

+

Provide the basic details for your QR code

-
- -
- - - - Standard: employee checks in at one fixed location.
- Dynamic: employee picks a location from a list when scanning. - -
- +
+ + + A unique name to identify this QR code +
+ 0/100 +
+
- -
+ +
+ + + + Standard: employee checks in at one fixed location.
+ Dynamic: employee picks a location from a list when scanning. + +
+ + + +
- - The name of the physical location where this QR code will be - used + + The name of the physical location where this QR code will be + used
0/100
-
+
-
- - - - - Organize your QR code by assigning it to a project - +
+ + + + + Organize your QR code by assigning it to a project + +
-
- -
+ +

@@ -666,17 +682,28 @@ Complete Address * - - Include all address details for accurate location - identification + + Include all address details for accurate location + identification
0/500
- +

- -
-
- - - Select the event type for this QR code -
- -
- - - -
-
-

- - Photo Verification -

-

Require a photo when employee check-in location is too far from the QR code

-
-
- - - When disabled, photo verification is skipped for this QR code regardless of - distance -
-
- - -
-
-

- - QR Code Customization -

-

Customize the appearance and style of your QR code

-
- - -
- - - Choose a pre-defined style or customize manually below -
- - -
+ +
-
+
+ + + +
+
+

+ + Photo Verification +

+

Require a photo when employee check-in location is too far from the QR code

+
-
- -
-
- -
- - 10px -
- Size of each QR code module (affects overall size) + +
+
+

+ + QR Code Customization +

+

Customize the appearance and style of your QR code

+
-
-
- -
- - - Higher levels allow QR code to work even if partially damaged -
+ +
+
+ +
+ + +
+ Color of the QR code modules +
- -
-

- - Live Preview -

-
-
-
- -
-
-
-
-
-
-
-
+
+ +
+ + +
+ Background color of the QR code +
+
+ + +
+
+ +
+ + 10px +
+ Size of each QR code module (affects overall size) +
+ +
+ +
+ + 4 modules +
+ White border around the QR code +
+
+ + +
+ + + Higher levels allow QR code to work even if partially damaged +
+ + +
+

+ + Live Preview +

+
+
+
+ +
+
+
+
+
+
+
+
+
-
-
-

Sample QR Code Preview

-

Colors and styling will be applied to your actual QR code

+
+

Sample QR Code Preview

+

Colors and styling will be applied to your actual QR code

+
-
- - + + + + + + +
+ + + Cancel + + + +
+ +
+
+ + + + + + + + + + + +"latitude" name="latitude" value="" />