software
/
archival.ArchiveBox
mirror of https://github.com/ArchiveBox/ArchiveBox.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326
							{% 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" }} &nbsp; 📁 {{ 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" }} &nbsp; 📁 {{ 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">
                            📁 &nbsp;
                            <a href="{% snapshot_base_url snapshot %}/?files=1" title="Browse files for this snapshot" target="_blank">FILES</a> &nbsp;|&nbsp; 🗃️ 
                            <a href="{% snapshot_url snapshot warc_path %}" title="Download the ArchiveBox-generated WARC file" target="_blank">WARC</a>  &nbsp;|&nbsp; 
                            <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>  &nbsp;|&nbsp; -->
                            <!--<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>