Hugging Face's logo

Spaces:
timoon811
/
phase15
Running

App Files Community
phase15 / index.html
timoon811's picture
timoon811
Add 3 files
6fac4e9 verified
raw
history blame contribute delete
24.6 kB
 <!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">user@example.com</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>
// Telegram connection
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 {
// Здесь можно добавить логику для изменения Telegram
alert('Функция изменения Telegram будет реализована позже');
}
});
// Theme switcher
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');
}
});
});
// Check saved theme or system preference
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');
}
// Copy referral link
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);
}
// 2FA toggle
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>