Создай приложение на реакт Главная страница мобильного приложения (React) Компоненты 1. Поиск • Поисковая строка занимает всю ширину экрана. • Внутри строки слева размещён полупрозрачный (прозрачность 15%) текст-подсказка с надписью «найди меня» (alt текст), который еле заметен, чтобы не мешать, но помогать ориентироваться. • Справа расположена иконка лупы, как символ поиска. • Внешний вид строки — белый фон, скруглённые углы, лёгкая тень для ощущения глубины. 2. Категории товаров • Представлены в виде капсул — прямоугольников с сильно скруглёнными углами. • Расположены в два ряда по 6 капсул в шахматном порядке, что создаёт эффект динамичного и живого интерфейса. • Капсулы разноцветные — для каждого цвета выбран свой оттенок, приятный глазу: голубой, светло-зелёный, оранжевый, розовый, фиолетовый, жёлтый и т.п. • Текст внутри капсул выровнен по центру, читабелен и контрастен. • Категории по тексту: Детское, Запчасти, Одежда, Электроника, Мебель, Книги. 3. Товары Раздел «Новое» • Заголовок «Новое» расположен слева. • Справа от текста располагается иконка лампочки. • Под заголовком прокручиваемая горизонтальная карусель из 5 карточек товаров. • Карточка товара имеет: • Фото товара на фоне с плавным градиентом • Название товара под фото • Цена товара • Иконка корзины (например, в правом нижнем углу) • Карусель прокручивается влево, обеспечивает удобный просмотр товаров на мобильном экране. Раздел «Еще посмотри…» • Название раздела с иконкой лупы перед текстом. • Карточки товаров такие же, как в разделе «Новое», с идентичным стилем и функционалом. 4. Футер • Затемнённый прямоугольник внизу экрана. • Содержит ссылки на верхние секции страницы и иконку лупы. • Футер всегда доступен для навигации и быстрого поиска. Описание стиля и цветов • Основная палитра: светлые нейтральные цвета — белый (#FFFFFF) и светло-серый (#F5F5F5) фон, тёмно-серый (#333333) для текста. • Акцентные цвета для капсул категорий — разнообразные пастельные оттенки: нежно-голубой, мятный, коралловый, лавандовый, солнечный жёлтый. • Иконки и текст — монохромные, чёткие, с высокой контрастностью. • Тени и градиенты выполняются мягко, чтобы придать интерфейсу глубину и приятный визуальный баланс. • Шрифты — современный, простой и читаемый без засечек, размер текста достаточный для комфортного чтения на мобильных устройствах. • Отступы и поля сбалансированы для удобного нажатия и прокрутки. - Initial Deployment
d9862b1 verified | <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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'light-blue': '#A7D7E9', | |
| 'mint-green': '#98D8C8', | |
| 'coral': '#F7C8B5', | |
| 'lavender': '#D8BFD8', | |
| 'sun-yellow': '#FDFD96', | |
| 'light-pink': '#FFD1DC', | |
| 'light-purple': '#C3B1E1', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| /* Кастомные стили для плавной анимации и градиентов */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .product-gradient { | |
| background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 100%); | |
| } | |
| /* Стили для каруселей */ | |
| .carousel-container { | |
| overflow-x: auto; | |
| scrollbar-width: none; /* Firefox */ | |
| -ms-overflow-style: none; /* IE и Edge */ | |
| } | |
| .carousel-container::-webkit-scrollbar { | |
| display: none; /* Chrome, Safari, Opera */ | |
| } | |
| /* Плавные переходы */ | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| /* Анимация при нажатии */ | |
| .active\:scale-95:active { | |
| transform: scale(0.95); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <div id="app" class="min-h-screen pb-16 max-w-md mx-auto"> | |
| <!-- Шапка с поиском --> | |
| <header class="sticky top-0 z-10 bg-white shadow-sm p-4"> | |
| <div class="relative flex items-center"> | |
| <input | |
| type="text" | |
| placeholder="найди меня" | |
| class="w-full py-3 px-4 pr-12 rounded-full shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-300 bg-white" | |
| style="opacity: 0.85;" | |
| > | |
| <div class="absolute right-4 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="p-4"> | |
| <!-- Категории товаров --> | |
| <section class="mb-8"> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <!-- Капсула 1 --> | |
| <div class="bg-light-blue rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Детское</p> | |
| </div> | |
| <!-- Капсула 2 --> | |
| <div class="bg-mint-green rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Запчасти</p> | |
| </div> | |
| <!-- Капсула 3 --> | |
| <div class="bg-coral rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Одежда</p> | |
| </div> | |
| <!-- Капсула 4 --> | |
| <div class="bg-lavender rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Электроника</p> | |
| </div> | |
| <!-- Капсула 5 --> | |
| <div class="bg-sun-yellow rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Мебель</p> | |
| </div> | |
| <!-- Капсула 6 --> | |
| <div class="bg-light-pink rounded-2xl p-4 text-center shadow-md transition-all active:scale-95"> | |
| <p class="font-medium">Книги</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Раздел "Новое" --> | |
| <section class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-bold">Новое</h2> | |
| <i class="fas fa-lightbulb text-yellow-500"></i> | |
| </div> | |
| <div class="carousel-container flex overflow-x-auto space-x-4 pb-4"> | |
| <!-- Карточка товара 1 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Новый смартфон</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">12 990 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 2 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Стильные часы</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">5 490 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 3 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Наушники</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">3 790 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 4 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Книга бестселлер</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">890 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 5 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Детская игрушка</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">1 290 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Раздел "Еще посмотри..." --> | |
| <section> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-search text-blue-500 mr-2"></i> | |
| <h2 class="text-xl font-bold">Еще посмотри...</h2> | |
| </div> | |
| <div class="carousel-container flex overflow-x-auto space-x-4 pb-4"> | |
| <!-- Карточка товара 1 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Футболка модная</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">1 590 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 2 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Кофеварка</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">4 990 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 3 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Кроссовки</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">6 490 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 4 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Настольная лампа</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">2 190 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Карточка товара 5 --> | |
| <div class="flex-shrink-0 w-40 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="h-32 gradient-bg flex items-center justify-center"> | |
| <div class="product-gradient w-full h-full flex items-center justify-center"> | |
| <i class="fas fa-image text-gray-300 text-3xl"></i> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-medium text-sm mb-1">Рюкзак городской</h3> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold">3 290 ₽</span> | |
| <button class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fas fa-shopping-cart text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Футер --> | |
| <footer class="fixed bottom-0 left-0 right-0 bg-gray-800 text-white p-4 shadow-lg max-w-md mx-auto"> | |
| <div class="flex justify-around items-center"> | |
| <a href="#" class="flex flex-col items-center text-xs"> | |
| <i class="fas fa-home mb-1"></i> | |
| <span>Главная</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-xs"> | |
| <i class="fas fa-th-large mb-1"></i> | |
| <span>Категории</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-xs"> | |
| <i class="fas fa-search mb-1"></i> | |
| <span>Поиск</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-xs"> | |
| <i class="fas fa-user mb-1"></i> | |
| <span>Профиль</span> | |
| </a> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Простая логика для добавления товаров в корзину | |
| document.querySelectorAll('button').forEach(button => { | |
| if (button.innerHTML.includes('shopping-cart')) { | |
| button.addEventListener('click', function() { | |
| this.classList.toggle('bg-blue-500'); | |
| this.classList.toggle('bg-green-500'); | |
| const icon = this.querySelector('i'); | |
| if (icon.classList.contains('fa-shopping-cart')) { | |
| icon.classList.replace('fa-shopping-cart', 'fa-check'); | |
| } else { | |
| icon.classList.replace('fa-check', 'fa-shopping-cart'); | |
| } | |
| }); | |
| } | |
| }); | |
| </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=Leenar64/flip" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |