profitroll/PhotosAPI
profitroll/PhotosAPI
1
0
Fork 0
Code Issues 4 Pull Requests Releases 7 Wiki Activity

Working on pages

Browse Source
This commit is contained in:
Profitroll 2023-01-12 16:21:33 +01:00
parent 29ef2cfe2b
commit 7a477876e0
3 changed files with 67 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages/register/index.html
View File

@ -9,21 +9,23 @@
<body> <body>
<!-- partial:index.partial.html --> <!-- partial:index.partial.html -->
<form class="registration" method="post"> <iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
<form class="registration" method="post" action="/users" enctype="application/x-www-form-urlencoded" target="hiddenFrame">
<h1>👋 Welcome!</h1> <h1>👋 Welcome!</h1>
<label class="matter-textfield-outlined"> <label class="matter-textfield-outlined">
<input placeholder=" " type="text" alt="You won't be able to change it later!" required> <input placeholder=" " type="text" alt="You won't be able to change it later!" id="user" name="user" required>
<span>Username</span> <span>Username</span>
</label> </label>
<label class="matter-textfield-outlined"> <label class="matter-textfield-outlined">
<input placeholder=" " type="email" required> <input placeholder=" " type="email" id="email" name="email" required>
<span>Email</span> <span>Email</span>
</label> </label>
<label class="matter-textfield-outlined"> <label class="matter-textfield-outlined">
<input placeholder=" " type="password" required> <input placeholder=" " type="password" id="password" name="password" required>
<span>Password</span> <span>Password</span>
</label> </label>
@ -32,11 +34,14 @@
<span>I agree to the <a href="https://codepen.io/collection/nZKBZe/" target="_blank" title="Actually not a Terms of Service">Terms of Service</a></span> <span>I agree to the <a href="https://codepen.io/collection/nZKBZe/" target="_blank" title="Actually not a Terms of Service">Terms of Service</a></span>
</label> </label>
<button class="matter-button-contained" type="submit">Sign Up</button> <center><a class="matter-button-contained" href="https://photos.end-play.xyz/register" type="submit" value="Submit">Sign Up</a></center>
<!-- <button class="matter-button-contained" type="submit" value="Submit">Sign Up</button> -->
<div class="done"> <div class="done">
<h1>👌 You're all set!</h1> <h1>👌 You're all set!</h1>
<a class="matter-button-text" href="javascript:window.location.reload(true)">Again</a> <p>You should now receive an email with activation link.</p>
<p>Activate your account and proceed to docs if you'd like to learn how to use API now.</p>
<a class="matter-button-text" href="/docs">Docs</a>
</div> </div>
<div class="progress"> <div class="progress">
<progress class="matter-progress-circular" /> <progress class="matter-progress-circular" />

1
pages/register/script.js
View File

@ -3,4 +3,5 @@ var form = document.querySelector('form');
form.onsubmit = function (event) { form.onsubmit = function (event) {
event.preventDefault(); event.preventDefault();
form.classList.add('signed'); form.classList.add('signed');
form.submit();
}; };

56
pages/register/style.css
View File

@ -61,6 +61,9 @@ button {
justify-content: center; justify-content: center;
background-color: white; background-color: white;
visibility: hidden; visibility: hidden;
padding-left: 40px;
padding-right: 40px;
text-align: center;
} }
.done { .done {
@ -81,7 +84,7 @@ button {
} }
.signed > .progress { .signed > .progress {
animation: loading 4s; animation: loading 3s;
} }
@keyframes loading { @keyframes loading {
@ -135,4 +138,55 @@ button {
.left-footer > a:hover, .left-footer > a:hover,
.right-footer > a:hover { .right-footer > a:hover {
text-decoration: underline; text-decoration: underline;
}
@media only screen and (max-width: 980px) {
.registration {
width: 90%;
height: auto;
position: fixed;
border-radius: none;
padding: auto;
box-shadow: none;
overflow: visible;
}
body {
background: none;
min-height: 85vh;
}
p {
font-size: 36px;
}
.registration h1 {
font-size: 64px;
}
.matter-button-contained {
padding-top: 0.5em;
padding-bottom: 1.3em;
padding-left: 0.65em;
padding-right: 0.65em;
border-radius: 7px;
}
.matter-button-text {
padding-top: 0.4em;
padding-bottom: 1.3em;
padding-left: 0.65em;
padding-right: 0.65em;
border-radius: 7px;
}
a.matter-button-contained {
font-size: 3.2em;
}
a.matter-button-text {
font-size: 2.6em;
}
} }