From a450e8c3f0def96c94acc91bd3ecd53f4f64127d Mon Sep 17 00:00:00 2001
From: josephroy99 <joseph.roy@roysathome.net>
Date: Wed, 14 Feb 2024 20:46:37 +0000
Subject: [PATCH] updated login/signup page

---
 roysathome.net/LoginPage.html | 135 +++++++++++++++++++++++++++++-----
 roysathome.net/x-button.png   | Bin 0 -> 568 bytes
 2 files changed, 115 insertions(+), 20 deletions(-)
 create mode 100644 roysathome.net/x-button.png

diff --git a/roysathome.net/LoginPage.html b/roysathome.net/LoginPage.html
index 37f8ab9..3d9ebfc 100644
--- a/roysathome.net/LoginPage.html
+++ b/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();
 
         });
     });
diff --git a/roysathome.net/x-button.png b/roysathome.net/x-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a2c76fe0f087f847e3ae312db9fd2cdf32d9566
GIT binary patch
literal 568
zcmV-80>}M{P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS00009a7bBm0002&0002&0eL8Ky#N3J8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10kug)K~z|UwU;|i!$1&*zkds-rsW!&oC1W>)9@+)30gP;JrV+m
zM*}rQa*Nna3b;XfN>XGf0LcPBcGu37E04c#E$_^Z=JWZ+a=E+)wt<DD3-A4eHN<Q-
z+mUnyYy#6P%g&VN`7^LvdTu4@$b0|PC%h<%eKWfUTxt2m@xAkMI5WF1iei7waDXib
zEGlw(lW2egES#hZV6_g37WhiirSslTBpo(LJmh(P+%w$F?9_WdQ7K{1%pU3zfYae{
zc-s^FWHcJx0q9R+XNeg2KY^|ivG7WPREZRLtw5|qD!fr3R6^2cD!f&oO+u2HS>1bD
z;Xwjz5;YM74;F}&2!=-qlq4P-@}l4n{z-qMRajEgrh)}ZN397U;3lSbg#Lt0=e#O{
zdq?XF1B#4QtOtLIMuCtD=bSsBx|Ih>G?n7u^4g_=)itB&+MX&=)sB-JONzwb3rR9O
zRib<)>kLnkP~Y%a3H^*quQd;Lnvw#p<zx3VtMv{C@ZLX3I->r{f93cd6nlpUN^Ck{
zx-NK|gqclUmStza3-AHFNgDS(8J8r+z&r3^X3vAc;QR~5HS4yzdRl@20000<MNUMn
GLSTaDOYmF(

literal 0
HcmV?d00001