debrid-services-comparison/dist/index.html
2025-08-24 19:03:34 +05:00

1018 lines
No EOL
70 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.">
<meta name="robots" content="index, follow">
<meta name="author" content="Fynks">
<meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
<link rel="canonical" href="https://debrid-services-comparison.netlify.app/">
<!-- Theme color per scheme -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"></noscript>
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://debrid-services-comparison.netlify.app/">
<meta property="og:title" content="Debrid Services Comparison">
<meta property="og:description" content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
<meta property="og:image" content="https://debrid-services-comparison.netlify.app/image.png">
<meta property="og:site_name" content="Debrid Services Comparison">
<meta property="og:locale" content="en_US">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://debrid-services-comparison.netlify.app/">
<meta name="twitter:title" content="Debrid Services Comparison">
<meta name="twitter:description" content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
<meta name="twitter:image" content="https://debrid-services-comparison.netlify.app/image.png">
<!-- Prefetch data for quick subsequent use (non-blocking) -->
<link rel="prefetch" href="/json/file-hosts.json" crossorigin>
<link rel="prefetch" href="/json/adult-hosts.json" crossorigin>
<link rel="prefetch" href="/json/pricing.json" crossorigin>
<script>
(function(){
try{
const saved=localStorage.getItem('theme');
const prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme=saved || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.style.colorScheme=theme;
} catch(e){}
})();
</script>
<style>
:root{--primary: #6366f1;--primary-hover: #4f46e5;--primary-light: #a5b4fc;--primary-dark: #3730a3;--accent: #8b5cf6;--success: #10b981;--warning: #66512e;--error: #ef4444;--info: #2c6ace;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--text-primary: var(--gray-900);--text-secondary: var(--gray-600);--text-tertiary: var(--gray-500);--text-muted: var(--gray-400);--bg-primary: #fff;--bg-secondary: var(--gray-50);--bg-tertiary: var(--gray-100);--bg-elevated: #fff;--border-primary: var(--gray-200);--border-secondary: var(--gray-300);--border-focus: var(--primary);--container-max: 1400px;--header-height: 5rem;--content-max: 1200px;--space-xs: 0.25rem;--space-sm: 0.5rem;--space-md: 0.75rem;--space-lg: 1rem;--space-xl: 1.25rem;--space-2xl: 1.5rem;--space-3xl: 2rem;--space-4xl: 2.5rem;--space-5xl: 3rem;--space-6xl: 4rem;--space-7xl: 5rem;--space-8xl: 6rem;--text-xs: 0.75rem;--text-sm: 0.875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--radius-sm: 0.25rem;--radius-md: 0.5rem;--radius-lg: 0.75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.15)}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-feature-settings:'cv01','cv03','cv04','cv11';background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;margin:0;overflow-x:hidden}svg{max-width:100%;height:auto}a{color:var(--primary);text-decoration:none}:focus{outline:2px solid var(--border-focus);outline-offset:2px}.page-wrapper{min-height:100vh;display:flex;flex-direction:column}.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-2xl);width:100%}.content-container{max-width:var(--content-max);margin:0 auto}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.85);backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--border-primary);height:var(--header-height)}.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-4xl)}.site-title{display:flex;align-items:center;gap:var(--space-md);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);text-decoration:none;padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-lg)}.logo-icon{width:28px;height:28px;color:var(--primary)}.header-nav{display:flex;align-items:center;gap:var(--space-xs)}.nav-link{position:relative;display:inline-flex;align-items:center;padding:var(--space-md) var(--space-xl);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap}.nav-link::before{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--primary);border-radius:var(--radius-full);transform:translateX(-50%)}.dark-mode-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--border-primary);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary)}.sun-icon,.moon-icon{width:20px;height:20px}.moon-icon{display:none}.hero-section{position:relative;padding:var(--space-8xl) 0 var(--space-7xl);background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);overflow:hidden}.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgb(99 102 241 / 0.08) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(139 92 246 / 0.05) 0%,transparent 50%)}.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;animation:fadeInUp 0.8s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-title{font-size:clamp(var(--text-3xl),8vw,var(--text-6xl));font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-2xl);color:var(--text-primary);letter-spacing:-0.02em}.gradient-text{background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:clamp(var(--text-lg),4vw,var(--text-xl));color:var(--text-secondary);margin:0 0 var(--space-5xl);max-width:700px;margin-left:auto;margin-right:auto;line-height:1.6}.hero-actions{display:flex;gap:var(--space-lg);justify-content:center;margin-bottom:var(--space-6xl);flex-wrap:wrap}.hero-stats{display:flex;gap:var(--space-5xl);justify-content:center;flex-wrap:wrap}.stat-item{text-align:center;position:relative}.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-2xl));top:50%;transform:translateY(-50%);width:1px;height:50px;background:var(--border-primary)}.stat-number{display:block;font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.1em;font-weight:var(--font-medium)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-lg) var(--space-3xl);border:2px solid transparent;border-radius:var(--radius-xl);font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;position:relative;overflow:hidden;min-width:160px;justify-content:center}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent)}.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:white;box-shadow:var(--shadow-md)}.btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)}.section{padding:var(--space-6xl) 0;position:relative}.section:nth-child(even){background:var(--bg-secondary)}.section-header{text-align:center;margin-bottom:var(--space-2xl)}.section-title{font-size:clamp(var(--text-3xl),6vw,var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-2xl);color:var(--text-primary);letter-spacing:-0.02em}.section-description{font-size:clamp(var(--text-base),3vw,var(--text-xl));color:var(--text-secondary);margin:0;max-width:800px;margin-inline:auto;line-height:1.7}.meta-chips{display:flex;gap:var(--space-sm);justify-content:center;margin-top:var(--space-xl);flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border-primary);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:0.05em}.back-to-top{position:fixed;bottom:var(--space-2xl);right:var(--space-2xl);width:48px;height:48px;background:var(--primary);color:white;border:none;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(20px);z-index:50}@media (max-width:1024px){.container{padding:0 var(--space-xl)}}@media (max-width:768px){.header-nav{display:none}.hero-actions{flex-direction:column;align-items:center}.hero-stats{gap:var(--space-2xl)}}@media (max-width:480px){.container{padding:0 var(--space-lg)}.section{padding:var(--space-4xl) 0}.stat-item:not(:last-child)::after{display:none}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}@media (prefers-contrast:high){:root{--border-primary: #000;--text-secondary: #000}}
</style>
<link rel="stylesheet" href="css/styles.css">
<script src="js/app.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to main content</a>
<div class="page-wrapper">
<header class="site-header">
<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>
Debrid Comparison
</a>
<button class="nav-toggle" id="navToggle" aria-label="Open navigation menu" aria-controls="primary-navigation" aria-expanded="false" type="button">
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
<span class="nav-toggle-bar"></span>
</button>
<nav id="primary-navigation" class="header-nav" aria-label="Main navigation" aria-hidden="true">
<a href="#what-are-debrid" class="nav-link">Intro</a>
<a href="#pricing" class="nav-link">Pricing</a>
<a href="#file-hosts" class="nav-link">Hosts</a>
<a href="#compare" class="nav-link">Compare</a>
<a href="#adult-hosts" class="nav-link">Adult Hosts</a>
<a href="#speed-test" class="nav-link">Speed Test</a>
<a href="#live-status" class="nav-link">Status</a>
<a href="#resources" class="nav-link">Resources</a>
</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>
</button>
</div>
</div>
</header>
<div class="nav-overlay" id="navOverlay" hidden></div>
<main id="main-content" class="main-content" role="main">
<!-- Hero Section -->
<section class="hero-section" aria-labelledby="hero-title">
<div class="container">
<div class="hero-content">
<h1 id="hero-title" class="hero-title">
Compare Premium <span class="gradient-text">Debrid Services</span>
</h1>
<p class="hero-description">
A community-driven, up-to-date comparison of premium debrid services: pricing, host support, refund policies, and performance.
</p>
<div class="hero-actions">
<a href="#pricing" class="btn btn-primary">View Pricing</a>
<a href="#compare" class="btn btn-secondary">Compare Services</a>
</div>
<div class="hero-stats" aria-label="Key stats">
<div class="stat-item">
<span class="stat-number">8</span>
<span class="stat-label">Services</span>
</div>
<div class="stat-item">
<span class="stat-number">300+</span>
<span class="stat-label">File Hosts</span>
</div>
</div>
</div>
</div>
</section>
<!-- What are Debrid Services -->
<section id="what-are-debrid" class="section" aria-labelledby="what-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="what-title" class="section-title">What are Debrid Services?</h2>
<p class="section-description">
Debrid services (a.k.a. premium link generators) act as a highspeed intermediary: they fetch the file from a host, then serve you a fast, adfree direct link.
</p>
<div class="meta-chips" aria-label="Key traits">
<span class="chip">Premium link generator</span>
<span class="chip">Adfree</span>
<span class="chip">Multihost</span>
<span class="chip">Torrenttolink</span>
</div>
</div>
<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>
<h3>Maximum Speeds</h3>
<p>Bypass host throttling with direct links</p>
</article>
<article class="benefit-card" role="article">
<svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
</svg>
<h3>MultiHost Access</h3>
<p>One subscription supports hundreds of hosts</p>
</article>
<article class="benefit-card" role="article">
<svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polygon points="10,8 16,12 10,16 10,8"/>
</svg>
<h3>Streaming Ready</h3>
<p>Instant playback on supported hosts</p>
</article>
<article class="benefit-card" role="article">
<svg class="icon-badge" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
<polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
<polyline points="7.5,19.79 7.5,14.6 3,12"/>
<polyline points="21,12 16.5,14.6 16.5,19.79"/>
</svg>
<h3>TorrenttoLink</h3>
<p>Add magnet/torrent and get a direct URL</p>
</article>
<article class="benefit-card" role="article">
<svg class="icon-badge" 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>
<h3>AdFree</h3>
<p>No popups, countdowns, or captchas</p>
</article>
</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>
<div>Think of a debrid service as a "premium proxy" between you and hosts like Rapidgator, Mega, or Uptobox.</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="section" aria-labelledby="pricing-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="pricing-title" class="section-title">Pricing Comparison</h2>
<p class="section-description">Compare subscription plans across all major debrid services</p>
</div>
<div class="pricing-container">
<div id="pricing-table-container" class="data-table-container" role="region" aria-live="polite" aria-label="Pricing table">
<div class="loading-state" aria-busy="true">
<div class="loading-spinner" aria-hidden="true"></div>
<p>Loading pricing data...</p>
</div>
</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>
<div><strong>Important:</strong> Pricing can change frequently. Always verify current pricing on official websites before purchasing.</div>
</div>
</div>
<div class="referral-section" aria-labelledby="referral-title">
<div class="referral-header">
<h3 id="referral-title">Support This Project</h3>
<p>Consider using our referral links - it helps maintain this project at no extra cost to you!</p>
</div>
<div class="referral-grid">
<a href="https://alldebrid.com/?uid=3wvya&lang=en" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
<span class="service-name">AllDebrid</span>
<span class="referral-badge">Referral Link</span>
</a>
<a href="https://real-debrid.com/?id=10990901" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
<span class="service-name">Real-Debrid</span>
<span class="referral-badge">Referral Link</span>
</a>
<a href="https://linksnappy.com/?ref=774668" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
<span class="service-name">LinkSnappy</span>
<span class="referral-badge">Referral Link</span>
</a>
<a href="https://debrid-link.com/id/7B3BO" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
<span class="service-name">Debrid-Link</span>
<span class="referral-badge">Referral Link</span>
</a>
<a href="https://www.deepbrid.com/aff/go/upward1971" class="referral-card" target="_blank" rel="noopener noreferrer sponsored">
<span class="service-name">Deepbrid</span>
<span class="referral-badge">Referral Link</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- File Hosts Section -->
<section id="file-hosts" class="section" aria-labelledby="hosts-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="hosts-title" class="section-title">Supported File Hosts</h2>
<p class="section-description">Browse and search through 300+ supported file hosting services</p>
</div>
<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>
<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>
</button>
</form>
</div>
<div id="file-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
<div class="loading-state" aria-busy="true">
<div class="loading-spinner"></div>
<p>Loading file hosts...</p>
</div>
</div>
</div>
</div>
</section>
<!-- Compare Section -->
<section id="compare" class="section" aria-labelledby="compare-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="compare-title" class="section-title">Compare Services</h2>
<p class="section-description">Select two services to see a detailed side-by-side comparison</p>
</div>
<div class="compare-controls">
<div class="compare-select-group">
<label for="provider1">First Service</label>
<div class="select-wrapper">
<select id="provider1" aria-label="Select first provider to compare">
<option value="">Choose a service...</option>
</select>
</div>
</div>
<div class="compare-vs">VS</div>
<div class="compare-select-group">
<label for="provider2">Second Service</label>
<div class="select-wrapper">
<select id="provider2" aria-label="Select second provider to compare">
<option value="">Choose a service...</option>
</select>
</div>
</div>
</div>
<div id="compare-table-container" class="data-table-container" role="region" aria-live="polite">
<div class="empty-state">
<svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<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>
<h3>Ready to Compare</h3>
<p>Select two services above to see a detailed comparison</p>
</div>
</div>
</div>
</div>
</section>
<!-- Adult Hosts Section -->
<section id="adult-hosts" class="section" aria-labelledby="adult-hosts-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="adult-hosts-title" class="section-title">Adult Content Hosts</h2>
<p class="section-description">
Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations.
</p>
</div>
<div class="search-section">
<form class="search-container" role="search" aria-label="Search adult 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>
<input type="search" id="adult-host-search-input" class="search-input"
placeholder="Search adult hosts..." aria-label="Search adult hosts" autocomplete="off" />
<button id="clear-adult-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>
</button>
</form>
</div>
<div id="adult-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
<div class="loading-state" aria-busy="true">
<div class="loading-spinner"></div>
<p>Loading adult hosts...</p>
</div>
</div>
</div>
</div>
</section>
<!-- Speed Test Section -->
<section id="speed-test" class="section" aria-labelledby="speed-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="speed-title" class="section-title">Speed Test</h2>
<p class="section-description">
Actual speeds vary by location, time of day, host performance, and load. Test before committing to a long plan.
</p>
</div>
<div class="speed-section">
<div class="speed-header">
<h3>Official Speed Tools</h3>
<p>Test download speeds directly from service providers</p>
</div>
<div class="speed-grid">
<a href="https://real-debrid.com/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
<span class="service-name">RealDebrid</span>
<span class="speed-test-label">Speed Test</span>
</a>
<a href="https://www.premiumize.me/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
<span class="service-name">Premiumize</span>
<span class="speed-test-label">Speed Test</span>
</a>
<a href="https://www.torbox.app/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
<span class="service-name">TorBox</span>
<span class="speed-test-label">Speed Test</span>
</a>
<a href="https://debrid-link.com/webapp/speedtest" class="speed-card" target="_blank" rel="noopener noreferrer">
<span class="service-name">DebridLink</span>
<span class="speed-test-label">Speed Test</span>
</a>
<a href="https://www.mega-debrid.eu/index.php?page=network" class="speed-card" target="_blank" rel="noopener noreferrer">
<span class="service-name">MegaDebrid</span>
<span class="speed-test-label">Network Test</span>
</a>
</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>
<div>These tests are bestcase scenarios from the provider's own network.</div>
</div>
</div>
</div>
</div>
</section>
<!-- Service Status Section -->
<section id="live-status" class="section" aria-labelledby="status-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="status-title" class="section-title">Service Status</h2>
<p class="section-description">Check real-time status and official host lists</p>
</div>
<div class="status-grid">
<a href="https://alldebrid.com/status/" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">AllDebrid</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>View live status and supported hosts</p>
</a>
<a href="https://real-debrid.com/compare" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">Real-Debrid</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>Check service status and host comparison</p>
</a>
<a href="https://torbox.app/hosters" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">TorBox</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>View supported hosters and status</p>
</a>
<a href="https://www.premiumize.me/services" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">Premiumize</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>Check service availability and features</p>
</a>
<a href="https://linksnappy.com/myaccount/status" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">LinkSnappy</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>Monitor service status and hosts</p>
</a>
<a href="https://debrid-link.com/webapp/status" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">Debrid-Link</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>View current status and host list</p>
</a>
<a href="https://www.mega-debrid.eu/index.php?page=hebergeurs" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">Mega-Debrid</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>Check supported file hosts</p>
</a>
<a href="https://www.deepbrid.com/status" class="status-card" target="_blank" rel="noopener noreferrer">
<div class="status-header">
<span class="service-name">Deepbrid</span>
<span class="service-status-indicator online" aria-label="Online"></span>
</div>
<p>Check supported file hosts</p>
</a>
</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>
<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>
</div>
</div>
</section>
<!-- Important Notes Section -->
<section id="important-notes" class="section" aria-labelledby="notes-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="notes-title" class="section-title">Important Notes</h2>
<p class="section-description">
This project aims to provide accurate and up-to-date information, but the debrid service landscape is dynamic.
</p>
</div>
<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>
<div class="note-content">
<h3>Services change frequently</h3>
<p>Pricing, host support, refund policies, and features may be updated without notice. Always verify details on the <strong>official service websites</strong> before purchasing.</p>
</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>
<div class="note-content">
<h3>Final cost may vary</h3>
<p>Displayed prices are subject to exchange rates, regional taxes, or payment processing fees. Your actual charge may differ slightly.</p>
</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>
<div class="note-content">
<h3>Data accuracy</h3>
<p>While we strive for completeness, this comparison reflects community reports and public information. We do <strong>not guarantee</strong> uptime, speed, download success, or feature availability.</p>
</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>
<div class="note-content">
<h3>No affiliation</h3>
<p>This project is independent and <strong>not affiliated</strong> with any listed service.</p>
</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>
<div class="note-content">
<h3>Use at your own discretion</h3>
<p>Choosing a debrid service involves personal judgment. Test short-term plans first and review terms carefully.</p>
</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>
<div class="note-content">
<h3>Legal responsibility</h3>
<p>Debrid services are tools. You are responsible for complying with copyright laws and terms of use when accessing content.</p>
</div>
</div>
</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>
<div><strong>This is an open-source, community-maintained guide. It does not endorse or promote unauthorized file sharing.</strong></div>
</div>
</div>
</div>
</section>
<!-- Resources Section -->
<section id="resources" class="section" aria-labelledby="resources-title">
<div class="container">
<div class="content-container">
<div class="section-header">
<h2 id="resources-title" class="section-title">Useful Resources and Community</h2>
<p class="section-description">Enhance your debrid experience with these trusted tools, guides, and communities</p>
</div>
<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>
Tools and Integrations
</h3>
<div class="resource-list">
<a href="https://github.com/debridmediamanager/awesome-debrid" class="resource-item" target="_blank" rel="noopener noreferrer">
<strong>Awesome-Debrid</strong>
<span>Curated list of debrid-compatible apps, browser extensions, and automation tools</span>
</a>
<a href="https://github.com/debridmediamanager/debrid-media-manager" class="resource-item" target="_blank" rel="noopener noreferrer">
<strong>Debrid Media Manager</strong>
<span>Easily download movies and TV shows directly to your Debrid library</span>
</a>
<a href="https://github.com/rogerfar/rdt-client" class="resource-item" target="_blank" rel="noopener noreferrer">
<strong>Real-Debrid Torrent Client</strong>
<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" 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" target="_blank" rel="noopener noreferrer">
<strong>Jackett + Prowlarr</strong>
<span>Indexer proxies that work seamlessly with debrid services for automation</span>
</a>
</div>
</div>
<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>
Community and Support
</h3>
<div class="resource-list">
<div class="resource-item">
<strong>Reddit</strong>
<span>Active discussions on r/Debrid, r/Piracy and service-specific threads</span>
</div>
<div class="resource-item">
<strong>Discord</strong>
<span>Many services offer official Discord servers for real-time support and status updates</span>
</div>
<div class="resource-item">
<strong>GitHub Issues</strong>
<span>Report inaccuracies or suggest improvements here — this project thrives on community input!</span>
</div>
</div>
</div>
</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>
<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>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="content-container">
<div class="footer-content">
<div class="footer-section">
<div class="footer-brand">
<svg class="footer-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
<h4>Debrid Comparison</h4>
</div>
<p class="footer-description">
A comprehensive, community-driven comparison of premium debrid services.
Compare pricing, features, and host support to find the best service for your needs.
</p>
<div class="footer-stats">
<span class="footer-stat">8 Services</span>
<span class="footer-stat">300+ Hosts</span>
</div>
</div>
<div class="footer-section">
<h5>Quick Links</h5>
<ul class="footer-links">
<li><a href="#pricing">Pricing Comparison</a></li>
<li><a href="#file-hosts">File Hosts</a></li>
<li><a href="#compare">Compare Services</a></li>
<li><a href="#speed-test">Speed Tests</a></li>
<li><a href="#live-status">Service Status</a></li>
</ul>
</div>
<div class="footer-section">
<h5>Resources</h5>
<ul class="footer-links">
<li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank" rel="noopener noreferrer">Awesome Debrid</a></li>
<li><a href="https://github.com/debridmediamanager/debrid-media-manager" target="_blank" rel="noopener noreferrer">DMM Tool</a></li>
<li><a href="https://github.com/rogerfar/rdt-client" target="_blank" rel="noopener noreferrer">RDT Client</a></li>
<li><a href="https://github.com/g0ldyy/comet" target="_blank" rel="noopener noreferrer">Comet Addon</a></li>
</ul>
</div>
<div class="footer-section">
<h5>Project</h5>
<ul class="footer-links">
<li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank" rel="noopener noreferrer">Source Code</a></li>
<li><a href="https://github.com/fynks/debrid-services-comparison/issues" target="_blank" rel="noopener noreferrer">Report Issues</a></li>
<li><a href="https://github.com/fynks/debrid-services-comparison/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contribute</a></li>
<li><a href="https://github.com/fynks/debrid-services-comparison/releases" target="_blank" rel="noopener noreferrer">Changelog</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div class="footer-bottom-content">
<div class="footer-left">
<p>&copy; 2025 Debrid Services Comparison. Made with ❤️ by <a href="https://github.com/fynks" target="_blank" rel="noopener noreferrer">Fynks</a></p>
<p class="footer-disclaimer">This is an independent, open-source project not affiliated with any debrid service.</p>
</div>
<div class="footer-right">
<div class="footer-meta">
<span class="last-updated">Last updated: <time datetime="2025-08-22">August 22, 2025</time></span>
<a href="https://github.com/fynks/debrid-services-comparison" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="View source on GitHub">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="back-to-top" aria-label="Back to top" type="button">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 15l-6-6-6 6"/>
</svg>
</button>
</div>
<!-- JavaScript -->
<script>
// Dark mode toggle
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('darkModeToggle');
const bodyEl = document.body;
const navToggle = document.getElementById('navToggle');
const nav = document.getElementById('primary-navigation');
const navOverlay = document.getElementById('navOverlay');
const focusableSelectors = 'a[href], button:not([disabled]), select, textarea, input, [tabindex]:not([tabindex="-1"])';
let lastFocusedBeforeMenu = null;
// Mark JS ready to enable transitions after initial paint (prevents slide-in glitch)
requestAnimationFrame(()=> bodyEl.classList.add('js-ready'));
function trapFocus(container) {
const focusables = Array.from(container.querySelectorAll(focusableSelectors));
if (!focusables.length) return;
let first = focusables[0];
let last = focusables[focusables.length - 1];
function handle(e){
if(e.key==='Tab') {
if(e.shiftKey && document.activeElement===first){e.preventDefault();last.focus();}
else if(!e.shiftKey && document.activeElement===last){e.preventDefault();first.focus();}
}
}
container.addEventListener('keydown', handle);
}
function updateNavAria(){
if(!nav) return;
if(window.innerWidth <= 900){
nav.setAttribute('aria-hidden', bodyEl.classList.contains('nav-open') ? 'false' : 'true');
} else {
nav.removeAttribute('aria-hidden');
}
}
function openMenu(){
lastFocusedBeforeMenu = document.activeElement;
bodyEl.classList.add('nav-open');
navToggle.setAttribute('aria-expanded','true');
navOverlay.hidden = false;
nav.setAttribute('data-open','true');
const firstLink = nav.querySelector('a');
firstLink && firstLink.focus();
trapFocus(nav);
updateNavAria();
}
function closeMenu(){
bodyEl.classList.remove('nav-open');
navToggle.setAttribute('aria-expanded','false');
navOverlay.hidden = true;
nav.removeAttribute('data-open');
lastFocusedBeforeMenu && lastFocusedBeforeMenu.focus();
updateNavAria();
}
if(navToggle){
navToggle.addEventListener('click', ()=>{
if(bodyEl.classList.contains('nav-open')) closeMenu(); else openMenu();
});
}
if(navOverlay){
navOverlay.addEventListener('click', closeMenu);
}
window.addEventListener('keydown', (e)=>{
if(e.key==='Escape' && bodyEl.classList.contains('nav-open')) closeMenu();
});
// Handle resize (debounced via rAF)
let resizeRaf;
window.addEventListener('resize', ()=>{
if(resizeRaf) cancelAnimationFrame(resizeRaf);
resizeRaf = requestAnimationFrame(updateNavAria);
});
updateNavAria();
// Scrollspy for active nav link
const sectionIds = Array.from(nav?.querySelectorAll('a[href^="#"]')||[]).map(a=>a.getAttribute('href')).filter(Boolean);
const sections = sectionIds.map(id=>document.querySelector(id)).filter(Boolean);
if('IntersectionObserver' in window && sections.length){
const observer = new IntersectionObserver(entries=>{
entries.forEach(entry=>{
const id = '#'+entry.target.id;
const link = nav.querySelector(`a[href="${id}"]`);
if(link){
if(entry.isIntersecting){
nav.querySelectorAll('.nav-link.active').forEach(l=>{l.classList.remove('active'); l.removeAttribute('aria-current');});
link.classList.add('active');
link.setAttribute('aria-current','page');
}
}
});
}, {rootMargin: '-40% 0px -50% 0px', threshold: [0,0.25,0.5,1]});
sections.forEach(sec=>observer.observe(sec));
}
if (btn) {
const getTheme = () => document.documentElement.getAttribute('data-theme') || 'light';
const setTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.style.colorScheme = theme;
localStorage.setItem('theme', theme);
btn.setAttribute('aria-pressed', String(theme === 'dark'));
};
btn.setAttribute('aria-pressed', String(getTheme() === 'dark'));
btn.addEventListener('click', () => {
setTheme(getTheme() === 'dark' ? 'light' : 'dark');
});
}
// Smooth scroll for anchor links
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', (e) => {
const id = anchor.getAttribute('href');
const target = id && document.querySelector(id);
if (!target) return;
e.preventDefault();
if(bodyEl.classList.contains('nav-open')) closeMenu();
target.scrollIntoView({
behavior: prefersReduced ? 'auto' : 'smooth',
block: 'start'
});
const focusEl = target.querySelector('h1,h2,h3,h4,h5,h6') || target;
focusEl.setAttribute('tabindex', '-1');
focusEl.focus({ preventScroll: true });
setTimeout(() => focusEl.removeAttribute('tabindex'), 400);
});
});
// Back to top button
const backToTop = document.getElementById('backToTop');
if (backToTop) {
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.classList.add('visible');
} else {
backToTop.classList.remove('visible');
}
});
backToTop.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: prefersReduced ? 'auto' : 'smooth'
});
});
}
// Search functionality for file hosts
const hostSearchInput = document.getElementById('host-search-input');
const clearHostSearch = document.getElementById('clear-host-search');
if (clearHostSearch) {
clearHostSearch.addEventListener('click', () => {
hostSearchInput.value = '';
hostSearchInput.focus();
// Trigger search clear event if needed
});
}
// Search functionality for adult hosts
const adultHostSearchInput = document.getElementById('adult-host-search-input');
const clearAdultHostSearch = document.getElementById('clear-adult-host-search');
if (clearAdultHostSearch) {
clearAdultHostSearch.addEventListener('click', () => {
adultHostSearchInput.value = '';
adultHostSearchInput.focus();
// Trigger search clear event if needed
});
}
// Mock data loading simulation (replace with actual API calls)
setTimeout(() => {
// Simulate loading completion
const loadingStates = document.querySelectorAll('.loading-state');
loadingStates.forEach(state => {
state.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: var(--space-xl);">Data would be loaded here via API calls</p>';
});
}, 2000);
// Compare functionality
const provider1Select = document.getElementById('provider1');
const provider2Select = document.getElementById('provider2');
const compareContainer = document.getElementById('compare-table-container');
if (provider1Select && provider2Select) {
// Populate select options (mock data)
const services = ['AllDebrid', 'Real-Debrid', 'TorBox', 'Premiumize', 'LinkSnappy', 'Debrid-Link', 'Mega-Debrid', 'Deepbrid'];
services.forEach(service => {
const option1 = new Option(service, service.toLowerCase());
const option2 = new Option(service, service.toLowerCase());
provider1Select.appendChild(option1);
provider2Select.appendChild(option2);
});
// Handle comparison
const updateComparison = () => {
const service1 = provider1Select.value;
const service2 = provider2Select.value;
if (service1 && service2 && service1 !== service2) {
compareContainer.style.display = 'block';
compareContainer.classList.add('comparison-visible');
compareContainer.innerHTML = `
<div style="padding: var(--space-4xl); text-align: center;">
<h3 style="margin: 0 0 var(--space-lg); color: var(--text-primary);">
${service1} vs ${service2}
</h3>
<p style="color: var(--text-secondary); margin: 0;">
Detailed comparison would be shown here
</p>
</div>
`;
} else {
compareContainer.style.display = 'none';
compareContainer.classList.remove('comparison-visible');
}
};
provider1Select.addEventListener('change', updateComparison);
provider2Select.addEventListener('change', updateComparison);
}
});
</script>
<noscript>
<div class="container" style="margin-top: var(--space-lg);">
<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>
<div>JavaScript is disabled. Interactive comparison and filtering won't work.</div>
</div>
</div>
</noscript>
</body>
</html>