You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
8.8 KiB
268 lines
8.8 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title><%= title %></title>
|
|
<style>
|
|
html, body {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
|
|
background: #000;
|
|
font-family: Consolas, NotoSans;
|
|
user-select: none;
|
|
}
|
|
body{
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
span{
|
|
color: #46F372;
|
|
}
|
|
i{
|
|
color: #46F372;
|
|
font-weight: bold;
|
|
}
|
|
.welecomeText{
|
|
position: relative;
|
|
line-height: 1.3em;
|
|
}
|
|
.welecomeTextCursor{
|
|
position: relative;
|
|
background: #46F372;
|
|
color: #46F372;
|
|
margin-left: 2px;
|
|
animation: show-hide-welcome 500ms infinite;
|
|
}
|
|
.inputTextCursor{
|
|
position: relative;
|
|
margin-left: 2px;
|
|
border-bottom: 4px solid #46F372;
|
|
box-sizing: border-box;
|
|
animation: show-hide-answer 500ms infinite;
|
|
}
|
|
|
|
@keyframes show-hide-welcome {
|
|
0% {
|
|
color: #46F372;
|
|
background: #46F372;
|
|
}
|
|
50%{
|
|
color: #46F372;
|
|
background: #46F372;
|
|
}
|
|
100% {
|
|
color: #46F37200;
|
|
background: #46F37200;
|
|
}
|
|
70% {
|
|
color: #46F37200;
|
|
background: #46F37200;
|
|
}
|
|
}
|
|
@keyframes show-hide-answer {
|
|
0% {
|
|
border-bottom: 4px solid #46F372;
|
|
}
|
|
50%{
|
|
border-bottom: 4px solid #46F372;
|
|
}
|
|
100% {
|
|
border-bottom: 4px solid #46F37200;
|
|
}
|
|
70% {
|
|
border-bottom: 4px solid #46F37200;
|
|
}
|
|
}
|
|
|
|
.loading{
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0;
|
|
height: 5px;
|
|
width: 100px;
|
|
background: #46F372;
|
|
animation: loadingSS 1400ms forwards linear;
|
|
z-index: 1000;
|
|
}
|
|
|
|
@keyframes loadingSS {
|
|
from{
|
|
width: 0;
|
|
}
|
|
to{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.inputHide{
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
top:0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
</body>
|
|
<script>
|
|
window.onload = () => {
|
|
const body = document.body;
|
|
let username, password
|
|
|
|
// 开局提示
|
|
const welcomeElement = document.createElement('div');
|
|
body.append(welcomeElement);
|
|
const welcomeText = `Welcome To <%= title %>.\nYou Are About To Enter The Top Management Interface.`;
|
|
renderText(welcomeText, welcomeElement, () => {
|
|
// 询问是否继续
|
|
const askElement = document.createElement('div');
|
|
body.append(askElement);
|
|
const askText = 'Can Verify Your Identity Now? (Yes / No):'
|
|
renderText(askText, askElement, () => {
|
|
// 确认输入
|
|
const answerElement = document.createElement('div');
|
|
body.append(answerElement);
|
|
inputText(answerElement, text => {
|
|
const answer = text.toLowerCase()
|
|
if(answer == 'y' || answer == 'yes'){
|
|
// 用户名提示
|
|
const userText = 'USERNAME: '
|
|
const usernameElement = document.createElement('div');
|
|
const userHeaderElement = document.createElement('span');
|
|
const userBodyElement = document.createElement('span');
|
|
body.append(usernameElement)
|
|
usernameElement.append(userHeaderElement)
|
|
usernameElement.append(userBodyElement)
|
|
renderText(userText, userHeaderElement, () => {
|
|
inputText(userBodyElement, usernameText => {
|
|
username = usernameText
|
|
// 密码提示
|
|
const passwdText = 'PASSWORD: '
|
|
const passwdElement = document.createElement('div');
|
|
const passwdHeaderElement = document.createElement('span');
|
|
const passwdBodyElement = document.createElement('span');
|
|
body.append(passwdElement)
|
|
passwdElement.append(passwdHeaderElement)
|
|
passwdElement.append(passwdBodyElement)
|
|
renderText(passwdText, passwdHeaderElement, () => {
|
|
inputText(passwdBodyElement, passwdText => {
|
|
password = passwdText
|
|
Entry()
|
|
}, null, true)
|
|
}, 0, 0)
|
|
}, null)
|
|
}, 0, 0)
|
|
}else{
|
|
setTimeout(() => {
|
|
window.close()
|
|
}, 3000)
|
|
console.log('Window On Close in 3000ms!')
|
|
return;
|
|
}
|
|
}, true)
|
|
}, 0, 0)
|
|
})
|
|
}
|
|
|
|
function renderText(text, element, callback, startWait = 2000, endWait= 1000){
|
|
const textElement = document.createElement('span');
|
|
const cursorElement = document.createElement('span');
|
|
cursorElement.classList.add('welecomeTextCursor');
|
|
cursorElement.innerHTML = ' '
|
|
|
|
element.append(textElement, cursorElement)
|
|
const max = text.length
|
|
let nowLetter = 1
|
|
setTimeout(() => {
|
|
const setTextInterval = setInterval(() => {
|
|
const spanElement = document.createElement('span');
|
|
const nowText = text[nowLetter - 1]
|
|
if(nowText == ' '){
|
|
spanElement.innerHTML = ' '
|
|
}else{
|
|
spanElement.innerText = nowText
|
|
}
|
|
|
|
spanElement.classList.add('welecomeText');
|
|
textElement.append(spanElement)
|
|
if(nowLetter == max){
|
|
clearInterval(setTextInterval)
|
|
setTimeout(() => {
|
|
cursorElement.remove()
|
|
callback()
|
|
}, endWait)
|
|
}else{
|
|
nowLetter++
|
|
}
|
|
}, 30)
|
|
}, startWait)
|
|
|
|
}
|
|
|
|
function inputText(element, callback, letter, passwd){
|
|
const textElement = document.createElement('span');
|
|
const cursorElement = document.createElement('span');
|
|
cursorElement.classList.add('inputTextCursor');
|
|
cursorElement.innerHTML = ' ';
|
|
|
|
element.append(textElement, cursorElement)
|
|
|
|
const store = {
|
|
key: '',
|
|
string: ''
|
|
}
|
|
|
|
document.body.addEventListener('keyup', getKeyWord)
|
|
if(!letter){
|
|
letter = 'QWERTYUIOPASDFGHJKLZXCVBNM1234567890*@#&' + 'QWERTYUIOPASDFGHJKLZXCVBNM'.toLowerCase().split('')
|
|
}else{
|
|
letter = ['Y','y','E','e','S','s','N','n','O','o']
|
|
}
|
|
function getKeyWord(){
|
|
if(letter && letter.includes(event.key)){
|
|
store.key = event.key;
|
|
store.string = store.string + event.key
|
|
}
|
|
if(event.key == 'Backspace'){
|
|
store.string = store.string.slice(0, store.string.length - 1)
|
|
}
|
|
if(event.key == 'Enter'){
|
|
if(store.string.length==0){
|
|
|
|
}else{
|
|
cursorElement.remove()
|
|
callback(store.string)
|
|
document.body.removeEventListener('keyup', getKeyWord)
|
|
}
|
|
}
|
|
if(passwd){
|
|
textElement.innerText = new Array(store.string.length).fill('*').join('')
|
|
}else{
|
|
textElement.innerText = store.string
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
function Entry(){
|
|
if(true){
|
|
const entryMessageElement = document.createElement('div')
|
|
document.body.append(entryMessageElement)
|
|
renderText('About To Enter The System!', entryMessageElement, () => {
|
|
const loadingElement = document.createElement('div')
|
|
loadingElement.classList.add('loading')
|
|
document.body.append(loadingElement)
|
|
}, 0, 0)
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</html>
|
|
|