Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Login Signup pages #20

Merged
merged 2 commits into from
Sep 28, 2023
Merged

Login Signup pages #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2bc141
feat:Signup
nsavinda Sep 28, 2023
4a1b6d6
fix:login signup pages
nsavinda Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions app/views/components/navbar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<nav class="navbar">
<div class="logo">
<img src="<?= ROOT_DIR ?>/assets/images/logo.png" alt="logo">
</div>
<ul class="nav-menu">
<li class="nav-menu-item"><a href="#">Home</a></li>
<li class="nav-menu-item"><a href="#">About</a></li>
<li class="nav-menu-item"><a href="#">Guides</a></li>
<li class="nav-menu-item"><a href="#">Rental Services</a></li>
<li class="nav-menu-item"><a href="#">Blogs</a></li>
<li class="nav-menu-item"><a href="#">Tips & Knowhows</a></li>
<li class="nav-menu-item"><a href="#">Complaints</a></li>
</ul>
<div class="login-button"><a href="#">Login</a></div>
</nav>
18 changes: 2 additions & 16 deletions app/views/home.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,10 @@
<?php
require_once('../app/views/layout/header.php');


require_once('../app/views/components/navbar.php');
?>

<nav class="navbar">
<div class="logo">
<img src="<?= ROOT_DIR ?>/assets/images/logo.png" alt="logo">
</div>
<ul class="nav-menu">
<li class="nav-menu-item"><a href="#">Home</a></li>
<li class="nav-menu-item"><a href="#">About</a></li>
<li class="nav-menu-item"><a href="#">Guides</a></li>
<li class="nav-menu-item"><a href="#">Rental Services</a></li>
<li class="nav-menu-item"><a href="#">Blogs</a></li>
<li class="nav-menu-item"><a href="#">Tips & Knowhows</a></li>
<li class="nav-menu-item"><a href="#">Complaints</a></li>
</ul>
<div class="login-button"><a href="#">Login</a></div>
</nav>


<?php require_once('../app/views/sections/hero.php');
?>
Expand Down
5 changes: 4 additions & 1 deletion app/views/login.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
<?php
require_once('../app/views/layout/header.php');
require_once('../app/views/components/navbar.php');


?>
<div class="login-container">
<!-- <h1>Login</h1> -->
<form class="login-form" action="<?=ROOT_DIR?>/login" method="post">
<div class="login-form">
<form action="<?=ROOT_DIR?>/login" method="post">
<h2>Login</h2>


Expand All @@ -31,6 +33,7 @@
<!-- <a href="<?=ROOT_DIR?>/signup" title="Signup">Signup</a>
<a href="<?=ROOT_DIR?>" title="Home">Home</a> -->
</div>
</div>



Expand Down
102 changes: 89 additions & 13 deletions app/views/signup.view.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Signup</title>
</head>
<body>
<h1>Signup</h1>
<form action="<?=ROOT_DIR?>/signup" method="post">
<?php
require_once('../app/views/layout/header.php');
require_once('../app/views/components/navbar.php');


?>
<div class="login-container">
<!-- <h1>Signup</h1> -->
<div class="login-form">
<div id="select" class="col ">
<div class="row">

<div class="signup-card" onclick="load('customer')">
Customer
</div>
</div>
<div class="row">

<div class="signup-card" onclick="load('rental-service')">
Rental Services
</div>
</div>
<div class="row">

<div class="signup-card" onclick="load('guide')">
Guide
</div>
</div>
</div>


<form hidden id="customer" action="<?=ROOT_DIR?>/signup" method="post">
<h2>Customer Sign Up</h2>
<?php if(isset($errors)): ?>
<div> <?= implode('<br>', $errors)?> </div>
<?php endif; ?>
Expand All @@ -20,11 +43,64 @@
<input type="submit" name="submit" value="Signup">

</form>
<a href="<?=ROOT_DIR?>/login" title="Login">Login</a>
<!-- Rental Services -->
<form hidden id="rental-service" action="<?=ROOT_DIR?>/signup" method="post">
<h2>Rental Services Sign Up</h2>

<?php if(isset($errors)): ?>
<div> <?= implode('<br>', $errors)?> </div>
<?php endif; ?>


<label for="email">Email</label>
<input type="text" name="email" id="email">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="Signup">

</form>

<!-- Guide -->
<form hidden id="guide" action="<?=ROOT_DIR?>/signup" method="post">
<h2>Guide Sign Up</h2>

<?php if(isset($errors)): ?>
<div> <?= implode('<br>', $errors)?> </div>
<?php endif; ?>


<label for="email">Email</label>
<input type="text" name="email" id="email">
<label for="password">Password</label>
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="Signup">

</form>

<p>
Have an account? <a href="<?=ROOT_DIR?>/login">Login</a>
<p>

<!-- <a href="<?=ROOT_DIR?>/login" title="Login">Login</a>
<br>
<a href="<?=ROOT_DIR?>" title="Home">Home</a>
</body>
</html>
<a href="<?=ROOT_DIR?>" title="Home">Home</a> -->

</div>
</div>



<script>


</script>
<script src="<?=ROOT_DIR?>/assets/js/signup.js"></script>

<?php
require_once('../app/views/layout/footer.php');


?>



Expand Down
62 changes: 42 additions & 20 deletions public/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
/* Navbar container */


.border-box {
box-sizing: border-box;
}

.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;
Expand All @@ -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;
Expand All @@ -53,7 +49,7 @@
}

.section-button {
background-color: #F4F4F4; /* Complementary color */
background-color: #F4F4F4;
color: #4C5039;
padding: 10px 20px;
width: fit-content;
Expand All @@ -69,7 +65,6 @@
}


/* Media query for mobile responsiveness */
@media screen and (max-width: 768px) {
.nav-menu {
display: none;
Expand All @@ -81,7 +76,7 @@
position: absolute;
top: 60px;
left: 0;
background-color: #F4F4F4; /* Off-white background */
background-color: #F4F4F4;
width: 100%;
padding: 10px 0;
}
Expand All @@ -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;

Expand Down Expand Up @@ -131,7 +125,6 @@ body {
flex: 100%;
max-width: 100%;
align-items: center;
/* flex-wrap: nowrap; */
}
.col img {
width: 100%;
Expand Down Expand Up @@ -196,7 +189,7 @@ body {
.home-container {
margin: 10px 0;
border-radius: 10px;
backdrop-filter: none; /* Remove blur on small screens */
backdrop-filter: none;
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
15 changes: 15 additions & 0 deletions public/assets/js/signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);