diff --git a/README.md b/README.md index a68f3fa..5d4ab87 100644 --- a/README.md +++ b/README.md @@ -35,5 +35,6 @@ The server cron runs this once per minute. - Upload page template: `src/public/upload.html` - Upload page style: `src/public/upload.css` - Upload page images: `src/public/wedding-gate-bg.png`, `src/public/wedding-couple.png` +- Optional thank-you illustration: `src/public/wedding-thanks-couple.png` Each request creates its own folder under the upload directory. diff --git a/src/public/upload.css b/src/public/upload.css index 221cfbd..7763f84 100644 --- a/src/public/upload.css +++ b/src/public/upload.css @@ -44,9 +44,9 @@ body { .poster { position: relative; - width: min(100%, 620px); + width: min(100%, 900px); margin: 0 auto; - aspect-ratio: 4 / 5.22; + aspect-ratio: 3 / 2; overflow: hidden; padding: 0; } @@ -63,51 +63,44 @@ body { pointer-events: none; } -.poster__bg, +.poster__gate, .poster__portrait, .poster__couple { position: relative; display: block; } -.poster__bg { +.poster__gate { position: absolute; inset: 0 50% 0 auto; - z-index: 1; - width: 118%; + z-index: 3; + width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transform: translateX(50%); - opacity: 0.72; - filter: saturate(0.8) contrast(0.86) brightness(1.08) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05)); - -webkit-mask-image: - linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 4%, #000 13%, #000 87%, rgba(0, 0, 0, 0.48) 96%, transparent 100%), - linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); - -webkit-mask-composite: source-in; - mask-image: - linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.48) 4%, #000 13%, #000 87%, rgba(0, 0, 0, 0.48) 96%, transparent 100%), - linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); - mask-composite: intersect; + opacity: 1; + filter: saturate(0.88) contrast(0.92) brightness(1.04) drop-shadow(0 18px 30px rgba(88, 88, 80, 0.05)); } .poster__portrait { position: absolute; z-index: 2; - left: 21.8%; - right: 21.8%; - top: 15.5%; - bottom: 26.7%; + left: 34%; + right: 34%; + top: 13%; + bottom: 16.5%; overflow: hidden; + background: #ffffff; border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px; } .poster__couple { position: absolute; - left: 50%; - top: -7.5%; - width: 122%; + left: 51.5%; + top: 13%; + width: 148%; height: auto; max-width: none; transform: translateX(-50%); @@ -116,7 +109,7 @@ body { .poster__plate { position: absolute; - z-index: 3; + z-index: 5; left: 8.5%; right: 8.5%; bottom: 10.5%; @@ -403,7 +396,7 @@ h1 { } } -@media (max-width: 430px) { +@media (max-width: 760px) { .upload-page { background: radial-gradient(ellipse at 50% 18%, rgba(214, 214, 208, 0.26), transparent 58%), @@ -430,27 +423,22 @@ h1 { filter: blur(18px); } - .poster__bg { - width: 132%; - opacity: 0.72; - -webkit-mask-image: - linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.5) 98%, transparent 100%), - linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); - mask-image: - linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 2%, #000 8%, #000 92%, rgba(0, 0, 0, 0.5) 98%, transparent 100%), - linear-gradient(180deg, #000 0%, #000 84%, transparent 99%); + .poster__gate { + width: 212%; + opacity: 1; } .poster__portrait { - left: 21.5%; - right: 21.5%; - top: 15.8%; - bottom: 27%; + left: 18%; + right: 18%; + top: 13%; + bottom: 24.8%; } .poster__couple { - top: -7%; - width: 124%; + top: 14%; + left: 51.5%; + width: 145%; } .poster__plate { diff --git a/src/public/upload.html b/src/public/upload.html index abcbf52..180f49a 100644 --- a/src/public/upload.html +++ b/src/public/upload.html @@ -10,10 +10,10 @@
- +

{{title}}

diff --git a/src/public/wedding-gate-bg.png b/src/public/wedding-gate-bg.png index 4cc30d1..5fe1ce1 100644 Binary files a/src/public/wedding-gate-bg.png and b/src/public/wedding-gate-bg.png differ diff --git a/src/public/wedding-thanks-couple.png b/src/public/wedding-thanks-couple.png new file mode 100644 index 0000000..85d2b73 Binary files /dev/null and b/src/public/wedding-thanks-couple.png differ diff --git a/src/server.js b/src/server.js index f86ee97..0b978c5 100644 --- a/src/server.js +++ b/src/server.js @@ -168,10 +168,10 @@ function uploadResultPage(request, { heading, message, isError = false }) {
- +

${title}

2026.05.24 SUN