Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIT Mesra Transport Management System</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../css/index.css">

    <script type="module" src="../js/login.js"></script>
    <script src="../js/header-footer.js"></script>
    <script src="../js/progress-bar.js"></script>
</head>

<body id="home-page">


    <my-header></my-header>

    <main class="container">


                <div id="description">
                    <h2>Welcome to BIT Mesra Transport Management System</h2>
                    <p>
                        The BIT Mesra Transport Management System is designed to streamline and simplify the process for
                        students, staff, employees, and administrators.
                    </p>

                    <h3>Features:</h3>
                    <ul>
                        <li>View bus routes and timings</li>
                        <li>Check bus capacity</li>
                        <li>Track buses in real-time</li>
                        <li>Book transport vehicles (Faulty only)</li>
                        <li>Apply for leaves (Employees only)</li>
                    </ul>

                </div>
            

                <div id="login-container">

                    <h2 class="login-h2">Login</h2>
                    <form id="login-form">
                        <label for="email">Email:</label>
                        <input type="email" id="login-email" name="email" placeholder="Enter your email" required>

                        <label for="password">Password:</label>
                        <input type="password" id="login-password" name="password" placeholder="Enter your password"
                            required>

                        <div id="forgot-password">
                            <a href="#">Forgot Password?</a>
                        </div>

                        <input type="submit" value="Login">

                    </form>
                    <my-progress-bar></my-progress-bar>
                </div>
            
        
        <div id="signout-container">
            <div id="user-info">
                <!-- Display user information, replace this with actual user data -->
                <p>Name</p>
                <p>Email</p>
            </div>


            <button id="logout-button">Sign Out</button>
        </div>


    </main>

    <my-footer></my-footer>


</body>


</html>