mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2024-09-21 00:18:50 -04:00
208501e576
The table has advanced features now. One can filter over all columns, sort all columns asc/desc and paginate the table. The state (filtered result, current page, sorting order and number of entries shown) will be saved in localStorage so the user can open the page in another window or tab and see the same output again.
167 lines
5.7 KiB
HTML
167 lines
5.7 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>Archived Sites</title>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
font-weight: 200;
|
|
text-align: center;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-family: "Gill Sans", Helvetica, sans-serif;
|
|
}
|
|
header {
|
|
background-color: #aa1e55;
|
|
color: white;
|
|
padding: 10px;
|
|
padding-top: 0px;
|
|
padding-bottom: 15px;
|
|
height: 100px;
|
|
}
|
|
header h1 {
|
|
font-size: 38px;
|
|
font-weight: 300;
|
|
color: black;
|
|
padding-top: 14px;
|
|
line-height: 1.4;
|
|
width: 100%;
|
|
}
|
|
header h1 small {
|
|
color: white;
|
|
font-size:0.45em;
|
|
margin-left: 10px;
|
|
display: block;
|
|
}
|
|
header h1 small a {
|
|
text-decoration: none;
|
|
color: orange;
|
|
opacity: 0.6;
|
|
font-weight: 300;
|
|
}
|
|
header h1 small a:hover {
|
|
opacity: 1;
|
|
}
|
|
header + div {
|
|
margin-top: 10px;
|
|
}
|
|
.header-center {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.header-left {
|
|
float: left;
|
|
width: 50px;
|
|
height: 60px;
|
|
text-align: center;
|
|
padding: 20px;
|
|
margin-right: -70px;
|
|
}
|
|
#table-bookmarks_length, #table-bookmarks_filter {
|
|
padding: 0px 15px;
|
|
}
|
|
table {
|
|
padding: 6px;
|
|
width: 100%;
|
|
}
|
|
table thead th {
|
|
font-weight: 400;
|
|
}
|
|
table tr {
|
|
height: 35px;
|
|
}
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #ffebeb !important;
|
|
}
|
|
table tr td {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
/*padding-bottom: 0.4em;*/
|
|
/*padding-top: 0.4em;*/
|
|
padding-left: 2px;
|
|
text-align: center;
|
|
}
|
|
table tr td a {
|
|
text-decoration: none;
|
|
}
|
|
table tr td img, table tr td object {
|
|
display: inline-block;
|
|
margin: auto;
|
|
height: 24px;
|
|
width: 24px;
|
|
padding: 0px;
|
|
padding-right: 5px;
|
|
vertical-align: middle;
|
|
margin-left: 4px;
|
|
}
|
|
#table-bookmarks {
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
table-layout: fixed;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-left">
|
|
<a href="?" title="Reload...">
|
|
<img src="static/archive.png" style="height: 100%;"/>
|
|
</a>
|
|
<br/>
|
|
<a href="https://github.com/pirate/bookmark-archiver">
|
|
Github
|
|
</a>
|
|
</div>
|
|
<div class="header-center">
|
|
<h1>
|
|
Archived Sites
|
|
<br/>
|
|
<small>
|
|
<a href="?">Last updated $time_updated</a><br/>
|
|
</small>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<table id="table-bookmarks">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 80px;">Bookmarked</th>
|
|
<th style="width: 26px;">Files</th>
|
|
<th style="width: 26vw;">Saved Link ($num_links)</th>
|
|
<th style="width: 30px;">PNG</th>
|
|
<th style="width: 30px">PDF</th>
|
|
<th style="width: 30px">HTML</th>
|
|
<th style="width: 30px">A.org</th>
|
|
<th style="width: 16vw;whitespace:nowrap;overflow-x:hidden;">Original URL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>$rows</tbody>
|
|
</table>
|
|
<footer>
|
|
<br/>
|
|
<center>
|
|
<small>
|
|
Archive created using <a href="https://github.com/pirate/bookmark-archiver" title="Github">Bookmark Archiver</a>
|
|
version <a href="https://github.com/pirate/bookmark-archiver/commit/$git_sha" title="Git commit">$short_git_sha</a> |
|
|
Download index as <a href="index.json" title="JSON summary of archived links.">JSON</a>
|
|
<br/><br/>
|
|
$footer_info
|
|
</small>
|
|
</center>
|
|
<br/>
|
|
</footer>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
|
|
<script>
|
|
jQuery(document).ready(function() {
|
|
jQuery('#table-bookmarks').DataTable({
|
|
stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
|
|
dom: '<lf<t>ip>' // how to show the table and its helpers (filter, etc) in the DOM
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|