54 lines
1.8 KiB
HTML
54 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Shelf</title>
|
||
<link rel="stylesheet" href="newtab.css" />
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="masthead">
|
||
<div class="masthead-title">
|
||
<span class="mark" aria-hidden="true">🔖</span>
|
||
<h1>Shelf</h1>
|
||
</div>
|
||
<p class="tally"><span id="unreadCount">0</span> saved for later<span id="archivedNote"></span></p>
|
||
</header>
|
||
|
||
<div class="toolbar">
|
||
<input id="search" type="text" placeholder="Search your shelf…" autocomplete="off" />
|
||
|
||
<div class="control-group" role="group" aria-label="Sort by">
|
||
<label for="sortSelect" class="sr-only">Sort by</label>
|
||
<select id="sortSelect">
|
||
<option value="newest">Newest first</option>
|
||
<option value="oldest">Oldest first</option>
|
||
<option value="title">Title, A–Z</option>
|
||
<option value="domain">Site, A–Z</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="control-group view-toggle" role="group" aria-label="View">
|
||
<button id="viewGridBtn" class="toggle-btn" data-view="grid" title="Grid view" aria-pressed="false">▦</button>
|
||
<button id="viewListBtn" class="toggle-btn" data-view="list" title="List view" aria-pressed="false">☰</button>
|
||
</div>
|
||
|
||
<button id="showArchivedBtn" class="ghost-btn">Show archived</button>
|
||
</div>
|
||
|
||
<main id="shelf" class="shelf" data-view="grid">
|
||
<!-- items injected here -->
|
||
</main>
|
||
|
||
<div id="emptyState" class="empty-state" hidden>
|
||
<p class="empty-title">Your shelf is empty.</p>
|
||
<p class="empty-sub">Click the Shelf icon in your toolbar, or right-click any page or link, to save something for later.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toast" class="toast" hidden></div>
|
||
|
||
<script src="newtab.js"></script>
|
||
</body>
|
||
</html>
|