1. fixed json fetch

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

186
dist/css/styles.css vendored
View file

@ -39,10 +39,10 @@
--container-max: 1400px; --container-max: 1400px;
--header-height: 5rem; --header-height: 5rem;
--content-max: 1200px; --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: clamp(2rem, 6vw, 4.5rem);
--section-pad-y-tight: clamp(1.5rem, 4vw, 3rem); --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) */ /* Spacing (using CSS custom properties for consistency) */
--space-xs: 0.25rem; --space-xs: 0.25rem;
--space-sm: 0.5rem; --space-sm: 0.5rem;
@ -124,6 +124,8 @@ html {
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
/* Fix 1: Prevent horizontal overflow on html */
overflow-x: hidden;
} }
body { body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@ -135,6 +137,7 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
/* Fix 1: Prevent horizontal overflow on body */
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -160,7 +163,10 @@ a:hover {
outline: 2px solid var(--border-focus); outline: 2px solid var(--border-focus);
outline-offset: 2px; 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 { :focus-visible {
outline: 2px solid var(--primary); outline: 2px solid var(--primary);
outline-offset: 2px; outline-offset: 2px;
@ -194,16 +200,19 @@ a:hover {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* Fix 1: Prevent horizontal overflow on wrapper */
overflow-x: hidden;
} }
.container { .container {
max-width: var(--container-max); max-width: var(--container-max);
margin-inline: auto; margin-inline: auto;
padding-inline: var(--container-x); padding-inline: var(--container-x);
width: 100%; width: 100%; /* Crucial for preventing overflow */
} }
.content-container { .content-container {
max-width: var(--content-max); max-width: var(--content-max);
margin: 0 auto; margin: 0 auto;
width: 100%; /* Ensure it also respects width */
} }
/* ===== 3. HEADER & NAVIGATION ===== */ /* ===== 3. HEADER & NAVIGATION ===== */
.site-header { .site-header {
@ -308,7 +317,6 @@ a:hover {
background: var(--bg-secondary); background: var(--bg-secondary);
font-weight: var(--font-semibold); font-weight: var(--font-semibold);
} }
/* Focus Styles (applied via :focus-visible) */
.nav-link:hover:not(.active) { .nav-link:hover:not(.active) {
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-primary); color: var(--text-primary);
@ -431,9 +439,9 @@ a:hover {
transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1); transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
z-index: 120; /* Above overlay */ z-index: 120; /* Above overlay */
/* Isolate the animation context */ /* 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 { .nav-open .header-nav {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -941,16 +949,18 @@ a:hover {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
margin: var(--space-3xl) 0; margin: var(--space-3xl) 0;
overflow: hidden; overflow: hidden;
width: 100%; /* Ensure it doesn't stretch the container */
} }
.table-wrapper { .table-wrapper {
overflow-x: auto; overflow-x: auto; /* Allow horizontal scroll for wide tables */
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl); /* Inherit rounding */
width: 100%; /* Add this */
} }
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
font-size: var(--text-sm); 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 */
.table-toolbar { .table-toolbar {
@ -1711,7 +1721,7 @@ text-decoration: underline;
.footer-brand { .footer-brand {
text-align: center; text-align: center;
padding-bottom: var(--space-lg); 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); margin-bottom: var(--space-lg);
} }
.footer-links { .footer-links {
@ -1724,6 +1734,14 @@ text-decoration: underline;
.footer-bottom { .footer-bottom {
text-align: center; 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 { .hero-meta {
margin-bottom: var(--space-2xl); margin-bottom: var(--space-2xl);
} }
@ -1731,12 +1749,144 @@ text-decoration: underline;
font-size: 10px; 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: 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: 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: 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); } } @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) { @media (max-width: 20em) {
html { font-size: 14px; } html { font-size: 14px; }
body { line-height: 1.5; } 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); } .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; } .nav-link { padding: var(--space-sm) var(--space-md); font-size: 0.75rem; }
.dark-mode-toggle { width: 38px; height: 38px; } .dark-mode-toggle { width: 38px; height: 38px; }
.hero-title { margin-bottom: var(--space-xl); } /* .hero-title { margin-bottom: var(--space-xl); } */ /* Handled by 26.25em */
.hero-section { padding: 2.25rem 0 1.75rem; } /* .hero-section { padding: 2.25rem 0 1.75rem; } */ /* Handled by 26.25em */
.hero-description { font-size: 0.95rem; } .hero-description { font-size: 0.95rem; }
.hero-stats { gap: var(--space-lg); } .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 { padding: 2rem 0; }
.section-header { margin-bottom: var(--space-xl); } .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); } .section-description { font-size: clamp(0.95rem, 3.2vw, 1.05rem); }
.benefit-card { padding: var(--space-lg); } .benefit-card { padding: var(--space-lg); }
.benefit-card h3 { font-size: 0.9rem; } .benefit-card h3 { font-size: 0.9rem; }
@ -1762,6 +1912,7 @@ text-decoration: underline;
.compare-controls { gap: var(--space-lg); } .compare-controls { gap: var(--space-lg); }
.data-table-container { font-size: 0.85rem; } .data-table-container { font-size: 0.85rem; }
} }
/* Print Styles */ /* Print Styles */
@media print { @media print {
.site-header, .site-header,
@ -1818,4 +1969,3 @@ text-decoration: underline;
transform: none; transform: none;
} }
} }

80
dist/index.html vendored
View file

@ -37,9 +37,9 @@
</noscript> </noscript>
<!-- Prefetch data for quick subsequent use (non-blocking) --> <!-- Prefetch data for quick subsequent use (non-blocking) -->
<link rel="prefetch" href="/json/file-hosts-optimized.json" crossorigin> <link rel="prefetch" as="fetch" href="/json/file-hosts-optimized.json" crossorigin>
<link rel="prefetch" href="/json/adult-hosts-optimized.json" crossorigin> <link rel="prefetch" as="fetch" href="/json/adult-hosts-optimized.json" crossorigin>
<link rel="prefetch" href="/json/pricing.json" crossorigin> <link rel="prefetch" as="fetch" href="/json/pricing.json" crossorigin>
<link as="style" rel="preload" href="./css/styles-min.css"> <link as="style" rel="preload" href="./css/styles-min.css">
<script> <script>
@ -88,7 +88,7 @@
<a href="/" class="site-title"> <a href="/" class="site-title">
<svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo"> <svg class="logo-icon" role="img" aria-label="Debrid Comparison Logo">
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
Debrid Comparison Debrid Comparison
</a> </a>
<nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true"> <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> <a href="#resources" class="nav-link">Resources</a>
</nav> </nav>
<div class="header-actions"> <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"> <svg class="sun-icon" role="img" aria-hidden="true">
<use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-sun" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<svg class="moon-icon" role="img" aria-hidden="true"> <svg class="moon-icon" role="img" aria-hidden="true">
<use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-moon" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
</button> </button>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" <button class="nav-toggle" id="navToggle" aria-label="Open navigation menu"
aria-controls="primary-navigation" aria-expanded="false" type="button"> aria-controls="primary-navigation" aria-expanded="false" type="button">
@ -174,7 +175,7 @@
<article class="benefit-card" role="article"> <article class="benefit-card" role="article">
<svg class="icon-badge" role="img" aria-hidden="true"> <svg class="icon-badge" role="img" aria-hidden="true">
<use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-logo" stroke="currentColor" stroke-width="2" fill="none" />
</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>
</article> </article>
@ -213,7 +214,7 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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>
</div> </div>
@ -243,7 +244,7 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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>
</div> </div>
@ -303,7 +304,7 @@
onsubmit="return false"> onsubmit="return false">
<svg class="search-icon" role="img" aria-hidden="true"> <svg class="search-icon" role="img" aria-hidden="true">
<use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-search" stroke="currentColor" stroke-width="2" fill="none" />
</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" />
@ -311,7 +312,7 @@
type="button"> type="button">
<svg class="clear-icon-svg" role="img" aria-hidden="true"> <svg class="clear-icon-svg" role="img" aria-hidden="true">
<use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-close" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
</button> </button>
</form> </form>
</div> </div>
@ -466,7 +467,7 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div>These tests are bestcase scenarios from the provider's own network.</div> <div>These tests are bestcase scenarios from the provider's own network.</div>
</div> </div>
@ -555,7 +556,7 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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>
</div> </div>
@ -580,7 +581,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-note" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Services change frequently</h3> <h3>Services change frequently</h3>
@ -592,7 +593,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-money" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Final cost may vary</h3> <h3>Final cost may vary</h3>
<p>Displayed prices are subject to exchange rates, regional taxes, or payment <p>Displayed prices are subject to exchange rates, regional taxes, or payment
@ -602,7 +603,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-document" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Data accuracy</h3> <h3>Data accuracy</h3>
<p>While we strive for completeness, this comparison reflects community reports and <p>While we strive for completeness, this comparison reflects community reports and
@ -613,7 +614,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>No affiliation</h3> <h3>No affiliation</h3>
<p>This project is independent and <strong>not affiliated</strong> with any listed <p>This project is independent and <strong>not affiliated</strong> with any listed
@ -623,7 +624,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-check" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Use at your own discretion</h3> <h3>Use at your own discretion</h3>
<p>Choosing a debrid service involves personal judgment. Test short-term plans first <p>Choosing a debrid service involves personal judgment. Test short-term plans first
@ -633,7 +634,7 @@
<div class="note-card"> <div class="note-card">
<svg class="note-icon" role="img" aria-hidden="true"> <svg class="note-icon" role="img" aria-hidden="true">
<use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-lock" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
<div class="note-content"> <div class="note-content">
<h3>Legal responsibility</h3> <h3>Legal responsibility</h3>
<p>Debrid services are tools. You are responsible for complying with copyright laws <p>Debrid services are tools. You are responsible for complying with copyright laws
@ -645,7 +646,7 @@
<div class="alert alert-warning" role="alert"> <div class="alert alert-warning" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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>
</div> </div>
@ -668,12 +669,12 @@
<h3> <h3>
<svg class="resource-category-icon" role="img" aria-hidden="true"> <svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-tools" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
Tools and Integrations Tools and Integrations
</h3> </h3>
<div class="resource-list cards-3"> <div class="resource-list cards-3">
<a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item accent-hover" <a href="https://github.com/debridmediamanager/awesome-debrid"
target="_blank" rel="noopener noreferrer"> class="resource-item accent-hover" target="_blank" rel="noopener noreferrer">
<strong>Awesome-Debrid</strong> <strong>Awesome-Debrid</strong>
<span>Curated list of debrid-compatible apps, browser extensions, and automation <span>Curated list of debrid-compatible apps, browser extensions, and automation
tools</span> tools</span>
@ -689,13 +690,13 @@
<span>Web interface to manage your torrents on Real-Debrid, AllDebrid, <span>Web interface to manage your torrents on Real-Debrid, AllDebrid,
Premiumize TorBox or DebridLink</span> Premiumize TorBox or DebridLink</span>
</a> </a>
<a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover" target="_blank" <a href="https://github.com/g0ldyy/comet" class="resource-item accent-hover"
rel="noopener noreferrer"> target="_blank" rel="noopener noreferrer">
<strong>Comet</strong> <strong>Comet</strong>
<span>Stremio's torrent/debrid search add-on</span> <span>Stremio's torrent/debrid search add-on</span>
</a> </a>
<a href="https://github.com/jackett/jackett" class="resource-item accent-hover" target="_blank" <a href="https://github.com/jackett/jackett" class="resource-item accent-hover"
rel="noopener noreferrer"> target="_blank" rel="noopener noreferrer">
<strong>Jackett + Prowlarr</strong> <strong>Jackett + Prowlarr</strong>
<span>Indexer proxies that work seamlessly with debrid services for <span>Indexer proxies that work seamlessly with debrid services for
automation</span> automation</span>
@ -706,7 +707,7 @@
<h3> <h3>
<svg class="resource-category-icon" role="img" aria-hidden="true"> <svg class="resource-category-icon" role="img" aria-hidden="true">
<use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-user" stroke="currentColor" stroke-width="2" fill="none" />
</svg> </svg>
Community and Support Community and Support
</h3> </h3>
<div class="resource-list cards-3"> <div class="resource-list cards-3">
@ -732,10 +733,11 @@
<div class="alert alert-info" role="alert"> <div class="alert alert-info" role="alert">
<svg class="alert-icon" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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
media experience.</div> media experience.
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1079,12 +1081,12 @@
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" role="img" aria-hidden="true"> <svg class="alert-icon" role="img" aria-hidden="true">
<use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" /> <use href="#icon-alert" stroke="currentColor" stroke-width="2" fill="none" />
</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 Symbol Sprite (Reusable Icons) -->
<svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> <svg style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<!-- Logo Icon --> <!-- Logo Icon -->
<symbol id="icon-logo" viewBox="0 0 24 24" aria-label="Logo"> <symbol id="icon-logo" viewBox="0 0 24 24" aria-label="Logo">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" /> <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
@ -1093,7 +1095,8 @@
<!-- Sun Icon (Light Mode) --> <!-- Sun Icon (Light Mode) -->
<symbol id="icon-sun" viewBox="0 0 24 24" aria-label="Sun"> <symbol id="icon-sun" viewBox="0 0 24 24" aria-label="Sun">
<circle cx="12" cy="12" r="5" /> <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" /> <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> </symbol>
<!-- Moon Icon (Dark Mode) --> <!-- Moon Icon (Dark Mode) -->
@ -1141,7 +1144,8 @@
<!-- Tools/Settings Icon --> <!-- Tools/Settings Icon -->
<symbol id="icon-tools" viewBox="0 0 24 24" aria-label="Tools"> <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" /> <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> </symbol>
<!-- User/Community Icon --> <!-- User/Community Icon -->
@ -1169,7 +1173,7 @@
<line x1="16" y1="17" x2="8" y2="17" /> <line x1="16" y1="17" x2="8" y2="17" />
</symbol> </symbol>
</svg> </svg>
</body> </body>