feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
|
|
@ -24,8 +24,8 @@
|
|||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/tokens.css?v=2" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=2" />
|
||||
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%2316181A'/%3E%3Cpath d='M6 20h20' stroke='%237FA8D9' stroke-width='2'/%3E%3Ccircle cx='13' cy='14' r='4.5' fill='none' stroke='%23F3F1EC' stroke-width='2'/%3E%3Cpath d='M13 9.5V7' stroke='%23F3F1EC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"
|
||||
|
|
@ -80,8 +80,17 @@
|
|||
값은 매일 바뀝니다. 바뀌는 값을 감추고 파는 대신, 오늘 얼마에 받아 왔는지를
|
||||
먼저 적습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="board">
|
||||
<div class="market-board-surface">
|
||||
<div class="wrap">
|
||||
<div class="market-board-head">
|
||||
<p class="mono">오늘 경매 · 예시 시세표</p>
|
||||
<p>낙찰가와 단위는 아래 표에서 함께 읽습니다.</p>
|
||||
</div>
|
||||
<div class="market-board-scroll" role="region" aria-label="오늘 낙찰 품목 예시 시세표" tabindex="0">
|
||||
|
||||
<table class="board">
|
||||
<caption class="sr-only">
|
||||
오늘 낙찰 품목 여섯 가지 — 산지, 등급, 당도, 규격, 낙찰가, 전일 대비
|
||||
</caption>
|
||||
|
|
@ -236,7 +245,8 @@
|
|||
<td data-label="전일 대비" class="c-num mono delta up">▲ 1,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="lot-inspector" aria-live="polite" aria-atomic="true">
|
||||
<div class="lot-inspector-head">
|
||||
|
|
@ -284,11 +294,12 @@
|
|||
두 값을 같은 것처럼 적지 않습니다.
|
||||
</li>
|
||||
<li class="note-demo">
|
||||
위 표의 숫자는 <strong>이 쇼케이스를 위한 예시</strong>입니다. 실제 운영에서는
|
||||
그날 경매 결과가 그대로 들어옵니다.
|
||||
위 표의 숫자는 <strong>이 페이지의 예시 값</strong>입니다. 실제 경매 결과나
|
||||
납품 정보가 아닙니다.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════════════
|
||||
|
|
@ -638,8 +649,8 @@
|
|||
|
||||
<section class="order-draft" aria-labelledby="orderDraftHeading">
|
||||
<div class="order-draft-head">
|
||||
<h3 id="orderDraftHeading">발주 메모 만들기</h3>
|
||||
<p class="mono">쇼케이스 예시</p>
|
||||
<h3 id="orderDraftHeading">수량별 기준 금액 보기</h3>
|
||||
<p class="mono">안내용 계산</p>
|
||||
</div>
|
||||
<div class="order-controls">
|
||||
<label>
|
||||
|
|
@ -664,15 +675,15 @@
|
|||
<dd class="mono" id="orderPack">4.5 kg × 3상자</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>예시 낙찰가 합계</dt>
|
||||
<dt>표시된 낙찰가 합계</dt>
|
||||
<dd class="mono" id="orderTotal">114,000원</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="order-fine">
|
||||
위 합계는 판에 적힌 예시 낙찰가만 더합니다. 선별·포장·배송과 실제 납품가는 포함하지 않습니다.
|
||||
위 합계는 표에 적힌 예시 낙찰가만 더한 값입니다. 선별·포장·배송과 실제 납품가는 포함하지 않습니다.
|
||||
</p>
|
||||
<div class="order-actions">
|
||||
<button class="btn" id="copyOrder" type="button">발주 메모 복사</button>
|
||||
<button class="btn" id="copyOrder" type="button">계산 내용 복사</button>
|
||||
</div>
|
||||
<p class="order-status" id="orderStatus" role="status"></p>
|
||||
</section>
|
||||
|
|
@ -700,12 +711,11 @@
|
|||
</div>
|
||||
<div>
|
||||
<dt>메일</dt>
|
||||
<dd><a class="mono" href="mailto:order@saebyeok-cheonggwa.example">order@saebyeok-cheonggwa.example</a></dd>
|
||||
<dd>실제 주문 연락처는 정해지지 않았습니다</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p class="contact-fine">
|
||||
주소·전화·사업자 정보는 실제 상호가 정해진 뒤에 채웁니다.
|
||||
지어낸 값을 임시로 적어 두지 않습니다.
|
||||
이 페이지는 실제 주문을 받지 않습니다. 주소·전화·사업자 정보는 실제 상호가 정해진 뒤에만 안내합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -717,8 +727,8 @@
|
|||
<p class="foot-name">새벽청과</p>
|
||||
<p class="foot-line">새벽 경매에서 받아 그날 아침에 보냅니다</p>
|
||||
<p class="foot-fine">
|
||||
이 페이지는 designpaca 쇼케이스입니다. 실제 영업하는 상호가 아니며,
|
||||
판의 숫자는 화면 구성을 보이기 위한 예시입니다. 경매 시각·등급·당도 표시 규정 등
|
||||
이 페이지의 품목·가격·시간은 이해를 돕기 위한 예시이며 실제 주문·납품 서비스가 아닙니다.
|
||||
경매 시각·등급·당도 표시 규정 등
|
||||
제도에 관한 설명은 실제 농산물 표준규격과 도매시장 운영 방식을 따릅니다.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -867,18 +877,18 @@
|
|||
document.getElementById("copyOrder")?.addEventListener("click", async () => {
|
||||
const value = orderValues();
|
||||
const memo = [
|
||||
"새벽청과 납품 문의",
|
||||
"새벽청과 · 예시 발주 메모",
|
||||
`품목: ${value.name}`,
|
||||
`규격: ${value.pack}`,
|
||||
`수량: ${value.quantity}상자`,
|
||||
`예시 낙찰가 합계: ${value.total.toLocaleString("ko-KR")}원`,
|
||||
`표시된 낙찰가 합계: ${value.total.toLocaleString("ko-KR")}원`,
|
||||
"실제 납품가는 선별·포장·배송 조건을 확인한 뒤 정합니다.",
|
||||
].join("\n");
|
||||
try {
|
||||
const copied = await copyText(memo);
|
||||
if (orderStatus) {
|
||||
orderStatus.textContent = copied
|
||||
? "발주 메모를 복사했습니다."
|
||||
? "계산 내용을 복사했습니다."
|
||||
: "복사하지 못했습니다. 브라우저의 클립보드 권한을 확인해 주세요.";
|
||||
}
|
||||
} catch {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue