first commit ever

2026-09-07 07:49:21 +02:00
commit 0f60998ca8
18 changed files with 2568 additions and 0 deletions
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="Labo Ordinateur — les périphériques et le vocabulaire de base de Windows, avec exercices interactifs.">
+<title>Labo Ordinateur — M. Courcelle</title>
+<link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+
+<div class="page-desktop">
+
+  <div class="page-window">
+    <div class="page-win-chrome">
+      <div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
+      <div class="page-win-title">Labo Ordinateur</div>
+    </div>
+    <div class="page-win-body">
+      <div class="hero-layout">
+        <div class="hero-text">
+          <div class="page-breadcrumb"><span>M. Courcelle</span><span>›</span><span>Labo Ordinateur</span></div>
+          <h1 class="page-h1">Labo <em>Ordinateur</em></h1>
+          <p class="page-lead">Découvre comment fonctionne un ordinateur : ses périphériques, son bureau, ses fichiers. Chaque leçon se termine par des exercices que tu corriges toi-même.</p>
+          <div class="lecon-meta">
+            <span class="lecon-meta-item">📚 <strong>2</strong> leçons</span>
+            <span class="lecon-meta-item">🎯 <strong>4</strong> exercices</span>
+            <span class="lecon-meta-item">🖱️ Interactif</span>
+          </div>
+        </div>
+        <div class="hero-visual-side">
+          <div class="hero-big-icon">💻</div>
+          <span class="hero-labo-badge">Labo</span>
+        </div>
+      </div>
+    </div>
+    <div class="page-statusbar">
+      <span>💻 Labo Ordinateur</span>
+      <span>Choisis une leçon</span>
+    </div>
+  </div>
+
+  <div class="page-window">
+    <div class="page-win-chrome">
+      <div class="traffic"><div class="t-r"></div><div class="t-y"></div><div class="t-g"></div></div>
+      <div class="page-win-title">Les leçons</div>
+    </div>
+    <div class="page-win-body">
+
+      <div class="rainbow-line">
+        <div style="background:#E03A3E"></div><div style="background:#F58220"></div>
+        <div style="background:#FDB827"></div><div style="background:#61BB46"></div>
+        <div style="background:#009DDC"></div><div style="background:#963D97"></div>
+      </div>
+
+      <div class="notion-grid">
+
+        <a class="notion-card" href="peripheriques.html" style="--card-color:#009DDC">
+          <span class="notion-card-icon">🔌</span>
+          <div class="notion-card-title">Les périphériques</div>
+          <p class="notion-card-desc">Entrée, sortie, unité centrale, mémoires et unités de mesure. Image cliquable et 2 exercices.</p>
+          <span class="notion-card-tag">Leçon 01</span>
+        </a>
+
+        <a class="notion-card" href="vocabulaire.html" style="--card-color:#F58220">
+          <span class="notion-card-icon">🖥️</span>
+          <div class="notion-card-title">Vocabulaire de base</div>
+          <p class="notion-card-desc">Système, bureau, fichiers, extensions, navigateur. 14 cartes et 2 exercices.</p>
+          <span class="notion-card-tag">Leçon 03</span>
+        </a>
+
+      </div>
+    </div>
+    <div class="page-statusbar">
+      <span>2 leçons disponibles</span>
+      <span>Labo Ordinateur</span>
+    </div>
+  </div>
+
+</div>
+
+<script src="assets/layout.js"></script>
+</body>
+</html>