-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (131 loc) · 8.16 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
<!doctype html>
<html lang="zh-Hans">
<head>
<base href="/" target="_blank">
<meta charset="utf-8">
<title>哔哩哔哩音频 - bilibili.audio</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="提取并下载哔哩哔哩视频弹幕网中视频的音频.">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="theme-color" content="#ec6e8f">
<link rel="shortcut icon" href="assets/images/favicon.png">
<link rel="stylesheet" href="assets/css/material.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/sweetalert.css" type="text/css">
<link rel="stylesheet" href="//fonts.guguke.net/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="//fonts.guguke.net/icon?family=Material+Icons" type="text/css">
<link rel="stylesheet" href="assets/css/main.min.css" type="text/css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/material.min.js"></script>
<script src="assets/js/lz-string.min.js"></script>
<script src="assets/js/sweetalert.min.js"></script>
<script src="assets/js/app.min.js"></script>
</head>
<body class="mdl-color--grey-100 mdl-base">
<div id="index-layout" class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--fixed mdl-color--pink-300 mdl-color-text--primary-contrast">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><img class="top-logo-ico" src="assets/images/logo_white.svg" alt="bili"><img class="top-logo-ico" src="assets/images/logo_white.svg" alt="bili">.audio</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">网址或 av 号</label>
</div>
</div>
</div>
</header>
<div class="main-ribbon mdl-color--pink-100"></div>
<main class="mdl-layout__content">
<div id="main-grid" class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="main-content mdl-card mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--10-col">
<div id="query" class="center">
<h2>哔哩哔哩音频<i>beta</i></h2>
<p class="mdl-color-text--grey-500">提取并下载哔哩哔哩视频弹幕网中视频的音频, 请复制粘贴您要下载内容的网址.</p>
<br/>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="uri" pattern="http:\/\/www\.bilibili\.com\/video\/av([0-9]+)\/(index_([0-9]+)\.html)?(\?.*)?">
<label class="mdl-textfield__label" for="uri">http://www.bilibili.com/video/av******</label>
<span class="mdl-textfield__error">请将您要下载的内容的网址完整地复制并粘贴到这里!</span>
</div>
</div>
<div id="loading-holder" class="center hidden">
<img class="loading active" src="assets/images/kaworu.gif"></img>
<div class="content">
<h3 class="mdl-color-text--grey-800">视频信息读取中, 请稍等...</h3>
<p class="mdl-color-text--grey-500">根据网络状况和服务器负载, 这可能需要一段时间...</p>
<br/>
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
</div>
<div id="video-info" class="hidden">
<section class="mdl-grid mdl-grid--no-spacing">
<header class="cover mdl-cell mdl-cell--5-col-desktop mdl-cell--3-col-tablet mdl-cell--4-col-phone mdl-color--teal-100 mdl-color-text--white">
<div class="play_hover">
<i id="play-btn" class="material-icons">play_circle_filled</i>
<div class="mdl-tooltip" for="play-btn">前往哔哩哔哩播放页</div>
</div>
</header>
<div class="mdl-card mdl-cell mdl-cell--7-col-desktop mdl-cell--5-col-tablet mdl-cell--4-col-phone">
<div id="video-basic-info" class="mdl-card__supporting-text">
<h4 class="title"></h4>
<div id="part-dropdown">
<button id="part-btn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
</button>
<div class="mdl-tooltip" for="part-btn">分段选择</div>
</div>
<button id="refresh-btn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">refresh</i>
</button>
<div class="mdl-tooltip" for="refresh-btn">刷新本地缓存</div>
<p class="data">
<span><i class="material-icons">face</i> <span class="author"></span></span>
<span><i class="material-icons">folder_special</i> <span class="type"></span></span>
<span><i class="material-icons">today</i> <span class="date"></span></span>
<span><i class="material-icons">play_circle_outline</i> <span class="play"></span></span>
<span><i class="material-icons">stars</i> <span class="favorites"></span></span>
</p>
<p class="data">
<i class="material-icons">loyalty</i>
<span class="tags"></span>
</p>
<p class="desc"></p>
</div>
</div>
<div id="audio-info" class="mdl-card mdl-cell mdl-card__actions mdl-card--border mdl-cell--12-col">
<img class="loading active" src="assets/images/kaworu.gif"></img>
<div class="content">
<div class="mdl-card__supporting-text">
<h4><i class="material-icons">music_video</i> 音频转换下载</h4>
<div class="center">
<h3 class="mdl-color-text--grey-800"></h3>
<p class="mdl-color-text--grey-500"></p>
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</div>
<div class="button-group hidden">
<button id="download-btn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">
<i class="material-icons" role="presentation">open_in_new</i> <span class="download"></span>
</button>
<button id="reload-btn" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
<i class="material-icons" role="presentation">refresh</i> 刷新服务器端存储
</button>
<div class="mdl-tooltip" for="reload-btn">当视频内容更新时使用</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="mdl-mini-footer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<div class="mdl-mini-footer--left-section">哔哩哔哩, bilibili, 及其标识是上海幻电信息科技有限公司在中国和/或其它国家的商标或注册商标.</div>
<div class="mdl-mini-footer--right-section">Copyright © Guguke 2015</div>
</footer>
</div>
</body>
</html>