bio and old redo

This commit is contained in:
zyqunix 2024-11-15 15:41:08 +01:00
parent e6f5488545
commit 5d1ec96989
9 changed files with 1794 additions and 3 deletions

BIN
bio/Pixel.ttf Normal file

Binary file not shown.

1
bio/README.md Normal file
View file

@ -0,0 +1 @@
fuck the haters :middlefinger:

138
bio/audio.js Normal file
View file

@ -0,0 +1,138 @@
const songs = [
{
title: "Bladee & Ecco2k - Bleach",
src: "https://easyfiles.cc/2024/9/4ac37ab2-20d7-4fd8-863b-3dcee1c418cd/BLADEE%20&%20ECCO2K%20-%20BLEACH%20-%20drain%20gang%20(720p50,%20h264)(1).mp4" ,
duration: 153
},
{
title: "woody - Heaven & Hell",
src: "https://easyfiles.cc/2024/9/20fa08a2-8212-4212-93b7-9c62fc563505/woody%20heaven%20&%20hell%20prod.%201mint%20-%20real1woody%20(1080p,%20h264)(1).mp4" ,
duration: 142
},
{
title: "woody - God Said I Was Good",
src: "https://easyfiles.cc/2024/8/9cafa851-0405-4009-b639-08ff5e029dc3/youtube_Z4IF2ujq1Xk_1280x720_h264(1).mp4" ,
duration: 135
},
{
title: "SmokeTeam6 - PackistanFlashback",
src: "file:///C:/Users/Fabio/Downloads/SmokeTeam6%20-%20PackistanFlashback%20(VEVO%20Official%20Music%20Video)%20-%20benwbush%20(1080p,%20h264)(1).mp4" ,
duration: 92
},
{
title: "sniper2004 - la ny",
src: "https://easyfiles.cc/2024/8/b8332c2a-e70b-4ec0-9ba8-acc7e5449db7/youtube_mkmn3QZSZUM_874x720_h264(1).mp4" ,
duration: 87
},
{
title: "Joeyy - PR Package",
src: "https://easyfiles.cc/2024/8/7c649f45-6573-4665-9675-4d869ea1332a/youtube_ZvphwrKo52s_1280x720_h264(1).mp4" ,
duration: 111
},
{
title: "woody - Paint Thinner",
src: "https://easyfiles.cc/2024/8/2110cfc6-d700-4c42-bc66-bafa5799c1fc/youtube_rhaFMuU1_qw_1280x720_h264(1).mp4" ,
duration: 100
},
];
let currentSongIndex = 0;
let isPlaying = false;
const main = document.getElementById("player")
const videoPlayer = document.getElementById("videoPlayer");
const playPauseButton = document.getElementById("playPause");
const songInfo = document.getElementById("songInfo");
const progressBar = document.getElementById("progressBar");
const volumeSlider = document.getElementById('volumeSlider');
const volumePercent = document.getElementById('volumePercent')
const currentDuration = document.getElementById("current-duration");
const totalDuration = document.getElementById("total-duration");
videoPlayer.addEventListener("timeupdate", () => {
let value = (videoPlayer.currentTime / videoPlayer.duration) * 100;
progressBar.value = value;
updateSliderBackground(progressBar, value);
currentDuration.innerText = formatTime(videoPlayer.currentTime);
totalDuration.innerText = formatTime(songs[currentSongIndex].duration);
});
progressBar.addEventListener('wheel', function (event) {
event.preventDefault();
});
document.getElementById("prev").addEventListener("click", () => {
currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
loadSong(currentSongIndex);
if (isPlaying) {
videoPlayer.play();
}
});
document.getElementById("next").addEventListener("click", () => {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
if (isPlaying) {
videoPlayer.play();
}
});
playPauseButton.addEventListener("click", () => {
if (isPlaying) {
videoPlayer.pause();
playPauseButton.innerHTML = "►";
} else {
videoPlayer.play();
playPauseButton.innerHTML = "❚❚";
}
isPlaying =!isPlaying;
});
videoPlayer.addEventListener("ended", () => {
currentSongIndex = (currentSongIndex + 1) % songs.length;
loadSong(currentSongIndex);
videoPlayer.play();
});
function updateSliderBackground(slider, value) {
slider.style.background = `linear-gradient(to right, #ffffff 0%, #ffffff ${value}%, #cbcbcb ${value}%, #cbcbcb 100%)`;
}
function loadSong(index) {
videoPlayer.src = songs[index].src;
songInfo.innerText = songs[index].title;
progressBar.value = 0;
totalDuration.innerText = formatTime(songs[index].duration);
videoPlayer.load();
videoPlayer.play();
}
videoPlayer.volume = volumeSlider.value / 100;
volumePercent.innerText = `${volumeSlider.value}%`;
updateVolumeSliderBackground(volumeSlider, volumeSlider.value);
volumeSlider.addEventListener('input', function () {
videoPlayer.volume = volumeSlider.value / 100;
volumePercent.innerText = `${volumeSlider.value}%`;
updateVolumeSliderBackground(volumeSlider, volumeSlider.value);
});
function updateVolumeSliderBackground(slider, value) {
slider.style.background = `linear-gradient(to right, #ffffff 0%, #ffffff ${value}%, #cbcbcb ${value}%, #cbcbcb 100%)`;
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
}
loadSong(0);

File diff suppressed because one or more lines are too long

132
bio/index.html Normal file
View file

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>@zyqunix</title>
<meta property="og:title" content="zy's page">
<meta property="og:description" content="The BEST Bio Page!">
<meta property="og:image" content="https://easyfiles.cc/2024/4/e0482551-b6a6-4739-bf0a-758756e8c464/RFbdMMB.png">
<link rel="shortcut icon" href="https://easyfiles.cc/2024/4/e0482551-b6a6-4739-bf0a-758756e8c464/RFbdMMB.png" type="image/x-icon">
</head>
<body>
<script disable-devtool-auto="" src="htps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
<script src="counter.js"></script>
<div class="video-container">
<video id="videoPlayer"></video>
</div>
<div class="player" id="player">
<img class="pfp" src="https://cdn.discordapp.com/avatars/1201415921802170388/3ccc13a2825eb8c98b5371fa0706e450.webp?size=1024&format=webp&width=0&height=320">
<h1>zyqunix</h1>
<span class="desc" id="typewriter"></span>
<div class="icons">
<a class="ig" href="https://instagram.com/zyq.cia" target="_blank" rel="noopener noreferrer">
<svg class="igi" xmlns="http://www.w3.org/2000/svg"
viewBox="3 2.98 18.01 18.04">
<path fill="#ffffff"
d="M20.947 8.305a6.53 6.53 0 0 0-.419-2.216a4.61 4.61 0 0 0-2.633-2.633a6.606 6.606 0 0 0-2.186-.42c-.962-.043-1.267-.055-3.709-.055s-2.755 0-3.71.055a6.606 6.606 0 0 0-2.185.42a4.607 4.607 0 0 0-2.633 2.633a6.554 6.554 0 0 0-.419 2.185c-.043.963-.056 1.268-.056 3.71s0 2.754.056 3.71c.015.748.156 1.486.419 2.187a4.61 4.61 0 0 0 2.634 2.632a6.584 6.584 0 0 0 2.185.45c.963.043 1.268.056 3.71.056s2.755 0 3.71-.056a6.59 6.59 0 0 0 2.186-.419a4.615 4.615 0 0 0 2.633-2.633c.263-.7.404-1.438.419-2.187c.043-.962.056-1.267.056-3.71c-.002-2.442-.002-2.752-.058-3.709zm-8.953 8.297c-2.554 0-4.623-2.069-4.623-4.623s2.069-4.623 4.623-4.623a4.623 4.623 0 0 1 0 9.246zm4.807-8.339a1.077 1.077 0 0 1-1.078-1.078a1.077 1.077 0 1 1 2.155 0c0 .596-.482 1.078-1.077 1.078z">
</path>
<circle cx="11.994" cy="11.979" r="3.003" fill="#ffffff"></circle>
</svg>
</a>
<a class="dc" href="https://discord.com/users/1201415921802170388" target="_blank"
rel="noopener noreferrer">
<svg class="dci" xmlns="http://www.w3.org/2000/svg"
viewBox="1.96 4.26 20.03 15.53">
<path fill="#ffffff"
d="M14.82 4.26a10.14 10.14 0 0 0-.53 1.1a14.66 14.66 0 0 0-4.58 0a10.14 10.14 0 0 0-.53-1.1a16 16 0 0 0-4.13 1.3a17.33 17.33 0 0 0-3 11.59a16.6 16.6 0 0 0 5.07 2.59A12.89 12.89 0 0 0 8.23 18a9.65 9.65 0 0 1-1.71-.83a3.39 3.39 0 0 0 .42-.33a11.66 11.66 0 0 0 10.12 0q.21.18.42.33a10.84 10.84 0 0 1-1.71.84a12.41 12.41 0 0 0 1.08 1.78a16.44 16.44 0 0 0 5.06-2.59a17.22 17.22 0 0 0-3-11.59a16.09 16.09 0 0 0-4.09-1.35zM8.68 14.81a1.94 1.94 0 0 1-1.8-2a1.93 1.93 0 0 1 1.8-2a1.93 1.93 0 0 1 1.8 2a1.93 1.93 0 0 1-1.8 2zm6.64 0a1.94 1.94 0 0 1-1.8-2a1.93 1.93 0 0 1 1.8-2a1.92 1.92 0 0 1 1.8 2a1.92 1.92 0 0 1-1.8 2z">
</path>
</svg>
</a>
<a class="lk" href="https://drugsellers.com/aqN9tGLnHup" target="_blank" rel="noopener noreferrer">
<svg class="lki" xmlns="http://www.w3.org/2000/svg" viewBox="2 2 28 28">
<path fill="#ffffff"
d="M11 16c0-1.393.078-2.734.222-4h9.556c.144 1.266.222 2.607.222 4c0 1.393-.078 2.734-.222 4h-9.556A35.485 35.485 0 0 1 11 16Zm-1.79 4A37.618 37.618 0 0 1 9 16c0-1.379.073-2.72.21-4H2.58A14.002 14.002 0 0 0 2 16c0 1.39.203 2.733.58 4h6.63Zm-5.863 2h6.138c.314 1.86.771 3.547 1.344 4.978c.369.922.793 1.758 1.272 2.472A14.036 14.036 0 0 1 3.347 22Zm8.168 0h8.97c-.29 1.6-.69 3.032-1.17 4.235c-.516 1.288-1.104 2.262-1.706 2.9c-.6.634-1.144.865-1.609.865c-.465 0-1.009-.231-1.609-.866c-.602-.637-1.19-1.611-1.705-2.899c-.481-1.203-.881-2.636-1.171-4.235Zm11 0c-.314 1.86-.771 3.547-1.344 4.978c-.369.922-.793 1.758-1.272 2.472A14.036 14.036 0 0 0 28.653 22h-6.138Zm6.905-2c.377-1.267.58-2.61.58-4c0-1.39-.203-2.733-.58-4h-6.63c.137 1.28.21 2.621.21 4s-.073 2.72-.21 4h6.63ZM19.314 5.765c.481 1.203.881 2.636 1.171 4.235h-8.97c.29-1.6.69-3.032 1.17-4.235c.516-1.288 1.104-2.263 1.706-2.9c.598-.631 1.14-.863 1.604-.865h.008c.464 0 1.007.233 1.606.866c.602.636 1.19 1.611 1.705 2.899ZM22.515 10h6.138a14.036 14.036 0 0 0-8.754-7.45c.479.714.903 1.55 1.272 2.472c.573 1.431 1.03 3.118 1.344 4.978ZM3.347 10h6.138c.314-1.86.771-3.547 1.344-4.978c.369-.922.793-1.758 1.272-2.472A14.036 14.036 0 0 0 3.347 10Z">
</path>
</svg>
</a>
<span class="bc" onclick="copyToClipboard('bc1qv5uptn8zcg4ddkr49uz4zga84jfg548aezk27g')">
<svg class="bci" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="m10.84 11.22l-.688-2.568c.728-.18 2.839-1.051 3.39.506c.27 1.682-1.978 1.877-2.702 2.062zm.289 1.313l.755 2.829c.868-.228 3.496-.46 3.241-2.351c-.433-1.666-3.125-.706-3.996-.478zM24 12c0 6.627-5.373 12-12 12S0 18.627 0 12S5.373 0 12 0s12 5.373 12 12zm-6.341.661c-.183-1.151-1.441-2.095-2.485-2.202c.643-.57.969-1.401.57-2.488c-.603-1.368-1.989-1.66-3.685-1.377l-.546-2.114l-1.285.332l.536 2.108c-.338.085-.685.158-1.029.256L9.198 5.08l-1.285.332l.545 2.114c-.277.079-2.595.673-2.595.673l.353 1.377s.944-.265.935-.244c.524-.137.771.125.886.372l1.498 5.793c.018.168-.012.454-.372.551c.021.012-.935.241-.935.241l.14 1.605s2.296-.588 2.598-.664l.551 2.138l1.285-.332l-.551-2.153c.353-.082.697-.168 1.032-.256l.548 2.141l1.285-.332l-.551-2.135c1.982-.482 3.38-1.73 3.094-3.64z">
</path>
</svg>
</span>
<span class="et" onclick="copyToClipboard('0x1E6D96999da353981D7863EbB3633b5DEd5e2949')">
<svg class="eti" xmlns="http://www.w3.org/2000/svg"
viewBox="5.75 1.75 12.5 20.5">
<path fill="currentColor"
d="m12 1.75l-6.25 10.5L12 16l6.25-3.75L12 1.75M5.75 13.5L12 22.25l6.25-8.75L12 17.25L5.75 13.5Z">
</path>
</svg>
</span>
<span class="lc" onclick="copyToClipboard('LbTYSdu6ARAhEPnpnkScxwn5vfVM2P8KgT')">
<svg class="lci" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0zm-.262 3.678h2.584a.343.343 0 0 1 .33.435l-2.03 6.918l1.905-.582l-.408 1.385l-1.924.56l-1.248 4.214h6.676a.343.343 0 0 1 .328.437l-.582 2a.459.459 0 0 1-.44.33H6.733l1.723-5.822l-1.906.58l.42-1.361l1.91-.58l2.422-8.18a.456.456 0 0 1 .437-.334Z">
</path>
</svg>
</span>
<span class="xm" onclick="copyToClipboard('49MYsn5xzdzAiduFwZQ54v8FGeZR9uqLUY7hywfYLURo3qUCDPSX5QifCSnWpENARodqrAWu8tt974d8kzf3RFqkKQStLXU')">
<svg class="xmi" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor"
d="M12 0C5.365 0 0 5.373 0 12.015c0 1.335.228 2.607.618 3.81h3.577V5.729L12 13.545l7.805-7.815v10.095h3.577c.389-1.203.618-2.475.618-3.81C24 5.375 18.635 0 12 0m-1.788 15.307l-3.417-3.421v6.351H1.758C3.87 21.689 7.678 24 12 24s8.162-2.311 10.245-5.764h-5.04v-6.351l-3.386 3.421l-1.788 1.79l-1.814-1.79z">
</path>
</svg>
</span>
</div>
<div class="cool"></div>
<div class="blurBG">
<p id="songInfo"></p>
<div class="duration-container">
<input type="range" min="0" max="100" class="slider" id="progressBar">
<div class="duration-info">
<span id="current-duration">0:00</span>
<span id="total-duration">0:00</span>
</div>
</div>
<div class="controls">
<button id="prev">&#171;</button>
<button id="playPause">&#9658;</button>
<button id="next">&#187;</button>
</div>
<div class="volume">
<div class="volume-control">
<input class="volumeSlider" type="range" id="volumeSlider" min="0" max="100" value="50">
</div>
<div class="volume_Percent">
<span class="volume-percent" id="volumePercent"></span>
</div>
</div>
</div>
</div>
<div class="clickToEnter" id="clickToEnter">
<img class="ascii" src="https://easyfiles.cc/2024/5/5d696a25-bab7-49ed-a325-a0b1bb812ab8/transformedascii.png"alt="">
</div>
<script src="index.js"></script>
<script src="audio.js"></script>
<script src="particle.js"></script>
</body>
</html>

122
bio/index.js Normal file
View file

@ -0,0 +1,122 @@
const messages = [
"Amateur Programmer",
"Donate Crypto!",
"lispnb and pluggnb <3 <3",
"woody.. my dearest ૮˶ᵔᵕᵔ˶ა",
"iluvshed",
"#lacethemwithfent",
"#lifeiseasy",
"#teammhuman"
];
let currentMessageIndex = 0;
let currentCharIndex = 0;
let isDeleting = false;
function typeWriter() {
const currentMessage = messages[currentMessageIndex];
let displayText = '';
if (isDeleting) {
displayText = currentMessage.substring(0, currentCharIndex - 1);
currentCharIndex--;
} else {
displayText = currentMessage.substring(0, currentCharIndex + 1);
currentCharIndex++;
}
displayText += "<span id='typewriter-line'>|</span>";
document.getElementById('typewriter').innerHTML = displayText;
if (!isDeleting && currentCharIndex === currentMessage.length + 1) {
isDeleting = true;
setTimeout(typeWriter, 1000);
} else if (isDeleting && currentCharIndex === 0) {
isDeleting = false;
currentMessageIndex = (currentMessageIndex + 1) % messages.length;
setTimeout(typeWriter, 1000);
} else {
setTimeout(typeWriter, isDeleting ? 40 : 75);
}
}
let cursorOpacity = 0;
let fadeDirection = 1;
setInterval(() => {
const cursorElement = document.getElementById("typewriter-line");
if (cursorElement) {
cursorElement.style.opacity = cursorOpacity;
cursorOpacity += 0.1 * fadeDirection;
if (cursorOpacity <= 0 || cursorOpacity >= 1) {
fadeDirection *= -1;
}
}
}, 50);
document.addEventListener("DOMContentLoaded", function () {
let titleIndex = 0;
let increasingTitle = true;
function updateTitle() {
const titleText = "@zyqunix";
if (increasingTitle) {
document.title = titleText.substring(0, titleIndex + 1);
titleIndex++;
if (titleIndex === titleText.length) {
increasingTitle = false;
setTimeout(updateTitle, 1500);
return;
}
} else {
document.title = titleText.substring(0, titleIndex - 1);
titleIndex--;
if (titleIndex === 1) {
increasingTitle = true;
setTimeout(updateTitle, 500);
return;
}
}
setTimeout(updateTitle, 333);
}
updateTitle();
});
let clickToEnterOverlay = document.getElementById("clickToEnter");
clickToEnterOverlay.onclick = () => {
clickToEnterOverlay.style.transition = '0.75s';
clickToEnterOverlay.style.opacity = '0';
clickToEnterOverlay.style.zIndex = '-9999';
main.style.opacity = '1';
main.style.marginTop = "0px";
videoPlayer.play();
playPauseButton.innerHTML = "&#10074;&#10074;";
isPlaying = !isPlaying;
typeWriter();
};
document.addEventListener("DOMContentLoaded", () => {
window.addEventListener("keydown", event => {
if (event.ctrlKey && ['s', 'c', 'e', 'u'].includes(event.key.toLowerCase())) {
event.preventDefault();
window.location.href = 'https://pornhub.com/gay';
}
});
document.addEventListener("contextmenu", event => event.preventDefault());
});
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
alert("Copied to clipboard!");
}

1022
bio/particle.js Normal file

File diff suppressed because it is too large Load diff

375
bio/style.css Normal file
View file

@ -0,0 +1,375 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: monospace;
background-color: black;
overflow: hidden;
color: white !important;
}
@font-face {
font-family: 'PF Tempesta Five';
font-style: normal;
font-weight: 400;
src: local('PF Tempesta Five'), url('https://fonts.cdnfonts.com/s/7373/pf_tempesta_five.woff') format('woff');
}
@font-face {
font-family: 'Pixel';
src: url('Pixel.ttf');
}
.phone {
display: none;
}
.clickToEnter {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5em;
font-weight: bold;
background-color: rgba(9, 9, 9, 0.95);
backdrop-filter: blur(20px);
transition: 1s;
}
.click123 {
margin-bottom: 45%;
font-size: 0.5em;
color: rgb(120, 120, 120);
pointer-events: none;
user-select: none;
}
.ascii {
width: 10em;
position: fixed;
pointer-events: none;
user-select: none;
}
.cool {
opacity: 0.7;
height: 3px;
width: 100%;
background: linear-gradient(to right, transparent, white, transparent);
margin-left: 50%;
transform: translateX(-50%);
}
.player {
opacity: 0;
transition-delay: 0.1s;
transition-duration: 1s;
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 20px;
text-align: center;
width: 90%;
max-width: 400px;
height: auto;
z-index: 2;
border: 2px solid rgba(150, 150, 150, 0.25);
box-sizing: border-box;
margin: 10px;
margin-top: 200px;
}
.player h1 {
font-family: 'PF Tempesta Five', monospace;
margin: 0;
font-size: 24px;
color: white;
text-shadow: #000000 3px 2px 7px !important;
}
.player p {
color: #ffffff;
font-size: 16px;
text-shadow: #000000 3px 2px 7px !important;
margin-bottom: -5px;
margin-top: 5px;
}
.player #typewriter {
color: white;
font-size: 16px;
display: flex;
justify-content: center;
margin-top: 5px;
margin-bottom: -5px;
}
#typewriter-line {
font-size: 16px;
}
#enter, #video {
display: none;
}
.pfp {
width: 96px;
margin-top: -20%;
border-radius: 50%;
pointer-events: none;
user-select: none;
border: 3px solid rgba(150, 150, 150, 0.25);
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 0;
text-align: center;
}
#videoPlayer {
height: 100%;
}
.icons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
margin-bottom: 13px;
color: #ffffff !important;
filter: drop-shadow(#000000 1px 0 7px) !important;
}
.dc, .ig, .lk, .bc, .et, .lc, .xm {
bottom: 50%;
left: 50%;
pointer-events: none;
cursor: pointer;
transition: 0.2s;
}
.dci, .igi, .lki, .bci, .eti, .lci, .xmi {
pointer-events: all;
transition: 0.2s;
width: 2.75em;
height: 2.75em;
}
.dci:hover, .igi:hover, .lki:hover, .bci:hover, .eti:hover, .lci:hover, .xmi:hover {
transform: scale(1.1);
}
.controls {
display: flex;
justify-content: center;
gap: 16px;
align-items: center;
color: white;
margin-top: 10px;
}
.controls button {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 7px;
width: 40px;
height: 30px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
box-shadow: #000000 3px 3px 20px !important;
border: 2px solid rgba(150, 150, 150, 0.25);
text-shadow: #000000 3px 2px 7px !important;
}
.controls button:active {
transform: translateY(1px);
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 90%;
max-width: 380px;
height: 10px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, #cbcbcb 0%, #cbcbcb 100%);
outline: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
box-shadow: #000000 3px 3px 20px !important;
transition: 100ms;
}
.slider::-webkit-slider-thumb, #volumeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
z-index: 3;
position: relative;
border: 1px solid #ffffff;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
transition: 100ms;
}
.slider::-moz-range-thumb, #volumeSlider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
z-index: 3;
position: relative;
border: 1px solid #ffffff;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
transition: 100ms;
}
.slider-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
color: white;
margin-top: 10px;
}
.slider-container span {
color: white;
font-size: 14px;
}
.volume-control {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
#volumeSlider {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 10px;
background: linear-gradient(to right, #ffffff 0%, #ffffff 0%, #cbcbcb 0%, #cbcbcb 100%);
outline: none;
border-radius: 5px;
cursor: pointer;
box-shadow: #000000 3px 3px 20px !important;
}
#volumeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
z-index: 3;
position: relative;
border: 1px solid #ffffff;
}
#volumeSlider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
z-index: 3;
position: relative;
border: 1px solid #ffffff;
}
#currentTime, #totalDuration {
text-shadow: #000000 3px 2px 7px !important;
}
.volume_Percent {
width: 100%;
margin-top: 5px;
text-align: center;
}
.volume {
justify-content: center;
text-align: center;
margin-bottom: 5px;
}
.blurBG {
backdrop-filter: blur(0);
width: 105%;
height: 110%;
border-radius: 10px;
background-color: rgba(150, 150, 150, 0.1);
border: 2px solid rgba(150, 150, 150, 0.25);
justify-content: center;
text-align: center;
margin-left: 50%;
margin-top: 20px;
transform: translateX(-50%);
}
@media (max-width: 768px) {
#video {
display: none !important;
}
.pc {
display: none;
}
.phone {
display: block;
}
.slider {
width: 80%;
max-width: 300px;
}
#volumeSlider {
width: 120px;
}
.volume_Percent {
margin-top: 10px;
text-align: center;
}
.dci, .igi, .lki, .bci, .eti, .lci, .xmi {
pointer-events: all;
transition: 0.2s;
width: 2em;
height: 2em;
}
}
div.duration-info {
display: flex;
gap: 277px;
margin-left: 20px;
}
button {
user-select: none;
}

View file

@ -78,10 +78,10 @@
<b><font size="5" color="green">Linkz:</font></b>
<ul>
<li>
<a href="#about">About Mez</a>
<a href="https://fentseller.lol/bio">About Mez</a>
</li>
<li><a href="#pictures">My Cool Picz</a></li>
<li><a href="#contact">Contact Mez</a></li>
<li><a href="https://instagram.com/zyq.cia">My Cool Picz</a></li>
<li><a href="https://fentseller.lol/bio">Contact Mez</a></li>
<li><a href="http://users2.smartgb.com/g/g.php?a=s&i=g26-39906-27">Sign My Guestbook!</a></li>
</ul>
</td>