mirror of
https://github.com/aaronleetw/Attendance.git
synced 2024-11-14 11:01:39 -08:00
Change UI
This commit is contained in:
parent
05332bb768
commit
a3b88dba8d
8 changed files with 151 additions and 37 deletions
|
|
@ -5,6 +5,11 @@ body {
|
|||
font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", "sans-serif";
|
||||
}
|
||||
|
||||
select option {
|
||||
font-family: "Font Awesome 5 Free", "Lato", "Noto Sans TC", "Microsoft JhengHei", "sans-serif";
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
div.col .row .col {
|
||||
border: 1px solid black;
|
||||
display: inline-block;
|
||||
|
|
@ -149,4 +154,24 @@ div.showTime {
|
|||
color: rgb(160, 160, 160);
|
||||
font-size: 0.7524em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text, .input-group-append .input-group-text {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.toggle-password {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-group.hasSmall {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#chgPasswordForm .form-group {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
margin-bottom: 30px !important;
|
||||
}
|
||||
</style>
|
||||
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
|
||||
</head>
|
||||
|
||||
|
|
@ -34,28 +35,39 @@
|
|||
<div class="row">
|
||||
<div class="col"></div>
|
||||
<div class="col-md-5">
|
||||
<form action="/chgPassword" id="loginForm" method="post">
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="password" style="font-size: 19px">Old Password 舊密碼:
|
||||
</label>
|
||||
<form action="/chgPassword" id="chgPasswordForm" method="post">
|
||||
<div class="form-group row">
|
||||
<label for="password">Old Password 舊密碼:</label><br>
|
||||
<div class="input-group mb-3">
|
||||
<input type="password" class="form-control" id="password" name="password" required>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text toggle-password" onclick="password_show_hide(1);">
|
||||
<i class="fas fa-eye" id="old_show_eye"></i>
|
||||
<i class="fas fa-eye-slash d-none" id="old_hide_eye"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="password" class="form-control" name="password"
|
||||
id="password" required></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="password" style="font-size: 19px">New Username 新帳號:
|
||||
</label>
|
||||
<div class="form-group row">
|
||||
<label for="password">New Username 新帳號:</label><br>
|
||||
<div class="input-group mb-3">
|
||||
<input type="email" class="form-control" id="new_username" name="new_username" required>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="email" class="form-control" name="new_username"
|
||||
id="new_username" required></div>
|
||||
</div>
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼:
|
||||
</label>
|
||||
<div class="form-group row">
|
||||
<label for="new_password">New Password 新密碼:</label><br>
|
||||
<div class="input-group mb-3 hasSmall">
|
||||
<input type="password" class="form-control" id="new_password" name="new_password"
|
||||
aria-describedby="passwordHelp" required>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text toggle-password" onclick="password_show_hide(2);">
|
||||
<i class="fas fa-eye" id="new_show_eye"></i>
|
||||
<i class="fas fa-eye-slash d-none" id="new_hide_eye"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="password" class="form-control" name="new_password"
|
||||
id="new_password" required></div>
|
||||
<small id="passwordHelp" class="form-text text-muted">6 characters
|
||||
minimum.</small>
|
||||
</div>
|
||||
<button class="btn btn-danger btn-block g-recaptcha" onclick="loadingAnimation()">Change Password
|
||||
更改密碼</button>
|
||||
|
|
@ -97,6 +109,34 @@
|
|||
$('.container').hide();
|
||||
$('#loading').show();
|
||||
}
|
||||
}
|
||||
|
||||
function password_show_hide(num) {
|
||||
var x = '';
|
||||
var show_eye = '';
|
||||
var hide_eye = '';
|
||||
if (num == 1) {
|
||||
x = document.getElementById("password");
|
||||
show_eye = document.getElementById("old_show_eye");
|
||||
hide_eye = document.getElementById("old_hide_eye");
|
||||
}
|
||||
else {
|
||||
x = document.getElementById("new_password");
|
||||
show_eye = document.getElementById("new_show_eye");
|
||||
hide_eye = document.getElementById("new_hide_eye");
|
||||
}
|
||||
hide_eye.classList.remove("d-none");
|
||||
if (x.type === "password") {
|
||||
x.type = "text";
|
||||
show_eye.style.display = "none";
|
||||
hide_eye.style.display = "block";
|
||||
} else {
|
||||
x.type = "password";
|
||||
show_eye.style.display = "block";
|
||||
hide_eye.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<script src="/static/time.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
gtag('config', 'G-H6D61RSBHR');
|
||||
</script>
|
||||
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
|
||||
</head>
|
||||
|
||||
|
|
@ -30,11 +31,11 @@
|
|||
<div class="col"></div>
|
||||
<div class="col-md-5">
|
||||
<form action="/forgotPassword" id="forgotPassword_sel" method="post">
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="text" class="form-control" name="username"
|
||||
id="username"></div>
|
||||
<input type="text" class="form-control" name="username" id="username" placeholder="Username">
|
||||
</div>
|
||||
<button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
|
||||
確認</button>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<h2 class="margin-top">{{cclass['category']}}: {{cclass['class_id']}}: {{cclass['name']}}</h2>
|
||||
<h2>[{{currDate}}]</h2>
|
||||
<a href="/logout"><button class="btn btn-primary margin-top logout">Logout 登出</button></a>
|
||||
<a href="/select"><button class="btn btn-primary margin-top logout">選擇其他帳號 Choose Subuser</button></a>
|
||||
<a href="/select"><button class="btn btn-primary margin-top logout">Choose Subuser 選擇其他帳號</button></a>
|
||||
<form action="/manage/date" id="dateSelForm" method="post">
|
||||
<select name="date" id="date" class="form-select logout" onchange="chgDate(this);">
|
||||
{% for date in tmpAbsData %}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<h2 class="margin-top">{{homeroomCode[0]}}{{homeroomCode[1]}}</h2>
|
||||
<h2>[{{currDate}}]</h2>
|
||||
<a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a>
|
||||
<a href="/select"><button class="btn btn-primary margin-top logout">選擇其他帳號 Choose Subuser</button></a>
|
||||
<a href="/select"><button class="btn btn-primary margin-top logout">Choose Subuser 選擇其他帳號</button></a>
|
||||
<form action="/manage/date" id="dateSelForm" method="post">
|
||||
<select name="date" id="date" class="form-select logout" onchange="chgDate();">
|
||||
{% for date in absData %}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
gtag('config', 'G-H6D61RSBHR');
|
||||
</script>
|
||||
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
|
||||
</head>
|
||||
|
||||
|
|
@ -30,17 +31,24 @@
|
|||
<div class="col"></div>
|
||||
<div class="col-md-5">
|
||||
<form action="/" id="loginForm" method="post">
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-user"></i></span>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="text" class="form-control" name="username"
|
||||
id="username"></div>
|
||||
<input type="text" class="form-control" name="username" id="username" placeholder="Username">
|
||||
</div>
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="password" style="font-size: 19px">Password 密碼: </label>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text"><i class="fa fa-lock"></i></span>
|
||||
</div>
|
||||
<input type="password" class="form-control" name="password" id="password"
|
||||
placeholder="Password">
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text toggle-password" onclick="password_show_hide();">
|
||||
<i class="fas fa-eye" id="show_eye"></i>
|
||||
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="password" class="form-control" name="password"
|
||||
id="password"></div>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-block g-recaptcha" onclick="loadingAnimation()">Login
|
||||
登入</button>
|
||||
|
|
@ -75,6 +83,21 @@
|
|||
$('.container').hide();
|
||||
$('#loading').show();
|
||||
}
|
||||
function password_show_hide() {
|
||||
var x = document.getElementById("password");
|
||||
var show_eye = document.getElementById("show_eye");
|
||||
var hide_eye = document.getElementById("hide_eye");
|
||||
hide_eye.classList.remove("d-none");
|
||||
if (x.type === "password") {
|
||||
x.type = "text";
|
||||
show_eye.style.display = "none";
|
||||
hide_eye.style.display = "block";
|
||||
} else {
|
||||
x.type = "password";
|
||||
show_eye.style.display = "block";
|
||||
hide_eye.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/static/time.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -31,11 +31,12 @@
|
|||
<a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a>
|
||||
<form action="/select" id="subuser_form_sel" method="post">
|
||||
<select name="subuser_sel" id="subuser_sel" class="form-select logout" onchange="loadingAnimation();"
|
||||
required>
|
||||
required multiple>
|
||||
<option value="" selected>Please select</option>
|
||||
{% for key in data %}
|
||||
{% if data[key]['type'] == 'homeroom' %}
|
||||
<option value="homeroom^{{data[key]['homeroom']}}">Homeroom: {{data[key]['homeroom']}}</option>
|
||||
<option value="homeroom^{{data[key]['homeroom']}}">HR: {{data[key]['homeroom']}}
|
||||
</option>
|
||||
{% else %}
|
||||
{% for i in data[key] %}
|
||||
{% if i == 'type' %}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
gtag('config', 'G-H6D61RSBHR');
|
||||
</script>
|
||||
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
|
||||
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
|
||||
</head>
|
||||
|
||||
|
|
@ -31,11 +32,19 @@
|
|||
<div class="col-md-5">
|
||||
<form action="/resetPassword" id="password_form" method="post">
|
||||
<div class="form-group row" style="margin-bottom: 10px;">
|
||||
<div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼:
|
||||
</label>
|
||||
<label for="password">New Password 新密碼:</label><br>
|
||||
<div class="input-group mb-3 hasSmall">
|
||||
<input type="password" class="form-control" id="password" name="password"
|
||||
aria-describedby="passwordHelp" required>
|
||||
<div class="input-group-append">
|
||||
<span class="input-group-text toggle-password" onclick="password_show_hide();">
|
||||
<i class="fas fa-eye" id="show_eye"></i>
|
||||
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-9 center-input"><input type="password" class="form-control" name="password"
|
||||
id="password"></div>
|
||||
<small id="passwordHelp" class="form-text text-muted">6 characters
|
||||
minimum.</small>
|
||||
</div>
|
||||
<button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
|
||||
確認</button>
|
||||
|
|
@ -64,6 +73,21 @@
|
|||
$('.container').hide();
|
||||
$('#loading').show();
|
||||
}
|
||||
function password_show_hide() {
|
||||
var x = document.getElementById("password");
|
||||
var show_eye = document.getElementById("show_eye");
|
||||
var hide_eye = document.getElementById("hide_eye");
|
||||
hide_eye.classList.remove("d-none");
|
||||
if (x.type === "password") {
|
||||
x.type = "text";
|
||||
show_eye.style.display = "none";
|
||||
hide_eye.style.display = "block";
|
||||
} else {
|
||||
x.type = "password";
|
||||
show_eye.style.display = "block";
|
||||
hide_eye.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/static/time.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue