Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

forms updated

Browse Source
This commit is contained in:
Alexander Bocken 2023-07-22 15:04:18 +02:00
parent fbf33445d9
commit 9814207e0e
Signed by: Alexander
GPG Key ID: 1D237BE83F9B05E8
3 changed files with 62 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/css/form.css Normal file
View File

@ -0,0 +1,46 @@
form{
background-color: var(--nord5);
display: flex;
flex-direction: column;
max-width: 600px;
gap: 0.5em;
margin-inline: auto;
justify-content: center;
align-items: center;
padding-block: 2rem;
margin-block: 2rem;
}
label{
font-size: 1.2em;
}
input{
display: block;
font-size: 1.2rem;
}
button{
background-color: var(--red);
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1.3em;
border-radius: 1000px;
margin-top: 1em;
transition: 100ms;
}
button:hover,
button:focus-visible
{
scale: 1.1;
}
p{
max-width: 400px;
margin-top: 0;
}
h4{
margin-bottom:0;
}
@media screen and (max-width: 600px){
form{
margin-top: 0;
}
}

46
src/routes/(main)/login/+page.svelte
View File

@ -1,49 +1,17 @@
<style> <script>
form{ import "$lib/css/form.css"
background-color: var(--nord5); </script>
display: flex;
flex-direction: column;
max-width: 600px;
gap: 0.5em;
margin-inline: auto;
justify-content: center;
align-items: center;
padding-block: 2rem;
margin-block: 2rem;
}
label{
font-size: 1.2em;
}
input{
display: block;
font-size: 1.2rem;
}
button{
background-color: var(--red);
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1.3em;
border-radius: 1000px;
margin-top: 1em;
}
@media screen and (max-width: 600px){
form{
margin-top: 0;
}
}
</style>
<form action="?/login" method=POST> <form action="?/login" method=POST>
<h1>Log In</h1> <h1>Log In</h1>
<label> <label>
Username Benutzername
<input type="text" name="username"> <input type="text" name="username" required>
</label> </label>
<label> <label>
Passwort Passwort
<input name="password" type="password"> <input name="password" type="password" required>
</label> </label>
<button type="submit">Log In</button> <button type="submit">Log In</button>
<p>Noch keinen Account? <a href=/register>Hier registrieren</a>.</p>
</form> </form>

49
src/routes/(main)/register/+page.svelte
View File

@ -1,49 +1,18 @@
<style> <script>
form{ import "$lib/css/form.css"
background-color: var(--nord5); </script>
display: flex;
flex-direction: column;
max-width: 600px;
gap: 0.5em;
margin-inline: auto;
justify-content: center;
align-items: center;
padding-block: 2rem;
margin-block: 2rem;
}
label{
font-size: 1.2em;
}
input{
display: block;
font-size: 1.2rem;
}
button{
background-color: var(--red);
color: white;
border: none;
padding: 0.5em 1em;
font-size: 1.3em;
border-radius: 1000px;
margin-top: 1em;
}
@media screen and (max-width: 600px){
form{
margin-top: 0;
}
}
</style>
<form action="?/register" method=POST> <form action="?/register" method=POST>
<h1>Register</h1> <h1>Regrieren</h1>
<label> <label>
Username Username
<input type="text" name="username"> <input type="text" name="username" required>
</label> </label>
<label> <label>
Passwort Passwort
<input name="password" type="password"> <input name="password" type="password" required>
</label> </label>
<button type="submit">Register</button> <button type="submit">Registrieren</button>
<h4>Hinweis:</h4>
<p>Dein Account wird keine Rechte haben bis ein Administrator dir welche gibt. Bis dahin ist der Account relativ nutzlos.</p>
</form> </form>