pro-standard cr akechigoros music player & bg/cursor

---MUSIC PLAYER---
<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=M+PLUS+Rounded+1c:wght@400;500;800&amp;display=swap" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">

@font-face {
src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
font-family: hearts;
}
/*-------MUSIC PLAYER BY GLENTHEMES-------*/

#cont {
width: 200px;
height: 50px;
background: white;
border-radius: 10px;
border: 1px solid white;
position: relative;
top: -915px;
box-shadow: 0 0 1px 1px white, 0 0 2px 2px #facade;
z-index: 98;
}

#glenplayer02 {
position:relative;
top:0px;
width: 170px;
justify-content:center;
text-align: center;
align-contents: center;
left:0px;
margin-left: auto;
margin-right: auto;
display:flex;
z-index:99;
}
#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
}

.playy, .pausee {color:#e8b3c9; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left:10px;
font-family: hearts;
line-height: 15px;
font-size:14px;
color:#e8b3c9;
font-weight: bold;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0; /* color of music note symbol */
}

.labeltext {
margin-left:0px;
position: relative;
bottom:10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:14px;
color:#e8b3c9;
font-weight: bold;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;/* color of song title */
}

ange {
position: relative;
bottom: -6px;
}

mew {
line-height: 15px;
font-family: love;
color:#facade;
font-size: 15px;
text-shadow:
-.6px -.6px 0 #fff,
.6px -.6px 0 #fff,
-.6px .6px 0 #fff,
.6px .6px 0 #fff,
-.6px 0 0 #fff,
.6px 0 0 #fff,
0 .6px 0 #fff,
0 -.6px 0 #fff;
font-family: love;
}

#les {

height: auto;
width:auto;
position: relative;
bottom:695px;
border-radius: 50px 50px 0 0;
overflow: hidden;

}

nana {
top: 0px;
z-index: 50;
position: relative;

}

#line {
width: 100px;
border-radius: 1px;
height: 3px;
position: relative;
z-index: 999;
}

#hachi {
margin: 0;
position: absolute;
bottom:-600px;
left: 50%;
transform: translate(-50%, -50%);
z-index:999;
}

strawb {
width: 300px;
font-family: hearted;
position: relative;
color: #facade;
font-size: 20px;
}

</style>
<center>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="cont">
<mew>Now Playing . . . TXT</mew> <ange><img src="https://files.catbox.moe/wgg34l.gif"></ange>
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy"><img src="https://dl.dropbox.com/scl/fi/dklsgt2n2wsh6mnv35xe7/UHtkTZs.gif?rlkey=mxg70hbcont41qvkxba80rbpj&st=ehfo6dkr&dl=0.gif"></div>
<div class="pausee"><img src="https://dl.dropbox.com/scl/fi/dklsgt2n2wsh6mnv35xe7/UHtkTZs.gif?rlkey=mxg70hbcont41qvkxba80rbpj&st=ehfo6dkr&dl=0.gif"></div>
</div>
<div class="sonata"> <marquee>There'll be no more sorrow, I'll see you there tomorrow</marquee> </div>
<div class="labeltext"></div>
</div><!--end music player-->
</div>
<audio id="tune" src="https://dl.dropbox.com/scl/fi/2k057sh85w76p85ce48rp/01-I_ll-See-You-There-Tomorrow.mp3?rlkey=iq7rmm38nqj1eowvs7sn5uldv&st=jb15admg&dl=0.mp3" "audio"=""></audio>
<div id="line"> </div>
<div id="hachi"> <strawb><marquee style="width:499px;">aaaa get nanahachi-ed!?!? <img src="https://64.media.tumblr.com/c4048f22231682f7700cf0a6976d12bc/tumblr_inline_p81vpicCjX1t78dpp_100.gifv"/> </marquee> </strawb> <iframe width="499px" height="178" src="https://files.catbox.moe/d17os7.mp4" frameborder="0" allowfullscreen></iframe>
</center>

<div class="labeltext"> </div></body></html>

---BACKGROUND & CURSOR---
<script type="text/javascript">
// <![CDATA[
var bgcolour="#FFE8F2"; // background colour
var fgcolour="#E8B3C9"; // foreground colour
var speed=80; // speed of bubbling, lower is faster
var shades=12; // number of shades of bubble

/****************************
* Bubbling Text Effect *
*(c)2003-13 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bubbcol=new Array();
var bubbshd;
var bubbler, bubbtxt;
var bubbchr=new Array();

function addLoadEvent(funky) {
var oldonload=window.onload;
if (typeof(oldonload)!='function') window.onload=funky;
else window.onload=function() {
if (oldonload) oldonload();
funky();
}
}

addLoadEvent(bubbagump);

function bubbagump() { if (document.getElementById) {
var i, fg, bg, col;
for (bubbler=0; bubbler<=shades; bubbler++) {
col="#";
for (i=1; i<6; i+=2) {
bg=parseInt(bgcolour.substring(i,i+2),16);
fg=parseInt(fgcolour.substring(i,i+2),16);
col+=dechex(bg+(fg-bg)*(bubbler/shades));
}
bubbcol[bubbler+1]=col;
if (bubbler==Math.floor(shades/2)) bubbshd=col;
}
bubbler=document.getElementById("bubble");
bubbtxt=bubbler.firstChild.nodeValue;
while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);
for (i=0; i<bubbtxt.length; i++) {
fg=document.createElement("span");
fg.setAttribute("id", "bubb"+i);
fg.style.textShadow=bubbshd+" 0px 0px 2px";
fg.appendChild(document.createTextNode(bubbtxt.charAt(i)));
bubbler.appendChild(fg);
}
bubbler=setInterval("bubbling()", speed);
}}

function dechex(dec) {
dec=Math.floor(dec);
return ((dec<16)?'0':'')+dec.toString(16);
}

function bubbling() {
var i, bubby;
for (i=0; i<bubbtxt.length; i++) {
bubby=document.getElementById("bubb"+i);
if (bubbchr[i]) {
bubby.style.color=bubbcol[bubbchr[i]];
bubbchr[i]=(bubbchr[i]+1)%bubbcol.length;
}
else if (Math.random()<7.5/(shades*bubbtxt.length)) bubbchr[i]=1;
}
}
// ]]>

var b = document.body;
var imgurl = "https://dl.dropbox.com/scl/fi/d3yfnbbe48co7mjvlkt78/psIMC1h.gif?rlkey=lkiydk331bt8fcmjyi24yu7o9&st=ijb47b2x&dl=0.gif";
var size = [10, 20];
function rand(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min)
}
function getSize()
{
return rand(size[0], size[1]);
}
function lerp(a,b,f)
{
return (b-a)*f+a;
}
function heart(x,y)
{
var s = getSize();
x -= s/2;
y -= s/2;
x = Math.floor(x) + rand(-5, 5);
y = Math.floor(y) + rand(-5, 5);
var fx = x + rand(-40, 40);
var fy = y + rand(-40, 40);
var i = document.createElement("img");
i.src = imgurl;
i.style = `pointer-events: none; position: fixed; width: ${s}px; left: ${x}px; top: ${y}px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1000000;`;
b.appendChild(i);
var f = 0;
var interval;
interval = setInterval(function() {
var _x = Math.floor(lerp(x, fx, f));
var _y = Math.floor(lerp(y, fy, f));
i.style = `pointer-events: none; position: fixed; width: ${s}px; left: ${_x}px; top: ${_y}px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1000000;`;
i.style.opacity = 1-f;
f += 0.01;
if (f > 1)
{
clearInterval(interval);
b.removeChild(i);
}
}, 10);
}
function bro(x,y)
{
for (var i = 0; i < 5; i++)
{
heart(x,y);
}
}
b.addEventListener("click", function(event){
var x = event.clientX;
var y = event.clientY;
bro(x,y);
});

// <![CDATA[
var colour="#facade"; // what colour are the blobs
var speed=60; // speed of animation, lower is faster
var blobs=30; // how many blobs are in the jar
var charc='\u2661'; // a blob - can be changed to charc='hello' or charc='*' for a different effect

/**************************** Blobs in a Jar Effect *
* (c)2012 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
***************************/

window.onload=fill_the_jar;
var div;
var xpos=new Array();
var ypos=new Array();
var zpos=new Array();
var dx=new Array();
var dy=new Array();
var dz=new Array();
var blob=new Array();
var swide=800;
var shigh=600;
function fill_the_jar() {
var i, dvs;
div=document.createElement('div');
dvs=div.style;
dvs.position='fixed';
dvs.left='0px';
dvs.top='0px';
dvs.width='1px';
dvs.height='1px';
document.body.appendChild(div);
set_width();
for (i=0; i<blobs; i++) {
add_blob(i);
jamjar(i);
}
}

function add_blob(ref) {
var dv, sy;
dv=document.createElement('div');
dv.appendChild(document.createTextNode(charc));
sy=dv.style;
sy.position='absolute';
sy.textAlign="center";
if (navigator.appName=="Microsoft Internet Explorer") {
sy.fontSize="10px";
sy.width="100px";
sy.height="100px";
sy.paddingTop="40px";
sy.color=colour;
}
else sy.color='rgba(0,0,0,0)';
ypos[ref]=Math.floor(shigh*Math.random());
dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
xpos[ref]=Math.floor(swide*Math.random());
dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
zpos[ref]=Math.random()*20;
dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
blob[ref]=dv;
div.appendChild(blob[ref]);
set_blob(ref);
}
function rejig(ref, xy) {
if (xy=='y') {
dx[ref]=(0.5+Math.random())*sign(dx[ref]);
dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
}
else {
dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
dy[ref]=(0.5+Math.random())*sign(dy[ref]);
}
}
function sign(a) {
if (a<0) return (-2);
else if (a>0) return (2);
else return (0);
}
function set_blob(ref) {
var sy;
sy=blob[ref].style;
sy.top=ypos[ref]+'px';
sy.left=xpos[ref]+'px';
if (navigator.appName=="Microsoft Internet Explorer") {
sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
sy.fontSize=30-zpos[ref]+"px";
}
else {
sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
sy.fontSize=40+zpos[ref]+'px';
}
}
function jamjar(ref) {
if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
ypos[ref]+=dy[ref];
if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
xpos[ref]+=dx[ref];
if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
zpos[ref]+=dz[ref];
set_blob(ref);
setTimeout("jamjar("+ref+")", speed);
}

window.onresize=set_width;
function set_width() {
var sw_min=999999;
var sh_min=999999;
if (document.documentElement && document.documentElement.clientWidth) {
if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
}
if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
}
if (document.body.clientWidth) {
if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
}
if (sw_min==999999 || sh_min==999999) {
sw_min=800;
sh_min=600;
}
swide=sw_min;
shigh=sh_min;
}
// ]]>
</script>