diff --git a/README.md b/README.md index 9166bd8..59dcb81 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,6 @@ The server cron runs this once per minute. - Uploads: `/volume2/AKA Drive/사진 받기` - Upload page template: `src/public/upload.html` - Upload page style: `src/public/upload.css` -- Upload page image: `src/public/hero-wedding.png` +- Upload page image: `src/public/wedding-poster.png` Each request creates its own folder under the upload directory. diff --git a/src/public/hero-wedding.png b/src/public/hero-wedding.png deleted file mode 100644 index 1609e3e..0000000 Binary files a/src/public/hero-wedding.png and /dev/null differ diff --git a/src/public/upload.css b/src/public/upload.css index f374f4d..22174ab 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -1,13 +1,10 @@ :root { color-scheme: light; - --ink: #070707; - --muted: #777777; + --ink: #4b4b4b; + --deep: #174f49; + --deep-dark: #103f3a; --paper: #ffffff; - --warm: #fff7ca; - --button: #c90000; - --button-dark: #9e0000; - --line: #d9d9d9; - --teal: #0d6a70; + --line: rgba(35, 35, 35, 0.14); } * { @@ -19,112 +16,118 @@ body { min-height: 100vh; background: #1f1f1f; color: var(--ink); - font-family: "Arial", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; + font-family: "Times New Roman", "Batang", "Apple SD Gothic Neo", serif; } .upload-page { - width: min(100%, 512px); + width: min(100%, 640px); min-height: 100vh; margin: 0 auto; - padding: 4px 9px 8px; + padding: 0 10px 16px; background: #1f1f1f; } -.archive-card { - position: relative; - overflow: hidden; - min-height: calc(100vh - 12px); - padding: clamp(250px, 52vh, 555px) 18px 28px; +.wedding-card { + min-height: calc(100vh - 16px); + padding: clamp(10px, 2vw, 18px) clamp(18px, 5vw, 36px) 34px; background: - linear-gradient(180deg, var(--warm) 0, #fffdf0 14%, var(--paper) 38%, var(--paper) 100%); + radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 34%), + linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%); text-align: center; } -.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 { +.poster { position: relative; - z-index: 2; + width: min(100%, 560px); + margin: 0 auto; } -.archive-card__copy { - margin: 0 auto; +.poster__image { + display: block; + width: 100%; + height: auto; + filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.08)); +} + +.poster__plate { + position: absolute; + left: 10.5%; + right: 10.5%; + bottom: 11.8%; + padding: clamp(18px, 4vw, 28px) 12px clamp(14px, 3vw, 22px); + background: rgba(255, 255, 255, 0.72); + border-top: 1px solid rgba(55, 55, 55, 0.12); + border-bottom: 1px solid rgba(55, 55, 55, 0.12); + backdrop-filter: blur(2px); } h1 { margin: 0; - font-size: clamp(29px, 7vw, 36px); - line-height: 1.12; - font-weight: 900; + color: #565656; + font-size: clamp(32px, 7.5vw, 50px); + line-height: 1.1; + font-weight: 400; + letter-spacing: 0.12em; word-break: keep-all; } -.archive-card__subtitle { - margin: 8px 0 0; - font-size: clamp(27px, 6.2vw, 34px); - line-height: 1.1; - font-weight: 900; +.poster__date, +.poster__subtitle { + margin: 0; + color: #555555; + letter-spacing: 0.24em; + white-space: nowrap; +} + +.poster__date { + margin-top: clamp(12px, 2.8vw, 20px); + font-size: clamp(16px, 3.3vw, 24px); + font-weight: 700; +} + +.poster__subtitle { + margin-top: clamp(14px, 3vw, 22px); + font-size: clamp(15px, 3.3vw, 24px); + font-weight: 700; } .upload-panel { - width: min(100%, 270px); - margin: 60px auto 0; + width: min(100%, 360px); + margin: clamp(18px, 4vw, 30px) auto 0; } .upload-panel__today { - margin: 0 0 14px; - color: var(--muted); - font-size: clamp(27px, 6vw, 33px); - line-height: 1.12; - font-weight: 900; + margin: 0 0 clamp(20px, 4vw, 30px); + color: #4f4f4f; + font-size: clamp(24px, 5vw, 38px); + line-height: 1.15; + font-weight: 400; + letter-spacing: 0.1em; + white-space: nowrap; } .file-picker { display: block; width: 100%; - margin-bottom: 8px; - padding: 11px 12px; + margin-bottom: 10px; + padding: 10px 12px 12px; border: 1px solid var(--line); - background: rgba(255, 255, 255, 0.9); + background: rgba(255, 255, 255, 0.88); color: #333333; - cursor: pointer; } .file-picker__label { display: block; -} - -.file-picker__label { - font-size: 15px; - font-weight: 800; + margin-bottom: 7px; + font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; + font-size: 14px; + font-weight: 700; } input[type="file"] { width: 100%; - margin-top: 10px; - color: #3a3a3a; - font: inherit; + color: #444444; + font-family: "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; font-size: 12px; } @@ -132,77 +135,60 @@ input[type="file"] { display: grid; place-items: center; width: 100%; - min-height: 99px; - border: 2px solid #280000; - border-radius: 0; - padding: 14px 18px; + min-height: 76px; + border: 0; + border-radius: 8px; + padding: 16px 22px; 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%); + linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.06)), + linear-gradient(180deg, #1d625b 0%, var(--deep) 100%); box-shadow: - inset 0 2px 0 rgba(255, 255, 255, 0.2), - inset 0 -16px 24px rgba(90, 0, 0, 0.26); + 0 10px 20px rgba(17, 72, 66, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.18); color: #ffffff; font: inherit; - font-size: 26px; + font-size: clamp(27px, 5.4vw, 38px); line-height: 1.1; - font-weight: 900; - text-shadow: 0 2px 1px rgba(0, 0, 0, 0.25); + font-weight: 400; + letter-spacing: 0.06em; cursor: pointer; } .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%); + linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 28% 72%, rgba(255, 255, 255, 0.08)), + linear-gradient(180deg, #216f67 0%, var(--deep-dark) 100%); } .upload-button:focus-visible, .file-picker:focus-within { - outline: 3px solid var(--teal); + outline: 3px solid #89aaa3; 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) { +@media (max-width: 430px) { .upload-page { - padding-top: 10px; - padding-bottom: 12px; + padding-left: 7px; + padding-right: 7px; } - .archive-card { - min-height: 1068px; - padding-top: 585px; - } - - .archive-card__art { - top: 365px; - } - - .archive-card__glow { - top: 535px; - } -} - -@media (max-width: 420px) { - .upload-page { - padding-left: 6px; - padding-right: 6px; - } - - .archive-card { + .wedding-card { padding-left: 14px; padding-right: 14px; + padding-bottom: 28px; + } + + .poster__plate { + left: 9%; + right: 9%; + bottom: 11.2%; } .upload-panel { - margin-top: 48px; + width: min(100%, 320px); + } + + .upload-panel__today { + font-size: clamp(23px, 7vw, 30px); } } diff --git a/src/public/upload.html b/src/public/upload.html index 51e20a4..9551d9b 100644 --- a/src/public/upload.html +++ b/src/public/upload.html @@ -8,17 +8,19 @@
-
- - +
+
+ -
-

{{title}}

-

WEDDING ARCHIVE

+
+

{{title}}

+

2026.05.24 SUN

+

OUR WEDDING ARCHIVE

+
-

당신이 본 오늘

+

오늘의 순간

- -

총 {{maxMb}} MB까지 · {{allowedExts}}

diff --git a/src/public/wedding-poster.png b/src/public/wedding-poster.png new file mode 100644 index 0000000..c79dfde Binary files /dev/null and b/src/public/wedding-poster.png differ