<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>雷雨·繁漪卷宗 | 侦探调查档案</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #4a3b2c; /* 旧木桌色 */
font-family: 'Segoe UI', '华文楷书', 'Microsoft YaHei', 'Courier New', monospace;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 20px;
}
/* 卷宗容器 */
.casebook {
max-width: 1100px;
width: 100%;
background: transparent;
position: relative;
box-shadow: 0 20px 35px rgba(0,0,0,0.5);
}
/* 每一页均为A4尺寸 (打印时精确) */
.page {
width: 210mm;
min-height: 297mm;
background: #fef7e0; /* 古旧纸张 */
background-image: radial-gradient(circle at 10% 20%, rgba(0,0,0,0.02) 2%, transparent 2.5%);
background-size: 28px 28px;
margin: 0 auto 25px auto;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
border-radius: 4px;
position: relative;
padding: 18mm 15mm 20mm 15mm;
page-break-after: always; /* 打印时自动分页 */
break-inside: avoid;
transition: all 0.2s;
border: 1px solid #d6bf8b;
}
/* 屏幕预览时确保宽度自适应但保持比例 */
@media screen {
.page {
width: 100%;
max-width: 210mm;
margin-left: auto;
margin-right: auto;
}
}
/* 打印样式 – 隐藏翻页控件，背景完整 */
@media print {
body {
background: white;
padding: 0;
margin: 0;
}
.page {
margin: 0;
box-shadow: none;
border: 1px solid #ccc;
page-break-after: always;
break-inside: avoid;
}
.nav-controls, .print-tip {
display: none;
}
.casebook {
max-width: 100%;
box-shadow: none;
}
}
/* 卷宗装饰元素 */
.stamp {
position: absolute;
top: 20px;
right: 25px;
transform: rotate(12deg);
opacity: 0.6;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 14px;
color: #b03a2e;
border: 2px solid #b03a2e;
padding: 5px 10px;
border-radius: 3px;
background: rgba(255,245,200,0.7);
pointer-events: none;
z-index: 2;
}
.confidential {
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
}
h1 {
font-size: 32px;
font-weight: 800;
letter-spacing: 6px;
margin: 15px 0 5px;
color: #2c2416;
border-left: 8px solid #9e2f1f;
padding-left: 18px;
}
.case-number {
font-family: monospace;
background: #2b2b1f;
display: inline-block;
color: #e6d5a8;
padding: 4px 12px;
font-size: 13px;
letter-spacing: 1px;
margin: 10px 0 20px 0;
}
hr.sep {
margin: 18px 0;
border: none;
height: 1px;
background: linear-gradient(90deg, #b48b5a, #f0ddb0, #b48b5a);
}
.investigator-line {
background: #f0e5cf;
padding: 8px 12px;
font-family: monospace;
margin: 15px 0;
border-left: 4px solid #8b5a2b;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.sign-space {
border-bottom: 1px dotted #8b5a2b;
min-width: 160px;
display: inline-block;
margin-left: 8px;
}
mark {
background: #f9f0c1;
color: #a43b1a;
padding: 0 2px;
}
.dialogue {
background: #f7efda;
padding: 12px 18px;
margin: 16px 0;
font-family: 'Courier New', monospace;
font-size: 0.95rem;
border-left: 6px solid #bc9a6c;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.role {
font-weight: bold;
color: #6b3e1c;
}
.insight {
background: #fff2dd;
padding: 12px;
border-radius: 12px;
margin: 18px 0;
border: 1px dashed #c6a87f;
}
.task-box {
background: #e7dbbc;
margin-top: 22px;
padding: 12px 18px;
border: 2px solid #ab8e54;
}
.emotion-chart {
margin: 20px 0;
background: #fef3e0;
padding: 12px;
text-align: center;
}
.axis {
margin: 15px 0;
position: relative;
height: 150px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150"><line x1="30" y1="120" x2="470" y2="120" stroke="%237a5a3a" stroke-width="1.5" stroke-dasharray="3 2"/><line x1="30" y1="10" x2="30" y2="120" stroke="%237a5a3a" stroke-width="1.5"/><text x="20" y="15" fill="%238b4513" font-size="10">高</text><text x="20" y="125" fill="%238b4513" font-size="10">低</text><text x="40" y="140" fill="%234d2a10" font-size="9">初登场</text><text x="130" y="140" fill="%234d2a10" font-size="9">感情激化</text><text x="220" y="140" fill="%234d2a10" font-size="9">对峙</text><text x="310" y="140" fill="%234d2a10" font-size="9">真相渐露</text><text x="400" y="140" fill="%234d2a10" font-size="9">雷雨夜</text></svg>') no-repeat center;
background-size: contain;
}
.footer-note {
margin-top: 25px;
font-size: 11px;
text-align: center;
color: #855e32;
border-top: 1px solid #e0caa0;
padding-top: 12px;
font-style: italic;
}
/* 翻页控件 */
.nav-controls {
display: flex;
justify-content: center;
gap: 25px;
margin: 20px auto 10px;
position: sticky;
bottom: 20px;
background: #3f3322cc;
backdrop-filter: blur(8px);
padding: 12px 28px;
border-radius: 60px;
width: fit-content;
z-index: 999;
}
.nav-btn {
background: #2c2418;
border: none;
color: #ffefcf;
font-size: 1.3rem;
font-weight: bold;
padding: 8px 20px;
border-radius: 40px;
cursor: pointer;
transition: 0.2s;
font-family: monospace;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}
.nav-btn:hover {
background: #7e5e38;
transform: scale(1.02);
}
.page-indicator {
background: #ede3c9;
padding: 6px 18px;
border-radius: 32px;
font-weight: bold;
color: #562e1a;
}
.print-tip {
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #f2e2b0;
background: #2e2a22;
display: inline-block;
padding: 4px 12px;
border-radius: 30px;
}
/* 破折号强调 */
.dash-highlight {
background: #f1dbaa;
font-weight: bold;
padding: 0 2px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="casebook" id="casebook">
<!-- 第1页：封面 + 调查员须知 + 档案头-->
<div class="page" id="page1">
<div class="stamp">
<div>绝密</div>
<div>🔍 调查副本</div>
</div>
<div style="text-align: center; margin-top: 20px;">
<div style="font-size: 48px; font-weight: 900; letter-spacing: 8px; color: #582a12;">⚡ 雷雨 ⚡</div>
<div style="font-size: 20px; margin: 8px 0; border-top: 2px solid #b48c48; border-bottom: 2px solid #b48c48; display: inline-block; padding: 4px 20px;">女性命运调查</div>
</div>
<div class="case-number">案件编号：L-2026-01 密级：调查员专属</div>
<div style="font-family: monospace; font-size: 24px; font-weight: bold; margin: 20px 0 0 0;">嫌疑人代号：<span style="background: #2b2118; color: #ecd9b4; padding: 2px 15px;">【 繁 漪 】</span></div>
<div class="investigator-line">
<span>🔍 调查员姓名：<span class="sign-space" style="width: 180px;">_________________</span></span>
<span>📁 组别：<span class="sign-space" style="width: 100px;">繁漪组____________</span></span>
</div>
<hr class="sep">
<div class="insight">
<p style="font-weight: bold;">⚠️ 调查员阅前须知</p>
<p style="margin-top: 8px;">你所读到的一切，是你是周公馆的周太太——<strong>繁漪</strong>的视角，是你所看见、听见与亲身经历的碎片。这些不是官方供词，而是你的记忆与感知。你不需要保持客观。你只需要保持<strong>真实</strong>。</p>
<p>你需要找到的并非一个"凶手"——真相如雷，而你也正在雷中。建议阅读时标记两个东西：</p>
<p>1️⃣ 别人对你说过哪些话，让你变成了某种形象<br>
2️⃣ 你说话时那些说不下去的地方 —— <span class="dash-highlight">破折号停下的位置</span>。那些破折号里面藏着什么。</p>
<p><mark>任务结束时，你将为这份卷宗画下你心里的"情绪曲线"。</mark></p>
</div>
<div style="font-size: 13px; margin-top: 25px; border-left: 3px solid #b26b3a; padding-left: 14px;">
<p>⚡ 本卷宗仅提供证词节选，结论由调查员独立完成。<br>⚡ 每一处停顿都是通往内心的暗道。</p>
</div>
<div class="footer-note">📜 卷一 · 开端 • 签字生效</div>
</div>
<!-- 第2页：第一幕 + 第二幕（我怕你）-->
<div class="page" id="page2">
<div class="stamp" style="opacity:0.4;">证物A</div>
<h1>第一幕 · 我住在这里</h1>
<p>民国十五年夏天。我住在这栋房子里。今天闷热得不像话，气压极低，所有的人像都要窒息。</p>
<p>我是繁漪。别人叫我周太太，但这称呼不属于我。我是这座宅子里被长时间关在楼上的女人。周朴园说我有病。徐医生每月来一次，带着他的药箱和沉重的目光。有时我喝，有时我摔。</p>
<div class="dialogue">
<div><span class="role">周朴园</span>：（严厉地）你应当听话。喝了它。</div>
<div><span class="role">繁漪</span>：（盯着药碗）我不想喝。</div>
<div><span class="role">周朴园</span>：你——你是有病的人。医生说了，这药对你有好处。</div>
<div><span class="role">繁漪</span>：我没有病！——我好好的。</div>
<div><span class="role">周朴园</span>：你看看你自己，半夜不睡，下楼走动，这像什么样子——把药喝了。</div>
<div><em style="display:block; margin-top:8px;">我看着他。这个人是我的丈夫。他用"有病"定义了我十年。</em></div>
</div>
<hr class="sep">
<h1>第二幕 · 我怕你——</h1>
<p>我以为我会一直这样过下去，直到那个孩子从乡下来到我面前。不——不是"孩子"。是周萍。我丈夫前妻的儿子。……我们之间发生的事情，我不准备为任何人辩护。我问心无愧，因为在这片废墟之上，"爱"与"罪"早已没有清晰的分野。</p>
<p>很长一段时间里，周萍是我在这座宅子中唯一的光。可他已经很久不来看我了。我知道他为什么躲我——那个新来的丫鬟，四凤。</p>
<div class="dialogue">
<div><span class="role">繁漪</span>：周萍——你——你也要走吗？</div>
<div><span class="role">周萍</span>：妈，我......</div>
<div><span class="role">繁漪</span>：（走近，抓住他的衣袖）<span class="dash-highlight">我怕你——</span>我怕你离开我——我什么都没有了。</div>
<div><span class="role">周萍</span>：（避开目光）你不该这样。爸知道了又要说你——</div>
<div><span class="role">繁漪</span>：说我什么？说我有病？我——我不是疯子！</div>
</div>
<p>他没有回头。门关上了。</p>
<div class="insight" style="margin-top: 15px;">
<p>🔍 <strong>文本侦探任务·圈画标签</strong>：在以上对话中，圈出周朴园、周萍对“我”的定义词。它们真实吗？写在旁边。</p>
</div>
<div class="footer-note">📜 卷二 · 锁链与光 • 破折号停驻之地</div>
</div>
<!-- 第3页：第三幕+第四幕+雷雨夜片段 -->
<div class="page" id="page3">
<div class="stamp" style="opacity:0.4;">反抗残章</div>
<h1>第三幕 · 我不是疯子</h1>
<p>我摔过那碗药。许多人记得这件事。周朴园说："你有病。"我不知道这句话他问过多少次。但我知道它逐渐成了<strong>定义我的那把刀</strong>。</p>
<div class="dialogue">
<div><span class="role">繁漪</span>：（拿起药碗，猛地摔在地上）我不喝！——你凭什么一直逼我？</div>
<div><span class="role">周朴园</span>：（冷笑）凭我是你丈夫。你——你简直疯了。</div>
<div><span class="role">繁漪</span>：疯了？是你把我关成这样的——这栋楼，我下了多少次？你数过吗？</div>
</div>
<p>病在何处？或许真有。但我宁可相信这场病是由这座房子哺育的。他从没想过，也许是他不该把我变成这个样子。</p>
<hr class="sep">
<h1>第四幕 · 真相渐露</h1>
<p>我跟着他到了鲁家的小屋。我看见他站在四凤面前，说着那些对我已经不愿再说的话。那晚大雨将至。一个声音在我心里说：去敲门。</p>
<div class="dialogue">
<div><span class="role">繁漪</span>：（站在门口，声音发抖）你——你——你凭什么去找她？</div>
<div><span class="role">周萍</span>：妈——</div>
<div><span class="role">繁漪</span>：不要叫我妈！我不是你妈——我是——<span class="dash-highlight">（突然停住）我怕你——怕你毁了我一辈子。</span></div>
</div>
<h1>⚡ 雷雨夜 ⚡</h1>
<div class="dialogue">
<div><span class="role">繁漪</span>：（大笑）哈哈哈——我不是疯子！你们才是疯子！</div>
<div><span class="role">周朴园</span>：把她拉走，她彻底疯了。</div>
<div><span class="role">繁漪</span>：（推开旁人）我不走。——今天我哪儿也不去。我要看着你们——看着你们一个个……</div>
</div>
<p>真相一个个被揭开：我知道越挖越痛。四凤在哭。侍萍在颤抖。周朴园的脸铁一般冷。最后，我锁上门。我并非为毁灭而疯狂，我是借疯狂才被听见。</p>
<div class="insight">
<p>📌 <strong>处境分析任务</strong>：此刻繁漪的“反抗形态”更接近爆发/隐忍/无知？请记下，后续完成雷达图和缺失资源。</p>
</div>
<div class="footer-note">📜 卷三 · 崩裂与呐喊 • 最后一声雷</div>
</div>
<!-- 第4页：藏在你心底的秘密 + 情绪曲线绘制 + 调查报告任务 -->
<div class="page" id="page4">
<div class="stamp">隐秘线索</div>
<h1>📖 藏在你心底的秘密</h1>
<ul style="margin-left: 24px; margin-bottom: 20px;">
<li>你与周萍之间曾发生一段不为外人道的情感纠葛。</li>
<li>你知道周萍背弃了你——因为他爱上了周家保姆四凤。</li>
<li>你不愿承认，但那一晚在鲁家窗外看见他们时，你的反应并非妒火，而是深刻的绝望与出走的渴念——只是你已经不知道门该怎么打开。</li>
<li>在周萍心中，你不是"他爱的人"，而是"父亲的有病的妻子"。</li>
<li>你依然希望四凤平安。那个女孩什么都不懂。这栋别墅里最无害的人却承受了最惨的毁灭。</li>
</ul>
<hr class="sep">
<h3>📉 情绪曲线 · 五阶段描画</h3>
<p>根据卷宗五个阶段：<strong>初登场 → 感情激化 → 对峙 → 真相渐露 → 雷雨夜</strong>，为每个阶段选一个情绪关键词，并在下方坐标轴对应位置标出情绪强度（1低~5高），连成曲线。</p>
<div class="emotion-chart">
<div class="axis" style="height: 140px;"></div>
、
<p style="font-size:12px; margin-top:8px;">（手绘曲线区 · 可用彩笔在卷宗上连接五点）</p>
<textarea rows="2" style="width:100%; background:#fcf4e2; border:1px solid #b89968; margin-top:10px; padding:8px;" ></textarea>
</div>
<div class="task-box">
<p><strong>📋 调查员最终任务（小组合作）</strong></p>
<ol style="margin-left: 20px;">
<li><strong>圈出定义标签</strong>：周朴园/周萍怎样描述你？这些词语真实吗？你觉得“你”应该在什么地方被看见、被听见？</li>
<li><strong>破折号解码</strong>：标出卷宗中停下来的地方（如“我怕你——”“我不是——”“我是——”），写出每个停顿处咽回去的半个句子，填写内心OS。</li>
<li><strong>反抗形态雷达图</strong>：为繁漪的爆发/隐忍/无知三种反抗方式打分（1~5）。小组讨论后填入调查报告。</li>
<li><strong>缺失资源归纳</strong>：她缺少什么？经济独立？法律保护？教育？信息？他人支持？填写表格（见背面/另纸）。</li>
<li><strong>发布会准备</strong>：结合“深圳女性支持资源卡”，为2026年的繁漪设计援助方案+第一步行动。</li>
</ol>
</div>
<div class="footer-note">🔎 真相由你说出 —— 完成调查报告，参加新闻发布会</div>
</div>
<!-- 补充第5页：资源卡与援助方案框架 方便发布会筹备 也可作为附加页-->
<div class="page" id="page5">
<div class="stamp" style="font-size:12px;">💡 援助构架</div>
<h1>🆘 2026深圳援助方案 · 工作纸</h1>
<p>假设繁漪生活在2026年的深圳，存在哪些支持资源？小组讨论后填写：</p>
<div style="background:#ecdbba; padding: 12px; margin: 15px 0;">
<p>🔹 法律援助：12338妇联维权热线 / 12348法律咨询<br>
🔹 心理支持：心理危机干预 400-161-9995 / “深i她”小程序<br>
🔹 经济独立：职业技能培训 • 反家暴庇护所 • 临时庇护床位<br>
🔹 信息渠道：社区社工服务站、女性就业支持计划</p>
</div>
<p><strong>✍️ 为繁漪设计“第一步行动”卡片</strong>（具体可执行）</p>
<textarea rows="3" style="width:100%; background:#fff5e6; border:2px solid #bd8f57; margin:10px 0; padding:10px;" ></textarea>
<p><strong>🎤 发布会形式选择</strong>：新闻连线 / 模拟提案 / 内心独白+旁白 / 穿越对话（90秒）</p>
<div class="investigator-line" style="justify-content: flex-start; gap: 20px;">
<span>✔ 方案简述：</span><span class="sign-space" style="width: 250px;">____________________</span>
</div>
<div class="insight" style="margin-top: 15px;">
<p>📢 你们今天在小组里互相配合、为另一位女性发声，这就是sisterhood的开始。</p>
</div>
<div class="footer-note">⚡ 雷雨终将过去，而我们有路可走 · 援助发布会准备页</div>
</div>
</div>
<!-- 翻页控件 -->
<div class="nav-controls">
<button class="nav-btn" id="prevBtn">◀ 上一页</button>
<span class="page-indicator" id="pageIndicator">第 1 / 5 页</span>
<button class="nav-btn" id="nextBtn">下一页 ▶</button>
</div>
<div class="print-tip">
🖨️ 提示：可按 Ctrl+P 打印卷宗，每页自动A4分页。屏幕翻页浏览。
</div>
<script>
(function(){
const pages = document.querySelectorAll('#casebook .page');
const total = pages.length;
let currentIdx = 0;
function updateVisibility() {
for(let i=0; i<total; i++) {
if(i === currentIdx) {
pages[i].style.display = 'block';
} else {
pages[i].style.display = 'none';
}
}
document.getElementById('pageIndicator').innerText = `第 ${currentIdx+1} / ${total} 页`;
}
function goPrev() {
if(currentIdx > 0) {
currentIdx--;
updateVisibility();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
function goNext() {
if(currentIdx < total-1) {
currentIdx++;
updateVisibility();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
document.getElementById('prevBtn').addEventListener('click', goPrev);
document.getElementById('nextBtn').addEventListener('click', goNext);
// 初始显示第一页，其他隐藏，保证打印时不会被隐藏？打印时需要全部打印，但CSS media print会强制所有.page为display:block!important
// 加入打印专用样式覆盖隐藏问题
const style = document.createElement('style');
style.textContent = `@media print { .page { display: block !important; page-break-after: always; } .nav-controls, .print-tip { display: none; } }`;
document.head.appendChild(style);
// 初始化显示
updateVisibility();
})();
</script>
</body>
</html>
index.html
md
README.md
index.html