added synamic generation of pricing table

docs/app.js

@@ -1,4 +1,4 @@
- document.addEventListener('DOMContentLoaded', async () => {
+document.addEventListener('DOMContentLoaded', async () => {
     const fileHostsTableContainer = document.getElementById('file-hosts-table-container');
     const hostSearchInput = document.getElementById('host-search-input');
     const clearHostSearchIcon = document.getElementById('clear-host-search');
@@ -11,16 +11,20 @@
     const adultHostSearchInput = document.getElementById('adult-host-search-input');
     const clearAdultHostSearchIcon = document.getElementById('clear-adult-host-search');
 
+    const pricingSection = document.getElementById('pricing'); // Targeting the 'Pricing' section
+
     // Initially hide the comparison table container
     compareTableContainer.style.display = 'none';
 
     try {
-                const [fileHostsResponse, adultHostsResponse] = await Promise.all([
+        const [fileHostsResponse, adultHostsResponse, pricingResponse] = await Promise.all([
             fetch('./json/file-hosts.json'),
-                    fetch('./json/adult-hosts.json')
+            fetch('./json/adult-hosts.json'),
+            fetch('./json/pricing.json') // Fetching the pricing data
         ]);
         const fileHostsData = await fileHostsResponse.json();
         const adultHostsData = await adultHostsResponse.json();
+        const pricingData = await pricingResponse.json(); // Parsed pricing data
 
         // Function to generate a table
         const generateTable = (data, tableId) => {
@@ -45,6 +49,33 @@
             container.innerHTML = tableHTML;
         };
 
+        // Function to generate the pricing table
+        const generatePricingTable = (pricingData) => {
+            let tableHTML = '<table><thead><tr><th>Plans</th>';
+            // Extract service names from the first plan object
+            if (pricingData.plans && pricingData.plans.length > 0) {
+                const services = Object.keys(pricingData.plans[0]).filter(key => key !== 'name');
+                services.forEach(service => {
+                    tableHTML += `<th>${service}</th>`;
+                });
+                tableHTML += '</tr></thead><tbody>';
+
+                pricingData.plans.forEach(plan => {
+                    tableHTML += '<tr class=pricing-tb>';
+                    tableHTML += `<td>${plan.name}</td>`;
+                    services.forEach(service => {
+                        tableHTML += `<td>${plan[service]}</td>`;
+                    });
+                    tableHTML += '</tr>';
+                });
+
+                tableHTML += '</tbody></table>';
+                pricingSection.innerHTML = tableHTML;
+            } else {
+                pricingSection.innerHTML = '<p>Error: Pricing data structure is incorrect.</p>';
+            }
+        };
+
         // Function to populate provider dropdowns
         const populateProviderDropdowns = (data) => {
             const providers = Object.keys(data[Object.keys(data)[0]]);
@@ -110,6 +141,7 @@
         generateTable(fileHostsData, 'file-hosts-table-container');
         generateTable(adultHostsData, 'adult-hosts-table-container');
         populateProviderDropdowns(fileHostsData);
+        generatePricingTable(pricingData); // Generate pricing table
 
         // Setup search for both tables
         setupSearch(hostSearchInput, clearHostSearchIcon, 'file-hosts-table-container');
@@ -136,5 +168,6 @@
         console.error('Error fetching or parsing JSON:', error);
         fileHostsTableContainer.innerHTML = '<p>Error loading file hosts data.</p>';
         adultHostsTableContainer.innerHTML = '<p>Error loading adult hosts data.</p>';
+        pricingSection.innerHTML = '<p>Error loading pricing data.</p>';
     }
-        });
+});

docs/json/pricing.json

@@ -0,0 +1,74 @@
+{
+    "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": "-"
+      }
+    ]
+  }

docs/styles.css

@@ -139,6 +139,10 @@ tr:last-child td:first-child {
 tr:last-child td:last-child {
     border-bottom-right-radius: var(--radius);
 }
+.pricing-tb{
+    font-weight: normal;
+}
+
 
 /* Search Container */
 #search-container,