Version Web inclue
This commit is contained in:
parent
97eecf117d
commit
542c49e12a
85
WeBashLogoWeb/WeBashLogoWeb.css
Normal file
85
WeBashLogoWeb/WeBashLogoWeb.css
Normal file
|
|
@ -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; }
|
||||
}
|
||||
36
WeBashLogoWeb/WeBashLogoWeb.html
Normal file
36
WeBashLogoWeb/WeBashLogoWeb.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr_FR;fr;en;">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
|
||||
<meta name="author" content="Alnotz">
|
||||
<meta name="keywords" content="WeBash, JavaScript, Alnotz, Gnous.eu">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="description" content="Une page HTML pour illustrer le logo de WeBash en JavaScript. Conçu par Alnotz et sous GPL3+.">
|
||||
<title>WeBash Animated Logo</title>
|
||||
<link rel="stylesheet" type="text/css" href="WeBashLogo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Un logo animé de <em>WeBash</em></h1>
|
||||
<p>
|
||||
Dans l'écran ci-dessous est imité un terminal. Y apparaît le logo de <em class="blink">WeBash</em>.
|
||||
Encore faut-il appuyer sur le boutton <strong id="boot_name">BOOT</strong>.
|
||||
</p>
|
||||
<button id="boot" type="button">BOOT</button>
|
||||
<div id="ecran">
|
||||
<code id="terminal">
|
||||
<!--Sortie de WeBash-->
|
||||
<br/>
|
||||
</code>
|
||||
</div>
|
||||
<p>À ça j'ajoute quand même que cette page HTML a été réalisé par moi, le magnifique <em style="color:blue;">Alnotz</em>, et est sous licence <strong>GNU GPLv3+</strong> (<em>General Public Licence 3 or more</em>).
|
||||
</p>
|
||||
<p>
|
||||
Ma clef PGP : <a href="https://keyserver.ubuntu.com/pks/lookup?search=0x90B633F5&fingerprint=on&op=index" title="Cherche dans ce serveur">0x90B633F5</a>!
|
||||
</p>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.txt" title="Source de la licence GNU GPLv3">
|
||||
<img src=GNUGPLv3Plus.svg type="svg+xml/image" alt="Logo rouge avec marqué « GPLv3 or later »"/>
|
||||
</a>
|
||||
</body>
|
||||
<script src="WeBashLogo.js" type="application/javascript" charset="utf-8"></script>
|
||||
</html>
|
||||
404
WeBashLogoWeb/WeBashLogoWeb.js
Normal file
404
WeBashLogoWeb/WeBashLogoWeb.js
Normal file
|
|
@ -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
|
||||
" _______________________________ ",
|
||||
" /._____________________. ._. ._.\\ ",
|
||||
" / |_____________________| |_| |_| \\ ",
|
||||
"/___________________________________\\",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"\\ </pre><pre class=\"red blink\">#############################</pre><pre> /",
|
||||
" \\_________________________________/ ",
|
||||
""];// ligne 20
|
||||
var logo1 = ["",
|
||||
" _______________________________ ",
|
||||
" /._____________________. ._. ._.\\ ",
|
||||
" / |_____________________| |_| |_| \\ ",
|
||||
"/___________________________________\\",
|
||||
"| | ",
|
||||
"|</pre><pre class=\"red\"> _____ _____ </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> _____/ /____/ /____ </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> / / </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> /____ _____ _____/ </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> _____/ /____/ /____ </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> / / </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> /____ _____ _____/ </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> / / / / </pre><pre>| ",
|
||||
"|</pre><pre class=\"red\"> /____/ /____/ </pre><pre>| ",
|
||||
"| | ",
|
||||
"\\ /",
|
||||
" \\_________________________________/ ",
|
||||
""];
|
||||
var logo2 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"__ __ __",
|
||||
"\\ \\ / / / /",
|
||||
" \\ \\ / / / / ",
|
||||
" \\ \\ / / / / ",
|
||||
" \\ \\ / /\\ / / ",
|
||||
" \\ \\/ /\\ \\/ / ",
|
||||
" \\_\\/ \\_\\/ ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
var logo3 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"__ __ __ ",
|
||||
"\\ \\ / / / / ",
|
||||
" \\ \\ / / / / ",
|
||||
" \\ \\ / / / / ___ ",
|
||||
" \\ \\ / /\\ / / /___\\ ",
|
||||
" \\ \\/ /\\ \\/ / | ",
|
||||
" \\_\\/ \\_\\/ \\___/ ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
var logo4 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" _ ___ ",
|
||||
"| | \\\\ ",
|
||||
"| | || ",
|
||||
"| |__// ",
|
||||
"| | \\\\ ",
|
||||
"| | || ",
|
||||
"|_|__// ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
var logo5 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" ___ ",
|
||||
" ___\\ ",
|
||||
"/ | ",
|
||||
"\\___| ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
var logo6 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" ___ ",
|
||||
"/ ",
|
||||
"`--, ",
|
||||
"___/ ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
var logo7 = ["",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" ",
|
||||
" ",
|
||||
"| ",
|
||||
"|__ ",
|
||||
"| \\ ",
|
||||
"| | ",
|
||||
"| | ",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
""];
|
||||
/* Liste des différents états du curseur clignotant. */
|
||||
var curseur1 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur2 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur3 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur4 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur5 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur6 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\n",
|
||||
"","","",""];
|
||||
var curseur7 = ["","","","","","","","","","","","","","","","",
|
||||
" \
|
||||
</pre><pre class=\"blink\">######</pre><pre>\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<elemCligno.lenght; i++)
|
||||
{
|
||||
elem = elemCligno[i];
|
||||
elem.setAttribute('style', textColor);//Nouvelle couleur.
|
||||
console.log("%cVisibilité%c\n%s", log_format_begin, log_format_end, a);
|
||||
allume = !allume;//État alterné.
|
||||
}
|
||||
}
|
||||
window.setInterval(clignotant, 250);//Alternance d'état tous les 1/4 de seconde.
|
||||
* FIN */
|
||||
/* La fenêtre sans croisillon. */
|
||||
function sortieAffiche0()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
/* Mieux vaut concaténer qu'user l'opératuer '+' surchargé. */
|
||||
sGroupe = sGroupe.concat(logo0[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* La fenêtre avec croisillon. */
|
||||
function sortieAffiche1()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]);
|
||||
sGroupe = sGroupe.concat(curseur1[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 'W'. */
|
||||
function sortieAffiche2()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo2[i]);
|
||||
sGroupe = sGroupe.concat(curseur2[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 'e'. */
|
||||
function sortieAffiche3()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
|
||||
sGroupe = sGroupe.concat(curseur3[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 'B'. */
|
||||
function sortieAffiche4()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]+logo4[i]);
|
||||
sGroupe = sGroupe.concat(curseur4[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 'a'. */
|
||||
function sortieAffiche5()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
|
||||
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
|
||||
sGroupe = sGroupe.concat(curseur5[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 's'. */
|
||||
function sortieAffiche6()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
|
||||
sGroupe = sGroupe.concat(logo4[i]+logo5[i]+logo6[i]);
|
||||
sGroupe = sGroupe.concat(curseur6[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Ajout de 'h'. */
|
||||
function sortieAffiche7()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
|
||||
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
|
||||
sGroupe = sGroupe.concat(logo6[i]+logo7[i]);
|
||||
sGroupe = sGroupe.concat(curseur7[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\n");
|
||||
sortie.innerHTML = sortieInit + sGroupe ;
|
||||
sortie_log(sortie.innerHTML);
|
||||
}
|
||||
/* Suppression du curseur. */
|
||||
function sortieAffiche8()
|
||||
{
|
||||
sGroupe = "";
|
||||
sGroupe = sGroupe.concat("<pre>"+"\n");
|
||||
for(let i=0;i<logo0.length;i++)
|
||||
{
|
||||
sGroupe = sGroupe.concat(logo1[i]+logo3[i]);
|
||||
sGroupe = sGroupe.concat(logo4[i]+logo5[i]);
|
||||
sGroupe = sGroupe.concat(logo6[i]+logo7[i]+"\n");
|
||||
}
|
||||
sGroupe = sGroupe.concat("</pre>"+"\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);
|
||||
838
WeBashLogoWeb/WeBashLogoWebUnique.html
Normal file
838
WeBashLogoWeb/WeBashLogoWebUnique.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue