-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (103 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>colormap generator</title>
</head>
<body style="min-width: 500px;">
<div style="text-align: center;">
<h1>Colormap Generator</h1>
<div style="width: 50px; height: 50px; margin-bottom: 5px; margin-left: auto; margin-right: auto;" onclick="showmanual()">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<image id="image0" width="128" height="128"
href="data:image/png;base64,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" />
</svg>
</div>
<textarea id="manual" rows="5" cols="25" style="
text-align: left;
padding: 10px 10px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;">
#: set color to blank
▲: swap up
▼: swap down
+: add color down
X: delete color</textarea>
</div>
<div id="root"></div>
<div style="text-align: center;">
<p>More colormap: <a href="https://www.ncl.ucar.edu/Document/Graphics/color_table_gallery.shtml" target="_blank">NCL Graphics: Color Table Gallery</a></p>
<p>Source on: <a href="https://github.com/HappyXiaoAnAn/colormap_generator" target="_blank">GitHub</a></p>
</div>
<script type="module" src="/src/main.jsx"></script>
<script>
function showmanual() {
var x = document.getElementById("manual");
if (x.style.display === "none") {
x.style.display = "";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>