Resources
HTML Stuff
(^ the one I was actually able to figure out)
Graphics
There are a good number of graphics resources that are in Carrd.co carrds! I'm keeping those seperate cause Carrds tend to have pretty much everything, so they're a category of their own.Carrd + Rentry
Misc.
Neocities Buttons
My copy-paste codes
Codes that I either modified or just want to have easily on hand so I can nab them and have them work without setting it up or anything.Modified 3ds video switcher code
I took monsieurdoll's PSP code and modified it to fit a 3DS shell image I found. I also fit my Cbox chatbox on the bottom half.
<style>
.threeds {
background-image: url(https://files.catbox.moe/u5mbwo.webp);
background-size: 700px;
background-position: 50% 50%;
width: 600px;
height: 610px;
position: relative;
z-index: 1;
}
.tdsbtn2 {
position: absolute;
background-color: transparent;
top: 400px;
left: 540px;
width: 30px;
height: 30px;
border-radius: 50px;
border: 2px dotted lightgrey;
filter: drop-shadow(0px 0px 2px white);
z-index: 3
}
.tdsbtn1 {
position: absolute;
background-color: transparent;
top: 400px;
left: 479px;
width: 30px;
height: 30px;
border-radius: 50px;
border: 2px dotted lightgrey;
filter: drop-shadow(0px 0px 2px white);
z-index: 3
}
.tdsbtn1:active {
filter: brightness(100%) drop-shadow(0px 0px 5px white);
}
.tdsbtn2:active {
filter: brightness(100%) drop-shadow(0px 0px 5px white);
}
.tdsbtn1:hover {
background: rgba(255, 255, 255, 0.45);
border: 2px dotted white;
filter: drop-shadow(0px 0px 20px white);
}
.tdsbtn2:hover {
background: rgba(255, 255, 255, 0.45);
border: 2px dotted white;
filter: drop-shadow(0px 0px 20px white);
}
.chatbox {
position: absolute;
top: 297px;
left: 35px;
width: 312px;
height: 235px;
}
.threedsvideo {
position: absolute;
top: 0px;
left: 0px;
width: 382px;
height: 230px;
z-index: 2;
transition: .5s;
}
.threedsvideo:hover {
position: absolute;
top: 0px;
left: 0px;
width: 382px;
height: 230px;
z-index: 2;
transition: .5s;
}
#videocontainer {
background-color: black;
position: absolute;
top: 43px;
left: 110px;
width: 382px;
height: 230px;
z-index: 1;
margin-top: 0px;
}
</style>
<body>
<div class="dscontainer" style="z-index:2">
<div class="threeds" loading="lazy">
<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
</script>
<button title="Click for the next video!" class="tdsbtn1" loading="lazy" onclick="plusSlides(-1)"></button>
<button title="Click for the next video!" class="tdsbtn2" loading="lazy" onclick="plusSlides(1)"></button>
<div id='videocontainer' class="modal">
<div class="modal-content">
<!--- vid1 dmmd -->
<div class="mySlides" display='block'>
<iframe loading='lazy' class="threedsvideo" src="https://www.youtube.com/embed/yVeGhw11NtA?si=WnVQ3EXAcWjqmCnr" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<!-- vid 2 brs --->
<div class="mySlides" display='block'>
<iframe loading='lazy' class="threedsvideo" src="https://www.youtube.com/embed/uNSDkPvYiRE?si=iUOGrdazTf53MVgj" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<!-- vid 3 tallest --->
<div class="mySlides" display='block'>
<iframe loading='lazy' class="threedsvideo" src="https://www.youtube.com/embed/XipS-JaPvog?si=FespzFYdgrlJs71W" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<iframe class="chatbox" src="https://www3.cbox.ws/box/?boxid=3529850&boxtag=jvVAn6" width="" height="" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div>
</div>
</div>
</div>
</body>
Theme Switcher
I took this theme switcher code and simplified it to look a little different, but functionally, its the same.
<!------- theme swapper ------------------------------------------->
<style>
/* bar that holds the theme picker text and the buttons. I just made this so I could move stuff around easier */
.themebar {
/* position: absolute;
left: 200px;
top: 215px; */
background:transparent;
border-radius:10px;
}
/* Button default style */
.theme-btn {
padding: 5px 10px;
cursor: pointer;
border: none;
outline: none;
margin: 5px;
border-radius: 10px;
background: white;
color: black;
border: 1px solid grey;
transition: background-color 0.3s ease, color 0.3s ease;
}
/*
In order to change the themes, put the class or id of whatever you want to change after ".one" or ".two" or whatever you title your theme, and then style it. You're essentially just copying the original style and then putting the theme name infront of it and changing whatever parts of it you want to change for the new theme.
You could also add new elements for only certain elements, honestly you can get pretty creative with it.
*/
/* Default - leave this empty, so you can revert the theme changes to nothing and see the original code. */
.default body {}
/* Mode One ---------------------------------------------------------*/
.One body {
background:black;
color:white;
}
.One .theme-btn {
padding: 5px 10px;
cursor: pointer;
border: none;
outline: none;
margin: 5px;
border-radius: 10px;
background: black;
color: white;
border: 2px dashed grey;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* ----------------------------------------------------------------*/
/* Mode Two */
.Two body {
background-image:url("https://sozai.pooftie.me/bg/bg%20(1).png");
color:black;
}
.Two .theme-btn {
padding: 5px 10px;
cursor: pointer;
border: none;
outline: none;
margin: 5px;
border-radius: 10px;
background: gainsboro;
color: black;
border: 1px solid grey;
transition: background-color 0.3s ease, color 0.3s ease;
}
</style>
<!----->
<body>
<div class="themebar">
<center>
Theme Picker
</center>
<!---- theme switcher --->
<div class="theme-switcher" style="text-align: center;">
<button class="theme-btn" onclick="setTheme('default')">Default</button>
<button class="theme-btn" onclick="setTheme('one')">One</button>
<button class="theme-btn" onclick="setTheme('Two')">Two</button>
</div>
<!----->
</div>
</body>
<!--- theme swicther script ---->
<script>
function setTheme(theme) {
document.documentElement.className = theme;
}
</script>
<!----->
<!----------------------------------------------------------->
Gooby's Calendar
Goobys 500 follower gift template calendar
<!-- layout by goooby.neocities.org -->
<!--
welcome to the source code, you can do whateeverre you want here idc idc add and remove anything you want to.
...
you can add more cred if you want but all i ask is that the top comment stays thanks (you can delete this)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://file.garden/ZRW6VPKULjLI59VM/500gift/cal.js"></script>
<title>your title here</title>
</head>
<body>
<script type="text/javascript">
calendar();
</script>
<div class="calendar"></div>
</div>
</body>
</html>
<!-- CALENDAR CSS: -->
<style>
.cal_calendar
{
border: 1px solid #8f657a;
padding: 1px;
background: linear-gradient(#fffff1, #ffdceb);
width: 100%;
margin: 0.6rem auto 0 auto;
height: 191px;
color: #83586e;
border-radius: 5px;
}
.cal_calendar th
{
border:1px solid #874a17c9;
background: linear-gradient(50deg, #FFFFF2, #ffe0f2);
width:36px;
font-size: 0.69em;
border-radius: 3px;
color: #83586e;
box-shadow: inset #ffcee8 0 0 4px 1px;
}
.cal_calendar td
{
border:1px solid #fa94c785;
background:linear-gradient(#fffff1, #ffdceb);
text-align:center;
font-size: 0.8em;
border-radius: 3px;
box-shadow: inset white 0 3px 3px, inset #ff7cb945 0 0 2px 1px;
}
.cal_today
{
color:#ff7cb9;
font-weight:bold;
}
.cal_days_bef_aft
{
color:#5a779e;
}
</style>
Cellphone Chatbox Hover
A chatbox cellphone code that is fixed to the corner of the screen and floats up when you hover on it. I nabbed this from scripted. I dont wanna lose the code if the jsfiddle goes away.Raw code:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300|Roboto' rel='stylesheet' type='text/css'>
<style>
#cbox {
left: 40px;
bottom: -354px;
z-index: 9999;
position: fixed;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
border: 5px solid #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 0px 0px 0px 1px #fedbdb;
}
#cbox:hover {
bottom: 0px;
}
#cboxtitle {
width: 180px;
height: 15px;
background-color: #ffffff;
background-image: url('https://41.media.tumblr.com/3827df8cb33c8426b76e87c2e5888822/tumblr_inline_npdg23RZcL1rnjuep_540.png');
padding: 8px 5px 5px 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: center;
font-size: 14px;
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
letter-spacing: 10px;
color: #db9494;
text-shadow: 1px 1px 1px #ffffff;
text-transform: uppercase;
}
#cboxdesc {
width: 180px;
height: 40px;
padding: 5px;
background-color: #ffffff;
overflow: auto;
font-family: 'Roboto', sans-serif;
font-size: 9px;
text-align: justify;
letter-spacing: 1px;
color: #a19090;
}
</style>
<div id="cbox">
<div id="cboxtitle">chatbox</div>
<div id="cboxdesc">
YOUR CHATBOX DESCRIPTION HERE
</div> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
<iframe src="https://www6.cbox.ws/box/?boxid=858895&boxtag=p9XmKU" width="190" height="300" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300|Roboto' rel='stylesheet' type='text/css'>
<style>
#cbox {
left: 220px;
bottom: -360px;
z-index: 9999;
position: fixed;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
border: 5px solid black;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
box-shadow: 0px 0px 0px 1px mediumpurple;
}
#cbox:hover {
bottom: 0px;
}
#cboxtitle {
width: 250px;
height: auto;
background-color: black;
background-image: url('https://64.media.tumblr.com/89e3eb9036f5e6895c3836ebe29aaa81/e411375fdf986040-fd/s1280x1920/0dcbcc73f766be9a924259435f229b4fb16e380a.pnj');
background-position: 50% 80%;
padding: 8px 5px 5px 5px;
border-top-left-radius: 45px;
border-top-right-radius: 45px;
text-align: center;
font-size: 25px;
font-weight: bold;
letter-spacing: 4px;
color: white;
text-shadow: 1px 1px 1px black;
text-transform: uppercase;
}
#cboxdesc {
width: 250px;
height: auto;
padding: 5px;
background-color: black;
overflow: auto;
font-size: 12px;
text-align: left;
letter-spacing: 1px;
color: mediumslateblue;
}
</style>
<div id="cbox">
<div id="cboxtitle">chatbox</div>
<div id="cboxdesc">
Hover over to see!
</div> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
<iframe src="https://www3.cbox.ws/box/?boxid=3529850&boxtag=jvVAn6" width="260" height="350" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</div>
<!-- cbox above -->
Music Player but for a youtube video
I honestly hate that I even did this but I ended up putting a basic on/off mp3 player code into a bot to see if it could modify the code so it could use a youtube videos audio instead of a mp3 audio. I tried so hard for like 3 straight hours to do it myself and looked everywhere and for the life of me couldnt figure it out or seem to find anyone else who did... i got frustrated enough i actually utilized ai and it feels icky but it did finally spit out something remotely like what I was trying to do/find. I gotta figure out how do do this on my own... In theory; reverse engineeer whatever this thing did.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
<style type="text/css">
#MusicClicker {
position:relative;
bottom:0;
margin-bottom:10px;
left:-8.5px;
margin-left:10px;
display:flex;
z-index:99;
}
#MusicClicker a {
text-decoration:none;
}
#MusicClicker > div {
align-self:center;
-webkit-align-self:center;
}
.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px;
cursor:pointer;
}
.playy, .pausee {
font-size: 50px;
}
.pausee {
display:none;
}
</style>
</head>
<body>
<div id="MusicClicker">
<div class="music-controls" onclick="songstart();">
<div class="playy" style="display: block;"><span ><i class="fa-solid fa-play" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span ><i class="fa-solid fa-pause" aria-hidden="true"></i></span></div></div>
</div>
<audio id="tune" src=""></audio>
<script>
var audio = document.getElementById('tune');
var playButton = document.querySelector('.playy');
var pauseButton = document.querySelector('.pausee');
var isPlaying = false;
// YouTube iFrame API (minimal implementation for audio)
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('tune', { // Use the 'tune' ID for the player
height: '0', // Hidden player
width: '0', // Hidden player
videoId: 'yVeGhw11NtA', // YouTube Video ID
playerVars: {
'controls': 0, // Hide controls
'disablekb': 1, // Disable keyboard controls
'fs': 0, // Disable fullscreen button
'iv_load_policy': 3, // Hide annotations
'modestbranding': 1, // Reduce YouTube branding
'origin': window.location.origin, //Important for security
'rel': 0, // Disable related videos
'showinfo': 0, // Hide video title
'autoplay': 0, //do not autoplay on load
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// The player is ready; you can start using it.
console.log("YouTube player is ready");
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
// Video ended, reset the buttons.
isPlaying = false;
playButton.style.display = 'block';
pauseButton.style.display = 'none';
}
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady; // Make sure the function is globally accessible
function songstart() {
if (player) {
if (!isPlaying) {
player.playVideo();
playButton.style.display = 'none';
pauseButton.style.display = 'block';
isPlaying = true;
} else {
player.pauseVideo();
playButton.style.display = 'block';
pauseButton.style.display = 'none';
isPlaying = false;
}
} else {
console.error("YouTube player not initialized yet.");
}
}
</script>
</body>
</html>
multiple of the ai music player codes playing on the same page
feel guilty as shit but it actually managed to do what i was trying to figure out......... how do people use ai casually and not feel like a failed human whose betrayed everything-
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
<style type="text/css">
.MusicClicker {
position:relative;
bottom:0;
margin-bottom:10px;
left:-8.5px;
margin-left:10px;
display:flex;
z-index:99;
}
.MusicClicker a {
text-decoration:none;
}
.MusicClicker > div {
align-self:center;
-webkit-align-self:center;
}
.music-controls {
user-select:none;
-webkit-user-select:none;
width:22px;
font-size:16px;
cursor:pointer;
}
.playy, .pausee {
font-size: 50px;
}
.pausee {
display:none;
}
</style>
</head>
<body>
<div class="MusicClicker" data-video-id="yVeGhw11NtA">
<div class="music-controls">
<div class="playy" style="display: block;"><span aria-hidden="true"><i class="fa-solid fa-play"></i></span></div>
<div class="pausee" style="display: none;"><span aria-hidden="true"><i class="fa-solid fa-pause"></i></span></div>
</div>
<audio class="tune"></audio>
</div>
<div class="MusicClicker" data-video-id="dQw4w9WgXcQ">
<div class="music-controls">
<div class="playy" style="display: block;"><span aria-hidden="true"><i class="fa-solid fa-play"></i></span></div>
<div class="pausee" style="display: none;"><span aria-hidden="true"><i class="fa-solid fa-pause"></i></span></div>
</div>
<audio class="tune"></audio>
</div>
<div class="MusicClicker" data-video-id="nrWJQtj5jmk">
<div class="music-controls">
<div class="playy" style="display: block;"><span aria-hidden="true"><i class="fa-solid fa-play"></i></span></div>
<div class="pausee" style="display: none;"><span aria-hidden="true"><i class="fa-solid fa-pause"></i></span></div>
</div>
<audio class="tune"></audio>
</div>
<script>
// YouTube iFrame API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = {}; // Store players by container ID
function onYouTubeIframeAPIReady() {
var musicClickers = document.querySelectorAll('.MusicClicker');
musicClickers.forEach(function(container) {
var videoId = container.dataset.videoId;
var tuneElement = container.querySelector('.tune'); // Get the audio element within the container
var player = new YT.Player(tuneElement, { // Use the audio element as the player container
height: '0',
width: '0',
videoId: videoId,
playerVars: {
'controls': 0,
'disablekb': 1,
'fs': 0,
'iv_load_policy': 3,
'modestbranding': 1,
'origin': window.location.origin,
'rel': 0,
'showinfo': 0,
'autoplay': 0,
'mute': 0
},
events: {
'onReady': function(event) { onPlayerReady(event, container); },
'onStateChange': onPlayerStateChange
}
});
players[container.dataset.videoId] = player; // Store the player with the video ID as the key
// Attach click listener to the container
container.addEventListener('click', function() {
songstart(container);
});
});
}
function onPlayerReady(event, container) {
console.log("YouTube player is ready for video ID: " + container.dataset.videoId);
}
function onPlayerStateChange(event) {
var player = event.target;
var container = player.getIframe().parentNode.parentNode; // Get the container element
var playButton = container.querySelector('.playy');
var pauseButton = container.querySelector('.pausee');
if (event.data == YT.PlayerState.ENDED) {
playButton.style.display = 'block';
pauseButton.style.display = 'none';
}
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
function songstart(container) {
var videoId = container.dataset.videoId;
var player = players[videoId];
var playButton = container.querySelector('.playy');
var pauseButton = container.querySelector('.pausee');
let isPlaying = pauseButton.style.display === 'block';
if (player) {
if (!isPlaying) {
player.playVideo();
playButton.style.display = 'none';
pauseButton.style.display = 'block';
} else {
player.pauseVideo();
playButton.style.display = 'block';
pauseButton.style.display = 'none';
}
} else {
console.error("YouTube player not initialized yet for video ID: " + videoId);
}
}
</script>
</body>
</html>
My Music Player
I frankensteined this out of the ai codes, I was able to get it to spit out something pretty okay! Its odd cause i... like how this turned out... but i feel guilty cause I didnt actually code any of the making-it-work-and-play-things, a bot did, all I did was make it look nice... grhh... why coding hard :'l
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap" rel="stylesheet">
</head><!---- attempting to make my own music player . like a fool. ---->
<style>
.dm-mono-light {
font-family: "DM Mono", serif;
font-weight: 300;
font-style: normal;
}
.dm-mono-regular {
font-family: "DM Mono", serif;
font-weight: 400;
font-style: normal;
}
.dm-mono-medium {
font-family: "DM Mono", serif;
font-weight: 500;
font-style: normal;
}
.dm-mono-light-italic {
font-family: "DM Mono", serif;
font-weight: 300;
font-style: italic;
}
.dm-mono-regular-italic {
font-family: "DM Mono", serif;
font-weight: 400;
font-style: italic;
}
.dm-mono-medium-italic {
font-family: "DM Mono", serif;
font-weight: 500;
font-style: italic;
}
.zen-dots-regular {
font-family: "Zen Dots", serif;
font-weight: 400;
font-style: normal;
}
.musicboxforeverything {
position:relative;
width: 500px;
height: 100px;
display: flex;
padding: 15px;
background: linear-gradient(to top, #FAF7F0 10%, #A0DAF1 70%);
box-shadow: inset #2E3A60 0 0 0px 3px, inset #FAF7F0 0 0 0px 5px, inset #A0DAF1 0 0 0px 7px, 0px 0px 20px white;
border-radius: 10px 70px 10px 10px;
}
.musicboxforeverything it {
font-family: "DM Mono", serif;
font-weight: 400;
font-style: italic;
color:#666D89;
font-size:13px;
}
.musicnowplaying {
font-family: "Zen Dots", serif;
font-style: italic;
font-weight:bold;
position:absolute;
left:10px;
top:-7px;
color:#FAF7F0;
filter: drop-shadow(1px 1px 0 #2E3A60) drop-shadow(-1px 1px 0 #A0DAF1) drop-shadow(0 -1px 0 #A0DAF1) drop-shadow(1px 0 #2E3A60)
}
.musicimage {
width: 133px;
height: 100px;
background-size: contain;
border-radius: 5px 0px 0px 5px;
box-shadow: inset #666D89 0 0 0px 2px, inset #FAF7F0 0 0 0px 4px, inset #A0DAF1 0 0 0px 6px, 0px 0px 20px white;
}
.boxwithstuffnexttoimage {
border-radius: 0px 60px 7px 0px;
box-shadow: inset #666D89 0 0 0px 2px, inset #FAF7F0 0 0 0px 4px, inset #A0DAF1 0 0 0px 6px, 0px 0px 20px white;
;
width: 100%;
height: 100%;
}
.marqueetextforsongtitle {
height: 30px;
width: 367px;
padding-top: 6px;
background: cyan;
font-family: "Zen Dots", serif;
font-weight: 500;
margin: 9px 10px 0px 6px;
border-radius: 3px 70px 3px 3px;
background: linear-gradient(to left, #FAF7F0 70%, transparent);
}
.MusicClicker {
position: relative;
margin-bottom: 10px;
margin-left: 20px;
display: flex;
z-index: 99;
height:40px;
}
.MusicClicker a {
text-decoration: none;
}
.MusicClicker>div {
align-self: center;
-webkit-align-self: center;
}
.music-controls {
user-select: none;
-webkit-user-select: none;
width: 22px;
font-size: 16px;
cursor: pointer;
color:#2E3A60;
transition:.3s;
}
.music-controls:hover {
filter: drop-shadow(1px 1px 0 #2E3A60) drop-shadow(-1px 1px 0 #A0DAF1) drop-shadow(0 -1px 0 #2E3A60) drop-shadow(1px 0 #A0DAF1) drop-shadow(-2px 2px 0px #2E3A60);
color:#FAF7F0;
transition:.3s;
}
.playy,
.pausee {
font-size: 35px;
}
.pausee {
display: none;
}
/* Style the progress bar */
.progress-container {
width: 300px;
height: 10px;
margin-left: 20px;
background-color: #FAF7F0;
border: 3px ridge #A0D8F0;
border-radius:10px;
/* Light grey background */
margin-top: 5px;
/* Add some space above the bar */
cursor: pointer;
/* Make it clear it's interactive */
}
.progress-bar {
background: linear-gradient(to right,#FAF7F0, #F4BBCC);
height: 10px;
margin-left: 0px;
border-radius:10px 3px 3px 10px;
/* Green color */
width: 0%;
/* Initial width is 0 */
}
</style>
<body>
<div class="musicboxforeverything">
<div class="musicnowplaying">Now Playing...</div>
<div class="musicimage" style="background-image: url(https://files.catbox.moe/i6ivap.jpg)"></div>
<div class="boxwithstuffnexttoimage">
<marquee class="marqueetextforsongtitle" scrollamount="3">
AI CATCH <it>(DRAMAtical Murder OP)
- GOATBED </it>
</marquee>
<div class="MusicClicker" data-video-id="yVeGhw11NtA">
<div class="music-controls">
<div class="playy" style="display: block;"><span aria-hidden="true"><i class="fa-solid fa-play"></i></span></div>
<div class="pausee" style="display: none;"><span aria-hidden="true"><i class="fa-solid fa-pause"></i></span></div>
</div>
<audio class="tune"></audio>
</div>
</div>
</div>
</body>
<script>
// YouTube iFrame API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = {}; // Store players by video ID. Key is videoId
var progressIntervals = {}; // Store interval IDs for progress updates
function onYouTubeIframeAPIReady() {
var musicClickers = document.querySelectorAll('.MusicClicker');
musicClickers.forEach(function(container) {
var videoId = container.dataset.videoId;
var tuneElement = container.querySelector('.tune'); // Get the audio element within the container
var player = new YT.Player(tuneElement, { // Use the audio element as the player container
height: '0',
width: '0',
videoId: videoId,
playerVars: {
'controls': 0,
'disablekb': 1,
'fs': 0,
'iv_load_policy': 3,
'modestbranding': 1,
'origin': window.location.origin,
'rel': 0,
'showinfo': 0,
'autoplay': 0,
'mute': 0
},
events: {
'onReady': function(event) { onPlayerReady(event, videoId); },
'onStateChange': function(event) { onPlayerStateChange(event, videoId); }
}
});
players[videoId] = player; // Store the player with the video ID as the key
// Attach click listener to the container
container.addEventListener('click', function() {
songstart(videoId);
});
// Create and append progress bar
var progressBarContainer = document.createElement('div');
progressBarContainer.classList.add('progress-container');
var progressBar = document.createElement('div');
progressBar.classList.add('progress-bar');
progressBar.id = 'progress-bar-' + videoId; // Unique ID for each progress bar
progressBarContainer.appendChild(progressBar);
container.appendChild(progressBarContainer);
// Add click listener to the progress bar container
progressBarContainer.addEventListener('click', function(e) {
var player = players[videoId];
if (player) {
var totalDuration = player.getDuration();
var clickPosition = e.offsetX / this.offsetWidth;
var seekToTime = totalDuration * clickPosition;
player.seekTo(seekToTime, true); // Seek to the clicked time
}
});
});
}
function onPlayerReady(event, videoId) {
console.log("YouTube player is ready for video ID: " + videoId);
}
function onPlayerStateChange(event, videoId) {
var player = players[videoId];
var container = document.querySelector(`.MusicClicker[data-video-id="${videoId}"]`);
if (!container) {
console.error("Container not found for video ID: " + videoId);
return;
}
var playButton = container.querySelector('.playy');
var pauseButton = container.querySelector('.pausee');
if (event.data == YT.PlayerState.ENDED) {
playButton.style.display = 'block';
pauseButton.style.display = 'none';
clearInterval(progressIntervals[videoId]); // Stop the interval
progressIntervals[videoId] = null; // clear memory
resetProgressBar(videoId);
} else if (event.data == YT.PlayerState.PLAYING) {
startProgressBarUpdates(videoId);
} else if (event.data == YT.PlayerState.PAUSED) {
clearInterval(progressIntervals[videoId]); // Stop the interval when paused
progressIntervals[videoId] = null;
}
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
function songstart(videoId) {
var player = players[videoId];
var container = document.querySelector(`.MusicClicker[data-video-id="${videoId}"]`);
var playButton = container.querySelector('.playy');
var pauseButton = container.querySelector('.pausee');
let isPlaying = pauseButton.style.display === 'block';
if (player) {
if (!isPlaying) {
player.playVideo();
playButton.style.display = 'none';
pauseButton.style.display = 'block';
} else {
player.pauseVideo();
playButton.style.display = 'block';
pauseButton.style.display = 'none';
}
} else {
console.error("YouTube player not initialized yet for video ID: " + videoId);
}
}
function startProgressBarUpdates(videoId) {
// Clear any existing interval
if (progressIntervals[videoId]) {
clearInterval(progressIntervals[videoId]);
}
// Start new interval
progressIntervals[videoId] = setInterval(function() {
updateProgressBar(videoId);
}, 50); // Adjust interval for desired update frequency
}
function updateProgressBar(videoId) {
var player = players[videoId];
var progressBar = document.getElementById('progress-bar-' + videoId);
if (player && progressBar) {
var currentSeconds = player.getCurrentTime();
var totalDuration = player.getDuration();
if (totalDuration > 0) { // Check if totalDuration is valid
var progressPercentage = (currentSeconds / totalDuration) * 100;
progressBar.style.width = progressPercentage + '%';
} else {
progressBar.style.width = '0%'; // Reset the progress bar if duration invalid
}
}
}
function resetProgressBar(videoId) {
var progressBar = document.getElementById('progress-bar-' + videoId);
if (progressBar) {
progressBar.style.width = '0%';
}
}
</script>
thing
thing
code
thing
thing
code
thing
thing
code
thing
thing
code
thing
thing
code
This is pretty much an archive for myself since I dont actually know how to code, I just copy and paste the complicated stuff then make it look pretty. Don't even ask me how to do anything with buttons or javascript, I got no clue lol. Hence this hoard of codes.
Anyways, have fun looking around my personal collection of cool internet stuff and pretty graphics!
Anyways, have fun looking around my personal collection of cool internet stuff and pretty graphics!