Clients/epsf-miniwebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

creation site static coupe du monde 2026 sans Hugo

Browse Source
This commit is contained in:
Stephane Boniffacy
2026-06-20 14:50:24 +02:00
parent 7f10e7a597
commit c00dd55b8d
52 changed files with 5376 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static_without_hugo/lancement/index.html
+147
View File
@@ -0,0 +1,147 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="meta_title">TutoSport Expert — Ouverture le 22 juin 2026</title>
<meta name="description" content="Les académies de Dimitri Payet & Yannick Dyduch arrivent. Offre Coupe du Monde : les 2 académies à 7,90€. Ouverture le 22 juin 2026." data-i18n-content="meta_description">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--ink:#160827;--ink2:#2a1257;--blue:#2563e6;--violet:#a81fc4;--teal:#10c79a;--teal-d:#0aa982;--paper:#f5f4fb;--lav:#d7cdf0;--lav2:#b0a4d2;--grad:linear-gradient(100deg,var(--blue),var(--violet) 52%,var(--teal));}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{min-height:100vh;display:flex;flex-direction:column;color:#fff;font-family:'Inter',system-ui,sans-serif;
background:radial-gradient(120% 80% at 85% -10%,rgba(168,31,196,.22),transparent 55%),radial-gradient(90% 70% at -10% 110%,rgba(37,99,230,.20),transparent 55%),linear-gradient(180deg,#160827,#22104a 60%,#190b3a);
overflow-x:hidden;position:relative}
.globe{position:fixed;right:-12%;top:50%;transform:translateY(-50%);width:760px;max-width:90vw;opacity:.09;pointer-events:none;z-index:0}
@media(prefers-reduced-motion:no-preference){.globe{animation:spin 90s linear infinite}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}}
header{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(20px,5vw,54px);position:relative;z-index:3}
.brand img{height:38px;display:block}
.langsw{display:flex;gap:3px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px}
.langsw button{border:none;background:none;color:var(--lav2);font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;text-transform:uppercase;padding:.35em .65em;border-radius:999px;cursor:pointer;transition:.15s}
.langsw button.on{background:#fff;color:var(--ink)}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:clamp(24px,5vw,40px) clamp(20px,5vw,40px) 50px;position:relative;z-index:2}
.tag{font-family:'Space Mono',monospace;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
background:rgba(16,199,154,.14);border:1px solid rgba(16,199,154,.35);padding:.55em 1.1em;border-radius:999px;display:inline-flex;align-items:center;gap:.6em}
.tag .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(16,199,154,.6)}
@media(prefers-reduced-motion:no-preference){.tag .dot{animation:pulse 1.6s infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(16,199,154,0)}100%{box-shadow:0 0 0 0 rgba(16,199,154,0)}}}
h1{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.02;
font-size:clamp(2.4rem,7vw,4.6rem);margin:.7em 0 .35em;max-width:16ch}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--lav);font-size:clamp(1rem,2vw,1.2rem);max-width:46ch;margin:0 auto 2.2em;line-height:1.55}
.cd{display:flex;gap:clamp(10px,2.4vw,22px);justify-content:center;flex-wrap:wrap;margin-bottom:2.4em}
.cd .b{background:#fff;color:var(--ink);border-radius:20px;min-width:clamp(78px,18vw,140px);padding:clamp(14px,2.4vw,26px) clamp(8px,2vw,18px);
box-shadow:0 30px 60px -30px rgba(0,0,0,.6);position:relative;overflow:hidden}
.cd .b::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--grad)}
.cd .num{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(2.4rem,7vw,4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cd .lbl{font-family:'Space Mono',monospace;font-size:clamp(.56rem,1.4vw,.72rem);letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:700;margin-top:8px}
.offer{display:inline-flex;align-items:center;gap:.6em;font-family:'Space Mono',monospace;font-size:.92rem;color:var(--lav);margin-bottom:2em}
.offer b{color:#fff}.offer .price{color:var(--teal);font-weight:700}
.capture{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:min(520px,92vw)}
.capture input{flex:1;min-width:200px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);border-radius:999px;
padding:1em 1.3em;color:#fff;font-family:inherit;font-size:1rem;outline:none;transition:.15s}
.capture input::placeholder{color:var(--lav2)}
.capture input:focus{border-color:var(--teal);background:rgba(255,255,255,.12)}
.btn{font-family:'Archivo',sans-serif;font-weight:800;font-size:1rem;border:none;cursor:pointer;border-radius:999px;
padding:1em 1.7em;background:var(--teal);color:#04261d;box-shadow:0 12px 26px -8px rgba(16,199,154,.7);transition:transform .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(16,199,154,.85);background:#16d6a7}
.note{font-size:.8rem;color:var(--lav2);margin-top:1em}
.thanks{display:none;align-items:center;gap:.6em;font-weight:600;color:#eafff8;background:rgba(16,199,154,.14);border:1px solid rgba(16,199,154,.4);padding:1em 1.4em;border-radius:16px}
.thanks.show{display:inline-flex}
footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
padding:18px clamp(20px,5vw,54px);border-top:1px solid rgba(255,255,255,.1);color:var(--lav2);font-size:.82rem;position:relative;z-index:3}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#fff;transition:.15s}
.socials a:hover{background:var(--grad)}.socials svg{width:17px;height:17px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
</style>
</head>
<body data-root-prefix="../">
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WTMNS3J8"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<img class="globe" src="./assets/images/globe.svg" alt="" aria-hidden="true">
<header>
<span class="brand"><img src="./assets/images/tutosport-logo.png" alt="TutoSport Expert"></span>
<div aria-label="Langue" class="langsw" role="group">
<button class="on" data-lang="fr">FR</button>
<button data-lang="en">EN</button>
<button data-lang="es">ES</button>
<button data-lang="pt">PT</button>
</div>
</header>
<main>
<span class="tag"><span class="dot"></span><span data-i18n="tag">Ouverture · 22 juin 2026</span></span>
<h1><span data-i18n="h1a">Le compte à rebours</span> <span class="g" data-i18n="h1b">est lancé.</span></h1>
<p class="sub" data-i18n="sub">Les académies de Dimitri Payet & Yannick Dyduch arrivent. Préparez-vous à l'offre Coupe du Monde.</p>
<div class="cd" id="cd" role="timer" aria-live="off">
<div class="b"><div class="num" id="d">00</div><div class="lbl" data-i18n="l_d">Jours</div></div>
<div class="b"><div class="num" id="h">00</div><div class="lbl" data-i18n="l_h">Heures</div></div>
<div class="b"><div class="num" id="m">00</div><div class="lbl" data-i18n="l_m">Minutes</div></div>
<div class="b"><div class="num" id="s">00</div><div class="lbl" data-i18n="l_s">Secondes</div></div>
</div>
<p class="offer"><span data-i18n="offer_a">Les 2 académies à</span> <span class="price">7,90€</span> <span data-i18n="offer_b">au lieu de 80€ · offre limitée Coupe du Monde</span></p>
<!--form class="capture" id="form" novalidate>
<input type="email" id="email" required data-i18n-ph="ph" placeholder="Ton adresse e-mail">
<button class="btn" type="submit" data-i18n="btn">Préviens-moi</button>
</form-->
<!--iframe data-w-type="embedded" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://14u8z.mjt.lu/wgt/14u8z/0qr4/form?c=eb5323b7" width="100%" style="height: 0;"></iframe>
<script type="text/javascript" src="https://app.mailjet.com/pas-nc-embedded-v2.js"></script>
<div class="thanks" id="thanks"><svg viewBox="0 0 24 24" width="18" fill="none" stroke="#10c79a" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg> <span data-i18n="thanks">Merci ! On te prévient dès l'ouverture.</span></div>
<p class="note" data-i18n="note">Sois prévenu·e en premier et garde l'offre 7,90€.</p-->
</main>
<footer>
<span data-i18n="rights">© 2026 TutoSport Expert. Tous droits réservés.</span>
<div class="socials">
<a href="https://instagram.com/tutosportexpert" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg></a>
</div>
</footer>
<script defer src="./assets/js/site-config.js"></script>
<script defer src="./assets/js/launch-constants.js"></script>
<script defer src="./assets/js/main.js"></script>
<script>
(() => {
const launchTarget = new Date("2026-06-22T07:00:00+02:00").getTime();
const p = (n) => String(Math.max(0, n)).padStart(2, "0");
function tick() {
let diff = Math.max(0, launchTarget - Date.now());
const d = Math.floor(diff / 864e5);
diff -= d * 864e5;
const h = Math.floor(diff / 36e5);
diff -= h * 36e5;
const m = Math.floor(diff / 6e4);
diff -= m * 6e4;
const s = Math.floor(diff / 1e3);
document.getElementById("d").textContent = p(d);
document.getElementById("h").textContent = p(h);
document.getElementById("m").textContent = p(m);
document.getElementById("s").textContent = p(s);
}
tick();
setInterval(tick, 1000);
const form = document.getElementById("form");
if (form) {
form.addEventListener("submit", (e) => {
e.preventDefault();
const em = document.getElementById("email");
if (!em.value || !em.validity.valid) {
em.focus();
return;
}
form.style.display = "none";
document.getElementById("thanks").classList.add("show");
});
}
})();
</script>
</body>
</html>