mirror of
https://github.com/nuttylmao/nutty.gg.git
synced 2026-09-19 04:00:59 -04:00
79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<title>YouTube Music Widget</title>
|
|
<meta charset="UTF-8">
|
|
<link rel="shortcut icon" href="#" />
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"
|
|
integrity="sha384-2huaZvOR9iDzHqslqwpR87isEmrfxqyWOF7hr7BY6KG0+hVKLoEXMPUJw3ynWuhO"
|
|
crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- THIS WIDGET IS DISCONTINUED -->
|
|
|
|
<div id="discontinuedOverlay"
|
|
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #141414ec; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-family: sans-serif; text-align: center; padding: 20px; box-sizing: border-box; transition: opacity 1s ease; opacity: 1;">
|
|
<div style="margin-bottom: 20px; font-size: 30px; font-weight: 800; color:#ad2727">THIS WIDGET HAS BEEN DISCONTINUED</div>
|
|
<div style="margin-bottom: 10px; font-size: 22px; font-weight: 600; line-height: 1.5; opacity: 0.9;">Please upgrade to <span style="font-style: italic; color:#ffb700">Universal Now Playing</span> — my new music widget!</div>
|
|
<div style="margin-bottom: 30px; font-size: 22px; font-weight: 800; line-height: 1.5; opacity: 0.9;">— With love, nutty <3</div>
|
|
|
|
<div style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 24px; border-radius: 8px; font-size: 30px; font-weight: bold; color: #ffffff; margin-bottom: 25px; letter-spacing: 0.5px;">
|
|
nutty.gg/products/universal-now-playing
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let timeLeft = 20;
|
|
const overlayEl = document.getElementById('discontinuedOverlay');
|
|
|
|
const timer = setInterval(() => {
|
|
timeLeft--;
|
|
if (timeLeft <= 0) {
|
|
clearInterval(timer);
|
|
overlayEl.style.opacity = '0';
|
|
setTimeout(() => {
|
|
overlayEl.style.display = 'none';
|
|
}, 1000); // Matches the 1s CSS transition duration
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
|
|
|
|
|
|
<!-- WIDGET STARTS HERE -->
|
|
|
|
<div id="statusContainer">Connecting...</div>
|
|
<div id="mainContainer">
|
|
<div id="albumArtBox">
|
|
<img id="albumArt"
|
|
src="https://static.wikia.nocookie.net/dreamcatcherwiki/images/d/dc/Dystopia_Lose_Myself_Digital_Cover.jpg"></img>
|
|
<img id="albumArtBack"
|
|
src="https://cdns-images.dzcdn.net/images/cover/762f7ef8a0c20e91304a3fae47449ccd/1900x1900-000000-80-0-0.jpg"></img>
|
|
</div>
|
|
<div id="songInfoBox">
|
|
<div id="songInfo">
|
|
<div id="IAmRunningOutOfNamesForTheseBoxes">
|
|
<div id="songLabel">Can't get you out of my mind</div>
|
|
<div id="artistLabel">Dreamcatcher</div>
|
|
<div id="times">
|
|
<div id="progressTime">2:29</div>
|
|
<div id="duration">3:43</div>
|
|
</div>
|
|
<div id="progressBg">
|
|
<div id="progressBar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="backgroundArt">
|
|
<img id="backgroundImage"
|
|
src="https://static.wikia.nocookie.net/dreamcatcherwiki/images/d/dc/Dystopia_Lose_Myself_Digital_Cover.jpg"></img>
|
|
<img id="backgroundImageBack"
|
|
src="https://cdns-images.dzcdn.net/images/cover/762f7ef8a0c20e91304a3fae47449ccd/1900x1900-000000-80-0-0.jpg"></img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="./script.js"></script> |