updated login/signup page

roysathome.net/LoginPage.html

@@ -90,14 +90,14 @@
 
         dialog {
             position: absolute;
-            border: black solid 2px;
+            border: none;
             left: 50%;
             top: 50%;
             margin: 0px;
             transform: translate(-50%,-50%);
             border-radius: 20px;
             width: 500px;
-            height: 500px;
+            height: 540px;
             background: white;
             padding: 0px;
             box-sizing: border-box;
@@ -109,13 +109,60 @@
 
             dialog input {
                 box-sizing: border-box;
-                margin: 50px;
-                width: calc(100% - 100px);
-                border: none;
+                width: 100%;
+                border: #5b8dff solid 2px;
                 padding: 10px;
                 border-radius: 100000px;
+                background-color: #f8f8f8;
+                outline: none;
+                font-family: 'Protest Strike'
             }
 
+                dialog input[type=submit] {
+                    border: none;
+                    margin: 40px 0px;
+                    background-color: #00bfff;
+                    color: white;
+                    font-size: 1.3em;
+                }
+
+            dialog label {
+                display: block;
+                margin: 30px 0px 10px 20px;
+            }
+
+            dialog div {
+                margin: 10% 10% 0px 10%;
+            }
+
+            dialog p {
+                font-size: 40px;
+            }
+
+            dialog img {
+                position: absolute;
+                margin: 10px;
+                right: 0%;
+                height: 30px;
+                width: 30px;
+                padding: 5px;
+                border: none;
+                border-radius: 10%;
+                transition: all ease-in-out 50ms;
+            }
+
+                dialog img:hover {
+                    background-color: rgb(0, 0, 0, 0.588);
+                }
+
+        .signup-dialog {
+            height: 600px;
+        }
+
+        .login-dialog {
+            height: 500px;
+        }
+
         @media (prefers-color-scheme: dark) {
             body {
                 background: black;
@@ -135,6 +182,10 @@
                     border: black 2px solid;
                 }
 
+                dialog img:hover {
+                    background-color: rgb(255, 255, 255, 0.588);
+                }
+
             .input-button {
                 background: white;
                 color:black;
@@ -197,7 +248,7 @@
                     Sort Your Finances.
                 </h2>
             </span>
-            <input id="show-login-dialog" class="input-button signup-button" type="button" value="Create account">
+            <input id="show-signup-dialog" class="input-button signup-button" type="button" value="Create account">
             <div class="horizontal-splitter">
                 <div class="side-line">
 
@@ -209,30 +260,64 @@
 
                 </div>
             </div>
-            <input class="input-button" type="button" value="Login">
+            <input id="show-login-dialog" class="input-button" type="button" value="Login">
         </div>
 
     </div>
 
-    <dialog id="signup-dialog">
-        <input type="text" placeholder="Enter your Email">
+    <dialog id="signup-dialog" class="signup-dialog">
+        <img src="x-button.png" class="close-dialog"/>
+        <div>
+            <form>
+                <p>We just need a few details.</p>
+
+                <label>Name</label>
+                <input type="text" placeholder="Enter your Name">
+
+                <label>Email</label>
+                <input type="text" placeholder="Enter your Email">
+
+                <label>Password</label>
+                <input type="text" placeholder="Enter a Password">
+
+                <input type="submit" value="Start DinoSaving!">
+            </form>
+        </div>
     </dialog>
 
-    <dialog id="login-dialog">
-        <input type="text" placeholder="Enter your Username or Email">
+    <dialog id="login-dialog" class="login-dialog">
+        <img src="x-button.png" class="close-dialog"/>
+        <div>
+            <form>
+                <p>Please enter your login details.</p>
+
+                <label>Email</label>
+                <input type="text" placeholder="Enter your Email">
+
+                <label>Password</label>
+                <input type="text" placeholder="Enter your Password">
+
+                <input type="submit" value="Login!">
+            </form>
+        </div>
     </dialog>
 </body>
 </html>
 <script>
-    function openCheck(dialog) {
-        if (dialog.open) {
-            console.log("Dialog open");
-        } else {
-            console.log("Dialog closed");       
-        }
+    document.addEventListener('DOMContentLoaded', function () {
 
-        return dialog.open;
-    }
+        var allCloseButtons = document.querySelectorAll('.close-dialog');
+
+        allCloseButtons.forEach(function (closeButton) {
+            closeButton.addEventListener('click', function () {
+                var allDialogs = document.querySelectorAll('dialog');
+
+                allDialogs.forEach(function (dialog) {
+                    dialog.close();
+                });
+            });
+        });
+    });
 
     document.addEventListener('DOMContentLoaded', function () {
         var loginDialog = document.getElementById('show-login-dialog');
@@ -243,7 +328,17 @@
                 currentModal.close();
                 currentModal.showModal();
 
-            openCheck(currentModal);
+        });
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var loginDialog = document.getElementById('show-signup-dialog');
+
+        loginDialog.addEventListener('click', function () {
+            var currentModal = document.getElementById('signup-dialog');
+
+            currentModal.close();
+            currentModal.showModal();
 
         });
     });