<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="icon" href="icon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Chat Online</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <center>
        <div id="loginForm">
            <h2>Login</h2>
            <input type="text" id="usernameInput" placeholder="Enter your username">
            <button id="loginBtn">Login</button>
            <br>
            <br>
            <br>
            <h2 style="color: red;">DON'T USE YOUR REAL NAME FOR PRIVACY !!</h2>
            <br>
            <br>
            <h6>make sure you read the <a href="info.html">info</a></h6>
            <br>
            <br>
            <br>
            <a href="info.html"><button>INFO</button></a>
        </div>
    </center>

    <header id="header" style="display: none;">
        <div class="logo">SchoolChatOnline</div>
        <div class="buttons">
            <button id="logoutBtn">Logout</button>
        </div>
    </header>

    <main id="mainContent" style="display: none;">
        <div id="postContainer"></div>
        <form id="postForm" enctype="multipart/form-data">
            <textarea id="postInput" placeholder="Write your post here..."></textarea>
            <input type="file" id="mediaInput" name="media">
            <button type="submit">Post</button>
        </form>
    </main>

    <script src="scripts.js"></script>
</body>
</html>
