Home-Cluster/wedding-page
5
0
Fork 0
generated from Templates/html-nginx-deployment
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Loading page and landing page initial styling.
All checks were successful
Home Cluster Builds/wedding-page/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Sciocatti
2023-01-08 00:27:59 +02:00
parent e8e3432855
commit 3649d0c30c
15 changed files with 402 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
html/index.html
View File

@@ -11,22 +11,79 @@
<link rel="icon" type="image/png" sizes="16x16" href="/static/fav/favicon-16x16.png">
<link rel="shortcut icon" href="/static/fav/favicon.ico" type="image/x-icon">
<!-- CSS -->
<link rel="stylesheet" href="/static/css/fonts.css">
<link rel="stylesheet" href="/static/css/font-cinzel.css">
<link rel="stylesheet" href="/static/css/font-amelia-giovani.css">
<link rel="stylesheet" href="/static/css/loaders.css">
<link rel="stylesheet" href="/static/css/main.css">
</head>
<body>
<div class="container">
<img src="/static/img/logo.png" alt="">
<h1>Hey, this template is hosted at <a href="http://192.168.195.195:30001">this</a> repo.</h1>
<p>You have had this page open for <span id="counter">1</span> seconds.</p>
<div class="container font-cinzel-regular">
<div id="img-holder">
<img src="/static/img/invitation.jpeg" alt="">
</div>
<div class="panel">
<h1 class="font-amelia-giovani-regular">We're getting married</h1>
<div id="page-content" style="opacity: 0"></div>
<div class="btn-holder">
<button class="btn font-cinzel-regular" onclick="prevPage()">Back</button>
<button class="btn font-cinzel-regular" onclick="nextPage()">Continue</button>
</div>
</div>
</div>
<div id="loading-page">
<br><br><br><br><br><br>
<div class="newtons-cradle">
<div class="newtons-cradle-dot"></div>
<div class="newtons-cradle-dot"></div>
<div class="newtons-cradle-dot"></div>
<div class="newtons-cradle-dot"></div>
</div>
<h2>Loading</h2>
</div>
<!-- Landing Page HTML -->
<div id="landing" class="content" style="display: none;">
<p>
We want you to enjoy the event with us.
<br>
Please go through the steps below
<br>
to help us make it the best day.
</p>
<br><br>
<h2 style="color: var(--color-secondary);">We are</h2>
<select class="font-cinzel-light" id="select-user">
<option class="font-cinzel-light" value="1">Erna & Michael</option>
<option class="font-cinzel-light" value="1">Susan & Andre</option>
<option class="font-cinzel-light" value="1">Aloma & Ruben</option>
</select>
</div>
<div id="user-selection" class="content" style="display: none;">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam, nemo cumque unde fugiat quo voluptas impedit alias numquam commodi officiis error fugit sit, quia culpa quis dolor excepturi, odit ratione!
</p>
<ul>
<li>User</li>
<li>RSVP</li>
<li>Choose menu</li>
<li>Choose drinks</li>
<li>Venue info</li>
</ul>
</div>
</body>
<!-- JS -->
<script src="/static/js/main.js"></script>
<script>
// Actions get called from here. This makes it easy to see what starts where.
setInterval(function () {
incrementCounter();
}, 1000);
var pages = ["#landing", "#user-selection"];
var page = 0;
setPageContent("#landing");
setTimeout(function () {
showLoader(false);
}, 1000)
</script>
</html>