Skip to content

Commit

Permalink
Updated some more stuff (please work)
Browse files Browse the repository at this point in the history
  • Loading branch information
tay committed Sep 30, 2024
1 parent 295bb5c commit 42104a7
Show file tree
Hide file tree
Showing 5 changed files with 254 additions and 123 deletions.
185 changes: 125 additions & 60 deletions content/about/index.html
Original file line number Diff line number Diff line change
@@ -1,64 +1,129 @@
<link rel="stylesheet" href="/assets/css/about/style.css">
<link rel="stylesheet" href="/assets/css/about/style.css" />
<main>
<div class="about">
<div>
<body>
<div class="content">
<h1>Hiya, Call me Tee!</h1>
<iframe width="570" height="212" src="https://lanyard.cnrad.dev/api/1050531216589332581"
frameborder="0" allowfullscreen="false" style="margin-left: 35px;"></iframe>
<!-- <h4>Someone told me I had shit taste in music when I showed them this song, so I put it on my website, Fuck you.</h4> -->
<div id="images">
<a href="https://discord.com/users/1050531216589332581" target="_blank"><img
src="/assets/imgs/discord.png" class="social-logo" alt="Discord"></a>
<a href="https://github.com/tayrp" target="_blank"><img src="/assets/imgs/github.png"
class="social-logo" alt="Github"></a>
<a href="https://discord.gg/gjypyNkPPp" target="_blank"><img src="/assets/imgs/haven.png"
class="social-logo" alt="Haven"></a>
<a href="https://www.last.fm/user/MystixMew" target="_blank"><img src="/assets/imgs/lastfm.png"
class="social-logo" alt="Last.fm"></a>
<a href="https://www.youtube.com/@MystixMew" target="_blank"><img src="/assets/imgs/youtube.png"
class="social-logo" alt="YouTube"></a>
<!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
</div>
</div>
<video autoplay loop id="aboutvideo">
<source src="https://index.havenmc.org/website/assets/mp4/candycoatedlies.mp4" type="video/mp4">
This browser does not support HTML5 video or the server is offline.
</video>
<div class="about">
<div>
<body>
<div class="content">
<h1>Hiya, Call me Tee!</h1>
<iframe
width="570"
height="212"
src="https://lanyard.cnrad.dev/api/1050531216589332581"
frameborder="0"
allowfullscreen="false"
style="margin-left: 35px"
></iframe>
<!-- <h4>Someone told me I had shit taste in music when I showed them this song, so I put it on my website, Fuck you.</h4> -->
<div id="images">
<a
href="https://discord.com/users/1050531216589332581"
target="_blank"
><img
src="/assets/imgs/discord.png"
class="social-logo"
alt="Discord"
/></a>
<a href="https://github.com/tayrp" target="_blank"
><img
src="/assets/imgs/github.png"
class="social-logo"
alt="Github"
/></a>
<a href="https://discord.gg/gjypyNkPPp" target="_blank"
><img
src="/assets/imgs/haven.png"
class="social-logo"
alt="Haven"
/></a>
<a href="https://www.last.fm/user/MystixMew" target="_blank"
><img
src="/assets/imgs/lastfm.png"
class="social-logo"
alt="Last.fm"
/></a>
<a href="https://www.youtube.com/@MystixMew" target="_blank"
><img
src="/assets/imgs/youtube.png"
class="social-logo"
alt="YouTube"
/></a>
<!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
</div>
</div>
<video autoplay loop id="aboutvideo">
<source
src="https://index.havenmc.org/website/assets/mp4/candycoatedlies.mp4"
type="video/mp4"
/>
This browser does not support HTML5 video or the server is offline.
</video>

<label for="volumeControl">Volume:</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.25">
<span id="volumePercentage">1%</span>
<a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">▐▐</a></p>
<label for="volumeControl">Volume:</label>
<input
type="range"
id="volumeControl"
min="0"
max="1"
step="0.01"
value="0.25"
/>
<span id="volumePercentage">1%</span>
<a
class="btn btn-link-3"
id="aboutpauseBtn"
onclick="togglePause()"
style="
font-size: 27px;
padding: 0;
width: 30px;
height: 30px;
line-height: 27px;
display: inline-block;
text-align: center;
position: relative;
top: -2px;
"
></a
>
<script>
var video = document.getElementById("aboutvideo");
var btn = document.getElementById("aboutpauseBtn");
var volumeControl = document.getElementById("volumeControl");
var volumePercentage = document.getElementById("volumePercentage");
video.volume = volumeControl.value;
volumePercentage.innerHTML =
Math.round(volumeControl.value * 100) + "%";

<script>
var video = document.getElementById("aboutvideo");
var btn = document.getElementById("aboutpauseBtn");
var volumeControl = document.getElementById("volumeControl");
var volumePercentage = document.getElementById("volumePercentage");
function togglePause() {
var btn = document.getElementById("aboutpauseBtn");

// Initialize the video volume and percentage display
video.volume = volumeControl.value; // Set initial volume based on the slider value
volumePercentage.innerHTML = Math.round(volumeControl.value * 100) + "%"; // Set initial percentage

function togglePause() {
if (video.paused) {
video.play();
btn.innerHTML = "▐▐";
} else {
video.pause();
btn.innerHTML = "▶";
}
}

volumeControl.addEventListener("input", function () {
video.volume = volumeControl.value;
var percentage = Math.round(volumeControl.value * 100);
volumePercentage.innerHTML = percentage + "%";
});
</script>
</body>
</div>
</div>
</main>
if (video.paused) {
video.play();
btn.innerHTML = "⏸";
btn.style.fontSize = "27px";
btn.style.padding = "0";
btn.style.width = "30px";
btn.style.height = "30px";
btn.style.lineHeight = "30px";
btn.style.textAlign = "center";
} else {
video.pause();
btn.innerHTML = "⏵";
btn.style.fontSize = "27px";
btn.style.padding = "0";
btn.style.width = "30px";
btn.style.height = "30px";
btn.style.lineHeight = "27px";
btn.style.textAlign = "center";
}
}
volumeControl.addEventListener("input", function () {
video.volume = volumeControl.value;
var percentage = Math.round(volumeControl.value * 100);
volumePercentage.innerHTML = percentage + "%";
});
</script>
</body>
</div>
</div>
</main>
186 changes: 126 additions & 60 deletions public/about/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -66,70 +66,136 @@
</nav>


<main><link rel="stylesheet" href="/assets/css/about/style.css">
<main><link rel="stylesheet" href="/assets/css/about/style.css" />
<main>
<div class="about">
<div>
<body>
<div class="content">
<h1>Hiya, Call me Tee!</h1>
<iframe width="570" height="212" src="https://lanyard.cnrad.dev/api/1050531216589332581"
frameborder="0" allowfullscreen="false" style="margin-left: 35px;"></iframe>
<!-- <h4>Someone told me I had shit taste in music when I showed them this song, so I put it on my website, Fuck you.</h4> -->
<div id="images">
<a href="https://discord.com/users/1050531216589332581" target="_blank"><img
src="/assets/imgs/discord.png" class="social-logo" alt="Discord"></a>
<a href="https://github.com/tayrp" target="_blank"><img src="/assets/imgs/github.png"
class="social-logo" alt="Github"></a>
<a href="https://discord.gg/gjypyNkPPp" target="_blank"><img src="/assets/imgs/haven.png"
class="social-logo" alt="Haven"></a>
<a href="https://www.last.fm/user/MystixMew" target="_blank"><img src="/assets/imgs/lastfm.png"
class="social-logo" alt="Last.fm"></a>
<a href="https://www.youtube.com/@MystixMew" target="_blank"><img src="/assets/imgs/youtube.png"
class="social-logo" alt="YouTube"></a>
<!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
</div>
</div>
<video autoplay loop id="aboutvideo">
<source src="https://index.havenmc.org/website/assets/mp4/candycoatedlies.mp4" type="video/mp4">
This browser does not support HTML5 video or the server is offline.
</video>

<label for="volumeControl">Volume:</label>
<input type="range" id="volumeControl" min="0" max="1" step="0.01" value="0.25">
<span id="volumePercentage">1%</span>
<a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">▐▐</a></p>

<script>
var video = document.getElementById("aboutvideo");
var btn = document.getElementById("aboutpauseBtn");
var volumeControl = document.getElementById("volumeControl");
var volumePercentage = document.getElementById("volumePercentage");
<div class="about">
<div>
<body>
<div class="content">
<h1>Hiya, Call me Tee!</h1>
<iframe
width="570"
height="212"
src="https://lanyard.cnrad.dev/api/1050531216589332581"
frameborder="0"
allowfullscreen="false"
style="margin-left: 35px"
></iframe>
<!-- <h4>Someone told me I had shit taste in music when I showed them this song, so I put it on my website, Fuck you.</h4> -->
<div id="images">
<a
href="https://discord.com/users/1050531216589332581"
target="_blank"
><img
src="/assets/imgs/discord.png"
class="social-logo"
alt="Discord"
/></a>
<a href="https://github.com/tayrp" target="_blank"
><img
src="/assets/imgs/github.png"
class="social-logo"
alt="Github"
/></a>
<a href="https://discord.gg/gjypyNkPPp" target="_blank"
><img
src="/assets/imgs/haven.png"
class="social-logo"
alt="Haven"
/></a>
<a href="https://www.last.fm/user/MystixMew" target="_blank"
><img
src="/assets/imgs/lastfm.png"
class="social-logo"
alt="Last.fm"
/></a>
<a href="https://www.youtube.com/@MystixMew" target="_blank"
><img
src="/assets/imgs/youtube.png"
class="social-logo"
alt="YouTube"
/></a>
<!-- <a class="btn btn-link-3" button id="aboutpauseBtn" onclick="togglePause()">⏸️</a></p> -->
</div>
</div>
<video autoplay loop id="aboutvideo">
<source
src="https://index.havenmc.org/website/assets/mp4/candycoatedlies.mp4"
type="video/mp4"
/>
This browser does not support HTML5 video or the server is offline.
</video>

// Initialize the video volume and percentage display
video.volume = volumeControl.value; // Set initial volume based on the slider value
volumePercentage.innerHTML = Math.round(volumeControl.value * 100) + "%"; // Set initial percentage
<label for="volumeControl">Volume:</label>
<input
type="range"
id="volumeControl"
min="0"
max="1"
step="0.01"
value="0.25"
/>
<span id="volumePercentage">1%</span>
<a
class="btn btn-link-3"
id="aboutpauseBtn"
onclick="togglePause()"
style="
font-size: 27px;
padding: 0;
width: 30px;
height: 30px;
line-height: 27px;
display: inline-block;
text-align: center;
position: relative;
top: -2px;
"
></a
>
<script>
var video = document.getElementById("aboutvideo");
var btn = document.getElementById("aboutpauseBtn");
var volumeControl = document.getElementById("volumeControl");
var volumePercentage = document.getElementById("volumePercentage");
video.volume = volumeControl.value;
volumePercentage.innerHTML =
Math.round(volumeControl.value * 100) + "%";

function togglePause() {
if (video.paused) {
video.play();
btn.innerHTML = "▐▐";
} else {
video.pause();
btn.innerHTML = "▶";
}
}
function togglePause() {
var btn = document.getElementById("aboutpauseBtn");

volumeControl.addEventListener("input", function () {
video.volume = volumeControl.value;
var percentage = Math.round(volumeControl.value * 100);
volumePercentage.innerHTML = percentage + "%";
});
</script>
</body>
</div>
</div>
</main></main>
if (video.paused) {
video.play();
btn.innerHTML = "⏸";
btn.style.fontSize = "27px";
btn.style.padding = "0";
btn.style.width = "30px";
btn.style.height = "30px";
btn.style.lineHeight = "30px";
btn.style.textAlign = "center";
} else {
video.pause();
btn.innerHTML = "⏵";
btn.style.fontSize = "27px";
btn.style.padding = "0";
btn.style.width = "30px";
btn.style.height = "30px";
btn.style.lineHeight = "27px";
btn.style.textAlign = "center";
}
}
volumeControl.addEventListener("input", function () {
video.volume = volumeControl.value;
var percentage = Math.round(volumeControl.value * 100);
volumePercentage.innerHTML = percentage + "%";
});
</script>
</body>
</div>
</div>
</main>
</main>

<footer>
<div class="container">
Expand Down
2 changes: 1 addition & 1 deletion public/assets/css/about/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@ video {
z-index: -1;
filter: blur(7px);
opacity: 65%;
}
}
Loading

0 comments on commit 42104a7

Please sign in to comment.