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

1. fixed json fetch

Browse source 
2. fixed smaller screen visual bugs
This commit is contained in:
fynks 2025-08-31 10:20:11 +05:00
parent ea8c6c3512
commit c952be061e
2 changed files with 311 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
dist/css/styles.css vendored
View file

@ -39,10 +39,10 @@
--container-max: 1400px;
--header-height: 5rem;
--content-max: 1200px;
/* Fluid layout spacing additions */
/* Fluid layout spacing additions - Adjusted clamp min value for small screens */
--section-pad-y: clamp(2rem, 6vw, 4.5rem);
--section-pad-y-tight: clamp(1.5rem, 4vw, 3rem);
--container-x: clamp(1rem, 3.2vw, 2.5rem);
--container-x: clamp(0.75rem, 3.2vw, 2.5rem); /* Reduced min padding */
/* Spacing (using CSS custom properties for consistency) */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
@ -124,6 +124,8 @@ html {
font-size: 16px;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
/* Fix 1: Prevent horizontal overflow on html */
overflow-x: hidden;
}
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@ -135,6 +137,7 @@ body {
text-rendering: optimizeLegibility;
min-height: 100vh;
margin: 0;
/* Fix 1: Prevent horizontal overflow on body */
overflow-x: hidden;
display: flex;
flex-direction: column;
@ -160,7 +163,10 @@ a:hover {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
/* Enhanced focus styles for keyboard users */
/* Enhanced focus styles for keyboard users - Improved logic */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
@ -194,16 +200,19 @@ a:hover {
min-height: 100vh;
display: flex;
flex-direction: column;
/* Fix 1: Prevent horizontal overflow on wrapper */
overflow-x: hidden;
}
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-x);
width: 100%;
width: 100%; /* Crucial for preventing overflow */
}
.content-container {
max-width: var(--content-max);
margin: 0 auto;
width: 100%; /* Ensure it also respects width */
}
/* ===== 3. HEADER & NAVIGATION ===== */
.site-header {
@ -308,7 +317,6 @@ a:hover {
background: var(--bg-secondary);
font-weight: var(--font-semibold);
}
/* Focus Styles (applied via :focus-visible) */
.nav-link:hover:not(.active) {
background: var(--bg-tertiary);
color: var(--text-primary);
@ -431,9 +439,9 @@ a:hover {
transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
z-index: 120; /* Above overlay */
/* Isolate the animation context */
/* Removed will-change for potential performance issues */
/* Removed will-change for potential performance issues on the nav itself */
}
/* Active state for the menu being open */
/* Active state for the menu being open - Simplified selector */
.nav-open .header-nav {
transform: translate3d(0, 0, 0);
}
@ -941,16 +949,18 @@ a:hover {
border: 1px solid var(--border-primary);
margin: var(--space-3xl) 0;
overflow: hidden;
width: 100%; /* Ensure it doesn't stretch the container */
}
.table-wrapper {
overflow-x: auto;
border-radius: var(--radius-2xl);
overflow-x: auto; /* Allow horizontal scroll for wide tables */
border-radius: var(--radius-2xl); /* Inherit rounding */
width: 100%; /* Add this */
}
table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 600px;
min-width: 600px; /* This is necessary for wide tables but relies on wrapper overflow */
}
/* Table toolbar */
.table-toolbar {
@ -1711,7 +1721,7 @@ text-decoration: underline;
.footer-brand {
text-align: center;
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
border-bottom: 1px solid var(--border-primary); /* Use theme variable */
margin-bottom: var(--space-lg);
}
.footer-links {
@ -1724,6 +1734,14 @@ text-decoration: underline;
.footer-bottom {
text-align: center;
}
.footer-bottom-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-right {
text-align: center; /* Ensure right content centers */
}
.hero-meta {
margin-bottom: var(--space-2xl);
}
@ -1731,12 +1749,144 @@ text-decoration: underline;
font-size: 10px;
}
}
/* Additional responsive tuning for large hero & section spacing */
/* Fix 6: Specific adjustments for screens smaller than 420px */
/* Using em units like the original for consistency, 420px / 16px = 26.25em */
@media (max-width: 26.25em) {
/* Further reduce horizontal padding on very small screens */
.container {
padding-inline: var(--space-sm); /* Even smaller padding */
}
/* Adjust hero section for very small screens */
.hero-section {
padding: var(--space-4xl) var(--space-sm); /* Reduce horizontal padding */
}
.hero-title {
font-size: clamp(1.5rem, 8vw, 2.5rem); /* Potentially smaller base */
margin-bottom: var(--space-lg);
}
.hero-description {
font-size: var(--text-base); /* Use fixed size or smaller clamp base */
margin-bottom: var(--space-3xl);
}
.hero-actions {
margin-bottom: var(--space-4xl);
gap: var(--space-md); /* Reduce gap between buttons */
}
.btn {
padding: var(--space-md) var(--space-xl); /* Reduce button padding */
min-width: 120px; /* Reduce minimum width if needed */
font-size: var(--text-sm); /* Smaller font */
}
/* Adjust section titles and descriptions */
.section-header {
margin-bottom: var(--space-lg);
}
.section-title {
font-size: clamp(1.5rem, 6vw, 2rem); /* Smaller base size */
margin-bottom: var(--space-lg);
}
.section-description {
font-size: var(--text-sm); /* Smaller base size */
}
/* Adjust benefit cards */
.benefit-card {
padding: var(--space-lg) var(--space-md); /* Reduce horizontal padding */
min-height: auto;
}
.benefit-card h3 {
font-size: var(--text-base); /* Adjust heading size */
}
/* Adjust notes */
.note-card {
padding: var(--space-lg);
}
/* Adjust stats */
.hero-stats {
gap: var(--space-lg); /* Reduce gap */
}
.stat-number {
font-size: clamp(1.5rem, 10vw, 2rem); /* Smaller base */
}
/* Ensure alerts don't overflow */
.alert {
padding: var(--space-lg);
margin: var(--space-lg) 0;
gap: var(--space-sm); /* Reduce gap */
}
/* Refine comparison controls */
.compare-controls {
gap: var(--space-lg); /* Reduce gap */
}
/* Refine table display if necessary */
.data-table-container {
font-size: 0.8rem; /* Slightly smaller font */
}
th,
td {
padding: var(--space-sm) var(--space-md); /* Reduce padding */
}
/* Refine footer */
.site-footer {
padding: var(--space-5xl) 0 var(--space-3xl); /* Reduce top padding */
}
.footer-content {
gap: var(--space-md); /* Reduce gap */
margin-bottom: var(--space-3xl);
}
.footer-section h4,
.footer-section h5 {
margin-bottom: var(--space-lg);
}
.footer-bottom {
padding-top: var(--space-3xl);
}
.footer-bottom-content {
gap: var(--space-lg); /* Reduce gap */
}
.footer-meta {
gap: var(--space-md); /* Reduce gap */
}
/* Refine other components as needed */
.speed-section {
padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
}
.resource-category {
padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
}
.resource-item {
padding: var(--space-md); /* Reduce padding */
}
.referral-section {
padding: var(--space-2xl) var(--space-sm); /* Reduce horizontal padding */
margin: var(--space-4xl) 0; /* Reduce margin */
}
.referral-grid {
gap: var(--space-md); /* Reduce gap */
}
.referral-card {
padding: var(--space-md); /* Reduce padding */
max-width: none; /* Remove max-width restriction */
}
}
/* Additional responsive tuning (existing) */
@media (max-width: 900px) { .hero-section { padding: clamp(3.5rem, 10vw, 5rem) 0 clamp(3rem, 8vw, 4rem); } }
@media (max-width: 700px) { .hero-section { padding: clamp(3rem, 9vw, 4rem) 0 clamp(2.5rem, 7vw, 3.5rem); } }
@media (max-width: 520px) { .hero-section { padding: clamp(2.5rem, 8vw, 3.5rem) 0 clamp(2rem, 6vw, 3rem); } }
@media (max-width: 400px) { .hero-section { padding: clamp(2rem, 7vw, 3rem) 0 clamp(1.5rem, 6vw, 2.5rem); } }
/* Ultra-small devices (<=20em ~ 320px) */
/* Ultra-small devices (<=20em ~ 320px) - Review/Adjust */
@media (max-width: 20em) {
html { font-size: 14px; }
body { line-height: 1.5; }
@ -1746,14 +1896,14 @@ text-decoration: underline;
.site-title { font-size: var(--text-lg); padding: var(--space-xs) var(--space-md); }
.nav-link { padding: var(--space-sm) var(--space-md); font-size: 0.75rem; }
.dark-mode-toggle { width: 38px; height: 38px; }
.hero-title { margin-bottom: var(--space-xl); }
.hero-section { padding: 2.25rem 0 1.75rem; }
/* .hero-title { margin-bottom: var(--space-xl); } */ /* Handled by 26.25em */
/* .hero-section { padding: 2.25rem 0 1.75rem; } */ /* Handled by 26.25em */
.hero-description { font-size: 0.95rem; }
.hero-stats { gap: var(--space-lg); }
.stat-number { font-size: clamp(1.75rem, 10vw, 2.25rem); }
/* .stat-number { font-size: clamp(1.75rem, 10vw, 2.25rem); } */ /* Handled by 26.25em */
.section { padding: 2rem 0; }
.section-header { margin-bottom: var(--space-xl); }
.section-title { font-size: clamp(1.75rem, 9vw, 2.25rem); margin-bottom: var(--space-xl); }
/* .section-title { font-size: clamp(1.75rem, 9vw, 2.25rem); margin-bottom: var(--space-xl); } */ /* Handled by 26.25em */
.section-description { font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
.benefit-card { padding: var(--space-lg); }
.benefit-card h3 { font-size: 0.9rem; }
@ -1762,6 +1912,7 @@ text-decoration: underline;
.compare-controls { gap: var(--space-lg); }
.data-table-container { font-size: 0.85rem; }
}
/* Print Styles */
@media print {
.site-header,
@ -1818,4 +1969,3 @@ text-decoration: underline;
transform: none;
}
}

282
dist/index.html vendored
View file

@ -7,7 +7,7 @@
<title>Debrid Services Comparison - Compare Pricing & Hosts</title>
<meta name="description"
content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & Deepbrid.">
<meta name="robots" content="index, follow">
<meta name="author" content="Fynks">
<meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
@ -37,9 +37,9 @@
</noscript>
<!-- Prefetch data for quick subsequent use (non-blocking) -->
<link rel="prefetch" href="/json/file-hosts-optimized.json" crossorigin>
<link rel="prefetch" href="/json/adult-hosts-optimized.json" crossorigin>
<link rel="prefetch" href="/json/pricing.json" crossorigin>
<link rel="prefetch" as="fetch" href="/json/file-hosts-optimized.json" crossorigin>
<link rel="prefetch" as="fetch" href="/json/adult-hosts-optimized.json" crossorigin>
<link rel="prefetch" as="fetch" href="/json/pricing.json" crossorigin>
<link as="style" rel="preload" href="./css/styles-min.css">
<script>
@ -87,8 +87,8 @@
<div class="header-content">
<a href="/" class="site-title">
<svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
Debrid Comparison
</a>
<nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
@ -102,13 +102,14 @@
<a href="#resources" class="nav-link">Resources</a>
</nav>
<div class="header-actions">
<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" 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>
<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>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
aria-controls="primary-navigation" aria-expanded="false" type="button">
@ -173,8 +174,8 @@
<div class="features-grid">
<article class="benefit-card" role="article">
<svg class="icon-badge" role="img" aria-hidden="true">
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
@ -211,9 +212,9 @@
</div>
<div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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>
@ -242,8 +243,8 @@
<div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
@ -301,17 +302,17 @@
<div class="search-section">
<form class="search-container" role="search" aria-label="Search file hosts"
onsubmit="return false">
<svg class="search-icon" role="img" aria-hidden="true">
<use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
</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 class="clear-icon-svg" role="img" aria-hidden="true">
<use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</form>
</div>
@ -465,8 +466,8 @@
<div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
@ -554,8 +555,8 @@
<div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
@ -579,8 +580,8 @@
<div class="important-notes-grid">
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<div class="note-content">
<h3>Services change frequently</h3>
@ -591,8 +592,8 @@
</div>
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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
@ -601,8 +602,8 @@
</div>
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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
@ -612,8 +613,8 @@
</div>
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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
@ -622,8 +623,8 @@
</div>
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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
@ -631,9 +632,9 @@
</div>
</div>
<div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
</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
@ -644,8 +645,8 @@
<div class="alert alert-warning" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
@ -667,13 +668,13 @@
<div class="resource-category elevated">
<h3>
<svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
Tools and Integrations
</h3>
<div class="resource-list cards-3">
<a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item accent-hover"
target="_blank" rel="noopener noreferrer">
<a href="https://github.com/debridmediamanager/awesome-debrid"
class="resource-item accent-hover" target="_blank" rel="noopener noreferrer">
<strong>Awesome-Debrid</strong>
<span>Curated list of debrid-compatible apps, browser extensions, and automation
tools</span>
@ -689,13 +690,13 @@
<span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
Premiumize TorBox or DebridLink</span>
</a>
<a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover" target="_blank"
rel="noopener noreferrer">
<a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover"
target="_blank" rel="noopener noreferrer">
<strong>Comet</strong>
<span>Stremio's torrent/debrid search add-on</span>
</a>
<a href="https://github.com/jackett/jackett" class="resource-item accent-hover" target="_blank"
rel="noopener noreferrer">
<a href="https://github.com/jackett/jackett" class="resource-item accent-hover"
target="_blank" rel="noopener noreferrer">
<strong>Jackett + Prowlarr</strong>
<span>Indexer proxies that work seamlessly with debrid services for
automation</span>
@ -705,8 +706,8 @@
<div class="resource-category elevated">
<h3>
<svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
Community and Support
</h3>
<div class="resource-list cards-3">
@ -731,11 +732,12 @@
<div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
<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>
media experience.
</div>
</div>
</div>
</div>
@ -1073,103 +1075,105 @@
});
</script>
<!-- Noscript warning for core interactive features -->
<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" 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>
<!-- Noscript warning for core interactive features -->
<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" 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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>
</svg>
</body>