Initial commit with all files

js/features.js

@@ -0,0 +1,109 @@
+const originalFeaturesData = [
+  {icon:'shield-halved', color:'#0ff'},
+  {icon:'user-secret', color:'#6efaff'},
+  {icon:'envelope-open-text', color:'#91eaff'},
+  {icon:'cloud', color:'#fd7cff'},
+  {icon:'file-shield', color:'#fedd60'},
+  {icon:'coins', color:'#41fdc2'},
+  {icon:'eye-slash', color:'#a6fca8'},
+  {icon:'users', color:'#dc9afd'},
+];
+
+const originalProductsData = [
+  {color:'#0ff', data:[1,1,1,1,1,1,1,1]},
+  {color:'#38bdf8', data:[1,1,0,0,0,0,0,1]},
+  {color:'#8b5cf6', data:[1,1,0,0,0,0,0,0]},
+];
+
+
+let languageData = {};
+
+async function fetchLanguageData(lang) {
+    try {
+        let response = await fetch(`/lang/${lang}/json/${lang}.json`);
+        if (!response.ok) {
+            console.error(`Failed to load language data for ${lang}: ${response.status}`);
+            return null;
+        }
+        languageData = await response.json();
+        return languageData;
+    } catch (error) {
+        console.error(`Error fetching language data for ${lang}:`, error);
+        return null;
+    }
+}
+
+function renderFeatures(data) {
+  const container = document.getElementById('featuresContainer');
+  container.innerHTML = '';
+
+  data.features.forEach((feature, index) => {
+    const featureRow = document.createElement('div');
+    featureRow.className = 'feature-row grid grid-cols-4 gap-4 py-3 border-b border-gray-700/50';
+    featureRow.id = `feature-${index}`;
+
+    // Feature name
+    const nameCell = document.createElement('div');
+    nameCell.className = 'col-span-1 text-gray-300 text-right pr-4 flex items-center justify-end';
+    const icon = originalFeaturesData[index].icon;
+    const color = originalFeaturesData[index].color;
+    nameCell.innerHTML = `<i class="fas fa-${icon} mr-2" style="color:${color}"></i>${feature.name}`;
+
+    // BlackBox
+    const bbCell = document.createElement('div');
+    bbCell.className = 'col-span-1 text-center flex items-center justify-center';
+    const bbData = originalProductsData[0].data[index];
+    bbCell.innerHTML = bbData
+      ? `<i class="fas fa-check-circle check-icon text-2xl text-cyan-400"></i>`
+      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
+
+
+    // VPN Router
+    const routerCell = document.createElement('div');
+    routerCell.className = 'col-span-1 text-center flex items-center justify-center';
+    const routerData = originalProductsData[1].data[index];
+    routerCell.innerHTML = routerData
+      ? `<i class="fas fa-check-circle check-icon text-xl text-blue-400 opacity-70"></i>`
+      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
+
+    // VPN Service
+    const vpnCell = document.createElement('div');
+    vpnCell.className = 'col-span-1 text-center flex items-center justify-center';
+    const vpnData = originalProductsData[2].data[index];
+     vpnCell.innerHTML = vpnData
+      ? `<i class="fas fa-check-circle check-icon text-xl text-purple-400 opacity-70"></i>`
+      : `<i class="fas fa-times-circle cross-icon text-xl text-gray-500"></i>`;
+
+    featureRow.appendChild(nameCell);
+    featureRow.appendChild(bbCell);
+    featureRow.appendChild(routerCell);
+    featureRow.appendChild(vpnCell);
+    container.appendChild(featureRow);
+  });
+}
+
+function setupHoverEffects(data) {
+  document.querySelectorAll('#featuresContainer > div').forEach((row, index) => {
+    row.addEventListener('mouseenter', () => {
+      // Update hint
+      document.getElementById('dynCompareHint').innerHTML =
+        `<i class="fas fa-lightbulb text-cyan-300"></i> <span class="font-semibold">${data.features[index].name}:</span> ${data.features[index].hint}`;
+    });
+
+    row.addEventListener('mouseleave', () => {
+      // Clear hint
+      document.getElementById('dynCompareHint').innerHTML = '';
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', async function() {
+    const currentPath = window.location.pathname;
+    const lang = currentPath.split('/')[1] || 'en'; // Get language from URL, default to 'en'
+
+    const data = await fetchLanguageData(lang);
+    if (data) {
+        renderFeatures(data);
+        setupHoverEffects(data);
+    }
+});