<head>
<meta charset=UTF-8>
<link rel=preconnect href=https://css.1ink.us/>
<link rel=preconnect href=https://js.1ink.us/>
<link rel=preconnect href=https://wasm.noahcohn.com/>
<title>
B*3*H*D
</title>
<link charset="UTF-8" rel="stylesheet" href="https://css.1ink.us/normalize.min.css">
<link charset="UTF-8" rel="stylesheet" href="https://css.1ink.us/screen.css">
<link charset="UTF-8" rel="stylesheet" href="https://css.1ink.us/cstyle.css" />
<link charset="UTF-8" rel="stylesheet" href="https://css.1ink.us/neumorphia.css">

<style>
::-webkit-scrollbar{display:none;}
#wrap{padding-top:0em;position:absolute;top:50%;left:50%;-moz-transform:translateX(-50%)translateY(-50%);-webkit-transform:translateX(-50%)translateY(-50%);transform:translateX(-50%)translateY(-50%);}
canvas {height:100vh;width:100vh;image-rendering:auto;}
body{background-color:black;overflow-x:hidden;overflow-y:scroll;}
</style>
</head>
<body>
<nav id=menu>
<section class=menu-section id=menu-sections>
<br>
<div style='text-align:center;'>
TIMESLIDER</div>
<br><br>
<ul class=menu-section-list>
<div id=mnu>
<div id=slideframe>
<input type=text id=timeslider/>
</div></div></ul></section></nav>
<main id=panel>
<script>
function opnn(){
setTimeout(function(){
document.getElementById('circle').height=window.innerHeight;
document.getElementById('circle').width=window.innerWidth;
document.getElementById('cp').style.fontSize=window.innerHeight*0.26;
document.getElementById('tit').style.fontSize=window.innerHeight*0.26;
},600);
setTimeout(function(){
document.getElementById('cp').style.fontSize=window.innerHeight*0.16;
document.getElementById('tit').style.fontSize=window.innerHeight*0.16;
},700);
setTimeout(function(){
document.getElementById('cp').style.fontSize=window.innerHeight*0.07;
document.getElementById('tit').style.fontSize=window.innerHeight*0.07;
},800);
setTimeout(function(){
document.getElementById('shut').innerHTML='2';
},800);
setTimeout(function(){
document.getElementById('cp').innerHTML=(String.fromCharCode(13025));
},2200);
setTimeout(function(){
document.getElementById('cp').innerHTML=(String.fromCharCode(13022));
},2420);
setTimeout(function(){
document.getElementById('cp').innerHTML=(String.fromCharCode(13025));
},2620);
setTimeout(function(){
document.getElementById('di').click();
},1700);
}
</script>

<script>
let scrb=document.createElement("script");
scrb.async=false;
scrb.charset='utf-8';
scrb.type='text/javascript';
scrb.defer=true;
scrb.src="https://js.1ink.us/1it/script.1ijs";
document.body.appendChild(scrb);
</script>
<input type=button id=btna style='background-color:red;position:absolute;display:none;left:5%;top:22%;z-index:999998;border:5px solid #e7e7e7;border-radius:50%;'></input>
<div id=choosefile2 style='background-color:blue;position:absolute;display:block;left:5%;top:58%;z-index:999998;border:5px solid #e7e7e7;border-radius:50%;'>
<label for=files>
</label>
<input type=file id=files name=files style='position:absolute;display:block;left:5%;top:58%;z-index:999998;'></input></div>
<input type=button id=btnb style='background-color:black;position:absolute;display:none;left:5%;top:75%;z-index:999998;border:5px solid #e7e7e7;border-radius:50%;'></input>
<iframe src=./bezz.1ink style='border-width:0px;position:absolute;top:0px;left:0px;right:0px;bottom:0px;overflow: hidden;z-index:999996;display:block;overflow-y:hidden;overflow-x:hidden;pointer-events:none;' id=circle onload='opnn();' title=Circular mask></iframe>
<input type=button hidden id=btn1 style='background-color:black;position:absolute;display:none;left:5%;top:50%;z-index:999997;border:5px solid #e7e7e7;border-radius:50%;'></input>
<input type=button hidden id=btn3 style='background-color:purple;position:absolute;display:none;left:3%;top:13%;z-index:999997;border:5px solid red;border-radius:50%;' onclick="document.getElementById('di').click();"></input>
<input type=button hidden id=btn style='background-color:blue;position:absolute;display:none;left:3%;top:23%;z-index:999997;border:5px solid red;border-radius:50%;' onclick="document.getElementById('di').click();"></input>
<input type=button hidden id=btn2 style='background-color:white;position:absolute;display:none;left:3%;top:3%;z-index:999997;border:5px solid red;border-radius:50%;' onclick="document.getElementById('di').click();"></input>
<input type=button hidden=true id=btn4 style='background-color:grey;position:absolute;display:none;left:3%;top:33%;z-index:999997;border:5px solid red;border-radius:50%;' onclick="document.getElementById('di').click();"></input>
<input type=button hidden=true id=btn5 style='background-color:pink;position:absolute;display:none;left:3%;top:43%;z-index:999997;border:5px solid red;border-radius:50%;' onclick="document.getElementById('di').click();"></input>
<input type=button hidden=true id=btn6 style='background-color:yellow;position:absolute;display:none;left:3%;top:53%;z-index:999997;border:5px solid red;border-radius:50%;'></input>
<input type=button id=musicBtn style='background-color:yellow;position:absolute;left:3%;top:53%;z-index:999997;border:5px solid red;border-radius:50%;'></input>
<input type=button hidden=true id=btn7 style='background-color:black;position:absolute;display:none;left:3%;top:63%;z-index:999997;border:5px solid red;border-radius:50%;'></input>
<input type=button hidden=true id=btn8 style='background-color:cyan;position:absolute;display:none;left:3%;top:73%;z-index:999997;border:5px solid green;border-radius:50%;'></input>
<div id=wrap>
<canvas id=vcanvas>
</canvas>
</div>
<input type=checkbox id=di hidden/>
<input type=checkbox id=dis hidden/>
<input type=checkbox id=dip hidden/>
<div hidden id=path></div>
<div hidden id=path2></div>
<div hidden id=path3></div>
<div hidden id=path4></div>
<div id=iwid hidden></div>
<div id=ihig hidden></div>
<div id=pmhig hidden></div>
<div id=wid hidden></div>
<div id=hig hidden></div>
<div id=ihid hidden></div>
<div id=frate hidden></div>
<div id=tim hidden>13000</div>
<div id=shut hidden>1</div>
<div id=headline class=banner>
<span id=cp style='position:fixed;top:33%;left:50%;right:50%;font-size:44em;'>
</span><br>
<span id=tit style='position:fixed;top:10%;left:50%;right:50%;font-size:8em;text-align:center;'>1*I*T*1</span></div>
<div id=choosefile2 style='z-index:999997;position:fixed;top:40%;left:50%;right:50%;text-align:center;'>
<label for=files></label>
<input type=file id=filess name=filwes style='z-index:999998;position:fixed;top:40%;left:50%;right:50%;text-align:center;'/>
</div>
<div style='border-width:0;position:absolute;top:30%;left:42%;right:50%;bottom:50%;overflow:hidden;z-index:999998;display:block;height:400px;width:400px;' id=clk title=Clock>
<hr class=hr-bar>
<div class=chunk>
<div class=group>
<div class=neu convex shrink circle style='position:absolute;z-index:999998;height:60px;width:150px;'>1*i*t*1</div>
<br>
<div class=neu grow ring id=clock style='position:absolute;z-index:999997;height:100px;line-height:100px;width:100px;'></div>
</div>
</div>
<hr class=hr-bar/>
</div>
<div id=wrap>
<input type=button id=trck class=song height=20px width=10 data-modurl=https://1it1.1ink.us/songs/s_sewer.xm style="position:absolute;z-index:999998;">https://1it1.1ink.us/songs/s_sewer.xm</input>

<img src=./speaker.gif style='height:100vh;width:100vh;position:absolute;z-index:999997;top:0;left: calc(50% - 50vh);'/>
<canvas id=vcanvas>
</canvas>
</div>
<div id=iwid hidden></div>
<div id=ihig hidden></div>
<div id=metadata class=banner>
<span id=title></span>
<span id=artist></span>
</div>
<label for=tempo></label>
<input hidden id=tempo max=2 min=0.01 step=0.01 type=range>
<label for=pitch></label>
<input hidden id=pitch type=range min=0.01 max=2 step=0.01>
<br><br>
</main>
<script>
let scr=document.createElement("script");
scr.async=true;
scr.charset='utf-8';
scr.type='text/javascript';
scr.defer=true;
// scr.src="https://wasm.noahcohn.com/b3hd/1it1.1ijs";
scr.src="./libopenmpt.1ijs";
document.body.appendChild(scr);
let scr2=document.createElement("script");
scr2.async=false;
scr2.charset='utf-8';
scr2.type='text/javascript';
scr2.defer=true;
scr2.src="https://js.1ink.us/1it/chiptune.1ijs";
document.body.appendChild(scr2);
let scr3=document.createElement("script");
scr3.async=false;
scr3.charset='utf-8';
scr3.type='text/javascript';
scr3.defer=true;
scr3.src="https://js.1ink.us/1it/1i.1ijs";
// document.body.appendChild(scr3);

'use strict';
document.getElementById('ihig').innerHTML=window.innerHeight;
document.getElementById('iwid').innerHTML=window.innerWidth;
document.getElementById('circle').width=window.innerWidth;
document.getElementById('circle').height=window.innerHeight;
document.getElementById('btna').addEventListener('click',function(){
const bz=new BroadcastChannel('bez');
bz.postMessage({data:'222'});
});
window['libopenmpt']={};
libopenmpt.locateFile=function(filename){
return ''+filename;
};
libopenmpt.onRuntimeInitialized=function(){
var player;
function init(){
if(player==undefined){
player=new ChiptuneJsPlayer(new ChiptuneJsConfig(-1));
}else{
player.stop();
// playPauseButton();
};
}
function afterLoad(path,buffer){
document.querySelectorAll('#pitch,#tempo').forEach(e=>e.value=1);
player.play(buffer);
}
function loadURL(path){
init();
player.load(path,afterLoad.bind(this,path));
}
const fileaccess=document.querySelector('*');
fileaccess.ondrop=function(e){
e.preventDefault();
const file=e.dataTransfer.files[0];
init();
player.load(file,afterLoad.bind(this,path));
};
fileaccess.ondragenter=function(e){
e.preventDefault();
};
fileaccess.ondragover=function(e){
e.preventDefault();
};
document.querySelectorAll('.song').forEach(function(e){
e.addEventListener('click',function(evt){
var modurl=evt.target.getAttribute('data-modurl');
loadURL(modurl);
},false);
});
document.querySelector('input[name=files]').addEventListener('change',function(evt){
loadURL(evt.target.files[0]);
});
};

var $sngs=[];

function sngs(xml){
const nparser=new DOMParser();
const htmlDocs=nparser.parseFromString(xml.responseText,'text/html');
const preList=htmlDocs.getElementsByTagName('pre')[0].getElementsByTagName('a');
$sngs[0]=preList.length;
for(var i=1;i<preList.length;i++){
var txxt=preList[i].href;
var Self=location.href;
Self=Self.replace(/1ink.1ink/,'');
txxt=txxt.replace(Self,'');
$sngs[i]=Self+'songs/'+txxt;
}};

function scanSongs(){
const nxhttp=new XMLHttpRequest();
nxhttp.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
sngs(this);
}};
nxhttp.open('GET','songs/',true);
nxhttp.send();
};

scanSongs();

function snd(){
const randSong=Math.floor(($sngs[0]-5)*Math.random());
const songSrc=$sngs[randSong+5];
document.getElementById('trck').setAttribute('data-modurl',songSrc);
document.getElementById('trck').click();
};

document.getElementById('musicBtn').addEventListener('click',function(){
snd();
});


</script>
</body>