295 lines
13 KiB
HTML
295 lines
13 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#151715">
|
|
<meta name="application-name" content="SiteHarbor">
|
|
<meta name="robots" content="index, follow">
|
|
<meta
|
|
name="description"
|
|
content="Download public websites as private offline ZIP archives. SiteHarbor captures pages, static assets, and supported local links for offline browsing."
|
|
>
|
|
<meta property="og:site_name" content="SiteHarbor">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Website Downloader & Offline Archive Tool | SiteHarbor">
|
|
<meta
|
|
property="og:description"
|
|
content="Create bounded, private offline ZIP archives of public websites with SiteHarbor."
|
|
>
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "SiteHarbor",
|
|
"applicationCategory": "UtilitiesApplication",
|
|
"operatingSystem": "Web",
|
|
"description": "A local website downloader for creating bounded offline archives of public websites."
|
|
}
|
|
</script>
|
|
<title>Website Downloader & Offline Archive Tool | {{ app_name }}</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', path='app.css') }}">
|
|
<script defer src="{{ url_for('static', path='app.js') }}"></script>
|
|
</head>
|
|
<body>
|
|
<div class="site-shell">
|
|
<header class="site-header">
|
|
<a class="brand" href="/" aria-label="SiteHarbor home">
|
|
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
<span class="brand-copy">
|
|
<span class="brand-kicker">LOCAL WEB ARCHIVER</span>
|
|
<strong>SiteHarbor</strong>
|
|
</span>
|
|
</a>
|
|
<nav class="site-nav" aria-label="Primary navigation">
|
|
<a href="#capture-workspace">Archive a site</a>
|
|
<a href="#recent-captures">Your captures</a>
|
|
<a href="#how-it-works">How it works</a>
|
|
</nav>
|
|
<div class="service-panel">
|
|
<span class="service-panel-label">LOCAL SERVICE</span>
|
|
<span class="service-status" id="service-status" aria-live="polite">
|
|
<i></i><span>Checking service</span>
|
|
</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section class="workbench" id="capture-workspace" aria-label="Website capture workspace">
|
|
<div class="observatory">
|
|
<div class="observatory-copy">
|
|
<p class="eyebrow">OFFLINE WEBSITE DOWNLOADER</p>
|
|
<h1>Archive the web.<br><em>Keep it offline.</em></h1>
|
|
<p class="lede">
|
|
Create a private, offline-ready ZIP archive of a public website. SiteHarbor captures
|
|
supported pages and assets, then prepares local links for offline browsing.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="metric-grid" aria-live="polite" aria-label="Public service statistics">
|
|
<article class="metric-card metric-primary">
|
|
<span class="metric-value" id="stat-websites">--</span>
|
|
<span class="metric-label">Websites cloned</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-data">--</span>
|
|
<span class="metric-label">Data collected</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-active">--</span>
|
|
<span class="metric-label">Crawls running</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-files">--</span>
|
|
<span class="metric-label">Files preserved</span>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="observatory-foot">
|
|
<span class="pulse-dot" aria-hidden="true"></span>
|
|
<p>Metrics are shared totals. Crawl URLs and archives stay private to the browser session that created them.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="capture-console" id="capture-form" novalidate>
|
|
<div class="console-head">
|
|
<div>
|
|
<p class="eyebrow">NEW WEBSITE ARCHIVE</p>
|
|
<h2>Set your crawl.</h2>
|
|
</div>
|
|
<span class="console-step">01 / 01</span>
|
|
</div>
|
|
|
|
<label class="url-field" for="capture-url">
|
|
<span class="field-label">Public website URL</span>
|
|
<span class="url-input-wrap">
|
|
<span aria-hidden="true">//</span>
|
|
<input
|
|
id="capture-url"
|
|
name="url"
|
|
type="url"
|
|
inputmode="url"
|
|
autocomplete="url"
|
|
placeholder="https://example.com"
|
|
required
|
|
>
|
|
</span>
|
|
</label>
|
|
|
|
<div class="quick-settings">
|
|
<label class="switch-row" for="external-assets">
|
|
<span>
|
|
<strong>Include external assets</strong>
|
|
<small>Keep linked CDN styles, scripts, fonts, and media.</small>
|
|
</span>
|
|
<span class="switch">
|
|
<input id="external-assets" type="checkbox" checked>
|
|
<span aria-hidden="true"></span>
|
|
</span>
|
|
</label>
|
|
|
|
<label class="connection-control" for="parallel-connections">
|
|
<span>
|
|
<strong>Parallel connections</strong>
|
|
<small>Balance capture speed with a site's capacity.</small>
|
|
</span>
|
|
<span class="connection-value"><output id="parallel-value" for="parallel-connections">6</output> streams</span>
|
|
<input id="parallel-connections" type="range" min="1" max="6" value="6">
|
|
</label>
|
|
</div>
|
|
|
|
<div class="advanced-settings">
|
|
<details class="setting-panel">
|
|
<summary>
|
|
<span>Crawl limits</span>
|
|
<span class="summary-value" id="budget-summary">150 pages / 100 MB / 5 min</span>
|
|
</summary>
|
|
<div class="limit-grid">
|
|
<label>
|
|
<span>Pages</span>
|
|
<input id="max-pages" type="number" min="1" step="1" value="150">
|
|
</label>
|
|
<label>
|
|
<span>Depth</span>
|
|
<input id="max-depth" type="number" min="0" step="1" value="5">
|
|
</label>
|
|
<label>
|
|
<span>Size (MB)</span>
|
|
<input id="max-bytes" type="number" min="1" step="1" value="100">
|
|
</label>
|
|
<label>
|
|
<span>Time (sec)</span>
|
|
<input id="max-duration" type="number" min="10" step="10" value="300">
|
|
</label>
|
|
<label>
|
|
<span>Keep (days, max 2)</span>
|
|
<input id="retention-days" type="number" min="1" max="2" step="1" value="2">
|
|
</label>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="setting-panel">
|
|
<summary>
|
|
<span>File rules</span>
|
|
<span class="summary-value">Choose what comes aboard</span>
|
|
</summary>
|
|
<div class="file-rules">
|
|
<p>Pages are always copied. Select the asset groups that should be downloaded.</p>
|
|
<div class="asset-choices" role="group" aria-label="Asset types to download">
|
|
<label><input data-asset-type="styles" type="checkbox" checked><span>Styles</span></label>
|
|
<label><input data-asset-type="scripts" type="checkbox" checked><span>Scripts</span></label>
|
|
<label><input data-asset-type="images" type="checkbox" checked><span>Images</span></label>
|
|
<label><input data-asset-type="fonts" type="checkbox" checked><span>Fonts</span></label>
|
|
<label><input data-asset-type="media" type="checkbox" checked><span>Media</span></label>
|
|
<label><input data-asset-type="other" type="checkbox" checked><span>Other files</span></label>
|
|
</div>
|
|
<label class="text-rule" for="skip-file-types">
|
|
<span>Skip specific extensions</span>
|
|
<input
|
|
id="skip-file-types"
|
|
type="text"
|
|
autocomplete="off"
|
|
placeholder="pdf, zip, mp4"
|
|
>
|
|
</label>
|
|
</div>
|
|
</details>
|
|
|
|
<details class="setting-panel">
|
|
<summary>
|
|
<span>Network route</span>
|
|
<span class="summary-value" id="proxy-summary">Direct connection</span>
|
|
</summary>
|
|
<label class="switch-row proxy-row" for="use-proxy">
|
|
<span>
|
|
<strong>Use service proxy</strong>
|
|
<small id="proxy-detail">An operator-approved proxy can be used for this crawl.</small>
|
|
</span>
|
|
<span class="switch">
|
|
<input id="use-proxy" type="checkbox">
|
|
<span aria-hidden="true"></span>
|
|
</span>
|
|
</label>
|
|
</details>
|
|
</div>
|
|
|
|
<p class="form-message" id="form-message" aria-live="polite"></p>
|
|
<div class="console-actions">
|
|
<button class="capture-button" id="capture-submit" type="submit">
|
|
<span>Start private crawl</span>
|
|
<span aria-hidden="true">-></span>
|
|
</button>
|
|
<p>Only crawl sites you are allowed to archive. Private networks and unsafe ports are blocked.</p>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="activity-section" id="recent-captures" aria-labelledby="activity-title">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="eyebrow">THIS BROWSER</p>
|
|
<h2 id="activity-title">Your website archives</h2>
|
|
<p>Private session records stay in this browser. Return to monitor a crawl or download an available offline archive.</p>
|
|
</div>
|
|
<button class="quiet-button" id="refresh-jobs" type="button">Refresh archives</button>
|
|
</div>
|
|
|
|
<div class="empty-state" id="empty-state">
|
|
<span class="empty-mark" aria-hidden="true">+</span>
|
|
<div>
|
|
<h3>No website archives yet</h3>
|
|
<p>Start a crawl above. This browser can reconnect to its status and download it when ready.</p>
|
|
</div>
|
|
</div>
|
|
<div class="job-grid" id="job-grid" aria-live="polite"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer" id="how-it-works">
|
|
<div class="footer-top">
|
|
<section class="footer-intro" aria-labelledby="footer-title">
|
|
<p class="footer-kicker">SITEHARBOR / OFFLINE WEB ARCHIVES</p>
|
|
<h2 id="footer-title">A practical website downloader for offline review.</h2>
|
|
<p>
|
|
Save a bounded, browser-owned copy of a public website without sending your archive
|
|
to a third-party storage service.
|
|
</p>
|
|
</section>
|
|
<div class="footer-points">
|
|
<section class="footer-point">
|
|
<span class="footer-index">01</span>
|
|
<h3>Bounded crawl</h3>
|
|
<p>Set page, depth, size, and time limits before SiteHarbor begins.</p>
|
|
</section>
|
|
<section class="footer-point">
|
|
<span class="footer-index">02</span>
|
|
<h3>Portable ZIP</h3>
|
|
<p>Download captured pages, supported assets, and a manifest for offline browsing.</p>
|
|
</section>
|
|
<section class="footer-point">
|
|
<span class="footer-index">03</span>
|
|
<h3>Private by default</h3>
|
|
<p>Archives stay scoped to this browser session and are removed after two days.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>Local-first web archiving with FastAPI, Uvicorn, and SQLite.</span>
|
|
<span>Archive only websites you are authorized to copy.</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<dialog class="report-dialog" id="report-dialog" aria-labelledby="report-title">
|
|
<div class="dialog-head">
|
|
<div>
|
|
<p class="eyebrow">CAPTURE REPORT</p>
|
|
<h2 id="report-title">Archive details</h2>
|
|
</div>
|
|
<button class="icon-button" id="close-report" type="button" aria-label="Close report">x</button>
|
|
</div>
|
|
<div class="report-content" id="report-content"></div>
|
|
</dialog>
|
|
</body>
|
|
</html>
|