\n\n","image":"https://catai.wiki/e78fe81f-a6c1-465e-12a9-655f84ee9400/cover","url":"https://doki.love/cards/91364","datePublished":"2025-08-19T15:01:32.000Z","author":{"@type":"Person","name":"a1j2k3l"}} 返回浏览

测试代码

a1j2k3l

热度 162025/8/19

前往原站查看

简介

<!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>

测试代码

简介

图片预览