<html lang=en><meta charset=viewport content="width=device-width, initial-scale=1.0"><title>Settings</title><script src=https://cdn.tailwindcss.com></script><link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css rel=stylesheet><style>.hidden{display:none}.no-select{user-select:none}.no-scroll{overflow:hidden}.alert{position:fixed;bottom:20px;left:20px;background-color:#323232;color:#fff;padding:10px 20px;border-radius:5px;display:flex;align-items:center;opacity:0;transition:opacity .5s,transform .5s;transform:translateY(20px)}.alert.show{opacity:1;transform:translateY(0)}.alert.success{background-color:#4caf50}.alert.error{background-color:#f44336}.alert i{margin-right:10px}</style><body class="bg-gray-900 h-screen no-scroll no-select text-white"><div class="flex h-full"><div class="p-4 bg-gray-800 w-1/5"id=sidebar><div class=mb-6><ul class=space-y-4><li class="flex items-center space-x-2"><i class="fas fa-tachometer-alt"></i> <a class=hover:text-gray-400 href=panel.html>Dashboard</a><li class="flex items-center space-x-2"><i class="fas fa-folder"></i> <a class=hover:text-gray-400 href=files.html>Files</a><li class="flex items-center space-x-2"><i class="fas fa-cog"></i> <a class=hover:text-gray-400 href=settings.html>Settings</a></ul></div></div><div class="p-4 flex-1 overflow-hidden"><div class="flex items-center justify-between mb-6"><div class="flex items-center space-x-2"><span class="text-xl font-bold">TownZone Hosting</span> <i class="fas fa-server text-xl"></i></div><div class="flex items-center bg-gray-800 px-4 py-2 rounded text-white"id=serverStatus><div class="bg-green-500 h-3 mr-2 rounded-full w-3"></div><span>RUNNING</span></div></div><div id=settingsContent><div class="rounded bg-gray-800 h-full overflow-y-auto p-4"><h3 class="font-semibold mb-4 text-lg">Settings</h3><div class=space-y-4><div><label class="block font-medium text-sm"for=background-image>Background Image URL</label> <input class="rounded text-white bg-gray-700 block mt-1 p-2 w-full"id=background-image placeholder="Enter image URL"></div><div class="flex mt-4 space-x-4"><button class="rounded text-white px-4 py-2 bg-blue-600 hover:bg-blue-700"id=saveBackgroundBtn>Save</button> <button class="rounded text-white px-4 py-2 bg-red-600 hover:bg-red-700"id=resetBackgroundBtn>Reset</button></div></div></div></div></div></div><div class=alert id=alert><i class=fas></i> <span id=alertMessage></span></div><script>function showAlert(message, type) {
            const alertBox = document.getElementById('alert');
            const alertMessage = document.getElementById('alertMessage');
            const alertIcon = alertBox.querySelector('i');

            alertMessage.textContent = message;
            alertBox.className = `alert show ${type}`;
            alertIcon.className = type === 'success' ? 'fas fa-check-circle' : 'fas fa-times-circle';

            setTimeout(() => {
                alertBox.classList.remove('show');
            }, 3000);
        }

        document.getElementById('saveBackgroundBtn').addEventListener('click', async function() {
            const imageUrl = document.getElementById('background-image').value;
            try {
                const response = await fetch('http://10.147.19.217:3000/background', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url: imageUrl })
                });
                if (response.ok) {
                    showAlert('Background image saved successfully!', 'success');
                    document.body.style.backgroundImage = `url(${imageUrl})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.getElementById('sidebar').style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                } else {
                    showAlert('Failed to save background image.', 'error');
                }
            } catch (error) {
                console.error('Error saving background image:', error);
                showAlert('Error saving background image.', 'error');
            }
        });

        document.getElementById('resetBackgroundBtn').addEventListener('click', async function() {
            try {
                const response = await fetch('http://10.147.19.217:3000/background', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ url: '' })
                });
                if (response.ok) {
                    showAlert('Background image reset successfully!', 'success');
                    document.body.style.backgroundImage = '';
                    document.getElementById('sidebar').style.backgroundColor = '';
                } else {
                    showAlert('Failed to reset background image.', 'error');
                }
            } catch (error) {
                console.error('Error resetting background image:', error);
                showAlert('Error resetting background image.', 'error');
            }
        });

        async function loadBackgroundImage() {
            try {
                const response = await fetch('http://10.147.19.217:3000/background');
                const data = await response.json();
                if (data.url) {
                    document.body.style.backgroundImage = `url(${data.url})`;
                    document.body.style.backgroundSize = 'cover';
                    document.body.style.backgroundRepeat = 'no-repeat';
                    document.getElementById('sidebar').style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                }
            } catch (error) {
                console.error('Error loading background image:', error);
            }
        }

        async function fetchServerStatus() {
            try {
                const response = await fetch('http://10.147.19.217:3000/status/townzone');
                const data = await response.json();
                const statusElement = document.getElementById('serverStatus');
                if (data.status === 'online') {
                    statusElement.innerHTML = '<div class="bg-green-500 h-3 w-3 rounded-full mr-2"></div><span>RUNNING</span>';
                } else {
                    statusElement.innerHTML = '<div class="bg-red-500 h-3 w-3 rounded-full mr-2"></div><span>OFFLINE</span>';
                }
            } catch (error) {
                console.error('Error fetching server status:', error);
            }
        }

        loadBackgroundImage();
        fetchServerStatus();
        setInterval(fetchServerStatus, 1000);
        document.addEventListener('DOMContentLoaded', function() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = 'login.html';
            }
        });</script>