A switch is added

index.html

@@ -18,7 +18,13 @@ <h1>This website requires JavaScript to be enabled</h1>
   </div>
   <div>
     <button id="generateRandomMaze" disabled>Generate Randomized Maze (based on the density) </button>
-    <button id="toggleObstacleMode" disabled>Toggle Custom Obstacle Mode</button>
+    <div>
+      <label class="switch">
+        <input type="checkbox" id="toggleObstacleMode" disabled>
+        <span class="slider"></span>
+      </label>
+      <span>Custom Obstacle Mode</span>
+    </div>
   <div>
   </div>
   </div>
@@ -34,8 +40,9 @@ <h1>This website requires JavaScript to be enabled</h1>
   <div>Instructions:</div>
   <div id="instructions">
     <p>1. Click on the "Generate Empty Maze" button to generate an empty maze.</p>
-    <p>2. Click on the "Generate Randomized Maze" button to generate a maze with random obstacles based on the density.</p>
-    <p>3. Click on the "Toggle Custom Obstacle Mode" button to toggle the custom obstacle mode. In this mode, you can click on the cells to add or remove obstacles.</p>
+    <p>2.  (a)Click on the "Generate Randomized Maze" button to generate a maze with random obstacles based on the density. or 
+    (b) Click on the "Custom Obstacle Mode" button to toggle the custom obstacle mode. In this mode, you can click on the cells to add or remove obstacles.</p>
+    <p>3. If the  "Custom Obstacle Mode" button is on switch it off . After that you can set the start and end</p>
     <p>4. Click on the "Simulate Micromouse" button to simulate the micromouse in the maze.</p>
     <p>5. Click on the "Clear Maze" button to clear the maze.</p>
   </div>

script.js

@@ -159,8 +159,8 @@ function toggleObstacleMode() {
   document.getElementById("setStart").disabled = customObstacleMode;
   document.getElementById("setEnd").disabled = customObstacleMode;
 
-  alert(customObstacleMode ? "Custom Obstacle Mode Enabled. Click on cells to toggle obstacles. Click again to disable. Then set start and end points." 
-                           : "Custom Obstacle Mode Disabled. You can set Start and End points.");
+  // alert(customObstacleMode ? "Custom Obstacle Mode Enabled. Click on cells to toggle obstacles. Click again to disable. Then set start and end points." 
+  //                          : "Custom Obstacle Mode Disabled. You can set Start and End points.");
 }
 
 function setStart() {

style.css

@@ -83,4 +83,50 @@ body {
   button:disabled {
     background-color: #ccc;
     cursor: not-allowed;
-  }
+  }
+
+  /* Toggle Switch Style */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: #4caf50;
+}
+
+input:checked + .slider:before {
+  transform: translateX(26px);
+}