From 4bff64d240f4f50853c2ca6aaadc43980a126ae5 Mon Sep 17 00:00:00 2001
From: Ketanop321 <ketanop473@gmail.com>
Date: Sat, 10 Aug 2024 00:15:11 +0530
Subject: [PATCH] added icons for input text

---
 tools/sip.html | 141 ++++++++++++++++++++++++++++++++-----------------
 1 file changed, 94 insertions(+), 47 deletions(-)

diff --git a/tools/sip.html b/tools/sip.html
index 579a3dc..1895d74 100644
--- a/tools/sip.html
+++ b/tools/sip.html
@@ -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>