group-booking 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .scroll-container {
            width: 100%;
            height: 70px;
            overflow: hidden;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            position: relative;
        }

        #details {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            transition: top 0.5s;
        }

        .entry {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            height: 20px;
        }

        .name {
            font-weight: bold;
            margin-left: 20px;
        }

        .time {
            color: #777;
        }

        .participate {
            color: #3498db;
            margin-right: 20px;
        }

        #group-count {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="group-count"><span id="group-num">0</span> people have joined and <span id="people-needed">30</span> more need to get 30 for a 15% discount</div>
<div class="scroll-container" id="scroll-container">
    <div id="details">
    </div>
</div>

<script>
    async function groupUsers() {
        try {
            const response = await fetch('https://43.139.175.86/groupUsers');
            const apiResponse = await response.json();
            console.log(apiResponse);
            return apiResponse;
        } catch (error) {
            console.error('get data failed:', error);
            return { participants: [] };
        }
    }

    document.addEventListener('DOMContentLoaded', async () => {
        const apiResponse = await groupUsers();
        const detailsElement = document.getElementById('details');
        const scrollContainer = document.getElementById('scroll-container');

        // 更新参与人数
        const participantCount = apiResponse.participants.length;
        const groupNumElement = document.getElementById('group-num');
        const peopleNeededElement = document.getElementById('people-needed');
        groupNumElement.textContent = participantCount;
        peopleNeededElement.textContent = Math.max(30 - participantCount, 0);

        apiResponse.participants.forEach(participant => {
            const entryDiv = document.createElement('div');
            entryDiv.className = 'entry';

            const nameSpan = document.createElement('span');
            nameSpan.className = 'name';
            nameSpan.textContent = participant.name;

            const timeSpan = document.createElement('span');
            timeSpan.className = 'time';
            timeSpan.textContent = participant.time;

            const participate = document.createElement("span");
            participate.className = 'participate';
            participate.textContent = 'participated';

            entryDiv.appendChild(nameSpan);
            entryDiv.appendChild(timeSpan);
            entryDiv.appendChild(participate);

            detailsElement.appendChild(entryDiv);
        });

        const scrollInterval = 2000;
        const itemHeight = 30;
        const totalHeight = apiResponse.participants.length * itemHeight;
        const containerHeight = scrollContainer.clientHeight;
        const maxScrollTop = totalHeight - containerHeight;
        let currentIndex = 0;

        function scroll() {
            if (currentIndex >= maxScrollTop) {
                currentIndex = 0;
            } else {
                currentIndex += itemHeight * 2;
            }

            detailsElement.style.top = `-${currentIndex}px`;
        }

        setInterval(scroll, scrollInterval);
    });
</script>
</body>
</html>