84 lines
3.8 KiB
HTML
84 lines
3.8 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>
|
||
<a href="/ru/pages/products.html" class="text-cyan-400 hover:text-cyan-300 transition-colors">
|
||
<i class="fas fa-arrow-left mr-2"></i>Назад к продуктам
|
||
</a>
|
||
</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="productTitle" 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">
|
||
<img id="productImage" src="/images/bb_on_white-square.webp" alt="Product Image" class="w-full max-w-xs rounded-lg">
|
||
</div>
|
||
<div class="md:w-2/3">
|
||
<div id="productPrice" 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="productDescription" 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="productFeatures" class="text-gray-300 space-y-2"></ul>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script>
|
||
// Load product data based on URL
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const productId = window.location.pathname.split('/').pop().replace('.html', '');
|
||
const productData = getProductData(productId);
|
||
|
||
if (productData) {
|
||
document.getElementById('productTitle').textContent = productData.title;
|
||
document.getElementById('productPrice').textContent = productData.price;
|
||
document.getElementById('productDescription').textContent = productData.description;
|
||
|
||
const featuresList = document.getElementById('productFeatures');
|
||
productData.features.forEach(feature => {
|
||
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>${feature}`;
|
||
featuresList.appendChild(li);
|
||
});
|
||
}
|
||
});
|
||
|
||
function getProductData(productId) {
|
||
const products = {
|
||
'blackbox-vpn': {
|
||
title: 'BlackBox VPN',
|
||
price: '99 €',
|
||
description: 'Создаёт Wi-Fi точку с защищённым VPN. 512 MB RAM.',
|
||
features: [
|
||
'Защищённое VPN соединение',
|
||
'512 MB оперативной памяти',
|
||
'Автономная работа',
|
||
'Поддержка всех основных протоколов'
|
||
]
|
||
},
|
||
// Other products will be added similarly
|
||
};
|
||
return products[productId];
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |