File size: 11,063 Bytes
a474d82 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<!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 -->
<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 Content -->
<main class="container mx-auto py-8 px-4">
<!-- Page Header -->
<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>
<!-- Filters -->
<div class="bg-gray-800 rounded-xl p-4 mb-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<!-- Search -->
<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>
<!-- Platform Select -->
<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>
<!-- Phase Select -->
<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>
<!-- Show Only Profit Button -->
<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>
<!-- Slots Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Slot Card 1 (Profit) -->
<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>
<!-- Graph Tooltip (shown on hover) -->
<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>
<!-- Slot Card 2 (Hold) -->
<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>
<!-- Graph Tooltip -->
</html> |