user_ui

<main class="m-5">
    <br>
    <!-- 1st Card -->
    <div class="card border-0">
        <br>
        <div class="container">
            <div class="row text-start px-3">
            <div class="col mb-3"><label class="labels text-black">Username</label><input name="userName" value='<?php echo $username ?>' type="text" class="form-control"></div>
            <div class="col mb-3"><label class="labels text-black">Email Address</label><input name="emailAddress" value='<?php echo $email ?>' type="text" class="form-control"></div>
            <div class="col-mb-4"><label class="labels text-black">Password</label><input name="passWord" value='<?php echo $password ?>' type="password" class="form-control"></div>
                <br><br>
            </div>
            <div class="text-end mt-4">
                    <button id="resetbtn" type="button" class="btn btn-transparent">Invincible</button>
                    <button id="savebtn" type="button" onclick = "saveCredentials()" class="btn btn-primary">Save Changes</button>
                    <button id="changebtn" onclick="changeCredentials()" type="button" class="btn btn-primary">Change Credentials</button>
            </div>
            <script>
            document.getElementById("resetbtn").style.visibility = "hidden";
            document.getElementById("savebtn").style.visibility = "hidden";

            function changeCredentials()
            {
            document.getElementById("resetbtn").style.visibility = "visible";
            document.getElementById("savebtn").style.visibility = "visible";
            document.getElementById("changebtn").style.visibility = "hidden";
            alert("Change Credentials");
            }
            function saveCredentials()
            {
            alert("Save Credentials");
            }
            </script>
        </div>
        <br> 
    </div>
    <br>
    <!-- 2nd Card -->
    <div class="card border-0">
        <br>
        <div class="container">
            <div class="row px-3">
                <div class="col-mb-3 text-start">
                    <label class="labels text-black">Profile Status: "No Profile"</label>
                    <button type="button" class="btn btn-primary float-right">Set up Profile</button>
                </div>
    
                <div class="col-mb-3 mt-3 text-start">
                    <label class="labels text-black">Account Type: Resident</label>
                    <button type="button" class="btn btn-danger float-right">Deactivate</button>
                </div>

                <br><br>
                
            </div>
                <div class="text-end mt-4">
                    <button type="button" class="btn btn-success">Logout</button>
                </div>
        </div>
        <br>
    </div>

</main>