|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Программа курса</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#f6fc79', |
|
|
dark: '#0a0a0a', |
|
|
light: '#E1E1E1', |
|
|
gray: { |
|
|
800: '#1f1f1f', |
|
|
700: '#2d2d2d' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-dark"> |
|
|
<section class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto dashboard-container"> |
|
|
|
|
|
<div class="mb-16 text-center"> |
|
|
<div class="inline-block relative"> |
|
|
<div class="absolute -inset-4 bg-primary/10 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<h2 class="text-4xl md:text-5xl font-bold uppercase mb-4 glow-text relative text-primary"> |
|
|
<i class="fas fa-sitemap mr-3"></i> Программа курса |
|
|
</h2> |
|
|
</div> |
|
|
<p class="text-lg md:text-xl max-w-3xl mx-auto opacity-85 font-medium text-light"> |
|
|
13 модулей, от базовых знаний до практического запуска. 100% прикладной контент с акцентом на результат. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 dashboard"> |
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-play-circle text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Вводная часть</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">5</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-exchange-alt text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Базовые основы арбитража трафика</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">10</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-tools text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Подготовка к работе</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">12</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-cogs text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Практическая работа с ключевыми элементами</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">14</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fab fa-facebook-square text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Работа с Facebook</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">28</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-bullseye text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Основы маркетинга</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">8</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-dice text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Вертикали Gambling и Betting</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">15</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-pills text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Вертикали Nutra и Товарка</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">6</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-coins text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Бинарные опционы, финансы и крипта</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">7</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-balance-scale-right text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Другие белые и серые вертикали</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">5</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-rocket text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Практический запуск связки</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">5</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Выход на стабильный доход</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">12</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 border border-gray-700 hover:border-glow transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div> |
|
|
<div class="relative z-10 flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="w-12 h-12 rounded-lg bg-gray-700 flex items-center justify-center mb-4 text-primary"> |
|
|
<i class="fas fa-gift text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2 text-light">Готовые связки после курса</h3> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-primary text-dark font-bold pulse">5</span> |
|
|
<div class="text-xs mt-1 text-gray-400">уроков</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 mt-4 flex items-center text-sm text-gray-400"> |
|
|
<div class="flex space-x-1"> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
<span class="w-2 h-2 rounded-full bg-primary"></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center pt-16 pb-8"> |
|
|
<button id="programButton" class="px-10 py-5 rounded-xl font-bold uppercase transition-all duration-300 hover:scale-105 active:scale-95 relative overflow-hidden group"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-primary to-primary/90 opacity-100 group-hover:opacity-90 transition-opacity duration-300"></div> |
|
|
<div class="absolute inset-0.5 bg-primary rounded-xl opacity-100 group-hover:opacity-0 transition-opacity duration-300"></div> |
|
|
<span class="relative z-10 flex items-center justify-center text-dark"> |
|
|
<i class="fas fa-download text-lg mr-3 transition-transform duration-300 group-hover:translate-y-0.5"></i> |
|
|
Получить полную программу курса |
|
|
</span> |
|
|
<div class="absolute inset-0 flex items-center justify-center overflow-hidden"> |
|
|
<div class="absolute -bottom-1 -left-1 w-3 h-3 rounded-full bg-white opacity-20 group-hover:opacity-30 group-hover:animate-ping"></div> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const modules = document.querySelectorAll('.dashboard > div'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = '1'; |
|
|
entry.target.style.transform = 'translateY(0) rotateY(0)'; |
|
|
|
|
|
|
|
|
if (!entry.target.dataset.animated) { |
|
|
entry.target.dataset.animated = 'true'; |
|
|
createParticles(entry.target); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
modules.forEach((module, index) => { |
|
|
module.style.opacity = '0'; |
|
|
module.style.transform = 'translateY(20px) rotateY(15deg)'; |
|
|
module.style.transition = `all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) ${index * 0.1}s`; |
|
|
observer.observe(module); |
|
|
}); |
|
|
|
|
|
|
|
|
const button = document.getElementById('programButton'); |
|
|
button.addEventListener('mousemove', (e) => { |
|
|
const rect = button.getBoundingClientRect(); |
|
|
const x = e.clientX - rect.left; |
|
|
const y = e.clientY - rect.top; |
|
|
button.style.setProperty('--mouse-x', `${x}px`); |
|
|
button.style.setProperty('--mouse-y', `${y}px`); |
|
|
}); |
|
|
|
|
|
|
|
|
function createParticles(element) { |
|
|
const particleCount = 8; |
|
|
for (let i = 0; i < particleCount; i++) { |
|
|
const particle = document.createElement('div'); |
|
|
particle.className = 'particle'; |
|
|
|
|
|
const size = Math.random() * 3 + 1; |
|
|
particle.style.width = `${size}px`; |
|
|
particle.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
const x = Math.random() * 100; |
|
|
const y = Math.random() * 100; |
|
|
particle.style.left = `${x}%`; |
|
|
particle.style.top = `${y}%`; |
|
|
|
|
|
|
|
|
particle.style.animation = `float ${Math.random() * 3 + 2}s infinite ease-in-out ${Math.random() * 2}s`; |
|
|
|
|
|
element.appendChild(particle); |
|
|
} |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #E1E1E1; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); |
|
|
animation: textGlow 3s infinite alternate; |
|
|
} |
|
|
|
|
|
@keyframes textGlow { |
|
|
0% { text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); } |
|
|
100% { text-shadow: 0 0 20px rgba(246, 252, 121, 0.9); } |
|
|
} |
|
|
|
|
|
.border-glow { |
|
|
border-color: #f6fc79; |
|
|
box-shadow: 0 0 10px rgba(246, 252, 121, 0.3); |
|
|
} |
|
|
|
|
|
.border-glow:hover { |
|
|
box-shadow: 0 0 20px rgba(246, 252, 121, 0.5); |
|
|
} |
|
|
|
|
|
.dashboard-container { |
|
|
perspective: 1200px; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.dashboard { |
|
|
transform: rotateY(-10deg); |
|
|
transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); |
|
|
} |
|
|
|
|
|
.dashboard:hover { |
|
|
transform: rotateY(-5deg); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(246, 252, 121, 0.7); } |
|
|
70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(246, 252, 121, 0); } |
|
|
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(246, 252, 121, 0); } |
|
|
} |
|
|
|
|
|
.particle { |
|
|
position: absolute; |
|
|
background-color: rgba(246, 252, 121, 0.6); |
|
|
border-radius: 50%; |
|
|
pointer-events: none; |
|
|
opacity: 0; |
|
|
animation: float 4s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } |
|
|
20% { opacity: 1; } |
|
|
100% { transform: translate(20px, -40px) rotate(180deg); opacity: 0; } |
|
|
} |
|
|
|
|
|
#programButton { |
|
|
--mouse-x: 50%; |
|
|
--mouse-y: 50%; |
|
|
box-shadow: 0 0 30px rgba(246, 252, 121, 0.6); |
|
|
} |
|
|
|
|
|
#programButton::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), |
|
|
rgba(255, 255, 255, 0.1) 0%, |
|
|
transparent 70%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
#programButton:hover::before { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.dashboard { |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.dashboard > div { |
|
|
transform: none !important; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
<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/block4tmt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
