diff --git a/html/api/party.json b/html/api/party.json new file mode 100644 index 0000000..0d971cb --- /dev/null +++ b/html/api/party.json @@ -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": [] + } + ] +} \ No newline at end of file diff --git a/html/index.html b/html/index.html index 0c8073f..0e597ef 100644 --- a/html/index.html +++ b/html/index.html @@ -11,22 +11,159 @@ - + + + -
- -

Hey, this template is hosted at this repo.

-

You have had this page open for 1 seconds.

+
+
+ +
+
+
+

We're getting married

+
+
+
+ + + + +
+
+ + +
+
+
+
+ +
+





+
+
+
+
+
+
+

Loading

+ \ No newline at end of file diff --git a/html/static/css/font-amelia-giovani.css b/html/static/css/font-amelia-giovani.css new file mode 100644 index 0000000..b105fa0 --- /dev/null +++ b/html/static/css/font-amelia-giovani.css @@ -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; +} \ No newline at end of file diff --git a/html/static/css/font-cinzel.css b/html/static/css/font-cinzel.css new file mode 100644 index 0000000..c6391d3 --- /dev/null +++ b/html/static/css/font-cinzel.css @@ -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; +} \ No newline at end of file diff --git a/html/static/css/fonts.css b/html/static/css/font-roboto.css similarity index 92% rename from html/static/css/fonts.css rename to html/static/css/font-roboto.css index a853440..ece260f 100644 --- a/html/static/css/fonts.css +++ b/html/static/css/font-roboto.css @@ -1,3 +1,5 @@ +/* ROBOTO */ + @font-face { font-family: Roboto; src: url(../fonts/Roboto-Thin.ttf); @@ -82,36 +84,36 @@ font-style: italic; } -.font-italic { +.font-roboto-italic { font-style: italic; } -.font-thin { +.font-roboto-thin { font-family: Roboto; font-weight: 100; } -.font-light { +.font-roboto-light { font-family: Roboto; font-weight: 300; } -.font-regular { +.font-roboto-regular { font-family: Roboto; font-weight: 400; } -.font-medium { +.font-roboto-medium { font-family: Roboto; font-weight: 500; } -.font-bold { +.font-roboto-bold { font-family: Roboto; font-weight: 700; } -.font-black { +.font-roboto-black { font-family: Roboto; font-weight: 900; } \ No newline at end of file diff --git a/html/static/css/loaders.css b/html/static/css/loaders.css new file mode 100644 index 0000000..4af468d --- /dev/null +++ b/html/static/css/loaders.css @@ -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; + } +} \ No newline at end of file diff --git a/html/static/css/main.css b/html/static/css/main.css index 0d8e829..101298a 100644 --- a/html/static/css/main.css +++ b/html/static/css/main.css @@ -1,12 +1,12 @@ /* VARIABLES */ :root { - --color-primary: #c9cacf; - --color-secondary: #f2f2f3; + --color-primary: rgb(165, 151, 190); + --color-secondary: rgb(231, 214, 162); --color-tertiary: #5260ff; --color-success: #2dd36f; --color-warning: #ffc409; --color-danger: #eb445a; - --color-dark: #3d3e43; + --color-dark: rgb(25, 35, 62); --color-medium: #92949c; --color-light: #f4f5f8; --base-rem-size: 12px; @@ -29,13 +29,78 @@ a { 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 { - width: 80%; + width: 70%; margin: 5rem auto; padding: 3rem; border-radius: 1rem; - box-shadow: 16px 16px 36px #626369, - -16px -16px 36px #c2c5cf; + box-shadow: 20px 20px 67px #0c101d, + -20px -20px 67px #2b3d6c; + display: flex; + gap: 2rem 3rem; + text-align: center; + flex-wrap: wrap; + align-items: stretch; + justify-content: center; } .container a { @@ -44,4 +109,133 @@ a { .container a:hover { 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; } \ No newline at end of file diff --git a/html/static/fonts/Amelia Giovani Regular.otf b/html/static/fonts/Amelia Giovani Regular.otf new file mode 100644 index 0000000..8a1190f Binary files /dev/null and b/html/static/fonts/Amelia Giovani Regular.otf differ diff --git a/html/static/fonts/Cinzel-Black.ttf b/html/static/fonts/Cinzel-Black.ttf new file mode 100644 index 0000000..d65adaa Binary files /dev/null and b/html/static/fonts/Cinzel-Black.ttf differ diff --git a/html/static/fonts/Cinzel-Bold.ttf b/html/static/fonts/Cinzel-Bold.ttf new file mode 100644 index 0000000..68509ac Binary files /dev/null and b/html/static/fonts/Cinzel-Bold.ttf differ diff --git a/html/static/fonts/Cinzel-ExtraBold.ttf b/html/static/fonts/Cinzel-ExtraBold.ttf new file mode 100644 index 0000000..08baee6 Binary files /dev/null and b/html/static/fonts/Cinzel-ExtraBold.ttf differ diff --git a/html/static/fonts/Cinzel-Medium.ttf b/html/static/fonts/Cinzel-Medium.ttf new file mode 100644 index 0000000..5234ed9 Binary files /dev/null and b/html/static/fonts/Cinzel-Medium.ttf differ diff --git a/html/static/fonts/Cinzel-Regular.ttf b/html/static/fonts/Cinzel-Regular.ttf new file mode 100644 index 0000000..dd2d0d6 Binary files /dev/null and b/html/static/fonts/Cinzel-Regular.ttf differ diff --git a/html/static/fonts/Cinzel-SemiBold.ttf b/html/static/fonts/Cinzel-SemiBold.ttf new file mode 100644 index 0000000..b727853 Binary files /dev/null and b/html/static/fonts/Cinzel-SemiBold.ttf differ diff --git a/html/static/img/Invitation.jpeg b/html/static/img/Invitation.jpeg new file mode 100644 index 0000000..fc5d1f3 Binary files /dev/null and b/html/static/img/Invitation.jpeg differ diff --git a/html/static/js/main.js b/html/static/js/main.js index c0e8312..cbcb2fd 100644 --- a/html/static/js/main.js +++ b/html/static/js/main.js @@ -1,4 +1,189 @@ -function incrementCounter() { - let elem = document.querySelector("#counter"); - elem.innerHTML = Number(elem.innerHTML) + 1; +function setPageContent(elemID) { + let target = document.querySelector("#page-content"); + 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); } \ No newline at end of file