Smart EHR MCP Server
by jmandel
App.css•7.09 kB
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
/* Add global font style */
body {
margin: 0; /* Also good practice to reset body margin */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #f4f6f8; /* Match original background */
color: #333; /* Default text color */
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 1.5em 1.5em 80px 1.5em;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
min-height: 250px;
display: flex;
flex-direction: column;
max-width: 600px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.card h2 {
margin-top: 0;
}
.status-display p:first-of-type {
margin-bottom: 0.5em;
}
.status-display small {
display: block;
color: #666;
margin-top: 0.25em;
}
.summary-detail {
font-style: italic;
background: #eee;
padding: 10px 15px;
border-radius: 5px;
margin-top: 0.5em;
margin-bottom: 1em;
min-height: 3em;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow-wrap: break-word;
word-break: break-word;
}
.error-message {
color: #c00;
background-color: #ffe0e0;
border: 1px solid #ffbaba;
padding: 0.8em;
border-radius: 5px;
margin-top: 0.5em;
margin-bottom: 1em;
}
.input-section {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: #f0f0f0;
border-top: 1px solid #ccc;
box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
z-index: 10;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
padding: 1em;
transform: translateY(100%);
transition: transform 0.3s ease-in-out, visibility 0.3s step-end;
visibility: hidden;
}
.input-section.active {
transform: translateY(0);
visibility: visible;
transition: transform 0.3s ease-in-out, visibility 0s;
}
.input-section label {
flex-basis: 100%;
margin-bottom: 0.3em;
}
.input-section input[type="text"] {
flex-grow: 1;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 4px;
}
.input-section button {
padding: 0.5em 1em;
}
.controls-wrapper {
margin-top: auto;
padding-top: 1em;
}
.controls-area {
display: flex;
gap: 0.5em;
justify-content: center;
}
button {
padding: 0.6em 1.2em;
border-radius: 8px;
border: 1px solid transparent;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #e4e4e4;
cursor: pointer;
transition: border-color 0.25s, background-color 0.25s;
}
button:hover {
border-color: #646cff;
background-color: #d0d0d0;
}
button:disabled {
background-color: #f0f0f0;
color: #aaa;
cursor: not-allowed;
border-color: #e0e0e0;
}
button.cancel-button {
background-color: #ffdddd;
border-color: #ffcccc;
}
button.cancel-button:hover {
background-color: #ffcccc;
border-color: #ffbaba;
}
.read-the-docs {
display: none;
}
/* === EHR App Styles === */
/* .ehr-app {
/* Styles for the main container, if needed */
}
/* .ehr-header {
background: #2c3e50;
color: #ecf0f1;
padding: 1em;
}
/* .patient-info {
max-width: 960px;
margin: 0 auto;
}
/* .patient-info h1 {
margin: 0 0 0.25em 0;
}
/* .patient-info p {
margin: 0;
font-size: 0.9em;
}
/* nav.tabs {
background: #34495e;
}
/* nav.tabs ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
max-width: 960px;
margin: 0 auto;
}
/* nav.tabs li {
flex: 1;
}
/* nav.tabs li button { /* Target button inside li */
/* display: block;
width: 100%;
padding: 0.75em;
color: #bdc3c7;
background: none;
border: none;
text-decoration: none;
text-align: center;
font-size: 1em;
font-family: inherit;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* nav.tabs li button:hover {
background-color: #4e6a85;
color: #fff;
}
/* nav.tabs li.active button {
background: #ecf0f1;
color: #2c3e50;
font-weight: bold;
}
/* .content {
max-width: 960px;
margin: 1em auto;
padding: 1.5em;
background: #ffffff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
border-radius: 5px;
}
/* .tab-content {
/* display: none; */ /* React handles conditional rendering */
/* } */
/* .tab-content.active {
/* display: block; */ /* React handles conditional rendering */
/* } */
/* .form-group {
margin-bottom: 1.2em;
}
/* .form-group label {
display: block;
font-weight: bold;
margin-bottom: 0.35em;
color: #333;
}
/* .form-group input[type="text"],
/* .form-group input[type="date"],
/* .form-group select,
/* .form-group textarea {
box-sizing: border-box;
width: 100%;
padding: 0.6em 0.8em;
border: 1px solid #bdc3c7;
border-radius: 4px;
font-size: 1em;
}
/* .form-group textarea {
resize: vertical;
}
/* .buttons {
margin-top: 1.5em;
padding-top: 1em;
border-top: 1px solid #eee;
display: flex;
gap: 0.75em;
}
/* .buttons button {
padding: 0.75em 1.5em;
/* margin-right: 0.5em; Removed for gap */
/* border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
font-weight: 500;
transition: background-color 0.2s ease;
}
/* .btn-primary { background: #3498db; color: #fff; }
/* .btn-primary:hover { background: #2980b9; }
/* .btn-secondary { background: #95a5a6; color: #fff; }
/* .btn-secondary:hover { background: #7f8c8d; }
/* .btn-danger { background: #e74c3c; color: #fff; }
/* .btn-danger:hover { background: #c0392b; }
/* table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1em;
margin-top: 0.5em;
}
/* table, th, td {
border: 1px solid #ddd;
}
/* th, td {
padding: 0.75em;
text-align: left;
vertical-align: top;
}
/* th {
background: #f1f3f5;
font-weight: bold;
color: #333;
}
/* .tab-content h2 {
margin-top: 0;
border-bottom: 2px solid #eee;
padding-bottom: 0.4em;
margin-bottom: 1em;
color: #2c3e50;
}
/* .tab-content ul {
list-style: disc;
padding-left: 20px;
}
/* .tab-content ul li {
margin-bottom: 0.5em;
}
/* .order-confirmation {
border: 1px solid #ddd;
background: #f9f9f9;
padding: 1.5em;
border-radius: 4px;
}
/* .order-confirmation h4 {
margin-top: 0;
color: #2c3e50;
}
/* .order-in-progress h3 {
margin-top: 0;
color: #34495e;
}
/* .order-in-progress p strong {
color: #555;
} */
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/jmandel/health-record-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server