phase12 / index.html
timoon811's picture
Add 3 files
d82118f verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Прогнозы | Casino Predictor</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-collection {
background-color: rgba(255, 193, 7, 0.1);
border-left: 4px solid #ffc107;
}
.phase-payout {
background-color: rgba(40, 167, 69, 0.1);
border-left: 4px solid #28a745;
}
.phase-volatility {
background-color: rgba(220, 53, 69, 0.1);
border-left: 4px solid #dc3545;
}
.status-ready {
color: #28a745;
}
.status-working {
color: #ffc107;
animation: pulse 2s infinite;
}
.status-expired {
color: #6c757d;
}
.status-error {
color: #dc3545;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.modal {
transition: all 0.3s ease;
}
.chart-container {
height: 300px;
background: linear-gradient(90deg, rgba(241,245,249,1) 0%, rgba(226,232,240,1) 100%);
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- Заголовок -->
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-gray-900 flex items-center">
<i class="fas fa-chart-line text-blue-500 mr-3"></i> 📊 Мои прогнозы
</h1>
<div class="flex items-center space-x-4">
<button id="notificationBtn" class="relative p-2 rounded-full hover:bg-gray-200">
<i class="fas fa-bell text-gray-600"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<div class="relative">
<button id="sortBtn" class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-200 hover:bg-gray-50">
<span>Сортировка</span>
<i class="fas fa-chevron-down text-sm"></i>
</button>
<div id="sortDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 border border-gray-200">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 sort-option" data-sort="date-desc">По дате (новые)</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 sort-option" data-sort="date-asc">По дате (старые)</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 sort-option" data-sort="phase">По фазе</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100 sort-option" data-sort="status">По статусу</a>
</div>
</div>
</div>
</div>
</div>
<!-- Кнопка запроса нового прогноза -->
<div class="mb-8">
<button id="requestForecastBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center shadow-md transition-all">
<i class="fas fa-plus-circle mr-2"></i> Запросить новый прогноз
</button>
</div>
<!-- Таблица прогнозов -->
<div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Игра</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Казино</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Время</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Фаза</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Прогноз</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Статус</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Действия</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="forecastsTable">
<!-- Прогнозы будут добавляться сюда через JavaScript -->
</tbody>
</table>
</div>
</div>
<!-- Кнопка авто-прогноза -->
<div class="text-center mb-8">
<button id="autoForecastBtn" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center shadow-md mx-auto transition-all">
<i class="fas fa-robot mr-2"></i> Получить авто-прогноз по всем любимым слотам
</button>
</div>
<!-- Модальное окно запроса прогноза -->
<div id="requestModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
<div class="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-900">Запросить новый прогноз</h3>
<button id="closeModalBtn" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">🎰 Выберите игру</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
<option value="">-- Выберите игру --</option>
<option value="aviator">Aviator</option>
<option value="mine">Mine</option>
<option value="plinko">Plinko</option>
<option value="dice">Dice</option>
<option value="roulette">Рулетка</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">🎲 Выберите казино</label>
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
<option value="">-- Выберите казино --</option>
<option value="1win">1Win</option>
<option value="1xbet">1xBet</option>
<option value="pinup">Pin-Up</option>
<option value="leon">Leon</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">⏱ Временной интервал</label>
<div class="grid grid-cols-3 gap-2">
<button class="time-btn bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg border border-gray-300" data-time="1h">1 час</button>
<button class="time-btn bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg border border-gray-300" data-time="4h">4 часа</button>
<button class="time-btn bg-blue-100 border-blue-300 text-blue-700 px-4 py-2 rounded-lg border" data-time="1d">1 день</button>
</div>
</div>
<div class="pt-4">
<button id="submitRequestBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium shadow-md transition-all">
<i class="fas fa-paper-plane mr-2"></i> Запросить прогноз
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Модальное окно деталей прогноза -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden modal">
<div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-900" id="detailGameTitle">Aviator — 1Win</h3>
<button id="closeDetailModalBtn" class="text-gray-400 hover:text-gray-500">
<i class="fas fa-times"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="bg-gray-50 p-4 rounded-lg">
<div class="text-sm text-gray-500">Время прогноза</div>
<div class="font-medium" id="detailTime">12:58, 15 июня 2023</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="text-sm text-gray-500">Фаза</div>
<div class="font-medium" id="detailPhase">Отдача</div>
</div>
<div class="bg-gray-50 p-4 rounded-lg">
<div class="text-sm text-gray-500">Статус</div>
<div class="font-medium status-ready" id="detailStatus">Готов</div>
</div>
</div>
<div class="mb-6">
<h4 class="font-medium mb-2">📈 AI-прогноз</h4>
<div class="bg-blue-50 p-4 rounded-lg" id="detailForecast">
Ожидается рост коэффициентов на 120–160% в течение следующих 30 минут. Рекомендуется делать ставки с коэффициентом не выше 1.5 для первых 5 раундов.
</div>
</div>
<div class="mb-6">
<h4 class="font-medium mb-2">🧠 AI-комментарий</h4>
<div class="bg-gray-50 p-4 rounded-lg" id="detailComment">
Анализ последних 500 раундов показывает, что после серии из 10 раундов с коэффициентом ниже 1.2 (что мы наблюдали последние 45 минут), вероятность выпадения коэффициента выше 2.0 увеличивается на 37%. Текущая фаза соответствует историческим данным для периода отдачи.
</div>
</div>
<div class="mb-6">
<h4 class="font-medium mb-2">📊 График прогноза</h4>
<div class="chart-container rounded-lg border border-gray-200 p-4 flex items-center justify-center">
<div class="text-center text-gray-500">
<i class="fas fa-chart-line text-4xl mb-2 text-blue-400"></i>
<div>Здесь будет график фаз и прогноза</div>
</div>
</div>
</div>
<div class="flex justify-end space-x-3 pt-4">
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
<i class="fas fa-share-alt mr-2"></i> Поделиться
</button>
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg">
<i class="fas fa-paper-plane mr-2"></i> Отправить в Telegram
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Пример данных прогнозов
const forecasts = [
{
id: 1,
game: "Aviator",
casino: "1Win",
time: "12:58, 15.06.2023",
phase: "Отдача",
forecast: "Рост коэффициентов 120–160%",
comment: "Ожидается рост коэффициентов на 120–160%",
status: "ready",
isDemo: false
},
{
id: 2,
game: "Mine",
casino: "1xBet",
time: "10:30, 15.06.2023",
phase: "Сбор",
forecast: "Высокая волатильность",
comment: "Высокая вероятность крупных выплат в следующих 10 раундах",
status: "working",
isDemo: true
},
{
id: 3,
game: "Plinko",
casino: "Pin-Up",
time: "09:15, 14.06.2023",
phase: "Волатильность",
forecast: "Нестабильные выплаты",
comment: "Период нестабильности, рекомендуется осторожность",
status: "expired",
isDemo: false
},
{
id: 4,
game: "Dice",
casino: "Leon",
time: "22:45, 13.06.2023",
phase: "Отдача",
forecast: "Стабильные выплаты",
comment: "Период стабильных выплат с коэффициентом 1.8-2.2",
status: "ready",
isDemo: false
},
{
id: 5,
game: "Рулетка",
casino: "1Win",
time: "18:20, 12.06.2023",
phase: "Сбор",
forecast: "Выпадение красного 5 раз подряд",
comment: "Высокая вероятность серии красных чисел",
status: "error",
isDemo: true
}
];
// Функция для отображения статуса
function getStatusText(status) {
switch(status) {
case 'ready': return {text: 'Готов ✅', class: 'status-ready'};
case 'working': return {text: 'В работе 🔄', class: 'status-working'};
case 'expired': return {text: 'Истёк ⛔', class: 'status-expired'};
case 'error': return {text: 'Ошибка ❌', class: 'status-error'};
default: return {text: 'Неизвестно', class: ''};
}
}
// Функция для отображения фазы
function getPhaseClass(phase) {
switch(phase) {
case 'Отдача': return 'phase-payout';
case 'Сбор': return 'phase-collection';
case 'Волатильность': return 'phase-volatility';
default: return '';
}
}
// Функция для отображения прогнозов в таблице
function renderForecasts() {
const tableBody = document.getElementById('forecastsTable');
tableBody.innerHTML = '';
forecasts.forEach(forecast => {
const status = getStatusText(forecast.status);
const phaseClass = getPhaseClass(forecast.phase);
const row = document.createElement('tr');
row.className = `hover:bg-gray-50 ${phaseClass}`;
row.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-gamepad text-blue-600"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">${forecast.game}</div>
${forecast.isDemo ? '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">DEMO</span>' : ''}
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">${forecast.casino}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-500">${forecast.time}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${forecast.phase === 'Отдача' ? 'bg-green-100 text-green-800' : forecast.phase === 'Сбор' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}">
${forecast.phase}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">${forecast.forecast}</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="${status.class} text-sm font-medium">${status.text}</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-blue-600 hover:text-blue-900 detail-btn" data-id="${forecast.id}">Подробнее</button>
</td>
`;
tableBody.appendChild(row);
});
// Добавляем обработчики событий для кнопок "Подробнее"
document.querySelectorAll('.detail-btn').forEach(btn => {
btn.addEventListener('click', () => {
const forecastId = parseInt(btn.getAttribute('data-id'));
showForecastDetails(forecastId);
});
});
}
// Функция для показа деталей прогноза
function showForecastDetails(id) {
const forecast = forecasts.find(f => f.id === id);
if (!forecast) return;
const status = getStatusText(forecast.status);
document.getElementById('detailGameTitle').textContent = `${forecast.game}${forecast.casino}`;
document.getElementById('detailTime').textContent = forecast.time;
document.getElementById('detailPhase').textContent = forecast.phase;
document.getElementById('detailStatus').textContent = status.text;
document.getElementById('detailStatus').className = `font-medium ${status.class}`;
document.getElementById('detailForecast').textContent = forecast.forecast;
document.getElementById('detailComment').textContent = forecast.comment;
document.getElementById('detailModal').classList.remove('hidden');
}
// Инициализация страницы
document.addEventListener('DOMContentLoaded', () => {
renderForecasts();
// Обработчики модального окна запроса прогноза
document.getElementById('requestForecastBtn').addEventListener('click', () => {
document.getElementById('requestModal').classList.remove('hidden');
});
document.getElementById('closeModalBtn').addEventListener('click', () => {
document.getElementById('requestModal').classList.add('hidden');
});
document.getElementById('submitRequestBtn').addEventListener('click', () => {
// Здесь должна быть логика отправки запроса
alert('Запрос прогноза отправлен!');
document.getElementById('requestModal').classList.add('hidden');
// Добавляем новый прогноз в "работе"
const newForecast = {
id: forecasts.length + 1,
game: "Aviator",
casino: "1Win",
time: new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }) + ', ' + new Date().toLocaleDateString('ru-RU'),
phase: "Анализ",
forecast: "Идет анализ данных...",
comment: "Система анализирует последние данные для составления прогноза",
status: "working",
isDemo: true
};
forecasts.unshift(newForecast);
renderForecasts();
});
// Обработчики модального окна деталей прогноза
document.getElementById('closeDetailModalBtn').addEventListener('click', () => {
document.getElementById('detailModal').classList.add('hidden');
});
// Обработчики кнопок выбора времени
document.querySelectorAll('.time-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.time-btn').forEach(b => {
b.classList.remove('bg-blue-100', 'border-blue-300', 'text-blue-700');
b.classList.add('bg-gray-100', 'hover:bg-gray-200', 'border-gray-300');
});
this.classList.add('bg-blue-100', 'border-blue-300', 'text-blue-700');
this.classList.remove('bg-gray-100', 'hover:bg-gray-200', 'border-gray-300');
});
});
// Обработчик кнопки авто-прогноза
document.getElementById('autoForecastBtn').addEventListener('click', () => {
alert('Авто-прогноз запрошен для всех ваших любимых слотов!');
});
// Обработчик кнопки уведомлений
document.getElementById('notificationBtn').addEventListener('click', () => {
alert('Здесь будут ваши уведомления о новых прогнозах!');
});
// Обработчик сортировки
document.getElementById('sortBtn').addEventListener('click', () => {
document.getElementById('sortDropdown').classList.toggle('hidden');
});
document.querySelectorAll('.sort-option').forEach(option => {
option.addEventListener('click', function(e) {
e.preventDefault();
const sortType = this.getAttribute('data-sort');
// Простая демонстрация сортировки
if (sortType === 'date-desc') {
forecasts.sort((a, b) => b.id - a.id);
} else if (sortType === 'date-asc') {
forecasts.sort((a, b) => a.id - b.id);
} else if (sortType === 'phase') {
forecasts.sort((a, b) => a.phase.localeCompare(b.phase));
} else if (sortType === 'status') {
forecasts.sort((a, b) => a.status.localeCompare(b.status));
}
renderForecasts();
document.getElementById('sortDropdown').classList.add('hidden');
});
});
// Закрываем dropdown при клике вне его
document.addEventListener('click', (e) => {
if (!e.target.closest('#sortBtn') && !e.target.closest('#sortDropdown')) {
document.getElementById('sortDropdown').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/phase12" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>