💬 开场白
“`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>
<!– 引用Google字体，用于哥特风格标题和常规文本 –>
<style>
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Roboto:wght@300;400;700&display=swap');
</style>
</head>
<body>
<style>
/* — 整体布局与背景 — */
.horror-creator-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
background-color: #000;
overflow: hidden;
position: relative;
}/* 屏幕闪烁和噪点效果的遮罩层 */
.horror-creator-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY2AgICSEna6wOy2u+q4v+q8xO7Ayu/I1PHo6+7x9fX///82H4yJAAAAAXRSTlMAQObYZgAAAP1JREFUeNqV0kOwxNAMQ9ExsP+q9+6Wb9/6/w+U9vA8XqN/xCVe20s/gS2h2w1w1YIxFbFfF1VxKzWd+a+wGg2Tz1ePZYfNx+grAn/sF2/f9+3+f7+2w5g/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9P3/f9/X3Xg/9PAAAAABJRU5ErkJggg==');
opacity: 0.08;
animation: noise 0.2s infinite, flicker 3s infinite;
pointer-events: none; /* 确保遮罩层不影响交互 */
}/* 漂浮的装饰物：血迹、抓痕等 */
.floating-deco {
position: absolute;
color: rgba(139, 0, 0, 0.4); /* 暗红色 */
pointer-events: none;
animation: float 20s infinite ease-in-out;
font-size: 50px;
}
.deco1 { top: 10%; left: 5%; animation-duration: 25s; }
.deco2 { top: 80%; right: 10%; font-size: 80px; animation-duration: 30s; transform: rotate(45deg); }
.deco3 { bottom: 15%; left: 20%; font-size: 60px; animation-duration: 22s; transform: rotate(-30deg); }/* — 主容器 — */
.horror-creator-container {
width: 100%;
max-width: 700px;
background: rgba(10, 10, 10, 0.85); /* 半透明深黑背景 */
border: 2px solid rgba(139, 0, 0, 0.5); /* 暗红边框 */
border-radius: 15px;
box-shadow: 0 0 30px rgba(139, 0, 0, 0.6); /* 红色辉光 */
padding: 30px 40px;
font-family: 'Roboto', sans-serif;
color: #dcdcdc; /* 浅灰色文字 */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
z-index: 1;
}/* — 标题 — */
.main-title {
font-family: 'Creepster', cursive; /* 哥特/恐怖风格字体 */
font-size: 3.5em;
text-align: center;
color: #b30000;
text-shadow: 0 0 10px #ff0000, 0 0 5px #fff;
margin-bottom: 25px;
animation: text-flicker 4s infinite alternate;
}/* — 标签页导航 — */
.tab-nav {
display: flex;
justify-content: center;
margin-bottom: 25px;
border-bottom: 1px solid rgba(139, 0, 0, 0.4);
}
.tab-link {
font-family: 'Creepster', cursive;
font-size: 1.5em;
padding: 10px 20px;
cursor: pointer;
background: none;
border: none;
color: #888;
transition: all 0.3s ease;
position: relative;
}
.tab-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background-color: #b30000;
transition: width 0.3s ease;
}
.tab-link.active, .tab-link:hover {
color: #dcdcdc;
text-shadow: 0 0 5px #ff4d4d;
}
.tab-link.active::after {
width: 100%;
}/* — 标签页内容 — */
.tab-content { display: none; }
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}/* — 选项组通用样式 — */
.option-group {
margin-bottom: 20px;
}
.option-label {
display: block;
font-weight: 700;
margin-bottom: 10px;
color: #a0a0a0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.9em;
}/* — 电影随机化区域 — */
#movie-display-area {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #444;
border-radius: 5px;
padding: 12px;
}
#movie-title {
font-style: italic;
color: #fff;
}
#randomize-btn {
background: #5c0000;
color: #fff;
border: 1px solid #b30000;
padding: 8px 15px;
}/* — 自定义输入框 — */
textarea.custom-input {
width: 100%;
min-height: 60px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #444;
border-radius: 5px;
padding: 10px;
color: #dcdcdc;
font-family: 'Roboto', sans-serif;
resize: vertical;
}
textarea.custom-input:focus {
outline: none;
border-color: #b30000;
box-shadow: 0 0 10px rgba(179, 0, 0, 0.5);
}/* — 单选按钮 — */
.radio-group { display: flex; gap: 15px; flex-wrap: wrap; }
.radio-label {
display: flex;
align-items: center;
cursor: pointer;
padding: 10px 15px;
border: 1px solid #444;
border-radius: 5px;
transition: all 0.2s;
}
.radio-label input { display: none; }
.radio-label:hover { background: rgba(255, 255, 255, 0.05); }
.radio-label input:checked + span { color: #b30000; font-weight: bold; }
.radio-label input:checked + span::before {
content: '💀';
margin-right: 8px;
}/* — 下拉菜单和按钮通用样式 — */
select, button {
font-family: 'Roboto', sans-serif;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
select {
width: 100%;
padding: 12px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #444;
color: #dcdcdc;
}
select:focus, button:focus { outline: none; }
button:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(255, 77, 77, 0.7);
}/* — 滑块样式 — */
.slider-container {
display: flex;
align-items: center;
gap: 15px;
}
input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 8px;
background: #333;
border-radius: 5px;
outline: none;
border: 1px solid #555;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #b30000;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 10px #ff0000;
}
#level-value {
font-weight: bold;
color: #b30000;
width: 80px;
text-align: right;
}/* — 最终提交按钮 — */
#enter-world-btn {
display: block;
width: 100%;
padding: 15px;
font-family: 'Creepster', cursive;
font-size: 1.8em;
background: #8b0000;
color: #fff;
border: 2px solid #ff4d4d;
margin-top: 30px;
text-shadow: 0 0 5px #000;
}
#enter-world-btn:hover {
background: #b30000;
}/* — 动画效果 — */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes noise { 0%, 100% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -25%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-15%, 10%); } 60% { transform: translate(15%, 0%); } 70% { transform: translate(0%, 15%); } 80% { transform: translate(3%, 35%); } 90% { transform: translate(-10%, 10%); } }
@keyframes flicker { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.15; } }
@keyframes text-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #f09, 0 0 80px #f09, 0 0 90px #f09, 0 0 100px #f09, 0 0 150px #f09; } 20%, 24%, 55% { text-shadow: none; } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }</style>
<div class="horror-creator-wrapper">
<!– 漂浮的装饰性元素 –>
<div class="floating-deco deco1">🩸</div>
<div class="floating-deco deco2">🔪</div>
<div class="floating-deco deco3">👁️</div><div class="horror-creator-container">
<h1 class="main-title">World Creator</h1><!– 标签页导航 –>
<div class="tab-nav">
<button class="tab-link active" data-tab="movie-based">电影世界</button>
<button class="tab-link" data-tab="custom-world">自定义世界</button>
</div><!– 电影世界标签页 –>
<div id="movie-based" class="tab-content active">
<div class="option-group">
<label class="option-label">随机电影</label>
<div id="movie-display-area">
<span id="movie-title">点击“随机”以抽取一部电影…</span>
<button id="randomize-btn">🎲 随机</button>
</div>
</div>
<div class="option-group">
<label class="option-label">内容分级</label>
<div class="radio-group">
<label class="radio-label"><input type="radio" name="content-type" value="非色情" checked><span>非色情</span></label>
<label class="radio-label"><input type="radio" name="content-type" value="色情"><span>色情</span></label>
</div>
</div>
<div class="option-group">
<label class="option-label" for="horror-style">恐怖风格</label>
<select id="horror-style">
<option value="血浆虐杀">血浆虐杀 (Slasher)</option>
<option value="超自然/怨灵">超自然/怨灵 (Supernatural)</option>
<option value="心理惊悚">心理惊悚 (Psychological)</option>
<option value="肉体恐怖">肉体恐怖 (Body Horror)</option>
<option value="拾得录像">拾得录像 (Found Footage)</option>
<option value="怪物/异形">怪物/异形 (Monster)</option>
<option value="宇宙恐怖">宇宙恐怖 (Cosmic Horror)</option>
</select>
</div>
<div class="option-group">
<label class="option-label">恐怖等级</label>
<div class="slider-container">
<input type="range" id="horror-level" min="1" max="5" value="3">
<span id="level-value">中度</span>
</div>
</div>
</div><!– 自定义世界标签页 –>
<div id="custom-world" class="tab-content">
<div class="option-group">
<label class="option-label" for="custom-concept">核心概念 / 背景设定</label>
<textarea id="custom-concept" class="custom-input" placeholder="例如：一座废弃的维多利亚式孤儿院，孩子们的亡魂仍在此处嬉戏。"></textarea>
</div>
<div class="option-group">
<label class="option-label" for="custom-characters">关键角色 / 怪物</label>
<textarea id="custom-characters" class="custom-input" placeholder="例如：一位没有面孔的女院长，一个渴望玩伴的幽灵孩童。"></textarea>
</div>
<div class="option-group">
<label class="option-label" for="custom-plot">期望剧情 / 基调</label>
<textarea id="custom-plot" class="custom-input" placeholder="例如：一场缓慢燃烧的调查，最终坠入疯狂。基调应为忧郁与恐惧。"></textarea>
</div>
</div><button id="enter-world-btn">进入此世界</button>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
// — 元素获取 —
const tabs = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');
const randomizeBtn = document.getElementById('randomize-btn');
const movieTitleEl = document.getElementById('movie-title');
const horrorLevelSlider = document.getElementById('horror-level');
const levelValueEl = document.getElementById('level-value');
const enterBtn = document.getElementById('enter-world-btn');
let activeTab = 'movie-based';// — 电影列表 —
const movieList = [
'闪灵', '驱魔人', '小丑回魂 (2017)', '遗传厄运',
'德州电锯杀人狂 (1974)', '逃出绝命镇', '寂静之地',
'午夜凶铃 (美版)', '电锯惊魂', '仲夏夜惊魂', '珀尔', '巴巴杜',
'安娜贝尔', '招魂', '险恶', '潜伏'
];// — 事件监听 —
// 标签页切换
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
tab.classList.add('active');
const targetContent = document.getElementById(tab.dataset.tab);
targetContent.classList.add('active');
activeTab = tab.dataset.tab;
});
});// 随机化电影
randomizeBtn.addEventListener('click', () => {
const randomMovie = movieList[Math.floor(Math.random() * movieList.length)];
movieTitleEl.textContent = randomMovie;
movieTitleEl.style.color = '#fff';
});// 更新恐怖等级显示
const levelMap = { '1': '微恐', '2': '低度', '3': '中度', '4': '高度', '5': '极度' };
horrorLevelSlider.addEventListener('input', () => {
levelValueEl.textContent = levelMap[horrorLevelSlider.value];
});// 进入世界按钮
enterBtn.addEventListener('click', () => {
let promptString = '请根据以下设定开始一个新故事：';if (activeTab === 'movie-based') {
const movie = movieTitleEl.textContent.includes('…') ? '随机' : movieTitleEl.textContent;
const contentType = document.querySelector('input[name="content-type"]:checked').value;
const style = document.getElementById('horror-style').value;
const level = levelMap[horrorLevelSlider.value];if (movie === '随机') {
alert('请先点击“随机”抽取一部电影。');
return;
}promptString += `模式：电影世界。电影：${movie}。内容：${contentType}。风格：${style}。等级：${level}。`;
} else {
const concept = document.getElementById('custom-concept').value.trim();
const characters = document.getElementById('custom-characters').value.trim();
const plot = document.getElementById('custom-plot').value.trim();if (!concept || !characters || !plot) {
alert('请填写自定义世界的所有栏位。');
return;
}promptString += `模式：自定义。核心概念：${concept}。关键角色：${characters}。期望剧情/基调：${plot}。`;
}const command = `/send ${promptString} | /trigger`;
if (typeof triggerSlash === 'function') {
enterBtn.textContent = '生成中…';
enterBtn.disabled = true;
triggerSlash(command);
} else {
console.warn("SillyTavern's triggerSlash function is not available.");
alert("SillyTavern API 未找到。请在控制台查看生成的指令。");
console.log("生成的指令:", command);
}
});
});
</script>
</body>
</html>
“`