uCoz FAQ
Вход|Регистрация

Find us on social media

Вход | Регистрация
0

В корзине пусто

Перейдите в каталог, чтобы выбрать товары или найдите нужное в поиске
Перейти в каталог
================================================================ */ .mock-header { background: var(--u-bg2); border-bottom: 1px solid var(--u-brd); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 56px; } .mock-logo { font-weight: 700; font-size: 16px; background: linear-gradient(135deg, var(--u-acc), var(--u-acc2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mock-nav { display: flex; gap: 20px; font-size: 13px; color: var(--u-mut); } .mock-nav a:hover { color: var(--u-acc); } /* ================================================================ LAYOUT ================================================================ */ .u-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } .u-main { padding: 32px 0 60px; } /* ================================================================ BREADCRUMBS ================================================================ */ .u-bc { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--u-mut); margin-bottom: 24px; flex-wrap: wrap; } .u-bc a { transition: color .2s; } .u-bc a:hover { color: var(--u-acc); } .u-bc .material-symbols-outlined { font-size: 13px; } /* ================================================================ CATEGORY HEADER ================================================================ */ .ucat-head { background: linear-gradient(135deg, var(--u-bg), var(--u-bg2)); border: 1px solid var(--u-brd); border-radius: 18px; padding: 36px 40px; margin-bottom: 32px; display: flex; align-items: center; gap: 28px; position: relative; overflow: hidden; } .ucat-head::before { content: ''; position: absolute; top: -60px; right: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 70%); pointer-events: none; } .ucat-head-icon { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, var(--u-acc), var(--u-acc2)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ucat-head-icon .material-symbols-outlined { font-size: 32px; color: #fff; } .ucat-head-info { flex: 1; min-width: 0; } .ucat-badge { display: inline-block; background: rgba(99,102,241,.12); color: var(--u-acc); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; } .ucat-head h1 { font-size: clamp(20px, 3vw, 30px); font-weight: 700; margin: 0 0 8px; line-height: 1.2; } .ucat-head-desc { font-size: 14px; color: var(--u-mut); margin: 0; max-width: 560px; } .ucat-head-stats { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; } .ucat-stat-n { font-size: 20px; font-weight: 700; color: var(--u-acc); line-height: 1; display: block; } .ucat-stat-l { font-size: 11px; color: var(--u-mut); margin-top: 1px; display: block; } /* ================================================================ TOOLBAR (поиск + фильтр) ================================================================ */ .u-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .u-search-wrap { flex: 1; min-width: 200px; position: relative; } .u-search { width: 100%; background: var(--u-card); border: 1px solid var(--u-brd); border-radius: 10px; padding: 9px 14px 9px 38px; font-size: 13px; color: var(--u-txt); font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s; } .u-search:focus { border-color: var(--u-acc); } .u-search::placeholder { color: var(--u-mut); } .u-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--u-mut); pointer-events: none; } .u-filters { display: flex; gap: 8px; flex-wrap: wrap; } .u-filter-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--u-brd); background: var(--u-card); color: var(--u-mut); font-family: 'Inter', sans-serif; transition: all .2s; } .u-filter-btn:hover, .u-filter-btn.active { border-color: var(--u-acc); color: var(--u-acc); background: rgba(99,102,241,.08); } .u-filter-btn .material-symbols-outlined { font-size: 15px; } .u-sort-select { background: var(--u-card); border: 1px solid var(--u-brd); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; color: var(--u-txt); font-family: 'Inter', sans-serif; outline: none; cursor: pointer; } /* ================================================================ RESULTS INFO ================================================================ */ .u-results-info { font-size: 12.5px; color: var(--u-mut); margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .u-results-count strong { color: var(--u-acc); } .u-view-btns { display: flex; gap: 4px; } .u-view-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--u-brd); background: var(--u-card); color: var(--u-mut); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; font-size: 0; } .u-view-btn.active, .u-view-btn:hover { border-color: var(--u-acc); color: var(--u-acc); background: rgba(99,102,241,.08); } .u-view-btn .material-symbols-outlined { font-size: 17px; } /* ================================================================ MATERIALS GRID ================================================================ */ .u-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 32px; } /* ================================================================ MATERIAL CARD ============================================================ В uCoz это шаблон 7 (Вид материалов, модуль 10) Переменные внутри карточки: — название материала — URL материала — краткое описание 26.05.2026 — дата публикации — просмотры — комментарии — название категории — URL категории — теги — автор ================================================================ */ .u-card { background: var(--u-card); border: 1px solid var(--u-brd); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: all .25s; position: relative; } .u-card:hover { transform: translateY(-3px); border-color: var(--u-acc); box-shadow: 0 8px 24px rgba(99,102,241,.15); } .u-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .u-card-badges { display: flex; gap: 6px; flex-wrap: wrap; } .u-card-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .4px; text-transform: uppercase; } .badge-js { background: rgba(240,219,79,.1); color: #f0db4f; } .badge-css { background: rgba(251,146,60,.1); color: #fb923c; } .badge-cp { background: rgba(34,211,238,.1); color: #22d3ee; } .badge-tpl { background: rgba(167,139,250,.1); color: #a78bfa; } .badge-hk { background: rgba(239,68,68,.1); color: #ef4444; } .badge-gd { background: rgba(52,211,153,.1); color: #34d399; } .badge-js .material-symbols-outlined, .badge-css .material-symbols-outlined, .badge-cp .material-symbols-outlined, .badge-tpl .material-symbols-outlined, .badge-hk .material-symbols-outlined, .badge-gd .material-symbols-outlined { font-size: 11px; } .u-card-new { background: rgba(52,211,153,.1); color: #34d399; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .4px; text-transform: uppercase; flex-shrink: 0; } .u-card-title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .u-card-title a { transition: color .2s; } .u-card-title a:hover { color: var(--u-acc); } .u-card-desc { font-size: 13px; color: var(--u-mut); line-height: 1.55; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .u-card-tags { display: flex; gap: 5px; flex-wrap: wrap; } .u-card-tag { background: var(--u-bg2); border: 1px solid var(--u-brd2); color: var(--u-mut); font-size: 11px; padding: 2px 8px; border-radius: 20px; } .u-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--u-brd2); } .u-card-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--u-mut); } .u-card-meta-i { display: flex; align-items: center; gap: 3px; } .u-card-meta-i .material-symbols-outlined { font-size: 14px; } .u-card-link { display: inline-flex; align-items: center; gap: 5px; color: var(--u-acc); font-size: 12.5px; font-weight: 600; transition: gap .2s; } .u-card-link:hover { gap: 8px; } .u-card-link .material-symbols-outlined { font-size: 16px; } /* ================================================================ EMPTY STATE (если нет материалов) ================================================================ */ .u-empty { text-align: center; padding: 60px 20px; color: var(--u-mut); } .u-empty .material-symbols-outlined { font-size: 56px; color: var(--u-brd); margin-bottom: 12px; } .u-empty h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--u-txt2); } .u-empty p { font-size: 13.5px; margin: 0; } /* ================================================================ PAGINATION ================================================================ */ .u-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } /* В uCoz: рендерит стандартную навигацию */ /* Стили ниже применяются к стандартным uCoz-элементам пагинации */ .u-pagination a, .u-pagination span, .u-page-btn { min-width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--u-brd); background: var(--u-card); color: var(--u-mut); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; cursor: pointer; transition: all .2s; font-family: 'Inter', sans-serif; text-decoration: none; } .u-pagination a:hover, .u-page-btn:hover { border-color: var(--u-acc); color: var(--u-acc); background: rgba(99,102,241,.08); } .u-pagination .current, .u-page-btn.active { background: linear-gradient(135deg, var(--u-acc), var(--u-acc2)); border-color: var(--u-acc); color: #fff; } .u-page-btn .material-symbols-outlined { font-size: 17px; } /* ================================================================ SIDEBAR (если используется) ================================================================ */ .u-layout { display: flex; gap: 24px; align-items: flex-start; } .u-content { flex: 1; min-width: 0; } .u-sidebar { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; } .u-sb-block { background: var(--u-card); border: 1px solid var(--u-brd); border-radius: 14px; padding: 18px; } .u-sb-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--u-mut); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; } .u-sb-title .material-symbols-outlined { font-size: 16px; color: var(--u-acc); } .u-sb-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .u-sb-cats li a { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--u-txt2); transition: all .2s; } .u-sb-cats li a:hover, .u-sb-cats li.active a { background: rgba(99,102,241,.08); color: var(--u-acc); } .u-sb-cats .count { background: var(--u-bg2); color: var(--u-mut); font-size: 11px; padding: 2px 7px; border-radius: 20px; } .u-sb-tags { display: flex; gap: 6px; flex-wrap: wrap; } .u-sb-tag { background: var(--u-bg2); border: 1px solid var(--u-brd2); color: var(--u-mut); font-size: 11.5px; padding: 4px 10px; border-radius: 20px; transition: all .2s; } .u-sb-tag:hover { border-color: var(--u-acc); color: var(--u-acc); } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 900px) { .u-layout { flex-direction: column; } .u-sidebar { width: 100%; } .ucat-head { padding: 24px 20px; } .ucat-head-icon { width: 48px; height: 48px; } .ucat-head-icon .material-symbols-outlined { font-size: 24px; } } @media (max-width: 600px) { .u-grid { grid-template-columns: 1fr; } .ucat-head { flex-direction: column; } .u-toolbar { flex-direction: column; align-items: stretch; } }
code
Категория

24 Материалов
4.8k Просмотров
search
Показано 6 материалов
codeJS
NEW

Кнопка «Наверх» для uCoz

Плавающая кнопка, которая появляется при прокрутке вниз более 300px и возвращает пользователя к началу страницы.

UX скролл кнопка
calendar_today06.04.2025 visibility1 234
Читать arrow_forward
codeJS

Живой поиск по странице

Фильтрация элементов на странице без перезагрузки — вводишь в поле, элементы скрываются/показываются мгновенно.

поиск фильтр UX
calendar_today02.04.2025 visibility987
Читать arrow_forward
codeJS

Toast-уведомления без библиотек

Красивые всплывающие уведомления (успех, ошибка, инфо) на чистом JS, без подключения внешних библиотек вроде Toastify.

уведомления toast popup
calendar_today28.03.2025 visibility756
Читать arrow_forward
codeJS paletteCSS

Переключатель тёмной темы для uCoz

Кнопка переключения между тёмной и светлой темой с сохранением выбора в localStorage. Работает через CSS-переменные.

dark mode тема localStorage
calendar_today20.03.2025 visibility2 103
Читать arrow_forward
codeJS

Лайтбокс для галереи фотографий

Открытие изображений в полноэкранном режиме с затемнением фона, навигацией между фото и закрытием по клику/ESC.

галерея lightbox фото
calendar_today15.03.2025 visibility445
Читать arrow_forward
codeJS

Таймер обратного отсчёта

Таймер с обратным отсчётом до указанной даты: дни, часы, минуты, секунды. Подходит для анонса события или акции.

таймер акция countdown
calendar_today10.03.2025 visibility312
Читать arrow_forward
Стили класса .u-pagination применятся к uCoz-навигации ============================================================ -->
1 2 3 … 8
============================================================ -->