— Сладкие пустяки —

Добро пожаловать, дорогуша~! Внешний вид — это всё: одевайся, чтобы произвести впечатление, и это первый шаг.

Важно!

Для создания этого шаблона я использовала несколько файлов изображений, размещённых на Imgur. ЗДЕСЬ лежит ZIP-архив со всеми использованными файлами. Можешь использовать их как угодно.

------------------------------------

КАК УСТАНОВИТЬ

1. Скопируй ВСЁ | (ЗЕРКАЛО В GOOGLE DOCS)

2. Вставь в поле «Обо мне» на JanitorAI.

3. Внеси изменения прямо там (см. шпаргалку ниже).

4. Сохрани, обнови страницу и проверь, как она выглядит на телефоне.

ПРАВИЛА, ЧТОБЫ НИЧЕГО НЕ СЛОМАТЬ

1. Не оставляй пустых строк. Чтобы начать новый абзац, введи <br><br>

2. Ссылки на изображения должны быть прямыми: https://i.imgur.com/abc123.png

если не используешь изображение, оставь его пустым вот так: src="" (пустые изображения скрываются, а их рамки схлопываются)

3. Меняй только слова внутри «кавычек» или между > и <. Не удаляй кавычки, < >, { } и всё, где написано class=

4. Никогда не добавляй /* комментарии / или символы и ~ внутри части <style>: JanitorAI обрезает таблицу стилей на этих символах.

5. Не превышай 70 000 символов (шаблон занимает около 57 900), иначе конец кода обрежется. Добавляй изображения только по ссылке. JanitorAI удаляет любые CSS url(...), @import и встроенные изображения (data:), поэтому их использовать нельзя.

ШПАРГАЛКА: найди это (Ctrl/Cmd + F) —>измени это

ТВОЁ ИМЯ

content:"Your Name" твоё отображаемое имя вверху страницы.

Настоящее имя пользователя JanitorAI скрыто, поэтому вместо него показывается этот текст. Введи что угодно (не удаляй кавычки). Имя отображается прописными буквами шрифтом Cinzel Decorative. Оно находится в правиле, начинающемся с .pp-uc-title::after. Длинные имена должны переноситься на вторую строку, чтобы ничего не обрезалось.

ТЕКСТ ПРОФИЛЯ

content:"admirers" слово после количества подписчиков

content:"Joined: mm.dd.yy" дата регистрации. Введи свою дату.

content:"Admire" / "Admired" кнопка подписки

content:"Darlings" вкладка ботов

content:"Love Letters" вкладка скриптов

content:"darlings" / "love letters" слово рядом с числом

МЕСТОИМЕНИЯ

<div class="xb-pron"><span>местоимения</span><span>здесь</span></div>

Введи свои местоимения (или вообще что угодно) в элементы span. Добавляй или удаляй элементы span по необходимости.

ТВОИ ИЗОБРАЖЕНИЯ

(прозрачные PNG выглядят лучше всего)

class="xb-sona" высокая картинка в шапке справа

class="xb-intro-img" высокая картинка рядом с вступлением. Она не меняет размер блока: изображение обрезается по размеру и может выступать за пределы блока. Если изображение в шапке пустое, обычная фотография профиля отобразится в круглой рамке с жемчужным ободком. (Жемчуг задаётся правилом .pp-uc-avatar-container::before. Удали его, чтобы убрать жемчуг.)

ФОНЫ

Страница состоит из слоёв, от заднего к переднему:

1. нежно-розовый цвет страницы

2. изображение на всю страницу (class="xb-bg") с прозрачностью 50%, чтобы розовый оттенок просвечивал. Измени opacity:.5 в правиле .xb-bg. Оставь src="" если изображение не нужно.

3. обои с X/O (class="xb-wall") — прозрачный PNG поверх всего с прозрачностью 30%. Измени opacity:.3 в правиле .xb-wall img. Обои — это одно изображение размером 3456 x 1728 пикселей (включено в архив под названием «X-O Wallpaper 3456x1728.png»), ссылка на него уже встроена. <div class="xb-wall"><img src="..."></div>. Замени эту ссылку на свою или удали весь div, чтобы убрать обои.

УЗОР ЗВЁЗДНОЙ ПОЛОСЫ

Розовая полоса со звёздами позади вступления — это ОДНО бесшовное изображение размером 3840 x 4800 пикселей (включено в архив под названием «Sweet Nothings - Star Pattern 3840x4800.png»), ссылка на которое уже встроена в <div class="xb-pat"><img src="..."></div>. Оно отображается в исходном размере от верхнего левого угла, поэтому звёзды не растягиваются. Чтобы использовать свой узор, замени эту ссылку. Сделай изображение размером 3840 x 4800 (большое изображение будет обрезано, а маленькое оставит пустое место на огромных экранах) и весом меньше 1 МБ, чтобы Imgur не пережал его повторно. CSS-узора на замену нет, поэтому, если ссылка сломается, полоса станет просто розовой. Сверху и снизу полоса плавно растворяется в обоях.

СТАТУС

Нажми на конверт — страница потемнеет, и появится письмо с твоим сообщением. Нажми где угодно за пределами письма, чтобы закрыть его.

class="xb-status xb-online" замени xb-online на xb-away или xb-offline

<b>Любовная записка</b> слово на конверте. Часть «- open» после него добавляется автоматически.

<span class="xb-msg">...</span> сообщение <i>...</i> дата (перед ней отображается слово «написано»)

ВСТУПЛЕНИЕ

class="xb-title" заголовок

class="xb-hl" первая выделенная строка

<p>...</p> текст био

class="xb-chips" плашки-теги. Формы X и O чередуются автоматически.

Ссылки: <a href="PASTE-LINK-HERE" class="xb-link">

<img src=""><span>Название</span><i>короткая подпись</i></a>

Настроены три ссылки (в ряд из трёх столбцов).

БАНТИКИ

Бантик на блоке вступления: <img class="xb-bow" src="..."> в начале div xb-intro-text (размер задаётся в правиле .xb-intro-text .xb-bow)

Бантик на конверте: <span class="xb-seal"><img src="..."></span> (его ширина задана как width:140px в правиле .xb-seal)

Бантики на обложках: <img class="xb-bow" src="..."> внутри <summary>обложки каждой серии (размер задаётся в правиле .xb-sitem .xb-bow)

Удали <img class="xb-bow"> чтобы убрать бантик. Чтобы добавить обложку новой серии, скопируй всю строку обложки вместе с бантиком.

ИЗМЕНИТЬ ЦВЕТ БАНТИКА: CSS не может перекрасить изображение, но может

сдвинуть его оттенки. Добавь фильтр к правилу бантика, например:

filter:hue-rotate(-70deg)

Чтобы получить розовый бантик: -70deg — лавандовый, -115deg — синий, +55deg — оранжевый или золотой, +150deg — зелёный. Белые части останутся белыми. Добавь после этого saturate(1.3) или brightness(1.1), чтобы подкорректировать цвет. Таким способом нельзя получить конкретный цвет по коду hex (для этого отредактируй сам PNG). Обрати внимание: новый фильтр заменит мягкую тень бантика, поэтому укажи её повторно: filter:hue-rotate(-70deg) drop-shadow(0 4px 4px #d9648b40)

БИО-БЛОК (X X X)

Блок плавно раскрывается, мягко проявляясь и сдвигаясь. Чтобы изменить анимацию, отредактируй @keyframes xb-drop и часть animation:xb-drop .7s в правиле .xb-bio. Закрывается он мгновенно. Удали оба, чтобы блок снова открывался резко.

ОБО МНЕ

class="xb-photo xb-p1" и "xb-p2" два овальных портрета (src="" если не нужны; если оба пустые, блоки займут всю ширину)

class="xb-cap" наклейка на фотографиях <div class="xb-box"><b>Информация</b><p> три блока. Заголовок находится в <b>, текст — в <p>.

ПЛАНЫ

(внутри блока «Дополнительно», под его текстом)

Четыре маленьких блока с проектами, которые можно нажать, чтобы развернуть. Каждый выглядит так:

<details class="xb-job xb-done"><summary><span>Заголовок</span>

</summary><p>Здесь будет описание.</p></details>

Вид задаётся классом:

xb-job xb-done завершён: сплошное сердечко, заголовок зачёркнут

xb-job xb-now в процессе: пульсирующее сердечко и розовая рамка

xb-job запланирован: контурное сердечко

Скопируй строку, чтобы добавить проект, удали строку, чтобы убрать его. Чтобы удалить весь список планов, удали блок <div class="xb-road"> (от открывающего <div> до соответствующего закрывающего </div>). Слово «Планы» над списком задаётся правилом .xb-road::before.

ВИТРИНА

(полка с сериями)

Каждая серия состоит из соответствующей пары блоков:

<details class="xb-sitem xb-s1" ...> обложка (изображение + название)

<div class="xb-sinfo xb-i1"> открывающаяся страница для s1 соответствует i1, для s2 — i2 и так далее. Номера должны совпадать. На странице есть изображение-баннер, заголовок, описание и ссылка (вместо YOURTAG укажи тег серии). Настроено пять серий. Чтобы оставить меньше, удали обе части соответствующей пары. Ряд обложек прокручивается вбок на экранах любого размера, поэтому серий может быть больше пяти: скопируй обложку, присвой ей следующий номер (xb-s6, xb-i6), затем добавь xb-s6 и xb-i6 в длинное правило CSS, где перечислены s1-s5 и i1-i5 (оно начинается с .xb-series:has(.xb-s1[open])). Пространство под обложками всегда остаётся, чтобы страница не дёргалась при выборе серии. Плавно появляется и исчезает только кремовое окно.

РЕЖИМ ГАЛЕРЕИ

(если раздел с сериями не нужен)

1. Добавь слово xb-gallery в класс блока «Витрина»: <div class="xb-drawer xb-series xb-gallery" id="xb-series">

2. Удали весь блок <div class="xb-sdisplay"> ... </div> (все страницы xb-sinfo), чтобы не оставалось пустого места.

3. Добавь ссылку на изображение в <img src=""> обложки, а название оставь или удали. Пустой элемент <b></b> скрывает ленточку.

Обложки перестанут быть кликабельными. Можно добавить сколько угодно обложек — просто копируй строку обложки. Измени название раздела «Витрина» на что-то вроде «Галерея».

БЛИЗКИЕ ДРУЗЬЯ

<a href="PASTE-LINK-HERE" class="xb-pal"><img src="">

<span>Имя</span></a>

ФАВОРИТЫ

<a href="PASTE-LINK-HERE" class="xb-fav"><img src="">

<span>Имя бота</span></a>

Оба ряда прокручиваются вбок. Одна строка — один элемент. Скопируй

строку, чтобы добавить элемент, или удали её. Разделы «Близкие друзья» и «Фавориты» находятся

во вкладке «Коллекция».

ЗАГОЛОВКИ РАЗДЕЛОВ

Ряд x o x o под каждым заголовком задаётся правилом

.xb-title::after (измени слова в content:"" или удали

правило).

КАРТОЧКИ ПЕРСОНАЖЕЙ

Карточка каждого бота выглядит как публикация в Instagram: сверху сердечко + имя бота + точки, квадратное изображение в розовой рамке и нижняя часть с количеством чатов, числом токенов и подписью «xoxo» курсивом. Карточка построена только из собственных элементов сайта, поэтому значки сердечка и облачка чата — декоративные. На компьютере наведи курсор на карточку, и вверх выдвинется панель «Комментарии» с кратким описанием бота, именем создателя @name рядом с сердечком и тегами внизу. На телефонах и планшетах наведения нет, поэтому нажатие просто открывает бота, а панель может не появиться.

ВКЛАДКИ, ПОИСК И СОРТИРОВКА

Вкладки «Милые» / «Любовные письма», строка поиска, кнопка фильтра и меню сортировки оформлены в кремовых и золотых тонах в соответствии со страницей. Как переименовать вкладки, см. раздел «ТЕКСТ ПРОФИЛЯ».

ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ

ЛЕПЕСТКИ

строка, начинающаяся с <div class="xb-petals"> (падающие X, O и сердечки). Удали её, чтобы убрать их.

ПУЛЬСИРУЮЩЕЕ XOXO

розовое «xoxo» в углу блока вступления. Оно задаётся правилом .xb-intro-text::after: измени слово, размер или цвет либо удали правило. На широких экранах плашки тегов оставляют для него место, а на телефонах располагаются над ним.

ВОДА

нежно-розовые переливающиеся волны и блёстки внизу карточки шапки задаются правилами .xb-hdr::before (волны) и .xb-hdr::after (блёстки). Удали оба, чтобы убрать их. Мягкое свечение имени задаётся правилом .pp-uc-title::before.

ПИТОМЕЦ НА СТРАНИЦЕ

маленький питомец ходит по экрану поверх всего остального, случайно чередуя стояние и ходьбу, слегка сжимаясь и растягиваясь. Когда он идёт влево, то разворачивается. Найди <div class="xb-pet"> внизу HTML. Добавь первое изображение (питомец стоит) в xb-pet-idle img, а второе (питомец идёт) — в xb-pet-walk img. Каждое изображение находится в отдельном элементе span; не меняй эти элементы. Удали весь div xb-pet, чтобы

убрать питомца. На телефонах он ходит прямо над нижней панелью меню сайта. Маршрут повторяется каждые 80 секунд. Чтобы изменить его, отредактируй проценты в @keyframes xb-petmove (значения left:), синхронно меняя соответствующие проценты xb-petidle, xb-petwalk и xb-petflip.

УМЕНЬШЕНИЕ ДВИЖЕНИЯ

если у посетителя включён параметр «уменьшить движение», анимация замирает, а ходьба питомца скрывается (он видит стоящего питомца на изображении покоя).

БЕЗ ПЕРЕМЕННЫХ

JanitorAI удаляет переменные CSS (строки с --something

), поэтому в этом шаблоне они не используются. Цвета

указаны в каждом правиле, так что поиск и &замена

работают везде.

ЦВЕТА

Основные цвета (найди и замени, чтобы перекрасить шаблон):

#fb9ebb розовый #f2799f насыщенный розовый (кнопки)

#fedcdb румяный #ffe6ee бледно-розовый

#f6c3d3 нежные границы #5a3228 заголовки (тёмно-коричневые)

#43261f основной текст #86594c мягкий коричневый (подписи)

#fffafa жемчужно-белый #d8b97c золотая отделка

#d9648b розовый (рамки карточек)

АВТОРСТВО

CSS «Sweet Nothings» от @Ru1nous

Можно свободно использовать и изменять по своему усмотрению! Указать автора приветствуется, но необязательно.

Строку «SWEET NOTHINGS CSS by Ru1nous» внизу страницы можно оставить

или удалить — решать тебе.