zenn/ugreen-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260112]

Browse Source 
- 코드 정리
- 클래스명 정리
- Bolt 테스트 모드 추가
- Nova 모드 추가
This commit is contained in:
zenn
2026-01-12 16:37:40 +09:00
parent be2d1bfd78
commit 19f92d8063
3 changed files with 381 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
index.html
View File

@@ -1,105 +1,151 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>SORI STUDIO</title>
<style></style>
</head>
<body>
<header>
<h1>sori<span class="dot-point">.</span>studio</h1>
</header>
<section class="category-section">
<h2 class="section-title">Core Infrastructure</h2>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>SORI STUDIO</title>
<style></style>
</head>
<body class="">
<header>
<h1>sori<span class="dot-point">.</span>studio</h1>
</header>
<section class="category-section">
<h2 class="section-title">Core Infrastructure</h2>
<div class="container">
<!-- Nginx Proxy Manager -->
<a href="https://npm.sori.studio" class="card" data-url="https://npm.sori.studio">
<span class="bolt tl" data-rotate="45"></span><span class="bolt tr" style="--r: 160deg"></span><span class="bolt bl" data-rotate="-20"></span><span class="bolt br" data-rotate="100"></span>
<div class="card-icon">
<div class="icon-nova">Proxy Manager</div>
<span class="icon-ruby">Nginx Proxy Manager</span>
<div class="card__decor-layer">
<span class="card__decor card__decor--tl"></span>
<span class="card__decor card__decor--tr"></span>
<span class="card__decor card__decor--bl"></span>
<span class="card__decor card__decor--br"></span>
</div>
<div class="card-content">
<div class="url-display">spm.sori.studio</div>
<p class="desc">리버스 프록시 관리자</p>
<div class="card__header">
<div class="card__title">Proxy Manager</div>
<div class="card__subtitle">Nginx Proxy Manager</div>
</div>
<div class="card__body">
<div class="card__meta card__meta--url">npm.sori.studio</div>
<p class="card__desc" data-lang="ko">리버스 프록시 관리자</p>
<p class="card__desc" data-lang="en">Reverse proxy manager</p>
</div>
</a>
<!-- gitea -->
<a href="https://uniare.sori.studio" class="card" data-url="https://uniare.sori.studio">
<span class="bolt tl" data-rotate="45"></span><span class="bolt tr" style="--r: 160deg"></span><span class="bolt bl" data-rotate="-20"></span><span class="bolt br" data-rotate="100"></span>
<div class="card-icon">
<div class="icon-nova">Gitea</div>
<span class="icon-ruby">Gitea</span>
<a href="https://git.sori.studio" class="card" data-url="https://git.sori.studio">
<div class="card__decor-layer">
<span class="card__decor card__decor--tl"></span>
<span class="card__decor card__decor--tr"></span>
<span class="card__decor card__decor--bl"></span>
<span class="card__decor card__decor--br"></span>
</div>
<div class="card-content">
<div class="url-display">git.sori.studio</div>
<p class="desc">"zenn"의 개발 리소스 저장소</p>
<div class="card__header">
<div class="card__title">Gitea</div>
<div class="card__subtitle">Gitea</div>
</div>
<div class="card__body">
<div class="card__meta card__meta--url">git.sori.studio</div>
<p class="card__desc" data-lang="ko">개발 리소스 저장소</p>
<p class="card__desc" data-lang="en">Development resource repository</p>
</div>
</a>
<!-- gitea -->
<!-- Pocket Base -->
<a href="https://api.sori.studio" class="card" data-url="https://api.sori.studio">
<span class="bolt tl" data-rotate="45"></span><span class="bolt tr" style="--r: 160deg"></span><span class="bolt bl" data-rotate="-20"></span><span class="bolt br" data-rotate="100"></span>
<div class="card-icon">
<div class="icon-nova">Pocket Base</div>
<span class="icon-ruby">Pocket Base</span>
<div class="card__decor-layer">
<span class="card__decor card__decor--tl"></span>
<span class="card__decor card__decor--tr"></span>
<span class="card__decor card__decor--bl"></span>
<span class="card__decor card__decor--br"></span>
</div>
<div class="card-content">
<div class="url-display">api.sori.studio</div>
<p class="desc">sori.studio 맞춤형 API 서버</p>
<div class="card__header">
<div class="card__title">Pocket Base</div>
<div class="card__subtitle">Pocket Base</div>
</div>
<div class="card__body">
<div class="card__meta card__meta--url">api.sori.studio</div>
<p class="card__desc">Custom API Server</p>
</div>
</a>
</div>
</section>
<section class="category-section">
<h2 class="section-title">Public Services</h2>
</div>
</section>
<section class="category-section">
<h2 class="section-title">Public Services</h2>
<div class="container">
<!-- union arena deck builder -->
<a href="https://uniare.sori.studio" class="card" data-url="https://uniare.sori.studio">
<span class="bolt tl" style="--r: 22deg"></span><span class="bolt tr status-online" style="--r: 145deg"></span><span class="bolt bl" style="--r: -35deg"></span><span class="bolt br" style="--r: 85deg"></span>
<div class="card-icon">
<div class="icon-nova">UNIARE</div>
<span class="icon-ruby">Union Arena Deck Builder</span>
<div class="card__decor-layer">
<span class="card__decor card__decor--tl"></span>
<span class="card__decor card__decor--tr"></span>
<span class="card__decor card__decor--bl"></span>
<span class="card__decor card__decor--br"></span>
</div>
<div class="card-content">
<div class="url-display">uniare.sori.studio</div>
<p class="desc">반다이 남코의 TCG 'Union Arena'의 덱 빌더</p>
<div class="card__header">
<div class="card__title">UNIARE</div>
<div class="card__subtitle">Union Arena Deck Builder</div>
</div>
<div class="card__body">
<div class="card__meta card__meta--url">uniare.sori.studio</div>
<p class="card__desc" data-lang="ko">반다이 남코의 TCG 'Union Arena'의 덱 빌더</p>
<p class="card__desc" data-lang="en">Deck builder for the TCG 'Union Arena' by Bandai Namco</p>
</div>
</a>
</div>
</section>
<section class="category-section">
<h2 class="section-title">Personal Archive</h2>
</div>
</section>
<section class="category-section">
<h2 class="section-title">Personal Archive</h2>
<div class="container">
<!-- mastodon -->
<a href="https://sns.sori.studio" class="card" data-url="https://sns.sori.studio">
<span class="bolt tl" style="--r: 22deg"></span><span class="bolt tr status-online" style="--r: 145deg"></span><span class="bolt bl" style="--r: -35deg"></span><span class="bolt br" style="--r: 85deg"></span>
<div class="card-icon">
<div class="icon-nova">Mastodon</div>
<span class="icon-ruby">SoRi.Space</span>
<div class="card__decor-layer">
<span class="card__decor card__decor--tl"></span>
<span class="card__decor card__decor--tr"></span>
<span class="card__decor card__decor--bl"></span>
<span class="card__decor card__decor--br"></span>
</div>
<div class="card-content">
<div class="url-display">sns.sori.studio</div>
<p class="desc">소리 스튜디오(Sori Studio)의 공식 마스토돈 인스턴스입니다.</p>
<p class="desc">운영자 zenn의 개인적인 기록과 소소한 이야기를 공유하는 독립적인 공간입니다.</p>
<div class="card__header">
<div class="card__title">Mastodon</div>
<div class="card__subtitle">Sori.Space Mastodon</div>
</div>
<div class="card__body">
<div class="card__meta card__meta--url">sns.sori.studio</div>
<p class="card__desc" data-lang="ko">소리 스튜디오(Sori Studio)의 공식 마스토돈 인스턴스입니다.<br />운영자 zenn의 개인적인 기록과 소소한 이야기를
공유하는 독립적인 공간입니다.</p>
<p class="card__desc" data-lang="en">This is the official Mastodon instance of Sori Studio.<br />It is an
independent space where operator zenn shares his personal records and small stories.</p>
</div>
</a>
</div>
</section>
</section>
<script src="script.js"></script>
</body>
</html>
<script src="script.js"></script>
</body>
</html>

67
script.js
View File

@@ -4,7 +4,7 @@ async function checkStatus() {
cards.forEach(async (card) => {
const url = card.getAttribute("data-url");
const dot = card.querySelector(".bolt.tr");
const dot = card.querySelector(".card__decor.card__decor--tr");
try {
const controller = new AbortController();
@@ -29,13 +29,30 @@ async function checkStatus() {
checkStatus();
setInterval(checkStatus, 300000);
// 🔴 테스트 ON
// const TEST_ONLY_SECOND_CARD = true;
// 🟢 테스트 OFF
const TEST_ONLY_SECOND_CARD = false;
// bolt animation
function startBoltAction() {
const allBolts = document.querySelectorAll(".bolt, .header-bolt");
let allBolts = [];
if (TEST_ONLY_SECOND_CARD) {
// 🔧 2번째 카드만 선택 (0-based index)
const secondCard = document.querySelectorAll(".card")[1];
if (!secondCard) return;
allBolts = secondCard.querySelectorAll(".card__decor");
} else {
// 🔹 전체 카드 대상
allBolts = document.querySelectorAll(".card__decor");
}
if (allBolts.length === 0) return;
const availableBolts = Array.from(allBolts).filter(
(bolt) => !bolt.classList.contains("bolt-acting")
(bolt) => !bolt.classList.contains("card__decor-acting")
);
if (availableBolts.length > 0) {
@@ -43,20 +60,17 @@ function startBoltAction() {
availableBolts[Math.floor(Math.random() * availableBolts.length)];
const baseRot =
randomBolt.getAttribute("data-rotate") ||
randomBolt.style.getPropertyValue("--r") ||
"0";
randomBolt.style.getPropertyValue("--r") || "0deg";
randomBolt.style.setProperty(
"--r",
baseRot.toString().replace("deg", "") + "deg"
);
randomBolt.style.setProperty("--r", baseRot);
randomBolt.classList.add("bolt-acting");
const BOLT_ANIMATION_DURATION = 16000; // CSS와 반드시 일치
randomBolt.classList.add("card__decor-acting");
setTimeout(() => {
randomBolt.classList.remove("bolt-acting");
}, 8100);
randomBolt.classList.remove("card__decor-acting");
}, BOLT_ANIMATION_DURATION);
}
const nextInterval = Math.random() * 4000 + 3000;
@@ -66,3 +80,30 @@ function startBoltAction() {
window.addEventListener("load", () => {
setTimeout(startBoltAction, 2000);
});
// 나사 랜덤 각도 부연
document.querySelectorAll('.card').forEach((card, cardIndex) => {
card.querySelectorAll('.card__decor').forEach((decor, decorIndex) => {
// -30 ~ 150 정도가 나사 느낌 제일 안정적
const angle = Math.floor(Math.random() * 180) - 30;
decor.style.setProperty('--r', `${angle}deg`);
});
});
window.addEventListener('keydown', (e) => {
const isMac = navigator.platform.toUpperCase().includes('MAC');
if (
isMac &&
e.metaKey &&
e.shiftKey &&
e.code === 'KeyD' &&
!['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)
) {
e.preventDefault();
document.body.classList.toggle('is-nova');
}
});

254
style.css
View File

@@ -9,6 +9,13 @@
font-style: normal;
}
*,
*::before,
*::after {
/* font-family: "Nova" !important; */
}
body {
margin: 0;
padding: 0;
@@ -33,7 +40,8 @@ header {
}
header h1 {
font-family: "Tenor Sans", sans-serif;
/* font-family: "Tenor Sans", sans-serif; */
font-family: "Nova", "Tenor Sans", sans-serif;
font-size: 3.5rem;
font-weight: 900;
letter-spacing: 4px;
@@ -60,12 +68,15 @@ header h1 .dot-point {
animation: pulse-dot 2s infinite;
margin: 0 2px;
}
@keyframes pulse-dot {
0%,
100% {
opacity: 0.5;
text-shadow: 0 0 8px rgba(0, 255, 136, 0.8);
}
50% {
opacity: 1;
text-shadow: 0 0 2px rgba(0, 255, 136, 0.2);
@@ -76,7 +87,8 @@ header h1 .dot-point {
.category-section {
width: 95%;
max-width: 1440px;
margin: 0 auto 60px; /* 중앙 정렬 유지 */
margin: 0 auto 60px;
/* 중앙 정렬 유지 */
}
/* [2] 섹션 타이틀 (반응형 대응) */
@@ -84,11 +96,13 @@ header h1 .dot-point {
font-family: 'Tenor Sans', sans-serif;
font-size: 1.25rem;
color: #666;
margin: 1rem 0 1.5rem;
text-transform: uppercase;
letter-spacing: 3px;
padding-left: 15px;
padding-left: 1rem;
margin-bottom: 25px;
border-left: 3px solid #00ff88; /* 나사 불빛과 맞춘 포인트 컬러 추천 */
border-left: 3px solid #00ff88;
/* 나사 불빛과 맞춘 포인트 컬러 추천 */
display: flex;
align-items: center;
}
@@ -107,7 +121,7 @@ header h1 .dot-point {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
/* padding 제거 (부모인 category-section에서 폭 제어) */
width: 100%;
width: 100%;
}
/* --- 반응형 구간 설정 --- */
@@ -115,8 +129,10 @@ header h1 .dot-point {
/* 1. 태블릿 (1200px 이하) */
@media (max-width: 1200px) {
.category-section {
max-width: 900px; /* 2열 카드 폭에 맞춤 */
max-width: 900px;
/* 2열 카드 폭에 맞춤 */
}
.container {
grid-template-columns: repeat(2, 1fr);
}
@@ -125,17 +141,22 @@ header h1 .dot-point {
/* 2. 모바일 (768px 이하) */
@media (max-width: 768px) {
.category-section {
max-width: 500px; /* 1열 카드 폭에 맞춤 */
max-width: 500px;
/* 1열 카드 폭에 맞춤 */
margin-bottom: 40px;
}
.container {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.section-title {
font-size: 1rem; /* 모바일에서 타이틀 살짝 축소 */
font-size: 1rem;
/* 모바일에서 타이틀 살짝 축소 */
letter-spacing: 2px;
}
header h1 {
font-size: 2.5rem;
}
@@ -168,7 +189,7 @@ header h1 .dot-point {
border-color: #333333;
}
.bolt {
.card__decor {
position: absolute;
width: 1rem;
height: 1rem;
@@ -177,51 +198,62 @@ header h1 .dot-point {
border: 1px solid #111;
}
.tl {
.card__decor--tl {
top: 1rem;
left: 1rem;
}
.tr {
.card__decor--tr {
top: 1rem;
right: 1rem;
}
.bl {
.card__decor--bl {
bottom: 1rem;
left: 1rem;
}
.br {
.card__decor--br {
bottom: 1rem;
right: 1rem;
}
.bolt::before {
.card__decor::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 64%;
height: 1.5px;
background: #222;
border-radius: 4px;
background: #222;
/* 핵심: 회전값은 CSS 변수 */
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
transition: background 0.3s;
transition: transform 0.3s ease, background 0.3s ease;
}
.bolt.bolt-acting::before {
/* 작동 상태 */
.card__decor.card__decor-acting::before {
transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 45deg));
background: #000;
}
.bolt[data-rotate="45"]::before {
.card__decor[data-rotate="45"]::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.bolt[data-rotate="160"]::before {
.card__decor[data-rotate="160"]::before {
transform: translate(-50%, -50%) rotate(160deg);
}
.bolt[data-rotate="-20"]::before {
.card__decor[data-rotate="-20"]::before {
transform: translate(-50%, -50%) rotate(-20deg);
}
.bolt[data-rotate="100"]::before {
.card__decor[data-rotate="100"]::before {
transform: translate(-50%, -50%) rotate(100deg);
}
@@ -263,7 +295,49 @@ header h1 .dot-point {
font-weight: 700;
}
.card-content {
.card__header {
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.card__title {
max-width: 100%;
min-width: 0;
font-family: "Nova";
font-size: 3rem;
line-height: 1;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.card__subtitle {
max-width: 100%;
min-width: 0;
font-family: "Pretendard", sans-serif;
font-size: 12px;
font-weight: 700;
color: #eaeaea;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.card__body {
flex-grow: 1;
display: flex;
flex-direction: column;
@@ -279,7 +353,7 @@ header h1 .dot-point {
width: 100%;
}
.url-display {
.card__meta--url {
margin: 1.25rem 0 0.25rem;
font-size: 1.125rem;
font-weight: 700;
@@ -296,7 +370,7 @@ header h1 .dot-point {
font-family: "Pretendard", sans-serif;
}
.desc {
.card__desc {
margin: 0.25rem 0 0;
color: #888888;
font-size: 0.85rem;
@@ -305,6 +379,10 @@ header h1 .dot-point {
text-align: center;
}
.card__desc[data-lang="en"] {
display: none;
}
.status-dot {
position: absolute;
top: 1rem;
@@ -333,10 +411,12 @@ header h1 .dot-point {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
@@ -349,58 +429,154 @@ header h1 .dot-point {
}
}
@keyframes bolt-full-cycle {
@keyframes card__decor-full-cycle {
0% {
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
15% {
transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 1080deg));
}
85% {
transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 1080deg));
}
100% {
transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
}
.bolt-acting::before {
animation: bolt-full-cycle 16s cubic-bezier(0.65, 0, 0.35, 1) forwards;
@keyframes bolt-spin-return {
/* 시작: 기본 각도 */
0% {
transform: translate(-50%, -50%) rotate(var(--r));
}
/* 오른쪽으로 3바퀴 */
60% {
transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg));
/* 360 * 3 */
}
/* 잠깐 정지 */
70% {
transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg));
}
/* 왼쪽으로 복귀 */
100% {
transform: translate(-50%, -50%) rotate(var(--r));
}
}
.card__decor-acting::before {
animation: bolt-spin-return 16s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/* 1. 전체 스크롤바 영역 (폭 설정) */
::-webkit-scrollbar {
width: 8px; /* 스크롤바 두께를 얇게 조절 */
height: 8px; /* 가로 스크롤바 대비 */
width: 8px;
height: 8px;
}
/* 2. 스크롤바 배경 (트랙) */
::-webkit-scrollbar-track {
background: #050505; /* 바디 배경색과 맞춰서 일체감 부여 */
background: #050505;
}
/* 3. 스크롤 바 (움직이는 부분) */
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, #333, #222); /* 나사 머리 같은 금속 느낌 */
background: linear-gradient(to bottom, #333, #222);
border-radius: 10px;
border: 2px solid #050505; /* 트랙과 분리되어 보이는 효과 (공간감) */
border: 2px solid #050505;
}
/* 4. 마우스 호버 시 (사용자가 잡았을 때) */
::-webkit-scrollbar-thumb:hover {
background: #444; /* 살짝 밝아지며 반응 */
background: #444;
border-color: #050505;
}
/* 5. (선택사항) 스크롤바가 작동할 때 나사 불빛과 맞춘 포인트 */
::-webkit-scrollbar-thumb:active {
background: #00ff88; /* 나사 LED 컬러로 포인트 */
background: #00ff88;
/* 나사 LED 컬러로 포인트 */
box-shadow: 0 0 10px #00ff88;
}
/* Firefox용 설정 */
* {
scrollbar-width: thin;
scrollbar-color: #333 #050505;
}
.is-nova *,
.is-nova *::before,
.is-nova *::after {
font-family: "Nova", sans-serif !important;
}
.is-nova .section-title {
font-size: 1.75rem;
margin: 1rem 0 1.5rem;
}
.is-nova .card__subtitle {
/* color: transparent; */
/* position: relative; */
display: none;
}
.is-nova .card__title::after {
content: "";
display: block;
width: 100%;
height: 1rem;
border-radius: 0.25rem;
opacity: 0.25;
/* Glass base */
background: linear-gradient(120deg,
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0.25),
rgba(255, 255, 255, 0.12));
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 4px 12px rgba(0, 0, 0, 0.08);
background-size: 200% 100%;
animation: glass-skeleton 1.6s ease-in-out infinite;
}
.is-nova .card__meta--url {
font-size: 1.5rem;
margin-bottom: 0;
}
.is-nova .card__desc[data-lang="ko"] {
display: none;
}
.is-nova .card__desc[data-lang="ko"] {
display: none;
}
.is-nova .card__desc[data-lang="en"] {
font-size: 1.25rem;
display: block;
margin: 0;
}
@keyframes glass-skeleton {
0% {
background-position: 0% 0;
}
50% {
background-position: 100% 0;
}
100% {
background-position: 0% 0;
}
}