diff --git a/app/views/components/navbar.php b/app/views/components/navbar.php new file mode 100644 index 00000000..582d123b --- /dev/null +++ b/app/views/components/navbar.php @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/app/views/home.view.php b/app/views/home.view.php index 061e4b8a..ee0982b4 100644 --- a/app/views/home.view.php +++ b/app/views/home.view.php @@ -1,24 +1,10 @@ - + diff --git a/app/views/login.view.php b/app/views/login.view.php index 520d66c9..c605ed87 100644 --- a/app/views/login.view.php +++ b/app/views/login.view.php @@ -1,11 +1,13 @@
-
+ +
diff --git a/app/views/signup.view.php b/app/views/signup.view.php index b9a9513f..1f20cfb0 100644 --- a/app/views/signup.view.php +++ b/app/views/signup.view.php @@ -1,13 +1,36 @@ - - - - - Signup - - -

Signup

- + +
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + +

Customer Sign Up

', $errors)?>
@@ -20,11 +43,64 @@ - Login + + + + + + +

+ Have an account? Login +

+ + + +

+
+ + + + + + + diff --git a/public/assets/css/style.css b/public/assets/css/style.css index a208aee7..f8c14c14 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,4 +1,3 @@ -/* Navbar container */ .border-box { @@ -6,21 +5,19 @@ } .navbar { - background-color: #F4F4F4; /* Off-white background */ + background-color: #F4F4F4; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } -/* Logo styling */ .logo { - color: #4C5039; /* Complementary color for text */ + color: #4C5039; font-size: 24px; font-weight: bold; } -/* Menu styling */ .nav-menu { list-style: none; display: flex; @@ -32,13 +29,12 @@ .nav-menu-item a { text-decoration: none; - color: #4C5039; /* Complementary color for text */ + color: #4C5039; font-weight: bold; } -/* Login button styling */ .login-button { - background-color: #F4F4F4; /* Complementary color */ + background-color: #F4F4F4; color: #4C5039; padding: 10px 20px; border-radius: 5px; @@ -53,7 +49,7 @@ } .section-button { - background-color: #F4F4F4; /* Complementary color */ + background-color: #F4F4F4; color: #4C5039; padding: 10px 20px; width: fit-content; @@ -69,7 +65,6 @@ } -/* Media query for mobile responsiveness */ @media screen and (max-width: 768px) { .nav-menu { display: none; @@ -81,7 +76,7 @@ position: absolute; top: 60px; left: 0; - background-color: #F4F4F4; /* Off-white background */ + background-color: #F4F4F4; width: 100%; padding: 10px 0; } @@ -92,15 +87,14 @@ .nav-menu-toggle { display: block; - color: #4C5039; /* Complementary color for text */ + color: #4C5039; font-size: 24px; cursor: pointer; } } -/* Background color */ body { - /* background-color: #F4F4F4; Off-white background */ + overflow-x: hidden; margin: 0; @@ -131,7 +125,6 @@ body { flex: 100%; max-width: 100%; align-items: center; - /* flex-wrap: nowrap; */ } .col img { width: 100%; @@ -196,7 +189,7 @@ body { .home-container { margin: 10px 0; border-radius: 10px; - backdrop-filter: none; /* Remove blur on small screens */ + backdrop-filter: none; } } @@ -298,21 +291,26 @@ body { -/* Login Page */ +/* Login Page and Sign-up */ .login-container { display: flex; justify-content: center; align-items: center; - width: 1300px; - height: 600px; + width: 100%; + height: 100%; border-radius: 10px; background: #ECECEC; backdrop-filter: blur(67px); } .login-form { + display: flex; + justify-content: center; + flex-direction: column; max-width: 450px; + width:450px; + height: 500px; padding: 40px; border-radius: 10px; background-color: #fff; @@ -331,7 +329,7 @@ body { .login-form input[type="password"] { display: block; background-color: #ECECEC; - width: 350px; + width: 100%; padding: 10px; margin-bottom: 10px; border: none; @@ -383,3 +381,27 @@ body { font-size: 10px; } +/* Signup */ + +.signup-card { + display: flex; + justify-content: center; + align-items: center; + width: 350px; + height: 100px; + border-radius: 10px; + background: #ECECEC; + margin: 20px 0; + text-align: center; + border: 1px solid #ccc; + cursor: pointer; + + + /* backdrop-filter: blur(67px); */ +} +.signup-card:hover { + background-color: #f0f0f0; +} +.login-form form { + flex-direction: column; +} \ No newline at end of file diff --git a/public/assets/js/signup.js b/public/assets/js/signup.js new file mode 100644 index 00000000..601c844d --- /dev/null +++ b/public/assets/js/signup.js @@ -0,0 +1,15 @@ +function load(id){ + document.getElementById(id).style.display = "flex"; + document.getElementById('select').style.display = "none"; + +} + +// Get Url +var urlFragment = window.location.hash; + +if (urlFragment.startsWith('#')) { +urlFragment = urlFragment.slice(1); +load(urlFragment) +} + +console.log(urlFragment); \ No newline at end of file