| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PhaseAI - Все слоты</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"> |
| <style> |
| .phase-badge { |
| @apply px-2 py-1 rounded-full text-xs font-semibold; |
| } |
| .phase-profit { |
| @apply bg-green-500/20 text-green-400; |
| } |
| .phase-hold { |
| @apply bg-blue-500/20 text-blue-400; |
| } |
| .phase-loss { |
| @apply bg-pink-500/20 text-pink-400; |
| } |
| .slot-card { |
| transition: all 0.3s ease; |
| } |
| .slot-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| .graph-tooltip { |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| } |
| .slot-card:hover .graph-tooltip { |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| |
| <header class="bg-gray-800 py-4 px-6 border-b border-gray-700"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-robot text-2xl text-purple-500"></i> |
| <h1 class="text-xl font-bold">Phase<span class="text-purple-500">AI</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-purple-400">Главная</a> |
| <a href="#" class="text-purple-400 font-semibold">Слоты</a> |
| <a href="#" class="hover:text-purple-400">Уведомления</a> |
| <a href="#" class="hover:text-purple-400">Аналитика</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg font-medium"> |
| <i class="fas fa-crown mr-2"></i>Подписка |
| </button> |
| <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto py-8 px-4"> |
| |
| <div class="mb-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-2xl font-bold flex items-center"> |
| <i class="fas fa-dice mr-3 text-purple-500"></i> Все слоты — фазы в реальном времени |
| </h2> |
| <div class="flex items-center space-x-2"> |
| <span class="text-sm text-gray-400">Обновлено: 12:52</span> |
| <button class="text-purple-400 hover:text-purple-300"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| </div> |
| <p class="text-gray-400 max-w-2xl"> |
| Отслеживайте текущие фазы слотов и получайте уведомления о выгодных моментах для игры. |
| Данные обновляются каждые 5 минут. |
| </p> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-4 mb-8"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i class="fas fa-search text-gray-500"></i> |
| </div> |
| <input type="text" class="bg-gray-700 w-full pl-10 pr-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Поиск по названию"> |
| </div> |
| |
| |
| <div> |
| <select class="bg-gray-700 w-full px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option value="">Все платформы</option> |
| <option value="pragmatic">Pragmatic Play</option> |
| <option value="playtech">Playtech</option> |
| <option value="netent">NetEnt</option> |
| <option value="evolution">Evolution</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <select class="bg-gray-700 w-full px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option value="">Все фазы</option> |
| <option value="profit" class="text-green-400">Отдача</option> |
| <option value="hold" class="text-blue-400">Холд</option> |
| <option value="loss" class="text-pink-400">Слив</option> |
| </select> |
| </div> |
| |
| |
| <div> |
| <button class="bg-green-600/30 hover:bg-green-600/40 w-full px-4 py-2 rounded-lg flex items-center justify-center space-x-2"> |
| <span class="text-green-400 font-medium">Показать только в отдаче</span> |
| <i class="fas fa-arrow-up text-green-400"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
| |
| <div class="slot-card bg-gray-800 rounded-xl p-4 border border-gray-700 relative overflow-hidden"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="font-bold text-lg flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Sweet Bonanza" class="w-8 h-8 rounded-full mr-2"> |
| Sweet Bonanza |
| </h3> |
| <p class="text-sm text-gray-400">Pragmatic Play</p> |
| </div> |
| <span class="phase-badge phase-profit"> |
| <i class="fas fa-arrow-up mr-1"></i> Отдача |
| </span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Фаза:</span> |
| <span class="font-medium">72%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 72%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between text-sm mb-4"> |
| <div> |
| <span class="text-gray-400">Обновлено:</span> |
| <span class="font-medium">12:52</span> |
| </div> |
| <div class="text-green-400"> |
| <i class="fas fa-chart-line mr-1"></i> Коэффы растут |
| </div> |
| </div> |
| |
| <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-medium flex items-center justify-center space-x-2"> |
| <i class="fas fa-bell"></i> |
| <span>Добавить в отслеживание</span> |
| </button> |
| |
| |
| <div class="graph-tooltip absolute -right-4 -bottom-4 w-32 h-24 bg-gray-700 rounded-lg shadow-lg p-2 border border-gray-600"> |
| <div class="h-full w-full flex items-end"> |
| <div class="flex-1 flex items-end space-x-1"> |
| <div class="w-3 bg-green-500 rounded-t-sm" style="height: 30%"></div> |
| <div class="w-3 bg-green-500 rounded-t-sm" style="height: 50%"></div> |
| <div class="w-3 bg-green-500 rounded-t-sm" style="height: 70%"></div> |
| <div class="w-3 bg-green-500 rounded-t-sm" style="height: 90%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="slot-card bg-gray-800 rounded-xl p-4 border border-gray-700 relative overflow-hidden"> |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h3 class="font-bold text-lg flex items-center"> |
| <img src="https://via.placeholder.com/40" alt="Gates of Olympus" class="w-8 h-8 rounded-full mr-2"> |
| Gates of Olympus |
| </h3> |
| <p class="text-sm text-gray-400">Pragmatic Play</p> |
| </div> |
| <span class="phase-badge phase-hold"> |
| <i class="fas fa-pause mr-1"></i> Холд |
| </span> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm mb-1"> |
| <span class="text-gray-400">Фаза:</span> |
| <span class="font-medium">56%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 56%"></div> |
| </div> |
| </div> |
| |
| <div class="flex justify-between text-sm mb-4"> |
| <div> |
| <span class="text-gray-400">Обновлено:</span> |
| <span class="font-medium">12:48</span> |
| </div> |
| <div class="text-blue-400"> |
| <i class="fas fa-chart-line mr-1"></i> Стабильно |
| </div> |
| </div> |
| |
| <button class="w-full bg-purple-600 hover:bg-purple-700 py-2 rounded-lg font-medium flex items-center justify-center space-x-2"> |
| <i class="fas fa-bell"></i> |
| <span>Добавить в отслеживание</span> |
| </button> |
| |
| |
| |
| </html> |
