diff --git a/html/index.html b/html/index.html index 0c8073f..e0e1fb5 100644 --- a/html/index.html +++ b/html/index.html @@ -11,22 +11,79 @@ - + + + -
- -

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..98f0cbe 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: #a598be; + --color-secondary: #e7d6a2; --color-tertiary: #5260ff; --color-success: #2dd36f; --color-warning: #ffc409; --color-danger: #eb445a; - --color-dark: #3d3e43; + --color-dark: #19233e; --color-medium: #92949c; --color-light: #f4f5f8; --base-rem-size: 12px; @@ -29,13 +29,35 @@ 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: 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; + text-align: center; + flex-wrap: wrap; + align-items: stretch; } .container a { @@ -44,4 +66,105 @@ a { .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%; } \ 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..00a5f6f 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..cc913e2 100644 --- a/html/static/js/main.js +++ b/html/static/js/main.js @@ -1,4 +1,31 @@ -function incrementCounter() { - let elem = document.querySelector("#counter"); - elem.innerHTML = Number(elem.innerHTML) + 1; +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) + } } \ No newline at end of file