|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>P2P Обмен USDT ↔ Фиат</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); |
|
|
color: #1a202c; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.slide { |
|
|
min-height: 100vh; |
|
|
padding: 2rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.6s ease-out; |
|
|
} |
|
|
|
|
|
.slide.active { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
height: 5px; |
|
|
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); |
|
|
z-index: 100; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.coin-animation { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0%, 100% { transform: translateY(0); } |
|
|
50% { transform: translateY(-20px); } |
|
|
} |
|
|
|
|
|
.security-badge { |
|
|
background: rgba(59, 130, 246, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
|
|
|
.timeline-item::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: -1.5rem; |
|
|
top: 0; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
border-radius: 50%; |
|
|
background: #3b82f6; |
|
|
border: 3px solid #fff; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="progress-bar" id="progressBar"></div> |
|
|
|
|
|
<div class="slide active" id="slide1"> |
|
|
<div class="max-w-4xl mx-auto text-center px-4"> |
|
|
<div class="coin-animation mb-8"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto"> |
|
|
<circle cx="12" cy="12" r="10"></circle> |
|
|
<path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"></path> |
|
|
<path d="M12 18V6"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">P2P Обмен USDT на Фиат</h1> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Безопасный и удобный способ обмена криптовалюты на традиционные деньги напрямую между пользователями</p> |
|
|
<div class="animate__animated animate__fadeInUp animate__delay-1s"> |
|
|
<p class="text-gray-500">Прокрутите вниз, чтобы узнать больше</p> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-auto mt-2 text-gray-400 animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide2"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-8 text-center text-gray-800">Что такое P2P обмен?</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Прямые сделки между пользователями</h3> |
|
|
<p class="text-gray-600">Обмен без посредников, где покупатель и продавец договариваются напрямую о условиях сделки.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<div class="flex items-start mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-lg mr-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold mb-2">Гибкие условия</h3> |
|
|
<p class="text-gray-600">Возможность выбора курса, способов оплаты и других параметров сделки по согласованию сторон.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-blue-50 to-purple-50 p-8 rounded-2xl"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-8 -left-8 w-24 h-24 bg-blue-200 rounded-full opacity-20"></div> |
|
|
<div class="absolute -bottom-8 -right-8 w-32 h-32 bg-purple-200 rounded-full opacity-20"></div> |
|
|
<div class="relative z-10"> |
|
|
<h3 class="text-xl font-semibold mb-4">Как это работает?</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white p-2 rounded-lg mr-4 shadow-sm"> |
|
|
<span class="text-blue-600 font-bold">1</span> |
|
|
</div> |
|
|
<p class="text-gray-700">Покупатель находит подходящее предложение от продавца</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white p-2 rounded-lg mr-4 shadow-sm"> |
|
|
<span class="text-blue-600 font-bold">2</span> |
|
|
</div> |
|
|
<p class="text-gray-700">Стороны согласовывают детали сделки</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white p-2 rounded-lg mr-4 shadow-sm"> |
|
|
<span class="text-blue-600 font-bold">3</span> |
|
|
</div> |
|
|
<p class="text-gray-700">Средства блокируются на время сделки</p> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-white p-2 rounded-lg mr-4 shadow-sm"> |
|
|
<span class="text-blue-600 font-bold">4</span> |
|
|
</div> |
|
|
<p class="text-gray-700">После подтверждения оплаты криптовалюта переводится покупателю</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide3"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Преимущества P2P обмена USDT</h2> |
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"> |
|
|
<div class="p-6"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Доступные курсы</h3> |
|
|
<p class="text-gray-600">Часто более выгодные курсы по сравнению с биржами и обменниками.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"> |
|
|
<div class="p-6"> |
|
|
<div class="bg-purple-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Безопасность</h3> |
|
|
<p class="text-gray-600">Использование эскроу-счетов защищает обе стороны от мошенничества.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-1"> |
|
|
<div class="p-6"> |
|
|
<div class="bg-green-100 w-12 h-12 rounded-lg flex items-center justify-center mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Разные способы оплаты</h3> |
|
|
<p class="text-gray-600">Банковские переводы, платежные системы, наличные - выбор за вами.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-indigo-50 rounded-2xl p-8"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold text-indigo-900 mb-4">USDT - стабильная криптовалюта</h3> |
|
|
<p class="text-indigo-800">Tether (USDT) привязан к доллару США в соотношении 1:1, что делает его идеальным инструментом для P2P-обменов без риска волатильности.</p> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-sm"> |
|
|
<div class="flex items-center justify-between mb-4"> |
|
|
<span class="font-medium text-gray-700">Курс USDT</span> |
|
|
<span class="font-bold text-indigo-600">≈ 1.00 USD</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-indigo-500 rounded-full" style="width: 100%"></div> |
|
|
</div> |
|
|
<div class="mt-4 text-sm text-gray-500">Стабильность курса в течение последних 30 дней</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide4"> |
|
|
<div class="max-w-4xl mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Как безопасно совершать P2P сделки?</h2> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="hidden md:block absolute left-1/2 h-full w-0.5 bg-gradient-to-b from-blue-400 to-purple-500 transform -translate-x-1/2"></div> |
|
|
|
|
|
<div class="space-y-8"> |
|
|
<div class="relative timeline-item pl-8 md:pl-0 md:w-1/2 md:ml-auto md:pr-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="bg-blue-100 text-blue-800 p-2 rounded-lg mr-3">1</span> |
|
|
Проверяйте рейтинг контрагента |
|
|
</h3> |
|
|
<p class="text-gray-600">Всегда смотрите отзывы, количество завершенных сделок и рейтинг продавца/покупателя перед началом сделки.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative timeline-item pl-8 md:pl-0 md:w-1/2 md:pr-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="bg-purple-100 text-purple-800 p-2 rounded-lg mr-3">2</span> |
|
|
Используйте только официальные чаты |
|
|
</h3> |
|
|
<p class="text-gray-600">Общайтесь только через встроенный мессенджер платформы, чтобы иметь доказательства в случае спора.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative timeline-item pl-8 md:pl-0 md:w-1/2 md:ml-auto md:pr-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="bg-indigo-100 text-indigo-800 p-2 rounded-lg mr-3">3</span> |
|
|
Внимательно проверяйте платежные реквизиты |
|
|
</h3> |
|
|
<p class="text-gray-600">Убедитесь, что данные для оплаты совпадают с указанными в объявлении и профиле контрагента.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative timeline-item pl-8 md:pl-0 md:w-1/2 md:pr-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<h3 class="text-xl font-semibold mb-2 flex items-center"> |
|
|
<span class="bg-green-100 text-green-800 p-2 rounded-lg mr-3">4</span> |
|
|
Не отклоняйтесь от процедуры сделки |
|
|
</h3> |
|
|
<p class="text-gray-600">Следуйте установленному платформой порядку проведения сделки, не соглашайтесь на "упрощенные" схемы.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 bg-blue-50 p-8"> |
|
|
<h3 class="text-2xl font-bold text-blue-800 mb-4">Для покупателей</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Перед оплатой убедитесь, что продавец подтвердил сделку</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Сохраняйте квитанции об оплате до завершения сделки</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Проверяйте поступление USDT на ваш кошелек</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-purple-50 p-8"> |
|
|
<h3 class="text-2xl font-bold text-purple-800 mb-4">Для продавцов</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Убедитесь в поступлении платежа перед выпуском USDT</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Проверяйте соответствие данных отправителя платежа</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500 mr-2 mt-1" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
<span>Используйте двухфакторную аутентификацию для безопасности</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="slide" id="slide5"> |
|
|
<div class="max-w-4xl mx-auto px-4 text-center"> |
|
|
<div class="inline-block bg-gradient-to-r from-blue-500 to-purple-600 p-1 rounded-full mb-8"> |
|
|
<div class="bg-white p-1 rounded-full"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
<h2 class="text-3xl font-bold mb-6 text-gray-800">Готовы начать P2P обмен USDT?</h2> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Выберите надежную платформу с хорошей репутацией и системой защиты сделок</p> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-12"> |
|
|
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow"> |
|
|
<div class="bg-blue-50 w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2">Binance P2P</h3> |
|
|
<p class="text-gray-600 text-sm">Крупнейшая платформа с высокой ликвидностью и многоуровневой защитой</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow"> |
|
|
<div class="bg-purple-50 w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2">Huobi P2P</h3> |
|
|
<p class="text-gray-600 text-sm">Глобальная платформа с поддержкой множества платежных методов</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow"> |
|
|
<div class="bg-green-50 w-16 h-16 rounded-lg flex items-center justify-center mx-auto mb-4"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> |
|
|
</svg> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg mb-2">OKX P2P</h3> |
|
|
<p class="text-gray-600 text-sm">Интуитивный интерфейс и система мгновенных уведомлений</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 max-w-2xl mx-auto bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-0.5"> |
|
|
<div class="bg-white rounded-xl p-8"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">P2P обмен — это просто и безопасно</h3> |
|
|
<p class="text-gray-600 mb-6">Следуйте рекомендациям, выбирайте проверенных партнеров и наслаждайтесь выгодными условиями обмена USDT на фиатные деньги и обратно.</p> |
|
|
<div class="animate-pulse"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 mx-auto text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" /> |
|
|
</svg> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const slides = document.querySelectorAll('.slide'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
let currentSlide = 0; |
|
|
|
|
|
|
|
|
showSlide(currentSlide); |
|
|
|
|
|
|
|
|
let isScrolling = false; |
|
|
window.addEventListener('wheel', function(e) { |
|
|
if (isScrolling) return; |
|
|
|
|
|
isScrolling = true; |
|
|
|
|
|
if (e.deltaY > 0) { |
|
|
|
|
|
if (currentSlide < slides.length - 1) { |
|
|
currentSlide++; |
|
|
showSlide(currentSlide); |
|
|
} |
|
|
} else { |
|
|
|
|
|
if (currentSlide > 0) { |
|
|
currentSlide--; |
|
|
showSlide(currentSlide); |
|
|
} |
|
|
} |
|
|
|
|
|
setTimeout(() => { isScrolling = false; }, 1000); |
|
|
}, { passive: false }); |
|
|
|
|
|
|
|
|
function updateProgressBar() { |
|
|
const progress = (currentSlide / (slides.length - 1)) * 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
} |
|
|
|
|
|
|
|
|
function showSlide(index) { |
|
|
slides.forEach((slide, i) => { |
|
|
if (i === index) { |
|
|
slide.classList.add('active'); |
|
|
|
|
|
slide.scrollIntoView({ behavior: 'smooth' }); |
|
|
} else { |
|
|
slide.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
updateProgressBar(); |
|
|
} |
|
|
|
|
|
|
|
|
let touchStartY = 0; |
|
|
let touchEndY = 0; |
|
|
|
|
|
document.addEventListener('touchstart', function(e) { |
|
|
touchStartY = e.changedTouches[0].screenY; |
|
|
}, false); |
|
|
|
|
|
document.addEventListener('touchend', function(e) { |
|
|
touchEndY = e.changedTouches[0].screenY; |
|
|
handleSwipe(); |
|
|
}, false); |
|
|
|
|
|
function handleSwipe() { |
|
|
if (touchEndY < touchStartY && currentSlide < slides.length - 1) { |
|
|
|
|
|
currentSlide++; |
|
|
showSlide(currentSlide); |
|
|
} |
|
|
|
|
|
if (touchEndY > touchStartY && currentSlide > 0) { |
|
|
|
|
|
currentSlide--; |
|
|
showSlide(currentSlide); |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=timoon811/p2p2ad" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
