-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (97 loc) · 3.53 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DW3R-Tracker</title>
<style>
body{
height: 100vh;
background-color: #000;
display:flex;
justify-content:center;
align-items:center;
}
img{
width: 56px;
height: 56px;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
}
.orb{
filter: brightness(.3);
transition: filter .5s;
}
.orb.selected{
filter: brightness(1);
}
#blue.orb.glow{filter: drop-shadow(0 0 15px rgb(0,0,255)) brightness(1);}
#green.orb.glow{filter: drop-shadow(0 0 15px rgb(0,255,0)) brightness(1);}
#purple.orb.glow{filter: drop-shadow(0 0 15px purple) brightness(1);}
#red.orb.glow{filter: drop-shadow(0 0 15px rgb(255,0,0)) brightness(1);}
#silver.orb.glow{filter: drop-shadow(0 0 15px silver) brightness(1);}
#yellow.orb.glow{filter: drop-shadow(0 0 15px rgb(255,255,0)) brightness(1);}
#tracker-contain{
background-color: #000;
display: grid;
grid-template-columns: repeat(3,auto);
grid-gap: 2em;
}
img:nth-of-type(1){grid-area: 1/2;}
img:nth-of-type(2){grid-area: 2/1;}
img:nth-of-type(3){grid-area: 2/3;}
img:nth-of-type(4){grid-area: 3/1;}
img:nth-of-type(5){grid-area: 3/3;}
img:nth-of-type(6){grid-area: 4/2;}
#bird{grid-area: 1/1/span 4/span 3;
width: 76px;
height: 72px;
align-self: center;
justify-self: center;
transform: translateY(-10px);}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// toggle .selected on imgs
$(function(){
$(".orb").on("click", function() {
$(this).toggleClass("selected");
// if all orbs have .selected add .glow
if ( $('#blue').hasClass("selected") && $('#green').hasClass("selected") && $('#purple').hasClass("selected") &&
$('#red').hasClass("selected") && $('#silver').hasClass("selected") && $('#yellow').hasClass("selected"))
{$("#blue,#green,#purple,#red,#silver,#yellow").addClass("glow"); }
else{$("#blue,#green,#purple,#red,#silver,#yellow").removeClass("glow");}
});
});
$(function(){
$("#bird").on("click", function() {
$(this).toggleClass("selected");
// swap out egg and ramia image on .selected
if ($(this).hasClass("selected") )
{$(this).attr('src', 'ramia.png').attr('title', 'Ramia')}
else ($(this).attr('src', 'ramia_egg.png').attr('title', 'Ramia Egg') )
});
});
</script>
</head>
<body>
<div class="contain">
<div id="tracker-contain">
<!-- orbs -->
<img id="blue" class="orb" src="Blue_Orb.png" title="Blue Orb">
<img id="green" class="orb" src="Green_Orb.png" title="Green Orb">
<img id="purple" class="orb" src="Purple_Orb.png" title="Purple Orb">
<img id="red" class="orb" src="Red_Orb.png" title="Red Orb">
<img id="silver" class="orb" src="Silver_Orb.png" title="Silver Orb">
<img id="yellow" class="orb" src="Yellow_Orb.png" title="Yellow Orb">
<!-- bird -->
<img id="bird" src="ramia_egg.png" title="Ramia Egg">
<!--img src="http://www.woodus.com/den/gallery/graphics/dq9ds/item/magic_key_th.png" title="Magic Key"-->
<!--img src="http://www.woodus.com/den/gallery/graphics/dq9ds/item/ultimate_key_th.png" title="Ultimate Key"-->
<!--img src="http://www.woodus.com/den/gallery/graphics/dq9ds/item/sages_stone_th.png" title="Sage's Stone"-->
<!--img src=".png" title="Echoing Flute"-->
<!--Need Sphere of Light and Fairy Flute (I think both are available in any world).
Need Staff of Rain, Stones of Sunlight, Rainbow drop for Alefgard-->
</div>
</div>
</body>
</html>