-
Notifications
You must be signed in to change notification settings - Fork 6
/
template.html
118 lines (112 loc) · 2.5 KB
/
template.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
<!DOCTYPE html>
<html>
<head>
<title>BiliGet</title>
<meta charset='utf8'/>
<link href='static/favicon.ico' rel='icon' type='image/x-icon'/>
<style>
body{
font:14px/20px 'Microsoft YaHei',Arial,Helvetica,sans-serif;
background:#FFF url('static/bg.jpg') center no-repeat fixed;
}
#main{
padding:50px;
text-align:center;
position:fixed;
background:rgba(255,255,255,0.5);
width:600px;
height:400px;
top:50%;
left:50%;
margin:-250px 0 0 -350px;
border-radius:20px;
opacity:0;
}
#logo{
opacity:0.8;
margin:20px;
}
#result{
margin:10px;
height:160px;
overflow-y:auto;
overflow-x:hidden;
}
p{
margin:0;
padding:0;
}
a{
color:#36C;
text-decoration:none;
}
input[type='url']{
border:1px solid #DEDEDE;
background:rgba(255,255,255,0.8);
height:30px;
width:400px;
border-radius:5px;
padding:0 5px;
}
input[type='submit']{
height:30px;
}
</style>
</head>
<body >
<div id='main'>
<div id='logo'>
<img src='static/logo.png' width='400' height='179'/>
</div>
<form method='get' action='' onSubmit='return ajaxReturn()'>
<input type='url' id='url' placeholder='http://www.bilibili.tv/avxxxxxxx' autofocus required/>
<input type='submit' value='Get!'/>
</form>
<div id='result'></div>
</div>
<script>
var load = document.createElement('img');
load.src = 'static/loading.gif';
function $(id) {
return document.getElementById(id);
}
function show() {
var ele = $('main');
ele.style.opacity = 0;
(function() {
ele.style.opacity = parseFloat(ele.style.opacity) + 0.1;
if(parseFloat(ele.style.opacity) < 1) {
setTimeout(arguments.callee, 80);
}
})();
}
function ajaxReturn() {
var url = encodeURIComponent($('url').value);
var result = $('result');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
result.innerHTML = '';
result.style.textAlign = 'left';
data.forEach(function(e, i, a) {
result.innerHTML += '<p><a href="' + e + '">' + e + '</a></p>';
});
} else {
result.style.textAlign = 'center';
result.innerHTML = 'Σ( ° △ °|||';
}
}
}
xhr.open('GET', '?url=' + url, true);
xhr.send();
result.style.textAlign = 'center';
result.innerHTML = '';
result.appendChild(load);
return false;
}
show();
</script>
</body>
</html>