532 lines
No EOL
39 KiB
HTML
532 lines
No EOL
39 KiB
HTML
<!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 & DeepBird.">
|
||
<meta name="robots" content="index, follow">
|
||
<meta name="author" content="Fynks">
|
||
<meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
|
||
|
||
<!-- 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">
|
||
<link rel="canonical" href="https://debrid-services-comparison.netlify.app/">
|
||
|
||
<!-- Preconnects for fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
||
<!-- Async Google Fonts CSS with swap -->
|
||
<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>
|
||
|
||
<meta name="description"
|
||
content="Compare pricing and supported hosts across AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid & DeepBird.">
|
||
<meta name="keywords"
|
||
content="debrid services comparison, AllDebrid, Real-Debrid, LinkSnappy, Premiumize, Debrid-Link, TorBox, Mega-Debrid, file hosting,debrid, debrid services, debrid providers, download services, premium downloads, torrent, torrent-free-downloader, torrent-to-link, link-converter, magnet-to-link, magnet downloader, DeepBird">
|
||
<meta name="author" content="Fynks">
|
||
<meta name="robots" content="index, follow">
|
||
<meta name="theme-color" content="#6366f1">
|
||
<meta name="google-site-verification" content="nlH9UKmiZsYOuMXXnRc9pKL-AW5rECWikqcUqzri-yQ">
|
||
|
||
<script src="js/app.js" defer></script>
|
||
|
||
<!-- Early theme apply to avoid flash -->
|
||
<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{ color-scheme: light dark; --primary:#6366f1;--primary-hover:#4f46e5;--primary-light:#a5b4fc;--primary-dark:#3730a3; --success:#10b981;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6; --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); --space-px:1px;--space-0-5:.125rem;--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-2-5:.625rem;--space-3:.75rem;--space-3-5:.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem; --text-xs:.75rem;--text-sm:.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-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800; --radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-full:9999px; --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1); --shadow-focus:0 0 0 3px rgb(99 102 241 / .15); --transition-fast:.15s cubic-bezier(.4,0,.2,1); --transition-normal:.2s cubic-bezier(.4,0,.2,1); --transition-slow:.3s cubic-bezier(.4,0,.2,1); --container-max-width:1280px;--header-height:4.5rem;--z-sticky:1020;--z-docked:10} [data-theme="dark"]{ --text-primary:var(--gray-50);--text-secondary:var(--gray-300);--text-tertiary:var(--gray-400);--text-muted:var(--gray-500); --bg-primary:var(--gray-900);--bg-secondary:var(--gray-800);--bg-tertiary:var(--gray-700);--bg-elevated:var(--gray-800); --border-primary:var(--gray-700);--border-secondary:var(--gray-600); --border-focus:var(--primary-light); --primary:#818cf8;--primary-hover:#a5b4fc;--primary-light:#c7d2fe;--primary-dark:#6366f1; --shadow-sm:0 1px 3px 0 rgb(0 0 0 / .4),0 1px 2px -1px rgb(0 0 0 / .4); --shadow-md:0 4px 6px -1px rgb(0 0 0 / .4),0 2px 4px -2px rgb(0 0 0 / .4); --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .4),0 4px 6px -4px rgb(0 0 0 / .4); --shadow-focus:0 0 0 3px rgb(129 140 248 / .2)} *,::before,::after{box-sizing:border-box;margin:0;padding:0} 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';font-variation-settings:'opsz' 32; background-color:var(--bg-primary);color:var(--text-primary); transition:background-color var(--transition-normal),color var(--transition-normal); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility; min-height:100vh;overflow-x:hidden} img,svg,video,canvas{max-width:100%;height:auto} :focus{outline:2px solid var(--border-focus);outline-offset:2px} :focus:not(:focus-visible){outline:none} :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px} .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;padding:var(--space-2) var(--space-3);background:var(--bg-primary);color:var(--text-primary);border:2px solid var(--border-focus);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:9999} h1,h2,h3,h4,h5,h6{ font-weight:var(--font-bold);line-height:1.25;letter-spacing:-.025em;color:var(--text-primary); text-wrap:balance;scroll-margin-top:calc(var(--header-height) + var(--space-4))} h1{font-size:var(--text-4xl);font-weight:var(--font-extrabold)} h2{font-size:var(--text-3xl);font-weight:var(--font-bold)} h3{font-size:var(--text-2xl);font-weight:var(--font-semibold)} p{line-height:1.75;margin-bottom:var(--space-4)} a{color:var(--primary);text-decoration:none;transition:color var(--transition-normal)} a:hover{color:var(--primary-hover);text-decoration:none} .page-wrapper{min-height:100vh;display:flex;flex-direction:column;position:relative} .container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-6);width:100%} .main-content{flex:1;position:relative} .site-header{ position:sticky;top:0;z-index:var(--z-sticky); background:rgb(255 255 255 / .8); -webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%); border-bottom:1px solid var(--border-primary);height:var(--header-height); transition:background-color var(--transition-normal),border-color var(--transition-normal),backdrop-filter var(--transition-slow),box-shadow var(--transition-normal)} @supports not ((backdrop-filter: blur(1px))){.site-header{background:rgb(255 255 255 / .95)}} [data-theme="dark"] .site-header{background:rgb(15 23 42 / .8)} .header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-8)} .site-title{ display:flex;align-items:center;gap:var(--space-2); font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);text-decoration:none;position:relative; transition:color var(--transition-normal),transform var(--transition-normal),text-shadow var(--transition-normal)} .site-title:hover{color:var(--primary);transform:translateY(-1px)} .site-title:focus-visible{border-radius:var(--radius-md);box-shadow:var(--shadow-focus)} .logo-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgb(99 102 241 / .2));transition:transform var(--transition-normal),filter var(--transition-normal)} .site-title:hover .logo-icon{transform:rotate(-5deg) scale(1.1)} .header-nav{display:flex;align-items:center;gap:var(--space-6)} .nav-link{ position:relative;display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3); font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);border-radius:var(--radius-lg);white-space:nowrap; transition:color var(--transition-normal),background-color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal)} .nav-link::before{ content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--primary); border-radius:var(--radius-full);transition:width var(--transition-normal),left var(--transition-normal);transform:translateX(-50%)} .nav-link:hover{color:var(--primary);background:var(--bg-secondary);transform:translateY(-1px)} .nav-link:hover::before{width:70%} .nav-link:focus-visible{box-shadow:var(--shadow-focus)} .dark-mode-toggle{ display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--border-primary); border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;position:relative;overflow:hidden; transition:background-color var(--transition-normal),border-color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal),color var(--transition-normal); touch-action:manipulation} .dark-mode-toggle:hover{background:var(--bg-secondary);border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)} .dark-mode-toggle:focus-visible{box-shadow:var(--shadow-focus)} .sun-icon,.moon-icon{position:absolute;transition:opacity var(--transition-normal),transform var(--transition-normal)} .moon-icon{display:none;transform:rotate(180deg)} [data-theme="dark"] .sun-icon{display:none} [data-theme="dark"] .moon-icon{display:block;transform:rotate(0deg)} .hero-section{ position:relative;padding:var(--space-24) 0 var(--space-20); 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 / .1) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(99 102 241 / .05) 0%,transparent 50%); pointer-events:none} [data-theme="dark"] .hero-section{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%)} [data-theme="dark"] .hero-section::before{ background:radial-gradient(circle at 30% 20%,rgb(129 140 248 / .15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgb(129 140 248 / .08) 0%,transparent 50%)} .hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;z-index:1;animation:fadeInUp .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-6);color:var(--text-primary);letter-spacing:-.02em} .gradient-text{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative} [data-theme="dark"] .gradient-text{background:linear-gradient(135deg,var(--primary-light) 0%,#c4b5fd 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-10);max-width:650px;margin-left:auto;margin-right:auto;line-height:1.6} .hero-actions{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-16);flex-wrap:wrap} .hero-stats{display:flex;gap:var(--space-12);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-6));top:50%;transform:translateY(-50%);width:1px;height:40px;background:var(--border-primary)} .stat-number{display:block;font-size:clamp(var(--text-2xl),6vw,var(--text-4xl));font-weight:var(--font-extrabold);color:var(--primary);margin-bottom:var(--space-1);background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 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:.1em;font-weight:var(--font-medium)} .btn{ display:inline-flex;align-items:center;gap:var(--space-2); padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-xl); font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;text-align:center;min-width:140px;justify-content:center; transition:color var(--transition-normal),background-color var(--transition-normal),border-color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal),opacity var(--transition-normal); touch-action:manipulation} .btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s} .btn:hover::before{left:100%} .btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)} .btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)} .btn-primary:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)} .btn-secondary{background:transparent;color:var(--text-primary);border:2px solid var(--border-primary)} .btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-secondary:focus-visible{box-shadow:var(--shadow-focus)} @media (width <=1024px){ .container{padding:0 var(--space-4)}} @media (width <=768px){ .header-nav{display:none} .hero-title{font-size:var(--text-3xl)} .hero-description{font-size:var(--text-lg)} .hero-actions{flex-direction:column;align-items:center} .hero-stats{gap:var(--space-6)} .container{padding:0 var(--space-4)} .nav-link{padding:var(--space-1-5) var(--space-2);font-size:var(--text-xs)}} @media (width <=640px){ .container{padding:0 var(--space-4)} .hero-actions{flex-direction:column;align-items:center;gap:var(--space-3)} .hero-stats{gap:var(--space-8)} .nav-link{padding:var(--space-1-5) var(--space-2);font-size:var(--text-xs)} .btn{width:100%;max-width:280px;padding:var(--space-4) var(--space-6)}} @media (width <=480px){ .hero-section{padding:var(--space-16) 0 var(--space-12)} .btn{width:100%;justify-content:center} .hero-stats{flex-direction:column;gap:var(--space-4)}} @media (prefers-reduced-motion:reduce){ *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html{scroll-behavior:auto}} @media (prefers-contrast:high){ :root{--border-primary:#000;--text-secondary:#000} [data-theme="dark"]{--border-primary:#fff;--text-secondary:#fff}}
|
||
</style>
|
||
|
||
<!-- Main CSS -->
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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">
|
||
|
||
<!-- Twitter -->
|
||
<meta property="twitter:card" content="summary_large_image">
|
||
<meta property="twitter:url" content="https://debrid-services-comparison.netlify.app/">
|
||
<meta property="twitter:title" content="Debrid Services Comparison">
|
||
<meta property="twitter:description" content="Compare pricing and supported hosts across major debrid services. Find the best premium download service for your needs.">
|
||
<meta property="twitter:image" content="https://debrid-services-comparison.netlify.app/image.png">
|
||
|
||
<!-- Structured data -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context":"https://schema.org",
|
||
"@type":"WebSite",
|
||
"name":"Debrid Services Comparison",
|
||
"url":"https://debrid-services-comparison.netlify.app/",
|
||
"description":"Compare pricing and supported hosts across major debrid services.",
|
||
"creator":{"@type":"Person","name":"Fynks","url":"https://github.com/fynks"}
|
||
}
|
||
</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">
|
||
<span class="logo-icon" aria-hidden="true">⚡</span>
|
||
Debrid Comparison
|
||
</a>
|
||
<nav class="header-nav" aria-label="Main navigation">
|
||
<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>
|
||
</nav>
|
||
<button id="darkModeToggle" class="dark-mode-toggle" aria-label="Toggle dark mode" aria-pressed="false" type="button">
|
||
<svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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>
|
||
|
||
<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">
|
||
Find the perfect premium download service for your needs. Compare pricing, features, and supported hosts across all major debrid providers.
|
||
</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>
|
||
|
||
<!-- Quick Navigation -->
|
||
<section class="quick-nav" aria-label="Quick navigation">
|
||
<div class="container">
|
||
<div class="quick-nav-grid">
|
||
<a href="#pricing" class="quick-nav-card" aria-label="Go to pricing plans">
|
||
<div class="quick-nav-icon" aria-hidden="true">💰</div>
|
||
<h3>Pricing Plans</h3>
|
||
<p>Compare subscription costs and find the best value</p>
|
||
</a>
|
||
<a href="#file-hosts" class="quick-nav-card" aria-label="Go to file hosts">
|
||
<div class="quick-nav-icon" aria-hidden="true">📁</div>
|
||
<h3>File Hosts</h3>
|
||
<p>Browse 300+ supported file hosting services</p>
|
||
</a>
|
||
<a href="#compare" class="quick-nav-card" aria-label="Go to side-by-side comparison">
|
||
<div class="quick-nav-icon" aria-hidden="true">⚖️</div>
|
||
<h3>Side by Side</h3>
|
||
<p>Compare any two services directly</p>
|
||
</a>
|
||
<a href="#live-status" class="quick-nav-card" aria-label="Go to live status">
|
||
<div class="quick-nav-icon" aria-hidden="true">📊</div>
|
||
<h3>Live Status</h3>
|
||
<p>Check real-time service availability</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing Section -->
|
||
<section id="pricing" class="section" aria-labelledby="pricing-title">
|
||
<div class="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="pricing-note">
|
||
<div class="alert alert-info" role="alert">
|
||
<svg class="alert-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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>
|
||
|
||
<!-- Referral Section -->
|
||
<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" aria-label="AllDebrid referral link">
|
||
<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" aria-label="Real-Debrid referral link">
|
||
<span class="service-name">Real-Debrid</span>
|
||
<span class="referral-badge">Referral Link</span>
|
||
</a>
|
||
<a href="https://torbox.app/subscription?referral=47eece72-46b8-483b-8b7a-79d6c16dedf2" class="referral-card" target="_blank" rel="noopener noreferrer sponsored" aria-label="TorBox referral link">
|
||
<span class="service-name">TorBox</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" aria-label="LinkSnappy referral link">
|
||
<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" aria-label="Debrid-Link referral link">
|
||
<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" aria-label="DeepBird referral link">
|
||
<span class="service-name">DeepBird</span>
|
||
<span class="referral-badge">Referral Link</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- File Hosts Section -->
|
||
<section id="file-hosts" class="section" aria-labelledby="hosts-title">
|
||
<div class="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 enhanced" role="search" aria-label="Search file hosts" onsubmit="return false">
|
||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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" aria-controls="file-hosts-table-container"
|
||
autocomplete="off" autocapitalize="off" spellcheck="false" inputmode="search" />
|
||
<button id="clear-host-search" class="clear-icon" aria-label="Clear search" aria-controls="host-search-input" type="button">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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" aria-label="Supported file hosts table">
|
||
<div class="loading-state" aria-busy="true">
|
||
<div class="loading-spinner" aria-hidden="true"></div>
|
||
<p>Loading file hosts...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Comparison Section -->
|
||
<section id="compare" class="section" aria-labelledby="compare-title">
|
||
<div class="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" aria-label="Comparison selectors">
|
||
<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" aria-hidden="true">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 comparison-table" role="region" aria-live="polite" aria-label="Service comparison table">
|
||
<div class="empty-state">
|
||
<div class="empty-state-icon" aria-hidden="true">⚖️</div>
|
||
<h3>Ready to Compare</h3>
|
||
<p>Select two services above to see a detailed comparison</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Adult Hosts Section -->
|
||
<section id="adult-hosts" class="section" aria-labelledby="adult-hosts-title">
|
||
<div class="container">
|
||
<div class="section-header">
|
||
<h2 id="adult-hosts-title" class="section-title">Adult Content Hosts</h2>
|
||
<p class="section-description">Supported adult content hosting services</p>
|
||
</div>
|
||
|
||
<div class="search-section">
|
||
<form class="search-container enhanced" role="search" aria-label="Search adult hosts" onsubmit="return false">
|
||
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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"
|
||
aria-controls="adult-hosts-table-container"
|
||
autocomplete="off" autocapitalize="off" spellcheck="false" inputmode="search" />
|
||
<button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search" aria-controls="adult-host-search-input" type="button">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||
<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" aria-label="Adult hosts table">
|
||
<div class="loading-state" aria-busy="true">
|
||
<div class="loading-spinner" aria-hidden="true"></div>
|
||
<p>Loading adult hosts...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Status Section -->
|
||
<section id="live-status" class="section" aria-labelledby="status-title">
|
||
<div class="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">DeepBird</span>
|
||
<span class="service-status-indicator online" aria-label="Online"></span>
|
||
</div>
|
||
<p>Check supported file hosts</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer" role="contentinfo">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="footer-section">
|
||
<h4>Debrid Comparison</h4>
|
||
<p>Your go-to resource for comparing premium download services</p>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Resources</h4>
|
||
<ul>
|
||
<li><a href="https://github.com/debridmediamanager/awesome-debrid" target="_blank" rel="noopener noreferrer">Awesome Debrid</a></li>
|
||
<li><a href="https://github.com/fynks/debrid-services-comparison" target="_blank" rel="noopener noreferrer">Source Code</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-section">
|
||
<h4>Last Updated</h4>
|
||
<p class="last-updated-date">June 26, 2025</p>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2025 Made with ❤️ by <a href="https://github.com/fynks" target="_blank" rel="noopener noreferrer">Fynks</a></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- 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" aria-hidden="true">
|
||
<path d="M18 15l-6-6-6 6" />
|
||
</svg>
|
||
</button>
|
||
|
||
<noscript>
|
||
<div class="container" style="margin-top:1rem">
|
||
<div class="alert alert-info" role="alert">JavaScript is disabled. Interactive comparison and filtering won’t work.</div>
|
||
</div>
|
||
</noscript>
|
||
|
||
<script>
|
||
// Enhance interactions (runs after parse)
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const darkModeToggle = document.getElementById('darkModeToggle');
|
||
const backToTopBtn = document.getElementById('backToTop');
|
||
|
||
// Theme management with ARIA
|
||
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);
|
||
darkModeToggle.setAttribute('aria-pressed', String(theme === 'dark'));
|
||
};
|
||
// Init aria-pressed
|
||
darkModeToggle.setAttribute('aria-pressed', String(getTheme() === 'dark'));
|
||
|
||
darkModeToggle.addEventListener('click', () => {
|
||
setTheme(getTheme() === 'dark' ? 'light' : 'dark');
|
||
});
|
||
|
||
// Back to top visibility (throttled with rAF)
|
||
let ticking = false;
|
||
const handleScroll = () => {
|
||
if (!ticking) {
|
||
window.requestAnimationFrame(() => {
|
||
backToTopBtn.classList.toggle('visible', window.pageYOffset > 300);
|
||
ticking = false;
|
||
});
|
||
ticking = true;
|
||
}
|
||
};
|
||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||
|
||
backToTopBtn.addEventListener('click', () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
// Smooth scroll + focus management for in-page links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', (e) => {
|
||
const targetId = anchor.getAttribute('href');
|
||
const target = targetId && document.querySelector(targetId);
|
||
if (!target) return;
|
||
e.preventDefault();
|
||
target.scrollIntoView({ behavior: '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'), 500);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
window.addEventListener('load', () => {
|
||
navigator.serviceWorker.register('/sw.js').catch(err => {
|
||
console.warn('Service worker registration failed:', err);
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |