improved
This commit is contained in:
fynks
parent
c428ecdb94
commit
402eaa7d4b
2 changed files with 124 additions and 219 deletions
53
dist/css/styles.css
vendored
53
dist/css/styles.css
vendored
|
|
@ -7,7 +7,7 @@
|
|||
--primary-dark: #3730a3;
|
||||
--accent: #8b5cf6;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--warning: #66512e;
|
||||
--error: #ef4444;
|
||||
--info: #2c6ace;
|
||||
|
||||
|
|
@ -649,14 +649,14 @@
|
|||
|
||||
.alert-warning {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
border-color: rgba(44, 35, 19, 0.2);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
|
|
@ -1357,51 +1357,6 @@
|
|||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Age Verification */
|
||||
.age-verification-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.age-verification-modal {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--space-4xl);
|
||||
max-width: 500px;
|
||||
margin: var(--space-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
border: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.age-verification-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.age-verification-content h3 {
|
||||
color: var(--error);
|
||||
margin-bottom: var(--space-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.age-verification-actions {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
justify-content: center;
|
||||
margin-top: var(--space-2xl);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background: var(--bg-secondary);
|
||||
|
|
|
|||
290
dist/index.html
vendored
290
dist/index.html
vendored
|
|
@ -219,7 +219,126 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Speed Test Section -->
|
||||
<!-- File Hosts Section -->
|
||||
<section id="file-hosts" class="section" aria-labelledby="hosts-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="hosts-title" class="section-title">Supported File Hosts</h2>
|
||||
<p class="section-description">Browse and search through 300+ supported file hosting services</p>
|
||||
</div>
|
||||
|
||||
<div class="search-section">
|
||||
<form class="search-container" role="search" aria-label="Search file hosts" onsubmit="return false">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" id="host-search-input" class="search-input"
|
||||
placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
|
||||
aria-label="Search file hosts" autocomplete="off" />
|
||||
<button id="clear-host-search" class="clear-icon" aria-label="Clear search" type="button">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="file-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="loading-state" aria-busy="true">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading file hosts...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Compare Section -->
|
||||
<section id="compare" class="section" aria-labelledby="compare-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="compare-title" class="section-title">Compare Services</h2>
|
||||
<p class="section-description">Select two services to see a detailed side-by-side comparison</p>
|
||||
</div>
|
||||
|
||||
<div class="compare-controls">
|
||||
<div class="compare-select-group">
|
||||
<label for="provider1">First Service</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="provider1" aria-label="Select first provider to compare">
|
||||
<option value="">Choose a service...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-vs">VS</div>
|
||||
<div class="compare-select-group">
|
||||
<label for="provider2">Second Service</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="provider2" aria-label="Select second provider to compare">
|
||||
<option value="">Choose a service...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="compare-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="empty-state">
|
||||
<svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 12l2 2 4-4"></path>
|
||||
<path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
|
||||
<path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
|
||||
</svg>
|
||||
<h3>Ready to Compare</h3>
|
||||
<p>Select two services above to see a detailed comparison</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adult Hosts Section -->
|
||||
<section id="adult-hosts" class="section" aria-labelledby="adult-hosts-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="adult-hosts-title" class="section-title">Adult Content Hosts</h2>
|
||||
<p class="section-description">
|
||||
Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="search-section">
|
||||
<form class="search-container" role="search" aria-label="Search adult hosts" onsubmit="return false">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" id="adult-host-search-input" class="search-input"
|
||||
placeholder="Search adult hosts..." aria-label="Search adult hosts" autocomplete="off" />
|
||||
<button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search" type="button">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="adult-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="loading-state" aria-busy="true">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading adult hosts...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Speed Test Section -->
|
||||
<section id="speed-test" class="section" aria-labelledby="speed-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
|
|
@ -334,148 +453,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- File Hosts Section -->
|
||||
<section id="file-hosts" class="section" aria-labelledby="hosts-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="hosts-title" class="section-title">Supported File Hosts</h2>
|
||||
<p class="section-description">Browse and search through 300+ supported file hosting services</p>
|
||||
</div>
|
||||
|
||||
<div class="search-section">
|
||||
<form class="search-container" role="search" aria-label="Search file hosts" onsubmit="return false">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" id="host-search-input" class="search-input"
|
||||
placeholder="Search file hosts (e.g., Mega, Rapidgator...)"
|
||||
aria-label="Search file hosts" autocomplete="off" />
|
||||
<button id="clear-host-search" class="clear-icon" aria-label="Clear search" type="button">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="file-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="loading-state" aria-busy="true">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading file hosts...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Compare Section -->
|
||||
<section id="compare" class="section" aria-labelledby="compare-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="compare-title" class="section-title">Compare Services</h2>
|
||||
<p class="section-description">Select two services to see a detailed side-by-side comparison</p>
|
||||
</div>
|
||||
|
||||
<div class="compare-controls">
|
||||
<div class="compare-select-group">
|
||||
<label for="provider1">First Service</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="provider1" aria-label="Select first provider to compare">
|
||||
<option value="">Choose a service...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="compare-vs">VS</div>
|
||||
<div class="compare-select-group">
|
||||
<label for="provider2">Second Service</label>
|
||||
<div class="select-wrapper">
|
||||
<select id="provider2" aria-label="Select second provider to compare">
|
||||
<option value="">Choose a service...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="compare-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="empty-state">
|
||||
<svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 12l2 2 4-4"></path>
|
||||
<path d="M21 12V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v7"></path>
|
||||
<path d="M3 13v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6"></path>
|
||||
</svg>
|
||||
<h3>Ready to Compare</h3>
|
||||
<p>Select two services above to see a detailed comparison</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Adult Hosts Section -->
|
||||
<section id="adult-hosts" class="section" aria-labelledby="adult-hosts-title">
|
||||
<div class="container">
|
||||
<div class="content-container">
|
||||
<div class="section-header">
|
||||
<h2 id="adult-hosts-title" class="section-title">Adult Content Hosts</h2>
|
||||
<p class="section-description">
|
||||
Support for adult content varies significantly across debrid services. Some platforms actively support major adult file hosts, while others exclude them entirely due to policy or legal considerations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="age-verification-overlay" class="age-verification-overlay">
|
||||
<div class="age-verification-modal">
|
||||
<div class="age-verification-content">
|
||||
<h3>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
||||
<line x1="12" y1="9" x2="12" y2="13"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
Adult Content Warning
|
||||
</h3>
|
||||
<p>This section contains information about adult content hosting services.</p>
|
||||
<p><strong>You must be 18 years or older to view this content.</strong></p>
|
||||
<div class="age-verification-actions">
|
||||
<button id="confirm-age" class="btn btn-primary">I am 18+ years old</button>
|
||||
<button id="deny-age" class="btn btn-secondary">I am under 18</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="adult-content" class="adult-content-wrapper" style="display: none;">
|
||||
<div class="search-section">
|
||||
<form class="search-container" role="search" aria-label="Search adult hosts" onsubmit="return false">
|
||||
<svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" id="adult-host-search-input" class="search-input"
|
||||
placeholder="Search adult hosts..." aria-label="Search adult hosts" autocomplete="off" />
|
||||
<button id="clear-adult-host-search" class="clear-icon" aria-label="Clear search" type="button">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="adult-hosts-table-container" class="data-table-container" role="region" aria-live="polite">
|
||||
<div class="loading-state" aria-busy="true">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading adult hosts...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Service Status Section -->
|
||||
<section id="live-status" class="section" aria-labelledby="status-title">
|
||||
<div class="container">
|
||||
|
|
@ -819,33 +796,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Age verification for adult content
|
||||
const overlay = document.getElementById('age-verification-overlay');
|
||||
const adultContent = document.getElementById('adult-content');
|
||||
const confirmAge = document.getElementById('confirm-age');
|
||||
const denyAge = document.getElementById('deny-age');
|
||||
|
||||
if (confirmAge) {
|
||||
confirmAge.addEventListener('click', () => {
|
||||
overlay.style.display = 'none';
|
||||
adultContent.style.display = 'block';
|
||||
localStorage.setItem('age-verified', 'true');
|
||||
});
|
||||
}
|
||||
|
||||
if (denyAge) {
|
||||
denyAge.addEventListener('click', () => {
|
||||
overlay.style.display = 'none';
|
||||
// Keep adult content hidden
|
||||
});
|
||||
}
|
||||
|
||||
// Check if age was previously verified
|
||||
if (localStorage.getItem('age-verified') === 'true') {
|
||||
overlay.style.display = 'none';
|
||||
adultContent.style.display = 'block';
|
||||
}
|
||||
|
||||
// Search functionality for file hosts
|
||||
const hostSearchInput = document.getElementById('host-search-input');
|
||||
const clearHostSearch = document.getElementById('clear-host-search');
|
||||
|
|
|
|||
Loading…
Reference in a new issue