Update about dialog

.gitignore

@@ -3,3 +3,5 @@ lib/
 img/
 
 bookmarkList\.json
+
+.vscode/

index.html

@@ -121,50 +121,43 @@
 					</button>
 				</div>
 				<div class="modal-body">
-					<p>
+					<ul class="nav nav-tabs" id="tabContent">
-						<a href="https://github.com/NeilBrommer/NewTabPage">Project on GitHub</a>
+						<li class="nav-item">
-					</p>
+							<a id="aboutTab" class="nav-link active" href="#aboutTabContent" data-toggle="tab">General</a>
-					<p>
+						</li>
-						This page keeps a list of bookmarks separated into groups. It's intended to be used a a new tab page.
+						<li class="nav-item">
-						It uses IndexedDB to store the list of bookmarks in the browser rather than storing them server side.
+							<a id="attribTab" class="nav-link" href="#attribTabContent" data-toggle="tab">Attribution</a>
-					</p>
+						</li>
-					<p>
+					</ul>
-						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.
+					<div class="tab-content mt-3">
-					</p>
+						<div id="aboutTabContent" class="tab-pane fade show active">
-					<p>
+							<p>
-						This site uses <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>,
+								<a href="https://github.com/NeilBrommer/NewTabPage">This project on GitHub</a>
-						<a href="https://jquery.com/" target="_blank">JQuery</a>, and
+							</p>
-						<a href="http://fontawesome.io/">Font Awesome</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>
+								It uses IndexedDB to store the list of bookmarks in the browser rather than storing them server side.
-						Editing bookmarks is currently not supported. To move bookmarks, you need to use the
+							</p>
-						import/export function and manually edit the JSON data. The format for this is:
+						</div>
-					</p>
+
-					<pre class="rounded border"><code>[
+						<div id="attribTabContent" class="tab-pane fade">
-	{
+							<p>
-		"title": "Group title",
+								This site uses Danny Care's <a href="https://danny.care/portfolio/bitday/" target="_blank">Bitday</a>
-		"bookmarks": [
+								wallpapers. The background changes based on the time of day.
-			{
+							</p>
-				"name": "Bookmark 1",
+							<h3>Libraries</h3>
-				"address": "http://example.com"
+							<p>
-			},
+								<a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
-			{
+							</p>
-				"name": "Bookmark 2",
+							<p>
-				"address": "http://example.net"
+								<a href="https://jquery.com/" target="_blank">JQuery</a>
-			}
+							</p>
-		]
+							<p>
-	},
+								<a href="http://fontawesome.io/">Font Awesome</a>
-	{
+							</p>
-		"title": "Group 2",
+						</div>
-		"bookmarks": [
+					</div>
-			{
-				"name": "Bookmark 3",
-				"address": "http://example.org"
-			}
-		]
-	}
-]</code></pre>
 				</div>
 				<div class="modal-footer">
 					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>