init poc

app.js

@@ -0,0 +1,247 @@
+// Garage Templates Configuration
+const garageTemplates = {
+    'rs-auto': {
+        name: 'RS AUTO',
+        phone: '775 8999',
+        logo: {
+            type: 'svg',
+            content: `
+                <svg viewBox="0 0 80 80" class="logo-svg">
+                    <circle cx="40" cy="40" r="38" fill="none" stroke="#000" stroke-width="2"/>
+                    <text x="40" y="18" text-anchor="middle" font-size="8" font-weight="bold">RS AUTO</text>
+                    <text x="40" y="45" text-anchor="middle" font-size="24" font-weight="bold">S</text>
+                    <path d="M20 50 Q40 35 60 50" fill="none" stroke="#000" stroke-width="2"/>
+                    <text x="40" y="58" text-anchor="middle" font-size="6">P:0085037</text>
+                    <text x="40" y="70" text-anchor="middle" font-size="8" font-weight="bold">MALDIVES</text>
+                </svg>
+            `
+        }
+    }
+    // Add more garage templates here as needed
+};
+
+// DOM Elements
+const form = document.getElementById('stickerForm');
+const garageSelect = document.getElementById('garage');
+const regNumberInput = document.getElementById('regNumber');
+const fromDateInput = document.getElementById('fromDate');
+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');
+
+// Preview Elements
+const previewRegNumber = document.getElementById('previewRegNumber');
+const previewBarcodeNumber = document.getElementById('previewBarcodeNumber');
+const previewBarcode = document.getElementById('previewBarcode');
+const previewFromDate = document.getElementById('previewFromDate');
+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 previewGarageInfo = document.getElementById('previewGarageInfo');
+const garageLogo = document.getElementById('garageLogo');
+
+// Initialize the application
+function init() {
+    setDefaultDates();
+    setupEventListeners();
+    updatePreview();
+    generateBarcode();
+}
+
+// Set default dates (today and 1 year from today)
+function setDefaultDates() {
+    const today = new Date();
+    const nextYear = new Date(today);
+    nextYear.setFullYear(nextYear.getFullYear() + 1);
+
+    fromDateInput.value = formatDateForInput(today);
+    toDateInput.value = formatDateForInput(nextYear);
+}
+
+// Format date for input field (YYYY-MM-DD)
+function formatDateForInput(date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+
+// Format date for display (DD-MM-YYYY)
+function formatDateForDisplay(dateString) {
+    if (!dateString) return '';
+    const [year, month, day] = dateString.split('-');
+    return `${day}-${month}-${year}`;
+}
+
+// Format registration number with spaces
+function formatRegNumber(regNumber) {
+    return regNumber.toUpperCase().split('').join(' ');
+}
+
+// Generate a random barcode number (10 digits)
+function generateBarcodeNumber() {
+    return Math.floor(1000000000 + Math.random() * 9000000000).toString();
+}
+
+// Setup event listeners
+function setupEventListeners() {
+    // Real-time preview updates
+    regNumberInput.addEventListener('input', updatePreview);
+    fromDateInput.addEventListener('change', updatePreview);
+    toDateInput.addEventListener('change', updatePreview);
+    modelNumberInput.addEventListener('input', updatePreview);
+    chassisNumberInput.addEventListener('input', updatePreview);
+    engineSerialInput.addEventListener('input', updatePreview);
+    garageSelect.addEventListener('change', updatePreview);
+
+    // Auto-uppercase for certain fields
+    regNumberInput.addEventListener('input', (e) => {
+        e.target.value = e.target.value.toUpperCase();
+    });
+
+    chassisNumberInput.addEventListener('input', (e) => {
+        e.target.value = e.target.value.toUpperCase();
+    });
+
+    // Form submission
+    form.addEventListener('submit', handleFormSubmit);
+
+    // From date change updates To date
+    fromDateInput.addEventListener('change', () => {
+        const fromDate = new Date(fromDateInput.value);
+        const toDate = new Date(fromDate);
+        toDate.setFullYear(toDate.getFullYear() + 1);
+        toDateInput.value = formatDateForInput(toDate);
+        updatePreview();
+    });
+}
+
+// Update the sticker preview
+function updatePreview() {
+    const garage = garageTemplates[garageSelect.value];
+
+    // Update registration number
+    const regNumber = regNumberInput.value || 'A0F7930';
+    previewRegNumber.textContent = formatRegNumber(regNumber);
+
+    // Update dates
+    previewFromDate.textContent = formatDateForDisplay(fromDateInput.value) || '21-03-2026';
+    previewToDate.textContent = formatDateForDisplay(toDateInput.value) || '20-03-2027';
+
+    // 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';
+
+    // Update garage info
+    if (garage) {
+        previewGarageInfo.textContent = `${garage.name}, TEL: ${garage.phone}`;
+        garageLogo.innerHTML = garage.logo.content;
+    }
+}
+
+// Generate barcode
+function generateBarcode() {
+    const barcodeNumber = generateBarcodeNumber();
+    previewBarcodeNumber.textContent = barcodeNumber;
+
+    try {
+        JsBarcode(previewBarcode, barcodeNumber, {
+            format: 'CODE128',
+            width: 1.5,
+            height: 30,
+            displayValue: false,
+            margin: 0
+        });
+    } catch (e) {
+        console.error('Barcode generation failed:', e);
+    }
+}
+
+// Handle form submission
+async function handleFormSubmit(e) {
+    e.preventDefault();
+
+    const submitBtn = form.querySelector('button[type="submit"]');
+    submitBtn.classList.add('loading');
+    submitBtn.querySelector('.material-icons').textContent = 'autorenew';
+
+    try {
+        await generatePDF();
+        showSnackbar('Sticker generated successfully!', 'success');
+    } catch (error) {
+        console.error('PDF generation failed:', error);
+        showSnackbar('Failed to generate sticker. Please try again.', 'error');
+    } finally {
+        submitBtn.classList.remove('loading');
+        submitBtn.querySelector('.material-icons').textContent = 'picture_as_pdf';
+    }
+}
+
+// Generate PDF
+async function generatePDF() {
+    const { jsPDF } = window.jspdf;
+    const stickerElement = document.querySelector('.sticker');
+
+    // Generate a new barcode number for this sticker
+    generateBarcode();
+
+    // Wait for barcode to render
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Capture the sticker as an image
+    const canvas = await html2canvas(stickerElement, {
+        scale: 3, // Higher resolution
+        backgroundColor: '#ffffff',
+        useCORS: true,
+        logging: false
+    });
+
+    // Create PDF with sticker dimensions
+    const imgData = canvas.toDataURL('image/png');
+
+    // Calculate dimensions (sticker is approximately 280px wide)
+    const pdfWidth = 100; // mm
+    const pdfHeight = (canvas.height / canvas.width) * pdfWidth;
+
+    const pdf = new jsPDF({
+        orientation: pdfHeight > pdfWidth ? 'portrait' : 'landscape',
+        unit: 'mm',
+        format: [pdfWidth + 10, pdfHeight + 10]
+    });
+
+    // Center the sticker
+    const x = 5;
+    const y = 5;
+
+    pdf.addImage(imgData, 'PNG', x, y, pdfWidth, pdfHeight);
+
+    // Generate filename
+    const regNumber = regNumberInput.value || 'sticker';
+    const filename = `roadworthiness-${regNumber.replace(/\s/g, '')}-${Date.now()}.pdf`;
+
+    // Save the PDF
+    pdf.save(filename);
+}
+
+// Show snackbar notification
+function showSnackbar(message, type = '') {
+    const snackbar = document.getElementById('snackbar');
+    snackbar.textContent = message;
+    snackbar.className = 'snackbar show';
+    if (type) {
+        snackbar.classList.add(type);
+    }
+
+    setTimeout(() => {
+        snackbar.className = 'snackbar';
+    }, 3000);
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', init);

index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roadworthiness Sticker Generator</title>
+
+    <!-- Material Design Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Google Fonts - Roboto -->
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- App Bar -->
+        <header class="app-bar">
+            <div class="app-bar-content">
+                <span class="material-icons">directions_car</span>
+                <h1>Roadworthiness Sticker Generator</h1>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <div class="card form-card">
+                <div class="card-header">
+                    <span class="material-icons">edit_document</span>
+                    <h2>Vehicle Information</h2>
+                </div>
+
+                <form id="stickerForm">
+                    <!-- Garage Selection -->
+                    <div class="form-group">
+                        <label class="form-label" for="garage">Select Garage</label>
+                        <div class="select-wrapper">
+                            <select id="garage" class="form-select" required>
+                                <option value="rs-auto">RS AUTO</option>
+                            </select>
+                            <span class="material-icons select-icon">expand_more</span>
+                        </div>
+                    </div>
+
+                    <!-- Vehicle Registration -->
+                    <div class="form-group">
+                        <label class="form-label" for="regNumber">Vehicle Registration Number</label>
+                        <input type="text" id="regNumber" class="form-input"
+                               placeholder="e.g., A0F7930" required
+                               pattern="[A-Za-z0-9]+" maxlength="10">
+                        <span class="form-hint">Letters and numbers only</span>
+                    </div>
+
+                    <!-- Date Range -->
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label class="form-label" for="fromDate">From Date</label>
+                            <input type="date" id="fromDate" class="form-input" required>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label" for="toDate">To Date</label>
+                            <input type="date" id="toDate" class="form-input" required>
+                        </div>
+                    </div>
+
+                    <!-- Model Number -->
+                    <div class="form-group">
+                        <label class="form-label" for="modelNumber">Model Number</label>
+                        <input type="text" id="modelNumber" class="form-input"
+                               placeholder="e.g., 55S400-010C" required>
+                    </div>
+
+                    <!-- Chassis Number -->
+                    <div class="form-group">
+                        <label class="form-label" for="chassisNumber">Chassis Number</label>
+                        <input type="text" id="chassisNumber" class="form-input"
+                               placeholder="e.g., MH355S004DK117181" required>
+                    </div>
+
+                    <!-- Engine Serial Number -->
+                    <div class="form-group">
+                        <label class="form-label" for="engineSerial">Engine Serial Number</label>
+                        <input type="text" id="engineSerial" class="form-input"
+                               placeholder="e.g., 55S-118388" required>
+                    </div>
+
+                    <!-- Static Value (Read-only for now) -->
+                    <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>
+                    </div>
+
+                    <!-- Generate Button -->
+                    <button type="submit" class="btn btn-primary">
+                        <span class="material-icons">picture_as_pdf</span>
+                        Generate Sticker
+                    </button>
+                </form>
+            </div>
+
+            <!-- Preview Card -->
+            <div class="card preview-card">
+                <div class="card-header">
+                    <span class="material-icons">preview</span>
+                    <h2>Sticker Preview</h2>
+                </div>
+                <div class="preview-container">
+                    <div id="stickerPreview" class="sticker-preview">
+                        <!-- Sticker will be rendered here -->
+                        <div class="sticker">
+                            <div class="sticker-header">
+                                <span id="previewRegNumber">A 0 F 7 9 3 0</span>
+                            </div>
+                            <div class="sticker-barcode-row">
+                                <span id="previewBarcodeNumber">1162603748</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>
+                                    </div>
+                                    <div class="date-row">
+                                        <span><strong>To:</strong> <span id="previewToDate">20-03-2027</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>
+                                <div class="sticker-logo">
+                                    <div id="garageLogo" class="garage-logo">
+                                        <svg viewBox="0 0 80 80" class="logo-svg">
+                                            <circle cx="40" cy="40" r="38" fill="none" stroke="#000" stroke-width="2"/>
+                                            <text x="40" y="18" text-anchor="middle" font-size="8" font-weight="bold">RS AUTO</text>
+                                            <text x="40" y="45" text-anchor="middle" font-size="24" font-weight="bold">S</text>
+                                            <path d="M20 50 Q40 35 60 50" fill="none" stroke="#000" stroke-width="2"/>
+                                            <text x="40" y="58" text-anchor="middle" font-size="6">P:0085037</text>
+                                            <text x="40" y="70" text-anchor="middle" font-size="8" font-weight="bold">MALDIVES</text>
+                                        </svg>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="sticker-footer">
+                                <span id="previewGarageInfo">RS AUTO, TEL: 775 8999</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Snackbar for notifications -->
+        <div id="snackbar" class="snackbar"></div>
+    </div>
+
+    <!-- JsBarcode for barcode generation -->
+    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
+    <!-- jsPDF for PDF generation -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <!-- html2canvas for capturing the sticker -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+
+    <script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,487 @@
+/* CSS Custom Properties - Material Design 3 inspired */
+:root {
+    --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-variant: #E3E3E3;
+    --md-sys-color-on-surface: #1C1B1F;
+    --md-sys-color-on-surface-variant: #49454F;
+    --md-sys-color-outline: #79747E;
+    --md-sys-color-outline-variant: #CAC4D0;
+    --md-sys-color-background: #F5F5F5;
+    --md-sys-color-error: #B3261E;
+    --md-sys-color-success: #2E7D32;
+
+    --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-3: 0 4px 8px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
+
+    --md-sys-shape-corner-medium: 12px;
+    --md-sys-shape-corner-large: 16px;
+
+    --md-sys-typescale-headline-large: 500 2rem/2.5rem 'Roboto', sans-serif;
+    --md-sys-typescale-headline-medium: 500 1.5rem/2rem 'Roboto', sans-serif;
+    --md-sys-typescale-body-large: 400 1rem/1.5rem 'Roboto', sans-serif;
+    --md-sys-typescale-body-medium: 400 0.875rem/1.25rem 'Roboto', sans-serif;
+    --md-sys-typescale-label-large: 500 0.875rem/1.25rem 'Roboto', sans-serif;
+}
+
+/* Reset */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--md-sys-color-background);
+    color: var(--md-sys-color-on-surface);
+    min-height: 100vh;
+    line-height: 1.5;
+}
+
+/* App Container */
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* App Bar */
+.app-bar {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    padding: 16px 24px;
+    box-shadow: var(--md-sys-elevation-2);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.app-bar-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.app-bar h1 {
+    font: var(--md-sys-typescale-headline-medium);
+    font-weight: 500;
+}
+
+.app-bar .material-icons {
+    font-size: 28px;
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+}
+
+/* Cards */
+.card {
+    background-color: var(--md-sys-color-surface);
+    border-radius: var(--md-sys-shape-corner-large);
+    box-shadow: var(--md-sys-elevation-1);
+    overflow: hidden;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+    background-color: #fff;
+}
+
+.card-header h2 {
+    font: var(--md-sys-typescale-headline-medium);
+    font-size: 1.25rem;
+    color: var(--md-sys-color-on-surface);
+}
+
+.card-header .material-icons {
+    color: var(--md-sys-color-primary);
+    font-size: 24px;
+}
+
+/* Form Styles */
+.form-card form {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-label {
+    font: var(--md-sys-typescale-label-large);
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.form-input,
+.form-select {
+    font: var(--md-sys-typescale-body-large);
+    padding: 14px 16px;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--md-sys-shape-corner-medium);
+    background-color: #fff;
+    color: var(--md-sys-color-on-surface);
+    transition: border-color 0.2s, box-shadow 0.2s;
+    width: 100%;
+}
+
+.form-input:focus,
+.form-select:focus {
+    outline: none;
+    border-color: var(--md-sys-color-primary);
+    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
+}
+
+.form-input:read-only {
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface-variant);
+}
+
+.form-input::placeholder {
+    color: var(--md-sys-color-outline);
+}
+
+.form-hint {
+    font: var(--md-sys-typescale-body-medium);
+    font-size: 0.75rem;
+    color: var(--md-sys-color-outline);
+}
+
+/* Select Wrapper */
+.select-wrapper {
+    position: relative;
+}
+
+.select-wrapper .form-select {
+    appearance: none;
+    padding-right: 44px;
+    cursor: pointer;
+}
+
+.select-wrapper .select-icon {
+    position: absolute;
+    right: 14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--md-sys-color-outline);
+    pointer-events: none;
+}
+
+/* Form Row */
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+/* Button Styles */
+.btn {
+    font: var(--md-sys-typescale-label-large);
+    padding: 14px 24px;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-medium);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: all 0.2s;
+    text-transform: none;
+}
+
+.btn-primary {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+    box-shadow: var(--md-sys-elevation-1);
+}
+
+.btn-primary:hover {
+    background-color: var(--md-sys-color-primary-dark);
+    box-shadow: var(--md-sys-elevation-2);
+}
+
+.btn-primary:active {
+    transform: scale(0.98);
+}
+
+.btn .material-icons {
+    font-size: 20px;
+}
+
+/* Preview Card */
+.preview-card {
+    position: sticky;
+    top: 88px;
+}
+
+.preview-container {
+    padding: 24px;
+    display: flex;
+    justify-content: center;
+    background-color: #E8E8E8;
+    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%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+/* Sticker Preview */
+.sticker-preview {
+    background-color: #fff;
+    padding: 8px;
+    box-shadow: var(--md-sys-elevation-2);
+}
+
+.sticker {
+    width: 280px;
+    border: 2px solid #000;
+    font-family: Arial, sans-serif;
+    font-size: 11px;
+    background: #fff;
+}
+
+.sticker-header {
+    background-color: #000;
+    color: #fff;
+    text-align: center;
+    padding: 6px 8px;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 4px;
+}
+
+.sticker-barcode-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #000;
+    padding: 4px 8px;
+    gap: 8px;
+}
+
+.sticker-barcode-row span {
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.sticker-barcode-row svg {
+    height: 30px;
+    flex: 1;
+}
+
+.sticker-body {
+    display: flex;
+    border-bottom: 1px solid #000;
+}
+
+.sticker-info {
+    flex: 1;
+    padding: 6px 8px;
+    font-size: 10px;
+    line-height: 1.4;
+}
+
+.sticker-info .date-row {
+    margin-bottom: 2px;
+}
+
+.sticker-logo {
+    width: 80px;
+    border-left: 1px solid #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+}
+
+.garage-logo .logo-svg {
+    width: 70px;
+    height: 70px;
+}
+
+.sticker-footer {
+    text-align: center;
+    padding: 4px 8px;
+    font-size: 10px;
+    font-weight: 500;
+    border-top: 1px solid #000;
+}
+
+/* Snackbar */
+.snackbar {
+    visibility: hidden;
+    min-width: 280px;
+    background-color: #323232;
+    color: #fff;
+    text-align: center;
+    border-radius: var(--md-sys-shape-corner-medium);
+    padding: 16px 24px;
+    position: fixed;
+    z-index: 1000;
+    left: 50%;
+    bottom: 30px;
+    transform: translateX(-50%);
+    font: var(--md-sys-typescale-body-medium);
+    box-shadow: var(--md-sys-elevation-3);
+}
+
+.snackbar.show {
+    visibility: visible;
+    animation: fadein 0.3s, fadeout 0.3s 2.7s;
+}
+
+.snackbar.success {
+    background-color: var(--md-sys-color-success);
+}
+
+.snackbar.error {
+    background-color: var(--md-sys-color-error);
+}
+
+@keyframes fadein {
+    from { bottom: 0; opacity: 0; }
+    to { bottom: 30px; opacity: 1; }
+}
+
+@keyframes fadeout {
+    from { bottom: 30px; opacity: 1; }
+    to { bottom: 0; opacity: 0; }
+}
+
+/* Responsive Styles */
+@media (max-width: 900px) {
+    .main-content {
+        grid-template-columns: 1fr;
+    }
+
+    .preview-card {
+        position: static;
+        order: -1;
+    }
+
+    .app-bar h1 {
+        font-size: 1.25rem;
+    }
+}
+
+@media (max-width: 600px) {
+    .app-bar {
+        padding: 12px 16px;
+    }
+
+    .app-bar h1 {
+        font-size: 1.1rem;
+    }
+
+    .main-content {
+        padding: 16px;
+        gap: 16px;
+    }
+
+    .card-header {
+        padding: 16px;
+    }
+
+    .card-header h2 {
+        font-size: 1.1rem;
+    }
+
+    .form-card form {
+        padding: 16px;
+        gap: 16px;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .form-input,
+    .form-select {
+        padding: 12px 14px;
+    }
+
+    .btn {
+        padding: 12px 20px;
+        width: 100%;
+    }
+
+    .preview-container {
+        padding: 16px;
+    }
+
+    .sticker {
+        width: 260px;
+    }
+}
+
+/* Print Styles for PDF Export */
+@media print {
+    .app-bar,
+    .form-card,
+    .card-header,
+    .snackbar {
+        display: none !important;
+    }
+
+    .main-content {
+        display: block;
+        padding: 0;
+    }
+
+    .preview-card {
+        box-shadow: none;
+        border: none;
+    }
+
+    .preview-container {
+        background: none;
+        padding: 0;
+    }
+}
+
+/* Loading State */
+.btn.loading {
+    pointer-events: none;
+    opacity: 0.7;
+}
+
+.btn.loading .material-icons {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}