Hugging Face's logo

Spaces:
liangdi
/
script
Running

App Files Community
liangdi commited on
Commit
9bdf860
·
verified ·
1 Parent(s): ba3c03d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +564 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Script
3
- emoji: 🏆
4
- colorFrom: blue
5
- colorTo: red
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: script
3
+ emoji: 🐳
4
+ colorFrom: gray
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,564 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
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
+ .script-item:hover .script-actions {
11
+ opacity: 1;
12
+ }
13
+ .custom-scrollbar::-webkit-scrollbar {
14
+ width: 6px;
15
+ height: 6px;
16
+ }
17
+ .custom-scrollbar::-webkit-scrollbar-track {
18
+ background: #f1f1f1;
19
+ }
20
+ .custom-scrollbar::-webkit-scrollbar-thumb {
21
+ background: #888;
22
+ border-radius: 3px;
23
+ }
24
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
25
+ background: #555;
26
+ }
27
+ .media-preview {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .media-preview:hover {
31
+ transform: scale(1.05);
32
+ }
33
+ .draggable-item {
34
+ transition: transform 0.2s ease;
35
+ }
36
+ .draggable-item.dragging {
37
+ opacity: 0.5;
38
+ background: #f0f9ff;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-gray-50">
43
+ <div class="flex h-screen overflow-hidden">
44
+ <!-- Sidebar -->
45
+ <div class="hidden md:flex md:flex-shrink-0">
46
+ <div class="flex flex-col w-64 bg-white border-r border-gray-200">
47
+ <div class="flex items-center justify-center h-16 px-4 bg-blue-600 text-white">
48
+ <h1 class="text-xl font-bold">脚本管理系统</h1>
49
+ </div>
50
+ <div class="flex flex-col flex-grow p-4 overflow-y-auto">
51
+ <nav class="flex-1 space-y-2">
52
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-100 text-blue-800 rounded-md">
53
+ <i class="fas fa-clipboard-list mr-3"></i>
54
+ 脚本框架
55
+ </a>
56
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:bg-blue-50 hover:text-blue-800 rounded-md">
57
+ <i class="fas fa-layer-group mr-3"></i>
58
+ 脚本分类
59
+ </a>
60
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:bg-blue-50 hover:text-blue-800 rounded-md">
61
+ <i class="fas fa-file-alt mr-3"></i>
62
+ 通用脚本
63
+ </a>
64
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:bg-blue-50 hover:text-blue-800 rounded-md">
65
+ <i class="fas fa-tasks mr-3"></i>
66
+ 任务脚本
67
+ </a>
68
+ </nav>
69
+
70
+ <div class="mt-auto pt-4 border-t border-gray-200">
71
+ <div class="flex items-center px-4">
72
+ <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="">
73
+ <div class="ml-3">
74
+ <p class="text-sm font-medium text-gray-700">编导用户</p>
75
+ <p class="text-xs font-medium text-gray-500">编辑</p>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Main content -->
84
+ <div class="flex flex-col flex-1 overflow-hidden">
85
+ <!-- Top navigation -->
86
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
87
+ <div class="flex items-center">
88
+ <button class="md:hidden text-gray-500 focus:outline-none">
89
+ <i class="fas fa-bars"></i>
90
+ </button>
91
+ <h2 class="ml-4 text-lg font-medium text-gray-900">脚本框架管理</h2>
92
+ </div>
93
+ <div class="flex items-center space-x-4">
94
+ <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
95
+ <i class="fas fa-plus mr-2"></i>新建脚本框架
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Main content area -->
101
+ <div class="flex-1 overflow-auto custom-scrollbar p-4">
102
+ <!-- Filters -->
103
+ <div class="bg-white rounded-lg shadow p-4 mb-4">
104
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
105
+ <div>
106
+ <label class="block text-sm font-medium text-gray-700 mb-1">脚本分类</label>
107
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
108
+ <option>全部分类</option>
109
+ <option>产品展示</option>
110
+ <option>场景演绎</option>
111
+ <option>教程类</option>
112
+ <option>测评类</option>
113
+ </select>
114
+ </div>
115
+ <div>
116
+ <label class="block text-sm font-medium text-gray-700 mb-1">客户筛选</label>
117
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
118
+ <option>全部客户</option>
119
+ <option>客户A</option>
120
+ <option>客户B</option>
121
+ <option>客户C</option>
122
+ </select>
123
+ </div>
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-1">产品筛选</label>
126
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
127
+ <option>全部产品</option>
128
+ <option>产品X</option>
129
+ <option>产品Y</option>
130
+ <option>产品Z</option>
131
+ </select>
132
+ </div>
133
+ <div>
134
+ <label class="block text-sm font-medium text-gray-700 mb-1">搜索</label>
135
+ <div class="relative">
136
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm pl-8" placeholder="脚本名称...">
137
+ <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Script Frameworks List -->
144
+ <div class="bg-white rounded-lg shadow overflow-hidden">
145
+ <div class="divide-y divide-gray-200">
146
+ <!-- Script Framework Item -->
147
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150">
148
+ <div class="flex items-center justify-between">
149
+ <div>
150
+ <h3 class="text-lg font-medium text-gray-900">产品X展示脚本</h3>
151
+ <div class="flex items-center mt-1 text-sm text-gray-500">
152
+ <span class="mr-3">客户: 客户A</span>
153
+ <span class="mr-3">产品: 产品X</span>
154
+ <span>店铺: 旗舰店</span>
155
+ </div>
156
+ </div>
157
+ <div class="flex space-x-2">
158
+ <button class="p-2 text-gray-500 hover:text-blue-600">
159
+ <i class="fas fa-edit"></i>
160
+ </button>
161
+ <button class="p-2 text-gray-500 hover:text-red-600">
162
+ <i class="fas fa-trash"></i>
163
+ </button>
164
+ <button class="p-2 text-gray-500 hover:text-green-600">
165
+ <i class="fas fa-clone"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Scripts List -->
171
+ <div class="mt-4">
172
+ <div class="flex items-center justify-between mb-2">
173
+ <h4 class="text-sm font-medium text-gray-700">包含的分镜脚本 (3)</h4>
174
+ <button class="text-xs text-blue-600 hover:text-blue-800">
175
+ <i class="fas fa-plus mr-1"></i>添加分镜
176
+ </button>
177
+ </div>
178
+
179
+ <div class="space-y-3">
180
+ <!-- Script Item -->
181
+ <div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true">
182
+ <div class="flex items-start">
183
+ <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3">
184
+ <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" class="h-full w-full object-cover">
185
+ </div>
186
+ <div class="flex-1 min-w-0">
187
+ <div class="flex items-center justify-between">
188
+ <p class="text-sm font-medium text-gray-900 truncate">开场展示</p>
189
+ <div class="flex space-x-2 script-actions opacity-0 transition-opacity">
190
+ <button class="text-gray-400 hover:text-blue-600">
191
+ <i class="fas fa-edit text-xs"></i>
192
+ </button>
193
+ <button class="text-gray-400 hover:text-red-600">
194
+ <i class="fas fa-trash text-xs"></i>
195
+ </button>
196
+ </div>
197
+ </div>
198
+ <p class="text-xs text-gray-500 mt-1">分镜类型: 产品展示 | 时长: 5秒 | 景别: 近景</p>
199
+ <p class="text-xs text-gray-500 truncate mt-1">内容: 产品X特写镜头展示，突出logo和主要功能...</p>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Script Item -->
205
+ <div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true">
206
+ <div class="flex items-start">
207
+ <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3">
208
+ <video class="h-full w-full object-cover" poster="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
209
+ <source src="#" type="video/mp4">
210
+ </video>
211
+ <div class="absolute inset-0 flex items-center justify-center">
212
+ <i class="fas fa-play text-white text-xl"></i>
213
+ </div>
214
+ </div>
215
+ <div class="flex-1 min-w-0">
216
+ <div class="flex items-center justify-between">
217
+ <p class="text-sm font-medium text-gray-900 truncate">功能演示</p>
218
+ <div class="flex space-x-2 script-actions opacity-0 transition-opacity">
219
+ <button class="text-gray-400 hover:text-blue-600">
220
+ <i class="fas fa-edit text-xs"></i>
221
+ </button>
222
+ <button class="text-gray-400 hover:text-red-600">
223
+ <i class="fas fa-trash text-xs"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+ <p class="text-xs text-gray-500 mt-1">分镜类型: 功能演示 | 时长: 10秒 | 景别: 中景</p>
228
+ <p class="text-xs text-gray-500 truncate mt-1">内容: 模特展示产品X的主要功能和使用场景...</p>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Script Item -->
234
+ <div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true">
235
+ <div class="flex items-start">
236
+ <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3 flex items-center justify-center">
237
+ <i class="fas fa-image text-gray-300 text-2xl"></i>
238
+ </div>
239
+ <div class="flex-1 min-w-0">
240
+ <div class="flex items-center justify-between">
241
+ <p class="text-sm font-medium text-gray-900 truncate">促销信息</p>
242
+ <div class="flex space-x-2 script-actions opacity-0 transition-opacity">
243
+ <button class="text-gray-400 hover:text-blue-600">
244
+ <i class="fas fa-edit text-xs"></i>
245
+ </button>
246
+ <button class="text-gray-400 hover:text-red-600">
247
+ <i class="fas fa-trash text-xs"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ <p class="text-xs text-gray-500 mt-1">分镜类型: 文字信息 | 时长: 3秒 | 景别: 全景</p>
252
+ <p class="text-xs text-gray-500 truncate mt-1">内容: 展示促销信息和购买方式...</p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Script Framework Item -->
261
+ <div class="p-4 hover:bg-gray-50 transition-colors duration-150">
262
+ <div class="flex items-center justify-between">
263
+ <div>
264
+ <h3 class="text-lg font-medium text-gray-900">产品Y使用教程</h3>
265
+ <div class="flex items-center mt-1 text-sm text-gray-500">
266
+ <span class="mr-3">客户: 客户B</span>
267
+ <span class="mr-3">产品: 产品Y</span>
268
+ <span>店铺: 专卖店</span>
269
+ </div>
270
+ </div>
271
+ <div class="flex space-x-2">
272
+ <button class="p-2 text-gray-500 hover:text-blue-600">
273
+ <i class="fas fa-edit"></i>
274
+ </button>
275
+ <button class="p-2 text-gray-500 hover:text-red-600">
276
+ <i class="fas fa-trash"></i>
277
+ </button>
278
+ <button class="p-2 text-gray-500 hover:text-green-600">
279
+ <i class="fas fa-clone"></i>
280
+ </button>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Scripts List -->
285
+ <div class="mt-4">
286
+ <div class="flex items-center justify-between mb-2">
287
+ <h4 class="text-sm font-medium text-gray-700">包含的分镜脚本 (2)</h4>
288
+ <button class="text-xs text-blue-600 hover:text-blue-800">
289
+ <i class="fas fa-plus mr-1"></i>添加分镜
290
+ </button>
291
+ </div>
292
+
293
+ <div class="space-y-3">
294
+ <!-- Script Item -->
295
+ <div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true">
296
+ <div class="flex items-start">
297
+ <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3">
298
+ <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" class="h-full w-full object-cover">
299
+ </div>
300
+ <div class="flex-1 min-w-0">
301
+ <div class="flex items-center justify-between">
302
+ <p class="text-sm font-medium text-gray-900 truncate">产品介绍</p>
303
+ <div class="flex space-x-2 script-actions opacity-0 transition-opacity">
304
+ <button class="text-gray-400 hover:text-blue-600">
305
+ <i class="fas fa-edit text-xs"></i>
306
+ </button>
307
+ <button class="text-gray-400 hover:text-red-600">
308
+ <i class="fas fa-trash text-xs"></i>
309
+ </button>
310
+ </div>
311
+ </div>
312
+ <p class="text-xs text-gray-500 mt-1">分镜类型: 产品介绍 | 时长: 8秒 | 景别: 特写</p>
313
+ <p class="text-xs text-gray-500 truncate mt-1">内容: 产品Y的特写镜头，展示产品细节...</p>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Script Item -->
319
+ <div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true">
320
+ <div class="flex items-start">
321
+ <div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3">
322
+ <video class="h-full w-full object-cover" poster="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
323
+ <source src="#" type="video/mp4">
324
+ </video>
325
+ <div class="absolute inset-0 flex items-center justify-center">
326
+ <i class="fas fa-play text-white text-xl"></i>
327
+ </div>
328
+ </div>
329
+ <div class="flex-1 min-w-0">
330
+ <div class="flex items-center justify-between">
331
+ <p class="text-sm font-medium text-gray-900 truncate">使用教程</p>
332
+ <div class="flex space-x-2 script-actions opacity-0 transition-opacity">
333
+ <button class="text-gray-400 hover:text-blue-600">
334
+ <i class="fas fa-edit text-xs"></i>
335
+ </button>
336
+ <button class="text-gray-400 hover:text-red-600">
337
+ <i class="fas fa-trash text-xs"></i>
338
+ </button>
339
+ </div>
340
+ </div>
341
+ <p class="text-xs text-gray-500 mt-1">分镜类型: 教程演示 | 时长: 15秒 | 景别: 中景</p>
342
+ <p class="text-xs text-gray-500 truncate mt-1">内容: 逐步展示产品Y的使用方法和注意事项...</p>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Create Script Framework Modal -->
356
+ <div class="fixed inset-0 z-50 overflow-y-auto hidden" id="createScriptModal">
357
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
358
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
359
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
360
+ </div>
361
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
362
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full">
363
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
364
+ <div class="sm:flex sm:items-start">
365
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
366
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">新建脚本框架</h3>
367
+ <div class="grid grid-cols-1 gap-4">
368
+ <div>
369
+ <label class="block text-sm font-medium text-gray-700 mb-1">框架名称</label>
370
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
371
+ </div>
372
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
373
+ <div>
374
+ <label class="block text-sm font-medium text-gray-700 mb-1">客户</label>
375
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
376
+ <option>选择客户</option>
377
+ <option>客户A</option>
378
+ <option>客户B</option>
379
+ <option>客户C</option>
380
+ </select>
381
+ </div>
382
+ <div>
383
+ <label class="block text-sm font-medium text-gray-700 mb-1">产品</label>
384
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
385
+ <option>选择产品</option>
386
+ <option>产品X</option>
387
+ <option>产品Y</option>
388
+ <option>产品Z</option>
389
+ </select>
390
+ </div>
391
+ </div>
392
+ <div>
393
+ <label class="block text-sm font-medium text-gray-700 mb-1">实体店铺</label>
394
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
395
+ </div>
396
+ <div>
397
+ <label class="block text-sm font-medium text-gray-700 mb-1">选择模板</label>
398
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
399
+ <option>不使用模板</option>
400
+ <option>产品展示模板</option>
401
+ <option>教程类模板</option>
402
+ <option>促销类模板</option>
403
+ </select>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
410
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
411
+ 创建
412
+ </button>
413
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="document.getElementById('createScriptModal').classList.add('hidden')">
414
+ 取消
415
+ </button>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Create Script Item Modal -->
422
+ <div class="fixed inset-0 z-50 overflow-y-auto hidden" id="createScriptItemModal">
423
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
424
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
425
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
426
+ </div>
427
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
428
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
429
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
430
+ <div class="sm:flex sm:items-start">
431
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
432
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">添加分镜脚本</h3>
433
+ <div class="grid grid-cols-1 gap-4">
434
+ <div>
435
+ <label class="block text-sm font-medium text-gray-700 mb-1">分镜名称</label>
436
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
437
+ </div>
438
+ <div>
439
+ <label class="block text-sm font-medium text-gray-700 mb-1">分镜类型</label>
440
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
441
+ <option>选择分镜类型</option>
442
+ <option>产品展示</option>
443
+ <option>功能演示</option>
444
+ <option>教程演示</option>
445
+ <option>促销信息</option>
446
+ <option>场景演绎</option>
447
+ </select>
448
+ </div>
449
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
450
+ <div>
451
+ <label class="block text-sm font-medium text-gray-700 mb-1">时长(秒)</label>
452
+ <input type="number" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
453
+ </div>
454
+ <div>
455
+ <label class="block text-sm font-medium text-gray-700 mb-1">景别</label>
456
+ <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
457
+ <option>选择景别</option>
458
+ <option>特写</option>
459
+ <option>近景</option>
460
+ <option>中景</option>
461
+ <option>全景</option>
462
+ <option>远景</option>
463
+ </select>
464
+ </div>
465
+ </div>
466
+ <div>
467
+ <label class="block text-sm font-medium text-gray-700 mb-1">内容</label>
468
+ <textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea>
469
+ </div>
470
+ <div>
471
+ <label class="block text-sm font-medium text-gray-700 mb-1">参考图片</label>
472
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
473
+ <div class="space-y-1 text-center">
474
+ <div class="flex text-sm text-gray-600">
475
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
476
+ <span>上传文件</span>
477
+ <input type="file" class="sr-only">
478
+ </label>
479
+ <p class="pl-1">或拖拽到此处</p>
480
+ </div>
481
+ <p class="text-xs text-gray-500">PNG, JPG, GIF 最大2MB</p>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ <div>
486
+ <label class="block text-sm font-medium text-gray-700 mb-1">参考视频</label>
487
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
488
+ <div class="space-y-1 text-center">
489
+ <div class="flex text-sm text-gray-600">
490
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
491
+ <span>上传文件</span>
492
+ <input type="file" class="sr-only">
493
+ </label>
494
+ <p class="pl-1">或拖拽到此处</p>
495
+ </div>
496
+ <p class="text-xs text-gray-500">MP4, MOV 最大10MB</p>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ <div>
501
+ <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
502
+ <textarea rows="2" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea>
503
+ </div>
504
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
505
+ <div>
506
+ <label class="block text-sm font-medium text-gray-700 mb-1">场地</label>
507
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
508
+ </div>
509
+ <div>
510
+ <label class="block text-sm font-medium text-gray-700 mb-1">道具</label>
511
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
512
+ </div>
513
+ <div>
514
+ <label class="block text-sm font-medium text-gray-700 mb-1">模特</label>
515
+ <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
516
+ </div>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
523
+ <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
524
+ 添加
525
+ </button>
526
+ <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="document.getElementById('createScriptItemModal').classList.add('hidden')">
527
+ 取消
528
+ </button>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+
534
+ <script>
535
+ // Drag and drop functionality for script items
536
+ document.addEventListener('DOMContentLoaded', function() {
537
+ const draggableItems = document.querySelectorAll('.draggable-item');
538
+
539
+ draggableItems.forEach(item => {
540
+ item.addEventListener('dragstart', function(e) {
541
+ this.classList.add('dragging');
542
+ e.dataTransfer.setData('text/plain', this.id);
543
+ });
544
+
545
+ item.addEventListener('dragend', function() {
546
+ this.classList.remove('dragging');
547
+ });
548
+ });
549
+
550
+ // Handle create script framework button click
551
+ document.querySelector('button:contains("新建脚本框架")').addEventListener('click', function() {
552
+ document.getElementById('createScriptModal').classList.remove('hidden');
553
+ });
554
+
555
+ // Handle add script item button clicks
556
+ document.querySelectorAll('button:contains("添加分镜")').forEach(button => {
557
+ button.addEventListener('click', function() {
558
+ document.getElementById('createScriptItemModal').classList.remove('hidden');
559
+ });
560
+ });
561
+ });
562
+ </script>
563
+ <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=liangdi/script" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
564
+ </html>