COP4331-SmallProject/contactsPage.html at main · DillonNotDylan/COP4331-SmallProject · GitHub

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
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
		<link rel="stylesheet" href="css/contactPageStyle.css">
		<script type="text/javascript" src="js/contactsPage.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

		<!-- Logic to make sure the user is still signed in -->

		<script type="text/javascript">
			document.addEventListener('DOMContentLoaded', function()
			{
				readCookie();
			}, false);
		</script>

		<!-- Tab Identifier -->
		<title>Simple Contact</title>
	</head>

	<body>
		<!-- The navbar at the top of the page -->
		<div id="navbar">
			<ul>
				<li style="float: left; margin-right: 2rem;">
					<!-- Project Name -->
					<h1 ><span class="material-icons">contact_phone</span> Simple Contact</h1>
				</li>

				<li>
					<div id="loggedInDiv">
						<h3 id="userName"></h3>
					</div>
				</li>

				<li style="float: right; margin-top: -1.75rem;">
					<!-- Add Contact Button -->
					<button class="openbtn" type="button" onclick="openNav()" ><span class="material-icons md-20">person_add</span> Add Contact</button>

					<!-- Log Out Button -->
					<button type="button" id="logoutButton" class="openbtn" onclick="doLogout();"> <span id = "logout"class="material-icons md-20">logout</span></button>
				</li>
			</ul>
		</div>

		<!-- The add contact overlay -->
		<div id="myNav" class="overlay">
				<!-- Button to close the overlay navigation -->

				<!-- Overlay content -->
				<div class="overlay-content">
					<input id="add_first_name" type="text" placeholder=" First Name ...">
					<input id="add_last_name" type="text" placeholder=" Last Name ...">
					<input id="add_phone_number" type="text" placeholder=" Phone Number ...">
					<input id="add_email" type="text" placeholder=" Email ...">
					<div class="edit_buttons">
						<button type="button" onclick="add_contact()" class="confirm_edit_button" id="confirm_edit_button"><span id = "doneicon" class="material-icons md-46">done</span></button>
						<button type="button" href="javascript:void(0)" class="close_edit_button" id="close_edit_button" onclick="closeNav()"><span id = "doneicon" class="material-icons md-46">cancel</span></a>
					</div>
				</div>
		</div>

		<!-- The edit contact overlay -->
		<div id="myNav2" class="overlay">
			<!-- Button to close the overlay navigation -->


			<!-- Overlay content -->
			<div class="overlay-content">
				<input id="edit_first_name" type="text">
				<input id="edit_last_name" type="text">
				<input id="edit_phone_number" type="number">
				<input id="edit_email" type="text">
				<input id="edit_index" type="text" style="display: none;">

				<div class="edit_buttons">
					<button type="button" onclick="edit_contact()" class = "confirm_edit_button" id = "confirm_edit_button"><span id = "doneicon" class="material-icons md-46">done</span></button>
				 	<button type="button" href="javascript:void(0)" class="close_edit_button" id = "close_edit_button" onclick="close_edit_page()"><span id = "doneicon" class="material-icons md-46">cancel</span></a>
				</div>

			</div>
		</div>

		<!-- Search bar and Add Contact button -->
		<div class="search_container" id="search_container">
			<div class="searchbars" id="searchbars">
				<input type="text" placeholder=" search ..." id="first_name_searchbar" />
				<button class="add_contact_button" type="button" onclick="search_contacts();"><span id = "searchicon" class="material-icons md-46">search</span></button>
			</div>
		</div>

		<!-- Container for contact information -->
		<div id="contact_set">

			<!-- For Example Only -->

			<!--
			<div class="contact_container">
				<h2 class="contact_name">Contact Name</h2>
				<br>
				<img class="contact_image" src="images/default-user-image.png" alt="">

				<div class="contact_element">
					<h3 class="contact_phone_number">Contact Number</h3>
				</div>

				<div class="contact_element">
					<h3 class="contact_email">Contact Email</h3>
				</div>
				<div class="contact_element">
					<h3 class="contact_address">Contact Address</h3>
				</div>
				<p style="display: none;" id="contact_index" ></p>
				<div class="edit_delete_div">
					<button id="edit_contact_button" onclick="open_edit_page()">edit</button>
					<button id="delete_contact_button" onclick="open_delete_page()">delete</button>
				</div>
			</div>

			-->
		</div>

		<div class="buttons">
			<button onclick="load_more();" type="button" id="load" class="more_contacts_button" style = "padding-left: 5rem; padding-right: 5rem; margin:0 auto; display:none;"> <span class="material-icons md-46" id="doneicon">add_circle</span> </button>
		</div>

		<!-- Javascript Logic -->
		<script src="js/app.js"></script>
	</body>
</html>