hyperlogic_ai_chatbot/test.html at main · sudo-de/hyperlogic_ai_chatbot · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 600px;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        .status {
            padding: 10px 20px;
            border-radius: 10px;
            margin: 10px 0;
            font-weight: bold;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 HyperLogic AI ChatBot - System Test</h1>

        <div id="backend-status" class="status">Testing Backend...</div>
        <div id="frontend-status" class="status">Testing Frontend...</div>

        <button onclick="testBackend()">Test Backend API</button>
        <button onclick="testFrontend()">Test Frontend</button>
        <button onclick="openApp()">Open AI ChatBot</button>

        <div id="results"></div>
    </div>

    <script>
        async function testBackend() {
            const statusEl = document.getElementById('backend-status');
            const resultsEl = document.getElementById('results');

            try {
                const response = await fetch('http://localhost:5000/api/health');
                const data = await response.json();

                if (data.status === 'OK') {
                    statusEl.textContent = '✅ Backend API: Working';
                    statusEl.className = 'status success';
                    resultsEl.innerHTML += '<p>✅ Backend is running and responding correctly</p>';
                } else {
                    throw new Error('Backend not responding correctly');
                }
            } catch (error) {
                statusEl.textContent = '❌ Backend API: Error';
                statusEl.className = 'status error';
                resultsEl.innerHTML += '<p>❌ Backend error: ' + error.message + '</p>';
            }
        }

        function testFrontend() {
            const statusEl = document.getElementById('frontend-status');
            const resultsEl = document.getElementById('results');

            try {
                // Test if we can access the React app
                fetch('http://localhost:3000')
                    .then(response => {
                        if (response.ok) {
                            statusEl.textContent = '✅ Frontend: Working';
                            statusEl.className = 'status success';
                            resultsEl.innerHTML += '<p>✅ Frontend is serving content</p>';
                        } else {
                            throw new Error('Frontend not responding');
                        }
                    })
                    .catch(error => {
                        statusEl.textContent = '❌ Frontend: Error';
                        statusEl.className = 'status error';
                        resultsEl.innerHTML += '<p>❌ Frontend error: ' + error.message + '</p>';
                    });
            } catch (error) {
                statusEl.textContent = '❌ Frontend: Error';
                statusEl.className = 'status error';
                resultsEl.innerHTML += '<p>❌ Frontend error: ' + error.message + '</p>';
            }
        }

        function openApp() {
            window.open('http://localhost:3000', '_blank');
        }

        // Auto-test on load
        window.onload = function() {
            testBackend();
            testFrontend();
        };
    </script>
</body>
</html>