Mina Choi
872d00f3c4
인앱 미니 블로그(AI 자동 포스트, 이메일 승인)·이용후기(즉시 게시)·예약 요청(메일 발송)을
새로 붙였고, 병행해서 /s/stay 목업과 발행 사이트 공통 렌더러(UnitsSection·FestivalSection·
LocalGuideSection·WeatherSection 등)의 UI 버그를 다수 고쳤다. 범위가 넓지만 한 주 분량
작업을 한 커밋으로 묶어 달라는 요청에 따라 하나로 묶는다.
- solution/backend: post/review/booking_request 라우터·서비스·CRUD 추가, 스케줄러에
블로그 초안 생성(새벽 4:10)·발송(아침 9:00) cron 등록, 마이그레이션 4건 추가
- solution/frontend, admin/frontend: 생성된 API 클라이언트 갱신, 리뷰 모더레이션·
블로그 글 관리 페이지 추가
- solution/site/src: 객실 상세+실시간예약(날짜선택·연락처 폼)을 모달로 통합, 축제·
주변안내 카드 클릭 시 모달 전환, 후기 목록 카드 UI, 공용 Modal 컴포넌트 신설,
날씨 문구 동기화 버그 수정(하늘줄·기온줄 한 타이머로), 시설·편의 가능/불가 아이콘
색상 하이라이트, 헤더 메뉴 순서를 실제 섹션 순서에 맞춤, 하단 탭바 아이콘 정렬 버그
(line-height) 수정, 추천일정 점선 연결+데스크톱 자동펼침/모바일 축소, 채널 라벨에
크롤링 원문("NOL")이 새던 것을 bookingLabel() 로 교체
- solution/site/scripts/mockup: /s/stay 패치 스크립트·주입 CSS·JS 다수 수정, stay4~6
빌드 스크립트 추가(다른 세션 작업)
테스트: solution/site `npx tsc --noEmit` 통과, `npx vitest run` 93 passed,
solution/backend `pytest tests/test_booking_request.py` 6 passed(로컬 DB 대상).
예약 요청 메일은 실제 발송까지 확인(place 66894a1b 소유자 이메일 누락을 DB에서 보정).
1066 lines
50 KiB
Python
1066 lines
50 KiB
Python
import html
|
|
import json
|
|
import re
|
|
import shutil
|
|
from pathlib import Path
|
|
from urllib.parse import quote
|
|
|
|
HERE = Path(__file__).parent
|
|
TPL = HERE / "tpl-story"
|
|
OUT = HERE / "build5"
|
|
PAYLOAD = json.loads((HERE / "stay3-payload.json").read_text())
|
|
|
|
ORIGIN = "https://web4ai.o2osolution.ai"
|
|
BASE = "/s/stay5"
|
|
|
|
place = PAYLOAD["place"]
|
|
narrative = PAYLOAD["narrative"]
|
|
units = PAYLOAD["units"]
|
|
media = PAYLOAD["media"]
|
|
facts = {f["key"]: f for f in PAYLOAD["facts"]}
|
|
faqs = PAYLOAD["faqs"]
|
|
links = PAYLOAD["links"]
|
|
local = PAYLOAD["local"]
|
|
sections = {s["id"]: (json.loads(s["data"]) if isinstance(s.get("data"), str) else None)
|
|
for s in PAYLOAD["theme"]["sections"]}
|
|
|
|
NAME = place["name"]
|
|
PHONE = place["phone"]
|
|
PLACE_ID = PAYLOAD["site"]["placeId"]
|
|
BOOK_URL = next((l["url"] for l in links if l.get("channel") == 7), "#")
|
|
INSTA_URL = next((l["url"] for l in links if l.get("channel") == 4), None)
|
|
ABOUT = narrative["about"]
|
|
SEASON_ORDER = ["봄", "여름", "가을", "겨울"]
|
|
|
|
|
|
def e(text):
|
|
return html.escape(str(text or ""), quote=True)
|
|
|
|
|
|
def uf(unit, key, default=""):
|
|
for f in unit["facts"]:
|
|
if f["key"] == key:
|
|
value, unit_text = f["value"], (f.get("unit") or "")
|
|
joiner = "" if unit_text in ("명", "원") else " "
|
|
return value + (joiner + unit_text if unit_text else "")
|
|
return default
|
|
|
|
|
|
def won(raw):
|
|
digits = re.sub(r"[^0-9]", "", raw or "")
|
|
return f"{int(digits):,}원" if digits else ""
|
|
|
|
|
|
def unit_title(unit):
|
|
return unit["name"].split("(")[0].strip()
|
|
|
|
|
|
def unit_sub(unit):
|
|
raw = unit["name"]
|
|
return raw[raw.find("(") + 1:raw.rfind(")")].strip() if "(" in raw else ""
|
|
|
|
|
|
def pics(category=None, skip=0, limit=None):
|
|
rows = [m for m in media if category is None or m.get("category") == category][skip:]
|
|
return rows[:limit] if limit else rows
|
|
|
|
|
|
def pick(category, fallback_index):
|
|
rows = pics(category)
|
|
return rows[0] if rows else media[fallback_index]
|
|
|
|
|
|
def naver(query):
|
|
return f"https://search.naver.com/search.naver?query={quote(query)}"
|
|
|
|
|
|
def yt_id(url):
|
|
return url.rstrip("/").split("/")[-1].split("?")[0]
|
|
|
|
|
|
PRICE_FROM = won(uf(units[0], "weekday_price"))
|
|
|
|
NAV = [("", "소개"), ("gunsan", "군산"), ("booking", "예약·후기")]
|
|
|
|
HEAD = """<!DOCTYPE HTML>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<title>{title}</title>
|
|
<meta name="description" content="{desc}" />
|
|
<link rel="canonical" href="{canonical}" />
|
|
<meta property="og:title" content="{title}" />
|
|
<meta property="og:description" content="{desc}" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="{canonical}" />
|
|
<meta property="og:image" content="{origin}{og}" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Gugi&display=swap" />
|
|
<link rel="stylesheet" href="{base}/assets/css/main.css" />
|
|
<link rel="stylesheet" href="{base}/assets/css/meomoom.css" />
|
|
<noscript><link rel="stylesheet" href="{base}/assets/css/noscript.css" /></noscript>
|
|
</head>
|
|
<body class="is-preload">
|
|
<header id="topbar">
|
|
<a class="brand" href="{base}">{name}</a>
|
|
<nav>{nav}</nav>
|
|
</header>
|
|
<div id="wrapper" class="divided">
|
|
"""
|
|
|
|
FOOT = """</div>
|
|
<div id="bookbar">
|
|
<span class="price"><b>{price_from}</b><small>주중 1박 기준 · 2인</small></span>
|
|
<a class="button primary" href="{book}" target="_blank" rel="noopener noreferrer">예약하기</a>
|
|
</div>
|
|
<script src="{base}/assets/js/jquery.min.js"></script>
|
|
<script src="{base}/assets/js/jquery.scrollex.min.js"></script>
|
|
<script src="{base}/assets/js/jquery.scrolly.min.js"></script>
|
|
<script src="{base}/assets/js/browser.min.js"></script>
|
|
<script src="{base}/assets/js/breakpoints.min.js"></script>
|
|
<script src="{base}/assets/js/util.js"></script>
|
|
<script src="{base}/assets/js/main.js"></script>
|
|
{extra}
|
|
</body>
|
|
</html>
|
|
"""
|
|
|
|
|
|
def nav_html(current):
|
|
out = ""
|
|
for slug, label in NAV:
|
|
href = f"{BASE}/{slug}" if slug else BASE
|
|
klass = ' class="on"' if slug == current else ""
|
|
out += f'<a href="{href}"{klass}>{label}</a>'
|
|
return out
|
|
|
|
|
|
def next_cards(cards):
|
|
items = "".join(
|
|
f'<a class="nextcard" href="{href}">'
|
|
f'<img src="{img}" alt="" loading="lazy" />'
|
|
f'<span><small>{kicker}</small><b>{label}</b></span></a>'
|
|
for kicker, label, href, img in cards)
|
|
return f'<section class="wrapper style1 align-center pad-s"><div class="inner"><div class="nextnav">{items}</div></div></section>'
|
|
|
|
|
|
def footer_html():
|
|
insta = (f'<li><a href="{e(INSTA_URL)}" class="button fit" target="_blank" '
|
|
f'rel="noopener noreferrer">인스타그램</a></li>') if INSTA_URL else ""
|
|
return f"""
|
|
<footer class="wrapper style1 invert align-center" id="footer">
|
|
<div class="inner">
|
|
<h2 class="serif">{e(NAME)}</h2>
|
|
<p class="addr">{e(place['roadAddress'])}<br /><a href="tel:{PHONE}">{PHONE}</a></p>
|
|
<ul class="actions stacked">
|
|
<li><a href="{e(BOOK_URL)}" class="button primary fit" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
|
|
<li><a href="tel:{PHONE}" class="button fit ghost">전화 걸기</a></li>
|
|
{insta}
|
|
</ul>
|
|
<p class="tiny">상호 {e(NAME)} · 전북 군산시 절골길 18 · 최종 업데이트 2026-09-17<br />
|
|
레이아웃은 <a href="https://html5up.net/story">Story by HTML5 UP</a>(CC BY 3.0)를 고쳐 썼습니다.<br />
|
|
AI O2O의 Web4Ai로 만든 시안입니다.</p>
|
|
</div>
|
|
</footer>
|
|
"""
|
|
|
|
|
|
def page(slug, title, desc, og, body, extra=""):
|
|
canonical = f"{ORIGIN}{BASE}/{slug}" if slug else f"{ORIGIN}{BASE}"
|
|
head = HEAD.format(title=e(title), desc=e(desc), canonical=canonical, origin=ORIGIN,
|
|
og=og, base=BASE, name=e(NAME), nav=nav_html(slug))
|
|
foot = FOOT.format(base=BASE, book=e(BOOK_URL), price_from=PRICE_FROM, extra=extra)
|
|
target = (OUT / slug / "index.html") if slug else (OUT / "index.html")
|
|
target.parent.mkdir(parents=True, exist_ok=True)
|
|
target.write_text(head + body + footer_html() + foot)
|
|
return target
|
|
|
|
|
|
def cover(image, kicker, heading, lead, actions="", height="tall", invert_nav=True):
|
|
action_html = f'<ul class="actions stacked">{actions}</ul>' if actions else ""
|
|
scroll = '<span class="scrollhint" aria-hidden="true"></span>' if height == "tall" else ""
|
|
return f"""
|
|
<section class="cover {height}">
|
|
<img class="bg" src="{image['url']}" alt="{e(image.get('alt') or heading)}" />
|
|
<div class="veil"></div>
|
|
<div class="inner">
|
|
<p class="kicker">{kicker}</p>
|
|
<h1 class="serif">{heading}</h1>
|
|
<p class="lead">{lead}</p>
|
|
{action_html}
|
|
</div>
|
|
{scroll}
|
|
</section>
|
|
"""
|
|
|
|
|
|
def chapter_cover(image, heading, paragraphs):
|
|
body = "".join(f"<p>{p}</p>" for p in paragraphs)
|
|
return f"""
|
|
<section class="cover mid chapter">
|
|
<img class="bg" src="{image['url']}" alt="{e(image.get('alt') or heading)}" loading="lazy" />
|
|
<div class="veil"></div>
|
|
<div class="inner">
|
|
<h2 class="serif">{heading}</h2>
|
|
{body}
|
|
</div>
|
|
</section>
|
|
"""
|
|
|
|
|
|
def block(heading, kicker="", lead="", inner="", tone="", anchor="", actions=""):
|
|
klass = "wrapper style1 align-center"
|
|
if tone:
|
|
klass += f" {tone}"
|
|
head = ""
|
|
if kicker:
|
|
head += f'<p class="kicker">{kicker}</p>'
|
|
if heading:
|
|
head += f'<h2 class="serif">{heading}</h2>'
|
|
if lead:
|
|
head += f'<p class="sectionlead">{lead}</p>'
|
|
act = f'<ul class="actions">{actions}</ul>' if actions else ""
|
|
return f"""
|
|
<section class="{klass}"{f' id="{anchor}"' if anchor else ''}>
|
|
<div class="inner">{head}{inner}{act}</div>
|
|
</section>
|
|
"""
|
|
|
|
|
|
def tiles(rows, meta_key, badge_key=None, href_fn=None, columns="two"):
|
|
cells = ""
|
|
for row in rows:
|
|
if not row.get("imageUrl"):
|
|
continue
|
|
href = href_fn(row) if href_fn else naver(row["searchQuery"])
|
|
badge = f'<i>{e(row.get(badge_key))}</i>' if badge_key and row.get(badge_key) else ""
|
|
meta = e(row.get(meta_key) or "")
|
|
desc = e((row.get("description") or "").strip())
|
|
cells += (
|
|
f'<a class="tile" href="{e(href)}" target="_blank" rel="noopener noreferrer nofollow">'
|
|
f'<span class="shot"><img src="{row["imageUrl"]}" alt="{e(row["name"])}" loading="lazy" />'
|
|
f'{badge}<b>{e(row["name"])}</b></span>'
|
|
f'<span class="meta">{meta}</span>'
|
|
f'<span class="desc">{desc}</span></a>')
|
|
return f'<div class="tiles {columns}">{cells}</div>'
|
|
|
|
|
|
def spec_grid(pairs):
|
|
rows = "".join(f"<div><dt>{k}</dt><dd>{v}</dd></div>" for k, v in pairs if str(v).strip())
|
|
return f'<dl class="specs">{rows}</dl>'
|
|
|
|
|
|
def faq_list(rows):
|
|
return '<div class="faq">' + "".join(
|
|
f"<details><summary>{e(f['question'])}</summary><p>{e(f['answer'])}</p></details>"
|
|
for f in rows) + "</div>"
|
|
|
|
|
|
def gallery_grid(rows):
|
|
cells = "".join(
|
|
f'<article><a href="{m["url"]}" class="image"><img src="{m["url"]}" alt="{e(m["alt"])}" loading="lazy" /></a>'
|
|
f'<div class="caption"><p>{e(m.get("category") or "")}</p></div></article>' for m in rows)
|
|
return f'<div class="gallery style2 medium lightbox onscroll-fade-in">{cells}</div>'
|
|
|
|
|
|
def foot_note(text):
|
|
return f'<p class="note">{text}</p>'
|
|
|
|
|
|
def build_home():
|
|
hero = media[0]
|
|
body = cover(hero, e(place["addressLocality"]), e(NAME), e(narrative["tagline"]),
|
|
'<li><a href="#about" class="button large ghost">스테이,머뭄 소개</a></li>')
|
|
|
|
body += chapter_cover(pick("외관", 3), "스테이,머뭄 소개", [e(ABOUT[0])])
|
|
body += block("", inner=(f'<p class="prose">{e(ABOUT[1])}</p>'
|
|
f'<img class="wideshot" src="{pick("카페", 7)["url"]}" '
|
|
f'alt="{e(pick("카페", 7)["alt"])}" loading="lazy" />'
|
|
f'<p class="prose">{e(ABOUT[2])}</p>'),
|
|
tone="ivory", anchor="about")
|
|
|
|
shots = [pics("거실", skip=1)[0] if len(pics("거실")) > 1 else media[1],
|
|
pics("침실")[0] if pics("침실") else media[4]]
|
|
cards = ""
|
|
for i, u in enumerate(units):
|
|
anchor = "a" if i == 0 else "b"
|
|
chips = [f"기준 {uf(u, 'standard_capacity')}", f"최대 {uf(u, 'max_capacity')}",
|
|
uf(u, "bed_type"), uf(u, "room_size")]
|
|
chip_html = "".join(f"<li>{e(c)}</li>" for c in chips if c.strip())
|
|
cards += f"""
|
|
<article class="unit">
|
|
<a class="shot" href="{BASE}/booking#{anchor}">
|
|
<img src="{shots[i]['url']}" alt="{e(shots[i]['alt'])}" loading="lazy" />
|
|
</a>
|
|
<div class="body">
|
|
<h3>{e(unit_title(u))}</h3>
|
|
<p class="sub">{e(unit_sub(u))}</p>
|
|
<ul class="chips">{chip_html}</ul>
|
|
<p class="price">주중 1박 <b>{e(won(uf(u, 'weekday_price')))}</b></p>
|
|
<a class="button fit" href="{BASE}/booking#{anchor}">{e(unit_title(u))} 보기</a>
|
|
</div>
|
|
</article>"""
|
|
body += block("객실 안내", inner=f'<div class="units">{cards}</div>', anchor="units",
|
|
actions=f'<li><a class="button primary" href="{BASE}/booking">이용안내 및 예약</a></li>')
|
|
|
|
head_shots, rest_shots = media[:12], media[12:]
|
|
gal = gallery_grid(head_shots)
|
|
if rest_shots:
|
|
gal += (f'<details class="more"><summary>나머지 {len(rest_shots)}장 보기</summary>'
|
|
f'{gallery_grid(rest_shots)}</details>')
|
|
body += block("사진 갤러리", inner=gal, tone="ivory", anchor="gallery")
|
|
|
|
vids = "".join(
|
|
f'<a class="vid" href="{e(v["url"])}" target="_blank" rel="noopener noreferrer">'
|
|
f'<img src="https://img.youtube.com/vi/{yt_id(v["url"])}/hqdefault.jpg" alt="{e(v["caption"])}" loading="lazy" />'
|
|
f'<span class="play" aria-hidden="true"></span><b>{e(v["caption"])}</b></a>'
|
|
for v in sections["video"]["items"])
|
|
body += block("ADO2 영상 보기", lead=e(sections["video"]["subtitle"]),
|
|
inner=f'<div class="vids">{vids}</div>', anchor="video")
|
|
|
|
weather = local["weather"]
|
|
note_sets = weather.get("noteSets") or {}
|
|
cond = weather.get("condition")
|
|
note = (note_sets.get(cond) or [weather["notes"].get(cond, "")])[0] if note_sets \
|
|
else weather["notes"].get(cond, "")
|
|
body += block("오늘의 날씨",
|
|
inner=f'<p class="weather"><span class="tag">{e(cond)} '
|
|
f'{weather["temperature"]}°</span>{e(note)}</p>',
|
|
tone="ivory", anchor="weather")
|
|
|
|
lat, lng = place["latitude"], place["longitude"]
|
|
body += block("오시는 길", lead="주소와 주요 거점까지의 이동 시간을 안내합니다.",
|
|
inner=f"""
|
|
<p class="addr big">{e(place['roadAddress'])}</p>
|
|
<iframe class="mapframe" loading="lazy" title="{e(NAME)} 위치"
|
|
src="https://www.openstreetmap.org/export/embed.html?bbox={lng - 0.004}%2C{lat - 0.002}%2C{lng + 0.004}%2C{lat + 0.002}&layer=mapnik&marker={lat}%2C{lng}"></iframe>""",
|
|
anchor="location",
|
|
actions=f'<li><a class="button primary" href="https://map.naver.com/p/search/{e(place["roadAddress"])}" target="_blank" rel="noopener noreferrer">길찾기</a></li>')
|
|
|
|
body += next_cards([
|
|
("군산", "군산 이야기", f"{BASE}/gunsan", local["attractions"][0]["imageUrl"]),
|
|
("예약", "이용안내 및 예약", f"{BASE}/booking", media[2]["url"]),
|
|
])
|
|
return page("", f"{NAME} · 전북 군산시 독채 펜션", narrative["summary"], media[0]["url"], body)
|
|
|
|
|
|
def build_gunsan():
|
|
spots = local["attractions"]
|
|
rest = local["restaurants"]
|
|
fests = sorted(local["festivals"], key=lambda f: SEASON_ORDER.index(f["season"])
|
|
if f.get("season") in SEASON_ORDER else 9)
|
|
itin = sections["itinerary"]["items"]
|
|
reading = sections["reading"]["items"]
|
|
songs = sections["songs"]["items"]
|
|
people = sections["people"]["items"]
|
|
chron = sections["chronicle"]["items"]
|
|
|
|
body = cover({"url": spots[0]["imageUrl"], "alt": spots[0]["name"]},
|
|
e(place["addressLocality"]), "군산 이야기",
|
|
"이 도시를 네 갈래로 봅니다. 하나씩 골라 보세요.", height="mid")
|
|
|
|
body += block("주변 안내", lead="군산시 지역의 맛집 · 명소 안내입니다.",
|
|
inner=tiles(spots[:8], "distanceText") +
|
|
f'<details class="more"><summary>명소 {len(spots) - 8}곳 · 맛집 {len(rest)}곳 더 보기</summary>'
|
|
f'{tiles(spots[8:], "distanceText")}{tiles(rest, "distanceText")}</details>' +
|
|
foot_note("도보 시간은 숙소에서 잰 직선거리를 분속 80m 로 환산한 값입니다. "
|
|
"실제로 걷는 길은 이보다 깁니다."),
|
|
anchor="guide")
|
|
|
|
body += block("계절별 축제", lead="군산시의 축제와 행사를 계절로 묶었습니다.",
|
|
inner=tiles(fests[:8], "period", badge_key="season") +
|
|
f'<details class="more"><summary>나머지 {len(fests) - 8}개 보기</summary>'
|
|
f'{tiles(fests[8:], "period", badge_key="season")}</details>' +
|
|
foot_note("한국관광공사 TourAPI 기준. 일정은 주최 측 사정으로 바뀔 수 있습니다."),
|
|
tone="ivory", anchor="festival")
|
|
|
|
plans = ""
|
|
for i in itin:
|
|
days = "".join(
|
|
f'<div class="day"><h4>{e(d["label"])}<small>{e(d["startTime"])} 출발</small></h4><ol>'
|
|
+ "".join(f'<li><b>{e(s["name"])}</b>'
|
|
+ (f'<span>{e(s["note"])}</span>' if s.get("note") else "") + "</li>"
|
|
for s in d["stops"]) + "</ol></div>"
|
|
for d in i["days"])
|
|
plans += (f'<details><summary><b>{e(i["name"])}</b>'
|
|
f'<span>{e(i["duration"])} · {e(i["audience"])}</span></summary>'
|
|
f'<p class="why">{e(i["why"])}</p>{days}</details>')
|
|
body += block("추천 일정", lead=e(sections["itinerary"]["subtitle"]),
|
|
inner=f'<div class="faq plans">{plans}</div>', anchor="itinerary")
|
|
|
|
def lp(index, song):
|
|
side = "A면" if index < len(songs) / 2 else "B면"
|
|
return (f'<a class="lp" href="{e(song["listenUrl"])}" target="_blank" '
|
|
f'rel="noopener noreferrer nofollow" style="--label:{e(song.get("labelColor") or "#2f6b4f")}">'
|
|
f'<span class="disc" aria-hidden="true"><i></i></span>'
|
|
f'<span class="txt"><small>{side} · {index + 1} / {len(songs)}</small>'
|
|
f'<b>{e(song["title"])}</b><span class="by">{e(song["artist"])}</span>'
|
|
f'<em>{e(song["story"])}</em></span></a>')
|
|
body += block("가요 다방", lead=e(sections["songs"]["subtitle"]),
|
|
inner=f'<div class="lps">{"".join(lp(n, s) for n, s in enumerate(songs[:6]))}</div>'
|
|
f'<details class="more"><summary>나머지 {len(songs) - 6}곡 보기</summary>'
|
|
f'<div class="lps">{"".join(lp(n + 6, s) for n, s in enumerate(songs[6:]))}</div></details>',
|
|
tone="invert", anchor="songs")
|
|
|
|
def person(row):
|
|
shot = (f'<img src="{row["imageUrl"]}" alt="{e(row["name"])}" loading="lazy" />'
|
|
if row.get("imageUrl") else '<span class="noface" aria-hidden="true"></span>')
|
|
src = (f'<a href="{e(row["source"]["url"])}" target="_blank" rel="noopener noreferrer nofollow">'
|
|
f'{e(row["source"]["name"])}</a>') if row.get("source") else ""
|
|
return (f'<article class="person"><span class="face">{shot}</span>'
|
|
f'<h4>{e(row["name"])}</h4>'
|
|
f'<p class="role">{e(row.get("role"))}{" · " + e(row["years"]) if row.get("years") else ""}</p>'
|
|
f'<p class="one">{e(row.get("oneLine"))}</p>{src}</article>')
|
|
body += block("인물 열전", lead=e(sections["people"]["subtitle"]),
|
|
inner=f'<div class="people">{"".join(person(r) for r in people[:6])}</div>'
|
|
f'<details class="more"><summary>나머지 {len(people) - 6}명 보기</summary>'
|
|
f'<div class="people">{"".join(person(r) for r in people[6:])}</div></details>',
|
|
tone="ivory", anchor="people")
|
|
|
|
def year_row(row):
|
|
shot = (f'<img src="{row["imageUrl"]}" alt="{e(row["title"])}" loading="lazy" />'
|
|
if row.get("imageUrl") else "")
|
|
where = f'<span class="where">{e(row["place"])}</span>' if row.get("place") else ""
|
|
return (f'<li class="{"turn" if row.get("turning") else ""}">'
|
|
f'<span class="yr">{row["year"]}</span>'
|
|
f'<div class="what"><h4>{e(row["title"])}</h4>'
|
|
f'<p>{e(row["summary"])}</p>{where}</div>'
|
|
f'<span class="pic">{shot}</span></li>')
|
|
body += block("시간의 골목", lead=e(sections["chronicle"]["subtitle"]),
|
|
inner=f'<ol class="chron">{"".join(year_row(r) for r in chron)}</ol>',
|
|
anchor="chronicle")
|
|
|
|
reads = "".join(
|
|
f'<article class="read"><span class="no">{n + 1:02d}</span>'
|
|
f'<h4 class="serif">{e(r["title"])}</h4>'
|
|
f'{f"<p class=\"yr\">{r['year']}</p>" if r.get("year") else ""}'
|
|
f'<p class="txt">{e(r["body"])}</p>'
|
|
f'<a href="{e(r["source"]["url"])}" target="_blank" rel="noopener noreferrer nofollow">'
|
|
f'{e(r["source"]["name"])}</a></article>' for n, r in enumerate(reading))
|
|
body += block("군산 읽기", lead=e(sections["reading"]["subtitle"]),
|
|
inner=f'<div class="reads">{reads}</div>', tone="ivory", anchor="reading")
|
|
|
|
body += next_cards([
|
|
("소개", "스테이,머뭄 소개", BASE, media[0]["url"]),
|
|
("예약", "이용안내 및 예약", f"{BASE}/booking", media[2]["url"]),
|
|
])
|
|
return page("gunsan", f"군산 이야기 · {NAME}",
|
|
"군산시 지역의 맛집 · 명소, 계절별 축제, 추천 일정, 군산을 노래한 곡과 쓴 글.",
|
|
spots[0]["imageUrl"], body)
|
|
|
|
|
|
REVIEW_JS = """
|
|
<script>
|
|
(function () {
|
|
var PLACE = "%(place_id)s";
|
|
var list = document.getElementById('reviewlist');
|
|
var openBtn = document.getElementById('reviewopen');
|
|
var sheet = document.getElementById('reviewsheet');
|
|
var closeBtn = document.getElementById('reviewclose');
|
|
var form = document.getElementById('reviewform');
|
|
var status = document.getElementById('reviewstatus');
|
|
var count = document.getElementById('reviewcount');
|
|
var opened = Date.now();
|
|
|
|
function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
|
|
return {'&': '&', '<': '<', '>': '>', '"': '"'}[c]; }); }
|
|
|
|
function render(items) {
|
|
if (count) count.textContent = items.length ? items.length + '개' : '';
|
|
if (!items.length) {
|
|
list.innerHTML = '<p class="empty">아직 남겨진 후기가 없습니다. 첫 이야기를 들려주세요.</p>';
|
|
return;
|
|
}
|
|
list.innerHTML = items.map(function (r) {
|
|
var when = (r.publishedAt || '').slice(0, 10);
|
|
return '<li><p class="who"><b>' + esc(r.nickname || '손님') + '</b><time>' + esc(when) +
|
|
'</time></p><p class="body">' + esc(r.body) + '</p></li>';
|
|
}).join('');
|
|
}
|
|
|
|
function load() {
|
|
fetch('/v1/site/reviews?place_id=' + encodeURIComponent(PLACE))
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (b) { render(Array.isArray(b.items) ? b.items : []); })
|
|
.catch(function () { render([]); });
|
|
}
|
|
|
|
function setOpen(on) {
|
|
sheet.hidden = !on;
|
|
document.body.style.overflow = on ? 'hidden' : '';
|
|
if (on) { opened = Date.now(); sheet.querySelector('textarea').focus(); }
|
|
}
|
|
|
|
openBtn.addEventListener('click', function () { setOpen(true); });
|
|
closeBtn.addEventListener('click', function () { setOpen(false); });
|
|
sheet.querySelector('.scrim').addEventListener('click', function () { setOpen(false); });
|
|
document.addEventListener('keydown', function (ev) {
|
|
if (ev.key === 'Escape' && !sheet.hidden) setOpen(false);
|
|
});
|
|
|
|
form.addEventListener('submit', function (ev) {
|
|
ev.preventDefault();
|
|
var data = new FormData(form);
|
|
status.textContent = '보내는 중…';
|
|
fetch('/v1/site/review', {
|
|
method: 'POST', headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
place_id: PLACE,
|
|
body: String(data.get('body') || ''),
|
|
nickname: String(data.get('nickname') || '') || null,
|
|
consent: data.get('consent') === 'on',
|
|
company: String(data.get('company') || ''),
|
|
elapsed_ms: Date.now() - opened
|
|
})
|
|
}).then(function (r) { return r.json(); }).then(function (res) {
|
|
status.textContent = res.message || '';
|
|
if (res.success) { form.reset(); setOpen(false); load(); }
|
|
}).catch(function () {
|
|
status.textContent = '지금은 남기지 못했습니다. 잠시 뒤 다시 시도해 주세요.';
|
|
});
|
|
});
|
|
|
|
var area = form.querySelector('textarea');
|
|
var len = document.getElementById('reviewlen');
|
|
area.addEventListener('input', function () { len.textContent = area.value.length; });
|
|
|
|
load();
|
|
})();
|
|
</script>
|
|
"""
|
|
|
|
|
|
def build_booking():
|
|
body = cover(pick("침실", 5), e(NAME), "이용안내 및 예약",
|
|
"방문 전 확인이 필요한 운영 규정과 시설 안내입니다.", height="mid")
|
|
|
|
for i, u in enumerate(units):
|
|
anchor = "a" if i == 0 else "b"
|
|
shot = (pics("거실", skip=1) or media)[0] if i == 0 else (pics("침실") or media)[0]
|
|
spec = [("기준 인원", uf(u, "standard_capacity")), ("최대 인원", uf(u, "max_capacity")),
|
|
("침대", uf(u, "bed_type")), ("면적", uf(u, "room_size")),
|
|
("주중 요금", won(uf(u, "weekday_price"))), ("요금", uf(u, "price_range"))]
|
|
fac = "".join(f"<li>{e(x)}</li>" for x in uf(u, "room_facilities").split(" · ") if x.strip())
|
|
body += block(e(unit_title(u)), kicker="객실 안내", lead=e(uf(u, "room_intro")),
|
|
inner=(f'<img class="wideshot" src="{shot["url"]}" alt="{e(shot["alt"])}" loading="lazy" />'
|
|
f'{spec_grid(spec)}<ul class="chips wide">{fac}</ul>'),
|
|
tone="ivory" if i else "", anchor=anchor)
|
|
|
|
amen = [("체크인 시간", facts["check_in_time"]["value"]),
|
|
("체크아웃 시간", facts["check_out_time"]["value"]),
|
|
("인원 추가 요금", won(facts["extra_person_fee"]["value"])),
|
|
("주차 가능", "가능"), ("와이파이", "있음"), ("취사 가능", "가능"),
|
|
("반려동물 동반", "불가"), ("흡연 가능", "불가"), ("바비큐 이용", "불가"),
|
|
("픽업 서비스", "없음")]
|
|
body += block("이용안내 및 예약", lead="방문 전 확인이 필요한 운영 규정과 시설 안내입니다.",
|
|
inner=(spec_grid(amen) +
|
|
f'<p class="note cancel"><b>취소·환불 규정</b><br />{e(facts["cancel_policy"]["value"])}</p>'),
|
|
anchor="info")
|
|
|
|
body += block("자주 묻는 질문", lead="아래 답변은 모두 사업자가 확인한 내용입니다.",
|
|
inner=faq_list(faqs[:12]) +
|
|
f'<details class="more"><summary>나머지 {len(faqs) - 12}개 보기</summary>'
|
|
f'{faq_list(faqs[12:])}</details>',
|
|
tone="ivory", anchor="faq")
|
|
|
|
body += f"""
|
|
<section class="wrapper style1 align-center" id="reviews">
|
|
<div class="inner">
|
|
<h2 class="serif">다녀오신 이야기</h2>
|
|
<p class="sectionlead">점수 대신 문장으로 남겨 주세요.</p>
|
|
<ul class="reviews" id="reviewlist"><li class="empty">불러오는 중…</li></ul>
|
|
<ul class="actions"><li><button type="button" id="reviewopen" class="button primary">후기 남기기</button></li></ul>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="reviewsheet" hidden>
|
|
<div class="scrim"></div>
|
|
<div class="sheet" role="dialog" aria-modal="true" aria-label="후기 남기기">
|
|
<div class="sheethead">
|
|
<h3>후기 남기기</h3>
|
|
<button type="button" id="reviewclose" class="x" aria-label="닫기">×</button>
|
|
</div>
|
|
<form id="reviewform">
|
|
<label for="rv-body">후기</label>
|
|
<textarea id="rv-body" name="body" rows="5" maxlength="500"
|
|
placeholder="어떤 점이 좋았는지, 다음 손님이 알면 좋을 것을 적어 주세요"></textarea>
|
|
<p class="hint"><span id="reviewlen">0</span> / 500자 · 전화번호와 이메일은 적지 말아 주세요</p>
|
|
<label for="rv-nick">표시 이름 <em>(선택)</em></label>
|
|
<input id="rv-nick" name="nickname" maxlength="40" placeholder="비우면 '손님'으로 올라갑니다" />
|
|
<input type="text" name="company" tabindex="-1" autocomplete="off" aria-hidden="true" class="pot" />
|
|
<label class="check"><input type="checkbox" name="consent" required />
|
|
<span>남긴 글이 이 사이트에 공개되는 것에 동의합니다.</span></label>
|
|
<p class="hint" id="reviewstatus"></p>
|
|
<button type="submit" class="button primary fit">후기 보내기</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="wrapper style1 invert align-center" id="book">
|
|
<div class="inner">
|
|
<h2 class="serif">실시간 예약</h2>
|
|
<p class="sectionlead">빈 방 확인과 결제는 아래 예약 창구에서 진행됩니다.
|
|
이 페이지에서는 요금과 이용 조건만 안내합니다.</p>
|
|
<ul class="actions stacked">
|
|
<li><a class="button primary fit" href="{e(BOOK_URL)}" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
|
|
<li><a class="button fit ghost" href="tel:{PHONE}">{PHONE}</a></li>
|
|
</ul>
|
|
</div>
|
|
</section>"""
|
|
|
|
body += next_cards([
|
|
("소개", "스테이,머뭄 소개", BASE, media[0]["url"]),
|
|
("군산", "군산 이야기", f"{BASE}/gunsan", local["attractions"][0]["imageUrl"]),
|
|
])
|
|
return page("booking", f"이용안내 및 예약 · {NAME}",
|
|
"객실 안내와 요금, 이용 규정, 자주 묻는 질문, 다녀오신 이야기.",
|
|
media[5]["url"], body, extra=REVIEW_JS % {"place_id": PLACE_ID})
|
|
|
|
|
|
|
|
OVERRIDE = """
|
|
:root {
|
|
--ink: #1b1a15; --ink-2: #4c4739; --muted: #6b6553;
|
|
--accent: #bf2f1b; --accent-hi: #d6432c;
|
|
--paper: #e4dac0; --ivory: #efe7d3; --night: #1b1a15; --line: rgba(27,26,21,.16);
|
|
}
|
|
|
|
body, input, select, textarea, button {
|
|
font-family: "Gowun Batang", "Noto Serif KR", serif;
|
|
font-size: 16px; line-height: 1.7; word-break: keep-all; color: var(--ink);
|
|
letter-spacing: -0.005em;
|
|
}
|
|
body {
|
|
background: var(--paper) repeating-linear-gradient(0deg,rgba(27,26,21,.028) 0 1px,transparent 1px 3px),
|
|
repeating-linear-gradient(90deg,rgba(27,26,21,.02) 0 1px,transparent 1px 4px);
|
|
padding-bottom: 78px;
|
|
}
|
|
h1, h2, h3, h4 { font-weight: 400; letter-spacing: 0; text-wrap: balance; }
|
|
.serif { font-family: "Gugi", "Noto Sans KR", sans-serif; font-weight: 400; letter-spacing: 0; }
|
|
a { color: var(--accent); }
|
|
img { max-width: 100%; }
|
|
|
|
.kicker {
|
|
font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
|
|
color: var(--muted); font-weight: 700; margin: 0 0 .6rem;
|
|
}
|
|
.sectionlead { color: var(--ink-2); max-width: 33rem; margin: .5rem auto 0; font-size: 15.5px; }
|
|
.note { color: var(--muted); font-size: 14.5px; max-width: 34rem; margin: 1rem auto 0; }
|
|
.tiny { font-size: 12.5px; line-height: 1.85; opacity: .72; }
|
|
|
|
#topbar {
|
|
position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40;
|
|
display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
|
|
background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(14px);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
#topbar .brand {
|
|
display: flex; align-items: center; min-height: 44px; padding-right: 8px;
|
|
font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--ink); letter-spacing: -.02em;
|
|
}
|
|
#topbar nav { display: flex; }
|
|
#topbar nav a {
|
|
display: flex; align-items: center; min-height: 44px; padding: 0 9px;
|
|
min-width: 44px; justify-content: center;
|
|
font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink-2);
|
|
}
|
|
#topbar nav a.on { color: var(--accent); }
|
|
#wrapper { padding-top: 52px; }
|
|
|
|
#bookbar {
|
|
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
|
|
display: flex; align-items: center; gap: 12px; padding: 9px 14px;
|
|
padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
|
|
background: rgba(255,255,255,.95); backdrop-filter: saturate(1.4) blur(14px);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
#bookbar .price { display: flex; flex-direction: column; line-height: 1.2; }
|
|
#bookbar .price b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
|
|
#bookbar .price small { font-size: 11.5px; color: var(--muted); }
|
|
#bookbar .button.primary { margin-left: auto; min-width: 8.5rem; }
|
|
|
|
.button, .button.large, input[type="submit"], button.button {
|
|
letter-spacing: 0; font-weight: 700; min-height: 48px; line-height: 44px;
|
|
border-radius: 2px; font-size: 15px; border: 2px solid var(--ink) !important;
|
|
box-shadow: 3px 3px 0 rgba(27,26,21,.16);
|
|
}
|
|
.button.large { min-height: 52px; line-height: 48px; font-size: 16px; }
|
|
input[type="submit"].primary, button.primary, .button.primary { background-color: var(--accent); border-color: var(--accent) !important; }
|
|
.button.primary:hover, button.primary:hover { background-color: var(--accent-hi); }
|
|
#wrapper > .invert input[type="submit"].primary, #wrapper > .invert button.primary, #wrapper > .invert .button.primary {
|
|
background-color: var(--accent); color: #fff !important; border-color: var(--accent) !important;
|
|
}
|
|
#wrapper > .invert input[type="submit"].primary:hover, #wrapper > .invert button.primary:hover, #wrapper > .invert .button.primary:hover {
|
|
background-color: var(--accent-hi);
|
|
}
|
|
.button.ghost {
|
|
background: rgba(255,255,255,.12); color: #fff !important;
|
|
box-shadow: 3px 3px 0 rgba(0,0,0,.25); border-color: #fff !important;
|
|
}
|
|
.button.ghost:hover { background: rgba(255,255,255,.22); }
|
|
|
|
.cover { position: relative; overflow: hidden; display: block; }
|
|
.cover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
|
.cover .veil {
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(to top, rgba(10,13,12,.88) 0%, rgba(10,13,12,.6) 30%,
|
|
rgba(10,13,12,.2) 58%, rgba(10,13,12,.02) 84%);
|
|
}
|
|
.cover .inner {
|
|
position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
|
|
padding: 2rem 1.4rem 3.2rem; color: #fff; text-align: left;
|
|
}
|
|
.cover.tall .inner { min-height: 88svh; }
|
|
.cover.mid .inner { min-height: 58svh; }
|
|
.cover .inner .kicker { color: rgba(255,255,255,.82); }
|
|
.cover h1 { font-size: 2.55rem; line-height: 1.18; margin: 0 0 .5rem; color: #fff; }
|
|
.cover h2 { font-size: 1.95rem; line-height: 1.25; margin: 0 0 .7rem; color: #fff; }
|
|
.cover p { color: rgba(255,255,255,.93); font-size: 16px; max-width: 26rem; margin: 0 0 .4rem; }
|
|
.cover .lead { font-size: 17px; }
|
|
.cover .actions { margin-top: 1.4rem; }
|
|
.cover.chapter .inner { padding-bottom: 2.6rem; }
|
|
.cover.chapter p { font-size: 15.5px; line-height: 1.85; }
|
|
.scrollhint {
|
|
position: absolute; left: 50%; bottom: 14px; z-index: 3; width: 1px; height: 30px;
|
|
background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85));
|
|
}
|
|
|
|
#wrapper > .wrapper { background: var(--paper); }
|
|
#wrapper > .wrapper.ivory { background: var(--ivory); }
|
|
#wrapper > .wrapper.invert, #wrapper > footer.invert { background: var(--night); color: #fff; }
|
|
.invert h2, .invert h3, .invert h4, .invert p, .invert b { color: #fff; }
|
|
.invert .kicker, .invert .sectionlead, .invert .note { color: rgba(255,255,255,.72); }
|
|
.wrapper > .inner { padding: 3.4rem 1.4rem; max-width: 62rem; }
|
|
.wrapper.pad-s > .inner { padding: 1.6rem 1.4rem; }
|
|
.wrapper h2 { font-size: 1.65rem; margin: 0; }
|
|
|
|
.wideshot {
|
|
width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 14px; margin: 1.6rem auto 0;
|
|
max-height: 460px; display: block;
|
|
}
|
|
|
|
.units { display: grid; gap: 18px; margin: 2rem 0 .5rem; text-align: left; }
|
|
.unit { border: 2px solid var(--ink); border-radius: 2px; overflow: hidden; background: var(--ivory); box-shadow: 4px 4px 0 rgba(27,26,21,.16); }
|
|
.unit .shot { display: block; aspect-ratio: 4/3; }
|
|
.unit .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.unit .body { padding: 18px 18px 20px; }
|
|
.unit h3 { font-size: 20px; margin: 0 0 2px; }
|
|
.unit .sub { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
|
|
.unit .price { margin: 14px 0 12px; font-size: 14.5px; color: var(--ink-2); }
|
|
.unit .price b { font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
|
|
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
|
|
.chips li {
|
|
padding: 5px 11px; border-radius: 999px; background: rgba(20,24,26,.055);
|
|
font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--ink-2);
|
|
}
|
|
.chips.wide { justify-content: center; margin-top: 1.2rem; }
|
|
.invert .chips li, .ivory .chips li { background: rgba(20,24,26,.07); }
|
|
.invert .chips li { background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); }
|
|
|
|
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; margin: 2rem 0 0; text-align: left; }
|
|
.tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
|
|
.tile .shot { position: relative; display: block; border-radius: 12px; overflow: hidden; }
|
|
.tile .shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
|
|
.tile .shot::after {
|
|
content: ""; position: absolute; inset: 0;
|
|
background: linear-gradient(to top, rgba(8,10,10,.82) 0%, rgba(8,10,10,.25) 46%, rgba(8,10,10,0) 74%);
|
|
}
|
|
.tile .shot b {
|
|
position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2;
|
|
color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.02em;
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
}
|
|
.tile .shot i {
|
|
position: absolute; top: 9px; left: 9px; z-index: 2; font-style: normal;
|
|
background: rgba(255,255,255,.92); color: var(--ink); border-radius: 999px;
|
|
padding: 3px 9px; font-size: 11.5px; font-weight: 700;
|
|
}
|
|
.tile .meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
|
|
.tile .desc {
|
|
font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-top: 3px;
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
}
|
|
.invert .tile .meta, .invert .tile .desc { color: rgba(255,255,255,.7); }
|
|
|
|
.vids { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 1.8rem; }
|
|
.vid { position: relative; display: block; border-radius: 12px; overflow: hidden; text-decoration: none; }
|
|
.vid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
|
|
.vid::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,10,.3); }
|
|
.vid b {
|
|
position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2;
|
|
color: #fff; font-size: 13.5px; font-weight: 600; text-align: left;
|
|
}
|
|
.vid .play {
|
|
position: absolute; top: 50%; left: 50%; z-index: 2; width: 46px; height: 46px;
|
|
margin: -23px 0 0 -23px; border-radius: 999px; background: rgba(255,255,255,.92);
|
|
}
|
|
.vid .play::before {
|
|
content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%);
|
|
border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
|
|
}
|
|
|
|
.weather { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 38rem; margin-inline: auto; }
|
|
.weather .tag {
|
|
display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px;
|
|
background: rgba(31,74,63,.1); color: var(--accent); font-size: 12.5px; font-weight: 700;
|
|
}
|
|
|
|
.mapframe { width: 100%; height: 290px; border: 0; border-radius: 14px; margin: 1.5rem 0 0; }
|
|
.addr { font-size: 15px; color: var(--ink-2); }
|
|
.addr.big { font-size: 18px; font-weight: 600; color: var(--ink); margin: 1.2rem 0 0; }
|
|
|
|
.specs {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px;
|
|
max-width: 40rem; margin: 1.8rem auto 0; text-align: left;
|
|
}
|
|
.specs > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
.invert .specs > div { border-bottom-color: rgba(255,255,255,.16); }
|
|
.specs dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
|
|
.specs dd { margin: 1px 0 0; font-size: 15px; font-weight: 500; }
|
|
.cancel { text-align: left; max-width: 40rem; margin-inline: auto; }
|
|
|
|
.faq { text-align: left; max-width: 44rem; margin: 1.6rem auto 0; }
|
|
.faq details { border-bottom: 1px solid var(--line); }
|
|
.invert .faq details { border-bottom-color: rgba(255,255,255,.16); }
|
|
.faq summary {
|
|
cursor: pointer; list-style: none; position: relative; padding: 15px 30px 15px 0;
|
|
font-size: 15.5px; font-weight: 600; min-height: 44px;
|
|
}
|
|
.faq summary::-webkit-details-marker { display: none; }
|
|
.faq summary::after {
|
|
content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px;
|
|
margin-top: -6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
|
|
transform: rotate(45deg); opacity: .5;
|
|
}
|
|
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
|
|
.faq details p { margin: 0; padding: 0 0 16px; font-size: 15px; color: var(--ink-2); }
|
|
.invert .faq details p { color: rgba(255,255,255,.8); }
|
|
.plans summary span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 2px; }
|
|
.invert .plans summary span { color: rgba(255,255,255,.65); }
|
|
.plans .why { padding-bottom: 10px !important; }
|
|
.plans .day { padding: 2px 0 14px; }
|
|
.plans .day h4 { font-size: 13.5px; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; }
|
|
.plans .day h4 small { font-weight: 400; color: var(--muted); font-size: 12.5px; }
|
|
.invert .plans .day h4 small { color: rgba(255,255,255,.6); }
|
|
.plans .day ol { margin: 0; padding-left: 1.15rem; }
|
|
.plans .day li { padding: 4px 0; font-size: 14.5px; }
|
|
.plans .day li span { display: block; font-size: 13.5px; opacity: .76; line-height: 1.6; }
|
|
|
|
.reads { display: block; text-align: left; max-width: 36rem; margin: 2rem auto 0; }
|
|
.read { padding: 26px 0; border-top: 1px solid var(--line); position: relative; }
|
|
.read:first-child { border-top: 0; padding-top: 6px; }
|
|
.read .no {
|
|
display: block; font-family: "Gowun Batang", serif; font-size: 13px; font-weight: 700;
|
|
color: var(--accent); letter-spacing: .12em; margin-bottom: 8px;
|
|
}
|
|
.read h4 { font-size: 20px; margin: 0; line-height: 1.4; }
|
|
.read .yr {
|
|
margin: 4px 0 0; font-size: 12.5px; color: var(--muted);
|
|
font-variant-numeric: tabular-nums; letter-spacing: .04em;
|
|
}
|
|
.read .txt {
|
|
font-family: "Gowun Batang", serif; font-size: 16.5px; line-height: 2.05;
|
|
color: var(--ink); margin: 14px 0 0; text-indent: 0;
|
|
}
|
|
.read a {
|
|
display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px;
|
|
font-weight: 600; color: var(--muted); text-decoration: none;
|
|
border-bottom: 1px solid var(--line); margin-top: 6px;
|
|
}
|
|
.read a:hover { color: var(--accent); border-bottom-color: var(--accent); }
|
|
|
|
.songs { list-style: none; margin: 1.6rem auto 0; padding: 0; text-align: left; max-width: 44rem; }
|
|
.songs li { border-top: 1px solid var(--line); }
|
|
.songs li:last-child { border-bottom: 1px solid var(--line); }
|
|
.songs a { display: block; padding: 13px 0; text-decoration: none; color: inherit; min-height: 44px; }
|
|
.songs b { font-size: 15.5px; font-weight: 600; }
|
|
.songs span { font-size: 13px; color: var(--muted); margin-left: 8px; }
|
|
.songs em { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.6; }
|
|
|
|
.reviews { list-style: none; margin: 1.6rem auto 0; padding: 0; text-align: left; max-width: 44rem; }
|
|
.reviews li { padding: 15px 0; border-bottom: 1px solid var(--line); }
|
|
.reviews .who { margin: 0 0 5px; display: flex; gap: 9px; align-items: baseline; }
|
|
.reviews .who b { font-size: 14.5px; }
|
|
.reviews .who time { font-size: 12.5px; color: var(--muted); }
|
|
.reviews .body { margin: 0; font-size: 15px; color: var(--ink-2); white-space: pre-line; }
|
|
.reviews .empty { color: var(--muted); font-size: 15px; border: 0; text-align: center; padding: 2rem 0; }
|
|
|
|
#reviewsheet { position: fixed; inset: 0; z-index: 60; }
|
|
#reviewsheet[hidden] { display: none; }
|
|
#reviewsheet .scrim { position: absolute; inset: 0; background: rgba(8,10,10,.55); border: 0; }
|
|
#reviewsheet .sheet {
|
|
position: absolute; left: 0; right: 0; bottom: 0; max-height: 88svh; overflow: auto;
|
|
background: var(--paper); border-radius: 18px 18px 0 0; padding: 18px 18px 26px;
|
|
padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); text-align: left;
|
|
}
|
|
#reviewsheet .sheethead { display: flex; align-items: center; justify-content: space-between; }
|
|
#reviewsheet h3 { margin: 0; font-size: 18px; }
|
|
#reviewsheet .x {
|
|
background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted);
|
|
min-width: 44px; min-height: 44px; cursor: pointer;
|
|
}
|
|
#reviewsheet label { display: block; margin: 14px 0 6px; font-size: 13.5px; font-weight: 600; }
|
|
#reviewsheet label em { font-style: normal; color: var(--muted); font-weight: 400; }
|
|
#reviewsheet textarea, #reviewsheet input[type="text"], #reviewsheet input:not([type]) {
|
|
width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px;
|
|
font-size: 16px; background: var(--paper); box-shadow: none;
|
|
}
|
|
#reviewsheet .hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
|
|
#reviewsheet .check { display: flex; gap: 9px; align-items: flex-start; margin-top: 16px; font-weight: 400; font-size: 14px; }
|
|
#reviewsheet .check input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; }
|
|
#reviewsheet .pot { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
|
|
#reviewsheet .button { margin-top: 18px; }
|
|
|
|
.nextnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
|
|
.nextcard { position: relative; display: block; border-radius: 14px; overflow: hidden; text-decoration: none; }
|
|
.nextcard img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
|
|
.nextcard::after { content: ""; position: absolute; inset: 0; background: rgba(8,10,10,.48); }
|
|
.nextcard span {
|
|
position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; color: #fff; gap: 2px;
|
|
}
|
|
.nextcard small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
|
|
.nextcard b { font-size: 15.5px; font-weight: 700; }
|
|
|
|
.more { margin-top: 1.4rem; }
|
|
.more > summary {
|
|
cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center;
|
|
min-height: 48px; padding: 0 1.6rem; border-radius: 999px; font-size: 14.5px; font-weight: 600;
|
|
box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2);
|
|
}
|
|
.invert .more > summary { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: #fff; }
|
|
.more > summary::-webkit-details-marker { display: none; }
|
|
|
|
#footer .inner { padding: 3rem 1.4rem 3.2rem; }
|
|
#footer h2 { font-size: 21px; }
|
|
#footer .addr a { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; min-height: 44px; }
|
|
#footer .actions { margin-top: 1.4rem; }
|
|
#footer .tiny a { color: rgba(255,255,255,.8); }
|
|
|
|
.gallery.style2 article .caption { display: none; }
|
|
|
|
@media (min-width: 737px) {
|
|
#topbar { height: 60px; padding: 0 28px; }
|
|
#topbar nav a { padding: 0 14px; font-size: 15px; }
|
|
#wrapper { padding-top: 60px; }
|
|
.cover .inner { padding: 4rem 4rem 4.4rem; }
|
|
.cover.tall .inner { min-height: 84svh; }
|
|
.cover h1 { font-size: 4rem; }
|
|
.cover h2 { font-size: 2.6rem; }
|
|
.cover p, .cover .lead { max-width: 32rem; font-size: 18px; }
|
|
.wrapper > .inner { padding: 5rem 2rem; }
|
|
.wrapper h2 { font-size: 2.1rem; }
|
|
.units { grid-template-columns: repeat(2, 1fr); }
|
|
.tiles { grid-template-columns: repeat(4, 1fr); gap: 20px 16px; }
|
|
.vids { grid-template-columns: repeat(3, 1fr); }
|
|
.specs { grid-template-columns: repeat(3, 1fr); }
|
|
.mapframe { height: 380px; }
|
|
.wideshot { max-height: 520px; width: auto; max-width: 100%; }
|
|
#reviewsheet .sheet {
|
|
left: 50%; bottom: 50%; transform: translate(-50%, 50%); width: 30rem;
|
|
border-radius: 16px; max-height: 84svh;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|
|
|
|
.prose { max-width: 34rem; margin: 0 auto; font-size: 16px; line-height: 1.85; color: var(--ink-2); text-align: left; }
|
|
.prose + .wideshot { margin-top: 1.8rem; }
|
|
.wideshot + .prose { margin-top: 1.8rem; }
|
|
|
|
.lps { display: grid; gap: 14px; margin-top: 1.8rem; text-align: left; }
|
|
.lp {
|
|
display: grid; grid-template-columns: 82px 1fr; gap: 16px; align-items: center;
|
|
padding: 14px; border-radius: 14px; background: rgba(255,255,255,.055); text-decoration: none;
|
|
}
|
|
.lp .disc {
|
|
position: relative; width: 82px; height: 82px; border-radius: 999px;
|
|
background:
|
|
repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 4px),
|
|
radial-gradient(circle at 34% 30%, #3b4145 0%, #16191b 62%);
|
|
box-shadow: 0 2px 10px rgba(0,0,0,.45);
|
|
}
|
|
.lp .disc i {
|
|
position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
|
|
border-radius: 999px; background: var(--label);
|
|
}
|
|
.lp .disc i::after {
|
|
content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px;
|
|
margin: -3.5px 0 0 -3.5px; border-radius: 999px; background: #14181a;
|
|
}
|
|
.lp .txt { display: block; min-width: 0; }
|
|
.lp small { display: block; font-size: 11.5px; letter-spacing: .1em; color: rgba(255,255,255,.55);
|
|
font-variant-numeric: tabular-nums; }
|
|
.lp b { display: block; font-size: 16.5px; font-weight: 700; color: #fff; margin-top: 3px; letter-spacing: -.02em; }
|
|
.lp .by { display: block; font-size: 13px; color: rgba(255,255,255,.66); margin-top: 1px; }
|
|
.lp em {
|
|
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
|
font-style: normal; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin-top: 6px;
|
|
}
|
|
|
|
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 14px; margin-top: 1.8rem; text-align: left; }
|
|
.person { display: flex; flex-direction: column; }
|
|
.person .face {
|
|
display: block; width: 74px; height: 74px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(20,24,26,.07); margin-bottom: 10px;
|
|
}
|
|
.person .face img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.person h4 { margin: 0; font-size: 16px; }
|
|
.person .role { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
.person .one { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
|
|
.person a { font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
|
|
|
|
.chron { list-style: none; margin: 1.8rem auto 0; padding: 0; max-width: 44rem; text-align: left; }
|
|
.chron li {
|
|
display: grid; grid-template-columns: 4.2rem 1fr; gap: 0 14px;
|
|
padding: 18px 0; border-top: 1px solid var(--line);
|
|
}
|
|
.chron li:last-child { border-bottom: 1px solid var(--line); }
|
|
.chron .yr {
|
|
font-family: "Gowun Batang", serif; font-weight: 700; font-size: 19px;
|
|
color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em; padding-top: 1px;
|
|
}
|
|
.chron li.turn .yr::after {
|
|
content: ""; display: block; width: 18px; height: 2px; background: var(--accent); margin-top: 7px;
|
|
}
|
|
.chron .what h4 { margin: 0; font-size: 16.5px; }
|
|
.chron .what p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
|
|
.chron .where {
|
|
display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted);
|
|
border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
|
|
}
|
|
.chron .pic { grid-column: 2; display: block; margin-top: 12px; }
|
|
.chron .pic img { width: 100%; aspect-ratio: 21/9; max-height: 132px; object-fit: cover; border-radius: 10px; display: block; }
|
|
|
|
.read h4 { font-size: 17px; margin: 0 0 6px; }
|
|
|
|
@media (min-width: 737px) {
|
|
.lps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
|
|
.people { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
|
|
.chron li { grid-template-columns: 5rem 1fr 190px; }
|
|
.chron .pic { grid-column: 3; grid-row: 1; margin-top: 0; }
|
|
.chron .pic img { aspect-ratio: 4/3; max-height: none; }
|
|
}
|
|
"""
|
|
|
|
|
|
def main():
|
|
if OUT.exists():
|
|
shutil.rmtree(OUT)
|
|
OUT.mkdir(parents=True)
|
|
shutil.copytree(TPL / "assets", OUT / "assets")
|
|
(OUT / "assets" / "js" / "demo.js").unlink(missing_ok=True)
|
|
(OUT / "assets" / "css" / "meomoom.css").write_text(OVERRIDE)
|
|
shutil.copy(TPL / "LICENSE.txt", OUT / "assets" / "LICENSE-story.txt")
|
|
|
|
for made in (build_home(), build_gunsan(), build_booking()):
|
|
print(made.relative_to(OUT), f"{made.stat().st_size:,} bytes")
|
|
|
|
|
|
if __name__ == "__main__":
|
|
main()
|