89 lines
4.5 KiB
HTML
89 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Blackbox - Сервис</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link href="/css/tailwind.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
|
||
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
</head>
|
||
<body class="gradient-bg overflow-x-hidden">
|
||
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-4 md:py-7 bg-transparent z-20 relative">
|
||
<a href="/ru/" class="flex items-center space-x-4">
|
||
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
|
||
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
|
||
</a>
|
||
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
|
||
<a href="/ru/#features" class="hover:text-cyan-400 transition-colors">Особенности</a>
|
||
<a href="/ru/#supercompare" class="hover:text-cyan-400 transition-colors">Сравнение</a>
|
||
<a href="/ru/#pricing" class="hover:text-cyan-400 transition-colors">Цена</a>
|
||
<a href="/ru/#testimonials" class="hover:text-cyan-400 transition-colors">Отзывы</a>
|
||
<a href="/pages/products.html" class="hover:text-cyan-400 transition-colors">Каталог</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container mx-auto px-4 py-8">
|
||
<div class="glass-card shadow-3d p-8 max-w-4xl mx-auto">
|
||
<h1 id="serviceTitle" class="text-3xl font-bold mb-6 text-cyan-400"></h1>
|
||
<div class="flex flex-col md:flex-row gap-8">
|
||
<div class="md:w-1/3 flex items-center justify-center">
|
||
<i id="serviceIcon" class="fas fa-shield-alt text-8xl text-cyan-400"></i>
|
||
</div>
|
||
<div class="md:w-2/3">
|
||
<div id="servicePrice" class="inline-flex items-center px-4 py-2 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-4 text-xl"></div>
|
||
<p id="serviceDescription" class="text-gray-300 mb-6 text-lg"></p>
|
||
<button class="w-full py-3 buy-btn text-lg font-bold" onclick="showCryptoModal()">Купить сейчас</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-gray-700">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-400">Преимущества</h2>
|
||
<ul id="serviceBenefits" class="text-gray-300 space-y-2"></ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const serviceId = window.location.pathname.split('/').pop().replace('.html', '');
|
||
const serviceData = getServiceData(serviceId);
|
||
|
||
if (serviceData) {
|
||
document.getElementById('serviceTitle').textContent = serviceData.title;
|
||
document.getElementById('servicePrice').textContent = serviceData.price;
|
||
document.getElementById('serviceDescription').textContent = serviceData.description;
|
||
document.getElementById('serviceIcon').className = `fas ${serviceData.icon} text-8xl text-cyan-400`;
|
||
|
||
const benefitsList = document.getElementById('serviceBenefits');
|
||
serviceData.benefits.forEach(benefit => {
|
||
const li = document.createElement('li');
|
||
li.className = 'flex items-start';
|
||
li.innerHTML = `<i class="fas fa-check text-cyan-400 mt-1 mr-2"></i>${benefit}`;
|
||
benefitsList.appendChild(li);
|
||
});
|
||
}
|
||
});
|
||
|
||
function getServiceData(serviceId) {
|
||
const services = {
|
||
'data-protection': {
|
||
title: 'Защита данных',
|
||
price: '49 €/мес',
|
||
description: 'Полная защита ваших персональных данных. Включает: мониторинг утечек, защиту от фишинга, безопасное хранение паролей.',
|
||
icon: 'fa-shield-alt',
|
||
benefits: [
|
||
'Мониторинг утечек данных',
|
||
'Защита от фишинга',
|
||
'Безопасное хранение паролей',
|
||
'Ежедневные отчеты о безопасности'
|
||
]
|
||
},
|
||
// Other services will be added similarly
|
||
};
|
||
return services[serviceId];
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |