From 82576a626b1ee37125cc59cdab411a7b64ad1487 Mon Sep 17 00:00:00 2001
From: josephroy99 <joseph.roy@roysathome.net>
Date: Tue, 13 Feb 2024 23:50:07 +0000
Subject: [PATCH] added new design login page

---
 roysathome.net/LoginPage.html    | 359 +++++++++++++++++--------------
 roysathome.net/LoginPageOld.html | 223 +++++++++++++++++++
 2 files changed, 415 insertions(+), 167 deletions(-)
 create mode 100644 roysathome.net/LoginPageOld.html
diff --git a/roysathome.net/LoginPage.html b/roysathome.net/LoginPage.html
index 97b7e77..3f3bb8e 100644
--- a/roysathome.net/LoginPage.html
+++ b/roysathome.net/LoginPage.html
@@ -1,223 +1,248 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#000d04"/>
-    <title>Finances - Login</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Protest+Strike&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
     <style>
-
-        button {
-            background-color: white;
+        body {
+            font-family: 'Protest Strike', sans-serif;
+            background: #000000;
+            color: white;
+            font-size: 1.1em;
         }
 
-        button:hover {
-            background-color: rgb(197, 197, 197);
+        .horizontal-splitter {
+            display: flex;
+            flex: 1;
+            height: 20px;
+            justify-content: center;
+            align-self: center;
+            flex-direction: row;
         }
-
-        button:active {
-            background-color: #169D00;
-            color: black;
-        }
-
-        hr {
-            background-color: #A8A8A8;
-            margin: 1.3em 0em;
+        
+        .side-line {
+            background-color: rgb(44, 44, 44);
+            align-self: center;
+            flex: 1;
             height: 1px;
         }
 
-        body {
-            background: #000d04;
-            background: linear-gradient(133deg, rgba(0,13,4,1) 0%, rgba(3,38,0,1) 81%, rgba(0,59,18,1) 100%) no-repeat; 
-            color: #EDEDED;
-            font-family: 'Montserrat';
-            background-attachment: fixed; /*edit*/
+        .or-text {
+            flex-basis: 0px;
+            margin-left: 5px;
+            margin-right: 5px;
+            color: rgb(167, 167, 167);
         }
 
-        span {
-            display: inline-block;
+        .main-container {
+            display: flex;
         }
 
-        .vertical-break {
-            width: 1px;
-            min-width: none;
-            height: 600px;
-            background-color: #424242;
-            margin-top: 20px;
+        .logo-container {
+            display: flex;
+            flex: 1.5;
         }
 
-        .control-regions {
-            padding: 50px;
-            vertical-align: top;
-            font-size: 24px;
+        .login-section {
+            display: block;
+            flex: 1;
+            margin: 45vh 150px 0px 0px;
+            transform: translate(0px, -50%);
         }
 
-        .control-regions h1 {
-            font-weight: 400;
-            font-size: 2.1em;
-            width: 6em;
-            text-align: left;
-            margin: 0px;
-        }
-
-        .control-regions p {
-            font-weight: 200;
-            text-align: left;
-            margin: 0px;
-        }
-
-        .control-regions input {
-            background-color: #09190B;
-            color: #EDEDED;
-            border: #052400;
-            border-style: solid;
-            border-width: 2px;
-            border-radius: 5px;
-            font-weight: 100;
-            text-align: left;
-            font-size: 1em;
-            width: 100%;
-            outline: none;
-            caret-color: white;
-            margin: 0px;
-            padding: 6px;
-
-            box-sizing:border-box;
-            -moz-box-sizing:border-box;
-        }
-
-        .control-regions button {
+        .input-button {
             width: 100%;
+            font-size: larger;
+            padding-top: 10px;
+            padding-bottom: 10px;
             border: none;
-            border-radius: 5px;
-            font-size: 1em;
-            padding: 0.4em;
-            font-weight: 500;
+            background-color: white;
+            border-radius: 10000px;
+            margin-top: 15px;
+            margin-bottom: 15px;
+            font-weight: bolder;
         }
 
-        .input-container {
-            margin-bottom: 1em;
-            margin-top: 1em;
+        .input-button:hover {
+            background-color: #dedede;
         }
 
-        .input-container-region {
-            margin-bottom: 30px;
+        .input-text {
+            width: 100%;
+            margin: 0px;
         }
 
-        .green-bar {
-            background-color: #169D00;
-            height: 0.2em;
-            width: 50%;
-            margin-bottom: 3em;
+        .slogan {
+            font-family: 'Protest Strike', sans-serif;
+            margin-top: 0px;
         }
 
-        .control-regions .forgot-password {
-            font-size: 0.6em;
-            color:#169D00;
-            font-weight: 300;
-            margin: 30px 0em;
+        .company-name {
+            font-family: 'Protest Strike', sans-serif;
+            font-size: 100px;
+            margin-top: 0px;
         }
 
-        .signup-section button {
-            margin-top: 50px;
+        dialog {
+            position: absolute;
+            border: none;
+            left: 50%;
+            top: 50%;
+            margin: 0px;
+            transform: translate(-50%,-50%);
+            border-radius: 20px;
+            width: 500px;
+            height: 500px;
+            background: black;
+            padding: 0px;
+            box-sizing: border-box;
         }
 
-        @media only screen and (max-width: 1100px) {
-            .signup-section {
-                display: none;
+            dialog::backdrop {
+                background: rgba(255, 255, 255, 0.388);
             }
 
-            .control-regions h1 {
-                font-size: 1.6em;
+            dialog input {
+                box-sizing: border-box;
+                margin: 50px;
+                width: calc(100% - 100px);
+                border: none;
+                padding: 10px;
+                border-radius: 100000px;
             }
 
-            .only-mobile {
-                display: inline;
-            }
-            
-            .green-bar {
-                margin-bottom: 2em;
+        @media (prefers-color-scheme: dark) {
+            body {
+                background: white;
+                color: black;
             }
 
-            .vertical-break {
+            dialog {
+                background: white;
+                color: black;
+            }
+
+                dialog::backdrop {
+                    background: rgba(0, 0, 0, 0.388);
+                }
+
+                dialog input {
+                    border: black 2px solid;
+                }
+            .input-button {
+                background: black;
+                color:white;
+            }
+
+            .input-button:hover {
+                background-color: rgb(44, 44, 44);
+            }
+        }
+
+        .signup-button {
+            background-color: #00bfff;
+            color: #ffffff;
+        }
+
+            .signup-button:hover {
+                background-color: #15a3d2;
+            }
+
+        @media only screen and (max-width: 1400px) and (min-width: 800px) {
+
+            .logo-container {
                 display: none;
             }
 
             .login-section {
-                display: block;
-                margin-left: auto;
-                margin-right: auto;
-                padding-top: 1em;
+                margin: 30vh 10vw 0px 10vw;
             }
         }
 
-        @media only screen and (min-width: 1100px) {
-            .only-mobile {
+        @media only screen and (max-width: 800px) {
+            .company-name {
+                font-size: 50px;
+            }
+
+            .logo-container {
                 display: none;
             }
 
-            .control-regions {
-                width: 30%;
+            .login-section {
+                margin: 30vh 10vw 0px 10vw;
             }
         }
+
     </style>
-  </head>
-  <body>
-    <div>
-        <span class="login-section control-regions">
-            <h1>Login To Finance</h1>
-            <div class="green-bar"></div>
-            <div class="input-container-region">
-                <div class="input-container">
-                    <p>Email</p>
-                    <input type="text">
+</head>
+<body>
+    <div class="main-container">
+        <div class="logo-container">
+            <span></span>
+        </div>
+
+        <div class="login-section">
+            <span>
+                <h1 class="company-name">
+                    DinoSavings
+                </h1>
+
+                <h2 class="slogan">
+                    Sort Your Finances.
+                </h2>
+            </span>
+            <input id="show-login-dialog" class="input-button signup-button" type="button" value="Create account">
+            <div class="horizontal-splitter">
+                <div class="side-line">
+
                 </div>
-                <div class="input-container">
-                    <p>Password</p>
-                    <input type="text">
+                <div class="or-text">
+                    <span>or</span>
+                </div>
+                <div class="side-line">
+
                 </div>
             </div>
-            <p class="forgot-password">Forgot password?</p>
-            <button>
-                Login
-            </button>
-            
-            <div class="only-mobile">
-                <hr>
-    
-                <button>
-                    Sign Up
-                </button>
-            </div>
-        </span>
+            <input class="input-button" type="button" value="Login">
+        </div>
 
-        <span class="vertical-break"></span>
-        
-        <span class="signup-section control-regions">
-            <h1>Sign Up To Finance</h1>
-            <div class="green-bar"></div>
-
-            <div class="input-container-region">
-                <div class="input-container">
-                    <p>Email</p>
-                    <input type="text">
-                </div>
-                <div class="input-container">
-                    <p>Password</p>
-                    <input type="text">
-                </div>
-            </div>
-
-            <button>
-                Sign Up
-            </button>
-        </span>
     </div>
-  </body>
+
+    <dialog id="signup-dialog">
+        <input type="text" placeholder="Enter your Email">
+    </dialog>
+
+    <dialog id="login-dialog">
+        <input type="text" placeholder="Enter your Username or Email">
+    </dialog>
+</body>
 </html>
+<script>
+    function openCheck(dialog) {
+        if (dialog.open) {
+            console.log("Dialog open");
+        } else {
+            console.log("Dialog closed");       
+        }
+
+        return dialog.open;
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var loginDialog = document.getElementById('show-login-dialog');
+
+        loginDialog.addEventListener('click', function () {
+            var currentModal = document.getElementById('login-dialog');
+            
+                currentModal.close();
+                currentModal.showModal();
+
+            openCheck(currentModal);
+
+        });
+    });
+</script>
\ No newline at end of file
diff --git a/roysathome.net/LoginPageOld.html b/roysathome.net/LoginPageOld.html
new file mode 100644
index 0000000..97b7e77
--- /dev/null
+++ b/roysathome.net/LoginPageOld.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000d04"/>
+    <title>Finances - Login</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+
+        button {
+            background-color: white;
+        }
+
+        button:hover {
+            background-color: rgb(197, 197, 197);
+        }
+
+        button:active {
+            background-color: #169D00;
+            color: black;
+        }
+
+        hr {
+            background-color: #A8A8A8;
+            margin: 1.3em 0em;
+            height: 1px;
+        }
+
+        body {
+            background: #000d04;
+            background: linear-gradient(133deg, rgba(0,13,4,1) 0%, rgba(3,38,0,1) 81%, rgba(0,59,18,1) 100%) no-repeat; 
+            color: #EDEDED;
+            font-family: 'Montserrat';
+            background-attachment: fixed; /*edit*/
+        }
+
+        span {
+            display: inline-block;
+        }
+
+        .vertical-break {
+            width: 1px;
+            min-width: none;
+            height: 600px;
+            background-color: #424242;
+            margin-top: 20px;
+        }
+
+        .control-regions {
+            padding: 50px;
+            vertical-align: top;
+            font-size: 24px;
+        }
+
+        .control-regions h1 {
+            font-weight: 400;
+            font-size: 2.1em;
+            width: 6em;
+            text-align: left;
+            margin: 0px;
+        }
+
+        .control-regions p {
+            font-weight: 200;
+            text-align: left;
+            margin: 0px;
+        }
+
+        .control-regions input {
+            background-color: #09190B;
+            color: #EDEDED;
+            border: #052400;
+            border-style: solid;
+            border-width: 2px;
+            border-radius: 5px;
+            font-weight: 100;
+            text-align: left;
+            font-size: 1em;
+            width: 100%;
+            outline: none;
+            caret-color: white;
+            margin: 0px;
+            padding: 6px;
+
+            box-sizing:border-box;
+            -moz-box-sizing:border-box;
+        }
+
+        .control-regions button {
+            width: 100%;
+            border: none;
+            border-radius: 5px;
+            font-size: 1em;
+            padding: 0.4em;
+            font-weight: 500;
+        }
+
+        .input-container {
+            margin-bottom: 1em;
+            margin-top: 1em;
+        }
+
+        .input-container-region {
+            margin-bottom: 30px;
+        }
+
+        .green-bar {
+            background-color: #169D00;
+            height: 0.2em;
+            width: 50%;
+            margin-bottom: 3em;
+        }
+
+        .control-regions .forgot-password {
+            font-size: 0.6em;
+            color:#169D00;
+            font-weight: 300;
+            margin: 30px 0em;
+        }
+
+        .signup-section button {
+            margin-top: 50px;
+        }
+
+        @media only screen and (max-width: 1100px) {
+            .signup-section {
+                display: none;
+            }
+
+            .control-regions h1 {
+                font-size: 1.6em;
+            }
+
+            .only-mobile {
+                display: inline;
+            }
+            
+            .green-bar {
+                margin-bottom: 2em;
+            }
+
+            .vertical-break {
+                display: none;
+            }
+
+            .login-section {
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+                padding-top: 1em;
+            }
+        }
+
+        @media only screen and (min-width: 1100px) {
+            .only-mobile {
+                display: none;
+            }
+
+            .control-regions {
+                width: 30%;
+            }
+        }
+    </style>
+  </head>
+  <body>
+    <div>
+        <span class="login-section control-regions">
+            <h1>Login To Finance</h1>
+            <div class="green-bar"></div>
+            <div class="input-container-region">
+                <div class="input-container">
+                    <p>Email</p>
+                    <input type="text">
+                </div>
+                <div class="input-container">
+                    <p>Password</p>
+                    <input type="text">
+                </div>
+            </div>
+            <p class="forgot-password">Forgot password?</p>
+            <button>
+                Login
+            </button>
+            
+            <div class="only-mobile">
+                <hr>
+    
+                <button>
+                    Sign Up
+                </button>
+            </div>
+        </span>
+
+        <span class="vertical-break"></span>
+        
+        <span class="signup-section control-regions">
+            <h1>Sign Up To Finance</h1>
+            <div class="green-bar"></div>
+
+            <div class="input-container-region">
+                <div class="input-container">
+                    <p>Email</p>
+                    <input type="text">
+                </div>
+                <div class="input-container">
+                    <p>Password</p>
+                    <input type="text">
+                </div>
+            </div>
+
+            <button>
+                Sign Up
+            </button>
+        </span>
+    </div>
+  </body>
+</html>
