Hugging Face's logo

Spaces:
hanbaockd
/
blbl
Running

App Files Community
hanbaockd commited on
Commit
b4fee11
·
verified ·
1 Parent(s): 024699f

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +412 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Blbl
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: blbl
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,412 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>B站视频数据展示</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ bilibili: {
16
+ pink: '#FB7299',
17
+ blue: '#23ADE5',
18
+ dark: '#18191C',
19
+ }
20
+ },
21
+ fontFamily: {
22
+ sans: ['"HarmonyOS Sans"', 'sans-serif'],
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ <style>
29
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
30
+
31
+ body {
32
+ font-family: 'Noto Sans SC', sans-serif;
33
+ background-color: #f5f5f5;
34
+ }
35
+
36
+ .gradient-bg {
37
+ background: linear-gradient(135deg, #23ADE5 0%, #FB7299 100%);
38
+ }
39
+
40
+ .card-hover {
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .card-hover:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
47
+ }
48
+
49
+ .avatar-ring {
50
+ border: 3px solid #FB7299;
51
+ box-shadow: 0 0 0 3px rgba(251, 114, 153, 0.3);
52
+ }
53
+
54
+ .progress-bar {
55
+ height: 6px;
56
+ border-radius: 3px;
57
+ background-color: #e5e7eb;
58
+ overflow: hidden;
59
+ }
60
+
61
+ .progress-fill {
62
+ height: 100%;
63
+ border-radius: 3px;
64
+ background: linear-gradient(90deg, #FB7299, #23ADE5);
65
+ }
66
+
67
+ .word-cloud {
68
+ display: flex;
69
+ flex-wrap: wrap;
70
+ justify-content: center;
71
+ align-items: center;
72
+ padding: 20px;
73
+ min-height: 300px;
74
+ }
75
+
76
+ .word-cloud span {
77
+ display: inline-block;
78
+ margin: 5px;
79
+ padding: 5px 10px;
80
+ border-radius: 15px;
81
+ transition: all 0.3s ease;
82
+ }
83
+
84
+ .word-cloud span:hover {
85
+ transform: scale(1.2);
86
+ }
87
+
88
+ .level-badge {
89
+ display: inline-flex;
90
+ align-items: center;
91
+ justify-content: center;
92
+ width: 24px;
93
+ height: 24px;
94
+ border-radius: 50%;
95
+ color: white;
96
+ font-size: 12px;
97
+ font-weight: bold;
98
+ margin-right: 5px;
99
+ }
100
+
101
+ .level-1 { background-color: #cccccc; }
102
+ .level-2 { background-color: #99cc66; }
103
+ .level-3 { background-color: #3399ff; }
104
+ .level-4 { background-color: #9966cc; }
105
+ .level-5 { background-color: #ff9900; }
106
+ .level-6 { background-color: #ff6666; }
107
+ </style>
108
+ </head>
109
+ <body class="bg-gray-100">
110
+ <div class="min-h-screen">
111
+ <!-- 顶部导航 -->
112
+ <nav class="bg-white shadow-sm">
113
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
114
+ <div class="flex justify-between h-16">
115
+ <div class="flex items-center">
116
+ <div class="flex-shrink-0 flex items-center">
117
+ <i class="fab fa-bilibili text-3xl text-bilibili-pink"></i>
118
+ <span class="ml-2 text-xl font-bold text-gray-800">B站视频数据</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </nav>
124
+
125
+ <!-- 主要内容 -->
126
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
127
+ <!-- 视频基本信息 -->
128
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
129
+ <div class="p-6">
130
+ <div class="flex flex-col gap-6">
131
+ <div>
132
+ <h1 class="text-2xl font-bold text-gray-800 mb-2">这是一个示例视频标题</h1>
133
+ <p class="text-gray-600 mb-4">这里是视频的详细描述内容，可以展示视频的主要内容简介和相关信息。</p>
134
+
135
+ <div class="flex items-center text-sm text-gray-500 mb-4">
136
+ <span class="mr-4"><i class="fas fa-calendar-alt mr-1"></i> 上传时间: 2023-06-15</span>
137
+ <span><i class="fas fa-clock mr-1"></i> 视频时长: 12分34秒</span>
138
+ </div>
139
+
140
+ <div class="flex flex-wrap gap-2 mb-4">
141
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">科技</span>
142
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">数码</span>
143
+ <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">评测</span>
144
+ </div>
145
+
146
+ <div class="flex items-center">
147
+ <div>
148
+ <p class="font-medium">UP主名称</p>
149
+ <p class="text-sm text-gray-500">粉丝: 123,456</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- 数据概览 -->
158
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
159
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
160
+ <div class="p-6">
161
+ <div class="flex items-center">
162
+ <div class="p-3 rounded-full bg-blue-100 text-bilibili-blue">
163
+ <i class="fas fa-play-circle text-xl"></i>
164
+ </div>
165
+ <div class="ml-4">
166
+ <p class="text-sm font-medium text-gray-500">播放量</p>
167
+ <p class="text-2xl font-semibold text-gray-900">1,245,678</p>
168
+ </div>
169
+ </div>
170
+ <div class="progress-bar mt-4">
171
+ <div class="progress-fill" style="width: 100%"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
177
+ <div class="p-6">
178
+ <div class="flex items-center">
179
+ <div class="p-3 rounded-full bg-pink-100 text-bilibili-pink">
180
+ <i class="fas fa-heart text-xl"></i>
181
+ </div>
182
+ <div class="ml-4">
183
+ <p class="text-sm font-medium text-gray-500">点赞数</p>
184
+ <p class="text-2xl font-semibold text-gray-900">98,765</p>
185
+ </div>
186
+ </div>
187
+ <div class="progress-bar mt-4">
188
+ <div class="progress-fill" style="width: 80%"></div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
194
+ <div class="p-6">
195
+ <div class="flex items-center">
196
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
197
+ <i class="fas fa-star text-xl"></i>
198
+ </div>
199
+ <div class="ml-4">
200
+ <p class="text-sm font-medium text-gray-500">收藏数</p>
201
+ <p class="text-2xl font-semibold text-gray-900">56,789</p>
202
+ </div>
203
+ </div>
204
+ <div class="progress-bar mt-4">
205
+ <div class="progress-fill" style="width: 60%"></div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
211
+ <div class="p-6">
212
+ <div class="flex items-center">
213
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
214
+ <i class="fas fa-comment-dots text-xl"></i>
215
+ </div>
216
+ <div class="ml-4">
217
+ <p class="text-sm font-medium text-gray-500">弹幕数</p>
218
+ <p class="text-2xl font-semibold text-gray-900">34,567</p>
219
+ </div>
220
+ </div>
221
+ <div class="progress-bar mt-4">
222
+ <div class="progress-fill" style="width: 40%"></div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- 观众分析 -->
229
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
230
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
231
+ <div class="p-6">
232
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">观众性别分布</h2>
233
+ <div class="flex justify-center">
234
+ <div class="w-48 h-48 rounded-full border-8 border-bilibili-pink relative">
235
+ <div class="absolute inset-0 rounded-full border-8 border-bilibili-blue clip-circle" style="clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: rotate(140deg);"></div>
236
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
237
+ <span class="text-2xl font-bold">62%</span>
238
+ <span class="text-sm text-gray-500">男性</span>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="mt-6 flex justify-center space-x-8">
243
+ <div class="flex items-center">
244
+ <div class="w-3 h-3 rounded-full bg-bilibili-pink mr-2"></div>
245
+ <span class="text-sm text-gray-600">男性: 62%</span>
246
+ </div>
247
+ <div class="flex items-center">
248
+ <div class="w-3 h-3 rounded-full bg-bilibili-blue mr-2"></div>
249
+ <span class="text-sm text-gray-600">女性: 38%</span>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover lg:col-span-2">
256
+ <div class="p-6">
257
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">观众等级分布</h2>
258
+ <div class="flex flex-wrap gap-4">
259
+ <div class="flex-1 min-w-[120px]">
260
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
261
+ <div class="absolute bottom-0 left-0 right-0 bg-bilibili-pink" style="height: 30%;"></div>
262
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
263
+ <span class="level-badge level-1">1</span>
264
+ <span class="text-sm font-medium">Lv1</span>
265
+ <p class="text-xl font-bold">30%</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ <div class="flex-1 min-w-[120px]">
270
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
271
+ <div class="absolute bottom-0 left-0 right-0 bg-bilibili-blue" style="height: 45%;"></div>
272
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
273
+ <span class="level-badge level-2">2</span>
274
+ <span class="text-sm font-medium">Lv2</span>
275
+ <p class="text-xl font-bold">45%</p>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ <div class="flex-1 min-w-[120px]">
280
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
281
+ <div class="absolute bottom-0 left-0 right-0 bg-purple-500" style="height: 60%;"></div>
282
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
283
+ <span class="level-badge level-3">3</span>
284
+ <span class="text-sm font-medium">Lv3</span>
285
+ <p class="text-xl font-bold">60%</p>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ <div class="flex-1 min-w-[120px]">
290
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
291
+ <div class="absolute bottom-0 left-0 right-0 bg-green-500" style="height: 50%;"></div>
292
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
293
+ <span class="level-badge level-4">4</span>
294
+ <span class="text-sm font-medium">Lv4</span>
295
+ <p class="text-xl font-bold">50%</p>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ <div class="flex-1 min-w-[120px]">
300
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
301
+ <div class="absolute bottom-0 left-0 right-0 bg-yellow-500" style="height: 35%;"></div>
302
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
303
+ <span class="level-badge level-5">5</span>
304
+ <span class="text-sm font-medium">Lv5</span>
305
+ <p class="text-xl font-bold">35%</p>
306
+ </div>
307
+ </div>
308
+ </div>
309
+ <div class="flex-1 min-w-[120px]">
310
+ <div class="h-32 bg-gray-100 rounded-lg relative overflow-hidden">
311
+ <div class="absolute bottom-0 left-0 right-0 bg-red-500" style="height: 20%;"></div>
312
+ <div class="absolute top-1/2 left-0 right-0 text-center transform -translate-y-1/2">
313
+ <span class="level-badge level-6">6</span>
314
+ <span class="text-sm font-medium">Lv6</span>
315
+ <p class="text-xl font-bold">20%</p>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- 词云分析 -->
325
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
326
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
327
+ <div class="p-6">
328
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">弹幕词云</h2>
329
+ <div class="word-cloud">
330
+ <span style="font-size: 24px; color: #FB7299;">哈哈哈</span>
331
+ <span style="font-size: 18px; color: #23ADE5;">666</span>
332
+ <span style="font-size: 30px; color: #FF9900;">太强了</span>
333
+ <span style="font-size: 16px; color: #9966CC;">前排</span>
334
+ <span style="font-size: 22px; color: #3399FF;">好活</span>
335
+ <span style="font-size: 28px; color: #FF6666;">awsl</span>
336
+ <span style="font-size: 20px; color: #99CC66;">打卡</span>
337
+ <span style="font-size: 18px; color: #CC99CC;">泪目</span>
338
+ <span style="font-size: 26px; color: #FF9966;">三连</span>
339
+ <span style="font-size: 24px; color: #6699CC;">支持</span>
340
+ <span style="font-size: 18px; color: #CCCC99;">来了</span>
341
+ <span style="font-size: 22px; color: #FFCC66;">好耶</span>
342
+ <span style="font-size: 16px; color: #99CC99;">爱了</span>
343
+ <span style="font-size: 20px; color: #CC9966;">爷青回</span>
344
+ <span style="font-size: 26px; color: #FF6699;">神仙</span>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
350
+ <div class="p-6">
351
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">评论词云</h2>
352
+ <div class="word-cloud">
353
+ <span style="font-size: 22px; color: #23ADE5;">支持UP主</span>
354
+ <span style="font-size: 28px; color: #FB7299;">太棒了</span>
355
+ <span style="font-size: 18px; color: #9966CC;">学到了</span>
356
+ <span style="font-size: 24px; color: #FF9900;">干货满满</span>
357
+ <span style="font-size: 20px; color: #3399FF;">期待下一期</span>
358
+ <span style="font-size: 30px; color: #FF6666;">三连了</span>
359
+ <span style="font-size: 16px; color: #99CC66;">感谢分享</span>
360
+ <span style="font-size: 22px; color: #CC99CC;">太专业了</span>
361
+ <span style="font-size: 26px; color: #FF9966;">收藏了</span>
362
+ <span style="font-size: 18px; color: #6699CC;">讲得真好</span>
363
+ <span style="font-size: 24px; color: #CCCC99;">受益匪浅</span>
364
+ <span style="font-size: 20px; color: #FFCC66;">高质量内容</span>
365
+ <span style="font-size: 16px; color: #99CC99;">支持一下</span>
366
+ <span style="font-size: 22px; color: #CC9966;">继续加油</span>
367
+ <span style="font-size: 26px; color: #FF6699;">太用心了</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- 互动数据 -->
374
+ <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover mb-8">
375
+ <div class="p-6">
376
+ <h2 class="text-lg font-semibold text-gray-800 mb-4">互动数据</h2>
377
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
378
+ <div class="bg-gray-50 p-4 rounded-lg">
379
+ <div class="flex items-center justify-between mb-2">
380
+ <span class="text-sm font-medium text-gray-600">投币数</span>
381
+ <i class="fas fa-coins text-yellow-500"></i>
382
+ </div>
383
+ <p class="text-2xl font-bold">23,456</p>
384
+ </div>
385
+ <div class="bg-gray-50 p-4 rounded-lg">
386
+ <div class="flex items-center justify-between mb-2">
387
+ <span class="text-sm font-medium text-gray-600">分享数</span>
388
+ <i class="fas fa-share-alt text-blue-500"></i>
389
+ </div>
390
+ <p class="text-2xl font-bold">12,345</p>
391
+ </div>
392
+ <div class="bg-gray-50 p-4 rounded-lg">
393
+ <div class="flex items-center justify-between mb-2">
394
+ <span class="text-sm font-medium text-gray-600">评论数</span>
395
+ <i class="fas fa-comments text-green-500"></i>
396
+ </div>
397
+ <p class="text-2xl font-bold">8,765</p>
398
+ </div>
399
+ <div class="bg-gray-50 p-4 rounded-lg">
400
+ <div class="flex items-center justify-between mb-2">
401
+ <span class="text-sm font-medium text-gray-600">三连数</span>
402
+ <i class="fas fa-trophy text-purple-500"></i>
403
+ </div>
404
+ <p class="text-2xl font-bold">5,678</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </main>
410
+ </div>
411
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hanbaockd/blbl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
412
+ </html>