ONBI 450 — 크라우드펀딩 론칭 예고

펀딩이 열리기 전에 사전 알림을 모으는 한 장짜리 예고 페이지입니다. 남은 시간, 얼리버드 세 등급, 스펙과 일정이 한 화면에서 이어집니다.

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 — Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

sol-04-crowdfunding-preview/
├── index.html              첫 화면
├── pages/                  나머지 모든 쪽
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                main.js + logic/(순수 계산 · DOM 을 모른다)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

Customize

Brand colors

styles/tokens.css 의 CSS 변수만 바꾸면 전체 색이 따라옵니다. styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다. 색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고 외부 CDN 을 호출하지 않습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 레이아웃 골격 · 형태 · 밀도 · 시그니처 인터랙션이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다.

Pages

바꿔야 하는 값

이 템플릿에서 가장 먼저 고칠 것은 론칭 시각입니다.

론칭 시각이 지나면 카운트다운은 음수를 보이지 않고 00으로 멈춘 뒤 「펀딩이 시작되었습니다」로 바뀝니다. 그 상태를 미리 보시려면 launchDate 를 어제 날짜로 바꿔 새로고침하세요.

인라인 JSON 이 원본이고 정적 표·카드는 사람이 옮겨 적은 사본입니다. JS 없이도 읽히게 하려고 둔 것이므로, 값을 고칠 때는 두 곳을 함께 고칩니다. 백엔드를 붙일 때 사본은 버립니다 (contract/README.md).

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전.

이 템플릿이 의존하는 것: <details>/<summary> · :has() · CSS 논리 속성 · backdrop-filter(스티키 상단바 한 곳) · Intl.DateTimeFormat(시간대 환산) · URL.createObjectURL(캘린더 파일). 넷 다 없어도 페이지는 읽힙니다 — :has() 가 없으면 고른 등급의 강조만 빠지고 라디오는 그대로 동작합니다.

@container · color-mix() · animation-timeline 은 쓰지 않습니다.

색 모드: light-only. 이 페이지는 제품 색과 민트 CTA 가 밝은 지면 위에서 읽히는 물건이라 다크 모드를 넣지 않았습니다. OS 가 다크여도 지면색이 그대로 유지되도록 styles/theme.css §8 에서 라이트 토큰을 다시 선언합니다.

Accessibility

• 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상 (실측). 수치는 styles/theme.css §1 에 있습니다
• 터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
• 키보드 — Tab 순서, 본문 건너뛰기 링크
• prefers-reduced-motion · prefers-reduced-transparency · prefers-reduced-data 대응
• 모든 이미지에 alt 와 명시적 width/height (레이아웃 이동 0)
• 얼리버드 등급은 진짜 라디오 버튼입니다. Tab 과 화살표로 고르고 화면 낭독기가 등급 수를 읽습니다
• 한국어 / 영어 전환. 선택은 브라우저에 남습니다 (법적 문서의 본문은 한국어입니다)

Credits / License

서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는 LICENSE.md 를 보세요.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory