概要
<!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>
body {
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
color: #333;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
margin: 0;
}
.container {
width: 100%;
max-width: 800px;
background-color: white;
border-radius: 25px;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
overflow: hidden;
}
.header {
background: linear-gradient(90deg, #ff6b9d 0%, #ff4b91 100%);
padding: 25px 20px;
text-align: center;
position: relative;
}
.header h1 {
color: white;
font-size: 26px;
font-weight: 600;
letter-spacing: 0.5px;
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin: 0;
}
.heart-icon {
position: absolute;
top: 15px;
right: 20px;
font-size: 32px;
color: rgba(255,255,255,0.8);
}
.content {
padding: 25px;
}
.section-title {
color: #ff4b91;
font-size: 22px;
font-weight: 600;
margin-bottom: 25px;
text-align: center;
}
.form-group {
margin-bottom: 22px;
}
.form-group label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
color: #333;
}
.form-group input,
.form-group select {
width: 100%;
padding: 14px;
border: 1px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
background-color: #f9f9f9;
transition: all 0.3s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: #ff9ec5;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(255,158,197,0.3);
}
.required::after {
content: "（必填）";
color: #ff4b91;
font-size: 14px;
font-weight: normal;
margin-left: 5px;
}
.create-btn {
background: linear-gradient(90deg, #ff6b9d 0%, #ff4b91 100%);
color: white;
border: none;
width: 100%;
padding: 16px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
cursor: pointer;
margin-top: 15px;
box-shadow: 0 4px 15px rgba(255,75,145,0.3);
transition: all 0.3s;
}
.create-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,75,145,0.4);
}
.create-btn:active {
transform: translateY(0);
}
.character-section {
background-color: #fff;
border-radius: 15px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.character-section label {
font-size: 16px;
color: #666;
margin-bottom: 8px;
display: block;
}
.character-section .intro-content {
background-color: #f9f9f9;
border-radius: 12px;
padding: 15px;
margin-top: 10px;
line-height: 1.6;
font-size: 16px;
}
.opening-select {
margin-top: 20px;
}
.opening-select select {
width: 100%;
padding: 14px;
border: 1px solid #e0e0e0;
border-radius: 12px;
font-size: 16px;
background-color: #f9f9f9;
}
.intro-text {
font-size: 16px;
font-weight: 500;
line-height: 1.6;
color: #333;
text-align: center;
padding: 15px;
margin: 0 auto 20px;
background-color: #fff9fc;
border-radius: 12px;
border: 1px solid #ffe6f2;
}
.toggle-btn {
background: linear-gradient(90deg, #ff9ec5 0%, #ff6b9d 100%);
color: white;
border: none;
padding: 12px 20px;
font-size: 16px;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
margin: 10px 5px;
transition: all 0.3s;
}
.toggle-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.toggle-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.intro-container {
display: none;
background-color: #fff;
border-radius: 15px;
padding: 20px;
margin-top: 15px;
box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}
.intro-container.active {
display: block;
}
.character-intro {
margin-bottom: 20px;
}
.character-intro h3 {
color: #ff4b91;
margin-top: 0;
margin-bottom: 10px;
font-size: 18px;
}
.character-intro p {
font-size: 16px;
line-height: 1.6;
}
.tags-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 15px;
}
.tag-item {
background-color: #f0f8ff;
border-radius: 8px;
padding: 10px;
border-left: 4px solid #ff6b9d;
}
.tag-label {
font-weight: 600;
color: #ff4b91;
margin-bottom: 5px;
}
.tag-value {
font-size: 14px;
color: #333;
}
.detail-btn {
background: transparent;
color: #ff4b91;
border: none;
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
margin-top: 10px;
display: inline-flex;
align-items: center;
}
.detail-btn:hover {
text-decoration: underline;
}
.detail-btn::after {
content: "▼";
font-size: 10px;
margin-left: 5px;
transition: transform 0.3s;
}
.detail-btn.active::after {
transform: rotate(180deg);
}
.story-section {
margin-top: 30px;
border-top: 2px dashed #ff9ec5;
padding-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="heart-icon">❤</div>
<h1>存在感消失，在现代世界为所欲为</h1>
</div>
<div class="content">
<div class="intro-text">
在这个故事中，你将扮演一个突然获得"存在感消失"能力的主角。你可以自由穿梭于现代社会的各个角落，体验前所未有的自由与冒险。但同时，这种能力也带来了孤独与道德困境。探索这个特殊能力如何改变你的生活，以及你将如何利用它面对各种挑战。
</div>
<h2 class="section-title">创作你的专属角色</h2>
<div class="form-group">
<label for="character-name" class="required">人物名字</label>
<input type="text" id="character-name" placeholder="请输入人物名字">
</div>
<div class="form-group">
<label for="character-gender" class="required">性别</label>
<select id="character-gender">
<option value="">请选择性别</option>
<option value="男">男</option>
<option value="女">女</option>
<option value="其他">其他</option>
</select>
</div>
<div class="character-section opening-select">
<label for="opening-select">开场白选择</label>
<select id="opening-select">
<option value="">请选择开场白</option>
<option value="opening1">突然发现自己消失了</option>
<option value="opening2">在人群中无人注意</option>
<option value="opening3">获得隐身能力的第一天</option>
</select>
</div>
<button class="create-btn" id="create-btn">创建完成</button>
<div class="toggle-container">
<button class="toggle-btn" id="btn-char-intro">人物简介</button>
<button class="toggle-btn" id="btn-story-intro">故事简介</button>
</div>
<div class="intro-container" id="char-intro-content">
<div class="character-intro">
<h3>李明 <button class="detail-btn" data-target="li-ming-tags">查看详情</button></h3>
<p>李明是一个普通的上班族，在IT公司担任程序员。他性格内向，不善社交，经常感到自己在人群中缺乏存在感。某天早上醒来，他突然发现自己获得了"存在感消失"的能力，周围的人完全注意不到他的存在。最初他感到恐慌，但很快开始利用这种能力探索世界的另一面。</p>
<div class="tags-container" id="li-ming-tags" style="display: none;">
<div class="tag-item">
<div class="tag-label">年龄</div>
<div class="tag-value">28岁</div>
</div>
<div class="tag-item">
<div class="tag-label">身高</div>
<div class="tag-value">175cm</div>
</div>
<div class="tag-item">
<div class="tag-label">身份</div>
<div class="tag-value">程序员</div>
</div>
<div class="tag-item">
<div class="tag-label">性格</div>
<div class="tag-value">内向、谨慎</div>
</div>
<div class="tag-item">
<div class="tag-label">能力</div>
<div class="tag-value">存在感消失</div>
</div>
<div class="tag-item">
<div class="tag-label">弱点</div>
<div class="tag-value">孤独感、社交恐惧</div>
</div>
<div class="tag-item">
<div class="tag-label">目标</div>
<div class="tag-value">探索能力边界</div>
</div>
<div class="tag-item">
<div class="tag-label">背景</div>
<div class="tag-value">普通家庭</div>
</div>
<div class="tag-item">
<div class="tag-label">爱好</div>
<div class="tag-value">编程、阅读</div>
</div>
<div class="tag-item">
<div class="tag-label">技能</div>
<div class="tag-value">快速学习、解决问题</div>
</div>
<div class="tag-item">
<div class="tag-label">经历</div>
<div class="tag-value">意外获得能力</div>
</div>
<div class="tag-item">
<div class="tag-label">关系</div>
<div class="tag-value">单身，与父母关系良好</div>
</div>
</div>
</div>
<div class="character-intro">
<h3>张小雨 <button class="detail-btn" data-target="zhang-xiaoyu-tags">查看详情</button></h3>
<p>张小雨是一名大学生，主修心理学。她聪明敏锐，善于观察他人，但常常感到自己无法真正融入群体。在参加一次心理学实验后，她意外获得了"存在感消失"的能力。她开始利用这种能力研究人类行为，但逐渐发现这种能力带来的道德困境。</p>
<div class="tags-container" id="zhang-xiaoyu-tags" style="display: none;">
<div class="tag-item">
<div class="tag-label">年龄</div>
<div class="tag-value">21岁</div>
</div>
<div class="tag-item">
<div class="tag-label">身高</div>
<div class="tag-value">162cm</div>
</div>
<div class="tag-item">
<div class="tag-label">身份</div>
<div class="tag-value">心理学学生</div>
</div>
<div class="tag-item">
<div class="tag-label">性格</div>
<div class="tag-value">观察力强、理性</div>
</div>
<div class="tag-item">
<div class="tag-label">能力</div>
<div class="tag-value">存在感消失</div>
</div>
<div class="tag-item">
<div class="tag-label">弱点</div>
<div class="tag-value">情感隔离、道德困境</div>
</div>
<div class="tag-item">
<div class="tag-label">目标</div>
<div class="tag-value">研究人类行为</div>
</div>
<div class="tag-item">
<div class="tag-label">背景</div>
<div class="tag-value">知识分子家庭</div>
</div>
<div class="tag-item">
<div class="tag-label">爱好</div>
<div class="tag-value">阅读心理学书籍、观察人群</div>
</div>
<div class="tag-item">
<div class="tag-label">技能</div>
<div class="tag-value">行为分析、心理评估</div>
</div>
<div class="tag-item">
<div class="tag-label">经历</div>
<div class="tag-value">实验事故获得能力</div>
</div>
<div class="tag-item">
<div class="tag-label">关系</div>
<div class="tag-value">与导师关系密切</div>
</div>
</div>
</div>
</div>
<div class="intro-container" id="story-intro-content">
<div class="character-intro">
<h3>故事简介</h3>
<p>这是一个关于普通人在现代世界突然获得"存在感消失"能力的故事。主角是一个平凡的上班族，某天醒来发现自己变得透明，周围的人完全注意不到他的存在。他开始利用这种能力探索世界的另一面，体验前所未有的自由，但也逐渐发现这种能力带来的孤独和道德困境。</p>
<p>故事讲述主角在获得"存在感消失"能力后，从最初的惊慌到逐渐掌握这种能力的过程。他可以自由出入任何场所，了解他人的秘密，甚至影响事件的发展。但随着能力的深入使用，他开始面临道德抉择：是默默观察还是干预？是享受自由还是寻找恢复的方法？剧情围绕主角在现代都市中的冒险展开，探索存在与虚无、自由与责任的主题。</p>
</div>
</div>
</div>
</div>
<script>
document.getElementById('create-btn').addEventListener('click', function() {
const characterName = document.getElementById('character-name').value;
const characterGender = document.getElementById('character-gender').value;
const openingSelect = document.getElementById('opening-select');
const openingText = openingSelect.options[openingSelect.selectedIndex].text;
if (!characterName || !characterGender) {
alert('请填写必填字段（人物名字和性别）');
return;
}
if (openingSelect.value === "") {
alert('请选择一个开场白');
return;
}
const contentToCopy = `角色名称: ${characterName}
性别: ${characterGender}
开场白: ${openingText}`;
navigator.clipboard.writeText(contentToCopy)
.then(() => {
const btn = document.getElementById('create-btn');
const originalText = btn.textContent;
btn.textContent = '✓ 已复制到剪贴板！';
btn.style.background = 'linear-gradient(90deg, #4CAF50 0%, #2E7D32 100%)';
setTimeout(() => {
btn.textContent = originalText;
btn.style.background = 'linear-gradient(90deg, #ff6b9d 0%, #ff4b91 100%)';
}, 2000);
})
.catch(err => {
console.error('复制失败:', err);
alert('复制失败，请手动复制');
});
});
document.getElementById('btn-char-intro').addEventListener('click', function() {
const charIntro = document.getElementById('char-intro-content');
const storyIntro = document.getElementById('story-intro-content');
if (charIntro.classList.contains('active')) {
charIntro.classList.remove('active');
} else {
charIntro.classList.add('active');
storyIntro.classList.remove('active');
}
});
document.getElementById('btn-story-intro').addEventListener('click', function() {
const charIntro = document.getElementById('char-intro-content');
const storyIntro = document.getElementById('story-intro-content');
if (storyIntro.classList.contains('active')) {
storyIntro.classList.remove('active');
} else {
storyIntro.classList.add('active');
charIntro.classList.remove('active');
}
});
document.querySelectorAll('.detail-btn').forEach(btn => {
btn.addEventListener('click', function() {
const targetId = this.getAttribute('data-target');
const tagsContainer = document.getElementById(targetId);
if (tagsContainer.style.display === 'none' || tagsContainer.style.display === '') {
tagsContainer.style.display = 'grid';
this.classList.add('active');
this.textContent = '收起详情';
} else {
tagsContainer.style.display = 'none';
this.classList.remove('active');
this.textContent = '查看详情';
}
});
});
</script>
</body>
</html>
インデックスメモ
この DokiLove エントリは、AI风月 にある Tavern キャラクターカード「测试代码」をインデックスしています。カードのテーマ、プレビュー画像、作者情報、元のプラットフォームを比較してから外部サイトへ移動できます。
現在のタグ概要は 汎用ロールプレイ です。タグは関連する SillyTavern と AI チャット向けカードを探す助けになりますが、作者メモ、利用ルール、更新履歴、プラットフォーム固有の制限は元ページが正式な情報源です。
完全な元情報は元ページで確認できます。似たキャラクターを探すか新しいキャラクターを作る場合は NIMEI に進みます。DokiLove は公開ディスカバリーインデックスとして機能します。
