<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>フットサル交代管理</title>

    <style>

        body { font-family: sans-serif; padding: 15px; background: #f0f2f5; }

        .player { background: white; padding: 15px; margin: 10px 0; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

        .in { border-left: 8px solid #4caf50; }

        .out { border-left: 8px solid #f44336; }

        button { padding: 15px 30px; cursor: pointer; font-size: 18px; border-radius: 8px; border: none; font-weight: bold; }

        .btn-in { background: #4caf50; color: white; }

        .btn-out { background: #f44336; color: white; }

    </style>

</head>

<body>

    <h3>出場時間管理 (10人)</h3>

    <div id="app"></div>


    <script>

        let players = Array.from({length: 10}, (_, i) => ({ 

            name: `選手${i+1}`, status: "bench", start: 0, total: 0 

        }));


        function update() {

            const app = document.getElementById('app');

            app.innerHTML = '';

            const now = Math.floor(Date.now() / 1000);


            players.forEach((p, i) => {

                let currentSession = p.status === 'in' ? (now - p.start) : 0;

                let total = p.total + currentSession;

                

                const div = document.createElement('div');

                div.className = `player ${p.status === 'in' ? 'in' : 'out'}`;

                div.innerHTML = `

                    <div><strong>${p.name}</strong><br>

                    累計: ${Math.floor(total/60)}分${total%60}秒</div>

                    <button class="${p.status === 'bench' ? 'btn-in' : 'btn-out'}" onclick="toggle(${i})">

                        ${p.status === 'bench' ? 'IN' : 'OUT'}

                    </button>

                `;

                app.appendChild(div);

            });

        }


        function toggle(i) {

            const now = Math.floor(Date.now() / 1000);

            if (players[i].status === 'bench') {

                players[i].status = 'in';

                players[i].start = now;

            } else {

                players[i].total += (now - players[i].start);

                players[i].status = 'bench';

            }

            update();

        }

        setInterval(update, 1000);

        update();

    </script>

</body>

</html>