mirror of
https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git
synced 2025-06-14 16:19:59 +00:00
Sudo-JHare
ca8668e5e5
Hapi Config Page. retrieve bundles from server split bundles to resources. new upload page, and Package Registry CACHE
905 lines
40 KiB
HTML
905 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="{% if request.cookies.get('theme') == 'dark' %}dark{% else %}light{% endif %}">
|
|
<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 href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" />
|
|
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/fire-animation.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/animation.css') }}">
|
|
<script src="{{ url_for('static', filename='js/htmx.min.js') }}"></script>
|
|
<title>{% if app_mode == 'lite' %}(Lite Version) {% endif %}{% if title %}{{ title }} - {% endif %}{{ site_name }}</title>
|
|
<style>
|
|
/* Prevent flash of unstyled content */
|
|
:root { visibility: hidden; }
|
|
[data-theme="dark"], [data-theme="light"] { visibility: visible; }
|
|
|
|
/* 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 --- */
|
|
|
|
/* Add some basic adjustments for Prism compatibility if needed */
|
|
/* Ensure pre takes full width and code block behaves */
|
|
.highlight-code pre, pre[class*="language-"] {
|
|
margin: 0.5em 0;
|
|
overflow: auto; /* Allow scrolling */
|
|
border-radius: 0.3em;
|
|
}
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
text-shadow: none; /* Adjust if theme adds text shadow */
|
|
white-space: pre-wrap; /* Wrap long lines */
|
|
word-break: break-all; /* Break long words/tokens */
|
|
}
|
|
/* Adjust padding if needed based on theme */
|
|
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
|
background: inherit; /* Ensure background comes from pre or theme */
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* --- Prism.js Theme Overrides for Light Mode --- */
|
|
|
|
/* Target code blocks only when NOT in dark theme */
|
|
html:not([data-theme="dark"]) .token.punctuation,
|
|
html:not([data-theme="dark"]) .token.operator,
|
|
html:not([data-theme="dark"]) .token.entity,
|
|
html:not([data-theme="dark"]) .token.url,
|
|
html:not([data-theme="dark"]) .token.symbol,
|
|
html:not([data-theme="dark"]) .token.number,
|
|
html:not([data-theme="dark"]) .token.boolean,
|
|
html:not([data-theme="dark"]) .token.variable,
|
|
html:not([data-theme="dark"]) .token.constant,
|
|
html:not([data-theme="dark"]) .token.property,
|
|
html:not([data-theme="dark"]) .token.regex,
|
|
html:not([data-theme="dark"]) .token.inserted,
|
|
html:not([data-theme="dark"]) .token.null, /* Target null specifically */
|
|
html:not([data-theme="dark"]) .language-css .token.string,
|
|
html:not([data-theme="dark"]) .style .token.string,
|
|
html:not([data-theme="dark"]) .token.important,
|
|
html:not([data-theme="dark"]) .token.bold {
|
|
/* Choose a darker color that works on your light code background */
|
|
/* Example: A dark grey or the default text color */
|
|
color: #333 !important; /* You might need !important to override theme */
|
|
}
|
|
|
|
/* You might need to adjust other tokens as well based on the specific theme */
|
|
/* Example: Make strings slightly darker too if needed */
|
|
html:not([data-theme="dark"]) .token.string {
|
|
color: #005cc5 !important; /* Example: A shade of blue */
|
|
}
|
|
|
|
/* Ensure background of highlighted code isn't overridden by theme in light mode */
|
|
html:not([data-theme="dark"]) pre[class*="language-"] {
|
|
background: #e9ecef !important; /* Match your light theme pre background */
|
|
}
|
|
html:not([data-theme="dark"]) :not(pre) > code[class*="language-"] {
|
|
background: #e9ecef !important; /* Match inline code background */
|
|
color: #333 !important; /* Ensure inline code text is dark */
|
|
}
|
|
|
|
/* --- End Prism.js Overrides --- */
|
|
|
|
/* --- 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 {% block body_class %}{% endblock %}">
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="{{ url_for('index') }}">{{ site_name }}{% if app_mode == 'lite' %} (Lite){% endif %}</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 {% if request.path == '/search-and-import' %}active{% endif %}" href="{{ url_for('search_and_import') }}"><i class="fas fa-download me-1"></i> Search and Import</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 == '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 == '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 == 'upload_test_data' else '' }}" href="{{ url_for('upload_test_data') }}"><i class="bi bi-clipboard-data me-1"></i>Upload Test Data</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 == 'retrieve_split_data' else '' }}" href="{{ url_for('retrieve_split_data') }}"><i class="fas bi-cloud-download me-1"></i> Retrieve & Split Data</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>
|
|
{% if app_mode != 'lite' %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {{ 'active' if request.endpoint == 'config_hapi' else '' }}" href="{{ url_for('config_hapi') }}"><i class="fas fa-cog me-1"></i> Configure HAPI</a>
|
|
</li>
|
|
{% endif %}
|
|
</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 getCookie(name) {
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) return parts.pop().split(';').shift();
|
|
return null;
|
|
}
|
|
|
|
function toggleTheme() {
|
|
const html = document.documentElement;
|
|
const toggle = document.getElementById('themeToggle');
|
|
const sunIcon = document.querySelector('.fa-sun');
|
|
const moonIcon = document.querySelector('.fa-moon');
|
|
const newTheme = toggle.checked ? 'dark' : 'light';
|
|
html.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
sunIcon.classList.toggle('d-none', toggle.checked);
|
|
moonIcon.classList.toggle('d-none', !toggle.checked);
|
|
document.cookie = `theme=${newTheme}; path=/; max-age=31536000`;
|
|
if (typeof loadLottieAnimation === 'function') {
|
|
loadLottieAnimation(newTheme);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const savedTheme = localStorage.getItem('theme') || getCookie('theme') || 'light';
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const sunIcon = document.querySelector('.fa-sun');
|
|
const moonIcon = document.querySelector('.fa-moon');
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
themeToggle.checked = savedTheme === 'dark';
|
|
sunIcon.classList.toggle('d-none', savedTheme === 'dark');
|
|
moonIcon.classList.toggle('d-none', savedTheme !== 'dark');
|
|
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
|
|
tooltips.forEach(t => new bootstrap.Tooltip(t));
|
|
});
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html> |