AcadeNice/corentin_wakdo
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(borne): SEO demonstratif + @supports + validation chevalet temps reel (Cr 1.e/1.b.3/2.b.1) (#78)
All checks were successful
CI / secret-scan (push) Successful in 8s
Details
CI / php-lint (push) Successful in 18s
Details
CI / static-tests (push) Successful in 58s
Details
CI / js-tests (push) Successful in 26s
Details

Browse source
This commit is contained in:
Corentin JOGUET 2026-06-22 08:59:25 +02:00
parent cb990404e3
commit 8af17842b9
10 changed files with 74 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/public/borne/assets/css/style.css
View file

@ -2218,3 +2218,17 @@ html.dys-font {
outline: 3px solid var(--color-brand-yellow-dk); outline: 3px solid var(--color-brand-yellow-dk);
outline-offset: 2px; 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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 292 B

30
src/public/borne/assets/js/page-payment.js
View file

@ -100,6 +100,29 @@ function openChevalet(onValidate, onDismiss) {
const input = overlay.querySelector('#chevalet-input'); const input = overlay.querySelector('#chevalet-input');
const errBox = overlay.querySelector('#chevalet-error'); 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 = () => { const teardown = () => {
document.removeEventListener('keydown', esc); document.removeEventListener('keydown', esc);
@ -123,10 +146,13 @@ function openChevalet(onValidate, onDismiss) {
}); });
overlay.querySelector('#chevalet-cancel').addEventListener('click', dismiss); 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(); const tag = (input.value || '').trim();
if (!/^[0-9]{1,4}$/.test(tag)) { if (!isValidTag(tag)) {
errBox.hidden = false; errBox.hidden = false;
input.setAttribute('aria-invalid', 'true');
input.focus(); input.focus();
return; return;
} }

2
src/public/borne/cart.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Votre panier"> <meta name="description" content="Wakdo - Votre panier">
<title>Wakdo - Panier</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="cart-page"> <body class="cart-page">

2
src/public/borne/categories.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Choisissez une categorie de produits"> <meta name="description" content="Wakdo - Choisissez une categorie de produits">
<title>Wakdo - Categories</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="categories-page"> <body class="categories-page">

2
src/public/borne/confirmation.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Commande confirmee"> <meta name="description" content="Wakdo - Commande confirmee">
<title>Wakdo - Confirmation</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="confirmation-page"> <body class="confirmation-page">

16
src/public/borne/index.html
View file

@ -10,7 +10,23 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Borne de commande Wakdo - choisissez votre mode de consommation"> <meta name="description" content="Borne de commande Wakdo - choisissez votre mode de consommation">
<title>Wakdo - Bienvenue</title> <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"> <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> </head>
<body> <body>

2
src/public/borne/payment.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Choisissez votre mode de paiement"> <meta name="description" content="Wakdo - Choisissez votre mode de paiement">
<title>Wakdo - Paiement</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="payment-page"> <body class="payment-page">

2
src/public/borne/product.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Detail du produit"> <meta name="description" content="Wakdo - Detail du produit">
<title>Wakdo - Produit</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="product-page"> <body class="product-page">

2
src/public/borne/products.html
View file

@ -6,6 +6,8 @@
<meta name="robots" content="noindex, nofollow"> <meta name="robots" content="noindex, nofollow">
<meta name="description" content="Wakdo - Produits de la categorie selectionnee"> <meta name="description" content="Wakdo - Produits de la categorie selectionnee">
<title>Wakdo - Produits</title> <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"> <link rel="stylesheet" href="assets/css/style.css">
</head> </head>
<body class="products-page"> <body class="products-page">