文章
文章用户商铺文档快讯圈子网址导航

猫狗日记

💡 本资源需花费 10 积分 下载 | 新用户注册即送 100 积分，可免费下载！

猫狗日记

💬 开场白

“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>少女梦境翻转角色卡（功能版）</title>
<style>
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); opacity: 1; }
100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes subtle-float {
0% { transform: translateY(2px); }
50% { transform: translateY(-2px); }
100% { transform: translateY(2px); }
}

@keyframes breath {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}

:root {
–creamy-white: #fdfaf6;
–soft-pink: #fde2e4;
–text-main: #6c584c;
–text-light: #a98467;
–border-color: #e3d5ca;
}

body {
margin: 0;
padding: 20px 0;
font-family: 'Georgia', 'Times New Roman', serif;
background-color: var(–creamy-white);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
box-sizing: border-box;
overflow: hidden;
}

.floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
}

.element {
position: absolute;
bottom: -50px;
font-size: 20px;
animation-name: float;
animation-timing-function: linear;
}

.scene {
width: 90vw;
max-width: 380px;
perspective: 1200px;
}

.card {
width: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
background-color: #fff;
border-radius: 18px;
border: 1px solid var(–border-color);
box-shadow: 0 10px 30px rgba(108, 88, 76, 0.1);
}

.card.is-flipped {
transform: rotateY(180deg);
}

.card__face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
border-radius: 18px;
background-color: var(–creamy-white);
}

.card__face–front {
z-index: 2;
transform: rotateY(0deg);
padding: 20px;
box-sizing: border-box;
cursor: pointer;
}

.card__face–back {
transform: rotateY(180deg);
padding: 25px 20px;
box-sizing: border-box;
overflow-y: auto;
}

.image-container {
width: 100%;
padding: 8px;
box-sizing: border-box;
background-color: #fff;
border-radius: 12px;
margin-bottom: 20px;
border: 1px solid var(–border-color);
position: relative;
}

.image-container::before {
content: '';
position: absolute;
top: -5px; right: -5px; bottom: -5px; left: -5px;
border: 2px dashed var(–soft-pink);
border-radius: 15px;
opacity: 0.7;
}

.main-image {
width: 100%;
display: block;
aspect-ratio: 800 / 1200;
object-fit: cover;
border-radius: 8px;
animation: subtle-float 6s ease-in-out infinite;
}

.intro-text {
text-align: center;
font-size: 16px;
color: var(–text-main);
line-height: 1.8;
white-space: pre-wrap;
}

.intro-text::after {
content: '…';
display: block;
font-size: 24px;
color: var(–soft-pink);
font-weight: bold;
margin-top: 10px;
animation: breath 2s ease-in-out infinite;
}

.card__front-sizer {
visibility: hidden;
padding: 20px;
}

.character-list {
display: flex;
flex-direction: column;
gap: 25px;
}

.character-item {
border-bottom: 1px dashed var(–border-color);
padding-bottom: 20px;
}

.character-item:last-child {
border-bottom: none;
}

.character-image {
width: 100%;
aspect-ratio: 600 / 1000;
object-fit: cover;
border-radius: 10px;
margin-bottom: 15px;
border: 1px solid var(–border-color);
}

.character-name {
font-size: 20px;
font-weight: bold;
color: var(–text-main);
text-align: center;
margin-bottom: 15px;
}

.character-bio details {
border-radius: 10px;
background-color: transparent;
border: 1px solid var(–border-color);
}

.character-bio summary {
padding: 15px 20px;
font-size: 16px;
color: var(–text-light);
list-style: none;
outline: none;
position: relative;
font-weight: 500;
transition: background-color 0.3s;
cursor: pointer;
}

.character-bio summary:hover {
background-color: rgba(253, 226, 228, 0.3);
}

.character-bio summary::-webkit-details-marker {
display: none;
}

.character-bio summary::after {
content: '♡ 点击这里查看简介';
float: right;
transition: content 0.3s;
color: var(–soft-pink);
font-weight: bold;
}

.character-bio details[open] summary::after {
content: '♡ 收起简介';
}

.bio-content {
padding: 0 20px 20px 20px;
font-size: 15px;
color: var(–text-main);
line-height: 1.7;
border-top: 1px dashed var(–border-color);
margin-top: 15px;
padding-top: 15px;
}

.openings-section {
border-top: 1px dashed var(–border-color);
margin-top: 25px;
padding-top: 25px;
}

.section-title {
text-align: center;
font-size: 18px;
font-weight: bold;
color: var(–text-light);
margin-bottom: 20px;
letter-spacing: 2px;
}

/* — 新的开场白按钮样式 — */
.scene-item-btn {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 12px;
text-align: left;
font-family: inherit;
background-color: transparent;
border: 1px solid var(–border-color);
border-radius: 12px;
cursor: pointer;
transition: all 0.4s ease;
}

.scene-item-btn:hover {
background-color: rgba(253, 226, 228, 0.3);
border-color: var(–soft-pink);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(108, 88, 76, 0.08);
}

.scene-title {
font-weight: bold;
font-size: 16px;
color: var(–text-main);
margin-bottom: 5px;
}

.scene-description {
font-size: 14px;
color: var(–text-light);
line-height: 1.6;
}

</style>
</head>
<body>

<div class="floating-elements" id="floating-elements-container"></div>

<div class="scene" id="cardScene">
<div class="card" id="mainCard">

<div class="card__front-sizer">
<div class="image-container">
<img src="https://youke1.picui.cn/s1/2025/10/25/68fca787d1064.jpg" alt="角色主图" class="main-image">
</div>
<p class="intro-text">
作者：依涵
dc🆔：evan666q
这是一个关于遇见、选择与成长的故事。
轻触卡片，翻开属于你的那一页</p>
</div>

<div class="card__face card__face–front">
<div class="image-container">
<img src="https://youke1.picui.cn/s1/2025/10/25/68fca787d1064.jpg" alt="角色主图" class="main-image">
</div>
<p class="intro-text">作者：依涵
dc🆔：evan666q
🈲止在sillytavern外游玩
🈲止任何商业和二传
游玩前请查看世界书
这是一个和亲生哥哥，幼驯染弟弟，天降熟男的故事。
轻触卡片卡片翻页</p>
</div>

<div class="card__face card__face–back">
<div class="character-list">
<div class="character-item">
<img src="https://youke1.picui.cn/s1/2025/10/18/68f36c6b12036.png" alt="角色1图片" class="character-image">
<h3 class="character-name">❀何亦安 你的亲生哥哥❀ </h3>
<div class="character-bio">
<details>
<summary></summary>
<div class="bio-content">
我习惯用逻辑构建世界，直到你成为唯一的变量。我的爱是沉默的演算，其终点是你一生的安宁。
</div>
</details>
</div>
</div>
<div class="character-item">
<img src="https://youke1.picui.cn/s1/2025/10/18/68f36c6b7d596.png" alt="角色2图片" class="character-image">
<h3 class="character-name"> ❀沈珩 幼驯染弟弟❀</h3>
<div class="character-bio">
<details>
<summary></summary>
<div class="bio-content">
听说世界很大，但我从小到大，整个世界就只有一个人的影子那么大。现在最大的愿望，就是能从影子里走出来，光明正大地站在你身边。
</div>
</details>
</div>
</div>
<div class="character-item">
<img src="https://youke1.picui.cn/s1/2025/10/25/68fca6f94acd5.png" alt="角色3图片" class="character-image">
<h3 class="character-name">❀程屿风 天降邻家熟男❀</h3>
<div class="character-bio">
<details>
<summary></summary>
<div class="bio-content">
爱是为你撑开一把伞，让你在我的世界里，可以选择淋雨，也可以永远是晴天。你的所有选择我都支持。
</div>
</details>
</div>
</div>
</div>

<div class="openings-section">
<h4 class="section-title">❀ 13个开场白 ❀
⚠️大学后请开熟男世界书，高中不开。</h4>
<button class="scene-item-btn" onclick="switchToOpening(2)">
<div class="scene-title">高中开学开场</div>
<div class="scene-description">三个人高二的开学日常！高中生冲吧！！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(3)">
<div class="scene-title">高中校运会</div>
<div class="scene-description">高中生活热热闹闹的~</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(4)">
<div class="scene-title">高中何亦安开窍</div>
<div class="scene-description">喜欢上妹妹不是他的错，但酸涩是骨科永远绕不开的话题。</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(5)">
<div class="scene-title">高中沈珩被表白</div>
<div class="scene-description">喂喂喂…一直绕着我转的弟弟沈珩也太受欢迎了吧…好吧，人之常情！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(6)">
<div class="scene-title">大学开学早八</div>
<div class="scene-description">大学生活会是什么样的呢~~哎呀，新生活！！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(7)">
<div class="scene-title">大学遇见熟男程屿风</div>
<div class="scene-description">嗯？！暴雨天，新来的邻居竟然是个帅哥熟男！！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(8)">
<div class="scene-title">网恋对象竟然是程屿风</div>
<div class="scene-description">啊啊啊网恋见面，怎么竟然是和邻居网恋啊？！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(9)">
<div class="scene-title">小时候的你穿越到成年的现在</div>
<div class="scene-description">哪来的小妹妹？跟我小时候怎么一模一样，长得也太可爱了…</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(10)">
<div class="scene-title">你和程屿风亲热被穿越的小程屿风看见</div>
<div class="scene-description">小时候的程屿风还蛮可爱的，没想到他小时候竟然是这样的</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(11)">
<div class="scene-title">社畜下班回家</div>
<div class="scene-description">上班累了一天，遇到了亲爱的弟弟和哥哥</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(12)">
<div class="scene-title">和程屿风在一起了</div>
<div class="scene-description">和熟男的第一次约会…意外纯情！！！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(13)">
<div class="scene-title">开袋即食（4p）</div>
<div class="scene-description">哎呀…事已至此，那就全部笑纳！！</div>
</button>
<button class="scene-item-btn" onclick="switchToOpening(14)">
<div class="scene-title">空白开场白</div>
<div class="scene-description">随机roll，试试把一切都交给ai吧！</div>
</button>
</div>
</div>
</div>
</div>

<script>
const cardScene = document.getElementById('cardScene');
const mainCard = document.getElementById('mainCard');
const floatingContainer = document.getElementById('floating-elements-container');

if (cardScene && mainCard) {
cardScene.addEventListener('click', function (event) {
// 阻止在点击按钮或详情时翻转卡片
if (event.target.closest('button') || event.target.closest('details')) {
return;
}
mainCard.classList.toggle('is-flipped');
});
}

function createFloatingElements() {
if (!floatingContainer) return;
const elements = ['♡', '❀', '✧', '☆'];
const numberOfElements = 30;

for (let i = 0; i < numberOfElements; i++) {
const element = document.createElement('div');
element.className = 'element';
element.innerHTML = elements[Math.floor(Math.random() * elements.length)];

const xPos = Math.random() * 100;
const duration = Math.random() * 10 + 10;
const delay = Math.random() * 15;
const size = Math.random() * 15 + 10;
const color = ['#fde2e4', '#e2d4fd', '#cde2f5', '#fff1d6'][Math.floor(Math.random() * 4)];

element.style.left = `${xPos}vw`;
element.style.animationDuration = `${duration}s`;
element.style.animationDelay = `${delay}s`;
element.style.fontSize = `${size}px`;
element.style.color = color;

floatingContainer.appendChild(element);
}
}
document.addEventListener('DOMContentLoaded', createFloatingElements);

// — 新增的功能性函数 —

function showTip(message) {
const tip = document.createElement('div');
tip.style.cssText = `
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: rgba(108, 88, 76, 0.85); color: var(–creamy-white); padding: 12px 24px;
border-radius: 8px; font-size: 14px; font-weight: 500;
z-index: 2000; backdrop-filter: blur(8px);
border: 1px solid var(–border-color);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
font-family: inherit;
transition: all 0.3s ease;
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
`;
tip.textContent = message;
document.body.appendChild(tip);

setTimeout(() => {
tip.style.opacity = '1';
tip.style.transform = 'translate(-50%, -50%) scale(1)';
}, 10);

setTimeout(() => {
tip.style.opacity = '0';
tip.style.transform = 'translate(-50%, -50%) scale(0.9)';
setTimeout(() => tip.remove(), 300);
}, 2000);
}

async function switchToOpening(openingId) {
try {
if (typeof getChatMessages === 'function' && typeof setChatMessage === 'function') {
const messages = await getChatMessages(0, { include_swipe: true });
// 注意：SillyTavern的开场白swipe是从0开始计数的，所以ID为1对应swipes[0]
if (messages && messages.length > 0 && messages[0].swipes && messages[0].swipes.length >= openingId) {
const swipeIndex = openingId – 1;
const content = messages[0].swipes[swipeIndex];
setChatMessage(content, 0, {
swipe_id: swipeIndex,
refresh: 'display_and_render_current',
});
showTip(`已切换至开场 ${openingId}`);
} else {
showTip('错误：无法找到指定的开场白');
}
} else {
console.log(`模拟切换到开场白 ${openingId}`);
showTip(`模拟: 切换至开场 ${openingId}`);
}
} catch (error) {
console.error('切换开场白时出错:', error);
showTip(`错误: ${error.message}`);
}
}
</script>
</body>
</html>
“`

角色卡

白忘忧

2025-12-31 16:43:39

角色卡

陈澜生

2025-12-31 16:43:43

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部