aboutsummaryrefslogtreecommitdiff
path: root/b.html
diff options
context:
space:
mode:
Diffstat (limited to 'b.html')
-rw-r--r--b.html262
1 files changed, 258 insertions, 4 deletions
diff --git a/b.html b/b.html
index f52f079..1713d3c 100644
--- a/b.html
+++ b/b.html
@@ -3,13 +3,267 @@
<head>
<meta charset="UTF-8">
<meta name="version" content="B">
- <title>B</title>
+ <link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="appointments.css">
+ <title>Version B</title>
<script src="record.js" defer></script>
+ <script src="submit.js" defer></script>
</head>
<body>
-B
-<button onclick="suc(event)" id="success1">Success</button>
-<button onclick="fail(event)" id="fail1">Fail</button>
+ <div class="screen-container">
+ <div class="nav-bar">
+ <button onclick="location.href = 'index.html'" class="title">MEDx</button>
+ <div class="user-info">
+ <p class="username">Scarlet Madden</p>
+ <div class="profile-photo">
+ <img src="pfp.jpg" class="photo">
+ </div>
+ </div>
+ </div>
+
+ <div class="body-container">
+ <div class="side-nav-bar">
+ <div class="side-nav-section">
+ <p class="side-nav-section-header">DASHBOARD</p>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-house" viewBox="0 0 16 16">
+ <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
+ </svg>
+ <p class="side-nav-section-text">Home</p>
+ </span>
+ <span class="side-nav-section-row" id="current-selected-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-calendar-plus" viewBox="0 0 16 16">
+ <path d="M8 7a.5.5 0 0 1 .5.5V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5A.5.5 0 0 1 8 7"/>
+ <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z"/>
+ </svg>
+ <p class="current-selected-section-text">Appointments</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-envelope" viewBox="0 0 16 16">
+ <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
+ </svg>
+ <p class="side-nav-section-text">Messages</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-person-rolodex" viewBox="0 0 16 16">
+ <path d="M8 9.05a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+ <path d="M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1z"/>
+ </svg>
+ <p class="side-nav-section-text">Contacts</p>
+ </span>
+ </div>
+
+ <div class="side-nav-section">
+ <p class="side-nav-section-header">MEDICAL</p>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-activity" viewBox="0 0 16 16">
+ <path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2"/>
+ </svg>
+ <p class="side-nav-section-text">Test Results</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-capsule" viewBox="0 0 16 16">
+ <path d="M1.828 8.9 8.9 1.827a4 4 0 1 1 5.657 5.657l-7.07 7.071A4 4 0 1 1 1.827 8.9Zm9.128.771 2.893-2.893a3 3 0 1 0-4.243-4.242L6.713 5.429z"/>
+ </svg>
+ <p class="side-nav-section-text">Prescriptions</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-hospital" viewBox="0 0 16 16">
+ <path d="M8.5 5.034v1.1l.953-.55.5.867L9 7l.953.55-.5.866-.953-.55v1.1h-1v-1.1l-.953.55-.5-.866L7 7l-.953-.55.5-.866.953.55v-1.1zM13.25 9a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zM13 11.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm.25 1.75a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zm-11-4a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 3 9.75v-.5A.25.25 0 0 0 2.75 9zm0 2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25zM2 13.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25z"/>
+ <path d="M5 1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1a1 1 0 0 1 1 1v4h3a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h3V3a1 1 0 0 1 1-1zm2 14h2v-3H7zm3 0h1V3H5v12h1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1zm0-14H6v1h4zm2 7v7h3V8zm-8 7V8H1v7z"/>
+ </svg>
+ <p class="side-nav-section-text">Care Plans</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-folder" viewBox="0 0 16 16">
+ <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139q.323-.119.684-.12h5.396z"/>
+ </svg>
+ <p class="side-nav-section-text">Medical Records</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
+ <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
+ <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+ </svg>
+ <p class="side-nav-section-text">Documents</p>
+ </span>
+ </div>
+
+ <div class="side-nav-section">
+ <p class="side-nav-section-header">FINANCE</p>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-coin" viewBox="0 0 16 16">
+ <path d="M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518z"/>
+ <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+ <path d="M8 13.5a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11m0 .5A6 6 0 1 0 8 2a6 6 0 0 0 0 12"/>
+ </svg>
+ <p class="side-nav-section-text">Payments</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-receipt" viewBox="0 0 16 16">
+ <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z"/>
+ <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
+ </svg>
+ <p class="side-nav-section-text">Billing Summary</p>
+ </span>
+ <span class="side-nav-section-row">
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#868686" class="bi bi-calculator" viewBox="0 0 16 16">
+ <path d="M12 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
+ <path d="M4 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/>
+ </svg>
+ <p class="side-nav-section-text">Estimates</p>
+ </span>
+ </div>
+ </div>
+
+ <div class="appointments-container">
+ <p class="appointments-container-name">Available Appointments</p>
+ <div class="divider"></div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">10</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Comprehensive Eye Exam</p>
+ <p class="appointment-text">Lionel Grey, MD</p>
+ <p class="appointment-text">Plainsville Optometry Group</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">11</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Paula Damle, MD</p>
+ <p class="appointment-text">Plainsville Medical Center</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">15</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Physical Therapy</p>
+ <p class="appointment-text">Adam Ng, PT</p>
+ <p class="appointment-text">Morristown Medical Center</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">26</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Jodie Foster, MD</p>
+ <p class="appointment-text">Morristown Medical Center</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">23</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Adam Ng, MD</p>
+ <p class="appointment-text">Hazeltown Medical Center</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" onclick="fail(event)" value="See Appointment" class="defunct-button" />
+ <input type="button" onclick="fail(event)" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">23</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Adam Ng, MD</p>
+ <p class="appointment-text">Morristown Medical Center</p>
+ </div>
+
+ <dialog class="success-dialog">
+ <p class="dialog-text">You've successfully scheduled:</p>
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Adam Ng, MD</p>
+ <p class="appointment-text">Morristown Medical Center</p>
+ </div>
+ <button autofocus onclick="suc(event)" class="dialog-button">OK</button>
+ </dialog>
+ <div class="appointment-buttons">
+ <input type="button" onclick="fail(event)" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="working-button" id="working-button" />
+ </div>
+ </div>
+
+ <div class="appointment-row">
+ <div class="appointment-date">
+ <p class="date-text">APR</p>
+ <p class="date-text">24</p>
+ <p class="date-text">2024</p>
+ </div>
+
+ <div class="appointment-info">
+ <p class="appointment-title">Primary Care Visit</p>
+ <p class="appointment-text">Paula Damle, MD</p>
+ <p class="appointment-text">Morristown Medical Center</p>
+ </div>
+
+ <div class="appointment-buttons">
+ <input type="button" value="See Appointment" class="defunct-button" />
+ <input type="button" value="Schedule Appointment" class="defunct-button" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</body>
</html>