Add bounding boxes for passwords

pwman/ui/templates/index.tpl

@@ -12,26 +12,42 @@
 
 
 <main class="wrapper">
-  <nav class="navigation">
+  <nav class="navigation" >
   <section class="container">
     <a class="navigation-title" href="https://pwman3.github.io/">
     <img class="img" src="https://openclipart.org/download/190821/Cles-de-serrure-lock-keys.svg" height="30" alt="pwman3" title="pwman3">
     <h1 class="title">Pwman3</h1>
     </a>
     <span class="auth">
-    <form class="auth-form">
-      <button id="auth-btn" class="button">Auth</button>
-      <input id="pwd-input" class="navigation-button" type="password" name="auth-pwd" placeholder="Password" style="display: none;" >
-      <input id="show" class="button-primary navigation-button" style="display:none;" value="Submit" type="submit">
+    <button id="auth-btn" class="button">Auth</button>
+    <div style="float: right">
+    <form id="show" class="auth-form" style="display: none">
+      <input id="" class="navigation-button" type="password" name="auth-pwd" placeholder="Password"  >
+      <input id="" class="button-primary navigation-button"  value="Submit" type="submit">
     </form>
+    <div>
     </span>
   </section>
   </nav>
+  
+  <section class="container password-box" style="margin-top: 7rem; ">
+  <div class="">  
+  kkkkkkkkkkkkkkkkkkkk
+  </div>  
+</section>
+  <section class="container password-box">
+  kkkkkkkkkkkk
+  </section>
+  <section class="container password-box">
+  kkkkkkkkkkkkkkk
+  </section>
+  <section class="container password-box">
+  kkkkkkkkkk
+  </section>
 </main>
 
 <script type="text/javascript">
 $("#auth-btn").click(function () {
-   $("#pwd-input").show('fast');
    $("#show").show('fast');
 });
 

pwman/ui/templates/static/css/style.css

@@ -187,7 +187,6 @@ img {
 
 .auth {
   display: inline-block;
-  position: relative;
   float: right;
 }
 
@@ -252,6 +251,7 @@ img {
 	font-size: 1.6rem;
   padding: 0px 1.3rem;
   margin-top: 1rem;
+  float: right;
 
 }
 .navigation-link {
@@ -348,8 +348,7 @@ img {
 }
 
 
-/* Prettify
-*/
+/* Prettify */
 
 pre.prettyprint {
 	border: 0 !important;
@@ -386,3 +385,10 @@ pre.prettyprint .var { color: #ca4949; }
 pre.prettyprint .fun { color: #7272ca; }
 /* markdown content */
 pre.prettyprint.lang-md * { color: #655d5d !important; }
+
+
+.password-box {
+  border: 0.1rem solid #D1D1D1;
+  border-radius: 0.4rem;
+  margin-bottom: 1rem;
+}