From 6c6b8c5fbdb6a2027388a2184ef46428d720dd1e Mon Sep 17 00:00:00 2001 From: Elizabeth Date: Fri, 19 Jan 2024 17:30:57 -0500 Subject: style --- a.html | 259 +++++++++++++++++++++++++++++++++++++++- appointments.css | 130 ++++++++++++++++++++ fonts/PPNeueMontreal-Book.otf | Bin 0 -> 115788 bytes fonts/PPNeueMontreal-Medium.otf | Bin 0 -> 121020 bytes fonts/PPNeueMontreal-Thin.otf | Bin 0 -> 109940 bytes index.html | 20 ++-- pfp.jpg | Bin 0 -> 10583 bytes styles.css | 125 +++++++++++++++++++ submit.js | 10 ++ 9 files changed, 532 insertions(+), 12 deletions(-) create mode 100644 appointments.css create mode 100644 fonts/PPNeueMontreal-Book.otf create mode 100644 fonts/PPNeueMontreal-Medium.otf create mode 100644 fonts/PPNeueMontreal-Thin.otf create mode 100644 pfp.jpg create mode 100644 styles.css create mode 100644 submit.js diff --git a/a.html b/a.html index 0f8196a..25f7b89 100644 --- a/a.html +++ b/a.html @@ -3,12 +3,267 @@ + + A + -A - +
+
+ + +
+ +
+
+
+

DASHBOARD

+ + + + +

Home

+ + + + + + +

Appointments

+ + + + + +

Messages

+ + + + + + +

Contacts

+ +
+ +
+

MEDICAL

+ + + + +

Test Results

+ + + + + +

Prescriptions

+ + + + + + +

Care Plans

+ + + + + +

Medical Records

+ + + + + + +

Documents

+ +
+ +
+

FINANCE

+ + + + + + +

Payments

+ + + + + + +

Billing Summary

+ + + + + + +

Estimates

+ +
+
+ +
+

Available Appointments

+
+ +
+
+

APR

+

10

+

2024

+
+ +
+

Comprehensive Eye Exam

+

Lionel Grey, MD

+

Plainsville Optometry Group

+
+ +
+ + +
+
+ +
+
+

APR

+

11

+

2024

+
+ +
+

Primary Care Visit

+

Paula Damle, MD

+

Plainsville Medical Center

+
+ +
+ + +
+
+ +
+
+

APR

+

15

+

2024

+
+ +
+

Physical Therapy

+

Adam Ng, PT

+

Morristown Medical Center

+
+ +
+ + +
+
+ +
+
+

APR

+

26

+

2024

+
+ +
+

Primary Care Visit

+

Jodie Foster, MD

+

Morristown Medical Center

+
+ +
+ + +
+
+ +
+
+

APR

+

23

+

2024

+
+ +
+

Primary Care Visit

+

Adam Ng, MD

+

Hazeltown Medical Center

+
+ +
+ + +
+
+ +
+
+

APR

+

23

+

2024

+
+ +
+

Primary Care Visit

+

Adam Ng, MD

+

Morristown Medical Center

+
+ + +

You've successfully scheduled:

+
+

Primary Care Visit

+

Adam Ng, MD

+

Morristown Medical Center

+
+ + +
+ + +
+
+ +
+
+

APR

+

24

+

2024

+
+ +
+

Primary Care Visit

+

Paula Damle, MD

+

Morristown Medical Center

+
+ +
+ + +
+
+
+
+
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 Binary files /dev/null and b/fonts/PPNeueMontreal-Book.otf differ diff --git a/fonts/PPNeueMontreal-Medium.otf b/fonts/PPNeueMontreal-Medium.otf new file mode 100644 index 0000000..315ac60 Binary files /dev/null and b/fonts/PPNeueMontreal-Medium.otf differ diff --git a/fonts/PPNeueMontreal-Thin.otf b/fonts/PPNeueMontreal-Thin.otf new file mode 100644 index 0000000..7ca62ff Binary files /dev/null and b/fonts/PPNeueMontreal-Thin.otf differ diff --git a/index.html b/index.html index 2e1ffc6..0068337 100644 --- a/index.html +++ b/index.html @@ -38,15 +38,15 @@ -

- cs1300 AB Testing Start Screen -

-

- Task: On the next page, do XYZ... -

- -
-
- +

+ cs1300 AB Testing Start Screen +

+

+ Task: On the next page, do XYZ... +

+ +
+
+ diff --git a/pfp.jpg b/pfp.jpg new file mode 100644 index 0000000..a7ba1ef Binary files /dev/null and b/pfp.jpg 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(); + }); + } +}); -- cgit v1.2.3-70-g09d2