132c573ab9
- html2pptx가 CSS gradient 검출 시 슬라이드 생성 전에 throw하여 빈 PPTX 생성됨 - body background를 단색(#1A1640)으로 변경, 그래디언트는 convert 스크립트에서 PNG로 덮어쓰기 - 구분선 gradient도 solid rgba로 교체
216 lines
16 KiB
HTML
216 lines
16 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: #1A1640;
|
|
padding: 26pt 22pt 16pt 22pt;
|
|
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>
|
|
<div style="background: rgba(251,191,36,0.12); border: 1pt solid rgba(251,191,36,0.25); border-radius: 3pt; padding: 2pt 7pt;">
|
|
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FBBF24; letter-spacing: 0.08em;">EXECUTIVE EDITION</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 히어로 섹션 -->
|
|
<div style="margin-bottom: 20pt;">
|
|
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #FBBF24; letter-spacing: 0.12em; margin-bottom: 6pt;">CEO DASHBOARD</p>
|
|
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님의 시간은<br>보고를 기다리는 데<br>쓰여선 안 됩니다.</h1>
|
|
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.55;">로그인 3초. 매출, 수주, 승인 대기까지<br>모든 경영 현황이 한 화면에.</p>
|
|
</div>
|
|
|
|
<!-- 잃어버린 시간 카드 -->
|
|
<div style="margin-bottom: 16pt;">
|
|
<div style="display: flex; gap: 4pt;">
|
|
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
|
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
|
<circle cx="12" cy="12" r="9" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
|
<path d="M12 7 L12 12 L16 14" fill="none" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">1~2일</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">매출 보고 대기</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
|
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
|
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
|
<line x1="8" y1="8" x2="16" y2="8" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="8" y1="11" x2="14" y2="11" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
|
<line x1="8" y1="14" x2="12" y2="14" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">반나절</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">Excel 수주 취합</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
|
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
|
<path d="M12 3 C7 3 3 7 3 11 L3 15 L1 17 L23 17 L21 15 L21 11 C21 7 17 3 12 3 Z" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
|
<path d="M9 18 Q12 21 15 18" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">30분</p>
|
|
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">결재 서류 찾기</p>
|
|
</div>
|
|
</div>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(239,68,68,0.5); text-align: center; margin-top: 4pt;">매일 반복되는 비효율, SAM이 제로로 만듭니다.</p>
|
|
</div>
|
|
|
|
<!-- 전환 -->
|
|
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 14pt;">
|
|
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
|
<div style="background: rgba(251,191,36,0.1); border: 1pt solid rgba(251,191,36,0.2); border-radius: 4pt; padding: 3pt 10pt;">
|
|
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24;">SAM 도입 후</p>
|
|
</div>
|
|
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
|
</div>
|
|
|
|
<!-- 대시보드 Mock UI (글래스모피즘) -->
|
|
<div style="background: rgba(255,255,255,0.05); border: 1pt solid rgba(255,255,255,0.1); border-radius: 8pt; padding: 10pt; margin-bottom: 16pt;">
|
|
<!-- 타이틀바 -->
|
|
<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: 5.5pt; color: rgba(255,255,255,0.2); margin-left: 5pt;">SAM CEO Dashboard</p>
|
|
</div>
|
|
<!-- KPI 카드 -->
|
|
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
|
<div style="flex: 1; background: rgba(251,191,36,0.08); border: 1pt solid rgba(251,191,36,0.15); border-radius: 5pt; 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="#FBBF24" opacity="0.4"/>
|
|
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#FBBF24" opacity="0.65"/>
|
|
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#FBBF24"/>
|
|
</svg>
|
|
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FBBF24;">5.2억</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">월 매출</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 5pt; 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="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: 12pt; font-weight: 800; color: #fff;">127건</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 5pt; 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="#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: 12pt; font-weight: 800; color: #fff;">96%</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
|
</div>
|
|
<div style="flex: 1; background: rgba(239,68,68,0.1); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; 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="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: 12pt; font-weight: 800; color: #EF4444;">5건</p>
|
|
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">승인 대기</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.25); margin-bottom: 2pt;">월별 매출 추이</p>
|
|
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
|
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
|
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad5)" opacity="0.4"/>
|
|
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="122" cy="4" r="2" fill="#FBBF24"/>
|
|
<defs>
|
|
<linearGradient id="fGrad5" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#FBBF24" stop-opacity="0.3"/>
|
|
<stop offset="100%" stop-color="#FBBF24" stop-opacity="0"/>
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt; display: flex; align-items: center; gap: 5pt;">
|
|
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
|
|
<circle cx="20" cy="20" r="14" fill="none" stroke="#FBBF24" stroke-width="5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
|
|
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
|
|
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
|
|
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="5" 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: #FBBF24; border-radius: 1pt;"></div>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업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: rgba(255,255,255,0.4);">영업2팀</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 2pt;">
|
|
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 2pt;">
|
|
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
|
|
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">품질팀</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 약속 박스 (골드 강조) -->
|
|
<div style="background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.15); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 14pt;">
|
|
<div style="display: flex; align-items: center; gap: 6pt;">
|
|
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
|
<circle cx="11" cy="11" r="9" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.4"/>
|
|
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#FBBF24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<div>
|
|
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #FBBF24;">대표님께 드리는 약속</p>
|
|
<p style="font-size: 7pt; color: rgba(255,255,255,0.45); margin-top: 2pt; line-height: 1.5;">보고를 기다리는 시간을 제로로.<br>의사결정에만 집중하실 수 있도록.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 기술 태그 -->
|
|
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
|
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
|
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(251,191,36,0.5)"/></svg>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">클라우드 기반</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
|
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(251,191,36,0.5)"/></svg>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
|
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.5"/></svg>
|
|
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 푸터 -->
|
|
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 8pt;">
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
|
<div>
|
|
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">(주)코드브릿지엑스</p>
|
|
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.codebridge-x.com</p>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |