This commit is contained in:
@@ -1,97 +1,15 @@
|
|||||||
# Roadworthiness Sticker Generator
|
# 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)
|
A web-based tool for generating vehicle roadworthiness stickers.
|
||||||
- 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
|
|
||||||
```
|
|
||||||
|
|
||||||
## Adding New Templates
|
## Adding New Templates
|
||||||
|
|
||||||
See [docs/adding-templates.md](docs/adding-templates.md) for detailed instructions.
|
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
|
## License
|
||||||
|
|
||||||
MIT
|
GNU General Public License v3.0 - See [LICENSE](LICENSE) file for details
|
||||||
|
|||||||
@@ -285,5 +285,20 @@ function showSnackbar(message, type = '') {
|
|||||||
}, 3000);
|
}, 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
|
// 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">
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<div class="app-container">
|
||||||
<!-- App Bar -->
|
<!-- App Bar -->
|
||||||
<header class="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 */
|
/* CSS Custom Properties - Material Design 3 inspired */
|
||||||
:root {
|
:root {
|
||||||
/* Light theme (default) */
|
/* Light theme (default) */
|
||||||
|
|||||||
Reference in New Issue
Block a user