|
when done copy the code bellow
<html>
<head>
<title>the name of this website</title>
<style>
#myDIV {
width:100vw;
margin:auto;
position: absolute;
max-height:100px;
}
</style>
<style>
table#t01 {
width:100%;
background:#7f7f7f;
background:rgba(0,0,0,0.5);
}
</style>
<style>
body {
background: #ffffff url("https://i.imgur.com/utKpCIj.gif") repeat;
}
</style>
<link rel="preload" href="" as="font" type="font/ttf" crossorigin>
<style type="text/css">
.button { background-color:#4CAF50;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>
<style>
@font-face {
font-family: myFirstFont;
src: url();
}
</style>
<style type="text/css">
/* this for centering the id=C div both horizotinal and vertial */
#C { width:500px;height:230px;background-color:black;border-style:solid;border-color:#ff6633;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;max-width:100%;max-height:100%;overflow:auto; }
</style>
</head>
<body onload="document.body.style.background='url(https://i.imgur.com/OcB1aIv.jpg) repeat';C.style.display='block';">
<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" >
</div>
</div>
<div id="myDIV" style="display:none;">
<table id=t01>
<tr>
<td>
<div id="democlick2">
<img src="https://i.imgur.com/6uMexUQ.gif" >
</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></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>
<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>
<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>
<img src="https://i.imgur.com/OcB1aIv.jpg" style=display:none>
<img src="https://i.imgur.com/6uMexUQ.gif" style=display:none>
<img src="https://i.imgur.com/kNG8t2V.gif" style=display:none>
<img src="" style=display:none>
<img src="" style=display:none>
<img src="" style=display:none>
<img src="" style=display:none>
<img src="" style=display:none>
<div id=C style=display:none><center><h1 style=color:orange >site loaded</h1>
<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==) 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';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;">
</center></div>
<div id=T style="text-align:center;font-family:Tahoma,sans-serif" hidden> </div>
</body>
</html>
|
|
#site title |
#site discription |
#site discription text color |
|
#image urls (note: images are shown as layered, background is the very back, foreground is the front,)
|
|
#image postions (image placement boxes are revealed after url is entered, postion is set or changed second radio button is clicked) |
||||
|
|
|
|
|
|
|
#audio url (note: there is already an audio asset url for testing, if you are merely testing you don't have to add a url) |
|
#site color |
|
#loading gif (keep the loading gif as small as possible) |
|
#this is to change the default image that is displayed as the background with the 'site is loaded, click here' button, *it is preloaded with the other images |
| #change corner gif |
| #site text (skip and leave blank for no text) |
|
#to change the font (requires .ttf font files, upload and get urls same as images and audios) -to use due to 'site cross referencing' limitations not just any url will work, currently dropbox does the job using a link hack take a dropbox link and change the url to https://dl.dropboxusercontent.com/ and removing the ?dl=0 at the end such as https://www.dropbox.com/s/k70qgdrondp3011/Spooky.ttf?dl=0 to https://dl.dropboxusercontent.com/s/k70qgdrondp3011/Spooky.ttf |
|
#preview site |
