auto minify

dist/index.html

@@ -261,7 +261,14 @@
 <script>
  document.addEventListener('DOMContentLoaded', ()=>{ const darkModeToggle=document.getElementById('darkModeToggle'); const savedTheme=localStorage.getItem('theme'); if (savedTheme){ document.documentElement.setAttribute('data-theme', savedTheme);} 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);});});
 </script>
-<script>if('serviceWorker'in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js');});}</script>
+      
+<script>
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js');
+        });
+    }
+</script>
 
 </body>
 

dist/js/app-min.js

@@ -1 +0,0 @@
-const debounce=(e,t=300)=>{let n;return(...a)=>{clearTimeout(n),n=setTimeout((()=>e(...a)),t)}};class TableManager{constructor(e,t,n){this.container=document.querySelector(`#${e}`),this.searchInput=document.querySelector(`#${t}`),this.clearIcon=document.querySelector(`#${n}`),this._setupSearchFunctionality()}generateTable(e={}){if(!Object.keys(e).length)return void(this.container.innerHTML="<p>No data available.</p>");const t=Object.keys(e[Object.keys(e)[0]]);this.container.innerHTML=`\n      <table id="${this.container.id.replace("-container","")}" aria-label="Service Comparison Table">\n        <thead>\n          <tr>\n            <th>Service Name</th>\n            ${t.map((e=>`<th>${e}</th>`)).join("")}\n          </tr>\n        </thead>\n        <tbody>\n          ${Object.entries(e).map((([e,n])=>`\n            <tr>\n              <td>${e}</td>\n              ${t.map((e=>`\n                <td style="text-align: center;">\n                  ${"yes"===n[e]?"✅":"❌"}\n                </td>\n              `)).join("")}\n            </tr>\n          `)).join("")}\n        </tbody>\n      </table>\n    `}_setupSearchFunctionality(){const e=debounce((()=>{const e=this.searchInput.value.toLowerCase(),t=this.container.querySelectorAll("table tbody tr");this.clearIcon.style.display=e?"block":"none",t.forEach((t=>{const n=t.querySelector("td:first-child")?.textContent.toLowerCase();t.style.display=n?.includes(e)?"":"none"}))}));this.searchInput?.addEventListener("input",e),this.clearIcon?.addEventListener("click",(()=>{this.searchInput.value="",this.clearIcon.style.display="none",e()}))}}class ComparisonManager{constructor(e,t,n,a){this.container=document.querySelector(`#${e}`),this.select1=document.querySelector(`#${t}`),this.select2=document.querySelector(`#${n}`),this.data=a,this._populateDropdowns(),this._setupEventListeners()}_populateDropdowns(){const e=Object.keys(this.data[Object.keys(this.data)[0]]);[this.select1,this.select2].forEach((t=>{e.forEach((e=>{const n=document.createElement("option");n.value=e,n.textContent=e,t.appendChild(n)}))}))}_generateCompareTable(){const e=this.select1.value,t=this.select2.value;e&&t&&(this.container.innerHTML=`\n      <button id="close-compare" title="Close Comparison">\n    <span>Close</span>\n    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n        <path d="M18 6L6 18M6 6l12 12"/>\n    </svg>\n</button>\n      <table id="compare-table" aria-label="Provider Comparison Table">\n        <thead>\n          <tr>\n            <th>Service Name</th>\n            <th>${e}</th>\n            <th>${t}</th>\n          </tr>\n        </thead>\n        <tbody>\n          ${Object.entries(this.data).map((([n,a])=>`\n            <tr>\n              <td>${n}</td>\n              <td>${"yes"===a[e]?"✅":"❌"}</td>\n              <td>${"yes"===a[t]?"✅":"❌"}</td>\n            </tr>\n          `)).join("")}\n        </tbody>\n      </table>\n    `,this.container.style.display="block",this._setupCloseButton())}_setupEventListeners(){[this.select1,this.select2].forEach((e=>{e?.addEventListener("change",(()=>this._generateCompareTable()))}))}_setupCloseButton(){this.container.querySelector("#close-compare")?.addEventListener("click",(()=>{this.container.style.display="none"}))}}class PricingManager{constructor(e){this.container=document.querySelector(`#${e}-table-container`)}generatePricingTable(e={}){if(!e.plans?.length)return void(this.container.innerHTML="<p>Error: Invalid pricing data structure.</p>");const t=Object.keys(e.plans[0]).filter((e=>"name"!==e));this.container.innerHTML=`\n      <table id="pricing-table" aria-label="Service Pricing Table">\n        <thead>\n          <tr>\n            <th>Plans</th>\n            ${t.map((e=>`<th>${e}</th>`)).join("")}\n          </tr>\n        </thead>\n        <tbody>\n          ${e.plans.map((e=>`\n            <tr>\n              <td>${e.name}</td>\n              ${t.map((t=>`\n                <td style="text-align: center;">${e[t]}</td>\n              `)).join("")}\n            </tr>\n          `)).join("")}\n        </tbody>\n      </table>\n    `}}document.addEventListener("DOMContentLoaded",(async()=>{const e=new TableManager("file-hosts-table-container","host-search-input","clear-host-search"),t=new TableManager("adult-hosts-table-container","adult-host-search-input","clear-adult-host-search"),n=new PricingManager("pricing");try{const[a,r,o]=await Promise.all([fetch("./json/file-hosts.json").then((e=>e.json())),fetch("./json/adult-hosts.json").then((e=>e.json())),fetch("./json/pricing.json").then((e=>e.json()))]);e.generateTable(a),t.generateTable(r),n.generatePricingTable(o),new ComparisonManager("compare-table-container","provider1","provider2",a)}catch(a){const r="<p>Error loading data. Please try again later.</p>";e.container.innerHTML=r,t.container.innerHTML=r,n.container.innerHTML=r}}));

dist/json/adult-hosts.json

@@ -0,0 +1 @@
+{"Beeg":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"DrTuber":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"Hentai Foundry":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"NHentai":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"PornHub":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"RedGifs":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"Redtube":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"yes","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"Rule34":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"SpankBang":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"StripChat":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"SunPorNo":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"no","TorBox":"no","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"yes"},"XHamster":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"XNXX":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"XVideos":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"XXXYMovies":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"YouJizz":{"AllDebrid":"yes","Premiumize":"no","RealDebrid":"no","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"},"Youporn":{"AllDebrid":"no","Premiumize":"no","RealDebrid":"yes","TorBox":"yes","Debrid-Link":"no","LinkSnappy":"no","Mega-Debrid":"no"}}

dist/json/pricing.json

@@ -0,0 +1 @@
+{"plans":[{"name":"Free/Trial","AllDebrid":"7 days*","Premiumize":"-","Real-Debrid":"-","TorBox":"0$/month","Debrid-Link":"Yes","Linksnappy":"-","Mega-Debrid":"-"},{"name":"7 Days","AllDebrid":"-","Premiumize":"-","Real-Debrid":"-","TorBox":"-","Debrid-Link":"-","Linksnappy":"$4.99 USD","Mega-Debrid":"-"},{"name":"15 Days","AllDebrid":"-","Premiumize":"-","Real-Debrid":"3 €","TorBox":"-","Debrid-Link":"3 €","Linksnappy":"-","Mega-Debrid":"-"},{"name":"30 Days","AllDebrid":"2.99€/mo (Recur) / 3.99€ (One-time)","Premiumize":"€9.99 / mo","Real-Debrid":"4 €","TorBox":"Starts from $2.1/mo","Debrid-Link":"4 €","Linksnappy":"$12.99 USD","Mega-Debrid":"4 €"},{"name":"90 Days","AllDebrid":"-","Premiumize":"€8.33 / month (€24.99 total)","Real-Debrid":"9 €","TorBox":"-","Debrid-Link":"9 €","Linksnappy":"$29.99 USD","Mega-Debrid":"9 €"},{"name":"180 Days","AllDebrid":"-","Premiumize":"€5.75 / month (€69.99 total)","Real-Debrid":"16 €","TorBox":"-","Debrid-Link":"16 €","Linksnappy":"$54.99 USD","Mega-Debrid":"16 €"},{"name":"300 Days","AllDebrid":"-","Premiumize":"-","Real-Debrid":"-","TorBox":"-","Debrid-Link":"25 €","Linksnappy":"-","Mega-Debrid":"-"}]}

dist/sw.js

@@ -1,69 +0,0 @@
-const CACHE_VERSION = 'v1';
-const CACHE_NAME = `debrid-cache-${CACHE_VERSION}`;
-
-const STATIC_ASSETS = [
-  '/',
-  '/index.html',
-  '/css/styles-min.css',
-  '/js/app-min.js',
-  '/favicon.ico',
-  '/favicon.svg',
-  '/apple-touch-icon.png'
-];
-
-const DATA_ASSETS = [
-  '/json/pricing.json',
-  '/json/file-hosts.json',
-  '/json/adult-hosts.json'
-];
-
-// Install event - cache static assets
-self.addEventListener('install', event => {
-  event.waitUntil(
-    caches.open(CACHE_NAME).then(cache => {
-      return cache.addAll([...STATIC_ASSETS, ...DATA_ASSETS]);
-    })
-  );
-});
-
-// Activate event - clean old caches
-self.addEventListener('activate', event => {
-  event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames
-          .filter(name => name !== CACHE_NAME)
-          .map(name => caches.delete(name))
-      );
-    })
-  );
-});
-
-// Fetch event - serve from cache, fallback to network
-self.addEventListener('fetch', event => {
-  event.respondWith(
-    caches.match(event.request).then(response => {
-      // Return cached response if found
-      if (response) {
-        return response;
-      }
-
-      // Clone the request - stream can only be consumed once
-      const fetchRequest = event.request.clone();
-
-      // Make network request and cache the response
-      return fetch(fetchRequest).then(response => {
-        if (!response || response.status !== 200 || response.type !== 'basic') {
-          return response;
-        }
-
-        const responseToCache = response.clone();
-        caches.open(CACHE_NAME).then(cache => {
-          cache.put(event.request, responseToCache);
-        });
-
-        return response;
-      });
-    })
-  );
-});

package.json

@@ -9,10 +9,15 @@
     "url": ""
   },
   "scripts": {
-    "build": "cp -a src/json/* dist/json/ && minijson dist/json/*.json"
+    "minify:css": "cleancss -o dist/css/styles-min.css src/css/styles.css",
+    "minify:js": "terser src/js/app.js -o dist/js/app-min.js --compress --mangle",
+    "build": "npm run minify:css && npm run minify:js && cp -a src/json/* dist/json/ && minijson dist/json/*.json && workbox generateSW workbox-config.js"
   },
   "author": "fynks",
   "dependencies": {
-    "@aminya/minijson": "^1.1.0"
+    "clean-css-cli": "^5.6.3",
+    "terser": "^5.37.0",
+    "@aminya/minijson": "^1.1.0",
+    "workbox-cli": "^7.3.0"
   }
 }

src/css/styles.css

@@ -0,0 +1,558 @@
+:root {
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --secondary: #64748b;
+    --secondary-hover: #475569;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --bg-light: #f8fafc;
+    --bg-white: #ffffff;
+    --border-color: #e2e8f0;
+    --border-radius: .75rem;
+    --box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
+    --transition: all .2s cubic-bezier(.4, 0, .2, 1);
+    --font-family-base: 'Inter', system-ui, sans-serif
+}
+
+[data-theme="dark"] {
+    --primary: #3b82f6;
+    --primary-hover: #60a5fa;
+    --secondary: #94a3b8;
+    --secondary-hover: #cbd5e1;
+    --text-primary: #f1f5f9;
+    --text-secondary: #94a3b8;
+    --bg-white: #0f172a;
+    --bg-light: #1e293b;
+    --border-color: #334155;
+    --box-shadow: 0 1px 3px 0 rgb(0 0 0 / .5), 0 1px 2px -1px rgb(0 0 0 / .5);
+}
+
+html {
+    scroll-behavior: smooth;
+    font-size: 16px;
+}
+
+body {
+    font-family: var(--font-family-base);
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-white);
+    color: var(--text-primary);
+    transition: background-color .3s, color .3s;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.card {
+    background-color: var(--bg-white);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    border: 1px solid var(--border-color);
+    transition: var(--transition)
+}
+
+.card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1)
+}
+
+.site-header {
+    position: sticky;
+    background-color: var(--bg-white);
+    padding: 1rem 0;
+    border-bottom: 1px solid var(--border-color);
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1);
+}
+
+.site-header .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2rem;
+}
+
+.site-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    text-decoration: none;
+    transition: var(--transition);
+}
+
+.site-title:hover {
+    color: var(--primary);
+    opacity: 1;
+}
+
+.dark-mode-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    position: relative;
+    width: 40px;
+    height: 40px;
+    transition: background-color .3s;
+}
+
+.dark-mode-toggle:hover {
+    background-color: rgba(0, 0, 0, .1);
+}
+
+[data-theme="dark"] .dark-mode-toggle:hover {
+    background-color: rgba(255, 255, 255, .1);
+}
+
+.dark-mode-toggle svg {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+    transition: transform .3s, fill .3s;
+}
+
+[data-theme="dark"] .dark-mode-toggle svg {
+    fill: #fbbf24
+}
+
+.moon-icon {
+    display: none;
+}
+
+[data-theme="dark"] .sun-icon {
+    display: none;
+}
+
+[data-theme="dark"] .moon-icon {
+    display: block;
+}
+
+main {
+    padding: 30px 0;
+}
+
+.content-section {
+    margin-bottom: 40px;
+}
+
+h2 {
+    font-size: 2rem;
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: var(--text-primary);
+}
+
+h3 {
+    font-size: 1.5rem;
+    margin-top: 30px;
+    margin-bottom: 15px;
+    color: var(--text-primary);
+}
+
+p {
+    margin-bottom: 15px;
+    color: var(--text-primary);
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: opacity .3s ease-in-out;
+}
+
+a:hover {
+    opacity: .8;
+}
+
+.link-list {
+    list-style: disc;
+    padding-left: 20px;
+}
+
+blockquote {
+    background-color: var(--bg-light);
+    border-left: 5px solid var(--primary);
+    padding: 15px;
+    margin: 20px 0;
+    font-style: italic;
+    color: var(--text-secondary);
+}
+
+code,
+.last-updated-date {
+    background-color: var(--bg-light);
+    padding: .2em .8em;
+    border-radius: var(--border-radius);
+    font-size: .9em;
+    font-family: 'ui-monospace', 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+}
+
+hr.divider {
+    border: 0;
+    border-top: 1px solid var(--border-color);
+    margin: 40px 0;
+}
+
+.last-updated {
+    text-align: center;
+    color: var(--text-secondary);
+    margin-top: 20px;
+}
+
+.site-footer {
+    background-color: var(--bg-white);
+    padding: .5rem 0;
+    border-top: 1px solid var(--border-color);
+    margin-top: 4rem;
+}
+
+.site-footer .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}
+
+.site-footer p {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: .95rem;
+}
+
+.site-footer a {
+    color: var(--primary);
+    font-weight: 500;
+    transition: var(--transition);
+}
+
+.site-footer a:hover {
+    color: var(--primary-hover);
+    opacity: 1;
+}
+
+.data-table-container {
+    overflow-x: auto;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
+    margin: 1rem 0;
+}
+
+table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    margin: 0;
+    border: none;
+    background-color: var(--bg-white);
+    font-size: .95rem;
+}
+
+th,
+td {
+    padding: 1rem 1.2rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(0, 0, 0, .05);
+}
+
+th {
+    background-color: var(--primary);
+    color: var(--bg-white);
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    font-size: .85rem;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    backdrop-filter: blur(8px);
+}
+
+th:not(:last-child) {
+    border-right: 1px solid rgba(255, 255, 255, .1);
+}
+
+tr:nth-child(even) {
+    background-color: rgba(0, 0, 0, .02);
+}
+
+tr:hover {
+    background-color: rgba(13, 110, 253, .04);
+}
+
+td {
+    transition: all .2s ease;
+}
+
+tr:hover td {
+    color: var(--primary);
+}
+
+th:first-child,
+th:last-child,
+tr:last-child td:first-child,
+tr:last-child td:last-child {
+    border-radius: 0;
+}
+
+.pricing-tb {
+    font-weight: normal;
+}
+
+.search-container {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+.search-input {
+    width: 100%;
+    padding: 10px 40px 10px 15px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    transition: border-color .3s ease-in-out;
+    box-sizing: border-box;
+    outline: none;
+}
+
+.search-input:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
+    outline: none;
+}
+
+.clear-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+}
+
+.search-input:not(:placeholder-shown)+.clear-icon,
+.search-input:focus+.clear-icon {
+    opacity: 1;
+}
+
+.clear-icon svg {
+    width: 16px;
+    height: 16px;
+    fill: var(--text-secondary);
+}
+
+.clear-icon:hover svg {
+    fill: var(--text-primary);
+}
+
+#compare-container {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 15px;
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.compare-select-group {
+    flex: 1;
+    min-width: 200px;
+}
+
+.compare-select-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
+.compare-select-group select {
+    width: 100%;
+    padding: 8px 20px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    appearance: none;
+    background-color: var(--bg-light);
+    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+    background-repeat: no-repeat;
+    background-position: right 10px center;
+    cursor: pointer;
+    transition: border-color .3s ease-in-out;
+    outline: none;
+    color: var(--text-primary);
+}
+
+.compare-select-group select:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 5px rgba(13, 110, 253, .5)
+}
+
+#compare-table-container {
+    display: none;
+    background: rgba(255, 255, 255, .9);
+    border-radius: var(--border-radius);
+    padding: 4px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
+    position: relative;
+}
+
+.compare-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
+#close-compare {
+    border: 1px solid #0b5ed7;
+    border-radius: 8px;
+    background-color: inherit;
+    padding: 8px 16px;
+    cursor: pointer;
+    font-size: .9rem;
+    color: var(--text-primary);
+    transition: all .2s cubic-bezier(.4, 0, .2, 1);
+    float: right;
+    margin-left: auto;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+#close-compare:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
+}
+
+#close-compare:active {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+}
+
+.loading {
+    text-align: center;
+    padding: 15px;
+    color: var(--text-secondary);
+}
+
+main>* {
+    opacity: 0;
+    transform: translateY(20px);
+    animation: fadeIn .5s ease forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+        transform: translateY(0)
+    }
+}
+
+[data-theme="dark"] tr:nth-child(even) {
+    background-color: rgba(255, 255, 255, .03);
+}
+
+[data-theme="dark"] tr:hover {
+    background-color: rgba(59, 130, 246, .1);
+}
+
+[data-theme="dark"] code,
+[data-theme="dark"] .last-updated-date {
+    background-color: rgba(30, 41, 59, .8);
+    color: #e2e8f0;
+}
+
+[data-theme="dark"] .search-input {
+    background-color: var(--bg-light);
+    color: var(--text-primary);
+}
+
+[data-theme="dark"] #compare-table-container {
+    background: rgba(15, 23, 42, .9);
+}
+
+@media (max-width:768px) {
+    .container {
+        padding: 15px
+    }
+
+    .site-header .container {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center
+    }
+
+    .site-title {
+        font-size: 1.25rem
+    }
+
+    h2 {
+        font-size: 1.75rem
+    }
+
+    h3 {
+        font-size: 1.25rem
+    }
+
+    table {
+        display: block;
+        overflow-x: auto;
+        white-space: nowrap;
+        border: none
+    }
+
+    th, td {
+        padding: .8rem 1rem;
+        font-size: .9rem;
+        min-width: 120px;
+        max-width: 300px;
+        white-space: normal;
+        word-wrap: break-word
+    }
+
+    th:first-child,
+    td:first-child {
+        border-left: 1px solid var(--border-color)
+    }
+
+    th:last-child,
+    td:last-child {
+        border-right: 1px solid var(--border-color)
+    }
+
+    tr:last-child td {
+        border-bottom: 1px solid var(--border-color)
+    }
+
+    #compare-container {
+        flex-direction: column
+    }
+
+    .compare-select-group {
+        min-width: auto
+    }
+
+    .site-header .container {
+        padding: 0 1rem
+    }
+
+    .site-footer {
+        padding: 1.5rem 0
+    }
+
+    .site-footer .container {
+        flex-direction: column;
+        text-align: center
+    }
+}

workbox-config.js

@@ -0,0 +1,61 @@
+module.exports = {
+  // Specify files to precache
+  globDirectory: "dist/",
+  globPatterns: [
+    "**/*.{html,css,js,json,svg,ico}",
+    "json/*.json"
+  ],
+  
+  runtimeCaching: [
+    // Cache JSON files with a stale-while-revalidate strategy
+    {
+      urlPattern: /\.json$/,
+      handler: 'StaleWhileRevalidate',
+      options: {
+        cacheName: 'json-cache',
+        expiration: {
+          maxEntries: 50,
+          maxAgeSeconds: 60 * 60 * 24 // 24 hours
+        }
+      }
+    },
+
+    // Cache static assets
+    {
+      urlPattern: /\.(?:png|css|svg|ico)$/,
+      handler: 'CacheFirst',
+      options: {
+        cacheName: 'static-assets',
+        expiration: {
+          maxEntries: 20,
+          maxAgeSeconds: 60 * 60 * 24 * 7 // 7 days
+        }
+      }
+    },
+
+    // Cache HTML files 
+    {
+      urlPattern: /\.html$/,
+      handler: 'NetworkFirst',
+      options: {
+        cacheName: 'html-cache',
+        expiration: {
+          maxEntries: 10,
+          maxAgeSeconds: 60 * 60 * 24 // 24 hours
+        }
+      }
+    }
+  ],
+
+  // Output path for service worker
+  swDest: "dist/sw.js",
+  
+  // Don't generate sourcemaps
+  sourcemap: false,
+
+  // Skip waiting on install
+  skipWaiting: true,
+  
+  // Claim clients immediately 
+  clientsClaim: true
+};