sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

new front design

Browse Source
This commit is contained in:
Sander Roosendaal
2018-10-17 12:40:26 +02:00
parent aac8c40b50
commit 5ff9a81c63
3 changed files with 1057 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
rowers/templates/frontpage.html
View File

@@ -1,37 +1,35 @@
{% extends "basefront.html" %}
{% extends "newbasefront.html" %}
{% load staticfiles %}
{% load rowerfilters %}
{% block title %}Rowsandall Rowing Data{% endblock %}
{% block content %}
{% block main %}
{% load tz %}
<div class="grid_12">
<p class="midden">
Local Time: {% now "jS F Y H:i" %}
</p>
<p class="midden">
<a class="twitter-follow-button"
href="https://twitter.com/rowsandall">
Follow @rowsandall</a>
</p>
<p class="midden">
Compatible with:
<img src="/static/img/stravasquare.png" alt="Strava icon" width="30" height="30">
<img src="/static/img/sporttrackssquare.png" alt="SportTracks icon" width="30" height="30">
<img src="/static/img/c2square.jpg" alt="C2 icon" width="30" height="30">
<img src="/static/img/nksquare.png" alt="NK icon" width="30" height="30">
<img src="/static/img/cnsquare.png" alt="CrewNerd icon" width="30" height="30">
<img src="/static/img/rimsquare.png" alt="RiM icon" width="30" height="30">
<img src="/static/img/rpsquare.png" alt="RowPro icon" width="30" height="30">
<img src="/static/img/essquare.png" alt="ErgStick icon" width="30" height="30">
<img src="/static/img/bcsquare.png" alt="BoatCoach icon" width="30" height="30">
<img src="/static/img/pssquare.png" alt="PainSled icon" width="30" height="30">
<img src="/static/img/coxmate.png" alt="CoxMate icon" width="30" height="30">
<img src="/static/img/ritmo_logo.gif" alt="RitmoTime icon" width="30" height="30">
Local Time: {% now "jS F Y H:i" %}
</p>
<p class="midden">
<a class="twitter-follow-button"
href="https://twitter.com/rowsandall">
Follow @rowsandall</a>
</p>
<p class="midden">
Compatible with:
<img src="/static/img/stravasquare.png" alt="Strava icon" width="30" height="30">
<img src="/static/img/sporttrackssquare.png" alt="SportTracks icon" width="30" height="30">
<img src="/static/img/c2square.jpg" alt="C2 icon" width="30" height="30">
<img src="/static/img/nksquare.png" alt="NK icon" width="30" height="30">
<img src="/static/img/cnsquare.png" alt="CrewNerd icon" width="30" height="30">
<img src="/static/img/rimsquare.png" alt="RiM icon" width="30" height="30">
<img src="/static/img/rpsquare.png" alt="RowPro icon" width="30" height="30">
<img src="/static/img/essquare.png" alt="ErgStick icon" width="30" height="30">
<img src="/static/img/bcsquare.png" alt="BoatCoach icon" width="30" height="30">
<img src="/static/img/pssquare.png" alt="PainSled icon" width="30" height="30">
<img src="/static/img/coxmate.png" alt="CoxMate icon" width="30" height="30">
<img src="/static/img/ritmo_logo.gif" alt="RitmoTime icon" width="30" height="30">
</p>
</div>
{% endblock %}

635
static/css/frontstyles.css Normal file
View File

@@ -0,0 +1,635 @@
* {box-sizing: border-box;}
.wrapper {
max-width: 1400px;
width: 100%;
font: 1.2em Helvetica, arial, sans-serif;
}
.wrapper > * {
/* border: 2px solid #f08c00; */
border 0;
padding: 5px;
}
.wrapper nav {
padding: 0;
}
a {
text-decoration: none;
color: #1c75bc;
}
nav ul {
list-style: none;
margin: 0;
display: flex;
justify-content: space-between;
}
footer ul {
list-style: none;
display: flex;
justify-content: space-between;
/* justify-content: flex-start; */
flex-direction: row;
}
footer ul ul {
flex-direction: column;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 2em;
}
footer li {
margin: 0;
padding-bottom: 0.4em;
}
footer h1 {
font-weight: bold;
text-align: left;
font-size: 1.0em;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
aside ul {
margin-bottom: 0;
margin-top: 15px;
margin-bottom: 15px;
left: 15px;
}
aside h1 {
font-weight: bold;
text-align: left;
font-size: 1.4em;
color: #dddddd;
padding: 15px;
}
aside ul label,
aside ul a {
padding-left: 15px;
}
aside ul ul label,
aside ul ul a {
padding-left: 30px;
}
aside ul ul ul label,
aside ul ul ul a {
padding-left: 45px;
}
aside ul ul ul ul label,
aside ul ul ul ul a {
padding-left: 60px;
}
aside li,
aside a,
aside ul label,
aside ul li,
aside ul a,
aside ul ul label,
aside ul ul li,
aside ul ul a,
aside ul ul ul label,
aside ul ul ul li,
aside ul ul ul a {
list-style: none;
margin: 0;
background: #35383d;
}
aside ul label:hover,
aside ul a:hover,
aside ul ul label:hover,
aside ul ul a:hover,
aside ul ul ul label:hover,
aside ul ul ul a:hover {
background: #4d5158;
}
aside a {
color: #a0f6aa;
text-decoration: none;
padding: 0.2em 0em 0.2em 0em;
}
aside .cd-accordion-menu {
width: 100%;
max-width: 600px;
background: #35383d;
}
aside .cd-accordion-menu ul {
/* by default hide all sub menus */
display: none;
}
aside .cd-accordion-menu li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
aside .cd-accordion-menu input[type=checkbox] {
/* hide native checkbox */
position: absolute;
opacity: 0;
}
aside .cd-accordion-menu label,
aside .cd-accordion-menu a {
position: relative;
display: block;
color: #dddddd;
font-size: 1.0em;
}
aside i {
font-size: 1.0em;
}
aside a::before {
content: '\00a0';
width: 16px;
height: 16px;
display: inline-block;
font-size: inherit;
text-rendering: auto;
}
aside .cd-accordion-menu label::before
{
/* icons */
font: normal normal normal 1.0em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: '\f0da';
display: inline-block;
width: 16px;
height: 16px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
aside .cd-accordion-menu label {
cursor: pointer;
}
aside .cd-accordion-menu input[type=checkbox]:checked + label::before {
/* rotate arrow */
-webkit-transform: translateY(20%) rotate(90deg);
-moz-transform: translateY(20%) rotate(90deg);
-ms-transform: translateY(20%) rotate(90deg);
-o-transform: translateY(20%) rotate(90deg);
transform: translateY(20%) rotate(90deg);
}
aside .cd-accordion-menu input[type=checkbox]:checked + label + ul,
aside .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
/* show children when item is checked */
display: block;
}
main .cd-accordion-menu {
width: 100%;
max-width: 600px;
}
main .cd-accordion-menu ul {
/* by default hide all sub menus */
display: none;
}
main .cd-accordion-menu li {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
main .cd-accordion-menu input[type=checkbox] {
/* hide native checkbox */
position: absolute;
opacity: 0;
}
main .cd-accordion-menu label {
position: relative;
display: block;
font-size: 1.0em;
}
main .cd-accordion-menu ul,
main .cd-accordion-menu li {
list-style: none;
}
main .cd-accordion-menu label::before
{
/* icons */
font: normal normal normal 1.0em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: '\f0da';
display: inline-block;
width: 16px;
height: 16px;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
main .cd-accordion-menu label {
cursor: pointer;
}
main .cd-accordion-menu input[type=checkbox]:checked + label::before {
/* rotate arrow */
-webkit-transform: translateY(20%) rotate(90deg);
-moz-transform: translateY(20%) rotate(90deg);
-ms-transform: translateY(20%) rotate(90deg);
-o-transform: translateY(20%) rotate(90deg);
transform: translateY(20%) rotate(90deg);
}
main .cd-accordion-menu input[type=checkbox]:checked + label + ul,
main .cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
/* show children when item is checked */
display: block;
}
user ul {
list-style: none;
margin: 0;
padding: 0.2em 0.0em 0.2em 0.0em;
display: flex;
justify-content: flex-end;
}
user a i {
color: #1c75c;
}
nav li {
margin: 0;
padding: 0.2em;
}
nav a {
margin: 1em;
}
nav a,
nav a i {
color: white;
}
nav li:hover,
nav li:hover a,
nav li:hover a i {
color: #1c75bc;
background: white;
}
nav li.selected {
color: #1c75bc;
background: white;
}
.nav-active,
.nav-active a,
.nav-active a i {
color: #1c75bc;
background: white;
}
.main-head {
grid-area: header;
background-color: rgba(255,255,255,0.7);
}
.main-user {
grid-area: user;
background-color: rgba(255,255,255,0.7);
}
.content {
grid-area: content;
padding: 1.2em 1.2em 1.2em 1.2em;
font-size: 1.3rem;
}
.content h1 {
font-size 1.3em;
font-weight: normal;
}
.content h2 {
font-size 1.2em;
font-weight: normal;
}
.content h3 {
font-size 1.1em;
font-weight: bold;
}
.content em {
font-style: italic;
}
.main-nav {
grid-area: nav;
background: #1c75bc;
}
.side-nav {
grid-area: side-nav;
background: #1c75bc;
}
.side {
grid-area: sidebar;
background: #35383d;
/* border-top: 1px solid #dddddd; */
padding: 0;
}
.sideheader {
grid-area: side-header;
color: #dddddd;
background: #35383d;
padding: 0;
}
.side h2 {
color: #dddddd;
font-weight: bold;
text-align: left;
font-size: 1.0em;
padding: 5px;
margin: 0;
margin-left: 30px;
padding-bottom: 0;
}
.sideheader h1 {
font-weight: bold;
text-align: left;
font-size: 1.4em;
color: #dddddd;
padding: 5px;
margin: 0;
margin-left: 30px;
padding-bottom: 0;
}
.ad {
grid-area: ad;
background: #35383d;
color: #dddddd;
padding: 1em 1em 1em 1em;
}
.main-footer {
grid-area: footer;
background-color: rgba(255,255,255,0.6);
padding: 1.2em 1.2em 1.2em 1.2em;
}
.wrapper {
display: grid;
/* grid-gap: 2px; */
grid-template-areas:
"header"
"user"
"nav"
"content"
"footer";
}
.main-content {
list-style: none;
margin: 0;
}
.main-content li {
margin: 0;
overflow-x: hidden;
}
.main-content li.grid_2 {
grid-column-end: span 1;
}
.main-content li.grid_3 {
grid-column-end: span 1;
}
.main-content li.grid_3 {
grid-column-end: span 4;
}
.maxheight {
max-height: 300px;
overflow: scroll;
}
.main-content li.grid_4 {
grid-column-end: span 1;
}
.main-content li img {
display: block;
width: 100%;
height: auto;
padding: 5px;
}
@media (min-height: 600px) {
.maxheight {
max-height: 450px;
overflow: scroll;
}
}
@media (min-height: 600px) {
.maxheight {
max-height: 450px;
overflow: scroll;
}
}
@media (min-height: 800px) {
.maxheight {
max-height: 600px;
overflow: scroll;
}
}
@media (min-height: 1000px) {
.maxheight {
max-height: 800px;
overflow: scroll;
}
}
@media (max-width: 600px) {
nav a {
font-size: 0px;
}
nav a i {
font-size: 20px;
}
}
@media (min-width: 450px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header header"
"user user user"
"nav nav nav"
"content content content"
"footer footer footer";
}
nav ul {
display: flex;
justify-content: space-between;
}
header ul {
/* flex-direction: row;*/
display: flex;
justify-content: space-between;
}
.main-content {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: 10px;
}
.main-content li.grid_2 {
grid-column-end: span 2;
}
.main-content li.grid_3 {
grid-column-end: span 2;
}
.main-content li.grid_4 {
grid-column-end: span 2;
}
}
@media (min-width: 768px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"header header header header user"
"nav nav nav nav nav"
"content content content content content"
"footer footer footer footer footer"
}
nav ul {
flex-direction: row;
}
header ul {
flex-direction: row;
}
.main-content {
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 10px;
}
.main-content li.grid_2 {
grid-column-end: span 2;
}
.main-content li.grid_3 {
grid-column-end: span 3;
}
.main-content li.grid_4 {
grid-column-end: span 4;
}
}
@media print {
header, user, nav, aside, footer {
display: none;
}
aside .cd-accordion-menu.animated label::before {
/* this class is used if you're using jquery to animate the accordion */
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}

399
templates/newbasefront.html Normal file
View File

@@ -0,0 +1,399 @@
{% load leaflet_tags %}
{% load cookielaw_tags %}
{% load rowerfilters %}
{% load tz_detect %}
{% tz_detect %}
{% load analytical %}
{% block filters %}
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Rowsandall Rowing Data Analytics{% endblock %}</title>
{% block scripts %} {% endblock %}
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js">
</script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.min.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="/static/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript" src="/static/admin/js/inlines.js"></script>
<script src="/static/cookielaw/js/cookielaw.js"></script>
{% analytical_head_top %}
<link rel="stylesheet" href="/static/css/bokeh-0.12.3.min.css" type="text/css" />
<link rel="stylesheet" href="/static/css/bokeh-widgets-0.12.3.min.css" type="text/css" />
<link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="32x32" href="/static/img/favicon-32x32.png" type="image/png"/>
<link rel="icon" sizes="64x64" href="/static/img/favicon-64x64.png" type="image/png"/>
<link rel="icon" sizes="192x192" href="/static/img/favicon-192x192.png" type="image/png"/>
<link rel="icon" sizes="16x16" href="/static/img/favicon-16x16.png" type="image/png"/>
<meta charset="utf-8" />
{% block image_src %}<link rel="image_src" href="static/img/logo7.png" />{% endblock %}
<meta property="og:type" content="website">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block og_image %}
<meta property="og:image" content="https://rowsandall.com/static/img/logo_r.png" />
<meta property="og:image:secure_url" content="https://rowsandall.com/static/img/logo_r.png" />
{% endblock %}
<meta property="og:url" content="https://rowsandall.com{{ request.get_full_path }}" />
<meta property="fb:app_id" content="694685920739849" />
<meta property="og:title" content="{% block og_title %}Rowsandall{% endblock %}" />
<meta property="og:description" content="{% block og_description %}Rowsandall: Free Data and Analysis. For Rowers. By Rowers.{% endblock %}" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link rel="stylesheet" href="/static/css/resetnew.css" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-9ralMzdK1QYsk4yBY680hmsb4/hJ98xK3w0TIaJ3ll4POWpWUYaA2bRjGGujGT8w" crossorigin="anonymous">
<link rel="stylesheet" href="/static/css/frontstyles.css">
<link rel="stylesheet" href="/static/css/text2.css" />
<link rel="stylesheet" href="/static/css/rowsandall2.css" />
{% block meta %} {% endblock %}
{% leaflet_js %}
{% leaflet_css %}
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=694685920739849";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<link rel="stylesheet" href="https://webapiv2.navionics.com/dist/webapi/webapi.min.css" >
<script type="text/javascript" src="https://webapiv2.navionics.com/dist/webapi/webapi.min.no-dep.js"></script>
<script>window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.async=true;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));</script>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
$(document).ready(function(){
var accordionsMenu = $('.cd-accordion-menu');
if( accordionsMenu.length > 0 ) {
accordionsMenu.each(function(){
var accordion = $(this);
//detect change in the input[type="checkbox"] value
accordion.on('change', 'input[type="checkbox"]', function(){
var checkbox = $(this);
console.log(checkbox.prop('checked'));
( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
});
});
}
});
</script>
<script>
$(document).ready(function(){
var active = "#{{ active }}";
$(active).addClass("nav-active");
});
</script>
{% analytical_head_bottom %}
</head>
<body data-root="https://webapiv2.navionics.com/dist/webapi/images">
<style>
.splash {
background-color: transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 759px;
min-width: 1024px;
padding: 0;
margin: 0;
width: 100%;
height: auto;
}
</style>
<div id="bgpic" class="splash">
<div class="wrapper">
<header class="main-head">
<ul>
<li>
<a href="/" title="Home">
<img src="/static/img/logo7.png"
alt="Rowsandall logo" width="200px">
</a>
</li>
<li>
<p>Free Data and Analysis. For Rowers. By Rowers.</p>
</li>
</ul>
</header>
<user class="main-user">
<ul>
<li>
<a class="" href="/rowers/help" title="Help">
<i class="fas fa-question-circle "></i>
</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="/rowers/me/edit" title="Profile">
{% if user.rower.rowerplan == 'pro' %}
<i class="fas fa-user-ninja "></i>
{% elif user.rower.rowerplan == 'coach' %}
<i class="fas fa-users "></i>
{% elif user.rower.rowerplan == 'plan' %}
<i class="fas fa-user-tie "></i>
{% else %}
<a href="/rowers/me/edit" title="Profile">
<i class="fas fa-user"></i>
{% endif %}
</a>
</li>
<li>
<a class="" href="{% url 'logout' %}?next=/login" title="Sign Out">
<i class="fas fa-sign-out-alt "></i>
</a>
</li>
{% else %}
<li>
<a href="/rowers/register" title="Sign Up">
<i class="fas fa-user-plus "></i>
</a>
</li>
<li>
<a href="{% url 'login' %}" title="Sign In">
<i class="fas fa-sign-in-alt "></i>
</a>
</li>
{% endif %}
</ul>
</user>
<side-nav class="side-nav">
&nbsp;
</side-nav>
<nav class="main-nav">
<ul>
<li id="nav-workouts">
<a href="/rowers/list-workouts">
<i class="fas fa-clipboard-list"></i>&nbsp;Workouts
</a>
</li>
<li id="nav-racing">
<a href="/rowers/virtualevents">
<i class="fas fa-flag-checkered"></i>&nbsp;Racing
</a>
</li>
<li id="nav-analysis">
<a href="/rowers/analysis/">
<i class="fas fa-analytics"></i>&nbsp;Analysis
</a>
</li>
<li id="nav-plan">
<a href="/rowers/sessions/">
<i class="fas fa-calendar-alt"></i>&nbsp;Plan
</a>
</li>
<li id="nav-teams">
<a href="/rowers/me/teams">
<i class="fas fa-bullhorn"></i>&nbsp;Teams
</a>
</li>
</ul>
</nav>
<main class="content">
<ul class="main-content">
{% if WARNING_MESSAGE != '' %}
<li class="grid_4">
<p class="message">
{{ WARNING_MESSAGE }}
</p>
</li>
{% endif %}
{% if user.rower.protrialexpires and user.rower.protrialexpires|is_future_date %}
{% if user.rower.plantrialexpires and user.rower.rowerplan != 'plan' %}
<li class="grid_4">
<p class="successmessage">
{{ user.rower.protrialexpires|date_dif|ddays }} days left of your Self-Coach trial - Would you like to <a href="/rowers/planmembership">upgrade now?</a>
</p>
</li>
{% else %}
{% if user.rower.rowerplan == 'basic' %}
<li class="grid_4">
<p class="successmessage">
{{ user.rower.protrialexpires|date_dif|ddays }} days left of your Pro trial - Would you like to <a href="/rowers/promembership">upgrade now?</a>
</p>
</li>
{% endif %}
{% endif %}
{% endif %}
{% if user.rower.emailbounced %}
<li class="grid_4">
<p class="message">
Your email bounced. Please update your email address in the <a href="/rowers/me/edit/">user settings</a>
</p>
</li>
{% endif %}
{% if messages %}
{% for message in messages %}
<li class="grid_4">
{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
<p class="message">
{% else %}
<p class="successmessage">
{% endif %}
{{ message|safe }}
</p>
</li>
{% endfor %}
{% endif %}
{% if breadcrumbs %}
<li class="grid_4">
<p>
<span>
<em>You are here:</em>
{% for crumb in breadcrumbs %}
<a href="{{ crumb.url }}"><em>{{ crumb.name }}</em></a>
{% if not forloop.last %}
&nbsp;/&nbsp;
{% endif %}
{% endfor %}
</span>
</p>
</li>
{% endif %}
</ul>
{% block main %}
{% endblock %}
</main>
<footer class="main-footer">
<p>Follow us on
<a href="https://twitter.com/rowsandall">
<i class="fab fa-twitter"></i>
</a>&nbsp;
<a href="https://www.instagram.com/roosendaalsander/">
<i class="fab fa-instagram"></i>
</a>&nbsp;
<a href="https://analytics.rowsandall.com/">
<i class="fab fa-wordpress-simple"></i>
</a>&nbsp;
<a href="https://www.facebook.com/rowsandall">
<i class="fab fa-facebook"></i>
</a>&nbsp;
</p>
<p>
<ul>
<li>
<h1>Help</h1>
<ul>
<li>
<a href="/rowers/help">Help</a>
</li>
<li>
<a href="https://analytics.rowsandall.com/">
Rowing Analytics Blog
</a>
</li>
<li>
<a href="https://www.facebook.com/rowsandall">
Rowing Data Facebook Group</a>
</li>
<li>
<a href="/rowers/physics">Rowing Physics</a>
</li>
</ul>
</li>
<li>
<h1>About</h1>
<ul>
<li>
<a href="/rowers/email/">Contact</a>
</li>
<li>
<a href="/rowers/email/">Rowsandall s.r.o.</a>
</li>
<li>
<a href="/rowers/brochure">Brochure</a>
</li>
<li>
<a href="/rowers/partners">Partnering?</a>
</li>
<li>
<a href="/rowers/developers">Developers Info</a>
</li>
</ul>
</li>
<li>
<h1>Paid Plans</h1>
<ul>
<li>
<a href="/rowers/promembership">Paid Plans</a>
</li>
</ul>
</li>
<li>
<h1>Legal</h1>
<ul>
<li>
<a href="/rowers/legal">Terms and Conditions</a>
</li>
<li>
<a href="/rowers/legal">Privacy Policy</a>
</li>
</ul>
</ul>
</p>
</footer>
{% analytical_body_bottom %}
</div>
</div>
<script type="text/javascript">
var num = (Math.floor(Math.random()*4));
var array = ['one', 'two', 'three', 'four'];
var elem = document.getElementById('bgpic');
console.log(elem);
elem.classList.add(array[num]);
</script>
</body>
</html>