generated from kiei451-winter2021/final
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Family.html
134 lines (122 loc) · 6.86 KB
/
Family.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HealthPassport - Family</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.css" />
</head>
<body>
<div class="sign-in-or-sign-out"></div>
<!-- NAVIGATION -->
<div title="navigation" class="px-2 md:px-10 py-4 text-blue-600 border border-gray-300">
<div class="flex">
<p class="md:w-full w-1/5 md:w-1/8 text-center md:text-left"><a href="index.html">Home</a></p>
<p class="md:w-full w-1/5 md:w-1/8 text-center md:text-left"><a href="Vaccines.html">Vaccines</a></p>
<p class="md:w-full w-1/5 md:w-1/8 text-center md:text-left"><a href="Family.html">Family</a></p>
<p class="md:w-full w-1/5 md:w-1/8 text-center md:text-left"><a href="mailto:[email protected]">Help</a></p>
<div class="md:w-full w-0 md:w-1/8"></div>
<div class="md:w-full w-0 md:w-1/8"></div>
<div class="md:w-full w-0 md:w-1/8"></div>
<!-- I had to take Alex Navarro | out to make it all fit.
Probably a nice to have to have the name and if so we have to
figure out how responsive design makes it only appear when on a full size screen. -->
<p class="md:w-full w-1/5 md:w-1/8 text-center md:text-right" id="sign-in-or-sign-out"><a href="index.html">Log
Out</a></p>
</div>
</div>
<!-- HEADER -->
<div class="text-3xl md:text-5xl p-10 text-grey-darker">Family History</div>
<div class="text-lg md:text-2xl px-10 text-grey-darker">Latest Entries</div>
<!-- Family Cards -->
<div class="container-familyCards">
<!-- Javascript fills data here -->
<!-- <div class="familyCard mx-10 my-4 px-4 py-4 max-w-screen-lg rounded-xl border shadow-lg my-4">
<div class="name-and-relationship font-bold text-grey-darker pb-2">${familyMemberCard.memberName} -
${familyMemberCard.relationship}</div>
<div class="divider-horizontal border-t pt-4 border-gray-300">
<div class="container-familyData flex">
<div class="card-left space-y-2 w-1/3">
<div class="flex">
<p class="w-1/2 text-grey-darker text-left">Age</p>
<p class="w-1/2 text-grey-darker text-right pr-4">${familyMemberCard.age}</p>
</div>
<div class="container-healthIssue">
<div class="healthIssue-row-1 flex">
<p class="w-1/2 text-grey-darker text-left">Health Issue</p>
<p class="w-1/2 text-grey-darker text-right pr-4">${familyMemberCard.healthIssue}</p>
</div>
<div class="ageWhenDiagnosed flex">
<p class="w-1/2 pl-2 text-grey-darker text-left">Age when Diagnosed</p>
<p class="w-1/2 text-grey-darker text-right pr-4">${familyMemberCard.ageWhenDiagnosed}</p>
</div>
<div class="issueUnderControl flex">
<p class="w-1/2 pl-2 text-grey-darker text-left">Issue under Control?</p>
<p class="w-1/2 text-grey-darker text-right pr-4">${familyMemberCard.issueUnderControl}</p>
</div>
</div>
</div>
<div class="card-right notes space-y-2 w-2/3 border-l border-gray-300 px-4">
<p class="text-grey-darker text-left">Notes:</p>
<p class="text-grey-darker text-left">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem
IpsumLorem Ipsum Lorem Ipsum Lorem
IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem
Ipsum</p>
</div>
</div>
</div>
</div> -->
</div>
<!-- Form -->
<div>
<form class="px-4 py-2 max-w-xs rounded-xl border shadow-lg my-4 mx-10">
<!-- memberName -->
<input type="text" id="memberName" name="memberName" placeholder="Name of Family Member"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- relationship -->
<input type="text" id="relationship" name="relationship" placeholder="Relationship to You"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- age -->
<input type="text" id="age" name="age" placeholder="Age of Family Member"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- healthIssue -->
<input type="text" id="healthIssue" name="healthIssue" placeholder="Health Issue"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- ageWhenDiagnosed -->
<input type="text" id="ageWhenDiagnosed" name="ageWhenDiagnosed" placeholder="Age when Diagnosed"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- issueUnderControl -->
<input type="text" id="issueUnderControl" name="issueUnderControl" placeholder="Issue under Control?"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<!-- notes -->
<input type="text" id="notes" name="notes" placeholder="Notes"
class="my-2 p-2 w-72 border border-gray-300 rounded shadow-xl focus:outline-none focus:ring-purple-500 focus:border-purple-500">
<button class="button bg-blue-600 hover:bg-blue-600 text-white mt-2 px-4 py-2 rounded-xl">Submit</button>
</form>
</div>
<!-- ---------------- FIREBASE BELOW --------------- -->
<!-- Put the Firebase config here -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
<!-- Firebase Auth -->
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyB2ghQCvl9Bps-uv_7ToQTiwqzcYwiSsr0",
authDomain: "kiei-451-4d1c2.firebaseapp.com",
projectId: "kiei-451-4d1c2",
storageBucket: "kiei-451-4d1c2.appspot.com",
messagingSenderId: "1064307467074",
appId: "1:1064307467074:web:88407534ef9360dde81edb"
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script src="family.js"></script>
</body>
</html>
<!-- first commit to dev branch. Coming from VS Code -->