-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathContacts.html
260 lines (239 loc) · 11.8 KB
/
Contacts.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contacts Manager - Contacts</title>
<script type="text/javascript" src="js/code.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/styles2.css" rel="stylesheet">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
disableSafariAnimations();
readCookie();
}, false);
</script>
</head>
<body class="let-flow">
<div class="color-left color"></div>
<div class="color-bottom color"></div>
<div class="color-right color"></div>
<nav id="website-nav">
<a href="https://github.com/lukesan48/Team-22-Small-Project" target="_blank">
<ul class="website-nav logo">
<li class="website-nav-svg">
<svg id="logo-svg svg" width="30" height="34" viewBox="0 0 30 34" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M15.4997 15.8981C13.5245 14.5552 10.5608 12.2051 2.06641 12.2051V29.0207C10.5608 29.0207 13.5245 31.3708 15.4997 32.7138V15.8981Z"
stroke="#FEFCFE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M15.5007 15.8981C17.4759 14.5552 20.4396 12.2051 28.9339 12.2051V29.0207C20.4396 29.0207 17.4759 31.3708 15.5007 32.7138V15.8981Z"
stroke="#FEFCFE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M25.4454 1.26587H7.79924C7.30626 1.26587 6.8231 1.39258 6.40436 1.63168L1.75928 4.2841L6.40436 6.93649C6.8231 7.1756 7.30626 7.3023 7.79924 7.3023H25.4454C27.2595 7.3023 28.73 5.95102 28.73 4.2841C28.73 2.61717 27.2595 1.26587 25.4454 1.26587Z"
stroke="#FEFCFE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.7483 1.39575V7.30243" stroke="#FEFCFE" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</li>
<li class="website-nav website-name">
<p>MyContact</p>
</li>
</ul>
</a>
<ul class="website-nav website-actions">
<li class="website-nav log-out link"> <a href="index.html" onclick="doLogout()"> <svg width="30" height="23"
viewBox="0 0 36 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_102_4858)">
<path
d="M24.4286 21.7499V25.8928C24.4286 26.4421 24.1576 26.9691 23.6754 27.3575C23.1932 27.7459 22.5391 27.9642 21.8571 27.9642H3.85714C3.17515 27.9642 2.5211 27.7459 2.03887 27.3575C1.55663 26.9691 1.28571 26.4421 1.28571 25.8928V3.10707C1.28571 2.55769 1.55663 2.03082 2.03887 1.64235C2.5211 1.25388 3.17515 1.03564 3.85714 1.03564H21.8571C22.5391 1.03564 23.1932 1.25388 23.6754 1.64235C24.1576 2.03082 24.4286 2.55769 24.4286 3.10707V7.24993"
stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M34.7143 14.5H14.1429" stroke="white" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M19.2857 10.3572L14.1429 14.5L19.2857 18.6429" stroke="white" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_102_4858">
<rect width="30" height="29" fill="white" />
</clipPath>
</defs>
</svg> Logout
</a></li>
</ul>
</nav>
<!-- MAIN CONTENT AREA - CONTACT PAGE -->
<div class="main-content">
<div class="welcome-header">
<section class="header-content">
<h1> <span id="sentence-4">Welcome to your</span>
<section id="last-two-sentences">
<span id="sentence-5"> contact page</span>
<!-- REPLACE SENTENCE-6 WITH THE CURRENT USER -->
<div id="sentence-6"><span id="userName">
</p>
</div>
</section>
</h1>
</section>
</div>
<!-- PROFILE CARD -->
<div class="profile-card">
<div class="card-content">
<div class="inner-title">Personal Information</div>
<div class="profile-photo"><img src="images/default-photo.png" alt="default-photo"></div>
<div class="user-info">
<span id="full-name"></span>
<section id="contact-info-list">
<!-- USER INFOMATION -->
<ul>
<li>
<p> <span class="info-type first">First Name: </span>
<span id="user-first-name"></span>
</p>
</li>
<li>
<p> <span class="info-type last">Last Name:</span> <span id="user-last-name"></span>
</p>
</li>
<li>
<p> <span class="info-type user">Username:</span><span id="user-username"></span> </p>
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- CONTACT TABLE -->
<div id="profile-contact-table">
<div class="head ContactDiv">
<div class="search-model">
<input type="text" id="searchContactText" placeholder="Search First/Last Name" />
<button type="button" class="search-button" class="buttons" onclick="searchContact();"> Search
</button>
<div class="svg refresh-button">
<a onclick="refreshTable()">
<svg width="30" height="30" viewBox="0 0 35 35" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_276_561)">
<path d="M5.09863 33.6211V27.4209H11.299" stroke="black" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M33.347 14.5371C34.8898 22.7413 29.8693 30.8748 21.6722 33.0713C15.3985 34.7523 8.99728 32.491 5.09863 27.806"
stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M1.65274 20.4624C0.109982 12.2582 5.1306 4.12468 13.3276 1.92831C19.6008 0.247398 26.0016 2.50823 29.9004 7.19258"
stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M29.9 1.37891V7.57929H23.6997" stroke="black" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M10.2237 18.3339C9.34634 18.1813 9.34634 16.9218 10.2237 16.7692C13.4021 16.2162 15.93 13.7953 16.6199 10.6438L16.6728 10.4022C16.8626 9.53517 18.0972 9.52977 18.2946 10.3952L18.3588 10.6767C19.0742 13.8133 21.6029 16.2138 24.7724 16.7652C25.6543 16.9186 25.6543 18.1845 24.7724 18.3379C21.6029 18.8893 19.0742 21.2898 18.3588 24.4264L18.2946 24.7079C18.0972 25.5733 16.8626 25.5678 16.6728 24.7009L16.6199 24.4593C15.93 21.3078 13.4021 18.8868 10.2237 18.3339Z"
fill="#FF7A00" fill-opacity="0.6" />
<path
d="M10.2237 18.3339C9.34634 18.1813 9.34634 16.9218 10.2237 16.7692C13.4021 16.2162 15.93 13.7953 16.6199 10.6438L16.6728 10.4022C16.8626 9.53517 18.0972 9.52977 18.2946 10.3952L18.3588 10.6767C19.0742 13.8133 21.6029 16.2138 24.7724 16.7652C25.6543 16.9186 25.6543 18.1845 24.7724 18.3379C21.6029 18.8893 19.0742 21.2898 18.3588 24.4264L18.2946 24.7079C18.0972 25.5733 16.8626 25.5678 16.6728 24.7009L16.6199 24.4593C15.93 21.3078 13.4021 18.8868 10.2237 18.3339Z"
stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_276_561">
<rect width="35" height="35" fill="white" />
</clipPath>
</defs>
</svg>
</a>
</div>
</div>
<span id="contactSearchResult"></span>
<div class="table-header">
<div>
<p>Your Contacts</p>
</div>
<div class="table button add-contact" onclick="appendContactForm()"><button>add contact
<svg class="svg add-contact-button" width="30" height="22" viewBox="0 0 18 19" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_208_656)">
<path
d="M6.19223 6.76923C7.78536 6.76923 9.07685 5.47774 9.07685 3.88462C9.07685 2.29149 7.78536 1 6.19223 1C4.59911 1 3.30762 2.29149 3.30762 3.88462C3.30762 5.47774 4.59911 6.76923 6.19223 6.76923Z"
stroke="#FEFCFE" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M7.92308 14.8461H1V14.2206C1.00919 13.3411 1.24113 12.4782 1.67416 11.7128C2.1072 10.9472 2.72719 10.3039 3.47623 9.84299C4.22529 9.38204 5.07895 9.11845 5.95748 9.07687C6.83602 9.03527 7.71076 9.21704 8.5 9.60516"
stroke="#FEFCFE" stroke-linecap="round" stroke-linejoin="round" />
<path d="M12.5383 9.0769V16" stroke="#FEFCFE" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M9.0769 12.5383H16" stroke="#FEFCFE" stroke-linecap="round"
stroke-linejoin="round" />
</g>
<defs>
<clipPath id="clip0_208_656">
<rect width="18" height="19" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</div>
<section id="adding-contact">
<section id="add-contact-header">
<p>New Contact Information</p>
</section>
<div>
<form id="add-user-inputs" action="/" name="newContact">
<div class="input-control">
<label for="addFirstNameText">First Name </label>
<input type="text" id="addFirstNameText" name="newFName" placeholder="First Name"
required>
<div id="newF-err" class="error"></div>
</div>
<div class="input-control">
<label for="addLastNameText">Last Name </label>
<input type="text" id="addLastNameText" name="newLName" placeholder="Last Name"
required>
<div id="newL-err" class="error"></div>
</div>
<div class="input-control">
<label for="addPhoneNumberText">Phone </label>
<input type="tel" id="addPhoneNumberText" name="currPhone" placeholder="Phone Number">
<div id="phoneNum" class="error"></div>
</div>
<div class="input-control">
<label for="addEmailText">Email </label>
<input type="email" id="addEmailText" name="currEmail" placeholder="Email">
<div id="email" class="error"></div>
</div>
</div>
<div id="add-contact-button">
<button type="submit" id="addContactButton" class="buttons"> Add Contact
<svg class="add-contact-svg" width="16" height="16" viewBox="0 0 14 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.25369 4.36099C3.25369 2.78091 4.5346 1.5 6.11468 1.5C7.69477 1.5 8.97567 2.78091 8.97567 4.36099C8.97567 4.58593 8.94986 4.80389 8.90135 5.01244C8.8075 5.41588 9.05848 5.81902 9.46192 5.91286C9.86537 6.00671 10.2685 5.75573 10.3623 5.35229C10.4366 5.03311 10.4757 4.70114 10.4757 4.36099C10.4757 1.95248 8.52319 0 6.11468 0C3.70617 0 1.75369 1.95248 1.75369 4.36099C1.75369 4.70114 1.79278 5.03311 1.86702 5.35229C1.96087 5.75573 2.364 6.00671 2.76744 5.91286C3.17089 5.81902 3.42186 5.41588 3.32802 5.01244C3.27951 4.80389 3.25369 4.58593 3.25369 4.36099ZM4.88338 9.69608V4.25939C4.88338 3.56385 5.44723 3 6.14277 3C6.83831 3 7.40215 3.56385 7.40215 4.25938V8.3363H9.8659C11.2869 8.33631 12.4389 9.48828 12.4389 10.9093V13C12.4389 13.5523 11.9912 14 11.4389 14H4.83147C4.50232 14 4.19424 13.838 4.00765 13.5669L3.24366 12.4565C2.54067 11.4348 3.12077 10.0278 4.33954 9.79843L4.88338 9.69608Z"
fill="#05435e" />
</svg>
</button>
</div>
</form>
<span id="addContactResult"></span>
</section>
<!-- CONTACT TABLE -->
<table class="contact-table" cellspacing=0>
<thead>
<tr class="table-contact-info">
<th colspan="2"> Full Name</th>
<th>Phone</th>
<th>Email</th>
<th colspan="2">Action</th>
</tr>
</thead>
<!-- ADDS CONTACTS DYNAMICALLY -->
<tbody id="contact-body" class="head table-body">
<!-- ENDS HERE -->
</tbody>
</table>
</div>
</div>
</body>
<footer>
<p class="footer">Contact Manager Project Made by Group 22 for COP4331</p>
</footer>
</html>