https://paul-ey4.pages.dev/login

1
2    <!DOCTYPE html>
3    <html lang="en">
4    <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>User Login</title>
8    <style>
9
10        html, body { height: 100%; margin: 0; }
11        body {
12            font-family: system-ui;
13            background-color: #f9f9f9;
14            position: relative;
15            overflow: hidden;
16        }
17        .container {
18            position: absolute;
19            top: 50%;
20            left: 50%;
21            transform: translate(-50%, -50%);
22            width: 90%;
23        }
24        h1 { font-size: 2.5rem; text-align: center; color: #09639f; margin: 0 auto 30px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); }        
25        h2 {text-align: center;}
26        .form-container {
27            background: #f9f9f9;
28            border: 1px solid #eaeaea;
29            border-radius: 10px;
30            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
31            padding: 20px;
32        }
33        .form-control { margin-bottom: 15px; display: flex; align-items: center; }
34        label {
35            display: block;
36            margin-bottom: 5px;
37            padding-right: 20px;
38            font-size: 110%;
39            font-weight: 600;
40            color: #333;
41        }
42        input[type="text"],
43        input[type="password"] {
44            width: 100%;
45            padding: 10px;
46            border: 1px solid #ddd;
47            border-radius: 5px;
48            color: #333;
49        }
50        button {
51            display: block;
52            width: 100%;
53            padding: 10px;
54            font-size: 16px;
55            font-weight: 600;
56            border: none;
57            border-radius: 5px;
58            color: #fff;
59            background-color: #09639f;
60            cursor: pointer;
61            transition: background-color 0.3s ease;
62        }
63        button:hover {background-color: #2980b9;}
64        @media only screen and (min-width: 768px) {
65            .container { width: 30%; }
66        }
67    </style>
68    </head>
69    <body>
70        <div class="container">
71            <h1>BPB Panel <span style="font-size: smaller;">2.3.5</span> 💦</h1>
72            <div class="form-container">
73                <h2>User Login</h2>
74                <form id="loginForm">
75                    <div class="form-control">
76                        <label for="password">Password</label>
77                        <input type="password" id="password" name="password" required>
78                    </div>
79                    <div id="passwordError" style="color: red; margin-bottom: 10px;"></div>
80                    <button type="submit" class="button">Login</button>
81                </form>
82            </div>
83        </div>
84    

84<script>
85        document.getElementById('loginForm').addEventListener('submit', async (event) => {
86            event.preventDefault();
87            const password = document.getElementById('password').value;
88
89            try {
90                const response = await fetch('/login', {
91                    method: 'POST',
92                    headers: {
93                        'Content-Type': 'text/plain'
94                    },
95                    body: password
96                });
97            
98                if (response.ok) {
99                    window.location.href = '/panel';
100                } else {
101                    passwordError.textContent = '⚠️ Wrong Password!';
102                    const errorMessage = await response.text();
103                    console.error('Login failed:', errorMessage);
104                }
105            } catch (error) {
106                console.error('Error during login:', error);
107            }
108        });
109    </script>

109
110    </body>
111    </html>