foxy.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <! DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Fox! Password Manager</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  9. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  10. <link rel="stylesheet" href="./static/css/main.css">
  11. </head>
  12. <body>
  13. <nav class="navbar navbar-inverse">
  14. <div class="container-fluid">
  15. <div class="navbar-header">
  16. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
  17. <span class="icon-bar"></span>
  18. <span class="icon-bar"></span>
  19. <span class="icon-bar"></span>
  20. </button>
  21. <a class="navbar-brand" href="#">Fox! Password Manager</a>
  22. </div>
  23. <div class="collapse navbar-collapse" id="myNavbar">
  24. <ul class="nav navbar-nav navbar-right">
  25. <li>
  26. <form class="navbar-form navbar-right" role="button">
  27. <button type="button" class="btn btn-default" id="auth-btn">
  28. <span class="glyphicon glyphicon-log-in"></span> Authenticate
  29. </button>
  30. </form>
  31. </li>
  32. <li>
  33. <form class="navbar-form navbar-right" role="button">
  34. <div class="form-group" id="show" style="display: none;">
  35. <input type="password" class="form-control" name="auth-pwd" placeholder="Password">
  36. <button type="submit" class="btn btn-default" id="signin">Sign In</button>
  37. </div>
  38. </form>
  39. </li>
  40. </ul>
  41. </div>
  42. </div>
  43. </nav>
  44. <div class="container">
  45. <div class="row">
  46. <div class="col-md-6 col-md-push-6">
  47. <div class="custom-collapse">
  48. <button class="btn collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#tags">
  49. <span class="">Tags</span>
  50. </button>
  51. <div class="collapse" id="tags">
  52. <ul class="nav nav-pills nav-stacked" id="side-menu-collapse">
  53. <li class="active"><a href="#">Tag1</a></li>
  54. <li><a href="#">Tag2</a></li>
  55. <li><a href="#">Tag2</a></li>
  56. </ul>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="col-md-6 col-md-pull-6">
  61. <table class="table table-hover">
  62. <thead>
  63. <tr>
  64. <th>User</th>
  65. <th>URL</th>
  66. <th>Tags</th>
  67. <th></th>
  68. </tr>
  69. </thead>
  70. <tbody>
  71. <tr>
  72. <td>John</td>
  73. <td>john@example.com</td>
  74. <td>tag1, tag2</td>
  75. <td>
  76. <a href="#">
  77. <span class="glyphicon glyphicon-eye-open"></span>
  78. </a>
  79. <a href="#">
  80. <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
  81. </a>
  82. <a href="#">
  83. <span class="glyphicon glyphicon-edit"></span>
  84. </a>
  85. <a href="#">
  86. <span class="glyphicon glyphicon-remove"></span>
  87. </a>
  88. </td>
  89. </tr>
  90. <tr>
  91. <td>Mary</td>
  92. <td>mary@example.com</td>
  93. <td>tag1, tag2</td>
  94. <td>
  95. <a href="#">
  96. <span class="glyphicon glyphicon-eye-open"></span>
  97. </a>
  98. <a href="#">
  99. <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
  100. </a>
  101. <a href="#">
  102. <span class="glyphicon glyphicon-edit"></span>
  103. </a>
  104. <a href="#">
  105. <span class="glyphicon glyphicon-remove"></span>
  106. </a>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td>July</td>
  111. <td>july@example.com</td>
  112. <td>tag1, tag2</td>
  113. <td>
  114. <a href="#">
  115. <span class="glyphicon glyphicon-eye-open"></span>
  116. </a>
  117. <a href="#">
  118. <span class="glyphicon glyphicon-eye-close" style="display: none;"></span>
  119. </a>
  120. <a href="#">
  121. <span class="glyphicon glyphicon-edit"></span>
  122. </a>
  123. <a href="#">
  124. <span class="glyphicon glyphicon-remove"></span>
  125. </a>
  126. </td>
  127. </tr>
  128. </tbody>
  129. </table>
  130. </div>
  131. </div>
  132. <div class="clearfix visible-lg"></div>
  133. </div>
  134. </div>
  135. <script type="text/javascript">
  136. $("#auth-btn").click(function () {
  137. $("#show").show('fast');
  138. });
  139. $("#auth-btn").click(function () {
  140. $("#auth-btn").hide(1000);
  141. });
  142. </script>
  143. <script>
  144. // Attach a submit handler to the form
  145. $( "#signin" ).submit(function( event ) {
  146. // Stop form from submitting normally
  147. event.preventDefault();
  148. // Get some values from elements on the page:
  149. var $form = $( this ),
  150. term = $form.find( "input[name='auth-pwd']" ).val(),
  151. url = "/_auth";
  152. // Send the data using post
  153. var posting = $.post( url, { s: term } );
  154. var posting = $.post( url, { s: term }, function( data ) {
  155. console.log( data );
  156. }, "json");
  157. // Put the results in a div
  158. posting.done(function( data ) {
  159. var content = data ;
  160. $( "#result" ).empty().append( content );
  161. });
  162. });
  163. </script>
  164. </body>
  165. </html>