|
| 1 | +<!doctype html> |
| 2 | +<html lang="it"> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| 6 | + <title>@codecorn/euro-plate-validator — Demo</title> |
| 7 | + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.14/dist/assets/css/styles.css" /> |
| 8 | + <style> |
| 9 | + body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 32px; } |
| 10 | + .wrap { max-width: 760px; margin: 0 auto; } |
| 11 | + h1 { font-size: 24px; margin-bottom: 8px; } |
| 12 | + p { color:#555; } |
| 13 | + .demo { margin-top: 20px; } |
| 14 | + </style> |
| 15 | +</head> |
| 16 | +<body> |
| 17 | + <div class="wrap"> |
| 18 | + <h1>@codecorn/euro-plate-validator — Demo</h1> |
| 19 | + <p>Inserisci una targa: seleziona un paese o usa AUTO. Minuscole accettate e forzate a MAIUSCOLO.</p> |
| 20 | + |
| 21 | + <div id="plateBox" class="demo"></div> |
| 22 | + |
| 23 | + <p style="margin-top:24px"> |
| 24 | + <a href="https://www.npmjs.com/package/@codecorn/euro-plate-validator" target="_blank" rel="noreferrer">npm</a> · |
| 25 | + <a href="https://github.com/<YOUR_ORG>/<YOUR_REPO>" target="_blank" rel="noreferrer">GitHub</a> |
| 26 | + </p> |
| 27 | + </div> |
| 28 | + |
| 29 | + <script type="module"> |
| 30 | + import * as EuroMod from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.14/dist/browser/index.esm.js"; |
| 31 | + import { createEuroPlate } from "https://cdn.jsdelivr.net/npm/@codecorn/euro-plate-validator@1.0.14/dist/client/index.mjs"; |
| 32 | + |
| 33 | + const instance = createEuroPlate(EuroMod, { |
| 34 | + wrapper: "#plateBox", |
| 35 | + mode: "AUTO", |
| 36 | + i18n: "IT", |
| 37 | + allowedCountries: ["IT","FR","DE","ES","NL","UK"], |
| 38 | + vehicleType: "any", |
| 39 | + ui: { statusMode: "inline", statusIcon: "icon", showStatusText: false, iconPosition: "right" }, |
| 40 | + // autoload UMD deps — opzionali |
| 41 | + autoLoadDeps: { inputmask: true, jquery: true, toastr: true }, |
| 42 | + useToastrLogger: true, |
| 43 | + debug: true |
| 44 | + }); |
| 45 | + |
| 46 | + // Esempio: pre-seleziona IT dopo 2s |
| 47 | + // setTimeout(()=>instance.setCountry("IT"), 2000); |
| 48 | + </script> |
| 49 | +</body> |
| 50 | +</html> |
0 commit comments