<!DOCTYPE html>
<html lang="en">
<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>MeHealth</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<style>
    .label{
        text-align: center;
    }
    h1{
        padding-top: 2%;
        text-align: center;
    }
    .form{
        padding-top: 2%;
        width: 60%;
        margin-left: 20%;
    }
    .btn{
        margin-top: 25px;
        text-align: center;
    }
    .form-group{
        margin-bottom: 15px;
    }
</style>
    <h1>Detect Depression</h1>
    <div class="form">
        <form action="/depression/clasify" method="post">
            <div class="form-group">
                <label for ="Age">Age: </label>
                <input class="form-control" type="number" id="Age" name="" placeholder="Enter age"/>
            </div>
            <div class="sm">
                <label for ="social media">Do you use social media for more than 3 hours ?</label>
                <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sm" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sm" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
            </div>
            <div class="person">
                <label for="person">Do u lost any close person?</label>
                <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="person" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="person" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
            </div>
            <div class="issues">
                <label for="body issues ">Are u thinking of any issues about you?</label>
               <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="issues" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="issues" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
            </div>

            <div class="sc">
                <label for="self confidence">Are you low of confidence or self esteem?</label>
                <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sc" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="sc" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
            </div>
            <div class="life">
                <label for="life">Are you sad about your life ?</label>
                <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="life" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="life" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
            </div>

            <div class="depression">
                <label for="depression">Do you have any issues related to depressed or anxinity about anything ?</label>
                <br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="depression" id="1" value="0">
                    <label class="form-check-label" for="1">No</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="depression" id="1" value="1">
                    <label class="form-check-label" for="1">Yes</label>
                </div>
            </div>
            <input class="btn btn-primary" type="submit" value="Submit">
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>