This repository has been archived by the owner on Aug 5, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (52 loc) · 2.38 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Bookmark App</title>
</head>
<body class="blue-grey lighten-5" onload="displayBookmarks()">
<nav class="nav-wrapper deep-purple lighten-2">
<div class="brand-logo center"><i class="material-icons" style="margin-top: 5px;">book</i>bookmarker.</div>
</nav>
<div class="container">
<br><br>
<div class="card-panel deep-purple">
<h4 class="header center blue-grey-text text-lighten-5">bookmark your favourite site.</h4>
<br>
<div class="row">
<form id="bookmark-form" class="col s12">
<div class="row">
<div class="input-field col s12">
<input class="center validate" type="text" name="siteName" placeholder="Website Name" required>
<input class="center validate" type="url" name="siteURL" placeholder="Website URL" required>
</div>
</div>
<div class="row center">
<button class="btn waves-effect waves-light green" type="submit" name="submit">
<i class="material-icons left">bookmark</i>
Bookmark
</button>
</div>
</form>
</div>
</div>
<div class="card-panel">
<h4 class="center">your bookmarks:</h4>
<ul id="bookmarks-results" class="collection center">
<!-- Bookmarks are displayed here -->
</ul>
<div class="row center">
<button id="clear-bookmarks" class="btn waves-effect waves-light red" type="button" name="button"><i class="material-icons left">delete</i>Clear All Bookmarks</button>
</div>
</div>
</div>
<!-- Make sure the script is placed in the bottom of the BODY element of the document you're trying to manipulate, not in the HEAD element or placed before any of the elements you want to "get". -->
<script src="js/main.js"></script>
</body>
</html>