contentsync-pro / settings.html
mbmal's picture
проанализируй структуру и дизайн, исправь это уродство на что то современное и удобное
2d8afac verified
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Настройки - ContentSync Pro</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<content-navbar></content-navbar>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 mb-2">Настройки аккаунта</h1>
<p class="text-gray-600">Управление подключенными платформами и настройками приложения</p>
</div>
<div class="bg-white rounded-xl shadow-sm p-6 mb-6">
<!-- Platform Connections -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-6">Подключенные платформы</h2>
<div class="space-y-4">
<!-- Telegram Connection -->
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="message-circle" class="text-blue-600"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">Telegram</h3>
<p class="text-sm text-gray-500">Подключите каналы и чаты для публикации</p>
</div>
</div>
<button class="btn-primary">
<i data-feather="link"></i>
<span>Подключить</span>
</button>
</div>
<!-- VK Connection -->
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="users" class="text-blue-400"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">VK</h3>
<p class="text-sm text-gray-500">Подключите группы и страницы</p>
</div>
</div>
<button class="btn-primary">
<i data-feather="link"></i>
<span>Подключить</span>
</button>
</div>
<!-- LinkedIn Connection -->
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
<i data-feather="briefcase" class="text-blue-600"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">LinkedIn</h3>
<p class="text-sm text-gray-500">Подключите бизнес-страницы</p>
</div>
</div>
<button class="btn-primary">
<i data-feather="link"></i>
<span>Подключить</span>
</button>
</div>
<!-- Яндекс.Дзен Connection -->
<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
<i data-feather="trending-up" class="text-orange-500"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">Яндекс.Дзен</h3>
<p class="text-sm text-gray-500">Подключите каналы</p>
</div>
</div>
<button class="btn-primary">
<i data-feather="link"></i>
<span>Подключить</span>
</button>
</div>
</div>
<!-- Notification Settings -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-6">Уведомления</h2>
<div class="space-y-4">
<label class="flex items-center space-x-3">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm font-medium text-gray-700">Уведомления о публикации</span>
</label>
<label class="flex items-center space-x-3">
<input type="checkbox" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
<span class="text-sm font-medium text-gray-700">Статистика по email</span>
</label>
</div>
</div>
<!-- Publishing Settings -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-6">Настройки публикации</h2>
<div class="space-y-4">
<div>
<label class="form-label">Автоматическое форматирование</label>
<select class="form-input">
<option value="auto">Автоматически подбирать под платформу</option>
<option value="preserve">Сохранять оригинальное форматирование</option>
</select>
</div>
<div>
<label class="form-label">URL короткие ссылки</label>
<select class="form-input">
<option value="none">Не использовать</option>
<option value="bitly">Bitly</option>
<option value="tinyurl">TinyURL</option>
</select>
</div>
</div>
</div>
<!-- Account Management -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-900 mb-6">Управление аккаунтом</h2>
<div class="space-y-4">
<div>
<label class="form-label">Язык интерфейса</label>
<select class="form-input">
<option value="ru">Русский</option>
<option value="en">English</option>
</div>
</div>
</div>
<!-- Danger Zone -->
<div class="border-t pt-8">
<h2 class="text-xl font-bold text-red-900 mb-6">Опасная зона</h2>
<div class="space-y-4">
<button class="w-full btn-secondary text-red-700 border-red-200 hover:bg-red-50">
<i data-feather="trash-2"></i>
<span>Удалить аккаунт</span>
</button>
</div>
</div>
</div>
</div>
</div>
<content-footer></content-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html>