added

Parthwebde12 · Parthwebde12 · commit 46bbac3636d2 · 2025-11-12T15:51:55.000+05:30
diff --git a/index.html b/index.html
@@ -7,8 +7,6 @@
 
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-
-  
 </head>
 <body>
 
@@ -36,8 +34,15 @@ <h1 class="display-6 mb-2">🚀 JS Playground</h1>
           <p class="lead mb-3">A compact collection of small JavaScript projects — clean, responsive, and easy to extend.</p>
 
           <div class="input-group search-field">
-            <span class="input-group-text bg-white border-end-0"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"><path d="M11 6a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/><path d="M12.9 11.3 15 13.4 13.4 15l-2.1-2.1A6.5 6.5 0 1 1 12.9 11.3z"/></svg></span>
-            <input id="search" type="search" class="form-control border-start-0" placeholder="Search projects (press / to focus)" aria-label="Search projects">
+            <span class="input-group-text bg-white border-end-0">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                   class="bi bi-search" viewBox="0 0 16 16">
+                <path d="M11 6a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/>
+                <path d="M12.9 11.3 15 13.4 13.4 15l-2.1-2.1A6.5 6.5 0 1 1 12.9 11.3z"/>
+              </svg>
+            </span>
+            <input id="search" type="search" class="form-control border-start-0"
+                   placeholder="Search projects (press / to focus)" aria-label="Search projects">
             <button id="clearSearch" class="btn btn-outline-secondary d-none" type="button">Clear</button>
           </div>
           <small class="text-muted d-block mt-2">Filter projects by name or description.</small>
@@ -50,15 +55,17 @@ <h1 class="display-6 mb-2">🚀 JS Playground</h1>
 
     <section id="apps" class="mb-5">
       <h2 class="h4 mb-3">Projects</h2>
-
       <div id="projectsGrid" class="row g-3">
         <!-- Cards rendered by JS -->
       </div>
     </section>
 
     <section id="about" class="pt-4">
       <h2 class="h5">About</h2>
-      <p class="text-muted small">This single-page layout uses Bootstrap for a clean and responsive presentation. Each card links to the project folder — ensure paths match your filesystem structure.</p>
+      <p class="text-muted small">
+        This single-page layout uses Bootstrap for a clean and responsive presentation.
+        Each card links to the project folder — ensure paths match your filesystem structure.
+      </p>
     </section>
   </main>
 
@@ -72,8 +79,9 @@ <h2 class="h5">About</h2>
   <!-- Bootstrap JS (with Popper) -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
+  <!-- Main Script -->
   <script src="main.js"></script>
-    // Data for projects - keep paths as in your filesystem
-    
+  <!-- Data for projects is defined in main.js (update this file when adding/removing projects) -->
+
 </body>
 </html>
