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

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

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
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

19
app.js
View File

@@ -29,7 +29,7 @@ const toDateInput = document.getElementById('toDate');
const modelNumberInput = document.getElementById('modelNumber');
const chassisNumberInput = document.getElementById('chassisNumber');
const engineSerialInput = document.getElementById('engineSerial');
const staticValueInput = document.getElementById('staticValue');
const engineCapacityInput = document.getElementById('engineCapacity');
// Preview Elements
const previewRegNumber = document.getElementById('previewRegNumber');
@@ -40,7 +40,7 @@ const previewToDate = document.getElementById('previewToDate');
const previewModelNumber = document.getElementById('previewModelNumber');
const previewChassisNumber = document.getElementById('previewChassisNumber');
const previewEngineSerial = document.getElementById('previewEngineSerial');
const previewStaticValue = document.getElementById('previewStaticValue');
const previewEngineCapacity = document.getElementById('previewEngineCapacity');
const previewGarageInfo = document.getElementById('previewGarageInfo');
const garageLogo = document.getElementById('garageLogo');
@@ -96,6 +96,7 @@ function setupEventListeners() {
modelNumberInput.addEventListener('input', updatePreview);
chassisNumberInput.addEventListener('input', updatePreview);
engineSerialInput.addEventListener('input', updatePreview);
engineCapacityInput.addEventListener('input', updatePreview);
garageSelect.addEventListener('change', updatePreview);
// Auto-uppercase for certain fields
@@ -125,18 +126,18 @@ function updatePreview() {
const garage = garageTemplates[garageSelect.value];
// Update registration number
const regNumber = regNumberInput.value || 'A0F7930';
const regNumber = regNumberInput.value || 'X0X0000';
previewRegNumber.textContent = formatRegNumber(regNumber);
// Update dates
previewFromDate.textContent = formatDateForDisplay(fromDateInput.value) || '21-03-2026';
previewToDate.textContent = formatDateForDisplay(toDateInput.value) || '20-03-2027';
previewFromDate.textContent = formatDateForDisplay(fromDateInput.value) || 'DD-MM-YYYY';
previewToDate.textContent = formatDateForDisplay(toDateInput.value) || 'DD-MM-YYYY';
// Update vehicle info
previewModelNumber.textContent = modelNumberInput.value || '55S400-010C';
previewChassisNumber.textContent = chassisNumberInput.value || 'MH355S004DK117181';
previewEngineSerial.textContent = engineSerialInput.value || '55S-118388';
previewStaticValue.textContent = staticValueInput.value || '135.000';
previewModelNumber.textContent = modelNumberInput.value || 'XXXX-XXXXX';
previewChassisNumber.textContent = chassisNumberInput.value || 'XXXXXXXXXXXXXXXXX';
previewEngineSerial.textContent = engineSerialInput.value || 'XXX-XXXXXX';
previewEngineCapacity.textContent = engineCapacityInput.value || '000.000';
// Update garage info
if (garage) {

27
index.html
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8">
<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>
<!-- Material Design Icons -->
@@ -84,12 +86,11 @@
placeholder="e.g., 55S-118388" required>
</div>
<!-- Static Value (Read-only for now) -->
<!-- Engine Capacity -->
<div class="form-group">
<label class="form-label" for="staticValue">Value</label>
<input type="text" id="staticValue" class="form-input"
value="135.000" readonly>
<span class="form-hint">Static value</span>
<label class="form-label" for="engineCapacity">Engine Capacity (CC)</label>
<input type="text" id="engineCapacity" class="form-input"
placeholder="e.g., 135.000" required>
</div>
<!-- Generate Button -->
@@ -111,24 +112,24 @@
<!-- Sticker will be rendered here -->
<div class="sticker">
<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 class="sticker-barcode-row">
<span id="previewBarcodeNumber">1162603748</span>
<span id="previewBarcodeNumber">0000000000</span>
<svg id="previewBarcode"></svg>
</div>
<div class="sticker-body">
<div class="sticker-info">
<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 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 id="previewModelNumber">55S400-010C</div>
<div id="previewChassisNumber">MH355S004DK117181</div>
<div id="previewEngineSerial">55S-118388</div>
<div id="previewStaticValue">135.000</div>
<div id="previewModelNumber">XXXX-XXXXX</div>
<div id="previewChassisNumber">XXXXXXXXXXXXXXXXX</div>
<div id="previewEngineSerial">XXX-XXXXXX</div>
<div id="previewEngineCapacity">000.000</div>
</div>
<div class="sticker-logo">
<div id="garageLogo" class="garage-logo">

65
styles.css
View File

@@ -1,9 +1,11 @@
/* CSS Custom Properties - Material Design 3 inspired */
:root {
/* Light theme (default) */
--md-sys-color-primary: #1976D2;
--md-sys-color-primary-dark: #1565C0;
--md-sys-color-on-primary: #FFFFFF;
--md-sys-color-surface: #FAFAFA;
--md-sys-color-surface-container: #FFFFFF;
--md-sys-color-surface-variant: #E3E3E3;
--md-sys-color-on-surface: #1C1B1F;
--md-sys-color-on-surface-variant: #49454F;
@@ -12,6 +14,8 @@
--md-sys-color-background: #F5F5F5;
--md-sys-color-error: #B3261E;
--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-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;
}
/* 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 */
*, *::before, *::after {
box-sizing: border-box;
@@ -57,13 +86,14 @@ body {
/* App Bar */
.app-bar {
background-color: var(--md-sys-color-primary);
color: var(--md-sys-color-on-primary);
background-color: var(--md-sys-color-surface);
color: var(--md-sys-color-on-surface);
padding: 16px 24px;
box-shadow: var(--md-sys-elevation-2);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.app-bar-content {
@@ -81,6 +111,7 @@ body {
.app-bar .material-icons {
font-size: 28px;
color: var(--md-sys-color-primary);
}
/* Main Content */
@@ -110,7 +141,7 @@ body {
gap: 12px;
padding: 20px 24px;
border-bottom: 1px solid var(--md-sys-color-outline-variant);
background-color: #fff;
background-color: var(--md-sys-color-surface-container);
}
.card-header h2 {
@@ -149,7 +180,7 @@ body {
padding: 14px 16px;
border: 1px solid var(--md-sys-color-outline-variant);
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);
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
@@ -248,19 +279,19 @@ body {
padding: 24px;
display: flex;
justify-content: center;
background-color: #E8E8E8;
background-color: var(--md-sys-color-preview-bg);
background-image:
linear-gradient(45deg, #D0D0D0 25%, transparent 25%),
linear-gradient(-45deg, #D0D0D0 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #D0D0D0 75%),
linear-gradient(-45deg, transparent 75%, #D0D0D0 75%);
linear-gradient(45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
linear-gradient(-45deg, var(--md-sys-color-preview-pattern) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%),
linear-gradient(-45deg, transparent 75%, var(--md-sys-color-preview-pattern) 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
/* Sticker Preview */
.sticker-preview {
background-color: #fff;
background-color: var(--md-sys-color-surface-container);
padding: 8px;
box-shadow: var(--md-sys-elevation-2);
}
@@ -271,6 +302,7 @@ body {
font-family: Arial, sans-serif;
font-size: 11px;
background: #fff;
color: #000;
}
.sticker-header {
@@ -343,8 +375,8 @@ body {
.snackbar {
visibility: hidden;
min-width: 280px;
background-color: #323232;
color: #fff;
background-color: var(--md-sys-color-surface-variant);
color: var(--md-sys-color-on-surface);
text-align: center;
border-radius: var(--md-sys-shape-corner-medium);
padding: 16px 24px;
@@ -357,6 +389,13 @@ body {
box-shadow: var(--md-sys-elevation-3);
}
@media (prefers-color-scheme: light) {
.snackbar {
background-color: #323232;
color: #fff;
}
}
.snackbar.show {
visibility: visible;
animation: fadein 0.3s, fadeout 0.3s 2.7s;
@@ -364,10 +403,12 @@ body {
.snackbar.success {
background-color: var(--md-sys-color-success);
color: #fff;
}
.snackbar.error {
background-color: var(--md-sys-color-error);
color: #fff;
}
@keyframes fadein {