generated from Templates/html-nginx-deployment
Compare commits
2 Commits
73f2d16728
...
prod
| Author | SHA1 | Date | |
|---|---|---|---|
| efd30eac18 | |||
| 9963dbfcc6 |
8
cicd/Jenkinsfile
vendored
8
cicd/Jenkinsfile
vendored
@@ -10,6 +10,8 @@ kind: Pod
|
|||||||
metadata:
|
metadata:
|
||||||
name: wedding-fe-"""+BRANCH_NAME+"""-build
|
name: wedding-fe-"""+BRANCH_NAME+"""-build
|
||||||
spec:
|
spec:
|
||||||
|
nodeSelector:
|
||||||
|
kubernetes.io/arch: arm64
|
||||||
serviceAccountName: jenkins-admin
|
serviceAccountName: jenkins-admin
|
||||||
containers:
|
containers:
|
||||||
- name: kaniko
|
- name: kaniko
|
||||||
@@ -20,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
|
||||||
@@ -55,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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ spec:
|
|||||||
app: wedding-fe-main
|
app: wedding-fe-main
|
||||||
delpoymentDate: "{{replaceMe}}"
|
delpoymentDate: "{{replaceMe}}"
|
||||||
spec:
|
spec:
|
||||||
|
nodeSelector:
|
||||||
|
kubernetes.io/arch: arm64
|
||||||
containers:
|
containers:
|
||||||
- name: wedding-fe-main
|
- name: wedding-fe-main
|
||||||
image: 192.168.195.195:30000/wedding-fe:main
|
image: 192.168.195.195:30000/wedding-fe:main
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ spec:
|
|||||||
app: wedding-fe-prod
|
app: wedding-fe-prod
|
||||||
delpoymentDate: "{{replaceMe}}"
|
delpoymentDate: "{{replaceMe}}"
|
||||||
spec:
|
spec:
|
||||||
|
nodeSelector:
|
||||||
|
kubernetes.io/arch: arm64
|
||||||
containers:
|
containers:
|
||||||
- name: wedding-fe-prod
|
- name: wedding-fe-prod
|
||||||
image: 192.168.195.195:30000/wedding-fe:prod
|
image: 192.168.195.195:30000/wedding-fe:prod
|
||||||
|
|||||||
@@ -35,6 +35,8 @@ spec:
|
|||||||
app: wedding-fe-stage
|
app: wedding-fe-stage
|
||||||
delpoymentDate: "{{replaceMe}}"
|
delpoymentDate: "{{replaceMe}}"
|
||||||
spec:
|
spec:
|
||||||
|
nodeSelector:
|
||||||
|
kubernetes.io/arch: arm64
|
||||||
containers:
|
containers:
|
||||||
- name: wedding-fe-stage
|
- name: wedding-fe-stage
|
||||||
image: 192.168.195.195:30000/wedding-fe:stage
|
image: 192.168.195.195:30000/wedding-fe:stage
|
||||||
|
|||||||
@@ -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 {
|
||||||
@@ -109,133 +44,4 @@ 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