-
Notifications
You must be signed in to change notification settings - Fork 12
/
loadout.html
91 lines (91 loc) · 3.91 KB
/
loadout.html
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
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background: #444;
font-family: Arial, Helvetica, sans-serif;
width: 100vw;
overflow: hidden !important;
background: none !important;
}
.weapon {
position: relative;
box-shadow: 0 5px 10px #25750a;
cursor: pointer;
transition: transform 1s, box-shadow 1s;
background: #333;
width: 50%;
}
.weapon:hover:not(.focus) {
transform: scale(1.1);
box-shadow: 0 0 #000;
z-index: 100;
}
.focus {
transform: scale(1.1);
box-shadow: 0 0 0 5px #fff;
}
.weapon:hover + .center {
z-index: 101;
}
.holder {
position: relative;
display: inline-block;
text-align: center;
left: 0;
margin: 10px;
margin-right: 2.5%;
margin-left: -10px;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 30px;
font-weight: 600;
}
.container {
position: relative;
left: 50%;
width: 1500px;
margin-left: -650px;
top: 0;
}
h1 {
position: relative;
font-size: 50px;
color: #333;
text-align: center;
text-shadow: 2px 2px #25750a;
}
</style>
<body>
<h1>Primary Weapon</h1>
<div class="container first">
<div class="holder" tabindex="0" onclick="setPLoadout('rifle')"><img onclick="(()=>{for(let i=0;i<document.querySelectorAll('.first img').length;i++){document.querySelectorAll('.first img')[i].classList.toString().indexOf('focus')>-1&&document.querySelectorAll('.first img')[i].classList.toggle('focus')}})();this.classList.toggle('focus')" class="weapon rifle" src="images/guns/rifle.png" /><div class="center">ACE-35R Rifle</div></div>
<div class="holder" tabindex="0" onclick="setPLoadout('assault')"><img onclick="(()=>{for(let i=0;i<document.querySelectorAll('.first img').length;i++){document.querySelectorAll('.first img')[i].classList.toString().indexOf('focus')>-1&&document.querySelectorAll('.first img')[i].classList.toggle('focus')}})();this.classList.toggle('focus')" class="weapon assault" src="images/guns/assault.png" /><div class="center">M16 A2 Rifle</div></div>
</div>
<h1>Secondary Weapon</h1>
<div class="container second">
<div class="holder" tabindex="0" onclick="setSLoadout('pistol')"><img onclick="(()=>{for(let i=0;i<document.querySelectorAll('.second img').length;i++){document.querySelectorAll('.second img')[i].classList.toString().indexOf('focus')>-1&&document.querySelectorAll('.second img')[i].classList.toggle('focus')}})();this.classList.toggle('focus')" class="weapon pistol" src="images/guns/pistol.png" /><div class="center">G17 9mm Pistol</div></div>
<div class="holder" tabindex="0" onclick="setSLoadout('uzi')"><img onclick="(()=>{for(let i=0;i<document.querySelectorAll('.second img').length;i++){document.querySelectorAll('.second img')[i].classList.toString().indexOf('focus')>-1&&document.querySelectorAll('.second img')[i].classList.toggle('focus')}})();this.classList.toggle('focus')" class="weapon assault" src="images/guns/uzi.png" /><div class="center">UZI</div></div>
</div>
<script>
function setPLoadout(w) {
localStorage.setItem("prefsLoadout", w+","+(localStorage["prefsLoadout"]||"null,pistol").split(",")[1]);
}
function setSLoadout(w) {
localStorage.setItem("prefsLoadout", (localStorage["prefsLoadout"]||"rifle,null").split(",")[0]+","+w);
}
document.querySelector(".weapon."+(localStorage["prefsLoadout"].split(",")[0]||"rifle")).classList.add("focus");
document.querySelector(".weapon."+(localStorage["prefsLoadout"].split(",")[1]||"pistol")).classList.add("focus");
</script>
</body>
</html>