184 lines
6.3 KiB
HTML
184 lines
6.3 KiB
HTML
<!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>Start</title>
|
|
|
|
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
|
|
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css" /> <!-- Font Awesome -->
|
|
<link href="main.css" rel="stylesheet"> <!-- Custom styles -->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-dark bg-dark">
|
|
<span class="navbar-brand"></span>
|
|
<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">
|
|
<form class="form-inline">
|
|
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal">About</button>
|
|
<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal">Import/Export</button>
|
|
<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
|
|
<button class="btn btn-light mr-2 my-1 my-sm-0" 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">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="addBookmarkForm">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="newBookmarkName">Name</label>
|
|
<input id="newBookmarkName" type="text" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newBookmarkURL">Address</label>
|
|
<input id="newBookmarkURL" type="url" class="form-control" required>
|
|
</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="submit" class="btn btn-primary">Add</button>
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</form>
|
|
</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">×</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 modal-lg" 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">×</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.
|
|
It uses localStorage to store the list of bookmarks rather than storing them server side.
|
|
</p>
|
|
<p>
|
|
This site uses Danny Care's <a href="https://danny.care/portfolio/bitday/" target="_blank">Bitday</a>
|
|
wallpapers. The background changes based on the time of day.
|
|
</p>
|
|
<p>
|
|
This site uses <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>,
|
|
<a href="https://jquery.com/" target="_blank">JQuery</a>, and
|
|
<a href="http://fontawesome.io/">Font Awesome</a>.
|
|
</p>
|
|
<p>
|
|
Adding/editing bookmarks and groups is currently not implemented. To add or edit them, you need to use
|
|
the import/export feature and manually build a JSON object yourself. 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>
|