[260112]

- 모드 전환 기능 - 솔라리스 모드 추가
2026-01-12 23:19:09 +09:00
parent 19f92d8063
commit 586c36602f
4 changed files with 96 additions and 140 deletions
--- a/font/Solaris-3-Script.otf
+++ b/font/Solaris-3-Script.otf
--- a/index.html
+++ b/index.html
@@ -9,9 +9,9 @@
  <style></style>
 </head>

-<body class="">
+<body class="semi-nova">
  <header>
-    <h1>sori<span class="dot-point">.</span>studio</h1>
+    <h1 class="glyph">sori<span class="dot-point">.</span>studio</h1>
  </header>

  <section class="category-section">
@@ -29,7 +29,7 @@
        </div>

        <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>

@@ -50,7 +50,7 @@
        </div>

        <div class="card__header">
-          <div class="card__title">Gitea</div>
+          <div class="card__title glyph">Gitea</div>
          <div class="card__subtitle">Gitea</div>
        </div>

@@ -71,7 +71,7 @@
        </div>

        <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>

@@ -99,7 +99,7 @@
        </div>

        <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>

@@ -128,7 +128,7 @@
        </div>

        <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>

--- a/script.js
+++ b/script.js
@@ -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) => {
+  // OS별 수정 키 판별 (Mac: Command, Win: Control)
  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 (
-    isMac &&
-    e.metaKey &&
-    e.shiftKey &&
-    e.code === 'KeyD' &&
-    !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)
+    isModifierPressed && 
+    (isLeft || isRight) &&
+    // 입력창 안에서 커서 이동을 방해하지 않도록 체크
+    !['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) &&
+    !document.activeElement?.isContentEditable // 에디터 영역 대응
  ) {
    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}`);
  }
 });
-
--- a/style.css
+++ b/style.css
@@ -3,18 +3,27 @@
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@800&family=Staatliches&family=Tenor+Sans&display=swap");

@font-face {
-  font-family: "Nova";
+  font-family: "nova";
  src: url("./font/NovaBySoristudio-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
 }

-*,
-*::before,
-*::after {
-  /* font-family: "Nova" !important; */
+@font-face {
+  font-family: "solaris";
+  src: url("./font/Solaris-3-Script.otf") format("opentype");
+  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 {
  margin: 0;
@@ -54,6 +63,7 @@ header h1 {

  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 {
  background: none;
@@ -257,44 +267,6 @@ header h1 .dot-point {
  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 {
  width: 100%;
  min-width: 0;
@@ -311,8 +283,7 @@ header h1 .dot-point {
  max-width: 100%;
  min-width: 0;

-  font-family: "Nova";
-  font-size: 3rem;
+  font-size: 2rem;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);

@@ -322,6 +293,8 @@ header h1 .dot-point {
  text-align: center;
 }

+.nova .card__title, .semi-nova .card__title {font-size: 2.5rem;}
+
 .card__subtitle {
  max-width: 100%;
  min-width: 0;
@@ -345,14 +318,6 @@ header h1 .dot-point {
  min-width: 0;
 }

-.title-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-}
-
 .card__meta--url {
  margin: 1.25rem 0 0.25rem;
  font-size: 1.125rem;
@@ -369,6 +334,9 @@ header h1 .dot-point {
  flex: 1;
  font-family: "Pretendard", sans-serif;
 }
+.nova .card__meta--url {
+  margin: 0.5rem 0 0 ;
+}

 .card__desc {
  margin: 0.25rem 0 0;
@@ -383,17 +351,6 @@ header h1 .dot-point {
  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 {
  background-color: #00ff88;
  box-shadow: 0 0 10px #00ff88;
@@ -411,12 +368,10 @@ 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);
@@ -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 {
-
-  /* 시작: 기본 각도 */
-  0% {
-    transform: translate(-50%, -50%) rotate(var(--r));
-  }
-
-  /* 오른쪽으로 3바퀴 */
+  0% { transform: translate(-50%, -50%) rotate(var(--r)); }
  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));
  }
@@ -496,10 +422,8 @@ header h1 .dot-point {
  border-color: #050505;
 }

-/* 5. (선택사항) 스크롤바가 작동할 때 나사 불빛과 맞춘 포인트 */
 ::-webkit-scrollbar-thumb:active {
  background: #00ff88;
-  /* 나사 LED 컬러로 포인트 */
  box-shadow: 0 0 10px #00ff88;
 }

@@ -508,28 +432,21 @@ header h1 .dot-point {
  scrollbar-color: #333 #050505;
 }

-.is-nova *,
-.is-nova *::before,
-.is-nova *::after {
-  font-family: "Nova", sans-serif !important;
-}
-.is-nova .section-title {
+
+.solaris .section-title, .nova .section-title {
  font-size: 1.75rem;
  margin: 1rem 0 1.5rem;
 }

-.is-nova .card__subtitle {
-  /* color: transparent; */
-  /* position: relative; */
+.solaris .card__subtitle, .nova .card__subtitle {
  display: none;
 }

-.is-nova .card__title::after {
+.solaris .card__title::after, .nova .card__title::after {
  content: "";
  display: block;
  width: 100%;
  height: 1rem;
-  border-radius: 0.25rem;
  opacity: 0.25;

  /* Glass base */
@@ -549,34 +466,39 @@ header h1 .dot-point {
  animation: glass-skeleton 1.6s ease-in-out infinite;
 }

-.is-nova .card__meta--url  {
-  font-size: 1.5rem;
+.solaris .card__meta--url {
+  font-size: 1rem;
  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;
 }

-.is-nova .card__desc[data-lang="ko"] {
+.solaris .card__desc[data-lang="ko"],
+.nova .card__desc[data-lang="ko"] {
  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;
  display: block;
  margin: 0;
 }

@keyframes glass-skeleton {
-  0% {
-    background-position: 0% 0;
-  }
-
-  50% {
-    background-position: 100% 0;
-  }
-
-  100% {
-    background-position: 0% 0;
-  }
+  0% { background-position: 0% 0; }
+  50% { background-position: 100% 0; }
+  100% { background-position: 0% 0; }
 }