diff --git a/WeBashLogoWeb/WeBashLogoWeb.css b/WeBashLogoWeb/WeBashLogoWeb.css new file mode 100644 index 0000000..40a010b --- /dev/null +++ b/WeBashLogoWeb/WeBashLogoWeb.css @@ -0,0 +1,85 @@ +/* CSS de WeBash. */ +body +{ + background: #202020; + color: #ffffff; +} +svg#svg884 +{ + margin: 0.5em 45% 0.5em 45%; +} +p +{ + text-indent: 2em; +} +h1 +{ + color:green; + text-align: center; +} +button#boot +{ + margin: 0.5em 30% 0.5em 30%; + width: 40%; + height: 2em; + font-size: 4em; +} +div#ecran +{ + background: #101010; + color: #ffffff; + font-size: 1.2em; + margin: 1em 15% 1em 15%; + width: 70%; + height: 28em; +} +div code pre +{ + display:inline; + line-height: 1em; +} +div code pre.red +{ + color: red; +} +/* Pour réaliser un clignotement en CSS3. + * Auteur : Computer Hope (10/07/2019) + * Source : https://www.computerhope.com/issues/ch001651.htm + */ +.blink { + -webkit-animation: blink .75s linear infinite; + -moz-animation: blink .75s linear infinite; + -ms-animation: blink .75s linear infinite; + -o-animation: blink .75s linear infinite; + animation: blink .75s linear infinite; +} +@-webkit-keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 1; } + 50.01% { opacity: 0; } + 100% { opacity: 0; } +} +@-moz-keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 1; } + 50.01% { opacity: 0; } + 100% { opacity: 0; } +} +@-ms-keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 1; } + 50.01% { opacity: 0; } + 100% { opacity: 0; } +} +@-o-keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 1; } + 50.01% { opacity: 0; } + 100% { opacity: 0; } +} +@keyframes blink { + 0% { opacity: 1; } + 50% { opacity: 1; } + 50.01% { opacity: 0; } + 100% { opacity: 0; } +} diff --git a/WeBashLogoWeb/WeBashLogoWeb.html b/WeBashLogoWeb/WeBashLogoWeb.html new file mode 100644 index 0000000..a9cab7f --- /dev/null +++ b/WeBashLogoWeb/WeBashLogoWeb.html @@ -0,0 +1,36 @@ + + +
+ + + + + ++ Dans l'écran ci-dessous est imité un terminal. Y apparaît le logo de WeBash. + Encore faut-il appuyer sur le boutton BOOT. +
+ +
+
+
+
+ À ça j'ajoute quand même que cette page HTML a été réalisé par moi, le magnifique Alnotz, et est sous licence GNU GPLv3+ (General Public Licence 3 or more). +
++ Ma clef PGP : 0x90B633F5! +
+ + + + + + + diff --git a/WeBashLogoWeb/WeBashLogoWeb.js b/WeBashLogoWeb/WeBashLogoWeb.js new file mode 100644 index 0000000..0a0336e --- /dev/null +++ b/WeBashLogoWeb/WeBashLogoWeb.js @@ -0,0 +1,404 @@ +/* JS de WeBash. */ +var sortie = document.getElementById("terminal"); +sortieInit = sortie.innerHTML;//Entrée initiale sauvée. +const TEMPS_L = 500;//Temps long. +const TEMPS_C = 250;//Temps court. +/* Sortie pour la console. */ +function sortie_log(sortie) +{ + log_format_begin = "color: red; font-style: italic; background-color: default;padding: 2px"; + warn_format_begin = "color: yellow; font-style: italic; background-color: default;padding: 2px"; + log_format_end = "color: default; font-style: default; background-color: default;padding: default"; + if((typeof sortie) !== 'string') + { + console.warn("%cAttention ! :%c\n%s", log_format_begin, log_format_end, + "sortie_log : l'argument n'est pas une chaîne."); + exit; + } + console.log("%cSortie :%c\n%s", log_format_begin, log_format_end, sortie); +} +/* La collection de symboles et caractères en art ASCII. */ +var logo0 = ["",//ligne 0 + " _______________________________ ", + " /._____________________. ._. ._.\\ ", + " / |_____________________| |_| |_| \\ ", + "/___________________________________\\", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "| | ", + "\\#############################
/", + " \\_________________________________/ ", + ""];// ligne 20 +var logo1 = ["", + " _______________________________ ", + " /._____________________. ._. ._.\\ ", + " / |_____________________| |_| |_| \\ ", + "/___________________________________\\", + "| | ", + "|
_____ _____
| ", + "|
/ / / /
| ", + "|
_____/ /____/ /____
| ", + "|
/ /
| ", + "|
/____ _____ _____/
| ", + "|
/ / / /
| ", + "|
_____/ /____/ /____
| ", + "|
/ /
| ", + "|
/____ _____ _____/
| ", + "|
/ / / /
| ", + "|
/____/ /____/
| ", + "| | ", + "\\ /", + " \\_________________________________/ ", + ""]; +var logo2 = ["", + "", + "", + "", + "", + "", + "", + "", + "__ __ __", + "\\ \\ / / / /", + " \\ \\ / / / / ", + " \\ \\ / / / / ", + " \\ \\ / /\\ / / ", + " \\ \\/ /\\ \\/ / ", + " \\_\\/ \\_\\/ ", + "", + "", + "", + "", + "", + ""]; +var logo3 = ["", + "", + "", + "", + "", + "", + "", + "", + "__ __ __ ", + "\\ \\ / / / / ", + " \\ \\ / / / / ", + " \\ \\ / / / / ___ ", + " \\ \\ / /\\ / / /___\\ ", + " \\ \\/ /\\ \\/ / | ", + " \\_\\/ \\_\\/ \\___/ ", + "", + "", + "", + "", + "", + ""]; +var logo4 = ["", + "", + "", + "", + "", + "", + "", + "", + " _ ___ ", + "| | \\\\ ", + "| | || ", + "| |__// ", + "| | \\\\ ", + "| | || ", + "|_|__// ", + "", + "", + "", + "", + "", + ""]; +var logo5 = ["", + "", + "", + "", + "", + "", + "", + "", + " ", + " ", + " ", + " ___ ", + " ___\\ ", + "/ | ", + "\\___| ", + "", + "", + "", + "", + "", + ""]; +var logo6 = ["", + "", + "", + "", + "", + "", + "", + "", + " ", + " ", + " ", + " ___ ", + "/ ", + "`--, ", + "___/ ", + "", + "", + "", + "", + "", + ""]; +var logo7 = ["", + "", + "", + "", + "", + "", + "", + "", + " ", + " ", + "| ", + "|__ ", + "| \\ ", + "| | ", + "| | ", + "", + "", + "", + "", + "", + ""]; +/* Liste des différents états du curseur clignotant. */ +var curseur1 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur2 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur3 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur4 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur5 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur6 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +var curseur7 = ["","","","","","","","","","","","","","","","", + " \ +
######
\n", + "","","",""]; +/* Pour l'effet clignotant du curseur. */ +/* Changement de style CSS pour clignoter. */ +/* CASSÉ! + * DÉBUT * +allume = true;//Curseur visible. + +function clignotant() +{ + var elemCligno = document.getElementsByClassName('cligno'); + if(allume)//Si visible. + { + textColor = 'opacity:0;'; + a = "Oui"; + } + else//Si caché. + { + textColor = 'opacity:1;'; + a = "Non"; + } + for(let i=0; i"+"\n"); + for(let i=0;i "+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* La fenêtre avec croisillon. */ +function sortieAffiche1() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 'W'. */ +function sortieAffiche2() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 'e'. */ +function sortieAffiche3() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 'B'. */ +function sortieAffiche4() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 'a'. */ +function sortieAffiche5() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 's'. */ +function sortieAffiche6() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Ajout de 'h'. */ +function sortieAffiche7() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); +} +/* Suppression du curseur. */ +function sortieAffiche8() +{ + sGroupe = ""; + sGroupe = sGroupe.concat(" "+"\n"); + for(let i=0;i"+"\n"); + sortie.innerHTML = sortieInit + sGroupe ; + sortie_log(sortie.innerHTML); + sortie_log("Fini !"); +} +/* Suite de séquences d'affichage. + * On contrôle les temps absolus entre les calques. + */ +function webashBoot() +{ + + window.setTimeout(sortieAffiche0, TEMPS_L); + window.setTimeout(sortieAffiche1, 2*TEMPS_L); + window.setTimeout(sortieAffiche2, 4*TEMPS_L); + window.setTimeout(sortieAffiche3, 4*TEMPS_L + TEMPS_C); + window.setTimeout(sortieAffiche4, 5*TEMPS_L + 2*TEMPS_C); + window.setTimeout(sortieAffiche5, 5*TEMPS_L + 3*TEMPS_C); + window.setTimeout(sortieAffiche6, 5*TEMPS_L + 4*TEMPS_C); + window.setTimeout(sortieAffiche7, 5*TEMPS_L + 5*TEMPS_C); + window.setTimeout(sortieAffiche8, 10*TEMPS_L + 5*TEMPS_C); +} +/* Le logo de WeBash commence à partir du bouton BOOT. */ +boutton = document.getElementById('boot'); +function auBoulot() +{ + boutton.disabled = true; + webashBoot(); + boutton.innerText = "RE-".concat(boutton.innerText); + window.setTimeout(()=>{boutton.disabled = false;}, 10*TEMPS_L + 5*TEMPS_C); +} +boutton.addEventListener('click', auBoulot); diff --git a/WeBashLogoWeb/WeBashLogoWebUnique.html b/WeBashLogoWeb/WeBashLogoWebUnique.html new file mode 100644 index 0000000..0e758c0 --- /dev/null +++ b/WeBashLogoWeb/WeBashLogoWebUnique.html @@ -0,0 +1,838 @@ + + + + + + + + + WeBash Animated Logo + + + +Un logo animé de WeBash
++ Dans l'écran ci-dessous est imité un terminal. Y apparaît le logo de WeBash. + Encore faut-il appuyer sur le boutton BOOT. +
+ ++++ +
+
+À ça j'ajoute quand même que cette page HTML a été réalisé par moi, le magnifique Alnotz, et est sous licence GNU GPLv3+ (General Public Licence 3 or more). +
++ Ma clef PGP : 0x90B633F5! +
+ + + + + + +