Web4ai/o2o-site-AEO
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[chore] site/mockup: 목업 스크립트·벤더 번들 정리 — stay2/stay3 빌드 도구 추가

Browse Source 
patch_stay.py·inject.js/css·audit-all.mjs 갱신, 벤더 번들 교체(index-D9cPXCE3 →
index-D4jgGFP4 등), stay3 백업 스냅샷과 stay2/stay3 빌드 스크립트(build_stay2.py·
build_stay3.py) 및 원본 템플릿(tpl-story·tpl-creative) 추가. 옛 번들은
vendor/retired/ 에 보관.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Mina Choi 2026-09-17 13:01:57 +09:00
parent dbae2d4f35
commit 29af37f158
207 changed files with 80105 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
solution/site/scripts/mockup/README.md
View File

@ -1012,7 +1012,7 @@ docker cp vendor/. \$C:/app/solution/site/out/s/stay/vendor/"
### 카로셀 제어 (`tameRails`) ### 카로셀 제어 (`tameRails`)
렌더러의 자동 넘김(`site/src/lib/ui/use-rail-autoplay.ts`)은 4.5초 **고정 타이머**이고, 렌더러의 자동 넘김(`site/src/lib/ui/use-rail-autoplay.ts`)은 4초 **고정 타이머**이고,
정지는 `held` 카운터 하나로 센다 — 레일 위 `pointerdown` 에 올리고 window `pointerup`· 정지는 `held` 카운터 하나로 센다 — 레일 위 `pointerdown` 에 올리고 window `pointerup`·
`pointercancel` 에 내린다. 주입분은 타이머를 건드리지 않고 **그 카운터만** 쓴다 `pointercancel` 에 내린다. 주입분은 타이머를 건드리지 않고 **그 카운터만** 쓴다
(`pointerdown` 을 `button: 2` 로 쏜다 — embla 는 주 버튼이 아닌 것을 드래그로 치지 않는다). (`pointerdown` 을 `button: 2` 로 쏜다 — embla 는 주 버튼이 아닌 것을 드래그로 치지 않는다).

22
solution/site/scripts/mockup/audit-all.mjs
View File

@ -53,7 +53,7 @@ const d = await page.evaluate(() => {
groups: (e.groups || []).length, groups: (e.groups || []).length,
sourced: e.items.filter((x) => x.source && x.source.url).length, sourced: e.items.filter((x) => x.source && x.source.url).length,
}; })(), }; })(),
domReadCards: document.querySelectorAll('#w4d-reading-panel .w4d-read-card').length, domReadCards: document.querySelectorAll('#reading article').length,
domReadGroups: document.querySelectorAll('#w4d-reading-panel .w4d-read-group').length, domReadGroups: document.querySelectorAll('#w4d-reading-panel .w4d-read-group').length,
domReadSrc: document.querySelectorAll('#w4d-reading-panel .w4d-read-src a').length, domReadSrc: document.querySelectorAll('#w4d-reading-panel .w4d-read-src a').length,
// 레일이 아니어야 한다 — 가로로 밀어야 보이면 '펼쳐 둔다' 가 아니다. // 레일이 아니어야 한다 — 가로로 밀어야 보이면 '펼쳐 둔다' 가 아니다.
@ -90,10 +90,10 @@ const d = await page.evaluate(() => {
heroImg: (P.media.find((m) => m.isPrimary) || {}).url, heroImg: (P.media.find((m) => m.isPrimary) || {}).url,
roomA: P.units[0].mediaIds.length, roomB: P.units[1].mediaIds.length, roomA: P.units[0].mediaIds.length, roomB: P.units[1].mediaIds.length,
roomMirror: P.units.flatMap((u) => u.mediaIds).length, roomMirror: P.units.flatMap((u) => u.mediaIds).length,
tagline: document.querySelector('#root h1')?.nextElementSibling?.textContent.trim(), tagline: document.querySelector('#root .hero-catchphrase-fixed')?.textContent.trim(),
sub: document.getElementById('w4d-sub')?.textContent.trim(), sub: document.querySelector('#root .hero-catchphrase .w4d-line')?.textContent.replace(/\s+/g, ' ').trim(),
subIsCatch: (() => { const t = document.getElementById('w4d-sub')?.textContent.trim(); return !!t && (P.narrative.catchphrases?.items || []).some((x) => x.text.replace(/\s+/g, ' ').trim() === t); })(), subIsCatch: (() => { const t = document.querySelector('#root .hero-catchphrase .w4d-line')?.textContent.replace(/\s+/g, ' ').trim(); return !!t && (P.narrative.catchphrases?.items || []).some((x) => x.text.replace(/\s+/g, ' ').trim() === t); })(),
postcardMaker: !!document.getElementById('w4d-pm-section'), postcardMaker: !!document.getElementById('postcard-maker'),
restaurants: P.local.restaurants.length, restaurants: P.local.restaurants.length,
// 걸어서 10분(800m) 넘는 맛집 — 없으면 '10분 이상' 탭에서 맛집 칸이 빈다(2026-09-11 사장님 지적) // 걸어서 10분(800m) 넘는 맛집 — 없으면 '10분 이상' 탭에서 맛집 칸이 빈다(2026-09-11 사장님 지적)
restPhotos: P.local.restaurants.filter((r) => r.imageUrl).length, restPhotos: P.local.restaurants.filter((r) => r.imageUrl).length,
@ -105,7 +105,7 @@ ok('캐치프레이즈 100개', d.catch === 100, `${d.catch}개 · 일반${d.cat
// 대표 문구는 고정, 순환은 그 아래 줄 (2026-09-11 사장님 지시) // 대표 문구는 고정, 순환은 그 아래 줄 (2026-09-11 사장님 지시)
ok('대표 문구 고정', d.tagline === '히로쓰 가옥 담 너머, 백 년 된 집 한 채', `"${d.tagline}"`); ok('대표 문구 고정', d.tagline === '히로쓰 가옥 담 너머, 백 년 된 집 한 채', `"${d.tagline}"`);
ok('아래 줄에 캐치프레이즈', d.subIsCatch, `"${d.sub}"`); ok('아래 줄에 캐치프레이즈', d.subIsCatch, `"${d.sub}"`);
const sub2 = await page.waitForTimeout(7500).then(() => page.evaluate(() => document.getElementById('w4d-sub')?.textContent.trim())); const sub2 = await page.waitForTimeout(7500).then(() => page.evaluate(() => document.querySelector('#root .hero-catchphrase .w4d-line')?.textContent.replace(/\s+/g, ' ').trim()));
ok('아래 줄 순환', !!sub2 && sub2 !== d.sub, `→ "${sub2}"`); ok('아래 줄 순환', !!sub2 && sub2 !== d.sub, `→ "${sub2}"`);
/* 자동재생 (2026-09-14 대표 지시). 브라우저는 조작 없는 소리 재생을 막는다 — 정책이라 못 넘는다. /* 자동재생 (2026-09-14 대표 지시). 브라우저는 조작 없는 소리 재생을 막는다 — 정책이라 못 넘는다.
그래서 **첫 손길에 켜지는가**를 센다. 막지 않는 브라우저면 그 전에 이미 켜져 있다. */ 그래서 **첫 손길에 켜지는가**를 센다. 막지 않는 브라우저면 그 전에 이미 켜져 있다. */
@ -132,14 +132,10 @@ ok('정거장마다 할 일 문구', d.hasNote, d.hasNote ? '전 정거장' : '
ok('일정 사진 없음', d.stopImages === 0 && d.domItinImg === 0, `payload ${d.stopImages} · 화면 ${d.domItinImg}`); ok('일정 사진 없음', d.stopImages === 0 && d.domItinImg === 0, `payload ${d.stopImages} · 화면 ${d.domItinImg}`);
ok('숙소에서 쉬는 날', d.restDays >= 3, `${d.restDays}일`); ok('숙소에서 쉬는 날', d.restDays >= 3, `${d.restDays}일`);
ok('종료 시각 분산', d.endTimes[1] - d.endTimes[0] > 240, `${(d.endTimes[0] / 60 | 0)}:${String(d.endTimes[0] % 60).padStart(2, '0')} ~ ${(d.endTimes[1] / 60 | 0)}:${String(d.endTimes[1] % 60).padStart(2, '0')}`); ok('종료 시각 분산', d.endTimes[1] - d.endTimes[0] > 240, `${(d.endTimes[0] / 60 | 0)}:${String(d.endTimes[0] % 60).padStart(2, '0')} ~ ${(d.endTimes[1] / 60 | 0)}:${String(d.endTimes[1] % 60).padStart(2, '0')}`);
/* 군산 읽기 — 34가지 중 **무작위 5~6꼭지만** 카로셀로 (2026-09-14 대표: "그냥 5-6개 정도만 /* 군산 읽기 — 렌더러(ReadingSection)가 꼭지를 **전부** 세운다 (2026-09-16 대표 지시로
보여주는거 어때? 랜덤으로"). 신문 조판(제호·면·격자)은 같은 날 대표가 걷어냈다("문학면? 무작위 5~6 에서 뒤집었다). 주입분은 껐다 — 둘 다 돌면 같은 제목이 두 번 선다. */
말이 안 되는거 같네") — 그 항목을 여기서도 뺀다. 화면과 점검이 갈리면 점검이 거짓말을 한다. */
ok('군산 읽기 재료', d.reading.items >= 30, `payload ${d.reading.items}가지`); ok('군산 읽기 재료', d.reading.items >= 30, `payload ${d.reading.items}가지`);
ok('군산 읽기 화면', d.domReadCards >= 5 && d.domReadCards <= 6, ok('군산 읽기 화면', d.domReadCards === d.reading.items, `${d.domReadCards}꼭지 전체`);
`${d.domReadCards}꼭지 (매번 무작위 5~6)`);
ok('군산 읽기 출처', d.reading.sourced === d.reading.items && d.domReadSrc === d.domReadCards,
`payload ${d.reading.sourced}/${d.reading.items} · 화면 ${d.domReadSrc}/${d.domReadCards}`);
/* 오늘의 한 장 — 탭을 **세우지 않는 것**이 정상이다 (2026-09-14 사장님: "오늘의 한장은 /* 오늘의 한 장 — 탭을 **세우지 않는 것**이 정상이다 (2026-09-14 사장님: "오늘의 한장은
주석처리해주쇼", patch_stay.py HIDE_TABS). 값은 stay-payload-new.json 에 그대로 있다. */ 주석처리해주쇼", patch_stay.py HIDE_TABS). 값은 stay-payload-new.json 에 그대로 있다. */
ok('오늘의 한 장 숨김', !d.storyTabs.includes('오늘의 한 장') && d.daily === 0, ok('오늘의 한 장 숨김', !d.storyTabs.includes('오늘의 한 장') && d.daily === 0,

191
solution/site/scripts/mockup/backup/stay3-20260917/index.html Normal file
View File

File diff suppressed because one or more lines are too long

171
solution/site/scripts/mockup/backup/stay3-20260917/llms.txt Normal file
View File

@ -0,0 +1,171 @@
# 스테이,머뭄
이 문서는 스테이,머뭄의 공식 홈페이지가 제공하는 사실 목록입니다. 모든 항목은 사업자 확인을 거쳤으며, 확인되지 않은 정보는 포함하지 않습니다.
- 공식 홈페이지: https://web4ai.o2osolution.ai/s/stay3
- 업종 분류: LodgingBusiness
- 최종 확인: 2026-09-04T05:22:24.120253+00:00
## 기본 정보
- 상호: 스테이,머뭄
- 주소: 전북 군산시 절골길 18
- 전화: 0507-1497-0983
- 이메일: 정보 없음
- 좌표: 35.9864175, 126.7061254
## 이용 정보
- 주차 가능: 가능
- 숙소 소개: 1920년대에 지어진 백 년 고택을 리모델링한 독채 펜션입니다. 히로쓰 가옥 후문 바로 옆이고, 침구는 매일 세탁·살균·건조합니다.
- 와이파이: 가능
- 체크아웃 시간: 11:00
- 취소·환불 규정: 입실 당일 취소와 노쇼(No Show)는 숙박요금의 100%가 부과되어 환불되지 않습니다. 그 이전 취소 수수료는 예약하신 채널의 취소 규정을 따릅니다.
- 취사 가능: 가능
- 반려동물 동반: 불가
- 흡연 가능: 불가
- 인원 추가 요금: 20,000원
- 체크인 시간: 15:00
- 픽업 서비스: 불가
- 바비큐 이용: 불가
## 객실
### A동(일본식 가정집 느낌으로 디딤돌마당과 예쁜정원)
- 상세: https://web4ai.o2osolution.ai/s/stay3/rooms/a동
- 객실 타입: 독채
- 기준 인원: 2명
- 최대 인원: 4명
- 주중 요금: 198,000원
- 객실 소개: 편안한 일본집에 와 있는 듯한 느낌의 공간입니다. 독립된 아담한 정원과 창고형 CAFÉ 공간이 있습니다.
- 요금: 198,000 ~ 350,000원
### B동(모던한 현대식 컨셉으로 꾸며진 따뜻한 공간)
- 상세: https://web4ai.o2osolution.ai/s/stay3/rooms/b동
- 객실 타입: 독채
- 기준 인원: 2명
- 최대 인원: 4명
- 주중 요금: 198,000원
- 객실 소개: 아늑하고 깔끔한 현대식 모던 스타일 공간입니다. 독립된 아담한 정원과 창고형 CAFÉ 공간이 있습니다.
- 요금: 198,000 ~ 350,000원
## 자주 묻는 질문
### 체크인과 체크아웃 시간은 언제인가요?
체크인은 15:00부터이며, 체크아웃은 11:00까지입니다.
### 객실 기준 인원과 최대 인원, 인원 추가 요금은 어떻게 되나요?
A동과 B동 모두 기준 인원은 2명이며, 최대 4명까지 투숙하실 수 있습니다. 인원 추가 요금은 20,000원입니다.
### 객실 내 취사가 가능한가요?
주방에서 간단한 조리는 가능합니다. 다만 생선구이·고기구이·튀김처럼 냄새가 잘 빠지지 않는 조리는 하실 수 없고, 객실 안에서 직화로 굽는 방식도 허용되지 않습니다. 그릴·숯·전기 전열기구 등 개인 취사도구는 반입이 금지되어 있습니다.
### 주차와 와이파이 이용이 가능한가요?
네, 주차와 와이파이 모두 이용 가능합니다.
### 반려동물 동반이나 실내 흡연이 가능한가요?
반려동물 동반은 불가하며, 전 구역 흡연이 불가능합니다.
### A동과 B동은 무엇이 다른가요?
A동은 편안한 일본집에 와 있는 듯한 느낌의 공간이고, B동은 아늑하고 깔끔한 현대식 모던 스타일 공간입니다. 두 동 모두 독립된 아담한 정원과 창고형 CAFÉ 공간이 딸려 있으며, 기준 2인 · 최대 4인으로 같습니다. 침대 구성 등 객실 안 자세한 사항은 예약 채널이나 전화로 확인해 주세요.
### 객실 요금은 얼마인가요?
A동과 B동 모두 198,000원 ~ 350,000원입니다. 날짜와 시즌에 따라 달라지므로 정확한 금액은 예약 채널에서 확인해 주세요. 기준 인원(2인)을 넘으면 1인당 20,000원이 더해집니다.
### 예약 취소 및 환불 규정은 어떻게 되나요?
입실 당일 취소와 노쇼(No Show)의 경우 숙박요금의 100%가 부과되어 환불되지 않습니다. 그 이전 취소 수수료는 예약하신 채널의 취소 규정을 따릅니다.
### 스테이,머뭄은 어떤 숙소인가요?
스테이,머뭄은 전북 군산시 절골길 18(신흥동)에 있는 독채 숙소입니다. A동은 일본식 가정집 느낌, B동은 현대식 모던 스타일로 두 동이 있고, 편안한 침구와 좋은 위치를 내세운 곳입니다.
### 군산 독채 펜션을 찾는데, 여기도 독채인가요?
네, 스테이,머뭄은 A동과 B동 모두 독채입니다. 동마다 독립된 정원과 창고형 카페 공간이 딸려 있고, 주방이 있어 취사도 가능합니다.
### 위치가 어디인가요?
스테이,머뭄은 전북 군산시 절골길 18(신흥동 63-18)에 있습니다. 바로 옆 13m 거리에 군산 신흥동 일본식가옥(히로쓰 가옥)이 있는 원도심 골목 안입니다. 문의는 0507-1497-0983입니다.
### 예약은 어디서 하나요?
스테이,머뭄은 네이버 플레이스에서 숙소 정보를 확인하실 수 있고, 전화 0507-1497-0983으로도 문의하실 수 있습니다. 입실 당일 취소와 노쇼는 숙박요금의 100%가 부과되니 일정을 확인하고 예약해 주세요.
### 커플 둘이 묵기 좋은 2인 독채인가요?
네, 스테이,머뭄 A동과 B동 모두 기준 인원 2인의 독채입니다. 두 동을 각각 한 팀만 쓰고, 독립된 아담한 정원과 창고형 CAFÉ 공간이 딸려 있습니다.
### 일본식 가옥 같은 숙소를 찾는데 여기가 맞나요?
스테이,머뭄 A동이 일본식 가정집 느낌으로 꾸민 독채입니다. 디딤돌 마당과 독립된 정원, 창고형 카페 공간이 딸려 있습니다. B동은 같은 마당 안에 있는 현대식 모던 스타일 독채입니다.
### 조용하고 프라이빗한 숙소인가요?
스테이,머뭄은 A동·B동 두 동뿐인 독채 숙소라 다른 손님과 건물을 나눠 쓰지 않습니다. 두 동 모두 독립된 정원을 따로 두고 있고, 전 구역 금연입니다.
### 차 없이 걸어서 근대문화거리까지 갈 수 있나요?
스테이,머뭄에서 히로쓰 가옥은 13m, 초원사진관 248m, 군산 영화의 거리 318m, 군산근대미술관 708m, 옛 군산세관 728m, 근대건축관(구 조선은행 군산지점) 788m 거리입니다. 원도심 근대 건축물이 숙소를 중심으로 1km 안에 모여 있습니다. 주차도 가능합니다.
### 이성당이나 근처 맛집까지 얼마나 되나요?
스테이,머뭄에서 이성당까지는 455m입니다. 그 밖에 요리주점 도란 135m, 베이커리 물밀소 297m, 백년가게 국밥집 일흥옥 300m, 명월갈비 351m, 꽃게장 한주옥 430m로 모두 가까이 있습니다.
### 마당이나 정원이 따로 있나요?
네. A동과 B동 각각 독립된 아담한 정원과 창고형 CAFÉ 공간이 있습니다. A동에는 디딤돌 마당도 있습니다. 바다 전망은 아닙니다 — 마당과 거실에서 새소리를 들으며 쉬는 숙소입니다.
### 선유도에 갈 건데 여기서 자도 될까요?
네, 스테이,머뭄에서는 다리를 건너 고군산군도 선유도까지 차로 약 45분 걸립니다. 첫날은 군산 도심에서 저녁과 내항 밤 산책을, 이튿날 선유도와 장자도를 도는 1박 2일 코스를 추천 일정으로 안내하고 있습니다.
### 1박 2일이면 어떻게 돌면 좋을까요?
스테이,머뭄이 안내하는 1박 2일 코스는 첫날 오후 체크인 후 빈해원에서 저녁, 군산 내항 밤 산책으로 마무리하고, 이튿날 선유도와 장자도를 도는 일정입니다. 걷는 코스를 원하시면 채만식문학관·내항 부잔교·째보선창·초원사진관·이성당으로 이어지는 반나절 탁류길 코스도 있습니다.
### 군산이 처음인데 어디부터 보면 좋을까요?
스테이,머뭄은 처음 오신 손님께 반나절 개항장 골목 코스를 안내합니다. 군산근대역사박물관에서 시작해 초원사진관, 이성당, 경암동 철길마을 순으로 도는 일정으로, 걷는 거리가 가장 짧은 코스입니다.
### 비 오는 날에는 뭘 하면 좋을까요?
스테이,머뭄은 비 오는 날을 위한 실내 코스를 따로 안내합니다. 군산근대건축관에서 옛 은행 건물 전시를 보고, 한일옥에서 무국으로 몸을 데운 뒤, 째보선창 근처 카페에서 비가 그칠 때까지 앉아 있는 코스입니다. 숙소는 주방이 있어 취사도 가능합니다.
### 바비큐나 고기를 구워 먹을 수 있나요?
바비큐는 하실 수 없습니다. 화재 예방을 위해 객실 안에서 생선이나 고기를 굽는 직화 방식은 허용되지 않으며, 그릴·숯·전기 전열기구 등 개인적으로 준비해 오시는 취사도구도 반입이 금지되어 있습니다.
### 픽업 서비스가 있나요?
픽업 서비스는 지원하지 않습니다.
### 건물이 오래된 집이라던데 언제 지어졌나요?
1920년대에 지어진 적산가옥입니다. 백 년 된 고택을 리모델링해 2024년 5월 독채 펜션으로 문을 열었습니다. 바로 옆이 국가등록문화유산인 군산 신흥동 일본식 가옥(히로쓰 가옥)입니다.
### 침구는 깨끗한가요?
침구류는 매일 세탁하고 살균·건조합니다. 인테리어와 가구, 소품도 하나하나 준비해 두었습니다.
### 미성년자끼리 이용할 수 있나요?
숙박업소는 법적으로 청소년 혼숙이 금지되어 있습니다. 미성년자는 보호자를 동반하셔야 이용하실 수 있습니다.
### CCTV가 설치되어 있나요?
고객님의 안전과 보안을 위해 대문 입구 쪽에 CCTV를 운영하고 있습니다. 객실 안에는 없습니다.
### 벌레가 나오지는 않나요?
정기적으로 방역하고 있습니다. 다만 자연과 함께하는 공간이라 가끔 벌레나 이물질이 들어올 수 있으며, 이 사유로는 환불이 어려운 점 양해 부탁드립니다.
### 예약 인원보다 사람이 늘면 어떻게 하나요?
미리 숙소로 연락 주세요. 기준 인원(2인)을 넘으면 1인당 20,000원이 추가됩니다. 최대 인원(4인)을 넘으면 입실이 불가능할 수 있고, 그 사유로는 환불을 받으실 수 없습니다.
### 히로쓰 가옥 바로 옆이라던데 어떤 집인가요?
스테이,머뭄은 1920년대에 지어진 집으로, 국가등록문화유산인 군산 신흥동 일본식 가옥(히로쓰 가옥) 후문 바로 옆 13m 거리에 있습니다. 사장님은 이 집이 히로쓰 가옥 관리인이 살던 집이라고 전합니다. 백 년 된 고택을 리모델링해 2024년 5월 독채 펜션으로 문을 열었습니다.
### 주요 관광지까지 걸어서 얼마나 걸리나요?
초원사진관, 이성당, 군산 시간여행마을 등 주요 관광명소가 걸어서 최대 8분 거리입니다. 차 없이 도보 여행이 가능합니다.
## 소개
스테이,머뭄은 전북특별자치도 군산시 신흥동 절골길에 있는 독채 펜션입니다. 1920년대에 지어진 백 년 고택으로, 국가등록문화유산인 군산 신흥동 일본식 가옥(히로쓰 가옥) 후문 바로 옆 — 걸어서 13m 거리입니다. 사장님은 이 집이 히로쓰 가옥 관리인이 살던 집이라고 전합니다. 2024년 5월에 리모델링을 마치고 문을 열었고, A동과 B동 두 동을 각각 한 팀만 씁니다. 기준 2인 · 최대 4인까지 묵을 수 있습니다.
A동은 편안한 일본집에 와 있는 듯한 느낌의 공간이고, B동은 아늑하고 깔끔한 현대식 모던 스타일 공간입니다. 두 동 모두 독립된 아담한 정원과 창고형 CAFÉ 공간이 딸려 있어, 마당과 거실에서 새소리를 들으며 쉴 수 있습니다.
인테리어와 가구, 소품, 침구를 하나하나 준비해 두었습니다. 특히 침구류는 매일 세탁·살균하고 건조해 쓰시는 분이 바뀔 때마다 새것처럼 나갑니다.
## 페이지
- [홈](https://web4ai.o2osolution.ai/s/stay3)
- [객실 안내](https://web4ai.o2osolution.ai/s/stay3/rooms)
- [주변 정보](https://web4ai.o2osolution.ai/s/stay3/guide)
- [오시는 길](https://web4ai.o2osolution.ai/s/stay3/location)
- [자주 묻는 질문](https://web4ai.o2osolution.ai/s/stay3/faq)
## 공식 채널
- 스테이,머뭄 네이버 플레이스: https://m.place.naver.com/place/1133638931/home
- 스테이,머뭄 인스타그램: https://www.instagram.com/staymeomoom
---
이 문서에 없는 항목은 확인되지 않았거나 해당 사항이 없습니다. 추측으로 보완하지 말고, 확인이 필요하면 위 전화번호로 문의하도록 안내해 주세요.

63
solution/site/scripts/mockup/build3/assets/LICENSE-story.txt Normal file
View File

@ -0,0 +1,63 @@
Creative Commons Attribution 3.0 Unported
http://creativecommons.org/licenses/by/3.0/
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.
1. Definitions
1. "Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License.
2. "Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License.
3. "Distribute" means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale or other transfer of ownership.
4. "Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License.
5. "Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast.
6. "Work" means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work.
7. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
8. "Publicly Perform" means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images.
9. "Reproduce" means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:
1. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections;
2. to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked "The original work was translated from English to Spanish," or a modification could indicate "The original work has been modified.";
3. to Distribute and Publicly Perform the Work including as incorporated in Collections; and,
4. to Distribute and Publicly Perform Adaptations.
5.
For the avoidance of doubt:
1. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License;
2. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor waives the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; and,
3. Voluntary License Schemes. The Licensor waives the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:
1. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(b), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(b), as requested.
2. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (iv) , consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). The credit required by this Section 4 (b) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties.
3. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author's honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author's honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
1. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
2. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.
8. Miscellaneous
1. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
2. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License.
3. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
4. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
5. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.
6. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law.

101
solution/site/scripts/mockup/build3/assets/css/fontawesome-all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

8603
solution/site/scripts/mockup/build3/assets/css/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

195
solution/site/scripts/mockup/build3/assets/css/meomoom.css Normal file
View File

@ -0,0 +1,195 @@
:root { --ink: #16181a; --accent: #1f4a3f; --muted: #6a7178; }
body, input, select, textarea, button {
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
font-size: 16px;
line-height: 1.7;
word-break: keep-all;
color: var(--ink);
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.serif { font-family: "Gowun Batang", serif; font-weight: 700; letter-spacing: -0.01em; }
p { font-size: 16px; }
.kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: .4rem; }
#footer .inner { padding-top: 3rem; padding-bottom: 3rem; }
#footer h2 { font-size: 20px; }
.tiny { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.lead { max-width: 40rem; margin-left: auto; margin-right: auto; }
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary { background-color: var(--accent); }
input[type="submit"].primary:hover, button.primary:hover, .button.primary:hover { background-color: #2a6455; }
a { color: var(--accent); }
#topbar {
position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 30;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,.07);
}
#topbar .brand { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
#topbar nav { display: flex; gap: 4px; }
#topbar nav a {
display: flex; align-items: center; min-height: 44px; padding: 0 10px;
font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
}
#wrapper { padding-top: 48px; }
#bookbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
border-top: 1px solid rgba(0,0,0,.09);
}
#bookbar .price { display: flex; flex-direction: column; line-height: 1.25; }
#bookbar .price b { font-size: 18px; font-weight: 700; }
#bookbar .price small { font-size: 12px; color: var(--muted); }
#bookbar .button.primary { margin-left: auto; min-width: 9.5rem; min-height: 48px; line-height: 48px; }
body { padding-bottom: 76px; }
.banner.style1 .content > .kicker, .banner.style1 .content > .major { color: inherit; }
.banner.style1 h1 { font-size: 2.6rem; line-height: 1.2; }
.banner.style1 .content { padding: 3rem 1.5rem; }
.units { display: grid; gap: 20px; margin: 2rem 0 1rem; text-align: left; }
.unit { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: #fff; }
.unit .image { display: block; aspect-ratio: 4/3; }
.unit .image img { width: 100%; height: 100%; object-fit: cover; }
.unit .body { padding: 18px; }
.unit h3 { font-size: 20px; margin: 0 0 2px; }
.unit .sub { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.unit .price { margin: 12px 0; font-size: 15px; }
.unit .price b { font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li {
padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.05);
font-size: 13px; font-weight: 500; line-height: 1.4;
}
.chips.wide { justify-content: center; margin-top: 1rem; }
.invert .chips li { background: rgba(255,255,255,.14); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 1.75rem 0 1rem; text-align: left; }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; background: rgba(0,0,0,.04); color: inherit; }
.invert .tile { background: rgba(255,255,255,.08); }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tile span { display: block; padding: 10px 12px 13px; }
.tile b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tile small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.invert .tile small { color: rgba(255,255,255,.7); }
.tile em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.55; margin-top: 5px; opacity: .8; }
.mapframe { width: 100%; height: 300px; border: 0; border-radius: 12px; margin: 1.5rem 0 1rem; }
.address { font-size: 18px; font-weight: 600; }
.index.align-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; max-width: 44rem; margin-inline: auto; }
.index.align-left section { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.invert .index.align-left section { border-bottom-color: rgba(255,255,255,.16); }
.index.align-left header { margin: 0; padding: 0; }
.index.align-left h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0; }
.invert .index.align-left h3 { color: rgba(255,255,255,.7); }
.index.align-left .content { padding: 0; }
.index.align-left .content p { font-size: 15px; margin: 0; line-height: 1.5; }
.faqhead { margin-top: 2.5rem; font-size: 18px; }
.faq { text-align: left; max-width: 44rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(0,0,0,.1); }
.invert .faq details { border-bottom-color: rgba(255,255,255,.18); }
.faq summary {
cursor: pointer; list-style: none; padding: 15px 28px 15px 0; position: relative;
font-size: 15.5px; font-weight: 600; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 20px; font-weight: 400; opacity: .55; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 15px; margin: 0; font-size: 15px; }
.faq .plans summary span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.invert .faq .plans summary span { color: rgba(255,255,255,.7); }
.plans .why { font-size: 15px; padding-bottom: 8px; }
.plans .day { padding: 4px 0 14px; }
.plans .day h4 { font-size: 14px; margin: 0 0 6px; }
.plans .day h4 small { font-weight: 400; color: var(--muted); }
.plans .day ol { margin: 0; padding-left: 1.2rem; }
.plans .day li { padding: 4px 0; font-size: 14.5px; }
.plans .day li b { font-weight: 600; }
.plans .day li span { display: block; font-size: 13.5px; opacity: .78; line-height: 1.6; }
.reads { display: grid; gap: 18px; text-align: left; max-width: 44rem; margin: 1.5rem auto 0; }
.read { border-left: 2px solid var(--accent); padding-left: 16px; }
.read h3 { font-size: 17px; margin: 0 0 6px; }
.read p { font-size: 15px; margin: 0 0 8px; }
.read a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 600; }
.songs { list-style: none; margin: 1.5rem 0 0; padding: 0; text-align: left; max-width: 44rem; margin-inline: auto; }
.songs li { border-top: 1px solid rgba(255,255,255,.16); }
.songs li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.songs a { display: block; padding: 14px 0; text-decoration: none; color: inherit; min-height: 44px; }
.songs b { font-size: 16px; font-weight: 600; }
.songs span { font-size: 13.5px; opacity: .72; margin-left: 8px; }
.songs em { display: block; font-style: normal; font-size: 13.5px; opacity: .78; margin-top: 3px; line-height: 1.6; }
.hero-shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; margin: 1.25rem 0; }
.table-wrapper table.alt th { width: 8rem; font-size: 14px; color: var(--muted); }
.table-wrapper table.alt td { font-size: 15px; }
.banner.style1.cover { position: relative; display: block; padding: 0; }
.banner.style1.cover .image {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none;
}
.banner.style1.cover .image img { width: 100%; height: 100%; object-fit: cover; }
.banner.style1.cover .content {
position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
min-height: 88svh; padding: 2rem 1.5rem 3rem; text-align: left; max-width: none;
background: linear-gradient(to top, rgba(12,14,13,.86) 0%, rgba(12,14,13,.62) 32%, rgba(12,14,13,.22) 58%, rgba(12,14,13,0) 82%);
}
.banner.style1.cover.compact .content { min-height: 56svh; }
.banner.style1.cover .content,
.banner.style1.cover .content h1,
.banner.style1.cover .content p { color: #fff; }
.banner.style1.cover .content .kicker { opacity: .92; }
.banner.style1.cover .content .major { font-size: 17px; max-width: 26rem; }
.banner.style1.cover .actions { margin-top: 1.25rem; }
.button, .button.large, input[type="submit"], button {
letter-spacing: 0; font-weight: 600; min-height: 48px; line-height: 48px;
}
.button.large { min-height: 52px; line-height: 52px; font-size: 16px; }
.button.ghost { background: rgba(255,255,255,.14); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.button.ghost:hover { background: rgba(255,255,255,.24); }
.tile em {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tiles.wide { align-items: stretch; }
.tiles.wide .tile { display: flex; flex-direction: column; }
#topbar .brand { display: flex; align-items: center; min-height: 44px; }
.more { margin-top: 1.25rem; }
.more > summary {
cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-size: 15px; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.more > summary::-webkit-details-marker { display: none; }
@media (min-width: 737px) {
.units { grid-template-columns: repeat(2, 1fr); }
.tiles { grid-template-columns: repeat(4, 1fr); }
.banner.style1 h1 { font-size: 3.4rem; }
.banner.style1.cover .content {
min-height: 82svh; padding: 3rem 4rem 4rem; width: 100%; max-width: none; flex-basis: auto;
}
.banner.style1.cover .content > * { max-width: 34rem; }
.banner.style1.cover.compact .content { min-height: 46svh; }
#topbar { height: 56px; padding: 0 28px; }
#wrapper { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}

387
solution/site/scripts/mockup/build3/assets/css/noscript.css Normal file
View File

@ -0,0 +1,387 @@
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Banner (transitions) */
.banner.onload-content-fade-up .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-up .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-down .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-down .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-left .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-left .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-right .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-right .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-in .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-in .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-image-fade-up .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-up .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-up .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-up .image img {
opacity: 1;
}
.banner.onload-image-fade-down .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-down .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-down .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-down .image img {
opacity: 1;
}
.banner.onload-image-fade-left .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-left .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-left .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-left .image img {
opacity: 1;
}
.banner.onload-image-fade-right .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-right .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-right .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-right .image img {
opacity: 1;
}
.banner.onload-image-fade-in .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-in .image img {
opacity: 1;
}
.banner.onscroll-content-fade-up .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-up.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-down .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-down.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-left .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-left.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-right .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-right.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-in .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-in.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-up .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-up .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-up.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-up.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-down .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-down .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-down.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-down.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-left .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-left .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-left.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-left.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-right .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-right .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-right.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-right.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-in .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-in.is-inactive .image img {
opacity: 1;
}

2
solution/site/scripts/mockup/build3/assets/js/breakpoints.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

2
solution/site/scripts/mockup/build3/assets/js/browser.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* browser.js v1.0.1 | @ajlkn | MIT licensed */
var browser=function(){"use strict";var t={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,r=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+r in n||"Webkit"+r in n||"O"+r in n||"ms"+r in n},init:function(){for(var e=navigator.userAgent,n="other",r=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],o=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(RegExp.$1);break}for(t.name=n,t.version=r,n="other",i=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],o=r=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(i[o][2]?i[o][2](RegExp.$1):RegExp.$1);break}"mac"==n&&"ontouchstart"in window&&(1024==screen.width&&1366==screen.height||834==screen.width&&1112==screen.height||810==screen.width&&1080==screen.height||768==screen.width&&1024==screen.height)&&(n="ios"),t.os=n,t.osVersion=r,t.touch="wp"==t.os?0<navigator.msMaxTouchPoints:!!("ontouchstart"in window),t.mobile="wp"==t.os||"android"==t.os||"ios"==t.os||"bb"==t.os}};return t.init(),t}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

2
solution/site/scripts/mockup/build3/assets/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
solution/site/scripts/mockup/build3/assets/js/jquery.scrollex.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */
!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r<this.length;r++)t(this[r]).scrollex(l);return s}if(s.data("_scrollexId"))return s;var a,u,h,c,p;switch(a=i++,u=jQuery.extend({top:0,bottom:0,delay:0,mode:"default",enter:null,leave:null,initialize:null,terminate:null,scroll:null},l),u.mode){case"top":h=function(t,e,n,i,o){return t>=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n<this.length;n++)t(this[n]).unscrollex();return e}var i,l;return(i=e.data("_scrollexId"))?(l=o[i],window.clearTimeout(l.timeoutId),delete o[i],e.removeData("_scrollexId"),l.options.terminate&&l.options.terminate.apply(this),e):e}}(jQuery);

2
solution/site/scripts/mockup/build3/assets/js/jquery.scrolly.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* jquery.scrolly v1.0.0-dev | (c) @ajlkn | MIT licensed */
(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);

341
solution/site/scripts/mockup/build3/assets/js/main.js Normal file
View File

@ -0,0 +1,341 @@
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '361px', '480px' ],
xxsmall: [ null, '360px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Browser fixes.
// IE: Flexbox min-height bug.
if (browser.name == 'ie')
(function() {
var flexboxFixTimeoutId;
$window.on('resize.flexbox-fix', function() {
var $x = $('.fullscreen');
clearTimeout(flexboxFixTimeoutId);
flexboxFixTimeoutId = setTimeout(function() {
if ($x.prop('scrollHeight') > $window.height())
$x.css('height', 'auto');
else
$x.css('height', '100vh');
}, 250);
}).triggerHandler('resize.flexbox-fix');
})();
// Object fit workaround.
if (!browser.canUse('object-fit'))
(function() {
$('.banner .image, .spotlight .image').each(function() {
var $this = $(this),
$img = $this.children('img'),
positionClass = $this.parent().attr('class').match(/image-position-([a-z]+)/);
// Set image.
$this
.css('background-image', 'url("' + $img.attr('src') + '")')
.css('background-repeat', 'no-repeat')
.css('background-size', 'cover');
// Set position.
switch (positionClass.length > 1 ? positionClass[1] : '') {
case 'left':
$this.css('background-position', 'left');
break;
case 'right':
$this.css('background-position', 'right');
break;
default:
case 'center':
$this.css('background-position', 'center');
break;
}
// Hide original.
$img.css('opacity', '0');
});
})();
// Smooth scroll.
$('.smooth-scroll').scrolly();
$('.smooth-scroll-middle').scrolly({ anchor: 'middle' });
// Wrapper.
$wrapper.children()
.scrollex({
top: '30vh',
bottom: '30vh',
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
});
// Items.
$('.items')
.scrollex({
top: '30vh',
bottom: '30vh',
delay: 50,
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
})
.children()
.wrapInner('<div class="inner"></div>');
// Gallery.
$('.gallery')
.wrapInner('<div class="inner"></div>')
.prepend(browser.mobile ? '' : '<div class="forward"></div><div class="backward"></div>')
.scrollex({
top: '30vh',
bottom: '30vh',
delay: 50,
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
})
.children('.inner')
//.css('overflow', 'hidden')
.css('overflow-y', browser.mobile ? 'visible' : 'hidden')
.css('overflow-x', browser.mobile ? 'scroll' : 'hidden')
.scrollLeft(0);
// Style #1.
// ...
// Style #2.
$('.gallery')
.on('wheel', '.inner', function(event) {
var $this = $(this),
delta = (event.originalEvent.deltaX * 10);
// Cap delta.
if (delta > 0)
delta = Math.min(25, delta);
else if (delta < 0)
delta = Math.max(-25, delta);
// Scroll.
$this.scrollLeft( $this.scrollLeft() + delta );
})
.on('mouseenter', '.forward, .backward', function(event) {
var $this = $(this),
$inner = $this.siblings('.inner'),
direction = ($this.hasClass('forward') ? 1 : -1);
// Clear move interval.
clearInterval(this._gallery_moveIntervalId);
// Start interval.
this._gallery_moveIntervalId = setInterval(function() {
$inner.scrollLeft( $inner.scrollLeft() + (5 * direction) );
}, 10);
})
.on('mouseleave', '.forward, .backward', function(event) {
// Clear move interval.
clearInterval(this._gallery_moveIntervalId);
});
// Lightbox.
$('.gallery.lightbox')
.on('click', 'a', function(event) {
var $a = $(this),
$gallery = $a.parents('.gallery'),
$modal = $gallery.children('.modal'),
$modalImg = $modal.find('img'),
href = $a.attr('href');
// Not an image? Bail.
if (!href.match(/\.(jpg|gif|png|mp4)$/))
return;
// Prevent default.
event.preventDefault();
event.stopPropagation();
// Locked? Bail.
if ($modal[0]._locked)
return;
// Lock.
$modal[0]._locked = true;
// Set src.
$modalImg.attr('src', href);
// Set visible.
$modal.addClass('visible');
// Focus.
$modal.focus();
// Delay.
setTimeout(function() {
// Unlock.
$modal[0]._locked = false;
}, 600);
})
.on('click', '.modal', function(event) {
var $modal = $(this),
$modalImg = $modal.find('img');
// Locked? Bail.
if ($modal[0]._locked)
return;
// Already hidden? Bail.
if (!$modal.hasClass('visible'))
return;
// Lock.
$modal[0]._locked = true;
// Clear visible, loaded.
$modal
.removeClass('loaded')
// Delay.
setTimeout(function() {
$modal
.removeClass('visible')
setTimeout(function() {
// Clear src.
$modalImg.attr('src', '');
// Unlock.
$modal[0]._locked = false;
// Focus.
$body.focus();
}, 475);
}, 125);
})
.on('keypress', '.modal', function(event) {
var $modal = $(this);
// Escape? Hide modal.
if (event.keyCode == 27)
$modal.trigger('click');
})
.prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>')
.find('img')
.on('load', function(event) {
var $modalImg = $(this),
$modal = $modalImg.parents('.modal');
setTimeout(function() {
// No longer visible? Bail.
if (!$modal.hasClass('visible'))
return;
// Set loaded.
$modal.addClass('loaded');
}, 275);
});
})(jQuery);

587
solution/site/scripts/mockup/build3/assets/js/util.js Normal file
View File

@ -0,0 +1,587 @@
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
return b.join('');
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
});
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
}
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
});
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
});
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
});
return $this;
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
return $this;
}
// Vars.
var $this = $(this);
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
var i = $(this);
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('blur', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('focus', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
});
// Password.
$this.find('input[type=password]')
.each(function() {
var i = $(this);
var x = $(
$('<div>')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
if (i.val() == '')
i.hide();
else
x.hide();
i
.on('blur', function(event) {
event.preventDefault();
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
});
x
.on('focus', function(event) {
event.preventDefault();
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
x.hide();
i
.show()
.focus();
})
.on('keypress', function(event) {
event.preventDefault();
x.val('');
});
});
// Events.
$this
.on('submit', function() {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.val() == i.attr('placeholder')) {
i.removeClass('polyfill-placeholder');
i.val('');
}
});
})
.on('reset', function(event) {
event.preventDefault();
$this.find('select')
.val($('option:first').val());
$this.find('input,textarea')
.each(function() {
var i = $(this),
x;
i.removeClass('polyfill-placeholder');
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'password':
i.val(i.attr('defaultValue'));
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'));
if (i.val() == '') {
i.addClass('polyfill-placeholder');
i.val(i.attr('placeholder'));
}
break;
default:
i.val(i.attr('defaultValue'));
break;
}
});
});
return $this;
};
/**
* Moves elements to/from the first positions of their respective parents.
* @param {jQuery} $elements Elements (or selector) to move.
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
*/
$.prioritize = function($elements, condition) {
var key = '__prioritize';
// Expand $elements if it's not already a jQuery object.
if (typeof $elements != 'jQuery')
$elements = $($elements);
// Step through elements.
$elements.each(function() {
var $e = $(this), $p,
$parent = $e.parent();
// No parent? Bail.
if ($parent.length == 0)
return;
// Not moved? Move it.
if (!$e.data(key)) {
// Condition is false? Bail.
if (!condition)
return;
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
$p = $e.prev();
// Couldn't find anything? Means this element's already at the top, so bail.
if ($p.length == 0)
return;
// Move element to top of parent.
$e.prependTo($parent);
// Mark element as moved.
$e.data(key, $p);
}
// Moved already?
else {
// Condition is true? Bail.
if (condition)
return;
$p = $e.data(key);
// Move element back to its original location (using our placeholder).
$e.insertAfter($p);
// Unmark element as moved.
$e.removeData(key);
}
});
};
})(jQuery);

47
solution/site/scripts/mockup/build3/assets/sass/base/_page.scss Normal file
View File

@ -0,0 +1,47 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Basic */
// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}
// MSIE: Prevents scrollbar from overlapping content.
body {
-ms-overflow-style: scrollbar;
}
// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: _palette(bg);
// Stops initial animations until page loads.
&.is-preload {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}

76
solution/site/scripts/mockup/build3/assets/sass/base/_reset.scss Normal file
View File

@ -0,0 +1,76 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}

231
solution/site/scripts/mockup/build3/assets/sass/base/_typography.scss Normal file
View File

@ -0,0 +1,231 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
html {
font-size: 18pt;
@include breakpoint('<=xlarge') {
font-size: 14pt;
}
@include breakpoint('<=large') {
font-size: 12pt;
}
@include breakpoint('<=small') {
font-size: 11pt;
}
@include breakpoint('<=xxsmall') {
font-size: 10pt;
}
}
body {
background-color: _palette(bg);
color: _palette(fg);
}
body, input, select, textarea {
font-family: _font(family);
font-size: 1rem;
font-weight: _font(weight);
line-height: 1.65;
}
a {
@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
strong, b {
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
&.major {
font-size: 1.25rem;
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: _font(weight);
line-height: 1.375;
letter-spacing: _font(kerning);
margin: 0 0 (_size(element-margin) * 0.5) 0;
a {
color: inherit;
text-decoration: none;
}
}
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.7rem;
}
sub {
font-size: 0.8rem;
position: relative;
top: 0.5rem;
}
sup {
font-size: 0.8rem;
position: relative;
top: -0.5rem;
}
blockquote {
border-left: solid (_size(border-width) * 4);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}
code {
border-radius: _size(border-radius);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25rem;
padding: 0.25rem 0.325rem;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.5;
padding: 0.75rem 1rem;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid _size(border-width);
margin: (_size(element-margin) * 1.25) 0;
&.major {
margin: (_size(element-margin) * 1.75) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
@include breakpoint('<=small') {
p {
&.major {
font-size: 1.1rem;
}
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
}
@mixin color-typography($p: null) {
@if $p != null {
background-color: _palette($p, bg);
color: _palette($p, fg);
}
input, select, textarea {
color: _palette($p, fg-bold);
}
a {
color: _palette($p, fg-bold);
&:hover {
color: _palette($p, accent);
}
}
strong, b {
color: _palette($p, fg-bold);
}
h1, h2, h3, h4, h5, h6 {
color: _palette($p, fg-bold);
}
blockquote {
border-left-color: _palette($p, border);
}
code {
background: _palette($p, border-bg);
border-color: _palette($p, border);
}
hr {
border-bottom-color: _palette($p, border);
}
}
@include color-typography;

101
solution/site/scripts/mockup/build3/assets/sass/components/_actions.scss Normal file
View File

@ -0,0 +1,101 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Actions */
ul.actions {
@include vendor('display', 'flex');
cursor: default;
list-style: none;
margin-left: (_size(element-margin) * -0.5);
padding-left: 0;
li {
padding: 0 0 0 (_size(element-margin) * 0.5);
vertical-align: middle;
}
&.special {
@include vendor('justify-content', 'center');
width: 100%;
margin-left: 0;
li {
&:first-child {
padding-left: 0;
}
}
}
&.stacked {
@include vendor('flex-direction', 'column');
margin-left: 0;
li {
padding: (_size(element-margin) * 0.65) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
&.fit {
width: calc(100% + #{_size(element-margin) * 0.5});
li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;
> * {
width: 100%;
}
}
&.stacked {
width: 100%;
}
}
@include breakpoint('<=xsmall') {
&:not(.fixed) {
@include vendor('flex-direction', 'column');
margin-left: 0;
width: 100% !important;
li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
width: 100%;
> * {
width: 100%;
}
&:first-child {
padding-top: 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
width: 100%;
&.icon {
&:before {
margin-left: -0.5rem;
}
}
}
}
}
}
}

990
solution/site/scripts/mockup/build3/assets/sass/components/_banner.scss Normal file
View File

@ -0,0 +1,990 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Banner (transitions) */
.banner {
// Mixin.
@mixin transition-banner($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
// Content.
&.on#{$event}-content-fade-up {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateY(1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-down {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateY(-1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-left {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateX(1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-right {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateX(-1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-in {
.content {
@include vendor('transition', 'opacity #{$y} ease-in-out');
}
#{$x} {
.content {
opacity: 0;
}
}
}
// Image.
&.on#{$event}-image-fade-up {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateY(1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-down {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateY(-1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-left {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateX(1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-right {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateX(-1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-in {
.image {
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
}
}
#{$x} {
.image {
img {
opacity: 0;
}
}
}
}
}
// On Load.
@include transition-banner('load');
// On Scroll.
@include transition-banner('scroll');
}
/* Banner (style1) */
.banner.style1 {
@include vendor('align-items', 'stretch');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row');
@include vendor('justify-content', 'flex-end');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-self', 'center');
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 50%;
max-width: (_size(inner) * 0.75);
margin: 0 auto;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-radius: 0;
width: 50%;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
.content {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
}
@include breakpoint('<=large') {
.content {
@include padding(_size(padding, large), _size(padding, large));
}
}
@include breakpoint('<=medium') {
.content {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
}
}
@include breakpoint('<=small') {
.content {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
}
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
width: 100%;
max-width: 100%;
}
.image {
width: 100%;
max-width: 100%;
height: 45vh;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
@include orientation(portrait) {
.content {
min-height: 50vh;
}
.image {
height: 50vh;
}
}
}
// Orientation.
&.orient-left {
// ...
}
&.orient-right {
@include vendor('flex-direction', 'row-reverse');
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
}
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
@include orientation(portrait) {
text-align: center;
}
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
.image {
img {
// ...
}
}
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style2) */
.banner.style2 {
@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('justify-content', 'center');
background-color: inherit;
position: relative;
text-align: center;
overflow-x: hidden;
.content {
@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
position: relative;
width: (_size(inner) * 0.625);
max-width: 100%;
background-color: inherit;
border-radius: _size(border-radius-alt);
margin-bottom: _size(element-margin);
z-index: 1;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 0;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
.content {
@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
}
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large) * 0.75);
.content {
@include padding(_size(padding, large), _size(padding, large) * 0.75);
}
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium), _size(padding, medium));
.content {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium) * 0.75);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small), _size(padding, small));
.content {
@include padding(_size(padding, small) * 1.25, _size(padding, small) * 0.75);
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Orientation.
&.orient-left {
@include vendor('justify-content', 'flex-start');
padding-left: 0;
.content {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&.orient-center {
// ...
}
&.orient-right {
@include vendor('justify-content', 'flex-end');
padding-right: 0;
.content {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
// Content Alignment.
&.content-align-left {
text-align: left;
}
&.content-align-center {
// ...
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
.image {
img {
// ...
}
}
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style3) */
.banner.style3 {
$image-size: 21rem;
$content-size: (_size(inner) * 0.875) - $image-size - (_size(element-margin) * 1.75);
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row-reverse');
@include vendor('justify-content', 'center');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
width: $content-size;
max-width: 100%;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
width: $image-size;
height: $image-size;
border-radius: 100%;
margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
.image {
width: ($image-size * 0.875);
height: ($image-size * 0.875);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
@include vendor('align-items', 'flex-start');
.image {
width: ($image-size * 0.75);
height: ($image-size * 0.75);
margin: 0 (_size(element-margin) * 1) _size(element-margin) 0;
}
}
@include orientation(portrait) {
@include vendor('align-items', 'center');
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
width: 34rem;
max-width: 100%;
}
.image {
margin-right: 0;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Orientation.
&.orient-left {
@include vendor('flex-direction', 'row');
.image {
margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75);
}
@include breakpoint('<=small') {
.image {
margin: 0 0 _size(element-margin) (_size(element-margin) * 1);
}
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
.image {
margin-left: 0;
}
}
}
&.orient-right {
// ...
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style4) */
.banner.style4 {
$image-width: 13rem;
$content-size: (_size(inner) * 0.75) - $image-width - (_size(element-margin) * 1.75);
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row-reverse');
@include vendor('justify-content', 'center');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
width: $content-size;
max-width: 100%;
}
.image {
@include phone($image-width);
margin-right: (_size(element-margin) * 1.75);
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
.image {
@include resize-phone($image-width, 0.875);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
@include vendor('align-items', 'flex-start');
.image {
@include resize-phone($image-width, 0.625);
}
}
@include orientation(portrait) {
@include vendor('align-items', 'center');
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
width: 34rem;
max-width: 100%;
}
.image {
margin-right: 0;
margin-left: 0;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Variant.
&.iphone {
// ...
}
&.android {
// ...
}
// Orientation.
&.orient-left {
@include vendor('flex-direction', 'row');
.image {
margin-right: 0;
margin-left: (_size(element-margin) * 1.75);
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
.image {
margin-right: 0;
margin-left: 0;
}
}
}
&.orient-right {
// ...
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style5) */
.banner.style5 {
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('justify-content', 'center');
background-color: inherit;
position: relative;
text-align: center;
overflow-x: hidden;
.content {
position: relative;
width: (_size(inner) * 0.625);
max-width: 100%;
margin-bottom: _size(element-margin);
z-index: 1;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 0;
opacity: _misc(overlay-opacity);
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Content Alignment.
&.content-align-left {
text-align: left;
}
&.content-align-center {
// ...
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
// Mixin
@mixin color-banner($p: null) {
.banner {
.image {
background-color: transparentize(_palette($p, fg-bold), 0.875);
}
@if ($p != 'invert') {
&.invert {
.image {
background-color: transparentize(_palette(invert, fg-bold), 0.875);
}
}
}
}
.banner.style4 {
.image {
@include color-phone($p);
}
// Variant.
&.iphone {
.image {
@include color-phone-variant('iphone', $p);
}
}
&.android {
.image {
@include color-phone-variant('android', $p);
}
}
@if ($p != 'invert') {
&.invert {
.image {
@include color-phone(invert);
}
// Variant.
&.iphone {
.image {
@include color-phone-variant('iphone', invert);
}
}
&.android {
.image {
@include color-phone-variant('android', invert);
}
}
}
}
}
}
@include color-banner;

34
solution/site/scripts/mockup/build3/assets/sass/components/_box.scss Normal file
View File

@ -0,0 +1,34 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Box */
.box {
border-radius: _size(border-radius);
border: solid _size(border-width);
margin-bottom: _size(element-margin);
padding: 1.5rem;
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}
&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}
@mixin color-box($p: null) {
.box {
border-color: _palette($p, border);
}
}
@include color-box;

112
solution/site/scripts/mockup/build3/assets/sass/components/_button.scss Normal file
View File

@ -0,0 +1,112 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
@include vendor('appearance', 'none');
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'box-shadow #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
border: 0;
cursor: pointer;
display: inline-block;
font-weight: _font(weight-bold);
letter-spacing: _font(kerning-alt);
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
font-size: 0.75rem;
max-width: 20rem;
height: 3.75em;
line-height: 3.75em;
border-radius: 3.75em;
padding: 0 2.5em;
text-overflow: ellipsis;
overflow: hidden;
&.icon {
&:before {
margin-right: 0.5rem;
}
}
&.fit {
width: 100%;
}
&.small {
font-size: 0.6rem;
height: 3.325em;
line-height: 3.325em;
border-radius: 3.325em;
padding: 0 2em;
}
&.large {
font-size: 0.8rem;
height: 4em;
line-height: 4em;
border-radius: 4em;
padding: 0 3em;
}
&.wide {
min-width: 14em;
}
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
}
@mixin color-button($p: null) {
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
background-color: transparent;
box-shadow: inset 0 0 0 _size(border-width) _palette($p, border);
color: _palette($p, fg-bold) !important;
&:hover {
box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
color: _palette($p, accent) !important;
}
&:active {
background-color: transparentize(_palette($p, accent), 0.8);
box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
color: _palette($p, accent) !important;
}
&.primary {
background-color: _palette($p, fg-bold);
box-shadow: none;
color: _palette($p, bg) !important;
&:hover {
background-color: _palette($p, accent);
}
&:active {
background-color: darken(_palette($p, accent), 12);
}
}
}
}
@include color-button;

286
solution/site/scripts/mockup/build3/assets/sass/components/_form.scss Normal file
View File

@ -0,0 +1,286 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Form */
form {
margin: 0 0 _size(element-margin) 0;
> :last-child {
margin-bottom: 0;
}
> .fields {
$gutter: (_size(element-margin) * 0.75);
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
> .field {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
padding: $gutter 0 0 $gutter;
width: calc(100% - #{$gutter * 1});
&.half {
width: calc(50% - #{$gutter * 0.5});
}
&.third {
width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
}
&.quarter {
width: calc(25% - #{$gutter * 0.25});
}
}
}
@include breakpoint('<=xsmall') {
> .fields {
$gutter: (_size(element-margin) * 0.75);
width: calc(100% + #{$gutter * 2});
margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
> .field {
padding: $gutter 0 0 $gutter;
width: calc(100% - #{$gutter * 1});
&.half {
width: calc(100% - #{$gutter * 1});
}
&.third {
width: calc(100% - #{$gutter * 1});
}
&.quarter {
width: calc(100% - #{$gutter * 1});
}
}
}
}
}
label {
display: block;
font-size: 0.9rem;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
@include vendor('appearance', 'none');
background-color: transparent;
border-radius: _size(border-radius);
border: none;
border: solid _size(border-width);
color: inherit;
display: block;
outline: 0;
padding: 0 0.825rem;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
}
}
select {
background-size: 1.25rem;
background-repeat: no-repeat;
background-position: calc(100% - 1rem) center;
height: _size(element-height);
padding-right: _size(element-height);
text-overflow: ellipsis;
&:focus {
&::-ms-value {
background-color: transparent;
}
}
&::-ms-expand {
display: none;
}
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
height: _size(element-height);
}
textarea {
padding: 0.75rem 1rem;
}
input[type="checkbox"],
input[type="radio"], {
@include vendor('appearance', 'none');
display: block;
float: left;
margin-right: -2rem;
opacity: 0;
width: 1rem;
z-index: -1;
& + label {
@include icon(false, solid);
@include vendor('user-select', 'none');
cursor: pointer;
display: inline-block;
font-size: 1rem;
font-weight: _font(weight);
padding-left: (_size(element-height) * 0.6) + 0.75rem;
padding-right: 0.75rem;
position: relative;
margin-bottom: 0;
&:before {
border-radius: _size(border-radius);
border: solid _size(border-width);
content: '';
display: inline-block;
font-size: 0.8rem;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.6);
position: absolute;
text-align: center;
top: 0;
width: (_size(element-height) * 0.6);
}
}
&:checked + label {
&:before {
content: '\f00c';
}
}
}
input[type="checkbox"] {
& + label {
&:before {
border-radius: _size(border-radius);
}
}
}
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
}
}
}
::-webkit-input-placeholder {
opacity: 1.0;
}
:-moz-placeholder {
opacity: 1.0;
}
::-moz-placeholder {
opacity: 1.0;
}
:-ms-input-placeholder {
opacity: 1.0;
}
@mixin color-form($p: null) {
label {
color: _palette($p, fg-bold);
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
border-color: _palette($p, border);
&:focus {
border-color: _palette($p, accent);
box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
}
}
select {
background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
option {
color: _palette(fg-bold);
background: _palette(bg);
}
}
input[type="checkbox"],
input[type="radio"], {
& + label {
color: _palette($p, fg);
&:before {
border-color: _palette($p, border);
}
}
&:checked + label {
&:before {
background-color: _palette($p, fg-bold);
border-color: _palette($p, fg-bold);
color: _palette($p, bg);
}
}
&:focus + label {
&:before {
border-color: _palette($p, accent);
box-shadow: 0 0 0 _size(border-width) _palette($p, accent);
}
}
}
::-webkit-input-placeholder {
color: _palette($p, fg-light) !important;
}
:-moz-placeholder {
color: _palette($p, fg-light) !important;
}
::-moz-placeholder {
color: _palette($p, fg-light) !important;
}
:-ms-input-placeholder {
color: _palette($p, fg-light) !important;
}
}
@include color-form;

616
solution/site/scripts/mockup/build3/assets/sass/components/_gallery.scss Normal file
View File

@ -0,0 +1,616 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Gallery (transitions) */
.gallery {
// Mixin.
@mixin transition-gallery($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
&.on#{$event}-fade-in {
article {
.image {
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{_misc(gallery-limit) * _duration(gallery-delay)}');
}
}
@for $i from 0 through _misc(gallery-limit) {
&:nth-child(#{$i + 1}) {
.image {
img {
@include vendor('transition-delay', '#{$i * _duration(gallery-delay)}');
}
}
}
}
}
#{$x} {
article {
.image {
img {
opacity: 0;
}
}
}
}
}
}
// On Load.
@include transition-gallery('load');
// On Scroll.
@include transition-gallery('scroll');
}
/* Gallery (style1) */
.gallery.style1 {
@include color-typography(invert);
@include color-button(invert);
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
position: relative;
width: 100%;
background-color: transparent;
> .forward, >.backward {
display: none;
}
> .inner {
@include vendor('align-items', 'inherit');
@include vendor('display', 'inherit');
@include vendor('flex-wrap', 'inherit');
@include vendor('justify-content', 'inherit');
}
article {
overflow: hidden;
position: relative;
width: 25%;
.image {
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
display: block;
width: 100%;
border-radius: 0;
img {
display: block;
width: 100%;
border-radius: 0;
}
}
.caption {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
@include vendor('pointer-events', 'none');
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
opacity: 0;
padding: 2rem;
z-index: 1;
font-size: 0.8rem;
a {
@include vendor('pointer-events', 'auto');
}
h2, h3, h4, h5, h6 {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
> * {
max-width: 100%;
margin-bottom: 1rem;
}
> :last-child {
margin-bottom: 0;
}
}
&:hover {
.caption {
opacity: 1;
}
}
}
@include breakpoint('<=large') {
article {
width: (100% / 3);
.caption {
padding: 1rem;
}
}
}
@include breakpoint('<=medium') {
article {
width: 50%;
.caption {
padding: 1rem;
}
}
}
@include breakpoint('<=xsmall') {
article {
width: 100%;
.caption {
padding: 1rem;
}
}
}
// Modifiers.
// size
&.small {
article {
width: 20%;
.caption {
padding: 1rem;
}
}
@include breakpoint('<=large') {
article {
width: 25%;
.caption {
padding: 1rem;
}
}
}
@include breakpoint('<=medium') {
article {
width: (100% / 3);
.caption {
padding: 1rem;
}
}
}
@include breakpoint('<=xsmall') {
article {
width: 50%;
.caption {
padding: 1rem;
}
}
}
}
&.medium {
// ...
}
&.big {
article {
width: (100% / 3);
.caption {
padding: 3rem;
}
}
@include breakpoint('<=large') {
article {
width: 50%;
.caption {
padding: 2rem;
}
}
}
@include breakpoint('<=medium') {
article {
width: 50%;
.caption {
padding: 2rem;
}
}
}
@include breakpoint('<=xsmall') {
article {
width: 100%;
.caption {
padding: 1rem;
}
}
}
}
}
/* Gallery (style2) */
.gallery.style2 {
@include color-typography(invert);
@include color-button(invert);
@include vendor('display', 'flex');
-webkit-overflow-scrolling: touch;
position: relative;
background-color: transparent;
> .forward, >.backward {
@include icon(false, solid);
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
position: absolute;
top: 0;
width: 5rem;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 2;
&:before {
display: block;
top: calc(50% - 1.5rem);
width: 4rem;
height: 3rem;
line-height: 1em;
font-size: 3rem;
position: absolute;
text-align: center;
}
}
&:hover {
> .forward, > .backward {
opacity: 1;
}
}
> .forward {
right: 0;
background-image: linear-gradient(to left, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
&:before {
content: '\f105';
right: 0;
}
}
> .backward {
left: 0;
background-image: linear-gradient(to right, rgba(0,0,0,0.25) 15%, rgba(0,0,0,0));
&:before {
content: '\f104';
left: 0;
}
}
> .inner {
@include vendor('display', 'inherit');
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
}
article {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
display: block;
position: relative;
overflow: hidden;
width: 22.5rem;
max-width: 75vw;
.image {
display: block;
width: 100%;
border-radius: 0;
img {
display: block;
width: 100%;
border-radius: 0;
}
}
.caption {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
@include vendor('pointer-events', 'none');
@include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparentize(_palette(invert, bg), 1 - _misc(overlay-opacity));
opacity: 0;
padding: 3rem;
z-index: 1;
font-size: 0.8rem;
a {
@include vendor('pointer-events', 'auto');
}
h2, h3, h4, h5, h6 {
font-size: 1.25rem;
margin-bottom: 0.25rem;
}
> * {
max-width: 100%;
margin-bottom: 1rem;
}
> :last-child {
margin-bottom: 0;
}
}
&:hover {
.caption {
opacity: 1;
}
}
}
@include breakpoint('<=medium') {
article {
.caption {
padding: 2rem;
}
}
}
@include breakpoint('<=small') {
article {
.caption {
padding: 2rem;
}
}
}
// Modifiers.
// size
&.small {
article {
width: 17.5rem;
.caption {
padding: 2rem;
}
}
@include breakpoint('<=medium') {
article {
.caption {
padding: 2rem;
}
}
}
@include breakpoint('<=small') {
article {
.caption {
padding: 2rem;
}
}
}
}
&.medium {
// ...
}
&.big {
article {
width: 30rem;
.caption {
padding: 4rem;
}
}
@include breakpoint('<=medium') {
article {
.caption {
padding: 3rem;
}
}
}
@include breakpoint('<=small') {
article {
.caption {
padding: 2rem;
}
}
}
}
}
/* Gallery (lightbox) */
@include keyframes('gallery-modal-spinner') {
0% {
@include vendor('transform', 'rotate(0deg)');
}
100% {
@include vendor('transform', 'rotate(360deg)');
}
}
.gallery.lightbox {
.modal {
@include vendor('display', 'flex');
@include vendor('align-items', 'center');
@include vendor('justify-content', 'center');
@include vendor('pointer-events', 'none');
@include vendor('user-select', 'none');
@include vendor('transition', (
'opacity #{_duration(gallery-lightbox)} ease',
'visibility #{_duration(gallery-lightbox)}',
'z-index #{_duration(gallery-lightbox)}'
));
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 0;
background-color: transparentize(_palette(invert, bg), 1 - _misc(lightbox-opacity));
visibility: none;
opacity: 0;
z-index: 0;
&:before {
@include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
@include vendor('transition', 'opacity #{_duration(gallery-lightbox) * 0.5} ease');
@include vendor('transition-delay', '#{_duration(gallery-lightbox)}');
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4rem;
height: 4rem;
margin: -2rem 0 0 -2rem;
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(invert, fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 4rem;
opacity: 0;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 4rem;
height: 4rem;
cursor: pointer;
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(invert, fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
background-position: center;
background-repeat: no-repeat;
background-size: 3rem;
}
.inner {
@include vendor('transform', 'translateY(0.75rem)');
@include vendor('transition', (
'opacity #{_duration(gallery-lightbox) * 0.5} ease',
'transform #{_duration(gallery-lightbox) * 0.5} ease'
));
opacity: 0;
img {
display: block;
max-width: 90vw;
max-height: 85vh;
box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
}
}
&.visible {
@include vendor('pointer-events', 'auto');
visibility: visible;
opacity: 1;
z-index: _misc(z-index-base) + 1;
&:before {
opacity: 1;
}
}
&.loaded {
.inner {
@include vendor('transform', 'translateY(0)');
@include vendor('transition', (
'opacity #{_duration(gallery-lightbox)} ease',
'transform #{_duration(gallery-lightbox)} ease'
));
opacity: 1;
}
&:before {
@include vendor('transition-delay', '0s');
opacity: 0;
}
}
}
@include breakpoint('<=medium') {
.modal {
.inner {
img {
max-width: 100vw;
}
}
}
}
}
// Mixin
@mixin color-gallery($p: null) {
.gallery {
article {
.image {
background-color: transparentize(_palette($p, fg-bold), 0.875);
}
}
}
}
@include color-gallery;

96
solution/site/scripts/mockup/build3/assets/sass/components/_icon.scss Normal file
View File

@ -0,0 +1,96 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Icon */
.icon {
@include icon;
border-bottom: none;
position: relative;
text-align: center;
> .label {
display: none;
}
&:before {
line-height: inherit;
}
&.solid {
&:before {
font-weight: 900;
}
}
&.brands {
&:before {
font-family: 'Font Awesome 5 Brands';
}
}
&.style2 {
&:before {
border-radius: 2.75em;
display: inline-block;
height: 2.75em;
line-height: 2.75em;
width: 2.75em;
}
}
&.major {
display: block;
margin: 0 0 (_size(element-margin) * 0.5) 0;
&:before {
font-size: 1.25rem;
}
}
}
a.icon {
&.style2 {
&:before {
@include vendor('transition', (
'background-color #{_duration(transition)} ease-in-out',
'box-shadow #{_duration(transition)} ease-in-out',
'color #{_duration(transition)} ease-in-out'
));
}
}
}
@mixin color-icon($p: null) {
.icon {
&.style2 {
&:before {
box-shadow: inset 0 0 0 _size(border-width) _palette($p, border);
}
}
}
a.icon {
&.style2 {
&:hover {
&:before {
box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
color: _palette($p, accent);
}
}
&:active {
&:before {
background-color: transparentize(_palette($p, accent), 0.9);
box-shadow: inset 0 0 0 _size(border-width) _palette($p, accent);
color: _palette($p, accent);
}
}
}
}
}
@include color-icon;

22
solution/site/scripts/mockup/build3/assets/sass/components/_icons.scss Normal file
View File

@ -0,0 +1,22 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Icons */
ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
li {
display: inline-block;
padding: 0 0.75rem 0 0;
&:last-child {
padding-right: 0;
}
}
}

61
solution/site/scripts/mockup/build3/assets/sass/components/_image.scss Normal file
View File

@ -0,0 +1,61 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Image */
.image {
border: 0;
border-radius: _size(border-radius);
display: inline-block;
position: relative;
img {
display: block;
border-radius: _size(border-radius);
}
&.left,
&.right {
width: 40%;
max-width: 10rem;
img {
width: 100%;
}
}
&.left {
float: left;
margin: 0 1.5rem 1rem 0;
top: 0.25rem;
}
&.right {
float: right;
margin: 0 0 1rem 1.5rem;
top: 0.25rem;
}
&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;
img {
width: 100%;
}
}
&.main {
display: block;
margin: 0 0 (_size(element-margin) * 1.5) 0;
width: 100%;
img {
width: 100%;
}
}
}

66
solution/site/scripts/mockup/build3/assets/sass/components/_index.scss Normal file
View File

@ -0,0 +1,66 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Index */
.index {
> * {
@include padding(3rem, 0);
@include vendor('display', 'flex');
border-top: solid 1px;
> header {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
width: 15rem;
}
> .content {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
}
}
> :first-child {
border-top: 0;
}
@include breakpoint('<=medium') {
> * {
> header {
width: 11rem;
}
}
}
@include breakpoint('<=small') {
> * {
> header {
width: 10rem;
}
}
}
@include breakpoint('<=xsmall') {
> * {
@include vendor('flex-direction', 'column');
> header {
width: 100%;
}
}
}
}
@mixin color-index($p: null) {
.index {
> * {
border-top-color: _palette($p, border);
}
}
}
@include color-index;

338
solution/site/scripts/mockup/build3/assets/sass/components/_items.scss Normal file
View File

@ -0,0 +1,338 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Items (transitions) */
.items {
// Mixin.
@mixin transition-items($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
&.on#{$event}-fade-in {
> * {
> .inner {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{_misc(items-limit) * _duration(items-delay)}');
}
@for $i from 0 through _misc(items-limit) {
&:nth-child(#{$i + 1}) {
> .inner {
@include vendor('transition-delay', '#{$i * _duration(items-delay)}');
}
}
}
}
#{$x} {
> * {
> .inner {
opacity: 0;
}
}
}
}
}
// On Load.
@include transition-items('load');
// On Scroll.
@include transition-items('scroll');
}
/* Items (style1) */
@mixin items-style1-size($name, $size, $padding) {
&.#{$name} {
> * {
@include padding($padding, $padding);
width: #{100% / $size};
&:nth-child(-n + #{$size}) {
border-top-width: 0;
}
&:nth-child(#{$size}n + 1) {
border-left-width: 0;
}
}
}
}
@mixin items-style1-size-reset($name, $size) {
&.#{$name} {
> * {
&:nth-child(-n + #{$size}) {
border-top-width: _size(border-width);
}
&:nth-child(#{$size}n + 1) {
border-left-width: _size(border-width);
}
}
}
}
.items.style1 {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
margin: (_size(element-margin) * 1.5) 0;
position: relative;
> * {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-style: solid;
border-left-width: _size(border-width);
border-top-width: _size(border-width);
}
// Modifiers.
// Size.
@include items-style1-size(big, 2, _size(gutter));
@include items-style1-size(medium, 3, _size(gutter) * 0.625);
@include items-style1-size(small, 4, _size(gutter) * 0.375);
@include breakpoint('<=large') {
@include items-style1-size-reset(small, 4);
@include items-style1-size(small, 3, _size(gutter) * 0.625);
}
@include breakpoint('<=medium') {
@include items-style1-size-reset(medium, 3);
@include items-style1-size(medium, 2, _size(gutter));
@include items-style1-size-reset(small, 3);
@include items-style1-size(small, 2, _size(gutter));
}
@include breakpoint('<=xsmall') {
@include items-style1-size-reset(big, 2);
@include items-style1-size(big, 1, _size(gutter) * 0.75);
@include items-style1-size-reset(medium, 2);
@include items-style1-size(medium, 1, _size(gutter) * 0.75);
@include items-style1-size-reset(small, 2);
@include items-style1-size(small, 1, _size(gutter) * 0.75);
&.big,
&.medium,
&.small {
> * {
padding-left: 0;
padding-right: 0;
}
> :first-child {
padding-top: 0;
}
> :last-child {
padding-bottom: 0;
> .inner {
> :last-child {
margin-bottom: 0;
}
}
}
}
}
}
/* Items (style2) */
@mixin items-style2-size($name, $size, $padding) {
&.#{$name} {
> * {
@include padding($padding, $padding);
width: #{100% / $size};
&:nth-child(-n + #{$size}) {
border-top-width: 0;
}
&:nth-child(#{$size}n + 1) {
border-left-width: 0;
}
}
}
}
@mixin items-style2-size-reset($name, $size) {
&.#{$name} {
> * {
&:nth-child(-n + #{$size}) {
border-top-width: _size(border-width);
}
&:nth-child(#{$size}n + 1) {
border-left-width: _size(border-width);
}
}
}
}
.items.style2 {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
margin: (_size(element-margin) * 1.5) 0;
position: relative;
border: solid _size(border-width);
border-radius: _size(border-radius);
> * {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-style: solid;
border-left-width: _size(border-width);
border-top-width: _size(border-width);
}
// Modifiers.
// Size.
@include items-style2-size(big, 2, _size(gutter));
@include items-style2-size(medium, 3, _size(gutter) * 0.625);
@include items-style2-size(small, 4, _size(gutter) * 0.375);
@include breakpoint('<=large') {
@include items-style2-size-reset(small, 4);
@include items-style2-size(small, 3, _size(gutter) * 0.625);
}
@include breakpoint('<=medium') {
@include items-style2-size-reset(medium, 3);
@include items-style2-size(medium, 2, _size(gutter));
@include items-style2-size-reset(small, 3);
@include items-style2-size(small, 2, _size(gutter));
}
@include breakpoint('<=xsmall') {
@include items-style2-size-reset(big, 2);
@include items-style2-size(big, 1, _size(gutter) * 0.75);
@include items-style2-size-reset(medium, 2);
@include items-style2-size(medium, 1, _size(gutter) * 0.75);
@include items-style2-size-reset(small, 2);
@include items-style2-size(small, 1, _size(gutter) * 0.75);
}
}
/* Items (style3) */
@mixin items-style3-size($name, $size, $padding) {
&.#{$name} {
> * {
@include padding($padding, $padding);
width: #{100% / $size};
}
}
}
.items.style3 {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
margin: (_size(element-margin) * 1.5) 0;
position: relative;
> * {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
}
// Modifiers.
// Size.
@include items-style3-size(big, 2, _size(gutter) * 0.5);
@include items-style3-size(medium, 3, _size(gutter) * 0.5 * 0.625);
@include items-style3-size(small, 4, _size(gutter) * 0.5 * 0.375);
@include breakpoint('<=large') {
@include items-style3-size(small, 3, _size(gutter) * 0.5 * 0.625);
}
@include breakpoint('<=medium') {
@include items-style3-size(medium, 2, _size(gutter) * 0.5);
@include items-style3-size(small, 2, _size(gutter) * 0.5);
}
@include breakpoint('<=small') {
margin: _size(element-margin) 0;
}
@include breakpoint('<=xsmall') {
@include items-style3-size(big, 1, _size(gutter) * 0.5 * 0.75);
@include items-style3-size(medium, 1, _size(gutter) * 0.5 * 0.75);
@include items-style3-size(small, 1, _size(gutter) * 0.5 * 0.75);
&.big,
&.medium,
&.small {
> * {
padding-left: 0;
padding-right: 0;
}
> :first-child {
padding-top: 0;
}
> :last-child {
padding-bottom: 0;
> .inner {
> :last-child {
margin-bottom: 0;
}
}
}
}
}
}
// Mixin
@mixin color-items($p: null) {
.items.style1 {
> * {
border-color: _palette($p, border);
}
}
.items.style2 {
border-color: _palette($p, border);
> * {
border-color: _palette($p, border);
}
}
}
@include color-items;

86
solution/site/scripts/mockup/build3/assets/sass/components/_list.scss Normal file
View File

@ -0,0 +1,86 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* List */
ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25rem;
li {
padding-left: 0.25rem;
}
}
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1rem;
li {
padding-left: 0.5rem;
}
&.alt {
list-style: none;
padding-left: 0;
li {
border-top: solid _size(border-width);
padding: 0.5rem 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
}
}
}
dl {
margin: 0 0 _size(element-margin) 0;
dt {
display: block;
font-weight: _font(weight-bold);
margin: 0 0 (_size(element-margin) * 0.5) 0;
}
dd {
margin-left: _size(element-margin);
}
&.style2 {
dt {
width: 25%;
float: left;
}
dd {
width: 70%;
float: left;
}
&:after {
content: '';
display: block;
clear: both;
}
}
}
@mixin color-list($p: null) {
ul {
&.alt {
li {
border-top-color: _palette($p, border);
}
}
}
}
@include color-list;

35
solution/site/scripts/mockup/build3/assets/sass/components/_row.scss Normal file
View File

@ -0,0 +1,35 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Row */
.row {
@include html-grid(2rem);
@include breakpoint('<=xlarge') {
@include html-grid(2rem, 'xlarge');
}
@include breakpoint('<=large') {
@include html-grid(2rem, 'large');
}
@include breakpoint('<=medium') {
@include html-grid(2rem, 'medium');
}
@include breakpoint('<=small') {
@include html-grid(2rem, 'small');
}
@include breakpoint('<=xsmall') {
@include html-grid(2rem, 'xsmall');
}
@include breakpoint('<=xxsmall') {
@include html-grid(2rem, 'xxsmall');
}
}

49
solution/site/scripts/mockup/build3/assets/sass/components/_section.scss Normal file
View File

@ -0,0 +1,49 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Section/Article */
section, article {
&.special {
text-align: center;
}
}
header {
p {
position: relative;
margin: (_size(element-margin) * -0.325) 0 (_size(element-margin) * 0.75) 0;
font-style: italic;
}
h1 + p {
font-size: 1.375rem;
}
h2 + p {
font-size: 1.25rem;
}
h3 + p {
font-size: 1.1rem;
}
h4 + p,
h5 + p,
h6 + p {
font-size: 0.9rem;
}
}
@mixin color-section($p: null) {
header {
p {
color: _palette($p, fg-light);
}
}
}
@include color-section;

1012
solution/site/scripts/mockup/build3/assets/sass/components/_spotlight.scss Normal file
View File

File diff suppressed because it is too large Load Diff

137
solution/site/scripts/mockup/build3/assets/sass/components/_table.scss Normal file
View File

@ -0,0 +1,137 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Table */
.table-wrapper {
-webkit-overflow-scrolling: touch;
margin: 0 0 _size(element-margin) 0;
overflow-x: auto;
> table {
margin-bottom: 0;
}
}
table {
margin: 0 0 _size(element-margin) 0;
width: 100%;
tbody {
tr {
border: solid _size(border-width);
border-left: 0;
border-right: 0;
}
}
td {
padding: 0.75rem 0.75rem;
}
th {
font-size: 0.9rem;
font-weight: _font(weight-bold);
padding: 0 0.75rem 0.75rem 0.75rem;
text-align: left;
}
thead {
border-bottom: solid (_size(border-width) * 2);
}
tfoot {
border-top: solid (_size(border-width) * 2);
}
&.alt {
border-collapse: separate;
tbody {
tr {
td {
border: solid _size(border-width);
border-left-width: 0;
border-top-width: 0;
&:first-child {
border-left-width: _size(border-width);
}
}
&:first-child {
td {
border-top-width: _size(border-width);
}
}
}
}
thead {
border-bottom: 0;
}
tfoot {
border-top: 0;
}
}
&.fixed {
table-layout: fixed;
}
}
@mixin color-table($p: null) {
table {
tbody {
tr {
border-color: _palette($p, border);
&:nth-child(2n + 1) {
background-color: _palette($p, border-bg);
}
&.alt {
background-color: _palette($p, border-bg) !important;
}
}
}
th {
color: _palette($p, fg-bold);
}
thead {
border-bottom-color: _palette($p, border);
}
tfoot {
border-top-color: _palette($p, border);
}
&.alt {
tbody {
tr {
td {
border-color: _palette($p, border);
}
}
}
}
&.uniform {
tbody {
tr {
&:nth-child(2n + 1) {
background-color: transparent;
}
}
}
}
}
}
@include color-table;

120
solution/site/scripts/mockup/build3/assets/sass/components/_wrapper.scss Normal file
View File

@ -0,0 +1,120 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Wrapper (style1) */
.wrapper.style1 {
> .inner {
@include padding(_size(padding, default), _size(padding, default) * 0.5);
margin: 0 auto;
max-width: 100%;
width: _size(inner);
&.medium {
width: _size(inner) * 0.75;
}
&.small {
width: _size(inner) * 0.5;
}
}
@include breakpoint('<=xlarge') {
> .inner {
@include padding(_size(padding, xlarge), _size(padding, xlarge) * 0.5);
}
}
@include breakpoint('<=large') {
> .inner {
@include padding(_size(padding, large), _size(padding, large));
}
}
@include breakpoint('<=medium') {
> .inner {
@include padding(_size(padding, medium) * 1.5, _size(padding, medium));
}
}
@include breakpoint('<=small') {
> .inner {
@include padding(_size(padding, small) * 1.5, _size(padding, small));
}
}
}
/* Wrapper (style2) */
.wrapper.style2 {
padding: _size(padding, default);
background-color: _palette(bg-alt);
> .inner {
@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.5);
background-color: _palette(bg);
border-radius: _size(border-radius-alt);
margin: 0 auto;
max-width: 100%;
position: relative;
width: _size(inner);
z-index: 1;
&.medium {
width: _size(inner) * 0.75;
}
&.small {
width: _size(inner) * 0.5;
}
}
@include breakpoint('<=xlarge') {
padding: _size(padding, xlarge);
> .inner {
@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.5);
}
}
@include breakpoint('<=large') {
padding: _size(padding, large);
> .inner {
@include padding(_size(padding, large) * 0.75, _size(padding, large) * 0.5);
}
}
@include breakpoint('<=medium') {
padding: _size(padding, medium) * 0.75;
> .inner {
@include padding(_size(padding, medium), _size(padding, medium) * 0.75);
}
}
@include breakpoint('<=small') {
padding: _size(padding, small) * 0.75;
> .inner {
@include padding(_size(padding, small), _size(padding, small) * 0.75);
}
}
}
#wrapper {
> .wrapper.style2 {
&.invert {
&:not(.color1):not(.color2):not(.color3):not(.color4):not(.color5):not(.color6):not(.color7) {
background-color: _palette(invert, bg-alt);
}
> .inner {
background-color: _palette(invert, bg);
}
}
}
}

49
solution/site/scripts/mockup/build3/assets/sass/layout/_wrapper.scss Normal file
View File

@ -0,0 +1,49 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Wrapper */
@mixin wrapper-color($n) {
> .color#{$n} {
background-color: _palette(color#{$n});
}
}
#wrapper {
background-color: inherit;
width: 100%;
overflow-x: hidden;
> .invert {
@include color(invert);
}
@include wrapper-color(1);
@include wrapper-color(2);
@include wrapper-color(3);
@include wrapper-color(4);
@include wrapper-color(5);
@include wrapper-color(6);
@include wrapper-color(7);
&.divided {
> * {
box-shadow: inset 0 1px 0 0 _palette(border-alt);
&:first-child {
box-shadow: none !important;
}
}
> .invert {
box-shadow: inset 0 1px 0 0 _palette(invert, border-alt);
&:first-child {
box-shadow: none !important;
}
}
}
}

223
solution/site/scripts/mockup/build3/assets/sass/libs/_breakpoints.scss Normal file
View File

@ -0,0 +1,223 @@
// breakpoints.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Breakpoints.
/// @var {list}
$breakpoints: () !global;
// Mixins.
/// Sets breakpoints.
/// @param {map} $x Breakpoints.
@mixin breakpoints($x: ()) {
$breakpoints: $x !global;
}
/// Wraps @content in a @media block targeting a specific orientation.
/// @param {string} $orientation Orientation.
@mixin orientation($orientation) {
@media screen and (orientation: #{$orientation}) {
@content;
}
}
/// Wraps @content in a @media block using a given query.
/// @param {string} $query Query.
@mixin breakpoint($query: null) {
$breakpoint: null;
$op: null;
$media: null;
// Determine operator, breakpoint.
// Greater than or equal.
@if (str-slice($query, 0, 2) == '>=') {
$op: 'gte';
$breakpoint: str-slice($query, 3);
}
// Less than or equal.
@elseif (str-slice($query, 0, 2) == '<=') {
$op: 'lte';
$breakpoint: str-slice($query, 3);
}
// Greater than.
@elseif (str-slice($query, 0, 1) == '>') {
$op: 'gt';
$breakpoint: str-slice($query, 2);
}
// Less than.
@elseif (str-slice($query, 0, 1) == '<') {
$op: 'lt';
$breakpoint: str-slice($query, 2);
}
// Not.
@elseif (str-slice($query, 0, 1) == '!') {
$op: 'not';
$breakpoint: str-slice($query, 2);
}
// Equal.
@else {
$op: 'eq';
$breakpoint: $query;
}
// Build media.
@if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
$a: map-get($breakpoints, $breakpoint);
// Range.
@if (type-of($a) == 'list') {
$x: nth($a, 1);
$y: nth($a, 2);
// Max only.
@if ($x == null) {
// Greater than or equal (>= 0 / anything)
@if ($op == 'gte') {
$media: 'screen';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< 0 / invalid)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: -1px)';
}
// Not (> y)
@elseif ($op == 'not') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (<= y)
@else {
$media: 'screen and (max-width: ' + $y + ')';
}
}
// Min only.
@else if ($y == null) {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= inf / anything)
@elseif ($op == 'lte') {
$media: 'screen';
}
// Greater than (> inf / invalid)
@elseif ($op == 'gt') {
$media: 'screen and (max-width: -1px)';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Equal (>= x)
@else {
$media: 'screen and (min-width: ' + $x + ')';
}
}
// Min and max.
@else {
// Greater than or equal (>= x)
@if ($op == 'gte') {
$media: 'screen and (min-width: ' + $x + ')';
}
// Less than or equal (<= y)
@elseif ($op == 'lte') {
$media: 'screen and (max-width: ' + $y + ')';
}
// Greater than (> y)
@elseif ($op == 'gt') {
$media: 'screen and (min-width: ' + ($y + 1) + ')';
}
// Less than (< x)
@elseif ($op == 'lt') {
$media: 'screen and (max-width: ' + ($x - 1) + ')';
}
// Not (< x and > y)
@elseif ($op == 'not') {
$media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
}
// Equal (>= x and <= y)
@else {
$media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
}
}
}
// String.
@else {
// Missing a media type? Prefix with "screen".
@if (str-slice($a, 0, 1) == '(') {
$media: 'screen and ' + $a;
}
// Otherwise, use as-is.
@else {
$media: $a;
}
}
}
// Output.
@media #{$media} {
@content;
}
}

90
solution/site/scripts/mockup/build3/assets/sass/libs/_functions.scss Normal file
View File

@ -0,0 +1,90 @@
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Gets a value from a map.
/// @author Hugo Giraudel
/// @param {map} $map Map.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function val($map, $keys...) {
@if nth($keys, 1) == null {
$keys: remove-nth($keys, 1);
}
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
/// Gets a duration value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _duration($keys...) {
@return val($duration, $keys...);
}
/// Gets a font value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _font($keys...) {
@return val($font, $keys...);
}
/// Gets a misc value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _misc($keys...) {
@return val($misc, $keys...);
}
/// Gets a palette value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _palette($keys...) {
@return val($palette, $keys...);
}
/// Gets a size value.
/// @param {string} $keys Key(s).
/// @return {string} Value.
@function _size($keys...) {
@return val($size, $keys...);
}

149
solution/site/scripts/mockup/build3/assets/sass/libs/_html-grid.scss Normal file
View File

@ -0,0 +1,149 @@
// html-grid.scss v1.0 | @ajlkn | MIT licensed */
// Mixins.
/// Initializes the current element as an HTML grid.
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
@mixin html-grid($gutters: 1.5em, $suffix: '') {
// Initialize.
$cols: 12;
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
$unit: 100% / $cols;
// Suffixes.
$suffixes: null;
@if (type-of($suffix) == 'list') {
$suffixes: $suffix;
}
@else {
$suffixes: ($suffix);
}
// Gutters.
$guttersCols: null;
$guttersRows: null;
@if (type-of($gutters) == 'list') {
$guttersCols: nth($gutters, 1);
$guttersRows: nth($gutters, 2);
}
@else {
$guttersCols: $gutters;
$guttersRows: 0;
}
// Row.
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
align-items: stretch;
// Columns.
> * {
box-sizing: border-box;
}
// Gutters.
&.gtr-uniform {
> * {
> :last-child {
margin-bottom: 0;
}
}
}
// Alignment.
&.aln-left {
justify-content: flex-start;
}
&.aln-center {
justify-content: center;
}
&.aln-right {
justify-content: flex-end;
}
&.aln-top {
align-items: flex-start;
}
&.aln-middle {
align-items: center;
}
&.aln-bottom {
align-items: flex-end;
}
// Step through suffixes.
@each $suffix in $suffixes {
// Suffix.
@if ($suffix != '') {
$suffix: '-' + $suffix;
}
@else {
$suffix: '';
}
// Row.
// Important.
> .imp#{$suffix} {
order: -1;
}
// Columns, offsets.
@for $i from 1 through $cols {
> .col-#{$i}#{$suffix} {
width: $unit * $i;
}
> .off-#{$i}#{$suffix} {
margin-left: $unit * $i;
}
}
// Step through multipliers.
@each $multiplier in $multipliers {
// Gutters.
$class: null;
@if ($multiplier != 1) {
$class: '.gtr-' + ($multiplier * 100);
}
&#{$class} {
margin-top: ($guttersRows * $multiplier * -1);
margin-left: ($guttersCols * $multiplier * -1);
> * {
padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
}
// Uniform.
&.gtr-uniform {
margin-top: $guttersCols * $multiplier * -1;
> * {
padding-top: $guttersCols * $multiplier;
}
}
}
}
}
}

78
solution/site/scripts/mockup/build3/assets/sass/libs/_mixins.scss Normal file
View File

@ -0,0 +1,78 @@
/// Makes an element's :before pseudoelement a FontAwesome icon.
/// @param {string} $content Optional content value to use.
/// @param {string} $category Optional category to use.
/// @param {string} $where Optional pseudoelement to target (before or after).
@mixin icon($content: false, $category: regular, $where: before) {
text-decoration: none;
&:#{$where} {
@if $content {
content: $content;
}
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
text-transform: none !important;
@if ($category == brands) {
font-family: 'Font Awesome 5 Brands';
}
@elseif ($category == solid) {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
@else {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
}
}
/// Applies padding to an element, taking the current element-margin value into account.
/// @param {mixed} $tb Top/bottom padding.
/// @param {mixed} $lr Left/right padding.
/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left)
/// @param {bool} $important If true, adds !important.
@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) {
@if $important {
$important: '!important';
}
$x: 0.1em;
@if unit(_size(element-margin)) == 'rem' {
$x: 0.1rem;
}
padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important};
}
/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp).
/// @param {string} $svg SVG data URL.
/// @return {string} Encoded SVG data URL.
@function svg-url($svg) {
$svg: str-replace($svg, '"', '\'');
$svg: str-replace($svg, '%', '%25');
$svg: str-replace($svg, '<', '%3C');
$svg: str-replace($svg, '>', '%3E');
$svg: str-replace($svg, '&', '%26');
$svg: str-replace($svg, '#', '%23');
$svg: str-replace($svg, '{', '%7B');
$svg: str-replace($svg, '}', '%7D');
$svg: str-replace($svg, ';', '%3B');
@return url("data:image/svg+xml;charset=utf8,#{$svg}");
}

80
solution/site/scripts/mockup/build3/assets/sass/libs/_vars.scss Normal file
View File

@ -0,0 +1,80 @@
// Misc.
$misc: (
z-index-base: 10000,
overlay-opacity: 0.5,
lightbox-opacity: 0.75,
gallery-limit: 32,
items-limit: 16
);
// Duration.
$duration: (
menu: 0.5s,
transition: 0.2s,
gallery-lightbox: 0.5s,
gallery-delay: 0.15s,
items-delay: 0.15s,
on-load: 0.75s,
on-scroll: 0.75s
);
// Size.
$size: (
border-radius: 4px,
border-radius-alt: 0.5rem,
border-width: 1px,
element-height: 2.75rem,
element-margin: 2rem,
gutter: 3.5rem,
inner: 64rem,
padding: (
default: 7rem,
xlarge: 5rem,
large: 4rem,
medium: 3rem,
small: 2rem
)
);
// Font.
$font: (
family: ('Source Sans Pro', Helvetica, sans-serif),
family-fixed: ('Courier New', monospace),
weight: 300,
weight-bold: 400,
kerning: -0.05em,
kerning-alt: 0.125em
);
// Palette.
$palette: (
color1: #30363d,
color2: #db8992,
color3: #ab7aad,
color4: #897cad,
color5: #7794ce,
color6: #64abb4,
color7: #6ba78c,
bg: #ffffff,
bg-alt: #eeeeee,
fg: #000000,
fg-bold: #000000,
fg-light: rgba(0,0,0,0.75),
border: rgba(0,0,0,0.2),
border-alt: rgba(0,0,0,0.075),
border-bg: rgba(0,0,0,0.05),
accent: #47D3E5,
invert: (
bg: #000000,
bg-alt: #222222,
fg: #ffffff,
fg-bold: #ffffff,
fg-light: #ffffff,
border: rgba(255,255,255,1.0),
border-alt: rgba(255,255,255,0.125),
border-bg: rgba(255,255,255,0.125),
accent: #47D3E5
),
);

376
solution/site/scripts/mockup/build3/assets/sass/libs/_vendor.scss Normal file
View File

@ -0,0 +1,376 @@
// vendor.scss v1.0 | @ajlkn | MIT licensed */
// Vars.
/// Vendor prefixes.
/// @var {list}
$vendor-prefixes: (
'-moz-',
'-webkit-',
'-ms-',
''
);
/// Properties that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-properties: (
// Animation.
'animation',
'animation-delay',
'animation-direction',
'animation-duration',
'animation-fill-mode',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
// Appearance.
'appearance',
// Backdrop filter.
'backdrop-filter',
// Background image options.
'background-clip',
'background-origin',
'background-size',
// Box sizing.
'box-sizing',
// Clip path.
'clip-path',
// Filter effects.
'filter',
// Flexbox.
'align-content',
'align-items',
'align-self',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'justify-content',
'order',
// Font feature.
'font-feature-settings',
'font-language-override',
'font-variant-ligatures',
// Font kerning.
'font-kerning',
// Fragmented borders and backgrounds.
'box-decoration-break',
// Grid layout.
'grid-column',
'grid-column-align',
'grid-column-end',
'grid-column-start',
'grid-row',
'grid-row-align',
'grid-row-end',
'grid-row-start',
'grid-template-columns',
'grid-template-rows',
// Hyphens.
'hyphens',
'word-break',
// Masks.
'mask',
'mask-border',
'mask-border-outset',
'mask-border-repeat',
'mask-border-slice',
'mask-border-source',
'mask-border-width',
'mask-clip',
'mask-composite',
'mask-image',
'mask-origin',
'mask-position',
'mask-repeat',
'mask-size',
// Multicolumn.
'break-after',
'break-before',
'break-inside',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-color',
'column-rule-style',
'column-rule-width',
'column-span',
'column-width',
'columns',
// Object fit.
'object-fit',
'object-position',
// Regions.
'flow-from',
'flow-into',
'region-fragment',
// Scroll snap points.
'scroll-snap-coordinate',
'scroll-snap-destination',
'scroll-snap-points-x',
'scroll-snap-points-y',
'scroll-snap-type',
// Shapes.
'shape-image-threshold',
'shape-margin',
'shape-outside',
// Tab size.
'tab-size',
// Text align last.
'text-align-last',
// Text decoration.
'text-decoration-color',
'text-decoration-line',
'text-decoration-skip',
'text-decoration-style',
// Text emphasis.
'text-emphasis',
'text-emphasis-color',
'text-emphasis-position',
'text-emphasis-style',
// Text size adjust.
'text-size-adjust',
// Text spacing.
'text-spacing',
// Transform.
'transform',
'transform-origin',
// Transform 3D.
'backface-visibility',
'perspective',
'perspective-origin',
'transform-style',
// Transition.
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
// Unicode bidi.
'unicode-bidi',
// User select.
'user-select',
// Writing mode.
'writing-mode',
);
/// Values that should be vendorized.
/// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org
/// @var {list}
$vendor-values: (
// Cross fade.
'cross-fade',
// Element function.
'element',
// Filter function.
'filter',
// Flexbox.
'flex',
'inline-flex',
// Grab cursors.
'grab',
'grabbing',
// Gradients.
'linear-gradient',
'repeating-linear-gradient',
'radial-gradient',
'repeating-radial-gradient',
// Grid layout.
'grid',
'inline-grid',
// Image set.
'image-set',
// Intrinsic width.
'max-content',
'min-content',
'fit-content',
'fill',
'fill-available',
'stretch',
// Sticky position.
'sticky',
// Transform.
'transform',
// Zoom cursors.
'zoom-in',
'zoom-out',
);
// Functions.
/// Removes a specific item from a list.
/// @author Hugo Giraudel
/// @param {list} $list List.
/// @param {integer} $index Index.
/// @return {list} Updated list.
@function remove-nth($list, $index) {
$result: null;
@if type-of($index) != number {
@warn "$index: #{quote($index)} is not a number for `remove-nth`.";
}
@else if $index == 0 {
@warn "List index 0 must be a non-zero integer for `remove-nth`.";
}
@else if abs($index) > length($list) {
@warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`.";
}
@else {
$result: ();
$index: if($index < 0, length($list) + $index + 1, $index);
@for $i from 1 through length($list) {
@if $i != $index {
$result: append($result, nth($list, $i));
}
}
}
@return $result;
}
/// Replaces a substring within another string.
/// @author Hugo Giraudel
/// @param {string} $string String.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {string} Updated string.
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
/// Replaces a substring within each string in a list.
/// @param {list} $strings List of strings.
/// @param {string} $search Substring.
/// @param {string} $replace Replacement.
/// @return {list} Updated list of strings.
@function str-replace-all($strings, $search, $replace: '') {
@each $string in $strings {
$strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace));
}
@return $strings;
}
// Mixins.
/// Wraps @content in vendorized keyframe blocks.
/// @param {string} $name Name.
@mixin keyframes($name) {
@-moz-keyframes #{$name} { @content; }
@-webkit-keyframes #{$name} { @content; }
@-ms-keyframes #{$name} { @content; }
@keyframes #{$name} { @content; }
}
/// Vendorizes a declaration's property and/or value(s).
/// @param {string} $property Property.
/// @param {mixed} $value String/list of value(s).
@mixin vendor($property, $value) {
// Determine if property should expand.
$expandProperty: index($vendor-properties, $property);
// Determine if value should expand (and if so, add '-prefix-' placeholder).
$expandValue: false;
@each $x in $value {
@each $y in $vendor-values {
@if $y == str-slice($x, 1, str-length($y)) {
$value: set-nth($value, index($value, $x), '-prefix-' + $x);
$expandValue: true;
}
}
}
// Expand property?
@if $expandProperty {
@each $vendor in $vendor-prefixes {
#{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Expand just the value?
@elseif $expandValue {
@each $vendor in $vendor-prefixes {
#{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
}
}
// Neither? Treat them as a normal declaration.
@else {
#{$property}: #{$value};
}
}

185
solution/site/scripts/mockup/build3/assets/sass/main.scss Normal file
View File

@ -0,0 +1,185 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
@import 'fontawesome-all.min.css';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i');
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
// Breakpoints.
@include breakpoints((
xlarge: ( 1281px, 1680px ),
large: ( 981px, 1280px ),
medium: ( 737px, 980px ),
small: ( 481px, 736px ),
xsmall: ( 361px, 480px ),
xxsmall: ( null, 360px )
));
// Mixins.
@mixin color($p) {
@include color-typography($p);
@include color-box($p);
@include color-button($p);
@include color-form($p);
@include color-icon($p);
@include color-list($p);
@include color-section($p);
@include color-table($p);
@include color-banner($p);
@include color-spotlight($p);
@include color-gallery($p);
@include color-items($p);
@include color-index($p);
}
// Phone.
@mixin phone($image-width) {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-radius: 0;
border: solid _size(border-width);
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
width: 100%;
height: 100%;
border-radius: 0;
}
&:before {
content: '';
display: block;
background-position: center;
background-repeat: no-repeat;
border: solid _size(border-width);
border-bottom: 0;
}
&:after {
content: '';
display: block;
background-position: center;
background-repeat: no-repeat;
border: solid _size(border-width);
border-top: 0;
}
@include resize-phone($image-width, 1);
}
@mixin resize-phone($image-width, $image-factor) {
$image-pad-top: 2.5rem;
$image-pad-bottom: 3rem;
$image-height: ($image-width * (1920 / 1080));
width: ($image-width * $image-factor);
height: (($image-width * $image-factor) * (1920 / 1080));
margin-top: ($image-pad-top * $image-factor);
margin-bottom: (_size(element-margin) + ($image-pad-bottom * $image-factor));
&:before {
height: ($image-pad-top * $image-factor);
background-size: (64px * $image-factor) (32px * $image-factor);
margin-top: (($image-pad-top * $image-factor) * -1);
border-radius: (1rem * $image-factor) (1rem * $image-factor) 0 0;
}
&:after {
height: ($image-pad-bottom * $image-factor);
background-size: (64px * $image-factor) (32px * $image-factor);
margin-bottom: (($image-pad-bottom * $image-factor) * -1);
border-radius: 0 0 (1rem * $image-factor) (1rem * $image-factor);
}
}
@mixin color-phone($p) {
border-color: _palette($p, border);
background-color: _palette($p, border);
@if ($p != 'invert') {
border-width: 0;
}
@else {
border-width: _size(border-width);
}
&:before {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="11" y="12" width="42" height="8" vector-effect="non-scaling-stroke" /></svg>');
border-color: _palette($p, border);
@if ($p == 'invert') {
width: calc(100% + #{_size(border-width) * 2});
margin-left: (_size(border-width) * -1);
}
@else {
width: 100%;
}
}
&:after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><circle cx="32" cy="16" r="14" vector-effect="non-scaling-stroke" /></svg>');
border-color: _palette($p, border);
@if ($p == 'invert') {
width: calc(100% + #{_size(border-width) * 2});
margin-left: (_size(border-width) * -1);
}
@else {
width: 100%;
}
}
}
@mixin color-phone-variant($v, $p) {
@if ($v == 'android') {
&:after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="32px" viewBox="0 0 64 32" zoomAndPan="disable"><style>rect {fill: transparent; stroke: #{_palette($p, border)}; stroke-width: #{_size(border-width)}; }</style><rect rx="4" ry="4" x="6" y="4" width="52" height="24" vector-effect="non-scaling-stroke" /></svg>');
}
}
@else if ($p == 'iphone') {
// ...
}
}
// Base.
@import 'base/reset';
@import 'base/page';
@import 'base/typography';
// Component.
@import 'components/row';
@import 'components/box';
@import 'components/button';
@import 'components/form';
@import 'components/icon';
@import 'components/image';
@import 'components/list';
@import 'components/actions';
@import 'components/icons';
@import 'components/section';
@import 'components/table';
@import 'components/banner';
@import 'components/spotlight';
@import 'components/gallery';
@import 'components/wrapper';
@import 'components/items';
@import 'components/index';
// Layout.
@import 'layout/wrapper';

207
solution/site/scripts/mockup/build3/assets/sass/noscript.scss Normal file
View File

@ -0,0 +1,207 @@
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import 'libs/html-grid';
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Banner (transitions) */
.banner {
// Mixin.
@mixin transition-banner($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
// Content.
&.on#{$event}-content-fade-up {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-down {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-left {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-right {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
&.on#{$event}-content-fade-in {
.content {
@include vendor('transition', 'none');
}
#{$x} {
.content {
@include vendor('transform', 'none');
opacity: 1;
}
}
}
// Image.
&.on#{$event}-image-fade-up {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-down {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-left {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-right {
.image {
@include vendor('transition', 'none');
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
@include vendor('transform', 'none');
opacity: 1;
img {
opacity: 1;
}
}
}
}
&.on#{$event}-image-fade-in {
.image {
img {
@include vendor('transition', 'none');
}
}
#{$x} {
.image {
img {
opacity: 1;
}
}
}
}
}
// On Load.
@include transition-banner('load');
// On Scroll.
@include transition-banner('scroll');
}

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-brands-400.eot Normal file
View File

Binary file not shown.

3717
solution/site/scripts/mockup/build3/assets/webfonts/fa-brands-400.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 730 KiB

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-brands-400.ttf Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-brands-400.woff Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-brands-400.woff2 Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-regular-400.eot Normal file
View File

Binary file not shown.

801
solution/site/scripts/mockup/build3/assets/webfonts/fa-regular-400.svg Normal file
View File

@ -0,0 +1,801 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<metadata>
Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021
By Robert Madole
Copyright (c) Font Awesome
</metadata>
<!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><defs>
<font id="FontAwesome5Free-Regular" horiz-adv-x="512" >
<font-face
font-family="Font Awesome 5 Free Regular"
font-weight="400"
font-stretch="normal"
units-per-em="512"
panose-1="2 0 5 3 0 0 0 0 0 0"
ascent="448"
descent="-64"
bbox="-0.0663408 -64.0662 640.004 448.1"
underline-thickness="25"
underline-position="-50"
unicode-range="U+0020-F5C8"
/>
<missing-glyph />
<glyph glyph-name="heart" unicode="&#xf004;"
d="M458.4 383.7c75.2998 -63.4004 64.0996 -166.601 10.5996 -221.3l-175.4 -178.7c-10 -10.2002 -23.2998 -15.7998 -37.5996 -15.7998c-14.2002 0 -27.5996 5.69922 -37.5996 15.8994l-175.4 178.7c-53.5996 54.7002 -64.5996 157.9 10.5996 221.2
c57.8008 48.7002 147.101 41.2998 202.4 -15c55.2998 56.2998 144.6 63.5996 202.4 15zM434.8 196.2c36.2002 36.8994 43.7998 107.7 -7.2998 150.8c-38.7002 32.5996 -98.7002 27.9004 -136.5 -10.5996l-35 -35.7002l-35 35.7002
c-37.5996 38.2998 -97.5996 43.1992 -136.5 10.5c-51.2002 -43.1006 -43.7998 -113.5 -7.2998 -150.7l175.399 -178.7c2.40039 -2.40039 4.40039 -2.40039 6.80078 0z" />
<glyph glyph-name="star" unicode="&#xf005;" horiz-adv-x="576"
d="M528.1 276.5c26.2002 -3.7998 36.7002 -36.0996 17.7002 -54.5996l-105.7 -103l25 -145.5c4.5 -26.3008 -23.1992 -45.9004 -46.3994 -33.7002l-130.7 68.7002l-130.7 -68.7002c-23.2002 -12.2998 -50.8994 7.39941 -46.3994 33.7002l25 145.5l-105.7 103
c-19 18.5 -8.5 50.7998 17.7002 54.5996l146.1 21.2998l65.2998 132.4c11.7998 23.8994 45.7002 23.5996 57.4004 0l65.2998 -132.4zM388.6 135.7l100.601 98l-139 20.2002l-62.2002 126l-62.2002 -126l-139 -20.2002l100.601 -98l-23.7002 -138.4l124.3 65.2998
l124.3 -65.2998z" />
<glyph glyph-name="user" unicode="&#xf007;" horiz-adv-x="448"
d="M313.6 144c74.2002 0 134.4 -60.2002 134.4 -134.4v-25.5996c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v25.5996c0 74.2002 60.2002 134.4 134.4 134.4c28.7998 0 42.5 -16 89.5996 -16s60.9004 16 89.5996 16zM400 -16v25.5996
c0 47.6006 -38.7998 86.4004 -86.4004 86.4004c-14.6992 0 -37.8994 -16 -89.5996 -16c-51.2998 0 -75 16 -89.5996 16c-47.6006 0 -86.4004 -38.7998 -86.4004 -86.4004v-25.5996h352zM224 160c-79.5 0 -144 64.5 -144 144s64.5 144 144 144s144 -64.5 144 -144
s-64.5 -144 -144 -144zM224 400c-52.9004 0 -96 -43.0996 -96 -96s43.0996 -96 96 -96s96 43.0996 96 96s-43.0996 96 -96 96z" />
<glyph glyph-name="clock" unicode="&#xf017;"
d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM317.8 96.4004l-84.8994 61.6992
c-3.10059 2.30078 -4.90039 5.90039 -4.90039 9.7002v164.2c0 6.59961 5.40039 12 12 12h32c6.59961 0 12 -5.40039 12 -12v-141.7l66.7998 -48.5996c5.40039 -3.90039 6.5 -11.4004 2.60059 -16.7998l-18.8008 -25.9004c-3.89941 -5.2998 -11.3994 -6.5 -16.7998 -2.59961z
" />
<glyph glyph-name="list-alt" unicode="&#xf022;"
d="M464 416c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h416zM458 16c3.31152 0 6 2.68848 6 6v340c0 3.31152 -2.68848 6 -6 6h-404c-3.31152 0 -6 -2.68848 -6 -6v-340
c0 -3.31152 2.68848 -6 6 -6h404zM416 108v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM416 204v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12
v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM416 300v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h200c6.62695 0 12 -5.37305 12 -12zM164 288c0 -19.8818 -16.1182 -36 -36 -36
s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36zM164 192c0 -19.8818 -16.1182 -36 -36 -36s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36zM164 96c0 -19.8818 -16.1182 -36 -36 -36s-36 16.1182 -36 36s16.1182 36 36 36s36 -16.1182 36 -36z" />
<glyph glyph-name="flag" unicode="&#xf024;"
d="M336.174 368c35.4668 0 73.0195 12.6914 108.922 28.1797c31.6406 13.6514 66.9043 -9.65723 66.9043 -44.1162v-239.919c0 -16.1953 -8.1543 -31.3057 -21.7129 -40.1631c-26.5762 -17.3643 -70.0693 -39.9814 -128.548 -39.9814c-68.6084 0 -112.781 32 -161.913 32
c-56.5674 0 -89.957 -11.2803 -127.826 -28.5566v-83.4434c0 -8.83691 -7.16309 -16 -16 -16h-16c-8.83691 0 -16 7.16309 -16 16v406.438c-14.3428 8.2998 -24 23.7979 -24 41.5615c0 27.5693 23.2422 49.71 51.2012 47.8965
c22.9658 -1.49023 41.8662 -19.4717 44.4805 -42.3379c0.213867 -1.83398 0.308594 -3.65918 0.308594 -5.5498c0 -5.30273 -0.860352 -10.4053 -2.4502 -15.1768c22.418 8.68555 49.4199 15.168 80.7207 15.168c68.6084 0 112.781 -32 161.913 -32zM464 112v240
c-31.5059 -14.6338 -84.5547 -32 -127.826 -32c-59.9111 0 -101.968 32 -161.913 32c-41.4365 0 -80.4766 -16.5879 -102.261 -32v-232c31.4473 14.5967 84.4648 24 127.826 24c59.9111 0 101.968 -32 161.913 -32c41.4365 0 80.4775 16.5879 102.261 32z" />
<glyph glyph-name="bookmark" unicode="&#xf02e;" horiz-adv-x="384"
d="M336 448c26.5098 0 48 -21.4902 48 -48v-464l-192 112l-192 -112v464c0 26.5098 21.4902 48 48 48h288zM336 19.5703v374.434c0 3.31348 -2.68555 5.99609 -6 5.99609h-276c-3.31152 0 -6 -2.68848 -6 -6v-374.43l144 84z" />
<glyph glyph-name="image" unicode="&#xf03e;"
d="M464 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h416zM458 48c3.31152 0 6 2.68848 6 6v276c0 3.31152 -2.68848 6 -6 6h-404c-3.31152 0 -6 -2.68848 -6 -6v-276
c0 -3.31152 2.68848 -6 6 -6h404zM128 296c22.0908 0 40 -17.9092 40 -40s-17.9092 -40 -40 -40s-40 17.9092 -40 40s17.9092 40 40 40zM96 96v48l39.5137 39.5146c4.6875 4.68652 12.2852 4.68652 16.9717 0l39.5146 -39.5146l119.514 119.515
c4.6875 4.68652 12.2852 4.68652 16.9717 0l87.5146 -87.5146v-80h-320z" />
<glyph glyph-name="edit" unicode="&#xf044;" horiz-adv-x="576"
d="M402.3 103.1l32 32c5 5 13.7002 1.5 13.7002 -5.69922v-145.4c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h273.5c7.09961 0 10.7002 -8.59961 5.7002 -13.7002l-32 -32c-1.5 -1.5 -3.5 -2.2998 -5.7002 -2.2998h-241.5v-352h352
v113.5c0 2.09961 0.799805 4.09961 2.2998 5.59961zM558.9 304.9l-262.601 -262.601l-90.3994 -10c-26.2002 -2.89941 -48.5 19.2002 -45.6006 45.6006l10 90.3994l262.601 262.601c22.8994 22.8994 59.8994 22.8994 82.6992 0l43.2002 -43.2002
c22.9004 -22.9004 22.9004 -60 0.100586 -82.7998zM460.1 274l-58.0996 58.0996l-185.8 -185.899l-7.2998 -65.2998l65.2998 7.2998zM524.9 353.7l-43.2002 43.2002c-4.10059 4.09961 -10.7998 4.09961 -14.7998 0l-30.9004 -30.9004l58.0996 -58.0996l30.9004 30.8994
c4 4.2002 4 10.7998 -0.0996094 14.9004z" />
<glyph glyph-name="times-circle" unicode="&#xf057;"
d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM357.8 254.2l-62.2002 -62.2002l62.2002 -62.2002
c4.7002 -4.7002 4.7002 -12.2998 0 -17l-22.5996 -22.5996c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-62.2002 62.2002l-62.2002 -62.2002c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-22.5996 22.5996c-4.7002 4.7002 -4.7002 12.2998 0 17l62.2002 62.2002l-62.2002 62.2002
c-4.7002 4.7002 -4.7002 12.2998 0 17l22.5996 22.5996c4.7002 4.7002 12.2998 4.7002 17 0l62.2002 -62.2002l62.2002 62.2002c4.7002 4.7002 12.2998 4.7002 17 0l22.5996 -22.5996c4.7002 -4.7002 4.7002 -12.2998 0 -17z" />
<glyph glyph-name="check-circle" unicode="&#xf058;"
d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 392c-110.549 0 -200 -89.4678 -200 -200c0 -110.549 89.4678 -200 200 -200c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200z
M396.204 261.733c4.66699 -4.70508 4.63672 -12.3037 -0.0673828 -16.9717l-172.589 -171.204c-4.70508 -4.66797 -12.3027 -4.63672 -16.9697 0.0683594l-90.7812 91.5156c-4.66797 4.70605 -4.63672 12.3047 0.0683594 16.9717l22.7188 22.5361
c4.70508 4.66699 12.3027 4.63574 16.9697 -0.0693359l59.792 -60.2773l141.353 140.216c4.70508 4.66797 12.3027 4.6377 16.9697 -0.0673828z" />
<glyph glyph-name="question-circle" unicode="&#xf059;"
d="M256 440c136.957 0 248 -111.083 248 -248c0 -136.997 -111.043 -248 -248 -248s-248 111.003 -248 248c0 136.917 111.043 248 248 248zM256 -8c110.569 0 200 89.4697 200 200c0 110.529 -89.5088 200 -200 200c-110.528 0 -200 -89.5049 -200 -200
c0 -110.569 89.4678 -200 200 -200zM363.244 247.2c0 -67.0518 -72.4209 -68.084 -72.4209 -92.8633v-6.33691c0 -6.62695 -5.37305 -12 -12 -12h-45.6475c-6.62695 0 -12 5.37305 -12 12v8.65918c0 35.7451 27.1006 50.0342 47.5791 61.5156
c17.5615 9.84473 28.3242 16.541 28.3242 29.5791c0 17.2461 -21.999 28.6934 -39.7842 28.6934c-23.1885 0 -33.8936 -10.9775 -48.9424 -29.9697c-4.05664 -5.11914 -11.46 -6.07031 -16.666 -2.12402l-27.8232 21.0986
c-5.10742 3.87207 -6.25098 11.0654 -2.64453 16.3633c23.627 34.6934 53.7217 54.1846 100.575 54.1846c49.0713 0 101.45 -38.3037 101.45 -88.7998zM298 80c0 -23.1592 -18.8408 -42 -42 -42s-42 18.8408 -42 42s18.8408 42 42 42s42 -18.8408 42 -42z" />
<glyph glyph-name="eye" unicode="&#xf06e;" horiz-adv-x="576"
d="M288 304c0.114258 0 0.240234 -0.0175781 0.354492 -0.0175781c61.6543 0 111.71 -50.0557 111.71 -111.71s-50.0557 -111.71 -111.71 -111.71s-111.71 50.0557 -111.71 111.71c0 10.7422 1.51953 21.1328 4.35547 30.9678
c7.95898 -4.52637 17.2129 -7.17188 27 -7.24023c30.9072 0 56 25.0928 56 56c-0.0683594 9.78711 -2.71387 19.041 -7.24023 27c9.88379 3.07617 20.3896 4.83008 31.2402 5zM572.52 206.6c2.21387 -4.37793 3.46094 -9.38965 3.46094 -14.626
c0 -5.2373 -1.24707 -10.1855 -3.46094 -14.5635c-54.1992 -105.771 -161.59 -177.41 -284.52 -177.41s-230.29 71.5898 -284.52 177.4c-2.21387 4.37793 -3.46094 9.38965 -3.46094 14.626c0 5.2373 1.24707 10.1855 3.46094 14.5635
c54.1992 105.771 161.59 177.41 284.52 177.41s230.29 -71.5898 284.52 -177.4zM288 48c98.6602 0 189.1 55 237.93 144c-48.8398 89 -139.27 144 -237.93 144s-189.09 -55 -237.93 -144c48.8398 -89 139.279 -144 237.93 -144z" />
<glyph glyph-name="eye-slash" unicode="&#xf070;" horiz-adv-x="640"
d="M634 -23c3.66895 -2.93262 6.00391 -7.45117 6.00391 -12.5088c0 -3.7832 -1.31543 -7.26074 -3.51367 -10.001l-10 -12.4902c-2.93359 -3.66309 -7.44824 -5.99414 -12.502 -5.99414c-3.77637 0 -7.25 1.31152 -9.98828 3.50391l-598 467.49
c-3.66895 2.93262 -6.00391 7.45117 -6.00391 12.5088c0 3.7832 1.31543 7.26074 3.51367 10.001l10 12.4902c2.93359 3.66309 7.44824 5.99414 12.502 5.99414c3.77637 0 7.25 -1.31152 9.98828 -3.50391zM296.79 301.53c7.51172 1.60254 15.2266 2.45508 23.21 2.46973
c60.4805 0 109.36 -47.9102 111.58 -107.85zM343.21 82.46c-7.51367 -1.59375 -15.2285 -2.44336 -23.21 -2.45996c-60.4697 0 -109.35 47.9102 -111.58 107.84zM320 336c-19.8799 0 -39.2803 -2.7998 -58.2197 -7.09961l-46.4102 36.29
c32.9199 11.8096 67.9297 18.8096 104.63 18.8096c122.93 0 230.29 -71.5898 284.57 -177.4c2.21289 -4.37793 3.45996 -9.38965 3.45996 -14.626c0 -5.2373 -1.24707 -10.1855 -3.45996 -14.5635c-14.1924 -27.5625 -31.9229 -52.6689 -52.9004 -75.1104l-37.7402 29.5
c17.2305 18.0527 31.9385 38.1318 44 60.2002c-48.8398 89 -139.279 144 -237.93 144zM320 48c19.8896 0 39.2803 2.7998 58.2197 7.08984l46.4102 -36.2803c-32.9199 -11.7598 -67.9297 -18.8096 -104.63 -18.8096c-122.92 0 -230.28 71.5898 -284.51 177.4
c-2.21387 4.37793 -3.46094 9.38965 -3.46094 14.626c0 5.2373 1.24707 10.1855 3.46094 14.5635c14.1885 27.5586 31.916 52.6621 52.8896 75.1006l37.7402 -29.5c-17.249 -18.0469 -31.9727 -38.1221 -44.0498 -60.1904c48.8496 -89 139.279 -144 237.93 -144z" />
<glyph glyph-name="calendar-alt" unicode="&#xf073;" horiz-adv-x="448"
d="M148 160h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12zM256 172c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40
c6.59961 0 12 -5.40039 12 -12v-40zM352 172c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM256 76c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40
c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM160 76c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM352 76c0 -6.59961 -5.40039 -12 -12 -12h-40
c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40
c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="comment" unicode="&#xf075;"
d="M256 416c141.4 0 256 -93.0996 256 -208s-114.6 -208 -256 -208c-32.7998 0 -64 5.2002 -92.9004 14.2998c-29.0996 -20.5996 -77.5996 -46.2998 -139.1 -46.2998c-9.59961 0 -18.2998 5.7002 -22.0996 14.5c-3.80078 8.7998 -2 19 4.59961 26
c0.5 0.400391 31.5 33.7998 46.4004 73.2002c-33 35.0996 -52.9004 78.7002 -52.9004 126.3c0 114.9 114.6 208 256 208zM256 48c114.7 0 208 71.7998 208 160s-93.2998 160 -208 160s-208 -71.7998 -208 -160c0 -42.2002 21.7002 -74.0996 39.7998 -93.4004
l20.6006 -21.7998l-10.6006 -28.0996c-5.5 -14.5 -12.5996 -28.1006 -19.8994 -40.2002c23.5996 7.59961 43.1992 18.9004 57.5 29l19.5 13.7998l22.6992 -7.2002c25.3008 -8 51.7002 -12.0996 78.4004 -12.0996z" />
<glyph glyph-name="folder" unicode="&#xf07b;"
d="M464 320c26.5098 0 48 -21.4902 48 -48v-224c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h146.74c8.49023 0 16.6299 -3.37012 22.6299 -9.37012l54.6299 -54.6299h192zM464 48v224h-198.62
c-8.49023 0 -16.6299 3.37012 -22.6299 9.37012l-54.6299 54.6299h-140.12v-288h416z" />
<glyph glyph-name="folder-open" unicode="&#xf07c;" horiz-adv-x="576"
d="M527.9 224c37.6992 0 60.6992 -41.5 40.6992 -73.4004l-79.8994 -128c-8.7998 -14.0996 -24.2002 -22.5996 -40.7002 -22.5996h-400c-26.5 0 -48 21.5 -48 48v288c0 26.5 21.5 48 48 48h160l64 -64h160c26.5 0 48 -21.5 48 -48v-48h47.9004zM48 330v-233.4l62.9004 104.2
c8.69922 14.4004 24.2998 23.2002 41.0996 23.2002h280v42c0 3.2998 -2.7002 6 -6 6h-173.9l-64 64h-134.1c-3.2998 0 -6 -2.7002 -6 -6zM448 48l80 128h-378.8l-77.2002 -128h376z" />
<glyph glyph-name="chart-bar" unicode="&#xf080;"
d="M396.8 96c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v230.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-230.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM204.8 96
c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v198.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-198.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM300.8 96
c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v134.4c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-134.4c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004zM496 48c8.83984 0 16 -7.16016 16 -16v-16
c0 -8.83984 -7.16016 -16 -16 -16h-464c-17.6699 0 -32 14.3301 -32 32v336c0 8.83984 7.16016 16 16 16h16c8.83984 0 16 -7.16016 16 -16v-320h448zM108.8 96c-6.39941 0 -12.7998 6.40039 -12.7998 12.7998v70.4004c0 6.39941 6.40039 12.7998 12.7998 12.7998h22.4004
c6.39941 0 12.7998 -6.40039 12.7998 -12.7998v-70.4004c0 -6.39941 -6.40039 -12.7998 -12.7998 -12.7998h-22.4004z" />
<glyph glyph-name="comments" unicode="&#xf086;" horiz-adv-x="576"
d="M532 61.7998c15.2998 -30.7002 37.4004 -54.5 37.7998 -54.7998c6.2998 -6.7002 8 -16.5 4.40039 -25c-3.7002 -8.5 -12 -14 -21.2002 -14c-53.5996 0 -96.7002 20.2998 -125.2 38.7998c-19 -4.39941 -39 -6.7998 -59.7998 -6.7998
c-86.2002 0 -159.9 40.4004 -191.3 97.7998c-9.7002 1.2002 -19.2002 2.7998 -28.4004 4.90039c-28.5 -18.6006 -71.7002 -38.7998 -125.2 -38.7998c-9.19922 0 -17.5996 5.5 -21.1992 14c-3.7002 8.5 -1.90039 18.2998 4.39941 25
c0.400391 0.399414 22.4004 24.1992 37.7002 54.8994c-27.5 27.2002 -44 61.2002 -44 98.2002c0 88.4004 93.0996 160 208 160c86.2998 0 160.3 -40.5 191.8 -98.0996c99.7002 -11.8008 176.2 -77.9004 176.2 -157.9c0 -37.0996 -16.5 -71.0996 -44 -98.2002zM139.2 154.1
l19.7998 -4.5c16 -3.69922 32.5 -5.59961 49 -5.59961c86.7002 0 160 51.2998 160 112s-73.2998 112 -160 112s-160 -51.2998 -160 -112c0 -28.7002 16.2002 -50.5996 29.7002 -64l24.7998 -24.5l-15.5 -31.0996c-2.59961 -5.10059 -5.2998 -10.1006 -8 -14.8008
c14.5996 5.10059 29 12.3008 43.0996 21.4004zM498.3 96c13.5 13.4004 29.7002 35.2998 29.7002 64c0 49.2002 -48.2998 91.5 -112.7 106c0.299805 -3.2998 0.700195 -6.59961 0.700195 -10c0 -80.9004 -78 -147.5 -179.3 -158.3
c29.0996 -29.6006 77.2998 -49.7002 131.3 -49.7002c16.5 0 33 1.90039 49 5.59961l19.9004 4.60059l17.0996 -11.1006c14.0996 -9.09961 28.5 -16.2998 43.0996 -21.3994c-2.69922 4.7002 -5.39941 9.7002 -8 14.7998l-15.5 31.0996z" />
<glyph glyph-name="star-half" unicode="&#xf089;" horiz-adv-x="576"
d="M288 62.7002v-54.2998l-130.7 -68.6006c-23.3994 -12.2998 -50.8994 7.60059 -46.3994 33.7002l25 145.5l-105.7 103c-19 18.5 -8.5 50.7998 17.7002 54.5996l146.1 21.2002l65.2998 132.4c5.90039 11.8994 17.2998 17.7998 28.7002 17.7998v-68.0996l-62.2002 -126
l-139 -20.2002l100.601 -98l-23.7002 -138.4z" />
<glyph glyph-name="lemon" unicode="&#xf094;"
d="M484.112 420.111c28.1221 -28.123 35.9434 -68.0039 19.0215 -97.0547c-23.0576 -39.584 50.1436 -163.384 -82.3311 -295.86c-132.301 -132.298 -256.435 -59.3594 -295.857 -82.3291c-29.0459 -16.917 -68.9219 -9.11426 -97.0576 19.0205
c-28.1221 28.1221 -35.9434 68.0029 -19.0215 97.0547c23.0566 39.5859 -50.1436 163.386 82.3301 295.86c132.308 132.309 256.407 59.3496 295.862 82.332c29.0498 16.9219 68.9307 9.09863 97.0537 -19.0234zM461.707 347.217
c13.5166 23.2031 -27.7578 63.7314 -50.4883 50.4912c-66.6025 -38.7939 -165.646 45.5898 -286.081 -74.8457c-120.444 -120.445 -36.0449 -219.472 -74.8447 -286.08c-13.542 -23.2471 27.8145 -63.6953 50.4932 -50.4883
c66.6006 38.7949 165.636 -45.5996 286.076 74.8428c120.444 120.445 36.0449 219.472 74.8447 286.08zM291.846 338.481c1.37012 -10.96 -6.40332 -20.957 -17.3643 -22.3271c-54.8467 -6.85547 -135.779 -87.7871 -142.636 -142.636
c-1.37305 -10.9883 -11.3984 -18.7334 -22.3262 -17.3643c-10.9609 1.37012 -18.7344 11.3652 -17.3643 22.3262c9.16211 73.2852 104.167 168.215 177.364 177.364c10.9531 1.36816 20.9561 -6.40234 22.3262 -17.3633z" />
<glyph glyph-name="credit-card" unicode="&#xf09d;" horiz-adv-x="576"
d="M527.9 416c26.5996 0 48.0996 -21.5 48.0996 -48v-352c0 -26.5 -21.5 -48 -48.0996 -48h-479.801c-26.5996 0 -48.0996 21.5 -48.0996 48v352c0 26.5 21.5 48 48.0996 48h479.801zM54.0996 368c-3.2998 0 -6 -2.7002 -6 -6v-42h479.801v42c0 3.2998 -2.7002 6 -6 6
h-467.801zM521.9 16c3.2998 0 6 2.7002 6 6v170h-479.801v-170c0 -3.2998 2.7002 -6 6 -6h467.801zM192 116v-40c0 -6.59961 -5.40039 -12 -12 -12h-72c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h72c6.59961 0 12 -5.40039 12 -12zM384 116v-40
c0 -6.59961 -5.40039 -12 -12 -12h-136c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h136c6.59961 0 12 -5.40039 12 -12z" />
<glyph glyph-name="hdd" unicode="&#xf0a0;" horiz-adv-x="576"
d="M567.403 212.358c5.59668 -8.04688 8.59668 -17.6113 8.59668 -27.4121v-136.946c0 -26.5098 -21.4902 -48 -48 -48h-480c-26.5098 0 -48 21.4902 -48 48v136.946c0 10.167 3.19531 19.6465 8.59668 27.4121l105.08 151.053
c8.67383 12.4678 23.0791 20.5889 39.4043 20.5889h269.838c16.3252 0 30.7305 -8.12109 39.4043 -20.5889zM153.081 336l-77.9131 -112h425.664l-77.9131 112h-269.838zM528 48v128h-480v-128h480zM496 112c0 -17.6729 -14.3271 -32 -32 -32s-32 14.3271 -32 32
s14.3271 32 32 32s32 -14.3271 32 -32zM400 112c0 -17.6729 -14.3271 -32 -32 -32s-32 14.3271 -32 32s14.3271 32 32 32s32 -14.3271 32 -32z" />
<glyph glyph-name="hand-point-right" unicode="&#xf0a4;"
d="M428.8 310.4c45.0996 0 83.2002 -38.1016 83.2002 -83.2002c0 -45.6162 -37.7646 -83.2002 -83.2002 -83.2002h-35.6475c-1.71387 -7.70605 -4.43555 -15.2051 -7.92969 -22.0645c2.50586 -22.0059 -3.50293 -44.9775 -15.9844 -62.791
c-1.14062 -52.4863 -37.3984 -91.1445 -99.9404 -91.1445h-21.2988c-60.0635 0 -98.5117 40 -127.2 40h-2.67871c-5.74707 -4.95215 -13.5361 -8 -22.1201 -8h-64c-17.6729 0 -32 12.8936 -32 28.7998v230.4c0 15.9062 14.3271 28.7998 32 28.7998h64.001
c8.58398 0 16.373 -3.04785 22.1201 -8h2.67871c6.96387 0 14.8623 6.19336 30.1816 23.6689l0.128906 0.148438l0.130859 0.145508c8.85645 9.93652 18.1162 20.8398 25.8506 33.2529c18.7051 30.2471 30.3936 78.7842 75.707 78.7842c56.9277 0 92 -35.2861 92 -83.2002
c0 -0.0283203 0 0.0361328 0 0.0078125c0 -7.66602 -0.748047 -15.1582 -2.17578 -22.4072h86.1768zM428.8 192c18.9756 0 35.2002 16.2246 35.2002 35.2002c0 18.7002 -16.7754 35.2002 -35.2002 35.2002h-158.399c0 17.3242 26.3994 35.1992 26.3994 70.3994
c0 26.4004 -20.625 35.2002 -44 35.2002c-8.79395 0 -20.4443 -32.7119 -34.9258 -56.0996c-9.07422 -14.5752 -19.5244 -27.2256 -30.7988 -39.875c-16.1094 -18.374 -33.8359 -36.6328 -59.0752 -39.5967v-176.753c42.79 -3.7627 74.5088 -39.6758 120 -39.6758h21.2988
c40.5244 0 57.124 22.1973 50.6006 61.3252c14.6113 8.00098 24.1514 33.9785 12.9248 53.625c19.3652 18.2246 17.7871 46.3809 4.9502 61.0498h91.0254zM88 64c0 13.2549 -10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24s24 10.7451 24 24z" />
<glyph glyph-name="hand-point-left" unicode="&#xf0a5;"
d="M0 227.2c0 45.0986 38.1006 83.2002 83.2002 83.2002h86.1758c-1.3623 6.91016 -2.17578 14.374 -2.17578 22.3994c0 47.9141 35.0723 83.2002 92 83.2002c45.3135 0 57.002 -48.5371 75.7061 -78.7852c7.73438 -12.4121 16.9951 -23.3154 25.8506 -33.2529
l0.130859 -0.145508l0.128906 -0.148438c15.3213 -17.4746 23.2197 -23.668 30.1836 -23.668h2.67871c5.74707 4.95215 13.5361 8 22.1201 8h64c17.6729 0 32 -12.8936 32 -28.7998v-230.4c0 -15.9062 -14.3271 -28.7998 -32 -28.7998h-64
c-8.58398 0 -16.373 3.04785 -22.1201 8h-2.67871c-28.6885 0 -67.1367 -40 -127.2 -40h-21.2988c-62.542 0 -98.8008 38.6582 -99.9404 91.1445c-12.4814 17.8135 -18.4922 40.7852 -15.9844 62.791c-3.49414 6.85938 -6.21582 14.3584 -7.92969 22.0645h-35.6465
c-45.4355 0 -83.2002 37.584 -83.2002 83.2002zM48 227.2c0 -18.9756 16.2246 -35.2002 35.2002 -35.2002h91.0244c-12.8369 -14.6689 -14.415 -42.8252 4.9502 -61.0498c-11.2256 -19.6465 -1.68652 -45.624 12.9248 -53.625
c-6.52246 -39.1279 10.0771 -61.3252 50.6016 -61.3252h21.2988c45.4912 0 77.21 35.9131 120 39.6768v176.752c-25.2393 2.96289 -42.9658 21.2227 -59.0752 39.5967c-11.2744 12.6494 -21.7246 25.2998 -30.7988 39.875
c-14.4814 23.3877 -26.1318 56.0996 -34.9258 56.0996c-23.375 0 -44 -8.7998 -44 -35.2002c0 -35.2002 26.3994 -53.0752 26.3994 -70.3994h-158.399c-18.4248 0 -35.2002 -16.5 -35.2002 -35.2002zM448 88c-13.2549 0 -24 -10.7451 -24 -24s10.7451 -24 24 -24
s24 10.7451 24 24s-10.7451 24 -24 24z" />
<glyph glyph-name="hand-point-up" unicode="&#xf0a6;" horiz-adv-x="448"
d="M105.6 364.8c0 45.0996 38.1016 83.2002 83.2002 83.2002c45.6162 0 83.2002 -37.7646 83.2002 -83.2002v-35.6465c7.70605 -1.71387 15.2051 -4.43555 22.0645 -7.92969c22.0059 2.50684 44.9775 -3.50293 62.791 -15.9844
c52.4863 -1.14062 91.1445 -37.3984 91.1445 -99.9404v-21.2988c0 -60.0635 -40 -98.5117 -40 -127.2v-2.67871c4.95215 -5.74707 8 -13.5361 8 -22.1201v-64c0 -17.6729 -12.8936 -32 -28.7998 -32h-230.4c-15.9062 0 -28.7998 14.3271 -28.7998 32v64
c0 8.58398 3.04785 16.373 8 22.1201v2.67871c0 6.96387 -6.19336 14.8623 -23.6689 30.1816l-0.148438 0.128906l-0.145508 0.130859c-9.93652 8.85645 -20.8398 18.1162 -33.2529 25.8506c-30.2471 18.7051 -78.7842 30.3936 -78.7842 75.707
c0 56.9277 35.2861 92 83.2002 92c0.0283203 0 -0.0361328 0 -0.0078125 0c7.66602 0 15.1582 -0.748047 22.4072 -2.17578v86.1768zM224 364.8c0 18.9756 -16.2246 35.2002 -35.2002 35.2002c-18.7002 0 -35.2002 -16.7754 -35.2002 -35.2002v-158.399
c-17.3242 0 -35.1992 26.3994 -70.3994 26.3994c-26.4004 0 -35.2002 -20.625 -35.2002 -44c0 -8.79395 32.7119 -20.4443 56.0996 -34.9258c14.5752 -9.07422 27.2256 -19.5244 39.875 -30.7988c18.374 -16.1094 36.6328 -33.8359 39.5967 -59.0752h176.753
c3.7627 42.79 39.6758 74.5088 39.6758 120v21.2988c0 40.5244 -22.1973 57.124 -61.3252 50.6006c-8.00098 14.6113 -33.9785 24.1514 -53.625 12.9248c-18.2246 19.3652 -46.3809 17.7871 -61.0498 4.9502v91.0254zM352 24c-13.2549 0 -24 -10.7451 -24 -24
s10.7451 -24 24 -24s24 10.7451 24 24s-10.7451 24 -24 24z" />
<glyph glyph-name="hand-point-down" unicode="&#xf0a7;" horiz-adv-x="448"
d="M188.8 -64c-45.0986 0 -83.2002 38.1006 -83.2002 83.2002v86.1758c-6.91016 -1.3623 -14.374 -2.17578 -22.3994 -2.17578c-47.9141 0 -83.2002 35.0723 -83.2002 92c0 45.3135 48.5371 57.002 78.7852 75.707c12.4121 7.73438 23.3154 16.9951 33.2529 25.8506
l0.145508 0.130859l0.148438 0.128906c17.4746 15.3213 23.668 23.2197 23.668 30.1836v2.67871c-4.95215 5.74707 -8 13.5361 -8 22.1201v64c0 17.6729 12.8936 32 28.7998 32h230.4c15.9062 0 28.7998 -14.3271 28.7998 -32v-64.001
c0 -8.58398 -3.04785 -16.373 -8 -22.1201v-2.67871c0 -28.6885 40 -67.1367 40 -127.2v-21.2988c0 -62.542 -38.6582 -98.8008 -91.1445 -99.9404c-17.8135 -12.4814 -40.7852 -18.4922 -62.791 -15.9844c-6.85938 -3.49414 -14.3584 -6.21582 -22.0645 -7.92969v-35.6465
c0 -45.4355 -37.584 -83.2002 -83.2002 -83.2002zM188.8 -16c18.9756 0 35.2002 16.2246 35.2002 35.2002v91.0244c14.6689 -12.8369 42.8252 -14.415 61.0498 4.9502c19.6465 -11.2256 45.624 -1.68652 53.625 12.9248c39.1279 -6.52246 61.3252 10.0771 61.3252 50.6016
v21.2988c0 45.4912 -35.9131 77.21 -39.6768 120h-176.752c-2.96289 -25.2393 -21.2227 -42.9658 -39.5967 -59.0752c-12.6494 -11.2744 -25.2998 -21.7246 -39.875 -30.7988c-23.3877 -14.4814 -56.0996 -26.1318 -56.0996 -34.9258c0 -23.375 8.7998 -44 35.2002 -44
c35.2002 0 53.0752 26.3994 70.3994 26.3994v-158.399c0 -18.4248 16.5 -35.2002 35.2002 -35.2002zM328 384c0 -13.2549 10.7451 -24 24 -24s24 10.7451 24 24s-10.7451 24 -24 24s-24 -10.7451 -24 -24z" />
<glyph glyph-name="copy" unicode="&#xf0c5;" horiz-adv-x="448"
d="M433.941 382.059c8.68848 -8.68848 14.0586 -20.6943 14.0586 -33.9404v-268.118c0 -26.5098 -21.4902 -48 -48 -48h-80v-48c0 -26.5098 -21.4902 -48 -48 -48h-224c-26.5098 0 -48 21.4902 -48 48v320c0 26.5098 21.4902 48 48 48h80v48c0 26.5098 21.4902 48 48 48
h172.118c13.2461 0 25.252 -5.37012 33.9404 -14.0586zM266 -16c3.31152 0 6 2.68848 6 6v42h-96c-26.5098 0 -48 21.4902 -48 48v224h-74c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h212zM394 80c3.31152 0 6 2.68848 6 6v202h-88
c-13.2549 0 -24 10.7451 -24 24v88h-106c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h212zM400 336v9.63184c0 1.65527 -0.670898 3.15723 -1.75684 4.24316l-48.3682 48.3682c-1.12598 1.125 -2.65234 1.75684 -4.24316 1.75684h-9.63184v-64h64z" />
<glyph glyph-name="save" unicode="&#xf0c7;" horiz-adv-x="448"
d="M433.941 318.059c8.68848 -8.68848 14.0586 -20.6943 14.0586 -33.9404v-268.118c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h268.118c13.2461 0 25.252 -5.37012 33.9404 -14.0586zM272 368h-128v-80h128v80z
M394 16c3.31152 0 6 2.68848 6 6v259.632c0 1.65527 -0.670898 3.15723 -1.75684 4.24316l-78.2432 78.2432v-100.118c0 -13.2549 -10.7451 -24 -24 -24h-176c-13.2549 0 -24 10.7451 -24 24v104h-42c-3.31152 0 -6 -2.68848 -6 -6v-340c0 -3.31152 2.68848 -6 6 -6h340z
M224 216c48.5234 0 88 -39.4766 88 -88s-39.4766 -88 -88 -88s-88 39.4766 -88 88s39.4766 88 88 88zM224 88c22.0557 0 40 17.9443 40 40s-17.9443 40 -40 40s-40 -17.9443 -40 -40s17.9443 -40 40 -40z" />
<glyph glyph-name="square" unicode="&#xf0c8;" horiz-adv-x="448"
d="M400 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352zM394 16c3.2998 0 6 2.7002 6 6v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340z" />
<glyph glyph-name="envelope" unicode="&#xf0e0;"
d="M464 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h416zM464 336h-416v-40.8047c22.4248 -18.2627 58.1797 -46.6602 134.587 -106.49
c16.834 -13.2422 50.2051 -45.0762 73.4131 -44.7012c23.2119 -0.371094 56.5723 31.4541 73.4131 44.7012c76.4189 59.8389 112.165 88.2305 134.587 106.49v40.8047zM48 48h416v185.601c-22.915 -18.252 -55.4189 -43.8691 -104.947 -82.6523
c-22.5439 -17.748 -60.3359 -55.1787 -103.053 -54.9473c-42.9277 -0.231445 -81.2051 37.75 -103.062 54.9551c-49.5293 38.7842 -82.0244 64.3945 -104.938 82.6455v-185.602z" />
<glyph glyph-name="lightbulb" unicode="&#xf0eb;" horiz-adv-x="352"
d="M176 368c8.83984 0 16 -7.16016 16 -16s-7.16016 -16 -16 -16c-35.2803 0 -64 -28.7002 -64 -64c0 -8.83984 -7.16016 -16 -16 -16s-16 7.16016 -16 16c0 52.9404 43.0596 96 96 96zM96.0596 -11.1699l-0.0400391 43.1797h159.961l-0.0507812 -43.1797
c-0.00976562 -3.13965 -0.939453 -6.21973 -2.67969 -8.83984l-24.5098 -36.8398c-2.95996 -4.45996 -7.95996 -7.14062 -13.3203 -7.14062h-78.8496c-5.35059 0 -10.3506 2.68066 -13.3203 7.14062l-24.5098 36.8398c-1.75 2.62012 -2.68066 5.68945 -2.68066 8.83984z
M176 448c97.2002 0 176 -78.7998 176 -176c0 -44.3701 -16.4502 -84.8496 -43.5498 -115.79c-16.6406 -18.9795 -42.7402 -58.79 -52.4199 -92.1602v-0.0498047h-48v0.0996094c0.00488281 4.98145 0.790039 9.78809 2.21973 14.3008
c5.67969 17.9893 22.9902 64.8496 62.0996 109.46c20.4102 23.29 31.6504 53.1699 31.6504 84.1396c0 70.5801 -57.4199 128 -128 128c-68.2803 0 -128.15 -54.3604 -127.95 -128c0.0898438 -30.9902 11.0703 -60.71 31.6104 -84.1396
c39.3496 -44.9004 56.5801 -91.8604 62.1699 -109.67c1.42969 -4.56055 2.13965 -9.30078 2.15039 -14.0703v-0.120117h-48v0.0595703c-9.68066 33.3604 -35.7803 73.1709 -52.4209 92.1602c-27.1094 30.9307 -43.5596 71.4102 -43.5596 115.78
c0 93.0303 73.7197 176 176 176z" />
<glyph glyph-name="bell" unicode="&#xf0f3;" horiz-adv-x="448"
d="M439.39 85.71c6 -6.44043 8.66016 -14.1602 8.61035 -21.71c-0.0996094 -16.4004 -12.9805 -32 -32.0996 -32h-383.801c-19.1191 0 -31.9893 15.5996 -32.0996 32c-0.0498047 7.5498 2.61035 15.2598 8.61035 21.71c19.3193 20.7598 55.4697 51.9902 55.4697 154.29
c0 77.7002 54.4795 139.9 127.939 155.16v20.8398c0 17.6699 14.3203 32 31.9805 32s31.9805 -14.3301 31.9805 -32v-20.8398c73.46 -15.2598 127.939 -77.46 127.939 -155.16c0 -102.3 36.1504 -133.53 55.4697 -154.29zM67.5303 80h312.939
c-21.2197 27.96 -44.4199 74.3203 -44.5293 159.42c0 0.200195 0.0595703 0.379883 0.0595703 0.580078c0 61.8604 -50.1396 112 -112 112s-112 -50.1396 -112 -112c0 -0.200195 0.0595703 -0.379883 0.0595703 -0.580078
c-0.109375 -85.0898 -23.3096 -131.45 -44.5293 -159.42zM224 -64c-35.3203 0 -63.9697 28.6504 -63.9697 64h127.939c0 -35.3496 -28.6494 -64 -63.9697 -64z" />
<glyph glyph-name="hospital" unicode="&#xf0f8;" horiz-adv-x="448"
d="M128 204v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40c0 -6.62695 -5.37305 -12 -12 -12h-40c-6.62695 0 -12 5.37305 -12 12zM268 192c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40
c0 -6.62695 -5.37305 -12 -12 -12h-40zM192 108c0 -6.62695 -5.37305 -12 -12 -12h-40c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-40zM268 96c-6.62695 0 -12 5.37305 -12 12v40c0 6.62695 5.37305 12 12 12h40
c6.62695 0 12 -5.37305 12 -12v-40c0 -6.62695 -5.37305 -12 -12 -12h-40zM448 -28v-36h-448v36c0 6.62695 5.37305 12 12 12h19.5v378.965c0 11.6172 10.7451 21.0352 24 21.0352h88.5v40c0 13.2549 10.7451 24 24 24h112c13.2549 0 24 -10.7451 24 -24v-40h88.5
c13.2549 0 24 -9.41797 24 -21.0352v-378.965h19.5c6.62695 0 12 -5.37305 12 -12zM79.5 -15h112.5v67c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-67h112.5v351h-64.5v-24c0 -13.2549 -10.7451 -24 -24 -24h-112c-13.2549 0 -24 10.7451 -24 24v24
h-64.5v-351zM266 384h-26v26c0 3.31152 -2.68848 6 -6 6h-20c-3.31152 0 -6 -2.68848 -6 -6v-26h-26c-3.31152 0 -6 -2.68848 -6 -6v-20c0 -3.31152 2.68848 -6 6 -6h26v-26c0 -3.31152 2.68848 -6 6 -6h20c3.31152 0 6 2.68848 6 6v26h26c3.31152 0 6 2.68848 6 6v20
c0 3.31152 -2.68848 6 -6 6z" />
<glyph glyph-name="plus-square" unicode="&#xf0fe;" horiz-adv-x="448"
d="M352 208v-32c0 -6.59961 -5.40039 -12 -12 -12h-88v-88c0 -6.59961 -5.40039 -12 -12 -12h-32c-6.59961 0 -12 5.40039 -12 12v88h-88c-6.59961 0 -12 5.40039 -12 12v32c0 6.59961 5.40039 12 12 12h88v88c0 6.59961 5.40039 12 12 12h32c6.59961 0 12 -5.40039 12 -12
v-88h88c6.59961 0 12 -5.40039 12 -12zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340
c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="circle" unicode="&#xf111;"
d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200z" />
<glyph glyph-name="smile" unicode="&#xf118;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM332 135.4c8.5 10.1992 23.7002 11.5 33.7998 3.09961c10.2002 -8.5 11.6006 -23.5996 3.10059 -33.7998
c-30 -36 -74.1006 -56.6006 -120.9 -56.6006s-90.9004 20.6006 -120.9 56.6006c-8.39941 10.2002 -7.09961 25.2998 3.10059 33.7998c10.0996 8.40039 25.2998 7.09961 33.7998 -3.09961c20.7998 -25.1006 51.5 -39.4004 84 -39.4004s63.2002 14.4004 84 39.4004z" />
<glyph glyph-name="frown" unicode="&#xf119;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM248 144c40.2002 0 78 -17.7002 103.8 -48.5996c8.40039 -10.2002 7.10059 -25.3008 -3.09961 -33.8008
c-10.7002 -8.7998 -25.7002 -6.59961 -33.7998 3.10059c-16.6006 20 -41 31.3994 -66.9004 31.3994s-50.2998 -11.5 -66.9004 -31.3994c-8.5 -10.2002 -23.5996 -11.5 -33.7998 -3.10059c-10.2002 8.5 -11.5996 23.6006 -3.09961 33.8008
c25.7998 30.8994 63.5996 48.5996 103.8 48.5996z" />
<glyph glyph-name="meh" unicode="&#xf11a;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM336 128c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-176c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h176z
" />
<glyph glyph-name="keyboard" unicode="&#xf11c;" horiz-adv-x="576"
d="M528 384c26.5098 0 48 -21.4902 48 -48v-288c0 -26.5098 -21.4902 -48 -48 -48h-480c-26.5098 0 -48 21.4902 -48 48v288c0 26.5098 21.4902 48 48 48h480zM536 48v288c0 4.41113 -3.58887 8 -8 8h-480c-4.41113 0 -8 -3.58887 -8 -8v-288c0 -4.41113 3.58887 -8 8 -8
h480c4.41113 0 8 3.58887 8 8zM170 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM266 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28
c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM362 178c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM458 178c0 -6.62695 -5.37305 -12 -12 -12h-28
c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM122 96c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM506 96
c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM122 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28
c6.62695 0 12 -5.37305 12 -12v-28zM218 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM314 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28
c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM410 260c0 -6.62695 -5.37305 -12 -12 -12h-28c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM506 260c0 -6.62695 -5.37305 -12 -12 -12h-28
c-6.62695 0 -12 5.37305 -12 12v28c0 6.62695 5.37305 12 12 12h28c6.62695 0 12 -5.37305 12 -12v-28zM408 102c0 -6.62695 -5.37305 -12 -12 -12h-216c-6.62695 0 -12 5.37305 -12 12v16c0 6.62695 5.37305 12 12 12h216c6.62695 0 12 -5.37305 12 -12v-16z" />
<glyph glyph-name="calendar" unicode="&#xf133;" horiz-adv-x="448"
d="M400 384c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12
v-52h48zM394 -16c3.2998 0 6 2.7002 6 6v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340z" />
<glyph glyph-name="play-circle" unicode="&#xf144;"
d="M371.7 210c16.3994 -9.2002 16.3994 -32.9004 0 -42l-176 -101c-15.9004 -8.7998 -35.7002 2.59961 -35.7002 21v208c0 18.5 19.9004 29.7998 35.7002 21zM504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192
c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200z" />
<glyph glyph-name="minus-square" unicode="&#xf146;" horiz-adv-x="448"
d="M108 164c-6.59961 0 -12 5.40039 -12 12v32c0 6.59961 5.40039 12 12 12h232c6.59961 0 12 -5.40039 12 -12v-32c0 -6.59961 -5.40039 -12 -12 -12h-232zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h352
c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="check-square" unicode="&#xf14a;" horiz-adv-x="448"
d="M400 416c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h352zM400 16v352h-352v-352h352zM364.136 257.724l-172.589 -171.204
c-4.70508 -4.66699 -12.3027 -4.63672 -16.9697 0.0683594l-90.7812 91.5156c-4.66699 4.70508 -4.63672 12.3037 0.0693359 16.9717l22.7188 22.5361c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0693359l59.792 -60.2773l141.353 140.217
c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0683594l22.5361 -22.7178c4.66699 -4.70605 4.63672 -12.3047 -0.0683594 -16.9717z" />
<glyph glyph-name="share-square" unicode="&#xf14d;" horiz-adv-x="576"
d="M561.938 289.94c18.75 -18.7402 18.75 -49.1406 0 -67.8809l-143.998 -144c-29.9727 -29.9727 -81.9404 -9.05273 -81.9404 33.9404v53.7998c-101.266 -7.83691 -99.625 -31.6406 -84.1104 -78.7598c14.2285 -43.0889 -33.4736 -79.248 -71.0195 -55.7402
c-51.6924 32.3057 -84.8701 83.0635 -84.8701 144.76c0 39.3408 12.2197 72.7402 36.3301 99.3008c19.8398 21.8398 47.7402 38.4697 82.9102 49.4199c36.7295 11.4395 78.3096 16.1094 120.76 17.9893v57.1982c0 42.9355 51.9258 63.9541 81.9404 33.9404zM384 112l144 144
l-144 144v-104.09c-110.86 -0.90332 -240 -10.5166 -240 -119.851c0 -52.1396 32.79 -85.6094 62.3096 -104.06c-39.8174 120.65 48.999 141.918 177.69 143.84v-103.84zM408.74 27.5068c7.4375 2.125 14.5508 5.30566 20.9736 9.30273
c7.97656 4.95215 18.2861 -0.825195 18.2861 -10.2139v-42.5957c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h132c6.62695 0 12 -5.37305 12 -12v-4.48633c0 -4.91699 -2.9873 -9.36914 -7.56934 -11.1514
c-13.7021 -5.33105 -26.3955 -11.5371 -38.0498 -18.585c-1.82715 -1.11523 -3.98633 -1.76953 -6.28027 -1.77734h-86.1006c-3.31152 0 -6 -2.68848 -6 -6v-340c0 -3.31152 2.68848 -6 6 -6h340c3.31152 0 6 2.68848 6 6v25.9658c0 5.37012 3.5791 10.0596 8.74023 11.541z
" />
<glyph glyph-name="compass" unicode="&#xf14e;" horiz-adv-x="496"
d="M347.94 318.14c16.6592 7.61035 33.8096 -9.54004 26.1992 -26.1992l-65.9697 -144.341c-3.19238 -6.9834 -8.78613 -12.5771 -15.7695 -15.7695l-144.341 -65.9697c-16.6592 -7.61035 -33.8096 9.5498 -26.1992 26.1992l65.9697 144.341
c3.19238 6.9834 8.78613 12.5771 15.7695 15.7695zM270.58 169.42c12.4697 12.4697 12.4697 32.6904 0 45.1602s-32.6904 12.4697 -45.1602 0s-12.4697 -32.6904 0 -45.1602s32.6904 -12.4697 45.1602 0zM248 440c136.97 0 248 -111.03 248 -248s-111.03 -248 -248 -248
s-248 111.03 -248 248s111.03 248 248 248zM248 -8c110.28 0 200 89.7197 200 200s-89.7197 200 -200 200s-200 -89.7197 -200 -200s89.7197 -200 200 -200z" />
<glyph glyph-name="caret-square-down" unicode="&#xf150;" horiz-adv-x="448"
d="M125.1 240h197.801c10.6992 0 16.0996 -13 8.5 -20.5l-98.9004 -98.2998c-4.7002 -4.7002 -12.2002 -4.7002 -16.9004 0l-98.8994 98.2998c-7.7002 7.5 -2.2998 20.5 8.39941 20.5zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="caret-square-up" unicode="&#xf151;" horiz-adv-x="448"
d="M322.9 144h-197.801c-10.6992 0 -16.0996 13 -8.5 20.5l98.9004 98.2998c4.7002 4.7002 12.2002 4.7002 16.9004 0l98.8994 -98.2998c7.7002 -7.5 2.2998 -20.5 -8.39941 -20.5zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="caret-square-right" unicode="&#xf152;" horiz-adv-x="448"
d="M176 93.0996v197.801c0 10.6992 13 16.0996 20.5 8.5l98.2998 -98.9004c4.7002 -4.7002 4.7002 -12.2002 0 -16.9004l-98.2998 -98.8994c-7.5 -7.7002 -20.5 -2.2998 -20.5 8.39941zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="file" unicode="&#xf15b;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416z" />
<glyph glyph-name="file-alt" unicode="&#xf15c;" horiz-adv-x="384"
d="M288 200v-28c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12v28c0 6.59961 5.40039 12 12 12h168c6.59961 0 12 -5.40039 12 -12zM276 128c6.59961 0 12 -5.40039 12 -12v-28c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12
v28c0 6.59961 5.40039 12 12 12h168zM384 316.1v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996l83.9004 -83.9004c9 -8.90039 14.0996 -21.2002 14.0996 -33.9004z
M256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416h288z" />
<glyph glyph-name="thumbs-up" unicode="&#xf164;"
d="M466.27 161.31c4.6748 -22.6465 0.864258 -44.5371 -8.98926 -62.9893c2.95898 -23.8682 -4.02148 -48.5654 -17.3398 -66.9902c-0.954102 -55.9072 -35.8232 -95.3301 -112.94 -95.3301c-7 0 -15 0.00976562 -22.2197 0.00976562
c-102.742 0 -133.293 38.9395 -177.803 39.9404c-3.56934 -13.7764 -16.085 -23.9502 -30.9775 -23.9502h-64c-17.6729 0 -32 14.3271 -32 32v240c0 17.6729 14.3271 32 32 32h98.7598c19.1455 16.9531 46.0137 60.6533 68.7598 83.4004
c13.667 13.667 10.1533 108.6 71.7607 108.6c57.5801 0 95.2695 -31.9355 95.2695 -104.73c0 -18.4092 -3.92969 -33.7295 -8.84961 -46.5391h36.4795c48.6025 0 85.8203 -41.5654 85.8203 -85.5801c0 -19.1504 -4.95996 -34.9902 -13.7305 -49.8408zM404.52 107.48
c21.5811 20.3838 18.6992 51.0645 5.21094 65.6191c9.44922 0 22.3594 18.9102 22.2695 37.8105c-0.0898438 18.9102 -16.71 37.8203 -37.8203 37.8203h-103.989c0 37.8193 28.3594 55.3691 28.3594 94.5391c0 23.75 0 56.7305 -47.2695 56.7305
c-18.9102 -18.9102 -9.45996 -66.1797 -37.8203 -94.54c-26.5596 -26.5703 -66.1797 -97.46 -94.54 -97.46h-10.9199v-186.17c53.6113 0 100.001 -37.8203 171.64 -37.8203h37.8203c35.5117 0 60.8203 17.1201 53.1201 65.9004
c15.2002 8.16016 26.5 36.4395 13.9395 57.5703zM88 16c0 13.2549 -10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24s24 10.7451 24 24z" />
<glyph glyph-name="thumbs-down" unicode="&#xf165;"
d="M466.27 222.69c8.77051 -14.8506 13.7305 -30.6904 13.7305 -49.8408c0 -44.0146 -37.2178 -85.5801 -85.8203 -85.5801h-36.4795c4.91992 -12.8096 8.84961 -28.1299 8.84961 -46.5391c0 -72.7949 -37.6895 -104.73 -95.2695 -104.73
c-61.6074 0 -58.0938 94.9326 -71.7607 108.6c-22.7461 22.7471 -49.6133 66.4473 -68.7598 83.4004h-7.05176c-5.5332 -9.56152 -15.8662 -16 -27.708 -16h-64c-17.6729 0 -32 14.3271 -32 32v240c0 17.6729 14.3271 32 32 32h64c8.11328 0 15.5146 -3.02539 21.1553 -8
h10.8447c40.9971 0 73.1953 39.9902 176.78 39.9902c7.21973 0 15.2197 0.00976562 22.2197 0.00976562c77.1172 0 111.986 -39.4229 112.94 -95.3301c13.3184 -18.4248 20.2979 -43.1221 17.3398 -66.9902c9.85352 -18.4521 13.6641 -40.3428 8.98926 -62.9893zM64 152
c13.2549 0 24 10.7451 24 24s-10.7451 24 -24 24s-24 -10.7451 -24 -24s10.7451 -24 24 -24zM394.18 135.27c21.1104 0 37.7305 18.9102 37.8203 37.8203c0.0898438 18.9004 -12.8203 37.8105 -22.2695 37.8105c13.4883 14.5547 16.3701 45.2354 -5.21094 65.6191
c12.5605 21.1309 1.26074 49.4102 -13.9395 57.5703c7.7002 48.7803 -17.6084 65.9004 -53.1201 65.9004h-37.8203c-71.6387 0 -118.028 -37.8203 -171.64 -37.8203v-186.17h10.9199c28.3604 0 67.9805 -70.8896 94.54 -97.46
c28.3604 -28.3604 18.9102 -75.6299 37.8203 -94.54c47.2695 0 47.2695 32.9805 47.2695 56.7305c0 39.1699 -28.3594 56.7197 -28.3594 94.5391h103.989z" />
<glyph glyph-name="sun" unicode="&#xf185;"
d="M494.2 226.1c11.2002 -7.59961 17.7998 -20.0996 17.8994 -33.6992c0 -13.4004 -6.69922 -26 -17.7998 -33.5l-59.7998 -40.5l13.7002 -71c2.5 -13.2002 -1.60059 -26.8008 -11.1006 -36.3008s-22.8994 -13.7998 -36.2998 -11.0996l-70.8994 13.7002l-40.4004 -59.9004
c-7.5 -11.0996 -20.0996 -17.7998 -33.5 -17.7998s-26 6.7002 -33.5 17.9004l-40.4004 59.8994l-70.7998 -13.7002c-13.3994 -2.59961 -26.7998 1.60059 -36.2998 11.1006s-13.7002 23.0996 -11.0996 36.2998l13.6992 71l-59.7998 40.5
c-11.0996 7.5 -17.7998 20 -17.7998 33.5s6.59961 26 17.7998 33.5996l59.7998 40.5l-13.6992 71c-2.60059 13.2002 1.59961 26.7002 11.0996 36.3008c9.5 9.59961 23 13.6992 36.2998 11.1992l70.7998 -13.6992l40.4004 59.8994c15.0996 22.2998 51.9004 22.2998 67 0
l40.4004 -59.8994l70.8994 13.6992c13 2.60059 26.6006 -1.59961 36.2002 -11.0996c9.5 -9.59961 13.7002 -23.2002 11.0996 -36.4004l-13.6992 -71zM381.3 140.5l76.7998 52.0996l-76.7998 52l17.6006 91.1006l-91 -17.6006l-51.9004 76.9004l-51.7998 -76.7998
l-91 17.5996l17.5996 -91.2002l-76.7998 -52l76.7998 -52l-17.5996 -91.1992l90.8994 17.5996l51.9004 -77l51.9004 76.9004l91 -17.6006zM256 296c57.2998 0 104 -46.7002 104 -104s-46.7002 -104 -104 -104s-104 46.7002 -104 104s46.7002 104 104 104zM256 136
c30.9004 0 56 25.0996 56 56s-25.0996 56 -56 56s-56 -25.0996 -56 -56s25.0996 -56 56 -56z" />
<glyph glyph-name="moon" unicode="&#xf186;"
d="M279.135 -64c-141.424 0 -256 114.64 -256 256c0 141.425 114.641 256 256 256c16.0342 -0.00292969 31.5078 -1.46875 46.7354 -4.27734c44.0205 -8.13086 53.7666 -66.8691 15.0215 -88.9189c-41.374 -23.5439 -67.4336 -67.4121 -67.4336 -115.836
c0 -83.5234 75.9238 -146.475 158.272 -130.792c43.6904 8.32129 74.5186 -42.5693 46.248 -77.4004c-47.8613 -58.9717 -120.088 -94.7754 -198.844 -94.7754zM279.135 400c-114.875 0 -208 -93.125 -208 -208s93.125 -208 208 -208
c65.2314 0 123.439 30.0361 161.575 77.0244c-111.611 -21.2568 -215.252 64.0957 -215.252 177.943c0 67.5127 36.9326 126.392 91.6934 157.555c-12.3271 2.27637 -25.0312 3.47754 -38.0166 3.47754z" />
<glyph glyph-name="caret-square-left" unicode="&#xf191;" horiz-adv-x="448"
d="M272 290.9v-197.801c0 -10.6992 -13 -16.0996 -20.5 -8.5l-98.2998 98.9004c-4.7002 4.7002 -4.7002 12.2002 0 16.9004l98.2998 98.8994c7.5 7.7002 20.5 2.2998 20.5 -8.39941zM448 368v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352
c0 26.5 21.5 48 48 48h352c26.5 0 48 -21.5 48 -48zM400 22v340c0 3.2998 -2.7002 6 -6 6h-340c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="dot-circle" unicode="&#xf192;"
d="M256 392c-110.549 0 -200 -89.4678 -200 -200c0 -110.549 89.4678 -200 200 -200c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200zM256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248z
M256 272c44.1826 0 80 -35.8174 80 -80s-35.8174 -80 -80 -80s-80 35.8174 -80 80s35.8174 80 80 80z" />
<glyph glyph-name="building" unicode="&#xf1ad;" horiz-adv-x="448"
d="M128 300v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12zM268 288c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40
c0 -6.59961 -5.40039 -12 -12 -12h-40zM140 192c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM268 192c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40
c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM192 108c0 -6.59961 -5.40039 -12 -12 -12h-40c-6.59961 0 -12 5.40039 -12 12v40c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40zM268 96c-6.59961 0 -12 5.40039 -12 12v40
c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-40zM448 -28v-36h-448v36c0 6.59961 5.40039 12 12 12h19.5v440c0 13.2998 10.7002 24 24 24h337c13.2998 0 24 -10.7002 24 -24v-440h19.5
c6.59961 0 12 -5.40039 12 -12zM79.5 -15h112.5v67c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-67h112.5v414l-288.5 1z" />
<glyph glyph-name="file-pdf" unicode="&#xf1c1;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM298.2 127.7c10.5 -10.5 8 -38.7002 -17.5 -38.7002c-14.7998 0 -36.9004 6.7998 -55.7998 17c-21.6006 -3.59961 -46 -12.7002 -68.4004 -20.0996c-50.0996 -86.4004 -79.4004 -47 -76.0996 -31.2002
c4 20 31 35.8994 51 46.2002c10.5 18.3994 25.3994 50.5 35.3994 74.3994c-7.39941 28.6006 -11.3994 51 -7 67.1006c4.7998 17.6992 38.4004 20.2998 42.6006 -5.90039c4.69922 -15.4004 -1.5 -39.9004 -5.40039 -56c8.09961 -21.2998 19.5996 -35.7998 36.7998 -46.2998
c17.4004 2.2002 52.2002 5.5 64.4004 -6.5zM100.1 49.9004c0 -0.700195 11.4004 4.69922 30.4004 35c-5.90039 -5.5 -25.2998 -21.3008 -30.4004 -35zM181.7 240.5c-2.5 0 -2.60059 -26.9004 1.7998 -40.7998c4.90039 8.7002 5.59961 40.7998 -1.7998 40.7998zM157.3 103.9
c15.9004 6.09961 34 14.8994 54.7998 19.1992c-11.1992 8.30078 -21.7998 20.4004 -30.0996 35.5c-6.7002 -17.6992 -15 -37.7998 -24.7002 -54.6992zM288.9 108.9c3.59961 2.39941 -2.2002 10.3994 -37.3008 7.7998c32.3008 -13.7998 37.3008 -7.7998 37.3008 -7.7998z" />
<glyph glyph-name="file-word" unicode="&#xf1c2;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM268.1 192v0.200195h15.8008c7.7998 0 13.5 -7.2998 11.5996 -14.9004c-4.2998 -17 -13.7002 -54.0996 -34.5 -136c-1.2998 -5.39941 -6.09961 -9.09961 -11.5996 -9.09961h-24.7002
c-5.5 0 -10.2998 3.7998 -11.6006 9.09961c-5.2998 20.9004 -17.7998 71 -17.8994 71.4004l-2.90039 17.2998c-0.5 -5.2998 -1.5 -11.0996 -3 -17.2998l-17.8994 -71.4004c-1.30078 -5.39941 -6.10059 -9.09961 -11.6006 -9.09961h-25.2002
c-5.59961 0 -10.3994 3.7002 -11.6992 9.09961c-6.5 26.5 -25.2002 103.4 -33.2002 136c-1.7998 7.5 3.89941 14.7998 11.7002 14.7998h16.7998c5.7998 0 10.7002 -4.09961 11.7998 -9.69922c5 -25.7002 18.4004 -93.8008 19.0996 -99
c0.300781 -1.7002 0.400391 -3.10059 0.5 -4.2002c0.800781 7.5 0.400391 4.7002 24.8008 103.7c1.39941 5.2998 6.19922 9.09961 11.6992 9.09961h13.3008c5.59961 0 10.3994 -3.7998 11.6992 -9.2002c23.9004 -99.7002 22.8008 -94.3994 23.6006 -99.5
c0.299805 -1.7002 0.5 -3.09961 0.700195 -4.2998c0.599609 8.09961 0.399414 5.7998 21 103.5c1.09961 5.5 6 9.5 11.6992 9.5z" />
<glyph glyph-name="file-excel" unicode="&#xf1c3;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM260 224c9.2002 0 15 -10 10.2998 -18c-16 -27.5 -45.5996 -76.9004 -46.2998 -78l46.4004 -78c4.59961 -8 -1.10059 -18 -10.4004 -18h-28.7998c-4.40039 0 -8.5 2.40039 -10.6006 6.2998
c-22.6992 41.7998 -13.6992 27.5 -28.5996 57.7002c-5.59961 -12.7002 -6.90039 -17.7002 -28.5996 -57.7002c-2.10059 -3.89941 -6.10059 -6.2998 -10.5 -6.2998h-28.9004c-9.2998 0 -15.0996 10 -10.4004 18l46.3008 78l-46.3008 78c-4.59961 8 1.10059 18 10.4004 18
h28.9004c4.39941 0 8.5 -2.40039 10.5996 -6.2998c21.7002 -40.4004 14.7002 -28.6006 28.5996 -57.7002c6.40039 15.2998 10.6006 24.5996 28.6006 57.7002c2.09961 3.89941 6.09961 6.2998 10.5 6.2998h28.7998z" />
<glyph glyph-name="file-powerpoint" unicode="&#xf1c4;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM120 44v168c0 6.59961 5.40039 12 12 12h69.2002c36.7002 0 62.7998 -27 62.7998 -66.2998c0 -74.2998 -68.7002 -66.5 -95.5 -66.5v-47.2002c0 -6.59961 -5.40039 -12 -12 -12h-24.5c-6.59961 0 -12 5.40039 -12 12z
M168.5 131.4h23c7.90039 0 13.9004 2.39941 18.0996 7.19922c8.5 9.80078 8.40039 28.5 0.100586 37.8008c-4.10059 4.59961 -9.90039 7 -17.4004 7h-23.8994v-52h0.0996094z" />
<glyph glyph-name="file-image" unicode="&#xf1c5;" horiz-adv-x="384"
d="M369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM332.1 320l-76.0996 76.0996v-76.0996h76.0996zM48 -16h288v288
h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416zM80 32v64l39.5 39.5c4.7002 4.7002 12.2998 4.7002 17 0l39.5 -39.5l87.5 87.5c4.7002 4.7002 12.2998 4.7002 17 0l23.5 -23.5v-128h-224zM128 272c26.5 0 48 -21.5 48 -48s-21.5 -48 -48 -48s-48 21.5 -48 48
s21.5 48 48 48z" />
<glyph glyph-name="file-archive" unicode="&#xf1c6;" horiz-adv-x="384"
d="M128.3 288h32v-32h-32v32zM192.3 384v-32h-32v32h32zM128.3 352h32v-32h-32v32zM192.3 320v-32h-32v32h32zM369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1
c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-48.2998v-16h-32v16h-79.7002v-416h288zM194.2 182.3l17.2998 -87.7002c6.40039 -32.3994 -18.4004 -62.5996 -51.5 -62.5996
c-33.2002 0 -58 30.4004 -51.4004 62.9004l19.7002 97.0996v32h32v-32h22.1006c5.7998 0 10.6992 -4.09961 11.7998 -9.7002zM160.3 57.9004c17.9004 0 32.4004 12.0996 32.4004 27c0 14.8994 -14.5 27 -32.4004 27c-17.8994 0 -32.3994 -12.1006 -32.3994 -27
c0 -14.9004 14.5 -27 32.3994 -27zM192.3 256v-32h-32v32h32z" />
<glyph glyph-name="file-audio" unicode="&#xf1c7;" horiz-adv-x="384"
d="M369.941 350.059c8.68848 -8.68848 14.0586 -20.6943 14.0586 -33.9404v-332.118c0 -26.5098 -21.4902 -48 -48 -48h-288c-26.5098 0 -48 21.4902 -48 48v416c0 26.5098 21.4902 48 48 48h204.118c13.2461 0 25.252 -5.37012 33.9404 -14.0586zM332.118 320
l-76.1182 76.1182v-76.1182h76.1182zM48 -16h288v288h-104c-13.2549 0 -24 10.7451 -24 24v104h-160v-416zM192 60.0244c0 -10.6914 -12.9258 -16.0459 -20.4854 -8.48535l-35.5146 35.9746h-28c-6.62695 0 -12 5.37305 -12 12v56c0 6.62695 5.37305 12 12 12h28
l35.5146 36.9473c7.56055 7.56055 20.4854 2.20605 20.4854 -8.48535v-135.951zM233.201 107.154c9.05078 9.29688 9.05957 24.1328 0.000976562 33.4385c-22.1494 22.752 12.2344 56.2461 34.3945 33.4814c27.1982 -27.9404 27.2119 -72.4443 0.000976562 -100.401
c-21.793 -22.3857 -56.9463 10.3154 -34.3965 33.4814z" />
<glyph glyph-name="file-video" unicode="&#xf1c8;" horiz-adv-x="384"
d="M369.941 350.059c8.68848 -8.68848 14.0586 -20.6943 14.0586 -33.9404v-332.118c0 -26.5098 -21.4902 -48 -48 -48h-288c-26.5098 0 -48 21.4902 -48 48v416c0 26.5098 21.4902 48 48 48h204.118c13.2461 0 25.252 -5.37012 33.9404 -14.0586zM332.118 320
l-76.1182 76.1182v-76.1182h76.1182zM48 -16h288v288h-104c-13.2549 0 -24 10.7451 -24 24v104h-160v-416zM276.687 195.303c10.0049 10.0049 27.3135 2.99707 27.3135 -11.3135v-111.976c0 -14.2939 -17.2959 -21.332 -27.3135 -11.3135l-52.6865 52.6738v-37.374
c0 -11.0459 -8.9541 -20 -20 -20h-104c-11.0459 0 -20 8.9541 -20 20v104c0 11.0459 8.9541 20 20 20h104c11.0459 0 20 -8.9541 20 -20v-37.374z" />
<glyph glyph-name="file-code" unicode="&#xf1c9;" horiz-adv-x="384"
d="M149.9 98.9004c3.5 -3.30078 3.69922 -8.90039 0.399414 -12.4004l-17.3994 -18.5996c-1.60059 -1.80078 -4 -2.80078 -6.40039 -2.80078c-2.2002 0 -4.40039 0.900391 -6 2.40039l-57.7002 54.0996c-3.7002 3.40039 -3.7002 9.30078 0 12.8008l57.7002 54.0996
c3.40039 3.2998 9 3.2002 12.4004 -0.400391l17.3994 -18.5996l0.200195 -0.200195c3.2002 -3.59961 2.7998 -9.2002 -0.799805 -12.3994l-32.7998 -28.9004l32.7998 -28.9004zM369.9 350.1c9 -9 14.0996 -21.2998 14.0996 -34v-332.1c0 -26.5 -21.5 -48 -48 -48h-288
c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48.0996h204.1c12.7002 0 24.9004 -5.09961 33.9004 -14.0996zM256 396.1v-76.0996h76.0996zM336 -16v288h-104c-13.2998 0 -24 10.7002 -24 24v104h-160v-416h288zM209.6 234l24.4004 -7
c4.7002 -1.2998 7.40039 -6.2002 6 -10.9004l-54.7002 -188.199c-1.2998 -4.60059 -6.2002 -7.40039 -10.8994 -6l-24.4004 7.09961c-4.7002 1.2998 -7.40039 6.2002 -6 10.9004l54.7002 188.1c1.39941 4.7002 6.2002 7.40039 10.8994 6zM234.1 157.1
c-3.5 3.30078 -3.69922 8.90039 -0.399414 12.4004l17.3994 18.5996c3.30078 3.60059 8.90039 3.7002 12.4004 0.400391l57.7002 -54.0996c3.7002 -3.40039 3.7002 -9.30078 0 -12.8008l-57.7002 -54.0996c-3.5 -3.2998 -9.09961 -3.09961 -12.4004 0.400391
l-17.3994 18.5996l-0.200195 0.200195c-3.2002 3.59961 -2.7998 9.2002 0.799805 12.3994l32.7998 28.9004l-32.7998 28.9004z" />
<glyph glyph-name="life-ring" unicode="&#xf1cd;"
d="M256 -56c-136.967 0 -248 111.033 -248 248s111.033 248 248 248s248 -111.033 248 -248s-111.033 -248 -248 -248zM152.602 20.7197c63.2178 -38.3184 143.579 -38.3184 206.797 0l-53.4111 53.4111c-31.8467 -13.5215 -68.168 -13.5059 -99.9746 0zM336 192
c0 44.1123 -35.8877 80 -80 80s-80 -35.8877 -80 -80s35.8877 -80 80 -80s80 35.8877 80 80zM427.28 88.6016c38.3184 63.2178 38.3184 143.579 0 206.797l-53.4111 -53.4111c13.5215 -31.8467 13.5049 -68.168 0 -99.9746zM359.397 363.28
c-63.2168 38.3184 -143.578 38.3184 -206.796 0l53.4111 -53.4111c31.8457 13.5215 68.167 13.5049 99.9736 0zM84.7197 295.398c-38.3184 -63.2178 -38.3184 -143.579 0 -206.797l53.4111 53.4111c-13.5215 31.8467 -13.5059 68.168 0 99.9746z" />
<glyph glyph-name="paper-plane" unicode="&#xf1d8;"
d="M440 441.5c34.5996 19.9004 77.5996 -8.7998 71.5 -48.9004l-59.4004 -387.199c-2.2998 -14.5 -11.0996 -27.3008 -23.8994 -34.5c-7.2998 -4.10059 -15.4004 -6.2002 -23.6006 -6.2002c-6.19922 0 -12.3994 1.2002 -18.2998 3.59961l-111.899 46.2002l-43.8008 -59.0996
c-27.3994 -36.9004 -86.5996 -17.8008 -86.5996 28.5996v84.4004l-114.3 47.2998c-36.7998 15.0996 -40.1006 66 -5.7002 85.8994zM192 -16l36.5996 49.5l-36.5996 15.0996v-64.5996zM404.6 12.7002l59.4004 387.3l-416 -240l107.8 -44.5996l211.5 184.3
c14.2002 12.2998 34.4004 -5.7002 23.7002 -21.2002l-140.2 -202.3z" />
<glyph glyph-name="futbol" unicode="&#xf1e3;" horiz-adv-x="496"
d="M483.8 268.6c42.2998 -130.199 -29 -270.1 -159.2 -312.399c-25.5 -8.2998 -51.2998 -12.2002 -76.6992 -12.2002c-104.5 0 -201.7 66.5996 -235.7 171.4c-42.2998 130.199 29 270.1 159.2 312.399c25.5 8.2998 51.2998 12.2002 76.6992 12.2002
c104.5 0 201.7 -66.5996 235.7 -171.4zM409.3 74.9004c6.10059 8.39941 12.1006 16.8994 16.7998 26.1992c14.3008 28.1006 21.5 58.5 21.7002 89.2002l-38.8994 36.4004l-71.1006 -22.1006l-24.3994 -75.1992l43.6992 -60.9004zM409.3 310.3
c-24.5 33.4004 -58.7002 58.4004 -97.8994 71.4004l-47.4004 -26.2002v-73.7998l64.2002 -46.5l70.7002 22zM184.9 381.6c-39.9004 -13.2998 -73.5 -38.5 -97.8008 -71.8994l10.1006 -52.5l70.5996 -22l64.2002 46.5v73.7998zM139 68.5l43.5 61.7002l-24.2998 74.2998
l-71.1006 22.2002l-39 -36.4004c0.5 -55.7002 23.4004 -95.2002 37.8008 -115.3zM187.2 1.5c64.0996 -20.4004 115.5 -1.7998 121.7 0l22.3994 48.0996l-44.2998 61.7002h-78.5996l-43.6006 -61.7002z" />
<glyph glyph-name="newspaper" unicode="&#xf1ea;" horiz-adv-x="576"
d="M552 384c13.2549 0 24 -10.7451 24 -24v-336c0 -13.2549 -10.7451 -24 -24 -24h-496c-30.9277 0 -56 25.0723 -56 56v272c0 13.2549 10.7451 24 24 24h42.752c6.60547 18.623 24.3896 32 45.248 32h440zM48 56c0 -4.41113 3.58887 -8 8 -8s8 3.58887 8 8v248h-16v-248z
M528 48v288h-416v-280c0 -2.7168 -0.204102 -5.38574 -0.578125 -8h416.578zM172 168c-6.62695 0 -12 5.37305 -12 12v96c0 6.62695 5.37305 12 12 12h136c6.62695 0 12 -5.37305 12 -12v-96c0 -6.62695 -5.37305 -12 -12 -12h-136zM200 248v-40h80v40h-80zM160 108v24
c0 6.62695 5.37305 12 12 12h136c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-136c-6.62695 0 -12 5.37305 -12 12zM352 108v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-104
c-6.62695 0 -12 5.37305 -12 12zM352 252v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-104c-6.62695 0 -12 5.37305 -12 12zM352 180v24c0 6.62695 5.37305 12 12 12h104c6.62695 0 12 -5.37305 12 -12v-24
c0 -6.62695 -5.37305 -12 -12 -12h-104c-6.62695 0 -12 5.37305 -12 12z" />
<glyph glyph-name="bell-slash" unicode="&#xf1f6;" horiz-adv-x="640"
d="M633.99 -23.0195c6.91016 -5.52051 8.01953 -15.5908 2.5 -22.4902l-10 -12.4902c-5.53027 -6.88965 -15.5898 -8.00977 -22.4902 -2.49023l-598 467.51c-6.90039 5.52051 -8.01953 15.5908 -2.49023 22.4902l10 12.4902
c5.52051 6.90039 15.5898 8.00977 22.4902 2.49023zM163.53 80h182.84l61.3994 -48h-279.659c-19.1201 0 -31.9902 15.5996 -32.1006 32c-0.0498047 7.5498 2.61035 15.2598 8.61035 21.71c18.3701 19.7402 51.5703 49.6904 54.8398 140.42l45.4697 -35.5498
c-6.91992 -54.7803 -24.6895 -88.5498 -41.3994 -110.58zM320 352c-23.3496 0 -45 -7.17969 -62.9404 -19.4004l-38.1699 29.8408c19.6807 15.7793 43.1104 27.3096 69.1299 32.7197v20.8398c0 17.6699 14.3203 32 31.9805 32s31.9805 -14.3301 31.9805 -32v-20.8398
c73.46 -15.2598 127.939 -77.46 127.939 -155.16c0 -41.3604 6.03027 -70.7197 14.3398 -92.8496l-59.5293 46.54c-1.63086 13.96 -2.77051 28.8896 -2.79004 45.7295c0 0.200195 0.0595703 0.379883 0.0595703 0.580078c0 61.8604 -50.1396 112 -112 112zM320 -64
c-35.3203 0 -63.9697 28.6504 -63.9697 64h127.939c0 -35.3496 -28.6494 -64 -63.9697 -64z" />
<glyph glyph-name="copyright" unicode="&#xf1f9;"
d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 -8c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200c-110.549 0 -200 -89.4688 -200 -200c0 -110.549 89.4678 -200 200 -200z
M363.351 93.0645c-9.61328 -9.71289 -45.5293 -41.3965 -104.064 -41.3965c-82.4297 0 -140.484 61.4248 -140.484 141.567c0 79.1514 60.2754 139.4 139.763 139.4c55.5303 0 88.7373 -26.6201 97.5928 -34.7783c2.37793 -2.1875 3.86914 -5.3252 3.86914 -8.80762
c0 -2.39746 -0.717773 -4.64258 -1.93359 -6.51465l-18.1543 -28.1133c-3.8418 -5.9502 -11.9668 -7.28223 -17.499 -2.9209c-8.5957 6.77637 -31.8145 22.5381 -61.708 22.5381c-48.3037 0 -77.916 -35.3301 -77.916 -80.082c0 -41.5889 26.8877 -83.6924 78.2764 -83.6924
c32.6572 0 56.8428 19.0391 65.7266 27.2256c5.26953 4.85645 13.5957 4.03906 17.8193 -1.73828l19.8652 -27.1699c1.45996 -1.98145 2.32422 -4.42969 2.32422 -7.07715c0 -3.28809 -1.32422 -6.2793 -3.47656 -8.44043z" />
<glyph glyph-name="closed-captioning" unicode="&#xf20a;"
d="M464 384c26.5 0 48 -21.5 48 -48v-288c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v288c0 26.5 21.5 48 48 48h416zM458 48c3.2998 0 6 2.7002 6 6v276c0 3.2998 -2.7002 6 -6 6h-404c-3.2998 0 -6 -2.7002 -6 -6v-276c0 -3.2998 2.7002 -6 6 -6h404z
M246.9 133.7c1.69922 -2.40039 1.5 -5.60059 -0.5 -7.7002c-53.6006 -56.7998 -172.801 -32.0996 -172.801 67.9004c0 97.2998 121.7 119.5 172.5 70.0996c2.10059 -2 2.5 -3.2002 1 -5.7002l-17.5 -30.5c-1.89941 -3.09961 -6.19922 -4 -9.09961 -1.7002
c-40.7998 32 -94.5996 14.9004 -94.5996 -31.1992c0 -48 51 -70.5 92.1992 -32.6006c2.80078 2.5 7.10059 2.10059 9.2002 -0.899414zM437.3 133.7c1.7002 -2.40039 1.5 -5.60059 -0.5 -7.7002c-53.5996 -56.9004 -172.8 -32.0996 -172.8 67.9004
c0 97.2998 121.7 119.5 172.5 70.0996c2.09961 -2 2.5 -3.2002 1 -5.7002l-17.5 -30.5c-1.90039 -3.09961 -6.2002 -4 -9.09961 -1.7002c-40.8008 32 -94.6006 14.9004 -94.6006 -31.1992c0 -48 51 -70.5 92.2002 -32.6006c2.7998 2.5 7.09961 2.10059 9.2002 -0.899414z
" />
<glyph glyph-name="object-group" unicode="&#xf247;"
d="M500 320h-12v-256h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-320v-12c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v256h-12
c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-12h320v12c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12zM448 384v-32h32v32h-32zM32 384v-32h32v32h-32zM64 0v32
h-32v-32h32zM480 0v32h-32v-32h32zM440 64v256h-12c-6.62695 0 -12 5.37305 -12 12v12h-320v-12c0 -6.62695 -5.37305 -12 -12 -12h-12v-256h12c6.62695 0 12 -5.37305 12 -12v-12h320v12c0 6.62695 5.37305 12 12 12h12zM404 256c6.62695 0 12 -5.37207 12 -12v-168
c0 -6.62793 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37207 -12 12v52h-84c-6.62695 0 -12 5.37207 -12 12v168c0 6.62793 5.37305 12 12 12h200c6.62695 0 12 -5.37207 12 -12v-52h84zM136 280v-112h144v112h-144zM376 104v112h-56v-76
c0 -6.62793 -5.37305 -12 -12 -12h-76v-24h144z" />
<glyph glyph-name="object-ungroup" unicode="&#xf248;" horiz-adv-x="576"
d="M564 224h-12v-160h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-224v-12c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v24h-88v-12
c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h12v160h-12c-6.62695 0 -12 5.37305 -12 12v72c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-12h224v12c0 6.62695 5.37305 12 12 12h72
c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-12v-24h88v12c0 6.62695 5.37305 12 12 12h72c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12zM352 384v-32h32v32h-32zM352 128v-32h32v32h-32zM64 96v32h-32v-32h32zM64 352v32
h-32v-32h32zM96 136h224v12c0 6.62695 5.37305 12 12 12h12v160h-12c-6.62695 0 -12 5.37305 -12 12v12h-224v-12c0 -6.62695 -5.37305 -12 -12 -12h-12v-160h12c6.62695 0 12 -5.37305 12 -12v-12zM224 0v32h-32v-32h32zM504 64v160h-12c-6.62695 0 -12 5.37305 -12 12v12
h-88v-88h12c6.62695 0 12 -5.37305 12 -12v-72c0 -6.62695 -5.37305 -12 -12 -12h-72c-6.62695 0 -12 5.37305 -12 12v12h-88v-24h12c6.62695 0 12 -5.37305 12 -12v-12h224v12c0 6.62695 5.37305 12 12 12h12zM544 0v32h-32v-32h32zM544 256v32h-32v-32h32z" />
<glyph glyph-name="sticky-note" unicode="&#xf249;" horiz-adv-x="448"
d="M448 99.8936c0 -13.2451 -5.37012 -25.252 -14.0586 -33.9404l-83.8828 -83.8818c-8.68848 -8.68848 -20.6943 -14.0596 -33.9404 -14.0596h-268.118c-26.5098 0 -48 21.4902 -48 48v351.988c0 26.5098 21.4902 48 48 48h352c26.5098 0 48 -21.4902 48 -48v-268.106z
M320 19.8936l76.1182 76.1182h-76.1182v-76.1182zM400 368h-352v-351.988h224v104c0 13.2549 10.7451 24 24 24h104v223.988z" />
<glyph glyph-name="clone" unicode="&#xf24d;"
d="M464 448c26.5098 0 48 -21.4902 48 -48v-320c0 -26.5098 -21.4902 -48 -48 -48h-48v-48c0 -26.5098 -21.4902 -48 -48 -48h-320c-26.5098 0 -48 21.4902 -48 48v320c0 26.5098 21.4902 48 48 48h48v48c0 26.5098 21.4902 48 48 48h320zM362 -16c3.31152 0 6 2.68848 6 6
v42h-224c-26.5098 0 -48 21.4902 -48 48v224h-42c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h308zM458 80c3.31152 0 6 2.68848 6 6v308c0 3.31152 -2.68848 6 -6 6h-308c-3.31152 0 -6 -2.68848 -6 -6v-308c0 -3.31152 2.68848 -6 6 -6h308z" />
<glyph glyph-name="hourglass" unicode="&#xf254;" horiz-adv-x="384"
d="M368 400c0 -80.0996 -31.8984 -165.619 -97.1797 -208c64.9912 -42.1934 97.1797 -127.436 97.1797 -208h4c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-360c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h4
c0 80.0996 31.8994 165.619 97.1797 208c-64.9912 42.1934 -97.1797 127.436 -97.1797 208h-4c-6.62695 0 -12 5.37305 -12 12v24c0 6.62695 5.37305 12 12 12h360c6.62695 0 12 -5.37305 12 -12v-24c0 -6.62695 -5.37305 -12 -12 -12h-4zM64 400
c0 -101.621 57.3066 -184 128 -184s128 82.3799 128 184h-256zM320 -16c0 101.62 -57.3076 184 -128 184s-128 -82.3799 -128 -184h256z" />
<glyph glyph-name="hand-rock" unicode="&#xf255;"
d="M408.864 368.948c48.8213 20.751 103.136 -15.0723 103.136 -67.9111v-114.443c0 -15.3955 -3.08887 -30.3906 -9.18262 -44.5674l-42.835 -99.6562c-4.99707 -11.625 -3.98242 -18.8574 -3.98242 -42.3701c0 -17.6729 -14.3271 -32 -32 -32h-252
c-17.6729 0 -32 14.3271 -32 32c0 27.3301 1.1416 29.2012 -3.11035 32.9033l-97.71 85.0811c-24.8994 21.6797 -39.1797 52.8926 -39.1797 85.6338v56.9531c0 47.4277 44.8457 82.0215 91.0459 71.1807c1.96094 55.751 63.5107 87.8262 110.671 60.8057
c29.1895 31.0713 78.8604 31.4473 108.334 -0.0214844c32.7051 18.6846 76.4121 10.3096 98.8135 -23.5879zM464 186.594v114.445c0 34.29 -52 33.8232 -52 0.676758c0 -8.83594 -7.16309 -16 -16 -16h-7c-8.83691 0 -16 7.16406 -16 16v26.751
c0 34.457 -52 33.707 -52 0.676758v-27.4287c0 -8.83594 -7.16309 -16 -16 -16h-7c-8.83691 0 -16 7.16406 -16 16v40.4658c0 34.3525 -52 33.8115 -52 0.677734v-41.1436c0 -8.83594 -7.16406 -16 -16 -16h-7c-8.83594 0 -16 7.16406 -16 16v26.751
c0 34.4023 -52 33.7744 -52 0.676758v-116.571c0 -8.83105 -7.17773 -15.9961 -16.0078 -15.9961c-4.0166 0 -7.68848 1.48242 -10.499 3.92969l-7 6.09473c-3.37012 2.93457 -5.49316 7.25293 -5.49316 12.0674v41.2275c0 34.2148 -52 33.8857 -52 0.677734v-56.9531
c0 -18.8555 8.27441 -36.874 22.7002 -49.4365l97.71 -85.0801c12.4502 -10.8398 19.5898 -26.4463 19.5898 -42.8164v-10.2861h220v7.07617c0 13.21 2.65332 26.0791 7.88281 38.25l42.835 99.6553c3.37891 7.82715 5.28223 16.501 5.28223 25.5625v0.0498047z" />
<glyph glyph-name="hand-paper" unicode="&#xf256;" horiz-adv-x="448"
d="M372.57 335.359c39.9062 5.63281 75.4297 -25.7393 75.4297 -66.3594v-131.564c-0.00292969 -15.7393 -1.80566 -30.9482 -5.19531 -45.666l-30.1836 -130.958c-3.34668 -14.5234 -16.2783 -24.8125 -31.1816 -24.8125h-222.897
c-10.7539 0 -20.2588 5.28613 -26.0615 13.4316l-119.97 168.415c-21.2441 29.8203 -14.8047 71.3574 14.5498 93.1533c18.7754 13.9395 42.1309 16.2979 62.083 8.87109v126.13c0 44.0547 41.125 75.5439 82.4053 64.9834c23.8926 48.1963 92.3535 50.2471 117.982 0.74707
c42.5186 11.1445 83.0391 -21.9346 83.0391 -65.5469v-10.8242zM399.997 137.437l-0.00195312 131.563c0 24.9492 -36.5703 25.5508 -36.5703 -0.691406v-76.3086c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v154.184
c0 25.501 -36.5703 26.3633 -36.5703 0.691406v-154.875c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v188.309c0 25.501 -36.5703 26.3545 -36.5703 0.691406v-189c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16
v153.309c0 25.501 -36.5713 26.3359 -36.5713 0.691406v-206.494c0 -15.5703 -20.0352 -21.9092 -29.0303 -9.2832l-27.1279 38.0791c-14.3711 20.1709 -43.833 -2.33496 -29.3945 -22.6045l115.196 -161.697h201.92l27.3252 118.551
c2.63086 11.417 3.96484 23.1553 3.96484 34.8857z" />
<glyph glyph-name="hand-scissors" unicode="&#xf257;"
d="M256 -32c-44.9561 0 -77.3428 43.2627 -64.0244 85.8535c-21.6484 13.71 -34.0156 38.7617 -30.3408 65.0068h-87.6348c-40.8037 0 -74 32.8105 -74 73.1406c0 40.3291 33.1963 73.1396 74 73.1396l94 -9.14062l-78.8496 18.6787
c-38.3076 14.7422 -57.04 57.4707 -41.9424 95.1123c15.0303 37.4736 57.7549 55.7803 95.6416 41.2012l144.929 -55.7568c24.9551 30.5566 57.8086 43.9932 92.2178 24.7324l97.999 -54.8525c20.9746 -11.7393 34.0049 -33.8457 34.0049 -57.6904v-205.702
c0 -30.7422 -21.4404 -57.5576 -51.7979 -64.5537l-118.999 -27.4268c-4.97168 -1.14648 -10.0889 -1.72949 -15.2031 -1.72949zM256 16.0127l70 -0.000976562c1.52441 0 2.99707 0.174805 4.42285 0.501953l119.001 27.4277
c8.58203 1.97754 14.5762 9.29102 14.5762 17.7812v205.701c0 6.4873 -3.62109 12.542 -9.44922 15.8047l-98 54.8545c-8.13965 4.55566 -18.668 2.61914 -24.4873 -4.50781l-21.7646 -26.6475c-2.93457 -3.59375 -7.40332 -5.87305 -12.4004 -5.87305
c-2.02246 0 -3.95703 0.375977 -5.73828 1.06152l-166.549 64.0908c-32.6543 12.5664 -50.7744 -34.5771 -19.2227 -46.7168l155.357 -59.7852c6 -2.30859 10.2539 -8.12402 10.2539 -14.9326v-11.6328c0 -8.83691 -7.16309 -16 -16 -16h-182
c-34.375 0 -34.4297 -50.2803 0 -50.2803h182c8.83691 0 16 -7.16309 16 -16v-6.85645c0 -8.83691 -7.16309 -16 -16 -16h-28c-25.1221 0 -25.1592 -36.5674 0 -36.5674h28c8.83691 0 16 -7.16211 16 -16v-6.85547c0 -8.83691 -7.16309 -16 -16 -16
c-25.1201 0 -25.1602 -36.5674 0 -36.5674z" />
<glyph glyph-name="hand-lizard" unicode="&#xf258;" horiz-adv-x="576"
d="M556.686 157.458c12.6357 -19.4863 19.3145 -42.0615 19.3145 -65.2871v-124.171h-224v71.582l-99.751 38.7871c-2.7832 1.08203 -5.70996 1.63086 -8.69727 1.63086h-131.552c-30.8789 0 -56 25.1211 -56 56c0 48.5234 39.4766 88 88 88h113.709l18.333 48h-196.042
c-44.1123 0 -80 35.8877 -80 80v8c0 30.8779 25.1211 56 56 56h293.917c24.5 0 47.084 -12.2725 60.4111 -32.8291zM528 16v76.1709c0 0.0166016 -0.0439453 0.106445 -0.0439453 0.12207c0 14.3945 -4.24219 27.8057 -11.5439 39.0498l-146.358 225.715
c-4.44336 6.85254 -11.9707 10.9424 -20.1367 10.9424h-293.917c-4.41113 0 -8 -3.58887 -8 -8v-8c0 -17.6445 14.3555 -32 32 -32h213.471c25.2021 0 42.626 -25.293 33.6299 -48.8457l-24.5518 -64.2812c-7.05371 -18.4658 -25.0732 -30.873 -44.8398 -30.873h-113.709
c-22.0557 0 -40 -17.9443 -40 -40c0 -4.41113 3.58887 -8 8 -8h131.552c0.0175781 0 0.0712891 -0.0273438 0.0888672 -0.0273438c9.16992 0 17.9404 -1.72461 26.0039 -4.86621l99.752 -38.7881c18.5898 -7.22852 30.6035 -24.7881 30.6035 -44.7363v-23.582h128z" />
<glyph glyph-name="hand-spock" unicode="&#xf259;"
d="M501.03 331.824c6.92773 -11.1826 10.9697 -24.4053 10.9697 -38.5146c0 -5.92676 -0.706055 -11.6885 -2.03809 -17.208l-57.623 -241.963c-13.2236 -56.1904 -63.707 -98.1387 -123.908 -98.1387h-0.352539h-107.455
c-0.0761719 0 -0.193359 0.00195312 -0.270508 0.00195312c-40.9248 0 -78.1475 15.9814 -105.761 42.0391l-91.3652 85.9766c-14.3076 13.4434 -23.2246 32.5547 -23.2246 53.7168c0 19.5254 7.61035 37.2861 20.0254 50.4766
c5.31836 5.66406 29.875 29.3926 68.1152 21.8477l-24.3594 82.1973c-1.97363 6.64844 -2.97656 13.6836 -2.97656 20.9688c0 38.6953 29.8926 70.4639 67.8262 73.4531c-0.246094 2.45117 -0.34082 4.85547 -0.34082 7.37207c0 34.4199 23.585 63.376 55.4619 71.5752
c43.248 10.9785 80.5645 -17.7012 89.6602 -53.0723l13.6836 -53.207l4.64648 22.6602c6.99023 33.5186 36.6826 58.8037 72.2373 58.916c8.73438 0 56.625 -3.26953 70.7383 -54.0801c15.0664 0.710938 46.9199 -3.50977 66.3105 -35.0176zM463.271 287.219
c7.86914 32.9844 -42.1211 45.2695 -50.0859 11.9219l-24.8008 -104.146c-4.38867 -18.4141 -31.7783 -11.8926 -28.0557 6.2168l28.5479 139.166c7.39844 36.0703 -43.3076 45.0703 -50.1182 11.9629l-31.791 -154.971
c-3.54883 -17.3086 -28.2832 -18.0469 -32.7109 -0.804688l-47.3262 184.035c-8.43359 32.8105 -58.3691 20.2676 -49.8652 -12.8359l42.4414 -165.039c4.81641 -18.7207 -23.3711 -26.9121 -28.9648 -8.00781l-31.3438 105.779
c-9.6875 32.6465 -59.1191 18.2578 -49.3867 -14.625l36.0137 -121.539c6.59375 -22.2441 10.1777 -45.7803 10.1777 -70.1523c0 -6.54297 -8.05664 -10.9355 -13.4824 -5.82617l-51.123 48.1074c-24.7852 23.4082 -60.0527 -14.1875 -35.2793 -37.4902l91.3691 -85.9805
c19.0469 -17.9736 44.75 -28.998 72.9795 -28.998h0.157227h107.455c0.0732422 0 0.138672 0.0429688 0.212891 0.0429688c37.5791 0 69.1016 26.1416 77.3564 61.2168z" />
<glyph glyph-name="hand-pointer" unicode="&#xf25a;" horiz-adv-x="448"
d="M358.182 268.639c43.1934 16.6348 89.8184 -15.7949 89.8184 -62.6387v-84c-0.000976562 -5.24023 -0.600586 -10.3037 -1.72754 -15.2041l-27.4297 -118.999c-6.98242 -30.2969 -33.7549 -51.7969 -64.5566 -51.7969h-178.286
c-21.2588 0 -41.3682 10.4102 -53.791 27.8457l-109.699 154.001c-21.2432 29.8193 -14.8047 71.3574 14.5498 93.1523c18.8115 13.9658 42.1748 16.2822 62.083 8.87207v161.129c0 36.9443 29.7363 67 66.2861 67s66.2861 -30.0557 66.2861 -67v-73.6338
c20.4131 2.85742 41.4678 -3.94238 56.5947 -19.6289c27.1934 12.8467 60.3799 5.66992 79.8721 -19.0986zM80.9854 168.303c-14.4004 20.2119 -43.8008 -2.38281 -29.3945 -22.6055l109.712 -154c3.43457 -4.81934 8.92871 -7.69727 14.6973 -7.69727h178.285
c8.49219 0 15.8037 5.99414 17.7822 14.5762l27.4297 119.001c0.333008 1.44629 0.501953 2.93457 0.501953 4.42285v84c0 25.1602 -36.5713 25.1211 -36.5713 0c0 -8.83594 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16406 -16 16v21
c0 25.1602 -36.5713 25.1201 -36.5713 0v-21c0 -8.83594 -7.16309 -16 -16 -16h-6.85938c-8.83691 0 -16 7.16406 -16 16v35c0 25.1602 -36.5703 25.1201 -36.5703 0v-35c0 -8.83594 -7.16309 -16 -16 -16h-6.85742c-8.83691 0 -16 7.16406 -16 16v175
c0 25.1602 -36.5713 25.1201 -36.5713 0v-241.493c0 -15.5703 -20.0352 -21.9092 -29.0303 -9.2832zM176.143 48v96c0 8.83691 6.26855 16 14 16h6c7.73242 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26758 -16 -14 -16h-6c-7.73242 0 -14 7.16309 -14 16zM251.571 48v96
c0 8.83691 6.26758 16 14 16h6c7.73145 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26855 -16 -14 -16h-6c-7.73242 0 -14 7.16309 -14 16zM327 48v96c0 8.83691 6.26758 16 14 16h6c7.73242 0 14 -7.16309 14 -16v-96c0 -8.83691 -6.26758 -16 -14 -16h-6
c-7.73242 0 -14 7.16309 -14 16z" />
<glyph glyph-name="hand-peace" unicode="&#xf25b;" horiz-adv-x="448"
d="M362.146 256.024c42.5908 13.3184 85.8535 -19.0684 85.8535 -64.0244l-0.0117188 -70.001c-0.000976562 -5.24023 -0.600586 -10.3027 -1.72949 -15.2031l-27.4268 -118.999c-6.99707 -30.3564 -33.8105 -51.7969 -64.5547 -51.7969h-205.702
c-23.8447 0 -45.9502 13.0303 -57.6904 34.0059l-54.8525 97.999c-19.2607 34.4092 -5.82422 67.2617 24.7324 92.2178l-55.7568 144.928c-14.5791 37.8867 3.72754 80.6113 41.2012 95.6416c37.6406 15.0977 80.3691 -3.63477 95.1123 -41.9424l18.6787 -78.8496
l-9.14062 94c0 40.8037 32.8096 74 73.1396 74s73.1406 -33.1963 73.1406 -74v-87.6348c26.2451 3.6748 51.2959 -8.69238 65.0068 -30.3408zM399.987 122l-0.000976562 70c0 25.1602 -36.5674 25.1201 -36.5674 0c0 -8.83691 -7.16309 -16 -16 -16h-6.85547
c-8.83789 0 -16 7.16309 -16 16v28c0 25.1592 -36.5674 25.1221 -36.5674 0v-28c0 -8.83691 -7.16309 -16 -16 -16h-6.85645c-8.83691 0 -16 7.16309 -16 16v182c0 34.4297 -50.2803 34.375 -50.2803 0v-182c0 -8.83691 -7.16309 -16 -16 -16h-11.6328
c-6.80859 0 -12.624 4.25391 -14.9326 10.2539l-59.7842 155.357c-12.1396 31.5518 -59.2842 13.4326 -46.7168 -19.2227l64.0898 -166.549c0.685547 -1.78125 1.07812 -3.71875 1.07812 -5.74121c0 -4.99707 -2.2959 -9.46289 -5.88965 -12.3975l-26.6475 -21.7646
c-7.12695 -5.81934 -9.06445 -16.3467 -4.50781 -24.4873l54.8535 -98c3.26367 -5.82812 9.31934 -9.44922 15.8057 -9.44922h205.701c8.49121 0 15.8037 5.99414 17.7812 14.5762l27.4277 119.001c0.333008 1.44629 0.501953 2.93457 0.501953 4.42285z" />
<glyph glyph-name="registered" unicode="&#xf25d;"
d="M256 440c136.967 0 248 -111.033 248 -248s-111.033 -248 -248 -248s-248 111.033 -248 248s111.033 248 248 248zM256 -8c110.549 0 200 89.4678 200 200c0 110.549 -89.4678 200 -200 200c-110.549 0 -200 -89.4688 -200 -200c0 -110.549 89.4678 -200 200 -200z
M366.442 73.791c4.40332 -7.99219 -1.37012 -17.791 -10.5107 -17.791h-42.8096c-0.00488281 0 -0.000976562 -0.0126953 -0.00585938 -0.0126953c-4.58594 0 -8.57422 2.58301 -10.5869 6.37305l-47.5156 89.3027h-31.958v-83.6631c0 -6.61719 -5.38281 -12 -12 -12
h-38.5674c-6.61719 0 -12 5.38281 -12 12v248.304c0 6.61719 5.38281 12 12 12h78.667c71.251 0 101.498 -32.749 101.498 -85.252c0 -31.6123 -15.2148 -59.2969 -39.4824 -73.1758c3.02148 -4.61719 0.225586 0.199219 53.2715 -96.085zM256.933 208.094
c20.9131 0 32.4307 11.5186 32.4316 32.4316c0 19.5752 -6.5127 31.709 -38.9297 31.709h-27.377v-64.1406h33.875z" />
<glyph glyph-name="calendar-plus" unicode="&#xf271;" horiz-adv-x="448"
d="M336 156v-24c0 -6.59961 -5.40039 -12 -12 -12h-76v-76c0 -6.59961 -5.40039 -12 -12 -12h-24c-6.59961 0 -12 5.40039 -12 12v76h-76c-6.59961 0 -12 5.40039 -12 12v24c0 6.59961 5.40039 12 12 12h76v76c0 6.59961 5.40039 12 12 12h24c6.59961 0 12 -5.40039 12 -12
v-76h76c6.59961 0 12 -5.40039 12 -12zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40
c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="calendar-minus" unicode="&#xf272;" horiz-adv-x="448"
d="M124 120c-6.59961 0 -12 5.40039 -12 12v24c0 6.59961 5.40039 12 12 12h200c6.59961 0 12 -5.40039 12 -12v-24c0 -6.59961 -5.40039 -12 -12 -12h-200zM448 336v-352c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52
c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="calendar-times" unicode="&#xf273;" horiz-adv-x="448"
d="M311.7 73.2998l-17 -17c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-53.7002 53.7998l-53.7002 -53.6992c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-17 17c-4.7002 4.69922 -4.7002 12.2998 0 17l53.7002 53.6992l-53.7002 53.7002c-4.7002 4.7002 -4.7002 12.2998 0 17
l17 17c4.7002 4.7002 12.2998 4.7002 17 0l53.7002 -53.7002l53.7002 53.7002c4.7002 4.7002 12.2998 4.7002 17 0l17 -17c4.7002 -4.7002 4.7002 -12.2998 0 -17l-53.7998 -53.7998l53.6992 -53.7002c4.80078 -4.7002 4.80078 -12.2998 0.100586 -17zM448 336v-352
c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h48v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h128v52c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-52h48c26.5 0 48 -21.5 48 -48zM400 -10
v298h-352v-298c0 -3.2998 2.7002 -6 6 -6h340c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="calendar-check" unicode="&#xf274;" horiz-adv-x="448"
d="M400 384c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-352c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h48v52c0 6.62695 5.37305 12 12 12h40c6.62695 0 12 -5.37305 12 -12v-52h128v52c0 6.62695 5.37305 12 12 12h40
c6.62695 0 12 -5.37305 12 -12v-52h48zM394 -16c3.31152 0 6 2.68848 6 6v298h-352v-298c0 -3.31152 2.68848 -6 6 -6h340zM341.151 184.65l-142.31 -141.169c-4.70508 -4.66699 -12.3027 -4.6377 -16.9707 0.0673828l-75.0908 75.6992
c-4.66699 4.70508 -4.6377 12.3027 0.0673828 16.9707l22.7197 22.5361c4.70508 4.66699 12.3027 4.63672 16.9697 -0.0693359l44.1035 -44.4609l111.072 110.182c4.70508 4.66699 12.3027 4.63672 16.9707 -0.0683594l22.5361 -22.7178
c4.66699 -4.70508 4.63672 -12.3027 -0.0683594 -16.9697z" />
<glyph glyph-name="map" unicode="&#xf279;" horiz-adv-x="576"
d="M560.02 416c8.4502 0 15.9805 -6.83008 15.9805 -16.0195v-346.32c0 -13.4707 -8.32422 -24.9951 -20.1201 -29.71l-151.83 -52.8105c-6.23242 -2.02832 -12.9023 -3.12305 -19.8076 -3.12305c-7.07324 0 -13.8799 1.15039 -20.2422 3.27344l-172 60.71l-170.05 -62.8398
c-1.99023 -0.790039 -4 -1.16016 -5.95996 -1.16016c-8.45996 0 -15.9902 6.83008 -15.9902 16.0195v346.32c0.00292969 13.4697 8.32617 24.9932 20.1201 29.71l151.83 52.8105c6.43945 2.08984 13.1201 3.13965 19.8096 3.13965
c7.06641 -0.00292969 13.8789 -1.16602 20.2402 -3.28027l172 -60.7197h0.00976562l170.05 62.8398c1.98047 0.790039 4 1.16016 5.95996 1.16016zM224 357.58v-285.97l128 -45.1904v285.97zM48 29.9502l127.36 47.0801l0.639648 0.229492v286.2l-128 -44.5303v-288.979z
M528 65.0801v288.97l-127.36 -47.0693l-0.639648 -0.240234v-286.19z" />
<glyph glyph-name="comment-alt" unicode="&#xf27a;"
d="M448 448c35.2998 0 64 -28.7002 64 -64v-288c0 -35.2998 -28.7002 -64 -64 -64h-144l-124.9 -93.5996c-2.19922 -1.7002 -4.69922 -2.40039 -7.09961 -2.40039c-6.2002 0 -12 4.90039 -12 12v84h-96c-35.2998 0 -64 28.7002 -64 64v288c0 35.2998 28.7002 64 64 64h384z
M464 96v288c0 8.7998 -7.2002 16 -16 16h-384c-8.7998 0 -16 -7.2002 -16 -16v-288c0 -8.7998 7.2002 -16 16 -16h144v-60l67.2002 50.4004l12.7998 9.59961h160c8.7998 0 16 7.2002 16 16z" />
<glyph glyph-name="pause-circle" unicode="&#xf28b;"
d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM352 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-48
c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h48c8.7998 0 16 -7.2002 16 -16zM240 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-48c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h48c8.7998 0 16 -7.2002 16 -16z" />
<glyph glyph-name="stop-circle" unicode="&#xf28d;"
d="M504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200zM352 272v-160c0 -8.7998 -7.2002 -16 -16 -16h-160
c-8.7998 0 -16 7.2002 -16 16v160c0 8.7998 7.2002 16 16 16h160c8.7998 0 16 -7.2002 16 -16z" />
<glyph glyph-name="handshake" unicode="&#xf2b5;" horiz-adv-x="640"
d="M519.2 320.1h120.8v-255.699h-64c-17.5 0 -31.7998 14.1992 -31.9004 31.6992h-57.8994c-1.7998 -8.19922 -5.2998 -16.0996 -10.9004 -23l-26.2002 -32.2998c-15.7998 -19.3994 -41.8994 -25.5 -64 -16.7998c-13.5 -16.5996 -30.5996 -24 -48.7998 -24
c-15.0996 0 -28.5996 5.09961 -41.0996 15.9004c-31.7998 -21.9004 -74.7002 -21.3008 -105.601 3.7998l-84.5996 76.3994h-9.09961c-0.100586 -17.5 -14.3008 -31.6992 -31.9004 -31.6992h-64v255.699h118l47.5996 47.6006c10.5 10.3994 24.8008 16.2998 39.6006 16.2998
h226.8c15.4326 0 29.4326 -6.22168 39.5996 -16.2998zM48 96.4004c8.7998 0 16 7.09961 16 16c0 8.7998 -7.2002 16 -16 16s-16 -7.2002 -16 -16c0 -8.80078 7.2002 -16 16 -16zM438 103.3c2.7002 3.40039 2.2002 8.5 -1.2002 11.2998l-108.2 87.8008l-8.19922 -7.5
c-40.3008 -36.8008 -86.7002 -11.8008 -101.5 4.39941c-26.7002 29 -25 74.4004 4.39941 101.3l38.7002 35.5h-56.7002c-2 -0.799805 -3.7002 -1.5 -5.7002 -2.2998l-61.6992 -61.5996h-41.9004v-128.101h27.7002l97.2998 -88
c16.0996 -13.0996 41.4004 -10.5 55.2998 6.60059l15.6006 19.2002l36.7998 -31.5c3 -2.40039 12 -4.90039 18 2.39941l30 36.5l23.8994 -19.3994c3.5 -2.80078 8.5 -2.2002 11.3008 1.19922zM544 144.1v128h-44.7002l-61.7002 61.6006
c-1.39941 1.5 -3.39941 2.2998 -5.5 2.2998l-83.6992 -0.200195c-10 0 -19.6006 -3.7002 -27 -10.5l-65.6006 -60.0996c-9.7002 -8.7998 -10.5 -24 -1.2002 -33.9004c8.90039 -9.39941 25.1006 -8.7002 34.6006 0l55.2002 50.6006c6.5 5.89941 16.5996 5.5 22.5996 -1
l10.9004 -11.7002c6 -6.5 5.5 -16.6006 -1 -22.6006l-12.5 -11.3994l102.699 -83.4004c2.80078 -2.2998 5.40039 -4.89941 7.7002 -7.7002h69.2002zM592 96.4004c8.7998 0 16 7.09961 16 16c0 8.7998 -7.2002 16 -16 16s-16 -7.2002 -16 -16c0 -8.80078 7.2002 -16 16 -16z
" />
<glyph glyph-name="envelope-open" unicode="&#xf2b6;"
d="M494.586 283.484c10.6523 -8.80762 17.4141 -22.1064 17.4141 -36.9932v-262.491c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v262.515c0 14.9355 6.80469 28.2705 17.5146 37.0771c4.08008 3.35449 110.688 89.0996 135.15 108.549
c22.6992 18.1426 60.1299 55.8594 103.335 55.8594c43.4365 0 81.2314 -38.1914 103.335 -55.8594c23.5283 -18.707 130.554 -104.773 135.251 -108.656zM464 -10v253.632c0 0.00195312 0.00390625 0.000976562 0.00390625 0.00292969
c0 1.88184 -0.869141 3.56152 -2.22754 4.66016c-15.8633 12.8232 -108.793 87.5752 -132.366 106.316c-17.5527 14.0195 -49.7168 45.3887 -73.4102 45.3887c-23.6016 0 -55.2451 -30.8799 -73.4102 -45.3887c-23.5713 -18.7393 -116.494 -93.4795 -132.364 -106.293
c-1.40918 -1.13965 -2.22559 -2.85254 -2.22559 -4.66504v-253.653c0 -3.31152 2.68848 -6 6 -6h404c3.31152 0 6 2.68848 6 6zM432.009 177.704c4.24902 -5.15918 3.46484 -12.7949 -1.74512 -16.9814c-28.9746 -23.2822 -59.2734 -47.5967 -70.9287 -56.8623
c-22.6992 -18.1436 -60.1299 -55.8604 -103.335 -55.8604c-43.4521 0 -81.2871 38.2373 -103.335 55.8604c-11.2793 8.9668 -41.7441 33.4131 -70.9268 56.8643c-5.20996 4.1875 -5.99316 11.8223 -1.74512 16.9814l15.2578 18.5283
c4.17773 5.07227 11.6572 5.84277 16.7793 1.72559c28.6182 -23.001 58.5654 -47.0352 70.5596 -56.5713c17.5527 -14.0195 49.7168 -45.3887 73.4102 -45.3887c23.6016 0 55.2461 30.8799 73.4102 45.3887c11.9941 9.53516 41.9434 33.5703 70.5625 56.5684
c5.12207 4.11621 12.6016 3.3457 16.7783 -1.72656z" />
<glyph glyph-name="address-book" unicode="&#xf2b9;" horiz-adv-x="448"
d="M436 288h-20v-64h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-20v-64h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12h-20v-48c0 -26.5 -21.5 -48 -48 -48h-320c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48
h320c26.5 0 48 -21.5 48 -48v-48h20c6.59961 0 12 -5.40039 12 -12v-40c0 -6.59961 -5.40039 -12 -12 -12zM368 -16v416h-320v-416h320zM208 192c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM118.4 64
c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002c0 -10.6006 -10 -19.2002 -22.4004 -19.2002
h-179.199z" />
<glyph glyph-name="address-card" unicode="&#xf2bb;" horiz-adv-x="576"
d="M528 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-480c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h480zM528 16v352h-480v-352h480zM208 192c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64z
M118.4 64c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002
c0 -10.6006 -10 -19.2002 -22.4004 -19.2002h-179.199zM360 128c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 192c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112
c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 256c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112z" />
<glyph glyph-name="user-circle" unicode="&#xf2bd;" horiz-adv-x="496"
d="M248 344c53 0 96 -43 96 -96s-43 -96 -96 -96s-96 43 -96 96s43 96 96 96zM248 200c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8
c49.7002 0 95.0996 18.2998 130.1 48.4004c-14.8994 23 -40.3994 38.5 -69.5996 39.5c-20.7998 -6.5 -40.5996 -9.60059 -60.5 -9.60059s-39.7002 3.2002 -60.5 9.60059c-29.2002 -0.900391 -54.7002 -16.5 -69.5996 -39.5c35 -30.1006 80.3994 -48.4004 130.1 -48.4004z
M410.7 76.0996c23.3994 32.7002 37.2998 72.7002 37.2998 115.9c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -43.2002 13.9004 -83.2002 37.2998 -115.9c24.5 31.4004 62.2002 51.9004 105.101 51.9004c10.1992 0 26.0996 -9.59961 57.5996 -9.59961
c31.5996 0 47.4004 9.59961 57.5996 9.59961c43 0 80.7002 -20.5 105.101 -51.9004z" />
<glyph glyph-name="id-badge" unicode="&#xf2c1;" horiz-adv-x="384"
d="M336 448c26.5 0 48 -21.5 48 -48v-416c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v416c0 26.5 21.5 48 48 48h288zM336 -16v416h-288v-416h288zM144 336c-8.7998 0 -16 7.2002 -16 16s7.2002 16 16 16h96c8.7998 0 16 -7.2002 16 -16s-7.2002 -16 -16 -16
h-96zM192 160c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64zM102.4 32c-12.4004 0 -22.4004 8.59961 -22.4004 19.2002v19.2002c0 31.7998 30.0996 57.5996 67.2002 57.5996c11.3994 0 17.8994 -8 44.7998 -8
c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996v-19.2002c0 -10.6006 -10 -19.2002 -22.4004 -19.2002h-179.199z" />
<glyph glyph-name="id-card" unicode="&#xf2c2;" horiz-adv-x="576"
d="M528 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-480c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h480zM528 16v288h-480v-288h32.7998c-1 4.5 -0.799805 -3.59961 -0.799805 22.4004c0 31.7998 30.0996 57.5996 67.2002 57.5996
c11.3994 0 17.8994 -8 44.7998 -8c26.0996 0 34 8 44.7998 8c37.1006 0 67.2002 -25.7998 67.2002 -57.5996c0 -26 0.0996094 -17.9004 -0.799805 -22.4004h224.8zM360 96c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16
c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 160c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM360 224c-4.40039 0 -8 3.59961 -8 8v16c0 4.40039 3.59961 8 8 8h112
c4.40039 0 8 -3.59961 8 -8v-16c0 -4.40039 -3.59961 -8 -8 -8h-112zM192 128c-35.2998 0 -64 28.7002 -64 64s28.7002 64 64 64s64 -28.7002 64 -64s-28.7002 -64 -64 -64z" />
<glyph glyph-name="window-maximize" unicode="&#xf2d0;"
d="M464 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h416zM464 22v234h-416v-234c0 -3.2998 2.7002 -6 6 -6h404c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="window-minimize" unicode="&#xf2d1;"
d="M480 -32h-448c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32h448c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32z" />
<glyph glyph-name="window-restore" unicode="&#xf2d2;"
d="M464 448c26.5 0 48 -21.5 48 -48v-320c0 -26.5 -21.5 -48 -48 -48h-48v-48c0 -26.5 -21.5 -48 -48 -48h-320c-26.5 0 -48 21.5 -48 48v320c0 26.5 21.5 48 48 48h48v48c0 26.5 21.5 48 48 48h320zM368 -16v208h-320v-208h320zM464 80v320h-320v-48h224
c26.5 0 48 -21.5 48 -48v-224h48z" />
<glyph glyph-name="snowflake" unicode="&#xf2dc;" horiz-adv-x="448"
d="M440.1 92.7998c7.60059 -4.39941 10.1006 -14.2002 5.5 -21.7002l-7.89941 -13.8994c-4.40039 -7.7002 -14 -10.2998 -21.5 -5.90039l-39.2002 23l9.09961 -34.7002c2.30078 -8.5 -2.69922 -17.2998 -11.0996 -19.5996l-15.2002 -4.09961
c-8.39941 -2.30078 -17.0996 2.7998 -19.2998 11.2998l-21.2998 81l-71.9004 42.2002v-84.5l58.2998 -59.3008c6.10059 -6.19922 6.10059 -16.3994 0 -22.5996l-11.0996 -11.2998c-6.09961 -6.2002 -16.0996 -6.2002 -22.2002 0l-24.8994 25.3994v-46.0996
c0 -8.7998 -7 -16 -15.7002 -16h-15.7002c-8.7002 0 -15.7002 7.2002 -15.7002 16v45.9004l-24.8994 -25.4004c-6.10059 -6.2002 -16.1006 -6.2002 -22.2002 0l-11.1006 11.2998c-6.09961 6.2002 -6.09961 16.4004 0 22.6006l58.3008 59.2998v84.5l-71.9004 -42.2002
l-21.2998 -81c-2.2998 -8.5 -10.9004 -13.5996 -19.2998 -11.2998l-15.2002 4.09961c-8.40039 2.2998 -13.2998 11.1006 -11.1006 19.6006l9.10059 34.6992l-39.2002 -23c-7.5 -4.39941 -17.2002 -1.7998 -21.5 5.90039l-7.90039 13.9004
c-4.2998 7.69922 -1.69922 17.5 5.80078 21.8994l39.1992 23l-34.0996 9.2998c-8.40039 2.30078 -13.2998 11.1006 -11.0996 19.6006l4.09961 15.5c2.2998 8.5 10.9004 13.5996 19.2998 11.2998l79.7002 -21.7002l71.9004 42.2002l-71.9004 42.2002l-79.7002 -21.7002
c-8.39941 -2.2998 -17.0996 2.7998 -19.2998 11.2998l-4.09961 15.5c-2.30078 8.5 2.69922 17.2998 11.0996 19.6006l34.0996 9.09961l-39.1992 23c-7.60059 4.5 -10.1006 14.2002 -5.80078 21.9004l7.90039 13.8994c4.40039 7.7002 14 10.2998 21.5 5.90039l39.2002 -23
l-9.10059 34.7002c-2.2998 8.5 2.7002 17.2998 11.1006 19.5996l15.2002 4.09961c8.39941 2.30078 17.0996 -2.7998 19.2998 -11.2998l21.2998 -81l71.9004 -42.2002v84.5l-58.3008 59.3008c-6.09961 6.19922 -6.09961 16.3994 0 22.5996l11.5 11.2998
c6.10059 6.2002 16.1006 6.2002 22.2002 0l24.9004 -25.3994v46.0996c0 8.7998 7 16 15.7002 16h15.6992c8.7002 0 15.7002 -7.2002 15.7002 -16v-45.9004l24.9004 25.4004c6.09961 6.2002 16.0996 6.2002 22.2002 0l11.0996 -11.2998
c6.09961 -6.2002 6.09961 -16.4004 0 -22.6006l-58.2998 -59.2998v-84.5l71.8994 42.2002l21.3008 81c2.2998 8.5 10.8994 13.5996 19.2998 11.2998l15.2002 -4.09961c8.39941 -2.2998 13.2998 -11.1006 11.0996 -19.6006l-9.09961 -34.6992l39.1992 23
c7.5 4.39941 17.2002 1.7998 21.5 -5.90039l7.90039 -13.9004c4.2998 -7.69922 1.7002 -17.5 -5.7998 -21.8994l-39.2002 -23l34.0996 -9.2998c8.40039 -2.30078 13.3008 -11.1006 11.1006 -19.6006l-4.10059 -15.5c-2.2998 -8.5 -10.8994 -13.5996 -19.2998 -11.2998
l-79.7002 21.7002l-71.8994 -42.2002l71.7998 -42.2002l79.7002 21.7002c8.39941 2.2998 17.0996 -2.7998 19.2998 -11.2998l4.09961 -15.5c2.30078 -8.5 -2.69922 -17.2998 -11.0996 -19.6006l-34.0996 -9.2998z" />
<glyph glyph-name="trash-alt" unicode="&#xf2ed;" horiz-adv-x="448"
d="M268 32c-6.62305 0 -12 5.37695 -12 12v216c0 6.62305 5.37695 12 12 12h24c6.62305 0 12 -5.37695 12 -12v-216c0 -6.62305 -5.37695 -12 -12 -12h-24zM432 368c8.83105 0 16 -7.16895 16 -16v-16c0 -8.83105 -7.16895 -16 -16 -16h-16v-336
c0 -26.4922 -21.5078 -48 -48 -48h-288c-26.4922 0 -48 21.5078 -48 48v336h-16c-8.83105 0 -16 7.16895 -16 16v16c0 8.83105 7.16895 16 16 16h82.4102l34.0195 56.7002c8.39258 13.9844 23.6777 23.2998 41.1602 23.2998h100.82
c0.0078125 0 -0.015625 0.0517578 -0.0078125 0.0517578c17.4824 0 32.7949 -9.36719 41.1875 -23.3516l34 -56.7002h82.4102zM171.84 397.09l-17.4502 -29.0898h139.221l-17.46 29.0898c-1.0498 1.74707 -2.95898 2.91016 -5.14355 2.91016h-0.00683594h-94
c-0.00585938 0 -0.00683594 0.00683594 -0.0126953 0.00683594c-2.18457 0 -4.09766 -1.16992 -5.14746 -2.91699zM368 -16v336h-288v-336h288zM156 32c-6.62305 0 -12 5.37695 -12 12v216c0 6.62305 5.37695 12 12 12h24c6.62305 0 12 -5.37695 12 -12v-216
c0 -6.62305 -5.37695 -12 -12 -12h-24z" />
<glyph glyph-name="images" unicode="&#xf302;" horiz-adv-x="576"
d="M480 32v-16c0 -26.5098 -21.4902 -48 -48 -48h-384c-26.5098 0 -48 21.4902 -48 48v256c0 26.5098 21.4902 48 48 48h16v-48h-10c-3.31152 0 -6 -2.68848 -6 -6v-244c0 -3.31152 2.68848 -6 6 -6h372c3.31152 0 6 2.68848 6 6v10h48zM522 368h-372
c-3.31152 0 -6 -2.68848 -6 -6v-244c0 -3.31152 2.68848 -6 6 -6h372c3.31152 0 6 2.68848 6 6v244c0 3.31152 -2.68848 6 -6 6zM528 416c26.5098 0 48 -21.4902 48 -48v-256c0 -26.5098 -21.4902 -48 -48 -48h-384c-26.5098 0 -48 21.4902 -48 48v256
c0 26.5098 21.4902 48 48 48h384zM264 304c0 -22.0908 -17.9092 -40 -40 -40s-40 17.9092 -40 40s17.9092 40 40 40s40 -17.9092 40 -40zM192 208l39.5146 39.5146c4.68652 4.68652 12.2842 4.68652 16.9717 0l39.5137 -39.5146l103.515 103.515
c4.68652 4.68652 12.2842 4.68652 16.9717 0l71.5137 -71.5146v-80h-288v48z" />
<glyph glyph-name="clipboard" unicode="&#xf328;" horiz-adv-x="384"
d="M336 384c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-288c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h80c0 35.2998 28.7002 64 64 64s64 -28.7002 64 -64h80zM192 408c-13.2998 0 -24 -10.7002 -24 -24s10.7002 -24 24 -24s24 10.7002 24 24
s-10.7002 24 -24 24zM336 -10v340c0 3.2998 -2.7002 6 -6 6h-42v-36c0 -6.59961 -5.40039 -12 -12 -12h-168c-6.59961 0 -12 5.40039 -12 12v36h-42c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h276c3.2998 0 6 2.7002 6 6z" />
<glyph glyph-name="arrow-alt-circle-down" unicode="&#xf358;"
d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM224 308c0 6.59961 5.40039 12 12 12h40c6.59961 0 12 -5.40039 12 -12v-116
h67c10.7002 0 16.0996 -12.9004 8.5 -20.5l-99 -99c-4.7002 -4.7002 -12.2998 -4.7002 -17 0l-99 99c-7.5 7.59961 -2.2002 20.5 8.5 20.5h67v116z" />
<glyph glyph-name="arrow-alt-circle-left" unicode="&#xf359;"
d="M8 192c0 137 111 248 248 248s248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248zM456 192c0 110.5 -89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200s200 89.5 200 200zM384 212v-40c0 -6.59961 -5.40039 -12 -12 -12h-116v-67
c0 -10.7002 -12.9004 -16 -20.5 -8.5l-99 99c-4.7002 4.7002 -4.7002 12.2998 0 17l99 99c7.59961 7.59961 20.5 2.2002 20.5 -8.5v-67h116c6.59961 0 12 -5.40039 12 -12z" />
<glyph glyph-name="arrow-alt-circle-right" unicode="&#xf35a;"
d="M504 192c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248s248 -111 248 -248zM56 192c0 -110.5 89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200zM128 172v40c0 6.59961 5.40039 12 12 12h116v67
c0 10.7002 12.9004 16 20.5 8.5l99 -99c4.7002 -4.7002 4.7002 -12.2998 0 -17l-99 -99c-7.59961 -7.59961 -20.5 -2.2002 -20.5 8.5v67h-116c-6.59961 0 -12 5.40039 -12 12z" />
<glyph glyph-name="arrow-alt-circle-up" unicode="&#xf35b;"
d="M256 -56c-137 0 -248 111 -248 248s111 248 248 248s248 -111 248 -248s-111 -248 -248 -248zM256 392c-110.5 0 -200 -89.5 -200 -200s89.5 -200 200 -200s200 89.5 200 200s-89.5 200 -200 200zM276 64h-40c-6.59961 0 -12 5.40039 -12 12v116h-67
c-10.7002 0 -16 12.9004 -8.5 20.5l99 99c4.7002 4.7002 12.2998 4.7002 17 0l99 -99c7.59961 -7.59961 2.2002 -20.5 -8.5 -20.5h-67v-116c0 -6.59961 -5.40039 -12 -12 -12z" />
<glyph glyph-name="gem" unicode="&#xf3a5;" horiz-adv-x="576"
d="M464 448c4.09961 0 7.7998 -2 10.0996 -5.40039l99.9004 -147.199c2.90039 -4.40039 2.59961 -10.1006 -0.700195 -14.2002l-276 -340.8c-4.7998 -5.90039 -13.7998 -5.90039 -18.5996 0l-276 340.8c-3.2998 4 -3.60059 9.7998 -0.700195 14.2002l100 147.199
c2.2002 3.40039 6 5.40039 10 5.40039h352zM444.7 400h-56.7998l51.6992 -96h68.4004zM242.6 400l-51.5996 -96h194l-51.7002 96h-90.7002zM131.3 400l-63.2998 -96h68.4004l51.6992 96h-56.7998zM88.2998 256l119.7 -160l-68.2998 160h-51.4004zM191.2 256l96.7998 -243.3
l96.7998 243.3h-193.6zM368 96l119.6 160h-51.3994z" />
<glyph glyph-name="money-bill-alt" unicode="&#xf3d1;" horiz-adv-x="640"
d="M320 304c53.0195 0 96 -50.1396 96 -112c0 -61.8701 -43 -112 -96 -112c-53.0195 0 -96 50.1504 -96 112c0 61.8604 42.9805 112 96 112zM360 136v16c0 4.41992 -3.58008 8 -8 8h-16v88c0 4.41992 -3.58008 8 -8 8h-13.5801
c-4.91113 0 -9.50586 -1.49316 -13.3096 -4.03027l-15.3301 -10.2197c-2.15332 -1.43262 -3.55957 -3.88379 -3.55957 -6.66113c0 -1.6377 0.493164 -3.16113 1.33887 -4.42871l8.88086 -13.3105c1.43164 -2.15234 3.88379 -3.55957 6.66113 -3.55957
c1.6377 0 3.16016 0.494141 4.42871 1.33984l0.469727 0.310547v-55.4404h-16c-4.41992 0 -8 -3.58008 -8 -8v-16c0 -4.41992 3.58008 -8 8 -8h64c4.41992 0 8 3.58008 8 8zM608 384c17.6699 0 32 -14.3301 32 -32v-320c0 -17.6699 -14.3301 -32 -32 -32h-576
c-17.6699 0 -32 14.3301 -32 32v320c0 17.6699 14.3301 32 32 32h576zM592 112v160c-35.3496 0 -64 28.6504 -64 64h-416c0 -35.3496 -28.6504 -64 -64 -64v-160c35.3496 0 64 -28.6504 64 -64h416c0 35.3496 28.6504 64 64 64z" />
<glyph glyph-name="window-close" unicode="&#xf410;"
d="M464 416c26.5 0 48 -21.5 48 -48v-352c0 -26.5 -21.5 -48 -48 -48h-416c-26.5 0 -48 21.5 -48 48v352c0 26.5 21.5 48 48 48h416zM464 22v340c0 3.2998 -2.7002 6 -6 6h-404c-3.2998 0 -6 -2.7002 -6 -6v-340c0 -3.2998 2.7002 -6 6 -6h404c3.2998 0 6 2.7002 6 6z
M356.5 253.4l-61.4004 -61.4004l61.4004 -61.4004c4.59961 -4.59961 4.59961 -12.0996 0 -16.7998l-22.2998 -22.2998c-4.60059 -4.59961 -12.1006 -4.59961 -16.7998 0l-61.4004 61.4004l-61.4004 -61.4004c-4.59961 -4.59961 -12.0996 -4.59961 -16.7998 0
l-22.2998 22.2998c-4.59961 4.60059 -4.59961 12.1006 0 16.7998l61.4004 61.4004l-61.4004 61.4004c-4.59961 4.59961 -4.59961 12.0996 0 16.7998l22.2998 22.2998c4.60059 4.59961 12.1006 4.59961 16.7998 0l61.4004 -61.4004l61.4004 61.4004
c4.59961 4.59961 12.0996 4.59961 16.7998 0l22.2998 -22.2998c4.7002 -4.60059 4.7002 -12.1006 0 -16.7998z" />
<glyph glyph-name="comment-dots" unicode="&#xf4ad;"
d="M144 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM256 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM368 240c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32
s-32 14.2998 -32 32s14.2998 32 32 32zM256 416c141.4 0 256 -93.0996 256 -208s-114.6 -208 -256 -208c-32.7998 0 -64 5.2002 -92.9004 14.2998c-29.0996 -20.5996 -77.5996 -46.2998 -139.1 -46.2998c-9.59961 0 -18.2998 5.7002 -22.0996 14.5
c-3.80078 8.7998 -2 19 4.59961 26c0.5 0.400391 31.5 33.7998 46.4004 73.2002c-33 35.0996 -52.9004 78.7002 -52.9004 126.3c0 114.9 114.6 208 256 208zM256 48c114.7 0 208 71.7998 208 160s-93.2998 160 -208 160s-208 -71.7998 -208 -160
c0 -42.2002 21.7002 -74.0996 39.7998 -93.4004l20.6006 -21.7998l-10.6006 -28.0996c-5.5 -14.5 -12.5996 -28.1006 -19.8994 -40.2002c23.5996 7.59961 43.1992 18.9004 57.5 29l19.5 13.7998l22.6992 -7.2002c25.3008 -8 51.7002 -12.0996 78.4004 -12.0996z" />
<glyph glyph-name="smile-wink" unicode="&#xf4da;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM365.8 138.4c10.2002 -8.5 11.6006 -23.6006 3.10059 -33.8008
c-30 -36 -74.1006 -56.5996 -120.9 -56.5996s-90.9004 20.5996 -120.9 56.5996c-8.39941 10.2002 -7.09961 25.3008 3.10059 33.8008c10.0996 8.39941 25.2998 7.09961 33.7998 -3.10059c20.7998 -25.0996 51.5 -39.3994 84 -39.3994s63.2002 14.3994 84 39.3994
c8.5 10.2002 23.5996 11.6006 33.7998 3.10059zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 268c25.7002 0 55.9004 -16.9004 59.7002 -42.0996c1.7998 -11.1006 -11.2998 -18.2002 -19.7998 -10.8008l-9.5 8.5
c-14.8008 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-8.30078 -7.39941 -21.5 -0.399414 -19.8008 10.8008c4 25.1992 34.2002 42.0996 59.9004 42.0996z" />
<glyph glyph-name="angry" unicode="&#xf556;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM248 136c33.5996 0 65.2002 -14.7998 86.7998 -40.5996
c8.40039 -10.2002 7.10059 -25.3008 -3.09961 -33.8008c-10.6006 -8.89941 -25.7002 -6.69922 -33.7998 3c-24.8008 29.7002 -75 29.7002 -99.8008 0c-8.5 -10.1992 -23.5996 -11.5 -33.7998 -3s-11.5996 23.6006 -3.09961 33.8008
c21.5996 25.7998 53.2002 40.5996 86.7998 40.5996zM200 208c0 -17.7002 -14.2998 -32.0996 -32 -32.0996s-32 14.2998 -32 32c0 6.19922 2.2002 11.6992 5.2998 16.5996l-28.2002 8.5c-12.6992 3.7998 -19.8994 17.2002 -16.0996 29.9004
c3.7998 12.6992 17.0996 20 29.9004 16.0996l80 -24c12.6992 -3.7998 19.8994 -17.2002 16.0996 -29.9004c-3.09961 -10.3994 -12.7002 -17.0996 -23 -17.0996zM399 262.9c3.7998 -12.7002 -3.40039 -26.1006 -16.0996 -29.8008l-28.2002 -8.5
c3.09961 -4.89941 5.2998 -10.3994 5.2998 -16.5996c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32c-10.2998 0 -19.9004 6.7002 -23 17.0996c-3.7998 12.7002 3.40039 26.1006 16.0996 29.9004l80 24c12.8008 3.7998 26.1006 -3.40039 29.9004 -16.0996z" />
<glyph glyph-name="dizzy" unicode="&#xf567;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM214.2 209.9
c-7.90039 -7.90039 -20.5 -7.90039 -28.4004 -0.200195l-17.7998 17.7998l-17.7998 -17.7998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0c-7.80078 7.7998 -7.80078 20.5 0 28.2998l17.8994 17.9004l-17.8994 17.8994c-7.80078 7.7998 -7.80078 20.5 0 28.2998
c7.7998 7.80078 20.5 7.80078 28.2998 0l17.7998 -17.7998l17.9004 17.9004c7.7998 7.7998 20.5 7.7998 28.2998 0s7.7998 -20.5 0 -28.2998l-17.9004 -17.9004l17.9004 -17.7998c7.7998 -7.7998 7.7998 -20.5 0 -28.2998zM374.2 302.1
c7.7002 -7.7998 7.7002 -20.3994 0 -28.1992l-17.9004 -17.9004l17.7998 -18c7.80078 -7.7998 7.80078 -20.5 0 -28.2998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0l-17.7998 17.7998l-17.7998 -17.7998c-7.7998 -7.7998 -20.5 -7.7998 -28.2998 0
c-7.80078 7.7998 -7.80078 20.5 0 28.2998l17.8994 17.9004l-17.8994 17.8994c-7.80078 7.7998 -7.80078 20.5 0 28.2998c7.7998 7.80078 20.5 7.80078 28.2998 0l17.7998 -17.7998l17.9004 17.7998c7.7998 7.80078 20.5 7.80078 28.2998 0zM248 176
c35.2998 0 64 -28.7002 64 -64s-28.7002 -64 -64 -64s-64 28.7002 -64 64s28.7002 64 64 64z" />
<glyph glyph-name="flushed" unicode="&#xf579;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM344 304c44.2002 0 80 -35.7998 80 -80s-35.7998 -80 -80 -80
s-80 35.7998 -80 80s35.7998 80 80 80zM344 176c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM344 248c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM232 224c0 -44.2002 -35.7998 -80 -80 -80
s-80 35.7998 -80 80s35.7998 80 80 80s80 -35.7998 80 -80zM152 176c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM152 248c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM312 104
c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-128c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h128z" />
<glyph glyph-name="frown-open" unicode="&#xf57a;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM200 240c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32
s14.2998 32 32 32s32 -14.2998 32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM248 160c35.5996 0 88.7998 -21.2998 95.7998 -61.2002c2 -11.7998 -9.09961 -21.5996 -20.5 -18.0996
c-31.2002 9.59961 -59.3994 15.2998 -75.2998 15.2998s-44.0996 -5.7002 -75.2998 -15.2998c-11.5 -3.40039 -22.5 6.2998 -20.5 18.0996c7 39.9004 60.2002 61.2002 95.7998 61.2002z" />
<glyph glyph-name="grimace" unicode="&#xf57f;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM344 192c26.5 0 48 -21.5 48 -48v-32c0 -26.5 -21.5 -48 -48 -48h-192c-26.5 0 -48 21.5 -48 48v32c0 26.5 21.5 48 48 48
h192zM176 96v24h-40v-8c0 -8.7998 7.2002 -16 16 -16h24zM176 136v24h-24c-8.7998 0 -16 -7.2002 -16 -16v-8h40zM240 96v24h-48v-24h48zM240 136v24h-48v-24h48zM304 96v24h-48v-24h48zM304 136v24h-48v-24h48zM360 112v8h-40v-24h24c8.7998 0 16 7.2002 16 16zM360 136v8
c0 8.7998 -7.2002 16 -16 16h-24v-24h40z" />
<glyph glyph-name="grin" unicode="&#xf580;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 9.90039 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32z" />
<glyph glyph-name="grin-alt" unicode="&#xf581;" horiz-adv-x="496"
d="M200.3 200c-7.5 -11.4004 -24.5996 -12 -32.7002 0c-12.3994 18.7002 -15.1992 37.2998 -15.6992 56c0.599609 18.7002 3.2998 37.2998 15.6992 56c7.60059 11.4004 24.7002 12 32.7002 0c12.4004 -18.7002 15.2002 -37.2998 15.7002 -56
c-0.599609 -18.7002 -3.2998 -37.2998 -15.7002 -56zM328.3 200c-7.5 -11.4004 -24.5996 -12 -32.7002 0c-12.3994 18.7002 -15.1992 37.2998 -15.6992 56c0.599609 18.7002 3.2998 37.2998 15.6992 56c7.60059 11.4004 24.7002 12 32.7002 0
c12.4004 -18.7002 15.2002 -37.2998 15.7002 -56c-0.599609 -18.7002 -3.2998 -37.2998 -15.7002 -56zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200
s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006
s79.7002 4.7998 105.6 13.1006z" />
<glyph glyph-name="grin-beam" unicode="&#xf582;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM117.7 216.3c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996
l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002zM277.7 216.3c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998
c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002z" />
<glyph glyph-name="grin-beam-sweat" unicode="&#xf583;" horiz-adv-x="496"
d="M440 288c-29.5 0 -53.2998 26.2998 -53.2998 58.7002c0 25 31.7002 75.5 46.2002 97.2998c3.5 5.2998 10.5996 5.2998 14.1992 0c14.5 -21.7998 46.2002 -72.2998 46.2002 -97.2998c0 -32.4004 -23.7998 -58.7002 -53.2998 -58.7002zM248 48
c-51.9004 0 -115.3 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-8 -47.0996 -71.3994 -80 -123.3 -80zM378.3 216.3
c-3.09961 -0.899414 -7.2002 0.100586 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998zM483.6 269.2c8 -24.2998 12.4004 -50.2002 12.4004 -77.2002c0 -137 -111 -248 -248 -248s-248 111 -248 248s111 248 248 248
c45.7002 0 88.4004 -12.5996 125.2 -34.2002c-10.9004 -21.5996 -15.5 -36.2002 -17.2002 -45.7002c-31.2002 20.1006 -68.2002 31.9004 -108 31.9004c-110.3 0 -200 -89.7002 -200 -200s89.7002 -200 200 -200s200 89.7002 200 200
c0 22.5 -3.90039 44.0996 -10.7998 64.2998c0.399414 0 21.7998 -2.7998 46.3994 12.9004zM168 258.6c-12.2998 0 -23.7998 -7.7998 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998
c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996z" />
<glyph glyph-name="grin-hearts" unicode="&#xf584;" horiz-adv-x="496"
d="M353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM200.8 192.3
l-70.2002 18.1006c-20.3994 5.2998 -31.8994 27 -24.1992 47.1992c6.69922 17.7002 26.6992 26.7002 44.8994 22l7.10059 -1.89941l2 7.09961c5.09961 18.1006 22.8994 30.9004 41.5 27.9004c21.3994 -3.40039 34.3994 -24.2002 28.7998 -44.5l-19.4004 -69.9004
c-1.2998 -4.5 -6 -7.2002 -10.5 -6zM389.6 257.6c7.7002 -20.1992 -3.7998 -41.7998 -24.1992 -47.0996l-70.2002 -18.2002c-4.60059 -1.2002 -9.2998 1.5 -10.5 6l-19.4004 69.9004c-5.59961 20.2998 7.40039 41.0996 28.7998 44.5c18.7002 3 36.5 -9.7998 41.5 -27.9004
l2 -7.09961l7.10059 1.89941c18.2002 4.7002 38.2002 -4.39941 44.8994 -22zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200
s89.7002 -200 200 -200z" />
<glyph glyph-name="grin-squint" unicode="&#xf585;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.9004 -123.3 80c-1.7002 9.90039 7.7998 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM118.9 184.2c-3.80078 4.39941 -3.90039 11 -0.100586 15.5l33.6006 40.2998
l-33.6006 40.2998c-3.7002 4.5 -3.7002 11 0.100586 15.5c3.89941 4.40039 10.1992 5.5 15.2998 2.5l80 -48c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998s-2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7002 -1.7002 -15.2998 2.5zM361.8 181.7
l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5.10059 2.90039 11.5 1.90039 15.2998 -2.5c3.80078 -4.5 3.90039 -11 0.100586 -15.5l-33.6006 -40.2998l33.6006 -40.2998c3.7002 -4.5 3.7002 -11 -0.100586 -15.5
c-3.59961 -4.2002 -9.89941 -5.7002 -15.2998 -2.5z" />
<glyph glyph-name="grin-squint-tears" unicode="&#xf586;"
d="M117.1 63.9004c6.30078 0.899414 11.7002 -4.5 10.9004 -10.9004c-3.7002 -25.7998 -13.7002 -84 -30.5996 -100.9c-22 -21.8994 -57.9004 -21.5 -80.3008 0.900391c-22.3994 22.4004 -22.7998 58.4004 -0.899414 80.2998
c16.8994 16.9004 75.0996 26.9004 100.899 30.6006zM75.9004 105.6c-19.6006 -3.89941 -35.1006 -8.09961 -47.3008 -12.1992c-39.2998 90.5996 -22.0996 199.899 52 274c48.5 48.3994 111.9 72.5996 175.4 72.5996c38.9004 0 77.7998 -9.2002 113.2 -27.4004
c-4 -12.1992 -8.2002 -28 -12 -48.2998c-30.4004 17.9004 -65 27.7002 -101.2 27.7002c-53.4004 0 -103.6 -20.7998 -141.4 -58.5996c-61.5996 -61.5 -74.2998 -153.4 -38.6992 -227.801zM428.2 293.2c20.2998 3.89941 36.2002 8 48.5 12
c47.8994 -93.2002 32.8994 -210.5 -45.2002 -288.601c-48.5 -48.3994 -111.9 -72.5996 -175.4 -72.5996c-33.6992 0 -67.2998 7 -98.6992 20.5996c4.19922 12.2002 8.2998 27.7002 12.1992 47.2002c26.6006 -12.7998 55.9004 -19.7998 86.4004 -19.7998
c53.4004 0 103.6 20.7998 141.4 58.5996c65.6992 65.7002 75.7998 166 30.7998 242.601zM394.9 320.1c-6.30078 -0.899414 -11.7002 4.5 -10.9004 10.9004c3.7002 25.7998 13.7002 84 30.5996 100.9c22 21.8994 57.9004 21.5 80.3008 -0.900391
c22.3994 -22.4004 22.7998 -58.4004 0.899414 -80.2998c-16.8994 -16.9004 -75.0996 -26.9004 -100.899 -30.6006zM207.9 211.8c3 -3 4.19922 -7.2998 3.19922 -11.5l-22.5996 -90.5c-1.40039 -5.39941 -6.2002 -9.09961 -11.7002 -9.09961h-0.899414
c-5.80078 0.5 -10.5 5.09961 -11 10.8994l-4.80078 52.3008l-52.2998 4.7998c-5.7998 0.5 -10.3994 5.2002 -10.8994 11c-0.400391 5.89941 3.39941 11.2002 9.09961 12.5996l90.5 22.7002c4.2002 1 8.40039 -0.200195 11.4004 -3.2002zM247.6 236.9
c-0.0996094 0 -6.39941 -1.80078 -11.3994 3.19922c-3 3 -4.2002 7.30078 -3.2002 11.4004l22.5996 90.5c1.40039 5.7002 7 9.2002 12.6006 9.09961c5.7998 -0.5 10.5 -5.09961 11 -10.8994l4.7998 -52.2998l52.2998 -4.80078c5.7998 -0.5 10.4004 -5.19922 10.9004 -11
c0.399414 -5.89941 -3.40039 -11.1992 -9.10059 -12.5996zM299.6 148.4c29.1006 29.0996 53 59.5996 65.3008 83.7998c4.89941 9.2998 17.5996 9.89941 23.3994 1.7002c27.7002 -38.9004 6.10059 -106.9 -30.5996 -143.7s-104.8 -58.2998 -143.7 -30.6006
c-8.2998 5.90039 -7.5 18.6006 1.7002 23.4004c24.2002 12.5 54.7998 36.2998 83.8994 65.4004z" />
<glyph glyph-name="grin-stars" unicode="&#xf587;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM353.6 143.4c10 3.09961 19.3008 -5.5 17.7002 -15.3008
c-8 -47.0996 -71.2998 -80 -123.3 -80s-115.4 32.8008 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.3008c26 -8.30078 64.3994 -13.1006 105.6 -13.1006s79.7002 4.7998 105.6 13.1006zM125.7 200.9l6.09961 34.8994l-25.3994 24.6006
c-4.60059 4.59961 -1.90039 12.2998 4.2998 13.1992l34.8994 5l15.5 31.6006c2.90039 5.7998 11 5.7998 13.9004 0l15.5 -31.6006l34.9004 -5c6.19922 -1 8.7998 -8.69922 4.2998 -13.1992l-25.4004 -24.6006l6 -34.8994c1 -6.2002 -5.39941 -11 -11 -7.90039
l-31.2998 16.2998l-31.2998 -16.2998c-5.60059 -3.09961 -12 1.7002 -11 7.90039zM385.4 273.6c6.19922 -1 8.89941 -8.59961 4.39941 -13.1992l-25.3994 -24.6006l6 -34.8994c1 -6.2002 -5.40039 -11 -11 -7.90039l-31.3008 16.2998l-31.2998 -16.2998
c-5.59961 -3.09961 -12 1.7002 -11 7.90039l6 34.8994l-25.3994 24.6006c-4.60059 4.59961 -1.90039 12.2998 4.2998 13.1992l34.8994 5l15.5 31.6006c2.90039 5.7998 11 5.7998 13.9004 0l15.5 -31.6006z" />
<glyph glyph-name="grin-tears" unicode="&#xf588;" horiz-adv-x="640"
d="M117.1 191.9c6.30078 0.899414 11.7002 -4.5 10.9004 -10.9004c-3.7002 -25.7998 -13.7002 -84 -30.5996 -100.9c-22 -21.8994 -57.9004 -21.5 -80.3008 0.900391c-22.3994 22.4004 -22.7998 58.4004 -0.899414 80.2998c16.8994 16.9004 75.0996 26.9004 100.899 30.6006
zM623.8 161.3c21.9004 -21.8994 21.5 -57.8994 -0.799805 -80.2002c-22.4004 -22.3994 -58.4004 -22.7998 -80.2998 -0.899414c-16.9004 16.8994 -26.9004 75.0996 -30.6006 100.899c-0.899414 6.30078 4.5 11.7002 10.8008 10.8008
c25.7998 -3.7002 84 -13.7002 100.899 -30.6006zM497.2 99.5996c12.3994 -37.2998 25.0996 -43.7998 28.2998 -46.5c-44.5996 -65.7998 -120 -109.1 -205.5 -109.1s-160.9 43.2998 -205.5 109.1c3.09961 2.60059 15.7998 9.10059 28.2998 46.5
c33.4004 -63.8994 100.3 -107.6 177.2 -107.6s143.8 43.7002 177.2 107.6zM122.7 223.5c-2.40039 0.299805 -5 2.5 -49.5 -6.90039c12.3994 125.4 118.1 223.4 246.8 223.4s234.4 -98 246.8 -223.5c-44.2998 9.40039 -47.3994 7.2002 -49.5 7
c-15.2002 95.2998 -97.7998 168.5 -197.3 168.5s-182.1 -73.2002 -197.3 -168.5zM320 48c-51.9004 0 -115.3 32.9004 -123.3 80c-1.7002 10 7.89941 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996
c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-8 -47.0996 -71.3994 -80 -123.3 -80zM450.3 216.3c-3.09961 -0.899414 -7.2002 0.100586 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17
c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998zM240 258.6
c-12.2998 0 -23.7998 -7.7998 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004
c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996z" />
<glyph glyph-name="grin-tongue" unicode="&#xf589;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0
l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200
s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996
s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998zM168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32
s14.2998 32 32 32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
<glyph glyph-name="grin-tongue-squint" unicode="&#xf58a;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0
l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200
s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996
s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998zM377.1 295.8c3.80078 -4.39941 3.90039 -11 0.100586 -15.5l-33.6006 -40.2998
l33.6006 -40.2998c3.7002 -4.5 3.7002 -11 -0.100586 -15.5c-3.59961 -4.2002 -9.89941 -5.7002 -15.2998 -2.5l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5 3 11.5 1.90039 15.2998 -2.5zM214.2 250.3
c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998s-2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7002 -1.7002 -15.2998 2.5c-3.80078 4.5 -3.90039 11 -0.100586 15.5l33.6006 40.2998l-33.6006 40.2998c-3.7002 4.5 -3.7002 11 0.100586 15.5
c3.89941 4.5 10.2998 5.5 15.2998 2.5z" />
<glyph glyph-name="grin-tongue-wink" unicode="&#xf58b;" horiz-adv-x="496"
d="M152 268c25.7002 0 55.9004 -16.9004 59.7998 -42.0996c0.799805 -5 -1.7002 -10 -6.09961 -12.4004c-5.7002 -3.09961 -11.2002 -0.599609 -13.7002 1.59961l-9.5 8.5c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5
c-3.7998 -3.39941 -9.2998 -4 -13.7002 -1.59961c-4.39941 2.40039 -6.89941 7.40039 -6.09961 12.4004c3.89941 25.1992 34.0996 42.0996 59.7998 42.0996zM328 320c44.2002 0 80 -35.7998 80 -80s-35.7998 -80 -80 -80s-80 35.7998 -80 80s35.7998 80 80 80zM328 192
c26.5 0 48 21.5 48 48s-21.5 48 -48 48s-48 -21.5 -48 -48s21.5 -48 48 -48zM328 264c13.2998 0 24 -10.7002 24 -24s-10.7002 -24 -24 -24s-24 10.7002 -24 24s10.7002 24 24 24zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248z
M312 40h0.0996094v43.7998l-17.6992 8.7998c-15.1006 7.60059 -31.5 -1.69922 -34.9004 -16.5l-2.7998 -12.0996c-2.10059 -9.2002 -15.2002 -9.2002 -17.2998 0l-2.80078 12.0996c-3.39941 14.8008 -19.8994 24 -34.8994 16.5l-17.7002 -8.7998v-42.7998
c0 -35.2002 28 -64.5 63.0996 -65c35.8008 -0.5 64.9004 28.4004 64.9004 64zM340.2 14.7002c64 33.3994 107.8 100.3 107.8 177.3c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -77 43.7998 -143.9 107.8 -177.3
c-2.2002 8.09961 -3.7998 16.5 -3.7998 25.2998v43.5c-14.2002 12.4004 -24.4004 27.5 -27.2998 44.5c-1.7002 10 7.7998 18.4004 17.7002 15.2998c26 -8.2998 64.3994 -13.0996 105.6 -13.0996s79.7002 4.7998 105.6 13.0996c10 3.2002 19.4004 -5.39941 17.7002 -15.2998
c-2.89941 -17 -13.0996 -32.0996 -27.2998 -44.5v-43.5c0 -8.7998 -1.59961 -17.2002 -3.7998 -25.2998z" />
<glyph glyph-name="grin-wink" unicode="&#xf58c;" horiz-adv-x="496"
d="M328 268c25.6904 0 55.8799 -16.9199 59.8701 -42.1201c1.72949 -11.0898 -11.3506 -18.2695 -19.8301 -10.8398l-9.5498 8.47949c-14.8105 13.1904 -46.1602 13.1904 -60.9707 0l-9.5498 -8.47949c-8.33008 -7.40039 -21.5801 -0.379883 -19.8301 10.8398
c3.98047 25.2002 34.1699 42.1201 59.8604 42.1201zM168 208c-17.6699 0 -32 14.3301 -32 32s14.3301 32 32 32s32 -14.3301 32 -32s-14.3301 -32 -32 -32zM353.55 143.36c10.04 3.13965 19.3906 -5.4502 17.71 -15.3408
c-7.92969 -47.1494 -71.3193 -80.0195 -123.26 -80.0195s-115.33 32.8701 -123.26 80.0195c-1.69043 9.9707 7.76953 18.4707 17.71 15.3408c25.9297 -8.31055 64.3994 -13.0605 105.55 -13.0605s79.6201 4.75977 105.55 13.0605zM248 440c136.97 0 248 -111.03 248 -248
s-111.03 -248 -248 -248s-248 111.03 -248 248s111.03 248 248 248zM248 -8c110.28 0 200 89.7197 200 200s-89.7197 200 -200 200s-200 -89.7197 -200 -200s89.7197 -200 200 -200z" />
<glyph glyph-name="kiss" unicode="&#xf596;" horiz-adv-x="496"
d="M168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM304 140c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5
c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002
c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM248 440c137 0 248 -111 248 -248
s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z
" />
<glyph glyph-name="kiss-beam" unicode="&#xf597;" horiz-adv-x="496"
d="M168 296c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.299805 -3.7998 -2 -7.19922 -5.59961 -8.2998c-3.10059 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996c-12.3008 0 -23.8008 -7.89941 -31.5 -21.5996l-9.5 -17
c-1.80078 -3.2002 -5.80078 -4.7002 -9.30078 -3.7002c-3.59961 1.10059 -5.89941 4.60059 -5.59961 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004zM248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8
c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM304 140c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5
c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002
c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM328 296
c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.299805 -3.7998 -2 -7.19922 -5.59961 -8.2998c-3.10059 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996c-12.3008 0 -23.8008 -7.89941 -31.5 -21.5996l-9.5 -17
c-1.80078 -3.2002 -5.80078 -4.7002 -9.30078 -3.7002c-3.59961 1.10059 -5.89941 4.60059 -5.59961 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004z" />
<glyph glyph-name="kiss-wink-heart" unicode="&#xf598;" horiz-adv-x="504"
d="M304 139.5c0 -13 -13.4004 -27.2998 -35.0996 -36.4004c21.7998 -8.69922 35.1992 -23 35.1992 -36c0 -19.1992 -28.6992 -41.5 -71.5 -44h-0.5c-3.69922 0 -7 2.60059 -7.7998 6.2002c-0.899414 3.7998 1.10059 7.7002 4.7002 9.2002l17 7.2002
c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.2002c-6 2.59961 -5.7002 12.3994 0 14.7998l17 7.2002c12.9004 5.5 20.7002 13.5 20.7002 21.5s-7.7998 16 -20.7998 21.5l-16.9004 7.19922c-3.59961 1.5 -5.59961 5.40039 -4.7002 9.2002
c0.799805 3.7998 4.40039 6.60059 8.2002 6.2002c42.7002 -2.5 71.5 -24.7998 71.5 -44zM374.5 223c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-2.5 -2.2998 -7.90039 -4.7002 -13.7002 -1.59961c-4.39941 2.39941 -6.89941 7.39941 -6.09961 12.3994
c3.89941 25.2002 34.2002 42.1006 59.7998 42.1006s55.7998 -16.9004 59.7998 -42.1006c0.799805 -5 -1.7002 -10 -6.09961 -12.3994c-4.40039 -2.40039 -9.90039 -1.7002 -13.7002 1.59961zM136 239.5c0 17.7002 14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32
s-32 14.2998 -32 32zM501.1 45.5c9.2002 -23.9004 -4.39941 -49.4004 -28.5 -55.7002l-83 -21.5c-5.39941 -1.39941 -10.8994 1.7998 -12.3994 7.10059l-22.9004 82.5996c-6.59961 24 8.7998 48.5996 34 52.5996c22 3.5 43.1006 -11.5996 49 -33l2.2998 -8.39941
l8.40039 2.2002c21.5996 5.59961 45.0996 -5.10059 53.0996 -25.9004zM334 11.7002c17.7002 -64 10.9004 -39.5 13.4004 -46.7998c-30.5 -13.4004 -64 -20.9004 -99.4004 -20.9004c-137 0 -248 111 -248 248s111 248 248 248s248 -111 247.9 -248
c0 -31.7998 -6.2002 -62.0996 -17.1006 -90c-6 1.5 -12.2002 2.7998 -18.5996 2.90039c-5.60059 9.69922 -13.6006 17.5 -22.6006 23.8994c6.7002 19.9004 10.4004 41.1006 10.4004 63.2002c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200
c30.7998 0 59.9004 7.2002 86 19.7002z" />
<glyph glyph-name="laugh" unicode="&#xf599;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 224c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM168 224
c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
<glyph glyph-name="laugh-beam" unicode="&#xf59a;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 296c23.7998 0 52.7002 -29.2998 55.7998 -71.4004c0.700195 -8.5 -10.7998 -11.8994 -14.8994 -4.5
l-9.5 17c-7.7002 13.7002 -19.2002 21.6006 -31.5 21.6006c-12.3008 0 -23.8008 -7.90039 -31.5 -21.6006l-9.5 -17c-4.10059 -7.39941 -15.6006 -4.09961 -14.9004 4.5c3.2998 42.1006 32.2002 71.4004 56 71.4004zM127 220.1c-4.2002 -7.39941 -15.7002 -4 -15.0996 4.5
c3.2998 42.1006 32.1992 71.4004 56 71.4004c23.7998 0 52.6992 -29.2998 56 -71.4004c0.699219 -8.5 -10.8008 -11.8994 -14.9004 -4.5l-9.5 17c-7.7002 13.7002 -19.2002 21.6006 -31.5 21.6006s-23.7998 -7.90039 -31.5 -21.6006zM362.4 160c8.19922 0 14.5 -7 13.5 -15
c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
<glyph glyph-name="laugh-squint" unicode="&#xf59b;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM343.6 252l33.6006 -40.2998c8.59961 -10.4004 -3.90039 -24.7998 -15.4004 -18l-80 48
c-7.7998 4.7002 -7.7998 15.8994 0 20.5996l80 48c11.6006 6.7998 24 -7.7002 15.4004 -18zM134.2 193.7c-11.6006 -6.7998 -24.1006 7.59961 -15.4004 18l33.6006 40.2998l-33.6006 40.2998c-8.59961 10.2998 3.7998 24.9004 15.4004 18l80 -48
c7.7998 -4.7002 7.7998 -15.8994 0 -20.5996zM362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
<glyph glyph-name="laugh-wink" unicode="&#xf59c;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM389.4 50.5996c37.7998 37.8008 58.5996 88 58.5996 141.4s-20.7998 103.6 -58.5996 141.4c-37.8008 37.7998 -88 58.5996 -141.4 58.5996s-103.6 -20.7998 -141.4 -58.5996
c-37.7998 -37.8008 -58.5996 -88 -58.5996 -141.4s20.7998 -103.6 58.5996 -141.4c37.8008 -37.7998 88 -58.5996 141.4 -58.5996s103.6 20.7998 141.4 58.5996zM328 284c25.7002 0 55.9004 -16.9004 59.7002 -42.0996c1.7998 -11.1006 -11.2998 -18.2002 -19.7998 -10.8008
l-9.5 8.5c-14.8008 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5c-8.30078 -7.39941 -21.5 -0.399414 -19.8008 10.8008c4 25.1992 34.2002 42.0996 59.9004 42.0996zM168 224c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32s-14.2998 -32 -32 -32z
M362.4 160c8.19922 0 14.5 -7 13.5 -15c-7.5 -59.2002 -58.9004 -105 -121.101 -105h-13.5996c-62.2002 0 -113.601 45.7998 -121.101 105c-1 8 5.30078 15 13.5 15h228.801z" />
<glyph glyph-name="meh-blank" unicode="&#xf5a4;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM168 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32
s-32 14.2998 -32 32s14.2998 32 32 32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
<glyph glyph-name="meh-rolling-eyes" unicode="&#xf5a5;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM336 296c39.7998 0 72 -32.2002 72 -72s-32.2002 -72 -72 -72
s-72 32.2002 -72 72s32.2002 72 72 72zM336 184c22.0996 0 40 17.9004 40 40c0 13.5996 -7.2998 25.0996 -17.7002 32.2998c1 -2.59961 1.7002 -5.39941 1.7002 -8.2998c0 -13.2998 -10.7002 -24 -24 -24s-24 10.7002 -24 24c0 3 0.700195 5.7002 1.7002 8.2998
c-10.4004 -7.2002 -17.7002 -18.7002 -17.7002 -32.2998c0 -22.0996 17.9004 -40 40 -40zM232 224c0 -39.7998 -32.2002 -72 -72 -72s-72 32.2002 -72 72s32.2002 72 72 72s72 -32.2002 72 -72zM120 224c0 -22.0996 17.9004 -40 40 -40s40 17.9004 40 40
c0 13.5996 -7.2998 25.0996 -17.7002 32.2998c1 -2.59961 1.7002 -5.39941 1.7002 -8.2998c0 -13.2998 -10.7002 -24 -24 -24s-24 10.7002 -24 24c0 3 0.700195 5.7002 1.7002 8.2998c-10.4004 -7.2002 -17.7002 -18.7002 -17.7002 -32.2998zM312 96
c13.2002 0 24 -10.7998 24 -24s-10.7998 -24 -24 -24h-128c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24h128z" />
<glyph glyph-name="sad-cry" unicode="&#xf5b3;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM392 53.5996c34.5996 35.9004 56 84.7002 56 138.4c0 110.3 -89.7002 200 -200 200s-200 -89.7002 -200 -200c0 -53.7002 21.4004 -102.4 56 -138.4v114.4
c0 13.2002 10.7998 24 24 24s24 -10.7998 24 -24v-151.4c28.5 -15.5996 61.2002 -24.5996 96 -24.5996s67.5 9 96 24.5996v151.4c0 13.2002 10.7998 24 24 24s24 -10.7998 24 -24v-114.4zM205.8 213.5c-5.7998 -3.2002 -11.2002 -0.700195 -13.7002 1.59961l-9.5 8.5
c-14.7998 13.2002 -46.1992 13.2002 -61 0l-9.5 -8.5c-3.7998 -3.39941 -9.2998 -4 -13.6992 -1.59961c-4.40039 2.40039 -6.90039 7.40039 -6.10059 12.4004c3.90039 25.1992 34.2002 42.0996 59.7998 42.0996c25.6006 0 55.8008 -16.9004 59.8008 -42.0996
c0.799805 -5 -1.7002 -10 -6.10059 -12.4004zM344 268c25.7002 0 55.9004 -16.9004 59.7998 -42.0996c0.799805 -5 -1.7002 -10 -6.09961 -12.4004c-5.7002 -3.09961 -11.2002 -0.599609 -13.7002 1.59961l-9.5 8.5c-14.7998 13.2002 -46.2002 13.2002 -61 0l-9.5 -8.5
c-3.7998 -3.39941 -9.2002 -4 -13.7002 -1.59961c-4.39941 2.40039 -6.89941 7.40039 -6.09961 12.4004c3.89941 25.1992 34.0996 42.0996 59.7998 42.0996zM248 176c30.9004 0 56 -28.7002 56 -64s-25.0996 -64 -56 -64s-56 28.7002 -56 64s25.0996 64 56 64z" />
<glyph glyph-name="sad-tear" unicode="&#xf5b4;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM256 144c38.0996 0 74 -16.7998 98.5 -46.0996
c8.5 -10.2002 7.09961 -25.3008 -3.09961 -33.8008c-10.6006 -8.7998 -25.7002 -6.69922 -33.8008 3.10059c-15.2998 18.2998 -37.7998 28.7998 -61.5996 28.7998c-13.2002 0 -24 10.7998 -24 24s10.7998 24 24 24zM168 208c-17.7002 0 -32 14.2998 -32 32s14.2998 32 32 32
s32 -14.2998 32 -32s-14.2998 -32 -32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32zM162.4 173.2c2.7998 3.7002 8.39941 3.7002 11.1992 0c11.4004 -15.2998 36.4004 -50.6006 36.4004 -68.1006
c0 -22.6992 -18.7998 -41.0996 -42 -41.0996s-42 18.4004 -42 41.0996c0 17.5 25 52.8008 36.4004 68.1006z" />
<glyph glyph-name="smile-beam" unicode="&#xf5b8;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM332 135.4c8.5 10.1992 23.5996 11.5 33.7998 3.09961
c10.2002 -8.5 11.6006 -23.5996 3.10059 -33.7998c-30 -36 -74.1006 -56.6006 -120.9 -56.6006s-90.9004 20.6006 -120.9 56.6006c-8.39941 10.2002 -7.09961 25.2998 3.10059 33.7998c10.2002 8.40039 25.2998 7.09961 33.7998 -3.09961
c20.7998 -25.1006 51.5 -39.4004 84 -39.4004s63.2002 14.4004 84 39.4004zM136.5 237l-9.5 -17c-1.90039 -3.2002 -5.90039 -4.7998 -9.2998 -3.7002c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004s52.7002 -29.2998 56 -71.4004
c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996zM328 296c23.7998 0 52.7002 -29.2998 56 -71.4004
c0.299805 -3.7998 -2.09961 -7.19922 -5.7002 -8.2998c-3.09961 -1 -7.2002 0 -9.2998 3.7002l-9.5 17c-7.7002 13.7002 -19.2002 21.5996 -31.5 21.5996s-23.7998 -7.89941 -31.5 -21.5996l-9.5 -17c-1.90039 -3.2002 -5.7998 -4.7998 -9.2998 -3.7002
c-3.60059 1.10059 -6 4.60059 -5.7002 8.2998c3.2998 42.1006 32.2002 71.4004 56 71.4004z" />
<glyph glyph-name="surprise" unicode="&#xf5c2;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM248 168c35.2998 0 64 -28.7002 64 -64s-28.7002 -64 -64 -64
s-64 28.7002 -64 64s28.7002 64 64 64zM200 240c0 -17.7002 -14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32s32 -14.2998 32 -32zM328 272c17.7002 0 32 -14.2998 32 -32s-14.2998 -32 -32 -32s-32 14.2998 -32 32s14.2998 32 32 32z" />
<glyph glyph-name="tired" unicode="&#xf5c8;" horiz-adv-x="496"
d="M248 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM248 -8c110.3 0 200 89.7002 200 200s-89.7002 200 -200 200s-200 -89.7002 -200 -200s89.7002 -200 200 -200zM377.1 295.8c3.80078 -4.39941 3.90039 -11 0.100586 -15.5
l-33.6006 -40.2998l33.6006 -40.2998c3.7998 -4.5 3.7002 -11 -0.100586 -15.5c-3.5 -4.10059 -9.89941 -5.7002 -15.2998 -2.5l-80 48c-3.59961 2.2002 -5.7998 6.09961 -5.7998 10.2998s2.2002 8.09961 5.7998 10.2998l80 48c5 2.90039 11.5 1.90039 15.2998 -2.5z
M220 240c0 -4.2002 -2.2002 -8.09961 -5.7998 -10.2998l-80 -48c-5.40039 -3.2002 -11.7998 -1.60059 -15.2998 2.5c-3.80078 4.5 -3.90039 11 -0.100586 15.5l33.6006 40.2998l-33.6006 40.2998c-3.7998 4.5 -3.7002 11 0.100586 15.5
c3.7998 4.40039 10.2998 5.5 15.2998 2.5l80 -48c3.59961 -2.2002 5.7998 -6.09961 5.7998 -10.2998zM248 176c45.4004 0 100.9 -38.2998 107.8 -93.2998c1.5 -11.9004 -7 -21.6006 -15.5 -17.9004c-22.7002 9.7002 -56.2998 15.2002 -92.2998 15.2002
s-69.5996 -5.5 -92.2998 -15.2002c-8.60059 -3.7002 -17 6.10059 -15.5 17.9004c6.89941 55 62.3994 93.2998 107.8 93.2998z" />
</font>
</defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 141 KiB

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-regular-400.ttf Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-regular-400.woff Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-regular-400.woff2 Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-solid-900.eot Normal file
View File

Binary file not shown.

5034
solution/site/scripts/mockup/build3/assets/webfonts/fa-solid-900.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 898 KiB

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-solid-900.ttf Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-solid-900.woff Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/build3/assets/webfonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

113
solution/site/scripts/mockup/build3/gunsan/index.html Normal file
View File

File diff suppressed because one or more lines are too long

156
solution/site/scripts/mockup/build3/index.html Normal file
View File

@ -0,0 +1,156 @@
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>스테이,머뭄 · 전북 군산시 독채 펜션</title>
<meta name="description" content="1920년대 적산가옥을 고쳐 지은 독채 두 동, 매일 세탁·살균하는 침구" />
<link rel="canonical" href="https://web4ai.o2osolution.ai/s/stay3" />
<meta property="og:title" content="스테이,머뭄 · 전북 군산시 독채 펜션" />
<meta property="og:description" content="1920년대 적산가옥을 고쳐 지은 독채 두 동, 매일 세탁·살균하는 침구" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://web4ai.o2osolution.ai/s/stay3" />
<meta property="og:image" content="https://web4ai.o2osolution.ai/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" />
<link rel="stylesheet" href="/s/stay3/assets/css/main.css" />
<link rel="stylesheet" href="/s/stay3/assets/css/meomoom.css" />
<noscript><link rel="stylesheet" href="/s/stay3/assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<header id="topbar">
<a class="brand" href="/s/stay3">스테이,머뭄</a>
<nav>
<a href="/s/stay3/rooms">객실</a>
<a href="/s/stay3/gunsan">군산</a>
<a href="tel:0507-1497-0983" aria-label="전화">전화</a>
</nav>
</header>
<div id="wrapper" class="divided">
<section class="banner style1 orient-left content-align-left image-position-right fullscreen cover onload-image-fade-in onload-content-fade-right">
<div class="content">
<p class="kicker">군산시</p>
<h1 class="serif">스테이,머뭄</h1>
<p class="major">히로쓰 가옥 담 너머, 백 년 된 집 한 채</p>
<ul class="actions stacked"><li><a href="#stay" class="button large smooth-scroll-middle ghost">머뭄 둘러보기</a></li></ul>
</div>
<div class="image"><img src="/s/stay/img/mirror/ddc9f804f4ef83b5.jpg" alt="목재 서까래 천장과 미닫이창, 테이블이 있는 거실 공간" /></div>
</section>
<div id="stay"></div>
<section class="spotlight style1 orient-right content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2 class="serif">백 년 된 집 한 채</h2>
<p>스테이,머뭄은 전북특별자치도 군산시 신흥동 절골길에 있는 독채 펜션입니다. 1920년대에 지어진 백 년 고택으로, 국가등록문화유산인 군산 신흥동 일본식 가옥(히로쓰 가옥) 후문 바로 옆 — 걸어서 13m 거리입니다. 사장님은 이 집이 히로쓰 가옥 관리인이 살던 집이라고 전합니다. 2024년 5월에 리모델링을 마치고 문을 열었고, A동과 B동 두 동을 각각 한 팀만 씁니다. 기준 2인 · 최대 4인까지 묵을 수 있습니다.</p>
</div>
<div class="image"><img src="/s/stay/img/h-01.jpg" alt="기와 지붕 아래로 넓은 우드 데크와 정원이 이어지는 외관" /></div>
</section>
<section class="spotlight style1 orient-left content-align-left image-position-center onscroll-image-fade-in">
<div class="content">
<h2 class="serif">마당과 창고형 카페</h2>
<p>A동은 편안한 일본집에 와 있는 듯한 느낌의 공간이고, B동은 아늑하고 깔끔한 현대식 모던 스타일 공간입니다. 두 동 모두 독립된 아담한 정원과 창고형 CAFÉ 공간이 딸려 있어, 마당과 거실에서 새소리를 들으며 쉴 수 있습니다.</p><p>인테리어와 가구, 소품, 침구를 하나하나 준비해 두었습니다. 특히 침구류는 매일 세탁·살균하고 건조해 쓰시는 분이 바뀔 때마다 새것처럼 나갑니다.</p>
</div>
<div class="image"><img src="/s/stay/img/a-05.jpg" alt="붉은 벽돌 벽에 벤치와 색색 의자를 둔 창고형 카페 공간" /></div>
</section>
<section class="wrapper style1 align-center" id="rooms">
<div class="inner">
<h2 class="serif">두 동, 각각 한 팀만</h2>
<p>A동과 B동은 서로 보이지 않습니다. 한 동을 한 팀이 통째로 씁니다.</p>
<div class="units">
<article class="unit">
<a class="image" href="/s/stay3/rooms#a">
<img src="/s/stay/img/mirror/6d0c447b6a0c32af.jpg" alt="소파와 탁자, 벽난로 조명이 있는 서까래 천장의 거실" loading="lazy" />
</a>
<div class="body">
<h3>A동</h3>
<p class="sub">일본식 가정집 느낌으로 디딤돌마당과 예쁜정원</p>
<ul class="chips"><li>기준 2명</li><li>최대 4명</li><li>퀸 침대 1개</li><li>52 m²</li></ul>
<p class="price">주중 1박 <b>198,000원</b></p>
<a class="button fit" href="/s/stay3/rooms#a">이 동 자세히 보기</a>
</div>
</article>
<article class="unit">
<a class="image" href="/s/stay3/rooms#b">
<img src="/s/stay/img/h-05.jpg" alt="문 사이로 보이는 흰 앤티크 침대와 검은 서랍장" loading="lazy" />
</a>
<div class="body">
<h3>B동</h3>
<p class="sub">모던한 현대식 컨셉으로 꾸며진 따뜻한 공간</p>
<ul class="chips"><li>기준 2명</li><li>최대 4명</li><li>킹 침대 1개</li></ul>
<p class="price">주중 1박 <b>198,000원</b></p>
<a class="button fit" href="/s/stay3/rooms#b">이 동 자세히 보기</a>
</div>
</article></div>
<ul class="actions">
<li><a href="/s/stay3/rooms" class="button primary">객실과 요금 전체 보기</a></li>
</ul>
</div>
</section>
<section class="wrapper style1 invert align-center" id="gunsan">
<div class="inner">
<h2 class="serif">군산에서 보낼 시간</h2>
<p>담을 나서면 근대 도심입니다. 걸어서 닿는 곳과 계절마다 열리는 축제,
하루를 통째로 짜 둔 일정 21가지를 따로 모아 두었습니다.</p>
<div class="tiles"><a class="tile" href="/s/stay3/gunsan"><img src="/s/stay/img/mirror/f27b7440e2f1183f.jpg" alt="군산 신흥동 일본식가옥(히로쓰 가옥)" loading="lazy" /><span><b>군산 신흥동 일본식가옥(히로쓰 가옥)</b><small>도보 13m</small></span></a><a class="tile" href="/s/stay3/gunsan"><img src="/s/stay/img/mirror/d5433fe48de3da05.jpg" alt="초원사진관" loading="lazy" /><span><b>초원사진관</b><small>도보 248m</small></span></a><a class="tile" href="/s/stay3/gunsan"><img src="/s/stay/img/mirror/6a0c445e6dd940af.jpg" alt="군산 영화의 거리" loading="lazy" /><span><b>군산 영화의 거리</b><small>도보 318m</small></span></a><a class="tile" href="/s/stay3/gunsan"><img src="/s/stay/img/mirror/82606e203454e3ff.jpg" alt="2026 군산 은파벚꽃야시장" loading="lazy" /><span><b>2026 군산 은파벚꽃야시장</b><small>3~4월</small></span></a></div>
<ul class="actions">
<li><a href="/s/stay3/gunsan" class="button primary">군산 둘러보기</a></li>
</ul>
</div>
</section>
<section class="wrapper style1 align-center" id="map">
<div class="inner">
<h2 class="serif">오시는 길</h2>
<p class="address">전북 군산시 절골길 18</p>
<iframe class="mapframe" loading="lazy" title="스테이,머뭄 위치"
src="https://www.openstreetmap.org/export/embed.html?bbox=126.7021254%2C35.9844175%2C126.71012540000001%2C35.988417500000004&amp;layer=mapnik&amp;marker=35.9864175%2C126.7061254"></iframe>
<ul class="actions stacked">
<li><a class="button primary fit" href="https://map.naver.com/p/search/전북 군산시 절골길 18"
target="_blank" rel="noopener noreferrer">길찾기</a></li>
</ul>
<p class="tiny">군산역에서 차로 약 20분 · 히로쓰 가옥 후문에서 걸어서 13m</p>
</div>
</section>
<section class="wrapper style1 align-center" id="info">
<div class="inner">
<h2 class="serif">기본 정보</h2>
<div class="index align-left"><section><header><h3>체크인 / 체크아웃</h3></header><div class='content'><p>15:00 / 11:00</p></div></section><section><header><h3>인원</h3></header><div class='content'><p>기준 2명 · 최대 4명 (추가 1인 20,000원)</p></div></section><section><header><h3>주차</h3></header><div class='content'><p>가능</p></div></section><section><header><h3>와이파이</h3></header><div class='content'><p>있음</p></div></section><section><header><h3>취사</h3></header><div class='content'><p>가능</p></div></section><section><header><h3>반려동물</h3></header><div class='content'><p>불가</p></div></section><section><header><h3>흡연</h3></header><div class='content'><p>불가</p></div></section><section><header><h3>바비큐</h3></header><div class='content'><p>불가</p></div></section><section><header><h3>픽업 서비스</h3></header><div class='content'><p>없음</p></div></section><section><header><h3>취소·환불</h3></header><div class='content'><p>입실 당일 취소·노쇼는 환불되지 않습니다</p></div></section></div>
<h3 class="faqhead">자주 묻는 질문</h3>
<div class="faq"><details><summary>체크인과 체크아웃 시간은 언제인가요?</summary><p>체크인은 15:00부터이며, 체크아웃은 11:00까지입니다.</p></details><details><summary>객실 기준 인원과 최대 인원, 인원 추가 요금은 어떻게 되나요?</summary><p>A동과 B동 모두 기준 인원은 2명이며, 최대 4명까지 투숙하실 수 있습니다. 인원 추가 요금은 20,000원입니다.</p></details><details><summary>객실 내 취사가 가능한가요?</summary><p>주방에서 간단한 조리는 가능합니다. 다만 생선구이·고기구이·튀김처럼 냄새가 잘 빠지지 않는 조리는 하실 수 없고, 객실 안에서 직화로 굽는 방식도 허용되지 않습니다. 그릴·숯·전기 전열기구 등 개인 취사도구는 반입이 금지되어 있습니다.</p></details><details><summary>주차와 와이파이 이용이 가능한가요?</summary><p>네, 주차와 와이파이 모두 이용 가능합니다.</p></details><details><summary>반려동물 동반이나 실내 흡연이 가능한가요?</summary><p>반려동물 동반은 불가하며, 전 구역 흡연이 불가능합니다.</p></details></div>
<ul class="actions">
<li><a href="/s/stay3/rooms#info" class="button">이용 안내 · 질문 전체 보기</a></li>
</ul>
</div>
</section>
<footer class="wrapper style1 align-center" id="footer">
<div class="inner">
<h2>스테이,머뭄</h2>
<p>전북 군산시 절골길 18<br />0507-1497-0983</p>
<ul class="actions stacked">
<li><a href="https://m.place.naver.com/place/1133638931/home" class="button primary fit" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
<li><a href="tel:0507-1497-0983" class="button fit">전화 걸기</a></li>
<li><a href="https://www.instagram.com/staymeomoom" class="button fit" target="_blank" rel="noopener noreferrer">인스타그램</a></li>
</ul>
<p class="tiny">상호 스테이,머뭄 · 전북 군산시 절골길 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>
</div>
<div id="bookbar">
<span class="price"><b>198,000원</b><small>주중 1박 기준</small></span>
<a class="button primary" href="https://m.place.naver.com/place/1133638931/home" target="_blank" rel="noopener noreferrer">예약하기</a>
</div>
<script src="/s/stay3/assets/js/jquery.min.js"></script>
<script src="/s/stay3/assets/js/jquery.scrollex.min.js"></script>
<script src="/s/stay3/assets/js/jquery.scrolly.min.js"></script>
<script src="/s/stay3/assets/js/browser.min.js"></script>
<script src="/s/stay3/assets/js/breakpoints.min.js"></script>
<script src="/s/stay3/assets/js/util.js"></script>
<script src="/s/stay3/assets/js/main.js"></script>
</body>
</html>

104
solution/site/scripts/mockup/build3/rooms/index.html Normal file
View File

File diff suppressed because one or more lines are too long

8
solution/site/scripts/mockup/build_reading.py
View File

@ -67,11 +67,8 @@ def naver(title):
# 갈래 — 화면에 이 순서로 선다. # 갈래 — 화면에 이 순서로 선다.
GROUPS = [ GROUPS = [
("문학", "이 도시를 쓴 사람과 그 자리"), ("문학", "이 도시를 쓴 사람과 그 자리"),
("섬과 바다", "다리를 건너면 나오는 것"),
("역사", "연표에 안 들어간 이야기"),
("장소", "걸어서 또는 차로 닿는 자리"),
("음식과 생활", "이 도시가 먹는 것"),
] ]
KEEP = {"문학"}
# (갈래, 제목, 글, 연도 또는 None) # (갈래, 제목, 글, 연도 또는 None)
# ★ 원문을 옮기지 않는다 — 시·소설·가사의 본문은 한 줄도 싣지 않고 제목과 배경만 쓴다. # ★ 원문을 옮기지 않는다 — 시·소설·가사의 본문은 한 줄도 싣지 않고 제목과 배경만 쓴다.
@ -265,6 +262,7 @@ ITEMS = [
payload = json.loads(SRC.read_text(encoding="utf-8")) payload = json.loads(SRC.read_text(encoding="utf-8"))
SECTIONS = payload["theme"]["sections"] SECTIONS = payload["theme"]["sections"]
ITEMS = [row for row in ITEMS if row[0] in KEEP]
seen = [name for name, _note in GROUPS] seen = [name for name, _note in GROUPS]
for group, *_rest in ITEMS: for group, *_rest in ITEMS:
assert group in seen, f"갈래에 없는 이름: {group}" assert group in seen, f"갈래에 없는 이름: {group}"
@ -280,7 +278,7 @@ for group, title, body, year in ITEMS:
# (2026-09-14 대표: "34개중 15~19개인데 왜 34개라고 써놔?"). 숫자 대신 "올 때마다 # (2026-09-14 대표: "34개중 15~19개인데 왜 34개라고 써놔?"). 숫자 대신 "올 때마다
# 다른"으로 적어 실제 화면과 문구가 어긋나지 않게 한다. # 다른"으로 적어 실제 화면과 문구가 어긋나지 않게 한다.
env = {"kind": "reading", "version": 1, "title": "군산 읽기", env = {"kind": "reading", "version": 1, "title": "군산 읽기",
"subtitle": "문학 · 섬과 바다 · 역사 · 장소 · 음식과 생활 — 올 때마다 다른 몇 가지", "subtitle": "이 도시를 쓴 사람과 그 자리",
"groups": [{"name": name, "note": note} for name, note in GROUPS], "groups": [{"name": name, "note": note} for name, note in GROUPS],
"items": items} "items": items}

728
solution/site/scripts/mockup/build_stay2.py Normal file
View File

@ -0,0 +1,728 @@
"""`/s/stay2` — 같은 내용, **펜션 공식 사이트** 레이아웃.
첫 판은 Airbnb 식 OTA 상세였다(2026-09-16). 그건 숙소를 **비교하러 온** 사람의 화면이고,
공식 사이트는 이미 이 집을 보러 온 사람의 화면이라 장르가 다르다 — 그래서 다시 만들었다.
가져온 것
· 구조 — single-property 부티크/빌라 템플릿 계열(풀블리드 사진 → 짧은 카피 → 객실 →
정보 → 큰 예약 CTA). 목록형 OTA 가 아니라 한 채를 소개하는 흐름이다.
· 기존 디자인 토큰(갱지 바탕·명조)은 쓰지 않는다. 흰 바탕 · 얇고 자간 넓은 표제 ·
색은 사진만. 국내 스테이 공식 사이트의 관용 문법이다.
· 야놀자·여기어때·스테이폴리오를 베끼지 않는다 — 민사 10억 선례가 non-goal 이다(PRODUCT.md 6절).
★ 심미와 효율을 위아래로 나눈다: 위는 사진·여백(브랜드), 아래는 접힌 정보(밀도).
★ `/s/stay` 를 건드리지 않는다. 이 스크립트는 stay2 만 만든다.
"""
import html as H
import json
import re
from pathlib import Path
SP = Path(__file__).parent
OUT = SP / "build" / "stay2.html"
PAYLOAD = SP / "stay-payload-new.json"
def esc(value) -> str:
return H.escape(str(value or ""), quote=True)
def img_url(url: str) -> str:
"""미러 사진은 stay2 자기 디렉토리에서 준다 — stay 를 지워도 안 깨진다."""
return re.sub(r"^/assets/mirror/", "/s/stay2/img/mirror/", url or "")
def fact_map(facts) -> dict:
out = {}
for f in facts:
if f.get("scope") != "place":
continue
value = (f.get("value") or "").strip()
if f.get("type") == "bool":
value = "가능" if value == "true" else "불가" if value == "false" else value
if (f.get("label") or "").endswith("여부"):
value = "있음" if value == "가능" else "없음" if value == "불가" else value
out[f["key"]] = {"label": f.get("label") or f["key"], "value": value,
"note": (f.get("summary") or "").strip(), "bool": f.get("type") == "bool"}
return out
def section_items(payload, section_id):
for s in payload["theme"]["sections"]:
if s["id"] == section_id and s.get("data"):
try:
return json.loads(s["data"]).get("items") or []
except Exception:
return []
return []
# ── 조각들 ────────────────────────────────────────────────────────────────────
def video_ids(payload) -> list:
"""유튜브 Shorts id. Shorts 는 9:16 이라 모바일 히어로와 비율이 맞는다."""
out = []
for item in section_items(payload, "video"):
m = re.search(r"(?:shorts/|watch\?v=|youtu\.be/|embed/)([A-Za-z0-9_-]{6,})", item.get("url") or "")
if m:
out.append({"id": m.group(1), "caption": item.get("caption") or ""})
return out
def hero(payload) -> str:
shots = ([m for m in payload["media"] if not m.get("unitId")] or payload["media"])[:5]
place = payload["place"]
where = (place.get("addressLocality") or place.get("addressRegion") or "").strip()
lines = [c["text"] for c in (payload["narrative"].get("catchphrases", {}).get("items") or [])
if (c.get("kind") or "general") == "general"][:24]
films = video_ids(payload)
layers = "".join(
f'<img class="{"on" if i == 0 else ""}" src="{esc(img_url(m["url"]))}" '
f'alt="{esc(m.get("alt") or place["name"])}" loading="{"eager" if i == 0 else "lazy"}">'
for i, m in enumerate(shots)
)
return f"""
<header class="hero">
<div class="stage">{layers}</div>
<div class="film" id="film" aria-hidden="true"></div>
<span class="veil"></span>
<div class="copy">
<p class="eyebrow">{esc(where or "STAY")}</p>
<h1>{esc(place["name"])}</h1>
<p class="say" id="say">{esc(lines[0] if lines else "")}</p>
</div>
<a class="down" href="#about" aria-label="아래로"><i></i></a>
<script type="application/json" id="lines">{json.dumps(lines, ensure_ascii=False)}</script>
<script type="application/json" id="films">{json.dumps(films, ensure_ascii=False)}</script>
</header>
<nav class="top" id="topbar">
<span class="name">{esc(place["name"])}</span>
<a class="book" href="#book">예약</a>
</nav>"""
def film_block(payload) -> str:
films = video_ids(payload)
if not films:
return ""
cards = []
for i, f in enumerate(films):
uid = f"vid-{i}"
cards.append(
f'<li><button class="shotcard film-card" type="button" data-modal="{uid}">'
f'<img src="https://i.ytimg.com/vi/{esc(f["id"])}/hqdefault.jpg" alt="" loading="lazy">'
f'<span class="grad"></span><span class="play" aria-hidden="true"></span>'
f'<span class="cap"><b>{esc(f["caption"])}</b></span></button>'
f'<template id="{uid}"><h4>{esc(f["caption"])}</h4>'
f'<div class="tube"><iframe src="https://www.youtube.com/embed/{esc(f["id"])}?playsinline=1&amp;rel=0"'
f' title="{esc(f["caption"])}" allow="accelerometer; autoplay; encrypted-media; picture-in-picture"'
f' allowfullscreen loading="lazy"></iframe></div></template></li>'
)
return f'<h3>영상 <span>{len(films)}</span></h3><ul class="shots2 films">{"".join(cards)}</ul>'
def intro_block(payload) -> str:
about = (payload["narrative"].get("about") or [])[:2]
body = "".join(f'<p class="lead">{esc(t)}</p>' for t in about)
return f"""
<section class="sec">
<p class="eyebrow">About</p>
<h2>{esc(payload["narrative"].get("summary") or "")}</h2>
{body}
</section>"""
def gallery_block(payload) -> str:
shots = [m for m in payload["media"] if not m.get("unitId")][1:7]
if not shots:
return ""
cells = "".join(
f'<li><img src="{esc(img_url(m["url"]))}" alt="{esc(m.get("alt") or "")}" loading="lazy"></li>'
for m in shots
)
return f'<ul class="duo gal">{cells}</ul>'
def amenities(facts) -> str:
keys = ["parking", "wifi", "cooking_allowed", "smoking", "pickup_service", "barbecue"]
rows = [facts[k] for k in keys if k in facts and facts[k]["bool"]]
rows += [v for k, v in facts.items() if v["bool"] and k not in keys]
if not rows:
return ""
rows.sort(key=lambda r: r["value"] not in ("가능", "있음"))
cells = "".join(
f'<li class="{"" if r["value"] in ("가능", "있음") else "off"}">'
f'<b>{esc(r["label"].replace(" 가능", "").replace(" 여부", ""))}</b>'
f'<span>{esc(r["value"])}</span></li>'
for r in rows
)
return f'<h3>시설</h3><ul class="amen">{cells}</ul>'
def rules(facts) -> str:
order = ["check_in", "check_out", "cancel_policy", "pet_allowed", "extra_person_fee"]
rows = [facts[k] for k in order if k in facts and facts[k]["value"]]
if not rows:
return ""
items = "".join(
f'<div><dt>{esc(r["label"])}</dt><dd>{esc(r["value"])}'
f'{f"<em>{esc(r['note'])}</em>" if r["note"] else ""}</dd></div>'
for r in rows
)
return f'<h3>예약 전 확인</h3><dl class="rows">{items}</dl>'
def units_block(payload) -> str:
by_id = {m["mediaId"]: m for m in payload["media"]}
cards = []
for unit in payload["units"]:
shots = [by_id[i] for i in unit.get("mediaIds", []) if i in by_id]
specs, intro = [], ""
for f in unit.get("facts", []):
key, value = f.get("key"), (f.get("value") or "").strip()
if key in ("standard_capacity", "max_capacity", "bed_type", "room_size") and value:
specs.append(f"<li>{esc(value)}</li>")
if key in ("room_intro", "description") and value and not intro:
intro = value
name = re.sub(r"\(.*\)$", "", unit["name"]).strip() or unit["name"]
sub = (re.search(r"\((.*)\)$", unit["name"]) or [None, ""])[1]
shot = (f'<div class="shot"><img src="{esc(img_url(shots[0]["url"]))}" '
f'alt="{esc(shots[0].get("alt") or unit["name"])}" loading="lazy"></div>') if shots else ""
rest = "".join(
f'<li><img src="{esc(img_url(m["url"]))}" alt="" loading="lazy"></li>' for m in shots[1:3]
)
cards.append(f"""
<article class="room">
{shot}
<div class="body">
<h3>{esc(name)}</h3>
<p class="sub">{esc(sub)}</p>
<ul class="specs">{''.join(specs)}</ul>
{f'<p>{esc(intro)}</p>' if intro else ''}
</div>
{f'<ul class="duo">{rest}</ul>' if rest else ''}
</article>""")
return "".join(cards)
def faq_block(payload) -> str:
faqs = [f for f in payload["faqs"] if (f.get("question") or "").strip()]
if not faqs:
return ""
items = "".join(
f'<details><summary>{esc(f["question"])}</summary><p>{esc(f.get("answer"))}</p></details>'
for f in faqs
)
return (f'<h3>자주 묻는 질문 <span>{len(faqs)}</span>'
f'<button class="seeall" type="button" data-all>더보기 ›</button></h3>'
f'<div class="acc" data-more="6">{items}</div>')
def places_block(payload) -> str:
groups = [("eat", "맛집", payload["local"].get("restaurants") or []),
("see", "명소", payload["local"].get("attractions") or [])]
groups = [g for g in groups if g[2]]
if not groups:
return ""
cards, chips = [], ['<button class="chip on" type="button" data-filter="all">전체</button>']
for tag, label, rows in groups:
chips.append(f'<button class="chip" type="button" data-filter="{tag}">{label} {len(rows)}</button>')
for i, r in enumerate(rows):
img = img_url(r.get("imageUrl") or "")
uid = f"{tag}-{i}"
cards.append(
f'<li data-kind="{tag}"><button class="shotcard" type="button" data-modal="{uid}">'
+ (f'<img src="{esc(img)}" alt="" loading="lazy">' if img else '<span class="noimg"></span>')
+ '<span class="grad"></span><span class="cap">'
+ f'<em>{esc(r.get("distanceText") or label)}</em><b>{esc(r.get("name"))}</b></span></button>'
+ f'<template id="{uid}"><h4>{esc(r.get("name"))}</h4>'
+ f'<p class="meta">{esc(r.get("distanceText") or "")}'
+ f'{" · " + esc(r.get("address")) if r.get("address") else ""}</p>'
+ (f'<img src="{esc(img)}" alt="">' if img else "")
+ f'<p>{esc(r.get("description") or "")}</p>'
+ f'<a class="out" href="https://map.naver.com/p/search/{esc(r.get("searchQuery") or r.get("name"))}"'
+ ' target="_blank" rel="noopener noreferrer nofollow">지도에서 보기</a></template></li>'
)
total = sum(len(g[2]) for g in groups)
return (f'<h3>가까운 곳 <span>{total}</span>'
f'<button class="seeall" type="button" data-all>더보기 ›</button></h3>'
f'<div class="chips">{"".join(chips)}</div>'
f'<ul class="shots2" data-more="4" id="nearby">{"".join(cards)}</ul>')
def spots_row(payload) -> str:
"""정사각 사진에 라벨만 얹은 줄 — 레퍼런스 1 '국내 인기 여행지'."""
rows = [r for r in (payload["local"].get("attractions") or []) if r.get("imageUrl")][:6]
if not rows:
return ""
cells = "".join(
f'<li><button class="tile" type="button" data-modal="see-{i}">'
f'<img src="{esc(img_url(r["imageUrl"]))}" alt="" loading="lazy">'
f'<span class="grad"></span><b>{esc(r.get("name"))}</b></button></li>'
for i, r in enumerate(rows)
)
return f'<h3>걸어서 닿는 곳</h3><ul class="tiles">{cells}</ul>'
def festival_block(payload) -> str:
rows = payload["local"].get("festivals") or []
if not rows:
return ""
cards = []
for i, r in enumerate(rows):
img = img_url(r.get("imageUrl") or "")
when = " ".join(x for x in [r.get("season") or "", r.get("month") or ""] if x)
cards.append(
f'<li><button class="shotcard" type="button" data-modal="fes-{i}">'
+ (f'<img src="{esc(img)}" alt="" loading="lazy">' if img else '<span class="noimg"></span>')
+ '<span class="grad"></span><span class="cap">'
+ f'<em>{esc(when)}</em><b>{esc(r.get("name"))}</b></span></button>'
+ f'<template id="fes-{i}"><h4>{esc(r.get("name"))}</h4>'
+ f'<p class="meta">{esc(when)}{" · " + esc(r.get("location")) if r.get("location") else ""}</p>'
+ (f'<img src="{esc(img)}" alt="">' if img else "")
+ f'<p>{esc(r.get("description") or "")}</p>'
+ f'<a class="out" href="https://map.naver.com/p/search/{esc(r.get("searchQuery") or r.get("name"))}"'
+ ' target="_blank" rel="noopener noreferrer nofollow">지도에서 보기</a></template></li>'
)
return (f'<h3>계절별 축제 <span>{len(rows)}</span>'
f'<button class="seeall" type="button" data-all>더보기 ›</button></h3>'
f'<ul class="shots2" data-more="4">{"".join(cards)}</ul>')
def itinerary_block(payload) -> str:
items = section_items(payload, "itinerary")
if not items:
items = payload["local"].get("itineraries") or []
cards = []
for item in items:
days = item.get("days") or [{"stops": item.get("stops") or []}]
stops = [s for d in days for s in (d.get("stops") or [])]
if not stops:
continue
lines = "".join(f"<li>{esc(s.get('name'))}</li>" for s in stops[:12])
cards.append(
f'<details><summary><b>{esc(item.get("name"))}</b>'
f'<em>{esc(item.get("duration") or "")} · {len(stops)}곳</em></summary>'
f'<ol class="stops">{lines}</ol></details>'
)
if not cards:
return ""
return f'<h3>추천 일정 <b>{len(cards)}</b></h3><div class="acc" data-more="3">{"".join(cards)}</div>'
def story_block(payload) -> str:
out = []
for sid, title in (("reading", "군산 읽기"), ("people", "인물 열전"),
("chronicle", "시간의 골목"), ("songs", "가요 다방")):
rows = section_items(payload, sid)
if not rows:
continue
items = "".join(
f'<details><summary>{esc(r.get("title") or r.get("name"))}</summary>'
f'<p>{esc((r.get("body") or r.get("summary") or r.get("connection") or "")[:400])}</p></details>'
for r in rows
)
out.append(f'<h3>{title} <b>{len(rows)}</b></h3><div class="acc" data-more="3">{items}</div>')
return "".join(out)
def close_block(payload) -> str:
place = payload["place"]
links = [l for l in payload["links"] if l.get("confirmed") and l.get("channel") in (1, 2, 3, 7)]
url = links[0]["url"] if links else ""
tel = place.get("phone") or ""
return f"""
<section class="close" id="book">
<p class="eyebrow">Reservation</p>
<h2>머무실 날을 알려 주세요</h2>
{f'<a class="book" href="{esc(url)}" target="_blank" rel="noopener noreferrer">네이버 예약으로 이동</a>' if url else ''}
{f'<a class="tel" href="tel:{esc(tel)}">전화 {esc(tel)}</a>' if tel else ''}
</section>
<footer>{esc(place.get("roadAddress") or place.get("address") or "")}</footer>"""
CSS = """
:root{
--paper:#fff; --ink:#141414; --soft:#6f6f6f; --line:#e6e4df;
--pad:22px; --wide:640px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper); color:var(--ink);
font:15.5px/1.9 -apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
-webkit-font-smoothing:antialiased; word-break:keep-all;
}
.app{max-width:var(--wide);margin:0 auto;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--soft);
font-weight:500;margin:0 0 14px}
h2{font-size:23px;line-height:1.55;font-weight:400;letter-spacing:.06em;margin:0 0 18px}
h3{font-size:16px;font-weight:600;letter-spacing:.02em;margin:0 0 14px;
display:flex;align-items:baseline;gap:7px}
h3 span{font-size:12px;font-weight:400;color:var(--soft);letter-spacing:.1em}
p{margin:0 0 16px}
.lead{font-size:16.5px;line-height:2;color:#2a2a2a}
.sec{padding:76px var(--pad)}
.sec--tight{padding:44px var(--pad)}
.rule{height:1px;background:var(--line);margin:0 var(--pad)}
/* ── 히어로 — 사진이 천천히 교차하고 문구가 갈린다 ── */
.hero{position:relative;height:92svh;min-height:560px;background:#0e0e0e;overflow:hidden}
.stage{position:absolute;inset:0}
.stage img{position:absolute;inset:0;opacity:0;transform:scale(1.08);
transition:opacity 1.6s ease, transform 8s linear}
.stage img.on{opacity:.9;transform:scale(1)}
.film{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.film.on{opacity:.92}
.film iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:100vw;height:calc(100vw * 16 / 9);min-height:100%;min-width:calc(100svh * 9 / 16);border:0}
.film-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:48px;height:48px;border-radius:50%;background:#0000005c;backdrop-filter:blur(2px)}
.film-card .play::after{content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.films .shotcard{aspect-ratio:9/16}
.tube{position:relative;aspect-ratio:9/16;margin-bottom:18px;background:#000}
.tube iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.veil{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.62) 100%)}
.hero .copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 74px;color:#fff}
.hero .copy .eyebrow{color:#ffffffc4;animation:rise .9s .1s both}
.hero h1{font-size:31px;line-height:1.45;font-weight:300;letter-spacing:.11em;margin:0 0 14px;
animation:rise 1s .25s both}
.hero .say{font-size:15.5px;color:#fff;margin:0;letter-spacing:.04em;min-height:2.6em;
text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero .say.out{opacity:0;transform:translateY(6px)}
.hero .say{transition:opacity .5s ease, transform .5s ease}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.down{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
width:44px;height:44px;display:grid;place-items:center}
.down i{width:1px;height:26px;background:#fff9;animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}
50%{transform:scaleY(1);opacity:1}}
.top{position:fixed;top:0;left:0;right:0;z-index:40;max-width:var(--wide);margin:0 auto;
display:flex;align-items:center;gap:10px;padding:0 var(--pad);height:56px;
background:#fffffff2;border-bottom:1px solid var(--line);
transform:translateY(-100%);transition:transform .25s ease}
.top.on{transform:none}
.top .name{font-size:15px;letter-spacing:.08em;flex:1}
.top .book{font-size:13px;letter-spacing:.06em;border:1px solid var(--ink);
padding:0 16px;min-height:44px;display:flex;align-items:center}
/* 스크롤에 맞춰 조용히 올라온다 */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease}
.rise.seen{opacity:1;transform:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 6px;margin:0}
.duo li{list-style:none;aspect-ratio:3/4;overflow:hidden}
.duo li:first-child{grid-column:1 / -1;aspect-ratio:4/3}
/* ── 사진 카드 — 그라데이션 위에 카피 (모달을 연다) ── */
.seeall{margin-left:auto;border:0;background:none;font:inherit;font-size:13px;
color:var(--soft);letter-spacing:.04em;cursor:pointer;min-height:44px;padding:0 0 0 12px}
.chips{display:flex;gap:7px;overflow-x:auto;touch-action:pan-y pinch-zoom;
margin:0 0 16px;padding:2px 0 4px;scrollbar-width:none;list-style:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
background:none;font:inherit;font-size:14px;color:var(--soft);cursor:pointer;white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px;padding:0;list-style:none}
.tile{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
border:0;padding:0;background:#eee;cursor:pointer}
.tile b{position:absolute;left:8px;bottom:8px;color:#fff;font-size:13px;font-weight:500;
letter-spacing:.01em;text-align:left;line-height:1.35;padding-right:8px}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.shotcard{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;
border:0;padding:0;background:#eee;cursor:pointer;text-align:left}
.shotcard img{transition:transform .7s ease}
.shotcard:active img{transform:scale(1.04)}
.shotcard .noimg{display:block;width:100%;height:100%;background:#efece6}
.shotcard .grad{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.72) 100%)}
.shotcard .cap{position:absolute;left:12px;right:12px;bottom:12px;color:#fff;display:block}
.shotcard .cap em{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;
color:#ffffffc4;margin-bottom:3px}
.shotcard .cap b{display:block;font-size:15px;font-weight:500;line-height:1.45;letter-spacing:.02em}
/* ── 모달 ── */
.sheet{position:fixed;inset:0;z-index:60;display:none}
.sheet.on{display:block}
.sheet .bg{position:absolute;inset:0;background:#0009;opacity:0;transition:opacity .25s}
.sheet.on .bg{opacity:1}
.sheet .box{position:absolute;left:0;right:0;bottom:0;max-width:var(--wide);margin:0 auto;
background:#fff;max-height:88svh;overflow:auto;padding:26px var(--pad) 34px;
transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet.on .box{transform:none}
.sheet h4{font-size:20px;font-weight:400;letter-spacing:.05em;margin:0 0 6px}
.sheet .meta{font-size:12px;letter-spacing:.1em;color:var(--soft);margin:0 0 18px}
.sheet img{aspect-ratio:4/3;margin:0 0 18px}
.sheet p{color:#3a3a3a}
.sheet .out{display:flex;align-items:center;justify-content:center;min-height:52px;
border:1px solid var(--ink);font-size:14px;letter-spacing:.08em;margin-top:8px}
.sheet .x{position:absolute;top:-52px;right:var(--pad);width:44px;height:44px;border:0;
background:none;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.room{margin:0 0 64px}
.room .shot{aspect-ratio:4/3;overflow:hidden;margin-bottom:22px}
.room .body{padding:0 var(--pad)}
.room h3{font-size:19px;font-weight:400;letter-spacing:.08em;margin:0 0 6px;display:block}
.room .sub{color:var(--soft);font-size:13.5px;letter-spacing:.04em;margin:0 0 14px}
.room .specs{display:flex;flex-wrap:wrap;gap:0 18px;margin:0 0 14px;padding:0;list-style:none}
.room .specs li{font-size:13.5px;color:var(--soft);position:relative;padding-left:11px}
.room .specs li::before{content:'';position:absolute;left:0;top:.9em;width:3px;height:3px;
border-radius:50%;background:var(--soft)}
.room p{color:#3a3a3a}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:0;padding:0;list-style:none}
.amen li{display:flex;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.amen li b{font-weight:500}
.amen .off{color:#a8a8a8}
.amen .off b{text-decoration:line-through;text-decoration-thickness:1px}
.rows{margin:0;padding:0}
.rows>div{padding:14px 0;border-bottom:1px solid var(--line)}
.rows dt{font-size:12px;letter-spacing:.14em;color:var(--soft);margin:0 0 4px;text-transform:uppercase}
.rows dd{margin:0;font-size:15px}
.rows em{display:block;font-style:normal;color:var(--soft);font-size:13.5px;margin-top:3px}
/* FAQ — Q 표식 + 펼침 (레퍼런스 2) */
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;
gap:12px;font-size:14.5px;padding:8px 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:'Q';flex:none;width:22px;height:22px;border-radius:50%;
background:#f2efe9;color:var(--soft);font-size:11px;display:grid;place-items:center;
letter-spacing:0;margin-top:1px}
.acc summary::after{content:'';flex:none;margin-left:auto;width:8px;height:8px;
border-right:1px solid #9a9a9a;border-bottom:1px solid #9a9a9a;transform:rotate(45deg);
transition:transform .2s;margin-bottom:4px}
.acc details[open] summary::after{transform:rotate(-135deg);margin-bottom:0}
.acc summary em{font-style:normal;color:var(--soft);font-size:13px;margin-left:auto;padding-right:10px}
.acc p,.acc ol{margin:0;padding:0 0 18px 34px;color:var(--soft);font-size:14.5px;line-height:1.85}
.stops{padding-left:52px !important;list-style:decimal}
.more{width:100%;min-height:48px;margin-top:18px;border:1px solid var(--line);
background:none;font:inherit;font-size:13px;letter-spacing:.12em;color:var(--soft);cursor:pointer}
.close{padding:86px var(--pad) 96px;text-align:center;border-top:1px solid var(--line)}
.close h2{margin-bottom:26px}
.close .book{border:1px solid var(--ink);min-height:56px;
display:flex;align-items:center;justify-content:center;font-size:15px;letter-spacing:.1em}
.close .tel{display:block;margin-top:14px;color:var(--soft);font-size:14px;letter-spacing:.06em}
footer{padding:0 var(--pad) 40px;color:#a8a8a8;font-size:12px;text-align:center;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;animation:none!important}
.rise{opacity:1;transform:none}
}
"""
JS = """
(function(){
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// 히어로 — 사진 교차 + 문구 순환
var stage=document.querySelectorAll('.stage img'), say=document.getElementById('say'),
raw=document.getElementById('lines');
var lines=[]; try{ lines=JSON.parse(raw.textContent)||[]; }catch(e){}
if(stage.length>1 && !reduce){
var si=0;
setInterval(function(){
stage[si].classList.remove('on');
si=(si+1)%stage.length;
stage[si].classList.add('on');
}, 6000);
}
if(say && lines.length>1){
var li=0;
setInterval(function(){
say.classList.add('out');
setTimeout(function(){
li=(li+1)%lines.length; say.textContent=lines[li];
say.classList.remove('out');
}, 480);
}, 5000);
}
// 히어로 영상 — 사진을 먼저 깔고, 준비되면 그 위를 덮는다.
// ★ 무음이어야 자동재생이 허용된다(소리는 사용자 조작 없이는 절대 안 난다).
// ★ 실패하거나 느리면 사진이 그대로 남는다 — 검은 화면을 만들지 않는다.
var filmBox=document.getElementById('film'), fraw=document.getElementById('films'), films=[];
try{ films=JSON.parse(fraw.textContent)||[]; }catch(e){}
var save=(navigator.connection&&navigator.connection.saveData)===true;
if(filmBox && films.length && !reduce && !save){
var f=document.createElement('iframe');
f.src='https://www.youtube.com/embed/'+films[0].id
+'?autoplay=1&mute=1&loop=1&playlist='+films[0].id
+'&controls=0&playsinline=1&modestbranding=1&rel=0&disablekb=1&fs=0';
f.title=''; f.tabIndex=-1; f.setAttribute('aria-hidden','true');
f.setAttribute('allow','autoplay; encrypted-media');
f.addEventListener('load', function(){ setTimeout(function(){ filmBox.classList.add('on'); }, 600); });
filmBox.appendChild(f);
}
// 상단 바
var bar=document.getElementById('topbar'), hero=document.querySelector('.hero');
if(bar&&hero&&'IntersectionObserver' in window){
new IntersectionObserver(function(e){ bar.classList.toggle('on', !e[0].isIntersecting); },
{rootMargin:'-70px 0px 0px 0px'}).observe(hero);
}
// 스크롤에 맞춰 올라오기
if('IntersectionObserver' in window){
var io=new IntersectionObserver(function(es){
es.forEach(function(e){ if(e.isIntersecting){ e.target.classList.add('seen'); io.unobserve(e.target); } });
},{rootMargin:'0px 0px -12% 0px'});
document.querySelectorAll('.sec, .room, .duo').forEach(function(el){
el.classList.add('rise'); io.observe(el);
});
}
// 필터 칩 — 레퍼런스 1(인기 추천 숙소)
document.querySelectorAll('.chip').forEach(function(chip){
chip.addEventListener('click', function(){
var kind=chip.dataset.filter, box=document.getElementById('nearby');
if(!box) return;
chip.parentNode.querySelectorAll('.chip').forEach(function(c){ c.classList.toggle('on', c===chip); });
[].slice.call(box.children).forEach(function(li){
li.dataset.hidden = (kind==='all' || li.dataset.kind===kind) ? '' : '1';
li.style.display = li.dataset.hidden ? 'none' : '';
});
var btn=box.parentNode.querySelector('.more'); if(btn) btn.remove();
});
});
// 섹션 헤더의 '더보기 ›' — 그 섹션의 목록을 전부 편다
document.querySelectorAll('[data-all]').forEach(function(btn){
btn.addEventListener('click', function(){
var sec=btn.closest('section') || document;
sec.querySelectorAll('[data-more]').forEach(function(box){
[].slice.call(box.children).forEach(function(el){ if(!el.dataset.hidden) el.style.display=''; });
});
sec.querySelectorAll('.more').forEach(function(m){ m.remove(); });
btn.remove();
});
});
// 더 보기
document.querySelectorAll('[data-more]').forEach(function(box){
var keep=parseInt(box.dataset.more,10), kids=[].slice.call(box.children);
if(kids.length<=keep) return;
kids.forEach(function(el,i){ if(i>=keep) el.style.display='none'; });
var btn=document.createElement('button');
btn.className='more'; btn.type='button';
btn.textContent='더 보기 ('+(kids.length-keep)+')';
btn.addEventListener('click',function(){
kids.forEach(function(el){ el.style.display=''; }); btn.remove();
});
box.parentNode.insertBefore(btn, box.nextSibling);
});
// 모달 — 새 페이지로 보내지 않는다
var sheet=document.createElement('div');
sheet.className='sheet';
sheet.innerHTML='<div class="bg"></div><div class="box"><button class="x" type="button" aria-label="닫기">×</button><div class="in"></div></div>';
document.body.appendChild(sheet);
var box=sheet.querySelector('.in'), scrollY=0;
function open(id){
var tpl=document.getElementById(id); if(!tpl) return;
box.innerHTML=tpl.innerHTML;
scrollY=window.scrollY;
sheet.classList.add('on');
document.body.style.position='fixed';
document.body.style.top=(-scrollY)+'px';
document.body.style.width='100%';
}
function close(){
sheet.classList.remove('on');
document.body.style.position=''; document.body.style.top=''; document.body.style.width='';
window.scrollTo(0, scrollY);
}
document.addEventListener('click', function(e){
var card=e.target.closest('[data-modal]');
if(card){ open(card.dataset.modal); return; }
if(e.target.closest('.sheet .bg') || e.target.closest('.sheet .x')) close();
});
document.addEventListener('keydown', function(e){ if(e.key==='Escape') close(); });
})();
"""
def build() -> str:
payload = json.loads(PAYLOAD.read_text(encoding="utf-8"))
facts = fact_map(payload["facts"])
place = payload["place"]
return f"""<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>{esc(place["name"])}</title>
<meta name="robots" content="noindex">
<style>{CSS}</style>
</head>
<body>
<div class="app">
{hero(payload)}
{intro_block(payload)}
{gallery_block(payload)}
<div class="rule"></div>
<section class="sec">
<p class="eyebrow">Film</p>
<h2>머뭄의 하루</h2>
{film_block(payload)}
</section>
<section class="sec">
<p class="eyebrow">Rooms</p>
<h2>두 채가 각각 한 팀만 씁니다</h2>
</section>
{units_block(payload)}
<div class="rule"></div>
<section class="sec">
<p class="eyebrow">Information</p>
<h2>머물기 전에</h2>
{amenities(facts)}
{rules(facts)}
</section>
<div class="rule"></div>
<section class="sec">
<p class="eyebrow">Around</p>
<h2>걸어서 닿는 곳</h2>
{spots_row(payload)}
{places_block(payload)}
{festival_block(payload)}
</section>
<div class="rule"></div>
<section class="sec">
<p class="eyebrow">Gunsan</p>
<h2>이 동네를 걷는 법</h2>
{itinerary_block(payload)}
{story_block(payload)}
</section>
<div class="rule"></div>
<section class="sec sec--tight">
<p class="eyebrow">Q &amp; A</p>
{faq_block(payload)}
</section>
{close_block(payload)}
</div>
<script>{JS}</script>
</body>
</html>"""
if __name__ == "__main__":
OUT.parent.mkdir(parents=True, exist_ok=True)
doc = build()
OUT.write_text(doc, encoding="utf-8")
print(f"stay2.html {len(doc):,}자")

683
solution/site/scripts/mockup/build_stay3.py Normal file
View File

@ -0,0 +1,683 @@
import html
import json
import shutil
from pathlib import Path
HERE = Path(__file__).parent
TPL = HERE / "tpl-story"
OUT = HERE / "build3"
PAYLOAD = json.loads((HERE / "stay3-payload.json").read_text())
ORIGIN = "https://web4ai.o2osolution.ai"
BASE = "/s/stay3"
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"]
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"]
PRICE_FROM = "198,000"
def e(text):
return html.escape(str(text or ""), quote=True)
def unit_fact(unit, key):
for f in unit["facts"]:
if f["key"] == key:
return f
return None
def unit_value(unit, key, default=""):
f = unit_fact(unit, key)
if not f:
return default
unit_text = f.get("unit") or ""
joiner = "" if unit_text in ("명", "원") else " "
return f["value"] + (joiner + unit_text if unit_text else "")
def unit_title(unit):
return unit["name"].split("(")[0].strip()
def unit_subtitle(unit):
raw = unit["name"]
return raw[raw.find("(") + 1:raw.rfind(")")].strip() if "(" in raw else ""
def pics(category=None, limit=None, skip=0):
rows = [m for m in media if category is None or m.get("category") == category]
rows = rows[skip:]
return rows[:limit] if limit else rows
def naver(query):
from urllib.parse import quote
return f"https://search.naver.com/search.naver?query={quote(query)}"
HEAD = """<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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}" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&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>
<a href="{base}/rooms">객실</a>
<a href="{base}/gunsan">군산</a>
<a href="tel:{phone}" aria-label="전화">전화</a>
</nav>
</header>
<div id="wrapper" class="divided">
"""
FOOT = """</div>
<div id="bookbar">
<span class="price"><b>{price_from}원</b><small>주중 1박 기준</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>
</body>
</html>
"""
FOOTER_SECTION = """
<footer class="wrapper style1 align-center" id="footer">
<div class="inner">
<h2>{name}</h2>
<p>{road}<br />{phone}</p>
<ul class="actions stacked">
<li><a href="{book}" class="button primary fit" target="_blank" rel="noopener noreferrer">네이버 예약</a></li>
<li><a href="tel:{phone}" class="button fit">전화 걸기</a></li>
{insta}
</ul>
<p class="tiny">상호 {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(path, title, desc, og, body):
canonical = f"{ORIGIN}{BASE}{path}"
head = HEAD.format(title=e(title), desc=e(desc), canonical=canonical, origin=ORIGIN,
og=og, base=BASE, name=e(NAME), phone=PHONE)
foot = FOOT.format(base=BASE, book=e(BOOK_URL), price_from=PRICE_FROM)
insta = (f'<li><a href="{e(INSTA_URL)}" class="button fit" target="_blank" '
f'rel="noopener noreferrer">인스타그램</a></li>') if INSTA_URL else ""
footer = FOOTER_SECTION.format(name=e(NAME), road=e(place["roadAddress"]), phone=PHONE,
book=e(BOOK_URL), insta=insta)
target = OUT / path.lstrip("/") / "index.html" if path else OUT / "index.html"
target.parent.mkdir(parents=True, exist_ok=True)
target.write_text(head + body + footer + foot)
return target
def banner(image, kicker, heading, lead, actions, extra_class="fullscreen cover"):
action_html = f'<ul class="actions stacked">{actions}</ul>' if actions else ""
return f"""
<section class="banner style1 orient-left content-align-left image-position-right {extra_class} onload-image-fade-in onload-content-fade-right">
<div class="content">
<p class="kicker">{kicker}</p>
<h1 class="serif">{heading}</h1>
<p class="major">{lead}</p>
{action_html}
</div>
<div class="image"><img src="{image['url']}" alt="{e(image['alt'])}" /></div>
</section>
"""
def spotlight(image, heading, paragraphs, orient="right", invert=False, actions=""):
body = "".join(f"<p>{p}</p>" for p in paragraphs)
klass = "spotlight style1 orient-%s content-align-left image-position-center onscroll-image-fade-in" % orient
if invert:
klass += " invert"
return f"""
<section class="{klass}">
<div class="content">
<h2 class="serif">{heading}</h2>
{body}
{f'<ul class="actions stacked">{actions}</ul>' if actions else ''}
</div>
<div class="image"><img src="{image['url']}" alt="{e(image['alt'])}" /></div>
</section>
"""
def gallery(rows, style="style2 medium"):
cells = "".join(
f'<article><a href="{m["url"]}" class="image"><img src="{m["url"]}" '
f'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 {style} lightbox onscroll-fade-in">{cells}</div>'
def spec_index(pairs):
rows = "".join(f"<section><header><h3>{k}</h3></header><div class='content'><p>{v}</p></div></section>"
for k, v in pairs)
return f'<div class="index align-left">{rows}</div>'
def build_home():
hero = media[0]
actions = '<li><a href="#stay" class="button large smooth-scroll-middle ghost">머뭄 둘러보기</a></li>'
body = banner(hero, e(place["addressLocality"]), e(NAME),
e(narrative["tagline"]), actions)
body += f'<div id="stay"></div>'
body += spotlight(pics("외관", 1)[0] if pics("외관", 1) else media[3],
"백 년 된 집 한 채",
[e(ABOUT[0])], orient="right")
body += spotlight(pics("카페", 1)[0] if pics("카페", 1) else media[7],
"마당과 창고형 카페",
[e(ABOUT[1]), e(ABOUT[2])], orient="left")
unit_shots = [(pics("거실", 1, skip=1) or pics(limit=1))[0],
(pics("침실", 1) or pics(limit=1, skip=4))[0]]
cards = ""
for i, u in enumerate(units):
shot = unit_shots[i]
chip_values = [f"기준 {unit_value(u, 'standard_capacity')}",
f"최대 {unit_value(u, 'max_capacity')}",
unit_value(u, "bed_type"), unit_value(u, "room_size")]
chips = "".join(f"<li>{e(c)}</li>" for c in chip_values if c.strip())
cards += f"""
<article class="unit">
<a class="image" href="{BASE}/rooms#{'a' if i == 0 else 'b'}">
<img src="{shot['url']}" alt="{e(shot['alt'])}" loading="lazy" />
</a>
<div class="body">
<h3>{e(unit_title(u))}</h3>
<p class="sub">{e(unit_subtitle(u))}</p>
<ul class="chips">{chips}</ul>
<p class="price">주중 1박 <b>{e(f"{int(unit_value(u, 'weekday_price').replace('원', '').strip()):,}")}원</b></p>
<a class="button fit" href="{BASE}/rooms#{'a' if i == 0 else 'b'}">이 동 자세히 보기</a>
</div>
</article>"""
body += f"""
<section class="wrapper style1 align-center" id="rooms">
<div class="inner">
<h2 class="serif">두 동, 각각 한 팀만</h2>
<p>A동과 B동은 서로 보이지 않습니다. 한 동을 한 팀이 통째로 씁니다.</p>
<div class="units">{cards}</div>
<ul class="actions">
<li><a href="{BASE}/rooms" class="button primary">객실과 요금 전체 보기</a></li>
</ul>
</div>
</section>"""
fest = local["festivals"][0]
spots = local["attractions"][:3]
tiles = "".join(
f'<a class="tile" href="{BASE}/gunsan">'
f'<img src="{s["imageUrl"]}" alt="{e(s["name"])}" loading="lazy" />'
f'<span><b>{e(s["name"])}</b><small>도보 {e(s["distanceText"])}</small></span></a>'
for s in spots)
tiles += (f'<a class="tile" href="{BASE}/gunsan">'
f'<img src="{fest["imageUrl"]}" alt="{e(fest["name"])}" loading="lazy" />'
f'<span><b>{e(fest["name"])}</b><small>{e(fest["month"])}</small></span></a>')
body += f"""
<section class="wrapper style1 invert align-center" id="gunsan">
<div class="inner">
<h2 class="serif">군산에서 보낼 시간</h2>
<p>담을 나서면 근대 도심입니다. 걸어서 닿는 곳과 계절마다 열리는 축제,
하루를 통째로 짜 둔 일정 {len(sections['itinerary']['items'])}가지를 따로 모아 두었습니다.</p>
<div class="tiles">{tiles}</div>
<ul class="actions">
<li><a href="{BASE}/gunsan" class="button primary">군산 둘러보기</a></li>
</ul>
</div>
</section>"""
lat, lng = place["latitude"], place["longitude"]
body += f"""
<section class="wrapper style1 align-center" id="map">
<div class="inner">
<h2 class="serif">오시는 길</h2>
<p class="address">{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}&amp;layer=mapnik&amp;marker={lat}%2C{lng}"></iframe>
<ul class="actions stacked">
<li><a class="button primary fit" href="https://map.naver.com/p/search/{e(place['roadAddress'])}"
target="_blank" rel="noopener noreferrer">길찾기</a></li>
</ul>
<p class="tiny">군산역에서 차로 약 20분 · 히로쓰 가옥 후문에서 걸어서 13m</p>
</div>
</section>"""
amen = [("체크인 / 체크아웃", f"{facts['check_in_time']['value']} / {facts['check_out_time']['value']}"),
("인원", "기준 2명 · 최대 4명 (추가 1인 20,000원)"),
("주차", "가능"), ("와이파이", "있음"), ("취사", "가능"),
("반려동물", "불가"), ("흡연", "불가"), ("바비큐", "불가"),
("픽업 서비스", "없음"), ("취소·환불", "입실 당일 취소·노쇼는 환불되지 않습니다")]
faq_rows = "".join(
f"<details><summary>{e(f['question'])}</summary><p>{e(f['answer'])}</p></details>"
for f in faqs[:5])
body += f"""
<section class="wrapper style1 align-center" id="info">
<div class="inner">
<h2 class="serif">기본 정보</h2>
{spec_index(amen)}
<h3 class="faqhead">자주 묻는 질문</h3>
<div class="faq">{faq_rows}</div>
<ul class="actions">
<li><a href="{BASE}/rooms#info" class="button">이용 안내 · 질문 전체 보기</a></li>
</ul>
</div>
</section>"""
return page("", f"{NAME} · 전북 군산시 독채 펜션",
narrative["summary"], media[0]["url"], body)
def build_rooms():
body = banner(pics("침실", 1)[0] if pics("침실", 1) else media[5],
"객실", "두 동, 각각 한 팀만",
"A동은 일본집의 결을 그대로 두었고, B동은 현대식으로 꾸몄습니다.",
f'<li><a href="{e(BOOK_URL)}" class="button primary large" target="_blank" rel="noopener noreferrer">예약하기</a></li>',
extra_class="cover compact")
for i, u in enumerate(units):
anchor = "a" if i == 0 else "b"
shot = (pics("거실", 1, skip=1) if i == 0 else pics("침실", 1))[0]
spec = [("기준 인원", unit_value(u, "standard_capacity")),
("최대 인원", unit_value(u, "max_capacity")),
("침대", unit_value(u, "bed_type")),
("면적", unit_value(u, "room_size")),
("주중 요금", f"{int(unit_value(u, 'weekday_price').replace('원', '').strip()):,}원"),
("요금 범위", unit_value(u, "price_range"))]
rows = "".join(f"<tr><th>{k}</th><td>{e(v)}</td></tr>" for k, v in spec if str(v).strip())
fac = unit_value(u, "room_facilities").split(" · ")
chips = "".join(f"<li>{e(x)}</li>" for x in fac)
body += f"""
<section class="wrapper style1 {'invert ' if i else ''}align-center" id="{anchor}">
<div class="inner">
<h2 class="serif">{e(unit_title(u))}</h2>
<p>{e(unit_subtitle(u))}</p>
<p class="lead">{e(unit_value(u, 'room_intro'))}</p>
<img class="hero-shot" src="{shot['url']}" alt="{e(shot['alt'])}" loading="lazy" />
<div class="table-wrapper"><table class="alt"><tbody>{rows}</tbody></table></div>
<ul class="chips wide">{chips}</ul>
</div>
</section>"""
body += f"""
<section class="wrapper style1 align-center" id="photos">
<div class="inner">
<h2 class="serif">사진 {len(media)}장</h2>
{gallery(media)}
</div>
</section>"""
amen = [("체크인 / 체크아웃", f"{facts['check_in_time']['value']} / {facts['check_out_time']['value']}"),
("인원 추가", "1인 20,000원"), ("주차", "가능"), ("와이파이", "있음"),
("취사", "가능"), ("반려동물", "불가"), ("흡연", "불가"), ("바비큐", "불가")]
faq_rows = "".join(
f"<details><summary>{e(f['question'])}</summary><p>{e(f['answer'])}</p></details>"
for f in faqs[:14])
body += f"""
<section class="wrapper style1 align-center" id="info">
<div class="inner">
<h2 class="serif">이용 안내</h2>
{spec_index(amen)}
<p class="lead">{e(facts['cancel_policy']['value'])}</p>
<h3 class="faqhead">자주 묻는 질문</h3>
<div class="faq">{faq_rows}</div>
</div>
</section>"""
return page("rooms", f"객실과 요금 · {NAME}",
"A동·B동 두 독채의 인원·침대·면적·요금과 사진 37장.",
media[5]["url"], body)
def build_gunsan():
fest = local["festivals"]
spots = local["attractions"]
rest = local["restaurants"][:8]
itin = sections["itinerary"]["items"]
reading = sections["reading"]["items"]
songs = sections["songs"]["items"]
body = banner(spots[0]["imageUrl"] and {"url": spots[0]["imageUrl"], "alt": spots[0]["name"]},
"군산", "담 너머의 도시",
"걸어서 닿는 근대 도심과 계절마다 열리는 축제, 하루를 통째로 짜 둔 일정.",
f'<li><a href="{BASE}" class="button large">머뭄으로 돌아가기</a></li>',
extra_class="cover compact")
def spot_cards(rows, meta_key):
return "".join(
f'<a class="tile" href="{e(naver(s["searchQuery"]))}" target="_blank" rel="noopener noreferrer nofollow">'
f'<img src="{s["imageUrl"]}" alt="{e(s["name"])}" loading="lazy" />'
f'<span><b>{e(s["name"])}</b><small>{e(s.get(meta_key) or "")}</small>'
f'<em>{e((s.get("description") or "")[:70])}</em></span></a>'
for s in rows if s.get("imageUrl"))
body += f"""
<section class="wrapper style1 align-center" id="around">
<div class="inner">
<h2 class="serif">걸어서 닿는 곳</h2>
<p>도보 시간은 직선거리를 분속 80m로 환산한 값입니다.</p>
<div class="tiles wide">{spot_cards(spots, 'distanceText')}</div>
</div>
</section>
<section class="wrapper style1 invert align-center" id="eat">
<div class="inner">
<h2 class="serif">근처에서 먹을 곳</h2>
<div class="tiles wide">{spot_cards(rest, 'distanceText')}</div>
</div>
</section>
<section class="wrapper style1 align-center" id="festival">
<div class="inner">
<h2 class="serif">계절마다 열리는 것</h2>
<p>한국관광공사 TourAPI 기준. 일정은 주최 측 사정으로 바뀔 수 있습니다.</p>
<div class="tiles wide">{spot_cards(fest, 'period')}</div>
</div>
</section>"""
plans = "".join(
f"<details><summary><b>{e(i['name'])}</b><span>{e(i['duration'])} · {e(i['audience'])}</span></summary>"
f"<p class='why'>{e(i['why'])}</p>"
+ "".join(
f"<div class='day'><h4>{e(d['label'])} <small>{e(d['startTime'])} 출발</small></h4><ol>"
+ "".join(f"<li><b>{e(s['name'])}</b>{('<span>' + e(s['note']) + '</span>') if s.get('note') else ''}</li>"
for s in d["stops"])
+ "</ol></div>" for d in i["days"])
+ "</details>" for i in itin)
body += f"""
<section class="wrapper style1 invert align-center" id="itinerary">
<div class="inner">
<h2 class="serif">하루를 통째로</h2>
<p>머뭄에서 나서고 머뭄으로 돌아옵니다 — {len(itin)}가지</p>
<div class="faq plans">{plans}</div>
</div>
</section>"""
reads = "".join(
f"<article class='read'><h3>{e(r['title'])}</h3><p>{e(r['body'])}</p>"
f"<a href=\"{e(r['source']['url'])}\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">{e(r['source']['name'])}</a></article>"
for r in reading)
body += f"""
<section class="wrapper style1 align-center" id="reading">
<div class="inner">
<h2 class="serif">이 도시를 쓴 사람과 그 자리</h2>
<div class="reads">{reads}</div>
</div>
</section>"""
def song_row(s):
return (f"<li><a href=\"{e(s['listenUrl'])}\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">"
f"<b>{e(s['title'])}</b><span>{e(s['artist'])}</span><em>{e(s['story'])}</em></a></li>")
head_rows = "".join(song_row(s) for s in songs[:8])
rest_rows = "".join(song_row(s) for s in songs[8:])
body += f"""
<section class="wrapper style1 invert align-center" id="songs">
<div class="inner">
<h2 class="serif">군산을 노래한 {len(songs)}곡</h2>
<ol class="songs">{head_rows}</ol>
<details class="more"><summary>나머지 {len(songs) - 8}곡 보기</summary>
<ol class="songs">{rest_rows}</ol>
</details>
</div>
</section>"""
return page("gunsan", f"군산 둘러보기 · {NAME}",
"걸어서 닿는 근대 도심, 계절 축제, 추천 일정 21가지, 군산을 쓴 글과 노래.",
spots[0]["imageUrl"], body)
OVERRIDE = """
:root { --ink: #16181a; --accent: #1f4a3f; --muted: #6a7178; }
body, input, select, textarea, button {
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
"Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
font-size: 16px;
line-height: 1.7;
word-break: keep-all;
color: var(--ink);
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.serif { font-family: "Gowun Batang", serif; font-weight: 700; letter-spacing: -0.01em; }
p { font-size: 16px; }
.kicker { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; margin-bottom: .4rem; }
#footer .inner { padding-top: 3rem; padding-bottom: 3rem; }
#footer h2 { font-size: 20px; }
.tiny { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.lead { max-width: 40rem; margin-left: auto; margin-right: auto; }
input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary,
button.primary, .button.primary { background-color: var(--accent); }
input[type="submit"].primary:hover, button.primary:hover, .button.primary:hover { background-color: #2a6455; }
a { color: var(--accent); }
#topbar {
position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 30;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0,0,0,.07);
}
#topbar .brand { font-weight: 700; font-size: 15px; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
#topbar nav { display: flex; gap: 4px; }
#topbar nav a {
display: flex; align-items: center; min-height: 44px; padding: 0 10px;
font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink);
}
#wrapper { padding-top: 48px; }
#bookbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; align-items: center; gap: 12px;
padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
border-top: 1px solid rgba(0,0,0,.09);
}
#bookbar .price { display: flex; flex-direction: column; line-height: 1.25; }
#bookbar .price b { font-size: 18px; font-weight: 700; }
#bookbar .price small { font-size: 12px; color: var(--muted); }
#bookbar .button.primary { margin-left: auto; min-width: 9.5rem; min-height: 48px; line-height: 48px; }
body { padding-bottom: 76px; }
.banner.style1 .content > .kicker, .banner.style1 .content > .major { color: inherit; }
.banner.style1 h1 { font-size: 2.6rem; line-height: 1.2; }
.banner.style1 .content { padding: 3rem 1.5rem; }
.units { display: grid; gap: 20px; margin: 2rem 0 1rem; text-align: left; }
.unit { border: 1px solid rgba(0,0,0,.1); border-radius: 12px; overflow: hidden; background: #fff; }
.unit .image { display: block; aspect-ratio: 4/3; }
.unit .image img { width: 100%; height: 100%; object-fit: cover; }
.unit .body { padding: 18px; }
.unit h3 { font-size: 20px; margin: 0 0 2px; }
.unit .sub { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.unit .price { margin: 12px 0; font-size: 15px; }
.unit .price b { font-size: 19px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li {
padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.05);
font-size: 13px; font-weight: 500; line-height: 1.4;
}
.chips.wide { justify-content: center; margin-top: 1rem; }
.invert .chips li { background: rgba(255,255,255,.14); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 1.75rem 0 1rem; text-align: left; }
.tiles.wide { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tile { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; background: rgba(0,0,0,.04); color: inherit; }
.invert .tile { background: rgba(255,255,255,.08); }
.tile img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tile span { display: block; padding: 10px 12px 13px; }
.tile b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.tile small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.invert .tile small { color: rgba(255,255,255,.7); }
.tile em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.55; margin-top: 5px; opacity: .8; }
.mapframe { width: 100%; height: 300px; border: 0; border-radius: 12px; margin: 1.5rem 0 1rem; }
.address { font-size: 18px; font-weight: 600; }
.index.align-left { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; max-width: 44rem; margin-inline: auto; }
.index.align-left section { padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.invert .index.align-left section { border-bottom-color: rgba(255,255,255,.16); }
.index.align-left header { margin: 0; padding: 0; }
.index.align-left h3 { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0; }
.invert .index.align-left h3 { color: rgba(255,255,255,.7); }
.index.align-left .content { padding: 0; }
.index.align-left .content p { font-size: 15px; margin: 0; line-height: 1.5; }
.faqhead { margin-top: 2.5rem; font-size: 18px; }
.faq { text-align: left; max-width: 44rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid rgba(0,0,0,.1); }
.invert .faq details { border-bottom-color: rgba(255,255,255,.18); }
.faq summary {
cursor: pointer; list-style: none; padding: 15px 28px 15px 0; position: relative;
font-size: 15.5px; font-weight: 600; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 20px; font-weight: 400; opacity: .55; }
.faq details[open] summary::after { content: "\\2212"; }
.faq details p { padding: 0 0 15px; margin: 0; font-size: 15px; }
.faq .plans summary span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.invert .faq .plans summary span { color: rgba(255,255,255,.7); }
.plans .why { font-size: 15px; padding-bottom: 8px; }
.plans .day { padding: 4px 0 14px; }
.plans .day h4 { font-size: 14px; margin: 0 0 6px; }
.plans .day h4 small { font-weight: 400; color: var(--muted); }
.plans .day ol { margin: 0; padding-left: 1.2rem; }
.plans .day li { padding: 4px 0; font-size: 14.5px; }
.plans .day li b { font-weight: 600; }
.plans .day li span { display: block; font-size: 13.5px; opacity: .78; line-height: 1.6; }
.reads { display: grid; gap: 18px; text-align: left; max-width: 44rem; margin: 1.5rem auto 0; }
.read { border-left: 2px solid var(--accent); padding-left: 16px; }
.read h3 { font-size: 17px; margin: 0 0 6px; }
.read p { font-size: 15px; margin: 0 0 8px; }
.read a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; font-weight: 600; }
.songs { list-style: none; margin: 1.5rem 0 0; padding: 0; text-align: left; max-width: 44rem; margin-inline: auto; }
.songs li { border-top: 1px solid rgba(255,255,255,.16); }
.songs li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.songs a { display: block; padding: 14px 0; text-decoration: none; color: inherit; min-height: 44px; }
.songs b { font-size: 16px; font-weight: 600; }
.songs span { font-size: 13.5px; opacity: .72; margin-left: 8px; }
.songs em { display: block; font-style: normal; font-size: 13.5px; opacity: .78; margin-top: 3px; line-height: 1.6; }
.hero-shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; margin: 1.25rem 0; }
.table-wrapper table.alt th { width: 8rem; font-size: 14px; color: var(--muted); }
.table-wrapper table.alt td { font-size: 15px; }
.banner.style1.cover { position: relative; display: block; padding: 0; }
.banner.style1.cover .image {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; max-width: none;
}
.banner.style1.cover .image img { width: 100%; height: 100%; object-fit: cover; }
.banner.style1.cover .content {
position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
min-height: 88svh; padding: 2rem 1.5rem 3rem; text-align: left; max-width: none;
background: linear-gradient(to top, rgba(12,14,13,.86) 0%, rgba(12,14,13,.62) 32%, rgba(12,14,13,.22) 58%, rgba(12,14,13,0) 82%);
}
.banner.style1.cover.compact .content { min-height: 56svh; }
.banner.style1.cover .content,
.banner.style1.cover .content h1,
.banner.style1.cover .content p { color: #fff; }
.banner.style1.cover .content .kicker { opacity: .92; }
.banner.style1.cover .content .major { font-size: 17px; max-width: 26rem; }
.banner.style1.cover .actions { margin-top: 1.25rem; }
.button, .button.large, input[type="submit"], button {
letter-spacing: 0; font-weight: 600; min-height: 48px; line-height: 48px;
}
.button.large { min-height: 52px; line-height: 52px; font-size: 16px; }
.button.ghost { background: rgba(255,255,255,.14); color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.button.ghost:hover { background: rgba(255,255,255,.24); }
.tile em {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tiles.wide { align-items: stretch; }
.tiles.wide .tile { display: flex; flex-direction: column; }
#topbar .brand { display: flex; align-items: center; min-height: 44px; }
.more { margin-top: 1.25rem; }
.more > summary {
cursor: pointer; list-style: none; display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 1.5rem; border-radius: 999px; font-size: 15px; font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.more > summary::-webkit-details-marker { display: none; }
@media (min-width: 737px) {
.units { grid-template-columns: repeat(2, 1fr); }
.tiles { grid-template-columns: repeat(4, 1fr); }
.banner.style1 h1 { font-size: 3.4rem; }
.banner.style1.cover .content {
min-height: 82svh; padding: 3rem 4rem 4rem; width: 100%; max-width: none; flex-basis: auto;
}
.banner.style1.cover .content > * { max-width: 34rem; }
.banner.style1.cover.compact .content { min-height: 46svh; }
#topbar { height: 56px; padding: 0 28px; }
#wrapper { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
"""
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")
made = [build_home(), build_rooms(), build_gunsan()]
for path in made:
print(path.relative_to(OUT), f"{path.stat().st_size:,} bytes")
if __name__ == "__main__":
main()

48
solution/site/scripts/mockup/inject.css
View File

@ -36,14 +36,14 @@
#w4d-now { #w4d-now {
max-width: 150px; max-width: 150px;
overflow: hidden; overflow: hidden;
font-size: 11.5px; font-size: 14px;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
color: var(--tpl-accent, #bf2f1b); color: var(--tpl-accent, #bf2f1b);
padding-right: 2px; padding-right: 2px;
} }
#w4d-mini[data-playing='0'] #w4d-now { opacity: 0.55; font-weight: 400; } #w4d-mini[data-playing='0'] #w4d-now { opacity: 0.85; font-weight: 400; }
@media (max-width: 860px) { #w4d-now { display: none; } } @media (max-width: 860px) { #w4d-now { display: none; } }
/* 카세트 — 단추가 아니라 표지다. 이 자리가 무엇인지 한눈에 말해 준다. */ /* 카세트 — 단추가 아니라 표지다. 이 자리가 무엇인지 한눈에 말해 준다. */
@ -100,8 +100,8 @@
padding: 11px 8px 11px 14px; padding: 11px 8px 11px 14px;
border-bottom: var(--tpl-border-width, 2px) solid var(--tpl-primary, #1b1a15); border-bottom: var(--tpl-border-width, 2px) solid var(--tpl-primary, #1b1a15);
} }
.w4d-head-t { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; } .w4d-head-t { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; }
.w4d-head-n { flex: 1 1 auto; font-size: 11px; opacity: 0.5; } .w4d-head-n { flex: 1 1 auto; font-size: 14px; opacity: 0.5; }
#w4d-panel .w4d-head button { #w4d-panel .w4d-head button {
display: inline-flex; display: inline-flex;
width: 28px; width: 28px;
@ -191,7 +191,7 @@
.w4d-t { .w4d-t {
display: block; display: block;
overflow: hidden; overflow: hidden;
font-size: 13.5px; font-size: 15px;
font-weight: 700; font-weight: 700;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -200,14 +200,14 @@
display: block; display: block;
margin-top: 2px; margin-top: 2px;
overflow: hidden; overflow: hidden;
font-size: 11px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
opacity: 0.55; opacity: 0.85;
} }
.w4d-time { .w4d-time {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 11px; font-size: 14px;
opacity: 0.6; opacity: 0.6;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
@ -217,7 +217,7 @@
padding: 10px 12px 14px; padding: 10px 12px 14px;
border-top: 1px dashed var(--tpl-border, #bcb49e); border-top: 1px dashed var(--tpl-border, #bcb49e);
white-space: pre-line; white-space: pre-line;
font-size: 12px; font-size: 15px;
line-height: 1.9; line-height: 1.9;
} }
#w4d-lyrics-box[hidden] { display: none; } #w4d-lyrics-box[hidden] { display: none; }
@ -229,7 +229,7 @@
#root div.border-line.flex.flex-col.gap-3.border-t.pt-6 { border-top-width: 0; } #root div.border-line.flex.flex-col.gap-3.border-t.pt-6 { border-top-width: 0; }
/* 사진 저작자 표시 — 출처 줄과 같은 크기, 한 단 더 옅게. */ /* 사진 저작자 표시 — 출처 줄과 같은 크기, 한 단 더 옅게. */
.w4d-credit { margin-top: 2px; font-size: 10px; opacity: 0.55; } .w4d-credit { margin-top: 2px; font-size: 14px; opacity: 0.85; }
/* ★ 모바일 헤더에서 전화 단추를 접는다 (2026-09-11 사장님: "저 전화 아이콘은 빼도 되잖아"). /* ★ 모바일 헤더에서 전화 단추를 접는다 (2026-09-11 사장님: "저 전화 아이콘은 빼도 되잖아").
좁은 화면 헤더에 상호 + 플레이어 3개 + 전화 + 메뉴가 다 서서 난잡했다. 좁은 화면 헤더에 상호 + 플레이어 3개 + 전화 + 메뉴가 다 서서 난잡했다.
@ -242,7 +242,7 @@
/* 덧붙인 링크 — 본문 글자보다 눈에 띄되 강조색을 남발하지 않는다. */ /* 덧붙인 링크 — 본문 글자보다 눈에 띄되 강조색을 남발하지 않는다. */
.w4d-link { .w4d-link {
color: var(--tpl-accent, #bf2f1b); color: color-mix(in oklab, var(--tpl-accent, #bf2f1b) 62%, var(--tpl-text, #1b1a15));
text-decoration: underline; text-decoration: underline;
text-underline-offset: 3px; text-underline-offset: 3px;
white-space: nowrap; white-space: nowrap;
@ -298,7 +298,7 @@
padding: 12px 16px 16px; padding: 12px 16px 16px;
border-top: 1px dashed var(--tpl-border, #bcb49e); border-top: 1px dashed var(--tpl-border, #bcb49e);
white-space: pre-line; white-space: pre-line;
font-size: 13px; font-size: 15px;
line-height: 1.9; line-height: 1.9;
max-height: 40vh; max-height: 40vh;
overflow-y: auto; overflow-y: auto;
@ -380,7 +380,7 @@
/* 곡명 — 렌더러가 원래 그리는 그 글자다. 여기서는 줄어든 판 폭에 맞춰 여백만 좁힌다. */ /* 곡명 — 렌더러가 원래 그리는 그 글자다. 여기서는 줄어든 판 폭에 맞춰 여백만 좁힌다. */
#songs button:has(> .w4-disc-mini) > .w4-disc-mini + span { #songs button:has(> .w4-disc-mini) > .w4-disc-mini + span {
margin-top: 5px; margin-top: 5px;
font-size: 10px; font-size: 14px;
} }
/* 고른 판만 살짝 들어 올린다 — "뽑아 든 판" 표시. 선택 자체(테두리)는 React 가 인라인 /* 고른 판만 살짝 들어 올린다 — "뽑아 든 판" 표시. 선택 자체(테두리)는 React 가 인라인
스타일로 이미 그린다(`boxShadow`); 여기선 그 위에 얹는 동작만 더한다. */ 스타일로 이미 그린다(`boxShadow`); 여기선 그 위에 얹는 동작만 더한다. */
@ -467,18 +467,18 @@
border: 1px solid var(--tpl-border, #bcb49e); border: 1px solid var(--tpl-border, #bcb49e);
resize: none; /* 2026-09-14 대표: "textarea 크기 못바꾸게" — 늘리면 옆 캔버스와 높이가 어긋난다 */ resize: none; /* 2026-09-14 대표: "textarea 크기 못바꾸게" — 늘리면 옆 캔버스와 높이가 어긋난다 */
} }
.w4d-pm-count { margin: 4px 0 14px; font-size: 11px; text-align: right; opacity: 0.55; } .w4d-pm-count { margin: 4px 0 14px; font-size: 14px; text-align: right; opacity: 0.85; }
.w4d-pm-actions { display: flex; flex-wrap: wrap; gap: 10px; } .w4d-pm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.w4d-pm-actions button { .w4d-pm-actions button {
padding: 9px 16px; padding: 9px 16px;
font-size: 13px; font-size: 15px;
font-weight: 700; font-weight: 700;
border: 1px solid var(--tpl-primary, #1b1a15); border: 1px solid var(--tpl-primary, #1b1a15);
cursor: pointer; cursor: pointer;
} }
.w4d-pm-share { background: var(--tpl-primary, #1b1a15); color: var(--tpl-bg, #fff); } .w4d-pm-share { background: var(--tpl-primary, #1b1a15); color: var(--tpl-bg, #fff); }
.w4d-pm-save { background: transparent; color: var(--tpl-text, #1b1a15); } .w4d-pm-save { background: transparent; color: var(--tpl-text, #1b1a15); }
.w4d-pm-hint { margin: 10px 0 0; font-size: 11.5px; opacity: 0.6; } .w4d-pm-hint { margin: 10px 0 0; font-size: 14px; opacity: 0.6; }
@media (max-width: 480px) { @media (max-width: 480px) {
.w4d-pm-canvas { width: 100%; } .w4d-pm-canvas { width: 100%; }
} }
@ -521,10 +521,10 @@
} }
.w4d-read-page { .w4d-read-page {
margin: 0 0 8px; margin: 0 0 8px;
font-size: 11px; font-size: 14px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.18em; letter-spacing: 0.18em;
color: var(--tpl-accent, #bf2f1b); color: color-mix(in oklab, var(--tpl-accent, #bf2f1b) 62%, var(--tpl-text, #1b1a15));
} }
.w4d-read-year { font-weight: 400; letter-spacing: 0.06em; opacity: 0.7; } .w4d-read-year { font-weight: 400; letter-spacing: 0.06em; opacity: 0.7; }
.w4d-read-card h3 { .w4d-read-card h3 {
@ -548,7 +548,7 @@
margin-top: 14px; margin-top: 14px;
padding-top: 10px; padding-top: 10px;
border-top: 1px dashed var(--tpl-border, #bcb49e); border-top: 1px dashed var(--tpl-border, #bcb49e);
font-size: 11.5px; font-size: 14px;
font-style: italic; font-style: italic;
opacity: 0.6; opacity: 0.6;
} }
@ -592,7 +592,7 @@
border-radius: 8px; border-radius: 8px;
background: transparent; background: transparent;
color: inherit; color: inherit;
font-size: 12.5px; font-size: 15px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@ -606,7 +606,7 @@
color: var(--tpl-bg, #fff); color: var(--tpl-bg, #fff);
font-weight: 700; font-weight: 700;
} }
.w4d-gal-total { margin-left: 8px; font-size: 11.5px; opacity: 0.55; } .w4d-gal-total { margin-left: 8px; font-size: 14px; opacity: 0.85; }
} }
/* ── 768~1023px 에서 하단 탭바가 푸터 마지막 줄을 덮는 것 막기 ───────────────── /* ── 768~1023px 에서 하단 탭바가 푸터 마지막 줄을 덮는 것 막기 ─────────────────
@ -622,3 +622,9 @@
@media (min-width: 768px) and (max-width: 1023.98px) { @media (min-width: 768px) and (max-width: 1023.98px) {
footer { padding-bottom: 7rem !important; } footer { padding-bottom: 7rem !important; }
} }
#w4d-mini[data-armed="1"] #w4d-play { animation: w4d-breathe 2.4s ease-in-out infinite; }
@keyframes w4d-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
@media (prefers-reduced-motion: reduce) {
#w4d-mini[data-armed="1"] #w4d-play { animation: none }
}

60
solution/site/scripts/mockup/inject.js
View File

@ -289,6 +289,7 @@
한 번 시작하면 A면 순서대로 끝까지 돌고 처음으로 돌아온다. */ 한 번 시작하면 A면 순서대로 끝까지 돌고 처음으로 돌아온다. */
var cur = Math.floor(Math.random() * songs.length); var cur = Math.floor(Math.random() * songs.length);
var playing = false; var playing = false;
var userPaused = false;
function nextIndex() { function nextIndex() {
return (cur + 1) % songs.length; return (cur + 1) % songs.length;
@ -408,10 +409,26 @@
if (alsoPlay) play(); if (alsoPlay) play();
} }
var FADE_MS = 1200;
var fadeTimer = 0;
function fadeIn() {
window.clearInterval(fadeTimer);
try { audio.volume = 0; } catch (err) { return; }
if (audio.volume > 0.01) return;
var t0 = Date.now();
fadeTimer = window.setInterval(function () {
var k = Math.min(1, (Date.now() - t0) / FADE_MS);
try { audio.volume = k * k; } catch (err) { k = 1; }
if (k >= 1) window.clearInterval(fadeTimer);
}, 40);
}
function play() { function play() {
var song = songs[cur] || {}; var song = songs[cur] || {};
if (!song.audioUrl) return; if (!song.audioUrl) return;
if (audio.getAttribute('src') !== song.audioUrl) audio.src = song.audioUrl; if (audio.getAttribute('src') !== song.audioUrl) audio.src = song.audioUrl;
fadeIn();
var started = audio.play(); var started = audio.play();
// 자동재생 차단·파일 오류는 예외가 아니라 거절된 약속으로 온다. // 자동재생 차단·파일 오류는 예외가 아니라 거절된 약속으로 온다.
if (started && started.catch) started.catch(function () { playing = false; render(); }); if (started && started.catch) started.catch(function () { playing = false; render(); });
@ -449,7 +466,10 @@
if (!btn) return; if (!btn) return;
disarmAutoplay(); // 손님이 직접 잡았다 — 첫 손길 대기를 푼다 disarmAutoplay(); // 손님이 직접 잡았다 — 첫 손길 대기를 푼다
if (btn.id === 'w4d-play') { if (playing) { stop(); render(); } else { play(); } } if (btn.id === 'w4d-play') {
if (playing) { userPaused = true; stop(); render(); }
else { userPaused = false; play(); }
}
if (btn.id === 'w4d-toggle') { togglePanel(); } if (btn.id === 'w4d-toggle') { togglePanel(); }
}); });
panel.querySelector('#w4d-close').addEventListener('click', function () { togglePanel(false); }); panel.querySelector('#w4d-close').addEventListener('click', function () { togglePanel(false); });
@ -539,11 +559,19 @@
else disarmAutoplay(); else disarmAutoplay();
} }
function setArmed(on) {
mini.setAttribute('data-armed', on ? '1' : '0');
var button = document.getElementById('w4d-play');
if (button) button.title = on ? '화면을 한 번 누르면 음악이 켜집니다' : '머뭄의 노래 재생';
}
function disarmAutoplay() { function disarmAutoplay() {
setArmed(false);
GESTURES.forEach(function (name) { window.removeEventListener(name, onFirstTouch); }); GESTURES.forEach(function (name) { window.removeEventListener(name, onFirstTouch); });
} }
function armAutoplay() { function armAutoplay() {
setArmed(true);
GESTURES.forEach(function (name) { GESTURES.forEach(function (name) {
window.addEventListener(name, onFirstTouch, {passive: true}); window.addEventListener(name, onFirstTouch, {passive: true});
}); });
@ -560,7 +588,7 @@
소리를 아예 막아 두는데, 앞으로 나오는 그 순간은 조작으로 쳐 주는 경우가 있다. 소리를 아예 막아 두는데, 앞으로 나오는 그 순간은 조작으로 쳐 주는 경우가 있다.
이미 켜져 있으면 아무 일도 안 한다. */ 이미 켜져 있으면 아무 일도 안 한다. */
document.addEventListener('visibilitychange', function () { document.addEventListener('visibilitychange', function () {
if (document.visibilityState !== 'visible' || playing) return; if (document.visibilityState !== 'visible' || playing || userPaused) return;
var again = play(); var again = play();
if (again && again.then) again.then(disarmAutoplay, function () { /* 계속 대기 */ }); if (again && again.then) again.then(disarmAutoplay, function () { /* 계속 대기 */ });
}); });
@ -569,17 +597,7 @@
buildList(); buildList();
mount(); mount();
render(); render();
/* ★ 자동재생을 **끈다** (2026-09-15 대표: "노래가 자동재생 안 되고 클릭하고 나서 되니까 autoplay();
사람들이 에러로 보잖아 그냥 꺼놔"). 세 번째 뒤집기다 — 09-11 "자동 빼" → 09-14 "자동재생
한다" → 09-15 끈다. 뒤집은 이유가 매번 다르다: 이번은 **정책을 못 이겨서**가 아니라
정책에 걸린 그 모습이 고장으로 읽혀서다. 브라우저는 손님이 페이지를 만지기 전에는
소리를 거절하므로(정책), 자동재생을 켜 두면 "눌러야 나는 플레이어"가 되고 그건
고장과 구별되지 않는다.
★ 함수는 남긴다 — 네 번째 뒤집기가 오면 이 한 줄만 되살린다. 지운 자리를 다시 짜면
첫 손길 리스너의 클릭 삼킴(2026-09-11)을 또 밟는다.
★ 제품 렌더러(`site/src/sections/SongPlayer.tsx`)에는 원래 자동재생이 없다 —
이제 목업과 제품이 같은 동작이다. */
void autoplay;
if (window.MutationObserver) { if (window.MutationObserver) {
new MutationObserver(function () { new MutationObserver(function () {
if (!mini.isConnected) { mount(); render(); } if (!mini.isConnected) { mount(); render(); }
@ -1979,7 +1997,7 @@
`__W4D_BUILD__` 는 patch_stay.py 가 굽는 시각(UPDATED_AT)으로 바꿔 박는다. */ `__W4D_BUILD__` 는 patch_stay.py 가 굽는 시각(UPDATED_AT)으로 바꿔 박는다. */
console.log('[w4d] 주입분 로드 · 빌드 __W4D_BUILD__'); console.log('[w4d] 주입분 로드 · 빌드 __W4D_BUILD__');
try { startPlayer(); } catch (err) { console.warn('[w4d] 플레이어 실패', err); } try { startPlayer(); } catch (err) { console.warn('[w4d] 플레이어 실패', err); }
try { startReading(); } catch (err) { console.warn('[w4d] 군산 읽기 실패', err); } void startReading;
try { try {
startSongsRail(); startSongsRail();
if (window.MutationObserver) { if (window.MutationObserver) {
@ -1991,14 +2009,7 @@
} }
console.log('[w4d] 가요 다방 카로셀 — 화살표 + embla'); console.log('[w4d] 가요 다방 카로셀 — 화살표 + embla');
} catch (err) { console.warn('[w4d] 가요 다방 카로셀 실패', err); } } catch (err) { console.warn('[w4d] 가요 다방 카로셀 실패', err); }
try { void postcardMaker;
postcardMaker();
if (window.MutationObserver) {
new MutationObserver(function () { postcardMaker(); })
.observe(document.getElementById('root') || document.body, {childList: true, subtree: true});
}
console.log('[w4d] 엽서 직접 쓰기');
} catch (err) { console.warn('[w4d] 엽서 만들기 실패', err); }
try { tameRails(); console.log('[w4d] 카로셀 — 만지는 동안 정지(7초) · 직접 민 레일은 영구 정지'); } try { tameRails(); console.log('[w4d] 카로셀 — 만지는 동안 정지(7초) · 직접 민 레일은 영구 정지'); }
catch (err) { console.warn('[w4d] 카로셀 실패', err); } catch (err) { console.warn('[w4d] 카로셀 실패', err); }
try { try {
@ -2047,10 +2058,7 @@
watchLinks(); watchLinks();
console.log('[w4d] 링크 걸기 — 일정 · 엽서'); console.log('[w4d] 링크 걸기 — 일정 · 엽서');
} catch (err) { console.warn('[w4d] 링크 실패', err); } } catch (err) { console.warn('[w4d] 링크 실패', err); }
try { void startCatchphrase;
startCatchphrase();
console.log('[w4d] 캐치프레이즈 ' + catchphrases().length + '개 · 7초마다 전환');
} catch (err) { console.warn('[w4d] 캐치프레이즈 실패', err); }
try { try {
startWeatherNote(); startWeatherNote();
console.log('[w4d] 날씨 문구 — 하늘 5 · 기온대 5, 케이스마다 다섯 벌 중 하나'); console.log('[w4d] 날씨 문구 — 하늘 5 · 기온대 5, 케이스마다 다섯 벌 중 하나');

52
solution/site/scripts/mockup/patch_stay.py
View File

@ -92,7 +92,7 @@ MONTH = {
11: ["해가 빨리 눕는 골목입니다", "이불이 가장 따뜻한 달입니다"], 11: ["해가 빨리 눕는 골목입니다", "이불이 가장 따뜻한 달입니다"],
12: ["기와에 눈이 앉는 달입니다", "한 해의 끝을 조용히 보내는 자리"], 12: ["기와에 눈이 앉는 달입니다", "한 해의 끝을 조용히 보내는 자리"],
} }
# 키는 렌더러(use-live-weather.ts)의 분류와 같아야 한다 — 맑음·구름많음·비·눈·흐림. # 키는 렌더러(use-live-weather.ts)의 분류와 같아야 한다.
WEATHER = { WEATHER = {
"맑음": ["마당 평상에 앉으면 새소리만 들립니다", "정원 쪽으로 그늘이 길게 눕는 시간입니다", "기와가 마르는 냄새가 납니다"], "맑음": ["마당 평상에 앉으면 새소리만 들립니다", "정원 쪽으로 그늘이 길게 눕는 시간입니다", "기와가 마르는 냄새가 납니다"],
"구름많음": ["빛이 부드러운 날입니다", "골목 사진이 제일 잘 나오는 빛입니다"], "구름많음": ["빛이 부드러운 날입니다", "골목 사진이 제일 잘 나오는 빛입니다"],
@ -109,8 +109,8 @@ WEATHER = {
# 5×5 스물다섯 벌을 적어야 한다. # 5×5 스물다섯 벌을 적어야 한다.
# ★ 이름을 대는 곳은 이 사이트에 **이미 있는 자리**만 쓴다(주변 안내 12곳 · 맛집 31곳). # ★ 이름을 대는 곳은 이 사이트에 **이미 있는 자리**만 쓴다(주변 안내 12곳 · 맛집 31곳).
# 화면에 없는 곳을 날씨 칸에서만 권하면 손님이 그걸 찾을 데가 없다. # 화면에 없는 곳을 날씨 칸에서만 권하면 손님이 그걸 찾을 데가 없다.
# ★ 하늘은 다섯이다. 렌더러는 넷(맑음·흐림·비·눈)으로만 가르므로 구름많음과 그 외 # ★ 하늘은 아홉이다 — Open-Meteo WMO 코드를 그대로 가른 값(use-live-weather.ts condition).
# (안개·소나기·뇌우)가 `notes.흐림` 한 칸을 같이 본다 — 그 둘을 가르는 것은 inject.js ⑥ 다. # 그림(w4-sky)은 넷으로만 그리고, 문구만 아홉으로 고른다.
SKY_NOTES = { SKY_NOTES = {
"맑음": [ "맑음": [
"마당 평상에 앉으면 새소리만 들립니다. 정원 쪽으로 그늘이 길게 눕는 시간입니다.", "마당 평상에 앉으면 새소리만 들립니다. 정원 쪽으로 그늘이 길게 눕는 시간입니다.",
@ -126,13 +126,41 @@ SKY_NOTES = {
"구름이 얇은 날입니다. 우체통거리까지 걷기에 덥지도 춥지도 않습니다.", "구름이 얇은 날입니다. 우체통거리까지 걷기에 덥지도 춥지도 않습니다.",
"빛이 고른 날입니다. 초원사진관까지 걸어서 삼 분, 사진은 오늘 같은 하늘이 낫습니다.", "빛이 고른 날입니다. 초원사진관까지 걸어서 삼 분, 사진은 오늘 같은 하늘이 낫습니다.",
], ],
"그외": [ "흐림": [
"해가 숨은 날입니다. 기와와 담이 한 색으로 가라앉고, 마당 평상에 앉아도 눈이 부시지 않습니다.", "해가 숨은 날입니다. 기와와 담이 한 색으로 가라앉고, 마당 평상에 앉아도 눈이 부시지 않습니다.",
"빛이 낮게 깔리는 날입니다. 창고형 CAFÉ 공간이 오늘은 가장 아늑합니다.",
"하늘이 자주 바뀌는 날입니다. 나가실 때 우산을 챙기시는 편이 낫습니다.", "하늘이 자주 바뀌는 날입니다. 나가실 때 우산을 챙기시는 편이 낫습니다.",
"그늘이 없는 날이라 골목을 오래 걸으셔도 덜 지칩니다.",
"색이 차분한 하늘입니다. 신흥동 담길 사진은 오늘 같은 날이 깊게 나옵니다.",
],
"안개": [
"안개가 낮게 깔리면 골목 끝이 흐려집니다. 서두르지 마시고 늦게 나가셔도 됩니다.", "안개가 낮게 깔리면 골목 끝이 흐려집니다. 서두르지 마시고 늦게 나가셔도 됩니다.",
"담 너머 히로쓰 가옥이 흐릿하게 보이는 아침입니다. 마당에서 한참 서 계셔도 좋습니다.",
"시야가 짧은 날입니다. 차로 나가실 계획이면 여유 있게 출발하세요.",
"안개가 걷히는 시간을 기다리며 아침을 천천히 드셔도 됩니다.",
"뿌연 공기 너머로 보이는 골목도 오늘만의 그림입니다.",
],
"이슬비": [
"가는 비가 내립니다. 우산 하나면 골목을 걷는 데 무리가 없습니다.",
"빗방울이 약해 오히려 조용한 날입니다. 히로쓰 가옥 담길이 한산합니다.",
"젖은 디딤돌이 미끄럽습니다. 편한 신발을 권합니다.",
"얇은 겉옷 하나면 충분한 비입니다. 대문 안쪽에 우산을 두었습니다.",
"빗소리가 작게 깔리는 날, 창고형 CAFÉ 공간에서 쉬어 가셔도 좋습니다.",
],
"소나기": [
"소나기가 지나갈 수 있는 하늘입니다. 창고형 CAFÉ 공간에서 한 차례 보내고 나가셔도 됩니다.", "소나기가 지나갈 수 있는 하늘입니다. 창고형 CAFÉ 공간에서 한 차례 보내고 나가셔도 됩니다.",
"갑자기 쏟아질 수 있으니 우산을 꼭 챙겨 나가세요.",
"비가 그친 뒤 기와가 마르는 냄새가 가장 좋습니다. 그때를 노려 보세요.",
"짧고 굵게 지나가는 비입니다. 일정을 통째로 바꾸실 필요는 없습니다.",
"바람이 먼저 바뀌는 날입니다. 마당에 널어 두신 것은 들여놓으시는 편이 좋습니다.", "바람이 먼저 바뀌는 날입니다. 마당에 널어 두신 것은 들여놓으시는 편이 좋습니다.",
], ],
"뇌우": [
"천둥이 치는 날입니다. 마당보다 실내에서 보내시는 편이 낫습니다.",
"비바람이 강합니다. 정원 석등만 켜 두고 오늘은 안에서 쉬어 가세요.",
"번개가 잦을 때는 높은 곳과 물가를 피하는 편이 안전합니다.",
"날이 거칩니다. 이동 계획이 있으시면 시간을 넉넉히 잡으세요.",
"궂은 하늘이 지나가면 금강 쪽이 크게 열립니다. 조금만 기다려 보세요.",
],
"비": [ "비": [
"백 년 된 기와를 타고 내리는 소리가 다릅니다. 창고형 CAFÉ 공간에서 빗소리를 들으실 수 있습니다.", "백 년 된 기와를 타고 내리는 소리가 다릅니다. 창고형 CAFÉ 공간에서 빗소리를 들으실 수 있습니다.",
"비 오는 골목에는 사람이 없습니다. 히로쓰 가옥 담길은 오늘 같은 날이 가장 조용합니다.", "비 오는 골목에는 사람이 없습니다. 히로쓰 가옥 담길은 오늘 같은 날이 가장 조용합니다.",
@ -216,7 +244,7 @@ _all_notes = [t for lst in SKY_NOTES.values() for t in lst] + \
assert len(_all_notes) == len(set(_all_notes)), "날씨 문구가 겹친다 — DOM 에서 어느 줄인지 못 가른다" assert len(_all_notes) == len(set(_all_notes)), "날씨 문구가 겹친다 — DOM 에서 어느 줄인지 못 가른다"
payload["local"]["weather"].update({ payload["local"]["weather"].update({
# 렌더러가 아는 넷. 구름많음은 '흐림' 칸을 쓴다(그 외와 가르는 것은 inject.js ⑦). # 렌더러가 아는 넷. 구름많음은 '흐림' 칸을 쓴다(그 외와 가르는 것은 inject.js ⑦).
"notes": {"맑음": SKY_NOTES["맑음"][0], "흐림": SKY_NOTES["구름많음"][0], "notes": {"맑음": SKY_NOTES["맑음"][0], "흐림": SKY_NOTES["흐림"][0],
"비": SKY_NOTES["비"][0], "눈": SKY_NOTES["눈"][0]}, "비": SKY_NOTES["비"][0], "눈": SKY_NOTES["눈"][0]},
"tempNotes": {band: lines[0] for band, lines in TEMP_NOTES.items()}, "tempNotes": {band: lines[0] for band, lines in TEMP_NOTES.items()},
# 렌더러가 모르는 칸이다(계약에 없어 그대로 지나간다). 주입분만 읽는다. # 렌더러가 모르는 칸이다(계약에 없어 그대로 지나간다). 주입분만 읽는다.
@ -245,6 +273,9 @@ for _r in payload["local"]["restaurants"]:
# ★ 날짜(period·startDate)는 **적지 않는다.** 확인한 공지는 2025년분이고 2026년 일정은 # ★ 날짜(period·startDate)는 **적지 않는다.** 확인한 공지는 2025년분이고 2026년 일정은
# 아직 공고 전이다 — 지어내지 않는다(레포 절대 규칙). 축제 10개 중 5개가 이미 날짜 없이 # 아직 공고 전이다 — 지어내지 않는다(레포 절대 규칙). 축제 10개 중 5개가 이미 날짜 없이
# 서 있어 화면도 그 경우를 감당한다. # 서 있어 화면도 그 경우를 감당한다.
payload["local"]["festivals"] = [
_f for _f in payload["local"]["festivals"] if _f.get("name") != "군산 국가유산 야행"
]
payload["local"]["festivals"].append({ payload["local"]["festivals"].append({
"name": "군산 국가유산 야행", "name": "군산 국가유산 야행",
"month": "8월", "month": "8월",
@ -400,7 +431,10 @@ for unit in payload["units"]:
# enabled 는 아예 보지 않는다 — 실측: daily 가 enabled=False 인데도 탭이 서 있었다. # enabled 는 아예 보지 않는다 — 실측: daily 가 enabled=False 인데도 탭이 서 있었다.
# ★ 그래서 항목을 비운다. 원값은 stay-payload-new.json 에 그대로 있으므로(위에서 이미 썼다) # ★ 그래서 항목을 비운다. 원값은 stay-payload-new.json 에 그대로 있으므로(위에서 이미 썼다)
# 되살리려면 아래 집합에서 id 만 빼면 된다. 다시 만들 필요 없다. # 되살리려면 아래 집합에서 id 만 빼면 된다. 다시 만들 필요 없다.
HIDE_TABS = {"daily"} # 오늘의 한 장 HIDE_TABS = {"daily", "event"} # 오늘의 한 장 · 소식
# ★ 소식 3건이 전부 '공지'(입실 시간·인원 추가·취사 제한)인데, 셋 다 '이용안내 및 예약' 에
# 이미 있다. 같은 말을 두 섹션이 하면서 1.4화면을 더 먹었다(2026-09-16 대표: "중복되는
# 컨텐츠 없어야 한다"). 렌더러의 소식 섹션은 그대로 둔다 — 사장님이 진짜 소식을 적는 자리다.
for _section in payload["theme"]["sections"]: for _section in payload["theme"]["sections"]:
if _section["id"] not in HIDE_TABS: if _section["id"] not in HIDE_TABS:
@ -423,6 +457,12 @@ for _section in payload["theme"]["sections"]:
if _section["id"] == "booking": if _section["id"] == "booking":
_section["enabled"] = True _section["enabled"] = True
# ── 네이버 플레이스 → 네이버 예약 ────────────────────────────────────────────
for _link in payload["links"]:
if _link.get("channel") == 3:
_link["channel"] = 7
_link["title"] = "네이버 예약"
# ── index.html 조립 ────────────────────────────────────────────────────────── # ── index.html 조립 ──────────────────────────────────────────────────────────
html = (SP / "orig" / "index.html").read_text(encoding="utf-8") html = (SP / "orig" / "index.html").read_text(encoding="utf-8")

2
solution/site/scripts/mockup/stay-payload-new.json
View File

File diff suppressed because one or more lines are too long

2537
solution/site/scripts/mockup/stay3-payload.json Normal file
View File

File diff suppressed because one or more lines are too long

21
solution/site/scripts/mockup/tpl-creative/LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2013-2023 Start Bootstrap LLC
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

1390
solution/site/scripts/mockup/tpl-creative/css/bootstrap-icons.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
solution/site/scripts/mockup/tpl-creative/css/fonts/bootstrap-icons.woff Normal file
View File

Binary file not shown.

BIN
solution/site/scripts/mockup/tpl-creative/css/fonts/bootstrap-icons.woff2 Normal file
View File

Binary file not shown.

1
solution/site/scripts/mockup/tpl-creative/css/simple-lightbox.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

10995
solution/site/scripts/mockup/tpl-creative/css/styles.css Normal file
View File

File diff suppressed because it is too large Load Diff

261
solution/site/scripts/mockup/tpl-creative/index.original.html Normal file
View File

@ -0,0 +1,261 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Creative - Start Bootstrap Theme</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container px-4 px-lg-5 h-100">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<h1 class="text-white font-weight-bold">Your Favorite Place for Free Bootstrap Themes</h1>
<hr class="divider" />
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 mb-5">Start Bootstrap can help you build better websites using the Bootstrap framework! Just download a theme and start customizing, no strings attached!</p>
<a class="btn btn-primary btn-xl" href="#about">Find Out More</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">We've got what you need!</h2>
<hr class="divider divider-light" />
<p class="text-white-75 mb-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<a class="btn btn-light btn-xl" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container px-4 px-lg-5">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider" />
<div class="row gx-4 gx-lg-5">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-gem fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Sturdy Themes</h3>
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-laptop fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Up to Date</h3>
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-globe fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Ready to Publish</h3>
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<div class="mb-2"><i class="bi-heart fs-1 text-primary"></i></div>
<h3 class="h4 mb-2">Made with Love</h3>
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio-->
<div id="portfolio">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/1.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/2.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/2.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/3.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/3.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/4.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/4.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/5.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/5.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/6.jpg" title="Project Name">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/6.jpg" alt="..." />
<div class="portfolio-box-caption p-3">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Call to action-->
<section class="page-section bg-dark text-white">
<div class="container px-4 px-lg-5 text-center">
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
<a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
</div>
</section>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 col-xl-6 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider" />
<p class="text-muted mb-5">Ready to start your next project with us? Send us a messages and we will get back to you as soon as possible!</p>
</div>
</div>
<div class="row gx-4 gx-lg-5 justify-content-center mb-5">
<div class="col-lg-6">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<!-- Name input-->
<div class="form-floating mb-3">
<input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
<label for="name">Full name</label>
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<!-- Email address input-->
<div class="form-floating mb-3">
<input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
<label for="email">Email address</label>
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<!-- Phone number input-->
<div class="form-floating mb-3">
<input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
<label for="phone">Phone number</label>
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
<!-- Message input-->
<div class="form-floating mb-3">
<textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
<label for="message">Message</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
<a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<div class="d-grid"><button class="btn btn-primary btn-xl disabled" id="submitButton" type="submit">Submit</button></div>
</form>
</div>
</div>
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-4 text-center mb-5 mb-lg-0">
<i class="bi-phone fs-2 mb-3 text-muted"></i>
<div>+1 (555) 123-4567</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright &copy; 2023 - Company Name</div></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>

7
solution/site/scripts/mockup/tpl-creative/js/bootstrap.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
solution/site/scripts/mockup/tpl-creative/js/scripts.js Normal file
View File

@ -0,0 +1,59 @@
/*!
* Start Bootstrap - Creative v7.0.7 (https://startbootstrap.com/theme/creative)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
*/
//
// Scripts
//
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
rootMargin: '0px 0px -40%',
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
// Activate SimpleLightbox plugin for portfolio items
new SimpleLightbox({
elements: '#portfolio a.portfolio-box'
});
});

1
solution/site/scripts/mockup/tpl-creative/js/simple-lightbox.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

63
solution/site/scripts/mockup/tpl-story/LICENSE.txt Normal file
View File

@ -0,0 +1,63 @@
Creative Commons Attribution 3.0 Unported
http://creativecommons.org/licenses/by/3.0/
License
THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.
BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.
1. Definitions
1. "Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License.
2. "Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License.
3. "Distribute" means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale or other transfer of ownership.
4. "Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License.
5. "Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast.
6. "Work" means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work.
7. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
8. "Publicly Perform" means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images.
9. "Reproduce" means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws.
3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:
1. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections;
2. to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked "The original work was translated from English to Spanish," or a modification could indicate "The original work has been modified.";
3. to Distribute and Publicly Perform the Work including as incorporated in Collections; and,
4. to Distribute and Publicly Perform Adaptations.
5.
For the avoidance of doubt:
1. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License;
2. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor waives the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; and,
3. Voluntary License Schemes. The Licensor waives the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved.
4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:
1. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(b), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(b), as requested.
2. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (iv) , consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). The credit required by this Section 4 (b) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties.
3. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author's honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author's honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise.
5. Representations, Warranties and Disclaimer
UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.
6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
7. Termination
1. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
2. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.
8. Miscellaneous
1. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
2. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License.
3. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
4. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
5. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.
6. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law.

37
solution/site/scripts/mockup/tpl-story/README.txt Normal file
View File

@ -0,0 +1,37 @@
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Say hello to Story, a brand new responsive one-pager for HTML5 UP! Inspired by my work
on Carrd*, Story is built to be extremely modular and tweakable, and as such is entirely
built on reusable, insanely customizable elements (like "spotlight" and "gallery") that
can be endlessly duplicated and tweaked into whatever you need to tell your story --
without, in many cases, touching *any* CSS. Check out index-demo.html for an interactive
demo, and index.html for the actual template. Enjoy!
Demo images** courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.
PS: Delete index-demo.html and assets/js/demo.js when you're done messing with the demo
as neither are needed in production :)
(* = my other side project -- carrd.co)
(** = not included)
AJ
aj@lkn.io | @ajlkn
Credits:
Demo Images:
Unsplash (unsplash.com)
Icons:
Font Awesome (fontawesome.io)
Other:
jQuery (jquery.com)
Scrollex (github.com/ajlkn/jquery.scrollex)
Responsive Tools (github.com/ajlkn/responsive-tools)

101
solution/site/scripts/mockup/tpl-story/assets/css/fontawesome-all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

8603
solution/site/scripts/mockup/tpl-story/assets/css/main.css Normal file
View File

File diff suppressed because it is too large Load Diff

387
solution/site/scripts/mockup/tpl-story/assets/css/noscript.css Normal file
View File

@ -0,0 +1,387 @@
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
/* Banner (transitions) */
.banner.onload-content-fade-up .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-up .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-down .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-down .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-left .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-left .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-right .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-right .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-content-fade-in .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-content-fade-in .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onload-image-fade-up .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-up .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-up .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-up .image img {
opacity: 1;
}
.banner.onload-image-fade-down .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-down .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-down .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-down .image img {
opacity: 1;
}
.banner.onload-image-fade-left .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-left .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-left .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-left .image img {
opacity: 1;
}
.banner.onload-image-fade-right .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onload-image-fade-right .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-right .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
body.is-preload .banner.onload-image-fade-right .image img {
opacity: 1;
}
.banner.onload-image-fade-in .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
body.is-preload .banner.onload-image-fade-in .image img {
opacity: 1;
}
.banner.onscroll-content-fade-up .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-up.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-down .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-down.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-left .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-left.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-right .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-right.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-content-fade-in .content {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-content-fade-in.is-inactive .content {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-up .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-up .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-up.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-up.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-down .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-down .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-down.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-down.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-left .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-left .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-left.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-left.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-right .image {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-right .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-right.is-inactive .image {
-moz-transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
opacity: 1;
}
.banner.onscroll-image-fade-right.is-inactive .image img {
opacity: 1;
}
.banner.onscroll-image-fade-in .image img {
-moz-transition: none;
-webkit-transition: none;
-ms-transition: none;
transition: none;
}
.banner.onscroll-image-fade-in.is-inactive .image img {
opacity: 1;
}

2
solution/site/scripts/mockup/tpl-story/assets/js/breakpoints.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* breakpoints.js v1.0 | @ajlkn | MIT licensed */
var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e<t.events.length;e++)n=t.events[e],t.active(n.query)?n.state||(n.state=!0,n.handler()):n.state&&(n.state=!1)}};return e._=t,e.on=function(e,n){t.on(e,n)},e.active=function(e){return t.active(e)},e}();!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?module.exports=t():e.breakpoints=t()}(this,function(){return breakpoints});

2
solution/site/scripts/mockup/tpl-story/assets/js/browser.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* browser.js v1.0.1 | @ajlkn | MIT licensed */
var browser=function(){"use strict";var t={name:null,version:null,os:null,osVersion:null,touch:null,mobile:null,_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,r=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+r in n||"Webkit"+r in n||"O"+r in n||"ms"+r in n},init:function(){for(var e=navigator.userAgent,n="other",r=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],o=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(RegExp.$1);break}for(t.name=n,t.version=r,n="other",i=[["ios",/([0-9_]+) like Mac OS X/,function(e){return e.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(e){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(e){return e.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null],["linux",/Linux/,null],["bsd",/BSD/,null],["unix",/X11/,null]],o=r=0;o<i.length;o++)if(e.match(i[o][1])){n=i[o][0],r=parseFloat(i[o][2]?i[o][2](RegExp.$1):RegExp.$1);break}"mac"==n&&"ontouchstart"in window&&(1024==screen.width&&1366==screen.height||834==screen.width&&1112==screen.height||810==screen.width&&1080==screen.height||768==screen.width&&1024==screen.height)&&(n="ios"),t.os=n,t.osVersion=r,t.touch="wp"==t.os?0<navigator.msMaxTouchPoints:!!("ontouchstart"in window),t.mobile="wp"==t.os||"android"==t.os||"ios"==t.os||"bb"==t.os}};return t.init(),t}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser});

563
solution/site/scripts/mockup/tpl-story/assets/js/demo.js Normal file
View File

@ -0,0 +1,563 @@
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
Note: Only needed for demo purposes. Delete for production sites.
*/
(function($) {
var $window = $(window);
// Styles.
$(
'<style>' +
'.demo-animate-all:not(.gallery), .demo-animate-all:not(.gallery) *, .demo-animate-all:not(.gallery) *:before, .demo-animate-all:not(.gallery) *:after { transition: all 0.5s ease-in-out; }' +
'.demo-controls .property .classes { display: none; }' +
'.demo-controls .property[data-requires] { display: none; }' +
'.demo-controls .property[data-requires].active { display: inline; }' +
'.demo-controls .property .tooltip { position: relative; }' +
'.demo-controls .property .tooltip:before { content: \'Click to change!\'; font-size: 0.7rem; position: absolute; bottom: 100%; left: 0; background: #47D3E5; color: #ffffff; line-height: 1; white-space: nowrap; font-weight: bold; border-radius: 0.125rem; padding: 0.325rem 0.425rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
'.demo-controls .property .tooltip:after { content: \'\'; position: absolute; bottom: calc(100% - 0.25rem); left: 0.5rem; border-left: solid 0.5rem transparent; border-right: solid 0.5rem transparent; border-top: solid 0.5rem #47D3E5; width: 0.5rem; height: 0.5rem; animation: demo-controls-tooltip 1.5s forwards; animation-delay: 1s; opacity: 0; }' +
'@keyframes demo-controls-tooltip {' +
'0% { opacity: 0; transform: translateY(0); }' +
'10% { opacity: 1; transform: translateY(0.125rem); }' +
'20% { opacity: 1; transform: translateY(-0.125rem); }' +
'30% { opacity: 1; transform: translateY(0.125rem); }' +
'40% { opacity: 1; transform: translateY(-0.125rem); }' +
'50% { opacity: 1; transform: translateY(0.125rem); }' +
'60% { opacity: 1; transform: translateY(0); }' +
'90% { opacity: 1; }' +
'100% { opacity: 0; }' +
'}' +
'</style>'
).appendTo($('head'));
// Functions.
$.fn.demo_controls = function(styles, userOptions) {
var $this = $(this),
$styleProperty, $stylePropertyClasses,
$controls, $x, $y, $z,
options,
current, i, j, k, s, n, count;
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).demo_controls(styles, userOptions);
return $this;
}
// Options.
options = $.extend({
target: null,
palette: true
}, userOptions);
// Controls.
if (styles) {
$controls = $(
'<span class="demo-controls">' +
'<span class="property" data-name="style">' +
'<a href="#" class="title tooltip">style</a>' +
'<span class="classes"></span>' + (options.palette ? ', ' : ' ') +
'</span>' +
(options.palette ?
'<span class="property active" data-name="scheme">' +
'<a href="#" class="title">scheme</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="invert">invert</span>' +
'</span>, ' +
'</span>' +
'<span class="property active" data-name="color">' +
'<a href="#" class="title">color</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="color1">color1</span>' +
'<span data-class="color2">color2</span>' +
'<span data-class="color3">color3</span>' +
'<span data-class="color4">color4</span>' +
'<span data-class="color5">color5</span>' +
'<span data-class="color6">color6</span>' +
'<span data-class="color7">color7</span>' +
'</span>, ' +
'</span>'
: '') +
'</span>'
);
}
else {
$controls = $(
'<span class="demo-controls">' +
(options.palette ?
'<span class="property active" data-name="scheme">' +
'<a href="#" class="title">scheme</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="invert">invert</span>' +
'</span> and ' +
'</span>' +
'<span class="property active" data-name="color">' +
'<a href="#" class="title">color</a>' +
'<span class="classes">' +
'<span data-class="-" class="active">default</span>' +
'<span data-class="color1">color1</span>' +
'<span data-class="color2">color2</span>' +
'<span data-class="color3">color3</span>' +
'<span data-class="color4">color4</span>' +
'<span data-class="color5">color5</span>' +
'<span data-class="color6">color6</span>' +
'<span data-class="color7">color7</span>' +
'</span>' +
'</span>'
: '') +
'</span>'
);
}
// Target.
switch (options.target) {
case 'previous':
$this.prev().find('.demo-controls').replaceWith($controls);
break;
default:
$this.find('.demo-controls').replaceWith($controls);
break;
}
// Styles.
if (styles) {
$styleProperty = $controls.find('.property[data-name="style"]');
$stylePropertyClasses = $styleProperty.children('.classes');
for (i in styles) {
current = false;
count = Object.keys(styles[i]).length;
n = 1;
// Add to style property.
$x = $('<span data-class="' + i + '">, ' + i + '</span>')
.appendTo($stylePropertyClasses);
if ($this.hasClass(i)) {
$x.addClass('active');
current = true;
}
// Step through properties.
for (j in styles[i]) {
$x = $(
'<span class="property" data-name="' + j + '" data-requires="' + i + '">' +
(n == count ? '<span>and </span>' : '') +
'<a href="#" class="title">' + j + '</a>' +
'<span class="classes">' +
'</span>' + (n < count ? ', ' : '') +
'</span>'
).appendTo($controls);
$y = $x.children('.classes');
if (current)
$x.addClass('active');
for (k in styles[i][j]) {
$z = $('<span data-class="' + k + '">, ' + styles[i][j][k].replace('*', '') + '</span>')
.appendTo($y);
if (styles[i][j][k].substr(-1, 1) == '*')
$z.addClass('default');
if (current
&& $this.hasClass(k))
$z.addClass('active');
}
n++;
}
}
}
// Events.
$controls.on('click', 'a', function(event) {
event.preventDefault();
});
$controls.on('click', '.property.active', function(event) {
var $property = $(this);
var $classes = $property.find('.classes > *');
var $current = $classes.filter('.active');
var $next;
// Determine next.
if ($current.length == 0
|| $current.index() == $classes.length - 1)
$next = $classes.first();
else
$next = $current.next();
// Turn on animate all.
$this.addClass('demo-animate-all');
// Deactivate current.
$current.removeClass('active');
$this.removeClass($current.data('class'));
// Activate next.
$next.addClass('active');
$this.addClass($next.data('class'));
// Turn off animate all.
setTimeout(function() {
$this.removeClass('demo-animate-all');
}, 500);
});
$controls.on('click', '.property[data-name="style"]', function(event) {
var $property = $(this);
var $classes = $property.find('.classes > *');
var $current = $classes.filter('.active');
var $next;
// Determine next.
if ($current.length == 0
|| $current.index() == $classes.length - 1)
$next = $classes.first();
else
$next = $current.next();
// Turn on animate all.
$this.addClass('demo-animate-all');
// Deactivate current.
$current.removeClass('active');
$this.removeClass($current.data('class'));
$controls.find('.property[data-requires="' + $current.data('class') + '"]')
.removeClass('active');
$controls.find('.property[data-requires="' + $current.data('class') + '"] > .classes > .active').each(function() {
$(this).removeClass('active');
if ($(this).data('class') != '-')
$this.removeClass($(this).data('class'));
});
// Activate next.
$next.addClass('active');
$this.addClass($next.data('class'));
$controls.find('.property[data-requires="' + $next.data('class') + '"]')
.addClass('active');
$controls.find('.property[data-requires="' + $next.data('class') + '"] > .classes > .default').each(function() {
$(this).addClass('active');
if ($(this).data('class') != '-')
$this.addClass($(this).data('class'));
});
// Turn off animate all.
setTimeout(function() {
$this.removeClass('demo-animate-all');
}, 500);
});
};
// Elements.
// Wrappers.
$('.wrapper').demo_controls(null, {
palette: true
});
// Banner.
$('.banner').demo_controls({
style1: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left*',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style2: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left',
'orient-center': 'center*',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left',
'content-align-center': 'center*',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style3: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style4: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'phone type': {
'iphone': 'iphone*',
'android': 'android'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style5: {
'size': {
'-': 'normal',
'fullscreen': 'fullscreen*'
},
'content alignment': {
'content-align-left': 'left',
'content-align-center': 'center*',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
}
});
// Spotlight.
$('.spotlight').demo_controls({
style1: {
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left*',
'image-position-center': 'center',
'image-position-right': 'right'
}
},
style2: {
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style3: {
'phone type': {
'iphone': 'iphone*',
'android': 'android'
},
'orientation': {
'orient-left': 'left',
'orient-right': 'right*'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style4: {
'size': {
'-size': 'normal',
'fullscreen': 'fullscreen*',
'halfscreen': 'halfscreen'
},
'orientation': {
'orient-left': 'left*',
'orient-center': 'center',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
style5: {
'size': {
'-size': 'normal',
'fullscreen': 'fullscreen*',
'halfscreen': 'halfscreen'
},
'orientation': {
'orient-left': 'left*',
'orient-center': 'center',
'orient-right': 'right'
},
'content alignment': {
'content-align-left': 'left*',
'content-align-center': 'center',
'content-align-right': 'right'
},
'image position': {
'image-position-left': 'left',
'image-position-center': 'center*',
'image-position-right': 'right'
}
},
});
// Gallery.
$('.gallery').demo_controls({
style1: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style2: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
}, {
target: 'previous',
palette: false
});
// Items.
$('.items').demo_controls({
style1: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style2: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
},
style3: {
'size': {
'small': 'small',
'medium': 'medium*',
'big': 'big'
}
}
}, {
target: 'previous',
palette: false
});
})(jQuery);

2
solution/site/scripts/mockup/tpl-story/assets/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
solution/site/scripts/mockup/tpl-story/assets/js/jquery.scrollex.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */
!function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r<this.length;r++)t(this[r]).scrollex(l);return s}if(s.data("_scrollexId"))return s;var a,u,h,c,p;switch(a=i++,u=jQuery.extend({top:0,bottom:0,delay:0,mode:"default",enter:null,leave:null,initialize:null,terminate:null,scroll:null},l),u.mode){case"top":h=function(t,e,n,i,o){return t>=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n<this.length;n++)t(this[n]).unscrollex();return e}var i,l;return(i=e.data("_scrollexId"))?(l=o[i],window.clearTimeout(l.timeoutId),delete o[i],e.removeData("_scrollexId"),l.options.terminate&&l.options.terminate.apply(this),e):e}}(jQuery);

2
solution/site/scripts/mockup/tpl-story/assets/js/jquery.scrolly.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
/* jquery.scrolly v1.0.0-dev | (c) @ajlkn | MIT licensed */
(function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o<this[t];o++)e(this[o]).scrolly(i);return c}l=n,f=c.attr("href");if(f.charAt(0)!="#"||f[t]<2)return c;a=jQuery.extend({anchor:r,easing:"swing",offset:0,parent:e("body,html"),pollOnce:!1,speed:1e3},i),a.pollOnce&&(l=u(f,a)),c.off(s).on(s,function(e){var t=l!==n?l:u(f,a);t!==n&&(e.preventDefault(),a.parent.stop().animate({scrollTop:t},a.speed,a.easing))})}})(jQuery);

341
solution/site/scripts/mockup/tpl-story/assets/js/main.js Normal file
View File

@ -0,0 +1,341 @@
/*
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
(function($) {
var $window = $(window),
$body = $('body'),
$wrapper = $('#wrapper');
// Breakpoints.
breakpoints({
xlarge: [ '1281px', '1680px' ],
large: [ '981px', '1280px' ],
medium: [ '737px', '980px' ],
small: [ '481px', '736px' ],
xsmall: [ '361px', '480px' ],
xxsmall: [ null, '360px' ]
});
// Play initial animations on page load.
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-preload');
}, 100);
});
// Browser fixes.
// IE: Flexbox min-height bug.
if (browser.name == 'ie')
(function() {
var flexboxFixTimeoutId;
$window.on('resize.flexbox-fix', function() {
var $x = $('.fullscreen');
clearTimeout(flexboxFixTimeoutId);
flexboxFixTimeoutId = setTimeout(function() {
if ($x.prop('scrollHeight') > $window.height())
$x.css('height', 'auto');
else
$x.css('height', '100vh');
}, 250);
}).triggerHandler('resize.flexbox-fix');
})();
// Object fit workaround.
if (!browser.canUse('object-fit'))
(function() {
$('.banner .image, .spotlight .image').each(function() {
var $this = $(this),
$img = $this.children('img'),
positionClass = $this.parent().attr('class').match(/image-position-([a-z]+)/);
// Set image.
$this
.css('background-image', 'url("' + $img.attr('src') + '")')
.css('background-repeat', 'no-repeat')
.css('background-size', 'cover');
// Set position.
switch (positionClass.length > 1 ? positionClass[1] : '') {
case 'left':
$this.css('background-position', 'left');
break;
case 'right':
$this.css('background-position', 'right');
break;
default:
case 'center':
$this.css('background-position', 'center');
break;
}
// Hide original.
$img.css('opacity', '0');
});
})();
// Smooth scroll.
$('.smooth-scroll').scrolly();
$('.smooth-scroll-middle').scrolly({ anchor: 'middle' });
// Wrapper.
$wrapper.children()
.scrollex({
top: '30vh',
bottom: '30vh',
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
});
// Items.
$('.items')
.scrollex({
top: '30vh',
bottom: '30vh',
delay: 50,
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
})
.children()
.wrapInner('<div class="inner"></div>');
// Gallery.
$('.gallery')
.wrapInner('<div class="inner"></div>')
.prepend(browser.mobile ? '' : '<div class="forward"></div><div class="backward"></div>')
.scrollex({
top: '30vh',
bottom: '30vh',
delay: 50,
initialize: function() {
$(this).addClass('is-inactive');
},
terminate: function() {
$(this).removeClass('is-inactive');
},
enter: function() {
$(this).removeClass('is-inactive');
},
leave: function() {
var $this = $(this);
if ($this.hasClass('onscroll-bidirectional'))
$this.addClass('is-inactive');
}
})
.children('.inner')
//.css('overflow', 'hidden')
.css('overflow-y', browser.mobile ? 'visible' : 'hidden')
.css('overflow-x', browser.mobile ? 'scroll' : 'hidden')
.scrollLeft(0);
// Style #1.
// ...
// Style #2.
$('.gallery')
.on('wheel', '.inner', function(event) {
var $this = $(this),
delta = (event.originalEvent.deltaX * 10);
// Cap delta.
if (delta > 0)
delta = Math.min(25, delta);
else if (delta < 0)
delta = Math.max(-25, delta);
// Scroll.
$this.scrollLeft( $this.scrollLeft() + delta );
})
.on('mouseenter', '.forward, .backward', function(event) {
var $this = $(this),
$inner = $this.siblings('.inner'),
direction = ($this.hasClass('forward') ? 1 : -1);
// Clear move interval.
clearInterval(this._gallery_moveIntervalId);
// Start interval.
this._gallery_moveIntervalId = setInterval(function() {
$inner.scrollLeft( $inner.scrollLeft() + (5 * direction) );
}, 10);
})
.on('mouseleave', '.forward, .backward', function(event) {
// Clear move interval.
clearInterval(this._gallery_moveIntervalId);
});
// Lightbox.
$('.gallery.lightbox')
.on('click', 'a', function(event) {
var $a = $(this),
$gallery = $a.parents('.gallery'),
$modal = $gallery.children('.modal'),
$modalImg = $modal.find('img'),
href = $a.attr('href');
// Not an image? Bail.
if (!href.match(/\.(jpg|gif|png|mp4)$/))
return;
// Prevent default.
event.preventDefault();
event.stopPropagation();
// Locked? Bail.
if ($modal[0]._locked)
return;
// Lock.
$modal[0]._locked = true;
// Set src.
$modalImg.attr('src', href);
// Set visible.
$modal.addClass('visible');
// Focus.
$modal.focus();
// Delay.
setTimeout(function() {
// Unlock.
$modal[0]._locked = false;
}, 600);
})
.on('click', '.modal', function(event) {
var $modal = $(this),
$modalImg = $modal.find('img');
// Locked? Bail.
if ($modal[0]._locked)
return;
// Already hidden? Bail.
if (!$modal.hasClass('visible'))
return;
// Lock.
$modal[0]._locked = true;
// Clear visible, loaded.
$modal
.removeClass('loaded')
// Delay.
setTimeout(function() {
$modal
.removeClass('visible')
setTimeout(function() {
// Clear src.
$modalImg.attr('src', '');
// Unlock.
$modal[0]._locked = false;
// Focus.
$body.focus();
}, 475);
}, 125);
})
.on('keypress', '.modal', function(event) {
var $modal = $(this);
// Escape? Hide modal.
if (event.keyCode == 27)
$modal.trigger('click');
})
.prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>')
.find('img')
.on('load', function(event) {
var $modalImg = $(this),
$modal = $modalImg.parents('.modal');
setTimeout(function() {
// No longer visible? Bail.
if (!$modal.hasClass('visible'))
return;
// Set loaded.
$modal.addClass('loaded');
}, 275);
});
})(jQuery);

587
solution/site/scripts/mockup/tpl-story/assets/js/util.js Normal file
View File

@ -0,0 +1,587 @@
(function($) {
/**
* Generate an indented list of links from a nav. Meant for use with panel().
* @return {jQuery} jQuery object.
*/
$.fn.navList = function() {
var $this = $(this);
$a = $this.find('a'),
b = [];
$a.each(function() {
var $this = $(this),
indent = Math.max(0, $this.parents('li').length - 1),
href = $this.attr('href'),
target = $this.attr('target');
b.push(
'<a ' +
'class="link depth-' + indent + '"' +
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
'>' +
'<span class="indent-' + indent + '"></span>' +
$this.text() +
'</a>'
);
});
return b.join('');
};
/**
* Panel-ify an element.
* @param {object} userConfig User config.
* @return {jQuery} jQuery object.
*/
$.fn.panel = function(userConfig) {
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).panel(userConfig);
return $this;
}
// Vars.
var $this = $(this),
$body = $('body'),
$window = $(window),
id = $this.attr('id'),
config;
// Config.
config = $.extend({
// Delay.
delay: 0,
// Hide panel on link click.
hideOnClick: false,
// Hide panel on escape keypress.
hideOnEscape: false,
// Hide panel on swipe.
hideOnSwipe: false,
// Reset scroll position on hide.
resetScroll: false,
// Reset forms on hide.
resetForms: false,
// Side of viewport the panel will appear.
side: null,
// Target element for "class".
target: $this,
// Class to toggle.
visibleClass: 'visible'
}, userConfig);
// Expand "target" if it's not a jQuery object already.
if (typeof config.target != 'jQuery')
config.target = $(config.target);
// Panel.
// Methods.
$this._hide = function(event) {
// Already hidden? Bail.
if (!config.target.hasClass(config.visibleClass))
return;
// If an event was provided, cancel it.
if (event) {
event.preventDefault();
event.stopPropagation();
}
// Hide.
config.target.removeClass(config.visibleClass);
// Post-hide stuff.
window.setTimeout(function() {
// Reset scroll position.
if (config.resetScroll)
$this.scrollTop(0);
// Reset forms.
if (config.resetForms)
$this.find('form').each(function() {
this.reset();
});
}, config.delay);
};
// Vendor fixes.
$this
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
.css('-webkit-overflow-scrolling', 'touch');
// Hide on click.
if (config.hideOnClick) {
$this.find('a')
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
$this
.on('click', 'a', function(event) {
var $a = $(this),
href = $a.attr('href'),
target = $a.attr('target');
if (!href || href == '#' || href == '' || href == '#' + id)
return;
// Cancel original event.
event.preventDefault();
event.stopPropagation();
// Hide panel.
$this._hide();
// Redirect to href.
window.setTimeout(function() {
if (target == '_blank')
window.open(href);
else
window.location.href = href;
}, config.delay + 10);
});
}
// Event: Touch stuff.
$this.on('touchstart', function(event) {
$this.touchPosX = event.originalEvent.touches[0].pageX;
$this.touchPosY = event.originalEvent.touches[0].pageY;
})
$this.on('touchmove', function(event) {
if ($this.touchPosX === null
|| $this.touchPosY === null)
return;
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
th = $this.outerHeight(),
ts = ($this.get(0).scrollHeight - $this.scrollTop());
// Hide on swipe?
if (config.hideOnSwipe) {
var result = false,
boundary = 20,
delta = 50;
switch (config.side) {
case 'left':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
break;
case 'right':
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
break;
case 'top':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
break;
case 'bottom':
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
break;
default:
break;
}
if (result) {
$this.touchPosX = null;
$this.touchPosY = null;
$this._hide();
return false;
}
}
// Prevent vertical scrolling past the top or bottom.
if (($this.scrollTop() < 0 && diffY < 0)
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
event.preventDefault();
event.stopPropagation();
}
});
// Event: Prevent certain events inside the panel from bubbling.
$this.on('click touchend touchstart touchmove', function(event) {
event.stopPropagation();
});
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
$this.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.removeClass(config.visibleClass);
});
// Body.
// Event: Hide panel on body click/tap.
$body.on('click touchend', function(event) {
$this._hide(event);
});
// Event: Toggle.
$body.on('click', 'a[href="#' + id + '"]', function(event) {
event.preventDefault();
event.stopPropagation();
config.target.toggleClass(config.visibleClass);
});
// Window.
// Event: Hide on ESC.
if (config.hideOnEscape)
$window.on('keydown', function(event) {
if (event.keyCode == 27)
$this._hide(event);
});
return $this;
};
/**
* Apply "placeholder" attribute polyfill to one or more forms.
* @return {jQuery} jQuery object.
*/
$.fn.placeholder = function() {
// Browser natively supports placeholders? Bail.
if (typeof (document.createElement('input')).placeholder != 'undefined')
return $(this);
// No elements?
if (this.length == 0)
return $this;
// Multiple elements?
if (this.length > 1) {
for (var i=0; i < this.length; i++)
$(this[i]).placeholder();
return $this;
}
// Vars.
var $this = $(this);
// Text, TextArea.
$this.find('input[type=text],textarea')
.each(function() {
var i = $(this);
if (i.val() == ''
|| i.val() == i.attr('placeholder'))
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('blur', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == '')
i
.addClass('polyfill-placeholder')
.val(i.attr('placeholder'));
})
.on('focus', function() {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
return;
if (i.val() == i.attr('placeholder'))
i
.removeClass('polyfill-placeholder')
.val('');
});
// Password.
$this.find('input[type=password]')
.each(function() {
var i = $(this);
var x = $(
$('<div>')
.append(i.clone())
.remove()
.html()
.replace(/type="password"/i, 'type="text"')
.replace(/type=password/i, 'type=text')
);
if (i.attr('id') != '')
x.attr('id', i.attr('id') + '-polyfill-field');
if (i.attr('name') != '')
x.attr('name', i.attr('name') + '-polyfill-field');
x.addClass('polyfill-placeholder')
.val(x.attr('placeholder')).insertAfter(i);
if (i.val() == '')
i.hide();
else
x.hide();
i
.on('blur', function(event) {
event.preventDefault();
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
});
x
.on('focus', function(event) {
event.preventDefault();
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
x.hide();
i
.show()
.focus();
})
.on('keypress', function(event) {
event.preventDefault();
x.val('');
});
});
// Events.
$this
.on('submit', function() {
$this.find('input[type=text],input[type=password],textarea')
.each(function(event) {
var i = $(this);
if (i.attr('name').match(/-polyfill-field$/))
i.attr('name', '');
if (i.val() == i.attr('placeholder')) {
i.removeClass('polyfill-placeholder');
i.val('');
}
});
})
.on('reset', function(event) {
event.preventDefault();
$this.find('select')
.val($('option:first').val());
$this.find('input,textarea')
.each(function() {
var i = $(this),
x;
i.removeClass('polyfill-placeholder');
switch (this.type) {
case 'submit':
case 'reset':
break;
case 'password':
i.val(i.attr('defaultValue'));
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
if (i.val() == '') {
i.hide();
x.show();
}
else {
i.show();
x.hide();
}
break;
case 'checkbox':
case 'radio':
i.attr('checked', i.attr('defaultValue'));
break;
case 'text':
case 'textarea':
i.val(i.attr('defaultValue'));
if (i.val() == '') {
i.addClass('polyfill-placeholder');
i.val(i.attr('placeholder'));
}
break;
default:
i.val(i.attr('defaultValue'));
break;
}
});
});
return $this;
};
/**
* Moves elements to/from the first positions of their respective parents.
* @param {jQuery} $elements Elements (or selector) to move.
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
*/
$.prioritize = function($elements, condition) {
var key = '__prioritize';
// Expand $elements if it's not already a jQuery object.
if (typeof $elements != 'jQuery')
$elements = $($elements);
// Step through elements.
$elements.each(function() {
var $e = $(this), $p,
$parent = $e.parent();
// No parent? Bail.
if ($parent.length == 0)
return;
// Not moved? Move it.
if (!$e.data(key)) {
// Condition is false? Bail.
if (!condition)
return;
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
$p = $e.prev();
// Couldn't find anything? Means this element's already at the top, so bail.
if ($p.length == 0)
return;
// Move element to top of parent.
$e.prependTo($parent);
// Mark element as moved.
$e.data(key, $p);
}
// Moved already?
else {
// Condition is true? Bail.
if (condition)
return;
$p = $e.data(key);
// Move element back to its original location (using our placeholder).
$e.insertAfter($p);
// Unmark element as moved.
$e.removeData(key);
}
});
};
})(jQuery);

47
solution/site/scripts/mockup/tpl-story/assets/sass/base/_page.scss Normal file
View File

@ -0,0 +1,47 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Basic */
// MSIE: Required for IEMobile.
@-ms-viewport {
width: device-width;
}
// MSIE: Prevents scrollbar from overlapping content.
body {
-ms-overflow-style: scrollbar;
}
// Ensures page width is always >=320px.
@include breakpoint('<=xsmall') {
html, body {
min-width: 320px;
}
}
// Set box model to border-box.
// Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: _palette(bg);
// Stops initial animations until page loads.
&.is-preload {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
}
}
}

76
solution/site/scripts/mockup/tpl-story/assets/sass/base/_reset.scss Normal file
View File

@ -0,0 +1,76 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
// Reset.
// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain)
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes: none;
&:before,
&:after {
content: '';
content: none;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
mark {
background-color: transparent;
color: inherit;
}
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input, select, textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
}

231
solution/site/scripts/mockup/tpl-story/assets/sass/base/_typography.scss Normal file
View File

@ -0,0 +1,231 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Type */
html {
font-size: 18pt;
@include breakpoint('<=xlarge') {
font-size: 14pt;
}
@include breakpoint('<=large') {
font-size: 12pt;
}
@include breakpoint('<=small') {
font-size: 11pt;
}
@include breakpoint('<=xxsmall') {
font-size: 10pt;
}
}
body {
background-color: _palette(bg);
color: _palette(fg);
}
body, input, select, textarea {
font-family: _font(family);
font-size: 1rem;
font-weight: _font(weight);
line-height: 1.65;
}
a {
@include vendor('transition', 'color #{_duration(transition)} ease-in-out');
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
strong, b {
font-weight: _font(weight-bold);
}
em, i {
font-style: italic;
}
p {
margin: 0 0 _size(element-margin) 0;
&.major {
font-size: 1.25rem;
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: _font(weight);
line-height: 1.375;
letter-spacing: _font(kerning);
margin: 0 0 (_size(element-margin) * 0.5) 0;
a {
color: inherit;
text-decoration: none;
}
}
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
h2 {
font-size: 2.25rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.1rem;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.7rem;
}
sub {
font-size: 0.8rem;
position: relative;
top: 0.5rem;
}
sup {
font-size: 0.8rem;
position: relative;
top: -0.5rem;
}
blockquote {
border-left: solid (_size(border-width) * 4);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
}
code {
border-radius: _size(border-radius);
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0.25rem;
padding: 0.25rem 0.325rem;
}
pre {
-webkit-overflow-scrolling: touch;
font-family: _font(family-fixed);
font-size: 0.9em;
margin: 0 0 _size(element-margin) 0;
code {
display: block;
line-height: 1.5;
padding: 0.75rem 1rem;
overflow-x: auto;
}
}
hr {
border: 0;
border-bottom: solid _size(border-width);
margin: (_size(element-margin) * 1.25) 0;
&.major {
margin: (_size(element-margin) * 1.75) 0;
}
}
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
@include breakpoint('<=small') {
p {
&.major {
font-size: 1.1rem;
}
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 1rem;
}
}
@mixin color-typography($p: null) {
@if $p != null {
background-color: _palette($p, bg);
color: _palette($p, fg);
}
input, select, textarea {
color: _palette($p, fg-bold);
}
a {
color: _palette($p, fg-bold);
&:hover {
color: _palette($p, accent);
}
}
strong, b {
color: _palette($p, fg-bold);
}
h1, h2, h3, h4, h5, h6 {
color: _palette($p, fg-bold);
}
blockquote {
border-left-color: _palette($p, border);
}
code {
background: _palette($p, border-bg);
border-color: _palette($p, border);
}
hr {
border-bottom-color: _palette($p, border);
}
}
@include color-typography;

101
solution/site/scripts/mockup/tpl-story/assets/sass/components/_actions.scss Normal file
View File

@ -0,0 +1,101 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Actions */
ul.actions {
@include vendor('display', 'flex');
cursor: default;
list-style: none;
margin-left: (_size(element-margin) * -0.5);
padding-left: 0;
li {
padding: 0 0 0 (_size(element-margin) * 0.5);
vertical-align: middle;
}
&.special {
@include vendor('justify-content', 'center');
width: 100%;
margin-left: 0;
li {
&:first-child {
padding-left: 0;
}
}
}
&.stacked {
@include vendor('flex-direction', 'column');
margin-left: 0;
li {
padding: (_size(element-margin) * 0.65) 0 0 0;
&:first-child {
padding-top: 0;
}
}
}
&.fit {
width: calc(100% + #{_size(element-margin) * 0.5});
li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 100%;
> * {
width: 100%;
}
}
&.stacked {
width: 100%;
}
}
@include breakpoint('<=xsmall') {
&:not(.fixed) {
@include vendor('flex-direction', 'column');
margin-left: 0;
width: 100% !important;
li {
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
width: 100%;
> * {
width: 100%;
}
&:first-child {
padding-top: 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
width: 100%;
&.icon {
&:before {
margin-left: -0.5rem;
}
}
}
}
}
}
}

990
solution/site/scripts/mockup/tpl-story/assets/sass/components/_banner.scss Normal file
View File

@ -0,0 +1,990 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Banner (transitions) */
.banner {
// Mixin.
@mixin transition-banner($event) {
$x: null;
$y: null;
@if ($event == 'load') {
$x: 'body.is-preload &';
$y: _duration(on-load);
}
@else if ($event == 'scroll') {
$x: '&.is-inactive';
$y: _duration(on-scroll);
}
// Content.
&.on#{$event}-content-fade-up {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateY(1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-down {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateY(-1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-left {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateX(1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-right {
.content {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
}
#{$x} {
.content {
@include vendor('transform', 'translateX(-1rem)');
opacity: 0;
}
}
}
&.on#{$event}-content-fade-in {
.content {
@include vendor('transition', 'opacity #{$y} ease-in-out');
}
#{$x} {
.content {
opacity: 0;
}
}
}
// Image.
&.on#{$event}-image-fade-up {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateY(1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-down {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateY(-1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-left {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateX(1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-right {
.image {
@include vendor('transition', (
'opacity #{$y} ease-in-out',
'transform #{$y} ease-in-out'
));
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
@include vendor('transition-delay', '#{$y * 0.75}');
}
}
#{$x} {
.image {
@include vendor('transform', 'translateX(-1rem)');
opacity: 0;
img {
opacity: 0;
}
}
}
}
&.on#{$event}-image-fade-in {
.image {
img {
@include vendor('transition', 'opacity #{$y} ease-in-out');
}
}
#{$x} {
.image {
img {
opacity: 0;
}
}
}
}
}
// On Load.
@include transition-banner('load');
// On Scroll.
@include transition-banner('scroll');
}
/* Banner (style1) */
.banner.style1 {
@include vendor('align-items', 'stretch');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row');
@include vendor('justify-content', 'flex-end');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-self', 'center');
@include vendor('flex-grow', '1');
@include vendor('flex-shrink', '1');
width: 50%;
max-width: (_size(inner) * 0.75);
margin: 0 auto;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
border-radius: 0;
width: 50%;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
.content {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
}
@include breakpoint('<=large') {
.content {
@include padding(_size(padding, large), _size(padding, large));
}
}
@include breakpoint('<=medium') {
.content {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
}
}
@include breakpoint('<=small') {
.content {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
}
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
width: 100%;
max-width: 100%;
}
.image {
width: 100%;
max-width: 100%;
height: 45vh;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
@include orientation(portrait) {
.content {
min-height: 50vh;
}
.image {
height: 50vh;
}
}
}
// Orientation.
&.orient-left {
// ...
}
&.orient-right {
@include vendor('flex-direction', 'row-reverse');
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
}
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
@include orientation(portrait) {
text-align: center;
}
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
.image {
img {
// ...
}
}
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style2) */
.banner.style2 {
@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('justify-content', 'center');
background-color: inherit;
position: relative;
text-align: center;
overflow-x: hidden;
.content {
@include padding(_size(padding, default) * 0.75, _size(padding, default) * 0.75);
position: relative;
width: (_size(inner) * 0.625);
max-width: 100%;
background-color: inherit;
border-radius: _size(border-radius-alt);
margin-bottom: _size(element-margin);
z-index: 1;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 0;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
.content {
@include padding(_size(padding, xlarge) * 0.75, _size(padding, xlarge) * 0.75);
}
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large) * 0.75);
.content {
@include padding(_size(padding, large), _size(padding, large) * 0.75);
}
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium), _size(padding, medium));
.content {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium) * 0.75);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small), _size(padding, small));
.content {
@include padding(_size(padding, small) * 1.25, _size(padding, small) * 0.75);
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Orientation.
&.orient-left {
@include vendor('justify-content', 'flex-start');
padding-left: 0;
.content {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
&.orient-center {
// ...
}
&.orient-right {
@include vendor('justify-content', 'flex-end');
padding-right: 0;
.content {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
// Content Alignment.
&.content-align-left {
text-align: left;
}
&.content-align-center {
// ...
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
.image {
img {
// ...
}
}
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style3) */
.banner.style3 {
$image-size: 21rem;
$content-size: (_size(inner) * 0.875) - $image-size - (_size(element-margin) * 1.75);
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row-reverse');
@include vendor('justify-content', 'center');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
width: $content-size;
max-width: 100%;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
width: $image-size;
height: $image-size;
border-radius: 100%;
margin: 0 (_size(element-margin) * 1.75) _size(element-margin) 0;
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
width: 100%;
height: 100%;
border-radius: 100%;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
.image {
width: ($image-size * 0.875);
height: ($image-size * 0.875);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
@include vendor('align-items', 'flex-start');
.image {
width: ($image-size * 0.75);
height: ($image-size * 0.75);
margin: 0 (_size(element-margin) * 1) _size(element-margin) 0;
}
}
@include orientation(portrait) {
@include vendor('align-items', 'center');
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
width: 34rem;
max-width: 100%;
}
.image {
margin-right: 0;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Orientation.
&.orient-left {
@include vendor('flex-direction', 'row');
.image {
margin: 0 0 _size(element-margin) (_size(element-margin) * 1.75);
}
@include breakpoint('<=small') {
.image {
margin: 0 0 _size(element-margin) (_size(element-margin) * 1);
}
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
.image {
margin-left: 0;
}
}
}
&.orient-right {
// ...
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style4) */
.banner.style4 {
$image-width: 13rem;
$content-size: (_size(inner) * 0.75) - $image-width - (_size(element-margin) * 1.75);
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('flex-direction', 'row-reverse');
@include vendor('justify-content', 'center');
position: relative;
text-align: left;
overflow-x: hidden;
.content {
width: $content-size;
max-width: 100%;
}
.image {
@include phone($image-width);
margin-right: (_size(element-margin) * 1.75);
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
.image {
@include resize-phone($image-width, 0.875);
}
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
@include vendor('align-items', 'flex-start');
.image {
@include resize-phone($image-width, 0.625);
}
}
@include orientation(portrait) {
@include vendor('align-items', 'center');
@include vendor('flex-direction', 'column-reverse');
text-align: center;
.content {
width: 34rem;
max-width: 100%;
}
.image {
margin-right: 0;
margin-left: 0;
}
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Variant.
&.iphone {
// ...
}
&.android {
// ...
}
// Orientation.
&.orient-left {
@include vendor('flex-direction', 'row');
.image {
margin-right: 0;
margin-left: (_size(element-margin) * 1.75);
}
@include orientation(portrait) {
@include vendor('flex-direction', 'column-reverse');
.image {
margin-right: 0;
margin-left: 0;
}
}
}
&.orient-right {
// ...
}
// Content Alignment.
&.content-align-left {
// ...
}
&.content-align-center {
text-align: center;
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
/* Banner (style5) */
.banner.style5 {
@include padding(_size(padding, default), _size(padding, default));
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
@include vendor('justify-content', 'center');
background-color: inherit;
position: relative;
text-align: center;
overflow-x: hidden;
.content {
position: relative;
width: (_size(inner) * 0.625);
max-width: 100%;
margin-bottom: _size(element-margin);
z-index: 1;
}
.image {
@include vendor('flex-grow', '0');
@include vendor('flex-shrink', '0');
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 0;
opacity: _misc(overlay-opacity);
img {
@include vendor('object-fit', 'cover');
@include vendor('object-position', 'center');
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0;
}
}
@include breakpoint('<=xlarge') {
@include padding(_size(padding, xlarge), _size(padding, xlarge));
}
@include breakpoint('<=large') {
@include padding(_size(padding, large), _size(padding, large));
}
@include breakpoint('<=medium') {
@include padding(_size(padding, medium) * 1.25, _size(padding, medium));
}
@include breakpoint('<=small') {
@include padding(_size(padding, small) * 1.25, _size(padding, small));
}
// Modifiers.
// Size.
&.fullscreen {
min-height: 100vh;
}
// Content Alignment.
&.content-align-left {
text-align: left;
}
&.content-align-center {
// ...
}
&.content-align-right {
text-align: right;
}
// Image Position.
&.image-position-left {
.image {
img {
@include vendor('object-position', 'left');
}
}
}
&.image-position-center {
// ...
}
&.image-position-right {
.image {
img {
@include vendor('object-position', 'right');
}
}
}
}
// Mixin
@mixin color-banner($p: null) {
.banner {
.image {
background-color: transparentize(_palette($p, fg-bold), 0.875);
}
@if ($p != 'invert') {
&.invert {
.image {
background-color: transparentize(_palette(invert, fg-bold), 0.875);
}
}
}
}
.banner.style4 {
.image {
@include color-phone($p);
}
// Variant.
&.iphone {
.image {
@include color-phone-variant('iphone', $p);
}
}
&.android {
.image {
@include color-phone-variant('android', $p);
}
}
@if ($p != 'invert') {
&.invert {
.image {
@include color-phone(invert);
}
// Variant.
&.iphone {
.image {
@include color-phone-variant('iphone', invert);
}
}
&.android {
.image {
@include color-phone-variant('android', invert);
}
}
}
}
}
}
@include color-banner;

34
solution/site/scripts/mockup/tpl-story/assets/sass/components/_box.scss Normal file
View File

@ -0,0 +1,34 @@
///
/// Story by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///
/* Box */
.box {
border-radius: _size(border-radius);
border: solid _size(border-width);
margin-bottom: _size(element-margin);
padding: 1.5rem;
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
}
&.alt {
border: 0;
border-radius: 0;
padding: 0;
}
}
@mixin color-box($p: null) {
.box {
border-color: _palette($p, border);
}
}
@include color-box;

Some files were not shown because too many files have changed in this diff Show More