From 61a678df10bfe072f354f16400f4a3c1eb818662 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Tue, 10 Dec 2024 17:10:28 +0500 Subject: [PATCH] feat: finished of Kentai Radiquum Character Page --- Kentai_Radiquum.html | 80 +++++++++++++-- static/i18n/i18n.js | 12 +++ static/i18n/strings/ru.js | 36 ++++++- static/tailwind.css | 206 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 323 insertions(+), 11 deletions(-) diff --git a/Kentai_Radiquum.html b/Kentai_Radiquum.html index 549f634..0c5ac21 100644 --- a/Kentai_Radiquum.html +++ b/Kentai_Radiquum.html @@ -34,7 +34,7 @@ -
+
@@ -54,25 +54,91 @@
+
+
+

Reference

+ Kentai Radiquum +
+
+

Colors

+
+

Character

+
+
+
+
+
+
+
+

Clothes

+
+
+
+
+
+
+
+
+
+
+
+
+
+

Description

+

Character Name: Kentai Radiquum

+

Species: Red Panda

+

Gender: Male

+

Height and Build: Average height, slim build

+
+
+

Appearance

+

His fur is pink with blue on his paws and hair, while his chest, paw tips, and tail lines stand out in white. He wears a stylish, slightly worn black denim jacket. His black-and-gray cargo pants with white straps complete the look, reflecting his practical nature and penchant for order (his pockets always have room for essentials like USB drives or candy). Around his neck, he sports a burgundy leather collar with a metal tag, showcasing his individuality. His outfit is rounded off with a T-shirt that boasts an amusingly honest caption: "I'm a programmer, I go click click click on the computer"

+
+
+

Personality

+

Kentai is friendly but introverted. He values personal space and prefers socializing in small, trusted circles. His sarcastic sense of humor sometimes gives the impression of being reserved, but it conceals a deep kindness. He is curious, loves exploring new things, especially in the field of technology, and has a sharp mind. While he may seem calm outwardly, there’s a storm of ideas brewing inside him, which he’s constantly working to bring to life.

+
+
+

Hobbies

+

- Programming: Kentai practically lives and breathes code. To him, programming is not just work but an art form.

+

- Music: A big fan of artists like S3RL, Camellia, Smash Into Pieces, Linkin Park, Porter Robinson, Saint Motel, and others.

+

- Plush Toys: He has a special fondness for plush toys. His collection includes two red pandas and one large regular panda. These toys are a source of comfort and joy for him.

+
+
+

Habits

+

- Loves working at his own pace and often dives deeply into his projects.

+

- When deeply focused, his tail gently wags.

+

- Sometimes adjusts his collar while pondering a tough problem.

+

- Enjoys listening to music while working.

+

- Occasionally hums melodies from his favorite tracks, especially when feeling relaxed.

+

- In debates, he tends to gesture rapidly.

+

- Enjoys "cozy moments" — relaxing with one of his plush toys, wrapped in a blanket, and listening to music.

+
+
+
+ diff --git a/static/i18n/i18n.js b/static/i18n/i18n.js index 689e04e..1acf436 100644 --- a/static/i18n/i18n.js +++ b/static/i18n/i18n.js @@ -26,12 +26,15 @@ function parseLink(string) { const i18nTags = document.querySelectorAll("[data-i18n]"); const i18nStyles = document.querySelectorAll("[data-i18n-style]"); +const i18nHrefs = document.querySelectorAll("[data-i18n-href]"); function changeLanguage(lang) { let strings = {}; let styles = {}; + let hrefs = {}; if (lang == "ru") { strings = i18n_ru; styles = i18n_ru_style; + hrefs = i18n_ru_href; } for (let i = 0; i < i18nTags.length; i++) { @@ -56,6 +59,15 @@ function changeLanguage(lang) { element.style.cssText = styles[id]; } + for (let i = 0; i < i18nHrefs.length; i++) { + const element = i18nHrefs[i]; + const id = element.getAttribute("data-i18n-href"); + if (!hrefs[id]) { + continue; + } + + element.href = hrefs[id]; + } } function detectAndChangeLanguage() { diff --git a/static/i18n/strings/ru.js b/static/i18n/strings/ru.js index f62079b..06fb6dd 100644 --- a/static/i18n/strings/ru.js +++ b/static/i18n/strings/ru.js @@ -72,12 +72,40 @@ const i18n_ru = { CHR_KB_GOTO: "Нажмите, чтобы скачать референс", CHR_KB_SPECIES: "Протоген", - // CHR_KR_BIRTH: "Дата рождения", - // CHR_KR_HEIGHT: "Рост", - // CHR_KR_WEIGHT: "Вес", - // CHR_KR_BREED: "Порода", + // CHARACTER KENTAI RADIQUUM + FULL_CHR_KR_DOWNLOAD_PDF: "Скачать PDF", + FULL_CHR_KR_DOWNLOAD_IMG: "Скачать Референс", + FULL_CHR_KR_REF_TITLE: "Референс", + FULL_CHR_KR_COLORS_TITLE: "Цвета", + FULL_CHR_KR_COLORS_CHARACTER: "Персонаж", + FULL_CHR_KR_COLORS_CLOTHES: "Одежда", + FULL_CHR_KR_DESC_TITLE: "Описание", + FULL_CHR_KR_DESC_NAME: "Имя: Kentai Radiquum", + FULL_CHR_KR_DESC_SPEC: "Вид: Красная Панда", + FULL_CHR_KR_DESC_GEN: "Пол: мужской", + FULL_CHR_KR_DESC_BUI: "Рост и комплекция: средний рост, стройное телосложение.", + FULL_CHR_KR_DESC_APP_TITLE: "Внешность", + FULL_CHR_KR_DESC_APP_TEXT: "Его шерсть розовая, с голубым на лапах и причёске, а грудь, кончики лап и полосы на хвосте выделяются белым цветом. Он носит стильную чёрную джинсовку, немного потёртую. Карго-штаны чёрно-серого цвета с белыми лямками дополняют образ, подчёркивая его практичность и склонность к порядку (в карманах всегда найдётся место для мелочей вроде флешек или конфет). Ошейник на шее — бордовый, из гладкой кожи с металлической табличкой, отражающей его индивидуальность. Завершает образ футболка с забавной и честной надписью: \"Я программист, делаю на компьютере клац клац клац\".", + FULL_CHR_KR_DESC_PERS_TITLE : "Характер", + FULL_CHR_KR_DESC_PERS_TEXT : "Kentai дружелюбный, но интровертный. Он ценит личное пространство и предпочитает общение в небольших, доверительных кругах. Его саркастическое чувство юмора иногда создаёт впечатление, что он скрытный, но за этим скрывается глубокая доброта. Он любознателен, обожает изучать новое, особенно в области технологий, и обладает острым умом. Внешне может казаться спокойным, но внутри у него буря идей, которые он постоянно воплощает.", + FULL_CHR_KR_DESC_HOB_TITLE: "Увлечения", + FULL_CHR_KR_DESC_HOB_PR: "- Программирование: Kentai буквально живёт кодом. Он видит в программировании не только работу, но и искусство.", + FULL_CHR_KR_DESC_HOB_MU: "- Музыка: фанат S3RL, Camellia, Smash Into Pieces, Linkin Park, Porter Robinson, Saint Motel и других.", + FULL_CHR_KR_DESC_HOB_PL: "- Мягкие игрушки: у него есть особая любовь к мягким игрушкам. Его коллекция включает двух красных панд и одну большую игрушку обычной панды. Игрушки для него — источник уюта и радости.", + FULL_CHR_KR_DESC_HAB_TITLE: "Привычки", + FULL_CHR_KR_DESC_HAB_1: "- Любит работать в своём темпе, часто уходит с головой в свои проекты.", + FULL_CHR_KR_DESC_HAB_2: "- Когда Kentai погружается в работу, его хвост начинает слегка вилять.", + FULL_CHR_KR_DESC_HAB_3: "- Иногда поправляет ошейник, когда думает над сложной задачей.", + FULL_CHR_KR_DESC_HAB_4: "- Обожает слушать музыку во время работы.", + FULL_CHR_KR_DESC_HAB_5: "- Иногда он напевает мелодии из любимых треков, особенно когда чувствует себя расслабленно.", + FULL_CHR_KR_DESC_HAB_6: "- Если с кем-то спорит, то начинает быстро жестикулировать.", + FULL_CHR_KR_DESC_HAB_7: "- Любит устраивать себе \"минуты уюта\" — отдыхать с одной из своих мягких игрушек, укутаться в плед и слушать музыку.", }; const i18n_ru_style = { CARD_SKILLS_STYLE: "--sm--mt:54px; --lg--mt:40px;", }; + +const i18n_ru_href = { + FULL_CHR_KR_DOWNLOAD_PDF_HREF: "./static/assets/characters/KentaiRadiquum/Kentai_Radiquum_RU.pdf", +}; diff --git a/static/tailwind.css b/static/tailwind.css index b68086a..d6deb36 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -608,6 +608,10 @@ video { position: relative; } +.sticky { + position: sticky; +} + .inset-0 { inset: 0px; } @@ -864,10 +868,62 @@ video { width: max-content; } +.w-\[372px\] { + width: 372px; +} + +.w-\[374px\] { + width: 374px; +} + +.w-\[384px\] { + width: 384px; +} + +.w-\[386px\] { + width: 386px; +} + +.min-w-\[372px\] { + min-width: 372px; +} + +.min-w-\[376px\] { + min-width: 376px; +} + .max-w-\[50vw\] { max-width: 50vw; } +.max-w-\[372px\] { + max-width: 372px; +} + +.max-w-\[384px\] { + max-width: 384px; +} + +.max-w-\[374px\] { + max-width: 374px; +} + +.max-w-\[376px\] { + max-width: 376px; +} + +.max-w-\[378px\] { + max-width: 378px; +} + +.max-w-\[375px\] { + max-width: 375px; +} + +.flex-1 { + flex: 1 1 0%; +} + .-translate-y-full { --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -929,6 +985,10 @@ video { scroll-margin-top: 9rem; } +.list-disc { + list-style-type: disc; +} + .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -937,6 +997,10 @@ video { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } +.grid-cols-\[repeat\(auto-fill\2c minmax\(0\2c 1fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(0,1fr)); +} + .flex-row { flex-direction: row; } @@ -989,6 +1053,14 @@ video { gap: 2rem; } +.gap-16 { + gap: 4rem; +} + +.gap-12 { + gap: 3rem; +} + .gap-x-2 { -moz-column-gap: 0.5rem; column-gap: 0.5rem; @@ -1026,6 +1098,10 @@ video { border-radius: 0.375rem; } +.rounded { + border-radius: 0.25rem; +} + .rounded-b-lg { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; @@ -1158,6 +1234,51 @@ video { background-color: rgb(234 179 8 / var(--tw-bg-opacity)); } +.bg-\[\#494749\] { + --tw-bg-opacity: 1; + background-color: rgb(73 71 73 / var(--tw-bg-opacity)); +} + +.bg-\[\#91d1fd\] { + --tw-bg-opacity: 1; + background-color: rgb(145 209 253 / var(--tw-bg-opacity)); +} + +.bg-\[\#ffb1ce\] { + --tw-bg-opacity: 1; + background-color: rgb(255 177 206 / var(--tw-bg-opacity)); +} + +.bg-\[\#ffffff\] { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} + +.bg-\[\#1c1a1d\] { + --tw-bg-opacity: 1; + background-color: rgb(28 26 29 / var(--tw-bg-opacity)); +} + +.bg-\[\#39373b\] { + --tw-bg-opacity: 1; + background-color: rgb(57 55 59 / var(--tw-bg-opacity)); +} + +.bg-\[\#492020\] { + --tw-bg-opacity: 1; + background-color: rgb(73 32 32 / var(--tw-bg-opacity)); +} + +.bg-\[\#69676a\] { + --tw-bg-opacity: 1; + background-color: rgb(105 103 106 / var(--tw-bg-opacity)); +} + +.bg-\[\#98959a\] { + --tw-bg-opacity: 1; + background-color: rgb(152 149 154 / var(--tw-bg-opacity)); +} + .bg-opacity-20 { --tw-bg-opacity: 0.2; } @@ -1349,6 +1470,91 @@ video { filter: darken(10%); } +.\[grid-auto-columns\:1fr\] { + grid-auto-columns: 1fr; +} + +.\[grid-auto-columns\:fit-content\(400px\)\] { + grid-auto-columns: fit-content(400px); +} + +.\[grid-auto-columns\:minmax\(10px\2c auto\)\] { + grid-auto-columns: minmax(10px,auto); +} + +.\[grid-auto-columns\:minmax\(10px\2c auto-fill\)\] { + grid-auto-columns: minmax(10px,auto - -webkit-fill-available); + grid-auto-columns: minmax(10px,auto - fill); +} + +.\[grid-auto-columns\:minmax\(10px\2c auto-fit\)\] { + grid-auto-columns: minmax(10px,auto - fit); +} + +.\[grid-auto-columns\:minmax\(max-content\2c 1fr\)\] { + grid-auto-columns: minmax(max-content,1fr); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(275px\2c 1fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(275px,1fr)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 100\%\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,100%)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 1fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 2fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,2fr)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 375px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,375px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 376px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,376px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 377px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,377px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 378px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,378px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 3fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,3fr)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 400px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,400px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 4fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,4fr)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 600px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,600px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(300px\2c 800px\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(300px,800px)); +} + +.\[grid-template-columns\:repeat\(auto-fill\2c minmax\(375px\2c 1fr\)\)\] { + grid-template-columns: repeat(auto-fill,minmax(375px,1fr)); +} + +.\[grid-template-colums\:repeat\(auto-fill\2c minmax\(375px\2c 1fr\)\)\] { + grid-template-colums: repeat(auto-fill,minmax(375px,1fr)); +} + @font-face { font-family: 'Inter';