|
|
<!DOCTYPE html> |
|
|
<html lang="ru"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Уведомления | Трекинг слотов</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-100 text-green-800; |
|
|
} |
|
|
.phase-loss { |
|
|
@apply bg-red-100 text-red-800; |
|
|
} |
|
|
.phase-hold { |
|
|
@apply bg-blue-100 text-blue-800; |
|
|
} |
|
|
.notification-card { |
|
|
@apply border rounded-lg p-4 hover:shadow-md transition-shadow; |
|
|
} |
|
|
.toggle-checkbox:checked { |
|
|
@apply right-0 border-green-400; |
|
|
right: 0; |
|
|
border-color: #4ade80; |
|
|
} |
|
|
.toggle-checkbox:checked + .toggle-label { |
|
|
@apply bg-green-400; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-800 flex items-center"> |
|
|
<i class="fas fa-bell text-yellow-500 mr-3"></i> Уведомления о фазах |
|
|
</h1> |
|
|
<p class="text-gray-500 mt-2">Настройте оповещения о важных изменениях в ваших слотах</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm font-medium text-gray-700 mr-2">Все уведомления</span> |
|
|
<div class="relative inline-block w-12 mr-2 align-middle select-none"> |
|
|
<input type="checkbox" id="global-toggle" checked class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> |
|
|
<label for="global-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Каналы уведомлений</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
|
|
|
|
|
<div class="border rounded-lg p-4 flex flex-col"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fab fa-telegram text-blue-500 text-2xl mr-3"></i> |
|
|
<span class="font-medium">Telegram</span> |
|
|
<span class="ml-auto bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Подключён</span> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mb-4">Получайте мгновенные уведомления в Telegram-боте</p> |
|
|
<button class="mt-auto bg-blue-50 text-blue-600 hover:bg-blue-100 px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
<i class="fas fa-cog mr-2"></i> Настроить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 flex flex-col"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-envelope text-red-500 text-2xl mr-3"></i> |
|
|
<span class="font-medium">Email</span> |
|
|
<span class="ml-auto bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded-full">Отключён</span> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mb-4">Ежедневные сводки на вашу электронную почту</p> |
|
|
<button class="mt-auto bg-gray-50 text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
<i class="fas fa-plus mr-2"></i> Подключить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="border rounded-lg p-4 flex flex-col"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<i class="fas fa-comment-sms text-purple-500 text-2xl mr-3"></i> |
|
|
<span class="font-medium">SMS</span> |
|
|
<span class="ml-auto bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Только Pro</span> |
|
|
</div> |
|
|
<p class="text-gray-500 text-sm mb-4">Критические уведомления через SMS (премиум)</p> |
|
|
<button class="mt-auto bg-purple-50 text-purple-600 hover:bg-purple-100 px-4 py-2 rounded-lg text-sm font-medium transition-colors"> |
|
|
<i class="fas fa-crown mr-2"></i> Апгрейд |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-sm p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Ваши уведомления</h2> |
|
|
<button id="add-notification-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center transition-colors"> |
|
|
<i class="fas fa-plus mr-2"></i> Добавить уведомление |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="notification-card"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex items-center mb-3 md:mb-0 md:w-1/4"> |
|
|
<img src="https://via.placeholder.com/40" alt="Aviator" class="w-10 h-10 rounded mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">Aviator</div> |
|
|
<div class="text-gray-500 text-sm">1Win</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Условие</div> |
|
|
<div class="phase-badge phase-profit">Фаза отдачи > 70%</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Канал / Частота</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-telegram text-blue-500 mr-2"></i> |
|
|
<span>Telegram</span> |
|
|
<span class="mx-2 text-gray-300">•</span> |
|
|
<span>Мгновенно</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 flex justify-end space-x-2"> |
|
|
<button class="test-notification-btn text-blue-600 hover:text-blue-800 px-3 py-1 rounded-lg text-sm font-medium border border-blue-100 bg-blue-50 flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> Тест |
|
|
</button> |
|
|
<button class="edit-notification-btn text-gray-600 hover:text-gray-800 px-3 py-1 rounded-lg text-sm font-medium border border-gray-200 bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-pencil mr-2"></i> Изменить |
|
|
</button> |
|
|
<button class="delete-notification-btn text-red-600 hover:text-red-800 px-3 py-1 rounded-lg text-sm font-medium border border-red-100 bg-red-50 flex items-center"> |
|
|
<i class="fas fa-trash mr-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="notification-card"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex items-center mb-3 md:mb-0 md:w-1/4"> |
|
|
<img src="https://via.placeholder.com/40" alt="Mines" class="w-10 h-10 rounded mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">Mines</div> |
|
|
<div class="text-gray-500 text-sm">1xBet</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Условие</div> |
|
|
<div class="phase-badge phase-loss">Фаза слива > 60%</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Канал / Частота</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-envelope text-red-500 mr-2"></i> |
|
|
<span>Email</span> |
|
|
<span class="mx-2 text-gray-300">•</span> |
|
|
<span>Раз в час</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 flex justify-end space-x-2"> |
|
|
<button class="test-notification-btn text-blue-600 hover:text-blue-800 px-3 py-1 rounded-lg text-sm font-medium border border-blue-100 bg-blue-50 flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> Тест |
|
|
</button> |
|
|
<button class="edit-notification-btn text-gray-600 hover:text-gray-800 px-3 py-1 rounded-lg text-sm font-medium border border-gray-200 bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-pencil mr-2"></i> Изменить |
|
|
</button> |
|
|
<button class="delete-notification-btn text-red-600 hover:text-red-800 px-3 py-1 rounded-lg text-sm font-medium border border-red-100 bg-red-50 flex items-center"> |
|
|
<i class="fas fa-trash mr-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="notification-card"> |
|
|
<div class="flex flex-col md:flex-row md:items-center"> |
|
|
<div class="flex items-center mb-3 md:mb-0 md:w-1/4"> |
|
|
<img src="https://via.placeholder.com/40" alt="Plinko" class="w-10 h-10 rounded mr-3"> |
|
|
<div> |
|
|
<div class="font-medium">Plinko</div> |
|
|
<div class="text-gray-500 text-sm">Betwinner</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Условие</div> |
|
|
<div class="phase-badge phase-hold">Фаза холда > 15 мин</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 mb-3 md:mb-0"> |
|
|
<div class="text-sm text-gray-500">Канал / Частота</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-telegram text-blue-500 mr-2"></i> |
|
|
<span>Telegram</span> |
|
|
<span class="mx-2 text-gray-300">•</span> |
|
|
<span>Мгновенно</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/4 flex justify-end space-x-2"> |
|
|
<button class="test-notification-btn text-blue-600 hover:text-blue-800 px-3 py-1 rounded-lg text-sm font-medium border border-blue-100 bg-blue-50 flex items-center"> |
|
|
<i class="fas fa-bell mr-2"></i> Тест |
|
|
</button> |
|
|
<button class="edit-notification-btn text-gray-600 hover:text-gray-800 px-3 py-1 rounded-lg text-sm font-medium border border-gray-200 bg-gray-50 flex items-center"> |
|
|
<i class="fas fa-pencil mr-2"></i> Изменить |
|
|
</button> |
|
|
<button class="delete-notification-btn text-red-600 hover:text-red-800 px-3 py-1 rounded-lg text-sm font-medium border border-red-100 bg-red-50 flex items-center"> |
|
|
<i class="fas fa-trash mr-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-800 flex items-start"> |
|
|
<i class="fas fa-info-circle text-blue-500 mr-3 mt-1"></i> |
|
|
<div> |
|
|
<p class="font-medium">Слишком частые уведомления?</p> |
|
|
<p class="mt-1">Попробуйте изменить условия или частоту отправки, чтобы получать только самые важные сигналы.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notification-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
|
<div class="bg-white rounded-xl shadow-lg w-full max-w-md"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-800">Добавить уведомление</h3> |
|
|
<button id="close-modal" class="text-gray-400 hover:text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<form id="notification-form" class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Игра</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>Aviator</option> |
|
|
<option>Mines</option> |
|
|
<option>Plinko</option> |
|
|
<option>Dice</option> |
|
|
<option>Crash</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Платформа</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>1Win</option> |
|
|
<option>1xBet</option> |
|
|
<option>Betwinner</option> |
|
|
<option>Melbet</option> |
|
|
<option>Parimatch</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"> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="phase-type" value="profit" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
|
|
<span class="ml-2 text-sm text-gray-700">Отдача</span> |
|
|
</label> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="phase-type" value="loss" class="h-4 w-4 text-red-600 focus:ring-red-500"> |
|
|
<span class="ml-2 text-sm text-gray-700">Слив</span> |
|
|
</label> |
|
|
<label class="flex items-center"> |
|
|
<input type="radio" name="phase-type" value="hold" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
|
|
<span class="ml-2 text-sm text-gray-700">Холд</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Порог</label> |
|
|
<div class="flex items-center"> |
|
|
<select class="border border-gray-300 rounded-l-lg px-3 py-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>></option> |
|
|
<option><</option> |
|
|
<option>=</option> |
|
|
</select> |
|
|
<input type="number" placeholder="70" class="flex-1 border-t border-b border-r border-gray-300 rounded-r-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<span class="ml-2 text-sm text-gray-500">%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Частота</label> |
|
|
<select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-blue-500 focus:border-blue-500"> |
|
|
<option>Мгновенно</option> |
|
|
<option>Раз в 15 минут</option> |
|
|
<option>Раз в час</option> |
|
|
<option>Раз в день</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Канал уведомления</label> |
|
|
<div class="space-y-2"> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500"> |
|
|
<span class="ml-2 text-sm text-gray-700 flex items-center"> |
|
|
<i class="fab fa-telegram text-blue-500 mr-2"></i> Telegram |
|
|
</span> |
|
|
</label> |
|
|
<label class="flex items-center"> |
|
|
<input type="checkbox" class="h-4 w-4 text-red-600 focus:ring-red-500"> |
|
|
<span class="ml-2 text-sm text-gray-700 flex items-center"> |
|
|
<i class="fas fa-envelope text-red-500 mr-2"></i> Email |
|
|
</span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4"> |
|
|
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"> |
|
|
Сохранить уведомление |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="test-notification-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden"> |
|
|
<div class="bg-white rounded-xl shadow-lg w-full max-w-sm"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-check-circle text-green-500 text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-center text-xl font-bold text-gray-800 mb-2">Тест отправлен!</h3> |
|
|
<p class="text-center text-gray-500 mb-6">Проверьте ваш Telegram и Email (если включён) на наличие тестового уведомления.</p> |
|
|
<button id="close-test-modal" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-colors"> |
|
|
Понятно |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const modal = document.getElementById('notification-modal'); |
|
|
const addBtn = document.getElementById('add-notification-btn'); |
|
|
const closeBtn = document.getElementById('close-modal'); |
|
|
const form = document.getElementById('notification-form'); |
|
|
|
|
|
addBtn.addEventListener('click', () => { |
|
|
modal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeBtn.addEventListener('click', () => { |
|
|
modal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
form.addEventListener('submit', (e) => { |
|
|
e.preventDefault(); |
|
|
modal.classList.add('hidden'); |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
const testModal = document.getElementById('test-notification-modal'); |
|
|
const closeTestBtn = document.getElementById('close-test-modal'); |
|
|
const testButtons = document.querySelectorAll('.test-notification-btn'); |
|
|
|
|
|
testButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
testModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeTestBtn.addEventListener('click', () => { |
|
|
testModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const globalToggle = document.getElementById('global-toggle'); |
|
|
globalToggle.addEventListener('change', (e) => { |
|
|
if(e.target.checked) { |
|
|
console.log('Все уведомления включены'); |
|
|
} else { |
|
|
console.log('Все уведомления отключены'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const deleteButtons = document.querySelectorAll('.delete-notification-btn'); |
|
|
deleteButtons.forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
if(confirm('Вы уверены, что хотите удалить это уведомление?')) { |
|
|
btn.closest('.notification-card').remove(); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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/phase14" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
