NewTabPage/index.html

188 lines
7.3 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
2017-12-12 23:18:39 +00:00
<meta name="description" content="Start - A new tab page">
<meta name="author" content="Neil Brommer">
2017-12-12 23:18:39 +00:00
<link rel="icon" href="/favicon.png">
<title>Start</title>
2017-12-12 23:15:39 +00:00
<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">
2017-12-10 05:19:34 +00:00
<span class="navbar-brand"></span>
<button class="btn btn-light navbar-toggler toggler-bg-light" 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 id="btnAbout" 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 id="btnImport" 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-pencil-alt"></span> Edit</button>
<button id="btnAdd" 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">&times;</span>
</button>
</div>
2017-12-12 01:40:07 +00:00
<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>
2017-12-12 01:40:07 +00:00
</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>
2017-12-12 01:40:07 +00:00
<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>
2017-12-12 01:40:07 +00:00
</form>
</div>
</div>
</div>
<div id="importExportModal" 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">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>
<a id="copyExport" href="#" class="text-muted float-right"><small id="copyExportTxt">Copy</small></a>
<textarea id="exportText" class="form-control" rows="8" readonly="readonly"></textarea>
</div>
<div class="form-group">
<label for="importText">Import</label>
<textarea id="importText" class="form-control" rows="8" placeholder="Paste here"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnImportDialog" 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">&times;</span>
</button>
</div>
<div class="modal-body">
2017-12-31 04:02:14 +00:00
<ul class="nav nav-tabs" id="tabContent">
<li class="nav-item">
<a id="aboutTab" class="nav-link active" href="#aboutTabContent" data-toggle="tab">General</a>
</li>
<li class="nav-item">
<a id="attribTab" class="nav-link" href="#attribTabContent" data-toggle="tab">Attribution</a>
</li>
</ul>
<div class="tab-content mt-3">
<div id="aboutTabContent" class="tab-pane fade show active">
<p>
<a href="https://github.com/NeilBrommer/NewTabPage">This 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>
</div>
<div id="attribTabContent" class="tab-pane fade">
<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>
<h3>Libraries</h3>
<p>
<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
</p>
<p>
<a href="https://jquery.com/" target="_blank">JQuery</a>
</p>
<p>
<a href="http://fontawesome.io/">Font Awesome</a>
</p>
</div>
</div>
</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 -->
2017-12-13 20:08:09 +00:00
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/popper/popper.js"></script>
2017-12-12 23:15:39 +00:00
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
2017-12-13 20:08:09 +00:00
<script src="lib/sortable/jquery.fn.sortable.js"></script>
<script src="js/main.js"></script>
<script src="js/loadBookmarks.js"></script>
<script src="js/addBookmarks.js"></script>
2018-01-09 17:06:35 +00:00
<script src="js/moveBookmarks.js"></script>
<script src="js/deleteBookmarks.js"></script>
<script src="js/editBookmarks.js"></script>
<script src="js/importExport.js"></script>
</body>
</html>