avancé front site inclusion du json
This commit is contained in:
Yoan Guerin
@@ -10,13 +10,15 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Introduction aux Logiciels Libres</h1>
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
||||||
|
<h1>Logiciels Libres</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<li><a href="./index.html">Accueil </a></li>
|
<li><a href="./index.html">Accueil </a></li>
|
||||||
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
||||||
<li><a href="./partenaires.html">Partenaires</a></li>
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
||||||
<li><a href="./qcm.html">QCM</a></li>
|
<li><a href="./qcm.html">QCM</a></li>
|
||||||
|
<li><a href="./outils.html">Outils et OS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
285
html/outils.html
Normal file
285
html/outils.html
Normal file
@@ -0,0 +1,285 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="stylesheet" href="../style.css" />
|
||||||
|
<title>Outils Open Source vs Propriétaires</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
||||||
|
<h1>Outils et OS</h1>
|
||||||
|
<nav>
|
||||||
|
<ul class="menu">
|
||||||
|
<li><a href="./index.html">Accueil </a></li>
|
||||||
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
||||||
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
||||||
|
<li><a href="./qcm.html">QCM</a></li>
|
||||||
|
<li><a href="./outils.html">Outils et OS</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<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>
|
||||||
@@ -9,6 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
||||||
<h1>Partenaires </h1>
|
<h1>Partenaires </h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
@@ -16,6 +17,7 @@
|
|||||||
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
||||||
<li><a href="./partenaires.html">Partenaires</a></li>
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
||||||
<li><a href="./qcm.html">QCM</a></li>
|
<li><a href="./qcm.html">QCM</a></li>
|
||||||
|
<li><a href="./outils.html">Outils et OS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
||||||
<h1>Jeu Pokémon</h1>
|
<h1>Jeu Pokémon</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
@@ -16,6 +17,7 @@
|
|||||||
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
||||||
<li><a href="./partenaires.html">Partenaires</a></li>
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
||||||
<li><a href="./qcm.html">QCM</a></li>
|
<li><a href="./qcm.html">QCM</a></li>
|
||||||
|
<li><a href="./outils.html">Outils et OS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
<img src="../pinguin.gif" alt="Mascotte animée" class="header-gif" />
|
||||||
<h1>QCM</h1>
|
<h1>QCM</h1>
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
@@ -16,6 +17,7 @@
|
|||||||
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
<li><a href="./pokemon.html">Jeu Pokémon</a></li>
|
||||||
<li><a href="./partenaires.html">Partenaires</a></li>
|
<li><a href="./partenaires.html">Partenaires</a></li>
|
||||||
<li><a href="./qcm.html">QCM</a></li>
|
<li><a href="./qcm.html">QCM</a></li>
|
||||||
|
<li><a href="./outils.html">Outils et OS</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
BIN
pinguin.gif
Normal file
BIN
pinguin.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
169
style.css
169
style.css
@@ -1,56 +1,81 @@
|
|||||||
/* Style simple et épuré pour le site d'introduction aux logiciels libres */
|
/* Style simple et épuré pour le site d'introduction aux logiciels libres */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
background: #000;
|
||||||
padding: 0;
|
color: #00ff88;
|
||||||
font-family: system-ui, sans-serif;
|
font-family: "Courier New", monospace;
|
||||||
line-height: 1.6;
|
margin: 2rem;
|
||||||
background: #f5f5f5;
|
line-height: 1.5;
|
||||||
color: #222;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: #2c7a7b;
|
display: grid;
|
||||||
color: white;
|
grid-template-columns: auto 1fr auto;
|
||||||
padding: 1.5rem;
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
background: #001a0f;
|
||||||
|
border-bottom: 2px solid #00ff88;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
color: #00ffcc;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.header-gif {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border: 1px solid #00ff88;
|
||||||
|
box-shadow: 0 0 10px #00ff88;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
padding : 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
|
||||||
background: white;
|
|
||||||
padding: 1.2rem 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2 {
|
h1, h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
/* augmenter la taille et améliorer contraste */
|
||||||
|
color: #00ffcc; /* couleur plus claire que #2c7a7b */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: #2c7a7b;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Barre du menu séparée du titre */
|
|
||||||
nav {
|
nav {
|
||||||
background: #256f70; /* Une nuance légèrement plus sombre */
|
background: #256f70;
|
||||||
padding: 0.6rem 0; /* Espacement vertical */
|
padding: 0.6rem 0;
|
||||||
margin-top: 1rem; /* Séparation avec le titre */
|
margin-top: 1rem;
|
||||||
border-radius: 6px; /* Légère forme arrondie */
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Menu horizontal */
|
|
||||||
.menu {
|
.menu {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -61,10 +86,104 @@ nav {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
outline-offset: 2px; /* pour focus */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus visible pour clavier */
|
||||||
|
.menu a:focus {
|
||||||
|
outline: 3px solid #00ff88;
|
||||||
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu a:hover {
|
.menu a:hover {
|
||||||
opacity: 0.65;
|
opacity: 0.8; /* plus visible au hover */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu li {
|
||||||
|
border: 2px smooth #00ff88; /* bordure verte */
|
||||||
|
padding: 0.5rem 1rem; /* espace intérieur */
|
||||||
|
border-radius: 6px; /* coins arrondis */
|
||||||
|
background-color: rgba(0, 255, 136, 0.1); /* fond semi-transparent */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li:hover {
|
||||||
|
background-color: #00ff88; /* fond vert clair au hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li a {
|
||||||
|
color: #000; /* texte noir pour contraste sur fond clair */
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
display: block; /* pour que le lien prenne toute la "case" */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styles pour la page "Outils Open Source vs Propriétaires" */
|
||||||
|
|
||||||
|
.tool-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card {
|
||||||
|
background: rgba(0, 255, 136, 0.1);
|
||||||
|
border: 1px solid #00ff88;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 320px;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
box-shadow: 0 0 8px #00ff88;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Respecter la préférence "réduire le mouvement" */
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.tool-card {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-card:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 20px #00ff88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-row img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: contain;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #000;
|
||||||
|
box-shadow: 0 0 8px #00ff88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.3rem; /* un peu plus grand */
|
||||||
|
color: #00ffcc; /* couleur plus claire */
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 1rem; /* plus lisible */
|
||||||
|
color: #00ff88;
|
||||||
|
min-height: 60px;
|
||||||
|
line-height: 1.4; /* interligne */
|
||||||
|
}
|
||||||
|
|
||||||
|
.vs {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #00ff88;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user