diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 214 |
1 files changed, 205 insertions, 9 deletions
@@ -54,12 +54,57 @@ <span class="glyphicon glyphicon glyphicon-user"></span> </a> <ul class="dropdown-menu"> - <li><a href="#">Profile</a></li> - <li><a href="#">Login or Signup</a></li> - <li><a href="#">Logout</a></li> + <li id="navigation-logout"><a href="#">Logout</a></li> + <li id="navigation-profile"><a href="#">Profile</a></li> + <li role="separator" class="divider"></li> + <li><a href="#" data-toggle="modal" data-target="#modalChangePassword">Change password</a></li> </ul> </li> - <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li> + <li class="dropdown"> + <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a> + <div class="dropdown-menu" style="background-color: #fff"> + <form class="form col-sm-12"> + <div class="form-group"> + <span class="small">Language</span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <select class="form-control"> + <option value="sl">Slovensko</option> + <option value="en">English</option> + <option value="d">Dolgooooooooooooooooooooooooooooooooooooooooooooooo</option> + </select> + </div> + <div class="form-group"> + <span class="small"> + Language + </span> + <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="<span class='small'>Select the UI language.</span>" data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br> + <div> + <div class="radio"> + <label> + <input name="lang" value="en" type="radio">English + </label> + </div> + <div class="radio"> + <label> + <input name="lang" value="sl" type="radio">Slovensko + </label> + </div> + <div class="radio"> + <label> + <input name="lang" value="d" type="radio">Dolgooooooooooooooooooooooooooooooooooooooooooooooo + </label> + </div> + </div> + </div> + <div class="form-group"> + <div class="text-right"> + <button type="button" class="btn btn-default" data-target="settingsDropdown" data-toggle="dropdown">Close</button> + <button type="button" class="btn btn-primary" data-target="settingsDropdown" data-toggle="dropdown">Save</button> + </div> + </div> + </form> + </div> + </li> </ul> </div><!--/.nav-collapse --> @@ -70,14 +115,20 @@ <div class="container" id="screen_login"> <form class="form-signin"> <h2 class="form-signin-heading">Please login</h2> - <label for="username" class="sr-only">Username</label> - <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus=""> - <label for="password" class="sr-only">Password</label> - <input type="password" id="password" class="form-control" placeholder="Password" required=""> - <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button> + <div class="form-group"> + <label for="username" class="sr-only">Username</label> + <input type="text" id="username" class="form-control" placeholder="Username" required="" autofocus=""> + <label for="password" class="sr-only">Password</label> + <input type="password" id="password" class="form-control" placeholder="Password" required=""> + <button class="btn btn-lg btn-default btn-block" type="button" id="submit">Login</button> + </div> + <div class="form-group"> + <a href="" data-dismiss="modal" data-toggle="modal" role="button" data-target="#modalSignIn">New User? Sign-in..</a> + </div> </form> </div> + <!-- main screen: programming language selection, settings, etc. --> <div class="container" id="screen_language" style="text-align: center; display: none;"> <div class="row"> @@ -164,6 +215,150 @@ </div><!--/row--> </div><!--container--> + <!-- problem screen: profile --> + <div class="container-fluid" id="screen_profile" style="display: none;"> + <h2> + Profile + <div class="btn-group btn-group-xs hidden-md pull-right"> + <a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default">Change Password</a> + <a href="#" class="btn btn-default">Go back</a> + </div> + </h2> + <hr> + <div class="row"> + <div class="col-lg-3 col-md-4"> + <div class="panel panel-default"> + <div class="panel-heading"> + Overview + </div> + <ul class="list-group small"> + <li class="list-group-item text-right"><span class="pull-left"><strong>Username</strong></span>markopusnik</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Real name</strong></span>Marko Pušnik</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Joined</strong></span>Sep 29, 2015</li> + <li class="list-group-item text-right"><span class="pull-left"><strong>Last seen</strong></span>1 hour ago</li> + </ul> + </div> + + <div class="panel panel-default"> + <div class="panel-heading"> + Statistics + </div> + <ul class="list-group small"> + <li class="list-group-item"><strong>Points</strong> <span class="label label-default pull-right">87</span></li> + <li class="list-group-item"><strong>Prolog</strong> <span class="label label-default pull-right">10</span></li> + <li class="list-group-item"><strong>Python</strong> <span class="label label-default pull-right">10</span></li> + <li class="list-group-item"><strong>Robot</strong> <span class="label label-default pull-right">10</span></li> + </ul> + </div> + </div><!--/col-3--> + + <div class="col-lg-9 col-md-8"> + <ul class="nav nav-tabs" id="profileTab"> + <li class="active"><a href="#" class="text-primary" data-target="#profileSettings" data-toggle="tab">Edit Profile</a></li> + <li><a href="#" class="text-primary" data-target="#profile2" data-toggle="tab">Neki</a></li> + </ul> + <div class="tab-content"> + <div class="tab-pane active" id="profileSettings"> + <br> + <form class="form"> + <div class="col-lg-6"> + <div class="form-group"> + <label><h4>Username</h4></label> + <input type="text" class="form-control input-lg disabled" disabled="disabled" name="username" value="markopusnik"> + </div> + </div> + <div class="col-lg-6"> + <div class="form-group"> + <label><h4>Real name</h4></label> + <input type="text" class="form-control input-lg" name="realName" placeholder="First & last name" maxlength="50"> + </div> + </div><!--/col--> + <div class="col-lg-12"> + <div class="form-group"> + <label><h4>Email</h4></label> + <input type="email" class="form-control input-lg disabled" disabled="disabled" name="email" placeholder="Email address (private)" required="required"> + </div> + </div><!--/col--> + <div class="col-lg-12"> + <div class="form-group"> + <button class="btn btn-lg btn-primary pull-right" type="submit">Save</button> + </div> + </div><!--/col--> + </form> + </div><!--/tab-pane--> + + <div class="tab-pane" id="profile2"> + <h2 class="text-center">Todo...</h2> + </div><!--/tab-pane--> + + </div><!--/tab-content--> + </div><!--/col-9--> + </div><!--row--> + </div><!--container--> + + <!-- Modals --> + <div id="modalSignIn" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h2 class="text-center">Sign-in</h2> + </div> + <div class="modal-body"> + <form class="form" method="post"> + <div class="form-group"> + <label class="control-label">Email</label> + <input class="form-control" name="email" id="inputEmail" type="email" data-ng-model="newuser.email" placeholder="email@you.com (kept private)" required=""> + </div> + <div class="form-group" bs-has-error=""> + <label class="control-label">Username</label> + <input class="form-control" name="username" id="inputUsername" type="text" data-ng-model="newuser.username" placeholder="desired username" pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" title="Choose a alpha-numeric username of 5-15 characters" required=""> + </div> + <div class="form-group"> + <label class="control-label">Password</label> + <input class="form-control" name="password" id="inputpassword" type="password" data-ng-model="newuser.password" placeholder="password" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required=""> + </div> + <div class="form-group"> + <label class="control-label">Verify (repeat password)</label> + <input class="form-control" name="verify" id="inputVerify" type="password" data-ng-model="newuser.verify" placeholder="password (again)" pattern="^[a-z,A-Z,0-9,_]{6,15}$" data-valid-min="6" title="Choose a alpha-numeric password of a least 6 characters" required=""> + </div> + </form><!--/row--> + </div><!--/modal-body--> + <div class="modal-footer"> + <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> + <button class="btn btn-lg btn-primary" id="btnRegister" type="submit">Sign</button> + </div><!--/modal-footer--> + </div> + </div> + </div> + + <div id="modalChangePassword" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h2 class="text-center">Password Change</h2> + </div> + <div class="modal-body"> + <form class="form" method="post"> + <div class="form-group"> + <label>New Password</label> + <input class="form-control input-lg" placeholder="Enter a new password" name="new" type="password"> + </div> + <div class="form-group"> + <label>Verify Password</label> + <input class="form-control input-lg" placeholder="Repeat the password again" name="verify" type="password"> + </div> + </form><!--/row--> + </div><!--/modal-body--> + <div class="modal-footer"> + <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button> + <button class="btn btn-lg btn-primary" id="btnPasswdChange" type="submit">Change</button> + </div><!--/modal-footer--> + </div> + </div> + </div> + <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below. Used as a wait screen; must be the last element in the DOM. It is active after load, javascript turns it off after initialization. --> @@ -197,6 +392,7 @@ <script src="js/codeq/prolog.js"></script> <script src="js/codeq/python.js"></script> <script src="js/codeq/login.js"></script> + <script src="js/codeq/profile.js"></script> <script src="js/codeq/language.js"></script> <script src="js/codeq/problem.js"></script> </body> |