03a9840fc7
- 마스터 + 인원/장비/자재/공사량/작업사진 6테이블 마이그레이션 - 6개 탭: 작업내용, 인원, 장비, 자재, 공사량, 작업사진 - 작업내용: 금일/명일 텍스트 + 날씨/기온/강수/미세먼지 메타 - 전일누계 + 금일 + 총계 누적 패턴 (인원/장비/자재/공사량) - 작업사진: 파일 업로드 + 사진목록/사진정보 2단 레이아웃 - 상태별 버튼 제어 (작성중→저장/삭제, 검토중→읽기전용) - 양식보기: 3페이지 전체화면 뷰어 (작업일보/인원장비/자재) - 검토자 지정 모달, 캘린더 스트립, 번개 랜덤데이터
190 lines
11 KiB
HTML
190 lines
11 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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30pt 36pt;
|
|
}
|
|
p, h1, h2, h3 { margin: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 헤더 -->
|
|
<div style="display: flex; align-items: center; gap: 10pt; margin-bottom: 20pt;">
|
|
<div style="width: 4pt; height: 24pt; background: #1a1a2e; border-radius: 2pt;"></div>
|
|
<h2 style="font-size: 18pt; font-weight: 700; color: #1a1a2e;">지급 절차 요약</h2>
|
|
</div>
|
|
|
|
<!-- 지급 프로세스 -->
|
|
<div style="display: flex; gap: 10pt; margin-bottom: 20pt;">
|
|
<!-- Step 1 -->
|
|
<div style="flex: 1; background: #E3F2FD; border-radius: 10pt; padding: 14pt; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6pt;">
|
|
<div style="width: 28pt; height: 28pt; background: #2196F3; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">1</p>
|
|
</div>
|
|
<p style="font-size: 10pt; font-weight: 700; color: #1565C0;">계약 체결</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">고객과 계약 완료</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">개발비 확정</p>
|
|
</div>
|
|
|
|
<!-- 화살표 -->
|
|
<div style="display: flex; align-items: center;">
|
|
<p style="font-size: 14pt; color: #ccc;">→</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div style="flex: 1; background: #FFF3E0; border-radius: 10pt; padding: 14pt; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6pt;">
|
|
<div style="width: 28pt; height: 28pt; background: #FF9800; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">2</p>
|
|
</div>
|
|
<p style="font-size: 10pt; font-weight: 700; color: #E65100;">입금 확인</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">고객 입금 확인</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">기준금액 산정</p>
|
|
</div>
|
|
|
|
<!-- 화살표 -->
|
|
<div style="display: flex; align-items: center;">
|
|
<p style="font-size: 14pt; color: #ccc;">→</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div style="flex: 1; background: #E8F5E9; border-radius: 10pt; padding: 14pt; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6pt;">
|
|
<div style="width: 28pt; height: 28pt; background: #4CAF50; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">3</p>
|
|
</div>
|
|
<p style="font-size: 10pt; font-weight: 700; color: #2E7D32;">1차 지급</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">수당 50% 지급</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">(입금 확인 후)</p>
|
|
</div>
|
|
|
|
<!-- 화살표 -->
|
|
<div style="display: flex; align-items: center;">
|
|
<p style="font-size: 14pt; color: #ccc;">→</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div style="flex: 1; background: #F3E5F5; border-radius: 10pt; padding: 14pt; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6pt;">
|
|
<div style="width: 28pt; height: 28pt; background: #9C27B0; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
|
|
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">4</p>
|
|
</div>
|
|
<p style="font-size: 10pt; font-weight: 700; color: #7B1FA2;">2차 지급</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">나머지 50% 지급</p>
|
|
<p style="font-size: 8pt; color: #666; line-height: 1.4;">(완료 후)</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 핵심 정리 -->
|
|
<div style="flex: 1; display: flex; gap: 14pt;">
|
|
<!-- 기억하세요 -->
|
|
<div style="flex: 1; background: #fafafa; border-radius: 10pt; padding: 14pt; border: 1pt solid #e0e0e0;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #1a1a2e; margin-bottom: 10pt;">핵심 정리</p>
|
|
<div style="display: flex; flex-direction: column; gap: 6pt;">
|
|
<div style="display: flex; align-items: flex-start; gap: 6pt;">
|
|
<div style="min-width: 16pt; height: 16pt; background: #4CAF50; border-radius: 3pt; display: flex; align-items: center; justify-content: center; margin-top: 1pt;">
|
|
<p style="font-size: 8pt; color: #fff; font-weight: 700;">1</p>
|
|
</div>
|
|
<p style="font-size: 9pt; color: #333; line-height: 1.5;">기준금액 = 개발비의 50%</p>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-start; gap: 6pt;">
|
|
<div style="min-width: 16pt; height: 16pt; background: #2196F3; border-radius: 3pt; display: flex; align-items: center; justify-content: center; margin-top: 1pt;">
|
|
<p style="font-size: 8pt; color: #fff; font-weight: 700;">2</p>
|
|
</div>
|
|
<p style="font-size: 9pt; color: #333; line-height: 1.5;">모든 수당은 2단계 분할 지급</p>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-start; gap: 6pt;">
|
|
<div style="min-width: 16pt; height: 16pt; background: #9C27B0; border-radius: 3pt; display: flex; align-items: center; justify-content: center; margin-top: 1pt;">
|
|
<p style="font-size: 8pt; color: #fff; font-weight: 700;">3</p>
|
|
</div>
|
|
<p style="font-size: 9pt; color: #333; line-height: 1.5;">협업지원금은 유치자에게 자동 지급</p>
|
|
</div>
|
|
<div style="display: flex; align-items: flex-start; gap: 6pt;">
|
|
<div style="min-width: 16pt; height: 16pt; background: #FF9800; border-radius: 3pt; display: flex; align-items: center; justify-content: center; margin-top: 1pt;">
|
|
<p style="font-size: 8pt; color: #fff; font-weight: 700;">4</p>
|
|
</div>
|
|
<p style="font-size: 9pt; color: #333; line-height: 1.5;">SAM 대시보드에서 실시간 확인 가능</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 비교 요약표 -->
|
|
<div style="flex: 1.2; background: #1a1a2e; border-radius: 10pt; padding: 14pt; color: #ffffff;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #ffffff; margin-bottom: 10pt;">수당 비교 요약</p>
|
|
<!-- 헤더 -->
|
|
<div style="display: flex; padding: 6pt 0; border-bottom: 1pt solid rgba(255,255,255,0.2); margin-bottom: 4pt;">
|
|
<div style="flex: 1.2;">
|
|
<p style="font-size: 8pt; color: rgba(255,255,255,0.5);">구분</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 8pt; color: #4CAF50; font-weight: 600;">개인</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 8pt; color: #42A5F5; font-weight: 600;">단체</p>
|
|
</div>
|
|
</div>
|
|
<!-- 판매자 -->
|
|
<div style="display: flex; padding: 5pt 0; border-bottom: 1pt solid rgba(255,255,255,0.1);">
|
|
<div style="flex: 1.2;">
|
|
<p style="font-size: 9pt; color: rgba(255,255,255,0.8);">파트너/단체</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #4CAF50;">20%</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #4CAF50;">30%</p>
|
|
</div>
|
|
</div>
|
|
<!-- 관리자 -->
|
|
<div style="display: flex; padding: 5pt 0; border-bottom: 1pt solid rgba(255,255,255,0.1);">
|
|
<div style="flex: 1.2;">
|
|
<p style="font-size: 9pt; color: rgba(255,255,255,0.8);">관리자</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #42A5F5;">5%</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: rgba(255,255,255,0.3);">0%</p>
|
|
</div>
|
|
</div>
|
|
<!-- 협업지원금 -->
|
|
<div style="display: flex; padding: 5pt 0; border-bottom: 1pt solid rgba(255,255,255,0.1);">
|
|
<div style="flex: 1.2;">
|
|
<p style="font-size: 9pt; color: rgba(255,255,255,0.8);">협업지원금</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #CE93D8;">3%</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #CE93D8;">3%</p>
|
|
</div>
|
|
</div>
|
|
<!-- 합계 -->
|
|
<div style="display: flex; padding: 6pt 0; margin-top: 2pt;">
|
|
<div style="flex: 1.2;">
|
|
<p style="font-size: 10pt; font-weight: 700; color: #ffffff;">합계</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 12pt; font-weight: 800; color: #4CAF50;">28%</p>
|
|
</div>
|
|
<div style="flex: 1; text-align: center;">
|
|
<p style="font-size: 12pt; font-weight: 800; color: #42A5F5;">33%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하단 -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10pt;">
|
|
<p style="font-size: 7pt; color: #bbb;">주일/경동 | 2026년 2월</p>
|
|
<p style="font-size: 7pt; color: #bbb;">7 / 7</p>
|
|
</div>
|
|
</body>
|
|
</html> |