Shihaam Abdul Rahman
e67cc4ca9c
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
132 lines
5.7 KiB
HTML
132 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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 -->
|
|
<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>
|
|
<!-- Populated dynamically from templates/index.json -->
|
|
</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="X0X0000" 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="XXX000-000X" 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="XXXXXXXXXXXXXXXXX" 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="XXX-XXXXXX" required>
|
|
</div>
|
|
|
|
<!-- Engine Capacity -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="engineCapacity">Engine Capacity (CC)</label>
|
|
<input type="text" id="engineCapacity" class="form-input"
|
|
placeholder="XXX.XXX" required>
|
|
</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 template loaded dynamically -->
|
|
</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>
|