From 2e76962ca01411a029441e81e95579018f6abee4 Mon Sep 17 00:00:00 2001
From: Profitroll <47523801+profitrollgame@users.noreply.github.com>
Date: Tue, 20 Dec 2022 15:34:47 +0100
Subject: [PATCH] Added some pages
---
.gitignore | 3 +-
extensions/pages.py | 27 +++++++
pages/home/index.html | 24 +++++++
pages/home/script.js | 6 ++
pages/home/style.css | 148 ++++++++++++++++++++++++++++++++++++++
pages/matter.css | 2 +
pages/register/index.html | 50 +++++++++++++
pages/register/script.js | 6 ++
pages/register/style.css | 138 +++++++++++++++++++++++++++++++++++
9 files changed, 402 insertions(+), 2 deletions(-)
create mode 100644 extensions/pages.py
create mode 100644 pages/home/index.html
create mode 100644 pages/home/script.js
create mode 100644 pages/home/style.css
create mode 100644 pages/matter.css
create mode 100644 pages/register/index.html
create mode 100644 pages/register/script.js
create mode 100644 pages/register/style.css
diff --git a/.gitignore b/.gitignore
index a598f21..2e4bb6d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -154,5 +154,4 @@ cython_debug/
# Custom
.vscode
-config.json
-pages
\ No newline at end of file
+config.json
\ No newline at end of file
diff --git a/extensions/pages.py b/extensions/pages.py
new file mode 100644
index 0000000..3b7a120
--- /dev/null
+++ b/extensions/pages.py
@@ -0,0 +1,27 @@
+from os import path
+from modules.app import app
+from fastapi.responses import HTMLResponse, Response
+
+@app.get("/pages/matter.css", include_in_schema=False)
+async def page_matter():
+ with open(path.join("pages", "matter.css"), "r", encoding="utf-8") as f:
+ output = f.read()
+ return Response(content=output)
+
+@app.get("/pages/{page}/{file}", include_in_schema=False)
+async def page_assets(page:str, file: str):
+ with open(path.join("pages", page, file), "r", encoding="utf-8") as f:
+ output = f.read()
+ return Response(content=output)
+
+@app.get("/", include_in_schema=False)
+async def page_home():
+ with open(path.join("pages", "home", "index.html"), "r", encoding="utf-8") as f:
+ output = f.read()
+ return HTMLResponse(content=output)
+
+@app.get("/register", include_in_schema=False)
+async def page_register():
+ with open(path.join("pages", "register", "index.html"), "r", encoding="utf-8") as f:
+ output = f.read()
+ return HTMLResponse(content=output)
\ No newline at end of file
diff --git a/pages/home/index.html b/pages/home/index.html
new file mode 100644
index 0000000..a0b29f2
--- /dev/null
+++ b/pages/home/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+ END PLAY Photos API • Home
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/home/script.js b/pages/home/script.js
new file mode 100644
index 0000000..a5b297a
--- /dev/null
+++ b/pages/home/script.js
@@ -0,0 +1,6 @@
+// JavaScript is used for toggling loading state
+var form = document.querySelector('form');
+form.onsubmit = function (event) {
+ event.preventDefault();
+ form.classList.add('signed');
+};
\ No newline at end of file
diff --git a/pages/home/style.css b/pages/home/style.css
new file mode 100644
index 0000000..8c429e9
--- /dev/null
+++ b/pages/home/style.css
@@ -0,0 +1,148 @@
+/* Material Customization */
+:root {
+ --pure-material-primary-rgb: 255, 191, 0;
+ --pure-material-onsurface-rgb: 0, 0, 0;
+}
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: url("https://res.cloudinary.com/finnhvman/image/upload/v1541930411/pattern.png");
+}
+
+.registration {
+ position: relative;
+ border-radius: 8px;
+ padding: 16px 48px;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ overflow: hidden;
+ background-color: white;
+}
+
+h1 {
+ margin: 32px 0;
+ font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+ font-weight: normal;
+ text-align: center;
+}
+
+.registration > label {
+ display: block;
+ margin: 24px 0;
+ width: 320px;
+}
+
+p {
+ font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+ font-weight: normal;
+ text-align: center;
+}
+
+a.matter-button-contained {
+ text-decoration: none;
+}
+
+a {
+ color: rgb(var(--pure-material-primary-rgb));
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+button {
+ display: block !important;
+ margin: 32px auto;
+}
+
+.done,
+.progress {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ visibility: hidden;
+}
+
+.done {
+ transition: visibility 0s 1s;
+}
+
+.signed > .done {
+ visibility: visible;
+}
+
+.done > a {
+ display: inline-block;
+ text-decoration: none;
+}
+
+.progress {
+ opacity: 0;
+}
+
+.signed > .progress {
+ animation: loading 4s;
+}
+
+@keyframes loading {
+ 0% {
+ visibility: visible;
+ }
+ 12.5% {
+ opacity: 0;
+ }
+ 25% {
+ opacity: 1;
+ }
+ 87.5% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+.left-footer,
+.right-footer {
+ position: fixed;
+ padding: 14px;
+ bottom: 14px;
+ color: #555;
+ background-color: #eee;
+ font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+ font-size: 14px;
+ line-height: 1.5;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.left-footer {
+ left: 0;
+ border-radius: 0 4px 4px 0;
+ text-align: left;
+}
+
+.right-footer {
+ right: 0;
+ border-radius: 4px 0 0 4px;
+ text-align: right;
+}
+
+.left-footer > a,
+.right-footer > a {
+ color: black;
+}
+
+.left-footer > a:hover,
+.right-footer > a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/pages/matter.css b/pages/matter.css
new file mode 100644
index 0000000..cb59409
--- /dev/null
+++ b/pages/matter.css
@@ -0,0 +1,2 @@
+/* Matter 0.2.2 (min) */
+.matter-button-contained{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer;transition:box-shadow .2s}.matter-button-contained::-moz-focus-inner{border:none}.matter-button-contained:after,.matter-button-contained:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-contained:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-contained:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-contained:focus,.matter-button-contained:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.matter-button-contained:hover:before{opacity:.08}.matter-button-contained:focus:before{opacity:.24}.matter-button-contained:hover:focus:before{opacity:.32}.matter-button-contained:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.matter-button-contained:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-contained:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);box-shadow:none;cursor:auto}.matter-button-contained:disabled:after,.matter-button-contained:disabled:before{opacity:0}.matter-button-unelevated{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-unelevated::-moz-focus-inner{border:none}.matter-button-unelevated:after,.matter-button-unelevated:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-unelevated:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-unelevated:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-unelevated:hover:before{opacity:.08}.matter-button-unelevated:focus:before{opacity:.24}.matter-button-unelevated:hover:focus:before{opacity:.32}.matter-button-unelevated:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-unelevated:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);cursor:auto}.matter-button-unelevated:disabled:after,.matter-button-unelevated:disabled:before{opacity:0}.matter-button-outlined{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:1px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24);border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:34px;outline:none;cursor:pointer}.matter-button-outlined::-moz-focus-inner{border:none}.matter-button-outlined:after,.matter-button-outlined:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3px;opacity:0}.matter-button-outlined:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-outlined:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-outlined:hover:before{opacity:.04}.matter-button-outlined:focus:before{opacity:.12}.matter-button-outlined:hover:focus:before{opacity:.16}.matter-button-outlined:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-outlined:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-outlined:disabled:after,.matter-button-outlined:disabled:before{opacity:0}.matter-button-text{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:none;border-radius:4px;padding:0 8px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-text::-moz-focus-inner{border:none}.matter-button-text:after,.matter-button-text:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-text:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-text:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-text:hover:before{opacity:.04}.matter-button-text:focus:before{opacity:.12}.matter-button-text:hover:focus:before{opacity:.16}.matter-button-text:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-text:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-text:disabled:after,.matter-button-text:disabled:before{opacity:0}.matter-link{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-safari1:rgba(var(--matter-helper-theme),0.12);border-radius:4px;color:rgb(var(--matter-helper-theme));text-decoration:none;transition:background-color .2s,box-shadow .2s}.matter-link:hover{text-decoration:underline}.matter-link:focus{background-color:var(--matter-helper-safari1);box-shadow:0 0 0 .16em var(--matter-helper-safari1);outline:none}.matter-link:active{background-color:transparent;box-shadow:none}.matter-progress-circular{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:none;border-radius:50%;padding:.25em;width:3em;height:3em;color:rgb(var(--matter-helper-theme));background-color:transparent;font-size:16px;overflow:hidden}.matter-progress-circular::-webkit-progress-bar{background-color:transparent}.matter-progress-circular:indeterminate{animation:matter-progress-circular 6s cubic-bezier(.3,.6,1,1) infinite}.matter-progress-circular:indeterminate,:-ms-lang(x){animation:none}.matter-progress-circular:indeterminate::-webkit-progress-value,.matter-progress-circular:indeterminate:before{content:"";display:block;box-sizing:border-box;margin-bottom:.25em;border:.25em solid;border-radius:50%;width:100%!important;height:100%;background-color:transparent;-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-moz-progress-bar{box-sizing:border-box;border:.25em solid;border-radius:50%;width:100%;height:100%;background-color:transparent;clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-ms-fill{animation-name:-ms-ring}@keyframes matter-progress-circular{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(4turn);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}to{transform:rotate(7turn)}}@keyframes matter-progress-circular-pseudo{0%{-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0)}18%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0)}53%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%)}88%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%)}}.matter-progress-linear{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:160px;height:4px;vertical-align:middle;color:rgb(var(--matter-helper-theme));background-color:rgba(var(--matter-helper-theme),.12)}.matter-progress-linear::-webkit-progress-bar{background-color:transparent}.matter-progress-linear::-webkit-progress-value{background-color:currentColor;transition:all .2s}.matter-progress-linear::-moz-progress-bar{background-color:currentColor;transition:all .2s}.matter-progress-linear::-ms-fill{border:none;background-color:currentColor;transition:all .2s}.matter-progress-linear:indeterminate{background-size:200% 100%;background-image:linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 25%,transparent 0);animation:matter-progress-linear 1.8s linear infinite}.matter-progress-linear:indeterminate::-webkit-progress-value{background-color:transparent}.matter-progress-linear:indeterminate::-moz-progress-bar{background-color:transparent}.matter-progress-linear:indeterminate::-ms-fill{animation-name:none}@keyframes matter-progress-linear{0%{background-position:32% 0,32% 0,50% 0}2%{background-position:32% 0,32% 0,50% 0}21%{background-position:32% 0,-18% 0,0 0}42%{background-position:32% 0,-68% 0,-27% 0}50%{background-position:32% 0,-93% 0,-46% 0}56%{background-position:32% 0,-118% 0,-68% 0}66%{background-position:-11% 0,-200% 0,-100% 0}71%{background-position:-32% 0,-200% 0,-100% 0}79%{background-position:-54% 0,-242% 0,-100% 0}86%{background-position:-68% 0,-268% 0,-100% 0}to{background-position:-100% 0,-300% 0,-100% 0}}.matter-checkbox{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-checkbox>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:3px 1px;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:2px;width:18px;height:18px;outline:none;cursor:pointer;transition:border-color .2s,background-color .2s}.matter-checkbox>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-checkbox>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);pointer-events:none;transition:opacity .3s,transform .2s}.matter-checkbox>input+span:after{content:"";z-index:1;display:block;position:absolute;top:3px;left:1px;box-sizing:content-box;width:10px;height:5px;border-color:transparent;border-style:solid;border-width:0 0 2px 2px;pointer-events:none;transform:translate(3px,4px) rotate(-45deg);transition:border-color .2s}.matter-checkbox>input:checked,.matter-checkbox>input:indeterminate{border-color:rgb(var(--matter-helper-theme));background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:before,.matter-checkbox>input:indeterminate+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:after,.matter-checkbox>input:indeterminate+span:after{border-color:rgb(var(--matter-helper-ontheme,255,255,255))}.matter-checkbox>input:indeterminate+span:after{border-left-width:0;transform:translate(4px,3px)}.matter-checkbox:hover>input+span:before{opacity:.04}.matter-checkbox>input:focus+span:before{opacity:.12}.matter-checkbox:hover>input:focus+span:before{opacity:.16}.matter-checkbox:active:hover>input,.matter-checkbox:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-checkbox:active>input:checked{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6)}.matter-checkbox:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-checkbox>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:checked:disabled,.matter-checkbox>input:indeterminate:disabled{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-checkbox>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:2px 0;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:50%;width:20px;height:20px;outline:none;cursor:pointer;transition:border-color .2s}.matter-radio>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-radio>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.matter-radio>input+span:after{content:"";display:block;position:absolute;top:2px;left:0;border-radius:50%;width:10px;height:10px;background-color:rgb(var(--matter-helper-theme));transform:translate(5px,5px) scale(0);transition:transform .2s}.matter-radio>input:checked{border-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:after{transform:translate(5px,5px) scale(1)}.matter-radio:hover>input+span:before{transform:scale(1);opacity:.04}.matter-radio>input:focus+span:before{transform:scale(1);opacity:.12}.matter-radio:hover>input:focus+span:before{transform:scale(1);opacity:.16}.matter-radio:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-radio:active:hover>input+span:before,.matter-radio:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-radio>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio>input:disabled+span:after{background-color:currentColor}.matter-switch{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-switch,.matter-switch>input{position:relative;display:inline-block}.matter-switch>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;float:right;margin:0 0 0 5px;border:5px solid transparent;border-radius:12px;width:46px;height:24px;background-clip:padding-box;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);outline:none;cursor:pointer;transition:background-color .2s,opacity .2s}.matter-switch>input+span{display:inline-block;box-sizing:border-box;margin-right:-51px;padding-right:51px;width:inherit;cursor:pointer}.matter-switch>input+span:before{right:11px;top:-8px;display:block;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);transition:opacity .3s .1s,transform .2s .1s}.matter-switch>input+span:after,.matter-switch>input+span:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.matter-switch>input+span:after{z-index:1;top:2px;right:21px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transition:background-color .2s,transform .2s}.matter-switch>input:checked{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:checked+span:before{right:-5px;background-color:rgb(var(--matter-helper-theme))}.matter-switch>input:checked+span:after{background-color:rgb(var(--matter-helper-theme));transform:translateX(16px)}.matter-switch:hover>input+span:before{opacity:.04}.matter-switch>input:focus+span:before{opacity:.12}.matter-switch:hover>input:focus+span:before{opacity:.16}.matter-switch:active>input{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch:active>input:checked{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-switch:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-switch>input:disabled{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);opacity:.38;cursor:default}.matter-switch>input:checked:disabled{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0,.38));cursor:default}.matter-switch>input:disabled+span:before{z-index:1;margin:10px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));transform:scale(1);opacity:1;transition:none}.matter-switch>input:disabled+span:after{opacity:.38}.matter-textfield-standard{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-standard>input,.matter-textfield-standard>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);padding:0 0 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-standard>input+span,.matter-textfield-standard>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 0 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.matter-textfield-standard:hover>input,.matter-textfield-standard:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87)}.matter-textfield-standard>input:not(:focus):placeholder-shown+span,.matter-textfield-standard>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:56px}.matter-textfield-standard>input:focus,.matter-textfield-standard>textarea:focus{outline:none}.matter-textfield-standard>input:focus+span,.matter-textfield-standard>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-standard>input:focus+span:after,.matter-textfield-standard>textarea:focus+span:after{transform:scale(1)}.matter-textfield-standard>input:disabled,.matter-textfield-standard>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-textfield-standard>input:disabled+span,.matter-textfield-standard>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-standard>input,.matter-textfield-standard>input+span,.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea,.matter-textfield-standard>textarea+span,.matter-textfield-standard>textarea+span:after{transition-duration:.1s}}}.matter-textfield-filled{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-filled>input,.matter-textfield-filled>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:4px 4px 0 0;padding:0 12px 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.04);box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-filled>input+span,.matter-textfield-filled>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 12px 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .3s}.matter-textfield-filled:hover>input,.matter-textfield-filled:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.08)}.matter-textfield-filled>input:not(:focus):placeholder-shown+span,.matter-textfield-filled>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:48px}.matter-textfield-filled>input:focus,.matter-textfield-filled>textarea:focus{outline:none}.matter-textfield-filled>input:focus+span,.matter-textfield-filled>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-filled>input:focus+span:after,.matter-textfield-filled>textarea:focus+span:after{transform:scale(1)}.matter-textfield-filled>input:disabled,.matter-textfield-filled>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24)}.matter-textfield-filled>input:disabled+span,.matter-textfield-filled>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-filled>input,.matter-textfield-filled>input+span,.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea,.matter-textfield-filled>textarea+span,.matter-textfield-filled>textarea+span:after{transition-duration:.1s}}}.matter-textfield-outlined{--matter-helper-theme:rgb(var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243)));--matter-helper-safari1:rgba(var(--matter-onsurface-rgb,0,0,0),0.38);--matter-helper-safari2:rgba(var(--matter-onsurface-rgb,0,0,0),0.6);--matter-helper-safari3:rgba(var(--matter-onsurface-rgb,0,0,0),0.87);position:relative;display:inline-block;padding-top:6px;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-outlined>input,.matter-textfield-outlined>textarea{box-sizing:border-box;margin:0;border:1px solid var(--matter-helper-safari2);border-top:1px solid transparent;border-radius:4px;padding:15px 13px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:inset 1px 0 transparent,inset -1px 0 transparent,inset 0 -1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:var(--matter-helper-theme);transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown{border-top-color:var(--matter-helper-safari2)}.matter-textfield-outlined>input+span,.matter-textfield-outlined>textarea+span{position:absolute;top:0;left:0;display:flex;width:100%;max-height:100%;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:15px;cursor:text;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:68px}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:1px solid var(--matter-helper-safari2);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:before{margin-right:4px;border-left:1px solid transparent;border-radius:4px 0}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>textarea+span:after{flex-grow:1;margin-left:4px;border-right:1px solid transparent;border-radius:0 4px}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:before,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:before{border-top-color:transparent}.matter-textfield-outlined:hover>input,.matter-textfield-outlined:hover>textarea{border-left-color:var(--matter-helper-safari3);border-bottom-color:var(--matter-helper-safari3);border-right-color:var(--matter-helper-safari3);border-top-color:transparent}.matter-textfield-outlined:hover>input+span:after,.matter-textfield-outlined:hover>input+span:before,.matter-textfield-outlined:hover>textarea+span:after,.matter-textfield-outlined:hover>textarea+span:before{border-top-color:var(--matter-helper-safari3)}.matter-textfield-outlined:hover>input:not(:focus):placeholder-shown,.matter-textfield-outlined:hover>textarea:not(:focus):placeholder-shown{border-color:var(--matter-helper-safari3)}.matter-textfield-outlined>input:focus,.matter-textfield-outlined>textarea:focus{border-left-color:var(--matter-helper-theme);border-bottom-color:var(--matter-helper-theme);border-right-color:var(--matter-helper-theme);border-top-color:transparent;box-shadow:inset 1px 0 var(--matter-helper-theme),inset -1px 0 var(--matter-helper-theme),inset 0 -1px var(--matter-helper-theme);outline:none}.matter-textfield-outlined>input:focus+span,.matter-textfield-outlined>textarea:focus+span{color:var(--matter-helper-theme)}.matter-textfield-outlined>input:focus+span:after,.matter-textfield-outlined>input:focus+span:before,.matter-textfield-outlined>textarea:focus+span:after,.matter-textfield-outlined>textarea:focus+span:before{border-top-color:var(--matter-helper-theme)!important;box-shadow:inset 0 1px var(--matter-helper-theme)}.matter-textfield-outlined>input:disabled,.matter-textfield-outlined>input:disabled+span,.matter-textfield-outlined>textarea:disabled,.matter-textfield-outlined>textarea:disabled+span{border-left-color:var(--matter-helper-safari1)!important;border-bottom-color:var(--matter-helper-safari1)!important;border-right-color:var(--matter-helper-safari1)!important;border-top-color:transparent!important;color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);pointer-events:none}.matter-textfield-outlined>input:disabled+span:after,.matter-textfield-outlined>input:disabled+span:before,.matter-textfield-outlined>textarea:disabled+span:after,.matter-textfield-outlined>textarea:disabled+span:before{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown,.matter-textfield-outlined>input:disabled:placeholder-shown+span,.matter-textfield-outlined>textarea:disabled:placeholder-shown,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown+span:after,.matter-textfield-outlined>input:disabled:placeholder-shown+span:before,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:after,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:before{border-top-color:transparent!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-outlined>input,.matter-textfield-outlined>input+span,.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea,.matter-textfield-outlined>textarea+span,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{transition-duration:.1s}}}.matter-tooltip,.matter-tooltip-top{z-index:10;position:absolute;left:0;right:0;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:10px;font-weight:400;line-height:16px;white-space:nowrap;text-transform:none;text-align:center;pointer-events:none}.matter-tooltip{bottom:-40px}.matter-tooltip-top{top:-40px}.matter-tooltip-top>span,.matter-tooltip>span{position:-webkit-sticky;position:sticky;left:0;right:0;display:inline-block;box-sizing:content-box;margin:0 -100vw;border:8px solid transparent;border-radius:12px;padding:4px 8px;color:rgb(var(--matter-surface-rgb,255,255,255));background-clip:padding-box;background-image:linear-gradient(rgba(var(--matter-surface-rgb,255,255,255),.34),rgba(var(--matter-surface-rgb,255,255,255),.34));background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.85);transform:scale(0);opacity:0;pointer-events:auto;transition:transform 75ms,opacity 75ms}.matter-tooltip-top:hover>span,.matter-tooltip:hover>span,:not(html):hover>.matter-tooltip-top>span,:not(html):hover>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}:focus-within>.matter-tooltip-top>span,:focus-within>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}@media (hover:none),(pointer:coarse){.matter-tooltip,.matter-tooltip-top{font-size:14px;line-height:20px}.matter-tooltip{bottom:-48px}.matter-tooltip-top{top:-48px}.matter-tooltip-top>span,.matter-tooltip>span{padding:6px 16px}}.matter-primary{--matter-theme-rgb:var(--matter-primary-rgb,33,150,243);--matter-ontheme-rgb:var(--matter-onprimary-rgb,255,255,255)}.matter-secondary{--matter-theme-rgb:var(--matter-secondary-rgb,102,0,238);--matter-ontheme-rgb:var(--matter-onsecondary-rgb,255,255,255)}.matter-error{--matter-theme-rgb:var(--matter-error-rgb,238,0,0);--matter-ontheme-rgb:var(--matter-error-rgb,255,255,255)}.matter-warning{--matter-theme-rgb:var(--matter-warning-rgb,238,102,0);--matter-ontheme-rgb:var(--matter-onwarning-rgb,255,255,255)}.matter-success{--matter-theme-rgb:var(--matter-success-rgb,17,136,34);--matter-ontheme-rgb:var(--matter-onsuccess-rgb,255,255,255)}.matter-primary-text{color:rgb(var(--matter-primary-rgb,33,150,243))}.matter-secondary-text{color:rgb(var(--matter-secondary-rgb,102,0,238))}.matter-error-text{color:rgb(var(--matter-error-rgb,238,0,0))}.matter-warning-text{color:rgb(var(--matter-warning-rgb,238,102,0))}.matter-success-text{color:rgb(var(--matter-success-rgb,17,136,34))}.matter-h1{font-size:96px;letter-spacing:-1.5px;line-height:120px}.matter-h1,.matter-h2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:300}.matter-h2{font-size:60px;letter-spacing:-.5px;line-height:80px}.matter-h3{font-size:48px;letter-spacing:0;line-height:64px}.matter-h3,.matter-h4{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-h4{font-size:34px;letter-spacing:.25px;line-height:48px}.matter-h5{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:24px;font-weight:400;letter-spacing:0;line-height:36px}.matter-h6{font-size:20px;font-weight:500;line-height:28px}.matter-h6,.matter-subtitle1{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);letter-spacing:.15px}.matter-subtitle1{font-size:16px;font-weight:400;line-height:24px}.matter-subtitle2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:20px}.matter-body1{font-size:16px;letter-spacing:.5px;line-height:24px}.matter-body1,.matter-body2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-body2{letter-spacing:.25px}.matter-body2,.matter-button{font-size:14px;line-height:20px}.matter-button{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;letter-spacing:1.25px;text-transform:uppercase}.matter-caption{font-size:12px;letter-spacing:.4px;line-height:20px}.matter-caption,.matter-overline{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-overline{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:16px}
\ No newline at end of file
diff --git a/pages/register/index.html b/pages/register/index.html
new file mode 100644
index 0000000..f5396bd
--- /dev/null
+++ b/pages/register/index.html
@@ -0,0 +1,50 @@
+
+
+
+
+ END PLAY Photos API • Sign Up
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/register/script.js b/pages/register/script.js
new file mode 100644
index 0000000..a5b297a
--- /dev/null
+++ b/pages/register/script.js
@@ -0,0 +1,6 @@
+// JavaScript is used for toggling loading state
+var form = document.querySelector('form');
+form.onsubmit = function (event) {
+ event.preventDefault();
+ form.classList.add('signed');
+};
\ No newline at end of file
diff --git a/pages/register/style.css b/pages/register/style.css
new file mode 100644
index 0000000..bfe2210
--- /dev/null
+++ b/pages/register/style.css
@@ -0,0 +1,138 @@
+/* Material Customization */
+:root {
+ --pure-material-primary-rgb: 255, 191, 0;
+ --pure-material-onsurface-rgb: 0, 0, 0;
+}
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: url("https://res.cloudinary.com/finnhvman/image/upload/v1541930411/pattern.png");
+}
+
+.registration {
+ position: relative;
+ border-radius: 8px;
+ padding: 16px 48px;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+ overflow: hidden;
+ background-color: white;
+}
+
+h1 {
+ margin: 32px 0;
+ font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+ font-weight: normal;
+ text-align: center;
+}
+
+.registration > label {
+ display: block;
+ margin: 24px 0;
+ width: 320px;
+}
+
+a {
+ color: rgb(var(--pure-material-primary-rgb));
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+button {
+ display: block !important;
+ margin: 32px auto;
+}
+
+.done,
+.progress {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ visibility: hidden;
+}
+
+.done {
+ transition: visibility 0s 1s;
+}
+
+.signed > .done {
+ visibility: visible;
+}
+
+.done > a {
+ display: inline-block;
+ text-decoration: none;
+}
+
+.progress {
+ opacity: 0;
+}
+
+.signed > .progress {
+ animation: loading 4s;
+}
+
+@keyframes loading {
+ 0% {
+ visibility: visible;
+ }
+ 12.5% {
+ opacity: 0;
+ }
+ 25% {
+ opacity: 1;
+ }
+ 87.5% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+.left-footer,
+.right-footer {
+ position: fixed;
+ padding: 14px;
+ bottom: 14px;
+ color: #555;
+ background-color: #eee;
+ font-family: "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system;
+ font-size: 14px;
+ line-height: 1.5;
+ box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}
+
+.left-footer {
+ left: 0;
+ border-radius: 0 4px 4px 0;
+ text-align: left;
+}
+
+.right-footer {
+ right: 0;
+ border-radius: 4px 0 0 4px;
+ text-align: right;
+}
+
+.left-footer > a,
+.right-footer > a {
+ color: black;
+}
+
+.left-footer > a:hover,
+.right-footer > a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file