Skip to content

Commit 7a79914

Browse files
jschnapperjschnapper
committed
added emr
1 parent 32e8ac4 commit 7a79914

File tree

9 files changed

+422
-0
lines changed

9 files changed

+422
-0
lines changed

‎old_personal_site/assets/img/emr.png‎

219 KB
Loading

‎old_personal_site/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@
3535
</div>
3636
</div>
3737
</a>
38+
<a href="projects/emr_us/index.html">
39+
<div class="project">
40+
<div class="project-text">
41+
<div class="project-title">emrUS</div>
42+
<div class="project-description">Login screen for Emergency Medical Record Company. Created for UI Practice.</div>
43+
</div>
44+
<div class="image-wrapper">
45+
<div class="project-title project-hidden">
46+
<p>Lessons in CSS</p>
47+
</div>
48+
<img src="assets/img/emr.png">
49+
</div>
50+
</div>
51+
</a>
3852
<a href="projects/pea/index.html">
3953
<div class="project">
4054
<div class="project-text">

‎old_personal_site/projects/emr_us/css/style.css‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
/*
2+
Codepen results page
3+
and general selectors
4+
*/
5+
.page {
6+
/* Position */
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
11+
/* Text */
12+
color: #5C5C5C;
13+
font-family: 'Montserrat', sans-serif;
14+
font-size: 16px;
15+
letter-spacing: -.5px;
16+
}
17+
18+
.text-light {
19+
color: #AAAAAA;
20+
}
21+
22+
/*
23+
*======EMAIL MODAL SELECTORS======
24+
*/
25+
.email-container {
26+
position: absolute;
27+
top: 50%;
28+
transform: translateY(-50%);
29+
z-index: 4;
30+
display: flex;
31+
flex-direction: column;
32+
justify-content: center;
33+
align-items: center;
34+
height: 200px;
35+
width: 400px;
36+
padding-top: 20px;
37+
background-color: #ffffff;
38+
box-shadow: 0 5px 20px 7px rgba(66, 11, 11, 0.14);
39+
border-radius: 33px;
40+
}
41+
42+
.email-container__close-btn {
43+
position: absolute;
44+
left: 20px;
45+
top: 16px;
46+
font-size: 20px;
47+
color: #AAAAAA;
48+
cursor: pointer;
49+
}
50+
51+
.email-container__close-btn:hover {
52+
color: #333;
53+
}
54+
55+
.email-container--closed {
56+
display: none;
57+
}
58+
59+
.email-container--open {
60+
display: visible;
61+
}
62+
63+
.input-container {
64+
position: relative;
65+
}
66+
67+
.input-container__input-box {
68+
position: relative;
69+
z-index: 0;
70+
background-color: transparent;
71+
width: 250px;
72+
font-size: 16px;
73+
padding: 12px 0px;
74+
border: none;
75+
outline: none;
76+
}
77+
78+
.input-container__placeholder {
79+
position: absolute;
80+
z-index: -1;
81+
top: 0;
82+
left: 0;
83+
padding-top: 12px;
84+
font-size: 18px;
85+
transition: 0.2s;
86+
}
87+
88+
.input-container__underline {
89+
position: absolute;
90+
bottom: 2px;
91+
height: 2px;
92+
width:100%;
93+
background-color: #eee;
94+
transition: 0.2s;
95+
}
96+
97+
.input-container__underline--color {
98+
background-color: #ff4b1f;
99+
width: 0;
100+
}
101+
102+
103+
/* Move placeholder when input-box focused */
104+
.input-container__input-box:focus ~ .input-container__placeholder, .input-container__input-box:valid ~.input-container__placeholder {
105+
top: -20px;
106+
color: #ff4b1f;
107+
font-size: 12px;
108+
}
109+
110+
/* Add underline color when input-box focused */
111+
.input-container__input-box:focus ~ .input-container__underline--color {
112+
width: 100%;
113+
}
114+
115+
/*
116+
*======EMAIL MODAL SELECTORS======
117+
*/
118+
119+
/* Container for all content except modal */
120+
.main-container {
121+
position: relative;
122+
display: flex;
123+
align-items: center;
124+
flex-direction: column;
125+
height: 893px;
126+
width: 537px;
127+
background-color: #ffffff;
128+
border-radius: 33px;
129+
box-shadow: 0 5px 20px 7px rgba(66, 11, 11, 0.14);
130+
filter: none;
131+
}
132+
133+
134+
/* Blur main content when modal open */
135+
.main-container__overlay--open {
136+
filter: blur(1.5px);
137+
}
138+
139+
140+
/*
141+
*======CONTAINERS FOR SUB CONTENT======
142+
*/
143+
144+
/* Content containers for welcome & confirmation, and for product description */
145+
.content-container {
146+
width: 400px;
147+
display: flex;
148+
align-items: center;
149+
flex-direction: column;
150+
}
151+
152+
.content-container__logo-wrapper {
153+
height: 80px;
154+
width: 800px;
155+
margin-top: 40px;
156+
}
157+
158+
.content-container__logo {
159+
object-fit: contain;
160+
height: 100%;
161+
width: 100%;
162+
}
163+
164+
.content-container__text--large-bold {
165+
font-size: 28px;
166+
margin: 12px 0 2px 0;
167+
}
168+
169+
.content-container__text--italic {
170+
text-align: center;
171+
}
172+
173+
/*
174+
*======BUTTON SELECTORS======
175+
*/
176+
.btn {
177+
position: relative;
178+
display: flex;
179+
justify-content: center;
180+
align-items: center;
181+
height: 60px;
182+
width: 300px;
183+
background: linear-gradient(#ff4b1f, #ff9068);
184+
border-radius: 50px;
185+
box-shadow: 0 2px 11px 2px rgba(0,0,0,0.14);
186+
cursor: pointer;
187+
margin: 20px 0;
188+
transition: 0.2s;
189+
}
190+
191+
.btn__overlay {
192+
position: absolute;
193+
height: 100%;
194+
width: 100%;
195+
border-radius: 50px;
196+
transition: 0.2s;
197+
}
198+
199+
200+
.btn__text {
201+
color: #fff;
202+
letter-spacing: 0;
203+
}
204+
205+
.btn--small {
206+
margin-top: 40px;
207+
width: 150px;
208+
}
209+
210+
.btn:hover .btn__overlay {
211+
box-shadow: 0 3px 7px 2px rgba(0,0,0,0.12);
212+
background-color: rgba(255, 255, 255, 0.1)
213+
}
214+
215+
216+
217+
/* Section separator */
218+
hr {
219+
width: 420px;
220+
height: 2px;
221+
background-color: #eee;
222+
border-width: 0;
223+
margin: 20px 0;
224+
}
225+
226+
/*
227+
*======PRODUCT DESCRIPTIONS======
228+
*/
229+
.description {
230+
display: flex;
231+
justify-content: center;
232+
}
233+
234+
235+
.description__image-wrapper {
236+
position: relative;
237+
left: -16px;
238+
width: 70px;
239+
}
240+
241+
.description__image {
242+
object-fit: contain;
243+
height: 100%;
244+
width: 100%;
245+
cursor: pointer;
246+
}
247+
248+
.description__text {
249+
display: flex;
250+
align-items: center;
251+
margin: 20px 0px 20px 12px;
252+
width: 300px;
253+
cursor: pointer;
254+
}
255+
256+
.description__text--title {
257+
font-size: 18px;
258+
}
259+
260+
.description__text--link {
261+
/* no properties */
262+
}
263+
264+
.description__text--footer {
265+
margin-top: 32px;
266+
width: 408px;
267+
letter-spacing: 0;
268+
font-size: 15px;
269+
text-align: center;
270+
}
271+
272+
.description--active {
273+
opacity: 1;
274+
}
275+
276+
.description--inactive {
277+
opacity: 0.4;
278+
}
279+
280+

‎old_personal_site/projects/emr_us/img/emr_us_health.png‎

25 KB
Loading

‎old_personal_site/projects/emr_us/img/emr_us_logo.png‎

49.9 KB
Loading

‎old_personal_site/projects/emr_us/img/emr_us_mobile.png‎

43.3 KB
Loading

‎old_personal_site/projects/emr_us/img/emr_us_secure.png‎

33.7 KB
Loading

‎old_personal_site/projects/emr_us/index.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="author" content="Jarrod Schnapper">
8+
<title>EMRus</title>
9+
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
10+
<link rel="stylesheet" href="css/style.css">
11+
</head>
12+
<body>
13+
<div class="page">
14+
<!-- Modal for after pressing "confirm email" -->
15+
<form class="email-container email-container--closed">
16+
<div class="email-container__close-btn">X</div>
17+
<div class="input-container">
18+
<input type="text" class="input-container__input-box" required>
19+
<label class="input-container__placeholder">Email</label>
20+
<div class="input-container__underline"></div>
21+
<div class="input-container__underline input-container__underline--color"></div>
22+
</div>
23+
<div class="btn btn--small btn__confirm">
24+
<div class="btn__overlay"></div>
25+
<div class="btn__text">Confirm</div>
26+
</div>
27+
</form>
28+
<!-- Contains all content -->
29+
<div class="main-container">
30+
<!-- Upper container for welcome info -->
31+
<div class="content-container">
32+
<div class="content-container__logo-wrapper">
33+
<img class="content-container__logo" src="img/emr_us_logo.png"/>
34+
</div>
35+
<!-- EMRus: Emergency Medical Records for the United States. I chose to have
36+
lowercase "us" to distinguish it from EMR and to imply that the government is
37+
not the important part of this, but all of "us" are; the people, the patients,
38+
come first.-->
39+
<h1 class="content-container__text--large-bold">
40+
Welcome to EMRus
41+
</h1>
42+
<p class="content-container__text--italic text-light">
43+
<i>Before you start, please confirm your email address.
44+
</i>
45+
</p>
46+
<div class="btn btn__modal-trigger --off">
47+
<div class="btn__overlay"></div>
48+
<div class="btn__text">Confirm Email</div>
49+
</div>
50+
</div>
51+
<hr>
52+
<!-- Lower container for product description -->
53+
<div class="content-container">
54+
<div class="description">
55+
<p class="description__text--title text-light">
56+
What is EMRus?
57+
</p>
58+
</div>
59+
<div class="description description__clickable">
60+
<div class="description__image-wrapper">
61+
<img class ="description__image" src="img/emr_us_health.png">
62+
</div>
63+
<p class="description__text">
64+
The official, standardized, and user-friendly Emergency Medical Record software for all US healthcare providers and systems.
65+
</p>
66+
</div>
67+
<div class="description description__clickable">
68+
<div class="description__image-wrapper">
69+
<img class="description__image" src="img/emr_us_mobile.png">
70+
</div>
71+
<p class="description__text">
72+
EMRus is compatible with computers, tablets, and mobile devices. This allows for access anywhere at anytime for easy communication between physicians and other physicans, and between physicians and patients.
73+
</p>
74+
</div>
75+
<div class="description description__clickable">
76+
<div class="description__image-wrapper">
77+
<img class="description__image" src="img/emr_us_secure.png">
78+
</div>
79+
<p class="description__text">
80+
Security regarding user privacy and data are of the utmost importance. All information is encrypted and secure on protected dedicated servers.
81+
</p>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
87+
<script src="js/index.js"></script>
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)