hange to svg

This commit is contained in:
zyqunix 2025-05-03 13:01:36 +02:00
parent 5e8f63d6c3
commit 11b71edc46
No known key found for this signature in database
GPG key ID: 134A8DEEA83B80E6
7 changed files with 57 additions and 12 deletions

9
bio/assets/backwards.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 16 KiB

9
bio/assets/forward.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 17 KiB

6
bio/assets/pause.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.989" fill="#ffffff" d="M 109.5,-0.5 C 117.5,-0.5 125.5,-0.5 133.5,-0.5C 164.186,6.35023 183.686,25.0169 192,55.5C 193.155,122.141 193.655,188.807 193.5,255.5C 193.655,322.193 193.155,388.859 192,455.5C 183.686,485.983 164.186,504.65 133.5,511.5C 125.5,511.5 117.5,511.5 109.5,511.5C 73.7039,502.963 53.8706,480.296 50,443.5C 49.3333,318.167 49.3333,192.833 50,67.5C 53.8706,30.7036 73.7039,8.03692 109.5,-0.5 Z"/></g>
<g><path style="opacity:0.989" fill="#ffffff" d="M 377.5,-0.5 C 385.5,-0.5 393.5,-0.5 401.5,-0.5C 437.597,8.30243 457.43,31.3024 461,68.5C 461.667,193.167 461.667,317.833 461,442.5C 457.43,479.698 437.597,502.698 401.5,511.5C 393.5,511.5 385.5,511.5 377.5,511.5C 346.814,504.65 327.314,485.983 319,455.5C 317.845,388.859 317.345,322.193 317.5,255.5C 317.345,188.807 317.845,122.141 319,55.5C 327.314,25.0169 346.814,6.35023 377.5,-0.5 Z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

5
bio/assets/play.svg Normal file
View file

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path style="opacity:0.995" fill="#ffffff" d="M 47.5,-0.5 C 52.1667,-0.5 56.8333,-0.5 61.5,-0.5C 198.065,77.4539 334.398,155.954 470.5,235C 480.366,243.134 483.199,253.301 479,265.5C 476.925,269.579 474.092,273.079 470.5,276C 334.398,355.046 198.065,433.546 61.5,511.5C 56.8333,511.5 52.1667,511.5 47.5,511.5C 39.5191,508.351 34.0191,502.684 31,494.5C 30.3333,335.167 30.3333,175.833 31,16.5C 34.0191,8.31563 39.5191,2.64896 47.5,-0.5 Z"/></g>
</svg>

After

Width:  |  Height:  |  Size: 868 B

View file

@ -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 = '<img id="plIcon" src="./assets/pause.svg">';
const icon = document.getElementById('plIcon');
playPauseButton.addEventListener("click", () => {
if (isPlaying) {
videoPlayer.pause();
playPauseButton.innerHTML = "&#9658;";
icon.src = "./assets/play.svg";
} else {
videoPlayer.play();
playPauseButton.innerHTML = "&#10074;&#10074;";
} isPlaying = ! isPlaying;
icon.src = "./assets/pause.svg";
}
isPlaying = !isPlaying;
});
videoPlayer.addEventListener("ended", () => {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);

View file

@ -17,7 +17,7 @@
<body>
<script src="https://cdn.jsdelivr.net/gh/0x5841524f4e/js-lanyard/lanyard.js"></script>
<script disable-devtool-auto="" src="https://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
<script disable-devtool-auto="" src="htps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
<div class="video-container">
<video id="videoPlayer"></video>
@ -106,9 +106,9 @@
</div>
</div>
<div class="controls">
<button id="prev">&#171;</button>
<button id="playPause">&#9658;</button>
<button id="next">&#187;</button>
<button id="prev"><img id="bkIcon" src="./assets/backwards.svg"></button>
<button id="playPause"><img id="plIcon" src="./assets/pause.svg"></button>
<button id="next"><img id="fwIcon" src="./assets/forward.svg"></button>
</div>
<div class="volume">
<div class="volume-control">
@ -128,10 +128,10 @@
<div id="cursoreffectelement"></div>
<script src="index.js"></script>
<script src="audio.js"></script>
<script src="particle.js"></script>
<script src="lanyard.js"></script>
<script src="./index.js"></script>
<script src="./audio.js"></script>
<script src="./particle.js"></script>
<script src="./lanyard.js"></script>
</body>

View file

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