From 8b586c7ced5a8ce7cb9097a78b290b38a7dd13af Mon Sep 17 00:00:00 2001 From: Shihaam Abdul Rahman Date: Sun, 22 Mar 2026 00:33:51 +0500 Subject: [PATCH] add docs..add this is a joke --- README.md | 90 +++--------------------------------------------------- app.js | 17 ++++++++++- index.html | 13 ++++++++ styles.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 87 deletions(-) diff --git a/README.md b/README.md index 7135353..c4c3184 100644 --- a/README.md +++ b/README.md @@ -1,97 +1,15 @@ # Roadworthiness Sticker Generator -A web-based tool for generating vehicle roadworthiness stickers. Built with vanilla HTML, CSS, and JavaScript - no backend required. Perfect for hosting on GitHub Pages. +> **Legal Disclaimer:** For legal reasons, this is a **joke**. This tool is for educational and entertainment purposes only. Do not use generated stickers for any official or fraudulent purposes. -## Features +--- -- Material Design UI with dark/light theme (follows system preference) -- Mobile and desktop responsive -- Multiple garage/template support -- Live sticker preview -- PDF export -- Auto-generated barcodes -- Easy template system (HTML + CSS per template) - -## Quick Start - -1. Clone the repository -2. Serve the files with any static server: - ```bash - # Python - python -m http.server 8080 - - # Node.js - npx serve - ``` -3. Open `http://localhost:8080` in your browser - -## Deployment - -### GitHub Pages - -1. Push to your GitHub repository -2. Go to **Settings** > **Pages** -3. Select your branch (e.g., `main`) and click **Save** -4. Access at `https://.github.io//` - -### Other Static Hosts - -Works with any static hosting: Netlify, Vercel, Cloudflare Pages, etc. Just upload the files. - -## Project Structure - -``` -├── index.html # Main application -├── styles.css # App styles (Material Design) -├── app.js # Application logic -├── templates/ # Sticker templates -│ ├── index.json # Template registry -│ ├── rs-auto.html # RS AUTO template -│ ├── rs-auto.css # RS AUTO styles -│ ├── motca.html # Ministry template -│ └── motca.css # Ministry styles -└── docs/ # Documentation - └── adding-templates.md -``` +A web-based tool for generating vehicle roadworthiness stickers. ## Adding New Templates See [docs/adding-templates.md](docs/adding-templates.md) for detailed instructions. -**Quick version:** - -1. Create `templates/your-template.html` with placeholders like `{{regNumber}}` -2. Create `templates/your-template.css` with styles -3. Add entry to `templates/index.json` - -## Available Placeholders - -| Placeholder | Description | -|-------------|-------------| -| `{{regNumber}}` | Vehicle registration (formatted with spaces) | -| `{{barcodeNumber}}` | Generated barcode number | -| `{{fromDate}}` | Start date (DD-MM-YYYY) | -| `{{toDate}}` | End date (DD-MM-YYYY) | -| `{{modelNumber}}` | Vehicle model number | -| `{{chassisNumber}}` | Chassis/VIN number | -| `{{engineSerial}}` | Engine serial number | -| `{{engineCapacity}}` | Engine capacity (CC) | - -## Browser Support - -Modern browsers with ES6+ support: -- Chrome/Edge 80+ -- Firefox 75+ -- Safari 13+ - -## Dependencies - -All loaded via CDN (no npm required): -- [JsBarcode](https://github.com/lindell/JsBarcode) - Barcode generation -- [jsPDF](https://github.com/parallax/jsPDF) - PDF creation -- [html2canvas](https://html2canvas.hertzen.com/) - HTML to image conversion -- [Google Fonts](https://fonts.google.com/) - Roboto font & Material Icons - ## License -MIT +GNU General Public License v3.0 - See [LICENSE](LICENSE) file for details diff --git a/app.js b/app.js index 4bb4168..d32cede 100644 --- a/app.js +++ b/app.js @@ -285,5 +285,20 @@ function showSnackbar(message, type = '') { }, 3000); } +// Handle disclaimer modal +function setupDisclaimer() { + const modal = document.getElementById('disclaimerModal'); + const closeBtn = document.getElementById('disclaimerClose'); + + if (closeBtn && modal) { + closeBtn.addEventListener('click', () => { + modal.classList.add('hidden'); + }); + } +} + // Initialize when DOM is ready -document.addEventListener('DOMContentLoaded', init); +document.addEventListener('DOMContentLoaded', () => { + setupDisclaimer(); + init(); +}); diff --git a/index.html b/index.html index 2c1115a..c637b28 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,19 @@ + + +
diff --git a/styles.css b/styles.css index 59b1e71..09e5a6d 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,92 @@ +/* Disclaimer Modal */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; + backdrop-filter: blur(4px); +} + +.modal-overlay.hidden { + display: none; +} + +.modal { + background-color: var(--md-sys-color-surface, #fff); + color: var(--md-sys-color-on-surface, #1C1B1F); + border-radius: 24px; + padding: 32px; + max-width: 400px; + margin: 16px; + text-align: center; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + animation: modalIn 0.3s ease-out; +} + +@keyframes modalIn { + from { + opacity: 0; + transform: scale(0.9) translateY(20px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +.modal-icon { + width: 64px; + height: 64px; + background-color: #FFF3E0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 16px; +} + +.modal-icon .material-icons { + font-size: 32px; + color: #E65100; +} + +.modal h2 { + font-size: 1.5rem; + font-weight: 500; + margin-bottom: 16px; +} + +.modal p { + font-size: 1.1rem; + margin-bottom: 8px; +} + +.modal .modal-sub { + font-size: 0.875rem; + color: var(--md-sys-color-on-surface-variant, #49454F); + margin-bottom: 24px; +} + +.modal .btn { + min-width: 160px; +} + +@media (prefers-color-scheme: dark) { + .modal-icon { + background-color: #3E2723; + } + + .modal-icon .material-icons { + color: #FFB74D; + } +} + /* CSS Custom Properties - Material Design 3 inspired */ :root { /* Light theme (default) */