danvics/debrid-services-comparison
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor SVG icons for improved accessibility and performance

Browse source
This commit is contained in:
fynks 2025-08-24 19:54:51 +05:00
parent 5220b1d913
commit 5a37223b6f
1 changed files with 153 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
dist/index.html vendored
View file

@ -86,8 +86,8 @@
<div class="container"> <div class="container">
<div class="header-content"> <div class="header-content">
<a href="/" class="site-title"> <a href="/" class="site-title">
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /> <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
Debrid Comparison Debrid Comparison
</a> </a>
@ -109,13 +109,11 @@
</nav> </nav>
<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" type="button"> <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"> <svg class="sun-icon" role="img" aria-hidden="true">
<circle cx="12" cy="12" r="5" /> <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="moon-icon" role="img" aria-hidden="true">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /> <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
</button> </button>
</div> </div>
@ -173,9 +171,8 @@
<div class="features-grid"> <div class="features-grid">
<article class="benefit-card" role="article"> <article class="benefit-card" role="article">
<svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="icon-badge" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
</svg> </svg>
<h3>Maximum Speeds</h3> <h3>Maximum Speeds</h3>
<p>Bypass host throttling with direct links</p> <p>Bypass host throttling with direct links</p>
@ -213,10 +210,8 @@
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg> </svg>
<div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator, <div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator,
Mega, or Uptobox.</div> Mega, or Uptobox.</div>
@ -245,10 +240,8 @@
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg> </svg>
<div><strong>Important:</strong> Pricing can change frequently. Always verify current <div><strong>Important:</strong> Pricing can change frequently. Always verify current
pricing on official websites before purchasing.</div> pricing on official websites before purchasing.</div>
@ -307,19 +300,16 @@
<div class="search-section"> <div class="search-section">
<form class="search-container" role="search" aria-label="Search file hosts" <form class="search-container" role="search" aria-label="Search file hosts"
onsubmit="return false"> onsubmit="return false">
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="search-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="11" cy="11" r="8" />
<path d="M21 21l-4.35-4.35" />
</svg> </svg>
<input type="search" id="host-search-input" class="search-input" <input type="search" id="host-search-input" class="search-input"
placeholder="Search file hosts (e.g., Mega, Rapidgator...)" placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
aria-label="Search file hosts" autocomplete="off" /> aria-label="Search file hosts" autocomplete="off" />
<button id="clear-host-search" class="clear-icon" aria-label="Clear search" <button id="clear-host-search" class="clear-icon" aria-label="Clear search"
type="button"> type="button">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="clear-icon-svg" role="img" aria-hidden="true">
<line x1="18" y1="6" x2="6" y2="18" /> <use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
</button> </button>
</form> </form>
@ -473,11 +463,10 @@
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg> </svg>
<div>These tests are best‑case scenarios from the provider's own network.</div> <div>These tests are best‑case scenarios from the provider's own network.</div>
</div> </div>
</div> </div>
@ -563,10 +552,8 @@
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg> </svg>
<div><strong>💡 Tip:</strong> Bookmark these pages to verify if a failed link is due to a <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> temporary host outage rather than a service limitation.</div>
@ -590,11 +577,10 @@
<div class="important-notes-grid"> <div class="important-notes-grid">
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
<path
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Services change frequently</h3> <h3>Services change frequently</h3>
<p>Pricing, host support, refund policies, and features may be updated without <p>Pricing, host support, refund policies, and features may be updated without
@ -603,9 +589,8 @@
</div> </div>
</div> </div>
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Final cost may vary</h3> <h3>Final cost may vary</h3>
@ -614,12 +599,8 @@
</div> </div>
</div> </div>
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div class="note-content"> <div class="note-content">
<h3>Data accuracy</h3> <h3>Data accuracy</h3>
@ -629,11 +610,8 @@
</div> </div>
</div> </div>
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div class="note-content"> <div class="note-content">
<h3>No affiliation</h3> <h3>No affiliation</h3>
@ -642,11 +620,8 @@
</div> </div>
</div> </div>
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div class="note-content"> <div class="note-content">
<h3>Use at your own discretion</h3> <h3>Use at your own discretion</h3>
@ -655,10 +630,8 @@
</div> </div>
</div> </div>
<div class="note-card"> <div class="note-card">
<svg class="note-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="note-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div class="note-content"> <div class="note-content">
<h3>Legal responsibility</h3> <h3>Legal responsibility</h3>
@ -669,12 +642,8 @@
</div> </div>
<div class="alert alert-warning" role="alert"> <div class="alert alert-warning" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div><strong>This is an open-source, community-maintained guide. It does not endorse or <div><strong>This is an open-source, community-maintained guide. It does not endorse or
promote unauthorized file sharing.</strong></div> promote unauthorized file sharing.</strong></div>
@ -696,10 +665,8 @@
<div class="resources-categories"> <div class="resources-categories">
<div class="resource-category"> <div class="resource-category">
<h3> <h3>
<svg class="resource-category-icon" viewBox="0 0 24 24" fill="none" <svg class="resource-category-icon" role="img" aria-hidden="true">
stroke="currentColor" stroke-width="2"> <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
<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>
Tools and Integrations Tools and Integrations
</h3> </h3>
@ -737,11 +704,8 @@
<div class="resource-category"> <div class="resource-category">
<h3> <h3>
<svg class="resource-category-icon" viewBox="0 0 24 24" fill="none" <svg class="resource-category-icon" role="img" aria-hidden="true">
stroke="currentColor" stroke-width="2"> <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
<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>
Community and Support Community and Support
</h3> </h3>
@ -766,10 +730,8 @@
</div> </div>
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" <svg class="alert-icon" role="img" aria-hidden="true">
stroke-width="2"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<circle cx="12" cy="12" r="10" />
<path d="M12 16v-4M12 8h.01" />
</svg> </svg>
<div><strong>💡 Pro Tip:</strong> Combine your debrid service with automation tools like <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 <strong>Debrid Media Manager (DMM)</strong> or <strong>Overseerr</strong> for a seamless
@ -1115,15 +1077,100 @@
<noscript> <noscript>
<div class="alert alert-warning" <div class="alert alert-warning"
style="margin: 20px; position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 1000;"> 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" <svg class="alert-icon" role="img" aria-hidden="true">
aria-hidden="true"> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
<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>
<div>JavaScript is disabled. Interactive comparison and filtering won't work.</div> <div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
</div> </div>
</noscript> </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> </body>
</html> </html>