From de07f2517b4c6d4a93e0d496e0159a68bbe46085 Mon Sep 17 00:00:00 2001
From: jaanvi <jaanvi.jaanvi@digimantra.com>
Date: Thu, 26 Dec 2024 12:56:45 +0000
Subject: [PATCH] Update index.html

---
 index.html | 217 +++++++++++++++++++++++++++--------------------------
 1 file changed, 109 insertions(+), 108 deletions(-)
diff --git a/index.html b/index.html
index 1e567ec..2cca712 100644
--- a/index.html
+++ b/index.html
@@ -1,109 +1,110 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  
-  <title>Multi Step Form</title>
-  <link rel="stylesheet" href="style.css">
-</head>
-<body>
-  <div class="container">
-    <form id="form1" >
-      <h3>PERSONAL DETAILS</h3>
-      <input type="text" id="full name" placeholder="Full Name" required>
-      <span class="error-message" id="fullName-error"></span>
-      <input type="email" id="email" placeholder="Email" required>
-      <span class="error-message" id="email-error"></span>
-      <input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}">
-      <span class="error-message" id="phone-error"></span>
-      <input type="number" placeholder="Age" name="age" min="18" max="100">
-      <span class="error-message" id="age-error"></span>
-
-      <label >Gender</label>
-      <label class="radio-inline">
-        <input type="radio" name="Male" checked>Male
-      </label>
-      <label class="radio-inline">
-        <input type="radio" name="Female"> Female
-      </label>
-      <label class="radio-inline">
-        <input type="radio" name="Other">Other
-      </label>
-      <span class="error-message" id="gender-error"></span>
-      
-      <div class="btn-box">
-        <button type="button" id="Next1">Next</button>
-      </div>
-      
-    </form>
-
-  <!--Perofessonal form-->
-  <form id="form2">
-    <h3>PROFESSIONAL DETAILS</h3>
-    
-     <div class="dropdown"> 
-      <label for="education">Education</label>
-     <select id="education" name="education" required>
-       <option value="" disabled selected>Select</option>
-       <option value="High School">High School</option>
-       <option value="Bachelor's Degree">Bachelor's Degree</option>
-       <option value="Master's Degree">Master's Degree</option>
-       <option value="PhD">PhD</option>
-     </select>
-     <span class="error-message" id="education-error"></span>
-     </div>
-     
-    
-     <div class="checkbox-group"> 
-      <label>Skills</label>
-      <label><input type="checkbox" name="skills" value="programming"> Programming</label>
-        <label><input type="checkbox" name="skills" value="marketing">  Marketing</label>
-      <label><input type="checkbox" name="skills" value="design">  Design</label>
-    
-      <!-- <label><input type="checkbox" name="skills" value="management"> Management</label> -->
-      <span class="error-message" id="skills-error"></span>
-
-     </div>
-     <label for="experience">Experience 
-    <input type="number" id="experience" name="experience" min="0" max="50" placeholder=" years..." required></label>
-    <span class="error-message" id="experience-error"></span>
-    <label for="role">Position
-    <input type="text" id="role" name="role" placeholder="Your current role" required></label>
-    <span class="error-message" id="currentRole-error"></span>
-    
-    <div class="btn-box">
-      <button type="button" id="Back1">Previous</button>
-      <button type="button" id="Next2">Next</button>
-    </div>
-  </form>
-  <!--Review-->
-  <form id="form3">
-    <h3>Review & Submit</h3>
-    <div id="reviewSection"></div>
-    <button type="button" class="edit-btn" id="editDetails">Edit</button>
-    <!-- <button type="button" class="submit-btn" id="submitForm">Submit</button> -->
-    <button type="button" id="clearForm">Clear Form</button>
-    <div class="btn-box">
-      <button type="button" class="export-btn" id="exportData">Export as JSON</button>
-      <button type="submit" id="Submit" disabled>Submit</button>
-    </div>
-    <p class="success-message" id="successMessage" style="display: none;">Form submitted successfully!</p>
-   
-   <!-- <pre id="jsonPreview"></pre> -->
- 
-   
-  </form>
-  
-  <div class="step-row">
-    <div id="progress"></div>
-    <div class="step-col"><small>Step 1</small></div>
-    <div class="step-col"><small>Step 2</small></div>
-    <div class="step-col"><small>Step 3</small></div>
-  </div>
-
-  </div>
-  
-  <script src="script.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  
+  <title>Multi Step Form</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <form id="form1" class="multi-step-form">
+      <h3>PERSONAL DETAILS</h3>
+      <input type="text" id="fullName" placeholder="Full Name" required>
+      <span class="error-message" id="fullName-error"></span>
+      <input type="email" id="email" placeholder="Email" required>
+      <span class="error-message" id="email-error"></span>
+      <input type="tel" id="phone" placeholder="Phone No" required pattern="\d{10}">
+      <span class="error-message" id="phone-error"></span>
+      <input type="number" id="age" name="age" placeholder="Age" min="18" max="100" required>
+      <span class="error-message" id="age-error"></span>
+
+      <label >Gender</label>
+      <label class="radio-inline">
+        <input type="radio" name="gender" value="male" required> Male
+      </label>
+      <label class="radio-inline">
+        <input type="radio" name="gender" value="Female" required> Female
+      </label>
+      <label class="radio-inline">
+        <input type="radio" name="gender" value="Other">Other
+      </label>
+      <span class="error-message" id="gender-error"></span>
+      
+      <div class="btn-box">
+        <button type="button" id="Next1">Next</button>
+      </div>
+      
+    </form>
+
+  <!--Perofessonal form-->
+  <form id="form2">
+    <h3>PROFESSIONAL DETAILS</h3>
+    
+     <div class="dropdown"> 
+      <label for="education">Education</label>
+     <select id="education" name="education" required>
+       <option value="" disabled selected>Select</option>
+       <option value="High School">High School</option>
+       <option value="Bachelor's Degree">Bachelor's Degree</option>
+       <option value="Master's Degree">Master's Degree</option>
+       <option value="PhD">PhD</option>
+     </select>
+     <span class="error-message" id="education-error"></span>
+     </div>
+     
+    
+     <div class="checkbox-group"> 
+      <label>Skills</label>
+      <label><input type="checkbox" name="skills" value="programming"> Programming</label>
+        <label><input type="checkbox" name="skills" value="marketing">  Marketing</label>
+      <label><input type="checkbox" name="skills" value="design">  Design</label>
+    
+      <!-- <label><input type="checkbox" name="skills" value="management"> Management</label> -->
+      <span class="error-message" id="skills-error"></span>
+
+     </div>
+     <label for="experience">Experience 
+    <input type="number" id="experience" name="experience" min="0" max="50" placeholder=" years..." required></label>
+    <span class="error-message" id="experience-error"></span>
+    <label for="role">Position
+    <input type="text" id="currentrole" name="role" placeholder="Your current role" required></label>
+    <span class="error-message" id="currentRole-error"></span>
+    
+    <div class="btn-box">
+      <button type="button" id="Back1">Previous</button>
+      <button type="button" id="Next2">Next</button>
+    </div>
+  </form>
+  <!--Review-->
+  <form id="form3">
+    <h3>Review & Submit</h3>
+    <div id="reviewSection"></div>
+    <!-- <button type="button" class="edit-btn" id="editDetails">Edit</button> -->
+    <!-- <button type="button" class="submit-btn" id="submitForm">Submit</button> -->
+    <!-- <button type="button" id="clearForm">Clear Form</button> -->
+    <div class="btn-box">
+      <!-- <button type="button" class="export-btn" id="exportData">Export as JSON</button> -->
+      <button type="button" id="Back2">Previous</button>
+      <button type="submit" id="Submit" disabled>Submit</button>
+    </div>
+    <p class="success-message" id="successMessage" style="display: none;">Form submitted successfully!</p>
+   
+   <!-- <pre id="jsonPreview"></pre> -->
+ 
+   
+  </form>
+  
+  <div class="step-row">
+    <div id="progress"></div>
+    <div class="step-col"><small>Step 1</small></div>
+    <div class="step-col"><small>Step 2</small></div>
+    <div class="step-col"><small>Step 3</small></div>
+  </div>
+
+  </div>
+  
+  <script src="script.js"></script>
+</body>
 </html>
\ No newline at end of file
