Skip to content

Commit

Permalink
added icons for input text
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ketanop321
Ketanop321 committed Aug 9, 2024
1 parent a3b4aed commit 4bff64d
Showing 1 changed file with 94 additions and 47 deletions.
141 changes: 94 additions & 47 deletions tools/sip.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,59 +242,106 @@
</div>
<div class="navbar-btn d-none d-sm-inline-block">
<!-- Login Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" style="display: flex; justify-content: right;">&times;</span>
<div class="mt-3">
<h3 class="join">Login to join us....</h3>
<form class="px-3 py-4" id="loginForm">
<div class="form-group">
<label class="d-flex">Username</label>
<input type="text" placeholder="Username" class="form-control" required />
</div>
<div class="form-group">
<label class="d-flex">Password</label>
<input type="password" placeholder="Password" class="form-control" required>
<button type="button" class="toggle-password-btn"><i class="fa-solid fa-eye"></i></button>
</div>
<div class="form-check d-flex">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Remember me</label>
</div>
</form>
<button class="main-btn mt-2 w-100 mb-3" onclick="submitForm('loginForm')">Sign in</button>
<p class="text-center">Don't have an account? <a href="#" id="registerLink">Register</a></p>
<!-- Login Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" style="display: flex; justify-content: right;">&times;</span>
<div class="mt-3">
<h3 class="join">Login to join us....</h3>
<form class="px-3 py-4" id="loginForm">
<div class="form-group">
<label class="d-flex">Username</label>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input type="text" placeholder="Username" class="form-control" required />
</div>
</div>
</div>
<div class="form-group">
<label class="d-flex">Password</label>
<div class="input-container">
<i class="fa fa-lock icon"></i>
<input type="password" placeholder="Password" class="form-control" required>
<button type="button" class="toggle-password-btn"><i class="fa fa-eye"></i></button>
</div>
</div>
<div class="form-check d-flex">
<input type="checkbox" class="form-check-input">
<label class="form-check-label">Remember me</label>
</div>
</form>
<button class="main-btn mt-2 w-100 mb-3" onclick="submitForm('loginForm')">Sign in</button>
<p class="text-center">Don't have an account? <a href="#" id="registerLink">Register</a></p>
</div>
</div>
</div>

<!-- Register Modal -->
<div id="registerModal" class="modal">
<div class="modal-content">
<span class="close" style="display: flex; justify-content: right;">&times;</span>
<div class="mt-3">
<h3 class="join">Register to join us....</h3>
<form class="px-3 py-4" id="registerForm">
<div class="form-group">
<label class="d-flex">Email</label>
<input type="email" placeholder="Email" class="form-control" required />
</div>
<div class="form-group">
<label class="d-flex">Username</label>
<input type="text" placeholder="Username" class="form-control" required />
</div>
<div class="form-group">
<label class="d-flex">Password</label>
<input type="password" placeholder="Password" class="form-control" required>
<button type="button" class="toggle-password-btn"><i class="fa-solid fa-eye"></i></button>
</div>
</form>
<button class="main-btn mt-2 w-100 mb-3" onclick="submitForm('registerForm')">Register</button>
<p class="text-center">Already have an account? <a href="#" id="loginLink">Login</a></p>
<!-- Register Modal -->
<div id="registerModal" class="modal">
<div class="modal-content">
<span class="close" style="display: flex; justify-content: right;">&times;</span>
<div class="mt-3">
<h3 class="join">Register to join us....</h3>
<form class="px-3 py-4" id="registerForm">
<div class="form-group">
<label class="d-flex">Email</label>
<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input type="email" placeholder="Email" class="form-control" required />
</div>
</div>
</div>
<div class="form-group">
<label class="d-flex">Username</label>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input type="text" placeholder="Username" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="d-flex">Password</label>
<div class="input-container">
<i class="fa fa-lock icon"></i>
<input type="password" placeholder="Password" class="form-control" required>
<button type="button" class="toggle-password-btn"><i class="fa fa-eye"></i></button>
</div>
</div>
</form>
<button class="main-btn mt-2 w-100 mb-3" onclick="submitForm('registerForm')">Register</button>
<p class="text-center">Already have an account? <a href="#" id="loginLink">Login</a></p>
</div>
</div>
</div>
<style>
.input-container {
position: relative;
width: 100%;
}

.icon {
position: absolute;
left: 10px;
top: 10%;
transform: translateY(-50%);
color: gray;
pointer-events: none;
font-size: 1.3em; /* Reduce icon size by 70% */
}

.form-control {
padding-left: 40px; /* Add padding to leave space for the icon */
}

.toggle-password-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: gray;
}

</style>
</nav>


Expand Down

0 comments on commit 4bff64d

Please sign in to comment.