-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (82 loc) · 3.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aqua's collections</title>
<style>
body {
background-color: #24292e;
color: white;
font-family: Arial, sans-serif;
text-align: center;
}
img {
width: 100%;
height: auto;
max-width: 100%;
display: none;
}
.typecontainer {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<div style="flex-direction: row;">
<button onclick="switchState()" id="button_state">Show horizontal</button>
<button onclick="switchType()" id="button_type">Show anime</button>
</div>
<div id="funkodiv" class="typecontainer visible">
<img src="collage.png_stacked.png" id="funko_vertical_group" class="visible" />
<img src="collage.png" id="funko" />
<img src="collage.png_stacked_h.png" id="funko_horizontal_group" />
</div>
<div id="animediv" class="typecontainer">
<img src="anime_collage.png_stacked.png" id="anime_vertical_group" class="visible" />
<img src="anime_collage.png" id="anime" />
<img src="anime_collage.png_stacked_h.png" id="anime_horizontal_group" />
</div>
<script>
selected = 0; // 0 = funko, 1 = anime
total_types = 2;
state = 0; // 0 = vertical, 1 = horizontal, 2 = ungrouped
total_states = 3;
state_names = ['vertical', 'horizontal', 'ungrouped'];
div_names = ['funko', 'anime'];
var funko_vertical_group = document.getElementById('funko_vertical_group');
var funko_horizontal_group = document.getElementById('funko_horizontal_group');
var funko = document.getElementById('funko');
funko_images = [funko_vertical_group, funko_horizontal_group, funko];
var anime_vertical_group = document.getElementById('anime_vertical_group');
var anime_horizontal_group = document.getElementById('anime_horizontal_group');
var anime = document.getElementById('anime');
anime_images = [anime_vertical_group, anime_horizontal_group, anime];
images = [funko_images, anime_images];
var funkodiv = document.getElementById('funkodiv');
var animediv = document.getElementById('animediv');
divs = [funkodiv, animediv];
function switchState() {
var button_state = document.getElementById('button_state');
for (var i = 0; i < total_types; i++) {
images[i][state].classList.remove('visible');
}
state = (state + 1) % total_states;
for (var i = 0; i < total_types; i++) {
images[i][state].classList.add('visible');
}
button_state.innerHTML = 'Show ' + state_names[(state + 1) % total_states]
}
function switchType() {
var button_type = document.getElementById('button_type');
divs[selected].classList.remove('visible');
selected = (selected + 1) % total_types;
divs[selected].classList.add('visible');
button_type.innerHTML = 'Show ' + div_names[(selected + 1) % total_types];
}
</script>
</body>
</html>