|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PhaseAI Dashboard</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 = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
}, |
|
|
dark: { |
|
|
900: '#0f172a', |
|
|
800: '#1e293b', |
|
|
700: '#334155', |
|
|
600: '#475569', |
|
|
500: '#64748b', |
|
|
}, |
|
|
neon: { |
|
|
blue: '#00f5ff', |
|
|
purple: '#bc13fe', |
|
|
pink: '#ff44cc', |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
'fade-in': 'fadeIn 0.5s ease-in-out', |
|
|
'slide-up': 'slideUp 0.5s ease-out', |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
fadeIn: { |
|
|
'0%': { opacity: '0' }, |
|
|
'100%': { opacity: '1' }, |
|
|
}, |
|
|
slideUp: { |
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' }, |
|
|
'100%': { transform: 'translateY(0)', opacity: '1' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.neon-shadow { |
|
|
box-shadow: 0 0 8px rgba(188, 19, 254, 0.6), |
|
|
0 0 16px rgba(188, 19, 254, 0.4); |
|
|
} |
|
|
|
|
|
.neon-shadow-blue { |
|
|
box-shadow: 0 0 8px rgba(0, 245, 255, 0.6), |
|
|
0 0 16px rgba(0, 245, 255, 0.4); |
|
|
} |
|
|
|
|
|
.neon-shadow-pink { |
|
|
box-shadow: 0 0 8px rgba(255, 68, 204, 0.6), |
|
|
0 0 16px rgba(255, 68, 204, 0.4); |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, rgba(11, 15, 25, 0.8) 0%, rgba(24, 29, 49, 0.8) 100%); |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: rgba(100, 116, 139, 0.5) transparent; |
|
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar-track { |
|
|
background: transparent; |
|
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar-thumb { |
|
|
background-color: rgba(100, 116, 139, 0.5); |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
@media (min-width: 768px) { |
|
|
.mobile-menu { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.tooltip .tooltip-text { |
|
|
visibility: hidden; |
|
|
width: 120px; |
|
|
background-color: rgba(30, 41, 59, 0.9); |
|
|
color: #fff; |
|
|
text-align: center; |
|
|
border-radius: 6px; |
|
|
padding: 5px; |
|
|
position: absolute; |
|
|
z-index: 1; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.tooltip:hover .tooltip-text { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-dark-900 text-gray-100 min-h-screen flex flex-col md:flex-row"> |
|
|
|
|
|
<aside class="hidden md:flex md:flex-col w-64 h-screen fixed bg-dark-800 border-r border-dark-700"> |
|
|
<div class="flex items-center justify-center h-16 px-4 border-b border-dark-700"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-sm"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold gradient-text bg-gradient-to-r from-neon-blue to-neon-purple">PhaseAI</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-grow overflow-y-auto sidebar"> |
|
|
<nav class="px-4 py-6"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg bg-dark-700 text-white group"> |
|
|
<i class="fas fa-bullseye mr-3 text-neon-blue"></i> |
|
|
<span class="font-medium">Тестовый прогноз</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-folder mr-3"></i> |
|
|
<span class="font-medium">Слоты</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500 group-hover:text-gray-400"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="font-medium">Прогнозы</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500 group-hover:text-gray-400"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-history mr-3"></i> |
|
|
<span class="font-medium">История</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500 group-hover:text-gray-400"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-bell mr-3"></i> |
|
|
<span class="font-medium">Уведомления</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500 group-hover:text-gray-400"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-user mr-3"></i> |
|
|
<span class="font-medium">Профиль</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200 group"> |
|
|
<i class="fas fa-credit-card mr-3"></i> |
|
|
<span class="font-medium">Подписка</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
<div class="px-4 py-4 border-t border-dark-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-dark-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">Гость</p> |
|
|
<p class="text-xs text-gray-400">Бесплатный аккаунт</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-dark-800 border-t border-dark-700 mobile-menu"> |
|
|
<div class="flex justify-around"> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-neon-blue"> |
|
|
<i class="fas fa-bullseye text-lg"></i> |
|
|
<span class="text-xs mt-1">Прогноз</span> |
|
|
</a> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex flex-col items-center justify-center p-3 text-gray-400"> |
|
|
<i class="fas fa-folder text-lg"></i> |
|
|
<span class="text-xs mt-1">Слоты</span> |
|
|
</a> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex flex-col items-center justify-center p-3 text-gray-400"> |
|
|
<i class="fas fa-chart-line text-lg"></i> |
|
|
<span class="text-xs mt-1">Прогнозы</span> |
|
|
</a> |
|
|
<a href="#" class="flex flex-col items-center justify-center p-3 text-gray-400"> |
|
|
<i class="fas fa-user text-lg"></i> |
|
|
<span class="text-xs mt-1">Профиль</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden fixed top-0 left-0 right-0 bg-dark-800 border-b border-dark-700 flex justify-between items-center p-4 z-10"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-sm"></i> |
|
|
</div> |
|
|
<span class="text-lg font-bold gradient-text bg-gradient-to-r from-neon-blue to-neon-purple">PhaseAI</span> |
|
|
</div> |
|
|
<button id="mobileMenuButton" class="text-gray-400 focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobileMenuOverlay" class="fixed inset-0 bg-black bg-opacity-80 z-20 hidden"> |
|
|
<div class="absolute top-0 right-0 bottom-0 w-3/4 bg-dark-800 shadow-lg"> |
|
|
<div class="p-4 border-b border-dark-700 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-neon-blue to-neon-purple flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-sm"></i> |
|
|
</div> |
|
|
<span class="text-lg font-bold gradient-text bg-gradient-to-r from-neon-blue to-neon-purple">PhaseAI</span> |
|
|
</div> |
|
|
<button id="closeMobileMenu" class="text-gray-400 focus:outline-none"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<ul class="space-y-4"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg bg-dark-700 text-white"> |
|
|
<i class="fas fa-bullseye mr-3 text-neon-blue"></i> |
|
|
<span class="font-medium">Тестовый прогноз</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-folder mr-3"></i> |
|
|
<span class="font-medium">Слоты</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="font-medium">Прогнозы</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-history mr-3"></i> |
|
|
<span class="font-medium">История</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" onclick="showSubscriptionPopup()" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-bell mr-3"></i> |
|
|
<span class="font-medium">Уведомления</span> |
|
|
<i class="fas fa-lock ml-auto text-xs text-gray-500"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-user mr-3"></i> |
|
|
<span class="font-medium">Профиль</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center px-4 py-3 rounded-lg text-gray-400 hover:bg-dark-700 hover:text-gray-200"> |
|
|
<i class="fas fa-credit-card mr-3"></i> |
|
|
<span class="font-medium">Подписка</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 border-t border-dark-700"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-dark-600 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-gray-400"></i> |
|
|
</div> |
|
|
<div class="ml-3"> |
|
|
<p class="text-sm font-medium text-white">Гость</p> |
|
|
<p class="text-xs text-gray-400">Бесплатный аккаунт</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="flex-1 md:ml-64 pb-16 md:pb-0"> |
|
|
<div class="max-w-6xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> |
|
|
|
|
|
<div class="animate-fade-in"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-white mb-2"> |
|
|
Добро пожаловать в <span class="gradient-text bg-gradient-to-r from-neon-blue to-neon-purple">PhaseAI</span> 👋 |
|
|
</h1> |
|
|
<p class="text-gray-400 mb-6">Ваш персональный инструмент для точных прогнозов и аналитики</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="animate-slide-up mb-8"> |
|
|
<div class="gradient-bg border border-dark-700 rounded-xl p-6 shadow-lg"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<h3 class="text-lg font-semibold text-white mb-1">Статус подписки</h3> |
|
|
<div class="flex items-center"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-900 text-red-200"> |
|
|
<i class="fas fa-times-circle mr-1"></i> |
|
|
Подписка неактивна |
|
|
</span> |
|
|
<p class="ml-3 text-gray-400 text-sm">Доступны только базовые функции</p> |
|
|
</div> |
|
|
</div> |
|
|
<button onclick="window.location.href='#'" class="px-4 py-2 bg-gradient-to-r from-neon-purple to-neon-pink text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-crown mr-2"></i> Оформить подписку |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="animate-slide-up gradient-bg border border-dark-700 rounded-xl p-6 hover:border-neon-blue transition-colors duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-dark-700 flex items-center justify-center mr-4 neon-shadow-blue"> |
|
|
<i class="fas fa-bullseye text-neon-blue text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-white">Тестовый прогноз</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Попробуйте демо-версию нашего алгоритма прогнозирования с ограниченными возможностями.</p> |
|
|
<button onclick="startTestForecast()" class="w-full px-4 py-2 bg-gradient-to-r from-neon-blue to-neon-purple text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Запустить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="animate-slide-up gradient-bg border border-dark-700 rounded-xl p-6 hover:border-neon-purple transition-colors duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-dark-700 flex items-center justify-center mr-4 neon-shadow"> |
|
|
<i class="fas fa-crown text-neon-purple text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-white">Полный доступ</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Откройте все возможности PhaseAI с полной подпиской: неограниченные прогнозы, исторические данные и аналитику.</p> |
|
|
<button onclick="window.location.href='#'" class="w-full px-4 py-2 bg-gradient-to-r from-neon-purple to-neon-pink text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-credit-card mr-2"></i> Подписаться |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="animate-slide-up gradient-bg border border-dark-700 rounded-xl p-6 hover:border-neon-pink transition-colors duration-300"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-lg bg-dark-700 flex items-center justify-center mr-4 neon-shadow-pink"> |
|
|
<i class="fas fa-flask text-neon-pink text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-semibold text-white">Демо-режим</h3> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Ознакомьтесь с полным функционалом системы в демонстрационном режиме без сохранения данных.</p> |
|
|
<button onclick="startDemoMode()" class="w-full px-4 py-2 bg-gradient-to-r from-neon-pink to-neon-purple text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-eye mr-2"></i> Посмотреть |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="animate-fade-in gradient-bg border border-dark-700 rounded-xl p-6 mb-8"> |
|
|
<h3 class="text-xl font-semibold text-white mb-4 flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i> Ограничения бесплатной версии |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-lock text-gray-500 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-200">Доступ к слотам</h4> |
|
|
<p class="text-sm text-gray-400">Только 1 тестовый слот с ограниченными параметрами</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-chart-bar text-gray-500 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-200">История прогнозов</h4> |
|
|
<p class="text-sm text-gray-400">Сохраняются только последние 3 прогноза</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-bell text-gray-500 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-200">Уведомления</h4> |
|
|
<p class="text-sm text-gray-400">Только email-уведомления о важных событиях</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-cogs text-gray-500 mt-1 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-200">Настройки</h4> |
|
|
<p class="text-sm text-gray-400">Ограниченные возможности персонализации</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="animate-fade-in relative overflow-hidden rounded-xl mb-8"> |
|
|
<div class="gradient-bg border border-dark-700 rounded-xl p-8 md:p-10"> |
|
|
<div class="absolute top-0 right-0 opacity-20"> |
|
|
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M100 0C44.8 0 0 44.8 0 100C0 155.2 44.8 200 100 200C155.2 200 200 155.2 200 100C200 44.8 155.2 0 100 0ZM100 180C56 180 20 144 20 100C20 56 56 20 100 20C144 20 180 56 180 100C180 144 144 180 100 180Z" fill="url(#paint0_linear)"/> |
|
|
<defs> |
|
|
<linearGradient id="paint0_linear" x1="100" y1="0" x2="100" y2="200" gradientUnits="userSpaceOnUse"> |
|
|
<stop stop-color="#00F5FF"/> |
|
|
<stop offset="1" stop-color="#BC13FE"/> |
|
|
</linearGradient> |
|
|
</defs> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<h3 class="text-2xl md:text-3xl font-bold text-white mb-3">Готовы к профессиональным прогнозам?</h3> |
|
|
<p class="text-gray-300 mb-6 max-w-2xl">Подписка открывает доступ ко всем функциям PhaseAI, включая неограниченные прогнозы, детальную аналитику и приоритетную поддержку.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> |
|
|
<button onclick="window.location.href='#'" class="px-6 py-3 bg-gradient-to-r from-neon-purple to-neon-pink text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-crown mr-2"></i> Оформить подписку |
|
|
</button> |
|
|
<button onclick="startDemoMode()" class="px-6 py-3 bg-dark-700 text-white rounded-lg font-medium hover:bg-dark-600 transition-colors flex items-center justify-center border border-dark-600"> |
|
|
<i class="fas fa-flask mr-2"></i> Попробовать демо |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="subscriptionPopup" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-30 hidden"> |
|
|
<div class="bg-dark-800 rounded-xl max-w-md w-full mx-4 border border-dark-700 shadow-xl animate-slide-up"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-white"> |
|
|
<i class="fas fa-crown text-neon-purple mr-2"></i> Требуется подписка |
|
|
</h3> |
|
|
<button onclick="hideSubscriptionPopup()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6">Эта функция доступна только для пользователей с активной подпиской. Оформите подписку, чтобы получить полный доступ ко всем возможностям PhaseAI.</p> |
|
|
<div class="flex flex-col space-y-3"> |
|
|
<button onclick="window.location.href='#'" class="w-full px-4 py-3 bg-gradient-to-r from-neon-purple to-neon-pink text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-credit-card mr-2"></i> Оформить подписку |
|
|
</button> |
|
|
<button onclick="startDemoMode()" class="w-full px-4 py-3 bg-dark-700 text-white rounded-lg font-medium hover:bg-dark-600 transition-colors flex items-center justify-center border border-dark-600"> |
|
|
<i class="fas fa-flask mr-2"></i> Попробовать в демо-режиме |
|
|
</button> |
|
|
<button onclick="hideSubscriptionPopup()" class="w-full px-4 py-3 bg-transparent text-gray-400 rounded-lg font-medium hover:text-white transition-colors flex items-center justify-center"> |
|
|
Напомнить позже |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="testForecastModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-30 hidden"> |
|
|
<div class="bg-dark-800 rounded-xl max-w-md w-full mx-4 border border-dark-700 shadow-xl animate-slide-up"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-white"> |
|
|
<i class="fas fa-bullseye text-neon-blue mr-2"></i> Тестовый прогноз |
|
|
</h3> |
|
|
<button onclick="hideTestForecastModal()" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-6">Вы запускаете тестовый прогноз с ограниченными возможностями. Для полного функционала оформите подписку.</p> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-400 mb-2">Выберите параметры:</label> |
|
|
<select class="w-full bg-dark-700 border border-dark-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-neon-blue"> |
|
|
<option>Базовый сценарий</option> |
|
|
<option>Оптимистичный сценарий</option> |
|
|
<option>Пессимистичный сценарий</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col space-y-3"> |
|
|
<button onclick="runTestForecast()" class="w-full px-4 py-3 bg-gradient-to-r from-neon-blue to-neon-purple text-white rounded-lg font-medium hover:opacity-90 transition-opacity flex items-center justify-center"> |
|
|
<i class="fas fa-play mr-2"></i> Запустить прогноз |
|
|
</button> |
|
|
<button onclick="hideTestForecastModal()" class="w-full px-4 py-3 bg-transparent text-gray-400 rounded-lg font-medium hover:text-white transition-colors flex items-center justify-center"> |
|
|
Отмена |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="demoToast" class="fixed bottom-4 right-4 bg-dark-800 border border-dark-700 rounded-lg shadow-lg px-6 py-4 flex items-start z-40 hidden animate-slide-up"> |
|
|
<div class="mr-4 mt-1"> |
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-neon-pink to-neon-purple flex items-center justify-center"> |
|
|
<i class="fas fa-flask text-white text-sm"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-white mb-1">Демо-режим активирован</h4> |
|
|
<p class="text-sm text-gray-400">Вы используете демонстрационную версию. Данные не сохраняются.</p> |
|
|
</div> |
|
|
<button onclick="hideDemoToast()" class="ml-4 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobileMenuButton').addEventListener('click', function() { |
|
|
document.getElementById('mobileMenuOverlay').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
document.getElementById('closeMobileMenu').addEventListener('click', function() { |
|
|
document.getElementById('mobileMenuOverlay').classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function showSubscriptionPopup() { |
|
|
document.getElementById('subscriptionPopup').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideSubscriptionPopup() { |
|
|
document.getElementById('subscriptionPopup').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
function startTestForecast() { |
|
|
document.getElementById('testForecastModal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hideTestForecastModal() { |
|
|
document.getElementById('testForecastModal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
function runTestForecast() { |
|
|
hideTestForecastModal(); |
|
|
|
|
|
alert('Тестовый прогноз запущен. Это демонстрационная версия с ограниченными возможностями.'); |
|
|
} |
|
|
|
|
|
|
|
|
function startDemoMode() { |
|
|
hideSubscriptionPopup(); |
|
|
document.getElementById('demoToast').classList.remove('hidden'); |
|
|
|
|
|
setTimeout(function() { |
|
|
document.getElementById('demoToast').classList.add('hidden'); |
|
|
}, 5000); |
|
|
} |
|
|
|
|
|
function hideDemoToast() { |
|
|
document.getElementById('demoToast').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener('click', function(event) { |
|
|
if (event.target === document.getElementById('subscriptionPopup')) { |
|
|
hideSubscriptionPopup(); |
|
|
} |
|
|
if (event.target === document.getElementById('testForecastModal')) { |
|
|
hideTestForecastModal(); |
|
|
} |
|
|
if (event.target === document.getElementById('mobileMenuOverlay')) { |
|
|
document.getElementById('mobileMenuOverlay').classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</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/phase9" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
