-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.js
86 lines (79 loc) · 4.55 KB
/
login.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
document.querySelector("#login_form a").addEventListener('mouseover', function(){
login_color()});
document.querySelector("#login_form a").addEventListener('mouseout', function(){
document.querySelectorAll('#login_form a span').forEach(tk => tk.style.width = "")
document.querySelector(".login_title").style.color = "";
document.querySelector(".login_title").style.textShadow = "";
document.querySelector('#login_form a').style.backgroundColor = "";
document.querySelector('#login_form a').style.boxShadow = "";
})
document.querySelector("#login_form a").addEventListener('click', function(){
if (document.querySelector("#inp1").matches(':invalid')){
document.querySelector('#inp1').animate([
{ transform: 'translate(1px, 1px) rotate(0deg)'},
{ transform: 'translate(-1px, -2px) rotate(-1deg)'},
{ transform: 'translate(-3px, 0px) rotate(1deg)'},
{ transform: 'translate(3px, 2px) rotate(0deg)'},
{ transform: 'translate(1px, -1px) rotate(1deg)'},
{ transform: 'translate(-1px, 2px) rotate(-1deg)'},
{ transform: 'translate(-3px, 1px) rotate(0deg)'},
{ transform: 'translate(3px, 1px) rotate(-1deg)'},
{ transform: 'translate(-1px, -1px) rotate(1deg)'},
{ transform: 'translate(1px, 2px) rotate(0deg)'},
{ transform: 'translate(1px, -2px) rotate(-1deg)'},
], {
duration: 600,
iterations: 1,
});}
if (document.querySelector("#inp2").matches(':invalid')){
document.querySelector('#inp2').animate([
{ transform: 'translate(1px, 1px) rotate(0deg)'},
{ transform: 'translate(-1px, -2px) rotate(-1deg)'},
{ transform: 'translate(-3px, 0px) rotate(1deg)'},
{ transform: 'translate(3px, 2px) rotate(0deg)'},
{ transform: 'translate(1px, -1px) rotate(1deg)'},
{ transform: 'translate(-1px, 2px) rotate(-1deg)'},
{ transform: 'translate(-3px, 1px) rotate(0deg)'},
{ transform: 'translate(3px, 1px) rotate(-1deg)'},
{ transform: 'translate(-1px, -1px) rotate(1deg)'},
{ transform: 'translate(1px, 2px) rotate(0deg)'},
{ transform: 'translate(1px, -2px) rotate(-1deg)'},
], {
duration: 600,
iterations: 1,
});
}
})
document.querySelector("#login_form a").addEventListener('mousedown', function(){
if (document.querySelector("#inp1").matches(':invalid')
&& document.querySelector("#inp2").matches(":invalid")){
document.querySelector('#login_form a').style.boxShadow = "0 0 4px red,\
0 0 16px red,\
0 0 32px red,\
0 0 64px red";
}
})
document.querySelector("#login_form a").addEventListener('mouseup', function(){
if (document.querySelector("#inp1").matches(':invalid')
&& document.querySelector("#inp2").matches(":invalid")){
document.querySelector('#login_form a').style.boxShadow = "0 0 3px red,\
0 0 9px red,\
0 0 18px red,\
0 0 36px red";
}
})
function login_color() {
if (document.querySelector("#inp1").matches(':valid')
&& document.querySelector("#inp2").matches(":valid")) {
document.querySelector(".login_title").style.color = 'blueviolet';
document.querySelector(".login_title").style.textShadow = "0 0 4px blueviolet,\
0 0 16px blueviolet,\
0 0 32px blueviolet,\
0 0 64px blueviolet";
}
else{document.querySelectorAll('#login_form a span').forEach(tk => tk.style.width = "0");
document.querySelector('#login_form a').style.backgroundColor = "red";
document.querySelector('#login_form a').style.boxShadow = "0 0 3px red,\
0 0 9px red,\
0 0 18px red,\
0 0 36px red";}}