147 lines
11 KiB
HTML
147 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<link rel="stylesheet" href="_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/styles.css">
|
|
<script src="_ds/modernist-39fc7197-4120-4057-af21-114438cd2248/_ds_bundle.js"></script>
|
|
<script src="./image-slot.js"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
body{margin:0;background:#ffffff;}
|
|
a{color:#201e1d;text-decoration:none;}
|
|
a:hover{color:#ec3013;}
|
|
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
|
|
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-8px) rotate(var(--r,0deg))}}
|
|
@media (prefers-reduced-motion: reduce){*{animation:none !important}}
|
|
</style>
|
|
</helmet>
|
|
<div style="background:#ffffff;color:#201e1d;font-family:Archivo, system-ui, sans-serif;min-height:100vh;overflow:hidden;">
|
|
|
|
<header style="display:flex;align-items:center;gap:32px;padding:20px clamp(20px,5vw,72px);border-bottom:2px solid #201e1d;flex-wrap:wrap;">
|
|
<a href="#" style="display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;letter-spacing:-0.03em;">
|
|
<span style="display:grid;grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:2px;">
|
|
<span style="background:#ec3013;"></span><span style="background:#ffd23f;"></span><span style="background:#2fb36b;"></span><span style="background:#3d6bf5;"></span>
|
|
</span>
|
|
Syllabus
|
|
</a>
|
|
<nav style="display:flex;gap:28px;font-size:15px;font-weight:500;flex:1;flex-wrap:wrap;">
|
|
<a href="#">Labs</a><a href="#">Cours gratuits</a><a href="#">Établissements</a><a href="#">Tarifs</a>
|
|
</nav>
|
|
<div style="display:flex;gap:12px;align-items:center;">
|
|
<a href="#" style="font-size:15px;font-weight:600;">Se connecter</a>
|
|
<a href="#" class="btn btn-primary" style="color:#ffffff;">Créer une classe</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:48px;padding:clamp(40px,6vw,88px) clamp(20px,5vw,72px) 64px;position:relative;">
|
|
|
|
<div style="display:flex;flex-direction:column;align-items:flex-start;gap:28px;position:relative;z-index:1;">
|
|
<span style="background:#ffd23f;border:2px solid #201e1d;box-shadow:4px 4px 0 #201e1d;padding:6px 14px;font-weight:700;font-size:14px;transform:rotate(-2deg);">Du lycée au BTS, sans rien installer</span>
|
|
<h1 style="font-size:clamp(48px,6.4vw,96px);line-height:0.95;letter-spacing:-0.045em;font-weight:900;margin:0;text-wrap:balance;">Une vraie machine Linux pour <span style="background:#ec3013;color:#ffffff;padding:0 0.12em;">chaque</span> élève.</h1>
|
|
<p style="font-size:19px;line-height:1.5;margin:0;max-width:30em;color:#444141;text-wrap:pretty;">Debian s'ouvre dans le navigateur en moins de 5 secondes. Les labs se corrigent tout seuls, et le prof voit qui avance, qui bloque, qui lève la main.</p>
|
|
<div style="display:flex;gap:20px;flex-wrap:wrap;font-weight:600;font-size:15px;border-top:2px solid #201e1d;padding-top:20px;">
|
|
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#2fb36b;border:2px solid #201e1d;"></span>Terminal en < 5 s</span>
|
|
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#3d6bf5;border:2px solid #201e1d;"></span>Correction automatique</span>
|
|
<span style="display:flex;align-items:center;gap:8px;"><span style="width:14px;height:14px;background:#ff7ac6;border:2px solid #201e1d;"></span>Hébergé en Europe</span>
|
|
</div>
|
|
<div style="display:flex;gap:12px;flex-wrap:wrap;">
|
|
<a href="#" style="display:flex;align-items:center;gap:14px;background:#201e1d;color:#ffffff;padding:16px 22px;font-weight:800;font-size:16px;border:2px solid #201e1d;box-shadow:5px 5px 0 #ec3013;" style-hover="background:#ec3013;color:#ffffff;box-shadow:5px 5px 0 #201e1d;">Lancer un lab d'essai <span style="font-family:'IBM Plex Mono',monospace;">→</span></a>
|
|
<a href="#" style="display:flex;align-items:center;background:#ffffff;padding:16px 22px;font-weight:700;font-size:16px;border:2px solid #201e1d;" style-hover="background:#fff2ef;">Voir les labs</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position:relative;min-height:600px;">
|
|
<div style="position:absolute;left:4%;top:28px;width:66%;height:420px;background:#3d6bf5;border:2px solid #201e1d;transform:translate(14px,14px);"></div>
|
|
<div style="position:absolute;left:4%;top:28px;width:66%;height:420px;border:2px solid #201e1d;background:#ffffff;">
|
|
<image-slot id="hero-jeunes" shape="rect" fit="contain" placeholder="Illustration : des jeunes devant leur ordinateur (style flat, couleurs vives)"></image-slot>
|
|
</div>
|
|
|
|
<div style="position:absolute;right:0;top:0;width:44%;min-width:210px;background:#2fb36b;border:2px solid #201e1d;box-shadow:6px 6px 0 #201e1d;padding:16px 18px;display:flex;flex-direction:column;gap:6px;">
|
|
<span style="font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#0b3a22;">Vérification</span>
|
|
<span style="font-size:18px;font-weight:800;color:#0b1f14;">Étape 3 / 5 validée</span>
|
|
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:6px;">
|
|
<span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#201e1d;"></span><span style="height:8px;background:#ffffff;border:2px solid #201e1d;"></span><span style="height:8px;background:#ffffff;border:2px solid #201e1d;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<sc-if value="{{ showTerminal }}" hint-placeholder-val="{{ true }}">
|
|
<div style="position:absolute;right:2%;bottom:0;width:62%;min-width:280px;background:#13233a;border:2px solid #201e1d;box-shadow:8px 8px 0 #ffd23f;font-family:'IBM Plex Mono',monospace;font-size:14px;color:#e8edf5;">
|
|
<div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid #201e1d;background:#0d192b;">
|
|
<span style="width:10px;height:10px;background:#ec3013;"></span><span style="width:10px;height:10px;background:#ffd23f;"></span><span style="width:10px;height:10px;background:#2fb36b;"></span>
|
|
<span style="margin-left:8px;font-size:12px;color:#9fb0c8;">lea@debian-lab — Premiers pas dans le shell</span>
|
|
</div>
|
|
<div style="padding:14px 16px;display:flex;flex-direction:column;gap:4px;line-height:1.5;">
|
|
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~$</span> mkdir projets && cd projets</span>
|
|
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~/projets$</span> ls -la</span>
|
|
<span style="color:#9fb0c8;">drwxr-xr-x 2 lea lea 4096 .</span>
|
|
<span><span style="color:#ffd23f;">✓</span> <span style="color:#ffd23f;">Dossier « projets » créé</span></span>
|
|
<span><span style="color:#2fb36b;">lea@debian</span><span style="color:#9fb0c8;">:~/projets$</span> {{ cursor }}</span>
|
|
</div>
|
|
</div>
|
|
</sc-if>
|
|
|
|
<div style="position:absolute;left:0;bottom:70px;background:#ffd23f;border:2px solid #201e1d;box-shadow:5px 5px 0 #201e1d;padding:12px 16px;display:flex;align-items:center;gap:12px;transform:rotate(-3deg);">
|
|
<span style="width:34px;height:34px;background:#ff7ac6;border:2px solid #201e1d;display:grid;place-items:center;font-weight:900;">N</span>
|
|
<span style="display:flex;flex-direction:column;">
|
|
<span style="font-weight:800;font-size:15px;">Nora lève la main</span>
|
|
<span style="font-size:13px;color:#444141;">bloquée depuis 8 min · étape 2</span>
|
|
</span>
|
|
</div>
|
|
|
|
<sc-if value="{{ showConfetti }}" hint-placeholder-val="{{ true }}">
|
|
{{ confetti }}
|
|
</sc-if>
|
|
</div>
|
|
</section>
|
|
|
|
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:2px solid #201e1d;border-bottom:2px solid #201e1d;">
|
|
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffd23f;font-weight:800;font-size:17px;">Lycée NSI</div>
|
|
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffffff;font-weight:800;font-size:17px;">BTS SIO SISR</div>
|
|
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#2fb36b;font-weight:800;font-size:17px;">BTS CIEL</div>
|
|
<div style="padding:20px clamp(20px,3vw,32px);border-right:2px solid #201e1d;background:#ffffff;font-weight:800;font-size:17px;">BUT R&T</div>
|
|
<div style="padding:20px clamp(20px,3vw,32px);background:#ff7ac6;font-weight:800;font-size:17px;">Titre pro TSSR</div>
|
|
</div>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"showConfetti":{"editor":"boolean","default":true,"tsType":"boolean","section":"Hero"},"showTerminal":{"editor":"boolean","default":true,"tsType":"boolean","section":"Hero"}}">
|
|
class Component extends DCLogic {
|
|
renderVals() {
|
|
const h = React.createElement;
|
|
const cursor = h('span', { style: { display: 'inline-block', width: '9px', height: '17px', background: '#ffd23f', verticalAlign: 'text-bottom', animation: 'blink 1s steps(1) infinite' } });
|
|
const shapes = [
|
|
{ l: '-4%', t: '2%', c: '#ec3013', k: 'star', s: 44, r: '12deg', d: '0s' },
|
|
{ l: '76%', t: '34%', c: '#ff7ac6', k: 'circle', s: 30, r: '0deg', d: '.6s' },
|
|
{ l: '40%', t: '-3%', c: '#ffd23f', k: 'tri', s: 34, r: '-18deg', d: '1.2s' },
|
|
{ l: '-2%', t: '60%', c: '#3d6bf5', k: 'square', s: 22, r: '20deg', d: '.3s' },
|
|
{ l: '90%', t: '62%', c: '#2fb36b', k: 'tri', s: 26, r: '30deg', d: '.9s' },
|
|
{ l: '30%', t: '90%', c: '#ec3013', k: 'circle', s: 18, r: '0deg', d: '1.5s' },
|
|
];
|
|
const path = (k, c) => {
|
|
const p = { fill: c, stroke: '#201e1d', strokeWidth: 3, strokeLinejoin: 'round' };
|
|
if (k === 'star') return h('polygon', { ...p, points: '20,2 25,15 38,15 28,24 32,37 20,29 8,37 12,24 2,15 15,15' });
|
|
if (k === 'circle') return h('circle', { ...p, cx: 20, cy: 20, r: 16 });
|
|
if (k === 'tri') return h('polygon', { ...p, points: '20,3 37,35 3,35' });
|
|
return h('rect', { ...p, x: 4, y: 4, width: 32, height: 32 });
|
|
};
|
|
const confetti = shapes.map((s, i) => h('svg', {
|
|
key: i, viewBox: '0 0 40 40', width: s.s, height: s.s, 'aria-hidden': true,
|
|
style: { position: 'absolute', left: s.l, top: s.t, zIndex: 2, '--r': s.r, transform: `rotate(${s.r})`, animation: `floaty 5s ease-in-out ${s.d} infinite`, pointerEvents: 'none' }
|
|
}, path(s.k, s.c)));
|
|
return {
|
|
cursor,
|
|
confetti,
|
|
showConfetti: this.props.showConfetti ?? true,
|
|
showTerminal: this.props.showTerminal ?? true,
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|