486 lines
13 KiB
PHP
486 lines
13 KiB
PHP
<?php
|
|
/**
|
|
* legal_cert_print.php - 수료증 출력 화면 스킨
|
|
*/
|
|
require_once __DIR__ . '/../../bbs/auth.php';
|
|
edu_require_login();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>수료증 출력 - 배움터</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Gowun+Batang:wght@400;700&display=swap');
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f1f5f9;
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 화면용 컨트롤 패널 */
|
|
.control-panel {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
margin: 20px auto 10px;
|
|
padding: 15px 20px;
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #114b3d;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0d3a2f;
|
|
box-shadow: 0 4px 12px rgba(17, 75, 61, 0.2);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #e2e8f0;
|
|
color: #334155;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #cbd5e1;
|
|
}
|
|
|
|
/* 수료증 컨테이너 (화면용 A4 비율 가이드) */
|
|
.cert-page {
|
|
background: #ffffff;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
padding: 20mm;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
|
|
margin: 10px auto 40px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 인장 외곽 얇은 테두리 */
|
|
.cert-outer-border {
|
|
border: 1px solid #c0c0c0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 6px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
/* 인장 내부 두껍고 고급스러운 테두리 */
|
|
.cert-inner-border {
|
|
border: 2px solid #4a5568;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 55px 45px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 모서리 고전 장식 문양 */
|
|
.corner-decor {
|
|
position: absolute;
|
|
width: 24px;
|
|
height: 24px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.decor-tl {
|
|
top: -6px;
|
|
left: -6px;
|
|
}
|
|
|
|
.decor-tr {
|
|
top: -6px;
|
|
right: -6px;
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.decor-bl {
|
|
bottom: -6px;
|
|
left: -6px;
|
|
transform: scaleY(-1);
|
|
}
|
|
|
|
.decor-br {
|
|
bottom: -6px;
|
|
right: -6px;
|
|
transform: scale(-1);
|
|
}
|
|
|
|
/* 발급 번호 영역 */
|
|
.cert-no-area {
|
|
font-size: 13px;
|
|
color: #4a5568;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
height: 20px;
|
|
}
|
|
|
|
/* 수료증 메인 타이틀 */
|
|
.cert-title {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 52px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
letter-spacing: 28px;
|
|
text-indent: 28px;
|
|
margin: 35px 0 45px;
|
|
color: #1a202c;
|
|
}
|
|
|
|
/* 가로 구분선 */
|
|
.divider {
|
|
border-top: 1.2px solid #a0aec0;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 본문 데이터 리스트 */
|
|
.info-table {
|
|
width: 90%;
|
|
margin: 45px auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.info-label {
|
|
width: 150px;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.info-label .bullet {
|
|
color: #a0aec0;
|
|
font-size: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.info-label .text {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.info-value {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
color: #1a202c;
|
|
}
|
|
|
|
/* 은은하게 흐르는 백그라운드 워터마크 */
|
|
.watermark-container {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 48%;
|
|
transform: translate(-50%, -50%);
|
|
width: 320px;
|
|
height: 320px;
|
|
opacity: 0.08;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.watermark-img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* 수여 선언 문구 */
|
|
.cert-statement {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 21px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
line-height: 2;
|
|
color: #2d3748;
|
|
margin: 40px 0;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
/* 수료일자 */
|
|
.cert-date {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
letter-spacing: 4px;
|
|
color: #2d3748;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
/* 발송 기관 및 직인 */
|
|
.cert-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.company-name {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: #1a202c;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ceo-name-area {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
/* 대표이사 텍스트 라인 전체 정의 */
|
|
.ceo-text {
|
|
position: relative; /* 💡 도장(absolute)의 절대 기준점이 됨 */
|
|
display: inline-block;
|
|
font-size: 20px; /* 프로젝트 환경에 맞게 조절 */
|
|
font-weight: bold;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 도장 컨테이너 위치 정밀 제어 */
|
|
.stamp-container {
|
|
position: absolute;
|
|
top: -15px; /* 💡 위아래 정렬 (이름 글자 중간쯤 오도록 마이너스 조절) */
|
|
left: 100%; /* 💡 이름 텍스트가 끝나는 바로 우측 끝 지점에 강제 배치 */
|
|
margin-left: 5px; /* 이름과 도장 사이의 기본 여백 */
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 도장 이미지 사이즈 및 효과 */
|
|
.stamp-img {
|
|
width: 50px; /* 💡 수료증 직인 표준 사이즈 (50px ~ 60px 추천) */
|
|
height: 50px;
|
|
object-fit: contain;
|
|
opacity: 0.9; /* 글자가 살짝 비치도록 리얼리티 부여 */
|
|
}
|
|
|
|
/* 프린팅 관련 설정 */
|
|
@media print {
|
|
body {
|
|
background-color: #ffffff;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.cert-page {
|
|
margin: 0;
|
|
box-shadow: none;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
page-break-after: always;
|
|
page-break-before: avoid;
|
|
}
|
|
|
|
.cert-page:last-child {
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
/* 웹 브라우저 인쇄 강제 여백 제거 */
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- 화면용 상단 컨트롤 패널 -->
|
|
<div class="control-panel no-print">
|
|
<div style="font-weight: bold; color: #334155; font-size: 16px;">
|
|
<i class="fa-solid fa-graduation-cap text-[#114b3d] mr-1"></i> 수료증 인쇄 미리보기
|
|
</div>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button class="btn btn-primary" onclick="window.print()">
|
|
<i class="fa-solid fa-print"></i> 인쇄하기 (PDF 저장)
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="window.close()">
|
|
<i class="fa-solid fa-xmark"></i> 창 닫기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수료증 메인 A4 용지 -->
|
|
<div class="cert-page">
|
|
<div class="cert-outer-border">
|
|
|
|
<!-- 모서리 코너 장식 문양 (SVG) -->
|
|
<!-- 탑 레프트 -->
|
|
<svg class="corner-decor decor-tl" viewBox="0 0 30 30" width="30" height="30">
|
|
<rect x="0" y="0" width="8" height="8" fill="#4a5568" />
|
|
<line x1="4" y1="4" x2="30" y2="4" stroke="#4a5568" stroke-width="2" />
|
|
<line x1="4" y1="4" x2="4" y2="30" stroke="#4a5568" stroke-width="2" />
|
|
</svg>
|
|
<!-- 탑 라이트 -->
|
|
<svg class="corner-decor decor-tr" viewBox="0 0 30 30" width="30" height="30">
|
|
<rect x="0" y="0" width="8" height="8" fill="#4a5568" />
|
|
<line x1="4" y1="4" x2="30" y2="4" stroke="#4a5568" stroke-width="2" />
|
|
<line x1="4" y1="4" x2="4" y2="30" stroke="#4a5568" stroke-width="2" />
|
|
</svg>
|
|
<!-- 바텀 레프트 -->
|
|
<svg class="corner-decor decor-bl" viewBox="0 0 30 30" width="30" height="30">
|
|
<rect x="0" y="0" width="8" height="8" fill="#4a5568" />
|
|
<line x1="4" y1="4" x2="30" y2="4" stroke="#4a5568" stroke-width="2" />
|
|
<line x1="4" y1="4" x2="4" y2="30" stroke="#4a5568" stroke-width="2" />
|
|
</svg>
|
|
<!-- 바텀 라이트 -->
|
|
<svg class="corner-decor decor-br" viewBox="0 0 30 30" width="30" height="30">
|
|
<rect x="0" y="0" width="8" height="8" fill="#4a5568" />
|
|
<line x1="4" y1="4" x2="30" y2="4" stroke="#4a5568" stroke-width="2" />
|
|
<line x1="4" y1="4" x2="4" y2="30" stroke="#4a5568" stroke-width="2" />
|
|
</svg>
|
|
|
|
<!-- 수료증 컨텐츠 내부 테두리 안쪽 -->
|
|
<div class="cert-inner-border">
|
|
|
|
<!-- 백그라운드 흐릿한 로고 워터마크 -->
|
|
<div class="watermark-container">
|
|
<img id="val-watermark" src="" class="watermark-img" alt="" style="display: none;">
|
|
</div>
|
|
|
|
<!-- 발급 번호 -->
|
|
<div class="cert-no-area">
|
|
발급번호 : <span id="val-cert-no">제 - 호</span>
|
|
</div>
|
|
|
|
<!-- 메인 타이틀 -->
|
|
<div class="cert-title">수료증</div>
|
|
|
|
<!-- 상단 가로 구분선 -->
|
|
<div class="divider"></div>
|
|
|
|
<!-- 본문 리스트 -->
|
|
<div class="info-table">
|
|
<!-- 성명 -->
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
<span class="bullet">●</span>
|
|
<span class="text"><span>성</span><span>명 : </span></span>
|
|
</div>
|
|
<div class="info-value" id="val-name">-</div>
|
|
</div>
|
|
<!-- 교육과정 -->
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
<span class="bullet">●</span>
|
|
<span class="text"><span>교</span><span>육</span><span>과</span><span>정 : </span></span>
|
|
</div>
|
|
<div class="info-value" id="val-category">-</div>
|
|
</div>
|
|
<!-- 교육기간 -->
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
<span class="bullet">●</span>
|
|
<span class="text"><span>교</span><span>육</span><span>기</span><span>간 : </span></span>
|
|
</div>
|
|
<div class="info-value" id="val-period">-</div>
|
|
</div>
|
|
<!-- 교육시간 -->
|
|
<div class="info-row">
|
|
<div class="info-label">
|
|
<span class="bullet">●</span>
|
|
<span class="text"><span>교</span><span>육</span><span>시</span><span>간</span></span>
|
|
</div>
|
|
<div class="info-value" id="val-hours">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 하단 가로 구분선 -->
|
|
<div class="divider"></div>
|
|
|
|
<!-- 수여 성명 및 선언문 -->
|
|
<div class="cert-statement">
|
|
상기인은 위의 교육과정을 수료하였으므로<br>이 증서를 수여합니다.
|
|
</div>
|
|
|
|
<!-- 수료 년월일 -->
|
|
<div class="cert-date" id="val-prt-date">
|
|
- 년 - 월 - 일
|
|
</div>
|
|
|
|
<!-- 발송 회사명 및 대표이사 서명/도장 -->
|
|
<div class="cert-footer">
|
|
<div class="company-name" id="val-company">-</div>
|
|
<div class="ceo-name-area">
|
|
<span class="ceo-text">
|
|
대표이사 <span id="val-ceo">-</span>
|
|
|
|
<span class="stamp-container">
|
|
<img id="val-stamp" src="" class="stamp-img" alt="직인" style="display: none;">
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 자바스크립트 로직 로드 -->
|
|
<script src="../js/legal_cert_print.js?v=<?= time() ?>"></script>
|
|
</body>
|
|
|
|
</html>
|