aaronleetw/Attendance
1
0
Fork 0
mirror of https://github.com/aaronleetw/Attendance.git synced 2024-11-14 19:11:39 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change UI

Browse source
This commit is contained in:
Aaron Lee 2021-10-03 22:33:53 +08:00
parent 05332bb768
commit a3b88dba8d
8 changed files with 151 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
static/allpages.css
View file

@ -5,6 +5,11 @@ body {
font-family: "Lato", "Noto Sans TC", "Microsoft JhengHei", "sans-serif"; 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 { div.col .row .col {
border: 1px solid black; border: 1px solid black;
display: inline-block; display: inline-block;
@ -149,4 +154,24 @@ div.showTime {
color: rgb(160, 160, 160); color: rgb(160, 160, 160);
font-size: 0.7524em; font-size: 0.7524em;
margin-bottom: 20px; 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;
} }

74
templates/chgPassword.html
View file

@ -24,6 +24,7 @@
margin-bottom: 30px !important; margin-bottom: 30px !important;
} }
</style> </style>
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> --> <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
</head> </head>
@ -34,28 +35,39 @@
<div class="row"> <div class="row">
<div class="col"></div> <div class="col"></div>
<div class="col-md-5"> <div class="col-md-5">
<form action="/chgPassword" id="loginForm" method="post"> <form action="/chgPassword" id="chgPasswordForm" method="post">
<div class="form-group row" style="margin-bottom: 10px;"> <div class="form-group row">
<div class="col-3 center"><label for="password" style="font-size: 19px">Old Password 舊密碼: <label for="password">Old Password 舊密碼:</label><br>
</label> <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>
<div class="col-9 center-input"><input type="password" class="form-control" name="password"
id="password" required></div>
</div> </div>
<div class="form-group row">
<div class="form-group row" style="margin-bottom: 10px;"> <label for="password">New Username 新帳號:</label><br>
<div class="col-3 center"><label for="password" style="font-size: 19px">New Username 新帳號: <div class="input-group mb-3">
</label> <input type="email" class="form-control" id="new_username" name="new_username" required>
</div> </div>
<div class="col-9 center-input"><input type="email" class="form-control" name="new_username"
id="new_username" required></div>
</div> </div>
<div class="form-group row" style="margin-bottom: 10px;"> <div class="form-group row">
<div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼: <label for="new_password">New Password 新密碼:</label><br>
</label> <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>
<div class="col-9 center-input"><input type="password" class="form-control" name="new_password" <small id="passwordHelp" class="form-text text-muted">6 characters
id="new_password" required></div> minimum.</small>
</div> </div>
<button class="btn btn-danger btn-block g-recaptcha" onclick="loadingAnimation()">Change Password <button class="btn btn-danger btn-block g-recaptcha" onclick="loadingAnimation()">Change Password
更改密碼</button> 更改密碼</button>
@ -97,6 +109,34 @@
$('.container').hide(); $('.container').hide();
$('#loading').show(); $('#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>
<script src="/static/time.js"></script> <script src="/static/time.js"></script>
</body> </body>

9
templates/forgotPassword.html
View file

@ -19,6 +19,7 @@
gtag('config', 'G-H6D61RSBHR'); gtag('config', 'G-H6D61RSBHR');
</script> </script>
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> --> <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
</head> </head>
@ -30,11 +31,11 @@
<div class="col"></div> <div class="col"></div>
<div class="col-md-5"> <div class="col-md-5">
<form action="/forgotPassword" id="forgotPassword_sel" method="post"> <form action="/forgotPassword" id="forgotPassword_sel" method="post">
<div class="form-group row" style="margin-bottom: 10px;"> <div class="input-group mb-3">
<div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div> </div>
<div class="col-9 center-input"><input type="text" class="form-control" name="username" <input type="text" class="form-control" name="username" id="username" placeholder="Username">
id="username"></div>
</div> </div>
<button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm <button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
確認</button> 確認</button>

2
templates/group_teach.html
View file

@ -29,7 +29,7 @@
<h2 class="margin-top">{{cclass['category']}}: {{cclass['class_id']}}: {{cclass['name']}}</h2> <h2 class="margin-top">{{cclass['category']}}: {{cclass['class_id']}}: {{cclass['name']}}</h2>
<h2>[{{currDate}}]</h2> <h2>[{{currDate}}]</h2>
<a href="/logout"><button class="btn btn-primary margin-top logout">Logout 登出</button></a> <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"> <form action="/manage/date" id="dateSelForm" method="post">
<select name="date" id="date" class="form-select logout" onchange="chgDate(this);"> <select name="date" id="date" class="form-select logout" onchange="chgDate(this);">
{% for date in tmpAbsData %} {% for date in tmpAbsData %}

2
templates/homeroom.html
View file

@ -30,7 +30,7 @@
<h2 class="margin-top">{{homeroomCode[0]}}{{homeroomCode[1]}}</h2> <h2 class="margin-top">{{homeroomCode[0]}}{{homeroomCode[1]}}</h2>
<h2>[{{currDate}}]</h2> <h2>[{{currDate}}]</h2>
<a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a> <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"> <form action="/manage/date" id="dateSelForm" method="post">
<select name="date" id="date" class="form-select logout" onchange="chgDate();"> <select name="date" id="date" class="form-select logout" onchange="chgDate();">
{% for date in absData %} {% for date in absData %}

39
templates/login.html
View file

@ -19,6 +19,7 @@
gtag('config', 'G-H6D61RSBHR'); gtag('config', 'G-H6D61RSBHR');
</script> </script>
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> --> <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
</head> </head>
@ -30,17 +31,24 @@
<div class="col"></div> <div class="col"></div>
<div class="col-md-5"> <div class="col-md-5">
<form action="/" id="loginForm" method="post"> <form action="/" id="loginForm" method="post">
<div class="form-group row" style="margin-bottom: 10px;"> <div class="input-group mb-3">
<div class="col-3 center"><label for="username" style="font-size: 19px">Username 帳號: </label> <div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-user"></i></span>
</div> </div>
<div class="col-9 center-input"><input type="text" class="form-control" name="username" <input type="text" class="form-control" name="username" id="username" placeholder="Username">
id="username"></div>
</div> </div>
<div class="form-group row" style="margin-bottom: 10px;"> <div class="input-group mb-3">
<div class="col-3 center"><label for="password" style="font-size: 19px">Password 密碼: </label> <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>
<div class="col-9 center-input"><input type="password" class="form-control" name="password"
id="password"></div>
</div> </div>
<button class="btn btn-primary btn-block g-recaptcha" onclick="loadingAnimation()">Login <button class="btn btn-primary btn-block g-recaptcha" onclick="loadingAnimation()">Login
登入</button> 登入</button>
@ -75,6 +83,21 @@
$('.container').hide(); $('.container').hide();
$('#loading').show(); $('#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>
<script src="/static/time.js"></script> <script src="/static/time.js"></script>
</body> </body>

5
templates/selSubUser.html
View file

@ -31,11 +31,12 @@
<a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a> <a href="/logout"><button class="btn btn-primary logout margin-top">Logout 登出</button></a>
<form action="/select" id="subuser_form_sel" method="post"> <form action="/select" id="subuser_form_sel" method="post">
<select name="subuser_sel" id="subuser_sel" class="form-select logout" onchange="loadingAnimation();" <select name="subuser_sel" id="subuser_sel" class="form-select logout" onchange="loadingAnimation();"
required> required multiple>
<option value="" selected>Please select</option> <option value="" selected>Please select</option>
{% for key in data %} {% for key in data %}
{% if data[key]['type'] == 'homeroom' %} {% 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 %} {% else %}
{% for i in data[key] %} {% for i in data[key] %}
{% if i == 'type' %} {% if i == 'type' %}

32
templates/verifiedChgPassword.html
View file

@ -19,6 +19,7 @@
gtag('config', 'G-H6D61RSBHR'); gtag('config', 'G-H6D61RSBHR');
</script> </script>
<script src="https://kit.fontawesome.com/52a3d6c810.js" crossorigin="anonymous"></script>
<!-- <script src="https://www.google.com/recaptcha/api.js"></script> --> <!-- <script src="https://www.google.com/recaptcha/api.js"></script> -->
</head> </head>
@ -31,11 +32,19 @@
<div class="col-md-5"> <div class="col-md-5">
<form action="/resetPassword" id="password_form" method="post"> <form action="/resetPassword" id="password_form" method="post">
<div class="form-group row" style="margin-bottom: 10px;"> <div class="form-group row" style="margin-bottom: 10px;">
<div class="col-3 center"><label for="password" style="font-size: 19px">New Password 新密碼: <label for="password">New Password 新密碼:</label><br>
</label> <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>
<div class="col-9 center-input"><input type="password" class="form-control" name="password" <small id="passwordHelp" class="form-text text-muted">6 characters
id="password"></div> minimum.</small>
</div> </div>
<button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm <button class="btn btn-warning btn-block g-recaptcha" onclick="loadingAnimation()">Confirm
確認</button> 確認</button>
@ -64,6 +73,21 @@
$('.container').hide(); $('.container').hide();
$('#loading').show(); $('#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>
<script src="/static/time.js"></script> <script src="/static/time.js"></script>
</body> </body>