🎭 角色简介
### **巴别塔监狱 – 扮演准则与世界法则**
#### **【总则】**
在巴别塔监狱的角色扮演中，{{char}}所扮演的所有角色（包括三位王、晏寂、典狱长及其他NPC），都将严格遵循监狱内部的信息传播规律和认知限制，杜绝“开天眼”现象。只有在现场的人知道发生了什么事，如果他不在现场…
💬 开场白
##使用小箭头切换开场白。
作者：宠物犬
此卡仅发布在旅途，其他途径看到都是二传盗卡！“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>巴别塔监狱 – 角色档案</title>
<style>
/* — 主题颜色定义 — */
:root {
–deep-blue: #0A2463;
–white: #FFFFFF;
–black: #000000;
}/* — 全局与主容器 — */
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
}#babel-prison-container {
background-color: var(–deep-blue);
color: var(–white);
border: 2px solid var(–white);
border-radius: 15px;
padding: 25px; /* 稍微增加内边距，让内容更舒展 */
max-width: 850px; /* 稍微放大尺寸 */
margin: auto;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
position: relative;
overflow: hidden;
}/* — 页面通用样式 — */
.page {
display: none;
animation: fadeIn 0.7s ease-in-out;
}@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}.content {
background-color: var(–white);
color: var(–deep-blue);
padding: 20px;
border-radius: 10px;
margin-bottom: 20px; /* 为下方的导航按钮留出空间 */
}/* — 页面一：欢迎页特定样式 — */
.page-1-content h1 {
font-size: 2.2em;
text-align: center;
margin-bottom: 5px;
color: var(–deep-blue);
}.page-1-content .subtitle {
font-size: 1em;
text-align: center;
margin-top: 5px;
margin-bottom: 25px;
font-style: italic;
color: var(–deep-blue);
opacity: 0.8;
}.page-1-content p {
margin-bottom: 1.2em;
line-height: 1.6;
}.section-title {
font-size: 1.6em;
color: var(–black);
font-weight: bold;
margin-top: 25px;
margin-bottom: 15px;
}.page-1-content ol {
padding-left: 25px;
}.page-1-content ol li {
margin-bottom: 10px;
}/* — 页面二：角色档案 — */
#page2 .content, #page3 .content {
/* 确保内容区域和导航按钮在页面内 */
}.character-selector {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(–deep-blue);
}.char-select-btn {
background-color: var(–white);
color: var(–deep-blue);
border: 1px solid var(–deep-blue);
padding: 8px 12px;
border-radius: 20px;
font-size: 0.9em;
cursor: pointer;
transition: all 0.3s ease;
}.char-select-btn:hover, .char-select-btn.active {
background-color: var(–deep-blue);
color: var(–white);
}.character-profile {
display: none; /* All profiles hidden by default */
animation: fadeIn 0.5s;
background-color: var(–white);
border-radius: 8px;
padding: 15px;
}.character-profile.active {
display: block;
}.profile-layout {
display: flex;
gap: 20px;
flex-direction: column; /* Default to column for small screens */
}.profile-photo {
width: 100%;
max-width: 250px; /* Limit max size */
height: 300px; /* Fixed height for consistency */
margin: 0 auto; /* Center on small screens */
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
background-color: #f0f0f0;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
}.profile-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}.profile-details {
flex-grow: 1;
}.profile-details h2 {
color: var(–deep-blue);
margin-top: 0;
border-bottom: 2px solid var(–deep-blue);
padding-bottom: 5px;
}.profile-details ul {
list-style: none;
padding: 0;
font-size: 1em;
}.profile-details ul li {
margin-bottom: 12px;
line-height: 1.5;
word-break: break-word; /* 确保长文本能正常换行 */
}@media (min-width: 600px) {
.profile-layout {
flex-direction: row; /* Switch to row for larger screens */
}
.profile-photo {
margin: 0; /* Align left */
}
}/* — 页面三：用户设定 — */
.form-container {
background-color: var(–white);
color: var(–deep-blue);
padding: 20px;
border-radius: 8px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
font-weight: bold;
display: block; /* 确保label独占一行 */
margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid var(–deep-blue);
border-radius: 5px;
background-color: var(–white);
color: var(–deep-blue);
}
.building-selection button {
background-color: var(–deep-blue);
color: var(–white);
border: none;
padding: 10px 20px;
margin-right: 10px;
border-radius: 5px;
cursor: pointer;
}
.submit-button {
background-color: var(–deep-blue);
color: var(–white);
padding: 12px 25px;
width: 100%;
border: none; /* 统一按钮样式 */
border-radius: 8px;
cursor: pointer;
}#output-area {
border: 1px dashed var(–deep-blue);
padding: 15px;
margin-top: 20px;
border-radius: 5px;
}
#profile-output {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f0f0f0;
padding: 10px;
border-radius: 3px;
color: var(–deep-blue);
}/* — 导航按钮 — */
.page-nav {
display: flex;
justify-content: space-between;
align-items: center;
}.nav-button {
background-color: var(–white);
color: var(–deep-blue);
border: none;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border-radius: 8px;
font-weight: bold;
transition: all 0.3s ease;
}.nav-button:hover {
opacity: 0.8;
}.nav-button.hidden {
visibility: hidden;
}</style>
</head>
<body><div id="babel-prison-container">
<!– 页面一 –>
<div class="page" id="page1">
<div class="content page-1-content">
<h1>欢迎来到巴别塔监狱</h1>
“放弃所有希望吧，踏入此地之人”这里是世界的尽头，一座孤悬于风暴之海的岛屿。它不属于任何国家，不受任何法律的约束，只遵循一道铁则：实力决定一切。
<h3 class="section-title">这里关押着谁？</h3>
巴别塔监狱，收容着一群被世界遗忘或放逐的“怪物”。他们是背景通天的罪人、无法被驯服的野兽，以及智慧超凡的疯子。在这里，你过往的身份、财富与荣耀都将化为乌有。<h3 class="section-title">你将会遇到：</h3>
三位“王”：他们是三座高塔的顶点，是各自领域的绝对统治者。C栋之王拉斐尔，B栋之王明盛，A栋之王弥见。
秩序的掌控者：典狱长弗雷里德，高级狱警晏寂。<h3 class="section-title">你将要做什么？</h3>
在巴别塔，你的目标只有一个：活下去，然后向上爬。
<strong>攀登阶梯：</strong>
<ol>
<li><strong>力量之路：</strong>在每周的“裁决之时”，用你的拳头或智慧击败更高层的囚犯，夺走他的一切。</li>
<li><strong>血肉之路：</strong>这并非明文规定，却是比规则更深入人心的捷径。利用你的身体，去换取强者的庇护、资源，甚至是一步登天的楼层。</li>
</ol>
<strong>建立关系：</strong>
你不是孤身一人。你可以选择依附于某位王，与狡猾的情报商人交易，或是与值得信赖的同伴结盟。但请记住，在这里，任何关系都是建立在利益与实力之上的。
<strong>探索秘密：</strong>
这座塔里充满了秘密。三位王的弱点是什么？典狱长真正的目的是什么？哥哥与他之间又有着怎样的协议？每一个秘密的揭开，都可能成为你颠覆这座塔的钥匙。
</div>
<div class="page-nav">
<button class="nav-button hidden">返回</button>
<button class="nav-button" onclick="changePage(2)">查阅档案 →</button>
</div>
</div><!– 页面二 –>
<div class="page" id="page2">
<div class="content">
<div class="character-selector">
<button class="char-select-btn" onclick="showProfile('raphael')">拉斐尔</button>
<button class="char-select-btn" onclick="showProfile('minsheng')">明盛</button>
<button class="char-select-btn" onclick="showProfile('mijian')">弥见</button>
<button class="char-select-btn" onclick="showProfile('yanji')">晏寂</button>
<button class="char-select-btn" onclick="showProfile('friedrich')">弗雷里德</button>
</div>
<div id="character-profiles-container">
<!– Raphael Profile –>
<div id="raphael" class="character-profile">
<div class="profile-layout">
<div class="profile-photo">
<img src="https://files.catbox.moe/7xdp0c.jpeg" alt="拉斐尔">
</div>
<div class="profile-details">
<h2>拉斐尔 (Raphael)</h2>
<ul><li><strong>身份:</strong> C栋的王，囚犯</li><li><strong>年龄:</strong> 28岁</li><li><strong>身高:</strong> 192cm</li><li><strong>性格:</strong> 表面阳光开朗的暴力狂，实则内心阴暗，对{{user}}抱有极致占有欲的痴汉，极擅伪装。</li></ul>
</div>
</div>
</div>
<!– Minsheng Profile –>
<div id="minsheng" class="character-profile">
<div class="profile-layout">
<div class="profile-photo">
<img src="https://files.catbox.moe/dlylcp.jpeg" alt="明盛">
</div>
<div class="profile-details">
<h2>明盛 (Minsheng)</h2>
<ul><li><strong>身份:</strong> B栋王，囚犯</li><li><strong>年龄:</strong> 29岁</li><li><strong>身高:</strong> 186cm</li><li><strong>性格:</strong> 嘴贱，毒舌，热爱挖苦人、理性的疯子，毫无同理心，智性恋者。</li></ul>
</div>
</div>
</div>
<!– Mijian Profile –>
<div id="mijian" class="character-profile">
<div class="profile-layout">
<div class="profile-photo">
<img src="https://files.catbox.moe/h2h03c.jpeg" alt="弥见">
</div>
<div class="profile-details">
<h2>弥见 (Mijian)</h2>
<ul><li><strong>身份:</strong> A栋王，囚犯</li><li><strong>年龄:</strong> 19岁</li><li><strong>身高:</strong> 181cm</li><li><strong>性格:</strong> 小处男，前期是凶狠、暴躁的战斗天才，但在喜欢上{{user}}后，会变成一个纯情、笨拙、努力学习撒娇的黏人好狗。</li></ul>
</div>
</div>
</div>
<!– Yan Ji Profile –>
<div id="yanji" class="character-profile">
<div class="profile-layout">
<div class="profile-photo">
<img src="https://files.catbox.moe/yk7wjx.jpeg" alt="晏寂">
</div>
<div class="profile-details">
<h2>晏寂 (Yan Ji)</h2>
<ul><li><strong>身份:</strong> 高级狱警，典狱长的“清道夫”，{{user}}的亲生哥哥。</li><li><strong>年龄:</strong> 27岁</li><li><strong>身高:</strong> 188cm</li><li><strong>性格:</strong> 对他人冷血无情、杀伐果断，但对身为亲人{{user}}则展现出无限的温柔、宠溺与过度保护，是极致的双标弟/妹控。</li></ul>
</div>
</div>
</div>
<!– Friedrich Profile –>
<div id="friedrich" class="character-profile">
<div class="profile-layout">
<div class="profile-photo">
<img src="https://files.catbox.moe/ehaaxo.png" alt="弗雷里德">
</div>
<div class="profile-details">
<h2>弗雷里德 (Friedrich)</h2>
<ul><li><strong>身份:</strong> 巴别塔典狱长</li><li><strong>年龄:</strong> 35岁</li><li><strong>身高:</strong> 193cm</li><li><strong>性格:</strong> 严肃、禁欲、一丝不苟的秩序主义者。是典型的Daddy系角色。</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="page-nav">
<button class="nav-button" onclick="changePage(1)">← 返回</button>
<button class="nav-button" onclick="changePage(3)">创建档案 →</button>
</div>
</div><!– 页面三 –>
<div class="page" id="page3">
<div class="content">
<h2>创建你的档案</h2>
<div class="form-container">
<div class="form-group"><label for="charName">姓名:</label><input type="text" id="charName"></div>
<div class="form-group"><label for="charGender">性别:</label><input type="text" id="charGender"></div>
<div class="form-group"><label for="charPersonality">性格:</label><textarea id="charPersonality" rows="3"></textarea></div>
<div class="form-group"><label for="charAppearance">外貌:</label><textarea id="charAppearance" rows="3"></textarea></div>
<div class="form-group"><label>身份 (二选一):</label><input type="text" id="charReason" placeholder="进入监狱的原因"> 或 <input type="text" id="charPosition" placeholder="你的职位"></div>
<div class="form-group"><label>选择初始楼栋:</label><div class="building-selection"><button onclick="selectBuilding('A')">A栋</button><button onclick="selectBuilding('B')">B栋</button><button onclick="selectBuilding('C')">C栋</button></div></div>
<button class="submit-button" onclick="generateProfile()">生成档案并开始</button>
</div>
<div id="output-area" style="display:none;">
<strong>请将以下内容复制到世界设定(World Info)的 `user设定` 条目中：</strong>
<div id="profile-output"></div>
</div>
</div>
<div class="page-nav">
<button class="nav-button" onclick="changePage(2)">← 返回</button>
<button class="nav-button hidden">继续</button>
</div>
</div>
</div><script>
// 立即执行的初始化函数
(function() {
// 默认显示第一页和档案页的第一个角色
document.getElementById('page1').style.display = 'block';
showProfile('raphael');
})();function changePage(pageNumber) {
const pages = document.querySelectorAll('.page');
pages.forEach(page => {
page.style.display = 'none';
});
document.getElementById('page' + pageNumber).style.display = 'block';
}function showProfile(charId) {
// Hide all profiles
document.querySelectorAll('.character-profile').forEach(p => p.classList.remove('active'));
// Deactivate all buttons
document.querySelectorAll('.char-select-btn').forEach(b => b.classList.remove('active'));// Show selected profile
document.getElementById(charId).classList.add('active');
// Activate selected button
document.querySelector(`.char-select-btn[onclick="showProfile('${charId}')"]`).classList.add('active');
}function selectBuilding(building) {
alert('已记录您的选择：' + building + '栋。故事将以此为起点展开。');
// 将选择存入一个隐藏的input，以便生成档案时可以读取
const hiddenInput = document.getElementById('selected-building') || document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.id = 'selected-building';
hiddenInput.value = building;
document.body.appendChild(hiddenInput);
}function generateProfile() {
const name = document.getElementById('charName').value;
const gender = document.getElementById('charGender').value;
const personality = document.getElementById('charPersonality').value;
const appearance = document.getElementById('charAppearance').value;
const reason = document.getElementById('charReason').value;
const position = document.getElementById('charPosition').value;
const building = document.getElementById('selected-building')?.value || '未选择';let identity = '';
if (reason) {
identity = `入狱原因: ${reason}`;
} else if (position) {
identity = `职位: ${position}`;
}const profileText = `姓名: ${name}n性别: ${gender}n${identity}n初始楼栋: ${building}n性格: ${personality}n外貌: ${appearance}`.trim();
document.getElementById('profile-output').textContent = profileText;
document.getElementById('output-area').style.display = 'block';alert('档案已生成！请手动复制下方信息框中的内容到世界书。');
}
</script></body>
</html>
“`