index page change
This commit is contained in:
Corban-Lee
parent
724e6ed544
commit
e604687add
@ -16,6 +16,8 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="w-100">
|
||||
|
||||
<div class="p-4 row">
|
||||
<div class="col-md-3">
|
||||
<div class="input-group">
|
||||
@ -54,6 +56,7 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %}
|
||||
<!-- Header -->
|
||||
|
||||
@ -2,10 +2,33 @@
|
||||
|
||||
{% 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
|
||||
@ -79,4 +102,3 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
{% endblock content %}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
.ocean {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(0deg, #182848, #2980b9)
|
||||
}
|
||||
|
||||
@keyframes ripple-2 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
border-width: 1px;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
}
|
||||
.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 drip {
|
||||
to {
|
||||
top: var(--drip-length);
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ $(document).ready(() => {
|
||||
|
||||
// $("select").select2({theme: "bootstrap-5", minimumResultsForSearch: -1})
|
||||
|
||||
$("#headerTitle").text(document.title);
|
||||
$("#headerTitle").text(document.title.split(" | ")[0]);
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user