| | <!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> |
