NeilBrommer/NewTabPage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add basic capabilities

Browse source 
stores and loads bookmarks from localStorage, import/export capabilities
This commit is contained in:
Neil Brommer 2017-11-07 20:00:42 -08:00
parent bee398bcef
commit 5798bad50a
7 changed files with 424 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

177
index.html Normal file
View file

@ -0,0 +1,177 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="A new tab page">
<meta name="author" content="Neil Brommer">
<link rel="icon" href="favicon.png">
<title>New Start</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<!-- <a class="navbar-brand" href=".">Start</a >-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<!-- Keep this to push elements to the right -->
</ul>
<form class="form-inline mt-2 mt-md-0">
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
<button class="btn btn-light ml-sm-2" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
<button class="btn btn-light ml-sm-2" type="button">Edit</button>
<button class="btn btn-light ml-sm-2" type="button" data-toggle="modal" data-target="#newBookmarkModal">Add</button>
</form>
</div>
</nav>
<div id="wrapper" class="container">
<div id="cardList" class="card-columns">
</div>
</div>
<div id="newBookmarkModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Bookmark</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="newBookmarkName">Name</label>
<input id="newBookmarkName" type="text" class="form-control">
</div>
<div class="form-group">
<label for="newBookmarkURL">Address</label>
<input id="newBookmarkURL" type="url" class="form-control">
</div>
<div class="form-group">
<label for="newBookmarkGroup">Group</label>
<select id="newBookmarkGroup" name="Group" class="form-control" onchange="selectGroupChanged(this.value)">
<option value="-">New Group</option>
</select>
</div>
<div id="createGroup" class="form-group newGroup">
<label for="newBookMarkGroupNew">New Group</label>
<input id="newBookMarkGroupNew" type="text" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="importExportModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Import/Export</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exportText">Export</label>
<textarea id="exportText" class="form-control" rows="4"></textarea>
</div>
<div class="form-group">
<label for="importText">Import</label>
<textarea id="importText" class="form-control" rows="4"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnImport" class="btn btn-primary">Import</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">About</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>
<a href="https://github.com/NeilBrommer/NewTabPage">Project on GitHub</a>
</p>
<p>
This page keeps a list of bookmarks separated into groups. It's intended to be used a a new tab page.
</p>
<p>
It uses localStorage to store the list of bookmarks rather than storing them server side.
</p>
<p>
The format for the import/export JSON is:
</p>
<pre>
[
{
"title": "Group title",
"bookmarks": [
{
"name": "Bookmark 1",
"address": "http://example.com"
},
{
"name": "Bookmark 2",
"address": "http://example.net"
}
]
},
{
"title": "Group 2",
"bookmarks": [
{
"name": "Bookmark 3",
"address": "http://example.org"
}
]
}
]
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>