347 lines
9.7 KiB
HTML
347 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>동물약 복약안내문</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
font-size: 10pt;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
background: #fff;
|
|
}
|
|
|
|
.container {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
padding: 8mm;
|
|
position: relative;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
border-bottom: 3px solid #2E7D32;
|
|
padding-bottom: 4mm;
|
|
margin-bottom: 4mm;
|
|
}
|
|
|
|
.header-left { flex: 1; }
|
|
|
|
.patient-name {
|
|
font-size: 18pt;
|
|
font-weight: 700;
|
|
color: #1B5E20;
|
|
}
|
|
|
|
.patient-info {
|
|
font-size: 9pt;
|
|
color: #666;
|
|
margin-top: 2mm;
|
|
}
|
|
|
|
.header-center {
|
|
text-align: center;
|
|
flex: 2;
|
|
}
|
|
|
|
.pharmacy-name {
|
|
font-size: 16pt;
|
|
font-weight: 700;
|
|
color: #2E7D32;
|
|
}
|
|
|
|
.pharmacy-slogan {
|
|
font-size: 9pt;
|
|
color: #4CAF50;
|
|
margin-top: 1mm;
|
|
}
|
|
|
|
.header-right {
|
|
text-align: right;
|
|
font-size: 8pt;
|
|
color: #666;
|
|
}
|
|
|
|
/* 건강정보 */
|
|
.health-info {
|
|
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
|
|
border-radius: 2mm;
|
|
padding: 3mm 4mm;
|
|
margin-bottom: 4mm;
|
|
}
|
|
|
|
.health-title {
|
|
font-size: 11pt;
|
|
font-weight: 700;
|
|
color: #1B5E20;
|
|
margin-bottom: 1mm;
|
|
}
|
|
|
|
.health-content {
|
|
font-size: 8pt;
|
|
color: #33691E;
|
|
}
|
|
|
|
/* 약품 카드 */
|
|
.drug-cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 3mm;
|
|
}
|
|
|
|
.drug-card {
|
|
width: calc(50% - 1.5mm);
|
|
background: #fff;
|
|
border: 1px solid #C8E6C9;
|
|
border-radius: 2mm;
|
|
overflow: hidden;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.drug-card.full-width { width: 100%; }
|
|
|
|
.drug-header {
|
|
display: flex;
|
|
background: #E8F5E9;
|
|
padding: 2mm;
|
|
gap: 2mm;
|
|
}
|
|
|
|
.drug-image {
|
|
width: 15mm;
|
|
height: 15mm;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
border-radius: 1mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
.drug-title { flex: 1; }
|
|
|
|
.drug-name {
|
|
font-size: 10pt;
|
|
font-weight: 700;
|
|
color: #1B5E20;
|
|
}
|
|
|
|
.drug-category {
|
|
display: inline-block;
|
|
background: #4CAF50;
|
|
color: white;
|
|
font-size: 7pt;
|
|
padding: 0.5mm 2mm;
|
|
border-radius: 1mm;
|
|
margin-top: 1mm;
|
|
}
|
|
|
|
.target-animals {
|
|
display: flex;
|
|
gap: 1mm;
|
|
margin-top: 1mm;
|
|
}
|
|
|
|
.animal-badge {
|
|
background: #81C784;
|
|
color: white;
|
|
font-size: 6pt;
|
|
padding: 0.3mm 1.5mm;
|
|
border-radius: 0.5mm;
|
|
}
|
|
|
|
.drug-english {
|
|
font-size: 6pt;
|
|
color: #888;
|
|
margin-top: 0.5mm;
|
|
}
|
|
|
|
.drug-body {
|
|
padding: 2mm;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.drug-section { margin-bottom: 1.5mm; }
|
|
|
|
.drug-section-title {
|
|
font-weight: 600;
|
|
color: #2E7D32;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.drug-section-content {
|
|
color: #555;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* 용법용량 */
|
|
.dosage-highlight {
|
|
background: #E3F2FD;
|
|
border: 1px solid #64B5F6;
|
|
border-radius: 1.5mm;
|
|
padding: 1.5mm 2mm;
|
|
margin-top: 1.5mm;
|
|
}
|
|
|
|
.dosage-title {
|
|
font-weight: 700;
|
|
color: #1565C0;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.dosage-content {
|
|
color: #0D47A1;
|
|
font-size: 7pt;
|
|
margin-top: 0.5mm;
|
|
}
|
|
|
|
/* 주의사항 */
|
|
.caution-box {
|
|
background: #FFF3E0;
|
|
border: 1px solid #FFB74D;
|
|
border-radius: 1.5mm;
|
|
padding: 1.5mm 2mm;
|
|
margin-top: 1.5mm;
|
|
}
|
|
|
|
.caution-title {
|
|
font-weight: 700;
|
|
color: #E65100;
|
|
font-size: 7pt;
|
|
}
|
|
|
|
.caution-list {
|
|
list-style: none;
|
|
margin-top: 0.5mm;
|
|
}
|
|
|
|
.caution-list li {
|
|
font-size: 6.5pt;
|
|
color: #BF360C;
|
|
margin-bottom: 0.3mm;
|
|
padding-left: 2mm;
|
|
position: relative;
|
|
}
|
|
|
|
.caution-list li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
|
|
/* 푸터 */
|
|
.footer {
|
|
position: absolute;
|
|
bottom: 5mm;
|
|
left: 8mm;
|
|
right: 8mm;
|
|
text-align: center;
|
|
font-size: 7pt;
|
|
color: #999;
|
|
border-top: 1px solid #E0E0E0;
|
|
padding-top: 2mm;
|
|
}
|
|
|
|
.footer-logo {
|
|
font-weight: 700;
|
|
color: #2E7D32;
|
|
font-size: 9pt;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 헤더 -->
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<div class="patient-name">{{ patient_name }} 보호자님</div>
|
|
<div class="patient-info">
|
|
환자: {{ pet_name }} ({{ pet_species }}, {{ pet_age }})<br>
|
|
조제일: {{ issue_date }}
|
|
</div>
|
|
</div>
|
|
<div class="header-center">
|
|
<div class="pharmacy-name">🐾 {{ pharmacy_name }}</div>
|
|
<div class="pharmacy-slogan">반려동물의 건강한 삶을 위한 복약안내</div>
|
|
</div>
|
|
<div class="header-right">
|
|
{{ pharmacy_tel }}<br>
|
|
{{ pharmacy_address }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 건강정보 -->
|
|
<div class="health-info">
|
|
<div class="health-title">💊 약사의 복약 안내</div>
|
|
<div class="health-content">
|
|
처방된 약품을 정확한 용법에 따라 투여해 주세요.
|
|
투약 중 이상반응이 나타나면 즉시 투약을 중단하고 수의사 또는 약사에게 상담하세요.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 약품 카드들 -->
|
|
<div class="drug-cards">
|
|
{% for drug in drugs %}
|
|
<div class="drug-card">
|
|
<div class="drug-header">
|
|
<div class="drug-image">💊</div>
|
|
<div class="drug-title">
|
|
<div class="drug-name">{{ drug.name }}</div>
|
|
<span class="drug-category">{{ drug.category }}</span>
|
|
<div class="target-animals">
|
|
{% for animal in drug.target_animal %}
|
|
<span class="animal-badge">{{ animal }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="drug-english">{{ drug.english_name }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="drug-body">
|
|
<div class="drug-section">
|
|
<div class="drug-section-title">성분</div>
|
|
<div class="drug-section-content">{{ drug.ingredients }}</div>
|
|
</div>
|
|
<div class="drug-section">
|
|
<div class="drug-section-title">효능효과</div>
|
|
<div class="drug-section-content">{{ drug.efficacy }}</div>
|
|
</div>
|
|
|
|
<div class="dosage-highlight">
|
|
<div class="dosage-title">📋 용법용량</div>
|
|
<div class="dosage-content">{{ drug.dosage }}</div>
|
|
</div>
|
|
|
|
<div class="caution-box">
|
|
<div class="caution-title">⚠️ 주의사항</div>
|
|
<ul class="caution-list">
|
|
{% for precaution in drug.precautions %}
|
|
<li>{{ precaution }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 푸터 -->
|
|
<div class="footer">
|
|
<div class="footer-logo">🐾 동물약 복약안내 시스템</div>
|
|
※ 본 복약안내문은 참고용이며, 정확한 투약은 반드시 수의사의 지시에 따라 주세요.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|