Record HTML template written in 2020. (You need to download the jQuery file yourself)
1. Bottom-level template
Adaptive screen size, layered left and right.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {<!-- -->
background-color: black;
padding: 0px;
margin: 0px;
}
.admin-main {<!-- -->
width: 98%;
height: 96%;
position: absolute;
top: 0px;
bottom: 0px;
/* cancel block limit */
display: flex;
margin: 1%;
}
/* Navigation Bar */
.navigation-bar {<!-- -->
width: 20%;
height: 100%;
background-color: #FFFFFF;
}
/* functional module */
.function-module {<!-- -->
width: 80%;
height: 100%;
background-color: #F2F2F2;
}
</style>
</head>
<body>
<div class="admin-main">
<div class="navigation-bar"></div>
<div class="function-module"></div>
</div>
</body>
</html>
2. Admin interface
Touch event (modify background color), click event (open secondary directory)
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Administrator Interface</title>
<link rel="stylesheet" href="css/a003.css">
<script src="js/Jquery.js"></script>
<script src="js/a003.js"></script>
</head>
<body>
<div class="admin-main">
<!-- navigation bar -->
<div class="navigation-bar">
<!-- Admin Information -->
<div class="admin-information">
<span class="adminName">Hello Admin</span>
</div>
<div class="list-information">
<ul class="nav-ul">
<li>
<div class="nav-li-div">Personnel transfer</div>
<ul class="div-ul">
<li>personnel information</li>
</ul>
</li>
<li>
<div class="nav-li-div">Department Information</div>
<ul class="div-ul">
<li>professional information</li>
<li>professional application</li>
</ul>
</li>
<li>
<div class="nav-li-div">Course Schedule</div>
</li>
</ul>
</div>
</div>
<div class="function-module">
<div class="module-index">
<div id="mIndex"></div>
<div class="admin-permiss">Permissions-->1</div>
</div>
</div>
</div>
</body>
</html>
css code a003.css
body {<!-- -->
background-color: black;
padding: 0px;
margin: 0px;
}
.admin-main {<!-- -->
width: 98%;
height: 96%;
position: absolute;
top: 0px;
bottom: 0px;
/* cancel block limit */
display: flex;
margin: 1%;
}
/* Navigation Bar */
.navigation-bar {<!-- -->
width: 20%;
height: 100%;
background-color: #FFFFFF;
}
.admin-information {<!-- -->
background-color: pink;
height: 50px;
}
.admin-information>.adminName {<!-- -->
background-color: ivory;
position: absolute;
padding: 10px;
top: 4px;
border-radius: 0 20px 20px 0;
}
.nav-li-div {<!-- -->
padding: 8px;
}
.nav-ul,
.div-ul {<!-- -->
list-style-type: none;
padding: 0px;
cursor: pointer;
}
.nav-ul>li {<!-- -->
margin: 5px;
}
.div-ul>li {<!-- -->
padding: 10px;
margin-left: 10px;
/* submenu arc */
border-radius: 0 20px 20px 0;
}
/* functional module */
.function-module {<!-- -->
width: 80%;
height: 100%;
background-color: #F2F2F2;
}
.module-index {<!-- -->
/* function module index */
background-color: #FFFFFF;
height: 50px;
}
#mIndex {<!-- -->
float: left;
position: relative;
padding: 10px;
top: 4px;
}
.admin-permiss {<!-- -->
/* permission div */
float: right;
position: relative;
padding: 10px;
top: 4px;
/* set radians */
border-radius: 20px 0 0 20px;
background-color: pink;
}
js code a003.js
// parameters
var indexText; //function module index text variable
$(document).ready(main)
function main() {<!-- -->
$(".div-ul").hide();
navUl();
divUl();
listClick();
}
/* -----------Navigation bar submenu event processing function set ------------ */
function navUl() {<!-- -->
var navUl = $(".nav-ul").children(); //Navigation bar element array
for (var i = 0; i < navUl. length; i ++ ) {<!-- -->
/* popup processing */
navUlClick(navUl. eq(i));
/* touch handling */
navUlHover(navUl. eq(i));
}
}
// navigation bar click event
function navUlClick(navUiThis) {<!-- -->
$(".nav-li-div", navUiThis).click(function() {<!-- -->
listClick($(this));
if ($(".div-ul", navUiThis).is(':hidden')) {<!-- -->
$(".div-ul", navUiThis).show();
} else {<!-- -->
$(".div-ul", navUiThis).hide();
}
indexVal($(this), 1);
});
}
// navigation bar touch event
function navUlHover(navUiThis) {<!-- -->
$(".nav-li-div", navUiThis).hover(function() {<!-- -->
$(this).css("background", "pink");
}, function() {<!-- -->
$(this).css("background", "#FFFFFF");
});
}
//Submenu processing function
function divUl() {<!-- -->
var divUl = $(".div-ul").children(); //Array of submenu elements
for (var i = 0; i < divUl. length; i ++ ) {<!-- -->
//touch event
divUlHover(divUl. eq(i));
//click event
divUlClick(divUl. eq(i));
}
}
//Submenu touch event
function divUlHover(divUlThis) {<!-- -->
divUlThis.hover(function() {<!-- -->
$(this).css("background", "pink");
}, function() {<!-- -->
$(this).css("background", "#FFFFFF")
})
}
//Submenu click event
function divUlClick(divUlThis) {<!-- -->
divUlThis.click(function() {<!-- -->
indexVal(divUlThis, 2);
})
}
/* ----------- function module processing function set ------------ */
//Index html text logic processing
function indexVal(valThis, i) {<!-- -->
switch (i) {<!-- -->
case 1:
indexText = valThis.html();
break;
case 2:
var a = valThis.parents("li").children().eq(0).html();
indexText = a + ">" + valThis.html();
break;
}
$("#mIndex").html(indexText);
}
//ul click to switch list-style-type
function listClick(listThis) {<!-- -->
var a = listThis. parents("li");
if (a.css("list-style-type") == "disclosure-closed") {<!-- -->
a.css("list-style-type", "disclosure-open");
} else {<!-- -->
a.css("list-style-type", "disclosure-closed");
}
}
3. Registration interface
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/d002.css"> <script src="js/Jquery.js"></script> <script src="js/d002.js"></script> <!-- time selection module --> <link rel="stylesheet" type="text/css" href="css/My97DatePicker/skin/WdatePicker.css"/> <script type="text/javascript" src="css/My97DatePicker/WdatePicker.js"></script> </head> <body> <div class="main"> <div class="reg-title"> User registration </div> <div class="input-data"> <input type="text" required="" id="userName" name="userName" /> <div class="underlineN"></div> <label>Name</label> </div> <div class="input-data"> <input type="text" required="" id="userPass" name="userPass" /> <div class="underlineP"></div> <label>Password</label> </div> <div class="input-data"> <input type="text" required="" id="userRepeatPass" name="userRepeatPass" /> <div class="underlineP"></div> <label>Password Repeat</label> </div> <div class="input-data"> <input type="text" required="" id="userPhone" name="userPhone"/> <div class="underlineP"></div> <label>Phone</label> </div> <div class="input-data"> <input type="text" required="" id="userEmail" name="userEmail"/> <div class="underlineP"></div> <label>Email</label> </div> <div class="email-yzm"> <input type="text" required="" id="yzm" name="yzm"/> <input type="submit" id="btn-yzm" value="Get Verification Code" /> </div> <div class="input-data"> <input list="source" type="text" required="" id="userSex" onfocus="blur()" name="userSex"/> <datalist id="source"> <option>Male</option> <option>Female</option> </datalist> <div class="underlineP"></div> <label>Sex</label> </div> <div class="input-data"> <input class="Wdate" type="datetime"/> <div class="underlineP"></div> <label>Date of birth</label> </div> <div class="reg-btn"> <input class="btn-zc" type="submit" value="register"></input> </div> </div> </body> </html>
css code d002.css
* {<!-- -->
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
/* Set adaptive screen size */
body {<!-- -->
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(-135deg, #50c8c2, #4158d0);
}
/* title design */
.reg-title {<!-- -->
text-align: center;
font-size: 20px;
padding-bottom: 20px;
}
/* input box design */
.main {<!-- -->
width: 450px;
background-color: #fff;
padding: 30px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* module specification */
.main .input-data, .email-yzm {<!-- -->
width: 100%;
height: 40px;
margin: 10px;
position: relative;
}
/* QR code module */
.email-yzm{<!-- -->
text-align: center;
padding: 10px;
}
.email-yzm #yzm{<!-- -->
height: 30px;
width: 120px;
}
.email-yzm #btn-yzm{<!-- -->
padding: 5px;
}
/* Input box specification design */
.main .input-data input {<!-- -->
width: 100%;
height: 100%;
border: none;
border-bottom: 2px solid silver;
font-size: 17px;
}
/* animation effect */
.input-data input:focus~label,
.input-data input:valid~label {<!-- -->
transform: translateY(-20px);
font-size: 15px;
color: #4158D0;
}
/* Input box text reminder animation */
.main .input-data label {<!-- -->
position: absolute;
bottom: 10px;
left: 0;
color: gray;
pointer-events: none;
transition: all 0.3s ease;
}
/* animation design */
.main .input-data .underlineN {<!-- -->
position: absolute;
bottom: 0px;
height: 2px;
width: 100%;
}
.input-data .underlineN::before {<!-- -->
background: #4158D0;
position: absolute;
content: "";
height: 100%;
width: 100%;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.input-data input:focus~.underlineN:before,
.input-data input:valid~.underlineN:before {<!-- -->
transform: scaleX(1);
}
.main .input-data .underlineP {<!-- -->
position: absolute;
bottom: 0px;
height: 2px;
width: 100%;
}
.input-data .underlineP::before {<!-- -->
background: #4158D0;
position: absolute;
content: "";
height: 100%;
width: 100%;
transform: scaleX(0);
transition: transform 0.3s ease;
}
.input-data input:focus~.underlineP:before,
.input-data input:valid~.underlineP:before {<!-- -->
transform: scaleX(1);
}
/* button design */
.reg-btn {<!-- -->
text-align: center;
}
.reg-btn input {<!-- -->
background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%);
border: none;
color: #fff;
font-family: 'Lato', sans-serif;
border-radius: 10px;
cursor: pointer;
padding: 10px 30px;
position: relative;
top: 20px;
}
/* button touch and move out */
.reg-btn input:hover {<!-- -->
background: transparent;
color: #76aef1;
}
.reg-btn input::before,
.reg-btn input::after {<!-- -->
content: '';
position: absolute;
width: 1px;
height: 1px;
box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
transition: all 0.8s ease;
padding: 0;
}
.reg-btn input::before {<!-- -->
top: 0;
right: 0;
}
.reg-btn input::after {<!-- -->
bottom: 0;
left: 0;
}
.reg-btn input:hover::before,
.reg-btn input:hover::after {<!-- -->
height: 100%;
}
.reg-btn input span::before,
.reg-btn input span::after {<!-- -->
position: absolute;
content: '';
width: 0px;
box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3);
transition: all 0.8s ease;
}
.reg-btn input span::before {<!-- -->
top: 0;
left: 0;
}
.reg-btninput span::after {<!-- -->
bottom: 0;
right: 0;
}
.reg-btn input span:hover::before,
.reg-btn input span:hover::after {<!-- -->
width: 100%;
}
js code d002.js
//parameter
var countdown = 60;
var code;
$(document).ready(main)
// main function
function main() {<!-- -->
yzm();
reg();
}
//Send the verification code
function yzm() {<!-- -->
$("#btn-yzm").click(function() {<!-- -->
$.ajax({<!-- -->
url: "http://localhost:8080/ecosystem_war_exploded/tool/sendMail",
data: {<!-- -->
userMail: $("input[name='userEmail']").val()
},
type: "post",
dataType: "text",
async: false,
success: function(data) {<!-- -->
if (data == 0) {<!-- -->
alert("Email format error!")
} else {<!-- -->
code = data;
}
}
})
sendVerificationCode($("#btn-yzm"));
})
}
// countdown
function sendVerificationCode(obj) {<!-- -->
if (countdown == 0) {<!-- -->
obj. removeAttr("disabled");
obj.val("Reacquire");
countdown = 60;
return;
} else {<!-- -->
obj.attr('disabled', "disabled");
obj.val("re(" + countdown + ")");
countdown--;
}
setTimeout(function() {<!-- -->
sendVerificationCode(obj)
}, 1000)
}
//register
function reg() {<!-- -->
$(".btn-zc").click(function() {<!-- -->
var userName = $("#userName").val();
var userPass = $("#userPass").val();
var userRepeatPass = $("#userRepeatPass").val();
var userPhone = $("#userPhone").val();
var userEmail = $("#userEmail").val();
var yzm = $("#yzm").val();
var userSex = $("#userSex").val();
var userDate = $("#userDate").val();
if (userName. length < 8) {<!-- -->
alert("The user name should be limited to 8~15 characters!");
} else if(userName. length > 15){<!-- -->
alert("The user name should be limited to 8~15 characters!");
} else if (userPass. length < 8) {<!-- -->
alert("The password should be limited to 8~15 characters!");
} else if(userPass. length > 15){<!-- -->
alert("The password should be limited to 8~15 characters!");
} else if(userRepeatPass. length == 0){<!-- -->
alert("Please enter the password again!")
} else if(userRepeatPass != userPass){<!-- -->
alert("The two passwords are inconsistent!")
} else if (userPhone. length != 11) {<!-- -->
alert("Normal mobile phone numbers in mainland China are eleven digits!")
} else if (!/^[0-9]*$/.test(userPhone)){<!-- -->
alert("Please enter the correct phone number!")
} else if (userEmail. length == 0) {<!-- -->
alert("Mailbox cannot be empty!")
} else if (yzm != code) {<!-- -->
alert("Verification code error!")
} else if (userSex. length == 0) {<!-- -->
alert("Please select gender!")
} else if (userDate. length == 0) {<!-- -->
alert("Please select a date of birth!")
} else {<!-- -->
$.ajax({<!-- -->
url: "http://localhost:8080/ecosystem_war_exploded/user/reg",
data: {<!-- -->
user_name: userName,
user_pass: userPass,
user_phone: userPhone,
user_mail: userEmail,
user_sex: userSex,
user_date_birth: userDate
},
type: "post",
dataType: "text",
async: false,
success: function(data) {<!-- -->
if (data == 0) {<!-- -->
alert("The mailbox has been registered!")
} else if (data == 1) {<!-- -->
alert("Successful registration!")
window.location.href = "http://localhost:8080/ecosystem_war_exploded/user/loginMain";
} else {<!-- -->
alert("Registration failed!")
}
}
})
}
})
}