aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--a.html260
-rw-r--r--appointments.css130
-rw-r--r--fonts/PPNeueMontreal-Book.otfbin0 -> 115788 bytes
-rw-r--r--fonts/PPNeueMontreal-Medium.otfbin0 -> 121020 bytes
-rw-r--r--fonts/PPNeueMontreal-Thin.otfbin0 -> 109940 bytes
-rw-r--r--index.html20
-rw-r--r--pfp.jpgbin0 -> 10583 bytes
-rw-r--r--styles.css125
-rw-r--r--submit.js10
9 files changed, 532 insertions, 13 deletions
diff --git a/a.html b/a.html
index 14fa4c1..25f7b89 100644
--- a/a.html
+++ b/a.html
@@ -3,13 +3,267 @@
<head>
<meta charset="UTF-8">
<meta name="version" content="A">
+ <link rel="stylesheet" href="styles.css">
+ <link rel="stylesheet" href="appointments.css">
<title>A</title>
<script src="record.js" defer></script>
+ <script src="submit.js"></script>
</head>
<body>
-A
-<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" 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">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" 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>
diff --git a/appointments.css b/appointments.css
new file mode 100644
index 0000000..b1bf204
--- /dev/null
+++ b/appointments.css
@@ -0,0 +1,130 @@
+@font-face {
+ font-family: 'PPNeueMontreal';
+ src: url(fonts/PPNeueMontreal-Medium.otf);
+}
+
+@font-face {
+ font-family: 'PPNeueMontrealBook';
+ src: url(fonts/PPNeueMontreal-Book.otf);
+}
+
+@font-face {
+ font-family: 'PPNeueMontrealThin';
+ src: url(fonts/PPNeueMontreal-Thin.otf);
+}
+
+.appointments-container {
+ display: flex;
+ flex-direction: column;
+ background-color: white;
+ border-radius: 6px;
+ margin: 47px auto 47px 51px;
+ padding: 21px 22px 0 22px;
+ min-width: 60em;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.appointments-container-name {
+ font-size: 20px;
+ font-family: 'PPNeueMontrealBook';
+ color: #868686;
+ margin-top: 0;
+ margin-bottom: 12px;
+}
+
+.divider {
+ height: 1px;
+ width: 100%;
+ background-color: #DADADA;
+ margin-top: 0;
+ margin-bottom: 17px;
+}
+
+.appointment-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.appointment-date {
+ display: flex;
+ flex-direction: column;
+ margin-right: 25px;
+
+ .date-text {
+ margin-top: 0;
+ margin-bottom: 0;
+ text-align: right;
+ font-size: 24px;
+ font-family: 'PPNeueMontrealThin';
+ }
+}
+
+.appointment-info {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-width: 280px;
+
+ .appointment-title, .appointment-text {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #868686;
+ }
+
+ .appointment-title {
+ font-size: 24px;
+ font-family: 'PPNeueMontreal';
+ }
+
+ .appointment-text {
+ font-size: 20px;
+ font-family: 'PPNeueMontrealBook';
+ }
+}
+
+.appointment-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding-left: 45%;
+
+ .defunct-button, .working-button {
+ background-color: #D4E8FF;
+ border: none;
+ border-radius: 9px;
+ width: 180px;
+ height: 45px;
+ color: white;
+ }
+}
+
+.success-dialog {
+ border: none;
+ border-radius: 6px;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+
+ .dialog-text {
+ font-family: 'PPNeueMontrealBook';
+ font-size: 20px;
+ color: #868686;
+ margin-top: 0px;
+ margin-bottom: 10px;
+ }
+
+ .dialog-button {
+ margin-top: 10px;
+ width: 150px;
+ border: none;
+ background-color: #D4E8FF;
+ border-radius: 9px;
+ padding: 14px 21px 14px 21px;
+ color: white;
+ }
+}
+
+.success-dialog::backdrop {
+ background-color: black;
+ opacity: 20%;
+} \ No newline at end of file
diff --git a/fonts/PPNeueMontreal-Book.otf b/fonts/PPNeueMontreal-Book.otf
new file mode 100644
index 0000000..113298c
--- /dev/null
+++ b/fonts/PPNeueMontreal-Book.otf
Binary files differ
diff --git a/fonts/PPNeueMontreal-Medium.otf b/fonts/PPNeueMontreal-Medium.otf
new file mode 100644
index 0000000..315ac60
--- /dev/null
+++ b/fonts/PPNeueMontreal-Medium.otf
Binary files differ
diff --git a/fonts/PPNeueMontreal-Thin.otf b/fonts/PPNeueMontreal-Thin.otf
new file mode 100644
index 0000000..7ca62ff
--- /dev/null
+++ b/fonts/PPNeueMontreal-Thin.otf
Binary files differ
diff --git a/index.html b/index.html
index 2e1ffc6..0068337 100644
--- a/index.html
+++ b/index.html
@@ -38,15 +38,15 @@
</script>
</head>
<body>
-<h2>
- cs1300 AB Testing Start Screen
-</h2>
-<p>
- <strong>Task: </strong> On the next page, do XYZ...
-</p>
-<button onclick="redirectAB()">Start Task</button>
-<br />
-<br />
-<button onclick="downloadAB()">Download & Clear Current Data</button>
+ <h2>
+ cs1300 AB Testing Start Screen
+ </h2>
+ <p>
+ <strong>Task: </strong> On the next page, do XYZ...
+ </p>
+ <button onclick="redirectAB()">Start Task</button>
+ <br />
+ <br />
+ <button onclick="downloadAB()">Download & Clear Current Data</button>
</body>
</html>
diff --git a/pfp.jpg b/pfp.jpg
new file mode 100644
index 0000000..a7ba1ef
--- /dev/null
+++ b/pfp.jpg
Binary files differ
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..463974f
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,125 @@
+@font-face {
+ font-family: 'PPNeueMontreal';
+ src: url(fonts/PPNeueMontreal-Medium.otf);
+}
+
+@font-face {
+ font-family: 'PPNeueMontrealBook';
+ src: url(fonts/PPNeueMontreal-Book.otf);
+}
+
+@font-face {
+ font-family: 'PPNeueMontrealThin';
+ src: url(fonts/PPNeueMontreal-Thin.otf);
+}
+
+.screen-container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+.body-container {
+ display: flex;
+ flex-direction: row;
+ background-color: #F6FAFF;
+}
+
+.nav-bar, .user-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.nav-bar {
+ justify-content: space-between;
+ background-color: #D4E8FF;
+ box-shadow: 0 0 20 rgba(0, 0, 0, 0.05);
+}
+
+.user-info {
+ width: 292px;
+ padding-right: 39px;
+ justify-content: space-between;
+}
+
+.title {
+ font-weight: bold;
+ font-size: 45px;
+ padding-left: 42px;
+ font-family: 'PPNeueMontreal';
+ border: none;
+ background-color: #D4E8FF;
+}
+
+.username {
+ font-size: 30px;
+ font-family: 'PPNeueMontrealBook';
+ color: #6B6B6B;
+}
+
+.profile-photo {
+ width: 71px;
+ height: 71px;
+ border-radius: 100%;
+ overflow: hidden;
+}
+
+.photo {
+ width: 100%;
+ height: 100%;
+}
+
+.side-nav-bar, .side-nav-section {
+ display: flex;
+ flex-direction: column;
+}
+
+.side-nav-bar {
+ padding-top: 55px;
+ padding-bottom: 55px;
+ width: 308px;
+ gap: 60px;
+ border-right: 1px solid #E4E4E4;
+ background-color: white;
+}
+
+.side-nav-section {
+ gap: 16px;
+}
+
+.side-nav-section-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+ padding-left: 40px;
+}
+
+.side-nav-section-header {
+ padding-left: 40px;
+}
+
+.side-nav-section-header, .side-nav-section-text, .current-selected-section-text {
+ font-size: 20px;
+ color: #868686;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.side-nav-section-header, .side-nav-section-text {
+ font-family: 'PPNeueMontrealBook';
+}
+
+.current-selected-section-text {
+ font-family: 'PPNeueMontreal';
+}
+
+#current-selected-row {
+ background-color: #F6F6F6;
+ width: 225px;
+ border-radius: 3px;
+ padding: 10px 0 10px 8px;
+ /* this is a hack don't @ me */
+ margin-left: 32px;
+} \ No newline at end of file
diff --git a/submit.js b/submit.js
new file mode 100644
index 0000000..c917435
--- /dev/null
+++ b/submit.js
@@ -0,0 +1,10 @@
+window.addEventListener("DOMContentLoaded", () => {
+ const dialog = document.querySelector("dialog");
+ const openDialog = document.getElementById("working-button");
+ if (openDialog) {
+ openDialog.addEventListener("click", () => {
+ console.log("hi");
+ dialog.showModal();
+ });
+ }
+});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 05:37:29 +0000