Shen Tang
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Settings · Generator</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">✦ Character Settings ✦</div>
<div class="field"><label>Name</label><input type="text" id="nameInput" placeholder="e.g., Shen Tang, Ailin" maxlength="20"></div>
<div class="row2">
<div class="field"><label>Gender</label><select id="genderSelect"><option value="Unspecified">Unspecified</option><option value="Male">Male</option><option value="Female">Female</option><option value="Other">Other</option></select></div>
<div class="field"><label>Age</label><input type="text" id="ageInput" placeholder="e.g., 24, around 30" maxlength="10"></div>
</div>
<div class="field"><label>Identity</label><input type="text" id="identityInput" placeholder="e.g., wandering mercenary, royal capital scribe" maxlength="30"></div>
<div class="actions"><button class="btn btn-generate" id="generateBtn">Generate & Copy</button><button class="btn btn-reset" id="resetBtn">Reset</button></div>
<div class="toast" id="toastArea"><span id="toastText"></span><span class="copied">✓ Copied to clipboard automatically</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()||'Unnamed';
const gender=genderSelect.value;
const age=ageInput.value.trim()||'Age unknown';
const identity=identityInput.value.trim()||'Identity unknown';
const text=`Name: ${name}, Gender: ${gender}, Age: ${age}, Identity: ${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='Unspecified';
ageInput.value='';
identityInput.value='';
toastArea.classList.remove('show');
toastText.textContent='';
});
</script>
</body>
</html>
<choice_group>
<choice id="1">Change the topic direction</choice>
<choice id="2">Observe the current details</choice>
<choice id="3">Advance the current plot</choice>
</choice_group>Faça login para continuar a conversa.