Hugging Face's logo

Spaces:
chaojie
/
n2v
Running

App Files Community
chaojie commited on
Commit
0bd80f1
·
verified ·
1 Parent(s): 6d378e2

完善各板块功能 - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +833 -452
index.html CHANGED
@@ -6,17 +6,58 @@
6
  <title>视频制作全流程工具集</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
  <style>
10
  .gradient-bg {
11
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 
 
 
12
  }
13
  .tool-card:hover {
14
  transform: translateY(-5px);
15
- box-shadow: 0 10px 20px rgba(0,0,0,0.2);
16
  }
17
  .progress-step.active {
18
- background-color: #4f46e5;
19
  color: white;
 
20
  }
21
  .progress-step.completed {
22
  background-color: #10b981;
@@ -25,588 +66,870 @@
25
  .sidebar {
26
  transition: all 0.3s ease;
27
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  @media (max-width: 768px) {
29
  .sidebar {
30
  transform: translateX(-100%);
31
  position: fixed;
32
  z-index: 50;
33
  height: 100vh;
 
 
34
  }
35
  .sidebar.open {
36
  transform: translateX(0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
  }
38
  }
39
  </style>
40
  </head>
41
- <body class="bg-gray-50 font-sans">
42
  <!-- 移动端菜单按钮 -->
43
  <div class="md:hidden fixed top-4 left-4 z-50">
44
- <button id="menuBtn" class="p-2 rounded-md bg-indigo-600 text-white">
45
- <i class="fas fa-bars"></i>
46
  </button>
47
  </div>
48
 
49
  <!-- 侧边栏 -->
50
- <div id="sidebar" class="sidebar w-64 bg-white shadow-md fixed h-full md:relative">
51
- <div class="p-4 gradient-bg text-white relative">
52
  <div class="md:hidden absolute top-4 right-4">
53
- <button id="closeSidebar" class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
54
  <i class="fas fa-times"></i>
55
  </button>
56
  </div>
57
- <h1 class="text-2xl font-bold flex items-center">
58
- <i class="fas fa-video mr-2"></i> 视频工坊
59
- </h1>
60
- <p class="text-sm opacity-80 mt-1">一站式视频制作解决方案</p>
 
 
 
 
 
61
  </div>
62
 
63
- <div class="p-4">
 
64
  <div class="mb-6">
65
- <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">当前项目</h3>
66
- <div class="bg-indigo-50 rounded-lg p-3">
67
- <p class="text-sm font-medium text-indigo-800">旅行Vlog制作</p>
68
- <div class="flex justify-between items-center mt-2">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  <div class="w-full bg-gray-200 rounded-full h-2">
70
- <div class="bg-indigo-600 h-2 rounded-full" style="width: 45%"></div>
71
  </div>
72
- <span class="text-xs ml-2 text-gray-600">45%</span>
73
  </div>
74
  </div>
75
  </div>
76
 
77
- <nav>
78
- <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">制作流程</h3>
79
- <ul class="space-y-1">
 
80
  <li>
81
- <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-100 text-indigo-700">
82
- <i class="fas fa-lightbulb mr-3"></i> 构思创意
 
 
 
 
83
  </a>
84
  </li>
85
  <li>
86
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
87
- <i class="fas fa-search mr-3"></i> 资料收集
 
 
 
 
88
  </a>
89
  </li>
90
  <li>
91
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
92
- <i class="fas fa-list-ol mr-3"></i> 分镜制作
 
 
 
93
  </a>
94
  </li>
95
  <li>
96
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
97
- <i class="fas fa-cut mr-3"></i> 视频剪辑
 
 
 
98
  </a>
99
  </li>
100
  <li>
101
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
102
- <i class="fas fa-microphone mr-3"></i> 配音配乐
 
 
 
103
  </a>
104
  </li>
105
  <li>
106
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
107
- <i class="fas fa-upload mr-3"></i> 发布导出
 
 
 
108
  </a>
109
  </li>
110
  </ul>
111
  </nav>
112
 
113
- <div class="mt-6">
114
- <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">探索</h3>
115
- <ul class="space-y-1 mb-4">
116
- <li>
117
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
118
- <i class="fas fa-compass mr-3"></i> 发现模板
119
- </a>
120
- </li>
121
- <li>
122
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
123
- <i class="fas fa-chart-line mr-3"></i> 热门趋势
124
- </a>
125
- </li>
126
- <li>
127
- <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100 text-gray-700">
128
- <i class="fas fa-graduation-cap mr-3"></i> 学习中心
129
- </a>
130
- </li>
131
- </ul>
132
-
133
- <h3 class="text-xs uppercase font-semibold text-gray-500 mb-2">快捷工具</h3>
134
- <div class="grid grid-cols-2 gap-2">
135
- <button class="p-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
136
- <i class="fas fa-ruler-combined mr-1"></i> 比例调整
137
  </button>
138
- <button class="p-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
139
- <i class="fas fa-subscript mr-1"></i> 字幕工具
 
 
 
140
  </button>
141
- <button class="p-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
142
- <i class="fas fa-palette mr-1"></i> 调色板
 
 
 
143
  </button>
144
- <button class="p-2 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
145
- <i class="fas fa-wave-square mr-1"></i> 音频波形
 
 
 
146
  </button>
147
  </div>
148
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  </div>
150
  </div>
151
 
152
  <!-- 主内容区 -->
153
- <div class="md:ml-64">
154
  <!-- 顶部导航 -->
155
- <header class="bg-white shadow-sm">
156
- <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
157
  <div>
158
- <h2 class="text-xl font-semibold text-gray-800">视频构思与规划</h2>
159
- <p class="text-sm text-gray-500">为您的视频项目制定创意和计划</p>
 
 
 
160
  </div>
161
 
162
  <div class="flex items-center space-x-4">
163
- <div class="relative">
164
- <button class="p-2 rounded-full hover:bg-gray-100">
165
- <i class="fas fa-bell text-gray-600"></i>
166
- <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
167
- </button>
168
- </div>
169
- <div class="flex items-center">
170
- <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
171
- <span class="ml-2 text-sm font-medium">用户</span>
172
- </div>
173
  </div>
174
  </div>
175
  </header>
176
 
177
  <!-- 进度条 -->
178
- <div class="bg-white shadow-sm mt-2">
179
- <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
180
  <div class="flex justify-between items-center">
181
- <div class="flex space-x-4 overflow-x-auto py-2">
182
- <div class="progress-step active flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full border-2 border-indigo-600">
183
- 1
 
 
 
 
 
 
184
  </div>
185
- <div class="flex-shrink-0 flex items-center">
186
- <div class="h-1 w-8 bg-gray-200"></div>
 
 
 
 
 
 
187
  </div>
188
- <div class="progress-step flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300">
189
- 2
 
 
 
190
  </div>
191
- <div class="flex-shrink-0 flex items-center">
192
- <div class="h-1 w-8 bg-gray-200"></div>
193
  </div>
194
- <div class="progress-step flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300">
195
- 3
 
 
 
196
  </div>
197
- <div class="flex-shrink-0 flex items-center">
198
- <div class="h-1 w-8 bg-gray-200"></div>
199
  </div>
200
- <div class="progress-step flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300">
201
- 4
 
 
 
202
  </div>
203
- <div class="flex-shrink-0 flex items-center">
204
- <div class="h-1 w-8 bg-gray-200"></div>
205
  </div>
206
- <div class="progress-step flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full border-2 border-gray-300">
207
- 5
 
 
 
208
  </div>
209
  </div>
210
- <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium">
211
- 保存并继续 <i class="fas fa-arrow-right ml-1"></i>
212
  </button>
213
  </div>
214
  </div>
215
  </div>
216
 
217
  <!-- 主内容 -->
218
- <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
219
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
220
- <!-- 构思工具 -->
221
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
222
- <div class="gradient-bg p-4 text-white">
223
- <div class="flex justify-between items-center">
224
- <h3 class="text-lg font-semibold">
225
- <i class="fas fa-lightbulb mr-2"></i> 视频构思
226
- </h3>
227
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
228
- <i class="fas fa-expand"></i>
229
- </button>
230
- </div>
231
- <p class="text-sm opacity-90 mt-1">确定视频主题、风格和目标观众</p>
232
- </div>
233
- <div class="p-4">
234
- <div class="mb-4">
235
- <label class="block text-sm font-medium text-gray-700 mb-1">视频主题</label>
236
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="例如：夏威夷旅行日记">
237
- </div>
238
- <div class="mb-4">
239
- <label class="block text-sm font-medium text-gray-700 mb-1">视频风格</label>
240
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
241
- <option>Vlog</option>
242
- <option>教程</option>
243
- <option>纪录片</option>
244
- <option>宣传片</option>
245
- <option>短视频</option>
246
- </select>
247
- </div>
248
- <div class="mb-4">
249
- <label class="block text-sm font-medium text-gray-700 mb-1">目标观众</label>
250
- <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="例如：18-35岁旅行爱好者">
251
- </div>
252
- <div>
253
- <label class="block text-sm font-medium text-gray-700 mb-1">视频描述</label>
254
- <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="详细描述您的视频内容..."></textarea>
255
- </div>
256
- </div>
257
  </div>
258
-
259
- <!-- 资料收集 -->
260
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
261
- <div class="bg-emerald-600 p-4 text-white">
262
- <div class="flex justify-between items-center">
263
- <h3 class="text-lg font-semibold">
264
- <i class="fas fa-search mr-2"></i> 资料收集
265
- </h3>
266
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
267
- <i class="fas fa-expand"></i>
268
- </button>
269
- </div>
270
- <p class="text-sm opacity-90 mt-1">收集视频素材、参考资料和灵感</p>
271
- </div>
272
- <div class="p-4">
273
- <div class="mb-4">
274
- <div class="flex justify-between items-center mb-2">
275
- <label class="text-sm font-medium text-gray-700">素材上传</label>
276
- <button class="text-xs text-emerald-600 hover:text-emerald-800">
277
- <i class="fas fa-plus mr-1"></i> 添加
278
  </button>
279
  </div>
280
- <div class="border-2 border-dashed border-gray-300 rounded-md p-4 text-center">
281
- <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
282
- <p class="text-sm text-gray-500">拖放文件或点击上传</p>
283
- <p class="text-xs text-gray-400 mt-1">支持MP4, MOV, JPG, PNG等格式</p>
284
- </div>
285
  </div>
286
- <div class="mb-4">
287
- <label class="block text-sm font-medium text-gray-700 mb-2">参考链接</label>
288
- <div class="space-y-2">
289
- <div class="flex items-center">
290
- <input type="text" class="flex-1 px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 text-sm" placeholder="添加参考链接">
291
- <button class="ml-2 p-1 bg-emerald-600 text-white rounded-md hover:bg-emerald-700">
292
- <i class="fas fa-plus"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  </button>
294
  </div>
295
- <div class="text-xs text-gray-500">例如：YouTube视频、文章、图片等</div>
296
  </div>
297
  </div>
298
- <div>
299
- <label class="block text-sm font-medium text-gray-700 mb-2">灵感板</label>
300
- <div class="grid grid-cols-3 gap-2">
301
- <div class="h-16 bg-gray-100 rounded-md flex items-center justify-center">
302
- <i class="fas fa-image text-gray-400"></i>
303
- </div>
304
- <div class="h-16 bg-gray-100 rounded-md flex items-center justify-center">
305
- <i class="fas fa-image text-gray-400"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
306
  </div>
307
- <div class="h-16 bg-gray-100 rounded-md flex items-center justify-center">
308
- <i class="fas fa-plus text-gray-400"></i>
 
 
 
 
 
 
 
 
 
 
 
309
  </div>
310
  </div>
311
  </div>
312
  </div>
313
- </div>
314
-
315
- <!-- 分镜制作 -->
316
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
317
- <div class="bg-amber-600 p-4 text-white">
318
- <div class="flex justify-between items-center">
319
- <h3 class="text-lg font-semibold">
320
- <i class="fas fa-list-ol mr-2"></i> 分镜制作
321
- </h3>
322
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
323
- <i class="fas fa-expand"></i>
324
- </button>
325
- </div>
326
- <p class="text-sm opacity-90 mt-1">规划视频场景和镜头顺序</p>
327
- </div>
328
- <div class="p-4">
329
- <div class="mb-4">
330
- <div class="flex justify-between items-center mb-2">
331
- <label class="text-sm font-medium text-gray-700">分镜列表</label>
332
- <button class="text-xs text-amber-600 hover:text-amber-800">
333
- <i class="fas fa-plus mr-1"></i> 添加场景
334
  </button>
335
  </div>
336
- <div class="space-y-2">
337
- <div class="flex items-start p-2 bg-amber-50 rounded-md">
338
- <div class="flex-shrink-0 mt-1">
339
- <div class="w-6 h-6 rounded-full bg-amber-200 text-amber-800 flex items-center justify-center text-xs font-bold">1</div>
340
- </div>
341
- <div class="ml-2 flex-1">
342
- <div class="text-sm font-medium">开场镜头</div>
343
- <div class="text-xs text-gray-500">海滩全景，日出场景</div>
344
- </div>
345
- <button class="text-gray-400 hover:text-gray-600">
346
- <i class="fas fa-ellipsis-v"></i>
347
- </button>
348
- </div>
349
- <div class="flex items-start p-2 hover:bg-gray-50 rounded-md">
350
- <div class="flex-shrink-0 mt-1">
351
- <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-800 flex items-center justify-center text-xs font-bold">2</div>
352
- </div>
353
- <div class="ml-2 flex-1">
354
- <div class="text-sm font-medium">人物介绍</div>
355
- <div class="text-xs text-gray-500">主持人面对镜头自我介绍</div>
356
- </div>
357
- <button class="text-gray-400 hover:text-gray-600">
358
- <i class="fas fa-ellipsis-v"></i>
359
- </button>
360
  </div>
361
- <div class="flex items-start p-2 hover:bg-gray-50 rounded-md">
362
- <div class="flex-shrink-0 mt-1">
363
- <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-800 flex items-center justify-center text-xs font-bold">3</div>
 
 
 
 
 
364
  </div>
365
- <div class="ml-2 flex-1">
366
- <div class="text-sm font-medium">活动展示</div>
367
- <div class="text-xs text-gray-500">冲浪、浮潜等活动镜头</div>
368
  </div>
369
- <button class="text-gray-400 hover:text-gray-600">
370
- <i class="fas fa-ellipsis-v"></i>
371
- </button>
372
- </div>
373
- </div>
374
- </div>
375
- <div>
376
- <label class="block text-sm font-medium text-gray-700 mb-2">分镜详情</label>
377
- <div class="border border-gray-200 rounded-md p-3">
378
- <div class="flex justify-between items-center mb-2">
379
- <div class="text-sm font-medium">场景1: 开场镜头</div>
380
- <div class="text-xs text-gray-500">预计时长: 5秒</div>
381
- </div>
382
- <div class="text-xs text-gray-600 mb-3">
383
- <p>海滩全景，日出场景，背景音乐渐入</p>
384
- </div>
385
- <div class="flex items-center text-xs text-gray-500">
386
- <i class="fas fa-image mr-1"></i>
387
- <span class="mr-3">素材: beach_sunrise.mp4</span>
388
- <i class="fas fa-music mr-1"></i>
389
- <span>音乐: morning_theme.mp3</span>
390
  </div>
391
  </div>
392
  </div>
393
  </div>
394
  </div>
395
  </div>
396
-
397
- <!-- 剪辑和配音工具 -->
398
- <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
399
- <!-- 视频剪辑 -->
400
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
401
- <div class="bg-purple-600 p-4 text-white">
402
- <div class="flex justify-between items-center">
403
- <h3 class="text-lg font-semibold">
404
- <i class="fas fa-cut mr-2"></i> 视频剪辑
405
- </h3>
406
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
407
- <i class="fas fa-expand"></i>
408
- </button>
409
- </div>
410
- <p class="text-sm opacity-90 mt-1">编辑和组合您的视频素材</p>
411
  </div>
412
- <div class="p-4">
413
  <div class="mb-4">
414
- <div class="flex justify-between items-center mb-2">
415
- <label class="text-sm font-medium text-gray-700">时间轴</label>
416
- <div class="flex space-x-2">
417
- <button class="p-1 text-purple-600 hover:text-purple-800">
418
- <i class="fas fa-plus"></i>
419
- </button>
420
- <button class="p-1 text-purple-600 hover:text-purple-800">
421
- <i class="fas fa-minus"></i>
422
- </button>
423
- </div>
424
- </div>
425
- <div class="bg-gray-100 rounded-md p-3">
426
- <div class="flex items-center mb-2">
427
- <div class="w-16 text-xs text-gray-500">视频轨</div>
428
- <div class="flex-1 h-8 bg-purple-200 rounded"></div>
429
- </div>
430
- <div class="flex items-center mb-2">
431
- <div class="w-16 text-xs text-gray-500">音频轨</div>
432
- <div class="flex-1 h-4 bg-blue-200 rounded"></div>
433
- </div>
434
- <div class="flex items-center">
435
- <div class="w-16 text-xs text-gray-500">音乐轨</div>
436
- <div class="flex-1 h-4 bg-green-200 rounded"></div>
437
- </div>
438
- </div>
439
  </div>
440
- <div class="grid grid-cols-4 gap-2">
441
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
442
- <i class="fas fa-crop-alt text-purple-600 mb-1"></i>
443
- <p class="text-xs">裁剪</p>
444
- </button>
445
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
446
- <i class="fas fa-exchange-alt text-purple-600 mb-1"></i>
447
- <p class="text-xs">转场</p>
448
- </button>
449
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
450
- <i class="fas fa-text-height text-purple-600 mb-1"></i>
451
- <p class="text-xs">字幕</p>
452
- </button>
453
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
454
- <i class="fas fa-sliders-h text-purple-600 mb-1"></i>
455
- <p class="text-xs">滤镜</p>
456
- </button>
457
  </div>
458
  </div>
459
- </div>
460
-
461
- <!-- 配音配乐 -->
462
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
463
- <div class="bg-blue-600 p-4 text-white">
464
- <div class="flex justify-between items-center">
465
- <h3 class="text-lg font-semibold">
466
- <i class="fas fa-microphone mr-2"></i> 配音配乐
467
- </h3>
468
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
469
- <i class="fas fa-expand"></i>
470
- </button>
471
- </div>
472
- <p class="text-sm opacity-90 mt-1">为视频添加声音和音乐</p>
473
  </div>
474
- <div class="p-4">
475
- <div class="mb-4">
476
- <div class="flex justify-between items-center mb-2">
477
- <label class="text-sm font-medium text-gray-700">录音</label>
478
- <button class="text-xs text-blue-600 hover:text-blue-800">
479
- <i class="fas fa-headphones mr-1"></i> 监听
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
480
  </button>
481
  </div>
482
- <div class="flex items-center space-x-2">
483
- <button class="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700">
484
- <i class="fas fa-microphone"></i>
 
 
 
 
 
485
  </button>
486
- <div class="flex-1 bg-gray-100 rounded-full h-3">
487
- <div class="bg-blue-400 h-3 rounded-full" style="width: 30%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
488
  </div>
489
- <button class="p-2 bg-gray-200 rounded-full hover:bg-gray-300">
490
- <i class="fas fa-stop text-gray-600"></i>
491
- </button>
492
  </div>
493
- <div class="text-xs text-gray-500 mt-2">点击麦克风按钮开始录音</div>
494
  </div>
495
- <div class="mb-4">
496
- <label class="block text-sm font-medium text-gray-700 mb-2">音乐库</label>
497
- <div class="flex items-center">
498
- <input type="text" class="flex-1 px-3 py-1 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm" placeholder="搜索音乐">
499
- <button class="px-3 py-1 bg-blue-600 text-white rounded-r-md hover:bg-blue-700">
500
- <i class="fas fa-search"></i>
 
 
 
 
 
501
  </button>
502
  </div>
503
- <div class="grid grid-cols-3 gap-2 mt-3">
504
- <div class="p-2 bg-gray-100 rounded-md hover:bg-gray-200">
505
- <div class="h-12 bg-blue-100 rounded flex items-center justify-center mb-1">
506
- <i class="fas fa-music text-blue-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
507
  </div>
508
- <p class="text-xs truncate">轻松背景</p>
 
 
 
 
 
 
509
  </div>
510
- <div class="p-2 bg-gray-100 rounded-md hover:bg-gray-200">
511
- <div class="h-12 bg-blue-100 rounded flex items-center justify-center mb-1">
512
- <i class="fas fa-music text-blue-600"></i>
 
 
 
 
 
 
 
513
  </div>
514
- <p class="text-xs truncate">欢快节奏</p>
 
 
515
  </div>
516
- <div class="p-2 bg-gray-100 rounded-md hover:bg-gray-200">
517
- <div class="h-12 bg-blue-100 rounded flex items-center justify-center mb-1">
518
- <i class="fas fa-music text-blue-600"></i>
 
 
 
 
 
 
 
519
  </div>
520
- <p class="text-xs truncate">电子氛围</p>
 
 
521
  </div>
522
  </div>
523
  </div>
524
- <div>
525
- <label class="block text-sm font-medium text-gray-700 mb-2">音效</label>
526
- <div class="grid grid-cols-4 gap-2">
527
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
528
- <i class="fas fa-bell text-blue-600 mb-1"></i>
529
- <p class="text-xs">提示音</p>
530
- </button>
531
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
532
- <i class="fas fa-hand-paper text-blue-600 mb-1"></i>
533
- <p class="text-xs">掌声</p>
534
- </button>
535
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
536
- <i class="fas fa-wind text-blue-600 mb-1"></i>
537
- <p class="text-xs">自然</p>
538
- </button>
539
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200 text-center">
540
- <i class="fas fa-plus text-blue-600 mb-1"></i>
541
- <p class="text-xs">更多</p>
542
- </button>
543
- </div>
544
- </div>
545
  </div>
546
  </div>
547
  </div>
548
-
549
- <!-- 导出和分享 -->
550
- <div class="mt-6">
551
- <div class="bg-white rounded-lg shadow-md overflow-hidden">
552
- <div class="bg-green-600 p-4 text-white">
553
- <div class="flex justify-between items-center">
554
- <h3 class="text-lg font-semibold">
555
- <i class="fas fa-upload mr-2"></i> 导出与分享
556
- </h3>
557
- <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
558
- <i class="fas fa-expand"></i>
 
 
 
 
 
 
 
 
 
 
 
 
559
  </button>
560
  </div>
561
- <p class="text-sm opacity-90 mt-1">完成并分享您的视频作品</p>
562
  </div>
563
- <div class="p-4">
564
- <div class="mb-4">
565
- <label class="block text-sm font-medium text-gray-700 mb-2">导出设置</label>
566
- <div class="grid grid-cols-2 gap-4">
567
- <div>
568
- <label class="text-xs text-gray-500 mb-1">格式</label>
569
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
570
- <option>MP4</option>
571
- <option>MOV</option>
572
- <option>AVI</option>
573
- <option>GIF</option>
574
- </select>
575
- </div>
576
- <div>
577
- <label class="text-xs text-gray-500 mb-1">分辨率</label>
578
- <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
579
- <option>1080p (高清)</option>
580
- <option>720p (标清)</option>
581
- <option>4K (超高清)</option>
582
- </select>
583
- </div>
584
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
585
  </div>
586
- <div class="mb-4">
587
- <label class="block text-sm font-medium text-gray-700 mb-2">分享平台</label>
588
- <div class="flex space-x-2">
589
- <button class="p-2 bg-red-100 rounded-md hover:bg-red-200">
590
- <i class="fab fa-youtube text-red-600"></i>
591
- </button>
592
- <button class="p-2 bg-blue-100 rounded-md hover:bg-blue-200">
593
- <i class="fab fa-facebook text-blue-600"></i>
594
- </button>
595
- <button class="p-2 bg-pink-100 rounded-md hover:bg-pink-200">
596
- <i class="fab fa-instagram text-pink-600"></i>
597
- </button>
598
- <button class="p-2 bg-gray-100 rounded-md hover:bg-gray-200">
599
- <i class="fas fa-ellipsis-h"></i>
600
- </button>
601
- </div>
602
  </div>
603
- <div class="flex justify-between items-center">
604
- <div>
605
- <p class="text-sm text-gray-600">预计文件���小: <span class="font-medium">256MB</span></p>
606
- <p class="text-xs text-gray-500">基于当前设置和素材长度</p>
607
- </div>
608
- <button class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium">
609
- <i class="fas fa-file-export mr-1"></i> 导出视频
610
  </button>
611
  </div>
612
  </div>
@@ -619,12 +942,17 @@
619
  // 移动端菜单切换
620
  const menuBtn = document.getElementById('menuBtn');
621
  const sidebar = document.getElementById('sidebar');
 
622
 
623
  menuBtn.addEventListener('click', function(e) {
624
  e.stopPropagation();
625
  sidebar.classList.toggle('open');
626
  });
627
 
 
 
 
 
628
  // 点击外部关闭侧边栏
629
  document.addEventListener('click', function(e) {
630
  if (!sidebar.contains(e.target) && e.target !== menuBtn) {
@@ -637,14 +965,37 @@
637
  e.stopPropagation();
638
  });
639
 
640
- // 工具卡片悬停效果
641
- const toolCards = document.querySelectorAll('.tool-card');
642
- toolCards.forEach(card => {
643
- card.addEventListener('mouseenter', function() {
644
- this.classList.add('hover:shadow-lg');
645
- });
646
- card.addEventListener('mouseleave', function() {
647
- this.classList.remove('hover:shadow-lg');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
648
  });
649
  });
650
 
@@ -656,22 +1007,52 @@
656
  if (i <= index) {
657
  s.classList.add('completed');
658
  s.classList.remove('active');
 
 
 
659
  } else {
660
  s.classList.remove('completed', 'active');
 
 
 
661
  }
662
  });
663
  this.classList.add('active');
 
 
 
664
  });
665
  });
666
 
667
  // 初始化第一个步骤为活动状态
668
  if (progressSteps.length > 0) {
669
  progressSteps[0].classList.add('active');
 
 
 
670
  }
671
 
672
- // 关闭侧边栏按钮
673
- document.getElementById('closeSidebar')?.addEventListener('click', function() {
674
- sidebar.classList.remove('open');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
675
  });
676
  </script>
677
  <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=chaojie/n2v" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
6
  <title>视频制作全流程工具集</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: {
15
+ 50: '#f0f9ff',
16
+ 100: '#e0f2fe',
17
+ 200: '#bae6fd',
18
+ 300: '#7dd3fc',
19
+ 400: '#38bdf8',
20
+ 500: '#0ea5e9',
21
+ 600: '#0284c7',
22
+ 700: '#0369a1',
23
+ 800: '#075985',
24
+ 900: '#0c4a6e',
25
+ },
26
+ creative: {
27
+ 500: '#8b5cf6',
28
+ 600: '#7c3aed',
29
+ 700: '#6d28d9',
30
+ },
31
+ production: {
32
+ 500: '#ec4899',
33
+ 600: '#db2777',
34
+ 700: '#be185d',
35
+ },
36
+ post: {
37
+ 500: '#14b8a6',
38
+ 600: '#0d9488',
39
+ 700: '#0f766e',
40
+ }
41
+ }
42
+ }
43
+ }
44
+ }
45
+ </script>
46
  <style>
47
  .gradient-bg {
48
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
49
+ }
50
+ .tool-card {
51
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
52
  }
53
  .tool-card:hover {
54
  transform: translateY(-5px);
55
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
56
  }
57
  .progress-step.active {
58
+ background-color: #6366f1;
59
  color: white;
60
+ box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3), 0 2px 4px -1px rgba(99, 102, 241, 0.2);
61
  }
62
  .progress-step.completed {
63
  background-color: #10b981;
 
66
  .sidebar {
67
  transition: all 0.3s ease;
68
  }
69
+ .waveform {
70
+ background: repeating-linear-gradient(90deg,
71
+ #3b82f6 0px, #3b82f6 1px,
72
+ transparent 1px, transparent 3px);
73
+ background-size: 4px 100%;
74
+ }
75
+ .timeline-track {
76
+ height: 8px;
77
+ background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
78
+ }
79
+ .timeline-marker {
80
+ position: absolute;
81
+ top: -4px;
82
+ width: 4px;
83
+ height: 16px;
84
+ background-color: #6366f1;
85
+ border-radius: 2px;
86
+ }
87
  @media (max-width: 768px) {
88
  .sidebar {
89
  transform: translateX(-100%);
90
  position: fixed;
91
  z-index: 50;
92
  height: 100vh;
93
+ top: 0;
94
+ left: 0;
95
  }
96
  .sidebar.open {
97
  transform: translateX(0);
98
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
99
+ }
100
+ }
101
+ .draggable-item {
102
+ cursor: grab;
103
+ transition: transform 0.2s;
104
+ }
105
+ .draggable-item:active {
106
+ cursor: grabbing;
107
+ transform: scale(1.02);
108
+ }
109
+ .dropzone {
110
+ border: 2px dashed #d1d5db;
111
+ transition: all 0.3s;
112
+ }
113
+ .dropzone.active {
114
+ border-color: #6366f1;
115
+ background-color: #eef2ff;
116
+ }
117
+ .animate-pulse-slow {
118
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
119
+ }
120
+ @keyframes pulse {
121
+ 0%, 100% {
122
+ opacity: 1;
123
+ }
124
+ 50% {
125
+ opacity: 0.5;
126
  }
127
  }
128
  </style>
129
  </head>
130
+ <body class="bg-gray-50 font-sans antialiased">
131
  <!-- 移动端菜单按钮 -->
132
  <div class="md:hidden fixed top-4 left-4 z-50">
133
+ <button id="menuBtn" class="p-3 rounded-full bg-primary-600 text-white shadow-lg hover:bg-primary-700 transition-all">
134
+ <i class="fas fa-bars text-lg"></i>
135
  </button>
136
  </div>
137
 
138
  <!-- 侧边栏 -->
139
+ <div id="sidebar" class="sidebar w-72 bg-white shadow-xl fixed h-full md:relative">
140
+ <div class="p-5 gradient-bg text-white relative">
141
  <div class="md:hidden absolute top-4 right-4">
142
+ <button id="closeSidebar" class="p-2 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition">
143
  <i class="fas fa-times"></i>
144
  </button>
145
  </div>
146
+ <div class="flex items-center space-x-3">
147
+ <div class="p-3 bg-white bg-opacity-20 rounded-xl">
148
+ <i class="fas fa-video text-xl"></i>
149
+ </div>
150
+ <div>
151
+ <h1 class="text-2xl font-bold">视频工坊 Pro</h1>
152
+ <p class="text-sm opacity-90 mt-1">专业视频制作平台</p>
153
+ </div>
154
+ </div>
155
  </div>
156
 
157
+ <div class="p-5 h-[calc(100%-120px)] overflow-y-auto">
158
+ <!-- 当前项目 -->
159
  <div class="mb-6">
160
+ <div class="flex justify-between items-center mb-3">
161
+ <h3 class="text-xs uppercase font-semibold text-gray-500">当前项目</h3>
162
+ <button class="text-xs text-primary-600 hover:text-primary-800">
163
+ <i class="fas fa-plus mr-1"></i> 新建
164
+ </button>
165
+ </div>
166
+ <div class="bg-gradient-to-r from-primary-50 to-indigo-50 rounded-xl p-4 border border-primary-100">
167
+ <div class="flex items-start">
168
+ <div class="p-2 bg-primary-100 rounded-lg text-primary-600 mr-3">
169
+ <i class="fas fa-mountain-sun"></i>
170
+ </div>
171
+ <div class="flex-1">
172
+ <p class="text-sm font-medium text-gray-800">旅行Vlog制作</p>
173
+ <p class="text-xs text-gray-500 mt-1">最后编辑: 2小时前</p>
174
+ </div>
175
+ <button class="text-gray-400 hover:text-gray-600">
176
+ <i class="fas fa-ellipsis-vertical"></i>
177
+ </button>
178
+ </div>
179
+ <div class="mt-4">
180
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
181
+ <span>项目进度</span>
182
+ <span>45%</span>
183
+ </div>
184
  <div class="w-full bg-gray-200 rounded-full h-2">
185
+ <div class="bg-gradient-to-r from-primary-500 to-purple-500 h-2 rounded-full" style="width: 45%"></div>
186
  </div>
 
187
  </div>
188
  </div>
189
  </div>
190
 
191
+ <!-- 制作流程导航 -->
192
+ <nav class="mb-6">
193
+ <h3 class="text-xs uppercase font-semibold text-gray-500 mb-3">制作流程</h3>
194
+ <ul class="space-y-2">
195
  <li>
196
+ <a href="#" class="flex items-center p-3 rounded-xl bg-gradient-to-r from-creative-500/10 to-purple-500/10 border border-creative-500/20 text-creative-700 group">
197
+ <div class="w-8 h-8 rounded-full bg-creative-500 text-white flex items-center justify-center mr-3 group-hover:bg-creative-600 transition">
198
+ <i class="fas fa-lightbulb text-sm"></i>
199
+ </div>
200
+ <span class="font-medium">构思创意</span>
201
+ <i class="fas fa-check-circle ml-auto text-green-500"></i>
202
  </a>
203
  </li>
204
  <li>
205
+ <a href="#" class="flex items-center p-3 rounded-xl hover:bg-gray-50 text-gray-700 group transition">
206
+ <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center mr-3 group-hover:bg-blue-600 transition">
207
+ <i class="fas fa-search text-sm"></i>
208
+ </div>
209
+ <span class="font-medium">资料收集</span>
210
+ <i class="fas fa-arrow-right ml-auto text-gray-400"></i>
211
  </a>
212
  </li>
213
  <li>
214
+ <a href="#" class="flex items-center p-3 rounded-xl hover:bg-gray-50 text-gray-700 group transition">
215
+ <div class="w-8 h-8 rounded-full bg-amber-500 text-white flex items-center justify-center mr-3 group-hover:bg-amber-600 transition">
216
+ <i class="fas fa-list-ol text-sm"></i>
217
+ </div>
218
+ <span class="font-medium">分镜制作</span>
219
  </a>
220
  </li>
221
  <li>
222
+ <a href="#" class="flex items-center p-3 rounded-xl hover:bg-gray-50 text-gray-700 group transition">
223
+ <div class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center mr-3 group-hover:bg-purple-600 transition">
224
+ <i class="fas fa-cut text-sm"></i>
225
+ </div>
226
+ <span class="font-medium">视频剪辑</span>
227
  </a>
228
  </li>
229
  <li>
230
+ <a href="#" class="flex items-center p-3 rounded-xl hover:bg-gray-50 text-gray-700 group transition">
231
+ <div class="w-8 h-8 rounded-full bg-blue-400 text-white flex items-center justify-center mr-3 group-hover:bg-blue-500 transition">
232
+ <i class="fas fa-microphone text-sm"></i>
233
+ </div>
234
+ <span class="font-medium">配音配乐</span>
235
  </a>
236
  </li>
237
  <li>
238
+ <a href="#" class="flex items-center p-3 rounded-xl hover:bg-gray-50 text-gray-700 group transition">
239
+ <div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center mr-3 group-hover:bg-green-600 transition">
240
+ <i class="fas fa-upload text-sm"></i>
241
+ </div>
242
+ <span class="font-medium">发布导出</span>
243
  </a>
244
  </li>
245
  </ul>
246
  </nav>
247
 
248
+ <!-- 快捷工具 -->
249
+ <div class="mb-6">
250
+ <h3 class="text-xs uppercase font-semibold text-gray-500 mb-3">快捷工具</h3>
251
+ <div class="grid grid-cols-2 gap-3">
252
+ <button class="flex flex-col items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 text-gray-700 transition">
253
+ <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center mb-2">
254
+ <i class="fas fa-ruler-combined"></i>
255
+ </div>
256
+ <span class="text-xs font-medium">比例调整</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  </button>
258
+ <button class="flex flex-col items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 text-gray-700 transition">
259
+ <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mb-2">
260
+ <i class="fas fa-subscript"></i>
261
+ </div>
262
+ <span class="text-xs font-medium">字幕工具</span>
263
  </button>
264
+ <button class="flex flex-col items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 text-gray-700 transition">
265
+ <div class="w-10 h-10 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mb-2">
266
+ <i class="fas fa-palette"></i>
267
+ </div>
268
+ <span class="text-xs font-medium">调色板</span>
269
  </button>
270
+ <button class="flex flex-col items-center p-3 bg-gray-50 rounded-xl hover:bg-gray-100 text-gray-700 transition">
271
+ <div class="w-10 h-10 rounded-full bg-green-100 text-green-600 flex items-center justify-center mb-2">
272
+ <i class="fas fa-wave-square"></i>
273
+ </div>
274
+ <span class="text-xs font-medium">音频波形</span>
275
  </button>
276
  </div>
277
  </div>
278
+
279
+ <!-- 资源库 -->
280
+ <div>
281
+ <h3 class="text-xs uppercase font-semibold text-gray-500 mb-3">资源库</h3>
282
+ <div class="space-y-3">
283
+ <a href="#" class="flex items-center p-3 rounded-xl bg-gray-50 hover:bg-gray-100 text-gray-700 transition">
284
+ <div class="w-8 h-8 rounded-lg bg-red-100 text-red-600 flex items-center justify-center mr-3">
285
+ <i class="fab fa-youtube"></i>
286
+ </div>
287
+ <span class="text-sm font-medium">YouTube 素材</span>
288
+ </a>
289
+ <a href="#" class="flex items-center p-3 rounded-xl bg-gray-50 hover:bg-gray-100 text-gray-700 transition">
290
+ <div class="w-8 h-8 rounded-lg bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
291
+ <i class="fas fa-image"></i>
292
+ </div>
293
+ <span class="text-sm font-medium">图片库</span>
294
+ </a>
295
+ <a href="#" class="flex items-center p-3 rounded-xl bg-gray-50 hover:bg-gray-100 text-gray-700 transition">
296
+ <div class="w-8 h-8 rounded-lg bg-green-100 text-green-600 flex items-center justify-center mr-3">
297
+ <i class="fas fa-music"></i>
298
+ </div>
299
+ <span class="text-sm font-medium">音乐库</span>
300
+ </a>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- 用户区域 -->
306
+ <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100 bg-white">
307
+ <div class="flex items-center">
308
+ <img class="w-10 h-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
309
+ <div class="ml-3">
310
+ <p class="text-sm font-medium text-gray-800">张伟</p>
311
+ <p class="text-xs text-gray-500">专业版会员</p>
312
+ </div>
313
+ <button class="ml-auto p-2 text-gray-400 hover:text-gray-600">
314
+ <i class="fas fa-cog"></i>
315
+ </button>
316
+ </div>
317
  </div>
318
  </div>
319
 
320
  <!-- 主内容区 -->
321
+ <div class="md:ml-72">
322
  <!-- 顶部导航 -->
323
+ <header class="bg-white shadow-sm sticky top-0 z-10">
324
+ <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
325
  <div>
326
+ <h1 class="text-xl font-bold text-gray-800">旅行Vlog制作</h1>
327
+ <div class="flex items-center mt-1">
328
+ <span class="text-xs px-2 py-1 bg-primary-100 text-primary-800 rounded-full mr-2">进行中</span>
329
+ <p class="text-xs text-gray-500">最后保存: 2分钟前</p>
330
+ </div>
331
  </div>
332
 
333
  <div class="flex items-center space-x-4">
334
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600 relative">
335
+ <i class="fas fa-comment-dots"></i>
336
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
337
+ </button>
338
+ <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600">
339
+ <i class="fas fa-bell"></i>
340
+ </button>
341
+ <button class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium flex items-center">
342
+ <i class="fas fa-share-nodes mr-2"></i> 分享
343
+ </button>
344
  </div>
345
  </div>
346
  </header>
347
 
348
  <!-- 进度条 -->
349
+ <div class="bg-white shadow-sm">
350
+ <div class="max-w-7xl mx-auto px-6 py-3">
351
  <div class="flex justify-between items-center">
352
+ <div class="flex items-center space-x-4 overflow-x-auto py-2 px-1">
353
+ <div class="flex flex-col items-center">
354
+ <div class="progress-step active flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-primary-600 relative">
355
+ <i class="fas fa-lightbulb"></i>
356
+ <div class="absolute -bottom-5 text-xs font-medium text-primary-600">构思</div>
357
+ </div>
358
+ </div>
359
+ <div class="flex items-center">
360
+ <div class="h-1 w-12 bg-gradient-to-r from-primary-600 to-blue-400"></div>
361
  </div>
362
+ <div class="flex flex-col items-center">
363
+ <div class="progress-step flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 relative">
364
+ <i class="fas fa-search text-gray-400"></i>
365
+ <div class="absolute -bottom-5 text-xs font-medium text-gray-500">收集</div>
366
+ </div>
367
+ </div>
368
+ <div class="flex items-center">
369
+ <div class="h-1 w-12 bg-gray-200"></div>
370
  </div>
371
+ <div class="flex flex-col items-center">
372
+ <div class="progress-step flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 relative">
373
+ <i class="fas fa-list-ol text-gray-400"></i>
374
+ <div class="absolute -bottom-5 text-xs font-medium text-gray-500">分镜</div>
375
+ </div>
376
  </div>
377
+ <div class="flex items-center">
378
+ <div class="h-1 w-12 bg-gray-200"></div>
379
  </div>
380
+ <div class="flex flex-col items-center">
381
+ <div class="progress-step flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 relative">
382
+ <i class="fas fa-cut text-gray-400"></i>
383
+ <div class="absolute -bottom-5 text-xs font-medium text-gray-500">剪辑</div>
384
+ </div>
385
  </div>
386
+ <div class="flex items-center">
387
+ <div class="h-1 w-12 bg-gray-200"></div>
388
  </div>
389
+ <div class="flex flex-col items-center">
390
+ <div class="progress-step flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 relative">
391
+ <i class="fas fa-microphone text-gray-400"></i>
392
+ <div class="absolute -bottom-5 text-xs font-medium text-gray-500">配音</div>
393
+ </div>
394
  </div>
395
+ <div class="flex items-center">
396
+ <div class="h-1 w-12 bg-gray-200"></div>
397
  </div>
398
+ <div class="flex flex-col items-center">
399
+ <div class="progress-step flex-shrink-0 flex items-center justify-center w-10 h-10 rounded-full border-2 border-gray-300 relative">
400
+ <i class="fas fa-upload text-gray-400"></i>
401
+ <div class="absolute -bottom-5 text-xs font-medium text-gray-500">发布</div>
402
+ </div>
403
  </div>
404
  </div>
405
+ <button class="px-5 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium flex items-center shadow-md">
406
+ 保存进度 <i class="fas fa-save ml-2"></i>
407
  </button>
408
  </div>
409
  </div>
410
  </div>
411
 
412
  <!-- 主内容 -->
413
+ <main class="max-w-7xl mx-auto px-6 py-6">
414
+ <!-- 创意构思部分 -->
415
+ <div class="mb-8">
416
+ <div class="flex justify-between items-center mb-4">
417
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
418
+ <i class="fas fa-lightbulb text-yellow-500 mr-2"></i> 创意构思
419
+ </h2>
420
+ <button class="text-sm text-primary-600 hover:text-primary-800 flex items-center">
421
+ <i class="fas fa-magic mr-1"></i> AI创意助手
422
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
423
  </div>
424
+
425
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
426
+ <!-- 视频主题卡片 -->
427
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
428
+ <div class="bg-gradient-to-r from-creative-500 to-purple-500 p-4 text-white">
429
+ <div class="flex justify-between items-center">
430
+ <h3 class="text-lg font-semibold flex items-center">
431
+ <i class="fas fa-compass mr-2"></i> 视频主题
432
+ </h3>
433
+ <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
434
+ <i class="fas fa-ellipsis-vertical"></i>
 
 
 
 
 
 
 
 
 
435
  </button>
436
  </div>
 
 
 
 
 
437
  </div>
438
+ <div class="p-5">
439
+ <div class="mb-4">
440
+ <label class="block text-sm font-medium text-gray-700 mb-2">主标题</label>
441
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-creative-500 focus:border-transparent"
442
+ placeholder="例如：夏威夷旅行日记" value="夏日海岛探险日记">
443
+ </div>
444
+ <div class="mb-4">
445
+ <label class="block text-sm font-medium text-gray-700 mb-2">副标题</label>
446
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-creative-500 focus:border-transparent"
447
+ placeholder="可选副标题" value="一个摄影师的海岛之旅">
448
+ </div>
449
+ <div>
450
+ <label class="block text-sm font-medium text-gray-700 mb-2">关键词</label>
451
+ <div class="flex flex-wrap gap-2">
452
+ <span class="text-xs px-3 py-1 bg-creative-100 text-creative-800 rounded-full flex items-center">
453
+ 旅行 <button class="ml-1 text-creative-600 hover:text-creative-800"><i class="fas fa-times text-xs"></i></button>
454
+ </span>
455
+ <span class="text-xs px-3 py-1 bg-creative-100 text-creative-800 rounded-full flex items-center">
456
+ 海岛 <button class="ml-1 text-creative-600 hover:text-creative-800"><i class="fas fa-times text-xs"></i></button>
457
+ </span>
458
+ <span class="text-xs px-3 py-1 bg-creative-100 text-creative-800 rounded-full flex items-center">
459
+ 探险 <button class="ml-1 text-creative-600 hover:text-creative-800"><i class="fas fa-times text-xs"></i></button>
460
+ </span>
461
+ <button class="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200">
462
+ <i class="fas fa-plus mr-1"></i> 添加
463
  </button>
464
  </div>
 
465
  </div>
466
  </div>
467
+ </div>
468
+
469
+ <!-- 目标观众卡片 -->
470
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
471
+ <div class="bg-gradient-to-r from-blue-500 to-blue-400 p-4 text-white">
472
+ <div class="flex justify-between items-center">
473
+ <h3 class="text-lg font-semibold flex items-center">
474
+ <i class="fas fa-users mr-2"></i> 目标观众
475
+ </h3>
476
+ <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
477
+ <i class="fas fa-ellipsis-vertical"></i>
478
+ </button>
479
+ </div>
480
+ </div>
481
+ <div class="p-5">
482
+ <div class="mb-4">
483
+ <label class="block text-sm font-medium text-gray-700 mb-2">年龄段</label>
484
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
485
+ <option>18-25岁</option>
486
+ <option selected>25-35岁</option>
487
+ <option>35-45岁</option>
488
+ <option>45岁以上</option>
489
+ </select>
490
+ </div>
491
+ <div class="mb-4">
492
+ <label class="block text-sm font-medium text-gray-700 mb-2">兴趣标签</label>
493
+ <div class="grid grid-cols-2 gap-2">
494
+ <label class="inline-flex items-center">
495
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" checked>
496
+ <span class="ml-2 text-sm">旅行</span>
497
+ </label>
498
+ <label class="inline-flex items-center">
499
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" checked>
500
+ <span class="ml-2 text-sm">摄影</span>
501
+ </label>
502
+ <label class="inline-flex items-center">
503
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
504
+ <span class="ml-2 text-sm">美食</span>
505
+ </label>
506
+ <label class="inline-flex items-center">
507
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" checked>
508
+ <span class="ml-2 text-sm">户外</span>
509
+ </label>
510
  </div>
511
+ </div>
512
+ <div>
513
+ <label class="block text-sm font-medium text-gray-700 mb-2">观众画像</label>
514
+ <div class="bg-blue-50 rounded-lg p-3">
515
+ <div class="flex items-center">
516
+ <div class="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
517
+ <i class="fas fa-user"></i>
518
+ </div>
519
+ <div>
520
+ <p class="text-sm font-medium text-gray-800">年轻旅行爱好者</p>
521
+ <p class="text-xs text-gray-500">喜欢探索新地方，分享旅行体验</p>
522
+ </div>
523
+ </div>
524
  </div>
525
  </div>
526
  </div>
527
  </div>
528
+
529
+ <!-- 视频风格卡片 -->
530
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
531
+ <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-4 text-white">
532
+ <div class="flex justify-between items-center">
533
+ <h3 class="text-lg font-semibold flex items-center">
534
+ <i class="fas fa-palette mr-2"></i> 视频风格
535
+ </h3>
536
+ <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
537
+ <i class="fas fa-ellipsis-vertical"></i>
 
 
 
 
 
 
 
 
 
 
 
538
  </button>
539
  </div>
540
+ </div>
541
+ <div class="p-5">
542
+ <div class="mb-4">
543
+ <label class="block text-sm font-medium text-gray-700 mb-2">风格类型</label>
544
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
545
+ <option>Vlog</option>
546
+ <option>教程</option>
547
+ <option selected>旅行纪录片</option>
548
+ <option>宣传片</option>
549
+ <option>短视频</option>
550
+ </select>
551
+ </div>
552
+ <div class="mb-4">
553
+ <label class="block text-sm font-medium text-gray-700 mb-2">色调预设</label>
554
+ <div class="grid grid-cols-5 gap-2">
555
+ <div class="h-8 rounded cursor-pointer bg-gradient-to-r from-yellow-200 to-red-300 border-2 border-transparent hover:border-purple-500"></div>
556
+ <div class="h-8 rounded cursor-pointer bg-gradient-to-r from-blue-200 to-cyan-300 border-2 border-transparent hover:border-purple-500"></div>
557
+ <div class="h-8 rounded cursor-pointer bg-gradient-to-r from-green-200 to-teal-300 border-2 border-purple-500"></div>
558
+ <div class="h-8 rounded cursor-pointer bg-gradient-to-r from-pink-200 to-rose-300 border-2 border-transparent hover:border-purple-500"></div>
559
+ <div class="h-8 rounded cursor-pointer bg-gradient-to-r from-gray-200 to-gray-400 border-2 border-transparent hover:border-purple-500"></div>
 
 
 
 
560
  </div>
561
+ </div>
562
+ <div>
563
+ <label class="block text-sm font-medium text-gray-700 mb-2">参考视频</label>
564
+ <div class="relative">
565
+ <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
566
+ <div class="absolute inset-0 flex items-center justify-center">
567
+ <i class="fas fa-play-circle text-4xl text-gray-400 opacity-70"></i>
568
+ </div>
569
  </div>
570
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-3">
571
+ <p class="text-xs text-white font-medium">海岛旅行纪录片参考</p>
 
572
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
573
  </div>
574
  </div>
575
  </div>
576
  </div>
577
  </div>
578
  </div>
579
+
580
+ <!-- 视频描述部分 -->
581
+ <div class="mb-8">
582
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
583
+ <div class="border-b border-gray-200 p-4 bg-gray-50">
584
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
585
+ <i class="fas fa-align-left text-creative-600 mr-2"></i> 视频描述
586
+ </h3>
 
 
 
 
 
 
 
587
  </div>
588
+ <div class="p-5">
589
  <div class="mb-4">
590
+ <label class="block text-sm font-medium text-gray-700 mb-2">一句话简介</label>
591
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-creative-500 focus:border-transparent"
592
+ placeholder="用一句话描述您的视频" value="记录我在夏威夷两周的探险之旅">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
593
  </div>
594
+ <div>
595
+ <label class="block text-sm font-medium text-gray-700 mb-2">详细描述</label>
596
+ <textarea rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-creative-500 focus:border-transparent"
597
+ placeholder="详细描述您的视频内容...">这部视频将记录我在夏威夷为期两周的探险之旅。从瓦胡岛的威基基海滩到茂宜岛的哈纳之路，我将用镜头捕捉这些美丽岛屿的自然风光、文化体验和冒险活动。视频将以第一人称视角呈现，结合航拍镜头和水下摄影，展示夏威夷多样的生态系统和壮丽景色。</textarea>
598
+ <p class="text-xs text-gray-500 mt-1">已输入 156 字</p>
 
 
 
 
 
 
 
 
 
 
 
 
599
  </div>
600
  </div>
601
+ <div class="border-t border-gray-200 p-4 bg-gray-50 flex justify-end">
602
+ <button class="px-4 py-2 bg-creative-600 text-white rounded-lg hover:bg-creative-700 font-medium flex items-center">
603
+ <i class="fas fa-wand-magic-sparkles mr-2"></i> AI优化描述
604
+ </button>
 
 
 
 
 
 
 
 
 
 
605
  </div>
606
+ </div>
607
+ </div>
608
+
609
+ <!-- 资料收集部分 -->
610
+ <div class="mb-8">
611
+ <div class="flex justify-between items-center mb-4">
612
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
613
+ <i class="fas fa-search text-blue-500 mr-2"></i> 资料收集
614
+ </h2>
615
+ <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
616
+ <i class="fas fa-link mr-1"></i> 导入链接
617
+ </button>
618
+ </div>
619
+
620
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
621
+ <!-- 素材上传 -->
622
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
623
+ <div class="bg-gradient-to-r from-blue-500 to-blue-400 p-4 text-white">
624
+ <div class="flex justify-between items-center">
625
+ <h3 class="text-lg font-semibold flex items-center">
626
+ <i class="fas fa-cloud-upload-alt mr-2"></i> 素材上传
627
+ </h3>
628
+ <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
629
+ <i class="fas fa-ellipsis-vertical"></i>
630
  </button>
631
  </div>
632
+ </div>
633
+ <div class="p-5">
634
+ <div id="dropzone" class="dropzone border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer hover:border-blue-400 transition">
635
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-400 mb-3"></i>
636
+ <p class="text-sm font-medium text-gray-700">拖放文件或点击上传</p>
637
+ <p class="text-xs text-gray-500 mt-1">支持MP4, MOV, JPG, PNG等格式</p>
638
+ <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium">
639
+ 选择文件
640
  </button>
641
+ </div>
642
+
643
+ <div class="mt-4">
644
+ <div class="flex justify-between items-center mb-2">
645
+ <h4 class="text-sm font-medium text-gray-700">已上传素材</h4>
646
+ <span class="text-xs text-gray-500">3/20 文件</span>
647
+ </div>
648
+ <div class="space-y-2">
649
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
650
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-3">
651
+ <i class="fas fa-video"></i>
652
+ </div>
653
+ <div class="flex-1 min-w-0">
654
+ <p class="text-sm font-medium text-gray-800 truncate">beach_sunrise.mp4</p>
655
+ <p class="text-xs text-gray-500">1080p • 25秒 • 45MB</p>
656
+ </div>
657
+ <div class="flex items-center">
658
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
659
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
660
+ </div>
661
+ <button class="text-gray-400 hover:text-gray-600">
662
+ <i class="fas fa-ellipsis-vertical"></i>
663
+ </button>
664
+ </div>
665
+ </div>
666
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
667
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-3">
668
+ <i class="fas fa-image"></i>
669
+ </div>
670
+ <div class="flex-1 min-w-0">
671
+ <p class="text-sm font-medium text-gray-800 truncate">hiking_trail.jpg</p>
672
+ <p class="text-xs text-gray-500">4000x3000 • 8.2MB</p>
673
+ </div>
674
+ <div class="flex items-center">
675
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
676
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
677
+ </div>
678
+ <button class="text-gray-400 hover:text-gray-600">
679
+ <i class="fas fa-ellipsis-vertical"></i>
680
+ </button>
681
+ </div>
682
+ </div>
683
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg">
684
+ <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-3">
685
+ <i class="fas fa-video"></i>
686
+ </div>
687
+ <div class="flex-1 min-w-0">
688
+ <p class="text-sm font-medium text-gray-800 truncate">underwater_coral.mp4</p>
689
+ <p class="text-xs text-gray-500">4K • 18秒 • 62MB</p>
690
+ </div>
691
+ <div class="flex items-center">
692
+ <div class="w-16 bg-gray-200 rounded-full h-1.5 mr-2">
693
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 100%"></div>
694
+ </div>
695
+ <button class="text-gray-400 hover:text-gray-600">
696
+ <i class="fas fa-ellipsis-vertical"></i>
697
+ </button>
698
+ </div>
699
+ </div>
700
  </div>
 
 
 
701
  </div>
 
702
  </div>
703
+ </div>
704
+
705
+ <!-- 参考链接 -->
706
+ <div class="tool-card bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
707
+ <div class="bg-gradient-to-r from-blue-500 to-blue-400 p-4 text-white">
708
+ <div class="flex justify-between items-center">
709
+ <h3 class="text-lg font-semibold flex items-center">
710
+ <i class="fas fa-link mr-2"></i> 参考链接
711
+ </h3>
712
+ <button class="p-1 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30">
713
+ <i class="fas fa-ellipsis-vertical"></i>
714
  </button>
715
  </div>
716
+ </div>
717
+ <div class="p-5">
718
+ <div class="mb-4">
719
+ <label class="block text-sm font-medium text-gray-700 mb-2">添加参考链接</label>
720
+ <div class="flex">
721
+ <input type="text" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="粘贴YouTube、Vimeo等链接">
722
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700">
723
+ <i class="fas fa-plus"></i>
724
+ </button>
725
+ </div>
726
+ </div>
727
+
728
+ <div class="space-y-3">
729
+ <div class="p-3 bg-blue-50 rounded-lg flex">
730
+ <div class="flex-shrink-0 mr-3">
731
+ <div class="w-12 h-12 bg-blue-100 rounded-lg overflow-hidden">
732
+ <img src="https://i.ytimg.com/vi/9dC2M5ne6I4/mqdefault.jpg" class="w-full h-full object-cover">
733
+ </div>
734
  </div>
735
+ <div class="flex-1 min-w-0">
736
+ <p class="text-sm font-medium text-gray-800 truncate">夏威夷旅行指南 - 最佳景点</p>
737
+ <p class="text-xs text-gray-500 truncate">YouTube • 旅行频道</p>
738
+ </div>
739
+ <button class="text-gray-400 hover:text-gray-600 ml-2">
740
+ <i class="fas fa-ellipsis-vertical"></i>
741
+ </button>
742
  </div>
743
+
744
+ <div class="p-3 bg-blue-50 rounded-lg flex">
745
+ <div class="flex-shrink-0 mr-3">
746
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
747
+ <i class="fas fa-image"></i>
748
+ </div>
749
+ </div>
750
+ <div class="flex-1 min-w-0">
751
+ <p class="text-sm font-medium text-gray-800 truncate">夏威夷摄影灵感 - 500px</p>
752
+ <p class="text-xs text-gray-500 truncate">https://500px.com/hawaii</p>
753
  </div>
754
+ <button class="text-gray-400 hover:text-gray-600 ml-2">
755
+ <i class="fas fa-ellipsis-vertical"></i>
756
+ </button>
757
  </div>
758
+
759
+ <div class="p-3 bg-blue-50 rounded-lg flex">
760
+ <div class="flex-shrink-0 mr-3">
761
+ <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
762
+ <i class="fas fa-music"></i>
763
+ </div>
764
+ </div>
765
+ <div class="flex-1 min-w-0">
766
+ <p class="text-sm font-medium text-gray-800 truncate">海岛风格音乐 - Epidemic Sound</p>
767
+ <p class="text-xs text-gray-500 truncate">https://www.epidemicsound.com</p>
768
  </div>
769
+ <button class="text-gray-400 hover:text-gray-600 ml-2">
770
+ <i class="fas fa-ellipsis-vertical"></i>
771
+ </button>
772
  </div>
773
  </div>
774
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
775
  </div>
776
  </div>
777
  </div>
778
+
779
+ <!-- 分镜制作预览 -->
780
+ <div class="mb-8">
781
+ <div class="flex justify-between items-center mb-4">
782
+ <h2 class="text-xl font-bold text-gray-800 flex items-center">
783
+ <i class="fas fa-list-ol text-amber-500 mr-2"></i> 分镜预览
784
+ </h2>
785
+ <button class="px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 font-medium flex items-center">
786
+ <i class="fas fa-plus mr-2"></i> 添加分镜
787
+ </button>
788
+ </div>
789
+
790
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
791
+ <div class="border-b border-gray-200 p-4 bg-gray-50 flex justify-between items-center">
792
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
793
+ <i class="fas fa-film text-amber-600 mr-2"></i> 分镜列表
794
+ </h3>
795
+ <div class="flex items-center space-x-2">
796
+ <button class="p-2 text-gray-500 hover:text-gray-700">
797
+ <i class="fas fa-sort"></i>
798
+ </button>
799
+ <button class="p-2 text-gray-500 hover:text-gray-700">
800
+ <i class="fas fa-filter"></i>
801
  </button>
802
  </div>
 
803
  </div>
804
+
805
+ <div class="p-5">
806
+ <div class="overflow-x-auto">
807
+ <table class="min-w-full divide-y divide-gray-200">
808
+ <thead class="bg-gray-50">
809
+ <tr>
810
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
811
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">场景描述</th>
812
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时长</th>
813
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">素材</th>
814
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
815
+ <th scope="col" class="relative px-6 py-3"><span class="sr-only">操作</span></th>
816
+ </tr>
817
+ </thead>
818
+ <tbody class="bg-white divide-y divide-gray-200">
819
+ <tr class="hover:bg-gray-50">
820
+ <td class="px-6 py-4 whitespace-nowrap">
821
+ <div class="w-6 h-6 rounded-full bg-amber-100 text-amber-800 flex items-center justify-center text-xs font-bold">1</div>
822
+ </td>
823
+ <td class="px-6 py-4 whitespace-nowrap">
824
+ <div class="text-sm font-medium text-gray-900">开场镜头</div>
825
+ <div class="text-xs text-gray-500">海滩全景，日出场景</div>
826
+ </td>
827
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5秒</td>
828
+ <td class="px-6 py-4 whitespace-nowrap">
829
+ <div class="flex items-center">
830
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-100 rounded flex items-center justify-center text-gray-400">
831
+ <i class="fas fa-video"></i>
832
+ </div>
833
+ <div class="ml-2">
834
+ <div class="text-sm font-medium text-gray-900 truncate w-32">beach_sunrise.mp4</div>
835
+ </div>
836
+ </div>
837
+ </td>
838
+ <td class="px-6 py-4 whitespace-nowrap">
839
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">已完成</span>
840
+ </td>
841
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
842
+ <button class="text-gray-400 hover:text-gray-600 mr-2">
843
+ <i class="fas fa-edit"></i>
844
+ </button>
845
+ <button class="text-gray-400 hover:text-gray-600">
846
+ <i class="fas fa-trash-alt"></i>
847
+ </button>
848
+ </td>
849
+ </tr>
850
+ <tr class="hover:bg-gray-50">
851
+ <td class="px-6 py-4 whitespace-nowrap">
852
+ <div class="w-6 h-6 rounded-full bg-gray-100 text-gray-800 flex items-center justify-center text-xs font-bold">2</div>
853
+ </td>
854
+ <td class="px-6 py-4 whitespace-nowrap">
855
+ <div class="text-sm font-medium text-gray-900">人物介绍</div>
856
+ <div class="text-xs text-gray-500">主持人面对镜头自我介绍</div>
857
+ </td>
858
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8秒</td>
859
+ <td class="px-6 py-4 whitespace-nowrap">
860
+ <div class="flex items-center">
861
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-100 rounded flex items-center justify-center text-gray-400">
862
+ <i class="fas fa-video"></i>
863
+ </div>
864
+ <div class="ml-2">
865
+ <div class="text-sm font-medium text-gray-900 truncate w-32">self_intro.mp4</div>
866
+ </div>
867
+ </div>
868
+ </td>
869
+ <td class="px-6 py-4 whitespace-nowrap">
870
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待处理</span>
871
+ </td>
872
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
873
+ <button class="text-gray-400 hover:text-gray-600 mr-2">
874
+ <i class="fas fa-edit"></i>
875
+ </button>
876
+ <button class="text-gray-400 hover:text-gray-600">
877
+ <i class="fas fa-trash-alt"></i>
878
+ </button>
879
+ </td>
880
+ </tr>
881
+ <tr class="hover:bg-gray-50">
882
+ <td class="px-6 py-4 whitespace-nowrap">
883
+ <div class="w-6 h-6 rounded-full bg-gray-100 text-gray-800 flex items-center justify-center text-xs font-bold">3</div>
884
+ </td>
885
+ <td class="px-6 py-4 whitespace-nowrap">
886
+ <div class="text-sm font-medium text-gray-900">活动展示</div>
887
+ <div class="text-xs text-gray-500">冲浪、浮潜等活动镜头</div>
888
+ </td>
889
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15秒</td>
890
+ <td class="px-6 py-4 whitespace-nowrap">
891
+ <div class="flex items-center">
892
+ <div class="flex-shrink-0 h-10 w-10 bg-gray-100 rounded flex items-center justify-center text-gray-400">
893
+ <i class="fas fa-image"></i>
894
+ </div>
895
+ <div class="ml-2">
896
+ <div class="text-sm font-medium text-gray-900 truncate w-32">activity_clips</div>
897
+ </div>
898
+ </div>
899
+ </td>
900
+ <td class="px-6 py-4 whitespace-nowrap">
901
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">编辑中</span>
902
+ </td>
903
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
904
+ <button class="text-gray-400 hover:text-gray-600 mr-2">
905
+ <i class="fas fa-edit"></i>
906
+ </button>
907
+ <button class="text-gray-400 hover:text-gray-600">
908
+ <i class="fas fa-trash-alt"></i>
909
+ </button>
910
+ </td>
911
+ </tr>
912
+ </tbody>
913
+ </table>
914
  </div>
915
+ </div>
916
+ </div>
917
+ </div>
918
+
919
+ <!-- 下一步操作 -->
920
+ <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-100">
921
+ <div class="p-6">
922
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between">
923
+ <div class="mb-4 md:mb-0">
924
+ <h3 class="text-lg font-semibold text-gray-800">准备好进入下一步了吗？</h3>
925
+ <p class="text-sm text-gray-600 mt-1">当前所有构思和素材已保存，可以开始分镜制作了</p>
 
 
 
 
 
926
  </div>
927
+ <div class="flex space-x-3">
928
+ <button class="px-5 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 font-medium flex items-center">
929
+ <i class="fas fa-save mr-2"></i> 保存草稿
930
+ </button>
931
+ <button class="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium flex items-center shadow-md">
932
+ 开始分镜制作 <i class="fas fa-arrow-right ml-2"></i>
 
933
  </button>
934
  </div>
935
  </div>
 
942
  // 移动端菜单切换
943
  const menuBtn = document.getElementById('menuBtn');
944
  const sidebar = document.getElementById('sidebar');
945
+ const closeSidebar = document.getElementById('closeSidebar');
946
 
947
  menuBtn.addEventListener('click', function(e) {
948
  e.stopPropagation();
949
  sidebar.classList.toggle('open');
950
  });
951
 
952
+ closeSidebar.addEventListener('click', function() {
953
+ sidebar.classList.remove('open');
954
+ });
955
+
956
  // 点击外部关闭侧边栏
957
  document.addEventListener('click', function(e) {
958
  if (!sidebar.contains(e.target) && e.target !== menuBtn) {
 
965
  e.stopPropagation();
966
  });
967
 
968
+ // 拖放区域交互
969
+ const dropzone = document.getElementById('dropzone');
970
+
971
+ dropzone.addEventListener('dragover', function(e) {
972
+ e.preventDefault();
973
+ this.classList.add('active');
974
+ });
975
+
976
+ dropzone.addEventListener('dragleave', function() {
977
+ this.classList.remove('active');
978
+ });
979
+
980
+ dropzone.addEventListener('drop', function(e) {
981
+ e.preventDefault();
982
+ this.classList.remove('active');
983
+ // 这里可以添加文件上传逻辑
984
+ alert('文件已准备好上传！');
985
+ });
986
+
987
+ dropzone.addEventListener('click', function() {
988
+ // 模拟文件选择
989
+ const input = document.createElement('input');
990
+ input.type = 'file';
991
+ input.multiple = true;
992
+ input.accept = 'image/*,video/*';
993
+ input.click();
994
+
995
+ input.addEventListener('change', function() {
996
+ if (this.files.length > 0) {
997
+ alert(`已选择 ${this.files.length} 个文件准备上传！`);
998
+ }
999
  });
1000
  });
1001
 
 
1007
  if (i <= index) {
1008
  s.classList.add('completed');
1009
  s.classList.remove('active');
1010
+ s.querySelector('i').classList.remove('text-gray-400');
1011
+ s.querySelector('i').classList.add('text-white');
1012
+ s.querySelector('div').classList.add('text-primary-600');
1013
  } else {
1014
  s.classList.remove('completed', 'active');
1015
+ s.querySelector('i').classList.add('text-gray-400');
1016
+ s.querySelector('i').classList.remove('text-white');
1017
+ s.querySelector('div').classList.remove('text-primary-600');
1018
  }
1019
  });
1020
  this.classList.add('active');
1021
+ this.querySelector('i').classList.remove('text-gray-400');
1022
+ this.querySelector('i').classList.add('text-white');
1023
+ this.querySelector('div').classList.add('text-primary-600');
1024
  });
1025
  });
1026
 
1027
  // 初始化第一个步骤为活动状态
1028
  if (progressSteps.length > 0) {
1029
  progressSteps[0].classList.add('active');
1030
+ progressSteps[0].querySelector('i').classList.remove('text-gray-400');
1031
+ progressSteps[0].querySelector('i').classList.add('text-white');
1032
+ progressSteps[0].querySelector('div').classList.add('text-primary-600');
1033
  }
1034
 
1035
+ // 工具卡片悬停效果
1036
+ const toolCards = document.querySelectorAll('.tool-card');
1037
+ toolCards.forEach(card => {
1038
+ card.addEventListener('mouseenter', function() {
1039
+ this.style.transform = 'translateY(-5px)';
1040
+ this.style.boxShadow = '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)';
1041
+ });
1042
+ card.addEventListener('mouseleave', function() {
1043
+ this.style.transform = '';
1044
+ this.style.boxShadow = '';
1045
+ });
1046
+ });
1047
+
1048
+ // 模拟表格行点击
1049
+ const tableRows = document.querySelectorAll('tbody tr');
1050
+ tableRows.forEach(row => {
1051
+ row.addEventListener('click', function(e) {
1052
+ if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'I') {
1053
+ alert(`正在编辑分镜: ${this.querySelector('td:nth-child(2) div:first-child').textContent}`);
1054
+ }
1055
+ });
1056
  });
1057
  </script>
1058
  <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=chaojie/n2v" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>