Agahnim/agahnim.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

music: wip music page

Browse source
This commit is contained in:
Agahnim 2026-05-13 13:46:43 +02:00
parent 31c58b305c
commit d7009bfe97
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
9 changed files with 74 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

1
templates/partials/home.html
View file

@ -54,6 +54,7 @@
width="30px" alt="Instagram logo" /></a>
</socials>
<img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
<bibou-message>Consult the wisdom of the Bibou, if thou darest...</bibou-message>
<bibou-container>
<img class="boubou" src="/static/assets/images/boubou.webp" alt="Bibou endormi" />
<img class="bibou" src="/static/assets/images/bibou.webp" alt="Bibou éveillé" />

22
templates/partials/music.html
View file

@ -1,5 +1,25 @@
<music>
<vertical-marquee id="bg-text"></vertical-marquee>
<cute-container>
<img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
</cute-container>
</music>
</music>
<script>
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const container = document.getElementById('bg-text');
const colWidth = 20;
const rowHeight = 24;
const cols = Math.ceil(window.innerWidth / colWidth);
const rows = Math.ceil(window.innerHeight / rowHeight);
for (let c = 0; c < cols; c++) {
const col = document.createElement('vertical-marquee-inner');
col.style.left = (c * colWidth) + 'px';
for (let r = 0; r < rows; r++) {
const span = document.createElement('text');
span.textContent = chars[Math.floor(Math.random() * chars.length)];
col.appendChild(span);
}
container.appendChild(col);
}
</script>