diff --git a/static/CSS/loginstyle.css b/static/CSS/loginstyle.css new file mode 100644 index 0000000000000000000000000000000000000000..9bc8eac8b095916148d36dd41afcb9869d2add21 --- /dev/null +++ b/static/CSS/loginstyle.css @@ -0,0 +1,25 @@ +header{ + background-color: black; + display: block; + color: black; + margin-left: auto; + margin-right: inherit; + width: 100%; + height: 75%; +} + +.card{ + margin: 0 auto; + float: none; + margin-bottom: 10px; +} + +#logo{ + width: 10%; +} + +body{ + font-family: 'Sora', sans-serif; + background-color: #212529; + color: white; +} \ No newline at end of file diff --git a/static/login.html b/static/login.html new file mode 100644 index 0000000000000000000000000000000000000000..4d10ccba95340026d3ae59cbf6538c1e38ccdda1 --- /dev/null +++ b/static/login.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<header class="masthead bg-dark text-white text-center"> + <div class="container-fluid"> + <img id="logo" src="Media/logo.png"/> + <h1 id="header">Tramshed Tech</h1> + </div> + </header> +<body> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> + <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap" rel="stylesheet"> + <link rel="stylesheet" href="CSS/loginstyle.css"> + <title>Login</title> + <div id="card" class="card text-dark w-25 text-center"> + <div class="card-body text-center"> + + + <form> + <!-- Email input --> + <div class="form-outline mb-4"> + <input type="email" id="form2Example1" class="form-control" /> + <label class="form-label" for="form2Example1">Email address</label> + </div> + + <!-- Password input --> + <div class="form-outline mb-4"> + <input type="password" id="form2Example2" class="form-control" /> + <label class="form-label" for="form2Example2">Password</label> + </div> + + <!-- 2 column grid layout for inline styling --> + <div class="row mb-4"> + <div class="col d-flex justify-content-center"> + <!-- Checkbox --> + <div class="form-check"> + <input class="form-check-input" type="checkbox" value="" id="form2Example31" checked /> + <label class="form-check-label" for="form2Example31"> Remember me </label> + </div> + </div> + + <div class="col"> + <!-- Simple link --> + <a href="#!">Forgot password?</a> + </div> + + <!-- Submit button --> + <button onclick="window.location.href='landingpage.html';" type="button" class="btn btn-light"> + <span class="spinner-grow spinner-grow-sm"></span> + Sign in + </button> + <!-- Register buttons --> + <div class="text-center"> + <p>Not a member? <a href="#!">Register</a></p> + </form> + </body> +</html> \ No newline at end of file