roysathome.net/LoginPage.html

@@ -90,14 +90,14 @@
 
         dialog {
             position: absolute;
-            border: none;
+            border: black solid 2px;
             left: 50%;
             top: 50%;
             margin: 0px;
             transform: translate(-50%,-50%);
             border-radius: 20px;
             width: 500px;
-            height: 540px;
+            height: 500px;
             background: white;
             padding: 0px;
             box-sizing: border-box;
@@ -109,60 +109,13 @@
 
             dialog input {
                 box-sizing: border-box;
-                width: 100%;
+                margin: 50px;
-                border: #5b8dff solid 2px;
+                width: calc(100% - 100px);
+                border: none;
                 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;
@@ -182,10 +135,6 @@
                     border: black 2px solid;
                 }
 
-                dialog img:hover {
-                    background-color: rgb(255, 255, 255, 0.588);
-                }
-
             .input-button {
                 background: white;
                 color:black;
@@ -248,7 +197,7 @@
                     Sort Your Finances.
                 </h2>
             </span>
-            <input id="show-signup-dialog" class="input-button signup-button" type="button" value="Create account">
+            <input id="show-login-dialog" class="input-button signup-button" type="button" value="Create account">
             <div class="horizontal-splitter">
                 <div class="side-line">
 
@@ -260,64 +209,30 @@
 
                 </div>
             </div>
-            <input id="show-login-dialog" class="input-button" type="button" value="Login">
+            <input class="input-button" type="button" value="Login">
         </div>
 
     </div>
 
-    <dialog id="signup-dialog" class="signup-dialog">
+    <dialog id="signup-dialog">
-        <img src="x-button.png" class="close-dialog"/>
+        <input type="text" placeholder="Enter your Email">
-        <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" class="login-dialog">
+    <dialog id="login-dialog">
-        <img src="x-button.png" class="close-dialog"/>
+        <input type="text" placeholder="Enter your Username or Email">
-        <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>
-    document.addEventListener('DOMContentLoaded', function () {
+    function openCheck(dialog) {
+        if (dialog.open) {
+            console.log("Dialog open");
+        } else {
+            console.log("Dialog closed");       
+        }
 
-        var allCloseButtons = document.querySelectorAll('.close-dialog');
+        return dialog.open;
-
+    }
-        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');
@@ -328,17 +243,7 @@
                 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();
 
         });
     });