| <!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> |
| .gradient-text { |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3); |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); |
| } |
| 70% { |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); |
| } |
| 100% { |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-black text-gray-100 min-h-screen"> |
| |
| <nav class="bg-gray-900 bg-opacity-80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-800"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-16"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0"> |
| <span class="text-2xl font-bold gradient-text">DarkUI</span> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-10 flex items-baseline space-x-4"> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-800">Главная</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Функции</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Цены</a> |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Контакты</a> |
| </div> |
| </div> |
| </div> |
| <div class="hidden md:block"> |
| <div class="ml-4 flex items-center md:ml-6"> |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <span class="sr-only">Уведомления</span> |
| <i class="fas fa-bell h-6 w-6"></i> |
| </button> |
| <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> |
| <span class="sr-only">Профиль</span> |
| <i class="fas fa-user-circle h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| <div class="-mr-2 flex md:hidden"> |
| <button onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
| <span class="sr-only">Открыть меню</span> |
| <i class="fas fa-bars h-6 w-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden"> |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Главная</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Функции</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Цены</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Контакты</a> |
| </div> |
| <div class="pt-4 pb-3 border-t border-gray-700"> |
| <div class="flex items-center px-5"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-user-circle h-10 w-10 text-gray-400"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="text-base font-medium text-white">Пользователь</div> |
| <div class="text-sm font-medium text-gray-400">user@example.com</div> |
| </div> |
| </div> |
| <div class="mt-3 px-2 space-y-1"> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Профиль</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Настройки</a> |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Выйти</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative overflow-hidden"> |
| <div class="max-w-7xl mx-auto"> |
| <div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> |
| <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> |
| <div class="sm:text-center lg:text-left"> |
| <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
| <span class="block text-white">Создаем будущее</span> |
| <span class="block gradient-text">в темных тонах</span> |
| </h1> |
| <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
| Инновационный дизайн с черным фоном для лучшего пользовательского опыта. Попробуйте наши уникальные решения уже сегодня. |
| </p> |
| <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> |
| <div class="rounded-md shadow"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> |
| Начать |
| </a> |
| </div> |
| <div class="mt-3 sm:mt-0 sm:ml-3"> |
| <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-gray-800 hover:bg-gray-700 md:py-4 md:text-lg md:px-10"> |
| Демо |
| </a> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
| <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> |
| <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full opacity-90" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" alt=""> |
| </div> |
| </div> |
|
|
| |
| <div class="py-12 bg-gray-900"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Функции</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
| Лучший опыт для ваших пользователей |
| </p> |
| <p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto"> |
| Все, что вам нужно для создания потрясающего темного интерфейса. |
| </p> |
| </div> |
|
|
| <div class="mt-10"> |
| <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10"> |
| <div class="card-hover bg-gray-800 p-6 rounded-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i class="fas fa-moon"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-white">Темный режим</h3> |
| <p class="mt-2 text-base text-gray-300"> |
| Готовый темный интерфейс, который снижает нагрузку на глаза и экономит заряд батареи. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="card-hover bg-gray-800 p-6 rounded-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-white">Быстрая загрузка</h3> |
| <p class="mt-2 text-base text-gray-300"> |
| Оптимизированный код и минималистичный дизайн обеспечивают молниеносную скорость загрузки. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="card-hover bg-gray-800 p-6 rounded-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-white">Адаптивность</h3> |
| <p class="mt-2 text-base text-gray-300"> |
| Идеально выглядит на любом устройстве - от смартфона до широкоформатного монитора. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="card-hover bg-gray-800 p-6 rounded-lg"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
| <i class="fas fa-cog"></i> |
| </div> |
| </div> |
| <div class="ml-4"> |
| <h3 class="text-lg leading-6 font-medium text-white">Гибкие настройки</h3> |
| <p class="mt-2 text-base text-gray-300"> |
| Легко настраивайте цвета, шрифты и другие параметры под свои нужды. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800"> |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
| <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
| <span class="block">Готовы начать?</span> |
| <span class="block gradient-text">Создайте свой темный интерфейс сегодня.</span> |
| </h2> |
| <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
| <div class="inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> |
| Начать |
| </a> |
| </div> |
| <div class="ml-3 inline-flex rounded-md shadow"> |
| <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-gray-700 hover:bg-gray-600"> |
| Узнать больше |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-black py-12"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="lg:text-center"> |
| <h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Статистика</h2> |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
| Наши достижения |
| </p> |
| </div> |
| <div class="mt-10"> |
| <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"> |
| <div class="bg-gray-900 p-6 rounded-lg text-center"> |
| <div class="text-5xl font-bold text-indigo-400">10K+</div> |
| <div class="mt-2 text-lg font-medium text-gray-300">Пользователей</div> |
| </div> |
| <div class="bg-gray-900 p-6 rounded-lg text-center"> |
| <div class="text-5xl font-bold text-indigo-400">99%</div> |
| <div class="mt-2 text-lg font-medium text-gray-300">Удовлетворенности</div> |
| </div> |
| <div class="bg-gray-900 p-6 rounded-lg text-center"> |
| <div class="text-5xl font-bold text-indigo-400 |
| <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=bossrx/wewewewe" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
