-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
105 lines (97 loc) · 4.72 KB
/
index.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
<!doctype html>
<head>
<meta charset="utf-8">
<title>ContactME - Keeps track of your contacts</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" data-main="js/main" src="js/libs/require/require.js"></script>
<!-- TEMPLATES START -->
<!-- CreateContact -->
<script type="text/template" id="main-home-template">
<form id="addContactForm" method="POST" action="">
<fieldset>
<div id="column1">
<label for="name">Name (max 20 chars) </label><span id="nameValidation"> * You must type a name.</span><br/>
<input class="inputField" type="text" name="name" id="name" maxlength="20" /><br/>
<label for="street">Street (max 20 chars) </label><span id="streetValidation"> * You must type a street.</span><br/>
<input class="inputField" type="text" name="street" id="street" maxlength="20" /><br/>
</div>
<div id="column2">
<label for="zip"> Zip (max 20 chars) </label><span id="zipValidation"> * You must type a zip.</span><br/>
<input class="inputField" type="text" name="zip" id="zip" maxlength="20" /><br/>
<label for="city">City (max 20 chars) </label><span id="cityValidation" visibility="hidden"> * You must type a city.</span><br/>
<input class="inputField" type="text" name="city" id="city" maxlength="20" /><br/>
</div>
<input class="button" type="submit" value="Save contact" id="addContactBtn" name="addContactBtn" /><br/><br/>
</fieldset>
<div id="searchWrapper">
<label for="search">Search (By name, street, zip or city)</label><br />
<input type="text" id="searchContact" name="searchContactField" value="Search contact..." onblur="this.value='Search contact...'" onfocus="this.value = ''" />
</div>
</form>
</script>
<!-- EditContact -->
<script type="text/template" id="edit-contact-template">
<form id="addContactForm" method="POST" action="">
<fieldset>
<div id="column1">
<label for="name">Name (max 20 chars) </label><span id="nameValidation"> * You must type a name.</span><br/>
<input class="inputFieldEdit" type="text" value="<%= contact.name %>" name="name" id="name" maxlength="20" /><br/>
<label for="street">Street (max 20 chars) </label><span id="streetValidation"> * You must type a street.</span><br/>
<input class="inputFieldEdit" type="text" value="<%= contact.street %>" name="street" id="street" maxlength="20" /><br/>
</div>
<div id="column2">
<label for="zip">Zip (max 20 chars) </label><span id="zipValidation"> * You must type a zip.</span><br/>
<input class="inputFieldEdit" type="text" value="<%= contact.zip %>" name="zip" id="zip" maxlength="20" /><br/>
<label for="city">City (max 20 chars) </label><span id="cityValidation" visibility="hidden"> * You must type a city.</span><br/>
<input class="inputFieldEdit" type="text" value="<%= contact.city %>" name="city" id="city" maxlength="20" /><br/>
</div>
<input class="button" type="submit" value="Update contact" id="updateContactBtn" name="updateContactBtn" /><br/><br/>
<input type="hidden" id="contactID" value="<%= contact.id %>" />
<input type="hidden" id="contactCategory" value="none" />
</fieldset>
</form>
</script>
<!-- ContactItem -->
<script type="text/template" id="contact-template">
<div class="contactItem">
<dl>
<img src="<%= contact.profilePic %>" width="50" height="50" />
<dt><%= contact.name %></dt>
<dd><%= contact.street %></dd>
<dd><%= contact.zip %></dd>
<dd class="capitalized"><%= contact.city %></dd>
<a class="categoryLink" href="#"><dd><%= contact.category %></dd></a>
<div id="buttonField">
<img src="img/edit.png" alt="edit" class="editContact" id="<%= contact.id %>" title="Edit contact" />
<img src="img/remove.png" alt="remove" class="deleteContact" id="<%= contact.id %>" title="Delete contact" />
</div>
</dl>
</div>
</script>
<!-- CategoryItem -->
<script type="text/template" id="category-template">
<input type="radio" name="categoryGroup" id="<%= category.type %>" value="<%= category.type %>" <% if ( category.type == 'none') { %> checked="checked" <% } %> /> <%= category.type %><br />
</script>
<!-- TEMPLATES END -->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<ul>
<li>ContactME - Keeps track of your contacts</li>
</ul>
</div>
<div id="categoriesWrapper">
<!-- categories -->
</div>
<div id="page">
<!-- Create-/Editform -->
</div>
<div id="contactWrapper">
<!-- contacts -->
</div>
</div>
</body>
</html>