Can you help me work on website, im using php,css,javascript and MySQL(PhpMyAdmin). So far i made 8 files, here is the code : 
1) index.php :

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Project</title>
        <meta name="description" content="AutoAD - это портал о автоматизации процесса работы учебного отдела ">
        <meta name="keywords" content="коллдеж, учебный отдел, автоматизация" />
        <link rel="stylesheet" href="css/style.css">
        <link rel="icon" href="assets/img/icons8-undertale-heart-120.ico" type="image/x-icon" sizes="120x120">
        <script src="index.js"></script>
    </head>
    <body>
        <div class="header">
            <h1 style="color: white;">AutoAD</h1>
            <h2 style="color: white;">Автоматизация работы учебного отдела</h2>
        </div>
        <div class="container">
            <h3>Log In</h3>
            <form method="post">
                <input type="text" name="username" placeholder="Username" required>
                <input type="password" name="password" placeholder="Password" required>
                <button type="submit">Log In</button>
            </form>
        </div>
        <div class="footer">
            <p style="color: white; position: absolute; bottom: 20px; right: 0; margin: 10px;">Жонисов Сунгат</p>
            <p style="color: white; position: absolute; bottom: 0; right: 30px; margin: 10px;">ВТР-3А</p>
        </div>
        <div class="overlay">
            <div class="error-container">
                <?php if (!empty($errors)): ?>
                    <?php foreach ($errors as $error): ?>
                        <div class="alert alert-danger" onclick=hideOverlay()><?php echo $error; ?></div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>
<?php
include 'database.php';
session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];
    
    if (empty($username) || empty($password)) {
        echo "<div class='alert alert-danger' onclick='hideOverlay()'>All fields are required</div>";
    } else {
        $stmt = $conn->prepare("SELECT * FROM users_data WHERE username = ? AND password=?");
        $stmt->bind_param("ss", $username , $password);
        $stmt->execute();
        $result = $stmt->get_result();
        if ($result->num_rows > 0) {
            $row = $result->fetch_assoc();
            if($row["id"] == 1){
                header("Location: admin_page/admin_page.php");
                exit();
            }
            else{
                header("Location: user_page/user_page.php");
                exit();
            }
        } else {
            echo "<div class='alert alert-danger' onclick='hideOverlay()'>Invalid username or password</div>";

        }
    }
}
?>


2) index.css :

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
body {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../assets/img/hero_1.jpg") no-repeat center center fixed;
  background-size: cover;
}

.header {
  /* make header transparent and with a dark purple color */
  background-color: rgba(75, 0, 130, 0.5);
  padding: 20px;
  text-align: center;
  margin: 0;
  width: 100%;
  /* make header stick to the device screen */
  position: fixed;
  top: 0;
  left: 0;
}

.header h1 a{
  color: white;
}
h1 {
  color: #333333;
  font-size: 36px;
}

h2 {
  color: #666666;
  font-size: 20px;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  border: 2px solid white;
  border-radius: 10px;
  padding: 20px;
  background-color: rgba(255, 192, 203, 0.5);
}

h3 {
  /* make h3 in different color */
  color: #ffcc00;
  text-align: center;
  /* make h3 bigger */
  font-size: 24px;
}

input {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  border-radius: 40px;
}

button {
  display: block;
  width: 30%;
  margin: 10px auto;
  /* make button same color as h3 */
  background-color: #ffcc00;
  border: none;
  font-weight: bold;
  border-radius: 40px;
  /* make button slightly bigger */
  padding: 10px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
}
.overlay .error-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

.error-container {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}


3)index.js : 

    if (errors.length > 0) {
        // show the overlay
        document.querySelector('.overlay').style.display = 'block';

        // hide the overlay after 2 seconds
        setTimeout(hideOverlay, 2000);
    }

    // function to hide the overlay
    function hideOverlay() {
        document.querySelector('.overlay').style.display = 'none';
    }

    // add an event listener to the overlay element to hide it when clicked
    document.querySelector('.overlay').addEventListener('click', hideOverlay);


4)database.php :

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "autoad";

    // create a connection object
    $conn = new mysqli($servername, $username, $password, $dbname);
    // check the connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }
?>

5)user_page.php :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Project(User Page)</title>
        <meta name="description" content="AutoAD -  это портал о автоматизации процесса работы учебного отдела ">
        <meta name="keywords" content="коллдеж, учебный отдел, автоматизация" />
        <link rel="stylesheet" href="../css/user_page.css">
        <link rel="icon" href="assets/img/icons8-undertale-heart-120.ico" type="image/x-icon" sizes="120x120">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="overlay">
            <div class="Welcome-container">
            <div class="alert alert-success Welcome-container">Welcome, <?php echo $_POST['username']; ?>!</div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="true" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse show" id="navbarColor02" style>
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                    </ul>
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-light" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
        <div class="container">
            <?php
            session_start();
            // include your database connection file
            include '../database.php';
            // query the database
            $stmt = $conn->prepare("SELECT * FROM users_data WHERE id=? AND username=? AND password=?");
            $stmt->bind_param("iss", $user_id, $username, $password);
            $stmt->execute();
            $result = $stmt->get_result();
            // display the results
            while ($row = $result->fetch_assoc()) {
                echo "<p>" . $row['username'] . "</p>";
                echo "<p>" . $row['password'] . "</p>";
                echo "<p>" . $row['id'] . "</p>";
            }
            ?>
        </div>
        <?php
            // start a session
            session_start();

            // include your database connection file
            include '../database.php';

            // get the user's ID from the session

            if(isset($user_id['id'])){
                // do something with $your_array['id']
             } else {
                $user_id = $_SESSION['id'];
             }
            $user_id = $_SESSION['id'];

            // get the user's data from the database
            $stmt = $conn->prepare("SELECT * FROM users_data WHERE id=?");
            $stmt->bind_param("i", $user_id);
            $stmt->execute();
            $result = $stmt->get_result();

            if ($result->num_rows > 0) {
                // get the user's data
                $user = $result->fetch_assoc();

                // get the username
                $username = $user['username'];
            }
        ?>
    </body>
    <script src="user_page.js"></script>
</html>


6)user_page.css :

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}
body {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../assets/img/hero_1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.Welcome-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  border: 2px solid white;
  border-radius: 10px;
  padding: 20px;
  background-color: white;
}

7)user_page.js :

// get the overlay element
var overlay = document.querySelector('.overlay');

// show the overlay for 2 seconds
overlay.style.display = 'block';
setTimeout(function() {
    overlay.style.display = 'none';
}, 2000);

// hide the overlay when clicked
overlay.addEventListener('click', function() {
    overlay.style.display = 'none';
});

8)admin_page.php:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Project(Admin Page)</title>
        <meta name="description" content="AutoAD -  это портал о автоматизации процесса работы учебного отдела ">
        <meta name="keywords" content="коллдеж, учебный отдел, автоматизация" />
        <link rel="stylesheet" href="style.css">
        <link rel="icon" href="../assets/img/icons8-undertale-heart-120.ico" type="image/x-icon" sizes="120x120">

    </head>
    <body>
        <div class="header">
            <h1>AutoAD</h1>
            <h2>Автоматизация работы учебного отдела</h2>
        </div>
        <div class="container">
            <h3>Welcome, Admin!</h3>
            <p>Here you can manage the users and the courses.</p>
            <a href="users.php">View Users</a>
            <a href="courses.php">View Courses</a>
            <a href="logout.php">Log Out</a>
        </div>
    </body>
</html>