SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sam-docs/brochure/v9/slides/brochure-dashboard-front.html
김보곤 7a73e6c5a9 docs: [brochure] v1~v9 contact 이메일/무료 데모 삭제, 도메인 sam.it.kr 변경 및 PPTX 재생성 
- contact@sam.co.kr 행 삭제
- 무료 데모 관련 행 삭제
- www.sam.co.kr → www.sam.it.kr 변경
- v1~v9 1page + 2page PPTX 전체 재생성
2026-03-03 19:11:01 +09:00

181 lines
12 KiB
HTML
Raw Permalink Blame History

<!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: 32pt 28pt 18pt 32pt;
display: flex; flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<!-- Left accent line -->
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 28pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
</div>
<!-- Hero section -->
<div style="margin-bottom: 28pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 8pt;">EXECUTIVE DASHBOARD</p>
<p style="white-space: nowrap; font-size: 18pt; font-weight: 300; color: #0F172A; margin-bottom: 3pt;">대표님, 우리 회사</p>
<p style="white-space: nowrap; font-size: 18pt; font-weight: 800; color: #0F172A; margin-bottom: 10pt;">지금 어떤 상태인가요?</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">매출, 수주, 조직 실적, 승인 대기</p>
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 24pt;"></div>
<!-- Dashboard Mock UI -->
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 10pt; margin-bottom: 24pt;">
<!-- Title bar -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 7pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI cards -->
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
<!-- Revenue -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #6366F1;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+15.3%</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">월 매출</p>
</div>
<!-- Orders -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.5"/>
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #10B981;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+8건</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
</div>
<!-- Delivery -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.3"/>
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="1" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #818CF8;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- Pending -->
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="0.8" stroke-linejoin="round"/>
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="10.5" r="0.5" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- Chart area -->
<div style="display: flex; gap: 4pt;">
<!-- Line chart -->
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt;">
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-bottom: 3pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 32" width="100%" height="24pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="150" y2="10" stroke="#F1F5F9" stroke-width="0.5"/>
<line x1="0" y1="20" x2="150" y2="20" stroke="#F1F5F9" stroke-width="0.5"/>
<path d="M5 28 L18 22 L31 24 L44 18 L57 14 L70 10 L83 12 L96 6 L109 8 L122 2 L135 5" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="2" r="1.8" fill="#6366F1"/>
</svg>
</div>
<!-- Donut -->
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt; display: flex; align-items: center; gap: 4pt;">
<svg viewBox="0 0 40 40" width="28pt" height="28pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="14" fill="none" stroke="#F1F5F9" stroke-width="4"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#6366F1" stroke-width="4" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#818CF8" stroke-width="4" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3 value proposition cards -->
<div style="display: flex; gap: 6pt; margin-bottom: 24pt;">
<!-- Instant insight -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="9" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<path d="M12 6 L12 12 L16 15" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">로그인 3초면</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">전사 현황 확인</p>
</div>
<!-- Data-driven -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<rect x="3" y="14" width="4" height="7" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
<rect x="10" y="8" width="4" height="13" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
<rect x="17" y="3" width="4" height="18" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">감이 아닌 숫자로</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">KPI/팀 성과 비교</p>
</div>
<!-- Mobile approval -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">이동중에도 즉시</p>
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">결재/승인 처리</p>
</div>
</div>
<!-- Footer -->
<div style="margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0F172A;">SAM</p>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.sam.it.kr</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">뒷면에서 상세 기능을 확인하세요</p>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink