Skip to content

Commit

Permalink
Hover over messages in the sign-up form
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sandali-Upekha
Sandali-Upekha committed Nov 2, 2023
1 parent 068f7f6 commit 4443281
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 69 deletions.
133 changes: 71 additions & 62 deletions app/views/signup.view.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,42 @@
require_once('../app/views/layout/header.php');
require_once('../app/views/components/navbar-auth.php');
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="login-container">

<div class="login-form">
<div id="select" class="col ">
<div class="header">
<h1 class="signup-text">
Who are you?
</h1>
</div>
<div class="row">
<button class="signup-card" onclick="load('customer')">
<div class="btn-div">
<h3>Customer</h3>
<p>Plan your journey now!</p>
</div>
</button>
</div>
<div class="row">
<button class="signup-card" onclick="load('guide')">
<div class="btn-div">
<h3>Guide</h3>
<p>Explore the extraordinary now!</p>
</div>
</button>
</div>
<div class="row">
<button class="signup-card" onclick="load('rental-service')">
<div class="btn-div">
<h3>Rental Service</h3>
<p>Register your business now!</p>
</div>
</button>
<div class="login-form">
<div id="select" class="col ">
<div class="header">
<h1 class="signup-text">
Who are you?
</h1>
</div>
<div class="row">
<button class="signup-card" onclick="load('customer')">
<div class="btn-div">
<h3>Customer</h3>
<p>Plan your journey now!</p>
</div>
</button>
</div>
<div class="row">
<button class="signup-card" onclick="load('guide')">
<div class="btn-div">
<h3>Guide</h3>
<p>Explore the extraordinary now!</p>
</div>
</button>
</div>
<div class="row">
<button class="signup-card" onclick="load('rental-service')">
<div class="btn-div">
<h3>Rental Service</h3>
<p>Register your business now!</p>
</div>
</button>
</div>
</div>
</div>


<form hidden id="customer" action="<?= ROOT_DIR ?>/signup/customer" method="post">
Expand All @@ -46,22 +48,22 @@


<label for="name">Name</label>
<input type="text" name="name" id="name" required>
<input type="text" name="name" id="name" required></br>

<label for="address">Address</label>
<textarea class="address-text" name="address" id="address" required> </textarea>
<textarea class="address-text" name="address" id="address" required> </textarea></br>

<label for="email">Email</label>
<input type="text" name="email" id="email" required>
<input type="text" name="email" id="email" required></br>

<label for="number">Mobile Number</label>
<input type="text" name="number" id="number" required>
<input type="text" name="number" id="number" required></br>

<label for="nic">NIC Number</label>
<input type="text" name="nic" id="nic" required>
<input type="text" name="nic" id="nic" required></br>

<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="password" name="password" id="password" required></br>

<input type="submit" name="submit" value="Signup">
<div id="error-message"></div>
Expand All @@ -75,30 +77,32 @@
<?php endif; ?>

<label for="business_name">Business Name</label>
<input type="text" name="name" id="business_name">
<input type="text" name="name" id="business_name"> </br>

<label for="address">Address</label>
<textarea class="address-text" name="address" id="address" required> </textarea>
<textarea class="address-text" name="address" id="address" required> </textarea></br>

<label for="registration_number">Business Registration Number/NIC</label>
<input type="text" name="regNo" id="registration_number">
<input type="text" name="regNo" id="registration_number"></br>

<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile" id="number">
<input type="text" name="mobile" id="number"></br>

<label for="email">Email Address</label>
<input type="text" name="email" id="email">
<input type="text" name="email" id="email"></br>


<div class="file-input-container">
<div class="tooltip-container">
<button class="tooltip-trigger">Hover over me</button>
<div class="tooltip">This is a tooltip message.</div>
<div class="tooltip-container" class="hoverable-are">
Upload verification Documents
<i class="fas fa-question-circle tooltip-trigger"></i>
<div class="tooltip">Documents such as business registration certificate or any other document which can verify your business is legitimate.</div>
<div class="file-input-container">
<label for="verification_document" class="file-label">Choose Verification Document</label>
<input type="file" name="verification_document" id="verification_document" class="file-input">
</div>
<label for="verification_document" class="file-label">Choose Verification Document</label>
<input type="file" name="verification_document" id="verification_document" class="file-input">
</div>
</div></br>
<label for="password">Password</label>
<input type="password" name="password" id="password">
<input type="password" name="password" id="password"></br>

<input type="submit" name="submit" value="Signup">
<div id="error-message"></div>
Expand All @@ -116,34 +120,39 @@


<label for="name">Name</label>
<input type="text" name="name" id="name" required>
<input type="text" name="name" id="name" required></br>

<label for="address">Address</label>
<textarea class="address-text" name="address" id="address" required> </textarea>
<textarea class="address-text" name="address" id="address" required> </textarea></br>

<label for="nic">NIC</label>
<input type="text" name="nic" id="nic" required>
<input type="text" name="nic" id="nic" required></br>

<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile" id="number" required>
<input type="text" name="mobile" id="number" required></br>

<label for="email">Email Address</label>
<input type="text" name="email" id="email" required>
<input type="text" name="email" id="email" required></br>

<label for="gender">Gender</label>
<select name="gender" id="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<div class="file-input-container">
<label for="verification_document" class="file-label">Choose Verification Document</label>
<input type="file" name="verification_document" id="verification_document" class="file-input">
</div>
</select></br>

<div class="tooltip-container" class="hoverable-are">
Upload verification Documents
<i class="fas fa-question-circle tooltip-trigger"></i>
<div class="tooltip">Documents such as Tourist Board License or an endorsement letter from Grama Niladhari/local police station to verify your authenticity and credibility.</div>
<div class="file-input-container">
<label for="verification_document" class="file-label">Choose Verification Document</label>
<input type="file" name="verification_document" id="verification_document" class="file-input">
</div>
</div></br>

<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="password" name="password" id="password" required></br>

<input type="submit" name="submit" value="Signup">
<div id="error-message"></div>
Expand Down
52 changes: 45 additions & 7 deletions public/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,17 +492,55 @@ body {


.login-container .address-text{
width: 100%; /* Set width to be the same as the parent form */
background-color: #ECECEC !important; /* Set the background color to blue */
height: 10em; /* Set the height to display two lines of text */
/*padding: 10px; /* Optional: Add some padding for spacing inside the textarea */
border: 1px solid #ccc; /* Optional: Add a border for styling */
width: 100%;
background-color: #ECECEC !important;
height: 10em;
border: 1px solid #ccc;
resize: none;
font-family:'Times New Roman';/*, 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;*/
font-family:'Times New Roman';
}
/* backdrop-filter: blur(67px); */

.signup-card:hover {
.login-container .tooltip-container {
position: relative;
display: inline-block;
}

.login-container .tooltip {
visibility: hidden;
position: absolute;
background-color: #fff;
color: #BCAB86;
border-radius: 4px;
padding: 5px;
top:0%;
left:50%;
transform: translateX(-50%);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
width: 75%;
}
.login-container .tooltip-trigger {
background-color: white;
color: #BCAB86;
border-radius: 50%;
padding: 1px;
margin: 1px;
font-size: 1.5rem;
position: relative;
}

.login-container .tooltip-trigger:hover + .tooltip {
visibility: visible;
opacity: 1;
}

.login-container .hoverable-area {
padding: 10px; /* Adjust the padding to increase the hoverable area */
}

.login-container .signup-card:hover {
background-color: #f0f0f0;
}
.login-form form {
Expand Down

0 comments on commit 4443281

Please sign in to comment.