diff --git a/bio/audio.js b/bio/audio.js index 8687eca..36d5b85 100644 --- a/bio/audio.js +++ b/bio/audio.js @@ -1,36 +1,42 @@ const songs = [ + { + song: "PinkPantheress - Mosquito", + src: "https://easyfiles.cc/2024/12/895c8869-5a2e-4458-b70a-5b91a3d99b64/PinkPantheress%20-%20Mosquito%20(Official%20Video)%20-%20Pinkpantheress%20(1080p,%20av1).mp4", + duration: 159 + }, + { - title: "woody - Paint Thinner", + song: "woody - Paint Thinner", src: "https://easyfiles.cc/2024/8/2110cfc6-d700-4c42-bc66-bafa5799c1fc/youtube_rhaFMuU1_qw_1280x720_h264(1).mp4" , duration: 100 }, { - title: "Joeyy - PR Package", + song: "Joeyy - PR Package", src: "https://easyfiles.cc/2024/8/7c649f45-6573-4665-9675-4d869ea1332a/youtube_ZvphwrKo52s_1280x720_h264(1).mp4" , duration: 111 }, { - title: "Bladee & Ecco2k - Bleach", + song: "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", + song: "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", + song: "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: "sniper2004 - la ny", + song: "sniper2004 - la ny", src: "https://easyfiles.cc/2024/8/b8332c2a-e70b-4ec0-9ba8-acc7e5449db7/youtube_mkmn3QZSZUM_874x720_h264(1).mp4" , duration: 87 } @@ -105,7 +111,7 @@ function updateSliderBackground(slider, value) { function loadSong(index) { videoPlayer.src = songs[index].src; - songInfo.innerText = songs[index].title; + songInfo.innerText = songs[index].song; progressBar.value = 0; totalDuration.innerText = formatTime(songs[index].duration); videoPlayer.load(); diff --git a/bio/index.html b/bio/index.html index 75e612e..b2724f0 100644 --- a/bio/index.html +++ b/bio/index.html @@ -17,8 +17,7 @@ - - +
@@ -58,38 +57,38 @@ - +
- +
- +
- +
- +
- +
- +
- +
@@ -99,8 +98,8 @@
- 0:00 - 0:00 + 0:69 + 4:20
@@ -120,6 +119,7 @@
+

[click]

diff --git a/bio/index.js b/bio/index.js index edd622c..39ab643 100644 --- a/bio/index.js +++ b/bio/index.js @@ -1,12 +1,11 @@ const messages = [ - "Amateur Programmer", - "Donate Crypto!", + "PinkPantheress 💘💘💖🥰", "lispnb and pluggnb 💖💖", "woody.. my dearest 🥰💓", + "Donate Crypto!", "iluvshed", "#lacethemwithfent", "#lifeiseasy", - "#teammhuman" ]; let currentMessageIndex = 0; @@ -118,5 +117,26 @@ document.addEventListener("DOMContentLoaded", () => { function copyToClipboard(text) { navigator.clipboard.writeText(text); - alert("Copied to clipboard!"); } + +document.addEventListener("DOMContentLoaded", () => { + const tooltips = document.querySelectorAll('[class*="tooltip"]'); + + tooltips.forEach(tooltip => { + tooltip.addEventListener('mouseenter', () => { + tooltip.classList.add('active'); + }); + + tooltip.addEventListener('mouseleave', () => { + tooltip.classList.remove('active'); + }); + + tooltip.addEventListener('click', () => { + const originalTooltip = tooltip.getAttribute('data-tooltip'); + tooltip.setAttribute('data-tooltip', 'Copied to Clipboard!'); + setTimeout(() => { + tooltip.setAttribute('data-tooltip', originalTooltip); + }, 1000); + }); + }); +}); diff --git a/bio/style.css b/bio/style.css index d84c41b..0fbbdee 100644 --- a/bio/style.css +++ b/bio/style.css @@ -1,4 +1,5 @@ -html, body { +html, +body { margin: 0; padding: 0; height: 100%; @@ -21,7 +22,20 @@ html, body { @font-face { font-family: 'Pixel'; - src: url('Pixel.ttf'); + src: url('Pixel.ttf'); +} + +::selection { + background-color: #fefefe; + color: #000000; +} + +:focus-visible { + outline: none; +} + +:visited { + color: #fff; } .phone { @@ -43,6 +57,14 @@ html, body { transition: 1s; } +.clickToEnter > p { + color: #fff; + position: absolute; + top: 10px; + font-size: 16px; + transition: 1s; +} + .click123 { margin-bottom: 45%; font-size: 0.5em; @@ -116,7 +138,8 @@ html, body { font-size: 16px; } -#enter, #video { +#enter, +#video { display: none; } @@ -157,7 +180,13 @@ html, body { filter: drop-shadow(#000000 1px 0 7px) !important; } -.dc, .ig, .lk, .bc, .et, .lc, .xm { +.dc, +.ig, +.lk, +.bc, +.et, +.lc, +.xm { bottom: 50%; left: 50%; pointer-events: none; @@ -165,14 +194,26 @@ html, body { transition: 0.2s; } -.dci, .igi, .lki, .bci, .eti, .lci, .xmi { +.dci, +.igi, +.lki, +.bci, +.eti, +.lci, +.xmi { pointer-events: all; - transition: transform 0.2s; + transition: transform 0.2s; width: 2.75em; height: 2.75em; } -.dci:hover, .igi:hover, .lki:hover, .bci:hover, .eti:hover, .lci:hover, .xmi:hover { +.dci:hover, +.igi:hover, +.lki:hover, +.bci:hover, +.eti:hover, +.lci:hover, +.xmi:hover { transform: scale(1.1); } @@ -220,7 +261,8 @@ html, body { transition: 100ms; } -.slider::-webkit-slider-thumb, #volumeSlider::-webkit-slider-thumb { +.slider::-webkit-slider-thumb, +#volumeSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; @@ -235,7 +277,8 @@ html, body { transition: 100ms; } -.slider::-moz-range-thumb, #volumeSlider::-moz-range-thumb { +.slider::-moz-range-thumb, +#volumeSlider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; @@ -305,7 +348,8 @@ html, body { border: 1px solid #ffffff; } -#currentTime, #totalDuration { +#currentTime, +#totalDuration { text-shadow: #000000 3px 2px 7px !important; } @@ -335,39 +379,11 @@ html, body { 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; + justify-content: space-between; + margin: 0 20px; } button { @@ -383,4 +399,102 @@ button { svg { filter: drop-shadow(#cccccc 0.4px 0 7px) !important; +} + +.tooltip::after { + content: attr(data-tooltip); + position: absolute; + bottom: 125%; + transform: translateX(-60%); + background-color: rgb(51, 51, 51, 0.5); + border: 2px solid rgba(150, 150, 150, 0.1); + color: #fff; + padding: 5px 10px; + border-radius: 5px; + font-size: 12px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + font-family: monospace; +} + +.tooltip[data-tooltip*="big"]::after { + content: attr(data-tooltip); + position: absolute; + bottom: 87%; + left: 50%; + transform: translateX(-50%); + background-color: rgb(51, 51, 51, 0.5); + border: 2px solid rgba(150, 150, 150, 0.1); + color: #fff; + padding: 5px 10px; + border-radius: 5px; + font-size: 16px; + white-space: nowrap; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s, visibility 0.3s; + font-family: monospace; +} + +.tooltip:hover::after { + opacity: 1; + visibility: visible; +} + +@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; + justify-content: space-between; + margin-right: 35px; + margin-left: 35px; + } + + .clickToEnter > p { + color: #fff; + position: absolute; + top: 0px; + font-size: 12px; + transition: 1s; + } } \ No newline at end of file