shihaam/roadworthiness-sticker-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add cc, dark theme and hide default values
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
shihaam
2026-03-22 00:13:40 +05:00
parent c1671efdf5
commit 5437bcf721
3 changed files with 77 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.js
+10 -9
View File
@@ -29,7 +29,7 @@ const toDateInput = document.getElementById('toDate');
const modelNumberInput = document.getElementById('modelNumber'); const modelNumberInput = document.getElementById('modelNumber');
const chassisNumberInput = document.getElementById('chassisNumber'); const chassisNumberInput = document.getElementById('chassisNumber');
const engineSerialInput = document.getElementById('engineSerial'); const engineSerialInput = document.getElementById('engineSerial');
const staticValueInput = document.getElementById('staticValue'); const engineCapacityInput = document.getElementById('engineCapacity');
// Preview Elements // Preview Elements
const previewRegNumber = document.getElementById('previewRegNumber'); const previewRegNumber = document.getElementById('previewRegNumber');
@@ -40,7 +40,7 @@ const previewToDate = document.getElementById('previewToDate');
const previewModelNumber = document.getElementById('previewModelNumber'); const previewModelNumber = document.getElementById('previewModelNumber');
const previewChassisNumber = document.getElementById('previewChassisNumber'); const previewChassisNumber = document.getElementById('previewChassisNumber');
const previewEngineSerial = document.getElementById('previewEngineSerial'); const previewEngineSerial = document.getElementById('previewEngineSerial');
const previewStaticValue = document.getElementById('previewStaticValue'); const previewEngineCapacity = document.getElementById('previewEngineCapacity');
const previewGarageInfo = document.getElementById('previewGarageInfo'); const previewGarageInfo = document.getElementById('previewGarageInfo');
const garageLogo = document.getElementById('garageLogo'); const garageLogo = document.getElementById('garageLogo');
@@ -96,6 +96,7 @@ function setupEventListeners() {
modelNumberInput.addEventListener('input', updatePreview); modelNumberInput.addEventListener('input', updatePreview);
chassisNumberInput.addEventListener('input', updatePreview); chassisNumberInput.addEventListener('input', updatePreview);
engineSerialInput.addEventListener('input', updatePreview); engineSerialInput.addEventListener('input', updatePreview);
engineCapacityInput.addEventListener('input', updatePreview);
garageSelect.addEventListener('change', updatePreview); garageSelect.addEventListener('change', updatePreview);
// Auto-uppercase for certain fields // Auto-uppercase for certain fields
@@ -125,18 +126,18 @@ function updatePreview() {
const garage = garageTemplates[garageSelect.value]; const garage = garageTemplates[garageSelect.value];
// Update registration number // Update registration number
const regNumber = regNumberInput.value || 'A0F7930'; const regNumber = regNumberInput.value || 'X0X0000';
previewRegNumber.textContent = formatRegNumber(regNumber); previewRegNumber.textContent = formatRegNumber(regNumber);
// Update dates // Update dates
previewFromDate.textContent = formatDateForDisplay(fromDateInput.value) || '21-03-2026'; previewFromDate.textContent = formatDateForDisplay(fromDateInput.value) || 'DD-MM-YYYY';
previewToDate.textContent = formatDateForDisplay(toDateInput.value) || '20-03-2027'; previewToDate.textContent = formatDateForDisplay(toDateInput.value) || 'DD-MM-YYYY';
// Update vehicle info // Update vehicle info
previewModelNumber.textContent = modelNumberInput.value || '55S400-010C'; previewModelNumber.textContent = modelNumberInput.value || 'XXXX-XXXXX';
previewChassisNumber.textContent = chassisNumberInput.value || 'MH355S004DK117181'; previewChassisNumber.textContent = chassisNumberInput.value || 'XXXXXXXXXXXXXXXXX';
previewEngineSerial.textContent = engineSerialInput.value || '55S-118388'; previewEngineSerial.textContent = engineSerialInput.value || 'XXX-XXXXXX';
previewStaticValue.textContent = staticValueInput.value || '135.000'; previewEngineCapacity.textContent = engineCapacityInput.value || '000.000';
// Update garage info // Update garage info
if (garage) { if (garage) {
index.html
+14 -13
View File
@@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="darkreader-lock">
<meta name="color-scheme" content="light dark">
<title>Roadworthiness Sticker Generator</title> <title>Roadworthiness Sticker Generator</title>
<!-- Material Design Icons --> <!-- Material Design Icons -->
@@ -84,12 +86,11 @@
placeholder="e.g., 55S-118388" required> placeholder="e.g., 55S-118388" required>
</div> </div>
<!-- Static Value (Read-only for now) --> <!-- Engine Capacity -->
<div class="form-group"> <div class="form-group">
<label class="form-label" for="staticValue">Value</label> <label class="form-label" for="engineCapacity">Engine Capacity (CC)</label>
<input type="text" id="staticValue" class="form-input" <input type="text" id="engineCapacity" class="form-input"
value="135.000" readonly> placeholder="e.g., 135.000" required>
<span class="form-hint">Static value</span>
</div> </div>
<!-- Generate Button --> <!-- Generate Button -->
@@ -111,24 +112,24 @@
<!-- Sticker will be rendered here --> <!-- Sticker will be rendered here -->
<div class="sticker"> <div class="sticker">
<div class="sticker-header"> <div class="sticker-header">
<span id="previewRegNumber">A 0 F 7 9 3 0</span> <span id="previewRegNumber">X 0 X 0 0 0 0</span>
</div> </div>
<div class="sticker-barcode-row"> <div class="sticker-barcode-row">
<span id="previewBarcodeNumber">1162603748</span> <span id="previewBarcodeNumber">0000000000</span>
<svg id="previewBarcode"></svg> <svg id="previewBarcode"></svg>
</div> </div>
<div class="sticker-body"> <div class="sticker-body">
<div class="sticker-info"> <div class="sticker-info">
<div class="date-row"> <div class="date-row">
<span><strong>From:</strong> <span id="previewFromDate">21-03-2026</span></span> <span><strong>From:</strong> <span id="previewFromDate">DD-MM-YYYY</span></span>
</div> </div>
<div class="date-row"> <div class="date-row">
<span><strong>To:</strong> <span id="previewToDate">20-03-2027</span></span> <span><strong>To:</strong> <span id="previewToDate">DD-MM-YYYY</span></span>
</div> </div>
<div id="previewModelNumber">55S400-010C</div> <div id="previewModelNumber">XXXX-XXXXX</div>
<div id="previewChassisNumber">MH355S004DK117181</div> <div id="previewChassisNumber">XXXXXXXXXXXXXXXXX</div>
<div id="previewEngineSerial">55S-118388</div> <div id="previewEngineSerial">XXX-XXXXXX</div>
<div id="previewStaticValue">135.000</div> <div id="previewEngineCapacity">000.000</div>
</div> </div>
<div class="sticker-logo"> <div class="sticker-logo">
<div id="garageLogo" class="garage-logo"> <div id="garageLogo" class="garage-logo">
styles.css
+53 -12
View File
@@ -1,9 +1,11 @@
/* CSS Custom Properties - Material Design 3 inspired */ /* CSS Custom Properties - Material Design 3 inspired */
:root { :root {
/* Light theme (default) */
--md-sys-color-primary: #1976D2; --md-sys-color-primary: #1976D2;
--md-sys-color-primary-dark: #1565C0; --md-sys-color-primary-dark: #1565C0;
--md-sys-color-on-primary: #FFFFFF; --md-sys-color-on-primary: #FFFFFF;
--md-sys-color-surface: #FAFAFA; --md-sys-color-surface: #FAFAFA;
--md-sys-color-surface-container: #FFFFFF;
--md-sys-color-surface-variant: #E3E3E3; --md-sys-color-surface-variant: #E3E3E3;
--md-sys-color-on-surface: #1C1B1F; --md-sys-color-on-surface: #1C1B1F;
--md-sys-color-on-surface-variant: #49454F; --md-sys-color-on-surface-variant: #49454F;
@@ -12,6 +14,8 @@
--md-sys-color-background: #F5F5F5; --md-sys-color-background: #F5F5F5;
--md-sys-color-error: #B3261E; --md-sys-color-error: #B3261E;
--md-sys-color-success: #2E7D32; --md-sys-color-success: #2E7D32;
--md-sys-color-preview-bg: #E8E8E8;
--md-sys-color-preview-pattern: #D0D0D0;
--md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); --md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
--md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1); --md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);
@@ -27,6 +31,31 @@
--md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Roboto', sans-serif; --md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Roboto', sans-serif;
} }
/* Dark theme - follows system preference */
@media (prefers-color-scheme: dark) {
:root {
--md-sys-color-primary: #90CAF9;
--md-sys-color-primary-dark: #64B5F6;
--md-sys-color-on-primary: #003258;
--md-sys-color-surface: #1E1E1E;
--md-sys-color-surface-container: #2D2D2D;
--md-sys-color-surface-variant: #3D3D3D;
--md-sys-color-on-surface: #E6E1E5;
--md-sys-color-on-surface-variant: #CAC4D0;
--md-sys-color-outline: #938F99;
--md-sys-color-outline-variant: #49454F;
--md-sys-color-background: #121212;
--md-sys-color-error: #F2B8B5;
--md-sys-color-success: #81C784;
--md-sys-color-preview-bg: #2D2D2D;
--md-sys-color-preview-pattern: #3D3D3D;
--md-sys-elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.24);
--md-sys-elevation-2: 0 2px 4px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3);
--md-sys-elevation-3: 0 4px 8px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.3);
}
}
/* Reset */ /* Reset */
*, *::before, *::after { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
@@ -57,13 +86,14 @@ body {
/* App Bar */ /* App Bar */
.app-bar { .app-bar {
background-color: var(--md-sys-color-primary); background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-primary); color: var(--md-sys-color-on-surface);
padding: 16px 24px; padding: 16px 24px;
box-shadow: var(--md-sys-elevation-2); box-shadow: var(--md-sys-elevation-2);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
} }
.app-bar-content { .app-bar-content {
@@ -81,6 +111,7 @@ body {
.app-bar .material-icons { .app-bar .material-icons {
font-size: 28px; font-size: 28px;
color: var(--md-sys-color-primary);
} }
/* Main Content */ /* Main Content */
@@ -110,7 +141,7 @@ body {
gap: 12px; gap: 12px;
padding: 20px 24px; padding: 20px 24px;
border-bottom: 1px solid var(--md-sys-color-outline-variant); border-bottom: 1px solid var(--md-sys-color-outline-variant);
background-color: #fff; background-color: var(--md-sys-color-surface-container);
} }
.card-header h2 { .card-header h2 {
@@ -149,7 +180,7 @@ body {
padding: 14px 16px; padding: 14px 16px;
border: 1px solid var(--md-sys-color-outline-variant); border: 1px solid var(--md-sys-color-outline-variant);
border-radius: var(--md-sys-shape-corner-medium); border-radius: var(--md-sys-shape-corner-medium);
background-color: #fff; background-color: var(--md-sys-color-surface-container);
color: var(--md-sys-color-on-surface); color: var(--md-sys-color-on-surface);
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
width: 100%; width: 100%;
@@ -248,19 +279,19 @@ body {
padding: 24px; padding: 24px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #E8E8E8; background-color: var(--md-sys-color-preview-bg);
background-image: background-image:
linear-gradient(45deg, #D0D0D0 25%, transparent 25%), linear-gradient(45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
linear-gradient(-45deg, #D0D0D0 25%, transparent 25%), linear-gradient(-45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #D0D0D0 75%), linear-gradient(45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%),
linear-gradient(-45deg, transparent 75%, #D0D0D0 75%); linear-gradient(-45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
} }
/* Sticker Preview */ /* Sticker Preview */
.sticker-preview { .sticker-preview {
background-color: #fff; background-color: var(--md-sys-color-surface-container);
padding: 8px; padding: 8px;
box-shadow: var(--md-sys-elevation-2); box-shadow: var(--md-sys-elevation-2);
} }
@@ -271,6 +302,7 @@ body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
font-size: 11px; font-size: 11px;
background: #fff; background: #fff;
color: #000;
} }
.sticker-header { .sticker-header {
@@ -343,8 +375,8 @@ body {
.snackbar { .snackbar {
visibility: hidden; visibility: hidden;
min-width: 280px; min-width: 280px;
background-color: #323232; background-color: var(--md-sys-color-surface-variant);
color: #fff; color: var(--md-sys-color-on-surface);
text-align: center; text-align: center;
border-radius: var(--md-sys-shape-corner-medium); border-radius: var(--md-sys-shape-corner-medium);
padding: 16px 24px; padding: 16px 24px;
@@ -357,6 +389,13 @@ body {
box-shadow: var(--md-sys-elevation-3); box-shadow: var(--md-sys-elevation-3);
} }
@media (prefers-color-scheme: light) {
.snackbar {
background-color: #323232;
color: #fff;
}
}
.snackbar.show { .snackbar.show {
visibility: visible; visibility: visible;
animation: fadein 0.3s, fadeout 0.3s 2.7s; animation: fadein 0.3s, fadeout 0.3s 2.7s;
@@ -364,10 +403,12 @@ body {
.snackbar.success { .snackbar.success {
background-color: var(--md-sys-color-success); background-color: var(--md-sys-color-success);
color: #fff;
} }
.snackbar.error { .snackbar.error {
background-color: var(--md-sys-color-error); background-color: var(--md-sys-color-error);
color: #fff;
} }
@keyframes fadein { @keyframes fadein {