perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

base simple html website

Browse Source
This commit is contained in:
asus
2023-11-03 10:57:45 +01:00
parent 138711c082
commit 50c90cae41
14 changed files with 366 additions and 777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
README.md
View File

@@ -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 ?

9
ascii_elements/banner_1.html
View File

@@ -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>

57
ascii_elements/banner_container.html
View File

@@ -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>

19
ascii_elements/mouse_1.html
View File

@@ -1,19 +0,0 @@
<pre>
•
•• ••••• •••••
••• • • • • ••
•••• • •••• • • • •
•• •• • • • • • • • •
•• •• • • • ••• •••••
•• •• • •• •
•• •• • •• •
•• ••••••••• • • •
•• •• • •••• ••••• •
•• •• • • • • • • •
•• •• • • • • •• • •
•••• • •• •• •• •
••• • ••••••• • • •••
•• • • •••••
•••••••• • • •
</pre>

19
ascii_elements/mouse_2.html
View File

@@ -1,19 +0,0 @@
<pre>
•••• •
• • •
• • •
• •••
•••••
• •
• •
• •
••• •••
• • • •
• • • •
•••• ••••
• • • • •
••• • • •
••••••••
•
</pre>

17
ascii_elements/mouse_3.html
View File

@@ -1,17 +0,0 @@
<pre>
•
•
•• •
• • •••••••
• •• • •
• ••••• • • • •
• • • • • •
• • •• •
• • • •
••• •• ••
• •• • •
• ••••
•• •
•
</pre>

252
ascii_elements/mouse_4.html
View File

@@ -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>

35
ascii_elements/mouse_container.html
View File

@@ -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>

8
ascii_elements/name.html
View File

@@ -1,8 +0,0 @@
<pre>
• • • • ••••• ••••• • ••• • • • •
• • • • • • • • • • •• •• • •
••••• • • • •• • • • ••••• • • • •
• • • • • • • • • • • • • •
• • ••••• ••••• ••••• ••••• • • • • •
</pre>

280
index.html
View File

@@ -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">
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •

16
scripts/build.sh
View File

@@ -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")

53
scripts/load_html.js
View File

@@ -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));
}
},
);

89
scripts/old_load_html.js
View File

@@ -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);

114
style.css Normal file
View File

@@ -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;}
}