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