Untitled

<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">
    <meta name="google-site-verification" content="zBe9E1y0PAKfTXdFC8j1fRHnZKo08qaRwJ7JZYzxEPo">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Profiles</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link type="text/css" rel="stylesheets" href="css/style.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        html {
            position: relative;
            min-height: 100%;
        }

        body {
            width: auto;
            height: auto;
            background: url(img/Looking_Sunrise_Landscape_3840x2160.jpg) center fixed;
            background-attachment: fixed;
            background-size: cover;
            text-align: center;
            color: black;
            font-family: 'Permanent Marker', cursive;
        }

        #menuimage {
            width: 50px;
            height: 30px;
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }

        #bar {
            width: 240px;
            background-color: rgba(255, 255, 255, 0.75);
            margin: 8px;
            padding: 4px;
            border-radius: 4px;
        }

        #autoc {
            width: 100%;
            box-sizing: border-box;
        }

        .jumbotron {
            margin-top: 10%;
            background-color: transparent;
            color: white;
        }

        .footer {
            position: absolute;
            color: white;
            font-size: 19px;
            bottom: 0;
            text-align: center;
            width: 100%;
            background-color: rgba(135, 135, 135, 0.8);
        }

        #sputnik {
            border-radius: 40px;
            text-align: left;
            margin-top: 6%;
        }

        edit.container1 {
            text-align: right;
            margin-top: 6% 300px;
        }

        #notePad,
        #allnotes,
        #done {
            display: none;
        }

        #batonsy {
            margin-top: 10%;
            margin-bottom: 2%;
        }

        textarea {
            width: 100%;
            max-width: 100%;
            font-size: 16px;
            line-height: 1.5em;
            border-left-width: 30px;
            border-color: red;
            color: white;
            background-color: rgba(215, 44, 44, 0.8);
            padding: 2%;
        }
        tr{
            cursor: pointer;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places"></script>

    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14/intl/pl_ALL/common.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14/intl/pl_ALL/util.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14/intl/pl_ALL/stats.js"></script>
</head>

<body>


    <header>
        <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">

            <div class="container-fluid">

                <div class="navbar-header">

                    <a class="navbar-brand">Simple Notes</a>
                    <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>

                  </button>
                </div>
                <div class="navbar-collapse collapse" id="navbarCollapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.php">Home</a></li>
                        <li><a href="profile.php">Profile</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a data-toggle="modal" data-target="#">Logged in as <strong>username</strong></a></li>
                        <li><a data-toggle="modal" data-target="#">Logout</a></li>
                    </ul>

                </div>
            </div>

        </nav>
    </header>

    <div class="container" id="sputnik">
        <div class="row">
            <div class="col-md-offset-3 col-md-6">
                <h2>Genereal Account Settings:</h2>
                <div class="table-responsive">
                    <table class="table table-bordered table-condensed table-hover">
                        <tr data-target="#updateuser" data-toggle="modal">
                            <td>Username</td>
                            <td>value</td>
                        </tr>
                        <tr data-target="#updateemail" data-toggle="modal">
                            <td>Email</td>
                            <td>value</td>
                        </tr>
                        <tr data-target="#updatepassword" data-toggle="modal">
                            <td>Password</td>
                            <td>hidden</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <form method="POST" id="updateforlogin">
        <div class="modal fade " tabindex="-1" role="dialog" id="updateuser">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="text-align:left">Edit username:</h4>
                    </div>
                    <div class="modal-body" style="color:black;">
                        <div class="form-group">
                            <input id="loginuser" class="form-control" name="Username" type="email" placeholder="Username">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input class="btn green pull-left" name="update" type="submit" value="update" style="background-color:brown;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </form>

    <form method="POST" id="updateforlogin">
        <div class="modal fade " tabindex="-1" role="dialog" id="updateemail">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="text-align:left">Edit email:</h4>
                    </div>
                    <div class="modal-body" style="color:black;">
                        <div class="form-group">
                            <input id="loginemail" class="form-control" name="Email" type="email" placeholder="Email" value="Email valju">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input class="btn green pull-left" name="update" type="submit" value="update" style="background-color:brown;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </form>

    <form method="POST" id="updateforlogin">
        <div class="modal fade " tabindex="-1" role="dialog" id="updatepassword">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="text-align:left">Enter new password:</h4>
                    </div>
                    <div class="modal-body" style="color:black;">
                        <div class="form-group">
                            <input id="loginpass" class="form-control" name="Password" type="email" placeholder="old password">
                        </div>
                        <div class="form-group">
                            <input id="loginnewpass" class="form-control" name="Password" type="email" placeholder="new Password">
                        </div>
                        <div class="form-group">
                            <input id="loginnewpassrepeat" class="form-control" name="Password" type="email" placeholder="new again Password">
                        </div>

                    </div>
                    <div class="modal-footer">
                        <input class="btn green pull-left" name="update" type="submit" value="update" style="background-color:brown;">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->
    </form>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="mytips.js"></script>

    <div class="footer">
        <div class="container">
            <p>This is it what happened in ©
                <?php echo date('d-m-Y'); ?>.
            </p>
        </div>
    </div>

    <script>
        $('#myModal').on('shown.bs.modal', function() {
            $('#myInput').focus()
        })
    </script>


</body>

</html>