images

public/education/education.js

@@ -114,7 +114,7 @@ const { images_url } = require("../../../../constants");
 const GAMEDEV_THEMES = [
     {
         title: "Dessin et création 2D",
-        image: `${images_url}/glitch_meta_screen1.png`,
+        image: `${images_url}/learning_theme_2D.gif`,
         comment: "",
         details: [
             "Créer des décors et des personnages",
@@ -124,7 +124,7 @@ const GAMEDEV_THEMES = [
     },
     {
         title: "Musique et effets sonores",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        image: `${images_url}/learning_theme_sound.jpg`,
         comment: "",
         details: [
             "Utiliser des logiciels de son et des synthétiseurs",
@@ -147,13 +147,13 @@ const GAMEDEV_THEMES = [
         image: `${images_url}/glitch_meta_screen4.png`,
         comment: "",
         details: [
-            "Comprendres les différents éléments qui composent un jeu",
+            "Comprendre les différents éléments qui composent un jeu",
             "Développer les mécanismes de gameplay",
         ],
     },
     {
         title: "Programmation informatique",
-        image: `${images_url}/glitch_meta_screen5.png`,
+        image: `${images_url}/learning_theme_code.jpg`,
         comment: "",
         details: [
             "Apprendre pas à pas à coder avec différents langages de programmation",
@@ -162,11 +162,11 @@ const GAMEDEV_THEMES = [
     },
     {
         title: "Mathématiques et physique",
-        image: `${images_url}/glitch_meta_screen6.png`,
+        image: `${images_url}/learning_theme_math.jpg`,
         comment:
-            "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
+            "<i>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
         details: [
-            "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
+            "Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
         ],
     },
     {
@@ -177,8 +177,8 @@ const GAMEDEV_THEMES = [
         details: [],
     },
     {
-        title: "Logiciels libres, systèmes Linux",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        title: "Logiciels libres, GNU/Linux",
+        image: `${images_url}/learning_theme_linux.jpg`,
         comment:
             "<i>Nous utilisons essentiellement des logiciels libres sur Linux.<br>C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</i>",
         details: [],
@@ -450,7 +450,7 @@ const VULGARISATION_THEMES = [
     },
     {
         title: "GNU/Linux, le monde du libre",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        image: `${images_url}/learning_theme_linux.jpg`,
         comment: "",
         details: [
             "Installer Linux, démystifier et faire tomber les barrières.",
@@ -469,7 +469,7 @@ const VULGARISATION_THEMES = [
     },
     {
         title: "Le langages des machines",
-        image: `${images_url}/glitch_meta_screen4.png`,
+        image: `${images_url}/learning_theme_code.jpg`,
         comment: "",
         details: [
             "Démystifier la programmation informatique",
@@ -640,8 +640,10 @@ module.exports = function runPage(PageComponent) {
 },{"./lib/object-html-renderer":3,"./template/template":9}],9:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../constants");
+
 const NAV_MENU_ITEMS = [
-    ["/public/", "Accueil"],
+    ["/public/", "logo_kuadrado_s32.png; "],
     ["/public/games/", "Jeux"],
     ["/public/software-development/", "Software"],
     [
@@ -665,13 +667,25 @@ class Template {
             tag: "ul",
             class: isSubmenu ? "submenu" : "",
             contents: menuItemsArray.map(link => {
-                const [href, text, submenu] = link;
+                let [href, text, submenu] = link;
+                const spltTxt = text.split(";");
+                text = spltTxt.length > 1 ? spltTxt[1] : text;
+                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                 return {
                     tag: "li",
                     class: !isSubmenu && window.location.pathname === href ? "active" : "",
-                    contents: [{ tag: "a", href, contents: text }].concat(
-                        submenu ? [this.renderMenu(submenu, true)] : []
-                    ),
+                    contents: [
+                        {
+                            tag: "a",
+                            href,
+                            contents: img
+                                ? [
+                                      { tag: "img", src: `${images_url}/${img}` },
+                                      { tag: "span", contents: text },
+                                  ]
+                                : text,
+                        },
+                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                 };
             }),
         };
@@ -713,4 +727,4 @@ class Template {
 
 module.exports = Template;
 
-},{}]},{},[7]);
+},{"../../constants":2}]},{},[7]);

public/games/games.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+    case "dev":
+        server_url = "http://localhost:9000";
+        break;
+    case "prod":
+        server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+    images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
 "use strict";
 
 module.exports = {
@@ -84,7 +106,7 @@ module.exports = {
     },
 };
 
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
 "use strict";
 
 class GamesPage {
@@ -107,7 +129,7 @@ class GamesPage {
 
 module.exports = GamesPage;
 
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 "use strict";
 
 "use strict";
@@ -115,7 +137,7 @@ const runPage = require("../../run-page");
 const GamesPage = require("./games");
 runPage(GamesPage);
 
-},{"../../run-page":4,"./games":2}],4:[function(require,module,exports){
+},{"../../run-page":6,"./games":4}],6:[function(require,module,exports){
 "use strict";
 
 const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
     objectHtmlRenderer.renderCycle();
 };
 
-},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../constants");
+
 const NAV_MENU_ITEMS = [
-    ["/public/", "Accueil"],
+    ["/public/", "logo_kuadrado_s32.png; "],
     ["/public/games/", "Jeux"],
     ["/public/software-development/", "Software"],
     [
@@ -155,13 +179,25 @@ class Template {
             tag: "ul",
             class: isSubmenu ? "submenu" : "",
             contents: menuItemsArray.map(link => {
-                const [href, text, submenu] = link;
+                let [href, text, submenu] = link;
+                const spltTxt = text.split(";");
+                text = spltTxt.length > 1 ? spltTxt[1] : text;
+                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                 return {
                     tag: "li",
                     class: !isSubmenu && window.location.pathname === href ? "active" : "",
-                    contents: [{ tag: "a", href, contents: text }].concat(
-                        submenu ? [this.renderMenu(submenu, true)] : []
-                    ),
+                    contents: [
+                        {
+                            tag: "a",
+                            href,
+                            contents: img
+                                ? [
+                                      { tag: "img", src: `${images_url}/${img}` },
+                                      { tag: "span", contents: text },
+                                  ]
+                                : text,
+                        },
+                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                 };
             }),
         };
@@ -203,4 +239,4 @@ class Template {
 
 module.exports = Template;
 
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);

public/main.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+    case "dev":
+        server_url = "http://localhost:9000";
+        break;
+    case "prod":
+        server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+    images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
 "use strict";
 
 class HomePage {
@@ -21,7 +43,7 @@ class HomePage {
 
 module.exports = HomePage;
 
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
 "use strict";
 
 module.exports = {
@@ -107,7 +129,7 @@ module.exports = {
     },
 };
 
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 "use strict";
 
 const HomePage = require("./homepage");
@@ -115,7 +137,7 @@ const runPage = require("./run-page");
 
 runPage(HomePage);
 
-},{"./homepage":1,"./run-page":4}],4:[function(require,module,exports){
+},{"./homepage":3,"./run-page":6}],6:[function(require,module,exports){
 "use strict";
 
 const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
     objectHtmlRenderer.renderCycle();
 };
 
-},{"./lib/object-html-renderer":2,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":4,"./template/template":7}],7:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../constants");
+
 const NAV_MENU_ITEMS = [
-    ["/public/", "Accueil"],
+    ["/public/", "logo_kuadrado_s32.png; "],
     ["/public/games/", "Jeux"],
     ["/public/software-development/", "Software"],
     [
@@ -155,13 +179,25 @@ class Template {
             tag: "ul",
             class: isSubmenu ? "submenu" : "",
             contents: menuItemsArray.map(link => {
-                const [href, text, submenu] = link;
+                let [href, text, submenu] = link;
+                const spltTxt = text.split(";");
+                text = spltTxt.length > 1 ? spltTxt[1] : text;
+                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                 return {
                     tag: "li",
                     class: !isSubmenu && window.location.pathname === href ? "active" : "",
-                    contents: [{ tag: "a", href, contents: text }].concat(
-                        submenu ? [this.renderMenu(submenu, true)] : []
-                    ),
+                    contents: [
+                        {
+                            tag: "a",
+                            href,
+                            contents: img
+                                ? [
+                                      { tag: "img", src: `${images_url}/${img}` },
+                                      { tag: "span", contents: text },
+                                  ]
+                                : text,
+                        },
+                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                 };
             }),
         };
@@ -203,4 +239,4 @@ class Template {
 
 module.exports = Template;
 
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);

public/software-development/software-development.js

 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+const ENV = "dev";
+
+let server_url;
+
+switch (ENV) {
+    case "dev":
+        server_url = "http://localhost:9000";
+        break;
+    case "prod":
+        server_url = "http://your_production_server_url:port";
+}
+
+module.exports = { server_url };
+
+},{}],2:[function(require,module,exports){
+const { server_url } = require("./config");
+
+module.exports = {
+    images_url: `${server_url}/assets/images`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
 "use strict";
 
 module.exports = {
@@ -84,7 +106,7 @@ module.exports = {
     },
 };
 
-},{}],2:[function(require,module,exports){
+},{}],4:[function(require,module,exports){
 "use strict";
 
 class SoftwareDevelopment {
@@ -107,7 +129,7 @@ class SoftwareDevelopment {
 
 module.exports = SoftwareDevelopment;
 
-},{}],3:[function(require,module,exports){
+},{}],5:[function(require,module,exports){
 "use strict";
 
 "use strict";
@@ -115,7 +137,7 @@ const runPage = require("../../run-page");
 const SoftwareDevelopment = require("./software-development");
 runPage(SoftwareDevelopment);
 
-},{"../../run-page":4,"./software-development":2}],4:[function(require,module,exports){
+},{"../../run-page":6,"./software-development":4}],6:[function(require,module,exports){
 "use strict";
 
 const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -127,11 +149,13 @@ module.exports = function runPage(PageComponent) {
     objectHtmlRenderer.renderCycle();
 };
 
-},{"./lib/object-html-renderer":1,"./template/template":5}],5:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":7}],7:[function(require,module,exports){
 "use strict";
 
+const { images_url } = require("../../constants");
+
 const NAV_MENU_ITEMS = [
-    ["/public/", "Accueil"],
+    ["/public/", "logo_kuadrado_s32.png; "],
     ["/public/games/", "Jeux"],
     ["/public/software-development/", "Software"],
     [
@@ -155,13 +179,25 @@ class Template {
             tag: "ul",
             class: isSubmenu ? "submenu" : "",
             contents: menuItemsArray.map(link => {
-                const [href, text, submenu] = link;
+                let [href, text, submenu] = link;
+                const spltTxt = text.split(";");
+                text = spltTxt.length > 1 ? spltTxt[1] : text;
+                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                 return {
                     tag: "li",
                     class: !isSubmenu && window.location.pathname === href ? "active" : "",
-                    contents: [{ tag: "a", href, contents: text }].concat(
-                        submenu ? [this.renderMenu(submenu, true)] : []
-                    ),
+                    contents: [
+                        {
+                            tag: "a",
+                            href,
+                            contents: img
+                                ? [
+                                      { tag: "img", src: `${images_url}/${img}` },
+                                      { tag: "span", contents: text },
+                                  ]
+                                : text,
+                        },
+                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                 };
             }),
         };
@@ -203,4 +239,4 @@ class Template {
 
 module.exports = Template;
 
-},{}]},{},[3]);
+},{"../../constants":2}]},{},[5]);

src/pages/education/components/game-studio-club.js

@@ -5,7 +5,7 @@ const { images_url } = require("../../../../constants");
 const GAMEDEV_THEMES = [
     {
         title: "Dessin et création 2D",
-        image: `${images_url}/glitch_meta_screen1.png`,
+        image: `${images_url}/learning_theme_2D.gif`,
         comment: "",
         details: [
             "Créer des décors et des personnages",
@@ -15,7 +15,7 @@ const GAMEDEV_THEMES = [
     },
     {
         title: "Musique et effets sonores",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        image: `${images_url}/learning_theme_sound.jpg`,
         comment: "",
         details: [
             "Utiliser des logiciels de son et des synthétiseurs",
@@ -38,13 +38,13 @@ const GAMEDEV_THEMES = [
         image: `${images_url}/glitch_meta_screen4.png`,
         comment: "",
         details: [
-            "Comprendres les différents éléments qui composent un jeu",
+            "Comprendre les différents éléments qui composent un jeu",
             "Développer les mécanismes de gameplay",
         ],
     },
     {
         title: "Programmation informatique",
-        image: `${images_url}/glitch_meta_screen5.png`,
+        image: `${images_url}/learning_theme_code.jpg`,
         comment: "",
         details: [
             "Apprendre pas à pas à coder avec différents langages de programmation",
@@ -53,11 +53,11 @@ const GAMEDEV_THEMES = [
     },
     {
         title: "Mathématiques et physique",
-        image: `${images_url}/glitch_meta_screen6.png`,
+        image: `${images_url}/learning_theme_math.jpg`,
         comment:
-            "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
+            "<i>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
         details: [
-            "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
+            "Algorithmie, logique, géométrie, trigonométrie, algèbre linéaire, vecteurs, repères en 2D ...",
         ],
     },
     {
@@ -68,8 +68,8 @@ const GAMEDEV_THEMES = [
         details: [],
     },
     {
-        title: "Logiciels libres, systèmes Linux",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        title: "Logiciels libres, GNU/Linux",
+        image: `${images_url}/learning_theme_linux.jpg`,
         comment:
             "<i>Nous utilisons essentiellement des logiciels libres sur Linux.<br>C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</i>",
         details: [],

src/pages/education/components/popularization.js

@@ -16,7 +16,7 @@ const VULGARISATION_THEMES = [
     },
     {
         title: "GNU/Linux, le monde du libre",
-        image: `${images_url}/glitch_meta_screen2.png`,
+        image: `${images_url}/learning_theme_linux.jpg`,
         comment: "",
         details: [
             "Installer Linux, démystifier et faire tomber les barrières.",
@@ -35,7 +35,7 @@ const VULGARISATION_THEMES = [
     },
     {
         title: "Le langages des machines",
-        image: `${images_url}/glitch_meta_screen4.png`,
+        image: `${images_url}/learning_theme_code.jpg`,
         comment: "",
         details: [
             "Démystifier la programmation informatique",

src/pages/education/education.scss

@@ -107,32 +107,19 @@
         .infos-inscriptions {
             display: flex;
             gap: 40px;
+            background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)),
+                url("../assets/images/wallpaper_binary_light.png");
+            padding: 20px;
             .groups,
             .pricing {
-                background-image: linear-gradient(
-                        rgba(255, 255, 255, 0.2),
-                        rgba(255, 255, 255, 0.2)
-                    ),
-                    url("../assets/images/wallpaper_binary_light.png");
+                background-color: white;
                 padding: 20px;
                 display: flex;
                 flex-direction: column;
-                & > * {
-                    background-color: white;
-                    margin: 0;
-                    width: 100%;
-                }
                 h3 {
-                    flex: 1;
-                    padding: 20px 20px 10px;
-                }
-                p {
-                    padding: 10px 20px;
-                    flex: 1;
+                    margin: 0;
                 }
                 .table-wrapper {
-                    flex: 1;
-                    padding: 20px;
                     table {
                         border: 1px solid #dde;
                         border-collapse: collapse;
@@ -143,9 +130,6 @@
                     }
                 }
             }
-            .pricing {
-                // flex: 1;
-            }
         }
     }
 }

src/style.scss

@@ -20,7 +20,7 @@ main {
     header {
         width: 100%;
         nav {
-            background-color: #fff1;
+            background-color: rgba(255, 255, 255, 0.1);
             ul {
                 display: flex;
                 padding: 0;
@@ -30,10 +30,15 @@ main {
                     position: relative;
                     a {
                         display: flex;
+                        align-items: center;
+                        height: 100%;
                         padding: 10px 20px;
                         color: #b8b9c5;
                         font-weight: 500;
                         text-decoration: none;
+                        img {
+                            width: 40px;
+                        }
                     }
 
                     .submenu {
@@ -41,11 +46,15 @@ main {
                         position: absolute;
                         height: auto;
                         max-height: 0;
-                        transition: max-height .5s;
+                        transition: max-height 0.5s;
                         top: 100%;
                         left: 50%;
                         flex-direction: column;
-                        background-image: url("../assets/images/wallpaper_binary.png");
+                        background-image: linear-gradient(
+                                rgba(255, 255, 255, 0.1),
+                                rgba(255, 255, 255, 0.1)
+                            ),
+                            url("../assets/images/wallpaper_binary.png");
                         white-space: nowrap;
                     }
                     &:hover,
@@ -59,6 +68,16 @@ main {
                         .submenu {
                             visibility: unset;
                             max-height: 1000px;
+                            a {
+                                color: #b8b9c5;
+                            }
+                            li {
+                                &:hover {
+                                    a {
+                                        color: white;
+                                    }
+                                }
+                            }
                         }
                     }
                 }