From 5a37223b6f5872ceac192a831e379bcedc0d4902 Mon Sep 17 00:00:00 2001
From: fynks <75840152+fynks@users.noreply.github.com>
Date: Sun, 24 Aug 2025 19:54:51 +0500
Subject: [PATCH] Refactor SVG icons for improved accessibility and performance

---
 dist/index.html | 259 ++++++++++++++++++++++++++++--------------------
 1 file changed, 153 insertions(+), 106 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 36543ef..cdd352f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -86,9 +86,9 @@
             <div class="container">
                 <div class="header-content">
                     <a href="/" class="site-title">
-                        <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                        </svg>
+                        <svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
+  <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                         Debrid Comparison
                     </a>
                     <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
@@ -109,14 +109,12 @@
 
                     </nav>
                     <button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button">
-                        <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="5" />
-                            <path
-                                d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
-                        </svg>
-                        <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
-                        </svg>
+                        <svg class="sun-icon" role="img" aria-hidden="true">
+  <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
+<svg class="moon-icon" role="img" aria-hidden="true">
+  <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                     </button>
                 </div>
             </div>
@@ -173,10 +171,9 @@
 
                         <div class="features-grid">
                             <article class="benefit-card" role="article">
-                                <svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
-                                </svg>
+                                <svg class="icon-badge" role="img" aria-hidden="true">
+  <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <h3>Maximum Speeds</h3>
                                 <p>Bypass host throttling with direct links</p>
                             </article>
@@ -213,11 +210,9 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2">
-                                <circle cx="12" cy="12" r="10" />
-                                <path d="M12 16v-4M12 8h.01" />
-                            </svg>
+                           <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                             <div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator,
                                 Mega, or Uptobox.</div>
                         </div>
@@ -245,11 +240,9 @@
                             </div>
 
                             <div class="alert alert-info" role="alert">
-                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <circle cx="12" cy="12" r="10" />
-                                    <path d="M12 16v-4M12 8h.01" />
-                                </svg>
+                                <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div><strong>Important:</strong> Pricing can change frequently. Always verify current
                                     pricing on official websites before purchasing.</div>
                             </div>
@@ -307,20 +300,17 @@
                         <div class="search-section">
                             <form class="search-container" role="search" aria-label="Search file hosts"
                                 onsubmit="return false">
-                                <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <circle cx="11" cy="11" r="8" />
-                                    <path d="M21 21l-4.35-4.35" />
-                                </svg>
+                               <svg class="search-icon" role="img" aria-hidden="true">
+  <use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <input type="search" id="host-search-input" class="search-input"
                                     placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
                                     aria-label="Search file hosts" autocomplete="off" />
                                 <button id="clear-host-search" class="clear-icon" aria-label="Clear search"
                                     type="button">
-                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                        <line x1="18" y1="6" x2="6" y2="18" />
-                                        <line x1="6" y1="6" x2="18" y2="18" />
-                                    </svg>
+                                    <svg class="clear-icon-svg" role="img" aria-hidden="true">
+  <use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 </button>
                             </form>
                         </div>
@@ -473,11 +463,10 @@
                             </div>
 
                             <div class="alert alert-info" role="alert">
-                                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <circle cx="12" cy="12" r="10" />
-                                    <path d="M12 16v-4M12 8h.01" />
-                                </svg>
+                                <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
+
                                 <div>These tests are best‑case scenarios from the provider's own network.</div>
                             </div>
                         </div>
@@ -563,11 +552,9 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2">
-                                <circle cx="12" cy="12" r="10" />
-                                <path d="M12 16v-4M12 8h.01" />
-                            </svg>
+                            <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                             <div><strong>💡 Tip:</strong> Bookmark these pages to verify if a failed link is due to a
                                 temporary host outage rather than a service limitation.</div>
                         </div>
@@ -590,11 +577,10 @@
 
                         <div class="important-notes-grid">
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path
-                                        d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
-                                </svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
+
                                 <div class="note-content">
                                     <h3>Services change frequently</h3>
                                     <p>Pricing, host support, refund policies, and features may be updated without
@@ -603,10 +589,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-                                </svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div class="note-content">
                                     <h3>Final cost may vary</h3>
                                     <p>Displayed prices are subject to exchange rates, regional taxes, or payment
@@ -614,13 +599,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                                    <polyline points="14,2 14,8 20,8" />
-                                    <line x1="16" y1="13" x2="8" y2="13" />
-                                    <line x1="16" y1="17" x2="8" y2="17" />
-                                </svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div class="note-content">
                                     <h3>Data accuracy</h3>
                                     <p>While we strive for completeness, this comparison reflects community reports and
@@ -629,12 +610,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-                                    <circle cx="9" cy="7" r="4" />
-                                    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-                                </svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div class="note-content">
                                     <h3>No affiliation</h3>
                                     <p>This project is independent and <strong>not affiliated</strong> with any listed
@@ -642,12 +620,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <path d="M9 12l2 2 4-4"></path>
-                                    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
-                                    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
-                                </svg>
+                                <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div class="note-content">
                                     <h3>Use at your own discretion</h3>
                                     <p>Choosing a debrid service involves personal judgment. Test short-term plans first
@@ -655,11 +630,9 @@
                                 </div>
                             </div>
                             <div class="note-card">
-                                <svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                    stroke-width="2">
-                                    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
-                                    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-                                </svg>
+                               <svg class="note-icon" role="img" aria-hidden="true">
+  <use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                 <div class="note-content">
                                     <h3>Legal responsibility</h3>
                                     <p>Debrid services are tools. You are responsible for complying with copyright laws
@@ -669,13 +642,9 @@
                         </div>
 
                         <div class="alert alert-warning" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2">
-                                <path
-                                    d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-                                <line x1="12" y1="9" x2="12" y2="13" />
-                                <line x1="12" y1="17" x2="12.01" y2="17" />
-                            </svg>
+                            <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                             <div><strong>This is an open-source, community-maintained guide. It does not endorse or
                                     promote unauthorized file sharing.</strong></div>
                         </div>
@@ -696,11 +665,9 @@
                         <div class="resources-categories">
                             <div class="resource-category">
                                 <h3>
-                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none"
-                                        stroke="currentColor" stroke-width="2">
-                                        <path
-                                            d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-                                    </svg>
+                                    <svg class="resource-category-icon" role="img" aria-hidden="true">
+  <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                     Tools and Integrations
                                 </h3>
                                 <div class="resource-list">
@@ -737,12 +704,9 @@
 
                             <div class="resource-category">
                                 <h3>
-                                    <svg class="resource-category-icon" viewBox="0 0 24 24" fill="none"
-                                        stroke="currentColor" stroke-width="2">
-                                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-                                        <circle cx="9" cy="7" r="4" />
-                                        <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-                                    </svg>
+                                    <svg class="resource-category-icon" role="img" aria-hidden="true">
+  <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                                     Community and Support
                                 </h3>
                                 <div class="resource-list">
@@ -766,11 +730,9 @@
                         </div>
 
                         <div class="alert alert-info" role="alert">
-                            <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-                                stroke-width="2">
-                                <circle cx="12" cy="12" r="10" />
-                                <path d="M12 16v-4M12 8h.01" />
-                            </svg>
+                            <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                             <div><strong>💡 Pro Tip:</strong> Combine your debrid service with automation tools like
                                 <strong>Debrid Media Manager (DMM)</strong> or <strong>Overseerr</strong> for a seamless
                                 media experience.</div>
@@ -1115,15 +1077,100 @@
         <noscript>
             <div class="alert alert-warning"
                 style="margin: 20px; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1000;">
-                <svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
-                    aria-hidden="true">
-                    <circle cx="12" cy="12" r="10" />
-                    <line x1="12" y1="8" x2="12" y2="12" />
-                    <line x1="12" y1="16" x2="12.01" y2="16" />
-                </svg>
+                <svg class="alert-icon" role="img" aria-hidden="true">
+  <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
+</svg>
                 <div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
             </div>
         </noscript>
+<!-- SVG Symbol Sprite (Reusable Icons) -->
+<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+  <!-- Logo Icon -->
+  <symbol id="icon-logo" viewBox="0 0 24 24" aria-label="Logo">
+    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+  </symbol>
+
+  <!-- Sun Icon (Light Mode) -->
+  <symbol id="icon-sun" viewBox="0 0 24 24" aria-label="Sun">
+    <circle cx="12" cy="12" r="5" />
+    <path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2m20 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+  </symbol>
+
+  <!-- Moon Icon (Dark Mode) -->
+  <symbol id="icon-moon" viewBox="0 0 24 24" aria-label="Moon">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
+  </symbol>
+
+  <!-- Search Icon -->
+  <symbol id="icon-search" viewBox="0 0 24 24" aria-label="Search">
+    <circle cx="11" cy="11" r="8" />
+    <path d="M21 21l-4.35-4.35" />
+  </symbol>
+
+  <!-- Close/Clear Icon -->
+  <symbol id="icon-close" viewBox="0 0 24 24" aria-label="Close">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </symbol>
+
+  <!-- Alert Info Icon -->
+  <symbol id="icon-alert" viewBox="0 0 24 24" aria-label="Alert">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4M12 8h.01" />
+  </symbol>
+
+  <!-- Warning Icon -->
+  <symbol id="icon-warning" viewBox="0 0 24 24" aria-label="Warning">
+    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+    <line x1="12" y1="9" x2="12" y2="13" />
+    <line x1="12" y1="17" x2="12.01" y2="17" />
+  </symbol>
+
+  <!-- Check Icon (Used in empty state, notes) -->
+  <symbol id="icon-check" viewBox="0 0 24 24" aria-label="Check">
+    <path d="M9 12l2 2 4-4" />
+    <path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7" />
+    <path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6" />
+  </symbol>
+
+  <!-- Lock Icon -->
+  <symbol id="icon-lock" viewBox="0 0 24 24" aria-label="Lock">
+    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+  </symbol>
+
+  <!-- Tools/Settings Icon -->
+  <symbol id="icon-tools" viewBox="0 0 24 24" aria-label="Tools">
+    <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+  </symbol>
+
+  <!-- User/Community Icon -->
+  <symbol id="icon-user" viewBox="0 0 24 24" aria-label="User">
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle cx="9" cy="7" r="4" />
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+  </symbol>
+
+  <!-- Note/Info Icon -->
+  <symbol id="icon-note" viewBox="0 0 24 24" aria-label="Note">
+    <path d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+  </symbol>
+
+  <!-- Money/Finance Icon -->
+  <symbol id="icon-money" viewBox="0 0 24 24" aria-label="Money">
+    <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+  </symbol>
+
+  <!-- Document Icon -->
+  <symbol id="icon-document" viewBox="0 0 24 24" aria-label="Document">
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14,2 14,8 20,8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+  </symbol>
+
+</svg>
+
 </body>
 
 </html>
\ No newline at end of file