mirror of
https://github.com/ArchiveBox/ArchiveBox.git
synced 2026-04-06 07:47:53 +10:00
1327 lines
55 KiB
HTML
1327 lines
55 KiB
HTML
{% load static tz core_tags %}
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{{title}}</title>
|
|
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
/* Keep this inline, don't move to external css file because this template is used to generate static exports that need to be usable as-is without an accompanying staticfiles dir */
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ddd;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
|
|
a { color: inherit; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.container-fluid { width: 100%; margin: 0 auto; padding: 0 12px; }
|
|
.row { display: flex; flex-wrap: wrap; width: 100%; margin: 0; }
|
|
.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
|
|
.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
|
|
.col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
|
|
.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
|
|
.badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 1.2; }
|
|
.badge-default { background: rgba(255,255,255,0.2); color: #f6f6f6; }
|
|
.badge-info { background: #dbe7ff; color: #2b4aa0; }
|
|
.badge-success { background: #d4edda; color: #1e7e34; }
|
|
.badge-warning { background: #fff3cd; color: #856404; }
|
|
.badge-danger { background: #f8d7da; color: #721c24; }
|
|
.alert { padding: 6px 10px; border-radius: 6px; background: #f5f5f5; color: #333; }
|
|
header {
|
|
background-color: #aa1e55;
|
|
}
|
|
small {
|
|
font-weight: 200;
|
|
}
|
|
header a:hover {
|
|
text-decoration: none;
|
|
}
|
|
.header-top {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 40px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
color: #f6f6f6;
|
|
font-size: calc(10px + 0.44vw);
|
|
font-weight: 200;
|
|
padding: 3px 4px;
|
|
background-color: #aa1e55;
|
|
}
|
|
.header-top .header-nav {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto auto;
|
|
align-items: start;
|
|
gap: 16px;
|
|
width: 100%;
|
|
}
|
|
.header-top .header-col {
|
|
min-height: 30px;
|
|
line-height: 1.2;
|
|
min-width: 0;
|
|
}
|
|
.header-top .header-left {
|
|
white-space: nowrap;
|
|
}
|
|
.header-top .header-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.header-top .header-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
.header-top .header-right {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
padding-right: 10px;
|
|
}
|
|
.header-right .header-date {
|
|
text-align: center;
|
|
}
|
|
.snapshot-variants {
|
|
position: relative;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
.snapshot-variants summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
color: #f6f6f6 !important;
|
|
}
|
|
.snapshot-variants summary:hover {
|
|
color: #f6f6f6 !important;
|
|
}
|
|
.header-top .snapshot-variants summary {
|
|
color: #f6f6f6 !important;
|
|
}
|
|
.snapshot-variants summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.snapshot-variants-list {
|
|
position: absolute;
|
|
right: 0;
|
|
top: calc(100% + 6px);
|
|
background: rgba(18, 18, 18, 0.95);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
border-radius: 8px;
|
|
min-width: 260px;
|
|
max-width: 420px;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
|
z-index: 50;
|
|
padding: 6px;
|
|
}
|
|
.snapshot-variants-list a {
|
|
display: block;
|
|
padding: 6px 8px;
|
|
color: #f6f6f6;
|
|
font-size: 12px;
|
|
line-height: 1.3;
|
|
border-radius: 6px;
|
|
}
|
|
.snapshot-variants-list a:hover {
|
|
background: rgba(255,255,255,0.08);
|
|
color: #fff;
|
|
}
|
|
.header-top .snapshot-variants-list a {
|
|
color: #f6f6f6 !important;
|
|
}
|
|
.header-top .snapshot-variants-list a:hover {
|
|
color: #fff !important;
|
|
}
|
|
.year-variants summary {
|
|
list-style: none;
|
|
cursor: pointer;
|
|
}
|
|
.year-variants summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
.header-top .header-url {
|
|
width: 100%;
|
|
background-color: rgb(216, 216, 235, 0.05);
|
|
text-align: left;
|
|
line-height: 1.3;
|
|
font-family: monospace;
|
|
font-weight: 200;
|
|
margin-top: 0;
|
|
font-size: 23px;
|
|
opacity: 0.8;
|
|
border-radius: 0px 0px 8px 8px;
|
|
}
|
|
.header-top .header-url a.header-url-text {
|
|
display: block;
|
|
color: #f6f6f6;
|
|
user-select: all;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 2px 10px;
|
|
}
|
|
.header-top .header-url a.header-url-text:hover {
|
|
color: rgb(144, 161, 255);
|
|
}
|
|
.header-top a {
|
|
text-decoration: none;
|
|
color: rgba(0,0,0,0.6);
|
|
}
|
|
.header-top a:hover {
|
|
text-decoration: none;
|
|
color: rgba(0,0,0,0.9);
|
|
}
|
|
.header-title-line {
|
|
color: rgba(0,0,0,0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
.header-title-text {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
.header-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
}
|
|
.header-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.header-year-badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 4px;
|
|
}
|
|
.header-top .favicon {
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 30px;
|
|
max-height: 30px;
|
|
vertical-align: -4px;
|
|
margin-right: 6px;
|
|
object-fit: contain;
|
|
border-radius: 3px;
|
|
background: rgba(255,255,255,0.08);
|
|
}
|
|
.header-top .col-lg-4 {
|
|
text-align: center;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
.header-archivebox img {
|
|
display: inline-block;
|
|
margin-right: 3px;
|
|
height: 30px;
|
|
margin-left: 12px;
|
|
margin-top: -4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.header-archivebox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
.header-right .header-date {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
.header-archivebox img:hover {
|
|
opacity: 0.5;
|
|
}
|
|
header small code {
|
|
white-space: nowrap;
|
|
font-weight: 200;
|
|
display: block;
|
|
margin-top: -1px;
|
|
font-size: 13px;
|
|
opacity: 0.8;
|
|
user-select: all;
|
|
}
|
|
.header-toggle {
|
|
line-height: 12px;
|
|
font-size: 70px;
|
|
vertical-align: -12px;
|
|
margin-left: 4px;
|
|
}
|
|
@media(max-width: 900px) {
|
|
.header-top .header-nav {
|
|
grid-template-columns: 1fr;
|
|
gap: 8px;
|
|
}
|
|
.header-top .header-left,
|
|
.header-top .header-main,
|
|
.header-top .header-meta,
|
|
.header-top .header-right {
|
|
width: 100%;
|
|
text-align: left;
|
|
align-items: flex-start;
|
|
}
|
|
.header-archivebox img {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media(max-width: 600px) {
|
|
.header-top {
|
|
font-size: 14px;
|
|
}
|
|
.header-top .header-url {
|
|
font-size: 16px;
|
|
}
|
|
.header-title-text,
|
|
.header-top .header-url a.header-url-text {
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.header-badges,
|
|
.header-tags,
|
|
.header-year-badges {
|
|
justify-content: flex-start;
|
|
}
|
|
.header-toggle {
|
|
font-size: 46px;
|
|
vertical-align: -6px;
|
|
}
|
|
}
|
|
|
|
.info-row {
|
|
margin-top: 2px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.info-row .alert {
|
|
margin-bottom: 0px;
|
|
}
|
|
.row.header-bottom {
|
|
margin-left: -10px;
|
|
margin-right: -10px;
|
|
}
|
|
.header-bottom .col-lg-2 {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.header-bottom-frames .card {
|
|
box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 6px;
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
border-radius: 10px;
|
|
background-color: #efefef;
|
|
overflow: hidden;
|
|
min-height: 130px;
|
|
}
|
|
.header-bottom-frames .card:has([data-compact]) {
|
|
min-height: 0;
|
|
}
|
|
.card h4 {
|
|
font-size: 0.8em;
|
|
display: inline-block;
|
|
width: auto;
|
|
text-transform: uppercase;
|
|
margin-top: 0px;
|
|
margin-bottom: 5px;
|
|
color: #222;
|
|
}
|
|
.card-body {
|
|
font-size: 14px;
|
|
padding: 4px 10px;
|
|
padding-bottom: 0px;
|
|
/* padding-left: 3px; */
|
|
/* padding-right: 3px; */
|
|
/* padding-bottom: 3px; */
|
|
line-height: 1;
|
|
word-wrap: break-word;
|
|
max-height: 102px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #222;
|
|
background-color: #f6f6f6;
|
|
}
|
|
.card-title {
|
|
margin-bottom: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
.card-img-top {
|
|
border: 0px;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
opacity: 0.8;
|
|
border-top: 1px solid rgba(0,0,0,0);
|
|
border-radius: 4px;
|
|
border-bottom: 1px solid rgba(0,0,0,0);
|
|
height: 430px;
|
|
width: 405%;
|
|
margin-bottom: -330px;
|
|
background-color: #333;
|
|
margin-left: -1%;
|
|
margin-right: -1%;
|
|
pointer-events: none;
|
|
|
|
transform: scale(0.25);
|
|
transform-origin: 0 0;
|
|
}
|
|
#main-frame {
|
|
border-top: 1px solid #ddd;
|
|
width: 100%;
|
|
height: calc(100vh - 210px);
|
|
margin: 0px;
|
|
border: 0px;
|
|
border-top: 3px solid #aa1e55;
|
|
}
|
|
#main-frame-wrapper {
|
|
width: 100%;
|
|
height: calc(100vh - 210px);
|
|
border-top: 3px solid #aa1e55;
|
|
overflow: hidden;
|
|
}
|
|
#main-frame-wrapper iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
.full-page-wrapper {
|
|
width: 100%;
|
|
height: calc(100vh - 210px);
|
|
}
|
|
.thumbnail-wrapper {
|
|
height: 100px;
|
|
overflow: hidden;
|
|
background-color: #333;
|
|
pointer-events: none;
|
|
}
|
|
.thumbnail-wrapper.compact {
|
|
height: 32px;
|
|
background-color: #111;
|
|
}
|
|
.thumbnail-wrapper iframe {
|
|
width: 405%;
|
|
height: 430px;
|
|
margin-bottom: -330px;
|
|
margin-left: -1%;
|
|
transform: scale(0.25);
|
|
transform-origin: 0 0;
|
|
border: none;
|
|
}
|
|
.thumbnail-wrapper img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
}
|
|
.thumbnail-compact {
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 8px;
|
|
font-size: 13px;
|
|
line-height: 1;
|
|
color: #bdbdbd;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.thumbnail-compact-label {
|
|
color: #e1e1e1;
|
|
}
|
|
.thumbnail-compact-meta {
|
|
color: #777;
|
|
font-size: 11px;
|
|
margin-left: auto;
|
|
}
|
|
.thumbnail-compact svg,
|
|
.thumbnail-compact img {
|
|
height: 12px;
|
|
width: 12px;
|
|
}
|
|
.thumbnail-text {
|
|
height: 100px;
|
|
background: #121212;
|
|
color: #d8d8d8;
|
|
padding: 6px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
}
|
|
.thumbnail-text-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 10px;
|
|
color: #9b9b9b;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.thumbnail-text-pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 5;
|
|
}
|
|
.thumbnail-text[data-plugin="title"] .thumbnail-text-pre {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
.card.selected-card {
|
|
border: 2px solid orange;
|
|
box-shadow: 0px -6px 13px 1px rgba(0,0,0,0.05);
|
|
}
|
|
.thumb-compact .card-body {
|
|
display: block;
|
|
padding: 4px 8px;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
max-height: none;
|
|
}
|
|
.thumb-compact {
|
|
margin-bottom: 0px;
|
|
border-radius: 6px;
|
|
}
|
|
.thumb-compact .thumbnail-wrapper {
|
|
height: 32px;
|
|
}
|
|
.thumb-compact .thumbnail-compact,
|
|
.thumb-compact .thumbnail-text {
|
|
height: 32px;
|
|
max-height: 32px;
|
|
}
|
|
.iframe-large {
|
|
height: calc(100vh - 70px);
|
|
}
|
|
.preview-hidden {
|
|
display: none !important;
|
|
}
|
|
img.external {
|
|
height: 30px;
|
|
margin-right: -10px;
|
|
padding: 3px;
|
|
border-radius: 4px;
|
|
vertical-align: middle;
|
|
border: 4px solid rgba(0,0,0,0);
|
|
}
|
|
img.external:hover {
|
|
border: 4px solid green;
|
|
}
|
|
.screenshot {
|
|
background-color: #333;
|
|
transform: scale(1.05);
|
|
transform-origin: top center;
|
|
width: 100%;
|
|
min-height: 100px;
|
|
max-height: 100px;
|
|
margin-bottom: 0px;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
}
|
|
.thumb-grid {
|
|
display: block;
|
|
column-gap: 6px;
|
|
align-content: start;
|
|
width: 100vw;
|
|
margin-left: calc(50% - 50vw);
|
|
padding: 0 6px;
|
|
column-fill: balance;
|
|
column-count: 2;
|
|
}
|
|
@media (min-width: 720px) {
|
|
.thumb-grid { column-count: 3; }
|
|
}
|
|
@media (min-width: 1024px) {
|
|
.thumb-grid { column-count: 4; }
|
|
}
|
|
@media (min-width: 1280px) {
|
|
.thumb-grid { column-count: 5; }
|
|
}
|
|
@media (min-width: 1600px) {
|
|
.thumb-grid { column-count: 6; }
|
|
}
|
|
@media (min-width: 1920px) {
|
|
.thumb-grid { column-count: 7; }
|
|
}
|
|
.thumb-card {
|
|
box-shadow: 2px 2px 7px 0px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
|
border-radius: 10px;
|
|
background-color: #efefef;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: 100%;
|
|
break-inside: avoid;
|
|
box-sizing: border-box;
|
|
margin-bottom: 6px;
|
|
height: 138px;
|
|
min-height: 138px;
|
|
max-height: 138px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.thumb-card:has([data-compact]) {
|
|
height: 46px;
|
|
min-height: 46px;
|
|
max-height: 46px;
|
|
}
|
|
.thumb-card .thumb-body {
|
|
font-size: 14px;
|
|
padding: 3px 8px;
|
|
line-height: 1.2;
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #222;
|
|
background-color: #f6f6f6;
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
}
|
|
.thumb-actions {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 6px;
|
|
display: flex;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
opacity: 0.7;
|
|
}
|
|
.thumb-actions a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
.thumb-actions a:hover {
|
|
opacity: 1;
|
|
}
|
|
.thumb-card .thumb-body h4 {
|
|
font-size: 0.8em;
|
|
text-transform: uppercase;
|
|
margin: 0 0 2px 0;
|
|
color: #222;
|
|
line-height: 1.1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.thumb-card .thumbnail-wrapper,
|
|
.thumb-card iframe.card-img-top {
|
|
display: block;
|
|
width: 100%;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
.thumb-card .thumbnail-wrapper {
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: 100% !important;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
height: auto !important;
|
|
}
|
|
.thumb-card .thumbnail-wrapper > *,
|
|
.thumb-card iframe.card-img-top {
|
|
width: 100% !important;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
max-width: 100%;
|
|
}
|
|
.thumb-card .card-img-top {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
height: 100% !important;
|
|
margin: 0 !important;
|
|
transform: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
.thumb-card .thumbnail-wrapper img,
|
|
.thumb-card .thumbnail-wrapper video,
|
|
.thumb-card .thumbnail-wrapper canvas {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
max-width: 100% !important;
|
|
object-fit: cover;
|
|
transform: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
.thumb-card .thumbnail-wrapper iframe,
|
|
.thumb-card .thumbnail-wrapper object,
|
|
.thumb-card .thumbnail-wrapper embed {
|
|
width: 405% !important;
|
|
height: 405% !important;
|
|
transform: scale(0.25);
|
|
transform-origin: 0 0;
|
|
margin: 0 !important;
|
|
border: 0 !important;
|
|
}
|
|
.thumb-card iframe.card-img-top {
|
|
width: 405% !important;
|
|
height: 405% !important;
|
|
transform: scale(0.25);
|
|
transform-origin: 0 0;
|
|
margin: 0 !important;
|
|
border: 0 !important;
|
|
}
|
|
.thumb-card:has([data-compact]) .thumbnail-wrapper,
|
|
.thumb-card:has([data-compact]) .thumbnail-wrapper.compact {
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
}
|
|
.thumb-card:has([data-compact]) .thumb-body {
|
|
padding: 2px 6px;
|
|
font-size: 12px;
|
|
max-height: 20px;
|
|
}
|
|
.thumb-card:has([data-compact]) .thumb-body h4 {
|
|
font-size: 0.9em;
|
|
margin-bottom: 0px;
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.thumb-card:has([data-compact]) .thumbnail-text-header,
|
|
.thumb-card:has([data-compact]) .thumbnail-compact-icon,
|
|
.thumb-card:has([data-compact]) .thumbnail-compact-label {
|
|
display: none;
|
|
}
|
|
.thumb-card.selected-card {
|
|
border: 2px solid orange;
|
|
box-shadow: 0px -6px 13px 1px rgba(0,0,0,0.05);
|
|
}
|
|
.loose-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px 8px;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
max-height: 84px;
|
|
overflow: auto;
|
|
}
|
|
.loose-items a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
}
|
|
.loose-items a:hover {
|
|
background: rgba(0, 0, 0, 0.08);
|
|
}
|
|
.failed-items a {
|
|
color: #b91c1c;
|
|
background: rgba(185, 28, 28, 0.08);
|
|
}
|
|
.failed-items a:hover {
|
|
background: rgba(185, 28, 28, 0.16);
|
|
}
|
|
.header-bottom {
|
|
border-top: 1px solid rgba(170, 30, 85, 0.9);
|
|
padding-bottom: 1px;
|
|
border-bottom: 5px solid rgb(170, 30, 85);
|
|
margin-bottom: -1px;
|
|
|
|
border-radius: 0px;
|
|
background-color: #f4eeee;
|
|
border: 1px solid rgba(0,0,0,0.2);
|
|
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
|
|
margin-top: 0px;
|
|
}
|
|
.header-bottom.container-fluid {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
}
|
|
.header-bottom-info {
|
|
color: #6f6f6f;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
margin: 0px -15px;
|
|
}
|
|
|
|
.header-bottom-info > div {
|
|
text-align: center;
|
|
}
|
|
.header-bottom-info h5 {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
margin-top: 3px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.info-chunk {
|
|
width: auto;
|
|
display: inline-block;
|
|
text-align: center;
|
|
margin: 8px 4px;
|
|
vertical-align: top;
|
|
font-size: 14px;
|
|
}
|
|
header .badge {
|
|
margin-top: 3px;
|
|
font-size: 0.9rem;
|
|
font-weight: 200;
|
|
font-family: monospace;
|
|
}
|
|
header .internal-links {
|
|
text-align: left;
|
|
opacity: 1;
|
|
background-color: rgba(0,0,0,0.03);
|
|
padding: 1px 3px;
|
|
}
|
|
header .external-links {
|
|
text-align: center;
|
|
opacity: 0.9;
|
|
/*background-color: rgba(0,0,0,0.03);*/
|
|
margin-top: 0px;
|
|
padding: 1px 3px;
|
|
font-size: 14px;
|
|
color: #ddd;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.row.header-bottom-frames {
|
|
padding-top: 5px;
|
|
display: block !important;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
column-width: 180px;
|
|
column-gap: 8px;
|
|
column-fill: auto;
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
flex: none !important;
|
|
}
|
|
.header-bottom-frames .col-lg-2 {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
max-width: 100%;
|
|
width: 100% !important;
|
|
display: inline-block !important;
|
|
float: none !important;
|
|
flex: none !important;
|
|
break-inside: avoid;
|
|
margin-bottom: 6px;
|
|
vertical-align: top;
|
|
}
|
|
.header-bottom-frames .card:has([data-compact]) .thumbnail-wrapper,
|
|
.header-bottom-frames .card:has([data-compact]) .thumbnail-wrapper.compact {
|
|
height: 32px;
|
|
}
|
|
.header-bottom-frames .card:has([data-compact]) .thumbnail-text {
|
|
height: auto;
|
|
max-height: 64px;
|
|
}
|
|
.header-bottom-frames .card:has([data-compact]) .card-body {
|
|
padding: 4px 8px;
|
|
max-height: 44px;
|
|
}
|
|
.header-bottom-frames .card-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 17px;
|
|
margin-bottom: 0px;
|
|
display: inline-block;
|
|
color: #222;
|
|
font-weight: 200;
|
|
vertical-align: 3px;
|
|
}
|
|
.header-bottom-frames .card-text {
|
|
/* width: 100%;
|
|
text-align: center;*/
|
|
font-size: 0.9em;
|
|
display: inline-block;
|
|
position: relative;
|
|
/* top: -11px;*/
|
|
}
|
|
.card-text code {
|
|
padding: .1rem .2rem;
|
|
font-size: 90%;
|
|
color: #bd4147;
|
|
background-color: rgb(204, 204, 204, 0.28);
|
|
border-radius: .25rem;
|
|
}
|
|
|
|
/*@media(max-width: 1092px) {
|
|
iframe {
|
|
display: none;
|
|
}
|
|
}*/
|
|
|
|
|
|
@media(max-width: 728px) {
|
|
.card h4 {
|
|
font-size: 5vw;
|
|
}
|
|
.card-body {
|
|
font-size: 4vw;
|
|
}
|
|
.card {
|
|
margin-bottom: 5px;
|
|
}
|
|
header > h1 > a.header-url, header > h1 > a.header-archivebox {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="header-top">
|
|
<div class="header-nav">
|
|
<div class="header-col header-left" style="line-height: 58px; vertical-align: middle">
|
|
<a href="/" class="header-archivebox" title="Go to Main Index...">
|
|
{% web_base_url as web_base %}
|
|
<img src="{% if web_base %}//{{ web_base|cut:'http://'|cut:'https://' }}/static/archive.png{% else %}{% static 'archive.png' %}{% endif %}" alt="Archive Icon">
|
|
ArchiveBox
|
|
</a>
|
|
</div>
|
|
<div class="header-col header-main">
|
|
<div class="header-url">
|
|
<a class="header-url-text" href="{{url}}" title="Open original URL in new window..." target="_blank" rel="noreferrer">
|
|
{{url}}
|
|
</a>
|
|
</div>
|
|
<div class="header-title-line header-toggle-trigger">
|
|
<img src="{% snapshot_url snapshot 'favicon/favicon.ico' %}" onerror="this.style.opacity=0" alt="Favicon" class="favicon"/>
|
|
<span class="header-title-text">{{title|truncatechars:120|safe}}</span>
|
|
<a href="#" class="header-toggle header-toggle-trigger">▾</a>
|
|
</div>
|
|
</div>
|
|
<div class="header-col header-meta">
|
|
<div class="header-badges">
|
|
<div class="badge badge-default" style="font-weight: 200">
|
|
{{num_outputs}}
|
|
{% if num_failures %}
|
|
+ {{num_failures}} <small>errors</small>
|
|
{% endif %}
|
|
</div>
|
|
<div class="badge badge-info">
|
|
<a href="{% admin_base_url %}/admin/core/snapshot/{{snapshot_id|default:id}}/change/" title="Click to edit this Snapshot in the Admin UI">
|
|
{{size}}
|
|
</a>
|
|
</div>
|
|
<div class="badge badge-default">
|
|
<a href="{% admin_base_url %}/admin/core/snapshot/{{snapshot_id|default:id}}/change/" title="Click to edit this Snapshot in the Admin UI">
|
|
✏️
|
|
</a>
|
|
</div>
|
|
{% for tag in tags_str|split:',' %}
|
|
{% if tag %}
|
|
<div class="badge badge-default tag" style="word-break: break-all;">{{tag}}</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="badge badge-{{status_color}}">
|
|
<a href="{% admin_base_url %}/admin/core/snapshot/?q={{snapshot_id|default:id}}" title="Click to see options to pull, re-snapshot, or delete this Snapshot">
|
|
{{status|upper}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% if related_years %}
|
|
<div class="header-year-badges">
|
|
{% for entry in related_years %}
|
|
{% if entry.snapshots|length > 1 %}
|
|
<details class="snapshot-variants year-variants">
|
|
<summary class="badge badge-default">{{ entry.year }}</summary>
|
|
<div class="snapshot-variants-list">
|
|
{% for snap in entry.snapshots %}
|
|
<a href="{% web_base_url %}/{{ snap.archive_path }}/index.html" title="{{ snap.url }}">
|
|
{{ snap.bookmarked_at|default:snap.created_at|default:snap.downloaded_at|date:"Y-m-d H:i:s" }} 📁 {{ snap.num_outputs }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
{% else %}
|
|
<div class="badge badge-default">
|
|
<a href="{% web_base_url %}/{{ entry.latest.archive_path }}/index.html" title="{{ entry.latest.url }}">
|
|
{{ entry.year }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="header-col header-right" style="padding-top: 4px">
|
|
{% if related_snapshots %}
|
|
<details class="snapshot-variants">
|
|
<summary class="header-date" title="Click to see other snapshots for this URL">
|
|
{{oldest_archive_date|default:downloaded_datestr|default:bookmarked_date}}
|
|
</summary>
|
|
<div class="snapshot-variants-list">
|
|
{% for snap in related_snapshots %}
|
|
<a href="{% web_base_url %}/{{ snap.archive_path }}/index.html" title="{{ snap.url }}">
|
|
{{ snap.bookmarked_at|default:snap.created_at|default:snap.downloaded_at|date:"Y-m-d H:i:s" }} 📁 {{ snap.num_outputs }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</details>
|
|
{% else %}
|
|
<a class="header-date" href="{% web_base_url %}/{{archive_path}}/index.html" title="Date Added: {{bookmarked_date}} | First Archived: {{oldest_archive_date|default:downloaded_datestr}} | Last Checked: {{downloaded_datestr}} (UTC)">
|
|
{{oldest_archive_date|default:downloaded_datestr|default:bookmarked_date}}
|
|
</a>
|
|
{% endif %}
|
|
<br/>
|
|
<div class="external-links">
|
|
📁
|
|
<a href="{% snapshot_base_url snapshot %}/?files=1" title="Browse files for this snapshot" target="_blank">FILES</a> | 🗃️
|
|
<a href="{% snapshot_url snapshot warc_path %}" title="Download the ArchiveBox-generated WARC file" target="_blank">WARC</a> |
|
|
<a href="https://web.archive.org/web/{{url}}" title="Search for a copy of the URL saved in Archive.org" target="_blank" rel="noreferrer">🏛️ Archive.org</a>
|
|
<!--<a href="https://archive.md/{{url}}" title="Search for a copy of the URL saved in Archive.today" target="_blank" rel="noreferrer">Archive.today</a> | -->
|
|
<!--<a href="https://ghostarchive.org/search?term={{url}}" title="Search for a copy of the URL saved in GhostArchive.org" target="_blank" rel="noreferrer">More...</a>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-bottom container-fluid">
|
|
<div class="thumb-grid">
|
|
|
|
|
|
{% for result in archiveresults %}
|
|
{% with display_path=result.path|default:result.result.embed_path display_url='' %}
|
|
{% if display_path %}{% snapshot_url snapshot display_path as display_url %}{% endif %}
|
|
<div class="thumb-card{% if forloop.first %} selected-card{% endif %}"{% if display_url %} data-preview-url="{{display_url}}"{% endif %}>
|
|
<div class="thumb-body">
|
|
<div class="thumb-actions">
|
|
<a href="{% snapshot_url snapshot result.name %}/?files=1" data-no-preview="1" title="Open output folder" target="_blank" rel="noopener">📁</a>
|
|
{% if display_path %}
|
|
<a href="{{display_url}}" data-no-preview="1" title="Download output file" download>⬇️</a>
|
|
{% endif %}
|
|
</div>
|
|
{% if display_path %}
|
|
<a href="{{display_url}}" target="preview" title="./{{display_path}} (downloaded {{result.ts}})">
|
|
<h4>{% plugin_icon result.name %} {{result.name|plugin_name|truncatechars:20}}{% if result.size %} <small>({{result.size|filesizeformat}})</small>{% endif %}</h4>
|
|
</a>
|
|
{% else %}
|
|
<h4>{% plugin_icon result.name %} {{result.name|plugin_name|truncatechars:20}}{% if result.size %} <small>({{result.size|filesizeformat}})</small>{% endif %}</h4>
|
|
{% endif %}
|
|
{% if result.result %}
|
|
{% with plugin_base=result.name|plugin_name %}
|
|
{% if plugin_base == 'ytdlp' or plugin_base == 'yt-dlp' or plugin_base == 'youtube-dl' %}
|
|
{% plugin_card result.result %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
</div>
|
|
{% if result.result and display_path %}
|
|
{% with plugin_base=result.name|plugin_name %}
|
|
{% if plugin_base != 'ytdlp' and plugin_base != 'yt-dlp' and plugin_base != 'youtube-dl' %}
|
|
{# Use plugin-specific card template when ArchiveResult is available #}
|
|
<div class="card-img-top thumbnail-wrapper">
|
|
{% plugin_card result.result %}
|
|
</div>
|
|
{% else %}
|
|
{# YT-DLP renders its file list in the body #}
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% elif result.is_metadata and display_path %}
|
|
<div class="card-img-top thumbnail-wrapper compact">
|
|
<div class="thumbnail-compact" data-plugin="{{result.name}}">
|
|
<span class="thumbnail-compact-icon">{% plugin_icon result.name %}</span>
|
|
<span class="thumbnail-compact-label">{{result.name|plugin_name}}</span>
|
|
<span class="thumbnail-compact-meta">metadata</span>
|
|
</div>
|
|
</div>
|
|
{% elif display_path %}
|
|
{# Fall back to generic iframe for filesystem-discovered files #}
|
|
<iframe class="card-img-top" src="{{display_url}}?autoplay=0" allow="autoplay 'none'; fullscreen 'none'; navigation-override 'none'; " sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" scrolling="no" loading="lazy"></iframe>
|
|
{% endif %}
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
{% if loose_items %}
|
|
<div class="thumb-card">
|
|
<div class="thumb-body">
|
|
<div class="thumb-actions">
|
|
<a href="{% snapshot_base_url snapshot %}/?files=1" data-no-preview="1" title="Browse all snapshot files" target="_blank" rel="noopener">📁</a>
|
|
</div>
|
|
<h4>📦 Other files</h4>
|
|
<div class="loose-items">
|
|
{% for item in loose_items %}
|
|
{% if item.is_dir %}
|
|
<a href="{% snapshot_url snapshot item.path %}/?files=1" data-no-preview="1" target="_blank" rel="noopener">📁 {{item.name}}</a>
|
|
{% else %}
|
|
<a href="{% snapshot_url snapshot item.path %}" data-no-preview="1" target="_blank" rel="noopener">📄 {{item.name}}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if failed_items %}
|
|
<div class="thumb-card">
|
|
<div class="thumb-body">
|
|
<div class="thumb-actions">
|
|
<a href="{% snapshot_base_url snapshot %}/?files=1" data-no-preview="1" title="Browse all snapshot files" target="_blank" rel="noopener">📁</a>
|
|
</div>
|
|
<h4>⚠️ Failed</h4>
|
|
<div class="loose-items failed-items">
|
|
{% for item in failed_items %}
|
|
{% if item.is_dir %}
|
|
<a href="{% snapshot_url snapshot item.path %}/?files=1" data-no-preview="1" target="_blank" rel="noopener">📁 {{item.name}}</a>
|
|
{% else %}
|
|
<a href="{% snapshot_url snapshot item.path %}" data-no-preview="1" target="_blank" rel="noopener">📄 {{item.name}}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
|
|
{% if best_result.result %}
|
|
{# Use plugin-specific fullscreen template when ArchiveResult is available #}
|
|
<div id="main-frame-wrapper" class="full-page-wrapper">
|
|
<div id="plugin-full-wrapper">
|
|
{% plugin_full best_result.result %}
|
|
</div>
|
|
<iframe id="main-frame" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" class="full-page-iframe preview-hidden" src="{% if best_result.path %}{% snapshot_url snapshot best_result.path %}{% else %}about:blank{% endif %}" name="preview"></iframe>
|
|
</div>
|
|
{% else %}
|
|
{# Fall back to generic iframe #}
|
|
<iframe id="main-frame" sandbox="allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms" class="full-page-iframe" src="{% if best_result.path %}{% snapshot_url snapshot best_result.path %}{% else %}about:blank{% endif %}" name="preview"></iframe>
|
|
{% endif %}
|
|
|
|
|
|
|
|
<script src="{% static 'jquery.min.js' %}" type="text/javascript"></script>
|
|
|
|
<script>
|
|
const snapshotBaseUrl = "{% snapshot_base_url snapshot %}";
|
|
|
|
function tryCenterImageFrame(frame) {
|
|
try {
|
|
const doc = frame.contentDocument || frame.contentWindow.document
|
|
if (!doc || !doc.body || !doc.images || doc.images.length !== 1) {
|
|
return
|
|
}
|
|
const img = doc.images[0]
|
|
doc.documentElement.style.height = '100%'
|
|
doc.body.style.height = '100%'
|
|
doc.documentElement.style.width = '100%'
|
|
doc.body.style.width = '100%'
|
|
doc.body.style.margin = '0'
|
|
doc.body.style.display = 'flex'
|
|
doc.body.style.alignItems = 'flex-start'
|
|
doc.body.style.justifyContent = 'center'
|
|
doc.body.style.background = '#222'
|
|
img.style.maxWidth = '100%'
|
|
img.style.width = 'auto'
|
|
img.style.height = 'auto'
|
|
img.style.maxHeight = 'none'
|
|
img.style.display = 'block'
|
|
} catch (err) {}
|
|
}
|
|
|
|
function attachPreviewFrameHandlers(frame) {
|
|
if (frame.src.endsWith('.pdf')) {
|
|
frame.removeAttribute('sandbox')
|
|
frame.src = frame.src + '#toolbar=0'
|
|
}
|
|
frame.onload = function() {
|
|
if (this.src.includes('.pdf')) {
|
|
this.removeAttribute('sandbox')
|
|
this.src = this.src.split('?autoplay=')[0] + '#toolbar=0'
|
|
}
|
|
tryCenterImageFrame(this)
|
|
try {
|
|
// doesnt work if frame origin rules prevent accessing its DOM via JS
|
|
this.contentWindow.scrollTo(0, 0);
|
|
} catch(err) {}
|
|
}
|
|
}
|
|
|
|
// un-sandbox iframes showing pdfs (required to display pdf viewer)
|
|
jQuery('iframe').map(function() {
|
|
attachPreviewFrameHandlers(this)
|
|
})
|
|
|
|
function getPreviewTypeFromPath(link) {
|
|
if (link.getAttribute('href') == './') {
|
|
return 'all'
|
|
}
|
|
return link.getAttribute('href')
|
|
}
|
|
|
|
function resolvePreviewUrl(raw) {
|
|
if (!raw) return ''
|
|
if (raw.startsWith('http://') || raw.startsWith('https://')) return raw
|
|
if (raw.startsWith('//')) return window.location.protocol + raw
|
|
if (!snapshotBaseUrl) return raw
|
|
return snapshotBaseUrl + (raw.startsWith('/') ? raw : `/${raw}`)
|
|
}
|
|
|
|
function ensureMainFrame() {
|
|
let frame = document.getElementById('main-frame')
|
|
if (!frame) {
|
|
const wrapper = document.getElementById('main-frame-wrapper')
|
|
frame = document.createElement('iframe')
|
|
frame.id = 'main-frame'
|
|
frame.name = 'preview'
|
|
frame.className = 'full-page-iframe'
|
|
frame.sandbox = "allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms"
|
|
if (wrapper) {
|
|
wrapper.innerHTML = ''
|
|
wrapper.appendChild(frame)
|
|
wrapper.classList.remove('full-page-wrapper')
|
|
}
|
|
attachPreviewFrameHandlers(frame)
|
|
}
|
|
const pluginWrapper = document.getElementById('plugin-full-wrapper')
|
|
if (pluginWrapper) {
|
|
pluginWrapper.classList.add('preview-hidden')
|
|
}
|
|
frame.classList.remove('preview-hidden')
|
|
return frame
|
|
}
|
|
|
|
function handleCardClick(card, event) {
|
|
const targetEl = event.target.nodeType === Node.ELEMENT_NODE ? event.target : event.target.parentElement
|
|
if (targetEl && targetEl.closest('[data-no-preview]')) {
|
|
return
|
|
}
|
|
const link = (targetEl && targetEl.closest('a[target=preview]')) || card.querySelector('a[target=preview]') || card.querySelector('a')
|
|
const previewUrl = card.dataset.previewUrl
|
|
const rawTarget = (link ? link.getAttribute('href') : '') || previewUrl || ''
|
|
const target = resolvePreviewUrl(rawTarget)
|
|
if (!target || target.endsWith('#')) {
|
|
return
|
|
}
|
|
event.preventDefault()
|
|
|
|
jQuery('.selected-card').removeClass('selected-card')
|
|
jQuery(card).closest('.thumb-card').addClass('selected-card')
|
|
|
|
const iframe_elem = ensureMainFrame()
|
|
if (target.endsWith('.pdf')) {
|
|
iframe_elem.removeAttribute('sandbox')
|
|
} else {
|
|
iframe_elem.sandbox = "allow-same-origin allow-top-navigation-by-user-activation allow-scripts allow-forms"
|
|
}
|
|
if (link) {
|
|
window.location.hash = getPreviewTypeFromPath(link)
|
|
}
|
|
|
|
iframe_elem.src = target
|
|
}
|
|
|
|
for (const card of [...document.querySelectorAll('.thumb-card')]) {
|
|
card.addEventListener('click', function(event) {
|
|
handleCardClick(card, event)
|
|
})
|
|
for (const link of card.querySelectorAll('a')) {
|
|
link.addEventListener('click', function(event) {
|
|
handleCardClick(card, event)
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
function hideSnapshotHeader() {
|
|
console.log('Collapsing Snapshot header...')
|
|
jQuery('.header-toggle').text('▸')
|
|
jQuery('.header-bottom').hide()
|
|
jQuery('#main-frame').addClass('iframe-large')
|
|
try {
|
|
localStorage.setItem("archivebox-snapshot-header-visible", "false")
|
|
} catch (e) {
|
|
console.log('Could not use localStorage to persist header collapse state', e)
|
|
}
|
|
}
|
|
function showSnapshotHeader() {
|
|
console.log('Expanding Snapshot header...')
|
|
jQuery('.header-toggle').text('▾')
|
|
jQuery('.header-bottom').show()
|
|
jQuery('#main-frame').removeClass('iframe-large')
|
|
try {
|
|
localStorage.setItem("archivebox-snapshot-header-visible", "true")
|
|
} catch (e) {
|
|
console.log('Could not use localStorage to persist header collapse state', e)
|
|
}
|
|
}
|
|
function loadSnapshotHeaderState() {
|
|
// collapse snapshot header if user has previously hidden it
|
|
let snapshotHeaderIsExpanded = 'false'
|
|
try {
|
|
snapshotHeaderIsExpanded = localStorage.getItem("archivebox-snapshot-header-visible") || 'false'
|
|
} catch (e) {
|
|
console.log('Could not use localStorage to get header collapse state', e)
|
|
}
|
|
if (snapshotHeaderIsExpanded === 'false') {
|
|
hideSnapshotHeader()
|
|
}
|
|
}
|
|
function handleSnapshotHeaderToggle() {
|
|
if (jQuery('.header-toggle').text().includes('▾')) {
|
|
hideSnapshotHeader()
|
|
} else {
|
|
showSnapshotHeader()
|
|
}
|
|
return true
|
|
}
|
|
|
|
// hide header when collapse icon is clicked
|
|
jQuery('.header-toggle').on('click', handleSnapshotHeaderToggle)
|
|
jQuery('.header-toggle-trigger').on('click', handleSnapshotHeaderToggle)
|
|
|
|
// check URL for hash e.g. #git and load relevant preview
|
|
jQuery(document).ready(function() {
|
|
if (window.location.hash) {
|
|
for (const link of jQuery('a[target=preview]')) {
|
|
console.log(link.pathname)
|
|
if (getPreviewTypeFromPath(link) == window.location.hash.slice(1).toLowerCase()) {
|
|
jQuery(link).closest('.thumb-card').click()
|
|
jQuery(link).click()
|
|
link.click()
|
|
}
|
|
}
|
|
}
|
|
loadSnapshotHeaderState()
|
|
})
|
|
|
|
|
|
|
|
// hide all preview iframes on small screens
|
|
// if (window.innerWidth < 1091) {
|
|
// jQuery('.card a[target=preview]').attr('target', '_self')
|
|
// }
|
|
</script>
|
|
</body>
|
|
</html>
|