generated from Templates/html-nginx-deployment
Initial HTML styling for the UI. #1
37
html/api/party.json
Normal file
37
html/api/party.json
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"items": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"seats": 2,
|
||||||
|
"modified_data": false,
|
||||||
|
"party_name": "Erna & Michael",
|
||||||
|
"users": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "Erna",
|
||||||
|
"rsvp_status": false,
|
||||||
|
"meals": [],
|
||||||
|
"drinks": [],
|
||||||
|
"allergies": "None",
|
||||||
|
"email": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "Michael",
|
||||||
|
"rsvp_status": false,
|
||||||
|
"meals": [],
|
||||||
|
"drinks": [],
|
||||||
|
"allergies": "None",
|
||||||
|
"email": ""
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"seats": 2,
|
||||||
|
"modified_data": false,
|
||||||
|
"party_name": "Party 2",
|
||||||
|
"users": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
153
html/index.html
153
html/index.html
@@ -11,22 +11,159 @@
|
|||||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/fav/favicon-16x16.png">
|
<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">
|
<link rel="shortcut icon" href="/static/fav/favicon.ico" type="image/x-icon">
|
||||||
<!-- CSS -->
|
<!-- 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">
|
<link rel="stylesheet" href="/static/css/main.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container font-cinzel-regular">
|
||||||
<img src="/static/img/logo.png" alt="">
|
<div id="img-holder">
|
||||||
<h1>Hey, this template is hosted at <a href="http://192.168.195.195:30001">this</a> repo.</h1>
|
<img src="/static/img/Invitation.jpeg" alt="">
|
||||||
<p>You have had this page open for <span id="counter">1</span> seconds.</p>
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-header">
|
||||||
|
<h1 class="font-amelia-giovani-regular">We're getting married</h1>
|
||||||
|
</div>
|
||||||
|
<div class="panel-content">
|
||||||
|
<div id="page-content" style="opacity: 0">
|
||||||
|
<!-- 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-party">
|
||||||
|
<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-settings" class="content" style="display: none;">
|
||||||
|
<h3>Hello, <span class="color-secondary" id="user-settings-name"></span></h3>
|
||||||
|
<p>
|
||||||
|
Your group has <span class="color-secondary" id="user-settings-seats">X</span> seats.
|
||||||
|
<br>
|
||||||
|
Can you please check all info is correct for the group?
|
||||||
|
</p>
|
||||||
|
<div id="user-settings-users">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 class="color-secondary">Erna</h3>
|
||||||
|
<div class="user-settings-user">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Name:</td>
|
||||||
|
<td><input type="text"></td>
|
||||||
|
<td>(For seating arrangements)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>E-mail:</td>
|
||||||
|
<td><input type="email"></td>
|
||||||
|
<td>*For updates and changes</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>RSVP:</td>
|
||||||
|
<td>
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">I am going</option>
|
||||||
|
<option value="">I cannot come</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Allergies:</td>
|
||||||
|
<td><input type="text"></td>
|
||||||
|
<td>(For food considerations, eg Tomatoes, Garlic)</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="color-secondary">Michael</h3>
|
||||||
|
<div class="user-settings-user">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>Name:</td>
|
||||||
|
<td><input type="text"></td>
|
||||||
|
<td>(For seating arrangements)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>E-mail:</td>
|
||||||
|
<td><input type="email"></td>
|
||||||
|
<td>*For updates and changes</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>RSVP:</td>
|
||||||
|
<td>
|
||||||
|
<select name="" id="">
|
||||||
|
<option value="">I am going</option>
|
||||||
|
<option value="">I cannot come</option>
|
||||||
|
</select>
|
||||||
|
</td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Allergies:</td>
|
||||||
|
<td><input type="text"></td>
|
||||||
|
<td>(For food considerations, eg Tomatoes, Garlic)</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script src="/static/js/main.js"></script>
|
<script src="/static/js/main.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// Actions get called from here. This makes it easy to see what starts where.
|
// Actions get called from here. This makes it easy to see what starts where.
|
||||||
setInterval(function () {
|
var pages = ["#landing", "#user-settings"];
|
||||||
incrementCounter();
|
var page = 0;
|
||||||
}, 1000);
|
var data;
|
||||||
|
var selectedParty;
|
||||||
|
|
||||||
|
var pageFunctionsLoad = {
|
||||||
|
"#landing": renderPartySelection,
|
||||||
|
"#user-settings": renderUserSettings
|
||||||
|
}
|
||||||
|
|
||||||
|
var pageFunctionsExit = {
|
||||||
|
"#landing": selectChosenParty
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onLoad() {
|
||||||
|
data = await getData();
|
||||||
|
setPageContent("#landing");
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad();
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</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-face {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
src: url(../fonts/Roboto-Thin.ttf);
|
src: url(../fonts/Roboto-Thin.ttf);
|
||||||
@@ -82,36 +84,36 @@
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-italic {
|
.font-roboto-italic {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-thin {
|
.font-roboto-thin {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-light {
|
.font-roboto-light {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-regular {
|
.font-roboto-regular {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-medium {
|
.font-roboto-medium {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-bold {
|
.font-roboto-bold {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-black {
|
.font-roboto-black {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 900;
|
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 */
|
/* VARIABLES */
|
||||||
:root {
|
:root {
|
||||||
--color-primary: #c9cacf;
|
--color-primary: rgb(165, 151, 190);
|
||||||
--color-secondary: #f2f2f3;
|
--color-secondary: rgb(231, 214, 162);
|
||||||
--color-tertiary: #5260ff;
|
--color-tertiary: #5260ff;
|
||||||
--color-success: #2dd36f;
|
--color-success: #2dd36f;
|
||||||
--color-warning: #ffc409;
|
--color-warning: #ffc409;
|
||||||
--color-danger: #eb445a;
|
--color-danger: #eb445a;
|
||||||
--color-dark: #3d3e43;
|
--color-dark: rgb(25, 35, 62);
|
||||||
--color-medium: #92949c;
|
--color-medium: #92949c;
|
||||||
--color-light: #f4f5f8;
|
--color-light: #f4f5f8;
|
||||||
--base-rem-size: 12px;
|
--base-rem-size: 12px;
|
||||||
@@ -29,13 +29,78 @@ a {
|
|||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
background-color: var(--color-dark);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding: 0.8rem;
|
||||||
|
border-style: solid;
|
||||||
|
border-top: 0;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
|
border-bottom: 1px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Scrollbar CSS ===== */
|
||||||
|
/* Firefox */
|
||||||
|
* {
|
||||||
|
scrollbar-width: auto;
|
||||||
|
scrollbar-color: var(--color-primary) var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chrome, Edge, and Safari */
|
||||||
|
*::-webkit-scrollbar {
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-track {
|
||||||
|
background: var(--color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
*::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 0px solid var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
#select-party {
|
||||||
|
min-width: 50%;
|
||||||
|
max-width: 80%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-secondary {
|
||||||
|
color: var(--color-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 80%;
|
width: 70%;
|
||||||
margin: 5rem auto;
|
margin: 5rem auto;
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
box-shadow: 16px 16px 36px #626369,
|
box-shadow: 20px 20px 67px #0c101d,
|
||||||
-16px -16px 36px #c2c5cf;
|
-20px -20px 67px #2b3d6c;
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem 3rem;
|
||||||
|
text-align: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container a {
|
.container a {
|
||||||
@@ -45,3 +110,132 @@ a {
|
|||||||
.container a:hover {
|
.container a:hover {
|
||||||
color: var(--color-secondary);
|
color: var(--color-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#page-content {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
letter-spacing: 1.8px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
transition: opacity 0.5s ease-in-out;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
height: calc(100% - 5rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-holder {
|
||||||
|
width: 40%;
|
||||||
|
min-width: 290px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img-holder img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
width: calc(60% - 2rem);
|
||||||
|
position: relative;
|
||||||
|
min-width: 290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-settings-user {
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 3rem;;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-settings-users h3 {
|
||||||
|
margin-top: 5rem;;
|
||||||
|
}
|
||||||
|
|
||||||
|
#user-settings-users td {
|
||||||
|
min-width: 100px;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
}
|
||||||
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: 815 KiB |
@@ -1,4 +1,189 @@
|
|||||||
function incrementCounter() {
|
function setPageContent(elemID) {
|
||||||
let elem = document.querySelector("#counter");
|
let target = document.querySelector("#page-content");
|
||||||
elem.innerHTML = Number(elem.innerHTML) + 1;
|
target.style.opacity=0;
|
||||||
|
setTimeout(function () {
|
||||||
|
// For all elements, set display to none
|
||||||
|
let elems = document.querySelectorAll(".content");
|
||||||
|
elems.forEach(element => {
|
||||||
|
element.style.display = "none";
|
||||||
|
});
|
||||||
|
document.querySelector(elemID).style.display = "inline-block";
|
||||||
|
if (Object.keys(pageFunctionsLoad).includes(elemID)) {
|
||||||
|
pageFunctionsLoad[elemID](data);
|
||||||
|
}
|
||||||
|
target.style.opacity = 1;
|
||||||
|
showLoader(false);
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function nextPage() {
|
||||||
|
let elemID = pages[page];
|
||||||
|
if (Object.keys(pageFunctionsExit).includes(elemID)) {
|
||||||
|
pageFunctionsExit[elemID](data);
|
||||||
|
}
|
||||||
|
page = Math.min(page+1, pages.length-1);
|
||||||
|
setPageContent(pages[page]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function prevPage() {
|
||||||
|
let elemID = pages[page];
|
||||||
|
if (Object.keys(pageFunctionsExit).includes(elemID)) {
|
||||||
|
pageFunctionsExit[elemID](data);
|
||||||
|
}
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getData() {
|
||||||
|
let res = await fetch("/api/party.json");
|
||||||
|
return await res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPartySelection(data) {
|
||||||
|
console.log("Render event for #landing triggered");
|
||||||
|
let elem = document.querySelector("#select-party");
|
||||||
|
elem.innerHTML = "";
|
||||||
|
data.items.forEach(party => {
|
||||||
|
let opt = document.createElement("option");
|
||||||
|
opt.value = party.id;
|
||||||
|
opt.innerHTML = party.party_name;
|
||||||
|
opt.classList.add("font-cinzel-light");
|
||||||
|
elem.appendChild(opt);
|
||||||
|
});
|
||||||
|
if (selectedParty) {
|
||||||
|
elem.value = selectedParty;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectChosenParty(data) {
|
||||||
|
console.log("Exit event for #landing triggered");
|
||||||
|
let elem = document.querySelector("#select-party");
|
||||||
|
console.log("Setting selected party to: " + elem.value);
|
||||||
|
selectedParty = elem.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderUserSettings(data) {
|
||||||
|
console.log("Render event for #user-settings triggered");
|
||||||
|
let group;
|
||||||
|
for (let i = 0; i < data.items.length; i++) {
|
||||||
|
if (data.items[i].id != selectedParty) {continue};
|
||||||
|
group = data.items[i];
|
||||||
|
}
|
||||||
|
document.querySelector("#user-settings-name").innerHTML = group.party_name;
|
||||||
|
document.querySelector("#user-settings-seats").innerHTML = group.seats;
|
||||||
|
let elem = document.querySelector("#user-settings-users");
|
||||||
|
elem.innerHTML = "";
|
||||||
|
group.users.forEach(user => {
|
||||||
|
console.log(user)
|
||||||
|
addUserSettings(elem, user);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addUserSettings(elem, user) {
|
||||||
|
let container = document.createElement("div");
|
||||||
|
elem.appendChild(container);
|
||||||
|
|
||||||
|
let name = document.createElement("h3");
|
||||||
|
name.classList.add("color-secondary");
|
||||||
|
name.innerHTML = user.name;
|
||||||
|
container.appendChild(name);
|
||||||
|
|
||||||
|
let table = document.createElement("table");
|
||||||
|
container.appendChild(table);
|
||||||
|
|
||||||
|
let tr1 = document.createElement("tr");
|
||||||
|
table.appendChild(tr1);
|
||||||
|
|
||||||
|
let td11 = document.createElement("td");
|
||||||
|
td11.innerHTML = "Name:";
|
||||||
|
tr1.appendChild(td11);
|
||||||
|
|
||||||
|
let td12 = document.createElement("td");
|
||||||
|
tr1.appendChild(td12);
|
||||||
|
|
||||||
|
let td12Input = document.createElement("input");
|
||||||
|
td12Input.value = user.name;
|
||||||
|
td12Input.id = "user-settings-user-name-" + user.id;
|
||||||
|
td12.appendChild(td12Input);
|
||||||
|
|
||||||
|
let td13 = document.createElement("td");
|
||||||
|
td13.innerHTML = "*For seating arrangements";
|
||||||
|
tr1.appendChild(td13);
|
||||||
|
|
||||||
|
let tr2 = document.createElement("tr");
|
||||||
|
table.appendChild(tr2);
|
||||||
|
|
||||||
|
let td21 = document.createElement("td");
|
||||||
|
td21.innerHTML = "E-mail:";
|
||||||
|
tr2.appendChild(td21);
|
||||||
|
|
||||||
|
let td22 = document.createElement("td");
|
||||||
|
tr2.appendChild(td22);
|
||||||
|
|
||||||
|
let td22Input = document.createElement("input");
|
||||||
|
td22Input.value = user.email;
|
||||||
|
td22Input.type = "email"
|
||||||
|
td22Input.id = "user-settings-user-email-" + user.id;
|
||||||
|
td22.appendChild(td22Input);
|
||||||
|
|
||||||
|
let td23 = document.createElement("td");
|
||||||
|
td23.innerHTML = "*For updates and changes";
|
||||||
|
tr2.appendChild(td23);
|
||||||
|
|
||||||
|
let tr3 = document.createElement("tr");
|
||||||
|
table.appendChild(tr3);
|
||||||
|
|
||||||
|
let td31 = document.createElement("td");
|
||||||
|
td31.innerHTML = "RSVP:";
|
||||||
|
tr3.appendChild(td31);
|
||||||
|
|
||||||
|
let td32 = document.createElement("td");
|
||||||
|
tr3.appendChild(td32);
|
||||||
|
|
||||||
|
let td32Select = document.createElement("select");
|
||||||
|
td32.appendChild(td32Select);
|
||||||
|
let td32SelectOpt1 = document.createElement("option");
|
||||||
|
td32SelectOpt1.value = true;
|
||||||
|
td32SelectOpt1.innerHTML = "I am going"
|
||||||
|
td32Select.appendChild(td32SelectOpt1);
|
||||||
|
let td32SelectOpt2 = document.createElement("option");
|
||||||
|
td32SelectOpt2.value = false;
|
||||||
|
td32SelectOpt2.innerHTML = "I cannot come"
|
||||||
|
td32Select.appendChild(td32SelectOpt2);
|
||||||
|
td32Select.value = "" + user.rsvp_status
|
||||||
|
td32Select.id = "user-settings-user-rsvp_status-" + user.id;
|
||||||
|
|
||||||
|
let td33 = document.createElement("td");
|
||||||
|
tr3.appendChild(td33);
|
||||||
|
|
||||||
|
let tr4 = document.createElement("tr");
|
||||||
|
table.appendChild(tr4);
|
||||||
|
|
||||||
|
let td41 = document.createElement("td");
|
||||||
|
td41.innerHTML = "Allergies:";
|
||||||
|
tr4.appendChild(td41);
|
||||||
|
|
||||||
|
let td42 = document.createElement("td");
|
||||||
|
tr4.appendChild(td42);
|
||||||
|
|
||||||
|
let td42Input = document.createElement("input");
|
||||||
|
td42Input.value = user.allergies;
|
||||||
|
td42Input.id = "user-settings-user-allergies-" + user.id;
|
||||||
|
td42.appendChild(td42Input);
|
||||||
|
|
||||||
|
let td43 = document.createElement("td");
|
||||||
|
td43.innerHTML = "*For food considerations, eg 'Tomatoes, Garlic'";
|
||||||
|
tr4.appendChild(td43);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user