PushingScores/templates/layout.html

162 lines
4.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pushing Scores</title>
<link rel="stylesheet" href="{{ url_for('static', filename='/css/style.css') }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
(function($){
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
})(jQuery);
$( document ).ready(function() {
var bodyWidth = $(window).width()- $("#generate-button").width();
var bodyHeight = $(window).height()- $("#generate-button").width();
var randPosXabout = Math.floor(Math.random() * (bodyWidth + 1));
var randPosYabout = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button-about').css('left', randPosXabout);
$('#generate-button-about').css('top', randPosYabout);
var randPosXindex = Math.floor(Math.random() * (bodyWidth + 1));
var randPosYindex = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button-index').css('left', randPosXindex);
$('#generate-button-index').css('top', randPosYindex);
var randPosX = Math.floor(Math.random() * (bodyWidth + 1));
var randPosY = Math.floor(Math.random() * (bodyHeight + 1));
$('#generate-button').css('left', randPosX);
$('#generate-button').css('top', randPosY);
$('div.home a').shuffle();
$('div.home').show();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
<!-- WORDPATH -->
<div id="thewordpath">
{% if functionsession %}[<a href='/clear' title='Clear current score'>x</a>]{% endif %}
{% for item in functionsession %}
<span class="word">{{ item }} ▶ </span>
{% endfor %}
</div>
</div>
<div id="bottom">
<!-- THE REST -->
<header>
<div id="logobox">
<h1 class="logo"><a href="{{ url_for('home') }}">Pushing Scores</a></h1>
</div>
</header>
{% block content %}
{% endblock content %}
<!--about button-->
<a href="{{ url_for('about') }}">
<div class="generate-button-about" id="generate-button-about">
<span>a
<span>b
<span>o
<span>u
<span>t
<span>
<span>t
<span>h
<span>i
<span>s
<span>
<span>a
<span>r
<span>c
<span>h
<span>i
<span>v
<span>e
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div>
</a>
<!--end about button-->
<!--index button-->
<a href="{{ url_for('index') }}">
<div class="generate-button-index" id="generate-button-index">
<span>l
<span>i
<span>s
<span>t
<span>
<span>o
<span>f
<span>
<span>i
<span>t
<span>e
<span>m
<span>s
<span>
</span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div>
</a>
<!--end index button-->
<!--start generate score button-->
<a href="{{ url_for('get_file') }}">
<div class="generate-button" id="generate-button">
<span>G
<span>e
<span>n
<span>e
<span>r
<span>a
<span>t
<span>e
<span>
<span>s
<span>c
<span>o
<span>r
<span>e
<span>!
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div>
</a>
<!---end button-->
</div>
</div>
</body>
</html>