|
|
<!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> |
|
|
.danger-zone { |
|
|
border-left: 4px solid #ef4444; |
|
|
} |
|
|
.switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 50px; |
|
|
height: 24px; |
|
|
} |
|
|
.switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
.slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #ccc; |
|
|
transition: .4s; |
|
|
border-radius: 24px; |
|
|
} |
|
|
.slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 16px; |
|
|
width: 16px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
input:checked + .slider { |
|
|
background-color: #10b981; |
|
|
} |
|
|
input:checked + .slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
.avatar { |
|
|
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); |
|
|
} |
|
|
.theme-selector { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.theme-selector:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
.theme-selector.active { |
|
|
border: 2px solid #3b82f6; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<div class="flex items-center justify-between mb-8"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="avatar w-16 h-16 rounded-full flex items-center justify-center text-2xl font-bold text-white"> |
|
|
JD |
|
|
</div> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold">👤 Мой профиль</h1> |
|
|
<p class="text-gray-500 dark:text-gray-400">Управление вашими данными и настройками</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> |
|
|
<i class="fas fa-save mr-2"></i> Сохранить изменения |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2 space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-user-circle mr-2 text-blue-500"></i> Основные данные |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">📧 Email</label> |
|
|
<p class="font-medium">[email protected]</p> |
|
|
</div> |
|
|
<span class="text-sm text-gray-500 dark:text-gray-400 mt-1 md:mt-0">Основной email</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">📱 Telegram</label> |
|
|
<p id="telegram-status" class="font-medium">Не привязан</p> |
|
|
</div> |
|
|
<button id="connect-telegram" class="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition mt-2 md:mt-0"> |
|
|
<i class="fab fa-telegram mr-1"></i> Привязать |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🌐 Язык интерфейса</label> |
|
|
<select class="mt-1 block w-full md:w-auto rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"> |
|
|
<option value="ru">Русский</option> |
|
|
<option value="en">English</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">📅 Дата регистрации</label> |
|
|
<p class="font-medium">15 марта 2023</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-shield-alt mr-2 text-green-500"></i> Безопасность |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🔑 Пароль</label> |
|
|
<p class="font-medium">••••••••</p> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-sm rounded-lg transition mt-2 md:mt-0"> |
|
|
<i class="fas fa-key mr-1"></i> Сменить |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🕵️ Двухфакторная аутентификация (2FA)</label> |
|
|
<p class="font-medium">Отключена</p> |
|
|
</div> |
|
|
<label class="switch mt-2 md:mt-0"> |
|
|
<input type="checkbox" id="2fa-toggle"> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">📍 Последний вход</label> |
|
|
<p class="font-medium">Сегодня в 14:30 с IP 192.168.1.1</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🧾 История активности</label> |
|
|
<p class="font-medium">Показать все входы в аккаунт</p> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-sm rounded-lg transition mt-2 md:mt-0"> |
|
|
<i class="fas fa-history mr-1"></i> Просмотреть |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-sliders-h mr-2 text-purple-500"></i> Интерфейс и удобство |
|
|
</h2> |
|
|
<div class="space-y-6"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400 mb-2 block">🎛️ Цветовая тема</label> |
|
|
<div class="flex space-x-4"> |
|
|
<div class="theme-selector w-1/3 p-4 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-pointer text-center active" id="light-theme"> |
|
|
<i class="fas fa-sun text-yellow-500 text-2xl mb-2"></i> |
|
|
<p>Светлая</p> |
|
|
</div> |
|
|
<div class="theme-selector w-1/3 p-4 rounded-lg bg-gray-800 border border-gray-700 cursor-pointer text-center" id="dark-theme"> |
|
|
<i class="fas fa-moon text-blue-300 text-2xl mb-2"></i> |
|
|
<p>Тёмная</p> |
|
|
</div> |
|
|
<div class="theme-selector w-1/3 p-4 rounded-lg bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 cursor-pointer text-center" id="system-theme"> |
|
|
<i class="fas fa-desktop text-gray-500 text-2xl mb-2"></i> |
|
|
<p>Системная</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🗂️ Уведомления по умолчанию</label> |
|
|
<select class="mt-1 block w-full md:w-auto rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"> |
|
|
<option value="telegram">Telegram</option> |
|
|
<option value="email">Email</option> |
|
|
<option value="both">Оба способа</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🖥️ Запоминать платформу</label> |
|
|
<p class="font-medium">Сохранять данные входа на этом устройстве</p> |
|
|
</div> |
|
|
<label class="switch mt-2 md:mt-0"> |
|
|
<input type="checkbox" checked> |
|
|
<span class="slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">⏱️ Таймаут сессии</label> |
|
|
<select class="mt-1 block w-full md:w-auto rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600"> |
|
|
<option value="1">1 час</option> |
|
|
<option value="4" selected>4 часа</option> |
|
|
<option value="24">1 день</option> |
|
|
<option value="168">1 неделя</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6 danger-zone"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center text-red-500"> |
|
|
<i class="fas fa-exclamation-triangle mr-2"></i> Опасная зона |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between"> |
|
|
<div> |
|
|
<label class="text-gray-500 dark:text-gray-400">🔐 Удаление аккаунта</label> |
|
|
<p class="font-medium">Это действие нельзя отменить</p> |
|
|
</div> |
|
|
<button class="px-3 py-1 bg-red-500 hover:bg-red-600 text-white text-sm rounded-lg transition mt-2 md:mt-0"> |
|
|
<i class="fas fa-trash-alt mr-1"></i> Удалить аккаунт |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-crown mr-2 text-yellow-500"></i> Подписка и статус |
|
|
</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Статус:</span> |
|
|
<span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-sm rounded-full">Активна</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Тариф:</span> |
|
|
<span class="font-medium">Pro</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Дата окончания:</span> |
|
|
<span class="font-medium">15 июня 2023</span> |
|
|
</div> |
|
|
<div class="pt-4"> |
|
|
<button class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> |
|
|
<i class="fas fa-exchange-alt mr-2"></i> Изменить тариф |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-chart-line mr-2 text-blue-500"></i> Моя статистика |
|
|
</h2> |
|
|
<div class="space-y-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">В системе:</span> |
|
|
<span class="font-medium">3 месяца</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Прогнозов сделано:</span> |
|
|
<span class="font-medium">127</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Точность прогнозов:</span> |
|
|
<span class="font-medium">78%</span> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-gray-500 dark:text-gray-400">Рефералов приглашено:</span> |
|
|
<span class="font-medium">5</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-gift mr-2 text-purple-500"></i> Пригласи друга |
|
|
</h2> |
|
|
<p class="text-gray-500 dark:text-gray-400 mb-4">Пригласите друга и получите 10% скидку на следующий месяц подписки</p> |
|
|
<div class="mb-4"> |
|
|
<label class="text-gray-500 dark:text-gray-400 block mb-1">Ваша реферальная ссылка:</label> |
|
|
<div class="flex"> |
|
|
<input type="text" value="https://phaseai.com/ref/johndoe" class="flex-grow px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700" readonly> |
|
|
<button class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-r-lg transition" onclick="copyReferralLink()"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition"> |
|
|
<i class="fas fa-share-alt mr-2"></i> Поделиться |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 flex items-center"> |
|
|
<i class="fas fa-headset mr-2 text-green-500"></i> Связь и поддержка |
|
|
</h2> |
|
|
<div class="space-y-3"> |
|
|
<button class="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition"> |
|
|
<i class="fas fa-envelope mr-2"></i> Написать в поддержку |
|
|
</button> |
|
|
<button class="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg transition"> |
|
|
<i class="fas fa-question-circle mr-2"></i> FAQ / База знаний |
|
|
</button> |
|
|
<button class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"> |
|
|
<i class="fas fa-star mr-2"></i> Оценить PhaseAI |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('connect-telegram').addEventListener('click', function() { |
|
|
const status = document.getElementById('telegram-status'); |
|
|
const button = document.getElementById('connect-telegram'); |
|
|
|
|
|
if (status.textContent === 'Не привязан') { |
|
|
status.textContent = '@username'; |
|
|
button.innerHTML = '<i class="fab fa-telegram mr-1"></i> Изменить'; |
|
|
button.classList.remove('bg-blue-600', 'hover:bg-blue-700'); |
|
|
button.classList.add('bg-gray-200', 'hover:bg-gray-300', 'dark:bg-gray-700', 'dark:hover:bg-gray-600'); |
|
|
} else { |
|
|
|
|
|
alert('Функция изменения Telegram будет реализована позже'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const themeSelectors = document.querySelectorAll('.theme-selector'); |
|
|
themeSelectors.forEach(selector => { |
|
|
selector.addEventListener('click', function() { |
|
|
themeSelectors.forEach(s => s.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
|
|
|
if (this.id === 'light-theme') { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
localStorage.setItem('theme', 'light'); |
|
|
} else if (this.id === 'dark-theme') { |
|
|
document.documentElement.classList.add('dark'); |
|
|
localStorage.setItem('theme', 'dark'); |
|
|
} else { |
|
|
|
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
} |
|
|
localStorage.removeItem('theme'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
document.getElementById('dark-theme').classList.add('active'); |
|
|
document.getElementById('light-theme').classList.remove('active'); |
|
|
} |
|
|
|
|
|
|
|
|
function copyReferralLink() { |
|
|
const input = document.querySelector('input[value*="phaseai.com/ref"]'); |
|
|
input.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
const button = document.querySelector('button[onclick="copyReferralLink()"]'); |
|
|
const originalIcon = button.innerHTML; |
|
|
button.innerHTML = '<i class="fas fa-check"></i>'; |
|
|
|
|
|
setTimeout(() => { |
|
|
button.innerHTML = originalIcon; |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('2fa-toggle').addEventListener('change', function() { |
|
|
if (this.checked) { |
|
|
alert('Для включения 2FA следуйте инструкциям, которые мы отправим на ваш email'); |
|
|
} |
|
|
}); |
|
|
</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/phase15" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
