181 lines
8.0 KiB
HTML
181 lines
8.0 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>
|
|
<!-- Disclaimer Modal -->
|
|
<div id="disclaimerModal" class="modal-overlay">
|
|
<div class="modal">
|
|
<div class="modal-icon">
|
|
<span class="material-icons">gavel</span>
|
|
</div>
|
|
<h2>Legal Disclaimer</h2>
|
|
<p>For legal reasons, this is a <strong>joke</strong>.</p>
|
|
<p class="modal-sub">This tool is for educational and entertainment purposes only. Do not use generated stickers for any official or fraudulent purposes.</p>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="dontAskAgain">
|
|
<span>Don't show this again</span>
|
|
</label>
|
|
<button id="disclaimerClose" class="btn btn-primary">I Understand</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
<a href="https://git.shihaam.dev/shihaam/roadworthiness-sticker-generator" target="_blank" rel="noopener" class="git-link" title="View Source">
|
|
<span class="material-icons">code</span>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content three-column">
|
|
<!-- Roadworthiness Details Card -->
|
|
<div class="card form-card">
|
|
<div class="card-header">
|
|
<span class="material-icons">fact_check</span>
|
|
<h2>Roadworthiness Details</h2>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<!-- 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 form="stickerForm">
|
|
<!-- Populated dynamically from templates/index.json -->
|
|
</select>
|
|
<span class="material-icons select-icon">expand_more</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- From Date -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="fromDate">From Date</label>
|
|
<input type="date" id="fromDate" class="form-input" required form="stickerForm">
|
|
</div>
|
|
|
|
<!-- To Date -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="toDate">To Date</label>
|
|
<input type="date" id="toDate" class="form-input" readonly form="stickerForm">
|
|
<span class="form-hint">Auto-calculated</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vehicle Information Card -->
|
|
<div class="card form-card">
|
|
<div class="card-header">
|
|
<span class="material-icons">edit_document</span>
|
|
<h2>Vehicle Information</h2>
|
|
</div>
|
|
|
|
<form id="stickerForm">
|
|
<!-- Import from PDF -->
|
|
<div class="form-group">
|
|
<label class="form-label">Import from Registration PDF</label>
|
|
<label class="btn btn-outline" id="importPdfBtn">
|
|
<span class="material-icons">upload_file</span>
|
|
Import PDF
|
|
<input type="file" id="pdfInput" accept=".pdf" hidden>
|
|
</label>
|
|
<span class="form-hint">Get your PDF from <a href="https://sims.transport.gov.mv/" target="_blank" rel="noopener">SIMS portal</a></span>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div class="form-divider">
|
|
<span>or</span>
|
|
</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">
|
|
</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>
|
|
|
|
<!-- PDF.js for PDF parsing -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
|
<!-- 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>
|