__init__
This commit is contained in:
kstyagi23
@@ -0,0 +1,238 @@
|
||||
<!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="description"
|
||||
content="Create browser-owned offline archives of public websites with SiteHarbor."
|
||||
>
|
||||
<title>{{ app_name }} - Public web capture</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="topbar">
|
||||
<a class="brand" href="/" aria-label="SiteHarbor home">
|
||||
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
|
||||
<span>siteharbor</span>
|
||||
</a>
|
||||
<div class="topbar-meta">
|
||||
<span class="public-label">PUBLIC WEB CAPTURE</span>
|
||||
<span class="service-status" id="service-status" aria-live="polite">
|
||||
<i></i><span>Checking service</span>
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="workbench" aria-label="Website capture workspace">
|
||||
<div class="observatory">
|
||||
<div class="observatory-copy">
|
||||
<p class="eyebrow">LIVE NETWORK SIGNAL</p>
|
||||
<h1>Copy the web.<br><em>Keep it close.</em></h1>
|
||||
<p class="lede">
|
||||
Build an offline-ready snapshot of a public site. The service runs the crawl;
|
||||
this browser keeps the key to its own sessions.
|
||||
</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 SESSION</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)</span>
|
||||
<input id="retention-days" type="number" min="1" step="1" value="7">
|
||||
</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" aria-labelledby="activity-title">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="eyebrow">THIS BROWSER</p>
|
||||
<h2 id="activity-title">Your local sessions</h2>
|
||||
<p>Session records stay in this browser's local storage. Reopen this page to reconnect to an active crawl.</p>
|
||||
</div>
|
||||
<button class="quiet-button" id="refresh-jobs" type="button">Refresh sessions</button>
|
||||
</div>
|
||||
|
||||
<div class="empty-state" id="empty-state">
|
||||
<span class="empty-mark" aria-hidden="true">+</span>
|
||||
<div>
|
||||
<h3>No local sessions yet</h3>
|
||||
<p>Start a crawl above. Its status and archive will remain available from this browser after a reconnect.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-grid" id="job-grid" aria-live="polite"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer-note">
|
||||
<span>SiteHarbor captures browser-delivered static content.</span>
|
||||
<span>Dynamic APIs, logins, service workers, and server behavior may not work offline.</span>
|
||||
</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>
|
||||
Reference in New Issue
Block a user