FindingFriends/contacts.html at main · POOSDSpring2024/FindingFriends · 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
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Finding Friends Contacts Page</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/contacts.css" />
		<script type="text/javascript" src="js/contacts.js"></script>
		<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
		<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
		<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!--Bootstrap Import-->
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
		<!-- jQuery library -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
		<!-- Popper JS -->
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
		<!-- Latest compiled JavaScript -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body onload="readCookie(); loadContacts('');">
		<div class="navbar sticky-top">
			<div class="left">
				<a href="index.html" >
					<img src="/images/Finding Friends.png" alt="Finding Friends Logo & Go to Home Page Button" title = "Click to go to Home Page" height="40" style="padding-left: 10px; padding-right: 0px;">
				</a>
				<a class="menuitem" href="members.html" alt="About US Page Button" title = "Click to go to About Us Page" style="font-size: 17px;">About Us</a>
			</div>
			<div class="right">
				<button type="button" id="logout-button" alt="Log Out Button" title = "Click to Log Out"  onclick="doLogout();">Logout</button>
			</div>
		</div>
		<div class="content">
			<div class="logged-in-div">
				<span style="color:white; font-size:24px " id="weclome-text"></span>
			</div>
			<br>
			<div class="access-ui-div">
				<div class="column">
					<div class="search-container" id="search-container" alt="Search Bar for Contacts" title = "Search for Contacts Info (Name, Phone Number, Email)">
						<input onkeyup="loadContactsHTML('search-text');" type="text" name="search" id="search-text" placeholder="Search..."
							class="search-input">
						<a href="#" class="search-btn" type="button" id="search-contact-button" class="button-font"
							onclick="loadContactsHTML('search-text');"><i class="fas fa-search"></i></a>
					</div>
				</div>
				<div class="column">
					<button type="button" onclick='loadContacts("");'>
						<i class="fa fa-refresh" style="font-size:30px; color: #FF6F1D" aria-hidden="true" alt="Refresh/Reset Contacts" title = "Refresh/Reset Contacts"></i>
					</button>
				</div>
			</div>
			<!--add contact form-->
			<div class="add-contacts" alt="Add New Contacts Here" title = "Add New Contacts Here">
				<form id="add-me" action="" method="post">
					<h4 id="new-contacts-info">Add New Contacts Here:</h4>
					<input type="text" id="contact-text-first-name" placeholder="First Name" alt="Add New Contacts First Name" title = "Need fill First Name" required>
					<input type="text" id="contact-text-last-name" placeholder="Last Name" alt="Add New Contacts Last Name" title = "Need fill Last Name" equired>
					<input type="text" id="contact-text-number" placeholder="XXX-XXX-XXXX" alt="Add New Contacts Phone Number" title = "Needs to be in the format XXX-XXX-XXXX" required>
					<input type="text" id="contact-text-email" placeholder="name@email.com" alt="Add New Contacts Email" title = "Needs to be in the format name@email.com" required>
					<button type="button" id="add-contact-button" class="button-font" onclick="addContact();"> Add Contact</button>
				</form>
			</div>
			<br>
			<!--contact table-->
			<div class="table-responsive">
				<div class="table-content" id="contact-table">
					<table id="contacts" cellpadding="0" cellspacing="0" border="0">
						<thread>
							<tr>
								<th>First&nbspName</th>
								<th>Last&nbspName</th>
								<th>Email</th>
								<th>Phone</th>
								<th></th>
							</tr>
						</thread>
						<tbody id="table-body"></tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="background"></div>
	</body>

</html>