feat(borne): SEO demonstratif + @supports + validation chevalet temps reel (Cr 1.e/1.b.3/2.b.1) #78
10 changed files with 74 additions and 2 deletions
|
|
@ -2218,3 +2218,17 @@ html.dys-font {
|
|||
outline: 3px solid var(--color-brand-yellow-dk);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
13. COMPATIBILITE NAVIGATEURS (Cr 1.b.3)
|
||||
============================================================ */
|
||||
|
||||
/* 'gap' sur conteneurs flex : non reconnu par d'anciens navigateurs (ex. Safari
|
||||
anterieur a 14.1). La detection @supports applique un repli par marges sur les
|
||||
enfants directs si la propriete n'est pas supportee (alternative documentee). */
|
||||
@supports not (gap: 1rem) {
|
||||
.welcome__choices > *,
|
||||
.composer-footer__row > * {
|
||||
margin: var(--space-2);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
4
src/public/borne/assets/images/favicon.svg
Normal file
4
src/public/borne/assets/images/favicon.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Wakdo">
|
||||
<rect width="32" height="32" rx="7" fill="#FFC72C"/>
|
||||
<path d="M6 9 L11 23 L16 13 L21 23 L26 9" fill="none" stroke="#DA020E" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
|
|
@ -100,6 +100,29 @@ function openChevalet(onValidate, onDismiss) {
|
|||
|
||||
const input = overlay.querySelector('#chevalet-input');
|
||||
const errBox = overlay.querySelector('#chevalet-error');
|
||||
const okBtn = overlay.querySelector('#chevalet-ok');
|
||||
|
||||
// Validation en TEMPS REEL (Cr 2.b.1) : controle pendant la frappe, pas seulement
|
||||
// au clic. On filtre les caracteres non numeriques, on borne a 4 chiffres, on
|
||||
// reflete l'etat via aria-invalid + l'activation du bouton, et on masque l'erreur
|
||||
// des que la saisie redevient valide.
|
||||
const isValidTag = (v) => /^[0-9]{1,4}$/.test(v);
|
||||
const syncValidity = () => {
|
||||
const cleaned = (input.value || '').replace(/[^0-9]/g, '').slice(0, 4);
|
||||
if (cleaned !== input.value) {
|
||||
input.value = cleaned;
|
||||
}
|
||||
const ok = isValidTag(cleaned);
|
||||
input.setAttribute('aria-invalid', ok ? 'false' : 'true');
|
||||
if (okBtn) {
|
||||
okBtn.disabled = !ok;
|
||||
}
|
||||
if (ok) {
|
||||
errBox.hidden = true;
|
||||
}
|
||||
};
|
||||
input.addEventListener('input', syncValidity);
|
||||
syncValidity();
|
||||
|
||||
const teardown = () => {
|
||||
document.removeEventListener('keydown', esc);
|
||||
|
|
@ -123,10 +146,13 @@ function openChevalet(onValidate, onDismiss) {
|
|||
});
|
||||
|
||||
overlay.querySelector('#chevalet-cancel').addEventListener('click', dismiss);
|
||||
overlay.querySelector('#chevalet-ok').addEventListener('click', () => {
|
||||
okBtn.addEventListener('click', () => {
|
||||
// Garde finale au clic (defense en profondeur) : le bouton est deja desactive
|
||||
// tant que la saisie est invalide (validation temps reel ci-dessus).
|
||||
const tag = (input.value || '').trim();
|
||||
if (!/^[0-9]{1,4}$/.test(tag)) {
|
||||
if (!isValidTag(tag)) {
|
||||
errBox.hidden = false;
|
||||
input.setAttribute('aria-invalid', 'true');
|
||||
input.focus();
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Votre panier">
|
||||
<title>Wakdo - Panier</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/cart.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="cart-page">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Choisissez une categorie de produits">
|
||||
<title>Wakdo - Categories</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/categories.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="categories-page">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Commande confirmee">
|
||||
<title>Wakdo - Confirmation</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/confirmation.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="confirmation-page">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,23 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Borne de commande Wakdo - choisissez votre mode de consommation">
|
||||
<title>Wakdo - Bienvenue</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
<!--
|
||||
Donnees structurees schema.org (JSON-LD) : decrivent l'etablissement pour
|
||||
les moteurs / agents. Demonstratif (la borne porte noindex), Cr 1.e.3.
|
||||
-->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FastFoodRestaurant",
|
||||
"name": "Wakdo",
|
||||
"servesCuisine": "Restauration rapide",
|
||||
"openingHours": "Mo-Su 10:00-01:00",
|
||||
"paymentAccepted": "Sur place, A emporter, Drive"
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Choisissez votre mode de paiement">
|
||||
<title>Wakdo - Paiement</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/payment.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="payment-page">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Detail du produit">
|
||||
<title>Wakdo - Produit</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/product.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="product-page">
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Produits de la categorie selectionnee">
|
||||
<title>Wakdo - Produits</title>
|
||||
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/products.html">
|
||||
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="products-page">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue