Cultivation Simulator n+1
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Info Form</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft YaHei",sans-serif;}
body{background:transparent;padding:15px;}
/* Outer container */
.info-box{
width:100%;
max-width:480px;
margin:0 auto;
background:rgba(255,255,255,0.15);
border-radius:12px;
padding:20px;
border:1px solid rgba(180,140,90,0.3);
}
/* Each input row */
.item{margin-bottom:12px;}
label{
display:block;
color:#6b4c38;
font-size:14px;
margin-bottom:4px;
}
input,textarea{
width:100%;
border:1px solid #d9c7b8;
border-radius:6px;
padding:8px 10px;
background:rgba(255,255,255,0.6);
outline:none;
font-size:14px;
color:#333;
}
textarea{min-height:60px;resize:none;}
/* Button area */
.btn-wrap{
display:flex;
gap:10px;margin-top:15px;
}
button{
flex:1;
padding:9px 0;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
transition:0.2s;
}
.copy-btn{background:#c9a87c;color:#fff;}
.clear-btn{background:#b98b6b;color:#fff;}
button:active{opacity:0.8;}
</style>
</head>
<body>
<div class="info-box">
<div class="item">
<label>Name</label>
<input type="text" id="name" placeholder="Enter your name">
</div>
<div class="item">
<label>Gender</label><input type="text" id="sex1" placeholder="e.g. Male / Female / Bigender">
</div>
<div class="item">
<label>Race</label>
<input type="text" id="sex2" placeholder="e.g. Human / Demon / Devil / Immortal / God / Ghost">
</div>
<div class="item">
<label>Age (≥18)</label>
<input type="number" id="age" min="18" placeholder="Enter 18 or above">
</div>
<div class="item">
<label>Spiritual Root</label>
<input type="text" id="spiritAnimal" placeholder="Enter your spiritual root">
</div>
<div class="item">
<label>Cultivation</label>
<input type="text" id="spiritPower" placeholder="Enter here">
</div>
<div class="item">
<label>Appearance</label>
<input type="text" id="phero" placeholder="Fill in">
</div>
<div class="item">
<label>Personality</label>
<textarea id="look" placeholder="Self-defined"></textarea>
</div>
<div class="item">
<label>Identity</label>
<textarea id="character" placeholder="Write whatever you like, just don't break the worldbuilding"></textarea>
</div>
<div class="item">
<label>Sect</label>
<textarea id="identity" placeholder="Write the sect you want to join"></textarea>
</div>
<div class="btn-wrap">
<button class="copy-btn" onclick="copyAll()">Copy All</button>
<button class="clear-btn" onclick="clearAll()">Clear All</button>
</div>
</div>
<script>
// Concatenate all content and copy
function copyAll(){
let text = `Name: ${document.getElementById('name').value}
First Gender: ${document.getElementById('sex1').value}
Second Gender: ${document.getElementById('sex2').value}
Age: ${document.getElementById('age').value}
Spirit Body: ${document.getElementById('spiritAnimal').value}
Spirit Power: ${document.getElementById('spiritPower').value}
Pheromone: ${document.getElementById('phero').value}
Appearance: ${document.getElementById('look').value}
Personality: ${document.getElementById('character').value}
Identity: ${document.getElementById('identity').value}`;
// Call copy
navigator.clipboard.writeText(text).then(()=>{
alert('✅ Character info copied!');
}).catch(()=>{
alert('❌ Copy failed, please copy manually');
})
}
// Clear all inputs
function clearAll(){
document.getElementById('name').value = '';
document.getElementById('sex1').value = '';
document.getElementById('sex2').value = '';
document.getElementById('age').value = '';
document.getElementById('spiritAnimal').value = '';
document.getElementById('spiritPower').value = '';
document.getElementById('phero').value = '';
document.getElementById('look').value = '';
document.getElementById('character').value = '';
document.getElementById('identity').value = '';
}
</script>
</body>
</html>
```Faça login para continuar a conversa.