global: add formatter
This commit is contained in:
parent
d7009bfe97
commit
6520649bb1
SSH key fingerprint:
SHA256:Zj65PJnE0dRYye8Ltk/qDglynyXUxJngQ9qqx/VI+b4
19 changed files with 3925 additions and 288 deletions
|
|
@ -1,91 +1,95 @@
|
|||
<!-- Welcome!! -->
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, interactive-widget=resizes-content"
|
||||
/>
|
||||
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif" />
|
||||
<!-- <title>Ａｇａｈｎｉｍ</title> -->
|
||||
<title>Agahnim proto</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=DotGothic16&family=VT323&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
<script>
|
||||
htmx.config.scrollIntoViewOnBoost = false;
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, interactive-widget=resizes-content" />
|
||||
<link rel="icon" type="image/gif" href="/static/assets/gifs/pcgif.gif">
|
||||
<!-- <title>Ａｇａｈｎｉｍ</title> -->
|
||||
<title>Agahnim proto</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DotGothic16&family=VT323&display=swap">
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
<script src="/static/vendor/htmx.min.js"></script>
|
||||
<script>
|
||||
htmx.config.scrollIntoViewOnBoost = false;
|
||||
</script>
|
||||
</head>
|
||||
<body hx-boost="true" hx-target="#content">
|
||||
<crt>
|
||||
<!-- They won't ever disappear -->
|
||||
<persistent-ui>
|
||||
{% include "partials/header.html" %}
|
||||
<miniplayer-container id="miniplayer-container">
|
||||
{% block miniplayer %}{% endblock %}
|
||||
</miniplayer-container>
|
||||
</persistent-ui>
|
||||
|
||||
<body hx-boost="true" hx-target="#content">
|
||||
<crt>
|
||||
<!-- They won't ever disappear -->
|
||||
<persistent-ui>
|
||||
{% include "partials/header.html" %}
|
||||
<miniplayer-container id="miniplayer-container">
|
||||
{% block miniplayer %}{% endblock %}
|
||||
</miniplayer-container>
|
||||
</persistent-ui>
|
||||
<!-- Will get swapped by HTMX-->
|
||||
<main id="content">{% block content %}{% endblock %}</main>
|
||||
</crt>
|
||||
|
||||
<!-- Will get swapped by HTMX-->
|
||||
<main id="content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</crt>
|
||||
|
||||
<!-- Noooooooooooooooooooooooooo -->
|
||||
<script src="/static/miniplayer.js"></script>
|
||||
<script src="/static/contextmenu.js"></script>
|
||||
<script>
|
||||
function updateMiniplayerVisibility() {
|
||||
const isMusicPage = window.location.pathname === '/music';
|
||||
const miniplayer = document.getElementById('miniplayer-container');
|
||||
if (miniplayer) {
|
||||
miniplayer.style.display = isMusicPage ? 'none' : '';
|
||||
<!-- Noooooooooooooooooooooooooo -->
|
||||
<script src="/static/miniplayer.js"></script>
|
||||
<script src="/static/contextmenu.js"></script>
|
||||
<script>
|
||||
function updateMiniplayerVisibility() {
|
||||
const isMusicPage = window.location.pathname === "/music";
|
||||
const miniplayer = document.getElementById("miniplayer-container");
|
||||
if (miniplayer) {
|
||||
miniplayer.style.display = isMusicPage ? "none" : "";
|
||||
}
|
||||
if (isMusicPage) {
|
||||
const audio = document.querySelector("mini-player audio");
|
||||
if (audio) audio.pause();
|
||||
}
|
||||
}
|
||||
if (isMusicPage) {
|
||||
const audio = document.querySelector('mini-player audio');
|
||||
if (audio) audio.pause();
|
||||
|
||||
function updateNavState() {
|
||||
const path = window.location.pathname;
|
||||
document
|
||||
.querySelectorAll('navbar input[type="radio"]')
|
||||
.forEach((radio) => {
|
||||
radio.checked = false;
|
||||
});
|
||||
if (path === "/home") {
|
||||
const homeRadio = document.getElementById("nav-home");
|
||||
if (homeRadio) homeRadio.checked = true;
|
||||
} else if (path === "/music") {
|
||||
const musicRadio = document.getElementById("nav-music");
|
||||
if (musicRadio) musicRadio.checked = true;
|
||||
} else if (path === "/blog") {
|
||||
const blogRadio = document.getElementById("nav-blog");
|
||||
if (blogRadio) blogRadio.checked = true;
|
||||
} else if (path === "/about") {
|
||||
const aboutRadio = document.getElementById("nav-about");
|
||||
if (aboutRadio) aboutRadio.checked = true;
|
||||
} else if (path === "/projects") {
|
||||
const projectsRadio = document.getElementById("nav-projects");
|
||||
if (projectsRadio) projectsRadio.checked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavState() {
|
||||
const path = window.location.pathname;
|
||||
document.querySelectorAll('navbar input[type="radio"]').forEach(radio => {
|
||||
radio.checked = false;
|
||||
});
|
||||
if (path === '/home') {
|
||||
const homeRadio = document.getElementById('nav-home');
|
||||
if (homeRadio) homeRadio.checked = true;
|
||||
} else if (path === '/music') {
|
||||
const musicRadio = document.getElementById('nav-music');
|
||||
if (musicRadio) musicRadio.checked = true;
|
||||
} else if (path === "/blog") {
|
||||
const blogRadio = document.getElementById('nav-blog');
|
||||
if (blogRadio) blogRadio.checked = true;
|
||||
} else if (path === "/about") {
|
||||
const aboutRadio = document.getElementById('nav-about');
|
||||
if (aboutRadio) aboutRadio.checked = true;
|
||||
} else if (path === "/projects") {
|
||||
const projectsRadio = document.getElementById('nav-projects');
|
||||
if (projectsRadio) projectsRadio.checked = true;
|
||||
function closeMobileMenu() {
|
||||
const checkbox = document.getElementById("nav-toggle-checkbox");
|
||||
if (checkbox) checkbox.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
const checkbox = document.getElementById('nav-toggle-checkbox');
|
||||
if (checkbox) checkbox.checked = false;
|
||||
}
|
||||
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', () => {
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
closeMobileMenu();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
document.body.addEventListener("htmx:afterSwap", () => {
|
||||
updateMiniplayerVisibility();
|
||||
updateNavState();
|
||||
closeMobileMenu();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% include "partials/home.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block miniplayer %}
|
||||
{% include "partials/miniplayer.html" %}
|
||||
{% extends "base.html" %} {% block content %} {% include "partials/home.html" %}
|
||||
{% endblock %} {% block miniplayer %} {% include "partials/miniplayer.html" %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% include "partials/music.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block miniplayer %}
|
||||
{% include "partials/miniplayer.html" %}
|
||||
{% endblock %}
|
||||
{% extends "base.html" %} {% block content %} {% include "partials/music.html"
|
||||
%} {% endblock %} {% block miniplayer %} {% include "partials/miniplayer.html"
|
||||
%} {% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,2 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
{% include "partials/notfound.html" %}
|
||||
{% endblock %}
|
||||
{% extends "base.html" %} {% block content %} {% include
|
||||
"partials/notfound.html" %} {% endblock %}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<navbar>
|
||||
<input type="checkbox" id="nav-toggle-checkbox">
|
||||
<input type="checkbox" id="nav-toggle-checkbox" />
|
||||
<navbar-toggle>
|
||||
<label for="nav-toggle-checkbox" class="hamburger">
|
||||
<span></span>
|
||||
|
|
@ -9,15 +9,15 @@
|
|||
</navbar-toggle>
|
||||
<navbar-content>
|
||||
<a href="/home">Home</a>
|
||||
<input type="radio" name="nav" id="nav-home" checked>
|
||||
<input type="radio" name="nav" id="nav-home" checked />
|
||||
<a href="/about">About me</a>
|
||||
<input type="radio" name="nav" id="nav-about">
|
||||
<input type="radio" name="nav" id="nav-about" />
|
||||
<a href="/blog">Blog</a>
|
||||
<input type="radio" name="nav" id="nav-blog">
|
||||
<input type="radio" name="nav" id="nav-blog" />
|
||||
<a href="/projects">Projects</a>
|
||||
<input type="radio" name="nav" id="nav-projects">
|
||||
<input type="radio" name="nav" id="nav-projects" />
|
||||
<a href="/music">Music</a>
|
||||
<input type="radio" name="nav" id="nav-music">
|
||||
<input type="radio" name="nav" id="nav-music" />
|
||||
</navbar-content>
|
||||
<pink-statusbar>
|
||||
<status-dot></status-dot>
|
||||
|
|
@ -27,18 +27,18 @@
|
|||
</navbar>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const dateEl = document.querySelector('current-date');
|
||||
if (dateEl) {
|
||||
const update = () => {
|
||||
const now = new Date();
|
||||
const h = String(now.getHours()).padStart(2, '0');
|
||||
const m = String(now.getMinutes()).padStart(2, '0');
|
||||
const s = String(now.getSeconds()).padStart(2, '0');
|
||||
dateEl.textContent = `${h}:${m}:${s}`;
|
||||
};
|
||||
update();
|
||||
setInterval(update, 1000);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
(function () {
|
||||
const dateEl = document.querySelector("current-date");
|
||||
if (dateEl) {
|
||||
const update = () => {
|
||||
const now = new Date();
|
||||
const h = String(now.getHours()).padStart(2, "0");
|
||||
const m = String(now.getMinutes()).padStart(2, "0");
|
||||
const s = String(now.getSeconds()).padStart(2, "0");
|
||||
dateEl.textContent = `${h}:${m}:${s}`;
|
||||
};
|
||||
update();
|
||||
setInterval(update, 1000);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,85 +1,142 @@
|
|||
<home-content>
|
||||
<welcome>
|
||||
<img src="/static/assets/images/welcome.webp" width="400px" alt="A welcome text in pink" />
|
||||
<img
|
||||
src="/static/assets/images/welcome.webp"
|
||||
width="400px"
|
||||
alt="A welcome text in pink"
|
||||
/>
|
||||
<marquee>
|
||||
{% for _ in 0..12 %}
|
||||
彡★Welcome to my little corner of the Web★彡
|
||||
{% endfor %}
|
||||
{% for _ in 0..12 %} 彡★Welcome to my little corner of the
|
||||
Web★彡 {% endfor %}
|
||||
</marquee>
|
||||
</welcome>
|
||||
<boxes>
|
||||
<box id="bigbox">
|
||||
Thank you for visiting my <woopwoop>brand new</woopwoop> website !
|
||||
For now it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure you will see
|
||||
changes if you come back from time to time :)
|
||||
<br /><br />
|
||||
Thank you for visiting my <woopwoop>brand new</woopwoop> website ! For now
|
||||
it's still a <darkerer-pink>work in progress</darkerer-pink> but I'm sure
|
||||
you will see changes if you come back from time to time :) <br /><br />
|
||||
My name is <darkerer-pink>Agahnim</darkerer-pink>
|
||||
<pronouns>she/her</pronouns>,
|
||||
I'm a <darkerer-pink>developer</darkerer-pink> and <darkerer-pink>music producer</darkerer-pink> from
|
||||
<darkerer-pink>France</darkerer-pink> !
|
||||
<br /><br />
|
||||
I created this website not just to <darkerer-pink>improve</darkerer-pink> my
|
||||
web development
|
||||
skills, but also because it's <boing>fun</boing>
|
||||
to
|
||||
build a project like this. It's a small, personal space on the internet, away from the social climate, which is
|
||||
getting <shitty>worse and worse.</shitty>
|
||||
<br /><br />
|
||||
This website is inspired by the <darkerer-pink>vaporwave
|
||||
aesthetic</darkerer-pink> and
|
||||
the old
|
||||
PCs I used to tinker with when I was a kid.
|
||||
I always liked this type of aesthetic and the mix of melancholy of comfort it brings me.
|
||||
It feels good to bring that vibe into one of my projects.
|
||||
<pronouns>she/her</pronouns>, I'm a
|
||||
<darkerer-pink>developer</darkerer-pink> and
|
||||
<darkerer-pink>music producer</darkerer-pink> from
|
||||
<darkerer-pink>France</darkerer-pink> ! <br /><br />
|
||||
I created this website not just to
|
||||
<darkerer-pink>improve</darkerer-pink> my web development skills, but also
|
||||
because it's <boing>fun</boing> to build a project like this. It's a
|
||||
small, personal space on the internet, away from the social climate, which
|
||||
is getting <shitty>worse and worse.</shitty> <br /><br />
|
||||
This website is inspired by the
|
||||
<darkerer-pink>vaporwave aesthetic</darkerer-pink> and the old PCs I used
|
||||
to tinker with when I was a kid. I always liked this type of aesthetic and
|
||||
the mix of melancholy of comfort it brings me. It feels good to bring that
|
||||
vibe into one of my projects.
|
||||
<badges>
|
||||
<img src="/static/assets/badges/88x31computer.gif" alt="88x31 pixel art badge with a retro computer" />
|
||||
<img src="/static/assets/badges/cssisawesome.webp" alt="Badge with text 'CSS is Awesome'" />
|
||||
<img src="/static/assets/badges/queer.webp" alt="Queer pride flag badge" />
|
||||
<img width="100px" src="/static/assets/badges/skywardsword.webp"
|
||||
alt="Cover art for The Legend of Zelda Skyward Sword" />
|
||||
<img src="/static/assets/badges/transrightsnow.webp" alt="Trans rights badge with text 'Trans Rights Now'" />
|
||||
<img width="30%" src="/static/assets/badges/kirby.gif" alt="Kirby character animated GIF" />
|
||||
<img width="30%" src="/static/assets/badges/pink.gif" alt="Pink animated pixel art badge" />
|
||||
<img width="30%" src="/static/assets/badges/trans.gif" alt="Trans pride flag animated badge" />
|
||||
<img
|
||||
src="/static/assets/badges/88x31computer.gif"
|
||||
alt="88x31 pixel art badge with a retro computer"
|
||||
/>
|
||||
<img
|
||||
src="/static/assets/badges/cssisawesome.webp"
|
||||
alt="Badge with text 'CSS is Awesome'"
|
||||
/>
|
||||
<img
|
||||
src="/static/assets/badges/queer.webp"
|
||||
alt="Queer pride flag badge"
|
||||
/>
|
||||
<img
|
||||
width="100px"
|
||||
src="/static/assets/badges/skywardsword.webp"
|
||||
alt="Cover art for The Legend of Zelda Skyward Sword"
|
||||
/>
|
||||
<img
|
||||
src="/static/assets/badges/transrightsnow.webp"
|
||||
alt="Trans rights badge with text 'Trans Rights Now'"
|
||||
/>
|
||||
<img
|
||||
width="30%"
|
||||
src="/static/assets/badges/kirby.gif"
|
||||
alt="Kirby character animated GIF"
|
||||
/>
|
||||
<img
|
||||
width="30%"
|
||||
src="/static/assets/badges/pink.gif"
|
||||
alt="Pink animated pixel art badge"
|
||||
/>
|
||||
<img
|
||||
width="30%"
|
||||
src="/static/assets/badges/trans.gif"
|
||||
alt="Trans pride flag animated badge"
|
||||
/>
|
||||
</badges>
|
||||
</box>
|
||||
<box id="smallbox">
|
||||
<socials-header> Socials ! </socials-header>
|
||||
<socials>
|
||||
<a href="https://github.com/naguiagahnim" target="_blank"><img src="/static/assets/icons/github.webp"
|
||||
width="30px" alt="GitHub logo" /></a>
|
||||
<a href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
|
||||
target="_blank"><img src="/static/assets/icons/spotify.webp" width="30px" alt="Spotify logo" /></a>
|
||||
<a href="https://www.instagram.com/agahnim_music/" target="_blank"><img src="/static/assets/icons/insta.webp"
|
||||
width="30px" alt="Instagram logo" /></a>
|
||||
<a href="https://github.com/naguiagahnim" target="_blank"
|
||||
><img
|
||||
src="/static/assets/icons/github.webp"
|
||||
width="30px"
|
||||
alt="GitHub logo"
|
||||
/></a>
|
||||
<a
|
||||
href="https://open.spotify.com/intl-fr/artist/4BPUhsH6krKkCNFrdMZnZF?si=E3luyIf0S_yfJRmm82S5OA"
|
||||
target="_blank"
|
||||
><img
|
||||
src="/static/assets/icons/spotify.webp"
|
||||
width="30px"
|
||||
alt="Spotify logo"
|
||||
/></a>
|
||||
<a href="https://www.instagram.com/agahnim_music/" target="_blank"
|
||||
><img
|
||||
src="/static/assets/icons/insta.webp"
|
||||
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>
|
||||
<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é" />
|
||||
<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-text> </bibou-text>
|
||||
</box>
|
||||
<box id="newsbox">
|
||||
<website-news>
|
||||
<img width="70%" src="/static/assets/gifs/updates.gif" alt="Animated text 'Updates'" />
|
||||
<img
|
||||
width="70%"
|
||||
src="/static/assets/gifs/updates.gif"
|
||||
alt="Animated text 'Updates'"
|
||||
/>
|
||||
|
||||
{% for article in news %}
|
||||
<article-entry>
|
||||
<time datetime="{{ article.date }}">
|
||||
{{ article.date.format("%d/%m/%Y") }}
|
||||
</time>
|
||||
<article-body>
|
||||
{{ article.body }}
|
||||
</article-body>
|
||||
<img width="300px" src="/static/assets/gifs/divider2.gif" alt="Decorative divider" />
|
||||
<article-body> {{ article.body }} </article-body>
|
||||
<img
|
||||
width="300px"
|
||||
src="/static/assets/gifs/divider2.gif"
|
||||
alt="Decorative divider"
|
||||
/>
|
||||
</article-entry>
|
||||
{% else %}
|
||||
<ominous-message>
|
||||
Nothing to see here, for now...
|
||||
</ominous-message>
|
||||
<ominous-message> Nothing to see here, for now... </ominous-message>
|
||||
{% endfor %}
|
||||
</website-news>
|
||||
</box>
|
||||
|
|
@ -127,4 +184,4 @@
|
|||
ttText(quote);
|
||||
});
|
||||
}) ();
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,31 +13,78 @@
|
|||
</title-bar>
|
||||
|
||||
<progress-bar-container>
|
||||
<input class="progress-input" type="range" min="0" max="0" value="0" step="0.01" />
|
||||
<input
|
||||
class="progress-input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="0"
|
||||
value="0"
|
||||
step="0.01"
|
||||
/>
|
||||
</progress-bar-container>
|
||||
|
||||
<controls-bar>
|
||||
<transport-controls>
|
||||
<button data-action="prev" aria-label="Previous">
|
||||
<img src="/static/assets/svgs/skip-back.svg" width="12" height="12" alt="Skip back" />
|
||||
<img
|
||||
src="/static/assets/svgs/skip-back.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
alt="Skip back"
|
||||
/>
|
||||
</button>
|
||||
<button data-action="play" aria-label="Play/Pause">
|
||||
<img class="play-icon" src="/static/assets/svgs/play.svg" width="12" height="12" alt="Play" />
|
||||
<img class="pause-icon" src="/static/assets/svgs/pause.svg" width="12" height="12" alt="Pause" style="display: none;" />
|
||||
<img
|
||||
class="play-icon"
|
||||
src="/static/assets/svgs/play.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
alt="Play"
|
||||
/>
|
||||
<img
|
||||
class="pause-icon"
|
||||
src="/static/assets/svgs/pause.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
alt="Pause"
|
||||
style="display: none"
|
||||
/>
|
||||
</button>
|
||||
<button data-action="next" aria-label="Next">
|
||||
<img src="/static/assets/svgs/skip-forward.svg" width="12" height="12" alt="Skip forward" />
|
||||
<img
|
||||
src="/static/assets/svgs/skip-forward.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
alt="Skip forward"
|
||||
/>
|
||||
</button>
|
||||
</transport-controls>
|
||||
<volume-controls>
|
||||
<img src="/static/assets/svgs/volume-2.svg" width="12" height="12" alt="Volume" />
|
||||
<input class="volume-input" type="range" min="0" max="1" step="0.01" value="0.7" />
|
||||
<img
|
||||
src="/static/assets/svgs/volume-2.svg"
|
||||
width="12"
|
||||
height="12"
|
||||
alt="Volume"
|
||||
/>
|
||||
<input
|
||||
class="volume-input"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value="0.7"
|
||||
/>
|
||||
</volume-controls>
|
||||
</controls-bar>
|
||||
|
||||
<audio hidden>
|
||||
{% for track in tracks %}
|
||||
<source src="{{ track.src }}" data-index="{{ loop.index0 }}" data-title="{{ track.title }}" data-artist="{{ track.artist }}" />
|
||||
<source
|
||||
src="{{ track.src }}"
|
||||
data-index="{{ loop.index0 }}"
|
||||
data-title="{{ track.title }}"
|
||||
data-artist="{{ track.artist }}"
|
||||
/>
|
||||
{% endfor %}
|
||||
</audio>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
</music>
|
||||
<script>
|
||||
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
const container = document.getElementById('bg-text');
|
||||
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';
|
||||
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');
|
||||
const span = document.createElement("text");
|
||||
span.textContent = chars[Math.floor(Math.random() * chars.length)];
|
||||
col.appendChild(span);
|
||||
}
|
||||
container.appendChild(col);
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
<katcenkat>
|
||||
<img src="/static/assets/images/notfound.webp" alt="Pink text, 404 Not Found" />
|
||||
<img src="/static/assets/images/leuf.webp" alt="A drawing depicting a cute but fat cat" />
|
||||
</katcenkat>
|
||||
<img
|
||||
src="/static/assets/images/notfound.webp"
|
||||
alt="Pink text, 404 Not Found"
|
||||
/>
|
||||
<img
|
||||
src="/static/assets/images/leuf.webp"
|
||||
alt="A drawing depicting a cute but fat cat"
|
||||
/>
|
||||
</katcenkat>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue