- classic(클래식), modern(모던), blue(블루), dark(다크), colorful(컬러풀) 5종 - 문서 상단 미리보기 카드 클릭으로 즉시 디자인 전환 - URL 쿼리 파라미터 ?template=xxx 방식, 기본값 classic - 인쇄/PDF 시 선택 UI 자동 숨김 (no-print) - 기존 디자인은 classic 템플릿으로 100% 보존
125 lines
7.5 KiB
PHP
125 lines
7.5 KiB
PHP
{{-- 모던/미니멀 견적서 템플릿 --}}
|
|
<style>
|
|
.modern { font-family: 'Pretendard', sans-serif; color: #374151; }
|
|
.modern .doc-table { width: 100%; border-collapse: collapse; }
|
|
.modern .doc-table th, .modern .doc-table td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #e5e7eb; }
|
|
.modern .doc-table th { font-weight: 500; color: #6b7280; background: transparent; }
|
|
.modern .doc-table thead th { border-bottom: 2px solid #d1d5db; color: #374151; font-weight: 600; }
|
|
.modern .doc-table tbody tr:nth-child(even) { background-color: #f9fafb; }
|
|
.modern .doc-table tfoot td, .modern .doc-table tfoot th { border-top: 2px solid #d1d5db; border-bottom: none; }
|
|
.modern .seal-line { width: 120px; border-bottom: 1px solid #9ca3af; display: inline-block; margin-left: 8px; }
|
|
</style>
|
|
|
|
<div class="modern document-page max-w-[210mm] mx-auto my-8 bg-white shadow-lg" style="padding: 18mm 22mm;">
|
|
|
|
{{-- 헤더 --}}
|
|
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb;">
|
|
<div>
|
|
<h1 style="font-size: 28px; font-weight: 300; letter-spacing: 0.3em; color: #111827; margin: 0;">견적서</h1>
|
|
<p style="font-size: 12px; color: #9ca3af; margin-top: 4px;">QUOTATION</p>
|
|
</div>
|
|
<div style="text-align: right; font-size: 12px; color: #6b7280;">
|
|
<p>No. {{ $quotationNo }}</p>
|
|
<p>{{ $quotation->created_at->format('Y. m. d') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 수신 / 공급자 --}}
|
|
<div style="display: flex; gap: 24px; margin-bottom: 28px;">
|
|
<div style="flex: 1; padding: 16px; background: #f9fafb; border-radius: 8px;">
|
|
<p style="font-size: 11px; color: #9ca3af; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em;">수신</p>
|
|
<p style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">{{ $quotation->title }}</p>
|
|
<p style="font-size: 12px; color: #6b7280;">{{ $company['industry'] ?? '-' }} · {{ $company['scale'] ?? '-' }}</p>
|
|
@if(!empty($company['current_systems']))
|
|
<p style="font-size: 11px; color: #9ca3af; margin-top: 4px;">현재: {{ implode(', ', $company['current_systems']) }}</p>
|
|
@endif
|
|
</div>
|
|
<div style="flex: 1; padding: 16px; background: #f9fafb; border-radius: 8px;">
|
|
<p style="font-size: 11px; color: #9ca3af; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em;">공급자</p>
|
|
<p style="font-size: 15px; font-weight: 600; margin-bottom: 4px;">(주)코드브릿지엑스</p>
|
|
<p style="font-size: 12px; color: #6b7280;">대표 이의찬</p>
|
|
<p style="font-size: 11px; color: #9ca3af; margin-top: 4px;">인천 남동구 남동대로 215번길 30 · 032-123-4567</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 합계 --}}
|
|
<div style="margin-bottom: 28px; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; text-align: center;">
|
|
<p style="font-size: 12px; color: #9ca3af; margin-bottom: 8px;">아래와 같이 견적합니다.</p>
|
|
<p style="font-size: 22px; font-weight: 300; color: #111827;">
|
|
금 <strong>{{ $devTotalKorean }}</strong>원정
|
|
<span style="font-size: 14px; color: #6b7280; font-weight: 400;">(₩{{ number_format($devSubtotal) }})</span>
|
|
</p>
|
|
<p style="font-size: 11px; color: #9ca3af; margin-top: 6px;">부가가치세 별도 · 월 구독료 {{ number_format($monthlySubtotal) }}원 별도</p>
|
|
</div>
|
|
|
|
{{-- 품목 --}}
|
|
<table class="doc-table" style="margin-bottom: 28px;">
|
|
<colgroup>
|
|
<col style="width: 5%;"><col style="width: 7%;"><col style="width: 20%;"><col style="width: 33%;"><col style="width: 17.5%;"><col style="width: 17.5%;">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center">No</th><th class="text-center">구분</th><th>품목</th>
|
|
<th>설명</th><th class="text-right">개발비</th><th class="text-right">월 구독료</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($sortedItems as $index => $item)
|
|
<tr>
|
|
<td class="text-center" style="color: #9ca3af;">{{ $index + 1 }}</td>
|
|
<td class="text-center">
|
|
<span style="font-size: 11px; padding: 2px 6px; border-radius: 4px; {{ $item->is_required ? 'background:#dbeafe;color:#1d4ed8;' : 'background:#f3f4f6;color:#6b7280;' }}">
|
|
{{ $item->is_required ? '필수' : '선택' }}
|
|
</span>
|
|
</td>
|
|
<td style="font-weight: 500;">{{ $item->module_name }}</td>
|
|
<td style="font-size: 12px; color: #6b7280;">{{ Str::limit($item->reason, 80) }}</td>
|
|
<td class="text-right">{{ number_format((int) $item->dev_cost) }}</td>
|
|
<td class="text-right">{{ number_format((int) $item->monthly_fee) }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th colspan="4" class="text-right">소계</th>
|
|
<td class="text-right font-bold">{{ number_format($devSubtotal) }}</td>
|
|
<td class="text-right font-bold">{{ number_format($monthlySubtotal) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="4" class="text-right" style="color: #9ca3af;">VAT (10%)</th>
|
|
<td class="text-right" style="color: #9ca3af;">{{ number_format($devVat) }}</td>
|
|
<td class="text-right" style="color: #9ca3af;">{{ number_format($monthlyVat) }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="4" class="text-right" style="font-size: 15px;">합계</th>
|
|
<td class="text-right font-bold" style="font-size: 15px;">{{ number_format($devTotal) }}</td>
|
|
<td class="text-right font-bold" style="font-size: 15px;">{{ number_format($monthlyTotal) }}</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
{{-- 비고 --}}
|
|
<div style="margin-bottom: 32px; padding: 16px 20px; background: #f9fafb; border-radius: 8px;">
|
|
<p style="font-size: 11px; color: #9ca3af; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em;">비고</p>
|
|
<ol style="list-style: decimal; padding-left: 18px; font-size: 12px; color: #6b7280; line-height: 1.8;">
|
|
<li>상기 금액은 부가가치세 별도입니다.</li>
|
|
<li>개발비 납부 조건: 계약 시 50%, 완료 시 50% 분할 납부</li>
|
|
<li>월 구독료: 서비스 오픈일부터 과금 (월 {{ number_format($monthlyTotal) }}원, VAT 포함)</li>
|
|
@if($estimatedMonths)
|
|
<li>예상 구축 기간: {{ $estimatedMonths }}개월</li>
|
|
@endif
|
|
<li>본 견적서의 유효기간은 견적일로부터 30일입니다.</li>
|
|
<li>세부 사항은 별도 협의를 통해 조정될 수 있습니다.</li>
|
|
</ol>
|
|
</div>
|
|
|
|
{{-- 서명 --}}
|
|
<div style="display: flex; justify-content: flex-end; align-items: center; gap: 24px; margin-top: 48px;">
|
|
<div style="text-align: right;">
|
|
<p style="font-size: 16px; font-weight: 600;">(주)코드브릿지엑스</p>
|
|
<p style="font-size: 12px; color: #6b7280; margin-top: 4px;">대표이사 이의찬 <span class="seal-line"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|