💬 开场白
“`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>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;900&display=swap');
</style>
</head>
<body>
<style>
/* 整体容器样式 */
.compass-container {
font-family: 'Noto Serif SC', serif;
width: 100%;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #1a0000;
border: 2px solid #6a0000;
border-radius: 10px;
box-shadow: 0 0 25px rgba(255, 0, 0, 0.5), inset 0 0 30px rgba(50, 0, 0, 0.8);
color: #d1c7b8;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}/* 背景装饰：使用伪元素添加不易察觉的符文图案 */
.compass-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://www.transparenttextures.com/patterns/gplay.png'); /* 一个微妙的纹理 */
opacity: 0.05;
pointer-events: none;
z-index: 0;
}/* 标题样式 */
.compass-title {
font-size: 2.8em;
font-weight: 900;
color: #b80000;
text-shadow: 0 0 5px #ff4d4d, 0 0 10px #ff4d4d, 0 0 15px #000;
margin-bottom: 20px;
letter-spacing: 0.3em;
writing-mode: vertical-rl; /* 垂直书写 */
text-orientation: mixed;
padding: 20px 0;
border-left: 1px solid #6a0000;
border-right: 1px solid #6a0000;
line-height: 1.2;
text-align: center;
position: relative;
z-index: 1;
}/* 标签页切换按钮容器 */
.compass-tabs {
display: flex;
justify-content: center;
margin-bottom: 25px;
border-bottom: 1px solid #6a0000;
width: 100%;
position: relative;
z-index: 1;
}.compass-tabs button {
font-family: 'Noto Serif SC', serif;
background: none;
border: none;
color: #8c7d6b;
padding: 10px 20px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: color 0.3s, text-shadow 0.3s;
position: relative;
}.compass-tabs button::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background-color: #b80000;
transition: width 0.3s ease-in-out;
}.compass-tabs button:hover,
.compass-tabs button.active {
color: #e6d7c1;
text-shadow: 0 0 8px rgba(255, 100, 100, 0.7);
}.compass-tabs button.active::after {
width: 100%;
}/* 标签页内容面板 */
.tab-content {
display: none;
width: 100%;
animation: fadeIn 0.5s;
position: relative;
z-index: 1;
}.tab-content.active {
display: block;
}@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}/* 选项组样式 */
.option-group {
margin-bottom: 25px;
border: 1px solid #4d0000;
border-radius: 8px;
padding: 15px;
background-color: rgba(0, 0, 0, 0.2);
}.option-group legend {
font-size: 1.3em;
font-weight: 600;
color: #c8b8a3;
padding: 0 10px;
margin-left: 10px;
border-bottom: 2px solid #8c1a1a;
}/* 按钮容器 */
.buttons-wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}.option-group button {
font-family: 'Noto Serif SC', serif;
background-color: #3d1f1f;
border: 1px solid #8c1a1a;
color: #d1c7b8;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 1em;
}.option-group button:hover {
background-color: #8c1a1a;
color: #fff;
box-shadow: 0 0 10px rgba(255, 50, 50, 0.6);
}/* 选中按钮的样式 */
.option-group button.selected {
background-color: #b80000;
color: #fff;
border-color: #ff4d4d;
box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
transform: scale(1.05);
}/* 随机内容显示区域 */
#content-display, #element-display {
background-color: rgba(0, 0, 0, 0.4);
border: 1px dashed #6a0000;
border-radius: 5px;
padding: 15px;
margin-top: 10px;
min-height: 50px;
color: #ffc4c4;
font-size: 1.2em;
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
text-shadow: 0 0 5px #ff0000;
}/* 自定义输入区域 */
.custom-input-group {
display: flex;
flex-direction: column;
gap: 15px;
}
.custom-input-group textarea {
font-family: 'Noto Serif SC', serif;
width: 100%;
box-sizing: border-box;
min-height: 80px;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid #6a0000;
border-radius: 5px;
color: #d1c7b8;
padding: 10px;
font-size: 1em;
resize: vertical;
}
.custom-input-group textarea::placeholder {
color: #6a5541;
}/* 最终提交按钮 */
.submit-button {
font-family: 'Noto Serif SC', serif;
display: block;
width: 50%;
margin: 20px auto 0;
padding: 15px;
font-size: 1.5em;
font-weight: 900;
color: #ffd7d7;
background: linear-gradient(180deg, #8c1a1a, #4d0000);
border: 2px solid #b80000;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-shadow: 0 0 10px #000;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}.submit-button:hover {
background: linear-gradient(180deg, #b80000, #6a0000);
box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
transform: translateY(-3px);
color: #fff;
}/* 点击反馈气泡 */
#feedback-bubble {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(184, 0, 0, 0.9);
color: white;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 0 0 10px #000;
z-index: 1000;
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
pointer-events: none;
}#feedback-bubble.show {
opacity: 1;
transform: translateX(-50%) translateY(-20px);
}</style>
<div class="compass-container">
<h2 class="compass-title">阴阳罗经</h2><div class="compass-tabs">
<button id="tab-btn-ip" class="active" onclick="selectTab('ip')">天干择道</button>
<button id="tab-btn-custom" onclick="selectTab('custom')">地支定数</button>
</div><!– IP参考面板 –>
<div id="tab-ip" class="tab-content active">
<!– 风格 –>
<fieldset class="option-group">
<legend>壹 · 寻脉</legend>
<div class="buttons-wrapper" id="style-buttons">
<button data-value="民俗">民俗</button>
<button data-value="游戏">游戏</button>
<button data-value="电影">电影</button>
<button data-value="小说">小说</button>
<button data-value="角色">角色</button>
<button data-value="其他">其他</button>
</div>
</fieldset><!– 内容 –>
<fieldset class="option-group">
<legend>贰 · 点穴</legend>
<div id="content-display">请先择一脉</div>
<button onclick="randomizeContent()" style="width: 100%; margin-top: 10px;">随机卜卦</button>
</fieldset><!– 等级 –>
<fieldset class="option-group">
<legend>叁 · 凶吉</legend>
<div class="buttons-wrapper" id="level-buttons">
<button data-value="见鬼" class="selected">见鬼</button>
<button data-value="撞邪">撞邪</button>
<button data-value="索命">索命</button>
</div>
</fieldset><!– 尺度 –>
<fieldset class="option-group">
<legend>肆 · 阴阳</legend>
<div class="buttons-wrapper" id="scale-buttons">
<button data-value="非色情" class="selected">非色情</button>
<button data-value="色情">色情</button>
</div>
</fieldset><!– 元素 –>
<fieldset class="option-group">
<legend>伍 · 煞物</legend>
<div id="element-display">点击添加煞物</div>
<button onclick="randomizeElements()" style="width: 100%; margin-top: 10px;">随机择物</button>
</fieldset><button class="submit-button" onclick="startTransmigration('ip')">启程</button>
</div><!– 自定义面板 –>
<div id="tab-custom" class="tab-content">
<div class="custom-input-group">
<textarea id="custom-input-1" placeholder="壹 · 乾坤…（世界观与背景）"></textarea>
<textarea id="custom-input-2" placeholder="贰 · 人伦…（核心角色与关系）"></textarea>
<textarea id="custom-input-3" placeholder="叁 · 祸福…（关键情节与冲突）"></textarea>
<textarea id="custom-input-4" placeholder="肆 · 杂项…（氛围与特殊要求）"></textarea>
</div>
<button class="submit-button" onclick="startTransmigration('custom')">启程</button>
</div><div id="feedback-bubble"></div>
</div><script>
// — 数据存储 —
const data = {
'民俗': ['瓦罐坟','天葬','冥婚','落花洞女','翻刺床','问米','捡骨','赶尸','蛊术','喝符水','穿杖','送神','画龙消鱼骨','配阴婚','寄死窑','金蚕蛊','驴拉套','厝棺','脚底不踩他人影','忌反复照镜子','忌正月拔腿毛','忌用一支筷子扒饭','纸扎人陪葬','阴魂借道','血祭','洗阴婚','鬼节烧纸问路','抱骨灰盒出嫁','守灵避猫','鬼压床','走无常','请碟仙','筷子扶乩','床头挂风铃','夜半梳头','镜子对床','筷子插饭','指甲涂红','喊魂','种生基'],
'游戏': ['烟火','港诡实录','纸人','纸人贰','阴阳锅','三伏','回门','女鬼桥 开魂路','女鬼桥二 释魂路','吃香','人窟日记','殭','诡校','凶宅：直播惊魂','杀青','诡拓','子归','过阴','鬼哭岭','典妻','中元怪谈','神探诡事录','招魂棺','点灯','不祥之夜：回魂','凶寓','头七怪谈'],
'电影': ['僵尸先生','山村老尸','一眉道人','鬼打鬼','人吓人','倩女幽魂(1987)','画皮(2008)','双瞳','诡丝','中邪','咒','office有鬼','见鬼','三更之回家','胭脂扣','驱魔警察','灵幻先生','僵尸家族','新僵尸先生','人鬼神','音乐僵尸','鬼咬鬼','甩皮鬼','尸家重地','猛鬼差馆','猛鬼学堂','猛鬼大厦','千年僵尸王','阴阳镇怪谈','黄庙村·地宫美人'],
'小说': ['鬼吹灯','苗疆蛊事','怨气撞铃','七根凶简','凶宅笔记','我当阴阳先生那几年','茅山后裔','民调局异闻录','十四年猎诡人','荒村公寓','地狱的第19层','阴间神探','中国异闻录','我当道士那些年','冤鬼路','白骨大圣','俗主','我的诡异人生','碎脸','青叶灵异事务所'],
'角色': ['酆都大帝','十殿阎罗','崔珏','黑白无常','牛头马面','孟婆','地藏王菩萨','东岳大帝','五方鬼帝','钟馗','城隍','后土娘娘','绣花鞋女鬼','红嫁衣女鬼','画皮鬼','僵尸','狐仙','黄大仙','伥鬼','水鬼'],
'其他': ['捉妖','道士','纸人','方士','赶尸人','风水师','守陵人','扎纸匠','仵作','算命先生'],
'元素': ['孝道','贞洁','宗族','冥婚','祠堂诅咒','贞节牌坊','红衣新娘','纸钱','寿衣','纸扎人','香烛','白灯笼','破败古宅','霉绿墙面','褪色春联','斑驳神龛','深宅大院','荒村','荒废戏台','深夜走廊','镜子','枯井','阴气','祠堂','族谱','祖宗排位','守灵','执念','中邪','天谴','殉情','业报','沉塘','厉鬼','古树','饥荒','瘟疫','糯米','幽灵','废墟','亵渎','美艳腐烂','唢呐','绣花鞋','童男童女','香火','孝子贤孙','心魔','冥币','棺材','招魂幡','坟头土','哭丧棒','义庄','太极镜','桃木剑','寿字','铜钱面罩','阴米','篦子','铜铃','蛆虫','槐树','乌鸦','鬼火','炉灰','黑狗血','尸油','傀儡','问米','阴兵借道','喊魂','悬棺','画皮','阴锣','门槛','水猴子','人面疮','鬼市','供品','胭脂','桥墩','灯笼','朱笔','犯煞','替死鬼','还魂','超度','往生','阴童','婴灵','镜囚','人鬼恋','尸解','变质食物','轮回','鬼门关','黄泉路','孟婆汤','奈何桥','枉死城','酆都','油锅地狱','阿鼻地狱','深山废寺','破庙神龛','野坟','道观','荒山茶棚','古渡寒潭','幽谷','断崖','罗刹海市']
};// — 状态管理 —
let selections = {
style: '',
content: '',
level: '见鬼',
scale: '非色情',
elements: []
};
let currentTab = 'ip';// — 交互函数 —
// 切换标签页
function selectTab(tabName) {
currentTab = tabName;
document.getElementById('tab-ip').classList.toggle('active', tabName === 'ip');
document.getElementById('tab-custom').classList.toggle('active', tabName === 'custom');
document.getElementById('tab-btn-ip').classList.toggle('active', tabName === 'ip');
document.getElementById('tab-btn-custom').classList.toggle('active', tabName === 'custom');
}// 显示反馈气泡
function showFeedback(message) {
const bubble = document.getElementById('feedback-bubble');
bubble.textContent = message;
bubble.classList.add('show');
setTimeout(() => {
bubble.classList.remove('show');
}, 2000);
}// 处理单选按钮组
function setupButtonGroup(containerId, category) {
const container = document.getElementById(containerId);
container.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
// 移除同组其他按钮的选中状态
container.querySelectorAll('button').forEach(btn => btn.classList.remove('selected'));
// 为当前点击的按钮添加选中状态
e.target.classList.add('selected');
// 更新选择
const value = e.target.dataset.value;
selections[category] = value;
showFeedback(`已择: ${value}`);// 如果是风格选择，则自动随机一次内容
if (category === 'style') {
randomizeContent();
}
}
});
}// 随机内容
function randomizeContent() {
if (!selections.style) {
showFeedback('请先择一脉！');
return;
}
const contentPool = data[selections.style];
if (contentPool && contentPool.length > 0) {
const randomIndex = Math.floor(Math.random() * contentPool.length);
selections.content = contentPool[randomIndex];
document.getElementById('content-display').textContent = selections.content;
showFeedback(`卦象: ${selections.content}`);
}
}// 随机元素
function randomizeElements() {
const elementPool = data['元素'];
const numElements = Math.floor(Math.random() * 3) + 2; // 随机2-4个元素
selections.elements = [];
for (let i = 0; i < numElements; i++) {
const randomIndex = Math.floor(Math.random() * elementPool.length);
// 避免重复
if (!selections.elements.includes(elementPool[randomIndex])) {
selections.elements.push(elementPool[randomIndex]);
}
}
document.getElementById('element-display').textContent = selections.elements.join(' · ');
showFeedback(`已择煞物`);
}// 开启穿梭
function startTransmigration(mode) {
let command = '';
if (mode === 'ip') {
if (!selections.style || !selections.content) {
showFeedback('请先寻脉点穴！');
return;
}
const elementString = selections.elements.length > 0 ? selections.elements.join('、') : '无';
command = `/send 启程：风格=${selections.style}，内容=${selections.content}，等级=${selections.level}，尺度=${selections.scale}，元素=${elementString} | /trigger`;
} else if (mode === 'custom') {
const inputs = [
document.getElementById('custom-input-1').value,
document.getElementById('custom-input-2').value,
document.getElementById('custom-input-3').value,
document.getElementById('custom-input-4').value
];
const combinedInput = inputs.map((text, i) => `【${i+1}】${text.trim()}`).filter(text => text.length > 3).join('；');if (!combinedInput) {
showFeedback('请至少填写一则定数！');
return;
}
command = `/send 启程：自定义=${combinedInput} | /trigger`;
}if (command && typeof triggerSlash === 'function') {
showFeedback('正在开启穿梭，请稍候…');
triggerSlash(command);
} else {
console.error("无法执行指令:", command);
showFeedback('错误：无法连接到执行接口。');
}
}// — 初始化 —
document.addEventListener('DOMContentLoaded', () => {
setupButtonGroup('style-buttons', 'style');
setupButtonGroup('level-buttons', 'level');
setupButtonGroup('scale-buttons', 'scale');
});// SillyTavern可能不会触发DOMContentLoaded，所以直接执行
setupButtonGroup('style-buttons', 'style');
setupButtonGroup('level-buttons', 'level');
setupButtonGroup('scale-buttons', 'scale');</script>
</body>
</html>
“`