forked from mathew-kurian/CharacterMap
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (85 loc) · 4.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base target="_frame"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CharMap - Powered by OpenType.js</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'/>
<link href='public/css/index.css' rel='stylesheet' type='text/css'/>
<script src="public/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="public/js/jquery.nicescroll.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/0.4.4/opentype.min.js"></script>
<script src="public/js/index.js" type="text/javascript"></script>
</head>
<body>
<div style="position:fixed;top:0;right:0;left:0;bottom:0;width:200px;background:#171D25;padding:20px;">
<div style="position:absolute;bottom:0;left:0;right:0;height:60px;padding:0 20px;z-index:3;">
<div style="font-size: 10px;color:#999;font-weight: 600;letter-spacing:1px;text-transform:uppercase;text-align:center;position:relative;line-height:60px;">
Powered By OpenType.js
</div>
</div>
<div style="position:absolute;top:0;left:0;right:0;height:40px;box-shadow:0 -1px 3px rgba(0,0,0,0.2);z-index:3;background:#171D25;padding:15px;">
<div class="browse-wrap" style="position:relative;height:40px;border-radius:4px;">
<div class="title" id="font-family" style="text-align:center;line-height:40px;">Select font</div>
<input id="file" type="file" name="upload" class="upload" title="select font"/>
</div>
</div>
<div style="position:absolute;top:55px;left:0;right:0;bottom:40px;z-index:2;padding:15px;">
<div class="nicescroll-left"
style="overflow:auto;height:100%;overflow-x:hidden;border-radius:5px;border:1px solid rgba(255, 255, 255, 0.07);background: rgba(255, 255, 255, 0.02);">
<div id="pagination"></div>
</div>
</div>
</div>
<div style="position:fixed;left:200px;width:475px;top:0;bottom:0;background:#1D242E;padding:20px;">
<div style="position:absolute;top:20px;left:0;right:0;bottom:0;z-index:2;">
<div class="nicescroll-center" style="overflow:auto;height:100%;overflow-x:hidden;padding:20px;padding-top:0;">
<div style="font-size: 25px;margin-top:5px;color:#5B6971;font-weight: 100;letter-spacing:1px;text-align:left;margin-bottom:15px;">
Font
</div>
<div id="font-data"></div>
<div style="font-size: 25px;margin-top:10px;color:#5B6971;font-weight: 100;letter-spacing:1px;text-align:left;margin-bottom:20px;">
Character <input id="copy-char"
style="border:none;color:#14bfff;border-bottom:1px dotted rgba(255,255,255,0.5);background:transparent;font-size:15px;border-radius:2px;font-weight:600;position:relative;top:-4px;left:5px;width:30px;height:30px;text-align:center;outline:none;font-family:Arial;"/>
</div>
<div id="glyph-display" style="position:relative;">
<canvas id="glyph-bg" width="420" height="310"></canvas>
<canvas id="glyph" width="300" height="300"></canvas>
</div>
<div id="glyph-data"></div>
</div>
</div>
</div>
<div style="position:fixed;left:675px;right:0;top:0;bottom:0;background: #FFF;">
<div style="position:absolute;top:0;left:0;right:0;height:80px;padding:20px;box-shadow:inset 0 -1px 0 #EEE;z-index:3;background:#FFF;">
<div style="font-size: 25px;margin-top:5px;color:#BBB;font-weight: 100;letter-spacing:1px;text-align:left;">
Glyphs
</div>
</div>
<div style="position:absolute;top:80px;left:0;right:0;bottom:0;z-index:2;">
<div class="nicescroll-right" style="overflow:auto;height:100%;overflow-x:hidden;">
<div id="glyph-list-end"></div>
</div>
</div>
</div>
<div>
<div id="message"></div>
</div>
</body>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-76818095-1', 'auto');
ga('send', 'pageview');
</script>
</html>