generated from Templates/html-nginx-deployment
Loading page and landing page initial styling.
All checks were successful
Home Cluster Builds/wedding-page/pipeline/head This commit looks good
All checks were successful
Home Cluster Builds/wedding-page/pipeline/head This commit looks good
This commit is contained in:
@@ -11,22 +11,79 @@
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/fav/favicon-16x16.png">
|
||||
<link rel="shortcut icon" href="/static/fav/favicon.ico" type="image/x-icon">
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/static/css/fonts.css">
|
||||
<link rel="stylesheet" href="/static/css/font-cinzel.css">
|
||||
<link rel="stylesheet" href="/static/css/font-amelia-giovani.css">
|
||||
<link rel="stylesheet" href="/static/css/loaders.css">
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<img src="/static/img/logo.png" alt="">
|
||||
<h1>Hey, this template is hosted at <a href="http://192.168.195.195:30001">this</a> repo.</h1>
|
||||
<p>You have had this page open for <span id="counter">1</span> seconds.</p>
|
||||
<div class="container font-cinzel-regular">
|
||||
<div id="img-holder">
|
||||
<img src="/static/img/invitation.jpeg" alt="">
|
||||
</div>
|
||||
<div class="panel">
|
||||
<h1 class="font-amelia-giovani-regular">We're getting married</h1>
|
||||
<div id="page-content" style="opacity: 0"></div>
|
||||
<div class="btn-holder">
|
||||
<button class="btn font-cinzel-regular" onclick="prevPage()">Back</button>
|
||||
<button class="btn font-cinzel-regular" onclick="nextPage()">Continue</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading-page">
|
||||
<br><br><br><br><br><br>
|
||||
<div class="newtons-cradle">
|
||||
<div class="newtons-cradle-dot"></div>
|
||||
<div class="newtons-cradle-dot"></div>
|
||||
<div class="newtons-cradle-dot"></div>
|
||||
<div class="newtons-cradle-dot"></div>
|
||||
</div>
|
||||
<h2>Loading</h2>
|
||||
</div>
|
||||
|
||||
<!-- Landing Page HTML -->
|
||||
<div id="landing" class="content" style="display: none;">
|
||||
<p>
|
||||
We want you to enjoy the event with us.
|
||||
<br>
|
||||
Please go through the steps below
|
||||
<br>
|
||||
to help us make it the best day.
|
||||
</p>
|
||||
<br><br>
|
||||
<h2 style="color: var(--color-secondary);">We are</h2>
|
||||
<select class="font-cinzel-light" id="select-user">
|
||||
<option class="font-cinzel-light" value="1">Erna & Michael</option>
|
||||
<option class="font-cinzel-light" value="1">Susan & Andre</option>
|
||||
<option class="font-cinzel-light" value="1">Aloma & Ruben</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="user-selection" class="content" style="display: none;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam, nemo cumque unde fugiat quo voluptas impedit alias numquam commodi officiis error fugit sit, quia culpa quis dolor excepturi, odit ratione!
|
||||
</p>
|
||||
<ul>
|
||||
<li>User</li>
|
||||
<li>RSVP</li>
|
||||
<li>Choose menu</li>
|
||||
<li>Choose drinks</li>
|
||||
<li>Venue info</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script>
|
||||
// Actions get called from here. This makes it easy to see what starts where.
|
||||
setInterval(function () {
|
||||
incrementCounter();
|
||||
}, 1000);
|
||||
var pages = ["#landing", "#user-selection"];
|
||||
var page = 0;
|
||||
|
||||
setPageContent("#landing");
|
||||
setTimeout(function () {
|
||||
showLoader(false);
|
||||
}, 1000)
|
||||
</script>
|
||||
</html>
|
||||
11
html/static/css/font-amelia-giovani.css
Normal file
11
html/static/css/font-amelia-giovani.css
Normal file
@@ -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;
|
||||
}
|
||||
72
html/static/css/font-cinzel.css
Normal file
72
html/static/css/font-cinzel.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
86
html/static/css/loaders.css
Normal file
86
html/static/css/loaders.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
BIN
html/static/fonts/Amelia Giovani Regular.otf
Normal file
BIN
html/static/fonts/Amelia Giovani Regular.otf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-Black.ttf
Normal file
BIN
html/static/fonts/Cinzel-Black.ttf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-Bold.ttf
Normal file
BIN
html/static/fonts/Cinzel-Bold.ttf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-ExtraBold.ttf
Normal file
BIN
html/static/fonts/Cinzel-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-Medium.ttf
Normal file
BIN
html/static/fonts/Cinzel-Medium.ttf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-Regular.ttf
Normal file
BIN
html/static/fonts/Cinzel-Regular.ttf
Normal file
Binary file not shown.
BIN
html/static/fonts/Cinzel-SemiBold.ttf
Normal file
BIN
html/static/fonts/Cinzel-SemiBold.ttf
Normal file
Binary file not shown.
BIN
html/static/img/Invitation.jpeg
Normal file
BIN
html/static/img/Invitation.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
@@ -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)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user