Intro: general introduction similar to Totoyo's

I-1.html

@@ -14,17 +14,17 @@ Temps : 10 minutes</i></p>
 <figure>
   <center>
     <div style="max-width: 480px">
-      <div class="diagram">
+      <div class="I-1 diagram">
         <b>Applications (software)</b><br>
         RUN/MAT &middot; PRGM &middot; Add-ins &middot; Tes programmes !
       </div>
       <span>↓</span>
-      <div class="diagram">
+      <div class="I-1 diagram">
         <b>Système d'exploitation ou «&nbsp;OS&nbsp;» (software)</b><br>
         Menu principal &middot; Gestion des fichiers &middot; Drivers
       </div>
       <span>↓</span>
-      <div class="diagram" style="margin-bottom: 8px">
+      <div class="I-1 diagram" style="margin-bottom: 8px">
         <b>Matériel (hardware)</b><br>
         Piles &middot; Circuits électroniques &middot; Clavier &middot; Écran &middot; Ports USB et série
       </div>

intro.html

@@ -0,0 +1,60 @@
+<h1>Tutorial de programmation en Basic Casio</h1>
+
+<p>Bienvenue dans ce cours de programmation Basic pour les calculatrices graphiques Casio. Ce tutoriel est <b>destiné à tous les niveaux de lecteurs</b>, des curieux qui se lancent dans la programmation aux vétérans d'autres langages. Chacun peut lire à son rythme et progresser selon son envie&nbsp;: la difficulté est progressive.<p>
+
+<p>Ce cours n'aspire pas à recenser toutes les ficelles du métier en Basic Casio, mais avant tout à présenter les aspects fondamentaux de la programmation, qui se retrouvent dans tous les langages. Les curieux trouveront sur le forum beaucoup d'astuces Basic pour affiner leurs créations&nbsp;!</p>
+
+<p>Ce tutoriel est <b>orienté vers la création de jeux</b>, pour maintenir le côté ludique et présenter ce qui se fait de mieux sur Planète Casio. À la fin de chaque partie, tu pourras créer tes propres jeux et surprendre tes amis comme toi-même. Voici quelques exemples que des membres éminents ont créé au fil des années&nbsp;:</p>
+
+<center class='Intro showcase'>
+	<figure>
+		<img src='images/Intro/tetris-pll.gif'>
+		<figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme377-1-tetris-pll-pierrotll-jeux-divers.html'>Tetris PLL</a> par PierrotLL (2006)</i></figcaption>
+	</figure>
+
+	<figure>
+		<img src='images/Intro/clonelab.gif'>
+		<figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme1984-1-clonelab-ne0tux-jeux-reflexion.html'>Clonelab</a> par Ne0tux (2012)</i></figcaption>
+	</figure>
+
+	<figure>
+		<img src='images/Intro/drug-life-2.png'>
+		<figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme234-1-drug-life-2-neuronix-jeux-rolerpg.html'>Drug Life 2</a> par Neuronix (2006)</i></figcaption>
+	</figure>
+
+	<figure>
+		<img src='images/Intro/tokitori.gif'>
+		<figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme1693-1-tokitori-riptor-jeux-reflexion.html'>Tokitori</a> par Riptor (2011)</i></figcaption>
+	</figure>
+
+	<figure>
+		<img src='images/Intro/calcraft.gif'>
+		<figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme1979-1-calcraft-remiweb-jeux-divers.html'>Calcraft</a> par Remiweb (2012)</i></figcaption>
+	</figure>
+
+	<figure>
+	  <img src='images/Intro/sword-burst-zero.gif'>
+	  <figcaption><i><a href='https://www.planet-casio.com/Fr/programmes/programme3594-1-swordburstzero-redeyes-jeux-rolerpg.html'>Sword Burst Zero</a> par Redeyes (2018)</i></figcaption>
+	</figure>
+</center>
+
+<p>Quand tu télécharges un programme Basic Casio, tu as automatiquement le code du programme avec. N'hésite donc pas, au fil de ce cours, à <b>lire le code de tes jeux préférés</b> pour mieux comprendre ce qui se passe dans l'arrière-boutique.</p>
+
+<p>Pour suivre ce tutoriel, tu auras besoin d'une calculatrice ou d'un émulateur d'un des modèles suivant. Tous les exemples de ce tutoriel ont été <b>réalisés sur des Graph monochromes récentes</b>.</p>
+
+<ul>
+	<li>Modèles monochromes récents&nbsp;: Graph 25+E, 35+, 35+ USB, 35+E, 35+E II, 75+ ou 75+E</li>
+  <li>Modèles monochromes anciens&nbsp;: Graph 25+Pro, 35, 85 ou 95 SD</li>
+	<li>Modèles couleur&nbsp;: Prizm ou Graph 90+E</li>
+</ul>
+
+<p>Les anciens modèles monochromes n'ont pas toutes les fonctions du Basic&nbsp;: nous t'avertirons quand des fonctions récentes seront présentées dans le cours. Les calculatrices Classpad 300, 300+, 330, 300+, 400+, 400+E utilisent un langage similaire mais différent dans bien des détails, et ne sont pas présentées ici.</p>
+
+<p>Équipe-toi de ta calculatrice avec des piles chargées, et d'une bonne dose de fun !</p>
+
+<ul>
+	<li>En cas de problème avec un programme, tu peux <a href='https://www.planet-casio.com/Fr/forums'>poser une question sur le forum</a>.</li>
+	<li>Et si tout marche, n'hésitez pas à <a href='https://www.planet-casio.com/Fr/programmes/soumettre_un_programme_casio.php'>partager tes créations</a> ! (Évite simplement les plus-ou-moins et autres jeux triviaux qui sont déjà en surnombre !)</li>
+</ul>
+
+<p>Dans le premier chapitre, on présentera rapidement ce qu'il y a dans ta calculatrice pour bien comprendre le rôle du Basic Casio. Et ensuite, on attaquera directement le code !</p>

tutorial.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 p img {
   vertical-align: middle;
 }
@@ -8,17 +12,6 @@ div.correct {
   margin-top: 8px;
 }
 
-div.diagram {
-  background: #e0e0e0;
-  border: 1px solid #c0c0c0;
-  padding: 4px;
-}
-div.diagram + span {
-	display: block;
-  font-size: 16px;
-  line-height: 16px;
-}
-
 figure img {
 	border: 2px solid #e0e0e0;
 	border-radius: 2px;
@@ -30,3 +23,30 @@ pre {
 	border-radius: 2px;
 	padding: 4px 8px;
 }
+
+/* Chapter-specific styles */
+
+.Intro.showcase {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 280px);
+  grid-gap: 8px 8px;
+  justify-content: center;
+  margin: 32px 0 16px 0;
+}
+.Intro.showcase figure {
+	margin: 0;
+}
+/*div.Intro.showcase figure img {
+	display: block;
+}*/
+
+div.I-1.diagram {
+  background: #e0e0e0;
+  border: 1px solid #c0c0c0;
+  padding: 4px;
+}
+div.I-1.diagram + span {
+	display: block;
+  font-size: 16px;
+  line-height: 16px;
+}