真心话大冒险｜随机抽人

<!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: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #E6F2FB; /* 浅蓝色背景 */
            color: #4A4A4A; /* 灰色文本 */
            min-height: 100vh;
            padding: 24px;
        }
        .container {
            max-width: 620px;
            margin: 0 auto;
        }
        .card {
            background-color: #F8EFE4; /* 杏色卡片底色 */
            border-radius: 20px;
            padding: 32px;
            box-shadow: 0 6px 18px rgba(80,80,80,0.12);
            margin-bottom:20px;
        }
        h1 {
            text-align: center;
            color:#596877;
            margin-bottom:24px;
            font-size:28px;
        }
        .input-area {
            margin-bottom:20px;
        }
        label{
            display:block;
            margin-bottom:8px;
            font-weight:500;
        }
        textarea{
            width:100%;
            border:1px solid #C8D8E6;
            border-radius:12px;
            padding:14px;
            background:#fff;
            resize:none;
            height:100px;
            font-size:16px;
            color:#4A4A4A;
        }
        .tip{
            font-size:13px;
            color:#777;
            margin-top:6px;
        }
        .btn-group{
            display:flex;
            gap:14px;
            flex-wrap:wrap;
            margin:20px 0;
        }
        button{
            flex:1;
            min-width:140px;
            padding:14px;
            border:none;
            border-radius:12px;
            font-size:17px;
            cursor:pointer;
            transition: all 0.25s;
        }
        #drawBtn{
            background:#94C7ED;
            color:#2c3e50;
            font-weight:bold;
        }
        #drawBtn:hover{
            background:#7cb9e8;
        }
        #resetBtn{
            background:#D8DADC;
            color:#444;
        }
        #resetBtn:hover{
            background:#c5c7ca;
        }
        .result-box{
            margin-top:24px;
            text-align:center;
            min-height:140px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .selected-name{
            font-size:34px;
            font-weight:bold;
            color:#4A6880;
            margin-bottom:16px;
        }
        .task-text{
            font-size:20px;
            color:#555;
        }
        .shake{
            animation: shake 0.7s ease-in-out;
        }
        @keyframes shake{
            0%,100%{transform:scale(1)}
            50%{transform:scale(1.06)}
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h1>真心话大冒险 · 随机抽人</h1>
            <div class="input-area">
                <label>参与人员名单（一行一个名字）</label>
                <textarea id="nameInput" placeholder="张三
李四
王五
赵六"></textarea>
                <div class="tip">每个人单独占一行，输入完再开始抽取</div>
            </div>
            <div class="btn-group">
                <button id="drawBtn">🎲 随机抽取 + 任务</button>
                <button id="resetBtn">🔄 重置</button>
            </div>
            <div class="result-box" id="resultBox">
                <div class="task-text">点击上方按钮开始抽取</div>
            </div>
        </div>
    </div>
<script>
    //真心话库
    const truthList = [
        "你最近一次偷偷哭是什么时候？",
        "说出你做过最社死的一件事",
        "你暗恋过在场的谁吗？",
        "你最后悔的一件小事是什么？",
        "手机里最近一条聊天记录发给大家看",
        "你最想拥有什么超能力？",
        "评价在场每个人的第一印象",
        "说一个别人不知道你的小秘密"
    ]
    //大冒险库
    const dareList = [
        "模仿猩猩走路10秒",
        "给最近聊天的第3个人发一句：我想你了",
        "大声唱一段儿歌",
        "对窗外大喊：我超棒！",
        "用撒娇语气说三句话",
        "原地做10个深蹲",
        "夸在场每一个人",
        "做一个最丑鬼脸保持5秒"
    ]
    const nameInput = document.getElementById('nameInput')
    const drawBtn = document.getElementById('drawBtn')
    const resetBtn = document.getElementById('resetBtn')
    const resultBox = document.getElementById('resultBox')
    drawBtn.addEventListener('click',()=>{
        const rawText = nameInput.value.trim()
        if(!rawText){
            resultBox.innerHTML = `<div class="task-text">请先输入参与名单！</div>`
            return
        }
        let names = rawText.split('\n').map(item=>item.trim()).filter(n=>n!=='')
        //随机选人
        const pickedName = names[Math.floor(Math.random()*names.length)]
        //随机真心话/大冒险
        const isTruth = Math.random()>0.5
        let task
        if(isTruth){
            task = truthList[Math.floor(Math.random()*truthList.length)]
        }else{
            task = dareList[Math.floor(Math.random()*dareList.length)]
        }
        resultBox.classList.add('shake')
        resultBox.innerHTML = `
            <div class="selected-name">🎉 ${pickedName}</div>
            <div class="task-text">${isTruth?"【真心话】":"【大冒险】"}${task}</div>
        `
        setTimeout(()=>{
            resultBox.classList.remove('shake')
        },700)
    })
    resetBtn.addEventListener('click',()=>{
        nameInput.value = ""
        resultBox.innerHTML = `<div class="task-text">点击上方按钮开始抽取</div>`
    })
</script>
</body>
</html>