Loading page and landing page initial styling.

html/static/css/font-amelia-giovani.css

@@ -0,0 +1,11 @@
+@font-face {
+    font-family: AmeliaGiovani;
+    src: url(../fonts/Amelia\ Giovani\ Regular.otf);
+    font-weight: 400;
+    font-style: normal;
+}
+
+.font-amelia-giovani-regular {
+    font-family: AmeliaGiovani;
+    font-weight: 400;
+}

html/static/css/font-cinzel.css

@@ -0,0 +1,72 @@
+/* Cinzel */
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Regular.ttf);
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Medium.ttf);
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-SemiBold.ttf);
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Bold.ttf);
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-ExtraBold.ttf);
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Cinzel;
+    src: url(../fonts/Cinzel-Black.ttf);
+    font-weight: 900;
+    font-style: normal;
+}
+
+.font-cinzel-regular {
+    font-family: Cinzel;
+    font-weight: 400;
+}
+
+.font-cinzel-medium {
+    font-family: Cinzel;
+    font-weight: 500;
+}
+
+.font-cinzel-semi-bold {
+    font-family: Cinzel;
+    font-weight: 600;
+}
+
+.font-cinzel-bold {
+    font-family: Cinzel;
+    font-weight: 700;
+}
+
+.font-cinzel-extra-bold {
+    font-family: Cinzel;
+    font-weight: 800;
+}
+
+.font-cinzel-extra-black {
+    font-family: Cinzel;
+    font-weight: 900;
+}

html/static/css/font-roboto.css

@@ -1,3 +1,5 @@
+/* ROBOTO */
+
 @font-face {
     font-family: Roboto;
     src: url(../fonts/Roboto-Thin.ttf);
@@ -82,36 +84,36 @@
     font-style: italic;
 }
 
-.font-italic {
+.font-roboto-italic {
     font-style: italic;
 }
 
-.font-thin {
+.font-roboto-thin {
     font-family: Roboto;
     font-weight: 100;
 }
 
-.font-light {
+.font-roboto-light {
     font-family: Roboto;
     font-weight: 300;
 }
 
-.font-regular {
+.font-roboto-regular {
     font-family: Roboto;
     font-weight: 400;
 }
 
-.font-medium {
+.font-roboto-medium {
     font-family: Roboto;
     font-weight: 500;
 }
 
-.font-bold {
+.font-roboto-bold {
     font-family: Roboto;
     font-weight: 700;
 }
 
-.font-black {
+.font-roboto-black {
     font-family: Roboto;
     font-weight: 900;
 }

html/static/css/loaders.css

@@ -0,0 +1,86 @@
+#loading-page {
+    background-color: var(--color-dark);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    z-index: 10000;
+    top: 0;
+    left: 0;
+    align-content: center;
+    align-items: baseline;
+    flex-wrap: wrap;
+    transition: opacity 0.5s;
+}
+
+.newtons-cradle {
+    --uib-speed: 1.2s;
+    --uib-color: var(--color-primary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 75px;
+    height: 75px;
+}
+   
+.newtons-cradle-dot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 1.8rem;
+    transform-origin: center top;
+}
+   
+.newtons-cradle-dot::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 25%;
+    border-radius: 50%;
+    background-color: var(--uib-color);
+}
+   
+.newtons-cradle-dot:first-child {
+    animation: swing var(--uib-speed) linear infinite;
+}
+   
+.newtons-cradle-dot:last-child {
+    animation: swing2 var(--uib-speed) linear infinite;
+}
+   
+@keyframes swing {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    25% {
+     transform: rotate(70deg);
+     animation-timing-function: ease-in;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+}
+   
+@keyframes swing2 {
+    0% {
+     transform: rotate(0deg);
+     animation-timing-function: linear;
+    }
+   
+    50% {
+     transform: rotate(0deg);
+     animation-timing-function: ease-out;
+    }
+   
+    75% {
+     transform: rotate(-70deg);
+     animation-timing-function: ease-in;
+    }
+}

html/static/css/main.css

@@ -1,12 +1,12 @@
 /* VARIABLES */
 :root {
-    --color-primary: #c9cacf;
-    --color-secondary: #f2f2f3;
+    --color-primary: #a598be;
+    --color-secondary: #e7d6a2;
     --color-tertiary: #5260ff;
     --color-success: #2dd36f;
     --color-warning: #ffc409;
     --color-danger: #eb445a;
-    --color-dark: #3d3e43;
+    --color-dark: #19233e;
     --color-medium: #92949c;
     --color-light: #f4f5f8;
     --base-rem-size: 12px;
@@ -29,13 +29,35 @@ a {
     transition: color 0.3s;
 }
 
+select {
+    color: var(--color-secondary);
+    background-color: var(--color-dark);
+}
+
+#select-user {
+    width: 50%;
+    text-align: center;
+    font-size: 1.5rem;
+    padding: 0.8rem;
+    border-style: solid;
+    border-color: var(--color-secondary);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
 .container {
-    width: 80%;
+    width: 70%;
     margin: 5rem auto;
     padding: 3rem;
     border-radius: 1rem;
-    box-shadow:  16px 16px 36px #626369,
-    -16px -16px 36px #c2c5cf;
+    box-shadow:  20px 20px 67px #0c101d,
+    -20px -20px 67px #2b3d6c;
+    display: flex;
+    gap: 2rem;
+    text-align: center;
+    flex-wrap: wrap;
+    align-items: stretch;
 }
 
 .container a {
@@ -44,4 +66,105 @@ a {
 
 .container a:hover {
     color: var(--color-secondary);
+}
+
+#page-content {
+    transition: opacity 0.5s ease-in-out;
+}
+
+#img-holder {
+    width: 40%;
+}
+
+#img-holder img {
+    width: 100%;
+}
+
+.panel {
+    width: calc(60% - 2rem);
+    position: relative;
+    min-width: 450px;
+}
+
+.panel h1 {
+    font-size: 4rem;
+    letter-spacing: 1.2px;
+    text-decoration: underline 1px;
+    text-underline-offset: 15px;
+    margin-bottom: 1rem;
+    margin-top: 0;
+    color: var(--color-secondary);
+}
+
+#page-content {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: auto;
+    letter-spacing: 1.8px;
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.btn {
+    --color: var(--color-primary);
+    --color2: var(--color-dark);
+    padding: 0.8em 1.75em;
+    background-color: transparent;
+    border-radius: 6px;
+    border: .3px solid var(--color);
+    transition: .5s;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 1;
+    font-size: 1rem;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--color);
+    margin-left: 2rem;
+   }
+   
+   .btn::after, .btn::before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    transform: skew(90deg) translate(-50%, -50%);
+    position: absolute;
+    inset: 50%;
+    left: 25%;
+    z-index: -1;
+    transition: .5s ease-out;
+    background-color: var(--color);
+    text-shadow: 1px;
+   }
+   
+   .btn::before {
+    top: -50%;
+    left: -25%;
+    transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::before {
+    transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::after {
+    transform: skew(45deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover {
+    color: var(--color2);
+   }
+   
+   .btn:active {
+    filter: brightness(.7);
+    transform: scale(.98);
+   }
+
+.btn-holder {
+    position: absolute;
+    bottom: 1rem;
+    width: 100%;
 }

html/static/js/main.js

@@ -1,4 +1,31 @@
-function incrementCounter() {
-    let elem = document.querySelector("#counter");
-    elem.innerHTML = Number(elem.innerHTML) + 1;
+function setPageContent(elemID) {
+    let elem = document.querySelector(elemID);
+    let target = document.querySelector("#page-content");
+    target.style.opacity=0;
+    setTimeout(function () {
+        target.innerHTML = elem.innerHTML;
+        target.style.opacity = 1;
+    }, 500);
+}
+
+function nextPage() {
+    page = Math.min(page+1, pages.length-1);
+    setPageContent(pages[page]);
+}
+
+function prevPage() {
+    page = Math.max(page-1, 0);
+    setPageContent(pages[page]);
+}
+
+function showLoader(opacity) {
+    let elem = document.querySelector("#loading-page");
+    elem.style.opacity = opacity ? 1 : 0;
+    if (opacity) {
+        elem.style.display = "flex";
+    } else {
+        setTimeout(function () {
+            elem.style.display = "none";
+        }, 500)
+    }
 }