refactor: [brochure] docs/brochure-vN → docs/brochure/vN 구조로 통합
- docs/brochure/ → docs/brochure/v1/ - docs/brochure-v2/ → docs/brochure/v2/ - docs/brochure-v3/ → docs/brochure/v3/ - docs/brochure-v4/ → docs/brochure/v4/ - docs 하위 폴더를 큰 단위로 유지
This commit is contained in:
김보곤
28
sam/docs/brochure/v2/convert-1page.cjs
Normal file
28
sam/docs/brochure/v2/convert-1page.cjs
Normal file
@@ -0,0 +1,28 @@
|
||||
const path = require('path');
|
||||
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
|
||||
|
||||
const PptxGenJS = require('pptxgenjs');
|
||||
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
// 9:16 세로형 (Portrait)
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
|
||||
console.log('Converting CEO Dashboard 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
32
sam/docs/brochure/v2/convert-2page.cjs
Normal file
32
sam/docs/brochure/v2/convert-2page.cjs
Normal file
@@ -0,0 +1,32 @@
|
||||
const path = require('path');
|
||||
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
|
||||
|
||||
const PptxGenJS = require('pptxgenjs');
|
||||
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
// 9:16 세로형 (Portrait)
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
const slidesDir = path.join(__dirname, 'slides');
|
||||
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
|
||||
|
||||
for (const file of slides) {
|
||||
const htmlFile = path.join(slidesDir, file);
|
||||
console.log(`Converting ${file} ...`);
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error on ${file}: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v2-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-1page.pptx
Normal file
BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-2page.pptx
Normal file
BIN
sam/docs/brochure/v2/sam-brochure-v2-dashboard-2page.pptx
Normal file
Binary file not shown.
261
sam/docs/brochure/v2/slides/brochure-dashboard-1page.html
Normal file
261
sam/docs/brochure/v2/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,261 @@
|
||||
<!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: 24pt 22pt 14pt 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<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>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">CEO DASHBOARD EDITION 2026</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="margin-bottom: 12pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 4pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 18pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 지금 우리 회사<br>어떻게 돌아가고 있나요?</h1>
|
||||
<p style="font-size: 8pt; color: rgba(255,255,255,0.45); line-height: 1.5;">보고를 기다리지 마세요. SAM 대시보드 하나면<br>매출, 수주, 조직 실적, 승인 대기까지 한눈에 파악합니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 대시보드 미리보기 (Mock UI) -->
|
||||
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.15); border-radius: 8pt; padding: 10pt; margin-bottom: 10pt;">
|
||||
<!-- 대시보드 타이틀바 -->
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 8pt;">
|
||||
<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</p>
|
||||
</div>
|
||||
<!-- KPI 카드 4개 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.12); border: 1pt solid rgba(14,165,233,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0EA5E9; font-weight: 600;">월 매출</p>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+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: 5pt; padding: 6pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">수주 잔량</p>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">+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: 5pt; padding: 6pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #10B981; font-weight: 600;">목표 초과</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; padding: 6pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">승인 대기</p>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 영역 (간략 Mock) -->
|
||||
<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: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 4pt;">월별 매출 추이</p>
|
||||
<div style="display: flex; align-items: flex-end; gap: 3pt; height: 32pt;">
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.25); border-radius: 1.5pt; height: 45%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 52%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.35); border-radius: 1.5pt; height: 48%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.4); border-radius: 1.5pt; height: 60%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 68%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.6); border-radius: 1.5pt; height: 75%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.7); border-radius: 1.5pt; height: 72%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.8); border-radius: 1.5pt; height: 85%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.9); border-radius: 1.5pt; height: 82%;"></div>
|
||||
<div style="flex: 1; background: #0EA5E9; border-radius: 1.5pt; height: 95%;"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.5); border-radius: 1.5pt; height: 70%; border: 1pt dashed rgba(14,165,233,0.5);"></div>
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.3); border-radius: 1.5pt; height: 50%; border: 1pt dashed rgba(14,165,233,0.3);"></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: 5.5pt; color: rgba(255,255,255,0.4); margin-bottom: 3pt;">조직별 실적</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업1팀</p>
|
||||
<div style="width: 50pt; 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: 4pt; height: 4pt; background: #10B981; border-radius: 50%;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">영업2팀</p>
|
||||
<div style="width: 50pt; 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: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">생산팀</p>
|
||||
<div style="width: 50pt; 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 style="display: flex; align-items: center; gap: 3pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.5); flex: 1;">품질팀</p>
|
||||
<div style="width: 50pt; height: 4pt; background: rgba(245,158,11,0.15); border-radius: 2pt; overflow: hidden;">
|
||||
<div style="width: 75%; height: 100%; background: #F59E0B; border-radius: 2pt;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
|
||||
<div style="width: 16pt; height: 16pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">1</p>
|
||||
</div>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
|
||||
</div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">보고를 기다릴 필요 없이<br>로그인만으로 전사 현황 확인</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
|
||||
<div style="width: 16pt; height: 16pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">2</p>
|
||||
</div>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터 기반 의사결정</p>
|
||||
</div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">감이 아닌 숫자로 판단<br>매출 추이, KPI, 팀 성과 비교</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
|
||||
<div style="width: 16pt; height: 16pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 8pt; font-weight: 800; color: #fff; white-space: nowrap;">3</p>
|
||||
</div>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">빠른 승인/결재</p>
|
||||
</div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">대기 건수를 실시간 알림<br>모바일에서도 즉시 승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 대시보드 상세 기능 6개 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #0EA5E9; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #EF4444; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">미승인 건수 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 5pt 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #EC4899; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- Before/After 비교 -->
|
||||
<div style="display: flex; gap: 6pt; margin-bottom: 10pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #EF4444; margin-bottom: 5pt;">BEFORE</p>
|
||||
<div style="background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 6pt 8pt;">
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"매출 얼마야?" → 보고 대기 1~2일</p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"수주 현황?" → Excel 취합 반나절</p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"승인할 것 있어?" → 서류 뒤지기</p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">"팀별 실적?" → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">AFTER (SAM)</p>
|
||||
<div style="background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 6pt 8pt;">
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">로그인 → <span style="color: #10B981; font-weight: 700;">3초만에 전사 현황</span></p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">클릭 한 번 → <span style="color: #10B981; font-weight: 700;">실시간 수주 데이터</span></p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">빨간 뱃지 → <span style="color: #10B981; font-weight: 700;">즉시 승인 처리</span></p>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.5); white-space: nowrap;">트리 구조 → <span style="color: #10B981; font-weight: 700;">전 조직 실적 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">실시간 업데이트</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">역할별 권한</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.35);">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 3pt; padding: 3pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 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.65);">(주)코드브릿지엑스</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); 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.3);">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #0EA5E9;">contact@codebridge-x.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
242
sam/docs/brochure/v2/slides/brochure-dashboard-back.html
Normal file
242
sam/docs/brochure/v2/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!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: 20pt 22pt 12pt 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25);">DASHBOARD FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 상세 기능 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<!-- 01 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">01</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">월 매출, 수주 잔량, 납기 준수율, 승인 대기 한눈에</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">02</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">조직 실적 트리</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">계층 구조로 각 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">03</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">역할별 수당 현황</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">판매자/관리자/협업자 수당 배분 실시간 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(239,68,68,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #EF4444; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">04</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">승인 대기 알림</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가입/지급 승인 미처리 건수 빨간 뱃지로 강조</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(245,158,11,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #F59E0B; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">05</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">기간별 트렌드</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">당월/분기/연간 매출 추이 차트, 성장률 비교</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(236,72,153,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #EC4899; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">06</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">가상 시나리오로 수당/마진 사전 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(14,165,233,0.06); border-radius: 4pt; padding: 4pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #0EA5E9; border-radius: 3pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 800; color: #fff;">07</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 72pt; flex-shrink: 0; white-space: nowrap;">모바일 대응</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">이동중에도 스마트폰으로 KPI 확인 및 승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 역할별 화면 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0EA5E9; margin-bottom: 2pt;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">전사 KPI</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출/수주/조직 총괄</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: 7pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #10B981; margin-bottom: 2pt;">관리자</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">팀 실적 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">하위 조직 성과 추적</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 5pt; padding: 7pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #F59E0B; margin-bottom: 2pt;">운영자</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">인력/승인 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 승인 처리</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: 7pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #8B5CF6; margin-bottom: 2pt;">영업자</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">내 실적 조회</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계약/수당 현황 확인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- SAM 전체 플랫폼 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">대시보드 + SAM 통합 플랫폼</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">견적/수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">생산 (MES)</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">품질/검사</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">재고/자재</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.5);">인사/회계</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 3pt; text-align: center;">대시보드에 표시되는 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 6pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 6pt;">
|
||||
<!-- 기본 패키지 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 3pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 3pt 6pt;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.35); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B; margin-bottom: 4pt;">추가 옵션 (선택)</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+500만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5);">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 -->
|
||||
<div style="margin-bottom: 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">1</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">현장 인터뷰</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">▶</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">2</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">맞춤 개발</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">▶</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6;">3</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">데이터 이관</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.2);">▶</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 3pt; text-align: center; background: rgba(245,158,11,0.1); border: 1pt solid rgba(245,158,11,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B;">4</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45); margin-top: 1pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.65); margin-top: 1pt;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: rgba(14,165,233,0.08); border: 1.5pt solid rgba(14,165,233,0.2); border-radius: 8pt; padding: 10pt 14pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">대표님 전용 대시보드를 직접 체험해 보세요</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.codebridge-x.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.18);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
172
sam/docs/brochure/v2/slides/brochure-dashboard-front.html
Normal file
172
sam/docs/brochure/v2/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!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);">(주)코드브릿지엑스</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.codebridge-x.com</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>
|
||||
27
sam/docs/brochure/v3/convert-1page.cjs
Normal file
27
sam/docs/brochure/v3/convert-1page.cjs
Normal file
@@ -0,0 +1,27 @@
|
||||
const path = require('path');
|
||||
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
|
||||
|
||||
const PptxGenJS = require('pptxgenjs');
|
||||
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
|
||||
console.log('Converting CEO Dashboard v3 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
sam/docs/brochure/v3/convert-2page.cjs
Normal file
31
sam/docs/brochure/v3/convert-2page.cjs
Normal file
@@ -0,0 +1,31 @@
|
||||
const path = require('path');
|
||||
module.paths.unshift(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/node_modules'));
|
||||
|
||||
const PptxGenJS = require('pptxgenjs');
|
||||
const html2pptx = require(path.join(require('os').homedir(), '.claude/skills/pptx-skill/scripts/html2pptx.js'));
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
const slidesDir = path.join(__dirname, 'slides');
|
||||
const slides = ['brochure-dashboard-front.html', 'brochure-dashboard-back.html'];
|
||||
|
||||
for (const file of slides) {
|
||||
const htmlFile = path.join(slidesDir, file);
|
||||
console.log(`Converting ${file} ...`);
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error on ${file}: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v3-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-2page.pptx
Normal file
BIN
sam/docs/brochure/v3/sam-brochure-v3-dashboard-2page.pptx
Normal file
Binary file not shown.
373
sam/docs/brochure/v3/slides/brochure-dashboard-back.html
Normal file
373
sam/docs/brochure/v3/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,373 @@
|
||||
<!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: 20pt 22pt 12pt 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 6pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<!-- 01 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="2" y="11" width="4" height="6" rx="0.5" fill="#0EA5E9" opacity="0.45"/>
|
||||
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
|
||||
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0EA5E9"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="10" cy="4.5" r="2.5" fill="none" stroke="#10B981" stroke-width="1.1"/>
|
||||
<line x1="10" y1="7" x2="10" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="5" y1="9.5" x2="15" y2="9.5" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
|
||||
<circle cx="10" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
|
||||
<circle cx="15" cy="13" r="2" fill="none" stroke="#10B981" stroke-width="0.9" opacity="0.6"/>
|
||||
<line x1="5" y1="9.5" x2="5" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="10" y1="9.5" x2="10" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="15" y1="9.5" x2="15" y2="11" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="3" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
|
||||
<circle cx="7" cy="17" r="1.3" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.4"/>
|
||||
<line x1="5" y1="15" x2="3" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="5" y1="15" x2="7" y2="15.7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">조직 실적 트리</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="10" cy="10" r="7.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="10" y="12.5" text-anchor="middle" fill="#8B5CF6" font-size="9" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M10 3 C6 3 3 6 3 9.5 L3 13 L1.5 14.5 L18.5 14.5 L17 13 L17 9.5 C17 6 14 3 10 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="15" cy="5" r="3.5" fill="#EF4444"/>
|
||||
<text x="15" y="7" text-anchor="middle" fill="#fff" font-size="4.5" font-weight="800">!</text>
|
||||
<path d="M7.5 15.5 Q10 18 12.5 15.5" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">승인 대기 알림</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M3 15 L7 11 L10 13 L16 5" fill="none" stroke="#F59E0B" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">기간별 트렌드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.4"/>
|
||||
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="10" x2="12" y2="10" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="15.5" cy="14.5" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.9"/>
|
||||
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.05); border-radius: 4pt; padding: 4pt 7pt;">
|
||||
<svg viewBox="0 0 20 20" width="13pt" height="13pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="5" y="2" width="10" height="16" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="10" cy="16" r="1" fill="#0EA5E9" opacity="0.5"/>
|
||||
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(14,165,233,0.15)"/>
|
||||
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0EA5E9" opacity="0.4"/>
|
||||
<rect x="8" y="8.5" width="4" height="1.5" rx="0.3" fill="#10B981" opacity="0.4"/>
|
||||
<rect x="8" y="11" width="4" height="1.5" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 대응</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- CEO -->
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.06); border: 1pt solid rgba(14,165,233,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="12" cy="8" r="4" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0EA5E9" stroke-width="1.2"/>
|
||||
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" opacity="0.7"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #0EA5E9;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- 관리자 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="8" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<circle cx="16" cy="8" r="3" fill="none" stroke="#10B981" stroke-width="1" opacity="0.6"/>
|
||||
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #10B981;">관리자</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- 운영자 -->
|
||||
<div style="flex: 1; background: rgba(245,158,11,0.06); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.4"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#F59E0B" stroke-width="1.2"/>
|
||||
<line x1="12" y1="4" x2="12" y2="6" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="12" y1="18" x2="12" y2="20" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="4" y1="12" x2="6" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="18" y1="12" x2="20" y2="12" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #F59E0B;">운영자</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- 영업자 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="7" y1="8" x2="17" y2="8" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
|
||||
<line x1="7" y1="11" x2="14" y2="11" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
|
||||
<line x1="7" y1="14" x2="12" y2="14" stroke="#8B5CF6" stroke-width="0.7" opacity="0.4"/>
|
||||
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#8B5CF6" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #8B5CF6;">영업자</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- SAM 통합 플랫폼 연결 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 5pt;">대시보드 + SAM ERP/MES 통합</p>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="2" y="2" width="12" height="12" rx="1.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<line x1="5" y1="6" x2="11" y2="6" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
<line x1="5" y1="8" x2="9" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
<line x1="5" y1="10" x2="11" y2="10" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">견적/수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<circle cx="8" cy="8" r="5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<circle cx="8" cy="8" r="2" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
<line x1="8" y1="3" x2="8" y2="4.5" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
<line x1="13" y1="8" x2="11.5" y2="8" stroke="rgba(255,255,255,0.15)" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">생산 MES</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<path d="M5 3 L11 3 L13 6 L8 14 L3 6 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<path d="M3 6 L13 6" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
|
||||
<path d="M8 6 L8 14" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">품질/검사</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="3" y="4" width="10" height="9" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<line x1="3" y1="7" x2="13" y2="7" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
|
||||
<line x1="8" y1="7" x2="8" y2="13" stroke="rgba(255,255,255,0.12)" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">재고/자재</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<circle cx="8" cy="6" r="3" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.45);">인사/회계</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.25); margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<!-- 기본 패키지 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(14,165,233,0.07); border: 1pt solid rgba(14,165,233,0.14); border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt;">
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1" y="1" width="12" height="12" rx="2" fill="none" stroke="#0EA5E9" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0EA5E9;">대시보드 포함 기본 패키지</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #ffffff;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.3); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(245,158,11,0.07); border: 1pt solid rgba(245,158,11,0.14); border-radius: 6pt; padding: 7pt 8pt;">
|
||||
<div style="display: flex; align-items: center; gap: 4pt; margin-bottom: 4pt;">
|
||||
<svg viewBox="0 0 14 14" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#F59E0B" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#F59E0B" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F59E0B;">추가 옵션 (선택)</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+500만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.45);">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 (SVG 화살표 연결) -->
|
||||
<div style="margin-bottom: 6pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981; margin-bottom: 5pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 2pt; align-items: center;">
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(14,165,233,0.08); border: 1pt solid rgba(14,165,233,0.15);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<circle cx="8" cy="5" r="3" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
|
||||
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0EA5E9" stroke-width="0.8"/>
|
||||
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0EA5E9" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">현장 인터뷰</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="3" y="2" width="10" height="12" rx="1.5" fill="none" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="6" y1="5" x2="10" y2="5" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="6" y1="7" x2="10" y2="7" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="6" y1="9" x2="10" y2="9" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
<line x1="6" y1="11" x2="9" y2="11" stroke="#10B981" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">맞춤 개발</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="2" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<rect x="9" y="3" width="5" height="10" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8"/>
|
||||
<path d="M7 7 L9 8 M7 8 L9 7" stroke="#8B5CF6" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">데이터 이관</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.08); border: 1pt solid rgba(245,158,11,0.15);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<path d="M8 2 L14 8 L8 14 L2 8 Z" fill="none" stroke="#F59E0B" stroke-width="0.8"/>
|
||||
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: rgba(255,255,255,0.6);">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: rgba(14,165,233,0.06); border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt 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="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="11" cy="11" r="9" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #ffffff;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0EA5E9;">contact@codebridge-x.com</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.codebridge-x.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.15);">(주)코드브릿지엑스 | SAM - Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
262
sam/docs/brochure/v3/slides/brochure-dashboard-front.html
Normal file
262
sam/docs/brochure/v3/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,262 @@
|
||||
<!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: 26pt 22pt 16pt 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
|
||||
<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: 6.5pt; color: rgba(255,255,255,0.2);">CEO DASHBOARD v3</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 18pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 8pt; color: rgba(255,255,255,0.4); line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기<br>더 이상 보고를 기다리지 마세요.</p>
|
||||
</div>
|
||||
<!-- 히어로 아이콘 -->
|
||||
<div style="flex-shrink: 0; width: 80pt; height: 80pt;">
|
||||
<svg viewBox="0 0 90 90" width="80pt" height="80pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 모니터 외곽 -->
|
||||
<rect x="8" y="10" width="74" height="50" rx="5" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.5"/>
|
||||
<rect x="12" y="14" width="66" height="42" rx="3" fill="#111D2E"/>
|
||||
<!-- KPI 미니 카드들 -->
|
||||
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.2)"/>
|
||||
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.2)"/>
|
||||
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.2)"/>
|
||||
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.2)"/>
|
||||
<!-- 미니 차트 -->
|
||||
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25" fill="none" stroke="#0EA5E9" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
|
||||
<path d="M16 45 L22 40 L28 42 L34 36 L40 33 L46 30 L52 32 L58 26 L64 28 L70 22 L75 25 L75 50 L16 50 Z" fill="url(#heroGrad)" opacity="0.3"/>
|
||||
<!-- 도넛 -->
|
||||
<circle cx="25" cy="50" r="0" fill="none"/>
|
||||
<!-- 모니터 받침 -->
|
||||
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0EA5E9" opacity="0.3"/>
|
||||
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0EA5E9" opacity="0.2"/>
|
||||
<!-- 알림 뱃지 -->
|
||||
<circle cx="73" cy="14" r="5" fill="#EF4444" opacity="0.9"/>
|
||||
<text x="73" y="16.5" text-anchor="middle" fill="#fff" font-size="6" font-weight="800">5</text>
|
||||
<!-- 와이파이 -->
|
||||
<path d="M66 72 Q72 66 78 72" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
|
||||
<path d="M63 76 Q72 68 81 76" fill="none" stroke="#10B981" stroke-width="1" opacity="0.25"/>
|
||||
<circle cx="72" cy="76" r="1.5" fill="#10B981" opacity="0.5"/>
|
||||
<defs>
|
||||
<linearGradient id="heroGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.4"/>
|
||||
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 16pt;"></div>
|
||||
|
||||
<!-- 고민 섹션 (타임라인 인포그래픽) -->
|
||||
<div style="margin-bottom: 16pt;">
|
||||
<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;">
|
||||
<!-- AM 9:00 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt;">
|
||||
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
|
||||
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
|
||||
<path d="M13 7 L13 13 L17 15" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">9AM</text>
|
||||
</svg>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<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>
|
||||
<!-- PM 2:00 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt;">
|
||||
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
|
||||
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
|
||||
<path d="M13 7 L13 13 L9 16" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">2PM</text>
|
||||
</svg>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<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>
|
||||
<!-- PM 5:00 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt;">
|
||||
<svg viewBox="0 0 26 26" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="13" cy="13" r="11" fill="rgba(239,68,68,0.08)" stroke="rgba(239,68,68,0.2)" stroke-width="1"/>
|
||||
<circle cx="13" cy="13" r="8" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.4"/>
|
||||
<path d="M13 7 L13 13 L8 12" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<text x="13" y="22" text-anchor="middle" fill="#EF4444" font-size="3.5" font-weight="600" opacity="0.7">5PM</text>
|
||||
</svg>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<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>
|
||||
|
||||
<!-- 전환 화살표 -->
|
||||
<div style="text-align: center; margin-bottom: 12pt;">
|
||||
<svg viewBox="0 0 40 24" width="40pt" height="16pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 6 L20 18 L30 6" fill="none" stroke="#0EA5E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0EA5E9;">SAM 도입 후</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #111D2E; border: 1.5pt solid rgba(14,165,233,0.15); border-radius: 7pt; padding: 9pt; margin-bottom: 16pt;">
|
||||
<!-- 타이틀바 -->
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
|
||||
<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.25); margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
|
||||
</div>
|
||||
<!-- KPI 카드 (SVG 아이콘 포함) -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.1); border: 1pt solid rgba(14,165,233,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#0EA5E9" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0EA5E9" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0EA5E9"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #fff;">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: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" 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: 11pt; 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: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.18); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" 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: 11pt; 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: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.12); border: 1pt solid rgba(239,68,68,0.22); border-radius: 4pt; padding: 4pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" 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: 11pt; 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: #EF4444; 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.02); border-radius: 3pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.3); 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.03)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.03)" 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(#fGrad)" opacity="0.35"/>
|
||||
<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="#0EA5E9" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="4" r="2" fill="#0EA5E9"/>
|
||||
<defs>
|
||||
<linearGradient id="fGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.25"/>
|
||||
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: rgba(255,255,255,0.02); border-radius: 3pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 4pt;">
|
||||
<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.05)" stroke-width="4.5"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="4.5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4.5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="4.5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4.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: #0EA5E9; 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: #F59E0B; 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(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 12pt;">
|
||||
<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="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#0EA5E9" 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: #0EA5E9;">SAM 대시보드가 드리는 약속</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.03); 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(255,255,255,0.25)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(255,255,255,0.3)"/></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.03); 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(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(255,255,255,0.3)"/></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.03); 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(255,255,255,0.25)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(255,255,255,0.3)" 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(255,255,255,0.06); 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>
|
||||
Reference in New Issue
Block a user