4c9fd233cc
- v6: Corporate Blue & White (대기업/공공기관 스타일) - v7: Warm Gray + Teal (IT/SaaS 스타일) - v8: Two-Tone Navy/White Split (금융/컨설팅 스타일) - v9: Minimal White + Indigo (Apple/디자인 에이전시 스타일) - README.md에 v6~v9 디자인 컨셉 문서화
238 lines
18 KiB
HTML
238 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 405pt; height: 720pt;
|
|
font-family: 'Pretendard', sans-serif;
|
|
background: #FFFFFF;
|
|
padding: 0;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- ===== DARK ZONE (top ~240pt) ===== -->
|
|
<div style="background: #1E293B; padding: 20pt 20pt 16pt 20pt;">
|
|
<!-- 헤더 -->
|
|
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
|
|
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
|
|
<div style="flex: 1;"></div>
|
|
<div style="background: rgba(249,115,22,0.15); border: 1pt solid rgba(249,115,22,0.3); border-radius: 3pt; padding: 2pt 7pt;">
|
|
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">EXECUTIVE DASHBOARD</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 히어로 -->
|
|
<div style="margin-bottom: 14pt;">
|
|
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 4pt;">대표님, 우리 회사</h1>
|
|
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 6pt;">지금 어떤 상태인가요?</h1>
|
|
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.6); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
|
|
</div>
|
|
|
|
<!-- KPI 카드 4개 -->
|
|
<div style="display: flex; gap: 4pt;">
|
|
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
|
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
|
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.4"/>
|
|
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
|
|
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">5.2억</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
|
<p style="white-space: nowrap; font-size: 4pt; color: #F97316; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
|
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
|
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
|
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">127건</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
|
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
|
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
|
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
|
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">96%</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
|
<p style="white-space: nowrap; font-size: 4pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
|
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
|
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
|
|
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
|
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
|
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== WHITE ZONE ===== -->
|
|
<div style="flex: 1; padding: 14pt 20pt 10pt 20pt; display: flex; flex-direction: column;">
|
|
|
|
<!-- 대표님이 얻는 것 -->
|
|
<div style="margin-bottom: 10pt;">
|
|
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
|
<div style="display: flex; gap: 3pt;">
|
|
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
|
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
|
|
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">로그인 3초면</p>
|
|
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">전사 현황 확인</p>
|
|
</div>
|
|
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
|
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
|
|
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">감이 아닌 숫자로</p>
|
|
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">KPI/팀 성과 비교</p>
|
|
</div>
|
|
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
|
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
|
|
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">이동중에도 즉시</p>
|
|
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">결재/승인 처리</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 구분선 -->
|
|
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
|
|
|
<!-- 핵심 기능 7개 -->
|
|
<div style="margin-bottom: 10pt;">
|
|
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대시보드 핵심 기능</p>
|
|
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.45"/>
|
|
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
|
|
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">매출, 수주, 납기율, 승인</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<circle cx="8" cy="3.5" r="2" fill="none" stroke="#10B981" stroke-width="0.9"/>
|
|
<line x1="8" y1="5.5" x2="8" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
|
|
<line x1="4" y1="7.5" x2="12" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
|
|
<circle cx="4" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
|
<circle cx="8" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
|
<circle cx="12" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">계층별 팀/개인 실적</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<circle cx="8" cy="8" r="6" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3"/>
|
|
<text x="8" y="10" text-anchor="middle" fill="#8B5CF6" font-size="7" font-weight="800">₩</text>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">판매자/관리자/협업자</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #EF4444; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<path d="M8 2.5 C5 2.5 3 5 3 7.5 L3 10.5 L2 11.5 L14 11.5 L13 10.5 L13 7.5 C13 5 11 2.5 8 2.5 Z" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
|
<circle cx="12" cy="4" r="2.5" fill="#EF4444"/>
|
|
<text x="12" y="5.5" text-anchor="middle" fill="#fff" font-size="3.5" font-weight="700">!</text>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">미처리 빨간 뱃지</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #FB923C; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<path d="M3 12 L6 9 L8 10.5 L13 4" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M11 4 L13 4 L13 6" fill="none" stroke="#FB923C" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">당월/분기/연간 추이</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<rect x="2" y="3" width="12" height="10" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.4"/>
|
|
<line x1="4" y1="6" x2="11" y2="6" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
|
|
<line x1="4" y1="8" x2="9" y2="8" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
|
|
<circle cx="12" cy="11.5" r="2.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.7"/>
|
|
<path d="M11.2 11.5 L12.8 11.5 M12 10.7 L12 12.3" stroke="#F97316" stroke-width="0.7" stroke-linecap="round"/>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">가상 시나리오 계산</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
|
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<rect x="4.5" y="2" width="7" height="12" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.5"/>
|
|
<circle cx="8" cy="12.5" r="0.7" fill="#F97316" opacity="0.5"/>
|
|
<rect x="6" y="4.5" width="4" height="5.5" rx="0.5" fill="rgba(249,115,22,0.1)"/>
|
|
<rect x="6.5" y="5.2" width="3" height="1" rx="0.3" fill="#F97316" opacity="0.4"/>
|
|
<rect x="6.5" y="7" width="3" height="1" rx="0.3" fill="#10B981" opacity="0.4"/>
|
|
<rect x="6.5" y="8.8" width="3" height="1" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
|
|
</svg>
|
|
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">스마트폰 KPI/승인</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 구분선 -->
|
|
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
|
|
|
<!-- 투자 비용 -->
|
|
<div style="margin-bottom: 10pt;">
|
|
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">투자 비용</p>
|
|
<div style="display: flex; gap: 4pt;">
|
|
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #F97316; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
|
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #F97316; margin-bottom: 2pt;">기본 패키지</p>
|
|
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">2,000만원</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
|
|
</div>
|
|
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #FB923C; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
|
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #FB923C; margin-bottom: 2pt;">추가 옵션 (선택)</p>
|
|
<div style="display: flex; justify-content: space-between; margin-top: 2pt;">
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">생산공정 관리</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+500만원</p>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">품질관리(인정검사)</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+2,000만원</p>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between;">
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">AI 견적 자동 생성</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">월 10~20만원</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===== DARK CTA ZONE ===== -->
|
|
<div style="margin-top: auto; background: #1E293B; border-radius: 7pt; padding: 10pt 12pt;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display: flex; align-items: center; gap: 6pt;">
|
|
<svg viewBox="0 0 22 22" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<circle cx="11" cy="11" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.5"/>
|
|
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div>
|
|
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316;">contact@codebridge-x.com</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 회사명 -->
|
|
<div style="margin-top: 5pt; text-align: center;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8;">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |