From 542c49e12ab5fdfee6e6576527d94973e29f136b Mon Sep 17 00:00:00 2001 From: Alnotz Date: Sun, 3 Oct 2021 12:16:30 +0200 Subject: [PATCH] Version Web inclue --- WeBashLogoWeb/WeBashLogoWeb.css | 85 +++ WeBashLogoWeb/WeBashLogoWeb.html | 36 ++ WeBashLogoWeb/WeBashLogoWeb.js | 404 ++++++++++++ WeBashLogoWeb/WeBashLogoWebUnique.html | 838 +++++++++++++++++++++++++ 4 files changed, 1363 insertions(+) create mode 100644 WeBashLogoWeb/WeBashLogoWeb.css create mode 100644 WeBashLogoWeb/WeBashLogoWeb.html create mode 100644 WeBashLogoWeb/WeBashLogoWeb.js create mode 100644 WeBashLogoWeb/WeBashLogoWebUnique.html 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 @@ + + + + + + + + + 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! +

+ + + Logo rouge avec marqué « GPLv3 or later » + + + + 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!
+    

+    
+    
+      
+        GPLv3 or Later
+        
+          
+            
+              image/svg+xml
+              
+              GPLv3 or Later
+              2018-11-26
+              
+                
+                  Aryeom Han
+                
+              
+              
+                
+                  Creative Commons by-sa
+                
+              
+              
+              
+              GPLv3 or Later logo made by Aryeom Han for the Free Software Foundation 2019 fundraising.
+      About the author, see: https://film.zemarmot.net/
+              
+                
+                  LILA
+                
+              
+            
+            
+              
+              
+              
+              
+              
+              
+            
+          
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+          
+          
+          
+          
+          
+          
+          
+          
+          
+        
+        
+        
+        
+        
+        
+      
+    
+  
+  
+