-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
110 lines (93 loc) · 4.03 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
109
110
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>World Population Cartogram</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://unpkg.com/d3"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="content container-fluid text-center">
<div id="page-loader" class="center"></div>
<div class="loader-container" id="loader">
<div class="loader"></div>
</div>
<input class="left form-control form-control-sm round-right" style="width: 60px; margin-left: 40px;" type="text"
id="cell-size" name="cell-size" min="1" max="12" value="2" disabled/>
<select id="cell-scale" class="left form-select form-select-sm round-none"
style="width: 105px;">
<option>Fluid</option>
<option>Fixed</option>
</select>
<input type="button" value="Scale" class="left btn btn-sm btn-warning round-left"
id="select-cell-scale"></input>
<input class="left form-control form-control-sm round-right" style="width: 50px; margin-left: 10px;" type="number"
id="radius" name="radius" min="1" max="12" value="4" />
<input type="button" value="Radius" class="left btn btn-sm btn-success round-left"
id="select-radius"></input>
<span class="left"> </span>
<input class="left form-control form-control-sm round-right" style="width: 80px;" type="number" id="year"
name="year" min="1950" max="2100" value="2022" />
<input type="button" value="Year" class="left btn btn-sm btn-success round-left" id="select-year"></input>
<select id="cell-shape" class="left form-select form-select-sm round-right"
style="width: 105px; margin-left: 10px;">
<option>Square</option>
<option>Hexagon</option>
</select>
<button class="btn btn-sm btn-success left round-left"><a id="select-cell-shape" href="#">Shape</button>
<select id="download" class="left form-select form-select-sm round-right"
style="width: 100px; margin-left: 10px;">
<option>SVG</option>
<option>CSV</option>
</select>
<button class="btn btn-sm btn-secondary left round-left"><a id="select-download" href="#">Export</button>
<input type="color" list="presetColors" id="cell-color" value="#8e44ad"
class="right form-control form-control-sm round-left" style="width: 100px; height: 2.2em; margin-right: 35px;">
<datalist id="presetColors">
<option>#1abc9c</option>
<option>#2ecc71</option>
<option>#3498db</option>
<option>#9b59b6</option>
<option>#34495e</option>
<option>#16a085</option>
<option>#27ae60</option>
<option>#2980b9</option>
<option>#8e44ad</option>
<option>#2c3e50</option>
<option>#f1c40f</option>
<option>#e67e22</option>
<option>#e74c3c</option>
<option>#ecf0f1</option>
<option>#95a5a6</option>
<option>#f39c12</option>
<option>#d35400</option>
<option>#c0392b</option>
<option>#bdc3c7</option>
<option>#7f8c8d</option>
</datalist>
<select id="cell-action" class="right form-select form-select-sm round-right" style="width: 100px;">
<option>Add</option>
<option>Remove</option>
</select>
<span class="right">Add/Remove cells: </span>
<div id="container"></div>
<script src="app.js" type="module"></script>
</div>
<script>
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
document.querySelector("body").style.visibility = "hidden";
document.querySelector("#page-loader").style.visibility = "visible";
} else {
setTimeout(function () {
document.querySelector("#page-loader").style.display = "none";
document.querySelector("body").style.visibility = "visible";
}, 1000);
}
};
</script>
</body>
</html>