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

[260112]

Browse Source 
- 모드 전환 기능
- 솔라리스 모드 추가
This commit is contained in:
zenn
2026-01-12 23:19:09 +09:00
parent 19f92d8063
commit 586c36602f
4 changed files with 96 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
font/Solaris-3-Script.otf Normal file
View File

Binary file not shown.

14
index.html
View File

@@ -9,9 +9,9 @@
<style></style> <style></style>
</head> </head>
<body class=""> <body class="semi-nova">
<header> <header>
<h1>sori<span class="dot-point">.</span>studio</h1> <h1 class="glyph">sori<span class="dot-point">.</span>studio</h1>
</header> </header>
<section class="category-section"> <section class="category-section">
@@ -29,7 +29,7 @@
</div> </div>
<div class="card__header"> <div class="card__header">
<div class="card__title">Proxy Manager</div> <div class="card__title glyph">Proxy Manager</div>
<div class="card__subtitle">Nginx Proxy Manager</div> <div class="card__subtitle">Nginx Proxy Manager</div>
</div> </div>
@@ -50,7 +50,7 @@
</div> </div>
<div class="card__header"> <div class="card__header">
<div class="card__title">Gitea</div> <div class="card__title glyph">Gitea</div>
<div class="card__subtitle">Gitea</div> <div class="card__subtitle">Gitea</div>
</div> </div>
@@ -71,7 +71,7 @@
</div> </div>
<div class="card__header"> <div class="card__header">
<div class="card__title">Pocket Base</div> <div class="card__title glyph">Pocket Base</div>
<div class="card__subtitle">Pocket Base</div> <div class="card__subtitle">Pocket Base</div>
</div> </div>
@@ -99,7 +99,7 @@
</div> </div>
<div class="card__header"> <div class="card__header">
<div class="card__title">UNIARE</div> <div class="card__title glyph">UNIARE</div>
<div class="card__subtitle">Union Arena Deck Builder</div> <div class="card__subtitle">Union Arena Deck Builder</div>
</div> </div>
@@ -128,7 +128,7 @@
</div> </div>
<div class="card__header"> <div class="card__header">
<div class="card__title">Mastodon</div> <div class="card__title glyph">Mastodon</div>
<div class="card__subtitle">Sori.Space Mastodon</div> <div class="card__subtitle">Sori.Space Mastodon</div>
</div> </div>

50
script.js
View File

@@ -92,18 +92,52 @@ document.querySelectorAll('.card').forEach((card, cardIndex) => {
}); });
}); });
// 1. 사용할 테마 리스트
const themes = ['semi-nova', 'nova', 'semi-solaris', 'solaris'];
const STORAGE_KEY = 'selected-theme';
// 2. 초기 로드 시 테마 적용 (기본값: semi-nova)
const savedTheme = localStorage.getItem(STORAGE_KEY) || themes[0];
document.body.classList.add(savedTheme);
window.addEventListener('keydown', (e) => { window.addEventListener('keydown', (e) => {
// OS별 수정 키 판별 (Mac: Command, Win: Control)
const isMac = navigator.platform.toUpperCase().includes('MAC'); const isMac = navigator.platform.toUpperCase().includes('MAC');
const isModifierPressed = isMac ? e.metaKey : e.ctrlKey;
// 방향키 좌/우 확인
const isLeft = e.code === 'ArrowLeft';
const isRight = e.code === 'ArrowRight';
if ( if (
isMac && isModifierPressed &&
e.metaKey && (isLeft || isRight) &&
e.shiftKey && // 입력창 안에서 커서 이동을 방해하지 않도록 체크
e.code === 'KeyD' && !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) &&
!['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) !document.activeElement?.isContentEditable // 에디터 영역 대응
) { ) {
e.preventDefault(); e.preventDefault();
document.body.classList.toggle('is-nova');
}
});
// 현재 인덱스 찾기
let currentIndex = themes.findIndex(t => document.body.classList.contains(t));
if (currentIndex === -1) currentIndex = 0;
// 3. 좌/우 방향에 따른 인덱스 순환
if (isRight) {
// 오른쪽 화살표: 다음 테마
currentIndex = (currentIndex + 1) % themes.length;
} else if (isLeft) {
// 왼쪽 화살표: 이전 테마
currentIndex = (currentIndex - 1 + themes.length) % themes.length;
}
const nextTheme = themes[currentIndex];
// 4. 클래스 교체 및 저장
themes.forEach(t => document.body.classList.remove(t));
document.body.classList.add(nextTheme);
localStorage.setItem(STORAGE_KEY, nextTheme);
console.log(`Current Theme: ${nextTheme}`);
}
});

172
style.css
View File

@@ -3,18 +3,27 @@
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap");
@font-face { @font-face {
font-family: "Nova"; font-family: "nova";
src: url("./font/NovaBySoristudio-Regular.otf") format("opentype"); src: url("./font/NovaBySoristudio-Regular.otf") format("opentype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
*, @font-face {
*::before, font-family: "solaris";
*::after { src: url("./font/Solaris-3-Script.otf") format("opentype");
/* font-family: "Nova" !important; */ font-weight: normal;
font-style: normal;
} }
/* Nova: Stella Sora, Solaris: Wuthering Waves */
.glyph { font-family: "solaris"; }
.nova *, .nova *::before, .nova *::after { font-family: "nova" !important; }
.semi-nova .glyph { font-family: "nova"; }
.solaris *, .solaris *::before, .solaris *::after { font-family: "solaris" !important; }
.semi-solaris .glyph { font-family: "solaris"; }
body { body {
margin: 0; margin: 0;
@@ -54,6 +63,7 @@ header h1 {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
} }
.solaris header h1, .semi-solaris header h1 { font-size: 2.5rem; margin-top:30px;}
header h1 .dot-point { header h1 .dot-point {
background: none; background: none;
@@ -257,44 +267,6 @@ header h1 .dot-point {
transform: translate(-50%, -50%) rotate(100deg); transform: translate(-50%, -50%) rotate(100deg);
} }
.card-inner {
display: flex;
width: 100%;
gap: 1rem;
align-items: center;
}
.card-icon {
flex-shrink: 0;
width: auto;
height: 60px;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: "Nova";
font-size: 36px;
line-height: 1;
}
.icon-nova {
font-family: "Nova";
font-size: 3rem;
line-height: 1;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}
.icon-ruby {
font-family: "pretendard", sans-serif;
font-size: 12px;
line-height: 1;
color: #eaeaea;
font-weight: 700;
}
.card__header { .card__header {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
@@ -311,8 +283,7 @@ header h1 .dot-point {
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
font-family: "Nova"; font-size: 2rem;
font-size: 3rem;
line-height: 1; line-height: 1;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
@@ -322,6 +293,8 @@ header h1 .dot-point {
text-align: center; text-align: center;
} }
.nova .card__title, .semi-nova .card__title {font-size: 2.5rem;}
.card__subtitle { .card__subtitle {
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
@@ -345,14 +318,6 @@ header h1 .dot-point {
min-width: 0; min-width: 0;
} }
.title-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
}
.card__meta--url { .card__meta--url {
margin: 1.25rem 0 0.25rem; margin: 1.25rem 0 0.25rem;
font-size: 1.125rem; font-size: 1.125rem;
@@ -369,6 +334,9 @@ header h1 .dot-point {
flex: 1; flex: 1;
font-family: "Pretendard", sans-serif; font-family: "Pretendard", sans-serif;
} }
.nova .card__meta--url {
margin: 0.5rem 0 0 ;
}
.card__desc { .card__desc {
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
@@ -383,17 +351,6 @@ header h1 .dot-point {
display: none; display: none;
} }
.status-dot {
position: absolute;
top: 1rem;
right: 1rem;
flex-shrink: 0;
width: 1rem;
height: 1rem;
border-radius: 50%;
transition: background-color 0.5s ease;
}
.status-online { .status-online {
background-color: #00ff88; background-color: #00ff88;
box-shadow: 0 0 10px #00ff88; box-shadow: 0 0 10px #00ff88;
@@ -411,12 +368,10 @@ header h1 .dot-point {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
} }
70% { 70% {
transform: scale(1); transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
} }
100% { 100% {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
@@ -429,43 +384,14 @@ header h1 .dot-point {
} }
} }
@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));
}
}
@keyframes bolt-spin-return { @keyframes bolt-spin-return {
0% { transform: translate(-50%, -50%) rotate(var(--r)); }
/* 시작: 기본 각도 */
0% {
transform: translate(-50%, -50%) rotate(var(--r));
}
/* 오른쪽으로 3바퀴 */
60% { 60% {
transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg));
/* 360 * 3 */
} }
/* 잠깐 정지 */
70% { 70% {
transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg)); transform: translate(-50%, -50%) rotate(calc(var(--r) + 1080deg));
} }
/* 왼쪽으로 복귀 */
100% { 100% {
transform: translate(-50%, -50%) rotate(var(--r)); transform: translate(-50%, -50%) rotate(var(--r));
} }
@@ -496,10 +422,8 @@ header h1 .dot-point {
border-color: #050505; border-color: #050505;
} }
/* 5. (선택사항) 스크롤바가 작동할 때 나사 불빛과 맞춘 포인트 */
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background: #00ff88; background: #00ff88;
/* 나사 LED 컬러로 포인트 */
box-shadow: 0 0 10px #00ff88; box-shadow: 0 0 10px #00ff88;
} }
@@ -508,28 +432,21 @@ header h1 .dot-point {
scrollbar-color: #333 #050505; scrollbar-color: #333 #050505;
} }
.is-nova *,
.is-nova *::before, .solaris .section-title, .nova .section-title {
.is-nova *::after {
font-family: "Nova", sans-serif !important;
}
.is-nova .section-title {
font-size: 1.75rem; font-size: 1.75rem;
margin: 1rem 0 1.5rem; margin: 1rem 0 1.5rem;
} }
.is-nova .card__subtitle { .solaris .card__subtitle, .nova .card__subtitle {
/* color: transparent; */
/* position: relative; */
display: none; display: none;
} }
.is-nova .card__title::after { .solaris .card__title::after, .nova .card__title::after {
content: ""; content: "";
display: block; display: block;
width: 100%; width: 100%;
height: 1rem; height: 1rem;
border-radius: 0.25rem;
opacity: 0.25; opacity: 0.25;
/* Glass base */ /* Glass base */
@@ -549,34 +466,39 @@ header h1 .dot-point {
animation: glass-skeleton 1.6s ease-in-out infinite; animation: glass-skeleton 1.6s ease-in-out infinite;
} }
.is-nova .card__meta--url { .solaris .card__meta--url {
font-size: 1.5rem; font-size: 1rem;
margin-bottom: 0; margin-bottom: 0;
} }
.is-nova .card__desc[data-lang="ko"] {
.nova .card__meta--url {
font-size: 1.5rem;
}
.solaris .card__desc[data-lang="ko"],
.nova .card__desc[data-lang="ko"] {
display: none; display: none;
} }
.is-nova .card__desc[data-lang="ko"] { .solaris .card__desc[data-lang="ko"],
.nova .card__desc[data-lang="ko"] {
display: none; display: none;
} }
.is-nova .card__desc[data-lang="en"] { .solaris .card__desc[data-lang="en"] {
font-size: 0.875rem;
display: block;
margin: 0;
}
.nova .card__desc[data-lang="en"] {
font-size: 1.25rem; font-size: 1.25rem;
display: block; display: block;
margin: 0; margin: 0;
} }
@keyframes glass-skeleton { @keyframes glass-skeleton {
0% { 0% { background-position: 0% 0; }
background-position: 0% 0; 50% { background-position: 100% 0; }
} 100% { background-position: 0% 0; }
50% {
background-position: 100% 0;
}
100% {
background-position: 0% 0;
}
} }