| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>TDM Quiz - Dr Hamza Abu Nawara</title> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); |
| |
| :root { |
| --navy: #0a1628; |
| --blue-dark: #0d2137; |
| --blue-mid: #1a3a5c; |
| --blue: #1e5799; |
| --blue-light: #2980b9; |
| --blue-bright: #3498db; |
| --blue-pale: #e8f4fd; |
| --blue-wash: #f0f7fc; |
| --text: #1a1a2e; |
| --text-mid: #4a5568; |
| --text-light: #718096; |
| --text-faint: #a0aec0; |
| --white: #ffffff; |
| --off-white: #f8fafc; |
| --border: #d2dce6; |
| --border-light: #e2e8f0; |
| --green: #27ae60; |
| --whatsapp: #25d366; |
| } |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| font-family: 'Inter', -apple-system, sans-serif; |
| background: var(--navy); |
| min-height: 100vh; |
| color: var(--text); |
| overflow-x: hidden; |
| } |
| |
| |
| .bg { |
| position: fixed; |
| top: 0; left: 0; width: 100%; height: 100%; |
| z-index: 0; |
| } |
| |
| .bg-gradient { |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: |
| radial-gradient(ellipse at 20% 50%, rgba(30,87,153,0.15) 0%, transparent 50%), |
| radial-gradient(ellipse at 80% 20%, rgba(41,128,185,0.1) 0%, transparent 50%), |
| radial-gradient(ellipse at 50% 80%, rgba(30,87,153,0.08) 0%, transparent 50%), |
| linear-gradient(160deg, #060d19 0%, #0a1628 30%, #0d2137 60%, #0f2847 100%); |
| } |
| |
| .bg-grid { |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background-image: |
| linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); |
| background-size: 40px 40px; |
| } |
| |
| .bg-line-v { |
| position: absolute; |
| top: 0; height: 100%; width: 1px; |
| background: linear-gradient(180deg, transparent 0%, rgba(41,128,185,0.12) 30%, rgba(41,128,185,0.12) 70%, transparent 100%); |
| } |
| |
| .bg-line-v:nth-child(1) { left: 10%; } |
| .bg-line-v:nth-child(2) { left: 90%; } |
| |
| .bg-line-h { |
| position: absolute; |
| left: 0; width: 100%; height: 1px; |
| background: linear-gradient(90deg, transparent 0%, rgba(41,128,185,0.08) 30%, rgba(41,128,185,0.08) 70%, transparent 100%); |
| } |
| |
| .bg-line-h:nth-child(3) { top: 15%; } |
| .bg-line-h:nth-child(4) { top: 85%; } |
| |
| .bg-glow { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.07; |
| } |
| |
| .bg-glow-1 { |
| width: 500px; height: 500px; |
| background: var(--blue-light); |
| top: -100px; right: -100px; |
| } |
| |
| .bg-glow-2 { |
| width: 400px; height: 400px; |
| background: var(--blue); |
| bottom: -100px; left: -100px; |
| } |
| |
| |
| .page { |
| position: relative; |
| z-index: 1; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 40px 20px; |
| } |
| |
| .container { |
| width: 100%; |
| max-width: 960px; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0; |
| background: transparent; |
| border-radius: 12px; |
| overflow: hidden; |
| box-shadow: 0 30px 100px rgba(0,0,0,0.4); |
| } |
| |
| |
| .left-panel { |
| background: linear-gradient(160deg, #0c1a2e 0%, #112240 50%, #0d2137 100%); |
| padding: 50px 40px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .left-panel::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 100%; |
| background: radial-gradient(ellipse at 50% 30%, rgba(41,128,185,0.08) 0%, transparent 60%); |
| pointer-events: none; |
| } |
| |
| .left-accent { |
| position: absolute; |
| top: 0; right: 0; |
| width: 3px; height: 100%; |
| background: linear-gradient(180deg, transparent, var(--blue-light), var(--blue), transparent); |
| opacity: 0.3; |
| } |
| |
| .photo-wrapper { |
| position: relative; |
| margin-bottom: 28px; |
| } |
| |
| .photo-ring { |
| width: 140px; |
| height: 140px; |
| border-radius: 50%; |
| padding: 4px; |
| background: linear-gradient(135deg, var(--blue-light), var(--blue), var(--blue-mid)); |
| position: relative; |
| } |
| |
| .photo-ring::before { |
| content: ''; |
| position: absolute; |
| top: -8px; left: -8px; right: -8px; bottom: -8px; |
| border-radius: 50%; |
| border: 1px solid rgba(41,128,185,0.2); |
| } |
| |
| .photo-ring::after { |
| content: ''; |
| position: absolute; |
| top: -16px; left: -16px; right: -16px; bottom: -16px; |
| border-radius: 50%; |
| border: 1px solid rgba(41,128,185,0.08); |
| } |
| |
| .photo-img { |
| width: 100%; |
| height: 100%; |
| border-radius: 50%; |
| object-fit: cover; |
| display: block; |
| } |
| |
| .photo-status { |
| position: absolute; |
| bottom: 8px; right: 8px; |
| width: 20px; height: 20px; |
| background: var(--green); |
| border-radius: 50%; |
| border: 3px solid #112240; |
| } |
| |
| .author-dept { |
| font-size: 9px; |
| letter-spacing: 4px; |
| text-transform: uppercase; |
| color: var(--blue-light); |
| font-weight: 600; |
| margin-bottom: 14px; |
| } |
| |
| .author-name { |
| font-family: 'Source Serif 4', serif; |
| font-size: 22px; |
| font-weight: 700; |
| color: var(--white); |
| margin-bottom: 4px; |
| } |
| |
| .author-cred { |
| font-size: 11px; |
| color: rgba(255,255,255,0.35); |
| letter-spacing: 1px; |
| margin-bottom: 24px; |
| } |
| |
| |
| .contact-links { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| width: 100%; |
| max-width: 260px; |
| margin-bottom: 24px; |
| } |
| |
| .contact-link { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 14px; |
| border-radius: 6px; |
| text-decoration: none; |
| transition: all 0.2s ease; |
| border: 1px solid rgba(255,255,255,0.06); |
| background: rgba(255,255,255,0.02); |
| } |
| |
| .contact-link:hover { |
| background: rgba(255,255,255,0.06); |
| border-color: rgba(255,255,255,0.12); |
| transform: translateX(4px); |
| } |
| |
| .contact-icon { |
| width: 32px; |
| height: 32px; |
| border-radius: 6px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| } |
| |
| .contact-icon svg { |
| width: 16px; |
| height: 16px; |
| } |
| |
| .contact-icon.whatsapp { |
| background: rgba(37,211,102,0.12); |
| } |
| |
| .contact-icon.whatsapp svg { fill: var(--whatsapp); } |
| |
| .contact-icon.gmail { |
| background: rgba(234,67,53,0.12); |
| } |
| |
| .contact-icon.gmail svg { fill: #ea4335; } |
| |
| .contact-info { |
| flex: 1; |
| text-align: left; |
| } |
| |
| .contact-label { |
| font-size: 8px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: rgba(255,255,255,0.3); |
| font-weight: 600; |
| margin-bottom: 1px; |
| } |
| |
| .contact-value { |
| font-size: 11px; |
| color: rgba(255,255,255,0.6); |
| font-weight: 500; |
| } |
| |
| .contact-link:hover .contact-value { |
| color: rgba(255,255,255,0.85); |
| } |
| |
| .contact-arrow { |
| font-size: 12px; |
| color: rgba(255,255,255,0.15); |
| transition: all 0.2s; |
| } |
| |
| .contact-link:hover .contact-arrow { |
| color: rgba(255,255,255,0.4); |
| transform: translateX(2px); |
| } |
| |
| |
| .left-divider { |
| width: 40px; height: 1px; |
| background: linear-gradient(90deg, transparent, var(--blue-light), transparent); |
| margin: 0 auto 24px; |
| } |
| |
| .left-stats { |
| display: flex; |
| gap: 24px; |
| margin-bottom: 24px; |
| } |
| |
| .left-stat { text-align: center; } |
| |
| .left-stat-num { |
| font-size: 28px; |
| font-weight: 800; |
| color: var(--white); |
| line-height: 1; |
| margin-bottom: 4px; |
| } |
| |
| .left-stat-label { |
| font-size: 8px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: rgba(255,255,255,0.3); |
| font-weight: 500; |
| } |
| |
| .left-features { |
| width: 100%; |
| max-width: 260px; |
| } |
| |
| .left-feature { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 8px 0; |
| border-bottom: 1px solid rgba(255,255,255,0.04); |
| } |
| |
| .left-feature:last-child { border-bottom: none; } |
| |
| .left-feature-dot { |
| width: 6px; height: 6px; |
| background: var(--blue-light); |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
| |
| .left-feature-text { |
| font-size: 11px; |
| color: rgba(255,255,255,0.45); |
| line-height: 1.5; |
| } |
| |
| |
| .right-panel { |
| background: var(--white); |
| padding: 50px 40px; |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| } |
| |
| .right-label { |
| font-size: 9px; |
| letter-spacing: 4px; |
| text-transform: uppercase; |
| color: var(--blue); |
| font-weight: 700; |
| margin-bottom: 8px; |
| } |
| |
| .right-title { |
| font-family: 'Source Serif 4', serif; |
| font-size: 28px; |
| font-weight: 700; |
| color: var(--navy); |
| margin-bottom: 6px; |
| line-height: 1.2; |
| } |
| |
| .right-subtitle { |
| font-size: 13px; |
| color: var(--text-light); |
| margin-bottom: 28px; |
| } |
| |
| .notice-box { |
| padding: 14px 16px; |
| background: var(--blue-wash); |
| border-left: 3px solid var(--blue); |
| margin-bottom: 28px; |
| font-size: 11.5px; |
| line-height: 1.8; |
| color: var(--text-mid); |
| } |
| |
| .notice-box strong { color: var(--blue); } |
| |
| .form-section-label { |
| font-size: 10px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: var(--text-light); |
| font-weight: 600; |
| margin-bottom: 14px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .form-section-label::after { |
| content: ''; |
| flex: 1; |
| height: 1px; |
| background: var(--border-light); |
| } |
| |
| .options-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| margin-bottom: 10px; |
| } |
| |
| .opt-card { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 18px 10px; |
| border: 2px solid var(--border); |
| border-radius: 8px; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .opt-card::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; width: 100%; height: 3px; |
| background: var(--blue); |
| transform: scaleX(0); |
| transition: transform 0.2s ease; |
| } |
| |
| .opt-card:hover { |
| border-color: var(--blue); |
| background: var(--blue-pale); |
| } |
| |
| .opt-card:hover::before { transform: scaleX(1); } |
| .opt-radio { |
| display: none; |
| } |
| .opt-radio:checked + .opt-card { |
| border-color: var(--blue); |
| background: var(--blue-pale); |
| box-shadow: 0 2px 12px rgba(30,87,153,0.12); |
| } |
| |
| .opt-radio:checked + .opt-card::before { transform: scaleX(1); } |
| |
| .opt-card .num { |
| font-size: 26px; |
| font-weight: 900; |
| color: var(--blue); |
| line-height: 1; |
| margin-bottom: 4px; |
| } |
| |
| .opt-card .txt { |
| font-size: 10px; |
| font-weight: 600; |
| color: var(--text-light); |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| } |
| |
| .opt-check { |
| position: absolute; |
| top: 8px; right: 8px; |
| width: 18px; height: 18px; |
| border-radius: 50%; |
| border: 2px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.2s ease; |
| } |
| |
| .opt-check::after { |
| content: ''; |
| width: 8px; height: 8px; |
| border-radius: 50%; |
| background: var(--blue); |
| transform: scale(0); |
| transition: transform 0.2s ease; |
| } |
| |
| .opt-radio:checked + .opt-card .opt-check { |
| border-color: var(--blue); |
| } |
| |
| .opt-radio:checked + .opt-card .opt-check::after { |
| transform: scale(1); |
| } |
| |
| .custom-input-row { |
| display: flex; |
| gap: 10px; |
| margin-bottom: 24px; |
| } |
| |
| .custom-input { |
| flex: 1; |
| padding: 12px 14px; |
| border: 2px solid var(--border); |
| border-radius: 6px; |
| font-family: 'Inter', sans-serif; |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--text); |
| outline: none; |
| transition: border-color 0.2s; |
| } |
| |
| .custom-input:focus { border-color: var(--blue); } |
| |
| .custom-input::placeholder { |
| color: var(--text-faint); |
| font-weight: 400; |
| } |
| |
| .custom-apply { |
| padding: 12px 18px; |
| background: var(--off-white); |
| border: 2px solid var(--border); |
| border-radius: 6px; |
| cursor: pointer; |
| font-family: 'Inter', sans-serif; |
| font-size: 11px; |
| font-weight: 700; |
| color: var(--blue); |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| transition: all 0.2s; |
| } |
| |
| .custom-apply:hover { |
| background: var(--blue-pale); |
| border-color: var(--blue); |
| } |
| |
| .start-btn { |
| width: 100%; |
| padding: 16px; |
| background: linear-gradient(135deg, var(--blue), var(--blue-light)); |
| color: var(--white); |
| border: none; |
| border-radius: 6px; |
| cursor: pointer; |
| font-family: 'Inter', sans-serif; |
| font-size: 13px; |
| font-weight: 700; |
| letter-spacing: 3px; |
| text-transform: uppercase; |
| transition: all 0.25s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .start-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: -100%; width: 100%; height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); |
| transition: left 0.5s ease; |
| } |
| |
| .start-btn:hover::before { left: 100%; } |
| .start-btn:hover { box-shadow: 0 6px 24px rgba(30,87,153,0.35); transform: translateY(-1px); } |
| |
| .form-footer { |
| margin-top: 20px; |
| padding-top: 16px; |
| border-top: 1px solid var(--border-light); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .form-footer-text { |
| font-size: 9px; |
| color: var(--text-faint); |
| letter-spacing: 1px; |
| } |
| |
| .form-footer-badge { |
| font-size: 9px; |
| letter-spacing: 2px; |
| text-transform: uppercase; |
| color: var(--blue); |
| font-weight: 700; |
| padding: 4px 12px; |
| background: var(--blue-pale); |
| border-radius: 3px; |
| } |
| |
| |
| @media (max-width: 800px) { |
| .container { |
| grid-template-columns: 1fr; |
| max-width: 500px; |
| } |
| |
| .left-panel { padding: 35px 30px; } |
| .left-accent { display: none; } |
| .photo-ring { width: 100px; height: 100px; } |
| .photo-ring::before { top: -6px; left: -6px; right: -6px; bottom: -6px; } |
| .photo-ring::after { top: -12px; left: -12px; right: -12px; bottom: -12px; } |
| .author-name { font-size: 18px; } |
| .left-stats { gap: 18px; } |
| .left-stat-num { font-size: 22px; } |
| .contact-links { max-width: 100%; } |
| .right-panel { padding: 30px 24px; } |
| .right-title { font-size: 22px; } |
| } |
| |
| @media (max-width: 480px) { |
| .page { padding: 20px 10px; } |
| .left-panel { padding: 28px 20px; } |
| .right-panel { padding: 24px 18px; } |
| .left-stats { gap: 14px; } |
| .left-stat-num { font-size: 20px; } |
| .right-title { font-size: 20px; } |
| .options-grid { gap: 8px; } |
| .opt-card { padding: 14px 8px; } |
| .opt-card .num { font-size: 22px; } |
| .contact-link { padding: 8px 10px; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <div class="bg"> |
| <div class="bg-gradient"></div> |
| <div class="bg-grid"></div> |
| <div class="bg-line-v"></div> |
| <div class="bg-line-v"></div> |
| <div class="bg-line-h"></div> |
| <div class="bg-line-h"></div> |
| <div class="bg-glow bg-glow-1"></div> |
| <div class="bg-glow bg-glow-2"></div> |
| </div> |
|
|
| |
| <div class="page"> |
| <div class="container"> |
|
|
| |
| <div class="left-panel"> |
| <div class="left-accent"></div> |
|
|
| <div class="photo-wrapper"> |
| <div class="photo-ring"> |
| <img class="photo-img" src="{{ url_for('static', filename='hamza.jpeg') }}" alt="Dr Hamza Abu Nawara"> |
| </div> |
| <div class="photo-status"></div> |
| </div> |
|
|
| <h2 class="author-name">Dr Hamza Abu Nawara</h2> |
| <p class="author-cred">Respiratory & General Medicine</p> |
|
|
| |
|
|
| <div class="left-divider"></div> |
|
|
| <div class="left-stats"> |
| <div class="left-stat"> |
| <div class="left-stat-num">{{ total }}</div> |
| <div class="left-stat-label">Questions</div> |
| </div> |
| <div class="left-stat"> |
| <div class="left-stat-num">15+</div> |
| <div class="left-stat-label">Topics</div> |
| </div> |
| <div class="left-stat"> |
| <div class="left-stat-num">300+</div> |
| <div class="left-stat-label">Cases</div> |
| </div> |
| </div> |
|
|
| <div class="left-features"> |
| <div class="left-feature"> |
| <div class="left-feature-dot"></div> |
| <div class="left-feature-text">Randomized questions each attempt</div> |
| </div> |
| <div class="left-feature"> |
| <div class="left-feature-dot"></div> |
| <div class="left-feature-text">Multi-answer clinical scenarios</div> |
| </div> |
| <div class="left-feature"> |
| <div class="left-feature-dot"></div> |
| <div class="left-feature-text">Detailed clinical reasoning provided</div> |
| </div> |
| <div class="left-feature"> |
| <div class="left-feature-dot"></div> |
| <div class="left-feature-text">Instant score and performance grade</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="right-panel"> |
| <div class="right-label">Therapeutic Decision-Making</div> |
| <h1 class="right-title">Start Your<br>Clinical Quiz</h1> |
| <p class="right-subtitle">Test your pharmacotherapy knowledge with case-based MCQs</p> |
|
|
| <div class="notice-box"> |
| These more than 300 cases are based on prior clinical notes and previous |
| exam scenarios. Some questions may have <strong>more than one correct answer</strong> |
| and may require selecting multiple options. All appropriate answers should |
| be chosen based on the clinical context. |
| </div> |
|
|
| <form action="/quiz" method="POST" id="quizForm"> |
|
|
| <div class="form-section-label">Number of Questions</div> |
|
|
| <div class="options-grid"> |
| <input type="radio" name="count" value="30" id="c30" class="opt-radio" checked> |
| <label for="c30" class="opt-card"> |
| <div class="opt-check"></div> |
| <span class="num">30</span> |
| <span class="txt">Questions</span> |
| </label> |
|
|
| <input type="radio" name="count" value="50" id="c50" class="opt-radio"> |
| <label for="c50" class="opt-card"> |
| <div class="opt-check"></div> |
| <span class="num">50</span> |
| <span class="txt">Questions</span> |
| </label> |
|
|
| <input type="radio" name="count" value="100" id="c100" class="opt-radio"> |
| <label for="c100" class="opt-card"> |
| <div class="opt-check"></div> |
| <span class="num">100</span> |
| <span class="txt">Questions</span> |
| </label> |
|
|
| <input type="radio" name="count" value="150" id="c150" class="opt-radio"> |
| <label for="c150" class="opt-card"> |
| <div class="opt-check"></div> |
| <span class="num">150</span> |
| <span class="txt">Questions</span> |
| </label> |
| </div> |
|
|
| <div class="form-section-label">Or Enter Custom Amount</div> |
|
|
| <div class="custom-input-row"> |
| <input type="number" class="custom-input" id="customCount" |
| placeholder="e.g. 75" min="1" max="{{ total }}"> |
| <button type="button" class="custom-apply" onclick="applyCustom()">Apply</button> |
| </div> |
|
|
| <button type="submit" class="start-btn">Begin Quiz</button> |
| </form> |
|
|
| <div class="form-footer"> |
| <span class="form-footer-text">For Educational Purposes Only</span> |
| <span class="form-footer-badge">First Edition 2026</span> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
|
|
| <script> |
| function applyCustom() { |
| const val = document.getElementById('customCount').value; |
| const max = {{ total }}; |
| |
| if (!val || val < 1) { |
| alert('Please enter a valid number'); |
| return; |
| } |
| |
| let num = parseInt(val); |
| if (num > max) num = max; |
| |
| |
| document.querySelectorAll('.opt-radio').forEach(r => r.checked = false); |
| |
| |
| const existing = document.getElementById('c' + num); |
| if (existing) { |
| existing.checked = true; |
| } else { |
| |
| let hidden = document.getElementById('customHidden'); |
| if (!hidden) { |
| hidden = document.createElement('input'); |
| hidden.type = 'hidden'; |
| hidden.name = 'count'; |
| hidden.id = 'customHidden'; |
| document.getElementById('quizForm').appendChild(hidden); |
| } |
| hidden.value = num; |
| } |
| |
| document.getElementById('customCount').value = num; |
| } |
| |
| |
| document.querySelectorAll('.opt-radio').forEach(r => { |
| r.addEventListener('change', () => { |
| const hidden = document.getElementById('customHidden'); |
| if (hidden) hidden.remove(); |
| document.getElementById('customCount').value = ''; |
| }); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
