updated

docs/app-min.js

@@ -0,0 +1 @@
+class TableManager{constructor(t,e,n){this.container=document.getElementById(t),this.searchInput=document.getElementById(e),this.clearIcon=document.getElementById(n),this.setupSearchFunctionality()}generateTable(t){if(!t||0===Object.keys(t).length)return void(this.container.innerHTML="<p>No data available.</p>");const e=Object.keys(t[Object.keys(t)[0]]),n=`\n        <table id="${this.container.id.replace("-container","")}">\n          <thead>\n            <tr>\n              <th>Service Name</th>\n              ${e.map((t=>`<th>${t}</th>`)).join("")}\n            </tr>\n          </thead>\n          <tbody>\n            ${Object.entries(t).map((([t,n])=>`\n              <tr>\n                <td>${t}</td>\n                ${e.map((t=>`\n                  <td style="text-align: center;">\n                    ${"yes"===n[t]?"✅":"❌"}\n                  </td>\n                `)).join("")}\n              </tr>\n            `)).join("")}\n          </tbody>\n        </table>\n      `;this.container.innerHTML=n}setupSearchFunctionality(){this.searchInput?.addEventListener("input",(()=>{const t=this.searchInput.value.toLowerCase(),e=this.container.querySelectorAll("table tbody tr");this.clearIcon.style.display=t?"block":"none",e.forEach((e=>{const n=e.querySelector("td:first-child")?.textContent.toLowerCase();e.style.display=n?.includes(t)?"":"none"}))})),this.clearIcon?.addEventListener("click",(()=>{this.searchInput.value="",this.clearIcon.style.display="none",this.searchInput.dispatchEvent(new Event("input"))}))}}class ComparisonManager{constructor(t,e,n,a){this.container=document.getElementById(t),this.select1=document.getElementById(e),this.select2=document.getElementById(n),this.data=a,this.setupEventListeners(),this.populateDropdowns()}populateDropdowns(){const t=Object.keys(this.data[Object.keys(this.data)[0]]);[this.select1,this.select2].forEach((e=>{t.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}))}))}generateCompareTable(){const t=this.select1.value,e=this.select2.value;if(!t||!e)return;const n=`\n        <button id="close-compare" title="Close Comparison">X</button>\n        <table id="compare-table">\n          <thead>\n            <tr>\n              <th>Service Name</th>\n              <th>${t}</th>\n              <th>${e}</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[t]?"✅":"❌"}</td>\n                <td>${"yes"===a[e]?"✅":"❌"}</td>\n              </tr>\n            `)).join("")}\n          </tbody>\n        </table>\n      `;this.container.innerHTML=n,this.container.style.display="block",this.setupCloseButton()}setupEventListeners(){[this.select1,this.select2].forEach((t=>{t?.addEventListener("change",(()=>this.generateCompareTable()))}))}setupCloseButton(){document.getElementById("close-compare")?.addEventListener("click",(()=>{this.container.style.display="none"}))}}class PricingManager{constructor(t){this.container=document.getElementById(t)}generatePricingTable(t){if(!t?.plans?.length)return void(this.container.innerHTML="<p>Error: Invalid pricing data structure.</p>");const e=Object.keys(t.plans[0]).filter((t=>"name"!==t)),n=`\n        <table>\n          <thead>\n            <tr>\n              <th>Plans</th>\n              ${e.map((t=>`<th>${t}</th>`)).join("")}\n            </tr>\n          </thead>\n          <tbody>\n            ${t.plans.map((t=>`\n              <tr class="pricing-tb">\n                <td>${t.name}</td>\n                ${e.map((e=>`<td>${t[e]}</td>`)).join("")}\n              </tr>\n            `)).join("")}\n          </tbody>\n        </table>\n      `;this.container.innerHTML=n}}document.addEventListener("DOMContentLoaded",(async()=>{const t=new TableManager("file-hosts-table-container","host-search-input","clear-host-search"),e=new TableManager("adult-hosts-table-container","adult-host-search-input","clear-adult-host-search"),n=new PricingManager("pricing");try{const[a,s,i]=await Promise.all([fetch("./json/file-hosts.json").then((t=>t.json())),fetch("./json/adult-hosts.json").then((t=>t.json())),fetch("./json/pricing.json").then((t=>t.json()))]);t.generateTable(a),e.generateTable(s),n.generatePricingTable(i),new ComparisonManager("compare-table-container","provider1","provider2",a)}catch(a){const s="<p>Error loading data. Please try again later.</p>";t.container.innerHTML=s,e.container.innerHTML=s,n.container.innerHTML=s}}));

docs/index.html

@@ -96,9 +96,10 @@
             <li><a href="https://debrid-link.com/webapp/register">Debrid-Link</a></li>
             <li><a href="https://www.mega-debrid.eu/index.php?page=freeregister">Mega-Debrid</a></li>
         </ul>
-        <h1 id="pricing">Pricing</h1>
+        <h1>Pricing</h1>
+        <div  id="pricing">
         <!-- Pricing table will be generated here -->
-          
+    </div>
         <blockquote>
             <p>[ * ] = 7 Days free trail at Alldebrid requires a phone
                 verification.</p>
@@ -167,15 +168,16 @@
             <li><a href="https://www.mega-debrid.eu/index.php?page=hebergeurs">Mega-Debrid</a></li>
         </ul>
         <hr />
-        <h3 id="last-updated-january-14-2025">Last updated: January 14,
-            2025</h3>
+        <div class="last-updated">
+        <h4>Last updated: <span class="last-updated-date">January 14, 2025</span></h4>
+        </div>   
     </main>
 
     <footer role="contentinfo">
         <p><a href="https://github.com/fynks/debrid-services-comparison">Source</a> | Made with ❤️ by Fynks</p>
     </footer>
 
-<script src="app.js"></script>
+<script src="app-min.js"></script>
 
 </body>