kstyagi23
8f9210d6be
- Changed button text and messages from "crawl" to "archive" for clarity. - Updated HTML elements to reflect the new terminology and improve user guidance. - Modified footer content to emphasize local-first archiving and provide source link. - Added a link to the project's repository in the index page and test to ensure it appears.
283 lines
12 KiB
HTML
283 lines
12 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="#f3f5f1">
|
|
<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.",
|
|
"sameAs": "https://git.zerofucks.io/kstyagi/website-downloader"
|
|
}
|
|
</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>
|
|
<a class="skip-link" href="#capture-workspace">Skip to archive form</a>
|
|
<div class="site-shell">
|
|
<header class="site-header">
|
|
<a class="brand" href="/" aria-label="SiteHarbor home">
|
|
<span class="brand-mark" aria-hidden="true"></span>
|
|
<span class="brand-copy">
|
|
<strong>SiteHarbor</strong>
|
|
<span>Private website archiver</span>
|
|
</span>
|
|
</a>
|
|
<nav class="site-nav" aria-label="Primary navigation">
|
|
<a href="#capture-workspace">New archive</a>
|
|
<a href="#recent-captures">Recent archives</a>
|
|
</nav>
|
|
<div class="header-tools">
|
|
<a
|
|
class="source-link"
|
|
href="https://git.zerofucks.io/kstyagi/website-downloader"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
View source
|
|
</a>
|
|
<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">PRIVATE WEBSITE ARCHIVES</p>
|
|
<h1>Archive the web.<br><em>Keep what matters.</em></h1>
|
|
<p class="lede">
|
|
Turn a public website into a portable ZIP for offline review. Set the boundaries,
|
|
start the crawl, and download it when it is ready.
|
|
</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">Archived sites</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-data">--</span>
|
|
<span class="metric-label">Data captured</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-active">--</span>
|
|
<span class="metric-label">Active crawls</span>
|
|
</article>
|
|
<article class="metric-card">
|
|
<span class="metric-value" id="stat-files">--</span>
|
|
<span class="metric-label">Files captured</span>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="observatory-foot">
|
|
<span class="pulse-dot" aria-hidden="true"></span>
|
|
<p>Shared totals are public. Your crawl URLs, status, and downloads stay scoped to this browser.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="capture-console" id="capture-form" novalidate>
|
|
<div class="console-head">
|
|
<div>
|
|
<p class="eyebrow">NEW ARCHIVE</p>
|
|
<h2>Create an archive.</h2>
|
|
</div>
|
|
<span class="console-step">STEP 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 archive</span>
|
|
<span aria-hidden="true">-></span>
|
|
</button>
|
|
<p>Archive only sites you are allowed to copy. Private networks and unsafe ports stay 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">Recent archives</h2>
|
|
<p>Only this browser can view its captures. Come back to check progress or download a finished archive.</p>
|
|
</div>
|
|
<button class="quiet-button" id="refresh-jobs" type="button">Refresh</button>
|
|
</div>
|
|
|
|
<div class="empty-state" id="empty-state">
|
|
<span class="empty-mark" aria-hidden="true">+</span>
|
|
<div>
|
|
<h3>No archives yet</h3>
|
|
<p>Start with a public website URL. Your archive will appear here as soon as it is queued.</p>
|
|
</div>
|
|
</div>
|
|
<div class="job-grid" id="job-grid" aria-live="polite"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p>Local-first website archiving for research, reference, and offline review.</p>
|
|
<div class="footer-links">
|
|
<span>Archives expire after two days.</span>
|
|
<a
|
|
href="https://git.zerofucks.io/kstyagi/website-downloader"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Source code
|
|
</a>
|
|
</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>
|