diff options
| -rw-r--r-- | a.html | 10 | ||||
| -rw-r--r-- | b.html | 262 |
2 files changed, 263 insertions, 9 deletions
@@ -5,10 +5,10 @@ <meta name="version" content="A"> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="appointments.css"> - <title>A</title> + <title>Version A</title> <script src="record.js" defer></script> - <script src="submit.js"></script> + <script src="submit.js" defer></script> </head> <body> <div class="screen-container"> @@ -211,8 +211,8 @@ </div> <div class="appointment-buttons"> - <input type="button" value="See Appointment" class="defunct-button" /> - <input type="button" value="Schedule Appointment" class="defunct-button" /> + <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> @@ -239,7 +239,7 @@ <button autofocus onclick="suc(event)" class="dialog-button">OK</button> </dialog> <div class="appointment-buttons"> - <input type="button" value="See Appointment" class="defunct-button" /> + <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> @@ -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> |