<!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="Start - A new tab page"> <meta name="author" content="Neil Brommer"> <link rel="icon" href="/favicon.png"> <title>Start</title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <!-- Bootstrap core CSS --> <link href="main.css" rel="stylesheet" type="text/css"> <!-- Custom styles --> <!-- font awesome --> <script defer src="/lib/fontawesome/svg-with-js/js/fa-brands.js"></script> <script defer src="/lib/fontawesome/svg-with-js/js/fa-regular.js"></script> <script defer src="/lib/fontawesome/svg-with-js/js/fa-solid.js"></script> <script src="/lib/fontawesome/svg-with-js/js/fontawesome.js"></script> </head> <body> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand"></span> <button class="btn btn-light 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"><span class="fas fa-question-circle"></span> About</button> <button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal"><span class="fas fa-exchange-alt" data-fa-transform="rotate-90"></span> 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"><span class="fas fa-plus-circle"></span> 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 IndexedDB to store the list of bookmarks in the browser 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> Editing bookmarks is currently not supported. To move, change, or delete bookmarks, you need to use the import/export function and manually edit the JSON data. The format for this is: </p> <pre class="rounded border"><code>[ { "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" } ] } ]</code></pre> <p> To remove all bookmarks, just import <code>[]</code> (an empty list). </p> </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="lib/jquery-3.2.1.min.js"></script> <script src="lib/popper.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="js/main.js"></script> <script src="js/loadBookmarks.js"></script> <script src="js/addBookmarks.js"></script> <script src="js/editBookmarks.js"></script> <script src="js/importExport.js"></script> </body> </html>