{% extends "root.html" %}
{% block title %}ｄｅｅｐｅｒ？{% endblock %}
{% block content %}
<style>
	@keyframes deity { 100% { -webkit-transform: rotate(360deg); } }
	html {
		overflow: hidden;
		cursor: url('../items/gifs/bg3.gif'), auto;
		background: url('../items/gifs/bg2.gif');
		background-size: 15px;
	}
	body { font-family: Georgia; text-align: center; }
	.deity-square {
		background-color: rgba(106, 137, 196, 0.582);
		position: absolute;
		box-shadow: 0px 0px 100px rgb(255, 255, 255);
		animation: deity linear infinite;
	}
	#message { top: 50%; }
</style>
<script>
	let mouse = { x: -1, y: -1 };
	$(document).mousemove(function(event) { mouse.x = event.pageX; mouse.y = event.pageY; });
	setInterval(() => {
		$("html").append(`<img style="position: absolute; pointer-events: none;" class="cursor-trail" src="../items/gifs/bg3.gif">`);
		$(".cursor-trail:last").css({'left': mouse.x, 'top': mouse.y});
		$(".cursor-trail:last").fadeOut(500);
		setTimeout(() => { $(".cursor-trail:first").remove(); }, 500);
	}, 50);

	let degrasse = new Audio('../items/audio/degrasse.mp3');
	setTimeout(() => {degrasse.play();}, 500);
	const deitySquare = (size, freq) => {
		let duration = 1 / freq;
		let left = viewWidth/2 - size/2;
		let top = viewHeight/2 - size/2;
		return `<div class="deity-square" style="width: ${size}px; height: ${size}px; 
		left: ${left}px; top: ${top}px; animation-duration: ${duration}s;">`;
	}
	let numSquares = 10;
	for (let i=0; i<numSquares; i++) $("body").append(deitySquare(800-(randInt(20,100)*i), 0.5 * Math.random()));
	$("body").append(deitySquare(200, 0));
</script>

{% endblock %}