Update 'www/index.html'
This commit is contained in:
parent
78768b8447
commit
a3088da503
142
www/index.html
142
www/index.html
|
@ -9,62 +9,104 @@
|
||||||
<link rel="icon"
|
<link rel="icon"
|
||||||
type="image/png"
|
type="image/png"
|
||||||
href="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png">
|
href="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png">
|
||||||
<meta http-equiv="Refresh" content="3; url=https://www.streamraiders.com/game/" />
|
<meta http-equiv="Refresh" content="7; url=https://www.streamraiders.com/game/" />
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body, html
|
.ant {
|
||||||
{
|
position:absolute;
|
||||||
background: #5865f2; margin: 0; padding: 0; height: 100%; overflow: hidden;
|
background-image:url("https://ianparberry.files.wordpress.com/2013/02/antwalk.gif");
|
||||||
}
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
.raid-logo {
|
||||||
color: white; top-margin: 50px; font-family: Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
|
display:block;
|
||||||
}
|
margin:auto;
|
||||||
h2, h3, h4, h5, h6, p, a {
|
margin-top:50px;
|
||||||
color: white; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
|
}
|
||||||
}
|
|
||||||
div
|
html,body {
|
||||||
{
|
width:100%;
|
||||||
background: #36393f; border-radius: 12px; margin-left: 20%; margin-right: 20%; margin-botton: 20px; margin-top: 20px; position: relative; text-align: center; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
|
height:100%;
|
||||||
}
|
}
|
||||||
button {
|
|
||||||
background: #5865f2; width: 70%; height: 80px; color: white; margin: 15px; font-size: 22px; border-radius: 6px; font-family:Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace;
|
html {
|
||||||
}
|
overflow:hidden;
|
||||||
@keyframes spinning {
|
}
|
||||||
from { transform: rotate(0deg) }
|
|
||||||
to { transform: rotate(360deg) }
|
|
||||||
}
|
|
||||||
.spin {
|
|
||||||
animation-name: spinning;
|
|
||||||
animation-duration: 3s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
/* linear | ease | ease-in | ease-out | ease-in-out */
|
|
||||||
animation-timing-function: linear;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body><br>
|
<body>
|
||||||
<br><br><br>
|
<span class="ant"></span>
|
||||||
<center><img src="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png" class="spin"></center><br>
|
<span class="ant"></span>
|
||||||
<div id="box" class="box">
|
<span class="ant"></span>
|
||||||
<br>
|
<span class="ant"></span>
|
||||||
<h1>The Raid</h1>
|
<span class="ant"></span>
|
||||||
<h3>by Sarimoko</h3>
|
<img src="https://seeklogo.com/images/R/raid-logo-AAA5EC6038-seeklogo.com.png" class="raid-logo"/>
|
||||||
<progress value="0" max="5" id="progressBar"></progress>
|
|
||||||
<p>You will be re-directed in 5 seconds...</p>
|
|
||||||
<button id="gonow" class="gonow"><a href="https://www.streamraiders.com/game/">Continue to StreamRaiders</a></button>
|
|
||||||
<br><br>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
var timeleft = 10;
|
var mouseCoords = {x:1,y:1}; // current mouse position
|
||||||
var downloadTimer = setInterval(function(){
|
var antSpeed = 100; // ant speed in pixels per second
|
||||||
if(timeleft <= 0){
|
var antSize = 30; // ant size in pixels
|
||||||
clearInterval(downloadTimer);
|
var lastUpdate = 0; // time of last animation update
|
||||||
}
|
|
||||||
document.getElementById("progressBar").value = 10 - timeleft;
|
var body = document.getElementsByTagName('body')[0];
|
||||||
timeleft -= 1;
|
var ants = document.getElementsByClassName('ant'); // get ant elements
|
||||||
}, 1000);
|
|
||||||
|
// random position each ant and set size
|
||||||
|
for (var i = 0; i < ants.length; i++) {
|
||||||
|
randomPositionAnt(ants[i]);
|
||||||
|
ants[i].style.height = antSize + "px";
|
||||||
|
ants[i].style.width = antSize + "px";
|
||||||
|
}
|
||||||
|
|
||||||
|
// randomly position ant at edge of screen
|
||||||
|
function randomPositionAnt(ant) {
|
||||||
|
if (Math.random() < 0.5) {
|
||||||
|
ant.xLoc = 0;
|
||||||
|
} else {
|
||||||
|
ant.xLoc = body.clientWidth;
|
||||||
|
}
|
||||||
|
ant.yLoc = Math.random() * body.clientHeight;
|
||||||
|
};
|
||||||
|
// return true if distance between ant and cursor is less than 10 pixels
|
||||||
|
function isAntTouchingCursor(ant) {
|
||||||
|
return Math.sqrt((ant.xLoc - mouseCoords.x) * (ant.xLoc - mouseCoords.x) + (ant.yLoc - mouseCoords.y) * (ant.yLoc - mouseCoords.y)) < 10;
|
||||||
|
}
|
||||||
|
// set up mouse cursor listening
|
||||||
|
window.addEventListener('mousemove', function(data){
|
||||||
|
mouseCoords.x = data.clientX;
|
||||||
|
mouseCoords.y = data.clientY;
|
||||||
|
});
|
||||||
|
// function to call each animation cycle
|
||||||
|
function update() {
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
var updateTime = new Date().getTime();
|
||||||
|
var timeDiff = (Math.min(100, Math.max(updateTime - lastUpdate, 0))) / 1000;
|
||||||
|
lastUpdate = updateTime;
|
||||||
|
|
||||||
|
for (var i = 0; i < ants.length; i++) {
|
||||||
|
var ant = ants[i];
|
||||||
|
|
||||||
|
var xDiff = mouseCoords.x - ant.xLoc;
|
||||||
|
var yDiff = mouseCoords.y - ant.yLoc;
|
||||||
|
var multi = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));
|
||||||
|
var xSpeed = xDiff / multi * antSpeed;
|
||||||
|
var ySpeed = yDiff / multi * antSpeed;
|
||||||
|
var rotation = (180 * Math.atan2(yDiff, xDiff) / Math.PI) - 180;
|
||||||
|
|
||||||
|
ant.xLoc += xSpeed * timeDiff;
|
||||||
|
ant.yLoc += ySpeed * timeDiff;
|
||||||
|
|
||||||
|
if (isAntTouchingCursor(ant)) {
|
||||||
|
randomPositionAnt(ant);
|
||||||
|
}
|
||||||
|
|
||||||
|
ant.style.left = (ant.xLoc - (antSize / 2)) + "px";
|
||||||
|
ant.style.top = (ant.yLoc - (antSize / 2)) + "px";
|
||||||
|
ant.style.transform = "rotate(" + rotation + "deg)";
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue