Aelita4
/
AstroCol
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

(tmp) Prettify login and register forms

This commit is contained in:
Aelita4 2024-12-13 17:16:16 +01:00
parent 12f022150c
commit f6a27eec59
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 90 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/login.astro
View File

@ -80,10 +80,48 @@ if(Astro.request.method === "POST") {
<Layout title="Login"> <Layout title="Login">
<NavBar loggedIn="false" active="login" /> <NavBar loggedIn="false" active="login" />
<form method="POST"> <form method="POST" class="login-form">
<input type="text" name="username" placeholder="username" /><br /> <input class="login-input" type="text" name="username" placeholder="username" /><br />
<input type="password" name="password" placeholder="password" /><br /> <input class="login-input" type="password" name="password" placeholder="password" /><br />
<input type="submit" value="login" /> <input class="login-submit" type="submit" value="login" />
{ error !== "" ? <p style="color: red;">{error}</p> : "" } <p style="color: red;">{error}</p>
</form> </form>
</Layout> </Layout>
<style>
.login-form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
background: linear-gradient(
to bottom right,
red,
blue
);
padding: 30px;
text-align: center;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.login-input {
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
padding: 10px;
}
.login-submit {
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>

53
src/pages/register.astro
View File

@ -103,15 +103,52 @@ if(Astro.request.method === "POST") {
} }
} }
--- ---
<Layout title="Register"> <Layout title="Register">
<NavBar loggedIn="false" active="register" /> <NavBar loggedIn="false" active="register" />
<form method="POST"> <form method="POST" class="register-form">
<input type="text" name="username" placeholder="username" /><br /> <input class="register-input" type="text" name="username" placeholder="username" /><br />
<input type="email" name="email" placeholder="email" /><br /> <input class="register-input" type="email" name="email" placeholder="email" /><br />
<input type="password" name="password" placeholder="password" /><br /> <input class="register-input" type="password" name="password" placeholder="password" /><br />
<input type="password" name="password2" placeholder="password2" /><br /> <input class="register-input" type="password" name="password2" placeholder="password2" /><br />
<input type="submit" value="register" /> <input class="register-submit" type="submit" value="register" />
{ error !== "" ? <p style="color: red;">{error}</p> : "" } <p style="color: red;">{error}</p>
</form> </form>
</Layout> </Layout>
<style>
.register-form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
background: linear-gradient(
to bottom right,
blue,
red
);
padding: 30px;
text-align: center;
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.register-input {
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
padding: 10px;
}
.register-submit {
margin: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
</style>