507 lines
No EOL
42 KiB
HTML
507 lines
No EOL
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
<link rel="icon" href="favicon.ico" sizes="any">
|
|
<link rel="icon" href="favicon.svg" type="image/svg+xml">
|
|
<title>Debrid Services Comparison - Compare Pricing & Hosts</title>
|
|
<link rel="prefetch" href="./json/file-hosts.json">
|
|
<link rel="prefetch" href="./json/adult-hosts.json">
|
|
<link rel="prefetch" href="./json/pricing.json">
|
|
<link rel="preload" as="style" href="./css/styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<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/">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="./css/styles-min.css">
|
|
<script src="js/app-min.js" defer></script>
|
|
<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">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<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">
|
|
|
|
<style>
|
|
:root{ --primary: #6366f1; --primary-hover: #4f46e5; --primary-light: #a5b4fc; --primary-dark: #3730a3; --secondary: #64748b; --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-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 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; --font-thin: 100; --font-extralight: 200; --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --font-black: 900; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; --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.1); --transition-all: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --container-max-width: 1280px; --header-height: 4.5rem; --z-sticky: 1020; --z-modal: 1050; --z-tooltip: 1090} [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 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4); --shadow-focus: 0 0 0 3px rgb(129 140 248 / 0.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; 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; min-height: 100vh; overflow-x: hidden} :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} h1, h2, h3, h4, h5, h6{ font-weight: var(--font-bold); line-height: 1.25; letter-spacing: -0.025em; color: var(--text-primary)} 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: var(--transition-all)} 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 / 0.8); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border-primary); height: var(--header-height); transition: var(--transition-all)} [data-theme="dark"] .site-header{ background: rgb(15 23 42 / 0.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; transition: var(--transition-all); position: relative} .site-title:hover{ color: var(--primary); transform: translateY(-1px)} .site-title:focus-visible{ border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2))} .logo-icon{ font-size: var(--text-2xl); filter: drop-shadow(0 2px 4px rgb(99 102 241 / 0.2)); transition: var(--transition-all)} .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); text-decoration: none; border-radius: var(--radius-lg); transition: var(--transition-all); white-space: nowrap} .nav-link::before{ content: ''; position: absolute; bottom: -2px; left: 50%; width: 0; height: 2px; background: var(--primary); border-radius: var(--radius-full); transition: var(--transition-all); 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; transition: var(--transition-all); position: relative; overflow: hidden} .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{ transition: var(--transition-all); position: absolute} .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 / 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(99 102 241 / 0.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 / 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgb(129 140 248 / 0.08) 0%, transparent 50%)} .hero-content{ text-align: center; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; 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-6); color: var(--text-primary); letter-spacing: -0.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} .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; transition: var(--transition-all); white-space: nowrap; position: relative; overflow: hidden; text-align: center; min-width: 140px; justify-content: center} .btn::before{ content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.2), transparent); transition: left 0.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)} .quick-nav{ padding: var(--space-20) 0; background: var(--bg-primary); position: relative} .quick-nav-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8)} .quick-nav-card{ display: block; padding: var(--space-8); background: var(--bg-elevated); border: 2px solid var(--border-primary); border-radius: var(--radius-2xl); text-decoration: none; transition: var(--transition-all); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px)} .quick-nav-card::before{ content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--primary) 0%, transparent 100%); opacity: 0; transition: var(--transition-all); z-index: 0} .quick-nav-card:hover::before{ opacity: 0.08} .quick-nav-card:hover{ border-color: var(--primary); transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-xl)} .quick-nav-card:focus-visible{ box-shadow: var(--shadow-focus), var(--shadow-lg)} .quick-nav-card>*{ position: relative; z-index: 1} .quick-nav-icon{ font-size: var(--text-4xl); margin-bottom: var(--space-4); display: block; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.1)); transition: var(--transition-all)} .quick-nav-card:hover .quick-nav-icon{ transform: scale(1.1) rotate(-5deg)} .quick-nav-card h3{ margin: 0 0 var(--space-3); font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary)} .quick-nav-card p{ margin: 0; color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6} .quick-nav-card a:hover{ text-decoration: none} .section{ padding: var(--space-24) 0; position: relative} .section:nth-child(even){ background: var(--bg-secondary)} .section-header{ text-align: center; margin-bottom: var(--space-20); animation: fadeInUp 0.6s ease-out} .section-title{ font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl)); font-weight: var(--font-extrabold); margin: 0 0 var(--space-6); 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: 700px; margin-inline: auto; line-height: 1.7} .back-to-top{ position: fixed; bottom: var(--space-6); right: var(--space-6); width: 48px; height: 48px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); transition: all var(--transition-normal); opacity: 0; visibility: hidden; transform: translateY(20px); z-index: var(--z-docked)} .back-to-top.visible{ opacity: 1; visibility: visible; transform: translateY(0)} .back-to-top:hover{ background: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-xl)} @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;} .section-title{ font-size: var(--text-3xl);} .quick-nav-grid{ grid-template-columns: 1fr;} .footer-content{ grid-template-columns: 1fr; text-align: center;} .back-to-top{ width: 40px; height: 40px;}}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<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" 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">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1 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">
|
|
<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">
|
|
<div class="container">
|
|
<div class="quick-nav-grid">
|
|
<a href="#pricing" class="quick-nav-card">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 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">
|
|
<div class="loading-state">
|
|
<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">
|
|
<div class="referral-header">
|
|
<h3>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"
|
|
rel="noopener sponsored">
|
|
<span class="service-name">AllDebrid</span>
|
|
<span class="referral-badge">Referral Link</span>
|
|
</a>
|
|
<a href="http://real-debrid.com/?id=10990901" class="referral-card"
|
|
rel="noopener sponsored">
|
|
<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" rel="noopener sponsored">
|
|
<span class="service-name">TorBox</span>
|
|
<span class="referral-badge">Referral Link</span>
|
|
</a>
|
|
<a href="http://linksnappy.com/?ref=774668" class="referral-card" rel="noopener 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" rel="noopener 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"
|
|
rel="noopener sponsored">
|
|
<span class="service-name">DeepBird</span>
|
|
<span class="referral-badge">Referral Link</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- File Hosts Section -->
|
|
<section id="file-hosts" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 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">
|
|
<div class="search-container enhanced">
|
|
<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" autocomplete="off" />
|
|
<button id="clear-host-search" class="clear-icon" aria-label="Clear search"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="file-hosts-table-container" class="data-table-container" role="region"
|
|
aria-live="polite">
|
|
<div class="loading-state">
|
|
<div class="loading-spinner" aria-hidden="true"></div>
|
|
<p>Loading file hosts...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Comparison Section -->
|
|
<section id="compare" class="section">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 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" 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">
|
|
<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">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Adult Content Hosts</h2>
|
|
<p class="section-description">Supported adult content hosting services</p>
|
|
</div>
|
|
|
|
<div class="search-section">
|
|
<div class="search-container enhanced">
|
|
<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"
|
|
autocomplete="off" />
|
|
<button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search"
|
|
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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="adult-hosts-table-container" class="data-table-container" role="region"
|
|
aria-live="polite">
|
|
<div class="loading-state">
|
|
<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">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2 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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">
|
|
<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"
|
|
rel="noopener">
|
|
<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" rel="noopener">
|
|
<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" rel="noopener">Awesome
|
|
Debrid</a></li>
|
|
<li><a href="https://github.com/fynks/debrid-services-comparison" rel="noopener">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" rel="noopener">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>
|
|
|
|
<script>
|
|
// Enhanced theme toggle with system preference detection
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const darkModeToggle = document.getElementById('darkModeToggle');
|
|
const backToTopBtn = document.getElementById('backToTop');
|
|
|
|
// Theme management
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
|
|
|
|
document.documentElement.setAttribute('data-theme', initialTheme);
|
|
|
|
darkModeToggle.addEventListener('click', () => {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
});
|
|
|
|
// Back to top functionality with performance optimization
|
|
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 scrolling for navigation links with accessibility
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const target = document.querySelector(targetId);
|
|
|
|
if (target) {
|
|
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
|
|
// Focus management for accessibility
|
|
const targetFocus = target.querySelector('h1, h2, h3, h4, h5, h6') || target;
|
|
targetFocus.setAttribute('tabindex', '-1');
|
|
targetFocus.focus();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</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> |