hamza / templates /book.html
CORVO-AI's picture
Upload 5 files
55bccfc verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TDM Case Questions</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
:root {
--navy: #0a1628;
--blue-dark: #0d2137;
--blue-mid: #1a3a5c;
--blue: #1e5799;
--blue-light: #2980b9;
--blue-pale: #e8f4fd;
--blue-wash: #f0f7fc;
--steel: #34495e;
--text: #1a1a2e;
--text-mid: #4a5568;
--text-light: #718096;
--text-faint: #a0aec0;
--white: #ffffff;
--off-white: #f8fafc;
--border: #d2dce6;
--border-light: #e2e8f0;
--green-dark: #1a6b4a;
--green: #27ae60;
--green-bg: #eafaf1;
--red: #c0392b;
--red-bg: #fdf2f2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@page { size: A4; margin: 0; }
body {
font-family: 'Inter', -apple-system, sans-serif;
background: #c5d0db;
color: var(--text);
line-height: 1.6;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ============ COVER ============ */
.cover {
width: 210mm;
height: 297mm;
margin: 0 auto;
background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
page-break-after: always;
}
.cover-grid {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-image:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: 30px 30px;
}
.cover-accent-line {
position: absolute;
top: 0; left: 80px;
width: 3px; height: 100%;
background: linear-gradient(180deg, transparent, var(--blue-light), transparent);
opacity: 0.3;
}
.cover-accent-line2 {
position: absolute;
top: 0; left: 86px;
width: 1px; height: 100%;
background: linear-gradient(180deg, transparent, var(--blue-light), transparent);
opacity: 0.15;
}
.cover-top-bar {
position: absolute;
top: 40px; left: 40px; right: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cover-top-label {
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
font-weight: 500;
}
.cover-content {
text-align: center;
position: relative;
z-index: 2;
padding: 40px 60px;
}
.cover-photo {
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px solid rgba(41,128,185,0.5);
margin: 0 auto 35px;
overflow: hidden;
box-shadow: 0 0 40px rgba(41,128,185,0.2);
}
.cover-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cover-dept {
font-size: 10px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--blue-light);
font-weight: 600;
margin-bottom: 30px;
}
.cover-line {
width: 50px;
height: 2px;
background: var(--blue-light);
margin: 0 auto 30px;
}
.cover-title {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 40px;
font-weight: 700;
color: var(--white);
line-height: 1.15;
margin-bottom: 12px;
}
.cover-subtitle {
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,0.5);
letter-spacing: 2px;
margin-bottom: 45px;
}
.cover-divider {
width: 180px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
margin: 0 auto 40px;
}
.cover-author-label {
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-bottom: 10px;
}
.cover-author {
font-family: 'Source Serif 4', serif;
font-size: 24px;
font-weight: 600;
color: var(--white);
margin-bottom: 6px;
}
.cover-cred {
font-size: 12px;
color: rgba(255,255,255,0.4);
letter-spacing: 2px;
}
.cover-bottom {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.cover-bottom-text {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
}
.cover-badge {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--blue-light);
border: 1px solid rgba(41,128,185,0.3);
padding: 5px 16px;
}
/* ============ NOTE PAGE ============ */
.note-page {
width: 210mm;
height: 297mm;
margin: 0 auto;
background: var(--white);
padding: 70px 65px;
position: relative;
page-break-after: always;
}
.note-header {
border-bottom: 2px solid var(--blue);
padding-bottom: 15px;
margin-bottom: 40px;
}
.note-header-label {
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
margin-bottom: 8px;
}
.note-header-title {
font-family: 'Source Serif 4', serif;
font-size: 28px;
font-weight: 700;
color: var(--navy);
}
.note-intro {
font-size: 14px;
line-height: 1.9;
color: var(--text-mid);
margin-bottom: 35px;
padding: 20px 24px;
background: var(--blue-wash);
border-left: 3px solid var(--blue);
}
.note-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 20px;
margin-bottom: 12px;
border: 1px solid var(--border-light);
background: var(--off-white);
}
.note-item-num {
width: 28px;
height: 28px;
background: var(--blue);
color: var(--white);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.note-item-text {
font-size: 13px;
line-height: 1.8;
color: var(--text);
}
.note-item-text strong {
color: var(--blue);
font-weight: 700;
}
.note-footer {
position: absolute;
bottom: 50px;
left: 65px;
right: 65px;
text-align: center;
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.note-footer p {
font-size: 10px;
color: var(--text-faint);
letter-spacing: 1px;
}
/* ============ BOOK PAGES ============ */
.book-page {
width: 210mm;
min-height: 297mm;
margin: 0 auto;
background: var(--white);
padding: 45px 55px 65px 55px;
position: relative;
page-break-after: always;
}
.pg-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 2px solid var(--blue);
margin-bottom: 28px;
}
.pg-head-l {
font-size: 8px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
}
.pg-head-r {
font-size: 10px;
color: var(--text-light);
font-weight: 500;
}
.pg-num {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
color: var(--text-faint);
font-weight: 600;
}
/* Chapter */
.ch-head {
text-align: center;
margin-bottom: 35px;
padding: 20px 0;
border-bottom: 1px solid var(--border-light);
}
.ch-label {
font-size: 9px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
margin-bottom: 8px;
}
.ch-title {
font-family: 'Source Serif 4', serif;
font-size: 24px;
font-weight: 700;
color: var(--navy);
}
/* ============ QUESTIONS ============ */
.qb {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-light);
}
.qb:last-of-type {
border-bottom: none;
}
.qb-top {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 6px;
}
.qb-num {
width: 36px;
height: 36px;
background: var(--blue);
color: var(--white);
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.qb-title-area {
flex: 1;
padding-top: 2px;
}
.qb-cat {
font-size: 8px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
margin-bottom: 2px;
}
.qb-multi {
font-size: 9px;
letter-spacing: 1px;
color: var(--red);
font-weight: 700;
padding: 3px 10px;
background: var(--red-bg);
border-left: 3px solid var(--red);
display: inline-block;
margin-bottom: 10px;
margin-left: 50px;
}
.qb-stem {
font-size: 13.5px;
line-height: 1.75;
color: var(--text);
margin-bottom: 12px;
margin-left: 50px;
font-weight: 500;
}
.qb-opts {
list-style: none;
margin-left: 50px;
}
.qb-opts li {
display: flex;
align-items: baseline;
padding: 4px 0;
font-size: 13px;
color: var(--text);
line-height: 1.65;
}
.qb-opts li .lt {
font-weight: 700;
color: var(--blue-mid);
min-width: 24px;
font-size: 12px;
}
.qb-opts li .ot {
flex: 1;
}
/* ============ ANSWER KEY PAGES ============ */
.ak-block {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-light);
}
.ak-block:last-of-type {
border-bottom: none;
}
.ak-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.ak-num {
width: 30px;
height: 30px;
background: var(--blue);
color: var(--white);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ak-answer {
font-size: 14px;
font-weight: 700;
color: var(--green-dark);
}
.ak-answer span {
display: inline-block;
background: var(--green-bg);
border: 1px solid var(--green);
padding: 2px 10px;
margin-left: 4px;
font-size: 13px;
}
.ak-reason {
font-size: 12.5px;
line-height: 1.8;
color: var(--text-mid);
margin-left: 42px;
padding: 10px 16px;
background: var(--blue-wash);
border-left: 3px solid var(--blue);
}
/* ============ BACK PAGE ============ */
.back-page {
width: 210mm;
height: 297mm;
margin: 0 auto;
background: linear-gradient(160deg, var(--navy) 0%, var(--blue-dark) 40%, var(--blue-mid) 100%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.back-page .cover-grid,
.back-page .cover-accent-line,
.back-page .cover-accent-line2 {
position: absolute;
}
.back-content {
text-align: center;
position: relative;
z-index: 2;
padding: 60px 50px;
max-width: 500px;
}
.back-line {
width: 50px;
height: 2px;
background: var(--blue-light);
margin: 0 auto 30px;
}
.back-msg {
font-size: 14px;
color: rgba(255,255,255,0.5);
line-height: 1.9;
margin-bottom: 35px;
}
.back-author {
font-family: 'Source Serif 4', serif;
font-size: 22px;
font-weight: 600;
color: var(--white);
margin-bottom: 6px;
}
.back-info {
font-size: 11px;
color: rgba(255,255,255,0.35);
letter-spacing: 2px;
line-height: 2;
}
.back-badge {
margin-top: 40px;
display: inline-block;
padding: 6px 20px;
border: 1px solid rgba(41,128,185,0.3);
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--blue-light);
}
.back-disc {
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.back-disc p {
font-size: 8px;
color: rgba(255,255,255,0.2);
letter-spacing: 2px;
line-height: 2;
}
/* ============ PDF BUTTON ============ */
.pdf-btn {
position: fixed;
bottom: 30px;
right: 30px;
padding: 14px 28px;
background: var(--blue);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 0 4px 20px rgba(30,87,153,0.4);
z-index: 1000;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
}
.pdf-btn:hover { background: var(--blue-light); }
@media print {
.pdf-btn { display: none !important; }
body { background: white; }
}
</style>
</head>
<body>
<!-- ============ COVER ============ -->
<div class="cover">
<div class="cover-grid"></div>
<div class="cover-accent-line"></div>
<div class="cover-accent-line2"></div>
<div class="cover-top-bar">
<span class="cover-top-label">Clinical Pharmacy</span>
<span class="cover-top-label">Therapeutic Review</span>
</div>
<div class="cover-content">
<div class="cover-photo">
<img src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara">
</div>
<div class="cover-dept">Department of Clinical Pharmacy</div>
<div class="cover-line"></div>
<h1 class="cover-title">Therapeutic<br>Decision-Making</h1>
<p class="cover-subtitle">TDM Style Case Questions</p>
<div class="cover-divider"></div>
<p class="cover-author-label">Collected and Prepared By</p>
<h2 class="cover-author">Dr Hamza Abu Nawara</h2>
<p class="cover-cred">Clinical Pharmacy Practice</p>
</div>
<div class="cover-bottom">
<span class="cover-bottom-text">For Educational Purposes Only</span>
<span class="cover-badge">First Edition 2025</span>
<span class="cover-bottom-text">300+ Clinical Cases</span>
</div>
</div>
<!-- ============ NOTE PAGE ============ -->
<div class="note-page">
<div class="note-header">
<div class="note-header-label">Important Notice</div>
<div class="note-header-title">Before You Begin</div>
</div>
<div class="note-intro">
These more than 300 cases are based on prior clinical notes and previous exam scenarios.
In current MCQ formats, some questions may have more than one correct answer and may
require selecting multiple options. All appropriate answers should be chosen based on
the clinical context.
</div>
<div class="note-item">
<div class="note-item-num">1</div>
<div class="note-item-text">
Each question presents a <strong>clinical scenario</strong> followed by multiple
options. Read the stem carefully before selecting your answer.
</div>
</div>
<div class="note-item">
<div class="note-item-num">2</div>
<div class="note-item-text">
<strong>Some questions require selecting more than one answer.</strong>
These are clearly indicated with a red notice specifying the number
of correct answers to select.
</div>
</div>
<div class="note-item">
<div class="note-item-num">3</div>
<div class="note-item-text">
Questions are presented <strong>without answers</strong> in the main section.
All correct answers with detailed clinical reasoning are provided in the
<strong>Answer Key</strong> section at the end of the book.
</div>
</div>
<div class="note-item">
<div class="note-item-num">4</div>
<div class="note-item-text">
This collection covers multiple therapeutic areas including neurology,
cardiology, pulmonology, dermatology, anticoagulation, and more.
</div>
</div>
<div class="note-item">
<div class="note-item-num">5</div>
<div class="note-item-text">
Always verify clinical decisions with <strong>current guidelines</strong>
and evidence-based references. This material is intended for educational
purposes and exam preparation only.
</div>
</div>
<div class="note-footer">
<p>Total Questions: {{ questions | length }} | Collected by Dr Hamza Abu Nawara | Clinical Pharmacy Practice</p>
</div>
</div>
<!-- ============ QUESTION PAGES ============ -->
{% set ns = namespace(page_count=2) %}
{% set per_page = 3 %}
{% set total_pages = ((questions | length) / per_page) | round(0, 'ceil') | int %}
{% for p in range(total_pages) %}
<div class="book-page">
<div class="pg-head">
<span class="pg-head-l">TDM Case Questions</span>
<span class="pg-head-r">Dr Hamza Abu Nawara</span>
</div>
{% if p == 0 %}
<div class="ch-head">
<div class="ch-label">Section One</div>
<h2 class="ch-title">Clinical Case Questions</h2>
</div>
{% endif %}
{% set start = p * per_page %}
{% set end = start + per_page %}
{% for q in questions[start:end] %}
<div class="qb">
<div class="qb-top">
<div class="qb-num">{{ q.question_number }}</div>
<div class="qb-title-area">
<p class="qb-stem">{{ q.question }}</p>
</div>
</div>
{% if q.answer | length > 1 %}
<div class="qb-multi">SELECT {{ q.answer | length }} CORRECT ANSWERS</div>
{% endif %}
<ul class="qb-opts">
{% for opt in q.choices %}
<li>
<span class="lt">{{ opt.letter }}.</span>
<span class="ot">{{ opt.text }}</span>
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% set ns.page_count = ns.page_count + 1 %}
<div class="pg-num">{{ ns.page_count }}</div>
</div>
{% endfor %}
<!-- ============ ANSWER KEY PAGES ============ -->
{% set ak_per_page = 3 %}
{% set ak_total = ((questions | length) / ak_per_page) | round(0, 'ceil') | int %}
{% for p in range(ak_total) %}
<div class="book-page">
<div class="pg-head">
<span class="pg-head-l">Answer Key</span>
<span class="pg-head-r">Dr Hamza Abu Nawara</span>
</div>
{% if p == 0 %}
<div class="ch-head">
<div class="ch-label">Section Two</div>
<h2 class="ch-title">Answers and Clinical Reasoning</h2>
</div>
{% endif %}
{% set start = p * ak_per_page %}
{% set end = start + ak_per_page %}
{% for q in questions[start:end] %}
<div class="ak-block">
<div class="ak-top">
<div class="ak-num">{{ q.question_number }}</div>
<div class="ak-answer">
Answer{{ 's' if q.answer | length > 1 else '' }}:
{% for a in q.answer %}
<span>{{ a }}</span>
{% endfor %}
</div>
</div>
<div class="ak-reason">{{ q.reason }}</div>
</div>
{% endfor %}
{% set ns.page_count = ns.page_count + 1 %}
<div class="pg-num">{{ ns.page_count }}</div>
</div>
{% endfor %}
<!-- ============ BACK PAGE ============ -->
<div class="back-page">
<div class="cover-grid"></div>
<div class="cover-accent-line"></div>
<div class="cover-accent-line2"></div>
<div class="back-content">
<div class="back-line"></div>
<p class="back-msg">
These case-based questions are designed to strengthen your
clinical reasoning and therapeutic decision-making skills.
Continue reviewing, practicing, and always verify with
current clinical guidelines and evidence-based resources.
</p>
<div class="back-line"></div>
<h3 class="back-author">Dr Hamza Abu Nawara</h3>
<div class="back-info">
Clinical Pharmacy Practice<br>
Therapeutic Decision-Making Collection
</div>
<div class="back-badge">First Edition 2025</div>
<div class="back-disc">
<p>
FOR EDUCATIONAL PURPOSES ONLY<br>
ALWAYS CONSULT CURRENT CLINICAL GUIDELINES<br>
300+ CLINICAL CASE-BASED QUESTIONS
</p>
</div>
</div>
</div>
<!-- ============ PDF BUTTON ============ -->
<a href="/pdf" class="pdf-btn">
<svg viewBox="0 0 24 24" width="18" height="18" fill="white">
<path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
</svg>
Download PDF
</a>
</body>
</html>