docs: [brochure] v1~v9 브로슈어 SAM BI 브랜딩 통일
- (주)코드브릿지엑스 → SAM - www.codebridge-x.com → www.sam.co.kr - contact@codebridge-x.com → contact@sam.co.kr - 푸터 문구 SAM — Smart Automation Management 통일
This commit is contained in:
김보곤
370
brochure/README.md
Normal file
370
brochure/README.md
Normal file
@@ -0,0 +1,370 @@
|
||||
# SAM 브로셔 버전 관리
|
||||
|
||||
> **작성일**: 2026-03-01
|
||||
> **상태**: 운영 중
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요
|
||||
|
||||
SAM CEO Dashboard 및 ERP/MES 영업 브로셔의 버전별 디자인 변천을 기록한다.
|
||||
모든 브로셔는 세로형(9:16) HTML로 작성하며, `pptx-skill`(html2pptx.js)로 PPTX 변환한다.
|
||||
|
||||
---
|
||||
|
||||
## 2. 버전 요약
|
||||
|
||||
| 버전 | 대상 | 테마 | 배경색 | 주 액센트 | 비고 |
|
||||
|------|------|------|--------|-----------|------|
|
||||
| **v1** | 전체 고객 | 다크 | `#0F2439` | `#10B981` (에메랄드) | SAM ERP/MES 범용 |
|
||||
| **v2** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | CEO Dashboard 초판 |
|
||||
| **v3** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | v2 개선, Before/After 추가 |
|
||||
| **v4** | 경영진 | 라이트 | `#F8FAFC` | `#0EA5E9` (스카이블루) | v3의 밝은 배경 변환 |
|
||||
| **v5** | 경영진 | 프리미엄 그래디언트 | `#0F172A→#312E81` | `#FBBF24` (골드) | 글래스모피즘 + 골드 |
|
||||
| **v6** | 경영진 | 코퍼레이트 블루 | `#FFFFFF` | `#2563EB` (블루) | 대기업/공공기관 스타일 |
|
||||
| **v7** | 경영진 | 웜 그레이 + 틸 | `#FAFAF9` | `#0D9488` (틸) | IT/SaaS 스타일 |
|
||||
| **v8** | 경영진 | 투톤 스플릿 | `#1E293B` / `#FFFFFF` | `#F97316` (오렌지) | 금융/컨설팅 스타일 |
|
||||
| **v9** | 경영진 | 미니멀 화이트 | `#FFFFFF` | `#6366F1` (인디고) | Apple/디자인 에이전시 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 버전별 상세
|
||||
|
||||
### 3.1 v1 — SAM ERP/MES 범용 브로셔
|
||||
|
||||
**컨셉**: 중소 제조업 대상 SAM 플랫폼 전체 기능 소개
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#0F2439` (네이비) |
|
||||
| 주 액센트 | `#10B981` (에메랄드 그린) |
|
||||
| 보조 액센트 | `#2E86AB`, `#8B5CF6`, `#E86F2C` |
|
||||
| 카드 스타일 | 반투명 배경 + 컬러 보더 |
|
||||
| BI 로고 | `sam_bi_white.png` |
|
||||
|
||||
**앞면 구성**:
|
||||
- 히어로: "중소 제조업을 위한 ERP/MES 통합 플랫폼"
|
||||
- 고민 포인트: Excel 과의존, 실시간 가시성, 품질관리, 높은 ERP 비용
|
||||
- 효과 지표: 시간 절감 80%, 납기 준수 95%, 추적성 100%, 인사/회계 무료
|
||||
- 기술 태그: 클라우드, 모바일 대응, 멀티테넌트
|
||||
|
||||
**뒷면 구성**:
|
||||
- 8대 핵심 모듈 (01~08 번호 뱃지): 품목/BOM, 견적/수주, 생산/MES, 출하, 품질, 자재, 인사/회계, 대시보드
|
||||
- 확장 기능: 전자서명, 알림톡, AI Lab, QR
|
||||
- 가격표: 기본 2,000만원 + 월 50만원
|
||||
- 도입 프로세스: 인터뷰 → 개발 → 이관 → 교육
|
||||
|
||||
---
|
||||
|
||||
### 3.2 v2 — CEO Dashboard 초판
|
||||
|
||||
**컨셉**: 경영진 타겟, 대시보드 중심 소개. 문제→해결 스토리텔링
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#0B1929` (짙은 네이비) |
|
||||
| 주 액센트 | `#0EA5E9` (스카이블루) |
|
||||
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#F59E0B`, `#EF4444`, `#EC4899` |
|
||||
| 카드 스타일 | 반투명 다크 카드 |
|
||||
| BI 로고 | `sam_bi_white.png` |
|
||||
|
||||
**앞면 구성**:
|
||||
- 히어로: "대표님, 지금 우리 회사 어떻게 돌아가고 있나요?"
|
||||
- 시간대별 고민: 오전 9시(매출 보고 대기), 오후 2시(수주 취합), 오후 5시(결재 서류)
|
||||
- 대시보드 Mock UI: KPI 카드 4개 + 매출 추이 차트 + 조직 성과 바 차트
|
||||
- 약속 박스: "실시간 KPI 파악"
|
||||
|
||||
**뒷면 구성**:
|
||||
- 대시보드 7대 기능 (01~07 뱃지)
|
||||
- 역할별 맞춤 화면: CEO, 관리자, 운영자, 영업자
|
||||
- SAM 플랫폼 연동: 견적/수주, 생산, 품질, 재고, 인사/회계
|
||||
- 가격표 + 도입 프로세스
|
||||
|
||||
**v1 대비 차이**:
|
||||
- 타겟이 전체→경영진으로 좁혀짐
|
||||
- 타임라인 기반 문제 제시 (시간대별 고민)
|
||||
- 대시보드 UI Mock 삽입
|
||||
- 역할별 화면 분리 소개
|
||||
|
||||
---
|
||||
|
||||
### 3.3 v3 — CEO Dashboard 개선판 (다크)
|
||||
|
||||
**컨셉**: v2 기반 개선. Before/After 인포그래픽 추가, SVG 아이콘 강화
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#0B1929` (짙은 네이비) |
|
||||
| 주 액센트 | `#0EA5E9` (스카이블루) |
|
||||
| 카드 스타일 | 반투명 다크 + 컬러 보더 |
|
||||
| BI 로고 | `sam_bi_white.png` |
|
||||
|
||||
**v2 대비 개선사항**:
|
||||
- 1page 통합본 추가
|
||||
- Before/After 비교 인포그래픽 도입
|
||||
- 핵심 가치 3카드: 즉시 현황 파악, 데이터로 판단, 모바일 승인
|
||||
- SVG 인라인 아이콘 전면 적용 (외부 이미지 의존 제거)
|
||||
- PPTX 텍스트 줄바꿈 방지 패턴 적용 (`white-space: nowrap`, 개별 `<p>` 분리)
|
||||
|
||||
---
|
||||
|
||||
### 3.4 v4 — CEO Dashboard 라이트 버전
|
||||
|
||||
**컨셉**: v3와 동일 콘텐츠, 밝은 배경으로 색상 전환
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#F8FAFC` (밝은 슬레이트) |
|
||||
| 주 액센트 | `#0EA5E9` (스카이블루) |
|
||||
| 제목 텍스트 | `#0F172A` |
|
||||
| 본문 텍스트 | `#475569` |
|
||||
| 보조 텍스트 | `#94A3B8` |
|
||||
| 카드 스타일 | 화이트 + `box-shadow` + `#E2E8F0` 보더 |
|
||||
| BI 로고 | `sam_bi_black.png` |
|
||||
|
||||
**v3 → v4 색상 변환 규칙**:
|
||||
|
||||
| 요소 | v3 (다크) | v4 (라이트) |
|
||||
|------|-----------|------------|
|
||||
| 배경 | `#0B1929` | `#F8FAFC` |
|
||||
| 카드 | `#111D2E` 반투명 | `#FFFFFF` + shadow |
|
||||
| 제목 | `#FFFFFF` | `#0F172A` |
|
||||
| 본문 | `rgba(255,255,255,0.55)` | `#475569` |
|
||||
| 보조 | `rgba(255,255,255,0.3)` | `#94A3B8` |
|
||||
| 구분선 | `rgba(14,165,233,0.15)` | `#E2E8F0` |
|
||||
| 기술 태그 | `rgba(255,255,255,0.03)` | `#F1F5F9` |
|
||||
| 액센트 | 동일 유지 | 동일 유지 |
|
||||
|
||||
---
|
||||
|
||||
### 3.5 v5 — Premium Executive Gradient
|
||||
|
||||
**컨셉**: 고급 프리미엄 감성. 네이비→인디고 그래디언트 + 골드 액센트 + 글래스모피즘
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#0F172A → #1E1B4B → #312E81` (175deg 그래디언트) |
|
||||
| 주 액센트 | `#FBBF24` (골드/앰버) |
|
||||
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
|
||||
| 카드 스타일 | 글래스모피즘 (`rgba(255,255,255,0.05)` + `rgba(255,255,255,0.1)` border) |
|
||||
| BI 로고 | `sam_bi_white.png` |
|
||||
| 뱃지 | "EXECUTIVE EDITION" 골드 뱃지 |
|
||||
|
||||
**앞면 구성**:
|
||||
- 히어로: "대표님의 시간은 보고를 기다리는 데 쓰여선 안 됩니다."
|
||||
- 잃어버린 시간 카드: 1~2일(매출), 반나절(수주), 30분(결재) — 빨간 톤
|
||||
- 골드 전환 구분선: "SAM 도입 후"
|
||||
- 대시보드 Mock: 골드 차트 라인, 글래스모피즘 카드
|
||||
- 약속 박스: 골드 테두리
|
||||
|
||||
**뒷면 구성**:
|
||||
- 7대 기능 리스트 (글래스모피즘 카드)
|
||||
- 역할별 맞춤 화면: CEO(골드), 관리자(그린), 운영자(앰버), 영업자(퍼플)
|
||||
- 가격표: 골드 강조
|
||||
- 도입 프로세스: 골드 화살표 연결
|
||||
|
||||
**기술 특이사항**:
|
||||
- body CSS gradient → PPTX 미지원 → Sharp로 PNG 사전 렌더링
|
||||
- HTML body는 `#1A1640`(단색 fallback), convert 스크립트에서 `slide.background`로 그래디언트 PNG 덮어쓰기
|
||||
- 구분선 gradient도 solid rgba로 변환 (PPTX 호환)
|
||||
|
||||
---
|
||||
|
||||
### 3.6 v6 — Corporate Blue & White
|
||||
|
||||
**컨셉**: 대기업/공공기관 프레젠테이션 스타일. 정돈된 블루 헤더 바 + 순백색 본문
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#FFFFFF` (순백) |
|
||||
| 헤더 바 | `#1E40AF` (로열 블루) |
|
||||
| 주 액센트 | `#2563EB` (블루) |
|
||||
| 보조 배경 | `#EFF6FF` (블루-50), `#DBEAFE` (블루-100) |
|
||||
| 카드 스타일 | 화이트 + `#DBEAFE` 보더 |
|
||||
| BI 로고 | `sam_bi_white.png` (헤더), `sam_bi_black.png` (본문) |
|
||||
|
||||
**특징**:
|
||||
- 풀 폭 블루 헤더 바에 흰색 BI 로고 + 뱃지 배치
|
||||
- 섹션 라벨은 블루-50 배경 + 로열블루 텍스트 뱃지
|
||||
- 대시보드 Mock UI: `#DBEAFE` 보더 카드
|
||||
- CTA: 블루 배경 풀 폭 바
|
||||
|
||||
---
|
||||
|
||||
### 3.7 v7 — Warm Gray + Teal
|
||||
|
||||
**컨셉**: IT/SaaS 기업 스타일. 따뜻한 그레이 배경 + 틸(Teal) 액센트
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#FAFAF9` (웜 그레이) |
|
||||
| 주 액센트 | `#0D9488` (틸) |
|
||||
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
|
||||
| 카드 스타일 | 화이트 + `#E7E5E4` 보더 + 미세 그림자 |
|
||||
| 구분선 | `#D6D3D1` |
|
||||
| BI 로고 | `sam_bi_black.png` |
|
||||
|
||||
**특징**:
|
||||
- 부드러운 웜 톤 배경으로 눈의 피로 감소
|
||||
- 틸 계열 SVG 아이콘 전면 적용
|
||||
- 가벼운 카드 스타일로 정보 구분
|
||||
- 타임라인 인포그래픽: 시간대별 고민 (9AM/2PM/5PM)
|
||||
|
||||
---
|
||||
|
||||
### 3.8 v8 — Two-Tone Navy/White Split
|
||||
|
||||
**컨셉**: 금융/컨설팅 프레젠테이션 스타일. 다크 상단 + 화이트 하단 투톤 분할
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 상단 배경 | `#1E293B` (슬레이트-800) |
|
||||
| 하단 배경 | `#FFFFFF` (순백) |
|
||||
| 주 액센트 | `#F97316` (오렌지) |
|
||||
| 보조 액센트 | `#FB923C` (오렌지-400) |
|
||||
| 카드 (다크) | `rgba(255,255,255,0.08)` + `rgba(255,255,255,0.12)` 보더 |
|
||||
| 카드 (라이트) | 화이트 + `#E2E8F0` 보더 + 컬러 좌측 보더 |
|
||||
| BI 로고 | `sam_bi_white.png` (다크), `sam_bi_black.png` (라이트) |
|
||||
|
||||
**특징**:
|
||||
- 앞면 상단: 다크 존에 KPI 카드 + 히어로 메시지
|
||||
- 앞면 하단: 화이트 존에 가치 카드 + 기능 그리드
|
||||
- 기능 카드에 컬러 좌측 보더 포인트 (오렌지/그린/퍼플/레드)
|
||||
- 다크 CTA 박스: 하단 풀 폭 다크 배경 + 오렌지 액센트
|
||||
|
||||
---
|
||||
|
||||
### 3.9 v9 — Minimal White + Indigo
|
||||
|
||||
**컨셉**: Apple/디자인 에이전시 스타일. 극도의 미니멀리즘 + 인디고 수직 액센트 라인
|
||||
|
||||
| 항목 | 값 |
|
||||
|------|------|
|
||||
| 배경 | `#FFFFFF` (순백) |
|
||||
| 주 액센트 | `#6366F1` (인디고) |
|
||||
| 카드 배경 | `#F8FAFC` (거의 투명한 그레이) |
|
||||
| 카드 보더 | `#F1F5F9` |
|
||||
| 본문 텍스트 | `#334155` (슬레이트-700) |
|
||||
| 보조 텍스트 | `#94A3B8` |
|
||||
| BI 로고 | `sam_bi_black.png` |
|
||||
|
||||
**특징**:
|
||||
- 좌측 3pt 인디고 수직 액센트 라인 (풀 하이트)
|
||||
- 타이포그래피 중심 레이아웃 (아이콘 최소화)
|
||||
- 거의 보이지 않는 카드 구분 (barely-there cards)
|
||||
- 기능은 텍스트 로우 형태 (인디고 불릿 도트만)
|
||||
- 가격/프로세스도 텍스트 기반 미니멀 표현
|
||||
|
||||
---
|
||||
|
||||
## 4. 폴더 구조
|
||||
|
||||
```
|
||||
docs/brochure/
|
||||
├── README.md ← 이 파일
|
||||
├── v1/
|
||||
│ ├── slides/
|
||||
│ │ ├── brochure-2page-front.html
|
||||
│ │ ├── brochure-2page-back.html
|
||||
│ │ └── brochure-1page.html
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-1page.pptx
|
||||
│ └── sam-brochure-2page.pptx
|
||||
├── v2/
|
||||
│ ├── slides/
|
||||
│ │ ├── brochure-dashboard-front.html
|
||||
│ │ ├── brochure-dashboard-back.html
|
||||
│ │ └── brochure-dashboard-1page.html
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v2-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v2-dashboard-2page.pptx
|
||||
├── v3/
|
||||
│ ├── slides/
|
||||
│ │ ├── brochure-dashboard-front.html
|
||||
│ │ ├── brochure-dashboard-back.html
|
||||
│ │ └── brochure-dashboard-1page.html
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v3-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v3-dashboard-2page.pptx
|
||||
├── v4/
|
||||
│ ├── slides/
|
||||
│ │ ├── brochure-dashboard-front.html
|
||||
│ │ ├── brochure-dashboard-back.html
|
||||
│ │ └── brochure-dashboard-1page.html
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v4-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v4-dashboard-2page.pptx
|
||||
├── v5/
|
||||
│ ├── slides/
|
||||
│ │ ├── brochure-dashboard-front.html
|
||||
│ │ ├── brochure-dashboard-back.html
|
||||
│ │ └── brochure-dashboard-1page.html
|
||||
│ ├── convert-1page.cjs ← Sharp 그래디언트 배경 생성 포함
|
||||
│ ├── convert-2page.cjs ← Sharp 그래디언트 배경 생성 포함
|
||||
│ ├── sam-brochure-v5-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v5-dashboard-2page.pptx
|
||||
├── v6/ ← Corporate Blue & White
|
||||
│ ├── slides/ (front, back, 1page)
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v6-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v6-dashboard-2page.pptx
|
||||
├── v7/ ← Warm Gray + Teal
|
||||
│ ├── slides/ (front, back, 1page)
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v7-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v7-dashboard-2page.pptx
|
||||
├── v8/ ← Two-Tone Navy/White Split
|
||||
│ ├── slides/ (front, back, 1page)
|
||||
│ ├── convert-1page.cjs
|
||||
│ ├── convert-2page.cjs
|
||||
│ ├── sam-brochure-v8-dashboard-1page.pptx
|
||||
│ └── sam-brochure-v8-dashboard-2page.pptx
|
||||
└── v9/ ← Minimal White + Indigo
|
||||
├── slides/ (front, back, 1page)
|
||||
├── convert-1page.cjs
|
||||
├── convert-2page.cjs
|
||||
├── sam-brochure-v9-dashboard-1page.pptx
|
||||
└── sam-brochure-v9-dashboard-2page.pptx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. PPTX 변환 방법
|
||||
|
||||
```bash
|
||||
# 각 버전 폴더에서 실행
|
||||
cd docs/brochure/v5
|
||||
node convert-1page.cjs # 1페이지 통합본
|
||||
node convert-2page.cjs # 앞면+뒷면 2페이지
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. PPTX 변환 시 주의사항
|
||||
|
||||
### 6.1 텍스트 줄바꿈 방지
|
||||
|
||||
- 단일행 `<p>` 태그에 `white-space: nowrap` 필수
|
||||
- `<br>` 멀티라인 `<p>`는 개별 `<p nowrap>` 태그로 분리
|
||||
- `<span>` 포함 텍스트도 개별 `<p>` 처리 (PPTX 폰트 폭 차이 보정)
|
||||
|
||||
### 6.2 CSS gradient 미지원
|
||||
|
||||
- html2pptx.js는 CSS `linear-gradient`를 지원하지 않음
|
||||
- body gradient → Sharp로 PNG 사전 렌더링 후 `slide.background`에 설정
|
||||
- 구분선 gradient → solid `rgba()` 색상으로 변환
|
||||
|
||||
### 6.3 SVG 처리
|
||||
|
||||
- 인라인 SVG는 html2pptx가 자동으로 PNG 래스터화
|
||||
- SVG 내부 fill 색상은 배경에 맞게 조정 필요
|
||||
|
||||
---
|
||||
|
||||
**최종 업데이트**: 2026-03-01 (v6~v9 추가)
|
||||
28
brochure/v1/convert-1page.cjs
Normal file
28
brochure/v1/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-1page.html');
|
||||
console.log('Converting 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
32
brochure/v1/convert-2page.cjs
Normal file
32
brochure/v1/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-2page-front.html', 'brochure-2page-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-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v1/sam-brochure-1page.pptx
Normal file
BIN
brochure/v1/sam-brochure-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v1/sam-brochure-2page.pptx
Normal file
BIN
brochure/v1/sam-brochure-2page.pptx
Normal file
Binary file not shown.
210
brochure/v1/slides/brochure-1page.html
Normal file
210
brochure/v1/slides/brochure-1page.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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: #0F2439;
|
||||
padding: 28pt 24pt 18pt 24pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 14pt;">
|
||||
<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.3);">PRODUCT BROCHURE 2026</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 4pt;">SMART AUTOMATION MANAGEMENT</p>
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #ffffff; line-height: 1.3; margin-bottom: 6pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
|
||||
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.5;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
|
||||
|
||||
<!-- 핵심 과제 -->
|
||||
<div style="margin-bottom: 12pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">현재 업무 과제</p>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">Excel 수작업</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">오류 잦음, 시간 낭비</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">현황 파악 불가</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">생산/재고 실시간 X</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 5pt; padding: 6pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #fff;">ERP 도입비 부담</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.35);">수천만~수억원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 기능 6개 -->
|
||||
<div style="margin-bottom: 12pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 4pt;">
|
||||
<!-- Row 1 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">01</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;">BOM 전개, 단가 적용, PDF 견적서 자동 생성</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">02</p>
|
||||
</div>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">생산관리 (MES)</p>
|
||||
</div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">바코드/QR 공정추적, 실시간 현황 대시보드</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 2 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #10B981; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">03</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;">수입/공정/출하 3단계 검사, 인증 자동 알림</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #E86F2C; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">04</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;">안전재고, LOT 추적, 바코드 입출고 관리</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Row 3 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #2E86AB; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">05</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;">근태, 급여, 매입매출, 세금계산서 자동 발행</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 7pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; margin-bottom: 3pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #8B5CF6; border-radius: 4pt; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
||||
<p style="font-size: 6.5pt; font-weight: 800; color: #fff; white-space: nowrap;">06</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;">수주/생산/매출/품질 KPI 실시간 모니터링</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 추가 기능 바 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; 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 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; 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 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">AI 실험실</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.5);">바로빌 연동</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 12pt;"></div>
|
||||
|
||||
<!-- 기대 효과 + 가격 -->
|
||||
<div style="display: flex; gap: 8pt; margin-bottom: 12pt;">
|
||||
<!-- 기대 효과 -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">도입 기대 효과</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">80%</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #2E86AB;">업무 시간 단축</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">95%</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #8B5CF6;">납기 준수율</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">100%</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #10B981;">이력 추적성</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">Free</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #E86F2C;">인사/회계 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 가격 -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
|
||||
<div style="background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.12); border-radius: 6pt; padding: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #E86F2C; margin-bottom: 4pt;">제조업 기본 패키지</p>
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 800; color: #ffffff;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.06); margin: 6pt 0;"></div>
|
||||
<p style="font-size: 6pt; color: rgba(255,255,255,0.4); line-height: 1.4;">품목-견적-수주-생산-출하<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 스택 -->
|
||||
<div style="display: flex; gap: 5pt; margin-bottom: 12pt;">
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">클라우드 기반 (설치 불필요)</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">모바일 대응</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.04); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.4);">Multi-tenant</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); 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.7);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">무료 데모 및 상담</p>
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
227
brochure/v1/slides/brochure-2page-back.html
Normal file
227
brochure/v1/slides/brochure-2page-back.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!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: #0F2439;
|
||||
padding: 20pt 24pt 10pt 24pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 8pt;">
|
||||
<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: 7pt; color: rgba(255,255,255,0.3);">FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 모듈 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB; margin-bottom: 6pt;">SAM 핵심 모듈</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<!-- 01 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #2E86AB; 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: 78pt; flex-shrink: 0; white-space: nowrap;">품목/BOM 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">품목 마스터, 다단계 BOM 전개, 단가 관리</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(139,92,246,0.06); border-radius: 4pt; padding: 3pt 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;">02</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">견적/수주 자동화</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">견적서 자동 생성, 수주 전환, PDF 출력</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 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;">03</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">생산관리 (MES)</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">작업지시, 바코드/QR 공정추적, 실시간 현황</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #E86F2C; 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: 78pt; 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(46,134,171,0.06); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #2E86AB; 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: 78pt; 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(139,92,246,0.06); border-radius: 4pt; padding: 3pt 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;">06</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; flex-shrink: 0; white-space: nowrap;">자재/재고 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.4);">안전재고, 입출고, LOT 추적, 바코드 관리</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(16,185,129,0.06); border-radius: 4pt; padding: 3pt 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;">07</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; 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>
|
||||
<!-- 08 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; background: rgba(232,111,44,0.06); border-radius: 4pt; padding: 3pt 8pt;">
|
||||
<div style="width: 18pt; height: 18pt; background: #E86F2C; 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;">08</p>
|
||||
</div>
|
||||
<p style="font-size: 6.5pt; font-weight: 600; color: #fff; width: 78pt; 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.08); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 추가 기능 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #8B5CF6; margin-bottom: 6pt;">확장 기능</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">전자서명</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.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">알림톡</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.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">AI 실험실</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.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 4pt; padding: 5pt 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7);">QR 코드</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.08); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 투자비용 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C; margin-bottom: 6pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 6pt;">
|
||||
<!-- 기본 패키지 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(46,134,171,0.08); border: 1pt solid rgba(46,134,171,0.15); border-radius: 6pt; padding: 8pt 10pt; margin-bottom: 4pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-bottom: 3pt;">제조업 기본 패키지</p>
|
||||
<p style="white-space: nowrap; font-size: 12pt; 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.4); line-height: 1.4;">품목 - 견적 - 수주 - 생산 - 출하<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(232,111,44,0.08); border: 1pt solid rgba(232,111,44,0.15); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; 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: #E86F2C;">+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: #E86F2C;">+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);">사진등록/챗봇/녹음</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #E86F2C;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.08); 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; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #2E86AB;">Step 1</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">현장 인터뷰</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; 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;">Step 2</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">맞춤 개발</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; 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;">Step 3</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">데이터 이관</p>
|
||||
</div>
|
||||
<div style="flex: 1; border-radius: 6pt; padding: 6pt 4pt; text-align: center; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2);">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #E86F2C;">Step 4</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 2pt;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.7); margin-top: 2pt;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 외부 연동 -->
|
||||
<div style="display: flex; gap: 6pt; margin-bottom: 8pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">바로빌 API</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">세금계산서 자동</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; 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.3);">점검/납기 알림</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 5pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; 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.3);">기존 ERP 동기화</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 12pt 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: 7.5pt; color: rgba(255,255,255,0.45); margin-top: 3pt;">귀사에 최적화된 맞춤 데모를 제공합니다</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #10B981;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2);">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
122
brochure/v1/slides/brochure-2page-front.html
Normal file
122
brochure/v1/slides/brochure-2page-front.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!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: #0F2439;
|
||||
padding: 32pt 24pt 24pt 24pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 20pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 24pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">PRODUCT BROCHURE 2026</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="margin-bottom: 20pt;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #10B981; letter-spacing: 0.08em; margin-bottom: 6pt;">SMART AUTOMATION MANAGEMENT</p>
|
||||
<h1 style="font-size: 21pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">중소 제조업을 위한<br>ERP/MES 통합 플랫폼</h1>
|
||||
<p style="font-size: 9pt; color: rgba(255,255,255,0.5); line-height: 1.6;">품목관리, 견적, 수주, 생산, 출하, 품질, 인사/회계까지<br>제조업의 모든 업무를 하나의 시스템으로 통합합니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
|
||||
|
||||
<!-- 현재 과제 -->
|
||||
<div style="margin-bottom: 18pt;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #E86F2C; margin-bottom: 8pt;">이런 고민이 있으신가요?</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 5pt;">
|
||||
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">Excel 견적서, 수기 전표로 <span style="color: #E86F2C; font-weight: 700;">업무 시간 낭비</span>가 심하다</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">생산 현황을 <span style="color: #E86F2C; font-weight: 700;">실시간으로 파악</span>할 수 없다</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">품질/검사 기록이 <span style="color: #E86F2C; font-weight: 700;">체계적으로 관리</span>되지 않는다</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 8pt; background: rgba(232,111,44,0.06); border: 1pt solid rgba(232,111,44,0.1); border-radius: 6pt; padding: 8pt 10pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #E86F2C; border-radius: 50%; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; color: rgba(255,255,255,0.65);">ERP 도입비가 <span style="color: #E86F2C; font-weight: 700;">수천만원~수억원</span>으로 부담된다</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SAM 해결 -->
|
||||
<div style="background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 18pt;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #10B981; margin-bottom: 6pt;">SAM이 해결합니다</p>
|
||||
<p style="font-size: 8pt; color: rgba(255,255,255,0.55); line-height: 1.6;">
|
||||
SAM은 중소 제조업에 특화된 클라우드 ERP/MES 통합 플랫폼입니다.
|
||||
품목/BOM 관리, 견적 자동화, 바코드 생산추적, 품질검사, 인사/회계까지
|
||||
별도 설치 없이 웹 브라우저만으로 모든 업무를 통합 관리합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.08); margin-bottom: 18pt;"></div>
|
||||
|
||||
<!-- 기대 효과 4개 -->
|
||||
<div style="margin-bottom: 18pt;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 700; color: #2E86AB; margin-bottom: 10pt;">도입 기대 효과</p>
|
||||
<div style="display: flex; gap: 6pt;">
|
||||
<div style="flex: 1; background: rgba(46,134,171,0.1); border: 1pt solid rgba(46,134,171,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">80%</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2E86AB; margin-top: 2pt;">업무 시간 단축</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.1); border: 1pt solid rgba(139,92,246,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">95%</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #8B5CF6; margin-top: 2pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.1); border: 1pt solid rgba(16,185,129,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">100%</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #10B981; margin-top: 2pt;">이력 추적성</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(232,111,44,0.1); border: 1pt solid rgba(232,111,44,0.2); border-radius: 8pt; padding: 10pt 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 20pt; font-weight: 800; color: #ffffff;">Free</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #E86F2C; margin-top: 2pt;">인사/회계 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 특징 -->
|
||||
<div style="display: flex; gap: 6pt; margin-bottom: 14pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">클라우드 기반</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">설치 불필요</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">모바일 대응</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">현장 태블릿/폰</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.04); border-radius: 5pt; padding: 6pt 8pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: rgba(255,255,255,0.6);">Multi-tenant</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.3);">데이터 완전 격리</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid rgba(255,255,255,0.08); padding-top: 12pt;">
|
||||
<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.7);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.35);">뒷면에서 상세 기능과 가격을 확인하세요</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
brochure/v1/~$sam-brochure-2page.pptx
Normal file
BIN
brochure/v1/~$sam-brochure-2page.pptx
Normal file
Binary file not shown.
28
brochure/v2/convert-1page.cjs
Normal file
28
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
brochure/v2/convert-2page.cjs
Normal file
32
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
brochure/v2/sam-brochure-v2-dashboard-1page.pptx
Normal file
BIN
brochure/v2/sam-brochure-v2-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v2/sam-brochure-v2-dashboard-2page.pptx
Normal file
BIN
brochure/v2/sam-brochure-v2-dashboard-2page.pptx
Normal file
Binary file not shown.
261
brochure/v2/slides/brochure-dashboard-1page.html
Normal file
261
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);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.sam.co.kr</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@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
242
brochure/v2/slides/brochure-dashboard-back.html
Normal file
242
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@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">www.sam.co.kr</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
brochure/v2/slides/brochure-dashboard-front.html
Normal file
172
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);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.25); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; color: rgba(255,255,255,0.3);">뒷면에서 상세 기능을 확인하세요</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
brochure/v3/convert-1page.cjs
Normal file
27
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
brochure/v3/convert-2page.cjs
Normal file
31
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
brochure/v3/sam-brochure-v3-dashboard-1page.pptx
Normal file
BIN
brochure/v3/sam-brochure-v3-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v3/sam-brochure-v3-dashboard-2page.pptx
Normal file
BIN
brochure/v3/sam-brochure-v3-dashboard-2page.pptx
Normal file
Binary file not shown.
405
brochure/v3/slides/brochure-dashboard-1page.html
Normal file
405
brochure/v3/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!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: 22pt 20pt 12pt 20pt;
|
||||
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: 20pt;">
|
||||
<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: 12pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.4); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
|
||||
</div>
|
||||
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
|
||||
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
|
||||
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
|
||||
<rect x="12" y="14" width="56" height="36" rx="2" fill="#111D2E"/>
|
||||
<!-- 미니 차트 바 -->
|
||||
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
|
||||
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
|
||||
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
|
||||
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
|
||||
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
|
||||
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<!-- 상단 KPI 표시 -->
|
||||
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
|
||||
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
|
||||
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
|
||||
<!-- 모니터 받침대 -->
|
||||
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
|
||||
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
|
||||
<!-- 와이파이 시그널 -->
|
||||
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(14,165,233,0.15); margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #111D2E; border: 1pt solid rgba(14,165,233,0.12); border-radius: 7pt; padding: 8pt; margin-bottom: 9pt;">
|
||||
<!-- 타이틀바 -->
|
||||
<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</p>
|
||||
</div>
|
||||
<!-- KPI 카드 4개 (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: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
|
||||
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
|
||||
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
|
||||
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; 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: 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: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; 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: 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: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; 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: 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: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 영역 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 매출 추이 (라인 차트 SVG) -->
|
||||
<div style="flex: 3; background: rgba(255,255,255,0.02); border-radius: 4pt; 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 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 그리드 라인 -->
|
||||
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<!-- 영역 채우기 -->
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
|
||||
<!-- 라인 -->
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 데이터 포인트 -->
|
||||
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
|
||||
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
|
||||
<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: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 배경 원 -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
|
||||
<!-- 영업1팀 38% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
|
||||
<!-- 영업2팀 25% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
|
||||
<!-- 생산팀 22% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
|
||||
<!-- 품질팀 15% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" 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: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업1팀 38%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">영업2팀 25%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">생산팀 22%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.45);">품질팀 15%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 즉시 현황 파악 -->
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
|
||||
<!-- 번개 (빠름) -->
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- 데이터 기반 의사결정 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<!-- 뇌 (의사결정) -->
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- 데이터 포인트 -->
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- 빠른 승인 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.1); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<!-- 체크마크 원 -->
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 모바일 아이콘 -->
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #fff; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.35); margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(139,92,246,0.15); margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
|
||||
<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; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 01 실시간 KPI -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<!-- 02 조직 트리 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 03 수당 현황 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<!-- 04 승인 알림 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 05 트렌드 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<!-- 06 시뮬레이터 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#0B1929" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.55); 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: 9pt;"></div>
|
||||
|
||||
<!-- Before → After 인포그래픽 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<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: 5.5pt; color: rgba(255,255,255,0.4);">수주? → Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">승인? → 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">실적? → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<!-- 화살표 -->
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.08); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="5" cy="5" r="3.5" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="5" r="1.5" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.6"/>
|
||||
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="rgba(255,255,255,0.2)" stroke-width="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<line x1="5" y1="4" x2="5" y2="6" stroke="rgba(255,255,255,0.3)" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<circle cx="5" cy="3.5" r="0.5" fill="rgba(255,255,255,0.3)"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 7 Q5 3 8 7" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.8"/>
|
||||
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.8" fill="rgba(255,255,255,0.3)"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; 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: 7pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
373
brochure/v3/slides/brochure-dashboard-back.html
Normal file
373
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@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.co.kr</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
brochure/v3/slides/brochure-dashboard-front.html
Normal file
262
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);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.co.kr</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>
|
||||
27
brochure/v4/convert-1page.cjs
Normal file
27
brochure/v4/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 v4 (Light) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v4-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
brochure/v4/convert-2page.cjs
Normal file
31
brochure/v4/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-v4-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v4/sam-brochure-v4-dashboard-1page.pptx
Normal file
BIN
brochure/v4/sam-brochure-v4-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v4/sam-brochure-v4-dashboard-2page.pptx
Normal file
BIN
brochure/v4/sam-brochure-v4-dashboard-2page.pptx
Normal file
Binary file not shown.
405
brochure/v4/slides/brochure-dashboard-1page.html
Normal file
405
brochure/v4/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!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: #F8FAFC;
|
||||
padding: 22pt 20pt 12pt 20pt;
|
||||
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_black.png" style="height: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 -->
|
||||
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #0F172A; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 7.5pt; color: #64748B; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
|
||||
</div>
|
||||
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
|
||||
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
|
||||
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0EA5E9" stroke-width="1.5" opacity="0.6"/>
|
||||
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
|
||||
<!-- 미니 차트 바 -->
|
||||
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0EA5E9" opacity="0.5"/>
|
||||
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0EA5E9" opacity="0.65"/>
|
||||
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0EA5E9" opacity="0.8"/>
|
||||
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0EA5E9" opacity="0.9"/>
|
||||
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0EA5E9"/>
|
||||
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<!-- 상단 KPI 표시 -->
|
||||
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
|
||||
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
|
||||
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
|
||||
<!-- 모니터 받침대 -->
|
||||
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0EA5E9" opacity="0.4"/>
|
||||
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0EA5E9" opacity="0.3"/>
|
||||
<!-- 와이파이 시그널 -->
|
||||
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(14,165,233,0.2); margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
|
||||
<!-- 타이틀바 -->
|
||||
<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: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<!-- 월 매출 -->
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.05); border: 1pt solid rgba(14,165,233,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0EA5E9" opacity="0.4"/>
|
||||
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0EA5E9" opacity="0.65"/>
|
||||
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0EA5E9"/>
|
||||
<path d="M3 16 L17 16" stroke="#0EA5E9" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">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: 5pt; color: #0EA5E9; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<!-- 수주 잔량 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
|
||||
</div>
|
||||
<!-- 납기 준수율 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<!-- 승인 대기 -->
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 영역 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 매출 추이 (라인 차트 SVG) -->
|
||||
<div style="flex: 3; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 그리드 라인 -->
|
||||
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(15,23,42,0.05)" stroke-width="0.5"/>
|
||||
<!-- 영역 채우기 -->
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="url(#areaGrad)" opacity="0.4"/>
|
||||
<!-- 라인 -->
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 데이터 포인트 -->
|
||||
<circle cx="140" cy="5" r="2.5" fill="#0EA5E9"/>
|
||||
<circle cx="155" cy="8" r="2" fill="#0EA5E9" opacity="0.5" stroke="#0EA5E9" stroke-width="0.5" stroke-dasharray="1 1"/>
|
||||
<defs>
|
||||
<linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#0EA5E9" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#0EA5E9" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 도넛 차트: 팀별 비중 -->
|
||||
<div style="flex: 2; background: #F8FAFC; border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 배경 원 -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(15,23,42,0.06)" stroke-width="5"/>
|
||||
<!-- 영업1팀 38% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
|
||||
<!-- 영업2팀 25% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
|
||||
<!-- 생산팀 22% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
|
||||
<!-- 품질팀 15% -->
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" 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: 4pt; height: 4pt; background: #0EA5E9; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업1팀 38%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">영업2팀 25%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">생산팀 22%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B;">품질팀 15%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0EA5E9; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 즉시 현황 파악 -->
|
||||
<div style="flex: 1; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#0EA5E9" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#0EA5E9"/>
|
||||
<!-- 번개 (빠름) -->
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- 데이터 기반 의사결정 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<!-- 뇌 (의사결정) -->
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<!-- 데이터 포인트 -->
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- 빠른 승인 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 6pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<!-- 체크마크 원 -->
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- 모바일 아이콘 -->
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(139,92,246,0.2); margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
|
||||
<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; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 01 실시간 KPI -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0EA5E9" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0EA5E9" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0EA5E9"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #0EA5E9; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<!-- 02 조직 트리 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 03 수당 현황 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<!-- 04 승인 알림 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<!-- 05 트렌드 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<!-- 06 시뮬레이터 -->
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#F8FAFC" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- Before → After 인포그래픽 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">매출? → 보고 대기 1~2일</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">수주? → Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">승인? → 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">실적? → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<!-- 화살표 -->
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0EA5E9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B;">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">실시간 업데이트</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.5" fill="#94A3B8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#94A3B8" stroke-width="0.6"/>
|
||||
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#94A3B8" stroke-width="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">역할별 권한</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<line x1="5" y1="4" x2="5" y2="6" stroke="#94A3B8" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<circle cx="5" cy="3.5" r="0.5" fill="#94A3B8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">데이터 암호화</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.8" fill="#94A3B8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">클라우드</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; padding-top: 7pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #475569;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0EA5E9;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
373
brochure/v4/slides/brochure-dashboard-back.html
Normal file
373
brochure/v4/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: #F8FAFC;
|
||||
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_black.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">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.04); border: 1pt solid rgba(14,165,233,0.1); 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: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); 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: #0F172A; white-space: nowrap;">조직 실적 트리</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); 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: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); 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: #0F172A; white-space: nowrap;">승인 대기 알림</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); 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: #0F172A; white-space: nowrap;">기간별 트렌드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); 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="#F8FAFC" 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: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.1); 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.1)"/>
|
||||
<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: #0F172A; white-space: nowrap;">모바일 대응</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(14,165,233,0.2); 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.04); 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: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- 관리자 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.04); 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: #475569; margin-top: 1pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- 운영자 -->
|
||||
<div style="flex: 1; background: rgba(245,158,11,0.04); 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: #475569; margin-top: 1pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- 영업자 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.04); 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: #475569; margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(139,92,246,0.2); 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: #F1F5F9; 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="#94A3B8" stroke-width="0.8"/>
|
||||
<line x1="5" y1="6" x2="11" y2="6" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<line x1="5" y1="8" x2="9" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<line x1="5" y1="10" x2="11" y2="10" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">견적/수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F1F5F9; 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="#94A3B8" stroke-width="0.8"/>
|
||||
<circle cx="8" cy="8" r="2" fill="none" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<line x1="8" y1="3" x2="8" y2="4.5" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<line x1="13" y1="8" x2="11.5" y2="8" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">생산 MES</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F1F5F9; 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="#94A3B8" stroke-width="0.8"/>
|
||||
<path d="M3 6 L13 6" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<path d="M8 6 L8 14" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">품질/검사</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F1F5F9; 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="#94A3B8" stroke-width="0.8"/>
|
||||
<line x1="3" y1="7" x2="13" y2="7" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
<line x1="8" y1="7" x2="8" y2="13" stroke="#CBD5E1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">재고/자재</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F1F5F9; 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="#94A3B8" stroke-width="0.8"/>
|
||||
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="#94A3B8" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #64748B;">인사/회계</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; 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.04); 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: #0F172A;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: #F1F5F9; border-radius: 3pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(245,158,11,0.04); 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: #64748B;">생산공정 관리</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: #64748B;">품질관리(인정검사)</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: #64748B;">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: #E2E8F0; 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.05); 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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">현장 인터뷰</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="#CBD5E1" 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.05); 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: #94A3B8;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">맞춤 개발</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="#CBD5E1" 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.05); 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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">데이터 이관</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="#CBD5E1" 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.05); 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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: rgba(14,165,233,0.04); 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: #0F172A;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; 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@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
260
brochure/v4/slides/brochure-dashboard-front.html
Normal file
260
brochure/v4/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!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: #F8FAFC;
|
||||
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_black.png" style="height: 22pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1;">CEO DASHBOARD v4</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: #0F172A; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 8pt; color: #64748B; 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="#FFFFFF"/>
|
||||
<!-- KPI 미니 카드들 -->
|
||||
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(14,165,233,0.15)"/>
|
||||
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
|
||||
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
|
||||
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
|
||||
<!-- 미니 차트 -->
|
||||
<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"/>
|
||||
<!-- 모니터 받침 -->
|
||||
<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.2); 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.06)" 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.1); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #475569; 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.06)" 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.1); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #475569; 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.06)" 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.1); border-radius: 4pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #475569; 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: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.06);">
|
||||
<!-- 타이틀바 -->
|
||||
<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: #94A3B8; 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.06); border: 1pt solid rgba(14,165,233,0.15); 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: #0F172A;">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.06); border: 1pt solid rgba(16,185,129,0.15); 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: #0F172A;">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.06); border: 1pt solid rgba(139,92,246,0.15); 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: #0F172A;">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.06); border: 1pt solid rgba(239,68,68,0.15); 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: #F8FAFC; border-radius: 3pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; 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(15,23,42,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(15,23,42,0.05)" 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: #F8FAFC; 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(15,23,42,0.06)" 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: #64748B;">영업1팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 약속 박스 -->
|
||||
<div style="background: rgba(14,165,233,0.04); border: 1pt solid rgba(14,165,233,0.15); 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: #64748B; 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: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#94A3B8"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#94A3B8"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#94A3B8" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">역할별 권한</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; 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: #475569;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #CBD5E1; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
brochure/v5/convert-1page.cjs
Normal file
52
brochure/v5/convert-1page.cjs
Normal file
@@ -0,0 +1,52 @@
|
||||
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'));
|
||||
const sharp = require('sharp');
|
||||
|
||||
async function generateGradientBg() {
|
||||
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
|
||||
<stop offset="0%" stop-color="#0F172A"/>
|
||||
<stop offset="55%" stop-color="#1E1B4B"/>
|
||||
<stop offset="100%" stop-color="#312E81"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="810" height="1440" fill="url(#bg)"/>
|
||||
</svg>`;
|
||||
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
|
||||
return buf.toString('base64');
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
// Pre-generate gradient background PNG
|
||||
console.log('Generating gradient background...');
|
||||
const bgBase64 = await generateGradientBg();
|
||||
|
||||
const htmlFile = path.join(__dirname, 'slides', 'brochure-dashboard-1page.html');
|
||||
console.log('Converting CEO Dashboard v5 (Premium Gradient) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
// Set gradient background on each slide
|
||||
for (const slide of pres.slides) {
|
||||
slide.background = { data: `image/png;base64,${bgBase64}` };
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
56
brochure/v5/convert-2page.cjs
Normal file
56
brochure/v5/convert-2page.cjs
Normal file
@@ -0,0 +1,56 @@
|
||||
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'));
|
||||
const sharp = require('sharp');
|
||||
|
||||
async function generateGradientBg() {
|
||||
const svgGradient = `<svg width="810" height="1440" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0.087" y1="0" x2="-0.087" y2="1">
|
||||
<stop offset="0%" stop-color="#0F172A"/>
|
||||
<stop offset="55%" stop-color="#1E1B4B"/>
|
||||
<stop offset="100%" stop-color="#312E81"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="810" height="1440" fill="url(#bg)"/>
|
||||
</svg>`;
|
||||
const buf = await sharp(Buffer.from(svgGradient)).png().toBuffer();
|
||||
return buf.toString('base64');
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const pres = new PptxGenJS();
|
||||
|
||||
pres.defineLayout({ name: 'PORTRAIT_9x16', width: 5.625, height: 10 });
|
||||
pres.layout = 'PORTRAIT_9x16';
|
||||
|
||||
// Pre-generate gradient background PNG
|
||||
console.log('Generating gradient background...');
|
||||
const bgBase64 = await generateGradientBg();
|
||||
|
||||
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}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Set gradient background on each slide
|
||||
for (const slide of pres.slides) {
|
||||
slide.background = { data: `image/png;base64,${bgBase64}` };
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v5-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v5/sam-brochure-v5-dashboard-1page.pptx
Normal file
BIN
brochure/v5/sam-brochure-v5-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v5/sam-brochure-v5-dashboard-2page.pptx
Normal file
BIN
brochure/v5/sam-brochure-v5-dashboard-2page.pptx
Normal file
Binary file not shown.
319
brochure/v5/slides/brochure-dashboard-1page.html
Normal file
319
brochure/v5/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #1A1640;
|
||||
padding: 22pt 20pt 12pt 20pt;
|
||||
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: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(251,191,36,0.12); border: 1pt solid rgba(251,191,36,0.25); border-radius: 3pt; padding: 2pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FBBF24; letter-spacing: 0.08em;">EXECUTIVE EDITION</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 -->
|
||||
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #FBBF24; letter-spacing: 0.12em; margin-bottom: 3pt;">CEO DASHBOARD</p>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 5pt;">대표님의 시간은<br>보고를 기다리는 데<br>쓰여선 안 됩니다.</h1>
|
||||
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.45); line-height: 1.5;">로그인 3초. 매출, 수주, 승인까지<br>모든 경영 현황이 한 화면에.</p>
|
||||
</div>
|
||||
<!-- 히어로 SVG 아이콘 -->
|
||||
<div style="flex-shrink: 0; width: 68pt; height: 68pt;">
|
||||
<svg viewBox="0 0 80 80" width="68pt" height="68pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#FBBF24" stroke-width="1.5" opacity="0.5"/>
|
||||
<rect x="12" y="14" width="56" height="36" rx="2" fill="rgba(255,255,255,0.04)"/>
|
||||
<rect x="16" y="38" width="6" height="8" rx="1" fill="#FBBF24" opacity="0.35"/>
|
||||
<rect x="24" y="34" width="6" height="12" rx="1" fill="#FBBF24" opacity="0.5"/>
|
||||
<rect x="32" y="30" width="6" height="16" rx="1" fill="#FBBF24" opacity="0.65"/>
|
||||
<rect x="40" y="26" width="6" height="20" rx="1" fill="#FBBF24" opacity="0.8"/>
|
||||
<rect x="48" y="22" width="6" height="24" rx="1" fill="#FBBF24"/>
|
||||
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.6"/>
|
||||
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.6"/>
|
||||
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.6"/>
|
||||
<rect x="32" y="54" width="16" height="3" rx="1" fill="#FBBF24" opacity="0.3"/>
|
||||
<rect x="28" y="57" width="24" height="2" rx="1" fill="#FBBF24" opacity="0.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 10pt;">
|
||||
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
||||
<div style="background: rgba(251,191,36,0.1); border: 1pt solid rgba(251,191,36,0.2); border-radius: 4pt; padding: 2pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">SAM 도입 후</p>
|
||||
</div>
|
||||
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 Mock UI (글래스모피즘) -->
|
||||
<div style="background: rgba(255,255,255,0.05); border: 1pt solid rgba(255,255,255,0.1); border-radius: 7pt; padding: 7pt; margin-bottom: 9pt;">
|
||||
<!-- 타이틀바 -->
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.2); margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI 카드 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="flex: 1; background: rgba(251,191,36,0.08); border: 1pt solid rgba(251,191,36,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FBBF24;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #fff;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.1); border: 1pt solid rgba(239,68,68,0.2); border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.25); margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 150 30" width="100%" height="22pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<path d="M5 26 L18 20 L31 22 L44 17 L57 14 L70 10 L83 12 L96 7 L109 8 L122 3 L135 6 L135 28 L5 28 Z" fill="url(#fGrad5p)" opacity="0.4"/>
|
||||
<path d="M5 26 L18 20 L31 22 L44 17 L57 14 L70 10 L83 12 L96 7 L109 8 L122 3 L135 6" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="3" r="2" fill="#FBBF24"/>
|
||||
<defs>
|
||||
<linearGradient id="fGrad5p" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBBF24" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#FBBF24" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 40 40" width="28pt" height="28pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#FBBF24" stroke-width="5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #FBBF24; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M12 7 L12 12 L15 14" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="1.2" fill="#FBBF24"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #FBBF24; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">로그인 3초면 전사 확인</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="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="12" cy="10" r="6" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 7 Q12 5 15 7" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
|
||||
<path d="M9 10 Q12 8 15 10" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
|
||||
<path d="M9 13 Q12 11 15 13" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="19" r="1" fill="#10B981" opacity="0.5"/>
|
||||
<circle cx="12" cy="19" r="1" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="16" cy="19" r="1" fill="#10B981"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #10B981; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">감이 아닌 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: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="15pt" height="15pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="12" cy="12" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#8B5CF6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #8B5CF6; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.35); margin-top: 2pt;">이동중 즉시 결재</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(251,191,36,0.1); margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- 대시보드 6대 기능 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#FBBF24" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#FBBF24" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#FBBF24"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: rgba(255,255,255,0.6); white-space: nowrap;">실시간 <span style="color: #FBBF24; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<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: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<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: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
</svg>
|
||||
<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: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<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: 4pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#1E1B4B" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<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.05); margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- Before → After -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 5; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.12); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<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: 5.5pt; color: rgba(255,255,255,0.4);">수주? → Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">승인? → 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">실적? → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<!-- 화살표 -->
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#FBBF24" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#FBBF24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 5; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4);">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(251,191,36,0.5)"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">클라우드</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(251,191,36,0.5)"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M4 1 Q6.5 1 6.5 3.5 L6.5 4.5 Q6.5 7 4 7 Q1.5 7 1.5 4.5 L1.5 3.5 Q1.5 1 4 1 Z" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><line x1="4" y1="3.5" x2="4" y2="5" stroke="rgba(251,191,36,0.5)" stroke-width="0.5" stroke-linecap="round"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3);">데이터 암호화</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 7pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25);">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #FBBF24;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
311
brochure/v5/slides/brochure-dashboard-back.html
Normal file
311
brochure/v5/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,311 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #1A1640;
|
||||
padding: 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(251,191,36,0.4);">FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 7대 기능 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; 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(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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="#FBBF24" opacity="0.45"/>
|
||||
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#FBBF24" opacity="0.7"/>
|
||||
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#FBBF24"/>
|
||||
</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.3);">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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"/>
|
||||
</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.3);">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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.3);">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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.3);">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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.3);">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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="#1E1B4B" 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.3);">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.07); 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="#FBBF24" 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.3);">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(251,191,36,0.1); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 역할별 맞춤 화면 -->
|
||||
<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;">
|
||||
<div style="flex: 1; background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,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="#FBBF24" stroke-width="1.2"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#FBBF24" stroke-width="1.2"/>
|
||||
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#FBBF24" 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: #FBBF24;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: rgba(255,255,255,0.5); 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.5); 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.5); 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.5); margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(139,92,246,0.1); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24; margin-bottom: 5pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.15); 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="#FBBF24" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#FBBF24" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #FBBF24;">대시보드 포함 기본 패키지</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.3);">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: rgba(255,255,255,0.03); border-radius: 3pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: rgba(255,255,255,0.25); line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.08); 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.4);">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">+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.4);">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">+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.4);">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FBBF24;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: rgba(255,255,255,0.05); margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 -->
|
||||
<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(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.12);">
|
||||
<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="#FBBF24" stroke-width="0.8"/>
|
||||
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#FBBF24" stroke-width="0.8"/>
|
||||
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#FBBF24" 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.35);">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(251,191,36,0.25)" 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.06); border: 1pt solid rgba(16,185,129,0.12);">
|
||||
<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.35);">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(251,191,36,0.25)" 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.06); border: 1pt solid rgba(139,92,246,0.12);">
|
||||
<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.35);">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(251,191,36,0.25)" 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.06); border: 1pt solid rgba(245,158,11,0.12);">
|
||||
<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.35);">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(251,191,36,0.06); border: 1.5pt solid rgba(251,191,36,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="#FBBF24" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FBBF24" 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.3); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FBBF24;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.25); margin-top: 1pt;">www.sam.co.kr</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>
|
||||
216
brochure/v5/slides/brochure-dashboard-front.html
Normal file
216
brochure/v5/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #1A1640;
|
||||
padding: 26pt 22pt 16pt 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 22pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(251,191,36,0.12); border: 1pt solid rgba(251,191,36,0.25); border-radius: 3pt; padding: 2pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FBBF24; letter-spacing: 0.08em;">EXECUTIVE EDITION</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="margin-bottom: 20pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 600; color: #FBBF24; letter-spacing: 0.12em; margin-bottom: 6pt;">CEO DASHBOARD</p>
|
||||
<h1 style="font-size: 20pt; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8pt;">대표님의 시간은<br>보고를 기다리는 데<br>쓰여선 안 됩니다.</h1>
|
||||
<p style="font-size: 8.5pt; color: rgba(255,255,255,0.5); line-height: 1.55;">로그인 3초. 매출, 수주, 승인 대기까지<br>모든 경영 현황이 한 화면에.</p>
|
||||
</div>
|
||||
|
||||
<!-- 잃어버린 시간 카드 -->
|
||||
<div style="margin-bottom: 16pt;">
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M12 7 L12 12 L16 14" fill="none" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">1~2일</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">매출 보고 대기</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
||||
<line x1="8" y1="8" x2="16" y2="8" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
||||
<line x1="8" y1="11" x2="14" y2="11" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
||||
<line x1="8" y1="14" x2="12" y2="14" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">Excel 수주 취합</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.08); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 8pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<path d="M12 3 C7 3 3 7 3 11 L3 15 L1 17 L23 17 L21 15 L21 11 C21 7 17 3 12 3 Z" fill="none" stroke="#EF4444" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 18 Q12 21 15 18" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.4); margin-top: 2pt;">결재 서류 찾기</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(239,68,68,0.5); text-align: center; margin-top: 4pt;">매일 반복되는 비효율, SAM이 제로로 만듭니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 전환 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; margin-bottom: 14pt;">
|
||||
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
||||
<div style="background: rgba(251,191,36,0.1); border: 1pt solid rgba(251,191,36,0.2); border-radius: 4pt; padding: 3pt 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #FBBF24;">SAM 도입 후</p>
|
||||
</div>
|
||||
<div style="flex: 1; height: 1pt; background: rgba(251,191,36,0.15);"></div>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 Mock UI (글래스모피즘) -->
|
||||
<div style="background: rgba(255,255,255,0.05); border: 1pt solid rgba(255,255,255,0.1); border-radius: 8pt; padding: 10pt; margin-bottom: 16pt;">
|
||||
<!-- 타이틀바 -->
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.2); margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI 카드 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="flex: 1; background: rgba(251,191,36,0.08); border: 1pt solid rgba(251,191,36,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#FBBF24" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#FBBF24" opacity="0.65"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#FBBF24"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FBBF24;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.08); border: 1pt solid rgba(16,185,129,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.08); border: 1pt solid rgba(139,92,246,0.15); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #fff;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.1); border: 1pt solid rgba(239,68,68,0.2); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
|
||||
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 라인 차트 + 도넛 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 3; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt 6pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: rgba(255,255,255,0.25); margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 150 35" width="100%" height="26pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="150" y2="10" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(255,255,255,0.04)" stroke-width="0.5"/>
|
||||
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7 L135 33 L5 33 Z" fill="url(#fGrad5)" opacity="0.4"/>
|
||||
<path d="M5 30 L18 24 L31 26 L44 20 L57 16 L70 12 L83 14 L96 8 L109 10 L122 4 L135 7" fill="none" stroke="#FBBF24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="4" r="2" fill="#FBBF24"/>
|
||||
<defs>
|
||||
<linearGradient id="fGrad5" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#FBBF24" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#FBBF24" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: rgba(255,255,255,0.03); border-radius: 4pt; padding: 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 40 40" width="30pt" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="5"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#FBBF24" stroke-width="5" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#0EA5E9" stroke-width="5" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #FBBF24; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업1팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">영업2팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">생산팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #0EA5E9; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: rgba(255,255,255,0.4);">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 약속 박스 (골드 강조) -->
|
||||
<div style="background: rgba(251,191,36,0.06); border: 1pt solid rgba(251,191,36,0.15); border-radius: 7pt; padding: 10pt 12pt; margin-bottom: 14pt;">
|
||||
<div style="display: flex; align-items: center; gap: 6pt;">
|
||||
<svg viewBox="0 0 22 22" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="11" cy="11" r="9" fill="none" stroke="#FBBF24" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M7 11 L10 14 L15 8" fill="none" stroke="#FBBF24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #FBBF24;">대표님께 드리는 약속</p>
|
||||
<p style="font-size: 7pt; color: rgba(255,255,255,0.45); margin-top: 2pt; line-height: 1.5;">보고를 기다리는 시간을 제로로.<br>의사결정에만 집중하실 수 있도록.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><path d="M2 6 Q4 2 6 6" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="rgba(251,191,36,0.5)"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="0.5" width="4" height="7" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="rgba(251,191,36,0.5)"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: rgba(255,255,255,0.04); border: 1pt solid rgba(255,255,255,0.06); border-radius: 3pt; padding: 3pt 6pt;">
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="1.5" width="6" height="5" rx="0.8" fill="none" stroke="rgba(251,191,36,0.5)" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="rgba(251,191,36,0.6)" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3);">역할별 권한</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid rgba(251,191,36,0.1); padding-top: 8pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: rgba(255,255,255,0.6);">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.2); margin-top: 2pt;">www.sam.co.kr</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>
|
||||
27
brochure/v6/convert-1page.cjs
Normal file
27
brochure/v6/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 v6 (Corporate Blue & White) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v6-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
brochure/v6/convert-2page.cjs
Normal file
31
brochure/v6/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-v6-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v6/sam-brochure-v6-dashboard-1page.pptx
Normal file
BIN
brochure/v6/sam-brochure-v6-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v6/sam-brochure-v6-dashboard-2page.pptx
Normal file
BIN
brochure/v6/sam-brochure-v6-dashboard-2page.pptx
Normal file
Binary file not shown.
374
brochure/v6/slides/brochure-dashboard-1page.html
Normal file
374
brochure/v6/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 블루 헤더 바 -->
|
||||
<div style="background: #1E40AF; padding: 8pt 20pt; display: flex; align-items: center; gap: 8pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">CEO DASHBOARD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 본문 영역 -->
|
||||
<div style="flex: 1; padding: 12pt 20pt 8pt 20pt; display: flex; flex-direction: column;">
|
||||
|
||||
<!-- 히어로 -->
|
||||
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 10pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2563EB; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #1E293B; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 7.5pt; color: #475569; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면</p>
|
||||
<p style="font-size: 7.5pt; color: #475569; line-height: 1.5;">전사 현황이 한눈에 들어옵니다.</p>
|
||||
</div>
|
||||
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
|
||||
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#2563EB" stroke-width="1.5" opacity="0.6"/>
|
||||
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
|
||||
<rect x="16" y="38" width="6" height="8" rx="1" fill="#2563EB" opacity="0.5"/>
|
||||
<rect x="24" y="34" width="6" height="12" rx="1" fill="#2563EB" opacity="0.65"/>
|
||||
<rect x="32" y="30" width="6" height="16" rx="1" fill="#2563EB" opacity="0.8"/>
|
||||
<rect x="40" y="26" width="6" height="20" rx="1" fill="#2563EB" opacity="0.9"/>
|
||||
<rect x="48" y="22" width="6" height="24" rx="1" fill="#2563EB"/>
|
||||
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="18" cy="20" r="3" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="28" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
|
||||
<circle cx="38" cy="20" r="3" fill="#F59E0B" opacity="0.7"/>
|
||||
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
|
||||
<rect x="32" y="54" width="16" height="3" rx="1" fill="#2563EB" opacity="0.4"/>
|
||||
<rect x="28" y="57" width="24" height="2" rx="1" fill="#2563EB" opacity="0.3"/>
|
||||
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 7pt; padding: 7pt; margin-bottom: 8pt; box-shadow: 0 1pt 4pt rgba(30,64,175,0.06);">
|
||||
<!-- 타이틀바 -->
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI 카드 4개 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="flex: 1; background: #EFF6FF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#2563EB" opacity="0.4"/>
|
||||
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#2563EB" opacity="0.65"/>
|
||||
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#2563EB"/>
|
||||
<path d="M3 16 L17 16" stroke="#2563EB" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">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: 5pt; color: #2563EB; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #1E293B;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 4pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 영역 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 3; background: #EFF6FF; border-radius: 4pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(30,64,175,0.05)" stroke-width="0.5"/>
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="#2563EB" opacity="0.08"/>
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="140" cy="5" r="2.5" fill="#2563EB"/>
|
||||
<circle cx="155" cy="8" r="2" fill="#2563EB" opacity="0.5" stroke="#2563EB" stroke-width="0.5" stroke-dasharray="1 1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: #EFF6FF; border-radius: 4pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(30,64,175,0.06)" stroke-width="5"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#2563EB" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" 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: 4pt; height: 4pt; background: #2563EB; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">영업1팀 38%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">영업2팀 25%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">생산팀 22%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #475569;">품질팀 15%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 -->
|
||||
<div style="margin-bottom: 8pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 2pt 8pt; display: inline-block; margin-bottom: 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">대표님이 얻는 것</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#2563EB" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#2563EB"/>
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 6pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5pt; color: #94A3B8; margin-top: 1pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 대시보드 6대 기능 -->
|
||||
<div style="margin-bottom: 8pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 2pt 8pt; display: inline-block; margin-bottom: 4pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #1E40AF;">대시보드 핵심 기능</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#2563EB" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#2563EB" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#2563EB"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #2563EB; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #DBEAFE; border-radius: 4pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#FFFFFF" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; color: #475569; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- Before → After -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 5pt 6pt 10pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">매출? → 보고 대기 1~2일</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">수주? → Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">승인? → 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">실적? → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 5; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 6pt 10pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">로그인 → <span style="color:#10B981;font-weight:600;">3초 전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">클릭 → <span style="color:#10B981;font-weight:600;">실시간 수주 데이터</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">뱃지 → <span style="color:#10B981;font-weight:600;">즉시 승인 처리</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">트리 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#3B82F6" stroke-width="0.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">실시간 업데이트</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.5" fill="#3B82F6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#3B82F6" stroke-width="0.6"/>
|
||||
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#3B82F6" stroke-width="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">역할별 권한</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<line x1="5" y1="4" x2="5" y2="6" stroke="#3B82F6" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<circle cx="5" cy="3.5" r="0.5" fill="#3B82F6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">데이터 암호화</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; border-radius: 3pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#3B82F6" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.8" fill="#3B82F6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #3B82F6;">클라우드</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 7pt 10pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E293B;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #2563EB;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
337
brochure/v6/slides/brochure-dashboard-back.html
Normal file
337
brochure/v6/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 블루 헤더 바 -->
|
||||
<div style="background: #1E40AF; padding: 10pt 22pt; display: flex; align-items: center; gap: 8pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">FEATURES & PRICING</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 본문 영역 -->
|
||||
<div style="flex: 1; padding: 14pt 22pt 10pt 22pt; display: flex; flex-direction: column;">
|
||||
|
||||
<!-- 대시보드 핵심 기능 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 6pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">대시보드 핵심 기능</p>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<!-- 01 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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="#2563EB" opacity="0.45"/>
|
||||
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#2563EB" opacity="0.7"/>
|
||||
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#2563EB"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #1E293B; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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: #1E293B; white-space: nowrap;">조직 실적 트리</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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: #1E293B; white-space: nowrap;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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: #1E293B; white-space: nowrap;">승인 대기 알림</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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: #1E293B; white-space: nowrap;">기간별 트렌드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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="#FFFFFF" 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: #1E293B; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #DBEAFE; 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="#2563EB" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="10" cy="16" r="1" fill="#2563EB" opacity="0.5"/>
|
||||
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(37,99,235,0.1)"/>
|
||||
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#2563EB" 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: #1E293B; white-space: nowrap;">모바일 대응</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 역할별 맞춤 화면 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">역할별 맞춤 화면</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- CEO -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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="#2563EB" stroke-width="1.2"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#2563EB" 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: #2563EB;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- 관리자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #475569; margin-top: 1pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- 운영자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #475569; margin-top: 1pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- 영업자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 5pt; padding: 6pt 4pt; text-align: center; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #475569; margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">투자 비용</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<!-- 기본 패키지 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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="#2563EB" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#2563EB" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #2563EB;">대시보드 포함 기본 패키지</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #1E293B;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 8pt; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #475569;">생산공정 관리</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: #475569;">품질관리(인정검사)</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: #475569;">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: 1.5pt; background: #DBEAFE; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 -->
|
||||
<div style="margin-bottom: 6pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #1E40AF;">도입 프로세스</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt; align-items: center;">
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 4pt 2pt; text-align: center; background: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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="#2563EB" stroke-width="0.8"/>
|
||||
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#2563EB" stroke-width="0.8"/>
|
||||
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#2563EB" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">현장 인터뷰</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="#DBEAFE" 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: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #94A3B8;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">맞춤 개발</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="#DBEAFE" 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: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">데이터 이관</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="#DBEAFE" 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: #FFFFFF; border: 1.5pt solid #DBEAFE; box-shadow: 0 1pt 2pt rgba(30,64,175,0.04);">
|
||||
<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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #1E293B;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: #1E40AF; 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="rgba(255,255,255,0.5)" stroke-width="1.2"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#FFFFFF" 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.6); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #FFFFFF;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
231
brochure/v6/slides/brochure-dashboard-front.html
Normal file
231
brochure/v6/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 블루 헤더 바 -->
|
||||
<div style="background: #1E40AF; padding: 10pt 22pt; display: flex; align-items: center; gap: 8pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(255,255,255,0.15); border-radius: 3pt; padding: 2pt 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #FFFFFF; font-weight: 600; letter-spacing: 0.05em;">CEO DASHBOARD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 본문 영역 -->
|
||||
<div style="flex: 1; padding: 18pt 22pt 12pt 22pt; display: flex; flex-direction: column;">
|
||||
|
||||
<!-- 히어로 섹션 -->
|
||||
<div style="display: flex; align-items: center; gap: 14pt; margin-bottom: 16pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 600; color: #2563EB; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #1E293B; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 8pt; color: #475569; line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기</p>
|
||||
<p style="font-size: 8pt; color: #475569; line-height: 1.55;">더 이상 보고를 기다리지 마세요.</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="#2563EB" stroke-width="1.5" opacity="0.5"/>
|
||||
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
|
||||
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(37,99,235,0.15)"/>
|
||||
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
|
||||
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
|
||||
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
|
||||
<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="#2563EB" 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="#2563EB" opacity="0.08"/>
|
||||
<rect x="36" y="60" width="18" height="3" rx="1" fill="#2563EB" opacity="0.3"/>
|
||||
<rect x="32" y="63" width="26" height="2" rx="1" fill="#2563EB" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1.5pt; background: #DBEAFE; margin-bottom: 16pt;"></div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(30,64,175,0.06);">
|
||||
<!-- 타이틀바 -->
|
||||
<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: #94A3B8; margin-left: 5pt;">SAM CEO Dashboard ― 로그인 후 3초</p>
|
||||
</div>
|
||||
<!-- KPI 카드 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="flex: 1; background: #EFF6FF; border: 1pt solid #DBEAFE; 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="#2563EB" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#2563EB" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#2563EB"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #1E293B;">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: #2563EB; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); 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: #1E293B;">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.06); border: 1pt solid rgba(139,92,246,0.15); 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: #1E293B;">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.06); border: 1pt solid rgba(239,68,68,0.15); 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: #EFF6FF; border-radius: 3pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8; 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(30,64,175,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(30,64,175,0.05)" 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="#2563EB" opacity="0.08"/>
|
||||
<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="#2563EB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="4" r="2" fill="#2563EB"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: #EFF6FF; 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(30,64,175,0.06)" stroke-width="4.5"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#2563EB" 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: #2563EB; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #475569;">영업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: #475569;">영업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: #475569;">생산팀</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: #475569;">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대표님이 얻는 것 -->
|
||||
<div style="margin-bottom: 16pt;">
|
||||
<div style="background: #EFF6FF; border-radius: 3pt; padding: 3pt 8pt; display: inline-block; margin-bottom: 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #1E40AF;">대표님이 얻는 것</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 즉시 현황 파악 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#2563EB" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#2563EB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#2563EB"/>
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- 데이터 기반 의사결정 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- 빠른 승인 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1.5pt solid #DBEAFE; border-radius: 6pt; padding: 7pt 5pt; text-align: center; box-shadow: 0 1pt 3pt rgba(30,64,175,0.04);">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #1E293B; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; 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="#3B82F6" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#3B82F6"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; 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="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#3B82F6"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #EFF6FF; 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="#3B82F6" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#3B82F6" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #3B82F6;">역할별 권한</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; background: #EFF6FF; border-radius: 5pt; padding: 8pt 12pt;">
|
||||
<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: #1E293B;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
brochure/v7/convert-1page.cjs
Normal file
27
brochure/v7/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 v7 (Warm Gray + Teal) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v7-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
brochure/v7/convert-2page.cjs
Normal file
31
brochure/v7/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-v7-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v7/sam-brochure-v7-dashboard-1page.pptx
Normal file
BIN
brochure/v7/sam-brochure-v7-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v7/sam-brochure-v7-dashboard-2page.pptx
Normal file
BIN
brochure/v7/sam-brochure-v7-dashboard-2page.pptx
Normal file
Binary file not shown.
376
brochure/v7/slides/brochure-dashboard-1page.html
Normal file
376
brochure/v7/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,376 @@
|
||||
<!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: #FAFAF9;
|
||||
padding: 22pt 20pt 12pt 20pt;
|
||||
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_black.png" style="height: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">CEO DASHBOARD v7</p>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 -->
|
||||
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #292524; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 7.5pt; color: #57534E; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
|
||||
</div>
|
||||
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
|
||||
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
|
||||
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0D9488" stroke-width="1.5" opacity="0.6"/>
|
||||
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
|
||||
<!-- 미니 차트 바 -->
|
||||
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0D9488" opacity="0.5"/>
|
||||
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0D9488" opacity="0.65"/>
|
||||
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0D9488" opacity="0.8"/>
|
||||
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0D9488" opacity="0.9"/>
|
||||
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0D9488"/>
|
||||
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
|
||||
<!-- 상단 KPI 표시 -->
|
||||
<circle cx="18" cy="20" r="3" fill="#0D9488" opacity="0.7"/>
|
||||
<circle cx="28" cy="20" r="3" fill="#10B981" opacity="0.7"/>
|
||||
<circle cx="38" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
|
||||
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
|
||||
<!-- 모니터 받침대 -->
|
||||
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0D9488" opacity="0.4"/>
|
||||
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0D9488" opacity="0.3"/>
|
||||
<!-- 와이파이 시그널 -->
|
||||
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.05);">
|
||||
<!-- 타이틀바 -->
|
||||
<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: #A8A29E; margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<!-- 월 매출 -->
|
||||
<div style="flex: 1; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0D9488" opacity="0.4"/>
|
||||
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0D9488" opacity="0.65"/>
|
||||
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0D9488"/>
|
||||
<path d="M3 16 L17 16" stroke="#0D9488" stroke-width="0.5" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">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: 5pt; color: #0D9488; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<!-- 수주 잔량 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
|
||||
</div>
|
||||
<!-- 납기 준수율 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<!-- 승인 대기 -->
|
||||
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
|
||||
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 차트 영역 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 매출 추이 (라인 차트 SVG) -->
|
||||
<div style="flex: 3; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="#0D9488" opacity="0.08"/>
|
||||
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="140" cy="5" r="2.5" fill="#0D9488"/>
|
||||
<circle cx="155" cy="8" r="2" fill="#0D9488" opacity="0.5" stroke="#0D9488" stroke-width="0.5" stroke-dasharray="1 1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 도넛 차트: 팀별 비중 -->
|
||||
<div style="flex: 2; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
|
||||
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(41,37,36,0.06)" stroke-width="5"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#0D9488" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
|
||||
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" 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: 4pt; height: 4pt; background: #0D9488; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업1팀 38%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업2팀 25%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">생산팀 22%</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">품질팀 15%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 핵심 가치 3개 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0D9488; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#0D9488"/>
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
|
||||
<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; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0D9488" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0D9488" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0D9488"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">실시간 <span style="color: #0D9488; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 5pt; padding: 4pt 6pt;">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#FAFAF9" stroke="#EC4899" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
|
||||
|
||||
<!-- Before / After 인포그래픽 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">매출? 보고 대기 1~2일</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">수주? Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">승인? 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">실적? 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<!-- 화살표 -->
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 5; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#0D9488" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">로그인 <span style="color:#0D9488;font-weight:600;">3초 전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">클릭 <span style="color:#0D9488;font-weight:600;">실시간 수주 데이터</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">뱃지 <span style="color:#0D9488;font-weight:600;">즉시 승인 처리</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">트리 <span style="color:#0D9488;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">실시간 업데이트</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.5" fill="#A8A29E"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#A8A29E" stroke-width="0.6"/>
|
||||
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#A8A29E" stroke-width="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">역할별 권한</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<line x1="5" y1="4" x2="5" y2="6" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
|
||||
<circle cx="5" cy="3.5" r="0.5" fill="#A8A29E"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">데이터 암호화</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
|
||||
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
<circle cx="5" cy="7.5" r="0.8" fill="#A8A29E"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">클라우드</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 7pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #57534E;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">무료 데모 신청</p>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488;">contact@sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
373
brochure/v7/slides/brochure-dashboard-back.html
Normal file
373
brochure/v7/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: #FAFAF9;
|
||||
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_black.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 7대 기능 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0D9488; 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(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 6pt; 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="#0D9488" opacity="0.45"/>
|
||||
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#0D9488" opacity="0.7"/>
|
||||
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#0D9488"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #292524; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 6pt; 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: #292524; white-space: nowrap;">조직 실적 트리</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 6pt; 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: #292524; white-space: nowrap;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 6pt; 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: #292524; white-space: nowrap;">승인 대기 알림</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 6pt; 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: #292524; white-space: nowrap;">기간별 트렌드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 6pt; 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="#FAFAF9" 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: #292524; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 6pt; 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="#0D9488" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="10" cy="16" r="1" fill="#0D9488" opacity="0.5"/>
|
||||
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(13,148,136,0.1)"/>
|
||||
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#0D9488" 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: #292524; white-space: nowrap;">모바일 대응</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 역할별 맞춤 화면 (SVG 아이콘) -->
|
||||
<div style="margin-bottom: 9pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #14B8A6; margin-bottom: 5pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- CEO -->
|
||||
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; 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="#0D9488" stroke-width="1.2"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#0D9488" 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: #0D9488;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E; margin-top: 1pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- 관리자 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; 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: #57534E; margin-top: 1pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- 운영자 -->
|
||||
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.12); border-radius: 7pt; 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: #57534E; margin-top: 1pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- 영업자 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; 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: #57534E; margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; 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: #F5F5F4; border-radius: 5pt; 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="#A8A29E" stroke-width="0.8"/>
|
||||
<line x1="5" y1="6" x2="11" y2="6" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<line x1="5" y1="8" x2="9" y2="8" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<line x1="5" y1="10" x2="11" y2="10" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">견적/수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; 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="#A8A29E" stroke-width="0.8"/>
|
||||
<circle cx="8" cy="8" r="2" fill="none" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<line x1="8" y1="3" x2="8" y2="4.5" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<line x1="13" y1="8" x2="11.5" y2="8" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">생산 MES</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; 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="#A8A29E" stroke-width="0.8"/>
|
||||
<path d="M3 6 L13 6" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<path d="M8 6 L8 14" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">품질/검사</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; 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="#A8A29E" stroke-width="0.8"/>
|
||||
<line x1="3" y1="7" x2="13" y2="7" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
<line x1="8" y1="7" x2="8" y2="13" stroke="#D6D3D1" stroke-width="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">재고/자재</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F5F5F4; border-radius: 5pt; 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="#A8A29E" stroke-width="0.8"/>
|
||||
<path d="M3 14 Q3 10 8 10 Q13 10 13 14" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">인사/회계</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 3pt; text-align: center;">대시보드의 모든 데이터는 SAM ERP/MES 실시간 데이터 기반</p>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; 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(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.14); border-radius: 7pt; 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="#0D9488" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0D9488;">대시보드 포함 기본 패키지</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #292524;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: #F5F5F4; border-radius: 5pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산<br>인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.14); border-radius: 7pt; 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: #57534E;">생산공정 관리</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: #57534E;">품질관리(인정검사)</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: #57534E;">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: #D6D3D1; margin-bottom: 8pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 (SVG 화살표 연결) -->
|
||||
<div style="margin-bottom: 6pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #14B8A6; margin-bottom: 5pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 2pt; align-items: center;">
|
||||
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,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="#0D9488" stroke-width="0.8"/>
|
||||
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#0D9488" stroke-width="0.8"/>
|
||||
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#0D9488" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">현장 인터뷰</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="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(16,185,129,0.05); 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: #A8A29E;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">맞춤 개발</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="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(139,92,246,0.05); 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: #A8A29E;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">데이터 이관</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="#D6D3D1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 7pt; padding: 4pt 2pt; text-align: center; background: rgba(245,158,11,0.05); 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: #A8A29E;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #57534E;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA 푸터 -->
|
||||
<div style="margin-top: auto; background: rgba(13,148,136,0.04); border: 1.5pt solid rgba(13,148,136,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="#0D9488" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #292524;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
278
brochure/v7/slides/brochure-dashboard-front.html
Normal file
278
brochure/v7/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,278 @@
|
||||
<!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: #FAFAF9;
|
||||
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_black.png" style="height: 22pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">CEO DASHBOARD v7</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: #0D9488; letter-spacing: 0.1em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #292524; line-height: 1.35; margin-bottom: 6pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 8pt; color: #57534E; 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="#0D9488" stroke-width="1.5" opacity="0.5"/>
|
||||
<rect x="12" y="14" width="66" height="42" rx="3" fill="#FFFFFF"/>
|
||||
<!-- KPI 미니 카드들 -->
|
||||
<rect x="15" y="17" width="14" height="10" rx="1.5" fill="rgba(13,148,136,0.15)"/>
|
||||
<rect x="31" y="17" width="14" height="10" rx="1.5" fill="rgba(16,185,129,0.15)"/>
|
||||
<rect x="47" y="17" width="14" height="10" rx="1.5" fill="rgba(139,92,246,0.15)"/>
|
||||
<rect x="63" y="17" width="12" height="10" rx="1.5" fill="rgba(239,68,68,0.15)"/>
|
||||
<!-- 미니 차트 -->
|
||||
<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="#0D9488" 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="#0D9488" opacity="0.08"/>
|
||||
<!-- 모니터 받침 -->
|
||||
<rect x="36" y="60" width="18" height="3" rx="1" fill="#0D9488" opacity="0.3"/>
|
||||
<rect x="32" y="63" width="26" height="2" rx="1" fill="#0D9488" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #D6D3D1; 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.06)" 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.1); border-radius: 6pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #57534E; 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.06)" 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.1); border-radius: 6pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #57534E; 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.06)" 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.1); border-radius: 6pt; padding: 6pt 8pt;">
|
||||
<p style="font-size: 7.5pt; color: #57534E; 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="#0D9488" 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: #0D9488;">SAM 도입 후</p>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 Mock UI -->
|
||||
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 7pt; padding: 9pt; margin-bottom: 16pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.05);">
|
||||
<!-- 타이틀바 -->
|
||||
<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: #A8A29E; 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(13,148,136,0.06); border: 1pt solid rgba(13,148,136,0.15); border-radius: 6pt; 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="#0D9488" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#0D9488" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0D9488"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #292524;">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: #0D9488; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; 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: #292524;">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.06); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; 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: #292524;">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.06); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; 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: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; 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(41,37,36,0.05)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="rgba(41,37,36,0.05)" 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="#0D9488" opacity="0.08"/>
|
||||
<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="#0D9488" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="4" r="2" fill="#0D9488"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: #F5F5F4; border-radius: 5pt; 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(41,37,36,0.06)" stroke-width="4.5"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#0D9488" 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: #0D9488; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #57534E;">영업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: #57534E;">영업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: #57534E;">생산팀</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: #57534E;">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대표님이 얻는 것 -->
|
||||
<div style="margin-bottom: 12pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0D9488; margin-bottom: 6pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 즉시 현황 파악 -->
|
||||
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="10" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="14" cy="14" r="1.5" fill="#0D9488"/>
|
||||
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- 데이터로 판단 -->
|
||||
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
|
||||
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- 모바일 승인 -->
|
||||
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; 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="#A8A29E" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#A8A29E"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; 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="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#A8A29E"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; 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="#A8A29E" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#A8A29E" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">역할별 권한</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; 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: #57534E;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
brochure/v8/convert-1page.cjs
Normal file
27
brochure/v8/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 v8 (Two-Tone Split) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v8-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
brochure/v8/convert-2page.cjs
Normal file
31
brochure/v8/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-v8-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v8/sam-brochure-v8-dashboard-1page.pptx
Normal file
BIN
brochure/v8/sam-brochure-v8-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v8/sam-brochure-v8-dashboard-2page.pptx
Normal file
BIN
brochure/v8/sam-brochure-v8-dashboard-2page.pptx
Normal file
Binary file not shown.
238
brochure/v8/slides/brochure-dashboard-1page.html
Normal file
238
brochure/v8/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ===== DARK ZONE (top ~240pt) ===== -->
|
||||
<div style="background: #1E293B; padding: 20pt 20pt 16pt 20pt;">
|
||||
<!-- 헤더 -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_white.png" style="height: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(249,115,22,0.15); border: 1pt solid rgba(249,115,22,0.3); border-radius: 3pt; padding: 2pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">EXECUTIVE DASHBOARD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 4pt;">대표님, 우리 회사</h1>
|
||||
<h1 style="font-size: 16pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 6pt;">지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 7.5pt; color: rgba(255,255,255,0.6); line-height: 1.5;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI 카드 4개 -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 15.3%</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #F97316; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">▲ 8건</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #FFFFFF;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #10B981; font-weight: 700;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 1pt;">
|
||||
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
|
||||
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== WHITE ZONE ===== -->
|
||||
<div style="flex: 1; padding: 14pt 20pt 10pt 20pt; display: flex; flex-direction: column;">
|
||||
|
||||
<!-- 대표님이 얻는 것 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">로그인 3초면</p>
|
||||
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">전사 현황 확인</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
|
||||
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">감이 아닌 숫자로</p>
|
||||
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 4pt; padding: 5pt 5pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
|
||||
<p style="font-size: 5pt; color: #475569; margin-top: 1pt; line-height: 1.4;">이동중에도 즉시</p>
|
||||
<p style="font-size: 5pt; color: #475569; line-height: 1.4;">결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 핵심 기능 7개 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.45"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">매출, 수주, 납기율, 승인</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #10B981; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="8" cy="3.5" r="2" fill="none" stroke="#10B981" stroke-width="0.9"/>
|
||||
<line x1="8" y1="5.5" x2="8" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
|
||||
<line x1="4" y1="7.5" x2="12" y2="7.5" stroke="#10B981" stroke-width="0.7"/>
|
||||
<circle cx="4" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
||||
<circle cx="8" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
||||
<circle cx="12" cy="10" r="1.5" fill="none" stroke="#10B981" stroke-width="0.7" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">계층별 팀/개인 실적</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #8B5CF6; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="8" cy="8" r="6" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3"/>
|
||||
<text x="8" y="10" text-anchor="middle" fill="#8B5CF6" font-size="7" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">판매자/관리자/협업자</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #EF4444; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M8 2.5 C5 2.5 3 5 3 7.5 L3 10.5 L2 11.5 L14 11.5 L13 10.5 L13 7.5 C13 5 11 2.5 8 2.5 Z" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="12" cy="4" r="2.5" fill="#EF4444"/>
|
||||
<text x="12" y="5.5" text-anchor="middle" fill="#fff" font-size="3.5" font-weight="700">!</text>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">승인 대기 알림</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #FB923C; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M3 12 L6 9 L8 10.5 L13 4" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 4 L13 4 L13 6" fill="none" stroke="#FB923C" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">당월/분기/연간 추이</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="2" y="3" width="12" height="10" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="4" y1="6" x2="11" y2="6" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
|
||||
<line x1="4" y1="8" x2="9" y2="8" stroke="#F97316" stroke-width="0.5" opacity="0.3"/>
|
||||
<circle cx="12" cy="11.5" r="2.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.7"/>
|
||||
<path d="M11.2 11.5 L12.8 11.5 M12 10.7 L12 12.3" stroke="#F97316" stroke-width="0.7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">가상 시나리오 계산</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 2pt solid #F97316; border-radius: 3pt; padding: 3pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.03);">
|
||||
<svg viewBox="0 0 16 16" width="10pt" height="10pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<rect x="4.5" y="2" width="7" height="12" rx="1.5" fill="none" stroke="#F97316" stroke-width="0.8" opacity="0.5"/>
|
||||
<circle cx="8" cy="12.5" r="0.7" fill="#F97316" opacity="0.5"/>
|
||||
<rect x="6" y="4.5" width="4" height="5.5" rx="0.5" fill="rgba(249,115,22,0.1)"/>
|
||||
<rect x="6.5" y="5.2" width="3" height="1" rx="0.3" fill="#F97316" opacity="0.4"/>
|
||||
<rect x="6.5" y="7" width="3" height="1" rx="0.3" fill="#10B981" opacity="0.4"/>
|
||||
<rect x="6.5" y="8.8" width="3" height="1" rx="0.3" fill="#8B5CF6" opacity="0.4"/>
|
||||
</svg>
|
||||
<p style="font-size: 6pt; font-weight: 700; color: #0F172A; white-space: nowrap;">모바일 대응</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">스마트폰 KPI/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A; margin-bottom: 5pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #F97316; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #F97316; margin-bottom: 2pt;">기본 패키지</p>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #0F172A;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #FB923C; border-radius: 5pt; padding: 6pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #FB923C; margin-bottom: 2pt;">추가 옵션 (선택)</p>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 2pt;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+500만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">+2,000만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 700; color: #FB923C;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== DARK CTA ZONE ===== -->
|
||||
<div style="margin-top: auto; background: #1E293B; border-radius: 7pt; padding: 10pt 12pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 6pt;">
|
||||
<svg viewBox="0 0 22 22" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<circle cx="11" cy="11" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="margin-top: 5pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
320
brochure/v8/slides/brochure-dashboard-back.html
Normal file
320
brochure/v8/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,320 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 20pt 22pt 0 22pt;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 헤더: BI 로고 (on white) + badge -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 12pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<div style="background: rgba(249,115,22,0.1); border: 1pt solid rgba(249,115,22,0.2); border-radius: 3pt; padding: 2pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">FEATURES & PRICING</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대시보드 7대 기능 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<!-- 01 실시간 KPI -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#F97316" opacity="0.45"/>
|
||||
<rect x="8" y="7" width="4" height="10" rx="0.5" fill="#F97316" opacity="0.7"/>
|
||||
<rect x="14" y="3" width="4" height="14" rx="0.5" fill="#F97316"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 조직 실적 트리 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #10B981; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">조직 실적 트리</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 수당 현황 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #8B5CF6; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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: #0F172A; white-space: nowrap;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 승인 대기 알림 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #EF4444; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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: #0F172A; white-space: nowrap;">승인 대기 알림</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 기간별 트렌드 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #FB923C; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#FB923C" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13 5 L16 5 L16 8" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">기간별 트렌드</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 수익 시뮬레이터 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#F97316" stroke-width="1" opacity="0.4"/>
|
||||
<line x1="5" y1="7.5" x2="15" y2="7.5" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="10" x2="12" y2="10" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="12.5" x2="9" y2="12.5" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="15.5" cy="14.5" r="3.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.9"/>
|
||||
<path d="M14.5 14.5 L16.5 14.5 M15.5 13.5 L15.5 15.5" stroke="#F97316" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1;">
|
||||
<p style="font-size: 6.5pt; font-weight: 700; color: #0F172A; white-space: nowrap;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 모바일 대응 -->
|
||||
<div style="display: flex; align-items: center; gap: 5pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 4pt; padding: 4pt 7pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#F97316" stroke-width="1" opacity="0.5"/>
|
||||
<circle cx="10" cy="16" r="1" fill="#F97316" opacity="0.5"/>
|
||||
<rect x="7" y="5" width="6" height="8" rx="0.5" fill="rgba(249,115,22,0.1)"/>
|
||||
<rect x="8" y="6" width="4" height="1.5" rx="0.3" fill="#F97316" 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: #0F172A; white-space: nowrap;">모바일 대응</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 역할별 맞춤 화면 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- CEO -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #F97316; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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="#F97316" stroke-width="1.2"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#F97316" stroke-width="1.2"/>
|
||||
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#FB923C" 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: #F97316;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- 관리자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #10B981; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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: #475569; margin-top: 1pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- 운영자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #FB923C; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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="#FB923C" stroke-width="1" opacity="0.4"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#FB923C" stroke-width="1.2"/>
|
||||
<line x1="12" y1="4" x2="12" y2="6" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="12" y1="18" x2="12" y2="20" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="4" y1="12" x2="6" y2="12" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="18" y1="12" x2="20" y2="12" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 800; color: #FB923C;">운영자</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #475569; margin-top: 1pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- 영업자 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #8B5CF6; border-radius: 5pt; padding: 7pt 4pt; text-align: center; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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: #475569; margin-top: 1pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 투자 비용 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<!-- 기본 패키지 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #F97316; border-radius: 6pt; padding: 7pt 8pt; margin-bottom: 3pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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="#F97316" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M4 7 L6 9 L10 5" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #F97316;">대시보드 포함 기본 패키지</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<div style="background: #F8FAFC; border-radius: 3pt; padding: 3pt 5pt;">
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">CEO 대시보드 + 견적/수주 + 생산</p>
|
||||
<p style="font-size: 5.5pt; color: #94A3B8; line-height: 1.4;">인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 추가 옵션 -->
|
||||
<div style="flex: 1;">
|
||||
<div style="background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 3pt solid #FB923C; border-radius: 6pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<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="#FB923C" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="7" y1="4.5" x2="7" y2="9.5" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
<line x1="4.5" y1="7" x2="9.5" y2="7" stroke="#FB923C" stroke-width="1" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #FB923C;">추가 옵션 (선택)</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: #475569;">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">+500만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">+2,000만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #475569;">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #FB923C;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 도입 프로세스 -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 2pt; align-items: center;">
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #F97316; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#F97316" stroke-width="0.8"/>
|
||||
<path d="M4 14 Q4 10 8 10 Q12 10 12 14" fill="none" stroke="#F97316" stroke-width="0.8"/>
|
||||
<path d="M13 5 L15 5 M14 4 L14 6" stroke="#F97316" stroke-width="0.6" stroke-linecap="round" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">현장 인터뷰</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="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #10B981; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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: #94A3B8;">2~4주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">맞춤 개발</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="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #8B5CF6; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">데이터 이관</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="#F97316" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<div style="flex: 1; border-radius: 5pt; padding: 5pt 2pt; text-align: center; background: #FFFFFF; border: 1pt solid #E2E8F0; border-top: 2pt solid #FB923C; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<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="#FB923C" stroke-width="0.8"/>
|
||||
<path d="M5.5 8 L7 9.5 L10.5 6" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">1~2주</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #475569;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== DARK CTA ZONE (bottom) ===== -->
|
||||
<div style="margin-top: auto; background: #1E293B; border-radius: 8pt; padding: 12pt 14pt; margin-bottom: 0;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center; gap: 7pt;">
|
||||
<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="#F97316" stroke-width="1.2" opacity="0.5"/>
|
||||
<path d="M11 6 L11 11 L15 13" fill="none" stroke="#F97316" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #FFFFFF;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: rgba(255,255,255,0.5); margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F97316;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: rgba(255,255,255,0.3); margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사명 -->
|
||||
<div style="padding: 5pt 0; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #94A3B8;">SAM — Smart Automation Management</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
281
brochure/v8/slides/brochure-dashboard-front.html
Normal file
281
brochure/v8/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ===== DARK ZONE (top ~280pt) ===== -->
|
||||
<div style="background: #1E293B; padding: 24pt 22pt 20pt 22pt;">
|
||||
<!-- 헤더: BI 로고 + 배지 -->
|
||||
<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>
|
||||
<div style="background: rgba(249,115,22,0.15); border: 1pt solid rgba(249,115,22,0.3); border-radius: 3pt; padding: 2pt 7pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #F97316; letter-spacing: 0.08em;">EXECUTIVE DASHBOARD</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 히어로 텍스트 -->
|
||||
<div style="margin-bottom: 18pt;">
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 6pt;">대표님, 우리 회사</h1>
|
||||
<h1 style="font-size: 19pt; font-weight: 800; color: #FFFFFF; line-height: 1.4; margin-bottom: 8pt;">지금 어떤 상태인가요?</h1>
|
||||
<p style="font-size: 8pt; color: rgba(255,255,255,0.6); line-height: 1.55;">매출, 수주, 조직 실적, 승인 대기</p>
|
||||
<p style="font-size: 8pt; color: rgba(255,255,255,0.6); line-height: 1.55;">더 이상 보고를 기다리지 마세요.</p>
|
||||
</div>
|
||||
|
||||
<!-- KPI 카드 4개 (on dark) -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 월 매출 -->
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="#F97316" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="#F97316" opacity="0.7"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#F97316"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">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: #F97316; font-weight: 600; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<!-- 누적 수주 -->
|
||||
<div style="flex: 1; background: rgba(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
|
||||
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">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(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #FFFFFF;">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(255,255,255,0.08); border: 1pt solid rgba(255,255,255,0.12); border-radius: 5pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="1" stroke-linejoin="round"/>
|
||||
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="10.5" r="0.6" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 12pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== WHITE ZONE (bottom ~440pt) ===== -->
|
||||
<div style="flex: 1; padding: 18pt 22pt 14pt 22pt; display: flex; flex-direction: column;">
|
||||
|
||||
<!-- 대표님이 얻는 것 - 3 value cards -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 7pt;">대표님이 얻는 것</p>
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- 즉시 현황 파악 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #F97316; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="#F97316" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M12 6 L12 12 L16 15" fill="none" stroke="#F97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="1.2" fill="#F97316"/>
|
||||
<path d="M19 4 L17 8 L20 8 L18 12" fill="none" stroke="#FB923C" stroke-width="0.9" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">로그인 3초면</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- 데이터로 판단 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #10B981; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<circle cx="12" cy="10" r="7" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M9 7 Q12 5 15 7" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M8 10 Q12 8 16 10" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<path d="M9 13 Q12 11 15 13" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="7" cy="20" r="1" fill="#10B981" opacity="0.6"/>
|
||||
<circle cx="12" cy="20" r="1" fill="#10B981" opacity="0.8"/>
|
||||
<circle cx="17" cy="20" r="1" fill="#10B981"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- 모바일 승인 -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #E2E8F0; border-left: 3pt solid #8B5CF6; border-radius: 5pt; padding: 8pt 6pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
|
||||
<path d="M8 12 L11 15 L17 9" fill="none" stroke="#8B5CF6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="18" y="16" width="4.5" height="7" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.7" opacity="0.5"/>
|
||||
<circle cx="20.25" cy="21.5" r="0.4" fill="#8B5CF6" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시</p>
|
||||
<p style="font-size: 5.5pt; color: #475569; line-height: 1.4;">결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 14pt;"></div>
|
||||
|
||||
<!-- Before / After -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 14pt;">
|
||||
<!-- Before -->
|
||||
<div style="flex: 5; background: #FFFFFF; border: 1pt solid rgba(239,68,68,0.2); border-left: 3pt solid #EF4444; border-radius: 5pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
|
||||
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">매출? → 보고 대기 1~2일</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">수주? → Excel 취합 반나절</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">승인? → 서류 찾기 30분</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">실적? → 각 팀장 개별 보고</p>
|
||||
</div>
|
||||
<!-- 화살표 -->
|
||||
<div style="display: flex; align-items: center; flex-shrink: 0;">
|
||||
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 10 L14 10" stroke="#F97316" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#F97316" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- After -->
|
||||
<div style="flex: 5; background: #FFFFFF; border: 1pt solid rgba(16,185,129,0.2); border-left: 3pt solid #10B981; border-radius: 5pt; padding: 7pt 8pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.06);">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 5pt;">
|
||||
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#10B981" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #10B981;">AFTER (SAM)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">로그인 3초 → <span style="color:#10B981;font-weight:600;">전사 현황</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">클릭 한 번 → <span style="color:#10B981;font-weight:600;">실시간 수주</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">뱃지 터치 → <span style="color:#10B981;font-weight:600;">즉시 승인</span></p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #475569;">트리 펼침 → <span style="color:#10B981;font-weight:600;">전 조직 한눈에</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div style="height: 1pt; background: #E2E8F0; margin-bottom: 14pt;"></div>
|
||||
|
||||
<!-- 대시보드 핵심 기능 6개 (2x3 grid) -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #0F172A; margin-bottom: 6pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#F97316" opacity="0.5"/>
|
||||
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#F97316" opacity="0.75"/>
|
||||
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#F97316"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">실시간 <span style="color: #F97316; font-weight: 700;">매출/수주 KPI</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
|
||||
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
|
||||
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
|
||||
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">₩</text>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
|
||||
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
|
||||
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
|
||||
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 2pt;">
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#FB923C" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#FB923C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">기간별 <span style="color: #FB923C; font-weight: 700;">트렌드 분석</span></p>
|
||||
</div>
|
||||
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: #FFFFFF; border: 1pt solid #E2E8F0; border-radius: 4pt; padding: 4pt 6pt; box-shadow: 0 1pt 2pt rgba(0,0,0,0.04);">
|
||||
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#F97316" stroke-width="1" opacity="0.5"/>
|
||||
<line x1="5" y1="7" x2="13" y2="7" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="9" x2="11" y2="9" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<line x1="5" y1="11" x2="9" y2="11" stroke="#F97316" stroke-width="0.6" opacity="0.3"/>
|
||||
<circle cx="14" cy="13" r="3.5" fill="#FFFFFF" stroke="#F97316" stroke-width="0.8"/>
|
||||
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#F97316" stroke-width="0.8" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="font-size: 6.5pt; color: #475569; white-space: nowrap;">수익 <span style="color: #F97316; font-weight: 700;">시뮬레이터</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 기술 태그 -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 8pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><path d="M3 6 Q4 4 5 6" fill="none" stroke="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.6" fill="#94A3B8"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">클라우드 기반</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="6.5" r="0.4" fill="#94A3B8"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">PC + 모바일</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="#94A3B8" stroke-width="0.7"/><circle cx="4" cy="4" r="1.2" fill="none" stroke="#94A3B8" stroke-width="0.5"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">역할별 권한</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt; background: #F1F5F9; 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="M4 1 Q6.5 1 6.5 3.5 L6.5 4.5 Q6.5 7 4 7 Q1.5 7 1.5 4.5 L1.5 3.5 Q1.5 1 4 1 Z" fill="none" stroke="#94A3B8" stroke-width="0.7"/><line x1="4" y1="3.5" x2="4" y2="5" stroke="#94A3B8" stroke-width="0.5" stroke-linecap="round"/><circle cx="4" cy="3" r="0.4" fill="#94A3B8"/></svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #94A3B8;">데이터 암호화</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div style="margin-top: auto; border-top: 1pt solid #E2E8F0; 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: #475569;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #94A3B8;">뒷면에서 상세 기능을 확인하세요 ▶</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
brochure/v9/convert-1page.cjs
Normal file
27
brochure/v9/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 v9 (Minimal White + Indigo) 1-page brochure...');
|
||||
|
||||
try {
|
||||
await html2pptx(htmlFile, pres);
|
||||
} catch (err) {
|
||||
console.error(`Error: ${err.message}`);
|
||||
}
|
||||
|
||||
const outputPath = path.join(__dirname, 'sam-brochure-v9-dashboard-1page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
31
brochure/v9/convert-2page.cjs
Normal file
31
brochure/v9/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-v9-dashboard-2page.pptx');
|
||||
await pres.writeFile({ fileName: outputPath });
|
||||
console.log(`\nPPTX created: ${outputPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
BIN
brochure/v9/sam-brochure-v9-dashboard-1page.pptx
Normal file
BIN
brochure/v9/sam-brochure-v9-dashboard-1page.pptx
Normal file
Binary file not shown.
BIN
brochure/v9/sam-brochure-v9-dashboard-2page.pptx
Normal file
BIN
brochure/v9/sam-brochure-v9-dashboard-2page.pptx
Normal file
Binary file not shown.
266
brochure/v9/slides/brochure-dashboard-1page.html
Normal file
266
brochure/v9/slides/brochure-dashboard-1page.html
Normal file
@@ -0,0 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 22pt 24pt 12pt 28pt;
|
||||
display: flex; flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Left accent line -->
|
||||
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 16pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
|
||||
</div>
|
||||
|
||||
<!-- Hero -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
|
||||
<p style="white-space: nowrap; font-size: 15pt; font-weight: 300; color: #0F172A; margin-bottom: 2pt;">대표님, 우리 회사</p>
|
||||
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A; margin-bottom: 6pt;">지금 어떤 상태인가요?</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; color: #64748B;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 12pt;"></div>
|
||||
|
||||
<!-- Dashboard Mock UI - compact -->
|
||||
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 7pt; margin-bottom: 12pt;">
|
||||
<!-- Title bar -->
|
||||
<div style="display: flex; align-items: center; gap: 2pt; margin-bottom: 5pt;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #EF4444;"></div>
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #F59E0B;"></div>
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #10B981;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-left: 4pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI cards -->
|
||||
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #6366F1;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+15.3%</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #10B981;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+8건</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #818CF8;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart area -->
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt;">
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #CBD5E1; margin-bottom: 2pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 150 28" width="100%" height="20pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="14" x2="150" y2="14" stroke="#F1F5F9" stroke-width="0.5"/>
|
||||
<path d="M5 24 L20 18 L35 20 L50 14 L65 10 L80 7 L95 9 L110 4 L125 6 L140 2" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="140" cy="2" r="1.5" fill="#6366F1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt; display: flex; align-items: center; gap: 3pt;">
|
||||
<svg viewBox="0 0 36 36" width="24pt" height="24pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="18" r="12" fill="none" stroke="#F1F5F9" stroke-width="3.5"/>
|
||||
<circle cx="18" cy="18" r="12" fill="none" stroke="#6366F1" stroke-width="3.5" stroke-dasharray="29 47" stroke-dashoffset="19" stroke-linecap="round"/>
|
||||
<circle cx="18" cy="18" r="12" fill="none" stroke="#10B981" stroke-width="3.5" stroke-dasharray="19 57" stroke-dashoffset="-10" stroke-linecap="round"/>
|
||||
<circle cx="18" cy="18" r="12" fill="none" stroke="#818CF8" stroke-width="3.5" stroke-dasharray="16 60" stroke-dashoffset="-29" stroke-linecap="round"/>
|
||||
<circle cx="18" cy="18" r="12" fill="none" stroke="#F59E0B" stroke-width="3.5" stroke-dasharray="10 66" stroke-dashoffset="-45" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="display: flex; flex-direction: column; gap: 1.5pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업1팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업2팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">생산팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 value props - compact -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="7" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
|
||||
<path d="M10 5 L10 10 L13 12.5" fill="none" stroke="#6366F1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">3초면 전사 현황</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="3" y="11" width="3" height="6" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.4"/>
|
||||
<rect x="8" y="7" width="3" height="10" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.6"/>
|
||||
<rect x="13" y="3" width="3" height="14" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
|
||||
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="10" cy="10" r="6.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
|
||||
<path d="M7 10 L9 12 L13 8" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
|
||||
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">즉시 결재 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- Features list - compact -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">핵심 기능</p>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">실시간 KPI 카드</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">조직 실적 트리</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">역할별 수당 현황</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">승인 대기 알림</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">기간별 트렌드</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">수익 시뮬레이터</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
|
||||
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">모바일 대응</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- 4 role cards - compact -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 3pt;">
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">전사 KPI</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">관리자</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">팀 실적</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">운영자</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">인력/승인</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">영업자</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">내 실적</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
|
||||
|
||||
<!-- Pricing - compact -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">투자 비용</p>
|
||||
<div style="display: flex; align-items: baseline; gap: 6pt;">
|
||||
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">+ 월 50만원 (유지보수)</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 2pt;">CEO 대시보드 + 견적/수주 + 생산 + 인사/회계 포함</p>
|
||||
</div>
|
||||
|
||||
<!-- Process - compact -->
|
||||
<div style="margin-bottom: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 4pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 2pt; align-items: center;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">01</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">현장 인터뷰</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">02</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">맞춤 개발</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">03</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">데이터 이관</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
|
||||
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">04</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">교육/안정화</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA + Footer -->
|
||||
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 10pt;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 8pt;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 4pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1;">SAM</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
229
brochure/v9/slides/brochure-dashboard-back.html
Normal file
229
brochure/v9/slides/brochure-dashboard-back.html
Normal file
@@ -0,0 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 24pt 28pt 14pt 32pt;
|
||||
display: flex; flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Left accent line -->
|
||||
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">FEATURES & PRICING</p>
|
||||
</div>
|
||||
|
||||
<!-- Section: 7 features as text rows -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">대시보드 핵심 기능</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 3pt;">
|
||||
<!-- 01 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">실시간 KPI 카드</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">매출, 수주, 납기율, 승인 대기</p>
|
||||
</div>
|
||||
<!-- 02 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">조직 실적 트리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">계층별 팀/개인 실적 펼쳐보기</p>
|
||||
</div>
|
||||
<!-- 03 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">역할별 수당 현황</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">판매자/관리자/협업자 배분 확인</p>
|
||||
</div>
|
||||
<!-- 04 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">승인 대기 알림</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가입/지급 미처리 빨간 뱃지</p>
|
||||
</div>
|
||||
<!-- 05 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">기간별 트렌드</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">당월/분기/연간 추이 차트</p>
|
||||
</div>
|
||||
<!-- 06 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">수익 시뮬레이터</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가상 시나리오 수당/마진 계산</p>
|
||||
</div>
|
||||
<!-- 07 -->
|
||||
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">모바일 대응</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">스마트폰으로 KPI 확인/승인</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
|
||||
|
||||
<!-- 4 role cards - ultra minimal -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">역할별 맞춤 화면</p>
|
||||
<div style="display: flex; gap: 5pt;">
|
||||
<!-- CEO -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="12" cy="8" r="4" fill="none" stroke="#6366F1" stroke-width="0.8"/>
|
||||
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#6366F1" stroke-width="0.8"/>
|
||||
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">CEO</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">전사 KPI 총괄</p>
|
||||
</div>
|
||||
<!-- Manager -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="8" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8"/>
|
||||
<circle cx="16" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
|
||||
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#818CF8" stroke-width="0.8"/>
|
||||
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">관리자</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">팀 실적 관리</p>
|
||||
</div>
|
||||
<!-- Operator -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
|
||||
<circle cx="12" cy="12" r="3" fill="none" stroke="#6366F1" stroke-width="0.8"/>
|
||||
<line x1="12" y1="4" x2="12" y2="6" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
|
||||
<line x1="12" y1="18" x2="12" y2="20" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
|
||||
<line x1="4" y1="12" x2="6" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
|
||||
<line x1="18" y1="12" x2="20" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">운영자</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">인력/승인 관리</p>
|
||||
</div>
|
||||
<!-- Sales -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
|
||||
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.4"/>
|
||||
<line x1="7" y1="8" x2="17" y2="8" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
|
||||
<line x1="7" y1="11" x2="14" y2="11" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
|
||||
<line x1="7" y1="14" x2="12" y2="14" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
|
||||
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#818CF8" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">영업자</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">내 실적 조회</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
|
||||
|
||||
<!-- Pricing - clean typography -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">투자 비용</p>
|
||||
<div style="display: flex; gap: 6pt;">
|
||||
<!-- Base package -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
|
||||
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A;">2,000만원</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
|
||||
<div style="margin-top: 5pt; padding-top: 5pt; border-top: 1pt solid #F1F5F9;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">CEO 대시보드 + 견적/수주 + 생산</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">인사/회계 무료 포함</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Add-ons -->
|
||||
<div style="flex: 1;">
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 5pt;">추가 옵션 (선택)</p>
|
||||
<div style="display: flex; flex-direction: column; gap: 4pt;">
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">생산공정 관리</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+500만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">품질관리(인정검사)</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+2,000만원</p>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">AI 견적 자동 생성</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">월 10~20만원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
|
||||
|
||||
<!-- Process steps - simple numbered list -->
|
||||
<div style="margin-bottom: 14pt;">
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">도입 프로세스</p>
|
||||
<div style="display: flex; gap: 3pt; align-items: center;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">01</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">현장 인터뷰</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" 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="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">02</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">맞춤 개발</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">2~4주</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" 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="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">03</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">데이터 이관</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
|
||||
</div>
|
||||
<svg viewBox="0 0 8 8" width="5pt" height="5pt" 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="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">04</p>
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">교육/안정화</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 12pt 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: #0F172A;">무료 데모를 신청하세요</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">대표님 전용 대시보드를 직접 체험</p>
|
||||
</div>
|
||||
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 10pt;">
|
||||
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1;">contact@sam.co.kr</p>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="margin-top: 6pt; text-align: center;">
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1;">SAM</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
181
brochure/v9/slides/brochure-dashboard-front.html
Normal file
181
brochure/v9/slides/brochure-dashboard-front.html
Normal file
@@ -0,0 +1,181 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
width: 405pt; height: 720pt;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background: #FFFFFF;
|
||||
padding: 32pt 28pt 18pt 32pt;
|
||||
display: flex; flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Left accent line -->
|
||||
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 28pt;">
|
||||
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
|
||||
<div style="flex: 1;"></div>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
|
||||
</div>
|
||||
|
||||
<!-- Hero section -->
|
||||
<div style="margin-bottom: 28pt;">
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 8pt;">EXECUTIVE DASHBOARD</p>
|
||||
<p style="white-space: nowrap; font-size: 18pt; font-weight: 300; color: #0F172A; margin-bottom: 3pt;">대표님, 우리 회사</p>
|
||||
<p style="white-space: nowrap; font-size: 18pt; font-weight: 800; color: #0F172A; margin-bottom: 10pt;">지금 어떤 상태인가요?</p>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">매출, 수주, 조직 실적, 승인 대기</p>
|
||||
<p style="white-space: nowrap; font-size: 7.5pt; color: #64748B; line-height: 1.6;">더 이상 보고를 기다리지 마세요.</p>
|
||||
</div>
|
||||
|
||||
<!-- Thin divider -->
|
||||
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 24pt;"></div>
|
||||
|
||||
<!-- Dashboard Mock UI -->
|
||||
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 10pt; margin-bottom: 24pt;">
|
||||
<!-- Title bar -->
|
||||
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 7pt;">
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
|
||||
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-left: 5pt;">SAM CEO Dashboard</p>
|
||||
</div>
|
||||
<!-- KPI cards -->
|
||||
<div style="display: flex; gap: 4pt; margin-bottom: 6pt;">
|
||||
<!-- Revenue -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="9" width="3" height="5" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
|
||||
<rect x="6" y="5" width="3" height="9" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
|
||||
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #6366F1;">5.2억</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+15.3%</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">월 매출</p>
|
||||
</div>
|
||||
<!-- Orders -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<rect x="2" y="2" width="12" height="12" rx="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.5"/>
|
||||
<path d="M5 8 L7 10 L11 6" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #10B981;">127건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">+8건</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
|
||||
</div>
|
||||
<!-- Delivery -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.3"/>
|
||||
<circle cx="8" cy="8" r="5.5" fill="none" stroke="#818CF8" stroke-width="1" stroke-dasharray="32 35" stroke-dashoffset="-9" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #818CF8;">96%</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600;">목표 달성</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
|
||||
</div>
|
||||
<!-- Pending -->
|
||||
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 4pt; text-align: center;">
|
||||
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
|
||||
<path d="M8 2 L14 12 L2 12 Z" fill="none" stroke="#EF4444" stroke-width="0.8" stroke-linejoin="round"/>
|
||||
<line x1="8" y1="6" x2="8" y2="9" stroke="#EF4444" stroke-width="1" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="10.5" r="0.5" fill="#EF4444"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #EF4444;">5건</p>
|
||||
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart area -->
|
||||
<div style="display: flex; gap: 4pt;">
|
||||
<!-- Line chart -->
|
||||
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt;">
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-bottom: 3pt;">월별 매출 추이</p>
|
||||
<svg viewBox="0 0 150 32" width="100%" height="24pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0" y1="10" x2="150" y2="10" stroke="#F1F5F9" stroke-width="0.5"/>
|
||||
<line x1="0" y1="20" x2="150" y2="20" stroke="#F1F5F9" stroke-width="0.5"/>
|
||||
<path d="M5 28 L18 22 L31 24 L44 18 L57 14 L70 10 L83 12 L96 6 L109 8 L122 2 L135 5" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="122" cy="2" r="1.8" fill="#6366F1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- Donut -->
|
||||
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 5pt; display: flex; align-items: center; gap: 4pt;">
|
||||
<svg viewBox="0 0 40 40" width="28pt" height="28pt" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#F1F5F9" stroke-width="4"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#6366F1" stroke-width="4" stroke-dasharray="33 55" stroke-dashoffset="22" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#10B981" stroke-width="4" stroke-dasharray="22 66" stroke-dashoffset="-11" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#818CF8" stroke-width="4" stroke-dasharray="19 69" stroke-dashoffset="-33" stroke-linecap="round"/>
|
||||
<circle cx="20" cy="20" r="14" fill="none" stroke="#F59E0B" stroke-width="4" stroke-dasharray="12 76" stroke-dashoffset="-52" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div style="display: flex; flex-direction: column; gap: 2pt;">
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업1팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">영업2팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">생산팀</p>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 2pt;">
|
||||
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
|
||||
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B;">품질팀</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 value proposition cards -->
|
||||
<div style="display: flex; gap: 6pt; margin-bottom: 24pt;">
|
||||
<!-- Instant insight -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<circle cx="12" cy="12" r="9" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
|
||||
<path d="M12 6 L12 12 L16 15" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">로그인 3초면</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">전사 현황 확인</p>
|
||||
</div>
|
||||
<!-- Data-driven -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<rect x="3" y="14" width="4" height="7" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.4"/>
|
||||
<rect x="10" y="8" width="4" height="13" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.6"/>
|
||||
<rect x="17" y="3" width="4" height="18" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.8"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">감이 아닌 숫자로</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">KPI/팀 성과 비교</p>
|
||||
</div>
|
||||
<!-- Mobile approval -->
|
||||
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 10pt 7pt; text-align: center;">
|
||||
<svg viewBox="0 0 24 24" width="16pt" height="16pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 4pt;">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
|
||||
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#6366F1" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; margin-top: 3pt; line-height: 1.5;">이동중에도 즉시</p>
|
||||
<p style="font-size: 5.5pt; color: #64748B; line-height: 1.5;">결재/승인 처리</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end;">
|
||||
<div>
|
||||
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0F172A;">SAM</p>
|
||||
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; margin-top: 2pt;">www.sam.co.kr</p>
|
||||
</div>
|
||||
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">뒷면에서 상세 기능을 확인하세요</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user