From 5ff9a81c63c09ec3e2110cb89ed1bbac18341600 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 17 Oct 2018 12:40:26 +0200
Subject: [PATCH] new front design

---
 rowers/templates/frontpage.html |  48 ++-
 static/css/frontstyles.css      | 635 ++++++++++++++++++++++++++++++++
 templates/newbasefront.html     | 399 ++++++++++++++++++++
 3 files changed, 1057 insertions(+), 25 deletions(-)
 create mode 100644 static/css/frontstyles.css
 create mode 100644 templates/newbasefront.html

diff --git a/rowers/templates/frontpage.html b/rowers/templates/frontpage.html
index 7ecd5fdc..9acadbac 100644
--- a/rowers/templates/frontpage.html
+++ b/rowers/templates/frontpage.html
@@ -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 %}
diff --git a/static/css/frontstyles.css b/static/css/frontstyles.css
new file mode 100644
index 00000000..db29a0a3
--- /dev/null
+++ b/static/css/frontstyles.css
@@ -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;
+}
+
+
diff --git a/templates/newbasefront.html b/templates/newbasefront.html
new file mode 100644
index 00000000..a97497c6
--- /dev/null
+++ b/templates/newbasefront.html
@@ -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>