<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>塔未电影夜 - 95后治愈式社交拍摄脚本</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #333;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
header {
background: linear-gradient(to right, #ff6b6b, #4ecdc4);
color: white;
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
background-size: 100% 100%;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 1;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.metadata {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
flex-wrap: wrap;
}
.meta-card {
background: rgba(255, 255, 255, 0.2);
padding: 15px 25px;
border-radius: 10px;
text-align: center;
min-width: 180px;
backdrop-filter: blur(5px);
}
.meta-card h3 {
font-size: 0.9rem;
margin-bottom: 5px;
opacity: 0.8;
}
.meta-card p {
font-size: 1.3rem;
font-weight: bold;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin: 25px 0;
flex-wrap: wrap;
}
.btn {
padding: 14px 30px;
font-size: 1.1rem;
border: none;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
.btn-download {
background: linear-gradient(to right, #4facfe, #00f2fe);
color: white;
}
.btn-excel {
background: linear-gradient(to right, #0ba360, #3cba92);
color: white;
}
.btn-word {
background: linear-gradient(to right, #2b5876, #4e4376);
color: white;
}
.content {
padding: 30px;
}
.section {
margin-bottom: 40px;
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
color: #ff6b6b;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
}
.section-title i {
font-size: 1.8rem;
}
.section-title h2 {
font-size: 1.8rem;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
th {
background: linear-gradient(to right, #4ecdc4, #556270);
color: white;
text-align: left;
padding: 15px;
font-weight: 600;
}
td {
padding: 14px;
border-bottom: 1px solid #eee;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f0faff;
}
.color-palette {
display: flex;
gap: 10px;
margin: 15px 0;
flex-wrap: wrap;
}
.color {
width: 80px;
height: 60px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.props-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.prop-card {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
border-left: 4px solid #4ecdc4;
}
.prop-card h3 {
color: #ff6b6b;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.prop-card ul {
padding-left: 20px;
}
.prop-card li {
margin-bottom: 8px;
}
footer {
text-align: center;
padding: 25px;
background: #f8f9fa;
color: #666;
font-size: 0.9rem;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.metadata {
flex-direction: column;
align-items: center;
}
.meta-card {
width: 100%;
max-width: 300px;
}
table {
font-size: 0.85rem;
}
th, td {
padding: 10px 8px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>《塔未电影夜：95后治愈式社交》拍摄脚本</h1>
<p class="subtitle">30秒短视频脚本 | 聚焦95后女性社交场景 | 欢乐电影之夜主题</p>
<div class="metadata">
<div class="meta-card">
<h3>视频时长</h3>
<p>30秒</p>
</div>
<div class="meta-card">
<h3>目标人群</h3>
<p>95-00后女性</p>
</div>
<div class="meta-card">
<h3>画幅比例</h3>
<p>9:16 (竖版)</p>
</div>
<div class="meta-card">
<h3>脚本版本</h3>
<p>V1.2</p>
</div>
</div>
</header>
<div class="controls">
<button class="btn btn-download" onclick="downloadHTML()">
<i class="fas fa-download"></i> 下载HTML
</button>
<button class="btn btn-word" onclick="downloadWord()">
<i class="fas fa-file-word"></i> 下载Word文档
</button>
<button class="btn btn-excel" onclick="downloadExcel()">
<i class="fas fa-file-excel"></i> 下载Excel表格
</button>
</div>
<div class="content">
<div class="section">
<div class="section-title">
<i class="fas fa-video"></i>
<h2>基础信息</h2>
</div>
<div class="props-grid">
<div class="prop-card">
<h3><i class="fas fa-palette"></i> 视觉色调</h3>
<ul>
<li>主调：深蓝 (RGB 8/24/48)</li>
<li>点缀：暖黄串灯 (RGB 255/220/120)</li>
<li>服装：马卡龙色块 (粉/蓝/黄)</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-music"></i> 背景音乐</h3>
<ul>
<li>轻快尤克里里版《Sunny》</li>
<li>0-10s：纯旋律+环境音效</li>
<li>18s起：加入人声合唱"la~la~"</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-cubes"></i> 关键道具</h3>
<ul>
<li>蜜雪冰城杯</li>
<li>鲨鱼夹</li>
<li>毛毯</li>
<li>彩色抱枕</li>
<li>零食托盘</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-swatchbook"></i> 色彩公式</h3>
<div class="color-palette">
<div class="color" style="background: #081830;">深蓝夜空<br>60%</div>
<div class="color" style="background: #ffdc78;">暖黄灯光<br>30%</div>
<div class="color" style="background: #ff9aa2;">服装道具<br>10%</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-title">
<i class="fas fa-film"></i>
<h2>分镜脚本</h2>
</div>
<table>
<thead>
<tr>
<th>时间</th>
<th>景别</th>
<th>画面描述</th>
<th>声音设计</th>
<th>字幕/特效</th>
</tr>
</thead>
<tbody>
<tr>
<td>0-1s</td>
<td>特写</td>
<td>纯黑背景，两束圆形光斑模拟影院效果</td>
<td>汽水开罐"呲——"，薯片袋窸窣声，女生气声耳语</td>
<td>光斑渐亮动画</td>
</tr>
<tr>
<td>1-3s</td>
<td>大特写</td>
<td>手机屏播放吸血鬼露牙画面，屏幕反光映出5张惊恐脸</td>
<td>阴森弦乐骤停，"咔嚓！"咬苹果脆响</td>
<td>屏幕添加抖动特效</td>
</tr>
<tr>
<td>3-7s</td>
<td>全景</td>
<td>镜头急速后拉揭晓庭院场景：串灯如星幕，满地零食袋，女生笑倒成团</td>
<td>爆发笑声："你表情超蠢哈哈哈！" BGM旋律切入</td>
<td>"片荒？不存在的"，左下角蜜雪冰城杯入镜</td>
</tr>
<tr>
<td>7-12s</td>
<td>多机位</td>
<td>慢镜头抛接爆米花，西瓜汁滴落，用薯片模仿吸血鬼牙</td>
<td>气泡升腾音效</td>
<td>"闺蜜=最佳电子榨菜"，右上角鲨鱼夹特写</td>
</tr>
<tr>
<td>12-18s</td>
<td>环绕</td>
<td>360°运镜捕捉搞怪表情，毛毯蒙头，笑到捶地</td>
<td>蝉鸣+汽水冒泡，布料摩擦声</td>
<td>"塔未晚风记住所有笑声"，文字随风飘动效果</td>
</tr>
<tr>
<td>18-25s</td>
<td>升格</td>
<td>全员举杯碰撞，液体晃出光斑，杯壁倒映笑脸</td>
<td>集体喊话："碰杯！敬永不NG的姐妹局"，玻璃脆响</td>
<td>杯壁添加"#塔未碰杯"光效字</td>
</tr>
<tr>
<td>25-30s</td>
<td>分屏</td>
<td>主画面碰杯仰饮，分裂三小窗展示不同观影场景</td>
<td>打字机声效，水滴落音</td>
<td>主标："晒你的电影夜现场"，副标："@你最吵的闺蜜 来塔未碰杯"</td>
</tr>
</tbody>
</table>
</div>
<div class="section">
<div class="section-title">
<i class="fas fa-tools"></i>
<h2>执行手册</h2>
</div>
<div class="props-grid">
<div class="prop-card">
<h3><i class="fas fa-camera"></i> 拍摄要求</h3>
<ul>
<li>帧速率：主镜头60fps（升格镜头120fps）</li>
<li>设备：Sony A7S3（S-log3）</li>
<li>辅助：GoPro用于俯拍/杯壁倒影</li>
<li>灯光：三层布光（背景/面部/道具）</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-theater-masks"></i> 演员调度</h3>
<ul>
<li>恐怖镜头：抱团缩肩+瞪大眼</li>
<li>笑场戏：前俯后仰式大笑</li>
<li>碰杯仪式：踮脚举杯+身体前倾</li>
<li>自然互动：抢零食/模仿台词/同步抖腿</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-coins"></i> 成本控制方案</h3>
<ul>
<li>杯壁倒影：透明酒杯涂凡士林+手机打光</li>
<li>零食飞溅：玉米粒+压缩空气模拟爆米花</li>
<li>恐怖镜头：使用《精灵旅社》表情包</li>
</ul>
</div>
<div class="prop-card">
<h3><i class="fas fa-bullhorn"></i> 传播设计</h3>
<ul>
<li>主话题：#95后电量充满站</li>
<li>子话题：#塔未碰杯仪式</li>
<li>互动话题：#闺蜜分贝挑战赛</li>
<li>UGC活动：电影夜举杯视频+暗号</li>
</ul>
</div>
</div>
</div>
</div>
<footer>
<p>脚本文档 © 2025 回声像素创意工作室 | 最后更新: 2025-08-19</p>
<p>导演: 张永成 | 运营: 大龙 | 美术指导: 雅玲</p>
</footer>
</div>
<script>
// 下载HTML文件
function downloadHTML() {
const htmlContent = document.documentElement.outerHTML;
const blob = new Blob([htmlContent], { type: 'text/html' });
saveAs(blob, '塔未电影夜拍摄脚本.html');
}
// 下载Word文档
function downloadWord() {
const content = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>塔未电影夜拍摄脚本</title>
<style>
body { font-family: Arial, sans-serif; line-height: 1.6; }
h1, h2 { color: #2b5876; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>塔未电影夜拍摄脚本</h1>
<p><strong>版本号：</strong> V1.2</p>
<p><strong>目标人群：</strong> 95-00后女性</p>
<p><strong>视频时长：</strong> 30秒</p>
<h2>分镜脚本</h2>
<table>
<tr>
<th>时间</th>
<th>景别</th>
<th>画面描述</th>
<th>声音设计</th>
<th>字幕/特效</th>
</tr>
<tr>
<td>0-1s</td>
<td>特写</td>
<td>纯黑背景，两束圆形光斑模拟影院效果</td>
<td>汽水开罐"呲——"，薯片袋窸窣声，女生气声耳语</td>
<td>光斑渐亮动画</td>
</tr>
<tr>
<td>1-3s</td>
<td>大特写</td>
<td>手机屏播放吸血鬼露牙画面，屏幕反光映出5张惊恐脸</td>
<td>阴森弦乐骤停，"咔嚓！"咬苹果脆响</td>
<td>屏幕添加抖动特效</td>
</tr>
<tr>
<td>3-7s</td>
<td>全景</td>
<td>镜头急速后拉揭晓庭院场景：串灯如星幕，满地零食袋，女生笑倒成团</td>
<td>爆发笑声："你表情超蠢哈哈哈！" BGM旋律切入</td>
<td>"片荒？不存在的"，左下角蜜雪冰城杯入镜</td>
</tr>
<tr>
<td>7-12s</td>
<td>多机位</td>
<td>慢镜头抛接爆米花，西瓜汁滴落，用薯片模仿吸血鬼牙</td>
<td>气泡升腾音效</td>
<td>"闺蜜=最佳电子榨菜"，右上角鲨鱼夹特写</td>
</tr>
<tr>
<td>12-18s</td>
<td>环绕</td>
<td>360°运镜捕捉搞怪表情，毛毯蒙头，笑到捶地</td>
<td>蝉鸣+汽水冒泡，布料摩擦声</td>
<td>"塔未晚风记住所有笑声"，文字随风飘动效果</td>
</tr>
<tr>
<td>18-25s</td>
<td>升格</td>
<td>全员举杯碰撞，液体晃出光斑，杯壁倒映笑脸</td>
<td>集体喊话："碰杯！敬永不NG的姐妹局"，玻璃脆响</td>
<td>杯壁添加"#塔未碰杯"光效字</td>
</tr>
<tr>
<td>25-30s</td>
<td>分屏</td>
<td>主画面碰杯仰饮，分裂三小窗展示不同观影场景</td>
<td>打字机声效，水滴落音</td>
<td>主标："晒你的电影夜现场"，副标："@你最吵的闺蜜 来塔未碰杯"</td>
</tr>
</table>
<h2>执行要求</h2>
<p><strong>拍摄设备：</strong> Sony A7S3（主机），GoPro（辅助）</p>
<p><strong>帧速率：</strong> 主镜头60fps，升格镜头120fps</p>
<p><strong>灯光设计：</strong> 三层布光（背景LED串灯，面部棒灯补光，道具聚光灯）</p>
</body>
</html>
`;
const blob = new Blob([content], { type: 'application/msword' });
saveAs(blob, '塔未电影夜拍摄脚本.doc');
}
// 下载Excel表格
function downloadExcel() {
// 创建工作簿
const wb = XLSX.utils.book_new();
wb.SheetNames.push("拍摄脚本");
// 准备数据
const data = [
["时间", "景别", "画面描述", "声音设计", "字幕/特效"],
["0-1s", "特写", "纯黑背景，两束圆形光斑模拟影院效果", "汽水开罐'呲——'，薯片袋窸窣声，女生气声耳语", "光斑渐亮动画"],
["1-3s", "大特写", "手机屏播放吸血鬼露牙画面，屏幕反光映出5张惊恐脸", "阴森弦乐骤停，'咔嚓！'咬苹果脆响", "屏幕添加抖动特效"],
["3-7s", "全景", "镜头急速后拉揭晓庭院场景：串灯如星幕，满地零食袋，女生笑倒成团", "爆发笑声：'你表情超蠢哈哈哈！' BGM旋律切入", "'片荒？不存在的'，左下角蜜雪冰城杯入镜"],
["7-12s", "多机位", "慢镜头抛接爆米花，西瓜汁滴落，用薯片模仿吸血鬼牙", "气泡升腾音效", "'闺蜜=最佳电子榨菜'，右上角鲨鱼夹特写"],
["12-18s", "环绕", "360°运镜捕捉搞怪表情，毛毯蒙头，笑到捶地", "蝉鸣+汽水冒泡，布料摩擦声", "'塔未晚风记住所有笑声'，文字随风飘动效果"],
["18-25s", "升格", "全员举杯碰撞，液体晃出光斑，杯壁倒映笑脸", "集体喊话：'碰杯！敬永不NG的姐妹局'，玻璃脆响", "杯壁添加'#塔未碰杯'光效字"],
["25-30s", "分屏", "主画面碰杯仰饮，分裂三小窗展示不同观影场景", "打字机声效，水滴落音", "主标：'晒你的电影夜现场'，副标：'@你最吵的闺蜜 来塔未碰杯'"]
];
// 创建工作表
const ws = XLSX.utils.aoa_to_sheet(data);
wb.Sheets["拍摄脚本"] = ws;
// 导出Excel
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
// 转换并保存
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), '塔未电影夜拍摄脚本.xlsx');
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html