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

home: almost finished bibou oracle

Browse source
This commit is contained in:
Agahnim 2026-03-23 16:49:00 +01:00
parent db2000640a
commit c0a0225eaa
Signed by: Agahnim
SSH key fingerprint: SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
7 changed files with 101 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

34
templates/partials/home.html
View file

@ -54,6 +54,14 @@
width="30px" alt="Instagram logo" /></a>
</socials>
<img width="200px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
<bibou-oracle>
<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é" />
</bibou-container>
<bibou-text>
</bibou-text>
</bibou-oracle>
</box>
<box id="newsbox">
<website-news>
@ -81,9 +89,35 @@
<!-- I know I know but I need it for this pretty rainbow flagish animation -->
<script>
<!-- For rainbow text -->
const el = document.querySelector('woopwoop');
const text = el.textContent;
el.innerHTML = text.split('').map((ch, i) =>
`<span style="animation-delay: ${i * 0.08}s">${ch === ' ' ? '&nbsp;' : ch}</span>`
).join('');
const BIBOU_QUOTES = {{bibou_quotes| tojson | safe }};
const txtEl = document.querySelector('bibou-text');
const ctrEl = document.querySelector('bibou-container');
let intervalRef = null;
const ttText = (texte) => {
if (intervalRef) clearInterval(intervalRef);
let accumulated = "";
let index = 0;
intervalRef = setInterval(() => {
if (index < texte.length) {accumulated += texte.charAt(index); txtEl.textContent = accumulated; index++;} else {
clearInterval(intervalRef); intervalRef = null;
}
}, 40);
}; ctrEl.addEventListener('mouseenter', () => {
const quote = BIBOU_QUOTES[Math.floor(Math.random() * BIBOU_QUOTES.length)];
ttText(quote);
});
</script>