수선 시뮬레이터 n+1
```html
<!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>
*{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif;}
body{background:transparent;padding:15px;}
/* 외부 컨테이너 */
.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);
}
/* 각 행의 입력 항목 */
.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;}
/* 버튼 영역 */
.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>이름</label>
<input type="text" id="name" placeholder="이름을 입력하세요">
</div>
<div class="item">
<label>성별</label><input type="text" id="sex1" placeholder="예：남 / 여 / 양성">
</div>
<div class="item">
<label>종족</label>
<input type="text" id="sex2" placeholder="예：인간/요괴/마/선인/신/귀신">
</div>
<div class="item">
<label>나이（≥18）</label>
<input type="number" id="age" min="18" placeholder="18 이상의 숫자를 입력하세요">
</div>
<div class="item">
<label>영근</label>
<input type="text" id="spiritAnimal" placeholder="영근을 입력하세요">
</div>
<div class="item">
<label>수위</label>
<input type="text" id="spiritPower" placeholder="입력하세요">
</div>
<div class="item">
<label>외모</label>
<input type="text" id="phero" placeholder=“작성하세요”>
</div>
<div class="item">
<label>성격</label>
<textarea id="look" placeholder="자유 작성"></textarea>
</div>
<div class="item">
<label>신분</label>
<textarea id="character" placeholder="아무거나 쓰되 세계관에서 벗어나지 마세요"></textarea>
</div>
<div class="item">
<label>소속 문파</label>
<textarea id="identity" placeholder="가입하고 싶은 문파를 쓰세요"></textarea>
</div>
<div class="btn-wrap">
<button class="copy-btn"onclick="copyAll()">한 번에 복사</button>
<button class="clear-btn" onclick="clearAll()">한 번에 지우기</button>
</div>
</div>
<script>
// 모든 내용을 한 번에 이어 붙여 복사function copyAll(){
let text = `이름：${document.getElementById('name').value}
1차 성별：${document.getElementById('sex1').value}
2차 성별：${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}`;
// 복사 호출
navigator.clipboard.writeText(text).then(()=>{
alert('✅ 캐릭터 정보가 복사되었습니다!');
}).catch(()=>{
alert('❌ 복사 실패, 직접 복사해 주세요');
})
}
// 모든 입력을 한 번에 지우기
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>
```대화를 계속하려면 로그인해 주세요
Page failed to load