File size: 2,962 Bytes
2725a85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <!-- Include Bootstrap CSS for styling (optional) -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>

        body {

            background-color: #f0f0f0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }

        .login-container {

            max-width: 400px;

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 0 10px rgba(0,0,0,0.1);

        }

        .login-container h2 {

            text-align: center;

            margin-bottom: 20px;

        }

        .form-group {

            margin-bottom: 20px;

        }

        .form-group label {

            font-weight: bold;

        }

        .form-group input {

            width: 100%;

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 4px;

            box-sizing: border-box;

        }

        .form-group button {

            width: 100%;

            padding: 10px;

            background-color: #007bff;

            color: #fff;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }

        .form-group button:hover {

            background-color: #0056b3;

        }

    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>

    <!-- Script for handling form submission -->
    <script>

        document.getElementById('loginForm').addEventListener('submit', function(event) {

            event.preventDefault();

            const username = document.getElementById('username').value;

            const password = document.getElementById('password').value;

            

            // Example validation (replace with your own logic)

            if (username === 'admin' && password === 'password') {

                // Redirect to main application page

                window.location.href = 'chatbot.html';

            } else {

                alert('Invalid username or password. Please try again.');

            }

        });

    </script>
</body>
</html>