|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>短视频脚本管理系统</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.script-item:hover .script-actions { |
|
|
opacity: 1; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 3px; |
|
|
} |
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
.media-preview { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.media-preview:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
.draggable-item { |
|
|
transition: transform 0.2s ease; |
|
|
} |
|
|
.draggable-item.dragging { |
|
|
opacity: 0.5; |
|
|
background: #f0f9ff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="hidden md:flex md:flex-shrink-0"> |
|
|
<div class="flex flex-col w-64 bg-white border-r border-gray-200"> |
|
|
<div class="flex items-center justify-center h-16 px-4 bg-blue-600 text-white"> |
|
|
<h1 class="text-xl font-bold">脚本管理系统</h1> |
|
|
</div> |
|
|
<div class="flex flex-col flex-grow p-4 overflow-y-auto"> |
|
|
<nav class="flex-1 space-y-2"> |
|
|
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-100 text-blue-800 rounded-md"> |
|
|
<i class="fas fa-clipboard-list mr-3"></i> |
|
|
脚本框架 |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fas fa-layer-group mr-3"></i> |
|
|
脚本分类 |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
通用脚本 |
|
|
</a> |
|
|
<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"> |
|
|
<i class="fas fa-tasks mr-3"></i> |
|
|
任务脚本 |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-auto pt-4 border-t border-gray-200"> |
|
|
<div class="flex items-center px-4"> |
|
|
<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=""> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-gray-700">编导用户</p> |
|
|
<p class="text-xs font-medium text-gray-500">编辑</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col flex-1 overflow-hidden"> |
|
|
|
|
|
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<button class="md:hidden text-gray-500 focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
<h2 class="ml-4 text-lg font-medium text-gray-900">脚本框架管理</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<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"> |
|
|
<i class="fas fa-plus mr-2"></i>新建脚本框架 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto custom-scrollbar p-4"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">脚本分类</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>全部分类</option> |
|
|
<option>产品展示</option> |
|
|
<option>场景演绎</option> |
|
|
<option>教程类</option> |
|
|
<option>测评类</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">客户筛选</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>全部客户</option> |
|
|
<option>客户A</option> |
|
|
<option>客户B</option> |
|
|
<option>客户C</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">产品筛选</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>全部产品</option> |
|
|
<option>产品X</option> |
|
|
<option>产品Y</option> |
|
|
<option>产品Z</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">搜索</label> |
|
|
<div class="relative"> |
|
|
<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="脚本名称..."> |
|
|
<i class="fas fa-search absolute left-3 top-2 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="p-4 hover:bg-gray-50 transition-colors duration-150"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-900">产品X展示脚本</h3> |
|
|
<div class="flex items-center mt-1 text-sm text-gray-500"> |
|
|
<span class="mr-3">客户: 客户A</span> |
|
|
<span class="mr-3">产品: 产品X</span> |
|
|
<span>店铺: 旗舰店</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-blue-600"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-red-600"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-green-600"> |
|
|
<i class="fas fa-clone"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="text-sm font-medium text-gray-700">包含的分镜脚本 (3)</h4> |
|
|
<button class="text-xs text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-plus mr-1"></i>添加分镜 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
|
|
|
<div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3"> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-sm font-medium text-gray-900 truncate">开场展示</p> |
|
|
<div class="flex space-x-2 script-actions opacity-0 transition-opacity"> |
|
|
<button class="text-gray-400 hover:text-blue-600"> |
|
|
<i class="fas fa-edit text-xs"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600"> |
|
|
<i class="fas fa-trash text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">分镜类型: 产品展示 | 时长: 5秒 | 景别: 近景</p> |
|
|
<p class="text-xs text-gray-500 truncate mt-1">内容: 产品X特写镜头展示，突出logo和主要功能...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3"> |
|
|
<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"> |
|
|
<source src="#" type="video/mp4"> |
|
|
</video> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-sm font-medium text-gray-900 truncate">功能演示</p> |
|
|
<div class="flex space-x-2 script-actions opacity-0 transition-opacity"> |
|
|
<button class="text-gray-400 hover:text-blue-600"> |
|
|
<i class="fas fa-edit text-xs"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600"> |
|
|
<i class="fas fa-trash text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">分镜类型: 功能演示 | 时长: 10秒 | 景别: 中景</p> |
|
|
<p class="text-xs text-gray-500 truncate mt-1">内容: 模特展示产品X的主要功能和使用场景...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3 flex items-center justify-center"> |
|
|
<i class="fas fa-image text-gray-300 text-2xl"></i> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-sm font-medium text-gray-900 truncate">促销信息</p> |
|
|
<div class="flex space-x-2 script-actions opacity-0 transition-opacity"> |
|
|
<button class="text-gray-400 hover:text-blue-600"> |
|
|
<i class="fas fa-edit text-xs"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600"> |
|
|
<i class="fas fa-trash text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">分镜类型: 文字信息 | 时长: 3秒 | 景别: 全景</p> |
|
|
<p class="text-xs text-gray-500 truncate mt-1">内容: 展示促销信息和购买方式...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-4 hover:bg-gray-50 transition-colors duration-150"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-lg font-medium text-gray-900">产品Y使用教程</h3> |
|
|
<div class="flex items-center mt-1 text-sm text-gray-500"> |
|
|
<span class="mr-3">客户: 客户B</span> |
|
|
<span class="mr-3">产品: 产品Y</span> |
|
|
<span>店铺: 专卖店</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="p-2 text-gray-500 hover:text-blue-600"> |
|
|
<i class="fas fa-edit"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-red-600"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
<button class="p-2 text-gray-500 hover:text-green-600"> |
|
|
<i class="fas fa-clone"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-4"> |
|
|
<div class="flex items-center justify-between mb-2"> |
|
|
<h4 class="text-sm font-medium text-gray-700">包含的分镜脚本 (2)</h4> |
|
|
<button class="text-xs text-blue-600 hover:text-blue-800"> |
|
|
<i class="fas fa-plus mr-1"></i>添加分镜 |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3"> |
|
|
|
|
|
<div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3"> |
|
|
<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"> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-sm font-medium text-gray-900 truncate">产品介绍</p> |
|
|
<div class="flex space-x-2 script-actions opacity-0 transition-opacity"> |
|
|
<button class="text-gray-400 hover:text-blue-600"> |
|
|
<i class="fas fa-edit text-xs"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600"> |
|
|
<i class="fas fa-trash text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">分镜类型: 产品介绍 | 时长: 8秒 | 景别: 特写</p> |
|
|
<p class="text-xs text-gray-500 truncate mt-1">内容: 产品Y的特写镜头，展示产品细节...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-3 border border-gray-200 rounded-md draggable-item" draggable="true"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-16 w-16 bg-gray-100 rounded-md overflow-hidden mr-3"> |
|
|
<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"> |
|
|
<source src="#" type="video/mp4"> |
|
|
</video> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-play text-white text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<p class="text-sm font-medium text-gray-900 truncate">使用教程</p> |
|
|
<div class="flex space-x-2 script-actions opacity-0 transition-opacity"> |
|
|
<button class="text-gray-400 hover:text-blue-600"> |
|
|
<i class="fas fa-edit text-xs"></i> |
|
|
</button> |
|
|
<button class="text-gray-400 hover:text-red-600"> |
|
|
<i class="fas fa-trash text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500 mt-1">分镜类型: 教程演示 | 时长: 15秒 | 景别: 中景</p> |
|
|
<p class="text-xs text-gray-500 truncate mt-1">内容: 逐步展示产品Y的使用方法和注意事项...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 z-50 overflow-y-auto hidden" id="createScriptModal"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<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"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">新建脚本框架</h3> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">框架名称</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">客户</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>选择客户</option> |
|
|
<option>客户A</option> |
|
|
<option>客户B</option> |
|
|
<option>客户C</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">产品</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>选择产品</option> |
|
|
<option>产品X</option> |
|
|
<option>产品Y</option> |
|
|
<option>产品Z</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">实体店铺</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">选择模板</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>不使用模板</option> |
|
|
<option>产品展示模板</option> |
|
|
<option>教程类模板</option> |
|
|
<option>促销类模板</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<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"> |
|
|
创建 |
|
|
</button> |
|
|
<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')"> |
|
|
取消 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed inset-0 z-50 overflow-y-auto hidden" id="createScriptItemModal"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
|
|
<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"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
<div class="sm:flex sm:items-start"> |
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">添加分镜脚本</h3> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">分镜名称</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">分镜类型</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>选择分镜类型</option> |
|
|
<option>产品展示</option> |
|
|
<option>功能演示</option> |
|
|
<option>教程演示</option> |
|
|
<option>促销信息</option> |
|
|
<option>场景演绎</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">时长(秒)</label> |
|
|
<input type="number" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">景别</label> |
|
|
<select class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
<option>选择景别</option> |
|
|
<option>特写</option> |
|
|
<option>近景</option> |
|
|
<option>中景</option> |
|
|
<option>全景</option> |
|
|
<option>远景</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">内容</label> |
|
|
<textarea rows="3" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">参考图片</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> |
|
|
<span>上传文件</span> |
|
|
<input type="file" class="sr-only"> |
|
|
</label> |
|
|
<p class="pl-1">或拖拽到此处</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">PNG, JPG, GIF 最大2MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">参考视频</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600"> |
|
|
<label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none"> |
|
|
<span>上传文件</span> |
|
|
<input type="file" class="sr-only"> |
|
|
</label> |
|
|
<p class="pl-1">或拖拽到此处</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">MP4, MOV 最大10MB</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">备注</label> |
|
|
<textarea rows="2" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"></textarea> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">场地</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">道具</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">模特</label> |
|
|
<input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<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"> |
|
|
添加 |
|
|
</button> |
|
|
<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')"> |
|
|
取消 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const draggableItems = document.querySelectorAll('.draggable-item'); |
|
|
|
|
|
draggableItems.forEach(item => { |
|
|
item.addEventListener('dragstart', function(e) { |
|
|
this.classList.add('dragging'); |
|
|
e.dataTransfer.setData('text/plain', this.id); |
|
|
}); |
|
|
|
|
|
item.addEventListener('dragend', function() { |
|
|
this.classList.remove('dragging'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('button:contains("新建脚本框架")').addEventListener('click', function() { |
|
|
document.getElementById('createScriptModal').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('button:contains("添加分镜")').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
document.getElementById('createScriptItemModal').classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
