Files
animal-medication-api/templates/medication_guide_v2.html

449 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>동물약 복약안내문 v2</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
font-family: 'Noto Sans KR', sans-serif;
font-size: 9pt;
color: #333;
line-height: 1.4;
background: #fff;
}
/* 페이지 */
.page {
width: 210mm;
min-height: 297mm;
padding: 5mm;
page-break-after: always;
box-sizing: border-box;
}
.page:last-child {
page-break-after: avoid;
}
/* 헤더 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #1565C0;
padding-bottom: 2mm;
margin-bottom: 3mm;
height: 15mm;
}
.header-left .patient-name {
font-size: 14pt;
font-weight: 700;
color: #0D47A1;
}
.header-left .patient-info {
font-size: 7pt;
color: #666;
}
.header-center .pharmacy-name {
font-size: 12pt;
font-weight: 700;
color: #1565C0;
}
.header-right {
font-size: 7pt;
color: #666;
}
/* 카드 그리드 영역 */
.cards-area {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 3mm;
}
/* 약품 카드 */
.drug-card {
border: 1px solid #E0E0E0;
border-radius: 2mm;
overflow: hidden;
page-break-inside: avoid;
}
.drug-card-header {
background: linear-gradient(135deg, #1565C0, #42A5F5);
color: white;
padding: 1.5mm;
display: flex;
align-items: center;
gap: 2mm;
flex-shrink: 0;
}
.drug-icon {
width: 7mm;
height: 7mm;
background: white;
border-radius: 1mm;
display: flex;
align-items: center;
justify-content: center;
font-size: 10pt;
}
.drug-name {
font-size: 8pt;
font-weight: 700;
}
.drug-subtitle {
font-size: 5pt;
opacity: 0.9;
}
.drug-badges {
display: flex;
gap: 0.5mm;
flex-wrap: wrap;
}
.badge {
background: rgba(255,255,255,0.2);
padding: 0.2mm 1mm;
border-radius: 0.5mm;
font-size: 4.5pt;
}
.drug-card-body {
padding: 3mm;
font-size: 7pt;
}
/* 섹션들 */
.coverage-title {
font-size: 8pt;
font-weight: 700;
color: #1565C0;
margin-bottom: 2mm;
}
.coverage-table {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1mm;
background: #F5F5F5;
padding: 2mm;
border-radius: 1.5mm;
margin-bottom: 3mm;
}
.coverage-item {
background: white;
padding: 1.5mm;
border-radius: 1mm;
text-align: center;
font-size: 6pt;
}
.coverage-item.covered { border-left: 1.5px solid #4CAF50; }
.coverage-item.not-covered { border-left: 1.5px solid #F44336; background: #FFEBEE; }
.coverage-icon { font-size: 7pt; }
.coverage-name { font-weight: 500; }
/* 갭 경고 */
.gap-warning {
background: #FFF3E0;
border: 1px solid #FFB74D;
border-radius: 1.5mm;
padding: 2mm;
margin-bottom: 3mm;
font-size: 6pt;
}
.gap-warning-title { font-weight: 700; color: #E65100; font-size: 7pt; }
.gap-solution { color: #F57C00; }
/* 투약 정보 */
.dosing-section {
background: #E3F2FD;
border-radius: 1.5mm;
padding: 2mm 3mm;
margin-bottom: 3mm;
}
.dosing-title { font-weight: 700; color: #1565C0; font-size: 7pt; }
.dosing-main { font-size: 11pt; font-weight: 700; color: #0D47A1; }
.dosing-note { font-size: 6pt; color: #1976D2; margin-top: 1mm; }
/* 체중별 제품 */
.weight-products {
display: flex;
gap: 0.5mm;
flex-wrap: wrap;
margin-top: 1mm;
}
.weight-product {
background: #E8F5E9;
padding: 0.5mm 1mm;
border-radius: 0.5mm;
font-size: 4.5pt;
border: 0.5px solid #A5D6A7;
}
/* 용량표 */
.dosage-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1mm;
background: #E3F2FD;
padding: 2mm;
border-radius: 1.5mm;
margin-bottom: 3mm;
}
.dosage-cell {
background: white;
padding: 1.5mm;
border-radius: 1mm;
text-align: center;
font-size: 6pt;
}
.dosage-weight { font-weight: 500; color: #1565C0; font-size: 7pt; }
.dosage-amount { font-weight: 700; color: #0D47A1; font-size: 9pt; }
/* 절대 금기 */
.contraindication-box {
background: #FFEBEE;
border: 1.5px solid #F44336;
border-radius: 1.5mm;
padding: 2mm;
margin-bottom: 3mm;
}
.contraindication-title { font-weight: 900; color: #C62828; font-size: 8pt; margin-bottom: 1mm; }
.contraindication-list {
list-style: none;
font-size: 6pt;
color: #B71C1C;
}
.contraindication-list li { padding: 0.5mm 0; }
/* 주의사항 */
.warnings-section {
background: #FFF8E1;
border: 1px solid #FFE082;
border-radius: 1.5mm;
padding: 2mm;
}
.warnings-title { font-weight: 700; color: #F57F17; font-size: 7pt; margin-bottom: 1mm; }
.warnings-list {
list-style: none;
font-size: 6pt;
color: #795548;
}
.warnings-list li { padding: 0.3mm 0; }
/* 외용제 용법 */
.usage-box {
background: #E8F5E9;
padding: 1mm;
border-radius: 1mm;
font-size: 5pt;
margin-bottom: 1.5mm;
}
/* 푸터 */
.footer {
position: absolute;
bottom: 3mm;
left: 5mm;
right: 5mm;
text-align: center;
font-size: 5pt;
color: #9E9E9E;
border-top: 0.5px solid #E0E0E0;
padding-top: 1mm;
height: 7mm;
}
.footer-logo { font-weight: 700; color: #1565C0; font-size: 6pt; }
</style>
</head>
<body>
{% set drugs_per_page = 4 %}
{% set total_pages = ((drugs|length - 1) // drugs_per_page) + 1 %}
{% for page_num in range(total_pages) %}
<div class="page">
{% if page_num == 0 %}
<!-- 헤더 (첫 페이지만) -->
<div class="header">
<div class="header-left">
<div class="patient-name">{{ patient_name }} 보호자님</div>
<div class="patient-info">🐾 {{ pet_name }} ({{ pet_species }}, {{ pet_age }}) | 📅 {{ issue_date }}</div>
</div>
<div class="header-center">
<div class="pharmacy-name">🏥 {{ pharmacy_name }}</div>
</div>
<div class="header-right">{{ pharmacy_tel }}</div>
</div>
{% endif %}
<div class="cards-area">
{% set start_idx = page_num * drugs_per_page %}
{% set end_idx = [start_idx + drugs_per_page, drugs|length] | min %}
{% for drug in drugs[start_idx:end_idx] %}
<div class="drug-card">
<div class="drug-card-header">
<div class="drug-icon">💊</div>
<div>
<div class="drug-name">{{ drug.name }}</div>
<div class="drug-subtitle">{{ drug.english_name }}</div>
<div class="drug-badges">
<span class="badge">{{ drug.category_display }}</span>
{% for animal in drug.target_animal %}<span class="badge">{{ animal }}</span>{% endfor %}
</div>
</div>
</div>
<div class="drug-card-body">
{% if drug.category == 'antiparasitic' %}
<!-- 구충제 -->
<div class="coverage-title">🎯 구충 범위</div>
<div class="coverage-table">
{% for item in drug.coverage_summary.covered %}
<div class="coverage-item covered">
<span class="coverage-icon"></span>
<span class="coverage-name">{{ item }}</span>
</div>
{% endfor %}
{% for item in drug.coverage_summary.not_covered %}
<div class="coverage-item not-covered">
<span class="coverage-icon"></span>
<span class="coverage-name">{{ item }}</span>
</div>
{% endfor %}
</div>
{% if drug.coverage_summary.gap_solution %}
<div class="gap-warning">
<span class="gap-warning-title">⚠️ 보완:</span>
<span class="gap-solution">{{ drug.coverage_summary.gap_solution }}</span>
</div>
{% endif %}
<div class="dosing-section">
<div class="dosing-title">📅 투약</div>
<div class="dosing-main">{{ drug.dosing.interval }}</div>
{% if drug.weight_products %}
<div class="weight-products">
{% for wp in drug.weight_products %}<div class="weight-product">{{ wp.size }}({{ wp.weight_range }})</div>{% endfor %}
</div>
{% endif %}
</div>
{% elif drug.category == 'nsaid' %}
<!-- NSAIDs -->
<div class="coverage-title">⚖️ 용량 ({{ drug.dosage.standard }})</div>
<div class="dosage-grid">
{% for row in drug.dosage_table[:6] %}
<div class="dosage-cell">
<div class="dosage-weight">{{ row.weight }}</div>
<div class="dosage-amount">{{ row.tablets }}</div>
</div>
{% endfor %}
</div>
{% if drug.absolute_contraindications %}
<div class="contraindication-box">
<div class="contraindication-title">🚫 절대 금기</div>
<ul class="contraindication-list">
{% for c in drug.absolute_contraindications %}
<li>❌ {{ c.item }} — {{ c.reason }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% elif drug.category == 'antibiotic' %}
<!-- 항생제 -->
<div class="dosing-section">
<div class="dosing-title">📋 {{ drug.indication[:30] }}...</div>
<div class="dosing-main">{{ drug.dosage.standard }}</div>
<div class="dosing-note">기간: {{ drug.dosage.duration }}</div>
</div>
{% if drug.cat_warning %}
<div class="contraindication-box">
<div class="contraindication-title">🐱 고양이 주의</div>
<div style="font-size:5pt;">최대: {{ drug.cat_warning.max_dose }} ({{ drug.cat_warning.risk }})</div>
</div>
{% endif %}
{% elif drug.category == 'antiemetic' %}
<!-- 항구토제 -->
<div class="dosing-section">
<div class="dosing-title">📋 {{ drug.indication }}</div>
</div>
<div class="usage-box">
<b>급성구토:</b> {{ drug.dosage.acute_vomiting.dose }} ({{ drug.dosage.acute_vomiting.duration }})<br>
<b>멀미예방:</b> {{ drug.dosage.motion_sickness.dose }} ({{ drug.dosage.motion_sickness.timing }})
</div>
{% else %}
<!-- 기타 (외용제 등) -->
<div class="dosing-section">
<div class="dosing-title">📋 {{ drug.indication }}</div>
</div>
{% if drug.dosage %}
<div class="usage-box">
{% if drug.dosage.frequency %}<b>빈도:</b> {{ drug.dosage.frequency }}<br>{% endif %}
{% if drug.dosage.duration %}<b>기간:</b> {{ drug.dosage.duration }}<br>{% endif %}
{% if drug.dosage.contact_time %}<b>접촉:</b> {{ drug.dosage.contact_time }}{% endif %}
</div>
{% endif %}
{% endif %}
<!-- 주의사항 -->
{% if drug.warnings %}
<div class="warnings-section">
<div class="warnings-title">⚠️ 주의사항</div>
<ul class="warnings-list">
{% for w in drug.warnings %}<li>{{ w }}</li>{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if loop.last %}
<!-- 푸터 (마지막 페이지만) -->
<div class="footer">
<div class="footer-logo">🐾 동물약 복약안내 v2</div>
※ 참고용 안내문입니다. 정확한 투약은 수의사 지시에 따르세요.
</div>
{% endif %}
</div>
{% endfor %}
</body>
</html>