-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
120 lines (119 loc) · 2.12 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>midi-dump | g200kg</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@500&display=swap" rel="stylesheet">
<style>
.adr{
color:#6cc;
}
.dltbytes{
color:#bbb;
}
.Chunk{
color:#f0a;
}
.On{
color:#ff0;
}
.Off{
color:#f60;
}
.Prog{
color:#f00;
}
.Ctl{
color:#2ff;
}
.Other{
color:#f0f;
}
.delta{
color:#cc0;
}
.meta{
color:#0f0
}
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
background:#234;
color:#ddf;
margin:0;
font-family: 'Roboto Mono', monospace;
font-size:13px;
}
body a{
color:#fff;
}
h1 {
margin:5px 0px 0px 10px;
font-family: 'Lora', serif;
font-size:40px;
height:65px;
}
#base{
width:900px;
height:fit-content;
background:#000;
margin:110px auto;
padding:8px;
}
#text{
color:#fff;
width: 100%;;
min-height:100px;
margin:0;
padding:0;
white-space: pre-wrap;
}
#filelabel{
background:#468;
border:1px solid #ccf;
padding:2px 8px;
margin-left:10px;
}
#filelabel:hover{
background:#ccf;
color:#123;
}
.param2{
display:inline-block;
vertical-align:top;
width:320px;
word-wrap:break-word;
overflow-wrap:anywhere;
}
#header{
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background:#123;
}
</style>
</head>
<body>
<div id="header">
<h1>MIDI-Dump</h1>
<div style="position:absolute;right:10px;top:0px"> Repository : <a href="https://github.com/g200kg/midi-dump" target="_blank">https://github.com/g200kg/midi-dump</a></div>
<input id="file" type="file" style="display:none"/> <label id="filelabel" for="file">Select File : <span id="filename"></span></span></label><br/>
</div>
<div id="base">
<div id="text">
--- Drop MIDI (SMF) file Here or Open from 'SelectFile' menu. ---
</div>
<br/>
<button id="dumpall" style="height:30px;width:120px;display:none" onclick="DumpAll()">Dump All</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/encoding-japanese/1.0.30/encoding.min.js"></script>
<script src="./mididump.js"></script>
</body>
</html>