feat: finished of Kentai Radiquum Character Page

This commit is contained in:
Kentai Radiquum 2024-12-10 17:10:28 +05:00
parent da0666897a
commit 61a678df10
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 323 additions and 11 deletions

View file

@ -34,7 +34,7 @@
</head>
<body class="overflow-x-hidden bg-bg-black">
<header class="w-full text-white bg-bg-pink" id="header">
<header class="sticky top-0 left-0 w-full text-white rounded-b-lg bg-bg-pink" id="header">
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
<a href="./index.html#landing">
<div class="flex items-center gap-4 px-4 py-2 sm:py-4">
@ -54,25 +54,91 @@
</header>
<button
class="absolute z-50 flex items-center justify-center w-16 h-16 rounded-full shadow-md bottom-8 right-8 bg-bg-pink"
class="fixed z-50 flex items-center justify-center w-16 h-16 rounded-full shadow-md bottom-8 right-8 bg-bg-pink"
id="downloadBtn" onclick="showMenu()">
<img alt="" src="./static/assets/icon--download.svg" class="w-8" id="downloadBtn_icon" />
<div class="relative transition-all scale-0 -rotate-90 translate-x-4 z-100" id="downloadMenu">
<div class="absolute -right-4 bottom-12 w-max">
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf" download="Kentai_Radiquum_EN.pdf" class="flex items-center justify-start w-full gap-2 p-2 px-4 text-white rounded-lg bg-bg-pink">
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum_EN.pdf"
download="Kentai_Radiquum.pdf"
data-i18n-href="FULL_CHR_KR_DOWNLOAD_PDF_HREF"
class="flex items-center justify-start w-full gap-2 p-2 px-4 text-white rounded-lg bg-bg-pink">
<img alt="" src="./static/assets/icon--picture_as_pdf.svg" class="w-8 h-8" />
<p class="text-lg">Download PDF</p>
<p class="text-lg" data-i18n="FULL_CHR_KR_DOWNLOAD_PDF">Download PDF</p>
</a>
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png" download="Kentai_Radiquum.png" class="flex items-center justify-start w-full gap-2 p-2 px-4 mt-2 text-white rounded-lg bg-bg-pink">
<a href="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png" download="Kentai_Radiquum.png"
class="flex items-center justify-start w-full gap-2 p-2 px-4 mt-2 text-white rounded-lg bg-bg-pink">
<img alt="" src="./static/assets/icon--image.svg" class="w-8 h-8" />
<p class="text-lg">Download Image</p>
<p class="text-lg" data-i18n="FULL_CHR_KR_DOWNLOAD_IMG">Download Reference</p>
</a>
</div>
</div>
</button>
<div class="container flex flex-col gap-16 px-4 py-8 mx-auto text-white">
<div class="flex flex-col gap-8">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_REF_TITLE">Reference</h1>
<img src="./static/assets/characters/KentaiRadiquum/Kentai_Radiquum.png" alt="Kentai Radiquum" />
</div>
<div class="flex flex-col gap-8">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_COLORS_TITLE">Colors</h1>
<div class="flex flex-col gap-4">
<p data-i18n="FULL_CHR_KR_COLORS_CHARACTER" class="text-3xl font-light">Character</p>
<div class="flex flex-wrap">
<div class="w-full h-[100px] flex-1 bg-[#ffb1ce] "></div>
<div class="w-full h-[100px] flex-1 bg-[#91d1fd] "></div>
<div class="w-full h-[100px] flex-1 bg-[#ffffff] "></div>
</div>
</div>
<div class="flex flex-col gap-4">
<p data-i18n="FULL_CHR_KR_COLORS_CLOTHES" class="text-3xl font-light">Clothes</p>
<div class="flex flex-wrap">
<div class="w-full h-[100px] flex-1 bg-[#492020] "></div>
<div class="w-full h-[100px] flex-1 bg-[#1c1a1d] "></div>
<div class="w-full h-[100px] flex-1 bg-[#39373b] "></div>
<div class="w-full h-[100px] flex-1 bg-[#494749] "></div>
<div class="w-full h-[100px] flex-1 bg-[#69676a] "></div>
<div class="w-full h-[100px] flex-1 bg-[#98959a] "></div>
<div class="w-full h-[100px] flex-1 bg-[#ffffff] "></div>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="flex flex-col gap-4">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_TITLE">Description</h1>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_NAME">Character Name: Kentai Radiquum</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_SPEC">Species: Red Panda</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_GEN">Gender: Male</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_BUI">Height and Build: Average height, slim build</p>
</div>
<div class="flex flex-col gap-4">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_APP_TITLE">Appearance</h1>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_APP_TEXT">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"</p>
</div>
<div class="flex flex-col gap-4">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_PERS_TITLE">Personality</h1>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_PERS_TEXT">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, theres a storm of ideas brewing inside him, which hes constantly working to bring to life.</p>
</div>
<div class="flex flex-col gap-4">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_HOB_TITLE">Hobbies</h1>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HOB_PR">- Programming: Kentai practically lives and breathes code. To him, programming is not just work but an art form.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HOB_MU">- Music: A big fan of artists like S3RL, Camellia, Smash Into Pieces, Linkin Park, Porter Robinson, Saint Motel, and others.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HOB_PL">- 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.</p>
</div>
<div class="flex flex-col gap-4">
<h1 class="text-4xl font-bold sm:text-6xl" data-i18n="FULL_CHR_KR_DESC_HAB_TITLE">Habits</h1>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_1">- Loves working at his own pace and often dives deeply into his projects.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_2">- When deeply focused, his tail gently wags.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_3">- Sometimes adjusts his collar while pondering a tough problem.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_4">- Enjoys listening to music while working.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_5">- Occasionally hums melodies from his favorite tracks, especially when feeling relaxed.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_6">- In debates, he tends to gesture rapidly.</p>
<p class="text-3xl font-light" data-i18n="FULL_CHR_KR_DESC_HAB_7">- Enjoys "cozy moments" — relaxing with one of his plush toys, wrapped in a blanket, and listening to music.</p>
</div>
</div>
</div>
<script src="./static/i18n/strings/ru.js"></script>
<script src="./static/i18n/i18n.js"></script>
<script src="./static/charactersMenu.js"></script>

View file

@ -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() {

View file

@ -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",
};

View file

@ -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';