Sarimoko/Raid
Sarimoko
/
Raid
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update 'www/index.html'

This commit is contained in:
Sarimoko 2022-02-24 07:36:43 +00:00
parent 78768b8447
commit a3088da503
1 changed files with 93 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
www/index.html
View File

@ -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;
margin-top:50px;
} }
h2, h3, h4, h5, h6, p, a {
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; html,body {
width:100%;
height:100%;
} }
div
{ html {
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; overflow:hidden;
}
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;
}
@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
var body = document.getElementsByTagName('body')[0];
var ants = document.getElementsByClassName('ant'); // get ant elements
// 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";
} }
document.getElementById("progressBar").value = 10 - timeleft;
timeleft -= 1; // randomly position ant at edge of screen
}, 1000); 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>