-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
executable file
·43 lines (42 loc) · 1.38 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
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
.fh {
height: 100%;
}
</style>
<script>
let counter = 0;
const flags = document.getElementsByClassName("fh");
window.addEventListener("click", function(event) {
flags[counter].style.display = "none";
counter = (counter + 1) % flags.length;
flags[counter].style.display = "block";
});
</script>
</head>
<body>
<div class="fh" style="display: block">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 100,100 0,100" fill="#000000" />
<polygon points="0,0 100,0 100,20 20,20" fill="#55CDFC"/>
<polygon points="20,20 100,20 100,40 40,40" fill="#F7A8B8"/>
<polygon points="40,40 100,40 100,60 60,60" fill="#FFFFFF"/>
<polygon points="60,60 100,60 100,80 80,80" fill="#F7A8B8"/>
<polygon points="80,80 100,80 100,100 20,20" fill="#55CDFC"/>
</svg>
</div>
<div class="fh" style="display: none;">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,0 0,100 100,100" fill="#000000"></polygon>
<polygon points="55,0 100,0 100,44" fill="#55CDFC"></polygon>
<polygon points="25,0 55,0 100,44 100,74" fill="#F7A8B8"></polygon>
<polygon points="0,0 25,0 100,74 100,100" fill="#FFFFFF"></polygon>
</svg>
</div>
</body>
</html>