CodeMirror/ArchiveBox
1
0
Fork 0
mirror of synced 2024-07-02 04:50:47 +12:00
Code Issues Projects Releases Wiki Activity
ArchiveBox/archivebox/templates/index.html

197 lines
6.6 KiB
HTML
Raw Normal View History

initial commiit
2017-05-05 21:00:30 +12:00
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Archived Sites</title>
<style>
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
html, body {
initial commiit
2017-05-05 21:00:30 +12:00
width: 100%;
height: 100%;
add status column and tweak index css
2018-04-17 23:01:09 +12:00
font-size: 18px;
initial commiit
2017-05-05 21:00:30 +12:00
font-weight: 200;
text-align: center;
margin: 0px;
padding: 0px;
font-family: "Gill Sans", Helvetica, sans-serif;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
header {
initial commiit
2017-05-05 21:00:30 +12:00
background-color: #aa1e55;
tweak index visual header style
2019-02-05 15:45:36 +13:00
color: #1a1a1a;
initial commiit
2017-05-05 21:00:30 +12:00
padding: 10px;
add status column and tweak index css
2018-04-17 23:01:09 +12:00
padding-top: 0px;
padding-bottom: 15px;
tweak index visual header style
2019-02-05 15:45:36 +13:00
/*height: 40px;*/
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
header h1 {
tweak index visual header style
2019-02-05 15:45:36 +13:00
margin: 7px 0px;
font-size: 35px;
initial commiit
2017-05-05 21:00:30 +12:00
font-weight: 300;
tweak index visual header style
2019-02-05 15:45:36 +13:00
color: #1a1a1a;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
tweak index visual header style
2019-02-05 15:45:36 +13:00
header h1 img {
height: 44px;
vertical-align: bottom;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
tweak index visual header style
2019-02-05 15:45:36 +13:00
header a {
text-decoration: none !important;
color: #1a1a1a;
fixes #61, fixes #40 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.
2018-12-02 11:15:26 +13:00
}
show footer info and refresh button
2018-04-18 01:14:01 +12:00
.header-center {
tweak index visual header style
2019-02-05 15:45:36 +13:00
margin: auto;
float: none;
show footer info and refresh button
2018-04-18 01:14:01 +12:00
text-align: center;
tweak index visual header style
2019-02-05 15:45:36 +13:00
padding-top: 6px;
}
.header-center small {
color: #eaeaea;
opacity: 0.7;
show footer info and refresh button
2018-04-18 01:14:01 +12:00
}
tweak index columns and footer links
2018-06-18 10:32:42 +12:00
.header-left {
float: left;
tweak index visual header style
2019-02-05 15:45:36 +13:00
}
.header-right {
float: right;
padding-top: 17px;
padding-right: 10px;
}
header + div {
margin-top: 10px;
add status column and tweak index css
2018-04-17 23:01:09 +12:00
}
fixes #61, fixes #40 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.
2018-12-02 11:15:26 +13:00
#table-bookmarks_length, #table-bookmarks_filter {
padding: 0px 15px;
}
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
table {
initial commiit
2017-05-05 21:00:30 +12:00
padding: 6px;
width: 100%;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
table thead th {
initial commiit
2017-05-05 21:00:30 +12:00
font-weight: 400;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
add dom preview to link index, fix responsiveness
2018-06-11 11:11:06 +12:00
table tr {
height: 35px;
}
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
tbody tr:nth-child(odd) {
fixes #61, fixes #40 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.
2018-12-02 11:15:26 +13:00
background-color: #ffebeb !important;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
table tr td {
initial commiit
2017-05-05 21:00:30 +12:00
white-space: nowrap;
overflow: hidden;
add dom preview to link index, fix responsiveness
2018-06-11 11:11:06 +12:00
/*padding-bottom: 0.4em;*/
/*padding-top: 0.4em;*/
initial commiit
2017-05-05 21:00:30 +12:00
padding-left: 2px;
add dom preview to link index, fix responsiveness
2018-06-11 11:11:06 +12:00
text-align: center;
}
table tr td a {
text-decoration: none;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
add status column and tweak index css
2018-04-17 23:01:09 +12:00
table tr td img, table tr td object {
display: inline-block;
margin: auto;
initial commiit
2017-05-05 21:00:30 +12:00
height: 24px;
add status column and tweak index css
2018-04-17 23:01:09 +12:00
width: 24px;
initial commiit
2017-05-05 21:00:30 +12:00
padding: 0px;
padding-right: 5px;
add status column and tweak index css
2018-04-17 23:01:09 +12:00
vertical-align: middle;
margin-left: 4px;
Use template strings for substitution in HTML output `str.format()` can only use substitutions identified by braces (`{` and `}`). This has the potential to conflict with other code in the HTML template, such as CSS or JavaScript. Template strings can use substitutions identified by `$` or `${}`, e.g.: `$identifier` or `${identifier}`. These substitutions won't conflict with CSS or JavaScript, allowing users to write HTML templates that don't require double braces anywhere there's a substitution conflict. This is especially useful when one is using a build tool to generate the final CSS/JavaScript/HTML. https://docs.python.org/3/library/string.html#template-strings
2017-07-05 21:59:09 +12:00
}
fixes #61, fixes #40 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.
2018-12-02 11:15:26 +13:00
#table-bookmarks {
width: 100%;
overflow-y: scroll;
table-layout: fixed;
}
better UX before titles have been fetched during archiving progress
2019-03-20 11:09:46 +13:00
table tr a span[data-archived~=False] {
better favicon loading
2019-03-20 21:30:00 +13:00
opacity: 0.4;
better UX before titles have been fetched during archiving progress
2019-03-20 11:09:46 +13:00
}
.files-spinner {
height: 15px;
width: auto;
opacity: 0.5;
vertical-align: -2px;
}
.in-progress {
display: none;
}
body[data-status~=finished] .files-spinner {
display: none;
}
dont show in progresss message or regen index on exit
2019-03-20 19:36:55 +13:00
/*body[data-status~=running] .in-progress {
better UX before titles have been fetched during archiving progress
2019-03-20 11:09:46 +13:00
display: inline-block;
dont show in progresss message or regen index on exit
2019-03-20 19:36:55 +13:00
}*/
move js to head and optimize for loading speed
2019-03-20 21:30:28 +13:00
tr td a.favicon img {
padding-left: 6px;
padding-right: 12px;
vertical-align: -4px;
}
tr td a.title {
font-size: 1.4em;
text-decoration:none;
color:black;
}
tr td a.title small {
background-color: #efefef;
border-radius: 4px;
float:right
}
initial commiit
2017-05-05 21:00:30 +12:00
</style>
move js to head and optimize for loading speed
2019-03-20 21:30:28 +13:00
<link rel="stylesheet" href="static/jquery.dataTables.min.css"/>
<script src="static/jquery.min.js"></script>
<script src="static/jquery.dataTables.min.js"></script>
<script>
document.addEventListener('error', function(e) {
e.target.style.opacity = 0;
}, true)
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
order: [[0, 'desc']],
iDisplayLength: 100,
});
});
</script>
initial commiit
2017-05-05 21:00:30 +12:00
</head>
re-save index on Ctrl+c to hide in progress message on html output
2019-03-20 11:08:42 +13:00
<body data-status="$status">
initial commiit
2017-05-05 21:00:30 +12:00
<header>
tweak index visual header style
2019-02-05 15:45:36 +13:00
<div class="header-right">
<a href="https://github.com/pirate/ArchiveBox/wiki">Documentation</a> &nbsp; | &nbsp;
<a href="https://github.com/pirate/ArchiveBox">Source</a> &nbsp; | &nbsp;
<a href="https://archivebox.io">Website</a>
</div>
tweak index columns and footer links
2018-06-18 10:32:42 +12:00
<div class="header-left">
show footer info and refresh button
2018-04-18 01:14:01 +12:00
<a href="?" title="Reload...">
tweak index visual header style
2019-02-05 15:45:36 +13:00
<h1><img src="static/archive.png"/> ArchiveBox: Index</h1>
add status column and tweak index css
2018-04-17 23:01:09 +12:00
</a>
</div>
show footer info and refresh button
2018-04-18 01:14:01 +12:00
<div class="header-center">
dont show in progresss message or regen index on exit
2019-03-20 19:36:55 +13:00
Archived Sites
<!--<span class="in-progress">(Currently Updating)</span>-->
<br/>
tweak index visual header style
2019-02-05 15:45:36 +13:00
<small>Last updated $time_updated</small>
add status column and tweak index css
2018-04-17 23:01:09 +12:00
</div>
initial commiit
2017-05-05 21:00:30 +12:00
</header>
fixes #61, fixes #40 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.
2018-12-02 11:15:26 +13:00
<table id="table-bookmarks">
initial commiit
2017-05-05 21:00:30 +12:00
<thead>
<tr>
flip collapse and return to archive buttons
2018-06-18 10:16:12 +12:00
<th style="width: 80px;">Bookmarked</th>
tweak index columns and footer links
2018-06-18 10:32:42 +12:00
<th style="width: 26vw;">Saved Link ($num_links)</th>
minor ui tweaks
2019-03-20 19:57:06 +13:00
<th style="width: 50px">Files</th>
tweak index columns and footer links
2018-06-18 10:32:42 +12:00
<th style="width: 16vw;whitespace:nowrap;overflow-x:hidden;">Original URL</th>
initial commiit
2017-05-05 21:00:30 +12:00
</tr>
</thead>
Use `$identifier` over `${identifier}` `${identifier}` has the potential to conflict with JavaScript template literals.
2017-07-05 22:22:11 +12:00
<tbody>$rows</tbody>
initial commiit
2017-05-05 21:00:30 +12:00
</table>
show footer info and refresh button
2018-04-18 01:14:01 +12:00
<footer>
<br/>
<center>
<small>
Propagate the new name of the project Replace all occurences of bookmark archiver with ArchiveBox. See #108
2018-12-21 02:13:50 +13:00
Archive created using <a href="https://github.com/pirate/ArchiveBox" title="Github">ArchiveBox</a>
version <a href="https://github.com/pirate/ArchiveBox/commit/$git_sha" title="Git commit">$short_git_sha</a> &nbsp; | &nbsp;
tweak index columns and footer links
2018-06-18 10:32:42 +12:00
Download index as <a href="index.json" title="JSON summary of archived links.">JSON</a>
show footer info and refresh button
2018-04-18 01:14:01 +12:00
<br/><br/>
$footer_info
</small>
</center>
<br/>
</footer>
initial commiit
2017-05-05 21:00:30 +12:00
</body>
</html>
Reference in a new issue Copy permalink