From e1af7285a169fafd8ea43221872606cf2b70b6da Mon Sep 17 00:00:00 2001 From: king Date: Fri, 22 May 2026 01:05:47 +0900 Subject: [PATCH] =?UTF-8?q?design:=20DBX=20Corporation=20=EB=AA=85?= =?UTF-8?q?=EC=B9=AD=20=EC=88=98=EC=A0=95,=20=ED=8F=B0=ED=8A=B8=20?= =?UTF-8?q?=ED=99=95=EB=8C=80,=20=EB=B8=8C=EB=9E=9C=EB=93=9C=20=ED=8C=A8?= =?UTF-8?q?=EB=84=90=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EB=8F=84=ED=98=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모든 페이지 'DBX Corp' → 'DBX Corporation' 통일 - 브랜드 패널 좌측에 천천히 움직이는 도형 5개 추가 (CSS 애니메이션) - 전체 기본 폰트 15px → 16px, 제목/카드 크기 확대 - 'Google Workspace 계정...' 문장 한 줄 표시 처리 --- app/static/styles.css | 133 ++++++++++++++++++++++++++++++++++---- app/templates/denied.html | 17 +++-- app/templates/login.html | 21 ++++-- app/templates/main.html | 4 +- 4 files changed, 148 insertions(+), 27 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index efc10e7..0e9a7d2 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -24,7 +24,7 @@ body { font-family: "Pretendard", "Segoe UI", "Apple SD Gothic Neo", system-ui, sans-serif; - font-size: 15px; + font-size: 16px; color: var(--text); background: var(--bg); min-height: 100vh; @@ -88,7 +88,7 @@ a { color: inherit; text-decoration: none; } .brand-logo-mark svg { color: #fff; } .brand-name { - font-size: 20px; + font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.3px; @@ -114,19 +114,25 @@ a { color: inherit; text-decoration: none; } } .brand-headline { - font-size: clamp(28px, 3.2vw, 42px); + font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; color: #fff; - line-height: 1.25; + line-height: 1.2; letter-spacing: -.5px; - margin-bottom: 16px; + margin-bottom: 20px; } .brand-desc { font-size: 15px; color: rgba(255,255,255,.55); - line-height: 1.7; - max-width: 380px; + line-height: 1.8; +} + +.brand-desc-nowrap { + font-size: 14px; + color: rgba(255,255,255,.55); + white-space: nowrap; + margin-top: 4px; } .brand-divider { @@ -166,16 +172,16 @@ a { color: inherit; text-decoration: none; } } .form-title { - font-size: clamp(22px, 2.8vw, 30px); + font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: var(--navy); letter-spacing: -.4px; line-height: 1.2; - margin-bottom: 8px; + margin-bottom: 10px; } .form-subtitle { - font-size: 14px; + font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 36px; @@ -541,16 +547,16 @@ a { color: inherit; text-decoration: none; } } .card-title { - font-size: 17px; + font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; line-height: 1.35; - margin-bottom: 8px; + margin-bottom: 10px; } .card-desc { - font-size: 13px; + font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; @@ -578,6 +584,107 @@ a { color: inherit; text-decoration: none; } .menu-card:hover .card-link { gap: 8px; } +/* ════════════════════════════════════════════════════ + 브랜드 패널 — 움직이는 도형 + ════════════════════════════════════════════════════ */ + +.brand-shapes { + position: absolute; + inset: 0; + overflow: hidden; + pointer-events: none; +} + +.shape { + position: absolute; + border-radius: 50%; +} + +/* 큰 원 테두리 — 우측 상단 */ +.shape-1 { + width: 380px; + height: 380px; + border: 1.5px solid rgba(30, 86, 160, .25); + border-radius: 50%; + top: -100px; + right: -80px; + animation: shapeFloat1 28s ease-in-out infinite; +} + +/* 중간 다이아몬드 — 좌측 하단 */ +.shape-2 { + width: 140px; + height: 140px; + background: rgba(30, 86, 160, .1); + border-radius: 24px; + bottom: 100px; + left: -50px; + animation: shapeFloat2 22s ease-in-out infinite; +} + +/* 작은 원 — 중앙 우측 */ +.shape-3 { + width: 72px; + height: 72px; + border: 1.5px solid rgba(255, 255, 255, .12); + border-radius: 50%; + top: 42%; + right: 14%; + animation: shapeFloat3 19s ease-in-out infinite; +} + +/* 큰 둥근 사각형 테두리 — 하단 중앙 */ +.shape-4 { + width: 220px; + height: 220px; + border: 1px solid rgba(30, 86, 160, .2); + border-radius: 40px; + bottom: -70px; + right: 18%; + animation: shapeFloat4 25s ease-in-out infinite; +} + +/* 아주 작은 원 — 상단 좌측 */ +.shape-5 { + width: 40px; + height: 40px; + background: rgba(30, 86, 160, .18); + border-radius: 50%; + top: 22%; + left: 18%; + animation: shapeFloat5 16s ease-in-out infinite; +} + +@keyframes shapeFloat1 { + 0%, 100% { transform: translate(0, 0); } + 25% { transform: translate(-18px, 28px); } + 50% { transform: translate(12px, 18px); } + 75% { transform: translate(-8px, -14px); } +} + +@keyframes shapeFloat2 { + 0%, 100% { transform: rotate(45deg) translate(0, 0); } + 33% { transform: rotate(62deg) translate(18px, -22px); } + 66% { transform: rotate(32deg) translate(-14px, 18px); } +} + +@keyframes shapeFloat3 { + 0%, 100% { transform: translate(0, 0); } + 50% { transform: translate(22px, -28px); } +} + +@keyframes shapeFloat4 { + 0%, 100% { transform: rotate(12deg) translate(0, 0); } + 40% { transform: rotate(22deg) translate(-18px, -12px); } + 80% { transform: rotate(4deg) translate(14px, 8px); } +} + +@keyframes shapeFloat5 { + 0%, 100% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(14px, -18px) scale(1.15); } + 66% { transform: translate(-10px, 12px) scale(0.9); } +} + /* ════════════════════════════════════════════════════ 반응형 ════════════════════════════════════════════════════ */ diff --git a/app/templates/denied.html b/app/templates/denied.html index ee53a66..402de8a 100644 --- a/app/templates/denied.html +++ b/app/templates/denied.html @@ -11,6 +11,15 @@ diff --git a/app/templates/login.html b/app/templates/login.html index e5d6abd..5664559 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -11,6 +11,15 @@
-

DBX Corp

+

DBX Corporation

업무 포털 로그인

회사 Google Workspace 계정으로 로그인하세요.
diff --git a/app/templates/main.html b/app/templates/main.html index 99fa4bd..18b931a 100644 --- a/app/templates/main.html +++ b/app/templates/main.html @@ -3,7 +3,7 @@ - 업무 포털 — DBX Corp + 업무 포털 — DBX Corporation @@ -21,7 +21,7 @@

- DBX Corp + DBX Corporation 업무 포털