logo

ChooseYourDistro

Unnamed repository; edit this file 'description' to name the repository.
commit: ad806e0c7f68341da80d978e6720a489d2c0e1c8
parent: e242c49923d2155742f5aa6a9168a3595c726981
Author: Monsieur Tino <mrtino@users.noreply.github.com>
Date:   Fri, 16 Dec 2016 08:46:06 +0100

Ajout du code de base

Vous devrez faire `bower install jquery bootstrap` pour pouvoir afficher la page correctement

Diffstat:

index.html | 82+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
questions.js | 28++++++++++++++++++++++++++++
questions.txt | 25+++++++++++++++++++++++++
results.js | 293+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
style.css | 44++++++++++++++++++++++++++++++++++++++++++++
5 files changed, 472 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> + <head> + <title>Choisis ton GNU</title> + <meta charset="utf-8"> + <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> + <link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> + <link href="style.css" rel="stylesheet"> + <meta name="viewport" content="width=450, maximum-scale=1.0, user-scalable=no, minimal-ui" /> + <meta name="twitter:card" content="summary" /> + <meta name="twitter:site" content="@monsieurtino" /> + <meta name="twitter:title" content="Choisis ton GNU" /> + <meta name="twitter:description" content="Réponds aux questions et découvre quelle distribution GNU/Linux te correspond le plus !" /> + <meta name="twitter:image" content="https://controle-tes-donnees.net/wp-content/uploads/sites/3/2016/04/GNU-Linux_logo.png" /> + </head> + <body> + <div class="jumbotron"> + <h1>Choisis ton GNU</h1> + <p>Ce site propose une distribution <a href="https://fr.wikipedia.org/wiki/Distribution_Linux">GNU/Linux</a> qui correspond à tes critères. <br/> Réponds aux questions et laisse la magie opérer !</p> + </div> + + <div id="infosi"> + <h2>L'informatique, ça peut aller ou c'est une horreur ?</h2> + <br/> + <button type="button" id="btn-infosis" class="btn btn-infosi btn-infosis btn-lg btn-success">Ça passe oui</button> <!-- btn-infosis correspond au bouton vert, success. btn-infosid correspond au bouton rouge, danger. Il en va autant pour les autres boutons. --> + <button type="button" id="btn-infosid" class="btn btn-infosi btn-infosid btn-lg btn-danger">C'est affreux</button> + </div> + + <div id="ootb"> + <h2>Tout doit fonctionner « out of the box » (rien à faire, c'est le système qui gère) ou c'est bien de tout configurer soi-même ?</h2> + <br/> + <button type="button" id="btn-ootbs" class="btn btn-ootb btn-ootbs btn-lg btn-success">Je veux pas me prendre la tête</button> + <button type="button" id="btn-ootbd" class="btn btn-ootb btn-ootbd btn-lg btn-danger">J'aime faire ma propre sauce</button> + </div> + + <div id="old"> + <h2>C'est pour un ordi récent ou non ?</h2> + <br/> + <button type="button" id="btn-olds" class="btn btn-old btn-olds btn-lg btn-success">Récent (2011+)</button> + <button type="button" id="btn-oldd" class="btn btn-old btn-oldd btn-lg btn-danger">Ancien (-2011)</button> + </div> + + <div id="rolling"> + <h2>Les logiciels devraient être mis à jour dès que possible (rolling release, pas de garantie de stabilité) ou quand la mise à jour est stable ?</h2> + <button type="button" id="btn-rollings" class="btn btn-rolling btn-rollings btn-lg btn-success">Rolling Release</button> + <button type="button" id="btn-rollingd" class="btn btn-rolling btn-rollingd btn-lg btn-danger">Stable</button> + </div> + + <div id="inssi"> + <h2>L'installation doit être simple ou c'est pas grave ?</h2> + <button type="button" id="btn-inssis" class="btn btn-inssi btn-inssis btn-lg btn-success">Je veux que tout soit simple</button> + <button type="button" id="btn-inssid" class="btn btn-inssi btn-inssid btn-lg btn-danger">J'aime les lignes de commandes</button> + </div> + + <div id="Result"> + <h2>La distribution qui correspond le plus à tes critères est <span id="results"></span>.</h2> + <p>Télécharge <span id="resultat"></span> <a href="" id="lien">ici</a>.</p> + <p>(Et si <span id="mwa"></span> ne te plaît pas, il y a aussi <span id="moui"></span> dans la liste)</p> + <p>Et n'oublie pas d'activer le chiffrement de tes fichiers, on sait jamais par les temps qui courent…</p> + <p id="archdisk">Dans le cas d'Arch Linux, voici une page du <a href="https://wiki.archlinux.org/index.php/Disk_encryption">wiki</a> à ce sujet.</p> + <p id="gendisk">Ubuntu et les autres distributions générales proposent lors de l'installation soit de chiffrer le disque dur entier, soit le dossier personnel. À toi de voir.</p> + </div> + + + + <br/> + <div id="Restart"> + <button type="button" id="btn-restart" class="btn btn-restart btn-lg">Recommencer ?</button> + </div> + + <br/> + + <footer> + <p><em>Choisis ton GNU</em> est réalisé par <a href="https://mrtino.eu">Monsieur Tino</a>. <br/> Les résultats proposés par ce site ne sont pas exhaustifs, le choix est subjectif (comme tout dans ce monde). Pour une liste plus complète, voir <a href="http://distrowatch.com">DistroWatch</a>. <br/><em>Choisis ton GNU</em> est sous licence MIT, les sources sont disponibles <a href="https://github.com/mrtino/ChooseYourDistro">ici</a>.<br/>Si ce site te plaît et que tu veux récompenser mon dur labeur, tu peux me donner de l'argent <a href="bitcoin:1CWcdZ2yfJQvsBzYp935h16PJaSq7jLSAn">en Bitcoin</a> ou sur <a href="https://paypal.me/monsieurtino">PayPal</a> !</p> + </footer> + + + <script src="bower_components/jquery/dist/jquery.min.js"></script> + <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> + <script src="questions.js"></script> + <script src="results.js"></script> + </body> +<html> diff --git a/questions.js b/questions.js @@ -0,0 +1,28 @@ +$('.btn-infosi').click(function() { + $('#infosi').hide(); + $('#ootb').show(); +}); +$('.btn-ootb').click(function() { + $('#ootb').hide(); + $('#old').show(); +}); +$('.btn-old').click(function() { + $('#old').hide(); + $('#rolling').show(); +}); +$('.btn-rolling').click(function() { + $('#rolling').hide(); + $('#inssi').show(); +}); +$('.btn-inssi').click(function() { + $('#inssi').hide(); + $('#Result').show(); +}); +$('.btn-restart').click(function() { + $('#infosi').show(); + $('#ootb').hide(); + $('#old').hide(); + $('#rolling').hide(); + $('#inssi').hide(); + $('#Result').hide(); +}); diff --git a/questions.txt b/questions.txt @@ -0,0 +1,25 @@ +Question 1 : Tu t'y connais en informatique ? -> Non = HandyLinux/Linux Mint +Question 2 : Tout doit marcher dès le début ou la config c'est magique ? -> Config = Arch/Gentoo +Question 3 : Uniquement Steam ? -> SteamOS +Question 4 : C'est pour un ordi récent ou non ? -> Xubuntu/Lubuntu/Puppy/Chromium +Question 5 : C'est pour un enfant ? -> Sugar +Question 6 : Mises à jour quotidiennes ou de temps en temps ? -> Arch/Debian-based +Question 7 : Installation simple ou pas ? Non = Arch/Gentoo + +Après le résultat final, toujours recommander le chiffrement du disque + +Distros : + +Arch (déconseiller Manjaro) +Debian +*buntu +Linux Mint +Fedora +elementary +Zorin +Gentoo -> Sabayon +Puppy +SteamOS +HandyLinux +Chromium OS +Sugar diff --git a/results.js b/results.js @@ -0,0 +1,293 @@ +var arch = 0; + deb = 0; + chromium = 0; + fedora = 0; + handy = 0; + puppy = 0; + gentoo = 0; + sabayon = 0; + ubuntu = 0; + +var distros = []; // Un tableau qui permettra de sortir la meilleure distribution + +// Opérations sur les variables, afin de déterminer la distribution à utiliser +document.getElementById('btn-infosis').onclick = function() { // Si l'utilisateur se sent à l'aise avec l'informatique, on incrémente ces variables + arch = ++arch; + deb = ++deb; + fedora = ++fedora; + gentoo = ++gentoo; + sabayon = ++sabayon; +}; +document.getElementById('btn-infosid').onclick = function() { // Au contraire, si l'informatique est une horreur, on incrémente ces variables + chromium = ++chromium; + handy = ++handy; + puppy = ++puppy; + ubuntu = ++ubuntu; +}; +document.getElementById('btn-ootbs').onclick = function() { // Si l'utilisateur veut pas se prendre la tête, on incrémente ces variables + deb = ++deb; + fedora = ++fedora; + sabayon = ++sabayon; + ubuntu = ++ubuntu; + handy = ++handy; + chromium = ++chromium; + puppy = ++puppy; +}; +document.getElementById('btn-ootbd').onclick = function() { + arch = ++arch; + gentoo = ++gentoo; +}; +document.getElementById('btn-olds').onclick = function() { + fedora = ++fedora; + sabayon = ++sabayon; + ubuntu = ++ubuntu; + arch = ++arch; + gentoo = ++gentoo; + deb = ++deb; + handy = ++handy; + chromium = ++chromium; +}; +document.getElementById('btn-oldd').onclick = function() { + chromium = ++chromium; + handy = ++handy; + puppy = ++puppy; + deb = ++deb; + arch = ++arch; + gentoo = ++gentoo; +}; +document.getElementById('btn-rollings').onclick = function() { + chromium = ++chromium; + arch = ++arch; + gentoo = ++gentoo; + sabayon = ++sabayon; +}; +document.getElementById('btn-rollingd').onclick = function() { + handy = ++handy; + puppy = ++puppy; + deb = ++deb; + ubuntu = ++ubuntu; + fedora = ++fedora; +}; +document.getElementById('btn-inssis').onclick = function() { + ubuntu = ++ubuntu; + chromium = ++chromium; + handy = ++handy; + puppy = ++puppy; + deb = ++deb; + sabayon = ++sabayon; + fedora = ++fedora; + + // Classement des distributions + distros.push({ + distro: 'Arch Linux', + score: arch, + }); + + distros.push({ + distro: 'Gentoo', + score: gentoo + }); + + distros.push({ + distro: 'Sabayon', + score: sabayon + }); + + distros.push({ + distro: 'Fedora', + score: fedora + }); + + distros.push({ + distro: 'Debian GNU/Linux', + score: deb + }); + + distros.push({ + distro: 'HandyLinux', + score: handy + }); + + distros.push({ + distro: 'Ubuntu', + score: ubuntu + }); + + distros.push({ + distro: 'Puppy Linux', + score: puppy + }); + + distros.push({ + distro: 'Chromium OS', + score: chromium + }); + + distros.sort(function(a, b) { + return b.score - a.score; + }); + + console.log(distros.distro); + console.log(distros[0].distro); + $('#results').text(distros[0].distro); + $('#moui').text(distros[1].distro); + $('#mwa').text(distros[0].distro); + + if(distros[0].distro == 'Arch Linux') { + $("#lien").attr("href", "https://archlinux.org"), + $("#resultat").text(distros[0].distro), + $("#archdisk").show() + }; + if(distros[0].distro == 'Debian GNU/Linux') { + $("#lien").attr("href", "https://debian.org"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'Chromium OS') { + $("#lien").attr("href", "https://arnoldthebat.co.uk/wordpress/chromium-os/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Fedora') { + $("#lien").attr("href", "https://getfedora.org"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'HandyLinux') { + $("#lien").attr("href", "https://handylinux.org/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Puppy Linux') { + $("#lien").attr("href", "http://puppylinux.com/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Gentoo') { + $("#lien").attr("href", "https://gentoo.org"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Sabayon') { + $("#lien").attr("href", "https://www.sabayon.org/"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'Ubuntu') { + $("#lien").attr("href", "https://www.ubuntu.com"), + $("#resultat").text(distros[0].distro) + $("#gendisk").show() + }; +}; + +document.getElementById('btn-inssid').onclick = function() { + arch = ++arch; + gentoo = ++gentoo; + + // Classement des distributions + distros.push({ + distro: 'Arch Linux', + score: arch + }); + + distros.push({ + distro: 'Gentoo', + score: gentoo + }); + + distros.push({ + distro: 'Sabayon', + score: sabayon + }); + + distros.push({ + distro: 'Fedora', + score: fedora + }); + + distros.push({ + distro: 'Debian GNU/Linux', + score: deb + }); + + distros.push({ + distro: 'HandyLinux', + score: handy + }); + + distros.push({ + distro: 'Ubuntu', + score: ubuntu + }); + + distros.push({ + distro: 'Puppy Linux', + score: puppy + }); + + distros.push({ + distro: 'Chromium OS', + score: chromium + }); + + distros.sort(function(a, b) { + return b.score - a.score; + }); + + console.log(distros.distro); + console.log(distros[0].distro); + $('#results').text(distros[0].distro); + $('#moui').text(distros[1].distro); + $('#mwa').text(distros[0].distro); + + if(distros[0].distro == 'Arch Linux') { + $("#lien").attr("href", "https://archlinux.org"), + $("#resultat").text(distros[0].distro), + $("#archdisk").show() + }; + if(distros[0].distro == 'Debian GNU/Linux') { + $("#lien").attr("href", "https://debian.org"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'Chromium OS') { + $("#lien").attr("href", "https://arnoldthebat.co.uk/wordpress/chromium-os/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Fedora') { + $("#lien").attr("href", "https://getfedora.org"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'HandyLinux') { + $("#lien").attr("href", "https://handylinux.org/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Puppy Linux') { + $("#lien").attr("href", "http://puppylinux.com/"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Gentoo') { + $("#lien").attr("href", "https://gentoo.org"), + $("#resultat").text(distros[0].distro) + }; + if(distros[0].distro == 'Sabayon') { + $("#lien").attr("href", "https://www.sabayon.org/"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; + if(distros[0].distro == 'Ubuntu') { + $("#lien").attr("href", "https://www.ubuntu.com"), + $("#resultat").text(distros[0].distro), + $("#gendisk").show() + }; +}; + +document.getElementById('btn-restart').onclick = function() { + arch = 0; + deb = 0; + chromium = 0; + fedora = 0; + handy = 0; + puppy = 0; + gentoo = 0; + sabayon = 0; + ubuntu = 0; + distros = []; +}; diff --git a/style.css b/style.css @@ -0,0 +1,44 @@ +#ootb { + display: none; +} +#old { + display: none; +} +#rolling { + display: none; +} +#inssi { + display: none; +} +#Result { + display: none; +} +#archdisk { + display: none; +} +#gendisk { + display: none; +} +footer { + text-align: center; + position: fixed; + bottom: 0; + width: 100%; + height: auto; + padding-bottom: auto; + background-color: #f5f5f5; +} +@media only screen and (max-width: 500px) { + footer { + text-align: center; + position: relative; + bottom: 0; + width: 100%; + height: auto; + padding-bottom: auto; + background-color: #f5f5f5; + } +} +div { + text-align: center; +}