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