Sudo-JHare/FHIRFLARE-IG-Toolkit
Sudo-JHare/FHIRFLARE-IG-Toolkit
1
0
Fork 0
mirror of https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git synced 2025-06-14 12:10:03 +00:00
Code Issues Packages Projects Releases 6 Wiki Activity
FHIRFLARE-IG-Toolkit/templates/base.html
Sudo-JHare 833bc12d4d Updates 
UI, Core logic, FHIR UI
GOFSH integration
THEME FIXES
2025-04-19 01:05:14 +10:00

823 lines
32 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
<title>{% if title %}{{ title }} - {% endif %}{{ site_name }}</title>
<style>
/* Default (Light Theme) Styles */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f8f9fa;
color: #212529;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
main {
flex-grow: 1;
}
h1, h5 {
font-weight: 600;
}
.navbar-light {
background-color: #ffffff !important;
border-bottom: 1px solid #e0e0e0;
}
.navbar-brand {
font-weight: bold;
color: #007bff !important;
}
.nav-link {
color: #333 !important;
transition: color 0.2s ease;
}
.nav-link:hover {
color: #007bff !important;
}
.nav-link.active {
color: #007bff !important;
font-weight: bold;
border-bottom: 2px solid #007bff;
}
.dropdown-menu {
list-style: none !important;
position: absolute;
background-color: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px;
padding: 0;
min-width: 160px;
z-index: 1000;
}
.dropdown-item {
padding: 0.5rem 1rem;
transition: background-color 0.2s ease;
}
.dropdown-item:hover {
background-color: #e9ecef;
}
.dropdown-item.active {
background-color: #007bff;
color: white !important;
}
.card {
background-color: #ffffff;
border-radius: 10px;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}
.text-muted {
color: #6c757d !important;
}
.form-check-input {
width: 1.25rem !important;
height: 1.25rem !important;
margin-top: 0.25rem;
display: inline-block !important;
border: 1px solid #6c757d;
}
.form-check-input:checked {
background-color: #007bff;
border-color: #007bff;
}
.form-check-label {
font-size: 1rem;
margin-left: 0.5rem;
vertical-align: middle;
}
.form-check-label i {
font-size: 1.2rem;
margin-left: 0.5rem;
}
.form-check {
margin-bottom: 1rem;
}
.navbar-controls {
gap: 0.5rem;
padding-right: 0;
}
/* Footer Styles */
footer {
background-color: #ffffff;
height: 56px;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
border-top: 1px solid #e0e0e0;
}
.footer-left,
.footer-right {
display: inline-flex;
gap: 0.75rem;
align-items: center;
}
.footer-left a,
.footer-right a {
color: #007bff;
text-decoration: none;
font-size: 0.85rem;
}
.footer-left a:hover,
.footer-right a:hover {
text-decoration: underline;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Alert Styles */
.alert {
border-radius: 8px;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}
.alert-success {
background-color: #d4edda;
color: #155724;
border-color: #c3e6cb;
}
.alert-info {
background-color: #d1ecf1;
color: #0c5460;
border-color: #bee5eb;
}
/* --- Unified Button and Badge Styles --- */
/* General Button Theme (Primary, Secondary) */
.btn-primary {
background-color: #007bff;
border-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #004085;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.btn-outline-primary:hover {
background-color: #007bff;
color: white;
}
.btn-secondary {
background-color: #6c757d;
border-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
border-color: #545b62;
}
.btn-outline-secondary {
color: #6c757d;
border-color: #6c757d;
}
.btn-outline-secondary:hover {
background-color: #6c757d;
color: white;
}
/* --- Theme Styles for FSH Code Blocks --- */
pre, pre code {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875em;
white-space: pre-wrap; /* Allow wrapping */
word-break: break-all; /* Break long lines */
}
/* Target pre blocks specifically used for FSH output if needed */
/* If the pre block has a specific class or ID, use that */
#fsh-output pre, /* Targets any pre within the output container */
._fsh_output pre /* Targets any pre within the partial template content */
{
background-color: #e9ecef; /* Light theme background */
color: #212529; /* Light theme text */
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
max-height: 600px; /* Adjust as needed */
overflow: auto;
}
#fsh-output pre code,
._fsh_output pre code {
background-color: transparent !important; /* Ensure code tag doesn't override pre bg */
padding: 0;
color: inherit; /* Inherit text color from pre */
font-size: inherit; /* Inherit font size from pre */
display: block; /* Make code fill pre */
}
/* Dark Theme Override */
html[data-theme="dark"] #fsh-output pre,
html[data-theme="dark"] ._fsh_output pre
{
background-color: #495057; /* Dark theme background */
color: #f8f9fa; /* Dark theme text */
border-color: #6c757d;
}
html[data-theme="dark"] #fsh-output pre code,
html[data-theme="dark"] ._fsh_output pre code {
color: inherit;
}
/* --- Theme Styles for FHIR UI Operations (fhir_ui_operations.html) --- */
/* Operation Block Container */
.opblock {
border: 1px solid #dee2e6; /* Light theme border */
background: #ffffff; /* Light theme background */
color: #212529; /* Light theme text */
}
html[data-theme="dark"] .opblock {
border-color: #495057; /* Dark theme border */
background: #343a40; /* Dark theme background (card bg) */
color: #f8f9fa; /* Dark theme text */
}
/* Operation Summary (Header) */
.opblock-summary {
background: #f8f9fa; /* Light theme summary bg */
border-bottom: 1px solid #dee2e6;
color: #212529; /* Default text color for summary */
}
.opblock-summary:hover {
background: #e9ecef;
}
html[data-theme="dark"] .opblock-summary {
background: #40464c; /* Darker summary bg */
border-bottom-color: #495057;
color: #f8f9fa;
}
html[data-theme="dark"] .opblock-summary:hover {
background: #495057;
}
/* Keep method badge colors fixed - DO NOT override .opblock-summary-method */
.opblock-summary-description {
color: #495057; /* Slightly muted description text */
}
html[data-theme="dark"] .opblock-summary-description {
color: #adb5bd; /* Lighter muted text for dark */
}
/* Operation Body (Expanded Section) */
.opblock-body {
border-top: 1px solid #dee2e6;
}
html[data-theme="dark"] .opblock-body {
border-top-color: #495057;
}
/* Section Headers within Body */
.opblock-section-header {
border-bottom: 1px solid #eee;
color: inherit; /* Inherit from .opblock */
}
html[data-theme="dark"] .opblock-section-header {
border-bottom-color: #495057;
}
.opblock-title {
color: inherit; /* Inherit from .opblock */
}
/* Parameters Table */
.parameters-table th,
.parameters-table td {
border: 1px solid #dee2e6;
color: inherit; /* Inherit from .opblock */
}
html[data-theme="dark"] .parameters-table th,
html[data-theme="dark"] .parameters-table td {
border-color: #495057;
}
.parameter__type,
.parameter__in {
color: #6c757d; /* Use standard muted color */
}
html[data-theme="dark"] .parameter__type,
html[data-theme="dark"] .parameter__in {
color: #adb5bd; /* Use standard dark muted color */
}
.parameters-col_description input[type="text"],
.parameters-col_description input[type="number"] {
background-color: #fff; /* Match light form controls */
border: 1px solid #ced4da;
color: #212529;
}
html[data-theme="dark"] .parameters-col_description input[type="text"],
html[data-theme="dark"] .parameters-col_description input[type="number"] {
background-color: #495057; /* Match dark form controls */
border-color: #6c757d;
color: #f8f9fa;
}
/* Request Body Textarea */
.request-body-textarea {
background-color: #fff; /* Match light form controls */
border: 1px solid #ced4da;
color: #212529;
}
html[data-theme="dark"] .request-body-textarea {
background-color: #495057; /* Match dark form controls */
border-color: #6c757d;
color: #f8f9fa;
}
/* Responses Table */
.responses-table th,
.responses-table td {
border: 1px solid #dee2e6;
color: inherit;
}
html[data-theme="dark"] .responses-table th,
html[data-theme="dark"] .responses-table td {
border-color: #495057;
}
/* Example/Schema Tabs & Controls */
.response-control-media-type {
background-color: #f8f9fa;
}
html[data-theme="dark"] .response-control-media-type {
background-color: #40464c; /* Match summary header bg */
}
.tablinks.badge { /* Default inactive tab */
background: #dee2e6 !important; /* Light grey inactive */
color: #333 !important;
}
.tablinks.badge.active { /* Default active tab */
background: #007bff !important; /* Use primary color */
color: white !important;
}
html[data-theme="dark"] .tablinks.badge { /* Dark inactive tab */
background: #6c757d !important; /* Dark grey inactive */
color: white !important;
}
html[data-theme="dark"] .tablinks.badge.active { /* Dark active tab */
background: #4dabf7 !important; /* Use dark primary color */
color: #000 !important;
}
/* Code/Output Blocks */
.highlight-code,
.request-url-output,
.curl-output,
.execute-wrapper pre.response-output-content {
background: #e9ecef; /* Light theme pre background */
color: #212529;
border: 1px solid #dee2e6;
}
html[data-theme="dark"] .highlight-code,
html[data-theme="dark"] .request-url-output,
html[data-theme="dark"] .curl-output,
html[data-theme="dark"] .execute-wrapper pre.response-output-content {
background: #495057; /* Dark theme pre background */
color: #f8f9fa;
border-color: #6c757d;
}
/* Narrative Response Box */
.execute-wrapper div.response-output-narrative {
background: #ffffff;
color: #212529;
border: 1px solid #dee2e6;
}
html[data-theme="dark"] .execute-wrapper div.response-output-narrative {
background: #343a40; /* Match card body */
color: #f8f9fa;
border: 1px solid #495057;
}
/* Response Status Text */
.execute-wrapper .response-status[style*="color: green"] { color: #198754 !important; }
.execute-wrapper .response-status[style*="color: red"] { color: #dc3545 !important; }
html[data-theme="dark"] .execute-wrapper .response-status[style*="color: green"] { color: #20c997 !important; }
html[data-theme="dark"] .execute-wrapper .response-status[style*="color: red"] { color: #e63946 !important; }
/* Specific Action Buttons (Success, Danger, Warning, Info) */
.btn-success { background-color: #198754; border-color: #198754; color: white; }
.btn-success:hover { background-color: #157347; border-color: #146c43; }
.btn-outline-success { color: #198754; border-color: #198754; }
.btn-outline-success:hover { background-color: #198754; color: white; }
.btn-danger { background-color: #dc3545; border-color: #dc3545; color: white; }
.btn-danger:hover { background-color: #bb2d3b; border-color: #b02a37; }
.btn-outline-danger { color: #dc3545; border-color: #dc3545; }
.btn-outline-danger:hover { background-color: #dc3545; color: white; }
.btn-warning { background-color: #ffc107; border-color: #ffc107; color: #000; }
.btn-warning:hover { background-color: #ffca2c; border-color: #ffc720; }
.btn-outline-warning { color: #ffc107; border-color: #ffc107; }
.btn-outline-warning:hover { background-color: #ffc107; color: #000; }
.btn-info { background-color: #0dcaf0; border-color: #0dcaf0; color: #000; }
.btn-info:hover { background-color: #31d2f2; border-color: #25cff2; }
.btn-outline-info { color: #0dcaf0; border-color: #0dcaf0; }
.btn-outline-info:hover { background-color: #0dcaf0; color: #000; }
/* General Badge Theme */
.badge {
padding: 0.4em 0.6em; /* Slightly larger padding */
font-size: 0.85em;
font-weight: 600;
}
/* Specific Badge Backgrounds (Add more as needed) */
.badge.bg-primary { background-color: #007bff !important; color: white !important; }
.badge.bg-secondary { background-color: #6c757d !important; color: white !important; }
.badge.bg-success { background-color: #198754 !important; color: white !important; }
.badge.bg-danger { background-color: #dc3545 !important; color: white !important; }
.badge.bg-warning { background-color: #ffc107 !important; color: #000 !important; }
.badge.bg-info { background-color: #0dcaf0 !important; color: #000 !important; }
.badge.bg-light { background-color: #f8f9fa !important; color: #000 !important; border: 1px solid #dee2e6; }
.badge.bg-dark { background-color: #343a40 !important; color: white !important; }
/* Copy Button Specific Style */
.btn-copy { /* Optional: Add a specific class if needed, or style .btn-outline-secondary directly */
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
}
/* --- Dark Theme Overrides --- */
html[data-theme="dark"] .btn-primary { background-color: #4dabf7; border-color: #4dabf7; color: #000; }
html[data-theme="dark"] .btn-primary:hover { background-color: #68bcef; border-color: #5fb7ea; }
html[data-theme="dark"] .btn-outline-primary { color: #4dabf7; border-color: #4dabf7; }
html[data-theme="dark"] .btn-outline-primary:hover { background-color: #4dabf7; color: #000; }
html[data-theme="dark"] .btn-secondary { background-color: #6c757d; border-color: #6c757d; color: white; }
html[data-theme="dark"] .btn-secondary:hover { background-color: #5a6268; border-color: #545b62; }
html[data-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #6c757d; } /* Lighter text/border */
html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #6c757d; color: white; }
html[data-theme="dark"] .btn-success { background-color: #20c997; border-color: #20c997; color: #000; }
html[data-theme="dark"] .btn-success:hover { background-color: #3ce0ac; border-color: #36d8a3; }
html[data-theme="dark"] .btn-outline-success { color: #20c997; border-color: #20c997; }
html[data-theme="dark"] .btn-outline-success:hover { background-color: #20c997; color: #000; }
/* Keep danger as is */
html[data-theme="dark"] .btn-danger { background-color: #e63946; border-color: #e63946; color: white; }
html[data-theme="dark"] .btn-danger:hover { background-color: #c82b39; border-color: #bd2130; }
html[data-theme="dark"] .btn-outline-danger { color: #e63946; border-color: #e63946; }
html[data-theme="dark"] .btn-outline-danger:hover { background-color: #e63946; color: white; }
html[data-theme="dark"] .btn-warning { background-color: #ffca2c; border-color: #ffca2c; color: #000; }
html[data-theme="dark"] .btn-warning:hover { background-color: #ffd24a; border-color: #ffce3d; }
html[data-theme="dark"] .btn-outline-warning { color: #ffca2c; border-color: #ffca2c; }
html[data-theme="dark"] .btn-outline-warning:hover { background-color: #ffca2c; color: #000; }
html[data-theme="dark"] .btn-info { background-color: #22b8cf; border-color: #22b8cf; color: #000; }
html[data-theme="dark"] .btn-info:hover { background-color: #44cee3; border-color: #38cae0; }
html[data-theme="dark"] .btn-outline-info { color: #22b8cf; border-color: #22b8cf; }
html[data-theme="dark"] .btn-outline-info:hover { background-color: #22b8cf; color: #000; }
/* Dark Theme Badges */
html[data-theme="dark"] .badge.bg-primary { background-color: #4dabf7 !important; color: #000 !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #6c757d !important; color: white !important; }
html[data-theme="dark"] .badge.bg-success { background-color: #20c997 !important; color: #000 !important; }
html[data-theme="dark"] .badge.bg-danger { background-color: #e63946 !important; color: white !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #ffca2c !important; color: #000 !important; }
html[data-theme="dark"] .badge.bg-info { background-color: #22b8cf !important; color: #000 !important; }
html[data-theme="dark"] .badge.bg-light { background-color: #495057 !important; color: #f8f9fa !important; border: 1px solid #6c757d; }
html[data-theme="dark"] .badge.bg-dark { background-color: #adb5bd !important; color: #000 !important; }
/* --- Themed Backgrounds for Code/Structure View (cp_view_processed_ig.html) --- */
/* Styling for <pre> blocks containing code */
#raw-structure-wrapper pre,
#example-content-wrapper pre {
background-color: #e9ecef; /* Light theme background */
color: #212529; /* Light theme text */
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
max-height: 400px; /* Keep existing max-height */
overflow-y: auto; /* Keep existing overflow */
white-space: pre-wrap; /* Ensure wrapping */
word-break: break-all; /* Break long strings */
}
/* Ensure code tag inside inherits background and has appropriate font */
#raw-structure-wrapper pre code,
#example-content-wrapper pre code {
background-color: transparent !important; /* Let pre handle background */
padding: 0;
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875em;
color: inherit; /* Inherit text color from pre */
display: block; /* Make code block fill pre */
white-space: pre-wrap;
word-break: break-all;
}
/* Styling for the Structure Definition tree list items */
.structure-tree-root .list-group-item {
background-color: #ffffff; /* Light theme default background */
border-color: #dee2e6;
color: #212529;
}
.structure-tree-root .list-group-item-warning {
background-color: #fff3cd; /* Bootstrap light theme warning */
border-color: #ffeeba;
/*color: #856404; Ensure text is readable */
}
/* --- Dark Theme Overrides for Code/Structure View --- */
html[data-theme="dark"] #raw-structure-wrapper pre,
html[data-theme="dark"] #example-content-wrapper pre {
background-color: #495057; /* Dark theme background */
color: #f8f9fa; /* Dark theme text */
border-color: #6c757d;
}
/* Dark theme code text color already inherited, but explicit doesn't hurt */
html[data-theme="dark"] #raw-structure-wrapper pre code,
html[data-theme="dark"] #example-content-wrapper pre code {
color: #f8f9fa;
}
/* Dark theme structure list items */
html[data-theme="dark"] .structure-tree-root .list-group-item {
background-color: #343a40; /* Dark theme card background */
border-color: #495057;
color: #f8f9fa;
}
html[data-theme="dark"] .structure-tree-root .list-group-item-warning {
background-color: #664d03; /* Darker warning background */
border-color: #997404;
/*color: #ffecb5; Lighter text for contrast */
}
/* Dark Theme Styles */
html[data-theme="dark"] body {
background-color: #212529;
color: #f8f9fa;
}
html[data-theme="dark"] .navbar-light {
background-color: #343a40 !important;
border-bottom: 1px solid #495057;
}
html[data-theme="dark"] .navbar-brand {
color: #4dabf7 !important;
}
html[data-theme="dark"] .nav-link {
color: #f8f9fa !important;
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active {
color: #4dabf7 !important;
border-bottom-color: #4dabf7;
}
html[data-theme="dark"] .dropdown-menu {
background-color: #495057;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html[data-theme="dark"] .dropdown-item {
color: #f8f9fa;
}
html[data-theme="dark"] .dropdown-item:hover {
background-color: #6c757d;
}
html[data-theme="dark"] .dropdown-item.active {
background-color: #4dabf7;
color: white !important;
}
html[data-theme="dark"] .card {
background-color: #343a40;
border: 1px solid #495057;
}
html[data-theme="dark"] .text-muted {
color: #adb5bd !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h5 {
color: #f8f9fa;
}
html[data-theme="dark"] .form-label {
color: #f8f9fa;
}
html[data-theme="dark"] .form-control {
background-color: #495057;
color: #f8f9fa;
border-color: #6c757d;
}
html[data-theme="dark"] .form-control::placeholder {
color: #adb5bd;
}
html[data-theme="dark"] .form-select {
background-color: #495057;
color: #f8f9fa;
border-color: #6c757d;
}
html[data-theme="dark"] .alert-danger {
background-color: #dc3545;
color: white;
border-color: #dc3545;
}
html[data-theme="dark"] .alert-success {
background-color: #198754;
color: white;
border-color: #198754;
}
html[data-theme="dark"] .alert-info {
background-color: #0dcaf0;
color: white;
border-color: #0dcaf0;
}
html[data-theme="dark"] .form-check-input {
border-color: #adb5bd;
}
html[data-theme="dark"] .form-check-input:checked {
background-color: #4dabf7;
border-color: #4dabf7;
}
html[data-theme="dark"] footer {
background-color: #343a40;
border-top: 1px solid #495057;
}
html[data-theme="dark"] .footer-left a,
html[data-theme="dark"] .footer-right a {
color: #4dabf7;
}
@media (max-width: 576px) {
.navbar-controls {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.navbar-controls .form-check {
margin-bottom: 0.5rem;
}
footer {
height: auto;
padding: 0.5rem;
flex-direction: column;
gap: 0.5rem;
}
.footer-left,
.footer-right {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
.footer-left a,
.footer-right a {
font-size: 0.8rem;
}
}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for('index') }}">{{ site_name }}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'index' else '' }}" aria-current="page" href="{{ url_for('index') }}"><i class="fas fa-house me-1"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'view_igs' else '' }}" href="{{ url_for('view_igs') }}"><i class="fas fa-folder-open me-1"></i> Manage FHIR Packages</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'import_ig' else '' }}" href="{{ url_for('import_ig') }}"><i class="fas fa-download me-1"></i> Import IGs</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'push_igs' else '' }}" href="{{ url_for('push_igs') }}"><i class="fas fa-upload me-1"></i> Push IGs</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'validate_sample' else '' }}" href="{{ url_for('validate_sample') }}"><i class="fas fa-check-circle me-1"></i> Validate FHIR Sample</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'fhir_ui' else '' }}" href="{{ url_for('fhir_ui') }}"><i class="fas fa-cloud-download-alt me-1"></i> FHIR API Explorer</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'fhir_ui_operations' else '' }}" href="{{ url_for('fhir_ui_operations') }}"><i class="bi bi-gear me-1"></i> FHIR UI Operations</a>
</li>
<li class="nav-item">
<a class="nav-link {{ 'active' if request.endpoint == 'fsh_converter' else '' }}" href="{{ url_for('fsh_converter') }}"><i class="fas fa-file-code me-1"></i> FSH Converter</a>
</li>
</ul>
<div class="navbar-controls d-flex align-items-center">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="themeToggle" onchange="toggleTheme()" aria-label="Toggle dark mode" {% if request.cookies.get('theme') == 'dark' %}checked{% endif %}>
<label class="form-check-label" for="themeToggle">
<i class="fas fa-sun"></i>
<i class="fas fa-moon d-none"></i>
</label>
</div>
</div>
</div>
</div>
</nav>
<main class="flex-grow-1">
<div class="container mt-4">
<!-- Flashed Messages Section -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="mt-3">
{% for category, message in messages %}
<div class="alert
{{ 'alert-danger' if category == 'error' else
'alert-success' if category == 'success' else
'alert-info' }}
alert-dismissible fade show" role="alert">
<i class="fas
{{ 'fa-exclamation-triangle me-2' if category == 'error' else
'fa-check-circle me-2' if category == 'success' else
'fa-info-circle me-2' }}"></i>
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
</main>
<footer class="main-footer" role="contentinfo">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center">
<div class="footer-left">
<a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit" target="_blank" rel="noreferrer" aria-label="Project Github">Project Github</a>
<a href="/about" aria-label="Learn about this project">What is FHIRFLARE</a>
<a href="https://www.hl7.org/fhir/" target="_blank" rel="noreferrer" aria-label="Visit FHIR website">FHIR</a>
<a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/issues/new/choose" class="text-danger text-decoration-none" aria-label="FHIRFLARE support"><i class="fas fa-exclamation-circle me-1"></i> Raise an Issue</a>
</div>
<div class="footer-right">
<a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/discussions" target="_blank" rel="noreferrer" aria-label="Project Discussion">Project Discussions</a>
<a href="https://github.com/Sudo-JHare" aria-label="Developer">Developer</a>
<a href="https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit/blob/main/LICENSE.md" aria-label="License">License</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
function toggleTheme() {
const html = document.documentElement;
const toggle = document.getElementById('themeToggle');
const sunIcon = document.querySelector('.fa-sun');
const moonIcon = document.querySelector('.fa-moon');
if (toggle.checked) {
html.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
sunIcon.classList.add('d-none');
moonIcon.classList.remove('d-none');
} else {
html.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
sunIcon.classList.remove('d-none');
moonIcon.classList.add('d-none');
}
// Set cookie to persist theme
document.cookie = `theme=${toggle.checked ? 'dark' : 'light'}; path=/; max-age=31536000`;
}
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('theme') || (document.cookie.includes('theme=dark') ? 'dark' : 'light');
const themeToggle = document.getElementById('themeToggle');
const sunIcon = document.querySelector('.fa-sun');
const moonIcon = document.querySelector('.fa-moon');
if (savedTheme === 'dark' && themeToggle) {
document.documentElement.setAttribute('data-theme', 'dark');
themeToggle.checked = true;
sunIcon.classList.add('d-none');
moonIcon.classList.remove('d-none');
}
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
tooltips.forEach(t => new bootstrap.Tooltip(t));
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink