From 11b71edc46a6d4cff011d5dfa1017d2dfb904274 Mon Sep 17 00:00:00 2001 From: zyqunix <117040076+zyqunix@users.noreply.github.com> Date: Sat, 3 May 2025 13:01:36 +0200 Subject: [PATCH] hange to svg --- bio/assets/backwards.svg | 9 +++++++++ bio/assets/forward.svg | 9 +++++++++ bio/assets/pause.svg | 6 ++++++ bio/assets/play.svg | 5 +++++ bio/audio.js | 12 ++++++++---- bio/index.html | 16 ++++++++-------- bio/style.css | 12 ++++++++++++ 7 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 bio/assets/backwards.svg create mode 100644 bio/assets/forward.svg create mode 100644 bio/assets/pause.svg create mode 100644 bio/assets/play.svg diff --git a/bio/assets/backwards.svg b/bio/assets/backwards.svg new file mode 100644 index 0000000..ac76f04 --- /dev/null +++ b/bio/assets/backwards.svg @@ -0,0 +1,9 @@ + + fast-forward + + + + + + diff --git a/bio/assets/forward.svg b/bio/assets/forward.svg new file mode 100644 index 0000000..06a74df --- /dev/null +++ b/bio/assets/forward.svg @@ -0,0 +1,9 @@ + + fast-forward + + + + + + \ No newline at end of file diff --git a/bio/assets/pause.svg b/bio/assets/pause.svg new file mode 100644 index 0000000..787de38 --- /dev/null +++ b/bio/assets/pause.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/bio/assets/play.svg b/bio/assets/play.svg new file mode 100644 index 0000000..7219eb6 --- /dev/null +++ b/bio/assets/play.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/bio/audio.js b/bio/audio.js index bb968b8..987a3bc 100644 --- a/bio/audio.js +++ b/bio/audio.js @@ -1,6 +1,6 @@ const songs = [ { - song: "Yabujin - Open", + song: "YABUJIN - Open", src: "https://easyfiles.cc/2025/5/5a9bf2f5-3844-4e0c-8dfb-943012f4acd8/YABUJIN%20-%20open.mp4", duration: 123 }, @@ -81,16 +81,20 @@ document.getElementById("next").addEventListener("click", () => { } }); +playPauseButton.innerHTML = ''; +const icon = document.getElementById('plIcon'); playPauseButton.addEventListener("click", () => { if (isPlaying) { videoPlayer.pause(); - playPauseButton.innerHTML = "►"; + icon.src = "./assets/play.svg"; } else { videoPlayer.play(); - playPauseButton.innerHTML = "❚❚"; - } isPlaying = ! isPlaying; + icon.src = "./assets/pause.svg"; + } + isPlaying = !isPlaying; }); + videoPlayer.addEventListener("ended", () => { currentSongIndex = (currentSongIndex + 1) % songs.length; loadSong(currentSongIndex); diff --git a/bio/index.html b/bio/index.html index 4783a53..7358424 100644 --- a/bio/index.html +++ b/bio/index.html @@ -17,7 +17,7 @@ - +
@@ -106,9 +106,9 @@
- - - + + +
@@ -128,10 +128,10 @@
- - - - + + + + diff --git a/bio/style.css b/bio/style.css index 1ae21aa..88cddf6 100644 --- a/bio/style.css +++ b/bio/style.css @@ -541,3 +541,15 @@ div[id="name"]::after { transition: 1s; } } + +#bkIcon, +#fwIcon { + filter: invert(100%); + transition: 0.1s; + margin: 5px; +} + +#bkIcon:not(:hover), +#fwIcon:not(:hover) { + filter: invert(1) brightness(86.6%) grayscale(1) !important; +}