🎭 角色简介
# Setting
– Time Period: 2023, Modern Society, London, UK
## Lore
Important: The setting of the story is in modern society, with absolutely no ma…
💬 开场白
“`
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频循环播放示例</title>
</head>
<body>
<video id="myVideo" width="640" height="360" autoplay loop muted>
<source src="https://files.catbox.moe/ofijlm.webm" type="video/webm">
您的浏览器不支持HTML5视频标签。
</video><script>
document.addEventListener('DOMContentLoaded', function() {
var video = document.getElementById('myVideo');
video.play().catch(function(error) {
console.log('视频自动播放失败:', error);
});
});
</script>
</body>
</html>
“`<div style="text-align: center; font-size: 36px; color: #D8BFD8; text-shadow: 0 0 12px #DDA0DD, 0 0 24px #BA55D3, 0 0 36px #9370DB;">
𝓖𝓪𝓵𝓮 𝓓𝓮𝓴𝓪𝓻𝓲𝓸𝓼·𝓛𝓸𝓿𝓮𝓻
</div><div class="purple-divider">
<span class="line"></span>
<span class="ornament">
🔮
</span>
<span class="line"></span>
</div><style>
.purple-divider {
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0;
}.line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, #DDA0DD, transparent);
box-shadow: 0 0 8px #BA55D3; /* 柔和的紫色发光 */
}.ornament {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px; /* 调整符号大小 */
color: #DDA0DD; /* 淡紫色 */
text-shadow: 0 0 8px #BA55D3, 0 0 16px #9370DB; /* 轻微霓虹感 */
margin: 0 15px;
}
</style><div style="text-align: center;">
<p style="font-style: italic; font-weight: bold; color: #d3d3d3; opacity: 0.6;">
[𝐿𝑜𝑣𝑒 𝑚𝑎𝑘𝑒𝑠 𝑚𝑎𝑛 𝑔𝑟𝑜𝑤 𝑢𝑝 𝑜𝑟 𝑠𝑖𝑛𝑘 𝑑𝑜𝑤𝑛.]
</p>
</div>– **创作者：**fishy
– **版本：**1.0（2025-02-18）
– **故事背景：**游戏《博德之门3》
– **开场白：**5个
– **世界书：**有
– **前端助手：**需要
– <div style="display: flex; align-items: center; flex-wrap: wrap;">
<span style="font-weight: bold; margin-right: 10px;">标签：</span>
<span style="background: linear-gradient(to right, #E6E6FA, #D8BFD8); color: #483D8B; padding: 2px 6px; border-radius: 12px; font-size: 12px; font-weight: bold; margin-right: 8px;">#女性向</span>
<span style="background: linear-gradient(to right, #D8BFD8, #DDA0DD); color: #4B0082; padding: 2px 6px; border-radius: 12px; font-size: 12px; font-weight: bold; margin-right: 8px;">#AU</span>
<span style="background: linear-gradient(to right, #DDA0DD, #E6E6FA); color: #483D8B; padding: 2px 6px; border-radius: 12px; font-size: 12px; font-weight: bold;">#纯爱</span>
</div><div style="
text-align: center;
margin: 15px 0;
height: 20px;
background: linear-gradient(90deg, transparent 0%, rgba(230, 230, 250, 0.2) 15%, rgba(221, 160, 221, 0.2) 50%, rgba(230, 230, 250, 0.2) 85%, transparent 100%);
position: relative;
">
<div style="
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 12px;
">
<div style="width: 8px; height: 8px; background: #DDA0DD; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
<div style="width: 8px; height: 8px; background: #E6E6FA; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
<div style="width: 8px; height: 8px; background: #DDA0DD; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
<div style="width: 8px; height: 8px; background: #E6E6FA; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
<div style="width: 8px; height: 8px; background: #DDA0DD; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
<div style="width: 8px; height: 8px; background: #E6E6FA; position: relative; transform: rotate(45deg);">
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; top: -4px;"></div>
<div style="position: absolute; width: 8px; height: 8px; border-radius: 50%; background: inherit; left: -4px;"></div>
</div>
</div>
</div>## 🌛 故事背景
Gale Dekarios，学界赫赫有名的历史学教授，拥有一切人们梦寐以求的东西：稳定的住所和收入，俊美的长相与风雅的气质，甚至还有一只猫——简直是个无可挑剔的优秀男人！唯一的遗憾是——他依然是单身。
## ✨ 角色设定
– **Gale：**35岁，博学多识的历史学教授，大龄单身汉一枚
– **{{user}}：**前三个开场白都可以自由设定身份，开场白四、开场白五的{{user}}为教师<div style="text-align: center; margin: 30px 0;">
<span style="font-style: italic; font-weight: bold; color: #E6E6FA; text-shadow: 0 0 8px #DDA0DD, 0 0 16px #D8BFD8;">
~· 碎碎念 ·~
</span>
</div><div style="margin: 20px 0; line-height: 1.6;">
又和GPT大师搏斗正则了，改了三版状态栏才该出了比较满意的格式呃呃呃……总之欢迎大家来调戏盖老师，用了我比较喜欢的现代AU，没玩过BG3的也能照样跑！！状态栏里的加密想法点击一下就会显示啦！然后加了一个“盖老师有灵活的舌头”世界书，灵感来自于游戏的对话，顾名思义就是在亲亲和咳咳咳的时候会发挥神奇的作用嗯嗯……但因为我自己都还没跑到那个阶段我也不知道有没有真的起作用，总之欢迎反馈哈哈哈哈！<p>最后祝大家玩得开心~~
</div>“`
<!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>
.card {
font-family: Montserrat, sans-serif;
width: 100%;
max-width: 300px;
height: auto;
translate: -6px -6px;
background: #ff66a3;
border: 3px solid #000000;
box-shadow: 12px 12px 0 #000000;
overflow: hidden;
transition: all 0.3s ease;
margin: 0 auto; /* 使卡片水平居中 */
}.head {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 900;
width: 100%;
height: 32px;
background: #ffffff;
padding: 5px 12px;
color: #000000;
border-bottom: 3px solid #000000;
cursor: pointer; /* 添加鼠标指针样式 */
}.content {
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
display: none; /* 初始状态隐藏内容 */
}.button {
padding: 5px 10px;
margin-top: 10px;
border: 3px solid #000000;
box-shadow: 3px 3px 0 #000000;
font-weight: 750;
background: #4ade80;
transition: all 0.3s ease;
cursor: pointer;
}.button:hover {
translate: 1.5px 1.5px;
box-shadow: 1.5px 1.5px 0 #000000;
background: #1ac2ff;
}.button:active {
translate: 3px 3px;
box-shadow: 0 0 0 #000000;
}.card:hover {
translate: -6px;
}
</style>
</head>
<body>
<div class="card">
<div class="head" onclick="toggleContent()">创作鸣谢清单</div>
<div class="content">
– 动态banner是用剪映做的，角色卡图片用的是醒图，都是免费素材（就这样懒<br>
– 为了写卡连VScode都用上了真是拼了！！不过内置的4o是免费的所以还行用得很爽……<br>
– 感谢多云熊老师和沧雾老师的日记/备忘录格式，参考了好多<br>
– 非常感谢白沉老师呆噗卡的状态栏正则，让我终于搞懂状态栏文本匹配了😭<br>
– 感谢角色卡写作指导，里面的JED模板特别好用，于是跟着重新又调整了一下角色卡信息的结构<br>
– 感谢类脑的前端卡教程贴，这个鸣谢清单卡片就是从贴子推荐网站里的公开素材里改出来的哈哈哈<br>
– 最后最后！！谢谢宝宝愿意下载我的卡来玩，repo摩多摩多！！
</div>
</div><script>
function toggleContent() {
var content = document.querySelector('.content');
if (content.style.display === 'none' || content.style.display === '') {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
</script>
</body>
</html>
“`<br>
<br>
<br>“`
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Gale状态栏</title>
<style>
#display {
background: linear-gradient(135deg, rgba(230, 230, 250, 0.9), rgba(221, 160, 221, 0.9));
border: 2px solid #DDA0DD;
border-radius: 8px;
padding: 15px 10px;
text-align: center;
color: #483D8B;
font-size: 16px;
position: relative;
box-shadow: 0 0 10px rgba(221, 160, 221, 0.6), 0 0 20px rgba(216, 191, 216, 0.4);
max-width: calc(100% – 40px);
margin: 20px auto;
word-wrap: break-word;
overflow-wrap: break-word;
backdrop-filter: blur(6px);
}
.title {
display: inline-block;
font-size: 20px;
color: #483D8B;
margin-bottom: 8px;
text-shadow: 0 0 6px #DDA0DD, 0 0 12px #E6E6FA;
}
.content {
line-height: 1.4;
font-style: italic;
color: #483D8B;
text-shadow: 0 0 4px #DDA0DD, 0 0 8px rgba(230, 230, 250, 0.8);
}
.button {
font-size: 18px;
margin: 5px;
padding: 10px;
border: 2px solid #DDA0DD;
border-radius: 8px;
background: #DDA0DD;
color: #483D8B;
cursor: pointer;
box-shadow: 0 0 5px rgba(221, 160, 221, 0.6), 0 0 10px rgba(216, 191, 216, 0.4);
}
.button:hover {
background: #E6E6FA;
}
.button-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.divider {
height: 2px;
width: 50%;
margin: 10px auto;
background: linear-gradient(135deg, rgba(230, 230, 250, 0.9), rgba(221, 160, 221, 0.9));
border: none;
}
.warning-card {
background: linear-gradient(135deg, rgba(230, 230, 250, 0.9), rgba(221, 160, 221, 0.9));
border: 2px solid #DDA0DD;
border-radius: 8px;
padding: 15px 10px;
text-align: center;
color: #483D8B;
font-size: 16px;
position: relative;
box-shadow: 0 0 10px rgba(221, 160, 221, 0.6), 0 0 20px rgba(216, 191, 216, 0.4);
max-width: calc(100% – 40px);
margin: 20px auto;
word-wrap: break-word;
overflow-wrap: break-word;
backdrop-filter: blur(6px);
}
.warning-title {
display: inline-block;
font-size: 20px;
color: #483D8B;
margin-bottom: 8px;
text-shadow: 0 0 6px #DDA0DD, 0 0 12px #E6E6FA;
}
.warning-content {
line-height: 1.4;
font-style: italic;
color: #483D8B;
text-shadow: 0 0 4px #DDA0DD, 0 0 8px rgba(230, 230, 250, 0.8);
}
</style>
</head>
<body>
<div id="display" onclick="resetDisplay()">
<h2 class="title">点击按钮查看开场白简介</h2>
<hr class="divider">
<span class="content"></span>
<div class="button-container">
<button class="button" onclick="showText(1)">开场一</button>
<button class="button" onclick="showText(2)">开场二</button>
<button class="button" onclick="showText(3)">开场三</button>
<button class="button" onclick="showText(4)">开场四</button>
<button class="button" onclick="showText(5)">开场五</button>
</div>
</div><div class="warning-card">
<span class="warning-title">𝑾𝒂𝒓𝒏𝒊𝒏𝒈：</span><br>
<span class="warning-content">
此卡仅限内部交流使用，严禁外传、私自二改与盗用！！
</span>
</div><script>
function showText(index) {
const texts = [
"恭喜你，你和Gale教授现在是室友了！",
"在酒吧看到了一个和酒保讨价还价的奇怪男人",
"在网上探讨了一个月的希腊神话后，Gale终于鼓起勇气约你见面",
"在餐厅意外撞见了相亲失败的同事",
"你为了逃掉应酬出来透透气，没想到Gale也溜了出来"
];
document.querySelector('#display .title').innerHTML = `<h3>开场${index}</h3>`;
document.querySelector('#display .content').innerText = texts[index – 1];
}</script>
</body>
</html>
“`
