mirror of
https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git
synced 2025-06-14 12:10:03 +00:00
Sudo-JHare
8e769bd126
operation UI fixes, CRSF token handling for security internally Fhirpath added to IG processing view explicit removal of narrative views in the ig viewer changes to enforce hapi server config is read. added Prism for code highlighting in the Base and ui operations
890 lines
36 KiB
HTML
890 lines
36 KiB
HTML
<!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 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') }}">
|
|
<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 --- */
|
|
|
|
/* 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">
|
|
<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');
|
|
}
|
|
if (typeof loadLottieAnimation === 'function') {
|
|
const newTheme = toggle.checked ? 'dark' : 'light';
|
|
loadLottieAnimation(newTheme);
|
|
}
|
|
// 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>
|
|
<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> |