test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Page - Unixify</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        .status-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-top: 10px;
            background-color: #f5f5f5;
        }
        
        button {
            padding: 8px 16px;
            background-color: #0d6efd;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #0a58ca;
        }
    </style>
</head>
<body>
    <h1>Unixify Template Test</h1>
    
    <p>This page will check what's happening with the templates and static files.</p>
    
    <div>
        <button onclick="checkMainApp()">Check Main App</button>
        <button onclick="checkCaddyApp()">Check Caddy App</button>
    </div>
    
    <div id="mainStatus" class="status-box">
        <h3>Main App Status</h3>
        <p>Click the button above to check.</p>
    </div>
    
    <div id="caddyStatus" class="status-box">
        <h3>Caddy App Status</h3>
        <p>Click the button above to check.</p>
    </div>
    
    <script>
        function checkMainApp() {
            const resultDiv = document.getElementById('mainStatus');
            resultDiv.innerHTML = '<h3>Main App Status</h3><p>Checking...</p>';
            
            fetch('http://localhost:8080/', { mode: 'no-cors' })
                .then(() => {
                    resultDiv.innerHTML = `
                        <h3>Main App Status</h3>
                        <p>Main app is reachable.</p>
                        <p>To manually check:</p>
                        <ul>
                            <li>Visit <a href="http://localhost:8080" target="_blank">http://localhost:8080</a></li>
                            <li>Check if theme button is visible in top-right</li>
                            <li>Check if footer says "UNIX Team Management System"</li>
                        </ul>
                    `;
                })
                .catch(error => {
                    resultDiv.innerHTML = `
                        <h3>Main App Status</h3>
                        <p>Error: ${error.message}</p>
                        <p>The main app might not be running or is not accessible.</p>
                    `;
                });
        }
        
        function checkCaddyApp() {
            const resultDiv = document.getElementById('caddyStatus');
            resultDiv.innerHTML = '<h3>Caddy App Status</h3><p>Checking...</p>';
            
            fetch('http://localhost:8081/', { mode: 'no-cors' })
                .then(() => {
                    resultDiv.innerHTML = `
                        <h3>Caddy App Status</h3>
                        <p>Caddy app is reachable.</p>
                        <p>To manually check:</p>
                        <ul>
                            <li>Visit <a href="http://localhost:8081" target="_blank">http://localhost:8081</a></li>
                            <li>Check if theme button is visible in top-right</li>
                            <li>Check if footer says "UNIX Team Management System"</li>
                        </ul>
                    `;
                })
                .catch(error => {
                    resultDiv.innerHTML = `
                        <h3>Caddy App Status</h3>
                        <p>Error: ${error.message}</p>
                        <p>The Caddy app might not be running or is not accessible.</p>
                    `;
                });
        }
    </script>
</body>
</html>