Description <!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>
Index notes This DokiLove entry indexes the Tavern character card "测试代码" from AI风月. It keeps the source relationship visible so users can compare the card topic, preview image, creator context, and original platform before leaving DokiLove.
The current tag summary is general roleplay. Tags are useful for browsing related SillyTavern and AI chat cards, but the original source remains the authority for complete creator notes, usage rules, update history, and any platform-specific restrictions.
Use the source button to inspect the complete original content. To find similar characters or create a new one, continue to NIMEI. DokiLove remains the public discovery index.
