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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-control" content="no-cache">
    <title>Create Login (v8.1)</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link href="css/style_nav.css" rel="stylesheet">
    <script src="js/style_nav_c.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            align-items: center;
            justify-content: center;
            background-color: #d4d4d4;
        }

        .container {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 425px;
            text-align: center;
        }

        h2 {
            color: #333;
            margin-bottom: 30px;
        }

        p {
            color: #555;
        }

        label {
            display: block;
            margin-top: 20px;
            color: #333;
        }

        /*input[type="email"] {*/
        input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 10px;
            color: #ffffff;
            background-color: #4CAF50;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        button:hover {
            background-color: #45a049;
        }

        #responseMessage {
            margin-top: 15px;
            color: #333;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <img class="navbar-brand" id="navicon">
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="dashboard.html"><i class="fa fa-home"></i> Home</a></li>
                <li class="active"><a href="livecount.html"><i class="fa fa-eye"></i> Live Count</a></li>
                <li class="hidden" id="foradmin"><a href="audittrail.html"><i class="fa fa-history"></i> Audit Trail</a>
                </li>

                <li class="dropdown" id="foradmin1"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i
                            class="fa fa-hourglass-half"></i> Pending<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="pendingapproval.html">Pending Approval</a></li>
                        <li><a href="pendingrejected.html">Pending Rejected</a></li>
                    </ul>
                </li>

                <li class="hidden" id="pmcno"><a href="approve.html"><i class="fa fa-check-square-o"></i> View
                        Approval</a></li>
                <li class="hidden" id="pmcno1"><a href="reject.html"><i class="fa fa-times-circle"></i> View
                        Rejected</a></li>
                <li class="active"><a href="surveyreport.html"><i class="fa fa-desktop"></i> Survey Report</a></li>
                <!--<li class="hidden" id="gisadmin"><a href="gismap.html"><i class="fa fa-map-marker"></i> GIS Map</a></li>-->

                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i
                            class="fa fa-gear"></i> Settings<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li class="hidden" id="foradmin2"><a href="createlogin.html">Create Login</a></li>
                        <li><a href="logout.html"><span class="glyphicon glyphicon-log-out"
                                    style="color: goldenrod;"></span>
                                Logout</a></li>
                        <li><a id="usericon"></a></li>
                    </ul>
                </li>
                <div class="navbar-header">
                    <img class="navbar-brand" id="navicon1">
                </div>
            </ul>
        </div>
    </nav>

    <div class="container">
        <h2>Create New Login</h2>
        <p>Please enter new username and password credentials</p>
        <form id="forgotPasswordForm">
            <label for="uname">UserName: </label>
            <input type="text" id="uname" name="uname" placeholder="Enter new username" required>
            <label for="pwd">Password: </label>
            <input type="password" id="pwd" name="pwd" placeholder="Enter password" required>
            <button type="submit">Create Login</button>
        </form>
        <p id="responseMessage"></p>
    </div>
    <script src="js/com_config.js"></script>
    <script src="js/createlogin.js"></script>
</body>

</html>