generated from Templates/html-nginx-deployment
Compare commits
1 Commits
35ce21324d
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 443eef5225 |
6
cicd/Jenkinsfile
vendored
6
cicd/Jenkinsfile
vendored
@@ -22,7 +22,7 @@ spec:
|
|||||||
- name: kaniko-secret
|
- name: kaniko-secret
|
||||||
mountPath: /kaniko/.docker
|
mountPath: /kaniko/.docker
|
||||||
- name: deploy
|
- name: deploy
|
||||||
image: 192.168.195.195:30000/nginx:latest
|
image: 192.168.195.195:30000/deploy-arm64:latest
|
||||||
command: ["tail"]
|
command: ["tail"]
|
||||||
args: ["-f", "/dev/null"]
|
args: ["-f", "/dev/null"]
|
||||||
restartPolicy: Never
|
restartPolicy: Never
|
||||||
@@ -57,10 +57,8 @@ spec:
|
|||||||
stage('Kubernetes Deploy') {
|
stage('Kubernetes Deploy') {
|
||||||
steps {
|
steps {
|
||||||
container("deploy") {
|
container("deploy") {
|
||||||
sh 'curl -LO "https://storage.googleapis.com/kubernetes-release/release/v1.24.3/bin/linux/arm64/kubectl"'
|
|
||||||
sh 'chmod u+x ./kubectl'
|
|
||||||
sh 'sed -ie "s/{{replaceMe}}/`date +%s`/g" `pwd`/cicd/'+env.BRANCH_NAME+'/deployment.yaml'
|
sh 'sed -ie "s/{{replaceMe}}/`date +%s`/g" `pwd`/cicd/'+env.BRANCH_NAME+'/deployment.yaml'
|
||||||
sh './kubectl apply -f `pwd`/cicd/'+env.BRANCH_NAME+'/deployment.yaml'
|
sh '/utils/kubectl apply -f `pwd`/cicd/'+env.BRANCH_NAME+'/deployment.yaml'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"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,159 +11,22 @@
|
|||||||
<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/font-cinzel.css">
|
<link rel="stylesheet" href="/static/css/fonts.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 font-cinzel-regular">
|
<div class="container">
|
||||||
<div id="img-holder">
|
<img src="/static/img/logo.png" alt="">
|
||||||
<img src="/static/img/Invitation.jpeg" alt="">
|
<h1>Hey, this template is hosted at <a href="http://192.168.195.195:30001">this</a> repo.</h1>
|
||||||
</div>
|
<p>You have had this page open for <span id="counter">1</span> seconds.</p>
|
||||||
<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.
|
||||||
var pages = ["#landing", "#user-settings"];
|
setInterval(function () {
|
||||||
var page = 0;
|
incrementCounter();
|
||||||
var data;
|
}, 1000);
|
||||||
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>
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
@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;
|
|
||||||
}
|
|
||||||
@@ -1,72 +0,0 @@
|
|||||||
/* 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,5 +1,3 @@
|
|||||||
/* ROBOTO */
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
src: url(../fonts/Roboto-Thin.ttf);
|
src: url(../fonts/Roboto-Thin.ttf);
|
||||||
@@ -84,36 +82,36 @@
|
|||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-italic {
|
.font-italic {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-thin {
|
.font-thin {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-light {
|
.font-light {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-regular {
|
.font-regular {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-medium {
|
.font-medium {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-bold {
|
.font-bold {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-roboto-black {
|
.font-black {
|
||||||
font-family: Roboto;
|
font-family: Roboto;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
}
|
}
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
#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: rgb(165, 151, 190);
|
--color-primary: #c9cacf;
|
||||||
--color-secondary: rgb(231, 214, 162);
|
--color-secondary: #f2f2f3;
|
||||||
--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: rgb(25, 35, 62);
|
--color-dark: #3d3e43;
|
||||||
--color-medium: #92949c;
|
--color-medium: #92949c;
|
||||||
--color-light: #f4f5f8;
|
--color-light: #f4f5f8;
|
||||||
--base-rem-size: 12px;
|
--base-rem-size: 12px;
|
||||||
@@ -29,78 +29,13 @@ 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: 70%;
|
width: 80%;
|
||||||
margin: 5rem auto;
|
margin: 5rem auto;
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
box-shadow: 20px 20px 67px #0c101d,
|
box-shadow: 16px 16px 36px #626369,
|
||||||
-20px -20px 67px #2b3d6c;
|
-16px -16px 36px #c2c5cf;
|
||||||
display: flex;
|
|
||||||
gap: 2rem 3rem;
|
|
||||||
text-align: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container a {
|
.container a {
|
||||||
@@ -110,132 +45,3 @@ input {
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 815 KiB |
@@ -1,189 +1,4 @@
|
|||||||
function setPageContent(elemID) {
|
function incrementCounter() {
|
||||||
let target = document.querySelector("#page-content");
|
let elem = document.querySelector("#counter");
|
||||||
target.style.opacity=0;
|
elem.innerHTML = Number(elem.innerHTML) + 1;
|
||||||
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