7a73e6c5a9
- contact@sam.co.kr 행 삭제 - 무료 데모 관련 행 삭제 - www.sam.co.kr → www.sam.it.kr 변경 - v1~v9 1page + 2page PPTX 전체 재생성
172 lines
12 KiB
HTML
172 lines
12 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: #0B1929;
|
|
padding: 28pt 24pt 20pt 24pt;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
|
|
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
|
|
<div style="flex: 1;"></div>
|
|
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION</p>
|
|
</div>
|
|
|
|
<!-- 히어로 섹션 -->
|
|
<div style="margin-bottom: 22pt;">
|
|
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 6pt;">EXECUTIVE DASHBOARD</p>
|
|
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
|
|
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.45); line-height: 1.6;">매출이 얼마인지, 수주가 밀려있는지, 승인할 건이 있는지<br>더 이상 보고를 기다리지 마세요.</p>
|
|
</div>
|
|
|
|
<!-- 구분선 -->
|
|
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 18pt;"></div>
|
|
|
|
<!-- 고민 섹션 -->
|
|
<div style="margin-bottom: 18pt;">
|
|
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #EF4444; margin-bottom: 8pt;">대표님의 하루</p>
|
|
<div style="display: flex; flex-direction: column; gap: 4pt;">
|
|
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
|
|
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">AM 9:00</p>
|
|
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"어제 매출 얼마야?" → <span style="color: #EF4444; font-weight: 600;">팀장 보고 대기중...</span></p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
|
|
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 2:00</p>
|
|
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"수주 밀린 거 없어?" → <span style="color: #EF4444; font-weight: 600;">Excel 취합중...</span></p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 7pt 10pt;">
|
|
<p style="white-space: nowrap; font-size: 9pt; color: rgba(255,255,255,0.3);">PM 5:00</p>
|
|
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">"결재할 것 좀 정리해줘" → <span style="color: #EF4444; font-weight: 600;">서류 찾는중...</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 화살표 구분 -->
|
|
<div style="text-align: center; margin-bottom: 14pt;">
|
|
<p style="font-size: 10pt; color: rgba(14,165,233,0.6);">▼</p>
|
|
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">SAM으로 바꾸면</p>
|
|
</div>
|
|
|
|
<!-- 대시보드 미리보기 (Mock UI) -->
|
|
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt; margin-bottom: 18pt;">
|
|
<!-- 대시보드 타이틀바 -->
|
|
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 7pt;">
|
|
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #EF4444;"></div>
|
|
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #F59E0B;"></div>
|
|
<div style="width: 5pt; height: 5pt; border-radius: 50%; background: #10B981;"></div>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-left: 6pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
|
|
</div>
|
|
<!-- KPI 카드 -->
|
|
<div style="display: flex; gap: 4pt; margin-bottom: 5pt;">
|
|
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">5.2억</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(16,185,129,0.12); border: 1pt solid rgba(16,185,129,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">누적 수주</p>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">127건</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(139,92,246,0.12); border: 1pt solid rgba(139,92,246,0.2); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">96%</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(239,68,68,0.15); border: 1pt solid rgba(239,68,68,0.25); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
|
</div>
|
|
</div>
|
|
<!-- 차트 (바 그래프) -->
|
|
<div style="display: flex; gap: 4pt;">
|
|
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">월별 매출 추이</p>
|
|
<div style="display: flex; align-items: flex-end; gap: 2pt; height: 30pt;">
|
|
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1pt; height: 45%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1pt; height: 52%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1pt; height: 48%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1pt; height: 62%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.55); border-radius: 1pt; height: 68%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.65); border-radius: 1pt; height: 75%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1pt; height: 72%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1pt; height: 85%;"></div>
|
|
<div style="flex: 1; background: rgba(14,165,233,0.85); border-radius: 1pt; height: 80%;"></div>
|
|
<div style="flex: 1; background: #0EA5E9; border-radius: 1pt; height: 95%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
|
|
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-bottom: 3pt;">조직별 실적</p>
|
|
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
|
<div style="display: flex; align-items: center; gap: 3pt;">
|
|
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 50%;"></div>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업1팀</p>
|
|
<div style="flex: 1; height: 4pt; background: rgba(14,165,233,0.15); border-radius: 2pt; overflow: hidden;">
|
|
<div style="width: 85%; height: 100%; background: #0EA5E9; border-radius: 2pt;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 3pt;">
|
|
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 50%;"></div>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">영업2팀</p>
|
|
<div style="flex: 1; height: 4pt; background: rgba(16,185,129,0.15); border-radius: 2pt; overflow: hidden;">
|
|
<div style="width: 68%; height: 100%; background: #10B981; border-radius: 2pt;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 3pt;">
|
|
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 50%;"></div>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45); width: 28pt;">생산팀</p>
|
|
<div style="flex: 1; height: 4pt; background: rgba(139,92,246,0.15); border-radius: 2pt; overflow: hidden;">
|
|
<div style="width: 92%; height: 100%; background: #8B5CF6; border-radius: 2pt;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 핵심 가치 -->
|
|
<div style="background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 14pt;">
|
|
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">SAM 대시보드가 드리는 약속</p>
|
|
<p style="font-size: 8pt; color: rgba(255,255,255,0.5); line-height: 1.6;">
|
|
로그인 한 번이면 전사 매출, 수주, 조직 실적, 승인 대기 건수를
|
|
한눈에 파악합니다. 보고를 기다리는 시간을 제로로 만들어 드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 기술 태그 -->
|
|
<div style="display: flex; gap: 5pt; margin-bottom: 10pt;">
|
|
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">클라우드 기반 (설치 불필요)</p>
|
|
</div>
|
|
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">모바일 대응</p>
|
|
</div>
|
|
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 4pt 8pt;">
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">역할별 권한 분리</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 푸터 -->
|
|
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.06); padding-top: 10pt;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div>
|
|
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: rgba(255,255,255,0.65);">SAM</p>
|
|
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.sam.it.kr</p>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">뒷면에서 상세 기능을 확인하세요</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |