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

improved

Browse source
This commit is contained in:
fynks 2025-08-24 19:03:34 +05:00
parent 67d4abe582
commit 6bedd9aef9
2 changed files with 281 additions and 479 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

660
dist/css/styles.css vendored
View file

@ -71,6 +71,25 @@ a:hover {
transition: all var(--transition-fast)
}
/* Active state (scrollspy) */
.nav-link.active {
color: var(--primary);
background: var(--bg-secondary);
font-weight: var(--font-semibold);
}
/* Improved hover/focus visible states */
.nav-link:focus-visible, .btn:focus-visible, .referral-card:focus-visible, .speed-card:focus-visible, .status-card:focus-visible, .benefit-card:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(99 102 241 / .25);
}
.nav-link:hover:not(.active) {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.nav-link::before {
transition: all var(--transition-fast)
}
@ -95,6 +114,128 @@ a:hover {
transform: scale(1.05)
}
/* Mobile navigation toggle */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 48px;
height: 48px;
background: var(--bg-primary);
border: 2px solid var(--border-primary);
border-radius: var(--radius-full);
cursor: pointer;
position: relative;
transition: all var(--transition-fast);
}
.nav-toggle-bar {
width: 22px;
height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all var(--transition-fast);
margin: 0 auto;
}
.nav-open .nav-toggle-bar:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-open .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-open .nav-toggle-bar:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
body:not(.js-ready) .header-nav {transition:none !important;}
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
backdrop-filter: blur(2px);
z-index: 90;
opacity: 0;
visibility: hidden;
transition: opacity .3s;
}
.nav-open #navOverlay {
opacity: 1;
visibility: visible;
}
/* Mobile nav panel */
@media (max-width: 900px) {
.nav-toggle {display: inline-flex;}
.header-nav {
position: fixed;
top: var(--header-height);
right: 0;
width: min(320px, 80%);
background: var(--bg-primary);
border-left: 1px solid var(--border-primary);
border-bottom: 1px solid var(--border-primary);
box-shadow: var(--shadow-lg);
padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
display: flex;
flex-direction: column;
gap: var(--space-sm);
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
transform: translate3d(100%,0,0);
transition: transform .4s cubic-bezier(.65,.05,.36,1);
z-index: 120;
}
.header-nav[data-open="true"] {
transform: translate3d(0,0,0);
}
body.nav-open {overflow:hidden;}
.nav-link {font-size: var(--text-base); padding: var(--space-md) var(--space-lg);}
.nav-link::before {display:none;}
.dark-mode-toggle {order: 3;}
}
/* Hero meta badges */
.hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-sm);
margin-bottom: var(--space-3xl);
}
.hero-badge {
--badge-bg: linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));
display: inline-flex;
align-items: center;
gap: .4ch;
padding: var(--space-sm) var(--space-md);
font-size: var(--text-xs);
font-weight: var(--font-medium);
letter-spacing: .05em;
text-transform: uppercase;
background: var(--badge-bg);
color: var(--text-secondary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
}
.hero-badge::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 60%);
opacity: .4;
pointer-events: none;
}
/* Performance: hint GPU for frequently animated elements */
.btn, .nav-toggle, .header-nav, .back-to-top, .benefit-card, .status-card, .referral-card, .speed-card {will-change: transform;}
/* Reduced motion adjustments */
@media (prefers-reduced-motion: reduce) {
.header-nav, .nav-toggle-bar, .btn::before, .benefit-card, .status-card, .referral-card, .speed-card, .back-to-top {transition: none !important; animation: none !important;}
}
@media (max-width: 600px) {
.hero-meta {margin-bottom: var(--space-2xl);}
.hero-badge {font-size: 10px;}
}
[data-theme="dark"] .sun-icon {
display: none
}
@ -779,56 +920,17 @@ select:focus {
/* Footer */
.site-footer {
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
background: var(--bg-secondary);
border-top: 1px solid var(--border-primary);
padding: var(--space-7xl) 0 var(--space-5xl);
padding: var(--space-7xl) 0 var(--space-4xl);
margin-top: auto;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
opacity: 0.6;
}
.site-footer::after {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(129, 140, 248, 0.1) 25%,
rgba(129, 140, 248, 0.3) 50%,
rgba(129, 140, 248, 0.1) 75%,
transparent 100%
);
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-5xl);
margin-bottom: var(--space-6xl);
}
.footer-section {
position: relative;
margin-bottom: var(--space-5xl);
}
.footer-section h4,
@ -837,7 +939,6 @@ select:focus {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
position: relative;
}
.footer-section h5 {
@ -845,103 +946,50 @@ select:focus {
margin-bottom: var(--space-lg);
}
.footer-section h5::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 24px;
height: 2px;
background: var(--primary);
border-radius: 1px;
opacity: 0.8;
}
.footer-brand {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xl);
transition: transform var(--transition-normal);
}
.footer-brand:hover {
transform: translateX(2px);
margin-bottom: var(--space-lg);
}
.footer-logo {
width: 36px;
height: 36px;
width: 32px;
height: 32px;
color: var(--primary);
filter: drop-shadow(0 2px 4px rgba(129, 140, 248, 0.3));
transition: all var(--transition-normal);
}
.footer-brand:hover .footer-logo {
transform: rotate(-5deg) scale(1.05);
filter: drop-shadow(0 4px 8px rgba(129, 140, 248, 0.4));
}
.footer-brand h4 {
margin: 0;
font-size: var(--text-xl);
font-weight: var(--font-bold);
background: linear-gradient(135deg, var(--text-primary), var(--primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.footer-description {
margin: 0 0 var(--space-2xl);
margin: 0 0 var(--space-xl);
color: var(--text-secondary);
line-height: 1.7;
max-width: 320px;
font-size: var(--text-sm);
line-height: 1.6;
max-width: 300px;
}
.footer-stats {
display: flex;
gap: var(--space-md);
gap: var(--space-lg);
flex-wrap: wrap;
}
.footer-stat {
display: inline-flex;
align-items: center;
padding: var(--space-sm) var(--space-lg);
padding: var(--space-xs) var(--space-md);
background: var(--bg-primary);
border: 1px solid var(--border-primary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
color: var(--primary);
font-weight: var(--font-medium);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.footer-stat::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.1), transparent);
transition: left 0.6s ease;
}
.footer-stat:hover::before {
left: 100%;
}
.footer-stat:hover {
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(129, 140, 248, 0.3);
letter-spacing: 0.05em;
}
.footer-links {
@ -952,72 +1000,23 @@ select:focus {
.footer-links li {
margin-bottom: var(--space-md);
transform: translateX(0);
transition: transform var(--transition-fast);
}
.footer-links li:hover {
transform: translateX(4px);
}
.footer-links a {
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-fast);
transition: color var(--transition-fast);
font-size: var(--text-sm);
line-height: 1.6;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
position: relative;
}
.footer-links a::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--primary);
transition: width var(--transition-fast);
line-height: 1.5;
}
.footer-links a:hover {
color: var(--primary);
}
.footer-links a:hover::before {
width: 100%;
}
.footer-links a[target="_blank"]::after {
content: '↗';
opacity: 0;
font-size: var(--text-xs);
transition: opacity var(--transition-fast);
}
.footer-links a[target="_blank"]:hover::after {
opacity: 1;
}
.footer-bottom {
padding-top: var(--space-5xl);
padding-top: var(--space-4xl);
border-top: 1px solid var(--border-primary);
position: relative;
}
.footer-bottom::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--primary);
opacity: 0.6;
}
.footer-bottom-content {
@ -1025,193 +1024,65 @@ select:focus {
justify-content: space-between;
align-items: flex-end;
gap: var(--space-3xl);
flex-wrap: wrap;
}
.footer-left {
flex: 1;
min-width: 250px;
}
.footer-left p {
margin: 0 0 var(--space-sm);
color: var(--text-tertiary);
font-size: var(--text-sm);
line-height: 1.5;
}
.footer-disclaimer {
font-size: var(--text-xs) !important;
color: var(--text-muted) !important;
font-style: italic;
opacity: 0.8;
}
.footer-left a {
color: var(--primary);
text-decoration: none;
font-weight: var(--font-medium);
transition: all var(--transition-fast);
}
.footer-left a:hover {
text-decoration: underline;
text-shadow: 0 0 8px rgba(129, 140, 248, 0.4);
}
.footer-right {
text-align: right;
flex-shrink: 0;
}
.footer-meta {
display: flex;
align-items: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.last-updated {
font-size: var(--text-xs);
color: var(--text-muted);
opacity: 0.9;
}
.github-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
width: 36px;
height: 36px;
background: var(--bg-primary);
border: 2px solid var(--border-primary);
border-radius: var(--radius-lg);
border: 1px solid var(--border-primary);
border-radius: var(--radius-md);
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.github-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
opacity: 0;
transition: opacity var(--transition-normal);
}
.github-link svg {
position: relative;
z-index: 1;
transition: transform var(--transition-normal);
transition: all var(--transition-fast);
}
.github-link:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(129, 140, 248, 0.4);
}
.github-link:hover::before {
opacity: 1;
}
.github-link:hover svg {
color: white;
transform: scale(1.1);
}
.github-link:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
} /* Additional Footer Enhancements */
.footer-section {
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}
.footer-section:nth-child(1) { animation-delay: 0.1s; }
.footer-section:nth-child(2) { animation-delay: 0.2s; }
.footer-section:nth-child(3) { animation-delay: 0.3s; }
.footer-section:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Improved scrollbar for overflow areas */
.footer-section::-webkit-scrollbar {
width: 4px;
}
.footer-section::-webkit-scrollbar-track {
background: var(--bg-tertiary);
border-radius: 2px;
}
.footer-section::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 2px;
}
.footer-section::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
}
/* Focus styles for better accessibility */
.footer-links a:focus {
outline: 2px solid var(--primary);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Enhanced mobile touch targets */
@media (max-width: 768px) {
.footer-links a {
padding: var(--space-sm) var(--space-md);
margin: var(--space-xs) 0;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
}
.footer-links a:hover,
.footer-links a:focus {
background: var(--bg-primary);
transform: none;
}
}
/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.footer-section,
.footer-brand,
.footer-logo,
.footer-stat,
.footer-links li,
.footer-links a,
.github-link {
animation: none !important;
transition: none !important;
}
.footer-brand:hover,
.footer-links li:hover,
.footer-stat:hover,
.github-link:hover {
transform: none !important;
}
}
.back-to-top.visible {
color: white;
border-color: var(--primary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0)
@ -1356,37 +1227,7 @@ select:focus {
transition: all var(--transition-normal)
}
/* Enhanced tablet view */
@media (max-width: 1024px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: var(--space-4xl);
}
.footer-section:first-child {
grid-column: 1 / -1;
text-align: center;
border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-3xl);
margin-bottom: var(--space-2xl);
}
.footer-brand {
justify-content: center;
}
.footer-description {
text-align: center;
max-width: 500px;
margin: 0 auto var(--space-xl);
}
.footer-stats {
justify-content: center;
}
}
@media (max-width:1024px) {
@media (max-width:1024px) {
.resources-categories {
grid-template-columns: 1fr
}
@ -1453,63 +1294,11 @@ select:focus {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3xl);
gap: var(--space-xl)
}
.footer-section:first-child {
grid-column: 1 / -1;
text-align: center;
border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-3xl);
margin-bottom: var(--space-xl);
}
.footer-brand {
justify-content: center;
margin-bottom: var(--space-lg);
}
.footer-brand h4 {
font-size: var(--text-lg);
}
.footer-description {
max-width: 400px;
margin: 0 auto var(--space-xl);
text-align: center;
}
.footer-stats {
justify-content: center;
}
.footer-section h5 {
text-align: center;
margin-bottom: var(--space-lg);
}
.footer-links {
text-align: center;
}
.footer-bottom-content {
flex-direction: column;
gap: var(--space-xl);
text-align: center;
}
.footer-left {
min-width: auto;
}
.footer-right {
text-align: center;
}
.footer-meta {
flex-direction: column;
gap: var(--space-md);
align-items: center;
.footer-brand h3 {
font-size: var(--text-lg)
}
}
@ -1539,112 +1328,27 @@ select:focus {
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-2xl);
}
.footer-section:first-child {
grid-column: 1;
border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-2xl);
margin-bottom: var(--space-lg);
gap: var(--space-lg)
}
.footer-brand {
justify-content: center;
margin-bottom: var(--space-lg);
}
.footer-brand h4 {
font-size: var(--text-lg);
}
.footer-logo {
width: 32px;
height: 32px;
}
.footer-description {
max-width: 100%;
margin: 0 0 var(--space-lg);
text-align: center;
}
.footer-stats {
justify-content: center;
gap: var(--space-sm);
}
.footer-stat {
padding: var(--space-xs) var(--space-md);
font-size: 10px;
}
.footer-section h5 {
text-align: center;
font-size: var(--text-sm);
margin-bottom: var(--space-md);
}
.footer-section h5::after {
left: 50%;
transform: translateX(-50%);
width: 20px;
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(var(--text-rgb), 0.1);
margin-bottom: var(--space-lg)
}
.footer-links {
justify-content: center
}
.footer-links h4 {
text-align: center;
}
.footer-links li {
margin-bottom: var(--space-sm);
}
.footer-links a {
font-size: var(--text-xs);
padding: var(--space-xs) 0;
display: inline-block;
margin-bottom: var(--space-md)
}
.footer-bottom {
padding-top: var(--space-3xl);
}
.footer-bottom-content {
flex-direction: column;
gap: var(--space-lg);
text-align: center;
align-items: center;
}
.footer-left {
min-width: auto;
order: 2;
}
.footer-left p {
font-size: var(--text-xs);
margin-bottom: var(--space-xs);
}
.footer-right {
text-align: center;
order: 1;
}
.footer-meta {
flex-direction: column;
gap: var(--space-md);
align-items: center;
}
.last-updated {
order: 2;
}
.github-link {
order: 1;
width: 40px;
height: 40px;
text-align: center
}
}

100
dist/index.html vendored
View file

@ -80,7 +80,12 @@
</svg>
Debrid Comparison
</a>
<nav class="header-nav" aria-label="Main navigation">
<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>
@ -103,6 +108,7 @@
</div>
</div>
</header>
<div class="nav-overlay" id="navOverlay" hidden></div>
<main id="main-content" class="main-content" role="main">
<!-- Hero Section -->
@ -771,6 +777,97 @@
// 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) => {
@ -795,6 +892,7 @@
if (!target) return;
e.preventDefault();
if(bodyEl.classList.contains('nav-open')) closeMenu();
target.scrollIntoView({
behavior: prefersReduced ? 'auto' : 'smooth',
block: 'start'