TinyLifeWeb/web/_includes/top.html

51 lines
No EOL
2 KiB
HTML

<div id="top" class="top d-flex justify-content-center align-items-center vh-100">
<div class="top-content">
<image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
<h4>A fun simulation game where you mess with people's lives</h4>
<div class="container top-container">
<div class="row">
<div class="col site">
<h3>Play the free beta</h3>
<a href="https://ellpeck.itch.io/tiny-life">
<image src="media/itch.png" alt="itch.io" width="200px" height="auto"></image>
</a>
</div>
<div class="col site">
<h3>Wishlist and play</h3>
<a href="https://store.steampowered.com/app/1651490/Tiny_Life/">
<image src="media/steam.png" alt="Steam" width="200px" height="auto"></image>
</a>
</div>
</div>
<a class="link" href="https://twitter.com/TinyLifeGame">Follow on Twitter</a>
<a class="link" href="https://ellpeck.de/discord">Join the Discord</a>
<a class="link" href="https://docs.tinylifegame.com">See Modding Docs</a>
<a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
</div>
</div>
</div>
<script>
let x = Math.random() * 100;
let y = Math.random() * 100;
let angle = Math.random() * 2 * Math.PI;
let addX = Math.cos(angle) * 0.02;
let addY = Math.sin(angle) * 0.02;
let background = $(".top");
background.css("background-position", `${x}% ${y}%`);
$(window).on("load", function () {
setInterval(function () {
x += addX;
y += addY;
if (x < 0 || x > 100)
addX *= -1;
if (y < 0 || y > 100)
addY *= -1;
background.css("background-position", `${x}% ${y}%`);
}, 30);
});
</script>