This commit is contained in:
@@ -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://<username>.github.io/<repo-name>/`
|
||||
|
||||
### 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
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
+13
@@ -15,6 +15,19 @@
|
||||
<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>
|
||||
<button id="disclaimerClose" class="btn btn-primary">I Understand</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- App Bar -->
|
||||
<header class="app-bar">
|
||||
|
||||
+89
@@ -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) */
|
||||
|
||||
Reference in New Issue
Block a user