ProcessesContactManager/contact.html at main · Evasionally/ProcessesContactManager · 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
<html>
<head>
	<title>Pair-A-Dice Contacts</title>
	<script type="text/javascript" src="js/code.js"></script>
	<link href="css/contact.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

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

</head>
<body onload="grabContacts()">

    <!--HEADER WITH NAVBAR-->
    <header>
        <img class="logo" src="images/logo-removebg-preview.png" alt="logo" onclick="location.href='/contact.html'">
        <p> Pair-A-Dice Contact Manager</p>
        <nav>
            <ul class="nav_links">
                <li class="li_a_button_group"><a href="/contact.html" class="li_a_button_group">Contacts</a></li>
                <li class="li_a_button_group"><a href="/about.html" class="li_a_button_group">About</a></li>
				<li id="userName"></li>
            </ul>
        </nav>

		<!--Logout button-->
        <a class="cta" href="#"><button class="li_a_button_group" id="btn" onclick="doLogout()">Log Out</button></a>

    </header>

    <br />


	<!--Search Bar and Instructions-->
    <div id="search_instructions">

		<!--Do NOT remove id="searchText", this allows the search function to work!!-->
        <input type="text" placeholder="Search..." id="search_bar" id="searchText" onkeyup="searchContact()">

    </div>

	<!--Add Contact Fields and Button-->
  	<div id="add">
		<input type="text" placeholder="First Name" id="newContactFirst">
		<input type="text" placeholder="Last Name" id="newContactLast">
		<input type="text" placeholder="Email" id="newContactEmail">
		<input type="text" placeholder="Phone" id="newContactPhone">
		<button id="addContact_btn" onclick="addContact()">Add Contact</button>
  	</div>


	<p id="actionStatus">

	</p>

	<!--Contacts Table-->
	<table class="content-table">

		<!--Table Head... always keep!!!-->
		<thead>
			<tr>
				<th>First Name</th>
				<th>Last Name</th>
				<th>E-Mail</th>
				<th>Phone Number</th>
                <th></th>
                <th></th>
			</tr>
		</thead>

		<tbody class="table-body" id="contact-table-body">

			<!--Dynamic JavaScript will populate this table-->

		</tbody>
	</table>

	</body>
</html>