Download index.html from liangdi/script: direct link, hf CLI and curl.
- Browser
- Download file 40.1 kB
-
https://huggingface.co/spaces/liangdi/script/resolve/main/index.html
- Command line
-
hf download hf://spaces/liangdi/script/index.html
-
curl -L -o index.html https://huggingface.co/spaces/liangdi/script/resolve/main/index.html
40.1 kB
| <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"> | |
| <!-- Sidebar --> | |
| <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> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navigation --> | |
| <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> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto custom-scrollbar p-4"> | |
| <!-- Filters --> | |
| <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> | |
| <!-- Script Frameworks List --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="divide-y divide-gray-200"> | |
| <!-- Script Framework Item --> | |
| <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> | |
| <!-- Scripts List --> | |
| <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"> | |
| <!-- Script Item --> | |
| <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> | |
| <!-- Script Item --> | |
| <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> | |
| <!-- Script Item --> | |
| <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> | |
| <!-- Script Framework Item --> | |
| <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> | |
| <!-- Scripts List --> | |
| <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"> | |
| <!-- Script Item --> | |
| <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> | |
| <!-- Script Item --> | |
| <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> | |
| <!-- Create Script Framework Modal --> | |
| <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> | |
| <!-- Create Script Item Modal --> | |
| <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> | |
| // Drag and drop functionality for script items | |
| 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'); | |
| }); | |
| }); | |
| // Handle create script framework button click | |
| document.querySelector('button:contains("新建脚本框架")').addEventListener('click', function() { | |
| document.getElementById('createScriptModal').classList.remove('hidden'); | |
| }); | |
| // Handle add script item button clicks | |
| 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> |