Skylar Ittner
875457953f
Add QC shifts, add proper icon, check for app permissions, adjust styles, fix UI bugs, prepare login UI for quick access mode
87 lines
4.7 KiB
HTML
87 lines
4.7 KiB
HTML
<div class="container" style="height: 100%;">
|
|
<div class="row justify-content-center align-items-center" style="height: 100%;">
|
|
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
|
|
<div class="card" style="width: 100%;">
|
|
<h3 class="card-header"><i class="fas fa-lock"></i> Login</h3>
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#userlist">Quick Access</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-toggle="tab" href="#userpass">Username/Password</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-toggle="tab" href="#mobilecode">Mobile Code</a>
|
|
</li>
|
|
</ul>
|
|
<div class="card-body">
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade" id="userlist">
|
|
<div class="row justify-content-around">
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Caroline Herschel
|
|
</div>
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Edmond Halley
|
|
</div>
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Jocelyn Bell Burnell
|
|
</div>
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Max Born
|
|
</div>
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Patty Jo Watson
|
|
</div>
|
|
<div class="col-4 col-lg-3 quick-user">
|
|
<i class="far fa-user fa-3x"></i>
|
|
<br />
|
|
Sarah Boysen
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade active show" id="userpass">
|
|
<div id="userpass_form">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="far fa-user"></i></span>
|
|
<input type="text" class="form-control" id="username" placeholder="Username" />
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fas fa-key"></i></span>
|
|
<input type="password" class="form-control" id="password" placeholder="Password" />
|
|
</div>
|
|
<br />
|
|
<button class="btn btn-primary" id="userpassloginbtn">Log In</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="mobilecode">
|
|
<div class="alert alert-info">Open the Business app on your phone, <br />then press the <i class="fas fa-lock"></i> button to get a code.</div>
|
|
<div id="mobilecode_form">
|
|
<div class="input-group input-group-lg">
|
|
<span class="input-group-addon">B-</span>
|
|
<input type="text" class="form-control" id="code" placeholder="123456" />
|
|
</div>
|
|
<br />
|
|
<button class="btn btn-primary" id="mobilecodeloginbtn">Log In</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="userlist">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/login.js"></script> |