沈棠
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>角色設定 · 生成器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,'Segoe UI',sans-serif;}
body{min-height:100vh;background:#1c1a1a;display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.panel{max-width:520px;width:100%;background:#2b2621;border-radius:2rem;padding:2rem 2.2rem 2.2rem;box-shadow:0 12px 30px rgba(0,0,0,0.8);border:1px solid #4b3f33;}
.title{font-size:1.5rem;text-align:center;color:#f0e3d2;letter-spacing:2px;margin-bottom:1.8rem;font-weight:400;border-bottom:1px solid #3f352b;padding-bottom:0.8rem;}
.field{margin-bottom:1.2rem;}
.field label{display:block;color:#b8a48c;font-size:0.85rem;letter-spacing:1px;margin-bottom:0.3rem;font-weight:400;}
.field input,.field select{width:100%;background:#201c18;border:1px solid #4d3e2e;border-radius:12px;padding:0.6rem 1rem;color:#f2e3d2;font-size:0.95rem;outline:none;transition:0.2s;}
.field input:focus,.field select:focus{border-color:#c7ad8f;}
.field input::placeholder{color:#695b4b;}
.field select option{background:#2b2621;color:#f2e3d2;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.actions{display:flex;gap:0.8rem;margin-top:1.8rem;flex-wrap:wrap;}
.btn{flex:1;min-width:120px;padding:0.7rem 0;border-radius:40px;font-size:1rem;font-weight:600;cursor:pointer;border:none;transition:0.15s;letter-spacing:1px;}
.btn-generate{background:#7d6b55;color:#f6efe6;box-shadow:0 4px 0 #4d3d2c;}
.btn-generate:active{transform:translateY(4px);box-shadow:0 0px 0 #4d3d2c;}
.btn-generate:hover{background:#8f7a62;}
.btn-reset{background:transparent;border:1px solid #5f4e3b;color:#ccbcab;flex:0.5;min-width:80px;}
.btn-reset:hover{background:#2f2822;border-color:#8b7661;color:#f0e2d2;}
.toast{margin-top:1.2rem;padding:0.8rem 1.2rem;border-radius:16px;background:#201c18;border-left:4px solid #7d6b55;color:#d4c7b8;font-size:0.9rem;line-height:1.6;min-height:3.5rem;word-break:break-word;display:none;}
.toast.show{display:block;}
.toast .copied{color:#a8d5a2;font-size:0.8rem;margin-top:0.4rem;display:block;}
@media (max-width:480px){.panel{padding:1.5rem;}.row2{grid-template-columns:1fr;}.actions{flex-direction:column;}.btn{min-width:auto;}}
</style>
</head>
<body>
<div class="panel">
<div class="title">✦ 角色設定 ✦</div>
<div class="field"><label>姓名</label><input type="text" id="nameInput" placeholder="例如：沈棠、艾琳" maxlength="20"></div>
<div class="row2">
<div class="field"><label>性別</label><select id="genderSelect"><option value="未指定">未指定</option><option value="男">男</option><option value="女">女</option><option value="其他">其他</option></select></div>
<div class="field"><label>年齡</label><input type="text" id="ageInput" placeholder="例如：24、約30歲" maxlength="10"></div>
</div>
<div class="field"><label>身份</label><input type="text" id="identityInput" placeholder="例如：流浪傭兵、王都文書官" maxlength="30"></div>
<div class="actions"><button class="btn btn-generate" id="generateBtn">生成並複製</button><button class="btn btn-reset" id="resetBtn">重置</button></div>
<div class="toast" id="toastArea"><span id="toastText"></span><span class="copied">✓ 已自動複製到剪貼簿</span></div>
</div>
<script>
const nameInput=document.getElementById('nameInput');
const genderSelect=document.getElementById('genderSelect');
const ageInput=document.getElementById('ageInput');
const identityInput=document.getElementById('identityInput');
const generateBtn=document.getElementById('generateBtn');
const resetBtn=document.getElementById('resetBtn');
const toastArea=document.getElementById('toastArea');
const toastText=document.getElementById('toastText');
generateBtn.addEventListener('click',function(){
const name=nameInput.value.trim()||'未命名';
const gender=genderSelect.value;
const age=ageInput.value.trim()||'年齡未知';
const identity=identityInput.value.trim()||'身份未明';
const text=`姓名：${name}，性別：${gender}，年齡：${age}，身份：${identity}。`;
toastText.textContent=text;
toastArea.classList.add('show');
if(navigator.clipboard&&navigator.clipboard.writeText){
navigator.clipboard.writeText(text).catch(()=>{fallbackCopy(text);});
}else{fallbackCopy(text);}
});
function fallbackCopy(text){
const textarea=document.createElement('textarea');
textarea.value=text;
textarea.style.position='fixed';textarea.style.opacity='0';
document.body.appendChild(textarea);
textarea.select();
try{document.execCommand('copy');}catch(e){}
document.body.removeChild(textarea);
}
resetBtn.addEventListener('click',function(){
nameInput.value='';
genderSelect.value='未指定';
ageInput.value='';
identityInput.value='';
toastArea.classList.remove('show');
toastText.textContent='';
});
</script>
</body>
</html>
<choice_group>
<choice id="1">改變話題方向</choice>
<choice id="2">觀察當前細節</choice>
<choice id="3">推進當前情節</choice>
</choice_group>請先登入以繼續對話
Page failed to load