blob: dee2b814c988ee48153fbfa9ee9a03f7485fd90c (
plain)
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-size: 18px;
}
.specimen {
height: 18px;
padding: 3px;
border: 2px solid;
border-left: 24px solid;
display: inline-block;
font-family: monospace;
cursor: pointer;
}
.comment {
display: inline-block;
font-style: italic;
padding-left: 10px;
}
#dawn #col0 { border-color: #4a4b4e; }
#dawn #col1 { border-color: #a32a3a; }
#dawn #col2 { border-color: #206620; }
#dawn #col3 { border-color: #745300; }
#dawn #col4 { border-color: #4b529a; }
#dawn #col5 { border-color: #8d377e; }
#dawn #col6 { border-color: #086784; }
#dawn #col7 { border-color: #dee2e0; }
#dawn #col8 { border-color: #676364; }
#dawn #col9 { border-color: #a64822; }
#dawn #col10 { border-color: #187408; }
#dawn #col11 { border-color: #8b590a; }
#dawn #col12 { border-color: #5c59b2; }
#dawn #col13 { border-color: #8e45a8; }
#dawn #col14 { border-color: #3f649c; }
#dawn #col15 { border-color: #eff0f2; }
#dawn #colbg { border-color: #eff0f2; }
#dawn #colbgalt { border-color: #dee2e0; }
#dawn #colfg { border-color: #4a4b4e; }
#dawn #colfgalt { border-color: #676364; }
#dawn #colcr { border-color: #4a4b4e; }
#dawn #colcr2 { border-color: #eff0f2; }
#totus #col0 { border-color: #4a484d; }
#totus #col1 { border-color: #a50000; }
#totus #col2 { border-color: #005d26; }
#totus #col3 { border-color: #714700; }
#totus #col4 { border-color: #1d3ccf; }
#totus #col5 { border-color: #88267a; }
#totus #col6 { border-color: #185570; }
#totus #col7 { border-color: #efefef; }
#totus #col8 { border-color: #5e4b4f; }
#totus #col9 { border-color: #992030; }
#totus #col10 { border-color: #4a5500; }
#totus #col11 { border-color: #8a3600; }
#totus #col12 { border-color: #2d45b0; }
#totus #col13 { border-color: #700dc9; }
#totus #col14 { border-color: #005289; }
#totus #col15 { border-color: #ffffff; }
#totus #colbg { border-color: #ffffff; }
#totus #colbgalt { border-color: #efefef; }
#totus #colfg { border-color: #4a484d; }
#totus #colfgalt { border-color: #5e4b4f; }
#totus #colcr { border-color: #4a484d; }
#totus #colcr2 { border-color: #ffffff; }
</style>
</head>
<body>
<h1>Tempus Dawn Specimen</h1>
<table id="dawn">
<tr>
<td>
<div><div id="col0" class="specimen">#4a4b4e</div><div class="comment">black variant</div></div>
<div><div id="col1" class="specimen">#a32a3a</div><div class="comment">red variant</div></div>
<div><div id="col2" class="specimen">#206620</div><div class="comment">green variant</div></div>
<div><div id="col3" class="specimen">#745300</div><div class="comment">yellow variant</div></div>
<div><div id="col4" class="specimen">#4b529a</div><div class="comment">blue variant</div></div>
<div><div id="col5" class="specimen">#8d377e</div><div class="comment">magenta variant</div></div>
<div><div id="col6" class="specimen">#086784</div><div class="comment">cyan variant</div></div>
<div><div id="col7" class="specimen">#dee2e0</div><div class="comment">white variant</div></div>
</td>
<td>
<div><div id="col8" class="specimen">#676364</div><div class="comment">bright black variant</div></div>
<div><div id="col9" class="specimen">#a64822</div><div class="comment">bright red variant</div></div>
<div><div id="col10" class="specimen">#187408</div><div class="comment">bright green variant</div></div>
<div><div id="col11" class="specimen">#8b590a</div><div class="comment">bright yellow variant</div></div>
<div><div id="col12" class="specimen">#5c59b2</div><div class="comment">bright blue variant</div></div>
<div><div id="col13" class="specimen">#8e45a8</div><div class="comment">bright magenta variant</div></div>
<div><div id="col14" class="specimen">#3f649c</div><div class="comment">bright cyan variant</div></div>
<div><div id="col15" class="specimen">#eff0f2</div><div class="comment">bright white variant</div></div>
</td>
<td>
<div><div id="colbg" class="specimen">#eff0f2</div><div class="comment">main background</div></div>
<div><div id="colbgalt" class="specimen">#dee2e0</div><div class="comment">alternative background</div></div>
<div><div id="colfg" class="specimen">#4a4b4e</div><div class="comment">main foreground</div></div>
<div><div id="colfgalt" class="specimen">#676364</div><div class="comment">alternative foreground</div></div>
<div><div id="colcr" class="specimen">#4a4b4e</div><div class="comment">cursor background</div></div>
<div><div id="colcr2" class="specimen">#eff0f2</div><div class="comment">cursor foreground</div></div>
</td>
</tr>
</table>
<h1>Tempus Totus Specimen</h1>
<table id="totus">
<tr>
<td>
<div><div id="col0" class="specimen">#4a484d</div><div class="comment">black variant</div></div>
<div><div id="col1" class="specimen">#a50000</div><div class="comment">red variant</div></div>
<div><div id="col2" class="specimen">#005d26</div><div class="comment">green variant</div></div>
<div><div id="col3" class="specimen">#714700</div><div class="comment">yellow variant</div></div>
<div><div id="col4" class="specimen">#1d3ccf</div><div class="comment">blue variant</div></div>
<div><div id="col5" class="specimen">#88267a</div><div class="comment">magenta variant</div></div>
<div><div id="col6" class="specimen">#185570</div><div class="comment">cyan variant</div></div>
<div><div id="col7" class="specimen">#efefef</div><div class="comment">white variant</div></div>
</td>
<td>
<div><div id="col8" class="specimen">#5e4b4f</div><div class="comment">bright black variant</div></div>
<div><div id="col9" class="specimen">#992030</div><div class="comment">bright red variant</div></div>
<div><div id="col10" class="specimen">#4a5500</div><div class="comment">bright green variant</div></div>
<div><div id="col11" class="specimen">#8a3600</div><div class="comment">bright yellow variant</div></div>
<div><div id="col12" class="specimen">#2d45b0</div><div class="comment">bright blue variant</div></div>
<div><div id="col13" class="specimen">#700dc9</div><div class="comment">bright magenta variant</div></div>
<div><div id="col14" class="specimen">#005289</div><div class="comment">bright cyan variant</div></div>
<div><div id="col15" class="specimen">#ffffff</div><div class="comment">bright white variant</div></div>
</td>
<td>
<div><div id="colbg" class="specimen">#ffffff</div><div class="comment">main background</div></div>
<div><div id="colbgalt" class="specimen">#efefef</div><div class="comment">alternative background</div></div>
<div><div id="colfg" class="specimen">#4a484d</div><div class="comment">main foreground</div></div>
<div><div id="colfgalt" class="specimen">#5e4b4f</div><div class="comment">alternative foreground</div></div>
<div><div id="colcr" class="specimen">#4a484d</div><div class="comment">cursor background</div></div>
<div><div id="colcr2" class="specimen">#ffffff</div><div class="comment">cursor foreground</div></div>
</td>
</tr>
</table>
<script>
const specimens = document.getElementsByClassName('specimen');
Array.prototype.forEach.call(specimens, specimen => {
specimen.onclick = (event) => {
const value = event.target.textContent;
navigator.clipboard.writeText(value);
}
});
</script>
</body>
</html>
|
