From f88ff4579eb03ee482ace55fccd23c5fa705a88c Mon Sep 17 00:00:00 2001 From: "DESKTOP-KSVGT20\\shkim" Date: Sun, 10 May 2026 20:46:12 +0900 Subject: [PATCH] Redesign upload archive page --- src/public/hero.svg | 66 ++++++++++-- src/public/upload.css | 229 +++++++++++++++++++++++++++-------------- src/public/upload.html | 35 ++++--- 3 files changed, 228 insertions(+), 102 deletions(-) diff --git a/src/public/hero.svg b/src/public/hero.svg index 784b7cf..966fc90 100644 --- a/src/public/hero.svg +++ b/src/public/hero.svg @@ -1,9 +1,59 @@ - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/public/upload.css b/src/public/upload.css index 0770f4a..0b44fba 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -1,12 +1,13 @@ :root { color-scheme: light; - --ink: #16202a; - --muted: #667085; - --line: #d4dce7; - --bg: #f5f7fb; - --panel: #ffffff; - --accent: #0f766e; - --accent-dark: #115e59; + --ink: #070707; + --muted: #777777; + --paper: #ffffff; + --warm: #fff7ca; + --button: #c90000; + --button-dark: #9e0000; + --line: #d9d9d9; + --teal: #0d6a70; } * { @@ -16,132 +17,200 @@ body { margin: 0; min-height: 100vh; - background: var(--bg); + background: #1f1f1f; color: var(--ink); - font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + font-family: "Arial", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; } .upload-page { - width: min(920px, calc(100% - 28px)); - margin: 24px auto; + width: min(100%, 512px); + min-height: 100vh; + margin: 0 auto; + padding: 4px 9px 8px; + background: #1f1f1f; } -.hero { - min-height: 300px; +.archive-card { position: relative; overflow: hidden; - border-radius: 8px; - background: #20313b; -} - -.hero__media { - position: absolute; - inset: 0; + min-height: calc(100vh - 12px); + padding: clamp(250px, 52vh, 555px) 18px 28px; background: - linear-gradient(90deg, rgba(12, 20, 28, 0.78), rgba(12, 20, 28, 0.18)), - url("/assets/hero.svg"); - background-size: cover; - background-position: center; + linear-gradient(180deg, var(--warm) 0, #fffdf0 14%, var(--paper) 38%, var(--paper) 100%); + text-align: center; } -.hero__content { +.archive-card__glow { + position: absolute; + left: 0; + right: 0; + top: 430px; + z-index: 1; + height: 190px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff 70%); + pointer-events: none; +} + +.archive-card__art { + position: absolute; + left: 50%; + top: clamp(185px, 35vh, 330px); + z-index: 0; + width: min(84%, 390px); + height: auto; + transform: translate(-50%, -50%); + filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.08)); +} + +.archive-card__copy, +.upload-panel { position: relative; - width: min(620px, calc(100% - 36px)); - padding: 48px 28px; - color: white; + z-index: 2; } -.eyebrow { - margin: 0 0 8px; - font-size: 13px; - font-weight: 700; - text-transform: uppercase; +.archive-card__copy { + margin: 0 auto; } h1 { margin: 0; - font-size: 34px; - line-height: 1.18; + font-size: clamp(29px, 7vw, 36px); + line-height: 1.12; + font-weight: 900; + word-break: keep-all; } -.summary { - margin: 14px 0 0; - max-width: 520px; - color: rgba(255, 255, 255, 0.86); - font-size: 16px; +.archive-card__subtitle { + margin: 8px 0 0; + font-size: clamp(27px, 6.2vw, 34px); + line-height: 1.1; + font-weight: 900; } .upload-panel { - margin-top: 16px; - padding: 20px; - border: 1px solid var(--line); - border-radius: 8px; - background: var(--panel); + width: min(100%, 270px); + margin: 60px auto 0; } -.dropzone { +.upload-panel__today { + margin: 0 0 14px; + color: var(--muted); + font-size: clamp(27px, 6vw, 33px); + line-height: 1.12; + font-weight: 900; +} + +.file-picker { display: block; - padding: 24px; - border: 2px dashed var(--line); - border-radius: 8px; - background: #fbfcfe; + width: 100%; + margin-bottom: 8px; + padding: 11px 12px; + border: 1px solid var(--line); + background: rgba(255, 255, 255, 0.9); + color: #333333; cursor: pointer; } -.dropzone__title, -.dropzone__meta { +.file-picker__label, +.file-picker__meta { display: block; } -.dropzone__title { - font-size: 18px; - font-weight: 750; +.file-picker__label { + font-size: 15px; + font-weight: 800; } -.dropzone__meta { - margin-top: 6px; - color: var(--muted); - font-size: 14px; +.file-picker__meta { + margin-top: 3px; + color: #747474; + font-size: 12px; + line-height: 1.3; } input[type="file"] { - margin-top: 16px; width: 100%; + margin-top: 10px; + color: #3a3a3a; + font: inherit; + font-size: 12px; } -button { - margin-top: 16px; +.upload-button { + display: grid; + place-items: center; width: 100%; - border: 0; - border-radius: 6px; - padding: 13px 16px; - background: var(--accent); - color: white; + min-height: 99px; + border: 2px solid #280000; + border-radius: 0; + padding: 14px 18px; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 43%), + linear-gradient(180deg, var(--button) 0%, #ca0000 52%, var(--button-dark) 100%); + box-shadow: + inset 0 2px 0 rgba(255, 255, 255, 0.2), + inset 0 -16px 24px rgba(90, 0, 0, 0.26); + color: #ffffff; font: inherit; - font-weight: 750; + font-size: 26px; + line-height: 1.1; + font-weight: 900; + text-shadow: 0 2px 1px rgba(0, 0, 0, 0.25); cursor: pointer; } -button:hover { - background: var(--accent-dark); +.upload-button:hover { + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 43%), + linear-gradient(180deg, #dc0000 0%, #c60000 50%, #8e0000 100%); } -@media (max-width: 640px) { +.upload-button:focus-visible, +.file-picker:focus-within { + outline: 3px solid var(--teal); + outline-offset: 3px; +} + +.upload-panel__note { + margin: 10px auto 0; + color: #898989; + font-size: 12px; + line-height: 1.4; + word-break: keep-all; +} + +@media (min-width: 680px) { .upload-page { - width: calc(100% - 18px); - margin: 9px auto; + padding-top: 10px; + padding-bottom: 12px; } - .hero { - min-height: 260px; + .archive-card { + min-height: 1068px; + padding-top: 585px; } - .hero__content { - width: 100%; - padding: 36px 20px; + .archive-card__art { + top: 365px; } - h1 { - font-size: 28px; + .archive-card__glow { + top: 535px; + } +} + +@media (max-width: 420px) { + .upload-page { + padding-left: 6px; + padding-right: 6px; + } + + .archive-card { + padding-left: 14px; + padding-right: 14px; + } + + .upload-panel { + margin-top: 48px; } } diff --git a/src/public/upload.html b/src/public/upload.html index 6a6e33b..d33fab0 100644 --- a/src/public/upload.html +++ b/src/public/upload.html @@ -8,23 +8,30 @@
-
- -
-

Photo Request

-

{{title}}

-

이 링크 전체에서 총 {{maxMb}} MB까지 업로드할 수 있어.

-
-
+
+ + -
-
-