From 50c90cae41186f464c33d39b76bf5a955ff97c03 Mon Sep 17 00:00:00 2001
From: asus <asus@example.com>
Date: Fri, 3 Nov 2023 10:57:45 +0100
Subject: [PATCH] base simple html website

---
 README.md                            | 175 -----------------
 ascii_elements/banner_1.html         |   9 -
 ascii_elements/banner_container.html |  57 ------
 ascii_elements/mouse_1.html          |  19 --
 ascii_elements/mouse_2.html          |  19 --
 ascii_elements/mouse_3.html          |  17 --
 ascii_elements/mouse_4.html          | 252 ------------------------
 ascii_elements/mouse_container.html  |  35 ----
 ascii_elements/name.html             |   8 -
 index.html                           | 280 ++++++++++++++++++++++++---
 scripts/build.sh                     |  16 --
 scripts/load_html.js                 |  53 -----
 scripts/old_load_html.js             |  89 ---------
 style.css                            | 114 +++++++++++
 14 files changed, 366 insertions(+), 777 deletions(-)
 delete mode 100644 README.md
 delete mode 100644 ascii_elements/banner_1.html
 delete mode 100644 ascii_elements/banner_container.html
 delete mode 100644 ascii_elements/mouse_1.html
 delete mode 100644 ascii_elements/mouse_2.html
 delete mode 100644 ascii_elements/mouse_3.html
 delete mode 100644 ascii_elements/mouse_4.html
 delete mode 100644 ascii_elements/mouse_container.html
 delete mode 100644 ascii_elements/name.html
 delete mode 100644 scripts/build.sh
 delete mode 100644 scripts/load_html.js
 delete mode 100644 scripts/old_load_html.js
 create mode 100644 style.css

diff --git a/README.md b/README.md
deleted file mode 100644
index 31fcb44..0000000
--- a/README.md
+++ /dev/null
@@ -1,175 +0,0 @@
-start it with a server, like : `alive-server`
-- https://www.npmjs.com/package/alive-server
-- install : `npm install -g alive-server`
-
----
-
-function replaceHtml(elementToReplace, contentToLoad) {
-	let oldContent = elementToReplace.innerHTML;
-	let newContent = deserialize_html(contentToLoad);
-	let targetName = elementToReplace.dataset.target;
-	let contentElement = findClassInHtmlcollection(newContent, targetName);
-	if (contentElement)
-		content_element.outerHTML = oldContent;
-
-	elementToReplace.replaceWith(...newContent);
-};
-
-function loadHtml() {
-	let elements = document.getElementsByClassName("load_html");
-	for (let elementToReplace of elements) {
-		let path = (elementToReplace.dataset.path);
-		fetch(path)
-			.then(response => response.text())
-			.then(contentToLoad => replaceHtml(elementToReplace, contentToLoad))
-			.catch(error => console.log('Error:', error));
-	};
-}
-
----
-
-function replace_html(element_to_replace, content_to_load) {
-	let old_content = element_to_replace.innerHTML;
-	let new_content = deserialize_html(content_to_load);
-	let target_name = element_to_replace.dataset.target;
-	let content_element = find_class_in_htmlcollection(new_content, target_name);
-	if (content_element)
-		content_element.outerHTML = old_content;
-
-	element_to_replace.replaceWith(...new_content);
-};
-
-function load_html() {
-	let elements = document.getElementsByClassName("load_html");
-	for (let element_to_replace of elements) {
-		let path = (element_to_replace.dataset.path);
-		fetch(path)
-			.then(response => response.text())
-			.then(content_to_load => replace_html(element_to_replace, content_to_load))
-			.catch(error => console.log('Error:', error));
-	};
-}
-
----
-
-https://www.youtube.com/watch?v=elt5zpcTlOE
-
-01. 00:00:00 Flowers (Miley Cyrus, 2022)
-02. 00:03:11 Calm Down (Rema, Selena Gomez)
-03. 00:07:07 Dusk Till Dawn (Zayn, Sia, cover ?)
-04. 00:10:17 Old Town Road (Lil Nas X, Billy Ray Cyrus, Jatayu cover)
-05. 00:12:47 Stay (The Kid Laroi, Justin Bieber, cover ?)
-06. 00:15:07 Kill Bill (Sza, cover ?)
-07. 00:17:41 Treat You Better (Shawn Mendes, cover ?)
-08. 00:20:34 We Don't Talk Anymore ()
-09. 00:23:35 Unstoppable ()
-10. 00:27:21 See You Again ()
-11. 00:30:11 24K Magic - Bruno Mars ()
-12. 00:33:39 Bad Habits ()
-13. 00:36:39 This Is What You Came For ()
-14. 00:40:35 Sugar ()
-15. 00:44:28 Side to Sise ()
-16. 00:47:58 Im The One ()
-17. 00:51:10 Sorry - Justin Bieber ()
-18. 00:54:16 Wthout Me - Halsey ()
-19. 00:55:57 Lose You To Love Me ()
-20. 00:58:08 Work From Home ()
-21. 01:00:35 Havana ()
-22. 01:02:54 Shivers ()
-23. 01:06:24 Save Your Tears ()
-24. 01:09:59 Peaches ()
-25. 01:12:01 Cheap Thrills ()
-26. 01:13:57 Rihanna - Work ()
-27. 01:17:23 Easy On Me ()
-28. 01:21:01 Señorita - Shawn Mendes ()
-29. 01:24:11 New Rules ()
-30. 01:27:40 The Greatest - Sia ()
-31. 01:29:50 Shape Of You ()
-32. 01:33:12 Attention ()
-33. 01:36:25 Monsters ()
-34. 01:37:52 Good 4 U ()
-35. 01:41:38 Faded ()
-36. 01:45:06 Send My Love ()
-37. 01:48:43 What About Us ()
-38. 01:53:14 Let Me Love You ()
-39. 01:56:48 I Don't Care ()
-40. 01:59:47 There's Nothing Holding Me Back ()
-41. 02:03:07
-42. 02:05:48
-43. 02:07:30
-44. 02:10:23
-45. 02:13:13
-46. 02:16:30
-47. 02:18:38
-48. 02:23:26
-49. 02:26:39
-50. 02:29:18
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
----
-
-01. 00:00:00 Flowers
-02. 00:03:11 Calm Down
-03. 00:07:07 Dusk Till Dawn
-04. 00:10:17 Old Town Road
-05. 00:12:47 Stay
-06. 00:15:07 Kill Bill
-07. 00:17:41 Treat You Better
-08. 00:20:34 We Don't Talk Anymore
-09. 00:23:35 Unstoppable
-10. 00:27:21 See You Again
-11. 00:30:11 24K Magic
-12. 00:33:39 Bad Habits
-13. 00:36:39 This Is What You Came For
-14. 00:40:35 Sugar
-15. 00:44:28 Side to Sise
-16. 00:47:58 Im The One
-17. 00:51:10 Sorry
-18. 00:54:16 Wthout Me
-19. 00:55:57 Lose You To Love Me
-20. 00:58:08 Work From Home
-21. 01:00:35 Havana
-22. 01:02:54 Shivers
-23. 01:06:24 Save Your Tears
-24. 01:09:59 Peaches
-25. 01:12:01 Cheap Thrills
-26. 01:13:57 Work
-27. 01:17:23 Easy On Me
-28. 01:21:01 Señorita
-29. 01:24:11 New Rules
-30. 01:27:40 The Greatest
-31. 01:29:50 Shape Of You
-32. 01:33:12 Attention
-33. 01:36:25 Monsters
-34. 01:37:52 Good 4 U
-35. 01:41:38 Faded
-36. 01:45:06 Send My Love
-37. 01:48:43 What About Us
-38. 01:53:14 Let Me Love You
-39. 01:56:48 I Don't Care
-40. 01:59:47 There's Nothing Holding Me Back
-41. 02:03:07 ?
-42. 02:05:48 ?
-43. 02:07:30 ?
-44. 02:10:23 ?
-45. 02:13:13 ?
-46. 02:16:30 ?
-47. 02:18:38 ?
-48. 02:23:26 ?
-49. 02:26:39 ?
-50. 02:29:18 ?
-
diff --git a/ascii_elements/banner_1.html b/ascii_elements/banner_1.html
deleted file mode 100644
index f5e23f6..0000000
--- a/ascii_elements/banner_1.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<div class="load_html" data-path="ascii_elements/banner_container.html" data-path_target="banner">
-
-<pre class="banner" data-class_target="banner">
-•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
- • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
-  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
-</pre>
-
-</div>
diff --git a/ascii_elements/banner_container.html b/ascii_elements/banner_container.html
deleted file mode 100644
index 73a5f24..0000000
--- a/ascii_elements/banner_container.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
-<div class="banner_container">
-	<div class="content_html" data-path_target="banner"></div>
-</div>
-
-<style>
-	div.banner {
-		flex-wrap: wrap;
-		overflow: hidden;
-		width: 99vw;
-		margin: 10px 0px;
-	}
-	div.smallbanner {
-		height: 3.5ex;
-	}
-	div.bigbanner {
-		height: 21.5ex;
-	}
-	div.banner * {
-		margin: 0px;
-	}
-	div.banner p {
-		white-space: pre;
-	}
-	div.banner br {
-		display: block;
-	}
-	pre.banner {
-		position: relative;
-		margin-left: -100px;
-		animation-name: slide;
-		animation-iteration-count: infinite;
-		animation-duration: 2s;
-		animation-timing-function: linear;
-		animation-direction: normal;
-	}
-	pre.banner.pause {
-		animation-play-state: paused;
-	}
-	pre.banner.reverse {
-		animation-direction: reverse;
-	}
-	pre.banner.t0_5 {
-		animation-duration: 0.5s;
-	}
-	pre.banner.t1_0 {
-		animation-duration: 1s;
-	}
-	pre.banner.t1_5 {
-		animation-duration: 1.5s;
-	}
-	@keyframes slide {
-		from {left:0;}
-		to {left:2.4em;}
-	}
-</style>
-
diff --git a/ascii_elements/mouse_1.html b/ascii_elements/mouse_1.html
deleted file mode 100644
index e21c516..0000000
--- a/ascii_elements/mouse_1.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<pre>
-       •
-      ••         •••••          •••••
-     •••        •     •        •     •     ••
-    ••••       •     ••••     •       •   •  •
-   •• ••      •     •  • •   •         •  •  •
-  ••  ••     •      •  •  •••           •••••
- ••   ••    •        ••                     •
-••    ••   •                    ••           •
-••    •••••••••                • •            •
-••   ••      •               ••••   •••••      •
-••  ••      •           •   •   •  •     •     •
-•• ••      •             • • •   ••       •    •
-••••      •              ••      ••       ••   •
-•••      •                •••••••  •     •  •••
-••      •                 •         •••••
-••••••••                   •       •   •
-</pre>
-
diff --git a/ascii_elements/mouse_2.html b/ascii_elements/mouse_2.html
deleted file mode 100644
index a650c65..0000000
--- a/ascii_elements/mouse_2.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<pre>
-        ••••      •
-       •    •     •
-      •      •   • 
-      •       •••  
-    •••••          
-   •     •         
-  •       •        
-  •       •        
-  •••   •••        
- •   • •   •       
- •   • •   •       
-  •••• ••••        
-   • • • •  •      
-••• •   •  •       
-   ••••••••        
-      •     
-</pre>
-
diff --git a/ascii_elements/mouse_3.html b/ascii_elements/mouse_3.html
deleted file mode 100644
index c27a779..0000000
--- a/ascii_elements/mouse_3.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<pre>
-                   •
-                    •
-             ••     •
-           • • •••••••
-            • •• •   •
-      •  ••••• •  • • •
-      • •     • •  •   •
-       •       • ••    •
-      •        • • •
-    •••       ••  ••
-   •   ••    •  •  
-  •      ••••  
-••        •
-         •
-</pre>
-
diff --git a/ascii_elements/mouse_4.html b/ascii_elements/mouse_4.html
deleted file mode 100644
index e0da065..0000000
--- a/ascii_elements/mouse_4.html
+++ /dev/null
@@ -1,252 +0,0 @@
-
-<load-html data-path="ascii_elements/mouse_container.html">
-<div slot part="mouse_div">
-
-<pre class="mouse f1">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-  •   •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f2">
-                 •      
-                  •     
-           ••     •     
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••     • 
-   •  •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f3">
-                  •     
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-      •       •         
-   •• •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f4">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-    • •       •         
-   •  •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f5">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-   •  •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f6">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
- •    •       •         
-  •   •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f7">
-                   •    
-                  •     
-           ••      •    
-           • •     •    
-            •••••••••   
-              • •  ••   
-              •   • •   
-        ••••• •  •   •  
-       •     • ••    •  
-•     •       •         
- •    •       ••        
-  •    •      • •       
-   •   ••    •          
-    •••  ••••           
-</pre>
-<pre class="mouse f8">
-                ••        
-                • •      •
-                 ••     •
-                 •  •   • 
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
-       •       •       •  
-••    •       •••    •   
-  •    •      •       •   
-   •   ••    •        •   
-    •••  ••••             
-</pre>
-<pre class="mouse f9">
-                ••        
-                • •      •
-                 ••     •
-                 •  •    •
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
- •     •       •       •  
- •     •       •••    •   
-  •    •      •       •   
-   •   ••    •         •  
-    •••  ••••             
-</pre>
-<pre class="mouse f10">
-                      
-                ••        
-                • •      •
-                 ••      •
-                 •  •   • 
-                • •  •  • 
-         ••••• •      ••  
-        •     • ••••••••• 
-  •    •       •       •  
-  •    •       •••    •   
-  •    •      •       •   
-   •   ••    •         •  
-    •••  ••••             
-</pre>
-
-</div>
-</load-html>
-
-<!--
-                •                      -                          
-         ••     •               --     -                    ••     
-         • •     •              - -     -                   • •      •
-          •••••••••              ---------                   ••      •
-            • •  ••                - -  --                   •  •   •
-            •   • •                -   - -                  • •  •  •
-      ••••• •  •   •         ----- -  -   -          ••••• •      ••
-     •     • ••     •       -     - --    -         •     • •••••••••
-    •       •              -       -               •       •       •
-•   •       ••         -   -       --       ••     •       •••   •
-•    •      • •        -    -      - -        •    •      •      •
- •   ••    •            -   --    -            •   ••    •        •
-  •••  ••••              ---  ----              •••  ••••         
--->
-
-<style>
-	/* *27
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) *  3.7/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) *  7.4/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 11.1/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 14.8/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 18.5/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 22.2/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 25.9/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 29.6/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 33.3/100);}
-	pre.mouse.f11 {animation-delay: calc(var(--tmouse) *   37/100);}
-	pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 40.7/100);}
-	pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 44.4/100);}
-	pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 48.1/100);}
-	pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 51.8/100);}
-	pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 55.5/100);}
-	pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 59.2/100);}
-	pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 62.9/100);}
-	pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 66.6/100);}
-	pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 70.3/100);}
-	pre.mouse.f21 {animation-delay: calc(var(--tmouse) *   74/100);}
-	pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 77.7/100);}
-	pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 81.4/100);}
-	pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 85.1/100);}
-	pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 88.8/100);}
-	pre.mouse.f26 {animation-delay: calc(var(--tmouse) * 92.5/100);}
-	pre.mouse.f27 {animation-delay: calc(var(--tmouse) * 96.2/100);}
-	*/
-	/* *25
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) *  4/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) *  8/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 12/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 16/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 20/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 24/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 28/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 32/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 36/100);}
-	pre.mouse.f11 {animation-delay: calc(var(--tmouse) * 40/100);}
-	pre.mouse.f12 {animation-delay: calc(var(--tmouse) * 44/100);}
-	pre.mouse.f13 {animation-delay: calc(var(--tmouse) * 48/100);}
-	pre.mouse.f14 {animation-delay: calc(var(--tmouse) * 52/100);}
-	pre.mouse.f15 {animation-delay: calc(var(--tmouse) * 56/100);}
-	pre.mouse.f16 {animation-delay: calc(var(--tmouse) * 60/100);}
-	pre.mouse.f17 {animation-delay: calc(var(--tmouse) * 64/100);}
-	pre.mouse.f18 {animation-delay: calc(var(--tmouse) * 68/100);}
-	pre.mouse.f19 {animation-delay: calc(var(--tmouse) * 72/100);}
-	pre.mouse.f20 {animation-delay: calc(var(--tmouse) * 76/100);}
-	pre.mouse.f21 {animation-delay: calc(var(--tmouse) * 80/100);}
-	pre.mouse.f22 {animation-delay: calc(var(--tmouse) * 84/100);}
-	pre.mouse.f23 {animation-delay: calc(var(--tmouse) * 88/100);}
-	pre.mouse.f24 {animation-delay: calc(var(--tmouse) * 92/100);}
-	pre.mouse.f25 {animation-delay: calc(var(--tmouse) * 96/100);}
-	*/
-	/* *10
-	*/
-	pre.mouse.f2  {animation-delay: calc(var(--tmouse) * 10/100);}
-	pre.mouse.f3  {animation-delay: calc(var(--tmouse) * 20/100);}
-	pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 30/100);}
-	pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 40/100);}
-	pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 50/100);}
-	pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 60/100);}
-	pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 70/100);}
-	pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 80/100);}
-	pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
-	@keyframes mouse {
-		0%    {opacity: 1;}
-		10%   {opacity: 1;}
-		10.1% {opacity: 0;}
-		100%  {opacity: 0;}
-	}
-</style>
diff --git a/ascii_elements/mouse_container.html b/ascii_elements/mouse_container.html
deleted file mode 100644
index 98eca13..0000000
--- a/ascii_elements/mouse_container.html
+++ /dev/null
@@ -1,35 +0,0 @@
-
-<div class="mouse_container">
-	<slot class="content_html"></slot>
-</div>
-
-<style>
-	.mouse_container {
-		position: relative;
-		margin-left: 0px;
-		display: contents;
-		/*
-		border: 1px solid red;
-		margin-right: auto;
-		height: 8.5em;
-		width: 11.9em;
-		*/
-		width: fit-content;
-	}
-	pre.mouse {
-		--tmouse: 2s;
-		position: absolute;
-		left: 0px;
-		bottom: 0px;
-		margin: 0px;
-		opacity: 0;
-		animation-name: mouse;
-		animation-iteration-count: infinite;
-		animation-duration: var(--tmouse);
-		animation-timing-function: linear;
-		animation-direction: normal;
-	}
-	pre.mouse:first-child {
-		position: relative;
-	}
-</style>
diff --git a/ascii_elements/name.html b/ascii_elements/name.html
deleted file mode 100644
index 875db72..0000000
--- a/ascii_elements/name.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<pre>
-•   • •   • ••••• •••••     •      •••  •   • •   •
-•   • •   • •     •   •     •     •   • •• ••  • •
-••••• •   • •  •• •   •     •     ••••• • • •   •
-•   • •   • •   • •   •     •     •   • •   •   •
-•   • ••••• ••••• •••••     ••••• •   • •   •   •
-</pre>
-
diff --git a/index.html b/index.html
index 9e886a8..df98af3 100644
--- a/index.html
+++ b/index.html
@@ -8,39 +8,256 @@
 		<title>hugulumu.fr</title>
 		<meta name="description" content="site web de hugo lamy, developpeur">
 		<script type="text/javascript" src="./scripts/load_html.js" defer></script>
-		<!--
 		<link href="./style.css" type="text/css" rel="stylesheet">
+		<!--
 		-->
-		<style>
-			body {
-				overflow-x: hidden;
-			}
-			body * {
-				display: flex;
-				margin: auto;
-			}
-			script, style {
-				display: none;
-			}
-			p, pre {
-				line-height: 0.8;
-				font-size: 12px;
-				font-family: monospace;
-			}
-			pre {
-				margin: 10px 0px;
-			}
-		</style>
 	</head>
 	<body>
 
-<load-html data-path="ascii_elements/name.html"></load-html>
-<load-html data-path="ascii_elements/mouse_1.html"></load-html>
-<load-html data-path="ascii_elements/mouse_2.html"></load-html>
-<load-html data-path="ascii_elements/mouse_3.html"></load-html>
-<load-html data-path="ascii_elements/mouse_4.html"></load-html>
+<pre>
+•   • •   • ••••• •••••     •      •••  •   • •   •
+•   • •   • •     •   •     •     •   • •• ••  • •
+••••• •   • •  •• •   •     •     ••••• • • •   •
+•   • •   • •   • •   •     •     •   • •   •   •
+•   • ••••• ••••• •••••     ••••• •   • •   •   •
+</pre>
 
-<load-html data-path="ascii_elements/banner_1.html"></load-html>
+<div class="mouse_container">
+
+<pre class="mouse f1">
+                 •      
+                  •     
+           ••     •     
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••     • 
+  •   •       •         
+  •   •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f2">
+                 •      
+                  •     
+           ••     •     
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••     • 
+   •  •       •         
+   •  •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f3">
+                  •     
+                  •     
+           ••      •    
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••    •  
+      •       •         
+   •• •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f4">
+                   •    
+                  •     
+           ••      •    
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••    •  
+    • •       •         
+   •  •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f5">
+                   •    
+                  •     
+           ••      •    
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••    •  
+   •  •       •         
+  •   •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f6">
+                   •    
+                  •     
+           ••      •    
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••    •  
+ •    •       •         
+  •   •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f7">
+                   •    
+                  •     
+           ••      •    
+           • •     •    
+            •••••••••   
+              • •  ••   
+              •   • •   
+        ••••• •  •   •  
+       •     • ••    •  
+•     •       •         
+ •    •       ••        
+  •    •      • •       
+   •   ••    •          
+    •••  ••••           
+</pre>
+<pre class="mouse f8">
+                ••        
+                • •      •
+                 ••     •
+                 •  •   • 
+                • •  •  • 
+         ••••• •      ••  
+        •     • ••••••••• 
+       •       •       •  
+••    •       •••    •   
+  •    •      •       •   
+   •   ••    •        •   
+    •••  ••••             
+</pre>
+<pre class="mouse f9">
+                ••        
+                • •      •
+                 ••     •
+                 •  •    •
+                • •  •  • 
+         ••••• •      ••  
+        •     • ••••••••• 
+ •     •       •       •  
+ •     •       •••    •   
+  •    •      •       •   
+   •   ••    •         •  
+    •••  ••••             
+</pre>
+<pre class="mouse f10">
+                      
+                ••        
+                • •      •
+                 ••      •
+                 •  •   • 
+                • •  •  • 
+         ••••• •      ••  
+        •     • ••••••••• 
+  •    •       •       •  
+  •    •       •••    •   
+  •    •      •       •   
+   •   ••    •         •  
+    •••  ••••             
+</pre>
+
+</div>
+<!--
+                •                      -                          
+         ••     •               --     -                    ••     
+         • •     •              - -     -                   • •      •
+          •••••••••              ---------                   ••      •
+            • •  ••                - -  --                   •  •   •
+            •   • •                -   - -                  • •  •  •
+      ••••• •  •   •         ----- -  -   -          ••••• •      ••
+     •     • ••     •       -     - --    -         •     • •••••••••
+    •       •              -       -               •       •       •
+•   •       ••         -   -       --       ••     •       •••   •
+•    •      • •        -    -      - -        •    •      •      •
+ •   ••    •            -   --    -            •   ••    •        •
+  •••  ••••              ---  ----              •••  ••••         
+-->
+
+<pre>
+                   •
+                    •
+             ••     •
+           • • •••••••
+            • •• •   •
+      •  ••••• •  • • •
+      • •     • •  •   •
+       •       • ••    •
+      •        • • •
+    •••       ••  ••
+   •   ••    •  •  
+  •      ••••  
+••        •
+         •
+</pre>
+
+<pre>
+        ••••      •
+       •    •     •
+      •      •   • 
+      •       •••  
+    •••••          
+   •     •         
+  •       •        
+  •       •        
+  •••   •••        
+ •   • •   •       
+ •   • •   •       
+  •••• ••••        
+   • • • •  •      
+••• •   •  •       
+   ••••••••        
+      •     
+</pre>
+
+<pre>
+       •
+      ••         •••••          •••••
+     •••        •     •        •     •     ••
+    ••••       •     ••••     •       •   •  •
+   •• ••      •     •  • •   •         •  •  •
+  ••  ••     •      •  •  •••           •••••
+ ••   ••    •        ••                     •
+••    ••   •                    ••           •
+••    •••••••••                • •            •
+••   ••      •               ••••   •••••      •
+••  ••      •           •   •   •  •     •     •
+•• ••      •             • • •   ••       •    •
+••••      •              ••      ••       ••   •
+•••      •                •••••••  •     •  •••
+••      •                 •         •••••
+••••••••                   •       •   •
+</pre>
+
+
+<pre class="banner" data-class_target="banner">
+•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
+ • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
+  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
+</pre>
 
 <pre class="banner reverse t1_0">
   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
@@ -56,7 +273,13 @@
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
 </pre>
-<div class="insert_html" data-path="ascii_elements/banner_1.html" data-new_class="t1_5" data-class_target="banner"></div>
+
+<pre class="banner t1_5 reverse" data-class_target="banner">
+•   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
+ • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
+  •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
+</pre>
+
 <pre class="banner t0_5">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
@@ -68,6 +291,7 @@
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   • 
 </pre>
+
 <pre class="banner anime reverse">
 •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   •   
  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
diff --git a/scripts/build.sh b/scripts/build.sh
deleted file mode 100644
index 36f865e..0000000
--- a/scripts/build.sh
+++ /dev/null
@@ -1,16 +0,0 @@
-#!/bin/bash
-
-# Define the file to watch
-file_to_watch="./"
-
-# Watch for modification events on the file continuously, with a minimum interval of 1s
-last_modified=0
-while read -r directory events filename; do
-	current_time=$(date +%s)  # Get the current time in seconds
-
-	if [ "$current_time" -gt "$last_modified" ]; then
-		last_modified=$current_time
-		echo "$current_time - The file $filename was modified."
-	fi
-done < <(inotifywait -q --monitor --event modify "$file_to_watch")
-
diff --git a/scripts/load_html.js b/scripts/load_html.js
deleted file mode 100644
index 046bf71..0000000
--- a/scripts/load_html.js
+++ /dev/null
@@ -1,53 +0,0 @@
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
-
-customElements.define(
-	"load-html",
-	class extends HTMLElement {
-		constructor() {
-
-			super();
-
-			let path = this.dataset.path;
-
-			let load_content = (content_to_load) => {
-					let template = document.createElement('template');
-					template.innerHTML = content_to_load;
-					let templateContent = template.content;
-					//this.appendChild(templateContent.cloneNode(true));
-					this.replaceWith(templateContent.cloneNode(true));
-			}
-
-			fetch(path)
-				.then(response => response.text())
-				.then(load_content)
-				.catch(error => console.log('Error:', error));
-		}
-	},
-);
-
-customElements.define(
-	"load-html-shadow",
-	class extends HTMLElement {
-		constructor() {
-
-			super();
-
-			let path = this.dataset.path;
-
-			let load_content = (content_to_load) => {
-					let template = document.createElement('template');
-					template.innerHTML = content_to_load;
-					let templateContent = template.content;
-					const shadowRoot = this.attachShadow({ mode: "open" });
-					shadowRoot.appendChild(templateContent.cloneNode(true));
-			}
-
-			fetch(path)
-				.then(response => response.text())
-				.then(load_content)
-				.catch(error => console.log('Error:', error));
-		}
-	},
-);
-
diff --git a/scripts/old_load_html.js b/scripts/old_load_html.js
deleted file mode 100644
index 13fb9c8..0000000
--- a/scripts/old_load_html.js
+++ /dev/null
@@ -1,89 +0,0 @@
-
-// https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
-function deserialize_html(html) {
-	let template = document.createElement('template');
-	template.innerHTML = html;
-	return template.content.children;
-	// use .children instead of childNodes to avoid #text elements :
-	// https://stackoverflow.com/questions/35199729/javascript-meaning-of-text-in-htmlnode-childnodesi-nodename
-	//return template.content.childNodes;
-}
-
-function fill_content(new_content, old_content, target_name) {
-	if (!old_content)
-		return;
-	let elements_with_class = find_elements_by_class(new_content, "content_html");
-	let elements_to_fill = find_elements_by_data(elements_with_class, target_name, "path_target");
-	elements_to_fill.forEach(el => el.outerHTML = old_content);
-}
-
-function find_elements_by_class(html_collection, class_to_find) {
-	for (element of html_collection) {
-		if (element.nodeName === "STYLE")
-			continue;
-		if (element.nodeName === "SCRIPT")
-			continue;
-		return element.getElementsByClassName(class_to_find);
-	}
-	return null;
-}
-
-function find_elements_by_data(html_collection, data_to_compare, dataset_name) {
-	let matching_elements = [];
-	if (!data_to_compare)
-		return matching_elements;
-	for (element of html_collection) {
-
-		let data = [...element.querySelectorAll(`[data-${dataset_name}='${data_to_compare}']`)];
-		//let data = element.dataset[dataset_name];
-
-		//if (data_to_compare === data)
-		matching_elements.push(...data);
-	}
-//	if (data_to_compare === "banner")
-	return matching_elements;
-}
-
-function transfert_class(element, new_content) {
-	let class_target = element.dataset.class_target;
-	let new_class = element.dataset.new_class;
-	if (!class_target)
-		return;
-	if (!new_class)
-		return;
-	let elements_with_class = find_elements_by_data(new_content, class_target, "class_target");
-	elements_with_class.forEach(el => el.classList.add(new_class));
-}
-
-function replace_html(element_to_replace, content_to_load) {
-	let old_content = element_to_replace.innerHTML;
-	let new_content = deserialize_html(content_to_load);
-	let target_name = element_to_replace.dataset.path_target;
-	transfert_class(element_to_replace, new_content);
-//	console.log("new_content: ", new_content);
-	fill_content(new_content, old_content, target_name);
-	element_to_replace.replaceWith(...new_content);
-};
-
-function load_html() {
-	let elements = document.getElementsByClassName("load_html");
-	for (let element_to_replace of elements) {
-		let path = (element_to_replace.dataset.path);
-		if (!path)
-			continue;
-		fetch(path)
-			.then(response => response.text())
-			.then(content_to_load => replace_html(element_to_replace, content_to_load))
-			.catch(error => console.log('Error:', error));
-	};
-}
-
-// create an observer on everytime some HTML is loaded on the whole page (heavy solution...)
-const callback = (mutation_list, observer) => load_html();
-const observer = new MutationObserver(callback);
-const targetNode = document.body;
-const config = { attributes: true, childList: true, subtree: true };
-// Start observing the target node for configured mutations
-observer.observe(targetNode, config);
-
-
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b7524d0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,114 @@
+body {
+	overflow-x: hidden;
+}
+body * {
+	display: flex;
+	margin: auto;
+}
+script, style {
+	display: none;
+}
+p, pre {
+	line-height: 0.8;
+	font-size: 12px;
+	font-family: monospace;
+}
+pre {
+	margin: 10px 0px;
+}
+
+div.banner {
+	flex-wrap: wrap;
+	overflow: hidden;
+	width: 99vw;
+	margin: 10px 0px;
+}
+div.smallbanner {
+	height: 3.5ex;
+}
+div.bigbanner {
+	height: 21.5ex;
+}
+div.banner * {
+	margin: 0px;
+}
+div.banner p {
+	white-space: pre;
+}
+div.banner br {
+	display: block;
+}
+pre.banner {
+	position: relative;
+	margin-left: -100px;
+	animation-name: slide;
+	animation-iteration-count: infinite;
+	animation-duration: 2s;
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+pre.banner.pause {
+	animation-play-state: paused;
+}
+pre.banner.reverse {
+	animation-direction: reverse;
+}
+pre.banner.t0_5 {
+	animation-duration: 0.5s;
+}
+pre.banner.t1_0 {
+	animation-duration: 1s;
+}
+pre.banner.t1_5 {
+	animation-duration: 1.5s;
+}
+@keyframes slide {
+	from {left:0;}
+	to {left:2.4em;}
+}
+
+.mouse_container {
+	position: relative;
+	margin-left: 0px;
+	display: contents;
+	/*
+	border: 1px solid red;
+	margin-right: auto;
+	height: 8.5em;
+	width: 11.9em;
+	*/
+	width: fit-content;
+}
+pre.mouse {
+	--tmouse: 2s;
+	position: absolute;
+	left: 0px;
+	bottom: 0px;
+	margin: 0px;
+	opacity: 0;
+	animation-name: mouse;
+	animation-iteration-count: infinite;
+	animation-duration: var(--tmouse);
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+pre.mouse:first-child {
+	position: relative;
+}
+
+pre.mouse.f2  {animation-delay: calc(var(--tmouse) * 10/100);}
+pre.mouse.f3  {animation-delay: calc(var(--tmouse) * 20/100);}
+pre.mouse.f4  {animation-delay: calc(var(--tmouse) * 30/100);}
+pre.mouse.f5  {animation-delay: calc(var(--tmouse) * 40/100);}
+pre.mouse.f6  {animation-delay: calc(var(--tmouse) * 50/100);}
+pre.mouse.f7  {animation-delay: calc(var(--tmouse) * 60/100);}
+pre.mouse.f8  {animation-delay: calc(var(--tmouse) * 70/100);}
+pre.mouse.f9  {animation-delay: calc(var(--tmouse) * 80/100);}
+pre.mouse.f10 {animation-delay: calc(var(--tmouse) * 90/100);}
+@keyframes mouse {
+	0%    {opacity: 1;}
+	10%   {opacity: 1;}
+	10.1% {opacity: 0;}
+	100%  {opacity: 0;}
+}
+