Login form work in progress 1

2024-06-10 11:13:47 +02:00
2 changed files with 85 additions and 0 deletions
--- a/static/login.html
+++ b/static/login.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta lang="en" charset="UTF-8">
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+        <div class="container">
+			<h1>Login</h1>
+		<form action="" method="POST">
+			<input type="text" placeholder="username/email" class="field">
+			<input type="password" placeholder="password" class="field">
+			<input type="submit" value="login" class="btn">
+		</form>
+		<div class="pass-link">
+			<a href="#" >Lost your password?</a>
+		</div>	
+	</div>
+    </body>
+</html>
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,65 @@
+*{
+    box-sizing: border-box;
+}
+body{
+    background-color: black;
+    font-family: "Arial", sans-serif;
+    padding: 50px;
+}
+.container{
+    margin: 20px auto;
+    padding: 10px;
+    width: 300px;
+    height: 300px;
+    background-color: #fff;
+    border-radius: 5px;
+    border: 2px solid gray;
+}
+ h1{
+     width: 70%;
+    color: #777;
+    font-size: 32px;
+    margin: 28px auto;
+    margin-bottom: 20px;
+    text-align: center;
+    /*padding-top: 40px;*/
+}
+form{
+    /*padding: 15px;*/
+    text-align: center;
+}
+input{
+    padding: 12px 0;
+    margin-bottom: 10px;
+    border-radius: 3px;
+    border: 2px solid transparent;
+    text-align: center;
+    width: 90%;
+    font-size: 16px;
+    transition: border .2s, background-color .2s;
+}
+form .field{
+    background-color: #ECF0F1;
+}
+form .field:focus {
+    border: 2px solid #3498DB;
+}
+form .btn{
+    background-color: #3498DB;
+    color: #fff;
+    line-height: 25px;
+    cursor: pointer;
+}
+form .btn:hover,
+form .btn:active {
+    background-color: #1F78B4;
+    border: 2px solid #1F78B4;
+}
+.pass-link{
+    text-align: center;
+}
+.pass-link a:link,
+.pass-link a:visited{
+    font-size: 12px;
+    color: #777;
+}