Shen Tang
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generatore di schede personaggio</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">✦ Scheda Personaggio ✦</div>
<div class="field">
<label>Nome</label><input type="text" id="nameInput" placeholder="Es. Shen Tang, Irene" maxlength="20">
</div>
<div class="row2">
<div class="field">
<label>Genere</label>
<select id="genderSelect">
<option value="Non specificato">Non specificato</option>
<option value="Maschio">Maschio</option>
<option value="Femmina">Femmina</option>
<option value="Altro">Altro</option>
</select>
</div>
<div class="field">
<label>Età</label><input type="text" id="ageInput" placeholder="Es. 24, circa 30 anni" maxlength="10">
</div>
</div>
<div class="field">
<label>Identità</label><input type="text" id="identityInput" placeholder="Es. Mercenario errante, scrivano reale" maxlength="30">
</div>
<div class="actions">
<button class="btn btn-generate" id="generateBtn">Genera e copia</button>
<button class="btn btn-reset" id="resetBtn">Azzera</button>
</div>
<div class="toast" id="toastArea">
<span id="toastText"></span>
<span class="copied">✓ Copiato automaticamente negli appunti</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()||'Senza nome';
const gender=genderSelect.value;
const age=ageInput.value.trim()||'Età sconosciuta';
const identity=identityInput.value.trim()||'Identità ignota';
const text=`Nome: ${name}, Genere: ${gender}, Età: ${age}, Identità: ${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='Non specificato';
ageInput.value='';
identityInput.value='';
toastArea.classList.remove('show');
toastText.textContent='';
});
</script>
</body>
</html>
<choice_group>
<choice id="1">Cambia argomento</choice>
<choice id="2">Osserva i dettagli attuali</choice>
<choice id="3">Fai avanzare la trama</choice>
</choice_group>Accedi per continuare la conversazione