109 lines
4.0 KiB
JavaScript
109 lines
4.0 KiB
JavaScript
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);
|
|
}
|
|
}); |