Kyoo/Kyoo.WebLogin/index.html
2021-04-23 22:35:32 +02:00

91 lines
4.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kyoo - Login</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="login.css" />
<link rel="stylesheet" type="text/css" href="material-icons.css" />
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
</head>
<body style="height: 100vh; align-items: center;" class="d-flex">
<div class="container pb-5">
<div class="card bg-dark mb-5">
<div class="card-header bg-secondary text-white">
<ul class="nav nav-tabs card-header-tabs navbar-dark" role="tablist" id="tabs">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-selected="true">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#register" role="tab" aria-selected="false">Register</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<div class="alert alert-danger" role="alert" id="login-error" style="display: none;"></div>
<form>
<div class="form-group">
<label for="login-username">Username</label>
<input autocomplete="username" class="form-control" id="login-username">
</div>
<div class="form-group">
<label for="login-password">Password</label>
<div class="input-group">
<input autocomplete="current-password" type="password" class="form-control" id="login-password">
<div class="input-group-append password-visibility">
<a class="input-group-text" href="#"><i class="material-icons">visibility</i></a>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="remember-me">
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
<button id="login-btn" type="submit" class="btn" style="background-color: #e23c00;">Login</button>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<div class="alert alert-danger" role="alert" id="register-error" style="display: none;"></div>
<form>
<div class="form-group">
<label for="register-email">Email</label>
<input type="email" class="form-control" id="register-email">
</div>
<div class="form-group">
<label for="register-username">Username</label>
<input autocomplete="username" class="form-control" id="register-username">
</div>
<div class="form-group">
<label for="register-password">Password</label>
<div class="input-group">
<input autocomplete="new-password" type="password" class="form-control" id="register-password">
<div class="input-group-append password-visibility">
<a class="input-group-text" href="#"><i class="material-icons">visibility</i></a>
</div>
</div>
</div>
<div class="form-group">
<label for="register-password-confirm">Confirm Password</label>
<div class="input-group">
<input autocomplete="new-password" type="password" class="form-control" id="register-password-confirm">
<div class="input-group-append password-visibility">
<a class="input-group-text" href="#"><i class="material-icons">visibility</i></a>
</div>
</div>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="stay-logged-in">
<label class="form-check-label" for="stay-logged-in">Stay logged in</label>
</div>
<button id="register-btn" type="submit" class="btn" style="background-color: #e23c00;">Register</button>
</form>
</div>
</div>
</div>
</div>
<script src="login.js"></script>
</body>
</html>