<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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://htmlsites2.neocities.org/i/cornerimage.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://htmlsites2.neocities.org/i/cornerimage.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>
<!--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 reveals the added code:
added.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
, url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfOkE51a83p5g19hw7NcWW96YE5mfOhnIuQw&usqp=CAU') no-repeat center
, url('https://staticdelivery.nexusmods.com/mods/1303/images/7416/7416-1609352709-1955854407.png') 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 -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfOkE51a83p5g19hw7NcWW96YE5mfOhnIuQw&usqp=CAU" style="display:none" alt=""><!--this is for the (1) middle image -->
<img src="https://staticdelivery.nexusmods.com/mods/1303/images/7416/7416-1609352709-1955854407.png" style="display:none" alt=""><!--this is for the background image -->
<div id="added" style="display:none">
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" style="bottom:0px; right:0px;" data-a2a-url=" " data-a2a-title="htmlsites">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_reddit"></a>
<a class="a2a_button_tumblr"></a>
<a class="a2a_button_digg"></a>
</div>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- 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>