| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Профиль - PixelPulse Pro</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <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> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'accent-purple': '#8B5CF6', |
| 'neon-pink': '#EC4899', |
| 'electric-blue': '#06B6D4', |
| 'deep-black': '#0A0A0A', |
| 'dark-card': '#1A1A1A', |
| 'gray-element': '#374151', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
| * { |
| font-family: 'Inter', sans-serif; |
| transition: all 0.2s ease-in-out; |
| } |
| .main-gradient { |
| background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #06B6D4 100%); |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-out; |
| } |
| </style> |
| </head> |
| <body class="bg-deep-black text-white min-h-screen"> |
| |
| <nav class="fixed bottom-0 left-0 right-0 bg-dark-card border-t border-gray-700 z-50"> |
| <div class="flex justify-around py-3"> |
| <a href="index.html" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i data-feather="home" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Главная</span> |
| </a> |
| <a href="profile.html" class="flex flex-col items-center text-accent-purple"> |
| <i data-feather="user" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Профиль</span> |
| </a> |
| <a href="avatars.html" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i data-feather="image" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Аватары</span> |
| </a> |
| <a href="balance.html" class="flex flex-col items-center text-gray-400 hover:text-white"> |
| <i data-feather="credit-card" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Баланс</span> |
| </a> |
| </div> |
| </nav> |
|
|
| |
| <div class="pb-20 fade-in"> |
| |
| <header class="bg-dark-card p-4 border-b border-gray-700"> |
| <div class="flex items-center gap-3"> |
| <button onclick="history.back()" class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600"> |
| <i data-feather="arrow-left" class="w-5 h-5"></i> |
| </button> |
| <h1 class="text-xl font-bold">Профиль</h1> |
| </div> |
| </header> |
| |
| <section class="p-4"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-dark-card rounded-xl p-4 border border-gray-700 text-center"> |
| <div class="text-2xl font-bold text-accent-purple mb-2">150</div> |
| <div class="text-xs text-gray-400">Фото</div> |
| </div> |
| <div class="bg-dark-card rounded-xl p-4 border border-gray-700 text-center"> |
| <div class="text-2xl font-bold text-neon-pink mb-2">25</div> |
| <div class="text-xs text-gray-400">Аватары</div> |
| </div> |
| </div> |
|
|
| <div class="bg-dark-card rounded-xl p-4 border border-gray-700 mt-4"> |
| <h3 class="font-semibold mb-4">📱 Профиль</h3> |
| <div class="space-y-3 text-sm"> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Имя</span> |
| <span>Александр</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Username</span> |
| <span>@alexandr</span> |
| </div> |
| <div class="flex justify-between"> |
| <span class="text-gray-400">Регистрация</span> |
| <span>15.01.2024</span> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-dark-card rounded-xl p-4 border border-gray-700 mt-4"> |
| <h3 class="font-semibold mb-3">🔔 Уведомления</h3> |
| <div class="space-y-3 text-sm"> |
| <div class="flex justify-between items-center"> |
| <span>Email</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer" checked> |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-purple"></div> |
| </label> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span>Telegram</span> |
| <label class="relative inline-flex items-center cursor-pointer"> |
| <input type="checkbox" class="sr-only peer"> |
| <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-accent-purple"></div> |
| </label> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-dark-card rounded-xl p-4 border border-gray-700 mt-4"> |
| <h3 class="font-semibold mb-3">📣 Рефералы</h3> |
| <div class="grid grid-cols-2 gap-4 text-sm"> |
| <div class="text-center"> |
| <div class="text-xl font-bold">3</div> |
| <div class="text-gray-400">Друзей</div> |
| </div> |
| <div class="text-center"> |
| <div class="text-xl font-bold text-green-400">150</div> |
| <div class="text-gray-400">Бонусы</div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
