generated from Templates/html-nginx-deployment
Compare commits
2 Commits
b0320962ae
...
prod
| Author | SHA1 | Date | |
|---|---|---|---|
| efd30eac18 | |||
| 9963dbfcc6 |
8
cicd/Jenkinsfile
vendored
8
cicd/Jenkinsfile
vendored
@@ -10,6 +10,8 @@ kind: Pod
|
||||
metadata:
|
||||
name: wedding-fe-"""+BRANCH_NAME+"""-build
|
||||
spec:
|
||||
nodeSelector:
|
||||
kubernetes.io/arch: arm64
|
||||
serviceAccountName: jenkins-admin
|
||||
containers:
|
||||
- name: kaniko
|
||||
@@ -20,7 +22,7 @@ spec:
|
||||
- name: kaniko-secret
|
||||
mountPath: /kaniko/.docker
|
||||
- name: deploy
|
||||
image: 192.168.195.195:30000/nginx:latest
|
||||
image: 192.168.195.195:30000/deploy-arm64:latest
|
||||
command: ["tail"]
|
||||
args: ["-f", "/dev/null"]
|
||||
restartPolicy: Never
|
||||
@@ -55,10 +57,8 @@ spec:
|
||||
stage('Kubernetes Deploy') {
|
||||
steps {
|
||||
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 './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
|
||||
delpoymentDate: "{{replaceMe}}"
|
||||
spec:
|
||||
nodeSelector:
|
||||
kubernetes.io/arch: arm64
|
||||
containers:
|
||||
- name: wedding-fe-main
|
||||
image: 192.168.195.195:30000/wedding-fe:main
|
||||
|
||||
@@ -35,6 +35,8 @@ spec:
|
||||
app: wedding-fe-prod
|
||||
delpoymentDate: "{{replaceMe}}"
|
||||
spec:
|
||||
nodeSelector:
|
||||
kubernetes.io/arch: arm64
|
||||
containers:
|
||||
- name: wedding-fe-prod
|
||||
image: 192.168.195.195:30000/wedding-fe:prod
|
||||
|
||||
@@ -35,6 +35,8 @@ spec:
|
||||
app: wedding-fe-stage
|
||||
delpoymentDate: "{{replaceMe}}"
|
||||
spec:
|
||||
nodeSelector:
|
||||
kubernetes.io/arch: arm64
|
||||
containers:
|
||||
- name: wedding-fe-stage
|
||||
image: 192.168.195.195:30000/wedding-fe:stage
|
||||
|
||||
@@ -11,79 +11,22 @@
|
||||
<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/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/fonts.css">
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<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 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>
|
||||
</body>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script>
|
||||
// Actions get called from here. This makes it easy to see what starts where.
|
||||
var pages = ["#landing", "#user-selection"];
|
||||
var page = 0;
|
||||
|
||||
setPageContent("#landing");
|
||||
setTimeout(function () {
|
||||
showLoader(false);
|
||||
}, 1000)
|
||||
setInterval(function () {
|
||||
incrementCounter();
|
||||
}, 1000);
|
||||
</script>
|
||||
</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-family: Roboto;
|
||||
src: url(../fonts/Roboto-Thin.ttf);
|
||||
@@ -84,36 +82,36 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.font-roboto-italic {
|
||||
.font-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.font-roboto-thin {
|
||||
.font-thin {
|
||||
font-family: Roboto;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.font-roboto-light {
|
||||
.font-light {
|
||||
font-family: Roboto;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-roboto-regular {
|
||||
.font-regular {
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.font-roboto-medium {
|
||||
.font-medium {
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-roboto-bold {
|
||||
.font-bold {
|
||||
font-family: Roboto;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-roboto-black {
|
||||
.font-black {
|
||||
font-family: Roboto;
|
||||
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 */
|
||||
:root {
|
||||
--color-primary: #a598be;
|
||||
--color-secondary: #e7d6a2;
|
||||
--color-primary: #c9cacf;
|
||||
--color-secondary: #f2f2f3;
|
||||
--color-tertiary: #5260ff;
|
||||
--color-success: #2dd36f;
|
||||
--color-warning: #ffc409;
|
||||
--color-danger: #eb445a;
|
||||
--color-dark: #19233e;
|
||||
--color-dark: #3d3e43;
|
||||
--color-medium: #92949c;
|
||||
--color-light: #f4f5f8;
|
||||
--base-rem-size: 12px;
|
||||
@@ -29,35 +29,13 @@ 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: 70%;
|
||||
width: 80%;
|
||||
margin: 5rem auto;
|
||||
padding: 3rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 20px 20px 67px #0c101d,
|
||||
-20px -20px 67px #2b3d6c;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
box-shadow: 16px 16px 36px #626369,
|
||||
-16px -16px 36px #c2c5cf;
|
||||
}
|
||||
|
||||
.container a {
|
||||
@@ -67,104 +45,3 @@ select {
|
||||
.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%;
|
||||
}
|
||||
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: 780 KiB |
@@ -1,31 +1,4 @@
|
||||
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)
|
||||
}
|
||||
function incrementCounter() {
|
||||
let elem = document.querySelector("#counter");
|
||||
elem.innerHTML = Number(elem.innerHTML) + 1;
|
||||
}
|
||||
Reference in New Issue
Block a user