From e604687add6df766c74021c20980a18ce43fbd43 Mon Sep 17 00:00:00 2001
From: Corban-Lee <77944149+XordK@users.noreply.github.com>
Date: Thu, 18 May 2023 15:04:38 +0100
Subject: [PATCH] index page change

---
 src/mainapp/templates/anglers.html |  69 ++++----
 src/mainapp/templates/index.html   |  30 +++-
 src/static/css/custom.css          | 263 +++++++++++++++--------------
 src/static/js/custom.js            |   2 +-
 src/templates/base.html            |   2 +-
 5 files changed, 203 insertions(+), 163 deletions(-)

diff --git a/src/mainapp/templates/anglers.html b/src/mainapp/templates/anglers.html
index 34e4f78..292da06 100644
--- a/src/mainapp/templates/anglers.html
+++ b/src/mainapp/templates/anglers.html
@@ -16,43 +16,46 @@
 
 {% block content %}
 
-    <div class="p-4 row">
-        <div class="col-md-3">
-            <div class="input-group">
-                <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
-                    <i class="bi bi-sort-up"></i>
-                </button>
-                <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers">
-                <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
-            </div>
-        </div>
-        <div class="col-md">
-            <div class="input-group">
-                <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler" data-bs-custom-class="light-tooltip">
-                    <i class="bi bi-plus-lg"></i>
-                </button>
-                <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="Compact View" data-bs-custom-class="light-tooltip">
-                    <i class="bi bi-arrows-angle-contract"></i>
-                </button>
-                <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Enlarged View" data-bs-custom-class="light-tooltip">
-                    <i class="bi bi-arrows-angle-expand"></i>
-                </button>
-            </div>
+    <div class="w-100">
 
-        </div>
-    </div>
-
-    <div class="px-4 mt-2 mb-4 row">
-        {% for angler in anglers %}
-        <div class="col-md-2 mb-4">
-            <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover">
-                <div class="card-body">
-                    <h5 class="card-title">{{ angler.first_name }}</h5>
-                    <h6 class="card-subtitle mb-2 text-body-secondary">{{ angler.last_name }}</h6>
+        <div class="p-4 row">
+            <div class="col-md-3">
+                <div class="input-group">
+                    <button type="button" data-bs-toggle="dropdown" class="btn btn-outline-company border-secondary-subtle">
+                        <i class="bi bi-sort-up"></i>
+                    </button>
+                    <input type="search" name="search" id="search" class="form-control border-secondary-subtle shadow-none" placeholder="Search Anglers">
+                    <button type="button" class="btn btn-outline-company border-secondary-subtle rounded-end" id="searchButton"><i class="bi bi-search"></i></button>
                 </div>
             </div>
+            <div class="col-md">
+                <div class="input-group">
+                    <button class="btn border-secondary-subtle btn-outline-company me-4 rounded-end" id="addAngler" data-bs-toggle="tooltip" data-bs-title="Add Angler" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-plus-lg"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company rounded-start" id="ContractView" data-bs-toggle="tooltip" data-bs-title="Compact View" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-arrows-angle-contract"></i>
+                    </button>
+                    <button class="btn border-secondary-subtle btn-outline-company" id="expandView" data-bs-toggle="tooltip" data-bs-title="Enlarged View" data-bs-custom-class="light-tooltip">
+                        <i class="bi bi-arrows-angle-expand"></i>
+                    </button>
+                </div>
+    
+            </div>
+        </div>
+    
+        <div class="px-4 mt-2 mb-4 row">
+            {% for angler in anglers %}
+            <div class="col-md-2 mb-4">
+                <div class="card w-100 h-100 fluid-hover-zoom shadow-sm md-shadow-on-hover">
+                    <div class="card-body">
+                        <h5 class="card-title">{{ angler.first_name }}</h5>
+                        <h6 class="card-subtitle mb-2 text-body-secondary">{{ angler.last_name }}</h6>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
         </div>
-        {% endfor %}
     </div>
 
     {% comment %}
diff --git a/src/mainapp/templates/index.html b/src/mainapp/templates/index.html
index e786c99..0e06a0b 100644
--- a/src/mainapp/templates/index.html
+++ b/src/mainapp/templates/index.html
@@ -2,11 +2,34 @@
 
 {% block content %}
 
-    <div class="flex-grow-1" id="waterContainer">
-        <div id="drop"></div>
-        <div id="wave"></div>
+    <div class="flex-grow-1">
+        <div class="ocean">
+            <div class="bubble bubble--1"></div>
+            <div class="bubble bubble--2"></div>
+            <div class="bubble bubble--3"></div>
+            <div class="bubble bubble--4"></div>
+            <div class="bubble bubble--5"></div>
+            <div class="bubble bubble--6"></div>
+            <div class="bubble bubble--7"></div>
+            <div class="bubble bubble--8"></div>
+            <div class="bubble bubble--9"></div>
+            <div class="bubble bubble--10"></div>
+            <div class="bubble bubble--11"></div>
+            <div class="bubble bubble--12"></div>
+          </div>
     </div>
 
+{% endblock content %}
+
+{% block scripts %}
+<script type="text/javascript">
+    $(document).ready(function() {
+
+        $("#pageHeader").hide();
+    })
+</script>
+{% endblock scripts %}
+
 <!-- <h2 class="h1 p-4">
     This is the home page, there is no content here right now
 </h2> -->
@@ -79,4 +102,3 @@
             </div>
         </div>
     </div> -->
-{% endblock content %}
diff --git a/src/static/css/custom.css b/src/static/css/custom.css
index e046bdb..0b8f375 100644
--- a/src/static/css/custom.css
+++ b/src/static/css/custom.css
@@ -144,132 +144,147 @@ html, body {
     height: 100%;
 }
 
-#waterContainer {
-    background-color: rgba(2, 40, 110, 0.70);
-    max-height: calc(100vh - 70px);
+body {
+    margin: 0;
     overflow: hidden;
-}
-
-:root {
-    --drip-time: 4s;
-    --drip-length: 600px;
-}
-
-#drop {
-    position: relative;
-    width: 20px;
-    height: 20px;
-    top: -30px;
-    margin: 0 auto;
-    background: #FFF;
-    -moz-border-radius: 20px;
-    -webkit-border-radius: 20px;
-    border-radius: 20px;
-    -moz-animation-name: drip;
-    -webkit-animation-name: drip;
-    animation-name: drip;
-    -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
-    -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
-    animation-timing-function: cubic-bezier(1,0,.91,.19);
-    -moz-animation-duration: var(--drip-time);
-    -webkit-animation-duration: var(--drip-time);
-    animation-duration: var(--drip-time);
-    -moz-animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-    margin: 0 auto;
-}
-
-#drop:before {
-    content: "";
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 30px solid rgba(255,255,255,1);
-    top: -22px;
-}
-
-#wave {
-    position: relative;
-    opacity: 0;
-    top: 0;
-    width: 2px;
-    height: 1px;
-    border: #FFF 7px solid;
-    -moz-border-radius: 300px / 150px;
-    -webkit-border-radius: 300px / 150px;
-    border-radius: 300px / 150px;
-    -moz-animation-name: ripple;
-    -webkit-animation-name: ripple;
-    animation-name: ripple;
-    -moz-animation-delay: var(--drip-time);
-    -webkit-animation-delay: var(--drip-time);
-    animation-delay: var(--drip-time);
-    -moz-animation-duration: var(--drip-time);
-    -webkit-animation-duration: var(--drip-time);
-    animation-duration: var(--drip-time);
-    -moz-animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-    margin: var(--drip-length) auto 0 auto;
-}
-
-#wave:after {
-    content: "";
-    position: absolute;
-    opacity: 0;
-    top: -5px;
-    left: -5px;
-    width: 2px;
-    height: 1px;
-    border: #FFF 5px solid;
-    -moz-border-radius: 300px / 150px;
-    -webkit-border-radius: 300px / 150px;
-    border-radius: 300px / 150px;
-    -moz-animation-name: ripple-2;
-    -webkit-animation-name: ripple-2;
-    animation-name: ripple-2;
-    -moz-animation-duration: var(--drip-time);
-    -webkit-animation-duration: var(--drip-time);
-    animation-duration: var(--drip-time);
-    -moz-animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-}
-
-@keyframes ripple {
-    from {
-      opacity: 1;
-    }
-    to {
-      width: 600px;
-      height: 300px;
-      border-width: 1px;
-      top: -100px;
-      opacity: 0;
-    }
-}
-
-@keyframes ripple-2 {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0;
-    }
-  100% {
-    width: 200px;
-    height: 100px;
-    border-width: 1px;
-    top: 100px;
-    left: 200px;
   }
+  
+ 
+.ocean {
+position: relative;
+width: 100vw;
+height: 100vh;
+background-image: linear-gradient(0deg, #182848, #2980b9)
 }
 
-@keyframes drip {
-    to {
-      top: var(--drip-length);
-    }
+.bubble {
+width: 30px;
+height: 30px;
+border-radius: 100%;
+position: absolute;
+background-color: white;
+bottom: -30px;
+opacity: 0.2;
+animation: bubble 15s ease-in-out infinite,
+    sideWays 4s ease-in-out infinite alternate;
+}
+
+@keyframes bubble {
+0% {
+    transform: translateY(0%);
+    opacity: 0.06;
+}
+100% {
+    transform: translateY(-120vh);
+}
+}
+
+@keyframes sideWays {
+0% {
+    margin-left: 0px;
+}
+100% {
+    margin-left: 200px;
+}
+}
+
+.bubble--1 {
+left: 10%;
+animation-delay: 0.5s;
+animation-duration: 16s;
+opacity: 0.2;
+}
+
+.bubble--2 {
+width: 15px;
+height: 15px;
+left: 40%;
+animation-delay: 1s;
+animation-duration: 10s;
+opacity: 0.1;
+}
+
+.bubble--3 {
+width: 10px;
+height: 10px;
+left: 30%;
+animation-delay: 5s;
+animation-duration: 20s;
+opacity: 0.3;
+}
+
+.bubble--4 {
+width: 25px;
+height: 25px;
+left: 40%;
+animation-delay: 8s;
+animation-duration: 17s;
+opacity: 0.2;
+}
+
+.bubble--5 {
+width: 30px;
+height: 30px;
+left: 60%;
+animation-delay: 10s;
+animation-duration: 15s;
+opacity: 0.1;
+}
+
+.bubble--6 {
+width: 10px;
+height: 10px;
+left: 80%;
+animation-delay: 3s;
+animation-duration: 30s;
+opacity: 0.4;
+}
+
+.bubble--7 {
+width: 15px;
+height: 15px;
+left: 90%;
+animation-delay: -7s;
+animation-duration: 25s;
+opacity: 0.3;
+}
+
+.bubble--9 {
+width: 20px;
+height: 20px;
+left: 50%;
+bottom: 30px;
+animation-delay: -5s;
+animation-duration: 19s;
+opacity: 0.2;
+}
+
+.bubble--10 {
+width: 40px;
+height: 40px;
+left: 30%;
+bottom: 30px;
+animation-delay: -21s;
+animation-duration: 16s;
+opacity: 0.3;
+}
+
+.bubble--11 {
+width: 30px;
+height: 30px;
+left: 60%;
+bottom: 30px;
+animation-delay: -13.75s;
+animation-duration: 20s;
+opacity: 0.3;
+}
+
+.bubble--11 {
+width: 25px;
+height: 25px;
+left: 90%;
+bottom: 30px;
+animation-delay: -10.5s;
+animation-duration: 19s;
+opacity: 0.3;
 }
diff --git a/src/static/js/custom.js b/src/static/js/custom.js
index 8b8b6fd..0411d21 100644
--- a/src/static/js/custom.js
+++ b/src/static/js/custom.js
@@ -10,7 +10,7 @@ $(document).ready(() => {
 
     // $("select").select2({theme: "bootstrap-5", minimumResultsForSearch: -1})
 
-    $("#headerTitle").text(document.title);
+    $("#headerTitle").text(document.title.split(" | ")[0]);
 });
 
 
diff --git a/src/templates/base.html b/src/templates/base.html
index 1cb3765..06aeba3 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -53,7 +53,7 @@
                 </ul>
             </aside>
             <div class="flex-grow-1 d-flex flex-column h-100" id="webContent">
-                <div class="bg-body-tertiary shadow-sm p-3 d-flex align-items-center">
+                <div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: flex;">
                     <h1 class="h2 mb-0" id="headerTitle"></h1>
                     <div class="ms-auto">
                         {% block header_buttons %}