maxpromer · October 31, 2025 15:56
diff --git a/index.h b/index.h
 const char *index_html = R"rawliteral(
 <!DOCTYPE html>
 <html lang="th">
 <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;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            color: white;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            width: 100%;
            max-width: 1200px;
        }

        .queue-box {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .queue-box:hover {
            transform: translateY(-5px);
        }

        .queue-title {
            font-size: 1.5em;
            color: #667eea;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .queue-display {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-size: 4em;
            font-weight: bold;
            padding: 40px 60px;
            border-radius: 15px;
            margin-bottom: 30px;
            min-width: 200px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .button-group {
            display: flex;
            gap: 15px;
            width: 100%;
        }

        button {
            flex: 1;
            padding: 15px 25px;
            font-size: 1.1em;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            color: white;
        }

        .btn-next {
            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
        }

        .btn-next:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(17, 153, 142, 0.4);
        }

        .btn-prev {
            background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
        }

        .btn-prev:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(238, 9, 121, 0.4);
        }

        button:active {
            transform: scale(0.98);
        }

        @media (max-width: 768px) {
            h1 {
                font-size: 1.8em;
            }

            .queue-display {
                font-size: 3em;
                padding: 30px 40px;
            }

            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
 </head>
 <body>
    <h1>🎫 ระบบเรียกคิว</h1>
    
    <div class="container">
        <div class="queue-box">
            <div class="queue-title">ช่อง 1</div>
            <div class="queue-display" id="queue1">---</div>
            <div class="button-group">
                <button class="btn-next" onclick="nextQueue(1)">คิวถัดไป ▶</button>
                <button class="btn-prev" onclick="prevQueue(1)">◀ ย้อนคิว</button>
            </div>
        </div>

        <div class="queue-box">
            <div class="queue-title">ช่อง 2</div>
            <div class="queue-display" id="queue2">---</div>
            <div class="button-group">
                <button class="btn-next" onclick="nextQueue(2)">คิวถัดไป ▶</button>
                <button class="btn-prev" onclick="prevQueue(2)">◀ ย้อนคิว</button>
            </div>
        </div>

        <div class="queue-box">
            <div class="queue-title">ช่อง 3</div>
            <div class="queue-display" id="queue3">---</div>
            <div class="button-group">
                <button class="btn-next" onclick="nextQueue(3)">คิวถัดไป ▶</button>
                <button class="btn-prev" onclick="prevQueue(3)">◀ ย้อนคิว</button>
            </div>
        </div>
    </div>

    <script>
        // เก็บค่าคิวปัจจุบันของแต่ละช่อง
        let queues = {
            1: 1,
            2: 1,
            3: 1
        };

        function formatQueue(num) {
            return String(num).padStart(3, '0');
        }

        // โหลดค่าคิวปัจจุบันจาก API
        async function loadCurrentQueues() {
            try {
                const response = await fetch('/current');
                if (response.ok) {
                    const data = await response.json();
                    // data เป็น array [queue1, queue2, queue3]
                    queues[1] = data[0];
                    queues[2] = data[1];
                    queues[3] = data[2];
                    
                    // อัพเดท UI
                    updateDisplay(1);
                    updateDisplay(2);
                    updateDisplay(3);
                }
            } catch (error) {
                console.error('Error loading queues:', error);
            }
        }

        async function nextQueue(channel) {
            try {
                const response = await fetch(`/control/${channel}/next`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    queues[channel]++;
                    if (queues[channel] > 999) {
                        queues[channel] = 1;
                    }
                    updateDisplay(channel);
                }
            } catch (error) {
                console.error('Error sending next queue:', error);
            }
        }

        async function prevQueue(channel) {
            try {
                const response = await fetch(`/control/${channel}/back`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    queues[channel]--;
                    if (queues[channel] < 1) {
                        queues[channel] = 999;
                    }
                    updateDisplay(channel);
                }
            } catch (error) {
                console.error('Error sending back queue:', error);
            }
        }

        function updateDisplay(channel) {
            const display = document.getElementById('queue' + channel);
            display.textContent = formatQueue(queues[channel]);
            
            // เพิ่มเอฟเฟกต์เมื่อเปลี่ยนคิว
            display.style.transform = 'scale(1.1)';
            setTimeout(() => {
                display.style.transform = 'scale(1)';
            }, 200);
        }

        // เพิ่ม transition สำหรับเอฟเฟกต์
        document.querySelectorAll('.queue-display').forEach(display => {
            display.style.transition = 'transform 0.2s ease';
        });

        // โหลดค่าคิวเมื่อเปิดหน้าเว็บ
        window.addEventListener('load', loadCurrentQueues);
    </script>
 </body>
 </html>
 )rawliteral";
	const char *index_html = R"rawliteral(
	<!DOCTYPE html>
	<html lang="th">
	<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;
	}

	body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	}

	h1 {
	color: white;
	text-align: center;
	margin-bottom: 30px;
	font-size: 2.5em;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
	}

	.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	width: 100%;
	max-width: 1200px;
	}

	.queue-box {
	background: white;
	border-radius: 20px;
	padding: 30px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease;
	}

	.queue-box:hover {
	transform: translateY(-5px);
	}

	.queue-title {
	font-size: 1.5em;
	color: #667eea;
	margin-bottom: 20px;
	font-weight: bold;
	}

	.queue-display {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	font-size: 4em;
	font-weight: bold;
	padding: 40px 60px;
	border-radius: 15px;
	margin-bottom: 30px;
	min-width: 200px;
	text-align: center;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
	}

	.button-group {
	display: flex;
	gap: 15px;
	width: 100%;
	}

	button {
	flex: 1;
	padding: 15px 25px;
	font-size: 1.1em;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-weight: bold;
	transition: all 0.3s ease;
	color: white;
	}

	.btn-next {
	background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
	}

	.btn-next:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 15px rgba(17, 153, 142, 0.4);
	}

	.btn-prev {
	background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
	}

	.btn-prev:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 15px rgba(238, 9, 121, 0.4);
	}

	button:active {
	transform: scale(0.98);
	}

	@media (max-width: 768px) {
	h1 {
	font-size: 1.8em;
	}

	.queue-display {
	font-size: 3em;
	padding: 30px 40px;
	}

	.container {
	grid-template-columns: 1fr;
	}
	}
	</style>
	</head>
	<body>
	<h1>🎫 ระบบเรียกคิว</h1>

	<div class="container">
	<div class="queue-box">
	<div class="queue-title">ช่อง 1</div>
	<div class="queue-display" id="queue1">---</div>
	<div class="button-group">
	<button class="btn-next" onclick="nextQueue(1)">คิวถัดไป ▶</button>
	<button class="btn-prev" onclick="prevQueue(1)">◀ ย้อนคิว</button>
	</div>
	</div>

	<div class="queue-box">
	<div class="queue-title">ช่อง 2</div>
	<div class="queue-display" id="queue2">---</div>
	<div class="button-group">
	<button class="btn-next" onclick="nextQueue(2)">คิวถัดไป ▶</button>
	<button class="btn-prev" onclick="prevQueue(2)">◀ ย้อนคิว</button>
	</div>
	</div>

	<div class="queue-box">
	<div class="queue-title">ช่อง 3</div>
	<div class="queue-display" id="queue3">---</div>
	<div class="button-group">
	<button class="btn-next" onclick="nextQueue(3)">คิวถัดไป ▶</button>
	<button class="btn-prev" onclick="prevQueue(3)">◀ ย้อนคิว</button>
	</div>
	</div>
	</div>

	<script>
	// เก็บค่าคิวปัจจุบันของแต่ละช่อง
	let queues = {
	1: 1,
	2: 1,
	3: 1
	};

	function formatQueue(num) {
	return String(num).padStart(3, '0');
	}

	// โหลดค่าคิวปัจจุบันจาก API
	async function loadCurrentQueues() {
	try {
	const response = await fetch('/current');
	if (response.ok) {
	const data = await response.json();
	// data เป็น array [queue1, queue2, queue3]
	queues[1] = data[0];
	queues[2] = data[1];
	queues[3] = data[2];

	// อัพเดท UI
	updateDisplay(1);
	updateDisplay(2);
	updateDisplay(3);
	}
	} catch (error) {
	console.error('Error loading queues:', error);
	}
	}

	async function nextQueue(channel) {
	try {
	const response = await fetch(`/control/${channel}/next`, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	}
	});

	if (response.ok) {
	queues[channel]++;
	if (queues[channel] > 999) {
	queues[channel] = 1;
	}
	updateDisplay(channel);
	}
	} catch (error) {
	console.error('Error sending next queue:', error);
	}
	}

	async function prevQueue(channel) {
	try {
	const response = await fetch(`/control/${channel}/back`, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	}
	});

	if (response.ok) {
	queues[channel]--;
	if (queues[channel] < 1) {
	queues[channel] = 999;
	}
	updateDisplay(channel);
	}
	} catch (error) {
	console.error('Error sending back queue:', error);
	}
	}

	function updateDisplay(channel) {
	const display = document.getElementById('queue' + channel);
	display.textContent = formatQueue(queues[channel]);

	// เพิ่มเอฟเฟกต์เมื่อเปลี่ยนคิว
	display.style.transform = 'scale(1.1)';
	setTimeout(() => {
	display.style.transform = 'scale(1)';
	}, 200);
	}

	// เพิ่ม transition สำหรับเอฟเฟกต์
	document.querySelectorAll('.queue-display').forEach(display => {
	display.style.transition = 'transform 0.2s ease';
	});

	// โหลดค่าคิวเมื่อเปิดหน้าเว็บ
	window.addEventListener('load', loadCurrentQueues);
	</script>
	</body>
	</html>
	)rawliteral";