mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 07:44:33 +00:00
feat: start of Kentai Radiquum Character Page
This commit is contained in:
parent
245a064556
commit
da0666897a
GPG key ID:
858E8EE696525EED
9 changed files with 225 additions and 71 deletions
82
Kentai_Radiquum.html
Normal file
82
Kentai_Radiquum.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="scroll-smooth">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kentai Radiquum</title>
|
||||
<meta name="description"
|
||||
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
|
||||
<link href="./static/tailwind.css" rel="stylesheet">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="./static/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./static/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="./static/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="./site.webmanifest">
|
||||
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Kentai Radiquum">
|
||||
<meta property="og:url" content="https://radiquum.wah.su">
|
||||
<meta property="og:image" content="https://radiquum.wah.su/static/opengraph.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:description"
|
||||
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and stickers telegram channel. I enjoy a variety of music genres, especially EDM, Tech, and Alternative. Feel free to reach out via instant messengers in the links section!">
|
||||
<meta property="og:image:width" content="1203">
|
||||
<meta property="og:image:height" content="627">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="Kentai Radiquum">
|
||||
<meta name="twitter:site" content="@radiquum">
|
||||
<meta name="twitter:description"
|
||||
content="Tech enthusiast with a passion for software development and self-hosting through my wah.su project. I'm also into photography and a big fan of red pandas, curating a collection of 3000+ photos and sti">
|
||||
<meta name="twitter:image" content="https://radiquum.wah.su/static/opengraph.png">
|
||||
|
||||
</head>
|
||||
|
||||
<body class="overflow-x-hidden bg-bg-black">
|
||||
<header class="w-full text-white 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">
|
||||
<img src="./static/avatar_512.png" alt="" class=" rounded-lg w-[64px] lg:w-[64px] 2xl:w-[64px]" />
|
||||
<h1 class="text-2xl font-semibold xl:text-3xl 2xl:text-4xl" data-i18n="NAME">KENTAI RADIQUUM</h1>
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex gap-1 px-4 mb-2 sm:px-0 sm:gap-2">
|
||||
<a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./index.html#about"
|
||||
data-i18n="BTN_ABOUT_ME">ABOUT</a>
|
||||
<a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./index.html#links"
|
||||
data-i18n="BTN_LINKS">LINKS</a>
|
||||
<a class="px-4 py-2 rounded-md sm:text-xl hover:underline bg-bg-gray" href="./characters.html"
|
||||
data-i18n="BTN_CHARACTERS">CHARACTERS</a>
|
||||
</div>
|
||||
</div>
|
||||
</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"
|
||||
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">
|
||||
<img alt="" src="./static/assets/icon--picture_as_pdf.svg" class="w-8 h-8" />
|
||||
<p class="text-lg">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">
|
||||
<img alt="" src="./static/assets/icon--image.svg" class="w-8 h-8" />
|
||||
<p class="text-lg">Download Image</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
<script src="./static/i18n/strings/ru.js"></script>
|
||||
<script src="./static/i18n/i18n.js"></script>
|
||||
<script src="./static/charactersMenu.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</div>
|
||||
</header>
|
||||
<div class="flex flex-col flex-wrap w-full lg:flex-row">
|
||||
<a class="group" href="./characters/KentaiRadiquum.html">
|
||||
<a class="group" href="./Kentai_Radiquum.html">
|
||||
<div class="w-full lg:max-w-[50vw] relative">
|
||||
<div
|
||||
class="absolute inset-0 flex flex-col justify-end p-4 text-white bg-black bg-opacity-50 group-hover:opacity-25">
|
||||
|
|
|
|||
1
static/assets/icon--cancel.svg
Normal file
1
static/assets/icon--cancel.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
|
||||
|
After Width: | Height: | Size: 507 B |
1
static/assets/icon--download.svg
Normal file
1
static/assets/icon--download.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
|
||||
|
After Width: | Height: | Size: 278 B |
1
static/assets/icon--image.svg
Normal file
1
static/assets/icon--image.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z"/></svg>
|
||||
|
After Width: | Height: | Size: 327 B |
1
static/assets/icon--picture_as_pdf.svg
Normal file
1
static/assets/icon--picture_as_pdf.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M360-460h40v-80h40q17 0 28.5-11.5T480-580v-40q0-17-11.5-28.5T440-660h-80v200Zm40-120v-40h40v40h-40Zm120 120h80q17 0 28.5-11.5T640-500v-120q0-17-11.5-28.5T600-660h-80v200Zm40-40v-120h40v120h-40Zm120 40h40v-80h40v-40h-40v-40h40v-40h-80v200ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/></svg>
|
||||
|
After Width: | Height: | Size: 576 B |
17
static/charactersMenu.js
Normal file
17
static/charactersMenu.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
function showMenu() {
|
||||
const downloadBtn_icon = document.getElementById("downloadBtn_icon");
|
||||
const downloadMenu = document.getElementById("downloadMenu");
|
||||
|
||||
if (
|
||||
downloadBtn_icon.src ==
|
||||
`${window.location.origin}/static/assets/icon--download.svg`
|
||||
) {
|
||||
downloadBtn_icon.src = `${window.location.origin}/static/assets/icon--cancel.svg`;
|
||||
} else {
|
||||
downloadBtn_icon.src = `${window.location.origin}/static/assets/icon--download.svg`;
|
||||
}
|
||||
|
||||
downloadMenu.classList.toggle("scale-0")
|
||||
downloadMenu.classList.toggle("-rotate-90")
|
||||
downloadMenu.classList.toggle("translate-x-4")
|
||||
}
|
||||
|
|
@ -624,6 +624,10 @@ video {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
bottom: 2rem;
|
||||
}
|
||||
|
||||
.bottom-\[50\%\] {
|
||||
bottom: 50%;
|
||||
}
|
||||
|
|
@ -636,6 +640,10 @@ video {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.right-8 {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.right-\[15\%\] {
|
||||
right: 15%;
|
||||
}
|
||||
|
|
@ -644,6 +652,22 @@ video {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
.bottom-12 {
|
||||
bottom: 3rem;
|
||||
}
|
||||
|
||||
.-right-10 {
|
||||
right: -2.5rem;
|
||||
}
|
||||
|
||||
.-right-6 {
|
||||
right: -1.5rem;
|
||||
}
|
||||
|
||||
.-right-4 {
|
||||
right: -1rem;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
|
@ -656,6 +680,10 @@ video {
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.order-1 {
|
||||
order: 1;
|
||||
}
|
||||
|
|
@ -698,6 +726,14 @@ video {
|
|||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -738,6 +774,10 @@ video {
|
|||
height: 6rem;
|
||||
}
|
||||
|
||||
.h-8 {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.h-\[100px\] {
|
||||
height: 100px;
|
||||
}
|
||||
|
|
@ -746,40 +786,12 @@ video {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.h-\[99vh\] {
|
||||
height: 99vh;
|
||||
}
|
||||
|
||||
.h-\[98vh\] {
|
||||
height: 98vh;
|
||||
}
|
||||
|
||||
.h-\[95vh\] {
|
||||
height: 95vh;
|
||||
}
|
||||
|
||||
.h-\[90vh\] {
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.h-\[80vh\] {
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.h-\[85vh\] {
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.h-\[87vh\] {
|
||||
height: 87vh;
|
||||
}
|
||||
|
||||
.h-\[89vh\] {
|
||||
height: 89vh;
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.max-h-\[182px\] {
|
||||
|
|
@ -790,10 +802,6 @@ video {
|
|||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.max-h-screen {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -810,6 +818,10 @@ video {
|
|||
width: 6rem;
|
||||
}
|
||||
|
||||
.w-8 {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-\[170px\] {
|
||||
width: 170px;
|
||||
}
|
||||
|
|
@ -822,10 +834,6 @@ video {
|
|||
width: 256px;
|
||||
}
|
||||
|
||||
.w-\[50vw\] {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
|
@ -834,12 +842,30 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-\[50vw\] {
|
||||
max-width: 50vw;
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
.w-10 {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.w-12 {
|
||||
width: 3rem;
|
||||
}
|
||||
|
||||
.w-fit {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.w-max {
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.max-w-\[50vw\] {
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.-translate-y-full {
|
||||
|
|
@ -852,6 +878,37 @@ video {
|
|||
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));
|
||||
}
|
||||
|
||||
.-translate-x-12 {
|
||||
--tw-translate-x: -3rem;
|
||||
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));
|
||||
}
|
||||
|
||||
.translate-x-12 {
|
||||
--tw-translate-x: 3rem;
|
||||
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));
|
||||
}
|
||||
|
||||
.translate-x-10 {
|
||||
--tw-translate-x: 2.5rem;
|
||||
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));
|
||||
}
|
||||
|
||||
.translate-x-4 {
|
||||
--tw-translate-x: 1rem;
|
||||
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));
|
||||
}
|
||||
|
||||
.-rotate-90 {
|
||||
--tw-rotate: -90deg;
|
||||
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));
|
||||
}
|
||||
|
||||
.scale-0 {
|
||||
--tw-scale-x: 0;
|
||||
--tw-scale-y: 0;
|
||||
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));
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
|
|
@ -900,6 +957,10 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -953,6 +1014,10 @@ video {
|
|||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
.rounded-full {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
|
@ -1105,22 +1170,6 @@ video {
|
|||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
|
||||
.bg-opacity-85 {
|
||||
--tw-bg-opacity: 0.85;
|
||||
}
|
||||
|
||||
.bg-opacity-90 {
|
||||
--tw-bg-opacity: 0.9;
|
||||
}
|
||||
|
||||
.bg-opacity-5 {
|
||||
--tw-bg-opacity: 0.05;
|
||||
}
|
||||
|
||||
.bg-opacity-25 {
|
||||
--tw-bg-opacity: 0.25;
|
||||
}
|
||||
|
||||
.object-contain {
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
|
|
@ -1177,6 +1226,11 @@ video {
|
|||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1185,10 +1239,6 @@ video {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -1219,11 +1269,6 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1259,6 +1304,12 @@ video {
|
|||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.shadow-md {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.brightness-50 {
|
||||
--tw-brightness: brightness(.5);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./characters.html"],
|
||||
content: ["./index.html", "./characters.html", "Kentai_Radiquum.html"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue