03a9840fc7
- 마스터 + 인원/장비/자재/공사량/작업사진 6테이블 마이그레이션 - 6개 탭: 작업내용, 인원, 장비, 자재, 공사량, 작업사진 - 작업내용: 금일/명일 텍스트 + 날씨/기온/강수/미세먼지 메타 - 전일누계 + 금일 + 총계 누적 패턴 (인원/장비/자재/공사량) - 작업사진: 파일 업로드 + 사진목록/사진정보 2단 레이아웃 - 상태별 버튼 제어 (작성중→저장/삭제, 검토중→읽기전용) - 양식보기: 3페이지 전체화면 뷰어 (작업일보/인원장비/자재) - 검토자 지정 모달, 캘린더 스트립, 번개 랜덤데이터
158 lines
4.3 KiB
HTML
158 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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: 720pt;
|
|
height: 405pt;
|
|
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
|
|
background: #ffffff;
|
|
}
|
|
p, h1, h2, h3 { margin: 0; }
|
|
|
|
.header {
|
|
background: #1e293b;
|
|
padding: 12pt 20pt;
|
|
}
|
|
.header p {
|
|
font-size: 16pt;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
.content {
|
|
padding: 16pt 20pt;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12pt;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
gap: 16pt;
|
|
}
|
|
.section {
|
|
flex: 1;
|
|
}
|
|
.section-title {
|
|
font-size: 11pt;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 8pt;
|
|
}
|
|
.purpose-box {
|
|
background: #f1f5f9;
|
|
padding: 12pt;
|
|
border-radius: 4pt;
|
|
min-height: 80pt;
|
|
}
|
|
.purpose-box p {
|
|
font-size: 9pt;
|
|
color: #1e293b;
|
|
line-height: 1.5;
|
|
}
|
|
.feature-item {
|
|
margin-bottom: 4pt;
|
|
}
|
|
.feature-item p {
|
|
font-size: 8pt;
|
|
color: #1e293b;
|
|
}
|
|
.effects-row {
|
|
display: flex;
|
|
gap: 12pt;
|
|
}
|
|
.effect-card {
|
|
flex: 1;
|
|
background: #f1f5f9;
|
|
border: 1pt solid #0d9488;
|
|
border-radius: 4pt;
|
|
padding: 10pt;
|
|
text-align: center;
|
|
}
|
|
.effect-icon {
|
|
font-size: 20pt;
|
|
margin-bottom: 4pt;
|
|
}
|
|
.effect-title {
|
|
font-size: 9pt;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 4pt;
|
|
}
|
|
.effect-desc {
|
|
font-size: 7pt;
|
|
color: #64748b;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<p>01. 프로젝트 개요</p>
|
|
</div>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="section">
|
|
<p class="section-title">프로젝트 목적</p>
|
|
<div class="purpose-box">
|
|
<p>고객에게 SAM 사이트의 사용법을 설명하는 영상을 AI 기반으로 자동 생성하는 시스템 기획서</p>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<p class="section-title">주요 기능</p>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ Gemini API 기반 스크린샷 AI 분석</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ Google Cloud TTS 한국어 나레이션 자동 생성</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ FFmpeg 기반 영상 합성 (전환효과 + BGM)</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ PPTX 설명서 자동 생성 (편집 가능)</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ SAM 메뉴 트리 연동 자동 캡처</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 다중 화면 워크플로우 영상 지원</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="section-title">기대 효과</p>
|
|
<div class="effects-row">
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">📞</p>
|
|
<p class="effect-title">고객 문의 감소</p>
|
|
<p class="effect-desc">반복 사용법 문의를 영상으로 대체</p>
|
|
</div>
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">🚀</p>
|
|
<p class="effect-title">빠른 온보딩</p>
|
|
<p class="effect-desc">신규 고객 주요 기능 영상 학습</p>
|
|
</div>
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">💰</p>
|
|
<p class="effect-title">저비용 생성</p>
|
|
<p class="effect-desc">영상당 $0.07 (Veo 대비 1/100)</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |