Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit cf7055eb authored by Pierre Jarriges's avatar Pierre Jarriges
Browse files

merge dev | fix:conflicts

parents 5c4d32da 8d6f5cf4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 1309 additions and 1479 deletions
build.js
+ 1
− 42
View file @ cf7055eb
......@@ -185,7 +185,7 @@ function createPages(rootdir, destdir) {
page.write(getPageHtml(p, pageMeta));
if (fs.existsSync(`${fPath}/subpages`)) {
createPages(`${fPath}/subpages`, targetDirPath)
createPages(`${fPath}/subpages`, targetDirPath);
}
}
......@@ -211,44 +211,3 @@ function createPages(rootdir, destdir) {
}
createPages(`${curDir}/src/pages`, `${curDir}/public`);
// const pages = fs.readdirSync(`${curDir}/src/pages`);
// for (const p of pages) {
// const fPath = `${curDir}/src/pages/${p}`;
// const targetDirPath = `${curDir}/public/${p}`;
// if (!fs.existsSync(targetDirPath)) {
// fs.mkdirSync(targetDirPath);
// }
// const b = browserify();
// b.add(fPath)
// .bundle()
// .pipe(fs.createWriteStream(`${targetDirPath}/${p}.js`));
// const page = fs.createWriteStream(`${targetDirPath}/index.html`);
// const pageMeta = JSON.parse(fs.readFileSync(`${fPath}/meta.json`, "utf-8"));
// page.write(getPageHtml(p, pageMeta));
// }
// // If pages have been deleted in source, remove them in output directory too.
// for (const dir of fs.readdirSync(`${curDir}/public`).filter(f => {
// if (build_conf.protected_dirs.includes(f)) return false;
// const stats = fs.statSync(`${curDir}/public/${f}`);
// return stats.isDirectory();
// })) {
// if (!pages.includes(dir)) {
// const dPath = `${curDir}/public/${dir}`;
// try {
// const nestedFiles = fs.readdirSync(dPath);
// for (const nf of nestedFiles) {
// fs.unlinkSync(`${dPath}/${nf}`);
// }
// fs.rmdirSync(dPath);
// } catch (error) {
// console.error(error);
// }
// }
// }
data/nginx/app.conf
+ 14
− 14
View file @ cf7055eb
......@@ -8,19 +8,19 @@ server {
root /var/www/certbot;
}
location / {
return 301 https://$host$request_uri;
}
# location / {
# return 301 https://$host$request_uri;
# }
}
server {
server_name kuadrado-software.fr www.kuadrado-software.fr;
listen 443 ssl;
root /usr/share/nginx/html;
index index.html index.htm;
server_tokens off;
ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
\ No newline at end of file
# server {
# server_name kuadrado-software.fr www.kuadrado-software.fr;
# listen 443 ssl;
# root /usr/share/nginx/html;
# index index.html index.htm;
# server_tokens off;
# ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
# ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
# include /etc/letsencrypt/options-ssl-nginx.conf;
# ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
# }
\ No newline at end of file
public/assets/images/learning_theme_2d.png
+ 0
− 0
View replaced file @ 5c4d32da View file @ cf7055eb
public/assets/images/learning_theme_2d.png

5.09 KiB | W: | H:

public/assets/images/learning_theme_2d.png

5.34 KiB | W: | H:

public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
public/assets/images/learning_theme_2d.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_coding.png
+ 0
− 0
View replaced file @ 5c4d32da View file @ cf7055eb
public/assets/images/learning_theme_coding.png

3.87 KiB | W: | H:

public/assets/images/learning_theme_coding.png

2.3 KiB | W: | H:

public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
public/assets/images/learning_theme_coding.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_math.png
+ 0
− 0
View replaced file @ 5c4d32da View file @ cf7055eb
public/assets/images/learning_theme_math.png

6.3 KiB | W: | H:

public/assets/images/learning_theme_math.png

8.03 KiB | W: | H:

public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
public/assets/images/learning_theme_math.png
  • 2-up
  • Swipe
  • Onion skin
public/assets/images/learning_theme_pc.png
+ 0
− 0
View replaced file @ 5c4d32da View file @ cf7055eb
public/assets/images/learning_theme_pc.png

3.89 KiB | W: | H:

public/assets/images/learning_theme_pc.png

4.03 KiB | W: | H:

public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
public/assets/images/learning_theme_pc.png
  • 2-up
  • Swipe
  • Onion skin
public/education/education.js
+ 199
− 636
View file @ cf7055eb
......@@ -121,113 +121,81 @@ module.exports = WebPage;
},{}],5:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../../constants");
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
const GAMEDEV_THEMES = [
{
title: "Dessin et création 2D",
image: "learning_theme_2d.png",
details: [
"Création de décors et de personnages",
"Dessin sur ordinateur, pixel art, vectoriel",
"Animations 2D",
],
},
{
title: "Musique et sons",
image: "learning_theme_sound.png",
details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
},
{
title: "Écriture",
image: "learning_theme_write.png",
details: [
"Écrire une histoire, construire une narration",
"Imaginer des mondes et des personnages",
],
},
{
title: "Conception",
image: "learning_theme_conception.png",
details: [
"Concevoir les différents éléments qui composent le jeu",
"Développer les mécanismes de gameplay",
],
},
const EDU_THEMES = [
// {
// title: "Création de jeux vidéo",
// description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
// image: "learning_theme_conception.png",
// pageUrl: "gamedev",
// },
{
title: "Programmation",
description: `<b>Franchissez le mur du code !</b><br />
Apprenez à programmer avec différents langages (Python, Javascript, C ...), pour du web, du logiciel, du jeu vidéo ou autre.`,
image: "learning_theme_coding.png",
details: [
"Apprendre pas à pas à coder avec différents langages de programmation",
"Découvrir les bases du web en créant des mini-jeux en lignes",
],
// pageUrl: "coding",
},
{
title: "Mathématiques",
image: "learning_theme_math.png",
comment:
"<em>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 !</em>",
details: [
"Algorithmie",
"Logique (algèbre booléen)",
"Géométrie",
"Trigonométrie",
"Algèbre linéaire",
"Repères 2D / 3D",
"Vecteurs 2D / 3D",
"Newton",
"...",
],
title: "Dessin numérique et animation 2D",
description: `Apprenez à utiliser des logiciels libres de création graphique 2D et d'animation.<br />
Créez des personnages et des décors, menez votre projet de dessin animé, d'illustration ou de jeu vidéo.`,
image: "learning_theme_2d.png",
// pageUrl: "2d",
},
{
title: "Travail d'équipe",
image: "learning_theme_team.png",
comment: `
<em>
Faire son jeu tout seul c'est bien mais ça peut être long !
<br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
</em>`,
details: ["Gestion de projet", "Méthodologie", "Communication"],
title: "Maths et physiques",
description: "Abordez les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
image: "learning_theme_math.png",
// pageUrl: "math",
},
// {
// title: "Musique et sons électroniques",
// description: "Découvrez des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
// image: "learning_theme_sound.png",
// pageUrl: "sound",
// },
{
title: "Logiciels libres, GNU/Linux",
image: "learning_theme_linux.png",
comment:
"<em>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 !</em>",
details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
},
title: "Aide informatique générale",
description: "Perdu avec votre ordinateur ou votre smartphone, les logiciels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
image: "learning_theme_pc.png",
// pageUrl: "popularization"
}
];
class GameStudioClub {
class EducationPage extends WebPage {
render() {
return {
tag: "section",
tag: "div",
id: "education-page",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
class: "title-banner game-banner",
id: "game-studio-club", // anchor id
contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
},
{
tag: "div",
class: "special-announcement",
class: "page-header logo-left",
contents: [
{
tag: "div",
class: "page-contents-center",
class: "page-contents-center grid-wrapper",
contents: [
{
tag: "div",
class: "logo",
contents: [
{
tag: "img",
alt: "image brain",
src: `${images_url}brain.svg`,
},
],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `
<green>Mise à jour en préparation : </green><br />
Le programme pédagogique va être amené à changer très prochainement, la durée des séances sera raccourcie à 1h30,
les matières abordées dans le de développement de jeu seront proposées séparément (animation 2D, programmation,
sons électroniques, maths / physique, etc.), et l'accès au nombre de séances hebdomadaire ne sera plus limité quelle
que soit la durée de l'abonnement.<br />
Vous pouvez d'ores et déjà tenir compte de ces changements pour une inscription prochaine ou une réinscription.
`,
contents: `Animation d'ateliers informatiques accessibles à tous.
Programmation, graphisme 2D, jeux vidéo, vulgarisation, accompagnement de projet, etc.`,
},
],
},
......@@ -235,604 +203,203 @@ class GameStudioClub {
},
{
tag: "div",
class: "section-contents page-contents-center",
class: "title-banner",
},
{
tag: "section",
class: "bg-dark",
contents: [
{
tag: "div",
class: "full-row",
class: "page-contents-center",
contents: [
{
tag: "h3",
class: "big",
contents:
"Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
property: "headline",
},
{
tag: "strong",
contents:
"La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
},
{
tag: "p",
contents:
"<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
tag: "ul",
class: "edu-themes",
contents: EDU_THEMES.map(theme => {
return {
tag: "li",
class: "edu-theme",
contents: [
{ tag: "img", width: 250, height: 140, class: "pixelated", src: `${images_url}${theme.image}` },
{ tag: "h3", contents: theme.title },
{ tag: "p", contents: theme.description },
]
}
})
},
],
]
},
]
},
{
tag: "section",
class: "practical-info",
contents: [
{
tag: "div",
class: "practical-infos",
class: "page-contents-center",
contents: [
{
tag: "div",
class: "info-item",
property: "about",
class: "info-block",
contents: [
{ tag: "strong", contents: "Ça se passe où ?" },
{ tag: "h3", class: "info-title", contents: "Pour qui ?" },
{
tag: "span",
contents:
"Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
},
],
},
{
tag: "div",
class: "info-item",
property: "about",
contents: [
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
<br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
`,
},
],
tag: "p",
class: "info-body",
contents: `Les ateliers sont accessibles aux adultes comme aux enfants, plutôt à partir de 12 ans.<br/>
Les séances ont lieu en groupes mixtes.
`
}
]
},
{
tag: "div",
class: "info-item",
property: "about",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Où ça ?" },
{
tag: "strong",
contents: "Contact",
},
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
property: "email",
},
],
},
],
},
{
tag: "div",
class: "list-wrapper",
property: "hasPart",
contents: [
{
tag: "ul",
class: "learning-themes",
contents: GAMEDEV_THEMES.map(li => {
return {
tag: "li",
class: "learning-theme",
typeof: "ListItem",
contents: [
{
tag: "strong",
class: "title",
contents: li.title,
property: "name",
},
{
tag: "img",
alt: `learning theme image ${li.title}`,
src: `${images_url}${li.image}`,
property: "image",
},
{
tag: "div",
class: "details",
property: "description",
contents: [
li.comment && {
tag: "div",
class: "comment",
contents: li.comment,
},
{
tag: "ul",
contents: li.details.map(d => {
return {
tag: "li",
contents: d,
};
}),
},
],
},
],
};
}),
tag: "p",
class: "info-body",
contents: "Dans mon local professionnel : <br /><blue>32 rue Simon Vialet, passage du Cheminou, 07240 Vernoux en Vivarais.</blue>"
}
]
},
],
},
{
tag: "div",
class: "infos-inscriptions full-row",
property: "about",
contents: [
{
tag: "div",
class: "groups",
class: "info-block",
contents: [
{
tag: "h3",
contents: "Groupes",
},
{ tag: "h3", class: "info-title", contents: "Quel matériel ?" },
{
tag: "p",
contents:
"Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
},
{
tag: "div",
class: "table-wrapper",
contents: [
{
tag: "table",
contents: [
{
tag: "tr",
contents: [
{ tag: "td", contents: "Mardi" },
{
tag: "td",
contents: "16h - 19h",
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Mercredi" },
{
tag: "td",
contents: "14h - 17h",
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Jeudi" },
{
tag: "td",
contents: "16h - 19h",
},
],
},
],
},
],
},
{
tag: "p",
contents: `
Les séances sont accessibles sur des plages horaires de 3 heures,
mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
ils ne sont pas obligés de rester les 3 heures.
<br><br>
Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
`,
},
],
class: "info-body",
contents: `Le matériel informatique est fourni sur place (ordinateurs et tablettes graphique)
mais il est possible d'amener le sien.
<br />Il est recommandé d'apporter au moins une clé USB pour faire ses sauvegardes.`
}
]
},
{
tag: "div",
class: "pricing",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Quand ?" },
{
tag: "h3",
contents: "Inscription, fonctionnement et tarifs",
},
{
tag: "p",
contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
`,
},
{
tag: "div",
class: "table-wrapper",
tag: "ul",
class: "info-body tabled",
contents: [
{
tag: "table",
tag: "li",
contents: [
{
tag: "tr",
contents: [
{
tag: "td",
contents: "Abonnement 1 mois",
},
{
tag: "td",
contents: "(4 séances)",
},
{
tag: "td",
contents:
"<b><blue>60€</blue></b>",
},
],
},
{
tag: "tr",
contents: [
{
tag: "td",
contents:
"Abonnement 1 trimestre",
},
{
tag: "td",
contents: "(12 séances)",
},
{
tag: "td",
contents:
"<b><blue>160€</blue></b>",
},
],
},
],
{ tag: "span", contents: "Mardi" },
{ tag: "span", contents: "16h - 18h" },
]
},
],
},
{
tag: "div",
class: "documents",
contents: [
{
tag: "div",
contents: "Télécharger la fiche d'inscription",
tag: "li",
contents: [
{ tag: "span", contents: "Mercredi" },
{ tag: "span", contents: "14h - 16h" },
]
},
{
tag: "div",
class: "links",
tag: "li",
contents: [
{
tag: "a",
class: "download-link",
download: "fiche-inscription",
href: "/assets/documents/fiche-inscription.pdf",
contents: "PDF",
},
{
tag: "a",
class: "download-link",
download: "fiche-inscription",
href: "/assets/documents/fiche-inscription.odt",
contents: "Libre Office",
},
{ tag: "span", contents: "Jeudi" },
{ tag: "span", contents: "16h - 18h" },
]
},
{
tag: "li",
class: "fullwidth",
contents: "<em><blue>Ouvert de Septembre à Juin, sauf vacances scolaires ou fermetures exceptionnelles</blue></em>"
}
],
]
},
],
]
},
],
},
{
tag: "div",
class: "teacher",
contents: [
{
tag: "div",
class: "teacher-card",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Combien ça coûte ?" },
{
tag: "h3",
contents: "Animé par",
},
{
tag: "div",
class: "pic",
tag: "ul",
class: "info-body tabled",
contents: [
{
tag: "img",
src:
"/assets/images/pijar_profile_lt_square.png",
tag: "li",
contents: [
{ tag: "span", contents: "Inscription au mois" },
{ tag: "span", contents: "50€" },
]
},
],
},
{
tag: "div",
class: "infos-text",
contents: [
{
tag: "h4",
contents: "Pierre Jarriges"
tag: "li",
contents: [
{ tag: "span", contents: "Inscription à la séance" },
{ tag: "span", contents: "15€" },
]
},
{
tag: "p",
contents: "Développeur jeu vidéo, auteur BD, compositeur."
tag: "li",
contents: [
{ tag: "span", contents: "Cours particuliers" },
{ tag: "span", contents: "30€/h, sur place ou en visio. Horaires à définir." },
]
}
]
}
],
},
],
},
],
},
],
};
}
}
module.exports = GameStudioClub;
},{"../../../../constants":2}],6:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../../constants");
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
image: "learning_theme_pc.png",
details: [
"Répondre aux questions sur l'informatique de tous les jours",
"L'organisation des fichiers",
"Le navigateur web et les logiciels usuels",
"Le système d'exploitation",
],
},
{
title: "GNU/Linux, le monde du libre",
image: "learning_theme_linux.png",
details: [
"Apprendre à installer Linux",
"Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
],
},
{
title: "Comment fonctionne le web ?",
image: "learning_theme_web.png",
details: [
"De quoi est fait le réseau internet ?",
"Comment fonctionnent les différents services que nous utilisons ?",
"Qu'est-ce qu'un cloud ?",
],
},
{
title: "Le langages des machines",
image: "learning_theme_coding.png",
details: [
"Qu'est-ce qu'un langage de programmation",
"À quoi ça sert ?",
"Les métiers du développement informatique",
],
},
{
title: "Les coulisses du jeu vidéo",
image: "learning_theme_2d.png",
details: [
"De quoi sont fait les jeux vidéos ?",
"Quels sont les outils ?",
"Les métiers du jeu vidéo",
"Du pixelart à l'industrie lourde",
"Qu'est-ce qu'un moteur de jeu ?",
],
},
];
class Popularization {
render() {
return {
tag: "section",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
class: "title-banner popu-banner",
id: "popularization", // anchor id
contents: [
{ tag: "h2", contents: "Vulgarisation numérique", property: "name" },
],
},
{
tag: "div",
class: "section-contents page-contents-center",
contents: [
{
tag: "div",
class: "full-row",
contents: [
{
tag: "h3",
class: "big",
contents: "<blue>S'approprier</blue> l'informatique",
property: "headline",
]
},
{
tag: "strong",
contents:
"Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
property: "alternativeHeadline",
},
{
tag: "p",
contents:
"<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
property: "description",
},
],
},
{
tag: "div",
class: "practical-infos",
contents: [
{
tag: "div",
class: "info-item",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Pour s'inscrire ou en savoir plus" },
{
tag: "span",
contents:
"Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
},
],
},
{
tag: "div",
class: "info-item",
contents: [
{
tag: "strong",
contents: "Contact",
},
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
property: "email",
},
],
},
],
},
{
tag: "div",
class: "list-wrapper",
contents: [
{
tag: "ul",
class: "learning-themes",
property: "hasPart",
contents: VULGARISATION_THEMES.map(li => {
return {
tag: "li",
typeof: "ListItem",
class: "learning-theme " + li.class,
tag: "ul",
class: "info-body",
contents: [
{
tag: "strong",
class: "title",
contents: li.title,
property: "name",
},
{
tag: "img",
alt: `learning theme image ${li.title}`,
src: `${images_url}${li.image}`,
property: "image",
tag: "li",
contents: [
{ tag: "span", contents: "Me contacter" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
}
]
},
{
tag: "div",
class: "details",
property: "description",
tag: "li",
contents: [
{ tag: "span", contents: "" },
{
tag: "div",
class: "comment",
contents: li.comment,
},
{
tag: "ul",
contents: li.details.map(d => {
return {
tag: "li",
contents: d,
};
}),
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
],
]
},
],
};
}),
},
],
},
],
},
],
};
}
}
module.exports = Popularization;
},{"../../../../constants":2}],7:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
const GameStudioClub = require("./components/game-studio-club");
const Popularization = require("./components/popularization");
class EducationPage extends WebPage {
{
tag: "li",
contents: [
{ tag: "span", contents: "ou passer directement me voir au local !" }
]
}
]
}
]
}
]
}
]
render() {
return {
tag: "div",
id: "education-page",
contents: [
{
tag: "div",
class: "page-header logo-left",
contents: [
{
tag: "div",
class: "page-contents-center grid-wrapper",
contents: [
{
tag: "div",
class: "logo",
contents: [
{
tag: "img",
alt: "image brain",
src: `${images_url}brain.svg`,
},
],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
},
],
},
],
},
new GameStudioClub().render(),
new Popularization().render(),
],
};
}
......@@ -840,15 +407,13 @@ class EducationPage extends WebPage {
module.exports = EducationPage;
},{"../../../constants":2,"../../lib/web-page":4,"./components/game-studio-club":5,"./components/popularization":6}],8:[function(require,module,exports){
"use strict";
},{"../../../constants":2,"../../lib/web-page":4}],6:[function(require,module,exports){
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
},{"../../run-page":9,"./education":7}],9:[function(require,module,exports){
},{"../../run-page":7,"./education":5}],7:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
......@@ -860,23 +425,21 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":3,"./template/template":11}],10:[function(require,module,exports){
},{"./lib/object-html-renderer":3,"./template/template":9}],8:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -926,13 +489,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -942,7 +506,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -971,7 +535,7 @@ class NavBar {
module.exports = NavBar;
},{"../../../constants":2}],11:[function(require,module,exports){
},{"../../../constants":2}],9:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
......@@ -1028,13 +592,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......@@ -1082,4 +645,4 @@ class Template {
module.exports = Template;
},{"../../config":1,"../../constants":2,"./components/navbar":10}]},{},[8]);
},{"../../config":1,"../../constants":2,"./components/navbar":8}]},{},[6]);
src/pages/education/components/game-studio-club.js → public/education/gamedev/gamedev.js
+ 555
− 0
View file @ cf7055eb
(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){
function getServerUrl() {
return `${location.origin}${
location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
}`;
}
module.exports = {
getServerUrl,
website_title: "Kuadrado website template",
build: {
protected_dirs: ["assets", "style", "articles"],
default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
},
};
},{}],2:[function(require,module,exports){
const { getServerUrl } = require("./config");
module.exports = {
images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
},{"./config":1}],3:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../../constants");
module.exports = {
setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot;
},
objectToHtml: function objectToHtml(obj) {
const { tag } = obj;
const node = document.createElement(tag);
const excludeKeys = ["tag", "contents", "style_rules", "state"];
Object.keys(obj)
.filter(attr => !excludeKeys.includes(attr))
.forEach(attr => {
if (attr === "class") {
node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
} else {
node[attr] = obj[attr];
}
});
if (obj.contents && typeof obj.contents === "string") {
node.innerHTML = obj.contents;
} else {
obj.contents &&
obj.contents.length > 0 &&
obj.contents.forEach(el => {
switch (typeof el) {
case "string":
node.innerHTML = el;
break;
case "object":
node.appendChild(objectToHtml(el));
break;
}
});
}
if (obj.style_rules) {
Object.keys(obj.style_rules).forEach(rule => {
node.style[rule] = obj.style_rules[rule];
});
}
return node;
},
renderCycle: function () {
this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
mode: "replace",
});
},
subRender(object, htmlNode, options = { mode: "append" }) {
const insert = this.objectToHtml(object);
switch (options.mode) {
case "append":
htmlNode.appendChild(insert);
break;
case "override":
htmlNode.innerHTML = "";
htmlNode.appendChild(insert);
break;
case "insert-before":
htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
break;
case "adjacent":
/**
* options.insertLocation must be one of:
*
* afterbegin
* afterend
* beforebegin
* beforeend
*/
htmlNode.insertAdjacentHTML(options.insertLocation, insert);
break;
case "replace":
htmlNode.parentNode.replaceChild(insert, htmlNode);
break;
case "remove":
htmlNode.remove();
break;
}
},
};
},{}],4:[function(require,module,exports){
"use strict";
class WebPage {
constructor(args) {
Object.assign(this, args);
}
}
module.exports = WebPage;
},{}],5:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../../../constants");
const WebPage = require("../../../../lib/web-page");
const GAMEDEV_THEMES = [
{
......@@ -86,32 +208,8 @@ class GameStudioClub {
{
tag: "div",
class: "title-banner game-banner",
id: "game-studio-club", // anchor id
contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
},
{
tag: "div",
class: "special-announcement",
contents: [
{
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "p",
contents: `
<green>Mise à jour en préparation : </green><br />
Le programme pédagogique va être amené à changer très prochainement, la durée des séances sera raccourcie à 1h30,
les matières abordées dans le de développement de jeu seront proposées séparément (animation 2D, programmation,
sons électroniques, maths / physique, etc.), et l'accès au nombre de séances hebdomadaire ne sera plus limité quelle
que soit la durée de l'abonnement.<br />
Vous pouvez d'ores et déjà tenir compte de ces changements pour une inscription prochaine ou une réinscription.
`,
},
],
},
],
},
{
tag: "div",
class: "section-contents page-contents-center",
......@@ -139,63 +237,6 @@ class GameStudioClub {
},
],
},
{
tag: "div",
class: "practical-infos",
contents: [
{
tag: "div",
class: "info-item",
property: "about",
contents: [
{ tag: "strong", contents: "Ça se passe où ?" },
{
tag: "span",
contents:
"Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
},
],
},
{
tag: "div",
class: "info-item",
property: "about",
contents: [
{ tag: "strong", contents: "Pour qui ?" },
{
tag: "span",
contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
<br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
`,
},
],
},
{
tag: "div",
class: "info-item",
property: "about",
contents: [
{
tag: "strong",
contents: "Contact",
},
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
property: "email",
},
],
},
],
},
{
tag: "div",
class: "list-wrapper",
......@@ -249,217 +290,259 @@ class GameStudioClub {
},
],
},
],
},
],
};
}
}
class GamedevPage extends WebPage {
render() {
return {
tag: "div",
id: "game-studio-club-page",
contents: [
new GameStudioClub().render(),
],
};
}
}
module.exports = GamedevPage;
},{"../../../../../constants":2,"../../../../lib/web-page":4}],6:[function(require,module,exports){
"use strict";
const runPage = require("../../../../run-page");
const GamedevPage = require("./gamedev-page");
runPage(GamedevPage);
},{"../../../../run-page":7,"./gamedev-page":5}],7:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");
module.exports = function runPage(PageComponent) {
const template = new Template({ page: new PageComponent() });
objectHtmlRenderer.setRenderCycleRoot(template);
objectHtmlRenderer.renderCycle();
};
},{"./lib/object-html-renderer":3,"./template/template":9}],8:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
constructor() {
this.initEventHandlers();
}
handleBurgerClick() {
document.getElementById("nav-menu-list").classList.toggle("responsive-show");
}
initEventHandlers() {
window.addEventListener("click", event => {
if (
event.target.id !== "nav-menu-list" &&
!event.target.classList.contains("burger") &&
!event.target.parentNode.classList.contains("burger")
) {
document.getElementById("nav-menu-list").classList.remove("responsive-show");
}
});
}
renderHome() {
return {
tag: "div",
class: "home",
contents: [
{
tag: "a",
href: "/",
contents: [
{
tag: "img",
alt: "Logo Kuadrado",
src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
],
};
}
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
contents: [
{
tag: "a",
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
}
renderResponsiveBurger() {
return {
tag: "div",
class: "burger",
onclick: this.handleBurgerClick.bind(this),
contents: [{ tag: "span", contents: "···" }],
};
}
render() {
return {
tag: "nav",
contents: [
this.renderHome(),
this.renderResponsiveBurger(),
this.renderMenu(NAV_MENU_ITEMS),
],
};
}
}
module.exports = NavBar;
},{"../../../constants":2}],9:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
const { images_url } = require("../../constants");
const NavBar = require("./components/navbar");
class Template {
constructor(props) {
this.props = props;
}
render() {
return {
tag: "main",
contents: [
{
tag: "header",
contents: [new NavBar().render()],
},
in_construction && {
tag: "section",
class: "warning-banner",
contents: [
{
tag: "strong",
class: "page-contents-center",
contents: "Site en construction ...",
},
],
},
{
tag: "section",
id: "page-container",
contents: [this.props.page.render()],
},
{
tag: "footer",
contents: [
{
tag: "div",
class: "infos-inscriptions full-row",
property: "about",
class: "logo",
contents: [
{
tag: "div",
class: "groups",
contents: [
{
tag: "h3",
contents: "Groupes",
},
{
tag: "p",
contents:
"Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
},
{
tag: "div",
class: "table-wrapper",
contents: [
{
tag: "table",
contents: [
{
tag: "tr",
contents: [
{ tag: "td", contents: "Mardi" },
{
tag: "td",
contents: "16h - 19h",
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Mercredi" },
{
tag: "td",
contents: "14h - 17h",
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Jeudi" },
{
tag: "td",
contents: "16h - 19h",
},
],
},
],
},
],
},
{
tag: "p",
contents: `
Les séances sont accessibles sur des plages horaires de 3 heures,
mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
ils ne sont pas obligés de rester les 3 heures.
<br><br>
Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
`,
},
],
tag: "img",
alt: `logo Kuadrado`,
src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "div",
class: "pricing",
contents: [
{
tag: "h3",
contents: "Inscription, fonctionnement et tarifs",
},
{
tag: "p",
contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
`,
},
{
tag: "div",
class: "table-wrapper",
contents: [
{
tag: "table",
contents: [
{
tag: "tr",
contents: [
{
tag: "td",
contents: "Abonnement 1 mois",
},
{
tag: "td",
contents: "(4 séances)",
},
{
tag: "td",
contents:
"<b><blue>60€</blue></b>",
},
],
},
{
tag: "tr",
contents: [
{
tag: "td",
contents:
"Abonnement 1 trimestre",
},
{
tag: "td",
contents: "(12 séances)",
},
{
tag: "td",
contents:
"<b><blue>160€</blue></b>",
},
],
},
],
},
],
},
{
tag: "div",
class: "documents",
contents: [
{
tag: "div",
contents: "Télécharger la fiche d'inscription",
},
{
tag: "div",
class: "links",
contents: [
{
tag: "a",
class: "download-link",
download: "fiche-inscription",
href: "/assets/documents/fiche-inscription.pdf",
contents: "PDF",
},
{
tag: "a",
class: "download-link",
download: "fiche-inscription",
href: "/assets/documents/fiche-inscription.odt",
contents: "Libre Office",
},
]
}
],
},
],
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
{
tag: "span",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
},
],
},
{
tag: "div",
class: "teacher",
class: "social",
contents: [
{
tag: "div",
class: "teacher-card",
contents: [
{
tag: "h3",
contents: "Animé par",
},
{
tag: "div",
class: "pic",
contents: [
{
tag: "img",
src:
"/assets/images/pijar_profile_lt_square.png",
},
],
},
{
tag: "div",
class: "infos-text",
contents: [
{
tag: "h4",
contents: "Pierre Jarriges"
},
{
tag: "p",
contents: "Développeur jeu vidéo, auteur BD, compositeur."
}
]
}
],
tag: "strong",
contents: "<blue>Sur les réseaux : </blue>",
},
{
tag: "a",
href: "https://www.linkedin.com/company/kuadrado-software",
target: "_blank",
contents: "in",
title: "Linkedin",
},
{
tag: "a",
href: "https://twitter.com/KuadradoSoft",
target: "_blank",
contents: "t",
title: "Twitter",
style_rules: { fontFamily: "serif" },
},
],
},
{
tag: "span",
contents: `Copyright © ${new Date()
.getFullYear()} Kuadrado Software |
Toutes les images du site ont été réalisées par mes soins et peuvent être réutilisées pour un usage personnel.`,
},
],
},
],
......@@ -467,4 +550,6 @@ class GameStudioClub {
}
}
module.exports = GameStudioClub;
module.exports = Template;
},{"../../config":1,"../../constants":2,"./components/navbar":8}]},{},[6]);
public/education/gamedev/index.html 0 → 100644
+ 35
− 0
View file @ cf7055eb
<!DOCTYPE html>
<html lang="fr" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="utf-8" />
<title>Kuadrado Software | Game Studio Club</title>
<meta name="description" content="Apprendre à créer un jeu vidéo de A à Z"/>
<meta name="author" content="Kuadrado Software" />
<meta name="image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
<!-- Open Graph Protocol meta data -->
<meta property="og:title" content="Kuadrado Software | Game Studio Club"/>
<meta property="og:description" content="Apprendre à créer un jeu vidéo de A à Z"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kuadrado-software.fr/gamedev"/>
<meta property="og:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
<meta property="twitter:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
<meta property="og:locale" content="fr_FR"/>
<meta property="og:site_name" content="Kuadrado Software" />
<!-- English translation not ready yet -->
<!-- <meta property="og:locale:alternate" content="en_GB" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link href="/style/style.css" rel="stylesheet" />
<script type="application/ld+json">{"@context":"https://schema.org","type":"WebPage","description":"Apprendre à créer un jeu vidéo de A à Z","image":["https://kuadrado-software.fr/assets/images/brain.svg","https://kuadrado-software.fr/assets/images/brain.png","https://kuadrado-software.fr/assets/images/game_studio_banner.png","https://kuadrado-software.fr/assets/images/popularization_banner.png"],"keywords":"Apprendre informatique jeu vidéo, gamedev, code","name":"Kuadrado Software - Game Studio Club","url":"https://kuadrado-software.fr/education/game-studio/club"}</script>
</head>
<!-- The vocab attribute defines the standard vocabulary used for RDFa standard.
The DOM may contain properties such as "typeof" and "property" accordinly to the schema.org vocabulary -->
<body vocab="https://schema.org/">
<!-- The H1 tag will be never seen but it's necessary for SEO -->
<main><h1 style="visibility: hidden">Kuadrado Software | Game Studio Club</h1></main>
</body>
<script type="text/javascript" src="./gamedev.js"></script>
</html>
public/games/games.js
+ 16
− 18
View file @ cf7055eb
......@@ -554,17 +554,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -614,13 +612,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -630,7 +629,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -716,13 +715,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/main.js
+ 16
− 18
View file @ cf7055eb
......@@ -766,17 +766,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -826,13 +824,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -842,7 +841,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -928,13 +927,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/software-development/software-development.js
+ 16
− 18
View file @ cf7055eb
......@@ -595,17 +595,15 @@ module.exports = function runPage(PageComponent) {
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
[
"/education/",
"Pédagogie",
[
// submenu
["/education/#game-studio-club", "Game Studio Club"],
["/education/#popularization", "Vulgarisation numérique"],
],
],
["/software-development/", "Software"],
{ url: "/games/", text: "Jeux" },
{
url: "/education/",
text: "Pédagogie",
// submenu: [
// { url: "/gamedev", text: "Création de jeux vidéo" },
// ]
},
{ url: "/software-development/", text: "Software" }
];
class NavBar {
......@@ -655,13 +653,14 @@ class NavBar {
};
}
renderMenu(menuItemsArray, isSubmenu = false) {
renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
return {
tag: "ul",
id: "nav-menu-list",
class: isSubmenu ? "submenu" : "",
contents: menuItemsArray.map(link => {
const [href, text, submenu] = link;
contents: menuItemsArray.map(item => {
const { url, text, submenu } = item;
const href = `${parentUrl}${url}`;
return {
tag: "li",
class: !isSubmenu && window.location.pathname === href ? "active" : "",
......@@ -671,7 +670,7 @@ class NavBar {
href,
contents: text,
},
].concat(submenu ? [this.renderMenu(submenu, true)] : []),
].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
};
}),
};
......@@ -757,13 +756,12 @@ class Template {
},
{
tag: "span",
contents:
"<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
},
{
tag: "div",
contents: [
{ tag: "strong", contents: "<blue>Nous contacter : </blue>" },
{ tag: "strong", contents: "<blue>Contact : </blue>" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
......
public/style/pages/education/education.css
+ 3
− 3
View file @ cf7055eb
/* Error: Undefined variable.
* ,
* 30 | background-color: $yellow_2;
* 25 | background-color: $yellow_2;
* | ^^^^^^^^^
* '
* src/pages/education/education.scss 30:27 root stylesheet */
* src/pages/education/education.scss 25:27 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
......@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined variable.\a \2577 \a 30 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 30:27 root stylesheet";
content: "Error: Undefined variable.\a \2577 \a 25 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 25:27 root stylesheet";
}
public/style/pages/education/subpages/game-studio-club/game-studio-club.css 0 → 100644
+ 3
− 0
View file @ cf7055eb
/*# sourceMappingURL=game-studio-club.css.map */
public/style/pages/games/games.css
+ 3
− 3
View file @ cf7055eb
/* Error: Undefined variable.
* ,
* 14 | color: $light_2;
* 15 | color: $light_2;
* | ^^^^^^^^
* '
* src/pages/games/games.scss 14:28 root stylesheet */
* src/pages/games/games.scss 15:28 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
......@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined variable.\a \2577 \a 14 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 14:28 root stylesheet";
content: "Error: Undefined variable.\a \2577 \a 15 \2502 color: $light_2;\a \2502 ^^^^^^^^\a \2575 \a src/pages/games/games.scss 15:28 root stylesheet";
}
public/style/style.css
+ 96
− 255
View file @ cf7055eb
......@@ -36,6 +36,10 @@ body .bg-blue {
background-color: #4baabb;
color: white;
}
body .bg-dark {
background-color: #3c4144;
color: #aabbc8;
}
body #seo-title {
visibility: hidden;
}
......@@ -802,16 +806,11 @@ main #page-container #education-page .title-banner {
flex-direction: column;
height: 20vw;
min-height: 250px;
background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
main #page-container #education-page .title-banner.game-banner {
background-image: url("/assets/images/game_studio_banner.png");
}
main #page-container #education-page .title-banner.popu-banner {
background-image: url("/assets/images/popularization_banner.png");
}
main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
......@@ -835,288 +834,126 @@ main #page-container #education-page .special-announcement .page-contents-center
margin: 0;
padding: 40px 0;
}
main #page-container #education-page .section-contents {
padding: 20px 40px 60px;
main #page-container #education-page .edu-themes {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
height: auto;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1/span 2;
}
main #page-container #education-page .section-contents .practical-infos {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
}
main #page-container #education-page .section-contents .practical-infos .info-item {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
}
main #page-container #education-page .section-contents .practical-infos .info-item strong {
margin-bottom: 10px;
white-space: nowrap;
color: #6b7880;
}
main #page-container #education-page .section-contents .practical-infos .info-item span,
main #page-container #education-page .section-contents .practical-infos .info-item a {
font-size: 14px;
grid-template-columns: 1fr 1fr;
gap: 50px;
font-family: monospace;
padding: 70px 0;
}
main #page-container #education-page .section-contents .list-wrapper {
grid-column: 1;
grid-row: 2;
main #page-container #education-page .edu-themes .edu-theme {
display: grid;
grid-template-columns: auto 1fr;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
display: flex;
gap: 20px 30px;
flex-wrap: wrap;
main #page-container #education-page .edu-themes .edu-theme * {
border-style: dashed;
border-color: #00ff00;
border-width: 0 0 0 0;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
position: relative;
border: solid #d4d9dd;
border-width: 0 2px 2px 0;
main #page-container #education-page .edu-themes .edu-theme h3 {
color: #00ff00;
grid-row: 1;
margin: 0;
padding: 0 10px;
display: flex;
flex-direction: column;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .title {
color: #6b7880;
display: block;
position: absolute;
background-color: #fffa;
padding: 3px 10px;
width: 100%;
align-items: center;
border-width: 0 0 0 1px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
main #page-container #education-page .edu-themes .edu-theme img {
width: 100%;
height: auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
background-color: #fffe;
position: absolute;
top: 25px;
left: 25px;
width: 300px;
height: auto;
max-height: 0;
visibility: hidden;
z-index: 1;
transition: max-height 0.6s;
padding: 20px;
border: solid #d4d9dd;
border-width: 0 1px 1px 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
grid-row: 1/span 2;
border-width: 1px 0 1px 1px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment {
font-style: italic;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment * {
color: #6b7880;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
main #page-container #education-page .edu-themes .edu-theme p {
text-align: justify;
color: #72e3f0;
grid-row: 2;
margin: 0;
padding: 10px 30px 0 10px;
border-width: 1px 1px 1px 0;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul li {
color: #6b7880;
main #page-container #education-page .edu-themes .edu-theme p * {
color: #72e3f0;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme:hover .details {
max-height: 1000px;
visibility: visible;
main #page-container #education-page .practical-info {
padding: 50px 0;
}
main #page-container #education-page .section-contents .infos-inscriptions {
display: flex;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
main #page-container #education-page .practical-info .page-contents-center {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
main #page-container #education-page .practical-info .page-contents-center .info-block {
display: grid;
grid-template-rows: auto 1fr;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
color: #4baabb;
margin: 0;
color: #96a5ae;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
border: 1px solid #dde;
border-collapse: collapse;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
border: 1px solid #dde;
padding: 10px 20px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents {
margin-top: 20px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links {
display: flex;
gap: 20px;
border-bottom: 1px dashed #aabbc8;
border-left: 1px dashed #aabbc8;
padding: 10px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links .download-link,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links .download-link {
border: 1px solid;
padding: 8px;
display: flex;
margin: 10px 0 0;
border-radius: 4px;
main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
margin: 0;
padding: 20px 10px;
border-right: 1px dashed #aabbc8;
border-bottom: 1px dashed #aabbc8;
}
main #page-container #education-page .section-contents .teacher {
grid-column: 1/span 2;
background: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
main #page-container #education-page .practical-info .page-contents-center .info-block ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
gap: 5px;
}
main #page-container #education-page .section-contents .teacher .teacher-card {
background-color: white;
main #page-container #education-page .practical-info .page-contents-center .info-block ul li:not(.fullwidth) {
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
gap: 20px;
padding: 20px;
}
main #page-container #education-page .section-contents .teacher .teacher-card h3 {
margin: 0;
width: 100%;
color: #96a5ae;
grid-column: 1/span 2;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
width: 100px;
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span {
padding: 3px 0;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text {
padding: 0 20px;
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:first-child {
font-weight: bold;
color: #6b7880;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
main #page-container #education-page .practical-info .page-contents-center .info-block ul.tabled li span:last-child {
color: #4baabb;
margin: 0;
font-size: 18px;
}
main #page-container #education-page .section-contents .teacher .teacher-card .infos-text p {
color: #96a5ae;
display: block;
}
@media screen and (max-width: 900px) {
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
display: block;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
width: 100%;
margin-bottom: 20px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
}
main #page-container #education-page .section-contents .infos-inscriptions {
flex-direction: column;
@media screen and (max-width: 1200px) {
main #page-container #education-page .edu-themes {
grid-template-columns: 1fr;
gap: 30px;
padding: 70px 0;
}
}
@media screen and (max-width: 780px) {
main #page-container #education-page h3.big {
font-size: 22px;
}
main #page-container #education-page .title-banner {
height: 170px;
min-height: unset;
main #page-container #education-page .practical-info .page-contents-center {
grid-template-columns: 1fr;
gap: 30px;
}
main #page-container #education-page .title-banner h2 {
font-size: 2em;
margin: 20px;
text-shadow: 0 0 4px #000b;
main #page-container #education-page .practical-info .page-contents-center .info-block .info-title {
border-top: 1px dashed #aabbc8;
}
main #page-container #education-page .section-contents {
padding: 20px 20px 40px;
grid-template-columns: 100%;
main #page-container #education-page .practical-info .page-contents-center .info-block .info-body {
border-bottom: none;
}
main #page-container #education-page .section-contents .full-row {
grid-column: 1;
}
@media screen and (max-width: 560px) {
main #page-container #education-page .edu-themes .edu-theme h3 {
border-width: 0 0 1px 1px;
}
main #page-container #education-page .section-contents .practical-infos {
grid-column: 1;
grid-row: 3;
gap: 10px;
padding: 10px;
main #page-container #education-page .edu-themes .edu-theme img {
max-width: 150px;
height: auto;
grid-row: 1;
border-width: 1px 0 0 1px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
grid-column: 1;
main #page-container #education-page .edu-themes .edu-theme p {
grid-row: 2;
display: block;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
margin-bottom: 20px;
}
main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
}
main #page-container #education-page .section-contents .infos-inscriptions {
gap: 10px;
padding: 10px;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups,
main #page-container #education-page .section-contents .infos-inscriptions .pricing {
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
width: 100%;
}
main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
border: 1px solid #dde;
padding: 10px;
}
main #page-container #education-page .section-contents .teacher {
grid-column: 1;
padding: 20px;
grid-column: 1/span 2;
padding: 20px 10px 30px 10px;
border-width: 0 1px 1px 1px;
}
}
main #page-container #games-page .game-articles article {
......@@ -1127,6 +964,7 @@ main #page-container #games-page .game-articles article {
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(7, auto);
width: 100%;
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1/span 2;
......@@ -1144,6 +982,7 @@ main #page-container #games-page .game-articles article.game-article .game-banne
flex-direction: row;
flex-direction: column;
background-color: black;
overflow: hidden;
}
main #page-container #games-page .game-articles article.game-article .game-banner img {
height: 500px;
......@@ -1234,16 +1073,18 @@ main #page-container #games-page .game-articles article.placeholder * {
}
main #page-container #games-page .game-articles article.game-article .game-title {
grid-column: 1;
padding: 20px;
padding: 0;
font-size: 25px;
}
main #page-container #games-page .game-articles article.game-article .game-banner {
grid-column: 1;
margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .image-carousel {
grid-column: 1;
grid-row: 3;
height: 400px;
margin: 0 -20px;
}
main #page-container #games-page .game-articles article.game-article .game-team {
grid-column: 1;
......
src/pages/education/components/popularization.js deleted 100644 → 0
+ 0
− 196
View file @ 5c4d32da
"use strict";
const { images_url } = require("../../../../constants");
const VULGARISATION_THEMES = [
{
title: "Qu'est-ce qui se passe dans mon ordinateur ?",
image: "learning_theme_pc.png",
details: [
"Répondre aux questions sur l'informatique de tous les jours",
"L'organisation des fichiers",
"Le navigateur web et les logiciels usuels",
"Le système d'exploitation",
],
},
{
title: "GNU/Linux, le monde du libre",
image: "learning_theme_linux.png",
details: [
"Apprendre à installer Linux",
"Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
],
},
{
title: "Comment fonctionne le web ?",
image: "learning_theme_web.png",
details: [
"De quoi est fait le réseau internet ?",
"Comment fonctionnent les différents services que nous utilisons ?",
"Qu'est-ce qu'un cloud ?",
],
},
{
title: "Le langages des machines",
image: "learning_theme_coding.png",
details: [
"Qu'est-ce qu'un langage de programmation",
"À quoi ça sert ?",
"Les métiers du développement informatique",
],
},
{
title: "Les coulisses du jeu vidéo",
image: "learning_theme_2d.png",
details: [
"De quoi sont fait les jeux vidéos ?",
"Quels sont les outils ?",
"Les métiers du jeu vidéo",
"Du pixelart à l'industrie lourde",
"Qu'est-ce qu'un moteur de jeu ?",
],
},
];
class Popularization {
render() {
return {
tag: "section",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
class: "title-banner popu-banner",
id: "popularization", // anchor id
contents: [
{ tag: "h2", contents: "Vulgarisation numérique", property: "name" },
],
},
{
tag: "div",
class: "section-contents page-contents-center",
contents: [
{
tag: "div",
class: "full-row",
contents: [
{
tag: "h3",
class: "big",
contents: "<blue>S'approprier</blue> l'informatique",
property: "headline",
},
{
tag: "strong",
contents:
"Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
property: "alternativeHeadline",
},
{
tag: "p",
contents:
"<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
property: "description",
},
],
},
{
tag: "div",
class: "practical-infos",
contents: [
{
tag: "div",
class: "info-item",
contents: [
{
tag: "span",
contents:
"Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
},
],
},
{
tag: "div",
class: "info-item",
contents: [
{
tag: "strong",
contents: "Contact",
},
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
property: "email",
},
],
},
],
},
{
tag: "div",
class: "list-wrapper",
contents: [
{
tag: "ul",
class: "learning-themes",
property: "hasPart",
contents: VULGARISATION_THEMES.map(li => {
return {
tag: "li",
typeof: "ListItem",
class: "learning-theme " + li.class,
contents: [
{
tag: "strong",
class: "title",
contents: li.title,
property: "name",
},
{
tag: "img",
alt: `learning theme image ${li.title}`,
src: `${images_url}${li.image}`,
property: "image",
},
{
tag: "div",
class: "details",
property: "description",
contents: [
{
tag: "div",
class: "comment",
contents: li.comment,
},
{
tag: "ul",
contents: li.details.map(d => {
return {
tag: "li",
contents: d,
};
}),
},
],
},
],
};
}),
},
],
},
],
},
],
};
}
}
module.exports = Popularization;
src/pages/education/education.js
+ 243
− 6
View file @ cf7055eb
......@@ -2,15 +2,54 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
const GameStudioClub = require("./components/game-studio-club");
const Popularization = require("./components/popularization");
class EducationPage extends WebPage {
const EDU_THEMES = [
// {
// title: "Création de jeux vidéo",
// description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
// image: "learning_theme_conception.png",
// pageUrl: "gamedev",
// },
{
title: "Programmation",
description: `<b>Franchissez le mur du code !</b><br />
Apprenez à programmer avec différents langages (Python, Javascript, C ...), pour du web, du logiciel, du jeu vidéo ou autre.`,
image: "learning_theme_coding.png",
// pageUrl: "coding",
},
{
title: "Dessin numérique et animation 2D",
description: `Apprenez à utiliser des logiciels libres de création graphique 2D et d'animation.<br />
Créez des personnages et des décors, menez votre projet de dessin animé, d'illustration ou de jeu vidéo.`,
image: "learning_theme_2d.png",
// pageUrl: "2d",
},
{
title: "Maths et physiques",
description: "Abordez les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
image: "learning_theme_math.png",
// pageUrl: "math",
},
// {
// title: "Musique et sons électroniques",
// description: "Découvrez des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
// image: "learning_theme_sound.png",
// pageUrl: "sound",
// },
{
title: "Aide informatique générale",
description: "Perdu avec votre ordinateur ou votre smartphone, les logiciels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
image: "learning_theme_pc.png",
// pageUrl: "popularization"
}
];
class EducationPage extends WebPage {
render() {
return {
tag: "div",
id: "education-page",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
......@@ -34,14 +73,212 @@ class EducationPage extends WebPage {
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
contents: `Animation d'ateliers informatiques accessibles à tous.
Programmation, graphisme 2D, jeux vidéo, vulgarisation, accompagnement de projet, etc.`,
},
],
},
],
},
new GameStudioClub().render(),
new Popularization().render(),
{
tag: "div",
class: "title-banner",
},
{
tag: "section",
class: "bg-dark",
contents: [
{
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "ul",
class: "edu-themes",
contents: EDU_THEMES.map(theme => {
return {
tag: "li",
class: "edu-theme",
contents: [
{ tag: "img", width: 250, height: 140, class: "pixelated", src: `${images_url}${theme.image}` },
{ tag: "h3", contents: theme.title },
{ tag: "p", contents: theme.description },
]
}
})
},
]
},
]
},
{
tag: "section",
class: "practical-info",
contents: [
{
tag: "div",
class: "page-contents-center",
contents: [
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Pour qui ?" },
{
tag: "p",
class: "info-body",
contents: `Les ateliers sont accessibles aux adultes comme aux enfants, plutôt à partir de 12 ans.<br/>
Les séances ont lieu en groupes mixtes.
`
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Où ça ?" },
{
tag: "p",
class: "info-body",
contents: "Dans mon local professionnel : <br /><blue>32 rue Simon Vialet, passage du Cheminou, 07240 Vernoux en Vivarais.</blue>"
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Quel matériel ?" },
{
tag: "p",
class: "info-body",
contents: `Le matériel informatique est fourni sur place (ordinateurs et tablettes graphique)
mais il est possible d'amener le sien.
<br />Il est recommandé d'apporter au moins une clé USB pour faire ses sauvegardes.`
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Quand ?" },
{
tag: "ul",
class: "info-body tabled",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: "Mardi" },
{ tag: "span", contents: "16h - 18h" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Mercredi" },
{ tag: "span", contents: "14h - 16h" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Jeudi" },
{ tag: "span", contents: "16h - 18h" },
]
},
{
tag: "li",
class: "fullwidth",
contents: "<em><blue>Ouvert de Septembre à Juin, sauf vacances scolaires ou fermetures exceptionnelles</blue></em>"
}
]
},
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Combien ça coûte ?" },
{
tag: "ul",
class: "info-body tabled",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: "Inscription au mois" },
{ tag: "span", contents: "50€" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Inscription à la séance" },
{ tag: "span", contents: "15€" },
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "Cours particuliers" },
{ tag: "span", contents: "30€/h, sur place ou en visio. Horaires à définir." },
]
}
]
}
]
},
{
tag: "div",
class: "info-block",
contents: [
{ tag: "h3", class: "info-title", contents: "Pour s'inscrire ou en savoir plus" },
{
tag: "ul",
class: "info-body",
contents: [
{
tag: "li",
contents: [
{ tag: "span", contents: "Me contacter" },
{
tag: "a",
href: "mailto:contact@kuadrado-software.fr",
contents: "contact@kuadrado-software.fr",
}
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "" },
{
tag: "a",
href: "tel:+33475780872",
contents: "04 75 78 08 72",
property: "telephone",
},
]
},
{
tag: "li",
contents: [
{ tag: "span", contents: "ou passer directement me voir au local !" }
]
}
]
}
]
}
]
}
]
},
],
};
}
......
src/pages/education/education.scss
+ 109
− 268
View file @ cf7055eb
......@@ -10,12 +10,7 @@
flex-direction: column;
height: 20vw;
min-height: 250px;
&.game-banner {
background-image: url("/assets/images/game_studio_banner.png");
}
&.popu-banner {
background-image: url("/assets/images/popularization_banner.png");
}
background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
......@@ -40,296 +35,142 @@
}
}
}
.section-contents {
padding: 20px 40px 60px;
.edu-themes {
display: grid;
grid-template-columns: auto 1fr;
gap: 20px;
height: auto;
.full-row {
grid-column: 1 / span 2;
}
.practical-infos {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
.info-item {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
strong {
margin-bottom: 10px;
white-space: nowrap;
color: $medium_grey;
}
span,
a {
font-size: 14px;
}
grid-template-columns: 1fr 1fr;
gap: 50px;
font-family: monospace;
padding: 70px 0;
.edu-theme {
display: grid;
grid-template-columns: auto 1fr;
* {
border-style: dashed;
border-color: $green;
border-width: 0 0 0 0;
}
}
.list-wrapper {
grid-column: 1;
grid-row: 2;
ul.learning-themes {
h3 {
color: $green;
grid-row: 1;
margin: 0;
padding: 0 10px;
display: flex;
gap: 20px 30px;
flex-wrap: wrap;
li.learning-theme {
position: relative;
border: solid $light_0;
border-width: 0 2px 2px 0;
display: flex;
flex-direction: column;
.title {
color: $medium_grey;
display: block;
position: absolute;
background-color: #fffa;
padding: 3px 10px;
width: 100%;
}
img {
width: 100%;
height: auto;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.details {
background-color: #fffe;
position: absolute;
top: 25px;
left: 25px;
width: 300px;
height: auto;
max-height: 0;
visibility: hidden;
z-index: 1;
transition: max-height 0.6s;
padding: 20px;
border: solid $light_0;
border-width: 0 1px 1px 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 10px;
.comment {
font-style: italic;
* {
color: $medium_grey;
}
}
ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
li {
color: $medium_grey;
}
}
}
&:hover {
.details {
max-height: 1000px;
visibility: visible;
}
}
}
align-items: center;
border-width: 0 0 0 1px;
}
}
.infos-inscriptions {
display: flex;
gap: 40px;
background-image: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
.groups,
.pricing {
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
h3 {
margin: 0;
color: $light_1;
}
.table-wrapper {
table {
border: 1px solid #dde;
border-collapse: collapse;
td {
border: 1px solid #dde;
padding: 10px 20px;
}
}
}
.documents {
margin-top: 20px;
.links {
display: flex;
gap: 20px;
.download-link {
border: 1px solid;
padding: 8px;
display: flex;
margin: 10px 0 0;
border-radius: 4px;
}
}
img {
width: 100%;
grid-row: 1 / span 2;
border-width: 1px 0 1px 1px;
}
p {
text-align: justify;
color: $blue_3;
* {
color: $blue_3;
}
grid-row: 2;
margin: 0;
padding: 10px 30px 0 10px;
border-width: 1px 1px 1px 0;
}
}
}
.teacher {
grid-column: 1 / span 2;
background: url("/assets/images/wallpaper_binary_light.png");
padding: 30px;
@include flex-center-col;
.teacher-card {
background-color: white;
.practical-info {
padding: 50px 0;
.page-contents-center {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
.info-block {
display: grid;
grid-template-columns: auto 1fr;
width: 100%;
gap: 20px;
padding: 20px;
h3 {
grid-template-rows: auto 1fr;
.info-title {
color: $blue_2;
margin: 0;
width: 100%;
color: $light_1;
grid-column: 1 / span 2;
border-bottom: 1px dashed $light_2;
border-left: 1px dashed $light_2;
padding: 10px;
}
.pic {
img {
width: 100px;
}
.info-body {
margin: 0;
padding: 20px 10px;
border-right: 1px dashed $light_2;
border-bottom: 1px dashed $light_2;
}
.infos-text {
padding: 0 20px;
h4 {
color: $blue_2;
margin: 0;
font-size: 18px;
}
p {
color: $light_1;
display: block;
ul {
display: flex;
flex-direction: column;
gap: 5px;
li:not(.fullwidth) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
}
}
}
}
@media screen and (max-width: $screen_l) {
.section-contents {
.list-wrapper {
ul.learning-themes {
display: block;
li.learning-theme {
width: 100%;
margin-bottom: 20px;
.details {
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
ul {
list-style-type: disc;
font-size: 14px;
margin-left: 10px;
&.tabled {
li {
span {
padding: 3px 0;
&:first-child {
font-weight: bold;
color: $medium_grey;
}
&:last-child {
color: $blue_2;
}
}
}
}
}
}
}
}
.infos-inscriptions {
flex-direction: column;
}
@media screen and (max-width: 1200px) {
.edu-themes {
grid-template-columns: 1fr;
gap: 30px;
padding: 70px 0;
}
}
@media screen and (max-width: $screen_m) {
h3 {
&.big {
font-size: 22px;
}
}
.title-banner {
height: 170px;
min-height: unset;
h2 {
font-size: 2em;
margin: 20px;
text-shadow: 0 0 4px #000b;
}
}
.section-contents {
padding: 20px 20px 40px;
grid-template-columns: 100%;
.full-row {
grid-column: 1;
}
.practical-infos {
grid-column: 1;
grid-row: 3;
gap: 10px;
padding: 10px;
}
.list-wrapper {
ul.learning-themes {
grid-column: 1;
grid-row: 2;
display: block;
li.learning-theme {
margin-bottom: 20px;
.details {
background-color: #fff9;
position: relative;
top: unset;
width: 100%;
left: unset;
max-height: unset;
visibility: visible;
padding: 10px;
box-shadow: none;
}
.practical-info {
.page-contents-center {
grid-template-columns: 1fr;
gap: 30px;
.info-block {
.info-title {
border-top: 1px dashed $light_2;
}
.info-body {
border-bottom: none;
}
}
}
}
}
.infos-inscriptions {
gap: 10px;
padding: 10px;
.groups,
.pricing {
background-color: white;
padding: 20px;
display: flex;
flex-direction: column;
.table-wrapper {
table {
width: 100%;
td {
border: 1px solid #dde;
padding: 10px;
}
}
}
@media screen and (max-width: $screen_s) {
.edu-themes {
.edu-theme {
h3 {
border-width: 0 0 1px 1px;
}
img {
max-width: 150px;
height: auto;
grid-row: 1;
border-width: 1px 0 0 1px;
}
p {
grid-row: 2;
grid-column: 1 / span 2;
padding: 20px 10px 30px 10px;
border-width: 0 1px 1px 1px;
}
}
.teacher {
grid-column: 1;
padding: 20px;
}
}
}
......
src/pages/education/index.js
+ 0
− 2
View file @ cf7055eb
"use strict";
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service