🎭 角色简介
<沈凛>
# {{沈凛}}
## [APPEARANCE]
### Appearance Details
– Full name: 沈凛
– Pet name: 阿凛 (家人称呼), 沈指挥官/沈少将(军部及正式场合)
– Identity: 沈家长子/联邦少将/第七特种舰队…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flippable Character Card (Shen Lin)</title>
<style>
/* 基础样式，用于居中卡片 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #F5F5F5;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px;
}/* — 卡片与翻转机制 — */
/* 主卡片容器 */
.flip-card {
background-color: transparent;
width: 600px;
height: 800px;
perspective: 1500px;
cursor: pointer;
}/* 实际进行翻转的内部容器 */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
border-radius: 15px;
}/* 用于触发翻转的类 */
.flip-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}/* 正面与背面的定位 */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
border-radius: 15px;
overflow: hidden;
box-sizing: border-box;
}/* 内容包裹层，用于内边距和滚动 */
.content-wrapper {
padding: 25px;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
}/* — 头像翻转机制 — */
.avatar-flipper {
width: 100%;
height: 380px;
perspective: 1000px;
margin-bottom: 25px;
cursor: pointer;
}.avatar-flipper-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s;
transform-style: preserve-3d;
border-radius: 10px;
}.avatar-flipper.is-flipped .avatar-flipper-inner {
transform: rotateY(180deg);
}.avatar-front, .avatar-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 10px;
overflow: hidden;
border: 4px solid #363636;
box-sizing: border-box;
}.avatar-back {
transform: rotateY(180deg);
}.avatar-flipper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}/* — 正面样式 (混合主题) — */
.flip-card-front {
background-color: #121212;
border: 5px solid #363636;
}.flip-card-front .content-wrapper {
overflow-y: hidden;
}.front-details {
margin-bottom: 15px;
}.front-summary {
display: block;
width: 100%;
padding: 12px;
background-color: #424242;
color: #E0E0E0;
border-radius: 8px;
cursor: pointer;
text-align: center;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
outline: none;
border: 1px solid #616161;
font-size: 1.1em;
transition: background-color 0.3s;
}.front-summary:hover {
background-color: #555555;
}.front-details-content {
border: 1px solid #616161;
border-top: none;
border-radius: 0 0 10px 10px;
padding: 15px;
background-color: #2c2c2c;
margin-top: -1px;
white-space: pre-wrap;
color: #CCCCCC;
line-height: 1.6;
max-height: 250px;
overflow-y: auto;
}.front-details-content::-webkit-scrollbar { width: 6px; }
.front-details-content::-webkit-scrollbar-track { background: #333; border-radius: 10px; }
.front-details-content::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; }.front-details-content b {
color: #EAEAEA;
}/* === 背面样式 (银灰主题) === */
.flip-card-back {
background-color: #C0C0C0;
transform: rotateY(180deg);
border: 5px solid #363636;
}.flip-card-back .content-wrapper {
background-color: #C0C0C0;
}.flip-card-back .content-wrapper::-webkit-scrollbar { width: 8px; }
.flip-card-back .content-wrapper::-webkit-scrollbar-track { background: #A9A9A9; border-radius: 10px; }
.flip-card-back .content-wrapper::-webkit-scrollbar-thumb { background-color: #696969; border-radius: 10px; }.sirenus-h2-mod {
text-align: center;
color: #2F4F4F;
font-family: 'Georgia', 'Times New Roman', serif;
font-weight: bold;
font-size: 2em;
border-bottom: 2px solid #696969;
padding-bottom: 15px;
margin-bottom: 15px;
}
.sirenus-quote-mod {
text-align: center;
font-style: italic;
color: #555;
margin-top: 20px;
font-size: 1.1em;
}
.sirenus-hr-mod {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(105, 105, 105, 0), rgba(105, 105, 105, 0.75), rgba(105, 105, 105, 0));
margin: 30px 0;
}
.sirenus-box-mod {
border: 1px solid #808080;
border-radius: 10px;
padding: 18px 20px;
background-color: #E6E6E6;
margin: 15px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255,255,255,0.5);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.sirenus-box-mod:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255,255,255,0.5);
}
.sirenus-box-mod p {
line-height: 1.7;
color: #363636;
margin: 0;
font-size: 1.05em;
}
</style>
</head>
<body><div class="flip-card">
<div class="flip-card-inner">
<!– 卡片正面 –>
<div class="flip-card-front">
<div class="content-wrapper"><!– 头像区域 –>
<div class="avatar-flipper" id="shen-lin-avatar">
<div class="avatar-flipper-inner">
<div class="avatar-front">
<img src="https://files.catbox.moe/6xkyus.jpg" alt="Shen Lin – Front">
</div>
<div class="avatar-back">
<img src="https://files.catbox.moe/3zc5lz.jpg" alt="Shen Lin – Back">
</div>
</div>
</div><div class="details-container">
<details class="front-details">
<summary class="front-summary">世界背景</summary>
<div class="front-details-content">
<p><b>星际联邦:</b> 一个横跨数十星系、科技高度发达的人类文明共同体。在这里，人类平均寿命可达三百岁，星际航行已是常态。但广袤的宇宙也并非处处和平，来自深空的未知威胁“虫族”与联邦内部的分裂势力，让边境常年笼罩在战争的阴影下。</p>
<p><b>核心设定：第二性别与精神力:</b> 人类在15岁左右会分化出Alpha, Beta, Omega三种第二性别，并同步觉醒象征灵魂本质的“精神体”。精神力从C到SSS划分为不同等级，是衡量个体潜能、尤其是军事才能的关键标准。</p>
<p><b>精神海污染:</b> Alpha强大的精神力是柄双刃剑。长期高强度的战斗与精神压力，可能导致他们的精神世界被“污染”。一旦污染失控，他们将面临从情绪失常到永久“兽化”，甚至精神崩坏的巨大风险，是所有前线Alpha战士挥之不去的噩梦。</p>
</div>
</details><details class="front-details">
<summary class="front-summary">角色介绍</summary>
<div class="front-details-content">
<p>沈凛，联邦最年轻的少将，第七特种舰队总指挥官，一个活着的传奇，在战场上，他果决、冷静甚至冷酷，接受着赞誉也背负着骂名。内里，他是一个温柔的守护者，会弹钢琴、精通厨艺（尤其擅长煲汤），不抽烟，养着一只叫“小羽毛”的三花猫，一个居家的好男人！</p>
</div>
</details><details class="front-details">
<summary class="front-summary">食用指南</summary>
<div class="front-details-content">
<p>本角色卡只发布在discord！仅在酒馆游玩！作者为“Shirlyn”没有别的名字！如果在别的平台发现那都是盗的！请找我举报，谢谢宝子</p>
<p>状态栏部分的心里话是可以点击的</p>
<p>他的“掌控欲”源自指挥官的布局本能和守护欲，尊重伴侣的独立人格，如果出现类似囚禁等物化占有ooc行为，宝子们自行括号大法roll一下</p>
<p>🚫虐崽</p>
</div>
</details>
</div><p style="color: #666; text-align: center; margin-top: 15px; font-size: 0.9em;">点击卡片空白处翻转</p>
</div>
</div><!– 卡片背面 –>
<div class="flip-card-back">
<div class="content-wrapper">
<h2 class="sirenus-h2-mod">
⚜️ 开场白 ⚜️
</h2>
<p class="sirenus-quote-mod">
“在命运的棋盘上，你是我唯一的意外。”
</p>
<hr class="sirenus-hr-mod"><div class="sirenus-box-mod"><p><b>开场白一 (相亲线):</b> 休年假的沈凛被拉着来相亲（此男道德高大概率会因为不想耽误user而拒绝，宝子们要自己拿捏一下！打开“启明星”条目，关闭“第七舰队”条目）</p></div>
<div class="sirenus-box-mod"><p><b>开场白二 (卧底线):</b> 你被抓了，现在在审讯室接受审讯，可以当被诬陷的，也可以是真的卧底～</p></div>
<div class="sirenus-box-mod"><p><b>开场白三 (伪骨):</b> 你是沈凛的妹妹，开着自己的飞船来到第七舰队给哥一个大惊喜！（打开“骨科线”世界书条目）</p></div>
<div class="sirenus-box-mod"><p><b>开场白四 (队友):</b> 你是第七舰队指挥部的新成员！第一次指挥战役后沈凛来安慰因为队友牺牲而难过的你</p></div>
<div class="sirenus-box-mod"><p><b>开场白五 (重逢):</b> 八年前，你们各自走了自己选择的事业，八年后在晨曦号重逢，他依旧暗恋你呀</p></div>
<div class="sirenus-box-mod"><p><b>开场白六 (变猫):</b> 你是沈凛养的猫，你可以当猫咪统治晨曦号！也可以变成人吓沈凛一条然后继续统治晨曦号</p></div>
<div class="sirenus-box-mod"><p><b>开场白七 (共感线）:</b> 沈凛单方面和user共感了！狠狠欺负这个少将吧！</p></div>
<div class="sirenus-box-mod"><p><b>开场白八 (小偷线):</b> 业务不熟的你偷东西偷到了沈凛的卧室，碰到了易感期的沈凛（这个开场白引导一下沈凛超有男鬼味）</p></div>
<div class="sirenus-box-mod"><p><b>开场白九 (先婚后爱):</b>家族联姻，今天是你们新婚第一天夜晚（关闭“第七舰队”条目,打开“启明星”条目）</p></div></div>
</div>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.flip-card');
const avatar = document.getElementById('shen-lin-avatar');// — 主卡片翻转的点击监听 —
card.addEventListener('click', function(e) {
// 只有当点击目标不是头像、摘要、链接或按钮时，才翻转卡片
if (!e.target.closest('#shen-lin-avatar, summary, a, button')) {
card.classList.toggle('is-flipped');
}
});// — 头像翻转的点击监听 —
avatar.addEventListener('click', function(e) {
// 阻止事件冒泡到主卡片
e.stopPropagation();
avatar.classList.toggle('is-flipped');
});// 阻止在可滚动内容区域内的点击冒泡，以防止卡片翻转
const scrollableContents = document.querySelectorAll('.front-details-content');
scrollableContents.forEach(content => {
content.addEventListener('click', function(e) {
e.stopPropagation();
});
});
});
</script>
</body>
</html>
“`