furtest/tigrou
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flask plus les pages du site melange front et back

Browse Source
This commit is contained in:
Yoan Guerin
2025-12-05 04:42:39 +01:00
parent 3dad610d7c
commit e8142c575c
9 changed files with 1201 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
flask_base/templates/PAI.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAI - Analyse en cours</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
{% include 'header.html' %}
<main>
<section class="pai-container">
<div class="pai-box">
<h2>Protocole d’Analyse Intellectuelle</h2>
<p id="pai-text" class="pai-text">Initialisation du système…</p>
<div class="loading-bar">
<div class="loading-fill"></div>
</div>
<p class="pai-small">Veuillez patienter… l’analyse peut prendre plusieurs siècles.</p>
</div>
</section>
</main>
<script>
const messages = [
"Analyse du QI en cours…",
"Calcul du niveau de bon sens…",
"Mesure du taux de curiosité…",
"Scan des neurones disponibles…",
"Synchronisation avec le protocole PAI…",
"Détection de l'utilisateur…",
"Hmm… les résultats ne sont pas glorieux.",
"Erreur : cerveau introuvable. Reconnexion en cours…",
"Analyse presque terminée… enfin, peut-être.",
];
let index = 0;
setInterval(() => {
index = (index + 1) % messages.length;
document.getElementById("pai-text").textContent = messages[index];
}, 3500);
</script>
</body>
</html>

13
flask_base/templates/header.html Normal file
View File

@@ -0,0 +1,13 @@
<header>
<img src="../pinguin(1).gif" alt="Mascotte animée" class="header-gif" />
<h1>Logiciels Libres</h1>
<nav>
<ul class="menu">
<li><a href="./">Accueil </a></li>
<li><a href="./pokemon">Jeu Pokémon</a></li>
<li><a href="./PAI">PAI </a></li>
<li><a href="./questions">QCM</a></li>
<li><a href="./outils">Outils et OS</a></li>
</ul>
</nav>
</header>

54
flask_base/templates/index.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="fr">
<!-- head pour l'onglet -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction aux Logiciels Libres</title>
<link rel="stylesheet" href="../static/style.css" />
<!-- body pour la page -->
</head>
<body>
{% include 'header.html' %}
<main>
<section>
<h2>Qu’est-ce qu’un logiciel libre ?</h2>
<p>
Un <strong>logiciel libre</strong> est un logiciel dont l'utilisateur dispose de
libertés essentielles : la liberté d'utiliser le programme, de l'étudier,
de le modifier, et de le redistribuer. Ces libertés garantissent un
contrôle total de l’utilisateur sur la technologie qu’il utilise.
</p>
</section>
<section>
<h2>Et un logiciel propriétaire ?</h2>
<p>
Un <strong>logiciel propriétaire</strong> impose des restrictions : le code source
n'est pas accessible, la modification est interdite, et la distribution est
strictement contrôlée. L’utilisateur dépend entièrement de l’éditeur.
</p>
</section>
<section>
<h2>Pourquoi les logiciels libres sont importants</h2>
<p>
Les logiciels libres favorisent la transparence, l'indépendance
technologique, la durabilité et la collaboration. Ils permettent à chacun de
comprendre ce qu’un logiciel fait réellement et d’éviter les pratiques
intrusives ou injustes.
</p>
</section>
<section>
<h2>Pourquoi s'y intéresser ?</h2>
<p>
S'intéresser au logiciel libre, c’est soutenir un modèle ouvert, respectueux
des utilisateurs et bénéfique pour la collectivité. Cela encourage un
environnement numérique plus sain et plus éthique.
</p>
</section>
</main>
</body>
</html>

273
flask_base/templates/outils.html Normal file
View File

@@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="../static/style.css" />
<title>Outils Open Source vs Propriétaires</title>
</head>
<body>
{% include 'header.html' %}
<h1>Outils Open Source vs Propriétaires</h1>
<div id="tools" class="tool-container"></div>
<script>
const outilsData = {
"outils_list": [
{
"open_source_name": "VSCodium",
"open_source_website": "https://vscodium.com",
"icon_op_link": "https://raw.githubusercontent.com/linuxserver/docker-templates/master/linuxserver.io/img/vscodium-icon.png",
"description_op": "VSCodium est une version open source de Visual Studio Code, sans télémétrie. Il offre les mêmes fonctionnalités puissantes — extensions, IntelliSense, débogage — sans les composants propriétaires de Microsoft.",
"against_name": "Visual Studio Code",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png",
"description_against": "Visual Studio Code est l’éditeur de code populaire de Microsoft, offrant de nombreuses extensions, le débogage, et une intégration cloud. Il inclut des composants propriétaires et de la télémétrie par défaut."
},
{
"open_source_name": "Gogs",
"open_source_website": "https://gogs.io",
"icon_op_link": "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/gogs.png",
"description_op": "Gogs est un service Git auto-hébergé léger, écrit en Go. Il est extrêmement rapide et facile à déployer (un seul binaire) et propose une interface semblable à GitHub, avec gestion des utilisateurs, suivi des issues, wiki, webhooks et support SSH.",
"against_name": "GitHub",
"icon_against_link": "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
"description_against": "GitHub est une plateforme propriétaire hébergée dans le cloud pour les dépôts Git, offrant des outils de collaboration, de CI/CD et de gestion de projets."
},
{
"open_source_name": "Ollama",
"open_source_website": "https://ollama.com",
"icon_op_link": "https://ollama.com/public/ollama.png",
"description_op": "Ollama permet d’exécuter et de gérer des modèles de langage localement via de simples commandes. Il supporte des modèles comme LLaMA 3, Mistral, Gemma, et plus encore, avec des API pour l’intégration et la personnalisation.",
"against_name": "ChatGPT",
"icon_against_link": "https://cdn-icons-png.flaticon.com/512/11865/11865338.png",
"description_against": "ChatGPT est la plateforme d’IA conversationnelle hébergée par OpenAI, offrant des capacités avancées de raisonnement, génération de texte et d’analyse multimodale."
},
{
"open_source_name": "OpenCut",
"open_source_website": "https://github.com/OpenCut-app/OpenCut",
"icon_op_link": "https://github.com/OpenCut-app/OpenCut/blob/main/apps/web/public/logo.png?raw=true",
"description_op": "OpenCut est une alternative open source prometteuse à CapCut. Elle vise à offrir des outils d’édition vidéo avancés sans nécessité d’envoyer les fichiers dans le cloud.",
"against_name": "CapCut",
"icon_against_link": "https://static.vecteezy.com/system/resources/previews/055/030/388/non_2x/capcut-circle-icon-logo-symbol-free-png.png",
"description_against": "CapCut est un éditeur vidéo propriétaire développé par ByteDance, offrant modèles, effets et synchronisation cloud pour mobile et ordinateur."
},
{
"open_source_name": "LibreOffice",
"open_source_website": "https://www.libreoffice.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/a/a9/LibreOffice_7.5_Main_Icon.png",
"description_op": "LibreOffice est une suite bureautique open source complète comprenant Writer, Calc, Impress, Draw et plus encore. Elle supporte les standards ouverts et fonctionne entièrement hors ligne.",
"against_name": "Microsoft Office",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Microsoft_Office_logo_%282013%E2%80%932019%29.svg/1012px-Microsoft_Office_logo_%282013%E2%80%932019%29.svg.png",
"description_against": "Microsoft Office est une suite bureautique propriétaire qui propose Word, Excel, PowerPoint et Outlook, très utilisée dans le monde professionnel et éducatif."
},
{
"open_source_name": "GIMP",
"open_source_website": "https://www.gimp.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/The_GIMP_icon_-_v3.0.svg/langfr-250px-The_GIMP_icon_-_v3.0.svg.png",
"description_op": "GIMP est un logiciel open source d’édition d’images avancé, proposant calques, masques, filtres et outils de retouche adaptés à la photographie et au graphisme.",
"against_name": "Adobe Photoshop",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg",
"description_against": "Photoshop est l’éditeur d’images professionnel d’Adobe, utilisé dans la photographie, le design et la création numérique."
},
{
"open_source_name": "Kdenlive",
"open_source_website": "https://kdenlive.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Kdenlive-logo.svg/2560px-Kdenlive-logo.svg.png",
"description_op": "Kdenlive est un éditeur vidéo open source complet, offrant montage multi-pistes, effets, transitions, gestion des proxys et outils professionnels de post-production.",
"against_name": "Adobe Premiere Pro",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg",
"description_against": "Premiere Pro est le logiciel de montage vidéo professionnel d’Adobe, largement utilisé dans le cinéma, YouTube et la télévision."
},
{
"open_source_name": "Thunderbird",
"open_source_website": "https://www.thunderbird.net",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/5/53/Thunderbird_2023_icon.png",
"description_op": "Thunderbird est un client e-mail open source sécurisé, avec support des extensions, du chiffrement, du calendrier intégré, et de la gestion multi- comptes.",
"against_name": "Microsoft Outlook",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg/langfr-250px-Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg.png",
"description_against": "Outlook est le client propriétaire de Microsoft pour la gestion d’e-mails, de calendriers et de contacts, intégré à Exchange et Microsoft 365."
},
{
"open_source_name": "Nextcloud",
"open_source_website": "https://nextcloud.com",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/6/60/Nextcloud_Logo.svg",
"description_op": "Nextcloud est une plateforme cloud auto-hébergée permettant de synchroniser et partager des fichiers, d’éditer des documents en collaboration, de gérer calendriers, discussions et bien plus, tout en conservant la maîtrise totale de ses données.",
"against_name": "Google Drive",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png",
"description_against": "Google Drive est un service de stockage cloud et de collaboration intégré aux applications Google Workspace."
},
{
"open_source_name": "FreeCAD",
"open_source_website": "https://www.freecad.org",
"icon_op_link": "https://www.freecad.org/svg/logo-freecad.svg",
"description_op": "FreeCAD est une suite open source professionnelle de modélisation et d’animation 3D utilisé dans l’industrie technique",
"against_name": "SolidWorks",
"icon_against_link": "https://yt3.googleusercontent.com/ytc/AIdro_lVpceaFjQyCslqet2YAzG9jt14n103-KVOjc4D0Y1A8g=s900-c-k-c0x00ffffff-no-rj",
"description_against": "SolidWorks est un logiciel propriétaire de modélisation et d’animation 3D utilisé dans l’industrie technique"
},
{
"open_source_name": "Mozilla Firefox",
"open_source_website": "https://www.mozilla.org/firefox",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg",
"description_op": "Firefox est un navigateur web open source axé sur la confidentialité, la vitesse et la liberté de personnalisation via des extensions. Il ne collecte que le strict minimum de données.",
"against_name": "Google Chrome",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/960px-Google_Chrome_icon_%28February_2022%29.svg.png",
"description_against": "Google Chrome est un navigateur rapide et largement utilisé, mais basé sur des technologies propriétaires avec une forte intégration à l'écosystème Google."
},
{
"open_source_name": "KeePassXC",
"open_source_website": "https://keepassxc.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/KeePassXC.svg/1200px-KeePassXC.svg.png",
"description_op": "KeePassXC est un gestionnaire de mots de passe open source fonctionnant hors ligne. Il permet de stocker localement et de manière chiffrée toutes vos informations sensibles.",
"against_name": "LastPass",
"icon_against_link": "https://www.svgrepo.com/show/331461/lastpass.svg",
"description_against": "LastPass est un gestionnaire de mots de passe propriétaire basé sur le cloud, connu pour sa facilité d'utilisation mais dépendant d'un service externe."
},
{
"open_source_name": "Signal",
"open_source_website": "https://signal.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/8/8d/Signal-Logo.svg",
"description_op": "Signal est une application de messagerie open source hautement sécurisée, utilisant un chiffrement de bout en bout innovant et respectueux de la vie privée.",
"against_name": "WhatsApp",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg",
"description_against": "WhatsApp est une application de messagerie populaire appartenant à Meta, utilisant un chiffrement propriétaire et nécessitant un numéro de téléphone."
},
{
"open_source_name": "Joplin",
"open_source_website": "https://joplinapp.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Joplin-icon.svg/2048px-Joplin-icon.svg.png",
"description_op": "Joplin est une application open source de prise de notes, compatible Markdown, avec synchronisation chiffrée et plugins pour enrichir l'expérience.",
"against_name": "Evernote",
"icon_against_link": "https://store-images.s-microsoft.com/image/apps.62449.9007199266246247.d208f74f-88b2-4ca7-b524-48d06b9566b1.2f46dd6e-1c39-47e2-b771-5735ccfb3d28?h=210",
"description_against": "Evernote est un service propriétaire de notes avec synchronisation cloud, intégrations avancées et stockage centralisé."
},
{
"open_source_name": "Inkscape",
"open_source_website": "https://inkscape.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/0/0d/Inkscape_Logo.svg",
"description_op": "Inkscape est un éditeur de graphismes vectoriels open source, idéal pour la création de logos, illustrations et interfaces en SVG.",
"against_name": "Adobe Illustrator",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg",
"description_against": "Illustrator est le logiciel propriétaire d'Adobe pour les illustrations vectorielles, utilisé par les graphistes professionnels."
},
{
"open_source_name": "Audacity",
"open_source_website": "https://www.audacityteam.org",
"icon_op_link": "https://www.audacityteam.org/_astro/Audacity_Logo.DK8H7nvr.svg",
"description_op": "Audacity est un éditeur audio open source simple, idéal pour l’enregistrement, le montage ou la restauration de sons.",
"against_name": "Adobe Audition",
"icon_against_link": "https://www.adobe.com/cc-shared/assets/img/product-icons/svg/audition-64.svg",
"description_against": "Audition est l’éditeur audio professionnel d’Adobe, utilisé pour le traitement avancé et le mixage audio."
},
{
"open_source_name": "VLC Media Player",
"open_source_website": "https://www.videolan.org/vlc",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/VLC_Icon.svg/1809px-VLC_Icon.svg.png",
"description_op": "VLC est un lecteur multimédia open source capable de lire presque tous les formats audio et vidéo sans codecs supplémentaires.",
"against_name": "Windows media player",
"icon_against_link": "https://img.icons8.com/fluent/1200/windows-media-player.jpg",
"description_against": "Windows media player est le lecteur multimédia propriétaire de Microsoft, sur l’écosystème Windows."
},
{
"open_source_name": "Stalwart Mail",
"open_source_website": "https://stalw.art/",
"icon_op_link": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4wbcGzFHbo7Gc3UIJpMEIqz_92tG2O1NizA&s",
"description_op": "Stalwart Mail est un serveur mail open source (compliquer à setup il faut trouver un pote motivé)",
"against_name": "Gmail",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/4/4e/Gmail_Icon.png",
"description_against": "Gmail est le service de messagerie propriétaire de Google, riche en fonctionnalités mais basé sur l’analyse de données cloud."
},
{
"open_source_name": "Etherpad",
"open_source_website": "https://etherpad.org",
"icon_op_link": "https://pbs.twimg.com/profile_images/1336377123964145665/2gTadaDt_400x400.jpg",
"description_op": "Etherpad est un éditeur de texte collaboratif open source permettant l’écriture en temps réel, idéal pour les équipes et l’enseignement.",
"against_name": "Google Docs",
"icon_against_link": "https://cdn-icons-png.flaticon.com/512/5968/5968517.png",
"description_against": "Google Docs est un éditeur de documents collaboratif propriétaire basé sur le cloud Google Workspace."
},
{
"open_source_name": "Arch Linux",
"open_source_website": "https://archlinux.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Arch_Linux_%22Crystal%22_icon.svg/2048px-Arch_Linux_%22Crystal%22_icon.svg.png",
"description_op": "Arch Linux est une distribution légère et flexible basée sur le principe KISS. Elle utilise pacman, propose un dépôt AUR très riche, et permet une personnalisation complète du système.",
"against_name": "Windows 11",
"icon_against_link": "https://www.citypng.com/public/uploads/preview/hd-windows-11-logo-icon-transparent-background-701751694967888zqtluh5aaw.png?v=2025082902",
"description_against": "Windows 11 est un système d’exploitation propriétaire conçu pour la simplicité d’utilisation, mais avec moins de contrôle et de personnalisation que les distributions Linux."
},
{
"open_source_name": "Debian",
"open_source_website": "https://www.debian.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/6/66/Openlogo-debianV2.svg",
"description_op": "Debian est l’une des distributions Linux les plus stables et respectées, utilisée comme base pour de nombreuses autres distributions comme Ubuntu. Elle se distingue par sa fiabilité et son énorme dépôt de paquets.",
"against_name": "Red Hat Enterprise Linux",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/d/d8/Red_Hat_logo.svg",
"description_against": "RHEL est une distribution Linux commerciale orientée entreprise, proposant un support professionnel mais non totalement libre."
},
{
"open_source_name": "Ubuntu",
"open_source_website": "https://ubuntu.com",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/9/9e/UbuntuCoF.svg",
"description_op": "Ubuntu est une distribution Linux populaire et accessible, dérivée de Debian. Elle offre un environnement convivial, un large support matériel et une grande communauté.",
"against_name": "macOS",
"icon_against_link": "https://img.icons8.com/color/512/mac-logo.png",
"description_against": "macOS est le système d’exploitation propriétaire d’Apple, connu pour son écosystème fermé et son intégration matérielle."
},
{
"open_source_name": "Xubuntu",
"open_source_website": "https://xubuntu.org",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Xubuntu_logo.svg/2048px-Xubuntu_logo.svg.png",
"description_op": "Xubuntu est une variante officielle d’Ubuntu utilisant l’environnement XFCE, optimisé pour être léger, rapide et adapté aux machines plus modestes.",
"against_name": "ChromeOS",
"icon_against_link": "https://www.computerhope.com/jargon/c/chrome-os.png",
"description_against": "ChromeOS est un système propriétaire centré sur les applications web et fortement dépendant des services cloud Google."
},
{
"open_source_name": "Fedora Linux",
"open_source_website": "https://www.fedoraproject.org/fr/",
"icon_op_link": "https://upload.wikimedia.org/wikipedia/commons/3/3f/Fedora_logo.svg",
"description_op": "Fedora est une distribution moderne sponsorisée par Red Hat, connue pour proposer des technologies récentes, GNOME par défaut et un excellent support pour les développeurs.",
"against_name": "Windows 10",
"icon_against_link": "https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Windows_logo_-_2012_%28dark_blue%29.svg/480px-Windows_logo_-_2012_%28dark_blue%29.svg.png",
"description_against": "Windows 10 est un système d’exploitation propriétaire largement utilisé mais avec moins de contrôle utilisateur et une politique de télémétrie intrusive."
},
{
"open_source_name": "FreeBSD",
"open_source_website": "https://www.freebsd.org",
"icon_op_link": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmY91-6uwU9TqcQlc4EQLW4cfAUAm5_efRqg&s",
"description_op": "FreeBSD est un système d’exploitation libre de type Unix, réputé pour sa stabilité, ses performances réseau et sa sécurité. Il est très utilisé dans les serveurs, le stockage et les infrastructures critiques.",
"against_name": "Windows Server",
"icon_against_link": "https://e7.pngegg.com/pngimages/534/305/png-clipart-windows-server-2012-logo-organization-brand-logo-windows-7-blue-angle-thumbnail.png",
"description_against": "Windows Server est un système d’exploitation propriétaire orienté entreprise, proposant des outils d’administration graphiques et un écosystème fermé."
}
]
};
const container = document.getElementById('tools');
outilsData.outils_list.forEach(tool => {
// Skip empty entries
if (!tool.open_source_name && !tool.against_name) return;
const card = document.createElement('div');
card.classList.add('tool-card');
card.innerHTML = `
<div class="tool-row">
<img src="${tool.icon_op_link}" alt="${tool.open_source_name} logo" />
<div class="tool-name">${tool.open_source_name}</div>
</div>
<div class="description">${tool.description_op || 'Aucune description disponible.'}</div>
<div class="vs">VS</div>
<div class="tool-row">
<img src="${tool.icon_against_link}" alt="${tool.against_name} logo" />
<div class="tool-name">${tool.against_name}</div>
</div>
<div class="description">${tool.description_against || 'Aucune description disponible.'}</div>
`;
container.appendChild(card);
});
</script>
</body>
</html>

402
flask_base/templates/pokemon.html Normal file
View File

@@ -0,0 +1,402 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu Pokémon</title>
<link rel="stylesheet" href="../static/style.css">
</head>
<body>
{% include 'header.html' %}
<div class="battle">
<h2>Combat Pokémon-like (simple)</h2>
<div class="row">
<div id = "scoreDiv">Score: 0</div>
<div class="monster" id="enemy">
<div class="enemy-img-container">
<img id="enemyImg" src="ennemi.png" alt="Ennemi">
</div>
<span id="ennemyName">Ennemi</span><br>
<span id="enemyHp">HP: 30</span>
<span id="enemyInfo" class="tooltip" data-tooltip="">?</span>
</div>
<div class="monster" id="player">Joueur<br><span id="playerHp">HP: 30</span></div>
</div>
<div id="attacksDiv"></div>
<button id="runBtn">Fuir</button>
<div id="log">Un ennemi sauvage apparaît !</div>
</div>
<script>
const outils_list = [
{
open_source_name: "VSCodium",
open_source_website: "https://vscodium.com",
icon_op_link: "https://raw.githubusercontent.com/linuxserver/docker-templates/master/linuxserver.io/img/vscodium-icon.png",
description_op: "VSCodium est une version open source de Visual Studio Code, sans télémétrie. Il offre les mêmes fonctionnalités puissantes — extensions, IntelliSense, débogage — sans les composants propriétaires de Microsoft.",
against_name: "Visual Studio Code",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Visual_Studio_Code_1.35_icon.svg/2048px-Visual_Studio_Code_1.35_icon.svg.png",
description_against: "Visual Studio Code est l’éditeur de code populaire de Microsoft, offrant de nombreuses extensions, le débogage, et une intégration cloud. Il inclut des composants propriétaires et de la télémétrie par défaut."
},
{
open_source_name: "Gogs",
open_source_website: "https://gogs.io",
icon_op_link: "https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/gogs.png",
description_op: "Gogs est un service Git auto-hébergé léger, écrit en Go. Il est extrêmement rapide et facile à déployer (un seul binaire) et propose une interface semblable à GitHub, avec gestion des utilisateurs, suivi des issues, wiki, webhooks et support SSH.",
against_name: "GitHub",
icon_against_link: "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png",
description_against: "GitHub est une plateforme propriétaire hébergée dans le cloud pour les dépôts Git, offrant des outils de collaboration, de CI/CD et de gestion de projets."
},
{
open_source_name: "Ollama",
open_source_website: "https://ollama.com",
icon_op_link: "https://ollama.com/public/ollama.png",
description_op: "Ollama permet d’exécuter et de gérer des modèles de langage localement via de simples commandes. Il supporte des modèles comme LLaMA 3, Mistral, Gemma, et plus encore, avec des API pour l’intégration et la personnalisation.",
against_name: "ChatGPT",
icon_against_link: "https://cdn-icons-png.flaticon.com/512/11865/11865338.png",
description_against: "ChatGPT est la plateforme d’IA conversationnelle hébergée par OpenAI, offrant des capacités avancées de raisonnement, génération de texte et d’analyse multimodale."
},
{
open_source_name: "OpenCut",
open_source_website: "https://github.com/OpenCut-app/OpenCut",
icon_op_link: "https://github.com/OpenCut-app/OpenCut/blob/main/apps/web/public/logo.png?raw=true",
description_op: "OpenCut est une alternative open source prometteuse à CapCut. Elle vise à offrir des outils d’édition vidéo avancés sans nécessité d’envoyer les fichiers dans le cloud.",
against_name: "CapCut",
icon_against_link: "https://static.vecteezy.com/system/resources/previews/055/030/388/non_2x/capcut-circle-icon-logo-symbol-free-png.png",
description_against: "CapCut est un éditeur vidéo propriétaire développé par ByteDance, offrant modèles, effets et synchronisation cloud pour mobile et ordinateur."
},
{
open_source_name: "LibreOffice",
open_source_website: "https://www.libreoffice.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a9/LibreOffice_7.5_Main_Icon.png",
description_op: "LibreOffice est une suite bureautique open source complète comprenant Writer, Calc, Impress, Draw et plus encore. Elle supporte les standards ouverts et fonctionne entièrement hors ligne.",
against_name: "Microsoft Office",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Microsoft_Office_logo_%282013%E2%80%932019%29.svg/1012px-Microsoft_Office_logo_%282013%E2%80%932019%29.svg.png",
description_against: "Microsoft Office est une suite bureautique propriétaire qui propose Word, Excel, PowerPoint et Outlook, très utilisée dans le monde professionnel et éducatif."
},
{
open_source_name: "GIMP",
open_source_website: "https://www.gimp.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/The_GIMP_icon_-_v3.0.svg/langfr-250px-The_GIMP_icon_-_v3.0.svg.png",
description_op: "GIMP est un logiciel open source d’édition d’images avancé, proposant calques, masques, filtres et outils de retouche adaptés à la photographie et au graphisme.",
against_name: "Adobe Photoshop",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg",
description_against: "Photoshop est l’éditeur d’images professionnel d’Adobe, utilisé dans la photographie, le design et la création numérique."
},
{
open_source_name: "Kdenlive",
open_source_website: "https://kdenlive.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Kdenlive-logo.svg/2560px-Kdenlive-logo.svg.png",
description_op: "Kdenlive est un éditeur vidéo open source complet, offrant montage multi-pistes, effets, transitions, gestion des proxys et outils professionnels de post-production.",
against_name: "Adobe Premiere Pro",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/40/Adobe_Premiere_Pro_CC_icon.svg",
description_against: "Premiere Pro est le logiciel de montage vidéo professionnel d’Adobe, largement utilisé dans le cinéma, YouTube et la télévision."
},
{
open_source_name: "Thunderbird",
open_source_website: "https://www.thunderbird.net",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/5/53/Thunderbird_2023_icon.png",
description_op: "Thunderbird est un client e-mail open source sécurisé, avec support des extensions, du chiffrement, du calendrier intégré, et de la gestion multi- comptes.",
against_name: "Microsoft Outlook",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg/langfr-250px-Microsoft_Outlook_Icon_%282025%E2%80%93present%29.svg.png",
description_against: "Outlook est le client propriétaire de Microsoft pour la gestion d’e-mails, de calendriers et de contacts, intégré à Exchange et Microsoft 365."
},
{
open_source_name: "Nextcloud",
open_source_website: "https://nextcloud.com",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/6/60/Nextcloud_Logo.svg",
description_op: "Nextcloud est une plateforme cloud auto-hébergée permettant de synchroniser et partager des fichiers, d’éditer des documents en collaboration, de gérer calendriers, discussions et bien plus, tout en conservant la maîtrise totale de ses données.",
against_name: "Google Drive",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png",
description_against: "Google Drive est un service de stockage cloud et de collaboration intégré aux applications Google Workspace."
},
{
open_source_name: "FreeCAD",
open_source_website: "https://www.freecad.org",
icon_op_link: "https://www.freecad.org/svg/logo-freecad.svg",
description_op: "FreeCAD est une suite open source professionnelle de modélisation et d’animation 3D utilisé dans l’industrie technique",
against_name: "SolidWorks",
icon_against_link: "https://yt3.googleusercontent.com/ytc/AIdro_lVpceaFjQyCslqet2YAzG9jt14n103-KVOjc4D0Y1A8g=s900-c-k-c0x00ffffff-no-rj",
description_against: "SolidWorks est un logiciel propriétaire de modélisation et d’animation 3D utilisé dans l’industrie technique"
},
{
open_source_name: "Mozilla Firefox",
open_source_website: "https://www.mozilla.org/firefox",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg",
description_op: "Firefox est un navigateur web open source axé sur la confidentialité, la vitesse et la liberté de personnalisation via des extensions. Il ne collecte que le strict minimum de données.",
against_name: "Google Chrome",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Google_Chrome_icon_%28February_2022%29.svg/960px-Google_Chrome_icon_%28February_2022%29.svg.png",
description_against: "Google Chrome est un navigateur rapide et largement utilisé, mais basé sur des technologies propriétaires avec une forte intégration à l'écosystème Google."
},
{
open_source_name: "KeePassXC",
open_source_website: "https://keepassxc.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/KeePassXC.svg/1200px-KeePassXC.svg.png",
description_op: "KeePassXC est un gestionnaire de mots de passe open source fonctionnant hors ligne. Il permet de stocker localement et de manière chiffrée toutes vos informations sensibles.",
against_name: "LastPass",
icon_against_link: "https://www.svgrepo.com/show/331461/lastpass.svg",
description_against: "LastPass est un gestionnaire de mots de passe propriétaire basé sur le cloud, connu pour sa facilité d'utilisation mais dépendant d'un service externe."
},
{
open_source_name: "Signal",
open_source_website: "https://signal.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/8/8d/Signal-Logo.svg",
description_op: "Signal est une application de messagerie open source hautement sécurisée, utilisant un chiffrement de bout en bout innovant et respectueux de la vie privée.",
against_name: "WhatsApp",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg",
description_against: "WhatsApp est une application de messagerie populaire appartenant à Meta, utilisant un chiffrement propriétaire et nécessitant un numéro de téléphone."
},
{
open_source_name: "Joplin",
open_source_website: "https://joplinapp.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Joplin-icon.svg/2048px-Joplin-icon.svg.png",
description_op: "Joplin est une application open source de prise de notes, compatible Markdown, avec synchronisation chiffrée et plugins pour enrichir l'expérience.",
against_name: "Evernote",
icon_against_link: "https://store-images.s-microsoft.com/image/apps.62449.9007199266246247.d208f74f-88b2-4ca7-b524-48d06b9566b1.2f46dd6e-1c39-47e2-b771-5735ccfb3d28?h=210",
description_against: "Evernote est un service propriétaire de notes avec synchronisation cloud, intégrations avancées et stockage centralisé."
},
{
open_source_name: "Inkscape",
open_source_website: "https://inkscape.org",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/0/0d/Inkscape_Logo.svg",
description_op: "Inkscape est un éditeur de graphismes vectoriels open source, idéal pour la création de logos, illustrations et interfaces en SVG.",
against_name: "Adobe Illustrator",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/f/fb/Adobe_Illustrator_CC_icon.svg",
description_against: "Illustrator est le logiciel propriétaire d'Adobe pour les illustrations vectorielles, utilisé par les graphistes professionnels."
},
{
open_source_name: "Audacity",
open_source_website: "https://www.audacityteam.org",
icon_op_link: "https://www.audacityteam.org/_astro/Audacity_Logo.DK8H7nvr.svg",
description_op: "Audacity est un éditeur audio open source simple, idéal pour l’enregistrement, le montage ou la restauration de sons.",
against_name: "Adobe Audition",
icon_against_link: "https://www.adobe.com/cc-shared/assets/img/product-icons/svg/audition-64.svg",
description_against: "Audition est l’éditeur audio professionnel d’Adobe, utilisé pour le traitement avancé et le mixage audio."
},
{
open_source_name: "VLC Media Player",
open_source_website: "https://www.videolan.org/vlc",
icon_op_link: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/VLC_Icon.svg/1809px-VLC_Icon.svg.png",
description_op: "VLC est un lecteur multimédia open source capable de lire presque tous les formats audio et vidéo sans codecs supplémentaires.",
against_name: "Windows media player",
icon_against_link: "https://img.icons8.com/fluent/1200/windows-media-player.jpg",
description_against: "Windows media player est le lecteur multimédia propriétaire de Microsoft, sur l’écosystème Windows."
},
{
open_source_name: "Stalwart Mail",
open_source_website: "https://stalw.art/",
icon_op_link: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4wbcGzFHbo7Gc3UIJpMEIqz_92tG2O1NizA&s",
description_op: "Stalwart Mail est un serveur mail open source (compliquer à setup il faut trouver un pote motivé)",
against_name: "Gmail",
icon_against_link: "https://upload.wikimedia.org/wikipedia/commons/4/4e/Gmail_Icon.png",
description_against: "Gmail est le service de messagerie propriétaire de Google, riche en fonctionnalités mais basé sur l’analyse de données cloud."
},
{
open_source_name: "Etherpad",
open_source_website: "https://etherpad.org",
icon_op_link: "https://pbs.twimg.com/profile_images/1336377123964145665/2gTadaDt_400x400.jpg",
description_op: "Etherpad est un éditeur de texte collaboratif open source permettant l’écriture en temps réel, idéal pour les équipes et l’enseignement.",
against_name: "Google Docs",
icon_against_link: "https://cdn-icons-png.flaticon.com/512/5968/5968517.png",
description_against: "Google Docs est un éditeur de documents collaboratif propriétaire basé sur le cloud Google Workspace."
},
{
open_source_name: "Linux",
open_source_website: "https://archlinux.org",
icon_op_link: "https://cdn.iconscout.com/icon/free/png-512/free-linux-logo-icon-svg-download-png-2944967.png?f=webp&w=256",
description_op: "Linux est un système d’exploitation libre et open source, offrant un contrôle complet à l’utilisateur. Il se décline en centaines de distributions adaptées à tous les usages : serveurs, desktop, sécurité, éducation ou machines légères. Linux est réputé pour sa stabilité, sa sécurité, ses performances et son haut niveau de personnalisation. Il respecte la vie privée, ne contient pas de télémétrie imposée et peut être modifié, redistribué ou étendu librement grâce à sa communauté active.",
against_name: "Windows",
icon_against_link: "https://www.citypng.com/public/uploads/preview/hd-windows-11-logo-icon-transparent-background-701751694967888zqtluh5aaw.png?v=2025082902",
description_against: "Windows 11 est un système d’exploitation propriétaire conçu pour la simplicité d’utilisation, mais avec moins de contrôle et de personnalisation que les distributions Linux."
}
];
function getAgainstNames(itemName) {
const item = outils_list.find(i => i.open_source_name === itemName);
return item ? item.against_name : null;
}
console.log(outils_list);
let playerHp = 30;
let enemyHp = 30;
let score = 0;
const max = outils_list.length;
const log = document.getElementById("log");
const ennemyName = document.getElementById("ennemyName");
const playerHpBox = document.getElementById("playerHp");
const enemyHpBox = document.getElementById("enemyHp");
playerInv = [];
addRandomItemToInventory();
addRandomItemToInventory();
function addRandomItemToInventory() { // Add a NEW random item to player's inventory.
let nbItems = playerInv.length;
if(nbItems < max)
{
let newItem;
let found = false;
while(!found){
let randIndex = Math.floor(Math.random()*max);
newItem = outils_list[randIndex];
found = true;
for(let i=0; i<nbItems; i++){
if(playerInv[i].name == newItem.open_source_name){
found = false; // already have this item
break;
}
}
}
playerInv.push({name: newItem.open_source_name});
addLog(`Vous avez obtenu un nouvel outil open source : **${newItem.open_source_name}** !`);
}
}
function updateUI() {
playerHpBox.textContent = "HP: " + Math.max(0, playerHp);
enemyHpBox.textContent = "HP: " + Math.max(0, enemyHp);
document.getElementById("scoreDiv").textContent = "Score: " + score;
}
function addLog(text) {
log.textContent = log.textContent + '\n' + text;
}
const attacksDiv = document.getElementById("attacksDiv");
function setCombat(){
playerHp = 30;
enemyHp = 30;
updateUI();
ennemyNumber = Math.floor(Math.random()*max);
//il faut que l'ennemi soit dans le against d'un des items du joueur
let found = false;
while(!found){
ennemyNumber = Math.floor(Math.random()*max);
for(let i=0; i<playerInv.length; i++){
if(getAgainstNames(playerInv[i].name) == outils_list[ennemyNumber].against_name){
found = true;
break;
}
}
}
ennemyName.textContent = outils_list[ennemyNumber].against_name;
document.getElementById("enemyInfo").setAttribute("data-tooltip", outils_list[ennemyNumber].description_against);
document.getElementById("enemyImg").src = outils_list[ennemyNumber].icon_against_link;
createAttackButtons();
}
function playerAttack(index) {
const atk = playerInv[index];
if(getAgainstNames(atk.name) == ennemyName.textContent){
var dmg = enemyHp; // instant win
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nC'est super efficace !`);
} else {
var dmg = Math.floor(Math.random() * 5) + 2; // 2-6
addLog(`Vous utilisez **${atk.name}** et infligez ${dmg} dégâts !\nMais ce n'est pas très efficace...`);
playerHp -= 5; // dommage punitif
addLog(`Le fait d'avoir utilisé ${atk.name} contre ${ennemyName.textContent} vous blesse de 5 dégâts en retour !`);
}
enemyHp -= dmg;
updateUI();
if (enemyHp <= 0) {
addLog(`${ennemyName.textContent} est vaincu !`);
addRandomItemToInventory();
score += 1;
setCombat();
addLog("Un nouvel ennemi sauvage apparaît !\n");
return;
}
// Riposte
setTimeout(() => {
const edmg = Math.floor(Math.random() * 6) + 3;
playerHp -= edmg;
addLog(
`Vous utilisez ${atk.name} et infligez ${dmg} dégâts !\n` +
`${ennemyName.textContent} riposte et inflige ${edmg} dégâts !`
);
updateUI();
if (playerHp <= 0) {
addLog("Vous êtes K.O.");
addLog(`Score final : ${score} ennemis vaincus.`);
attacksDiv.innerHTML = ""; // Remove attack buttons
}
}, 500);
}
function createAttackButtons() {
attacksDiv.innerHTML = "";
playerInv.forEach((atk, index) => {
const btn = document.createElement("button");
btn.onclick = () => playerAttack(index);
const data = outils_list.find(x => x.open_source_name === atk.name);
// Conteneur icône
const iconContainer = document.createElement("div");
iconContainer.className = "attack-icon-container";
const iconImg = document.createElement("img");
iconImg.src = data.icon_op_link;
iconImg.alt = data.open_source_name;
iconContainer.appendChild(iconImg);
btn.appendChild(iconContainer); // mettre l'icône avant le texte
// Texte du bouton
const textNode = document.createTextNode(atk.name + " "); // espace avant le "?"
btn.appendChild(textNode);
// Tooltip
const info = document.createElement("span");
info.className = "tooltip";
info.setAttribute("data-tooltip", data ? data.description_op : "Aucune description");
info.textContent = "?";
btn.appendChild(info);
attacksDiv.appendChild(btn);
});
}
document.getElementById("runBtn").onclick = () => {
if (Math.random() < 0.5) {
addLog("Vous prenez la fuite avec succès !");
} else {
addLog("La fuite échoue ! L'ennemi attaque !");
const dmg = Math.floor(Math.random() * 6) + 2; // 2-7
playerHp -= dmg;
updateUI();
addLog(`La fuite échoue ! L'ennemi inflige ${dmg} dégâts !`);
}
};
setCombat();
</script>
</body>
</html>

1
flask_base/templates/qcm.html Normal file
View File

@@ -0,0 +1 @@

3
flask_base/templates/quiz.html
View File

@@ -2,11 +2,12 @@
<html>
<head>
<title>Nuit de l'info quiz</title>
<link href="/static/quiz.css" rel="stylesheet">
<link rel="stylesheet" href="../static/style.css">
<link href="/static/logo_n2i_color_moon.svg" rel="icon">
<script src="static/quizz.js"></script>
</head>
<body>
{% include 'header.html' %}
<a href="test.html"><img class="logo" src="static/logo_n2i_color_moon.svg"></a>
<h1 id="txt">page du quiz</h1>
<button id="strt" onclick="startQuiz({{questions.nbQuestion}})">Start Quiz!</button>