-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (80 loc) · 4.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0e1012" />
<link rel="shortcut icon" href="./images/Raid.webp" type="image/webp">
<title>Pokédex100 Raids Infographic Generator</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/toastify.css">
<!-- NOT USING BEAUTIFUL SOUP -->
<!-- <script src="./js/beautifulSoup.js"></script> -->
<script src="./js/color-thief.js"></script>
<script src="./js/nameThatColor.js"></script>
<script type="text/javascript" src="./js/toastify.js"></script>
<script src="./js/tinycolor.js"></script>
</head>
<body>
<div class="essentials">
<img src="./pokedex.png" alt="logo" height="50px">
<div class="inventory">
<button class="sync">Sync Data</button>
<input type="color" name="gradient1" id="color1" value="#A1BBEC">
<input type="color" name="gradien2" id="color2" value="#c5a1ec">
</div>
<button class="download button">Generate Infographic
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
height="30px" viewBox="0 0 30 30" version="1.1">
<g id="surface1">
<path
style="fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(93, 61, 255);stroke-opacity:1;stroke-miterlimit:4;"
d="M 12.5 10 C 12.5 11.380208 11.380208 12.5 10 12.5 C 8.619792 12.5 7.5 11.380208 7.5 10 C 7.5 8.619792 8.619792 7.5 10 7.5 C 11.380208 7.5 12.5 8.619792 12.5 10 Z M 12.5 10 "
transform="matrix(1.5,0,0,1.5,0,0)" />
<path
style="fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(93, 61, 255);stroke-opacity:1;stroke-miterlimit:4;"
d="M 8.390625 2.802083 C 8.929688 1.289062 11.070312 1.289062 11.609375 2.802083 C 11.947917 3.755208 13.036458 4.208333 13.950521 3.773438 C 15.403646 3.083333 16.916667 4.596354 16.226562 6.049479 C 15.791667 6.963542 16.244792 8.052083 17.197917 8.390625 C 18.710938 8.929688 18.710938 11.070312 17.197917 11.609375 C 16.244792 11.947917 15.791667 13.036458 16.226562 13.950521 C 16.916667 15.403646 15.403646 16.916667 13.950521 16.226562 C 13.036458 15.791667 11.947917 16.244792 11.609375 17.197917 C 11.070312 18.710938 8.929688 18.710938 8.390625 17.197917 C 8.052083 16.244792 6.963542 15.791667 6.049479 16.226562 C 4.596354 16.916667 3.083333 15.403646 3.773438 13.950521 C 4.208333 13.036458 3.755208 11.947917 2.802083 11.609375 C 1.289062 11.070312 1.289062 8.929688 2.802083 8.390625 C 3.755208 8.052083 4.208333 6.963542 3.773438 6.049479 C 3.083333 4.596354 4.596354 3.083333 6.049479 3.773438 C 6.963542 4.208333 8.052083 3.755208 8.390625 2.802083 Z M 8.390625 2.802083 "
transform="matrix(1.5,0,0,1.5,0,0)" />
</g>
</svg>
</button>
</div>
<div class="screenshot chart-container">
<h1 class="title">CURRENT RAID BOSSES</h1>
</div>
<script src="./js/script.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const downloadButton = document.querySelector('.download');
const targetDiv = document.querySelector('.screenshot');
downloadButton.addEventListener('click', () => {
if (window.matchMedia("(min-width: 600px)").matches) {
Toastify({
text: "Press Esc to Exit",
duration: 3000,
style: {
background:
"#1a171d",
borderRadius: "7px",
border: "1px solid #0e1012",
},
position: "center",
}).showToast();
}
document.querySelector(".essentials").style.display = "none";
document.body.classList.add("graphic-generated")
document.body.setAttribute("style", "inline-size: 2500px")
document.targetDiv.setAttribute("style", "inline-size: 100%")
});
document.addEventListener('keydown', (e) => {
if (e.code === "Escape" || e.code === "F12") {
document.querySelector(".essentials").style.display = "block";
document.body.classList.remove("graphic-generated")
document.body.removeAttribute("style")
document.targetDiv.removeAttribute("style")
}
})
});
</script>
</body>
</html>