From 2e57175d44f72d6f80fae5351bb08c9be50d205b Mon Sep 17 00:00:00 2001 From: zenn Date: Tue, 21 Apr 2026 16:02:05 +0900 Subject: [PATCH] =?UTF-8?q?[v2.0.0]=20=EC=84=A4=EC=A0=95=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 시계 옵션(테마/폰트/표시스타일/부가정보/콜론위치)을 localStorage에 저장해 재방문 시 복원되도록 개선했습니다. 주요 인터랙션의 접근성과 이벤트 안정성을 함께 정리해 단일 페이지 사용성을 높였습니다. Made-with: Cursor --- index.html | 155 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 106 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 95db2dc..00e71db 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - + @@ -49,6 +49,8 @@ .app-theme { position: fixed; right: 1rem; top: 1rem; user-select: none; color: var(--sub-text-color); transition: 0.9s; } .app-icons-container { position: fixed; left: 0rem; bottom: 0rem; user-select: none; fill: var(--main-text-color); cursor: pointer; } .app-buttons { display: flex; flex-direction: column; gap: 0.5rem} + .app-icon-button { background: none; border: none; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } + .app-icon-button:focus-visible { outline: 2px solid var(--sub-text-color); outline-offset: 2px; border-radius: 8px; } .app-full { width: 24px; height: 24px; padding: 1rem; } .app-book { width: 24px; height: 24px; padding: 1rem; } .app-cog { width: 24px; height: 24px; padding: 1rem; } @@ -58,11 +60,10 @@ .theme-text { position: absolute; right: 0; transition: opacity 0.9s ease; opacity: 1; } .theme-text.hidden { opacity: 0; } /* 모달 */ - .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 600px; margin: 0 auto; background-color: var(--bg-color); border: 1px solid var(--sub-text-color); } .modal-content { display: flex; flex-direction: column; justify-content: center; } .modal-guide-line { font-size: 14px; font-weight: bold; letter-spacing: 1.5px; color: var(--main-text-color); } .modal-heading { margin-top: 24px; font-size: 28px; font-weight: bold; color: var(--sub-text-color); } - .modal-close-button { background-color: var(--sub-text-color); color: var(--bg-color); font-size: 14px; font-weight: 600; width: 100%; max-width: 320px; min-height: 44px; margin: 0 auto; display: grid; place-items: center; border-radius: 2rem; text-align: center; cursor: pointer; margin-top: 2rem; } + .modal-close-button { background-color: var(--sub-text-color); color: var(--bg-color); font-size: 14px; font-weight: 600; width: 100%; max-width: 320px; min-height: 44px; margin: 0 auto; display: grid; place-items: center; border-radius: 2rem; text-align: center; cursor: pointer; margin-top: 2rem; border: none; } .modal-close-button:hover { background-color: var(--main-text-color); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 1rem; padding: 2rem 3rem; overflow-y: auto; border-radius: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); width: 60%; max-width: 600px; max-height: 80%; margin: 0 auto; background-color: var(--bg-color); border: 1px solid var(--sub-text-color); opacity: 1; transition: 0.9s; z-index: 50; } @@ -201,7 +202,10 @@ select {
-
+
+
+
+
00
@@ -264,10 +268,10 @@ select {
-
-
-
-
+ + + +
@@ -294,7 +298,42 @@ select {