b24014/edu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: 교육 프로젝트 배포

Browse Source
This commit is contained in:
송대일
2026-07-01 18:32:42 +09:00
commit be6dccd120
1483 changed files with 5082202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/skin/legal_cert_print.php
+486
View File
@@ -0,0 +1,486 @@
<?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">
대표이사 &nbsp;<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>