this code can aslo be copied into https://htmlpasta.com/, https://pste.eu/ or wherever

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- this meta noindex, nofollow is keep it out of google search results -->
<meta name="robots" content="noindex, nofollow">
<title></title>
<style>
/* this for the loader image */
body {
background: #ffffff url("https://i.imgur.com/9bu7sJs.gif") repeat;
}
/* this for setting document height to 100% which makes images actually take up full page such */
html,
body {
height: 100%;
}
/* this centers the click to play box both vertically and horizontally */
#clickdiv {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/* bellow controls click to play box size and colors */
width: 560px;
height:280px;
background-color:black;
border-style:solid;
border-color:#0DFF00;
}
/* this centers the contents of the click to play box both vertically and hortinatlaly */
#clickinnerdiv {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* the font size controls the click to play button size */
.clicktoplaybutton {
font-size: 60px;
background-color:#0DFF00;
}
/* this is erea revealed by corner gif gets the transparent div it's due to the rgba value */
table#t01 {
width:100%;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
}
/* this is the area revealed by the corner gif makes it stretch fully across the screen */
#myDIV {
width:100vw;
margin:auto;
position: absolute;
max-height:100px;
}
/* this is used because the center tag is deprecated so you use css instead now */
.center {
text-align: center;
}
/* this makes the click to play button change color on mouse curosr hover over */
.clicktoplaybutton:hover {
background-image:none;
background-color:#ff00ff;
}
/* this is a bandaid put on the corner gif makes sure stays in the corner when using the shadow site text :p */
#F {
top:0px;
left:0px;
}
</style>
</head>
<!-- after the page is fully loaded which are the img tags that are set to hidden it actives the script function pageloaded -->
<body onload="pageloaded()">
<!-- the below is triggered after the page is loaded -->
<script>
function pageloaded() {
document.body.style.background = "url('https://i.imgur.com/OcB1aIv.jpg') repeat";
document.body.style.backgroundColor = "black";
// this reveals the click to play button on page load:
clickdiv.style.display = 'block';
}
</script>

<!--the below is the area revealed by the corner gif once clicked -->
<!-- z-index:1 was added to keep it above the sitemaker style site text if used -->
<div id="F" style="display:none;position:absolute;z-index:1;">
<div id="democlick">
<div id="poo">
<!-- this is outer inner corner gif -->
<img src="https://i.imgur.com/2axcA43.png" alt="">
</div>
</div>
<div id="myDIV" style="display:none;">
<table id="t01">
<tr>
<td>
<div id="democlick2">
<!-- this is the inner corner gif -->
<img src="https://i.imgur.com/q6vW4gD.png" alt="">
</div>
</td>
<td>
<!-- this the audio tag plays the audio file -->
<audio id="myAudio" controls loop >
<source 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" type="audio/mpeg">
</audio>
</td>
<td>
<!-- this the site site description erea -->
<div style="color:#1BFF00">site description:</div>
<br>
<div style="height:50px;max-width:500px;overflow:auto;color:#1BFF00"></div>
</td>
</tr>
</table>
</div>
</div>

<div id=KK style="position:absolute;z-index:1;"><input type="button" class="clicktoplaybutton" value="Click to show site loaded page" onClick="pageloaded();KK.style.display='none';"></div>

<!--this div is hidden but after page is loaded reveals the button via the page body onload function,-->
<div id="clickdiv" style="display:none"> <!-- this is the click to play box and is centered on the page -->
<div id="clickinnerdiv"><!-- this exists to center the contents of the click to play box -->
<div class="center" style="color:#0DFF00;font-size:32px;font-weight:bold;"><!--this centers the site loaded text makes it bold changes it color -->
SITE LOADED<br>
<button id="button" class="clicktoplaybutton" onclick="clickedtoplaybutton()">Click Here to Play</button>
</div>
</div>
</div>
<!-- the script below is activated once you click the button and functions are explained below in comments -->
<script>
function clickedtoplaybutton() {
// this plays the audio:
myAudio.play();
// this hides the click to play button after it is clicked:
clickdiv.style.display = 'none';
// this reveals the corner gif:
F.style.display = 'block';
// this sets the background images including there placement of fully loaded site after it is clicked:
document.body.style.background = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==') no-repeat center";
//sets the background color of site
document.body.style.backgroundColor = "black";
// the bellow makes the corner gif appear exactly in the croner:
document.body.style.height = '100%';
document.body.style.margin = '0';
}
</script>

<!-- these are urls of the images to be loaded in the background to 'preload' with the document -->
<!-- the asset i.imgur.com/TjL1Epw.gif is a 1x1 pixel transparent gif being used as a blank src for images -->
<img src="https://i.imgur.com/OcB1aIv.jpg" style="display:none" alt=""> <!-- this is the image displayed on the page loaded click here button -->
<img src="https://i.imgur.com/2axcA43.png" style="display:none" alt=""><!--this is the outer corner gif -->
<img src="https://i.imgur.com/q6vW4gD.png" style="display:none" alt=""><!--this is the inner corner gif -->

<!-- this is script used by corner gif to reveal the large div that has audio controls and site description in it -->
<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 the script used by the corner gif to hide the large div that has audio controls and site desicrition in it -->
<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>

</body>
</html>
#audio url
#image positions Select image placement, placement boxes are revealed after url is entered.
#site title
 #site description
ADVANCED CONTROLS






finished site background color
site description color
click to play button color
click to play button hover over color
click to play box site loaded text color
click to play box background color
click to play box border color
EXTENDED CONTROLS
click to play box border style


site text font family (web safe fonts selection)