SOURCE

<!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: system-ui, sans-serif;
        }
        body {
            background: #1f2937;
            color: #fff;
            padding: 20px;
            max-width: 700px;
            margin: 0 auto;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom:20px;
        }
        h1 {
            font-size: 22px;
        }
        button {
            border: none;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-size:14px;
        }
        .add-btn {
            background: #3b82f6;
            color:white;
        }
        .account-card {
            background: #374151;
            padding:16px;
            border-radius:12px;
            margin-bottom:14px;
        }
        .top-row {
            display:flex;
            justify-content: space-between;
            align-items:center;
            margin-bottom:12px;
        }
        .name-wrap {
            display:flex;
            gap:6px;
            align-items:center;
        }
        .name-input {
            background:#4b5563;
            border:1px solid #6b7280;
            color:white;
            padding:4px 8px;
            border-radius:6px;
            font-size:16px;
            width:140px;
        }
        .count-text {
            font-size:26px;
            font-weight:bold;
            color:#fbbf24;
            margin:12px 0;
        }
        .btn-group {
            display:flex;
            gap:8px;
        }
        .draw-btn {
            background:#ef4444;
            color:white;
            flex:1;
        }
        .reset-btn {
            background:#10b981;
            color:white;
        }
        .del-btn {
            background:#6b7280;
            color:white;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>保底计数器（初始保底：11）</h1>
        <button class="add-btn" onclick="addAccount()">+ 新建账号</button>
    </div>
    <div id="container"></div>

    <script>
        let accountList = JSON.parse(localStorage.getItem('baodiData')) || [];
        const INIT_NUM = 11;

        function saveData() {
            localStorage.setItem('baodiData', JSON.stringify(accountList));
        }

        function render() {
            const box = document.getElementById('container');
            box.innerHTML = '';
            accountList.forEach((acc, idx) => {
                const div = document.createElement('div');
                div.className = 'account-card';
                div.innerHTML = `
                    <div class="top-row">
                        <div class="name-wrap">
                            <input class="name-input" value="${acc.name}" onchange="renameAcc(${idx},this.value)">
                        </div>
                        <button class="del-btn" onclick="delAcc(${idx})">删除</button>
                    </div>
                    <div class="count-text">剩余保底：${acc.count}</div>
                    <div class="btn-group">
                        <button class="draw-btn" onclick="drawOnce(${idx})" ${acc.count <=0 ? 'disabled style="opacity:0.4;cursor:not-allowed"' : ''}>抽一次（-1）</button>
                        <button class="reset-btn" onclick="resetAcc(${idx})">重置保底</button>
                    </div>
                `;
                box.appendChild(div);
            })
        }

        function addAccount() {
            accountList.push({
                name: `账号${accountList.length+1}`,
                count: INIT_NUM
            })
            saveData();
            render();
        }
        function renameAcc(index, newName){
            accountList[index].name = newName;
            saveData();
        }
        function drawOnce(index){
            if(accountList[index].count > 0){
                accountList[index].count -=1;
                saveData();
                render();
            }
        }
        function resetAcc(index){
            accountList[index].count = INIT_NUM;
            saveData();
            render();
        }
        // 去掉confirm弹窗，点删除直接删掉
        function delAcc(index){
            accountList.splice(index,1);
            saveData();
            render();
        }

        render();
    </script>
</body>
</html>