added pinkpantheress, hover tooltips, css mobile change (and fixed devtool)
This commit is contained in:
zyqunix
parent
a953037413
commit
e9b6ddf1ae
4 changed files with 203 additions and 63 deletions
20
bio/audio.js
20
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();
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<script disable-devtool-auto="" src="htps://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
|
||||
<script src="counter.js"></script>
|
||||
<script disable-devtool-auto="" src="https://cdn.jsdelivr.net/npm/disable-devtool@latest"></script>
|
||||
|
||||
<div class="video-container">
|
||||
<video id="videoPlayer"></video>
|
||||
|
|
@ -58,38 +57,38 @@
|
|||
</svg>
|
||||
</a>
|
||||
|
||||
<span class="bc" onclick="copyToClipboard('bc1qv5uptn8zcg4ddkr49uz4zga84jfg548aezk27g')">
|
||||
<div data-tooltip="Copy to Clipboard" class="bc tooltip" 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>
|
||||
</div>
|
||||
|
||||
<span class="et" onclick="copyToClipboard('0x1E6D96999da353981D7863EbB3633b5DEd5e2949')">
|
||||
<div data-tooltip="Copy to Clipboard" class="et tooltip" 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>
|
||||
</div>
|
||||
|
||||
<span class="lc" onclick="copyToClipboard('LbTYSdu6ARAhEPnpnkScxwn5vfVM2P8KgT')">
|
||||
<div data-tooltip="Copy to Clipboard" class="lc tooltip" 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>
|
||||
</div>
|
||||
|
||||
<span class="xm" onclick="copyToClipboard('49MYsn5xzdzAiduFwZQ54v8FGeZR9uqLUY7hywfYLURo3qUCDPSX5QifCSnWpENARodqrAWu8tt974d8kzf3RFqkKQStLXU')">
|
||||
<div data-tooltip="Copy to Clipboard" class="xm tooltip" 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>
|
||||
|
||||
<div class="cool"></div>
|
||||
|
|
@ -99,8 +98,8 @@
|
|||
<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>
|
||||
<span id="current-duration">0:69</span>
|
||||
<span id="total-duration">4:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
|
|
@ -120,6 +119,7 @@
|
|||
</div>
|
||||
|
||||
<div class="clickToEnter" id="clickToEnter">
|
||||
<p>[click]</p>
|
||||
<img class="ascii" src="https://easyfiles.cc/2024/5/5d696a25-bab7-49ed-a325-a0b1bb812ab8/transformedascii.png"alt="">
|
||||
</div>
|
||||
|
||||
|
|
|
|||
28
bio/index.js
28
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
194
bio/style.css
194
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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue