This repository has been archived by the owner on Jan 15, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
171 lines (171 loc) · 6.94 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>歌词高级弹幕生成器 - BiliLRCBuilder v1.3</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h2>BiliLRCBuilder v1.3</h2>
<h4 class="subtitle">LRC歌词 → bilibili高级弹幕</h4>
</div>
<div class="col-md-offset-2 col-md-8 maindiv maindiv-red">
<h3>Step1 在下面框内粘贴LRC歌词</h3>
<p>歌词需要符合LRC标准，否则可能转换失败。</p>
<p class="lrcboxw"><textarea placeholder="在这里粘贴入LRC歌词" id="lrcbox"></textarea></p>
</div>
<div class="col-md-offset-2 col-md-8 maindiv maindiv-orange">
<h3>Step2 选择歌词显示的样式</h3>
<p>如果你看不懂，就啥都不要改。直接跳过吧。</p>
<div class="lyric-preview">
<span>歌词效果预览</span>
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="position" class="col-md-2 control-label">歌词位置</label>
<div class="col-md-6">
<select id="position" class="form-control">
<option value="0" selected="selected">下部居中</option>
</select>
</div>
</div>
<div class="form-group">
<label for="posnum" class="col-md-2 control-label">位置微调</label>
<div class="col-md-6">
<input type="number" value="150" class="form-control" id="posnum">
<span class="help-block">范围：7-1080</span>
</div>
</div>
<div class="form-group">
<label for="fadetime" class="col-md-2 control-label">渐隐时间（秒）</label>
<div class="col-md-6">
<input type="input" value="0.1" id="fadetime" class="form-control">
</div>
</div>
<div class="form-group">
<label for="font" class="col-md-2 control-label">字体选择</label>
<div class="col-md-6">
<select id="font" class="form-control">
<option value="微软雅黑" selected="selected">微软雅黑</option>
<option value="黑体">黑体</option>
</select>
</div>
</div>
<div class="form-group">
<label for="fontsize" class="col-md-2 control-label">字 号</label>
<div class="col-md-6">
<input type="number" value="45" class="form-control" id="fontsize">
<span class="help-block">最小：12</span>
</div>
</div>
<div class="form-group">
<label for="fontbold" class="col-md-2 control-label">粗 体</label>
<div class="col-md-6">
<input type="checkbox" id="fontbold" class="form-control">
</div>
</div>
<div class="form-group">
<label for="fontcolor" class="col-md-2 control-label">字体颜色</label>
<div class="col-md-6">
<input type="color" value="#FFFFFF" class="form-control" id="fontcolor">
</div>
</div>
<div class="form-group">
<label for="shadowcolor" class="col-md-2 control-label">阴影颜色</label>
<div class="col-md-6">
<input type="color" value="#000000" class="form-control" id="shadowcolor">
</div>
</div>
<div class="form-group">
<label for="fonthcolor" class="col-md-2 control-label">字体光晕</label>
<div class="col-md-6">
<input type="color" value="#000000" class="form-control" id="fonthcolor">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">光晕参数<br>(无法预览)</label>
<div class="col-md-2">
<input type="number" value="1.0" class="form-control" id="fonthalpha">
<span class="help-block">不透明度，0~1之间小数。</span>
</div>
<div class="col-md-2">
<input type="number" value="2" class="form-control" id="fonthrx">
<span class="help-block">x方向半径</span>
</div>
<div class="col-md-2">
<input type="number" value="2" class="form-control" id="fonthry">
<span class="help-block">y方向半径</span>
</div>
<div class="col-md-2">
<input type="number" value="255" class="form-control" id="fonthstrength">
<span class="help-block">光晕强度</span>
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" id="fonthinner">
<span class="help-block">内发光</span>
</div>
</div>
<div class="form-group">
<label for="shadowhcolor" class="col-md-2 control-label">阴影光晕</label>
<div class="col-md-6">
<input type="color" value="#000000" class="form-control" id="shadowhcolor">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">光晕参数<br>(无法预览*)</label>
<div class="col-md-2">
<input type="number" value="1.0" class="form-control" id="shadowhalpha">
<span class="help-block">不透明度，0~1之间小数。</span>
</div>
<div class="col-md-2">
<input type="number" value="2" class="form-control" id="shadowhrx">
<span class="help-block">x方向半径</span>
</div>
<div class="col-md-2">
<input type="number" value="2" class="form-control" id="shadowhry">
<span class="help-block">y方向半径</span>
</div>
<div class="col-md-2">
<input type="number" value="2" class="form-control" id="shadowhstrength">
<span class="help-block">光晕强度</span>
</div>
<div class="col-md-2">
<input type="checkbox" class="form-control" id="shadowhinner">
<span class="help-block">内发光<br>(无法预览)</span>
</div>
<span class="help-block">
预览效果仅供参考以播放器实际渲染为准 <br>*阴影光晕使用css text-shadow粗略模拟预览
</span>
</div>
</form>
</div>
<div class="col-md-offset-2 col-md-8 maindiv maindiv-blue">
<h3>Step3 开始转换</h3>
<p>单击下面的按钮，然后就可以复制代码了。</p>
<div class="lrcboxw">
<button class="btn btn-primary btn-lg" id="start">开始转换</button>
</div>
<p><b>bilibili高级弹幕：</b></p>
<div class="lrcboxw">
<textarea placeholder="转换结果会显示在这里。" id="resultbox"></textarea>
</div>
</div>
</div>
</div>
<footer>
<p>BiliLRCBuilder v1.3</p>
<p>开发：<a href="http://blog.zyzsdy.com" target="_blank">zyzsdy</a></p>
<p>通过本页面生成的代码AutoBiliLyric 版本：1.3 作者：<a href="http://blog.zyzsdy.com" target="_blank">zyzsdy</a></p>
<p>本项目全部内容使用GPL v3协议授权，并仅可在bilibili弹幕视频网上使用。</p>
<p>不支持在低版本IE上使用。建议使用Chrome最新版本。</p>
<p>感谢：Eridanus Sora</p>
</footer>
</body>
</html>