this code can aslo be copied into https://htmlpasta.com/ or wherever // click here to return to main page

<html>
<head>
<title></title>
<!-- this is theerea is revealed when hit on the corner triangle gif -->
<style>
#myDIV {
width:100vw;
margin:auto;
position: absolute;
max-height:100px;
}
</style>
<!-- this the code that makes the site description box background revealed by hitting corner gif a clear gray color -->
<style>
table#t01 {
width:100%;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
}
</style>
<!-- this the code changes the button color on hover over -->
<style>
.button:hover {
background-image:none;
background-color:#ff00ff;
}
</style>
<!-- made so can change the location of the loading gif -->
<style>
body {
background: #ffffff url("https://media.discordapp.net/attachments/445570187392057345/452884727020519424/neo_loading_screen.gif") repeat;
height: 100%;
}
</style>


<!-- this is makes the site's loaded button bigger making it easier to find and hit, especially when using cellphones -->
<style type="text/css">
.button { background-color:#02C90F;border:none;color:white;padding: 15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size: 40px;margin: 4px 2px;cursor: pointer; }
</style>

<!-- this is the line of code that changes the font family, currenlty dropbox is used for font urls chaning the url to dl.dropboxusercontent as a hack due to the fact most places httaccess prevents the use of 'site cross refenced files' which includes fonts -->
<style>
@font-face {
font-family: myFirstFont;
src: url();
}
</style>

<!-- this is code for the getting the div id C with the hit here button to be centered on the page both horizontal and vertical -->
<style type="text/css">
/* this for centering the site loaded click here to play box it's all held with in */
#C { width:500px;height:230px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat center,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) repeat;background-color:black;border-style:solid;border-color:#0DFF00;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:100%;max-height:100%;overflow:hidden;}
/* this for centering a optional message display on page load */
#show { width:500px;height:230px;background:black;border-style:solid;border-color:#0DFF00;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:100%;max-height:100%;overflow:hidden;}
</style>
<!-- this is code is possibly sloppy, it makes so you change the hieght of the box and it stays vertically centered -->
<style>
/* this centers the click to play site contents for resizing the hieght larger */
.jewww {
margin:auto;
width:auto;
background-image: none;
background-color: transparent;
white-space: nowrap;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%); /* IE 9 */ /* added this to fix problem in konquer, not know if correct snyax */
-webkit-transform: translate(-50%, -50%); /* Safari */ /* added this to fix problem in konquer, not know if correct snyax */
transform: translate(-50%, -50%);
}
/* this centers the message box on page load for resizing the hieght larger */
.jewww2 {
margin:auto;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%); /* IE 9 */ /* added this to fix problem in konquer, not know if correct snyax */
-webkit-transform: translate(-50%, -50%); /* Safari */ /* added this to fix problem in konquer, not know if correct snyax */
transform: translate(-50%, -50%);
overflow: hidden;
}
/* this is a box that holds the text in, this is to escape the text from centering while centering the div the text is within, needs be resized by user for text length */
.yard {
height:100px;
width:auto;
white-space: nowrap;
}
</style>
<!-- this cause i changed site loaded text from h1 to p so could change it's font size, yet in order to keep looking right had change the spacing -->
<style>
p.thicker {
line-height: 8px;
}
.center {text-align: center;} /* this is for centering things as center tag is depriciated */
</style>
</head>

<!-- this sets the background image of loader and onload changes it to different artistic background image and makes the div C visible with the click here button -->
<body onload="document.body.style.background='url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat center,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(https://i.imgur.com/OcB1aIv.jpg) repeat';document.body.style.backgroundColor='white';C.style.display='block';">

<!-- this is the audio tag which is hidden by div id F that is revealed when the button is pressed, already has goofy url in it for simplified site testing -->
<!-- z-index:1 was added to keep it above the site text -->
<div id=F style=display:none;position:absolute;z-index:1;>
<div id="democlick">
<div id=poo>
<img src="https://i.imgur.com/kNG8t2V.gif" alt="">
</div>
</div>
<div id="myDIV" style="display:none;">
<table id=t01>
<tr>
<td>
<div id="democlick2">
<img src="https://i.imgur.com/SMvpaXK.gif" alt="">
</div>
</td>
<td>
<audio id=A src="https://archive.org/download/78_aloha-land_wallie-herzer-helen-louise-frank-ferera-athenian-mandolin-quartet_gbia0000271a/_78_aloha-land_wallie-herzer-helen-louise-frank-ferera-athenian-mandolin-quartet_gbia0000271a_01_3.8-ct_eq.mp3" controls loop type="audio/mpeg" ></audio>
</td>
<td>
<div style="color:grey">site discription:</div>
<br>
<div style="height:50px;max-width:500px;overflow:auto;color:grey"></div>
</td>
</tr>
</table>
</div>
</div>

<div id=KK style="position:absolute;z-index:1;"><input type="button" class="button" value="Click to show site loaded page" onClick="document.body.style.background='url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat center,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(https://i.imgur.com/OcB1aIv.jpg) repeat';document.body.style.backgroundColor='white';show.style.display='none';C.style.display='block';KK.style.display='none';"></div>

<div id=show style=display:none>
<!-- this is an optional box that displays on the loading gif page -->
<div class=center>
<div class=jewww2>
<div class=yard>
<p class="thicker" style="color:#0DFF00;font-size:32px;">
<br><br><br><br>
<br><br><br><br>

</p>
</div>
</div>
</div>
</div>

<!-- this is script used by button click to reveal then again to hide the click corner gif -->
<script>
document.getElementById("democlick").onclick = function() {myFunction()};

function myFunction() {
var x = document.getElementById("myDIV");
var p = document.getElementById("poo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
if (p.style.display === "none") {
p.style.display = "block";
} else {
p.style.display = "none";
}
}
</script>
<!-- this is so when the coner gif is clicked, can then click again on revealed image to hide it go back to original -->
<script>
document.getElementById("democlick2").onclick = function() {myFunction()};

function myFunction() {
var x = document.getElementById("myDIV");
var p = document.getElementById("poo");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
if (p.style.display === "none") {
p.style.display = "block";
} else {
p.style.display = "none";
}
}
</script>

<!-- these are urls of the images to be loaded in the background to 'preload' with the document -->
<img src="https://i.imgur.com/OcB1aIv.jpg" style="display:none" alt=""> <!-- default side loaded page background -->
<img src="https://i.imgur.com/kNG8t2V.gif" style="display:none" alt=""><!-- corner gif 1 -->
<img src="https://i.imgur.com/SMvpaXK.gif" style="display:none" alt=""><!-- conter gif 2 -->

<!-- this block of code is a circus which is the button that is revealed by the div id C, all this stuff is the funtions id does onclick, height='100% is imporant for getting the gifs to center be placed right, A.play places the audio, F reveals the audio, C hides the button on click, T reveals the ytmnd style text, -->
<!-- the base64 is blank images that fill the space until a user inputs an actual url -->
<!--then this whole long string nightmare of random that is the javascript that makes the classic ytmnd test -->
<!-- FOR SOME REASON i can not explian adding the javascript that makes the classic ytmnd text MAKES THE AUDIO PLAY on a cellphone, simpley no idea -->
<!-- document.body.style.margin='0' makes so corner gif is on extact side-->
<!-- the 2 blank spaces nbsp; is for making the click to press here vertically center just right -->
<div id=C style=display:none>
<div class=jewww>
<div class=center>
<p class="thicker" style="color:#0DFF00;font-size:32px;font-weight:bold;"> site loaded</p>
<input type="button" class="button" value="Click to Play Site" onClick="document.body.style.background='url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat center,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) no-repeat bottom right,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==) repeat';document.body.style.height='100%';document.body.style.margin='0';document.body.style.backgroundColor='black';A.play();F.style.display='block';C.style.display='none';show.style.display='none';T.hidden=0;t=['','','']; l=Math.max(t[0].length,t[1].length,t[2].length); s=19<l?21:14<l?25:12<l?30:11<l?35:9<l?40:7<l?45:50; l=''; for(j in t){ c=(s*2+25)*j*2; for(i=0;i++<s;){ z=i==s?0:(i<4?0:'')+(i*4).toString(16); l+='<div style=position:absolute;width:810;left:'+i*2+';top:'+(i+c)+';color:'+z+z+z+';font-size:'+i*2+'pt>'+t[j]+'</div>'}}; T.innerHTML=l;"><br> <br>  </div>
</div>
</div>

<!-- this is div T the ytmnd style font, the span id fonter is where if choose fancy font uploaded a url special fontfamily 'myFirstFont' set by css to be placed -->
<div id=T style="text-align:center;font-family:Tahoma,sans-serif" hidden> </div>

</body>
</html>
SITE LOADED click here to play page controls
#This is the change the click to play background images and postions

#This is the change the click to play BOX images and postions

#site loaded page background color
#site loaded page expanded controls

#finalized site background color (the loading gif page, the click here to play page, and the final page each have differnt background color setting)
#change corner gif
#site text (skip and leave blank for no text)
#expanded controls
#to change the font (requires .ttf font files, upload and get urls same as images and audios)
-Due to limitations not just any url will work, currently https://www.dropbox.com/ is allowed take a dropbox link and change the url to https://dl.dropboxusercontent.com/ and removing the ?dl=0 at the end
Example being changed to https://www.dropbox.com/s/k70qgdrondp3011/Spooky.ttf?dl=0 to https://dl.dropboxusercontent.com/s/k70qgdrondp3011/Spooky.ttf

#loading gif keep the loading gif small as possible
Optional custom message display box on loading page
show hide #custom message display box expanded controls

#site title
 #site description

 #site description text color

#image urls (note: images are shown as layered, background is the very back, foreground is the front,) images for the rainbow of all 9 positions plus background!
#image postions Select image placement, placement boxes are revealed after url is entered.

#audio url (If audio is not an mp3 select the alternative .wav or .ogg format)
mp3 wav ogg