updated some styles

public/css/form-style.css

@@ -22,7 +22,7 @@ body{
   background-image: linear-gradient(200deg,#ffef12, rgb(230, 0, 69) 30%, #002fff);
 }
 
-h1{
+h1, h5, h6 {
   color: white;
   font-weight: bold ;
 }

public/css/password-view.css

@@ -93,7 +93,7 @@ body{
   min-width: 15em;
 }
 
-.add-cancle{
+.add-cancel{
   position: absolute;
   top: -0.5em;
   right: -0.5em;
@@ -201,20 +201,20 @@ tbody tr:nth-child(2n){
   background-image: url("../image/check.svg");
 }
 
-.cancle-delete {
+.cancel-delete {
   background-image: url("../image/cross.svg");
 }
 
-.confirm-delete, .cancle-delete {
+.confirm-delete, .cancel-delete {
   background-color: white;
   background-size: 70%;
   background-repeat: no-repeat;
   border-radius: 50%;
 }
 
 .action-btn{
-  width: 2.2em;
-  height: 2.2em;
+  width: 2.4em;
+  height: 2.4em;
 
   border: 0px;
 
@@ -285,7 +285,7 @@ tbody tr:nth-child(2n){
     top: 0;
   }
 
-  .add-cancle {
+  .add-cancel {
     font-family: sans-serif;
     background-color: white;
     border: 1px rgb(255, 255, 255) solid;
@@ -297,18 +297,18 @@ tbody tr:nth-child(2n){
     position: static;
   }
 
-  .add-cancle:hover {
+  .add-cancel:hover {
     transition: ease 0.2s;
     background-color: black;
     color: white;
   }
 
-  .add-cancle:active {
+  .add-cancel:active {
     border: 3px rgb(24, 233, 24) solid;
     transition: ease 0.2s;
   }
 
-  .add-cancle:focus {
+  .add-cancel:focus {
     border: 3px rgb(255, 0, 157) solid;
     color: rgb(255, 0, 157);
   }

public/css/user-menu.css

@@ -25,6 +25,6 @@
 
 .user-menu-exit {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 0.75em;
+    right: 0.75em;
 }

public/html/login.html

@@ -24,6 +24,7 @@ <h1>Login</h1>
             </div>
         </form>
         <a class="links" href="/sign-in-with">Sign-in with (WIP)</a>
+        <h5 class="lgn">Please note that this is just a demo app. Any information recorded here is not permanently saved.</h5>
     </div>
 </body>
 </html>

public/html/password-view.html

@@ -28,7 +28,7 @@
 
         <nav class="btn-set2">
             <input class="action-btn confirm-delete" type="button">
-            <input class="action-btn cancle-delete" type="button">
+            <input class="action-btn cancel-delete" type="button">
         </nav>
     </div>
 
@@ -60,15 +60,15 @@ <h2>Add a record</h2>
                 <input class="add-inputs add-password" name="pass1" type="password" required placeholder="Password">
                 <input class="add-inputs add-retype-password" name="pass2" type="password" required placeholder="Re-type Password">
                 <input class="add-inputs add-submit" type="submit" value="Confirm">
-                <input class="add-cancle" type="button" value="X">
+                <input class="add-cancel" type="button" value="X">
             </form>
         </div>
     </div>
     <!-- add password window : end -->
 
     <!-- User Menu : start -->
     <div class="user-menu">
-        <input class="action-btn cancle-delete user-menu-exit" type="button">
+        <input class="action-btn cancel-delete user-menu-exit" type="button">
         <div class="menu-containers"><input class="user-name" value="default" readonly></div>
 
         <div class="menu-containers"></div>

public/js/password-view.js

@@ -171,8 +171,8 @@ document.querySelector('.remove-record').addEventListener('click',function(){
   }
 });
 
-// cancle remove - hide selection, unselect selections
-document.querySelector('.cancle-delete').addEventListener('click',function(){
+// cancel remove - hide selection, unselect selections
+document.querySelector('.cancel-delete').addEventListener('click',function(){
 
   SearchBar.style.display = 'inline';
 
@@ -198,7 +198,7 @@ document.querySelector('.add-record').addEventListener('click', function(){
 });
 
 // add window close button
-document.querySelector('.add-cancle').addEventListener('click', function(){
+document.querySelector('.add-cancel').addEventListener('click', function(){
   AddWall.style.display = 'none';
 });
 

readme.md

@@ -15,6 +15,8 @@ A simple web application for managing and storing password, the **frontend** was
 
 **Demo**
 
+[**Live App Demo**](https://password-manager-demo.onrender.com/) : https://password-manager-demo.onrender.com/
+
 ![web-app-demo-gif](public/image/password-manager-demo-video.gif)
 
 -----