-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (144 loc) · 4.72 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>The NotoVerse</title>
<script src="jQuery-FontSpy.js"></script>
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@simoncozens" />
<meta property="og:title" content="The NotoVerse" />
<meta
property="og:description"
content="An overview of the Noto project, showing which Unicode codepoints are covered by Noto fonts."
/>
<meta
property="og:image"
content="https://notofonts.github.io/overview/overview.jpg"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<style>
#panes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
div svg {
display: block;
margin: auto;
}
.covered {
background-color: rgba(224, 242, 216, 0.3);
}
.empty {
background-color: rgba(242, 216, 217, 0.42);
}
.partial {
background-color: rgba(253, 245, 134, 0.2);
}
.bg-dark { background-color: #343a40!important; }
</style>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<div id="modal" class="modal" tabindex="-1">
<style id="anotofont"></style>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" id="modal-body"></div>
</div>
</div>
</div>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="order-0 mr-auto">
<a class="navbar-brand" href="#"> Noto Dashboard </a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/overview">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/analytics.html">Analytics</a>
</li>
</ul>
<p class="navbar-text ml-auto">
Coverage:
<span class="badge rounded-pill" style="background-color: olivedrab"
>One font</span
>
<span class="badge rounded-pill" style="background-color: darkgreen"
>Multiple fonts</span
>
<span class="badge rounded-pill" style="background-color: crimson"
>No fonts</span
>
<span class="badge rounded-pill" style="background-color: silver"
>Unassigned</span
>
<span class="badge rounded-pill" style="background-color: black"
>Special</span
>
<br>
<select id="sort" class="form-select form-select-sm mt-1">
<option value="cp">Sort by Codepoint</option>
<option value="alpha">Sort Alphabetical</option>
<option value="coverage">Sort by Coverage</option>
</select>
</p>
</div></div></nav>
<div class="container pt-5">
<p class="pt-2"></p>
<div id="panes"></div>
</div>
<footer class="border-top bg-dark">
<div class="container pt-2">
<div class="row">
<div class="col-6 col-md">
<small class="d-block mb-3 text-muted">
<a
class="link-secondary"
href="https://github.com/notofonts/overview/issues"
>Issues</a
>
</small>
</div>
<div class="col-6 col-md">
<small class="d-block mb-3 text-muted">
<a
class="link-secondary"
href="https://github.com/notofonts/overview/"
>Source</a
>
</small>
</div>
</div>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>