Completion
원본: projects/skill-lens/design/components/Completion/README.md
상태: In Progress, 접근성 ✓, 다크 보류, 코드 ✗
마침(8판 confirm~2): 입구 틀, 제목 36, 요약 줄 + 버튼 둘
큰 단계가 끝났을 때의 마침 화면입니다. 원본은 8판 confirm~2(.done). 입구와 같은 틀(sl-entry sl-entry--done)에 제목, 요약 줄, 버튼 둘.
쓰는 곳
초대 전송, 진단 제출.
구성(화면이 넘겨줄 것)
제목(무엇이 시작됐는지), 설명, 요약 줄(sl-summary--rows), 주 버튼과 보조 버튼(sl-done-actions), 렌즈 자리에 MARK('merge').
규칙
- 제목 36/44(폰 같음), 카드는 흰 78% + 먹색 8% 테.
- 렌즈는 포개지는 것으로 끝나고 체크 표시는 없습니다(결정 44). 완료 점(
sl-done)은 보라. - 차례 목록(
sl-done-list, 8판 회사 조회 연출): 둥근 체크, 지금 줄은 보라 링, 남은 줄은 회색, 오른쪽에 결과 한 줄. - 폭죽은 쓰지 않습니다. 문장은 보고형.
- 옛 가운데 꼴(
sl-done-screen)은 호환용입니다.
접근성
- 움직임 줄이기에서는 렌즈가 포개진 채로 보입니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Layout" height=900 width=1366 subtitle="마침(8판 confirm~2): 입구 틀, 제목 36, 요약 줄 + 버튼 둘" -->
<style>body{margin:0}</style>
<div class="sl sl-entry sl-entry--done">
<div class="sl-entry__lens" aria-hidden="true"><svg viewBox="0 0 240 240" role="img" aria-label="SkillLens"><defs><linearGradient id="mk3-gb" x1="0.7" y1="0" x2="0.25" y2="1"><stop offset="0" stop-color="#eceeff"/><stop offset="0.22" stop-color="#9a9cf8"/><stop offset="0.5" stop-color="#5450e9"/><stop offset="0.8" stop-color="#4f46e5"/><stop offset="1" stop-color="#4a44d8"/></linearGradient><linearGradient id="mk3-gbe" x1="0" y1="0.2" x2="1" y2="0.8"><stop offset="0" stop-color="#f3f4ff"/><stop offset="0.35" stop-color="#cdd2ff" stop-opacity="0.9"/><stop offset="1" stop-color="#8f93f7" stop-opacity="0.3"/></linearGradient><radialGradient id="mk3-gbg" cx="0.72" cy="0.18" r="0.75"><stop offset="0" stop-color="#fff" stop-opacity="0.55"/><stop offset="0.45" stop-color="#fff" stop-opacity="0.12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="mk3-gbs" cx="0.35" cy="0.85" r="0.7"><stop offset="0" stop-color="#2e2bb8" stop-opacity="0.35"/><stop offset="1" stop-color="#2e2bb8" stop-opacity="0"/></radialGradient><linearGradient id="mk3-gf" x1="0.1" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.5"/><stop offset="0.5" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.78" stop-color="#f3ffe2"/><stop offset="0.92" stop-color="#d3ff9a"/><stop offset="1" stop-color="#b6ff75"/></linearGradient><linearGradient id="mk3-go" x1="0.15" y1="0" x2="0.85" y2="1"><stop offset="0" stop-color="#b3ecff"/><stop offset="0.28" stop-color="#5fb0ff"/><stop offset="0.6" stop-color="#3f4fe3"/><stop offset="0.85" stop-color="#5f74f0"/><stop offset="1" stop-color="#8d9cf5"/></linearGradient><linearGradient id="mk3-ge" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#fff"/><stop offset="0.6" stop-color="#fff" stop-opacity="0.85"/><stop offset="1" stop-color="#eaffd4" stop-opacity="0.4"/></linearGradient><clipPath id="mk3-cb"><ellipse cx="-24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath><clipPath id="mk3-cbi"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" ><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath><clipPath id="mk3-cf"><ellipse cx="24" cy="0" rx="84" ry="98" ><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></clipPath></defs><g transform="translate(120 120) rotate(28)"><g clip-path="url(#mk3-cb)"><ellipse cx="-24" cy="0" rx="84" ry="98" fill="url(#mk3-gbe)"><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><g clip-path="url(#mk3-cbi)"><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk3-gb)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk3-gbs)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="-21.5" cy="-1" rx="82" ry="96.5" fill="url(#mk3-gbg)"><animate attributeName="cx" from="-61.5" to="-21.5" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g></g><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk3-gf)"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk3-go)" clip-path="url(#mk3-cb)" opacity="0.93"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><g clip-path="url(#mk3-cf)"><ellipse cx="24" cy="0" rx="84" ry="98" fill="url(#mk3-ge)"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk3-gf)"><animate attributeName="cx" from="69" to="29" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="29" cy="-2" rx="82" ry="96" fill="url(#mk3-go)" clip-path="url(#mk3-cb)" opacity="0.93"><animate attributeName="cx" from="69" to="29" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g><ellipse cx="-24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.6"><animate attributeName="cx" from="-64" to="-24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse><ellipse cx="24" cy="0" rx="83.5" ry="97.5" fill="none" stroke="#fff" stroke-width="1" opacity="0.8"><animate attributeName="cx" from="64" to="24" dur="0.9s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.65 0 0.15 1"/></ellipse></g></svg></div>
<div class="sl-entry__top"><span class="sl-wordmark"><i class="sl-topbar__mark" aria-hidden="true"></i><span class="sl-wordmark__text">Sk<span class="r1">i</span><span class="r2">l</span><span class="r3">l</span>Lens</span></span></div>
<div class="sl-entry__work"><div class="sl-entry__col">
<div class="sl-entry__head"><h1 class="sl-entry__title sl-in"><span class="sl-accent">AI 전환 진단</span>을<br>시작했어요</h1><p class="sl-entry__desc sl-in sl-delay-1">1,248명에게 초대를 보냈어요. 응답 현황은 진단에서 확인할 수 있어요</p></div>
<div class="sl-entry__panel sl-in sl-delay-2"><div class="sl-summary sl-summary--rows">
<div class="sl-summary__row"><span>초대</span><b>1,248명, 못 보낸 0명</b></div>
<div class="sl-summary__row"><span>마감</span><b>11.19 (목)</b></div>
<div class="sl-summary__row"><span>다음 독려</span><b>11.10 (화)</b></div>
<div class="sl-summary__row"><span>보낸 사람</span><b>김담당 ([email protected])</b></div></div>
<div class="sl-done-actions"><button class="sl-btn sl-btn--primary">참여현황으로 <span class="sl-btn__arrow">→</span></button><button class="sl-btn sl-btn--secondary">홈으로</button></div></div>
</div></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.