diff --git a/.ai/rules/website.md b/.ai/rules/website.md new file mode 100644 index 0000000..6f091e5 --- /dev/null +++ b/.ai/rules/website.md @@ -0,0 +1,9 @@ +--- +paths: + - 'website/**' +--- + +# Website + +## website/ is the live site, uploaded by hand +website/ is a faithful copy of sealshare.nonameweb.ch (METANET hosting), hand-written HTML/CSS with no build step, uploaded wholesale when it changes. Colours in css/theme.css are copied from resources/css/material-scheme.json — copy them again whenever the scheme is regenerated. The comparison tables are dated and every competitor value has a source from the product's own site, docs or repo; an unsourced value is "—", never a guess. Never call SealShare's encryption end-to-end (it encrypts at rest on the server). Nothing may load from another host except plausible.io. tests/Feature/WebsiteTest.php guards all of this. diff --git a/CHANGELOG.md b/CHANGELOG.md index c779cbf..5796273 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- The README called SealShare's encryption end-to-end. Files are encrypted at rest on the server; the README now says so, and that a share password's key is never stored. - The admin dashboard passed its sort column and direction straight to the query, so a crafted Livewire request could order shares by any column or cause a server error. It now sorts only by the columns it shows and otherwise falls back to newest first. ## [1.2.0] - 2026-09-10 diff --git a/README.md b/README.md index ea022c0..0634a98 100644 --- a/README.md +++ b/README.md @@ -2,11 +2,23 @@ A simple, self-hosted file sharing solution built with Laravel. Upload files, get a shareable link, done. All files are encrypted at rest with AES-256-GCM. +**Website:** [sealshare.nonameweb.ch](https://sealshare.nonameweb.ch) + +## Screenshots + +

+ Uploading files and folders with share options + A new share with its link and QR code button +

+

+ The recipient's download page on a phone +

+ ## Features - **File Uploading** — Drag & drop or browse to upload single/multiple files and folders with real-time progress - **Shareable Links** — Each upload generates a unique link for recipients, also as a QR code (saved as a PNG) or through the device's share sheet -- **End-to-End Encryption** — All files encrypted at rest using AES-256-GCM (chunked, streaming) +- **Encryption at Rest** — Files are encrypted on the server as they arrive, with AES-256-GCM (chunked, streaming); with a share password the key is derived from it and never stored. It is not end-to-end encryption: the server handles the files unencrypted while they are uploaded and downloaded - **Password Protection** — Optionally protect shares with a password - **Expiration** — Shares auto-expire after a configurable duration (1 hour to 30 days) - **Download Limits** — Set a maximum number of downloads per share diff --git a/docs/plans/screenshots-and-website.md b/docs/plans/screenshots-and-website.md index 53a0c8c..cf14238 100644 --- a/docs/plans/screenshots-and-website.md +++ b/docs/plans/screenshots-and-website.md @@ -234,8 +234,10 @@ advertises end-to-end encryption. ## Risks and open questions -- **Selecting files in the upload shot** relies on Livewire accepting `livewire-file:` references set - from the browser; if it does not, that shot shows the empty drop zone with options (step 4). +- **Selecting files in the upload shot** works: the files are stored with Livewire's own + `FileUploadConfiguration::storeTemporaryFile()` and handed to `_finishUpload` by their signed + names; Livewire's temporary-upload cleanup is turned off for the run, because under the frozen + clock it deletes them. - **Comparison accuracy and fairness.** Other products change; the tables are dated and sourced, and re-checked when the site is updated. Swiss unfair-competition law expects comparisons to be accurate and not misleading — values that cannot be sourced stay "—". diff --git a/tests/Feature/WebsiteTest.php b/tests/Feature/WebsiteTest.php new file mode 100644 index 0000000..cffe934 --- /dev/null +++ b/tests/Feature/WebsiteTest.php @@ -0,0 +1,129 @@ + + */ +function websitePages(): array +{ + return [ + 'index.html' => file_get_contents(base_path('website/index.html')), + 'privacy.html' => file_get_contents(base_path('website/privacy.html')), + ]; +} + +/** + * Every URL an HTML document refers to in `src`, `href`, `srcset` and the gallery's `data-*-src` and + * `data-*-srcset`, with each srcset entry on its own. + * + * @return list + */ +function websiteReferences(string $html): array +{ + preg_match_all('/\s(src|href|srcset|data-[a-z]+-src|data-[a-z]+-srcset)="([^"]*)"/', $html, $matches, PREG_SET_ORDER); + + return collect($matches) + ->flatMap(fn (array $match): array => str_ends_with($match[1], 'srcset') + ? array_map(fn (string $candidate): string => strtok(trim($candidate), ' '), explode(',', $match[2])) + : [$match[2]]) + ->map(fn (string $url): string => html_entity_decode($url)) + ->values() + ->all(); +} + +test('every file the pages, their stylesheets and the README refer to exists', function () { + $missing = []; + + foreach (websitePages() as $page => $html) { + foreach (websiteReferences($html) as $url) { + if (preg_match('/^(#|https?:|mailto:)/', $url) === 1) { + continue; + } + + if (! is_file(base_path('website/'.strtok($url, '#?')))) { + $missing[] = "{$page}: {$url}"; + } + } + } + + foreach (glob(base_path('website/css/*.css')) as $stylesheet) { + preg_match_all('/url\([\'"]?([^\'")]+)[\'"]?\)/', file_get_contents($stylesheet), $matches); + + foreach ($matches[1] as $url) { + if (! str_starts_with($url, 'data:') && ! is_file(dirname($stylesheet).'/'.strtok($url, '#?'))) { + $missing[] = basename($stylesheet).": {$url}"; + } + } + } + + foreach (websiteReferences(file_get_contents(base_path('README.md'))) as $url) { + if (str_starts_with($url, 'website/') && ! is_file(base_path($url))) { + $missing[] = "README.md: {$url}"; + } + } + + expect($missing)->toBe([]); +}); + +test('the screenshots are all there, for both themes and both widths', function () { + $expected = collect([ + 'desktop' => ['01-upload', '02-share-created', '03-qr-code', '04-download', '05-admin-dashboard', '06-admin-settings'], + 'phone' => ['01-upload', '02-password', '03-download', '04-qr-code'], + ])->flatMap(fn (array $names, string $device): array => collect(['light', 'dark']) + ->crossJoin($names, $device === 'desktop' ? [1600, 800] : [1080, 540]) + ->map(fn (array $shot): string => "{$device}/{$shot[0]}/{$shot[1]}-{$shot[2]}.webp") + ->all()) + ->sort()->values()->all(); + + $published = collect(glob(base_path('website/img/screenshots/*/*/*.webp'))) + ->map(fn (string $path): string => str($path)->after('website/img/screenshots/')->toString()) + ->sort()->values()->all(); + + expect($published)->toBe($expected); +}); + +test('the pages load nothing from another host but Plausible', function () { + foreach (websitePages() as $page => $html) { + preg_match_all('/<(?:script|img|source|link)\b[^>]*\s(?:src|srcset|href)="(https?:[^"]*)"/', $html, $matches); + + expect(collect($matches[1])->reject(fn (string $url): bool => str_starts_with($url, 'https://plausible.io/'))->all()) + ->toBe([], "{$page} loads from another host"); + } + + foreach (glob(base_path('website/css/*.css')) as $stylesheet) { + expect(file_get_contents($stylesheet))->not->toMatch('/(url\(\s*[\'"]?https?:|@import)/'); + } +}); + +test('the pages are titled, described and in English', function () { + foreach (websitePages() as $page => $html) { + expect($html) + ->toContain('toMatch('/[^<]+<\/title>/') + ->toMatch('/<meta name="description" content="[^"]+"/') + ->toContain('data-domain="sealshare.nonameweb.ch"'); + } +}); + +test('neither the site nor the README calls the encryption end-to-end', function () { + $index = websitePages()['index.html']; + + preg_match('/<section[^>]*id="features".*?<\/section>/s', $index, $features); + preg_match_all('/data-compare="sealshare-e2e">([^<]*)</', $index, $cells); + + expect($features[0])->not->toMatch('/end-to-end/i') + ->and($cells[1])->not->toBeEmpty()->each->toBe('No') + ->and(file_get_contents(base_path('README.md')))->not->toContain('End-to-End Encryption'); +}); + +test('nothing is left to fill in', function () { + foreach ([...websitePages(), 'theme.css' => file_get_contents(base_path('website/css/theme.css'))] as $file => $contents) { + expect(str_contains($contents, 'TODO'))->toBeFalse("{$file} still has a TODO"); + } +}); diff --git a/website/css/device-frame.css b/website/css/device-frame.css new file mode 100644 index 0000000..5e4758a --- /dev/null +++ b/website/css/device-frame.css @@ -0,0 +1,115 @@ +/* + * Device frames drawn around SealShare's screenshots: a laptop for the desktop captures + * (1512 × 982, a MacBook 14 viewport) and a phone for the phone captures (393 × 852, an iPhone 15 + * Pro viewport). The screen keeps the capture's aspect ratio, so the frame holds its shape while an + * image loads. The screenshots come from `composer screenshots` (tests/Screenshots/). + * + * <div class="device device--laptop"> + * <div class="device__screen"><picture>…<img …></picture></div> + * </div> + */ + +.device { + --bezel: #1b1530; + --bezel-edge: #3a3355; + --deck: #c9c2dd; + --deck-shadow: #8f88a8; + + position: relative; + width: 100%; +} + +@media (prefers-color-scheme: dark) { + .device { + --bezel: #05020f; + --bezel-edge: #2a2244; + --deck: #4b426a; + --deck-shadow: #231649; + } +} + +.device__screen { + position: relative; + overflow: hidden; + background: var(--surface-container-high, #e8deff); +} + +.device__screen img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: top center; +} + +/* ---------------------------------------------------------------- laptop */ + +.device--laptop { + padding-bottom: 3.2%; + margin-inline: 4%; + width: auto; +} + +.device--laptop .device__lid { + position: relative; + padding: 2.4% 2.4% 3%; + border-radius: 3.2% 3.2% 0 0 / 4.8% 4.8% 0 0; + background: var(--bezel); + box-shadow: inset 0 0 0 1px var(--bezel-edge), 0 24px 48px -24px rgb(16 6 45 / 0.45); +} + +.device--laptop .device__screen { + aspect-ratio: 1512 / 982; + border-radius: 0.6%; +} + +/* The camera notch at the top of the lid. */ +.device--laptop .device__lid::before { + content: ''; + position: absolute; + top: 0.9%; + left: 50%; + width: 1%; + aspect-ratio: 1; + border-radius: 50%; + background: var(--bezel-edge); + translate: -50% 0; +} + +/* The deck: wider than the lid, with a thumb recess in the middle. */ +.device--laptop::after { + content: ''; + position: absolute; + left: -4%; + right: -4%; + bottom: 0; + height: 3.2%; + border-radius: 0 0 40% 40% / 0 0 100% 100%; + background: linear-gradient(var(--deck), var(--deck-shadow)); +} + +.device--laptop::before { + content: ''; + position: absolute; + left: 50%; + bottom: 1.8%; + z-index: 1; + width: 14%; + height: 1.4%; + border-radius: 0 0 12px 12px; + background: var(--deck-shadow); + translate: -50% 0; +} + +/* ---------------------------------------------------------------- phone */ + +.device--phone { + padding: 3.4%; + border-radius: 15% / 7%; + background: var(--bezel); + box-shadow: inset 0 0 0 2px var(--bezel-edge), 0 24px 48px -20px rgb(16 6 45 / 0.5); +} + +.device--phone .device__screen { + aspect-ratio: 393 / 852; + border-radius: 12.5% / 5.8%; +} diff --git a/website/css/theme.css b/website/css/theme.css new file mode 100644 index 0000000..6d5d1ce --- /dev/null +++ b/website/css/theme.css @@ -0,0 +1,1357 @@ +/* + * SealShare website theme. + * + * The colours are not an approximation of the app's: they are copied from + * resources/css/material-scheme.json, generated by `php artisan material:scheme "#4f46e5" + * --variant=vibrant` (Material 3, spec 2025, contrast 0). When the scheme is regenerated, copy the + * roles below again — the site does not read the file. Light is the default, dark follows the + * visitor's system setting; the site has no theme toggle of its own. + * + * Shared by index.html and privacy.html. + */ + +/* Google Sans Flex, the app's typeface, served from this site (SIL OFL 1.1, fonts/OFL.txt) — not + from Google, which would hand every visitor's IP address to Google. The same cut the app ships: + Latin and Latin Extended, weight 400–700. */ +@font-face { + font-family: 'Google Sans Flex'; + src: url('../fonts/GoogleSansFlex-Latin.woff2') format('woff2'); + font-weight: 400 700; + font-style: normal; + font-display: swap; +} + +:root { + color-scheme: light dark; + + --surface: #faf4ff; + --surface-container-lowest: #ffffff; + --surface-container-low: #f5eeff; + --surface-container: #ede4ff; + --surface-container-high: #e8deff; + --surface-container-highest: #e2d7ff; + --on-surface: #32294f; + --on-surface-variant: #5f557f; + --outline: #7b719c; + --outline-variant: #b2a6d5; + --inverse-surface: #10062d; + --inverse-on-surface: #a296c4; + --primary: #4a3fe2; + --on-primary: #f4f1ff; + --primary-container: #9795ff; + --on-primary-container: #14007e; + --secondary: #6249b2; + --secondary-container: #d8caff; + --on-secondary-container: #4e339c; + --tertiary-container: #fd8bca; + --on-tertiary-container: #610244; + --success: #006c45; + --error: #b41340; + + /* The code block reads as a terminal in both themes. */ + --code-surface: #10062d; + --code-ink: #eae1ff; + + --font: 'Google Sans Flex', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; + --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; + + --corner-sm: 8px; + --corner-md: 12px; + --corner-lg: 16px; + --corner-xl: 28px; + --corner-xxl: 48px; + --corner-full: 999px; + + --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15); + --shadow-3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3); + + --ease-spatial: cubic-bezier(0.38, 1.21, 0.22, 1); + --ease-effects: cubic-bezier(0.34, 0.8, 0.34, 1); + + --container: 1200px; + --gutter: clamp(16px, 4vw, 32px); +} + +@media (prefers-color-scheme: dark) { + :root { + --surface: #10062d; + --surface-container-lowest: #000000; + --surface-container-low: #160b36; + --surface-container: #1c113f; + --surface-container-high: #231649; + --surface-container-highest: #291c53; + --on-surface: #eae1ff; + --on-surface-variant: #b0a4d3; + --outline: #7a6f9b; + --outline-variant: #4b426a; + --inverse-surface: #fdf7ff; + --inverse-on-surface: #594f78; + --primary: #a7a5ff; + --on-primary: #1c00a0; + --primary-container: #9795ff; + --on-primary-container: #14007e; + --secondary: #a98ffd; + --secondary-container: #4d329b; + --on-secondary-container: #d6c9ff; + --tertiary-container: #fa88c8; + --on-tertiary-container: #5e0042; + --success: #69dca1; + --error: #ff6e84; + + --code-surface: #000000; + --code-ink: #eae1ff; + } +} + +/* ---------------------------------------------------------------- base */ + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; + scroll-padding-top: 88px; + -webkit-text-size-adjust: 100%; +} + +body { + margin: 0; + background: var(--surface); + color: var(--on-surface); + font-family: var(--font); + font-size: 16px; + line-height: 1.5; + letter-spacing: 0.01em; + -webkit-font-smoothing: antialiased; +} + +img, +svg { + display: block; + max-width: 100%; +} + +a { + color: var(--primary); + text-underline-offset: 3px; +} + +a:hover { + text-decoration-thickness: 2px; +} + +:focus-visible { + outline: 3px solid var(--primary); + outline-offset: 3px; + border-radius: var(--corner-sm); +} + +h1, +h2, +h3 { + margin: 0; + font-weight: 500; + letter-spacing: 0; + text-wrap: balance; +} + +p { + margin: 0; + text-wrap: pretty; +} + +code { + font-family: var(--mono); + font-size: 0.9em; +} + +.icon { + width: 24px; + height: 24px; + flex-shrink: 0; + fill: currentColor; +} + +[hidden] { + display: none !important; +} + +/* The icon and shape sprite at the top of each page: symbols only, nothing drawn. */ +.sprite { + position: absolute; + width: 0; + height: 0; + overflow: hidden; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; +} + +.skip-link { + position: absolute; + top: 8px; + left: 8px; + z-index: 100; + padding: 12px 20px; + border-radius: var(--corner-full); + background: var(--primary); + color: var(--on-primary); + font-weight: 500; + translate: 0 -200%; +} + +.skip-link:focus-visible { + translate: 0 0; +} + +.container { + width: 100%; + max-width: var(--container); + margin-inline: auto; + padding-inline: var(--gutter); +} + +/* ---------------------------------------------------------------- type */ + +.display { + font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); + line-height: 1.06; + font-weight: 500; + letter-spacing: -0.02em; +} + +.headline { + font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); + line-height: 1.15; + letter-spacing: -0.01em; +} + +.title { + font-size: 1.375rem; + line-height: 1.27; +} + +.lede { + color: var(--on-surface-variant); + font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); + line-height: 1.5; +} + +.eyebrow { + display: inline-flex; + justify-self: start; + width: fit-content; + align-items: center; + gap: 8px; + padding: 6px 14px; + border-radius: var(--corner-full); + background: var(--secondary-container); + color: var(--on-secondary-container); + font-size: 0.875rem; + font-weight: 500; + letter-spacing: 0.02em; +} + +.eyebrow .icon { + width: 18px; + height: 18px; +} + +/* ---------------------------------------------------------------- buttons */ + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 48px; + padding: 12px 24px; + border: 1px solid transparent; + border-radius: var(--corner-full); + font: inherit; + font-size: 1rem; + font-weight: 500; + line-height: 1.25; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + transition: border-radius 250ms var(--ease-spatial), background-color 150ms var(--ease-effects); +} + +.btn:hover { + text-decoration: none; +} + +.btn:active { + border-radius: var(--corner-md); +} + +.btn .icon { + width: 20px; + height: 20px; +} + +.btn--filled { + background: var(--primary); + color: var(--on-primary); +} + +.btn--filled:hover { + background: color-mix(in srgb, var(--primary) 88%, var(--on-primary)); +} + +.btn--tonal { + background: var(--secondary-container); + color: var(--on-secondary-container); +} + +.btn--tonal:hover { + background: color-mix(in srgb, var(--secondary-container) 88%, var(--on-secondary-container)); +} + +.btn--outlined { + border-color: var(--outline-variant); + color: var(--primary); +} + +.btn--outlined:hover { + background: color-mix(in srgb, var(--primary) 8%, transparent); +} + +.btn--lg { + min-height: 56px; + padding: 16px 28px; + font-size: 1.0625rem; +} + +/* ---------------------------------------------------------------- nav */ + +.nav { + position: sticky; + top: 0; + z-index: 50; + background: color-mix(in srgb, var(--surface) 86%, transparent); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 45%, transparent); +} + +.nav__bar { + display: flex; + align-items: center; + gap: 16px; + min-height: 72px; +} + +.brand { + display: inline-flex; + align-items: center; + gap: 10px; + color: var(--on-surface); + font-size: 1.375rem; + font-weight: 500; + text-decoration: none; +} + +.brand:hover { + text-decoration: none; +} + +.brand svg { + width: 32px; + height: 32px; + color: var(--primary); +} + +.nav__bar > nav { + margin-left: auto; +} + +.nav__links { + display: flex; + align-items: center; + gap: 4px; + margin: 0; + padding: 0; + list-style: none; +} + +.nav__links a { + display: inline-flex; + align-items: center; + min-height: 40px; + padding: 8px 14px; + border-radius: var(--corner-full); + color: var(--on-surface-variant); + font-size: 0.9375rem; + font-weight: 500; + text-decoration: none; +} + +.nav__links a:hover { + background: color-mix(in srgb, var(--on-surface) 8%, transparent); + color: var(--on-surface); +} + +.nav__links .btn { + margin-left: 8px; + color: var(--on-primary); +} + +.nav__links .btn:hover { + color: var(--on-primary); + background: color-mix(in srgb, var(--primary) 88%, var(--on-primary)); +} + +.nav__toggle { + display: none; + margin-left: auto; + width: 48px; + height: 48px; + align-items: center; + justify-content: center; + border: 0; + border-radius: var(--corner-full); + background: transparent; + color: var(--on-surface); + cursor: pointer; +} + +.nav__toggle:hover { + background: color-mix(in srgb, var(--on-surface) 8%, transparent); +} + +.nav__toggle .icon-close { + display: none; +} + +.nav__toggle[aria-expanded="true"] .icon-menu { + display: none; +} + +.nav__toggle[aria-expanded="true"] .icon-close { + display: block; +} + +@media (max-width: 960px) { + .nav__toggle { + display: inline-flex; + } + + .nav__links { + position: absolute; + top: 100%; + left: var(--gutter); + right: var(--gutter); + display: none; + flex-direction: column; + align-items: stretch; + gap: 2px; + margin: 8px 0 0; + padding: 8px; + border-radius: var(--corner-xl); + background: var(--surface-container); + box-shadow: var(--shadow-3); + } + + .nav__links.is-open { + display: flex; + } + + .nav__links a { + min-height: 48px; + padding: 12px 16px; + font-size: 1rem; + } + + .nav__bar > nav { + margin-left: 0; + } + + .nav__links .btn { + width: 100%; + margin: 8px 0 0; + } +} + +/* ---------------------------------------------------------------- hero */ + +.hero { + position: relative; + overflow: clip; + padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); +} + +.hero__grid { + display: grid; + grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); + align-items: center; + gap: clamp(32px, 5vw, 72px); +} + +.hero__copy { + display: grid; + gap: 24px; + justify-items: start; +} + +.hero__actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 8px; +} + +.hero__facts { + display: flex; + flex-wrap: wrap; + gap: 8px 20px; + margin: 8px 0 0; + padding: 0; + list-style: none; + color: var(--on-surface-variant); + font-size: 0.9375rem; +} + +.hero__facts li { + display: inline-flex; + align-items: center; + gap: 6px; +} + +.hero__facts .icon { + width: 18px; + height: 18px; + color: var(--success); +} + +.hero__visual { + position: relative; + padding: 0 0 48px; +} + +.hero__visual .device--phone { + position: absolute; + right: -2%; + bottom: 0; + width: 25%; +} + +.hero__shape { + position: absolute; + z-index: -1; + fill: currentColor; + color: var(--secondary-container); + opacity: 0.7; +} + +.hero__shape--one { + top: -8%; + right: -6%; + width: 46%; + rotate: 12deg; +} + +.hero__shape--two { + bottom: -4%; + left: -10%; + width: 30%; + color: var(--tertiary-container); + opacity: 0.35; +} + +@media (max-width: 960px) { + .hero__grid { + grid-template-columns: 1fr; + } + + .hero__visual { + padding-bottom: 36px; + } +} + +/* ---------------------------------------------------------------- sections */ + +.section { + padding-block: clamp(56px, 8vw, 104px); + overflow-x: clip; +} + +.section--tint { + background: var(--surface-container-low); +} + +.section__head { + display: grid; + gap: 16px; + max-width: 760px; + margin-bottom: clamp(32px, 5vw, 56px); +} + +.section__head--center { + margin-inline: auto; + text-align: center; + justify-items: center; +} + +/* "Why run your own": a statement beside four reasons. */ +.why { + display: grid; + grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); + gap: clamp(32px, 5vw, 72px); + align-items: start; +} + +.why__statement { + position: sticky; + top: 104px; + display: grid; + gap: 20px; +} + +.reasons { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} + +.reason { + display: grid; + gap: 12px; + align-content: start; + padding: 28px; + border-radius: var(--corner-xl); + background: var(--surface-container); +} + +.reason:nth-child(1) { + border-radius: var(--corner-xxl) var(--corner-xl) var(--corner-xl) var(--corner-xl); +} + +.reason:nth-child(4) { + border-radius: var(--corner-xl) var(--corner-xl) var(--corner-xxl) var(--corner-xl); +} + +.reason p { + color: var(--on-surface-variant); +} + +@media (max-width: 960px) { + .why { + grid-template-columns: 1fr; + } + + .why__statement { + position: static; + } +} + +@media (max-width: 600px) { + .reasons { + grid-template-columns: 1fr; + } +} + +/* An icon on an M3 Expressive shape. */ +.badge-icon { + position: relative; + display: grid; + place-items: center; + width: 56px; + height: 56px; + color: var(--on-primary-container); +} + +.badge-icon > svg:first-child { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + color: var(--primary-container); + fill: currentColor; +} + +.badge-icon .icon { + position: relative; + width: 26px; + height: 26px; +} + +.badge-icon--secondary { + color: var(--on-secondary-container); +} + +.badge-icon--secondary > svg:first-child { + color: var(--secondary-container); +} + +.badge-icon--tertiary { + color: var(--on-tertiary-container); +} + +.badge-icon--tertiary > svg:first-child { + color: var(--tertiary-container); +} + +/* How it works: three steps. */ +.steps { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; + margin: 0; + padding: 0; + list-style: none; + counter-reset: step; +} + +.step { + position: relative; + display: grid; + gap: 14px; + align-content: start; + padding: 32px 28px 28px; + border-radius: var(--corner-xl); + background: var(--surface-container-lowest); + counter-increment: step; +} + +@media (prefers-color-scheme: dark) { + .step { + background: var(--surface-container); + } +} + +.step::before { + content: counter(step); + position: absolute; + top: 24px; + right: 28px; + color: var(--outline-variant); + font-size: 3rem; + font-weight: 500; + line-height: 1; +} + +.step p { + color: var(--on-surface-variant); +} + +@media (max-width: 840px) { + .steps { + grid-template-columns: 1fr; + } +} + +/* Features. */ +.features { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 16px; +} + +.feature { + display: grid; + grid-template-columns: auto 1fr; + gap: 4px 16px; + align-content: start; + padding: 24px; + border-radius: var(--corner-xl); + background: var(--surface-container-low); +} + +.section--tint .feature { + background: var(--surface-container); +} + +.feature .badge-icon { + grid-row: span 2; + width: 48px; + height: 48px; +} + +.feature .badge-icon .icon { + width: 22px; + height: 22px; +} + +.feature h3 { + align-self: end; + font-size: 1.0625rem; + line-height: 1.4; +} + +.feature p { + color: var(--on-surface-variant); + font-size: 0.9375rem; +} + +@media (max-width: 960px) { + .features { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 600px) { + .features { + grid-template-columns: 1fr; + } +} + +/* ---------------------------------------------------------------- gallery */ + +.gallery__controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px 16px; + margin-bottom: 40px; +} + +/* M3 segmented buttons. */ +.segmented { + display: inline-flex; + border: 1px solid var(--outline); + border-radius: var(--corner-full); +} + +.segmented button { + display: inline-flex; + align-items: center; + gap: 6px; + min-height: 40px; + padding: 8px 18px; + border: 0; + background: transparent; + color: var(--on-surface); + font: inherit; + font-size: 0.875rem; + font-weight: 500; + cursor: pointer; +} + +.segmented button + button { + border-left: 1px solid var(--outline); +} + +.segmented button:first-child { + border-radius: var(--corner-full) 0 0 var(--corner-full); +} + +.segmented button:last-child { + border-radius: 0 var(--corner-full) var(--corner-full) 0; +} + +.segmented button:hover { + background: color-mix(in srgb, var(--on-surface) 8%, transparent); +} + +.segmented button[aria-pressed="true"] { + background: var(--secondary-container); + color: var(--on-secondary-container); +} + +.segmented .icon { + display: none; + width: 18px; + height: 18px; +} + +.segmented button[aria-pressed="true"] .icon { + display: block; +} + +.gallery { + display: grid; + gap: 40px 32px; + margin: 0; + padding: 0; + list-style: none; +} + +.gallery--desktop { + grid-template-columns: repeat(2, minmax(0, 1fr)); + column-gap: clamp(40px, 6vw, 88px); +} + +.gallery--phone { + grid-template-columns: repeat(4, minmax(0, 1fr)); + max-width: 1040px; + margin-inline: auto; +} + +.gallery[hidden] { + display: none; +} + +.shot { + display: grid; + gap: 16px; + margin: 0; +} + +.shot figcaption { + display: grid; + gap: 2px; + text-align: center; +} + +.shot figcaption strong { + font-weight: 500; +} + +.shot figcaption span { + color: var(--on-surface-variant); + font-size: 0.9375rem; +} + +@media (max-width: 840px) { + .gallery--desktop { + grid-template-columns: 1fr; + } + + .gallery--phone { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 32px 20px; + } +} + +/* ---------------------------------------------------------------- compare */ + +.compare { + display: grid; + gap: 48px; +} + +.compare__block { + display: grid; + gap: 16px; +} + +.compare__block h3 { + font-size: 1.375rem; +} + +.compare__block > p { + color: var(--on-surface-variant); +} + +.table-scroll { + overflow-x: auto; + border: 1px solid var(--outline-variant); + border-radius: var(--corner-xl); + background: var(--surface-container-lowest); + -webkit-overflow-scrolling: touch; +} + +@media (prefers-color-scheme: dark) { + .table-scroll { + background: var(--surface-container-low); + } +} + +.table-scroll:focus-visible { + outline-offset: 2px; + border-radius: var(--corner-xl); +} + +.compare table { + width: 100%; + min-width: 860px; + border-collapse: separate; + border-spacing: 0; + font-size: 0.9375rem; +} + +.compare caption { + padding: 14px 20px; + border-bottom: 1px solid var(--outline-variant); + color: var(--on-surface-variant); + font-size: 0.875rem; + text-align: left; +} + +.compare th, +.compare td { + padding: 12px 16px; + border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent); + text-align: left; + vertical-align: top; +} + +.compare tbody tr:last-child > * { + border-bottom: 0; +} + +.compare thead th { + color: var(--on-surface); + font-weight: 500; + white-space: nowrap; +} + +.compare tbody th { + position: sticky; + left: 0; + z-index: 1; + min-width: 170px; + background: var(--surface-container-lowest); + color: var(--on-surface-variant); + font-weight: 500; +} + +@media (prefers-color-scheme: dark) { + .compare tbody th { + background: var(--surface-container-low); + } +} + +.compare thead th:first-child { + position: sticky; + left: 0; + z-index: 2; + background: inherit; +} + +.compare thead tr { + background: var(--surface-container-lowest); +} + +@media (prefers-color-scheme: dark) { + .compare thead tr { + background: var(--surface-container-low); + } +} + +/* SealShare's own column. */ +.compare .is-us { + background: color-mix(in srgb, var(--secondary-container) 55%, transparent); + color: var(--on-surface); +} + +.compare thead .is-us { + color: var(--on-secondary-container); +} + +.compare__sources { + display: grid; + gap: 6px; + margin: 0; + padding-left: 20px; + color: var(--on-surface-variant); + font-size: 0.875rem; + overflow-wrap: anywhere; +} + +.compare__note { + color: var(--on-surface-variant); + font-size: 0.875rem; +} + +/* The numbered notes under the tables read as one block. */ +.compare__notes { + display: grid; + gap: 8px; +} + +.compare__notes sup, +.compare td sup { + line-height: 0; +} + +/* ---------------------------------------------------------------- install */ + +.install { + display: grid; + grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); + gap: clamp(32px, 5vw, 64px); + align-items: start; +} + +.install__copy { + display: grid; + gap: 20px; + justify-items: start; +} + +.install__list { + display: grid; + gap: 12px; + margin: 0; + padding: 0; + list-style: none; +} + +.install__list li { + display: grid; + grid-template-columns: auto 1fr; + gap: 12px; + color: var(--on-surface-variant); +} + +.install__list .icon { + width: 22px; + height: 22px; + color: var(--primary); +} + +.code { + overflow: hidden; + border-radius: var(--corner-xl); + background: var(--code-surface); + color: var(--code-ink); + box-shadow: var(--shadow-1); +} + +.code__bar { + display: flex; + align-items: center; + gap: 8px; + padding: 14px 20px; + border-bottom: 1px solid rgb(255 255 255 / 0.1); + color: rgb(234 225 255 / 0.7); + font-size: 0.875rem; +} + +.code__bar .icon { + width: 18px; + height: 18px; +} + +.code pre { + margin: 0; + padding: 20px; + overflow-x: auto; + font-family: var(--mono); + font-size: 0.875rem; + line-height: 1.7; +} + +.code .comment { + color: rgb(234 225 255 / 0.55); +} + +@media (max-width: 960px) { + .install { + grid-template-columns: 1fr; + } +} + +/* ---------------------------------------------------------------- faq */ + +.faq { + display: grid; + gap: 8px; + max-width: 860px; + margin-inline: auto; +} + +.faq details { + border-radius: var(--corner-lg); + background: var(--surface-container); + transition: border-radius 250ms var(--ease-spatial); +} + +.faq details[open] { + border-radius: var(--corner-xl); +} + +.faq summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 64px; + padding: 16px 24px; + border-radius: inherit; + font-size: 1.0625rem; + font-weight: 500; + cursor: pointer; + list-style: none; +} + +.faq summary::-webkit-details-marker { + display: none; +} + +.faq summary .icon { + color: var(--on-surface-variant); + transition: rotate 250ms var(--ease-spatial); +} + +.faq details[open] summary .icon { + rotate: 180deg; +} + +.faq__answer { + display: grid; + gap: 12px; + padding: 0 24px 24px; + color: var(--on-surface-variant); +} + +/* ---------------------------------------------------------------- contact */ + +.contact { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 24px; + padding: clamp(28px, 5vw, 48px); + border-radius: var(--corner-xxl); + background: var(--primary-container); + color: var(--on-primary-container); +} + +.contact > div { + display: grid; + gap: 10px; +} + +.contact p { + opacity: 0.9; +} + +.contact a:not(.btn) { + display: inline-flex; + align-items: center; + gap: 8px; + color: inherit; + font-weight: 500; +} + +.contact .btn--filled { + background: var(--on-primary-container); + color: var(--primary-container); +} + +.contact .btn--filled:hover { + background: color-mix(in srgb, var(--on-primary-container) 88%, var(--primary-container)); +} + +/* ---------------------------------------------------------------- footer */ + +.footer { + padding-block: 56px 40px; + background: var(--surface-container-low); + color: var(--on-surface-variant); + font-size: 0.9375rem; +} + +.footer__grid { + display: grid; + grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); + gap: 32px; +} + +.footer__blurb { + max-width: 380px; + margin-top: 12px; +} + +.footer h2 { + margin-bottom: 12px; + color: var(--on-surface); + font-size: 1rem; +} + +.footer ul { + display: grid; + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.footer a { + color: var(--on-surface-variant); + text-decoration: none; +} + +.footer a:hover { + color: var(--on-surface); + text-decoration: underline; +} + +.footer__bottom { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + gap: 8px 24px; + margin-top: 40px; + padding-top: 24px; + border-top: 1px solid var(--outline-variant); + font-size: 0.875rem; +} + +@media (max-width: 720px) { + .footer__grid { + grid-template-columns: 1fr 1fr; + } + + .footer__grid > :first-child { + grid-column: 1 / -1; + } +} + +/* ---------------------------------------------------------------- legal page */ + +.legal { + padding-block: clamp(40px, 6vw, 80px); +} + +.legal article { + display: grid; + gap: 16px; + max-width: 760px; + margin-inline: auto; +} + +.legal h1 { + margin-bottom: 4px; +} + +.legal h2 { + margin-top: 24px; + font-size: 1.375rem; +} + +.legal p, +.legal li { + color: var(--on-surface-variant); +} + +.legal ul { + display: grid; + gap: 8px; + margin: 0; + padding-left: 22px; +} + +.legal .meta { + color: var(--on-surface-variant); + font-size: 0.9375rem; +} + +/* ---------------------------------------------------------------- motion */ + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + } +} diff --git a/website/fonts/GoogleSansFlex-Latin.woff2 b/website/fonts/GoogleSansFlex-Latin.woff2 new file mode 100644 index 0000000..7cda816 Binary files /dev/null and b/website/fonts/GoogleSansFlex-Latin.woff2 differ diff --git a/website/fonts/OFL.txt b/website/fonts/OFL.txt new file mode 100644 index 0000000..38d9750 --- /dev/null +++ b/website/fonts/OFL.txt @@ -0,0 +1,91 @@ +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/website/img/favicon.svg b/website/img/favicon.svg new file mode 100644 index 0000000..2c9a1af --- /dev/null +++ b/website/img/favicon.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="24" height="24"> + <!-- Document outline with folded corner --> + <path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z" fill="#6366f1" stroke="#4f46e5" stroke-width="0.5" /> + <path d="M14 2v5a1 1 0 0 0 1 1h5" fill="#818cf8" stroke="#4f46e5" stroke-width="0.5" /> + <!-- Upload arrow --> + <path d="M12 17v-6m0 0-2.5 2.5M12 11l2.5 2.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> +</svg> diff --git a/website/img/icon.png b/website/img/icon.png new file mode 100644 index 0000000..77176d5 Binary files /dev/null and b/website/img/icon.png differ diff --git a/website/img/logo.svg b/website/img/logo.svg new file mode 100644 index 0000000..6e6ba80 --- /dev/null +++ b/website/img/logo.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" width="96" height="96"> + <!-- The SealShare mark: a document with a folded corner and an upload arrow (resources/views/components/app-logo-icon.blade.php). --> + <path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z" stroke="#4a3fe2" stroke-width="1.5" /> + <path d="M14 2v5a1 1 0 0 0 1 1h5" stroke="#4a3fe2" stroke-width="1.5" /> + <path d="M12 17v-6m0 0-2.5 2.5M12 11l2.5 2.5" stroke="#4a3fe2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> +</svg> diff --git a/website/index.html b/website/index.html new file mode 100644 index 0000000..55780f4 --- /dev/null +++ b/website/index.html @@ -0,0 +1,712 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>SealShare — your own secure upload platform + + + + + + + + + + + + + + + + + + + + +
+
+ SealShare + + +
+
+ +
+ +
+
+
+ Self-hosted · Open source +

Your own secure upload platform

+

SealShare is file sharing software you install on your own server. Your company gets its own upload page to send files to customers and receive files from them — encrypted at rest, on your domain, without relying on an outside service.

+
+ Install SealShare + Source on Gitea +
+
    +
  • No accounts for customers
    • +
  • Encrypted at rest
    • +
  • One Docker image
    • +
+
+
+ + +
+
+
+ + + SealShare's upload page with files selected and share options + +
+
+
+
+
+ + + The download page on a phone + +
+
+
+
+
+ +
+
+
+ Why run your own +

Stop routing your customers' files through someone else's service

+

Transfer services are quick, but every file you exchange with a customer ends up on their servers, under their terms. SealShare is a simple setup for your own upload platform: a secure way to get data from customers and share data with them, entirely under your control.

+
+
+
+ +

Your server, your data

+

Files are stored on infrastructure you control, in the country you choose — not with a transfer service.

+
+
+ +

No accounts for customers

+

Customers open a link and download. Nobody has to sign up anywhere.

+
+
+ +

Your name on it

+

Your domain, and your logo, title and description on the upload page.

+
+
+ +

No per-user pricing

+

Open source under the MIT licence. Use it for the whole company, without seats or subscriptions.

+
+
+
+
+ +
+
+
+

How it works

+

Three steps, for you and for the people you share with.

+
+
    +
  1. + +

    Upload

    +

    Drop files or whole folders. Add a password, an expiry and a download limit if you want.

    +
    2. +
  2. + +

    Share

    +

    Copy the link, show it as a QR code, or send it from your phone's share sheet.

    +
    3. +
  3. + +

    Download

    +

    Your customer opens the link and downloads single files or everything as a ZIP. Expired shares delete themselves.

    +
    4. +
+
+
+ +
+
+
+ Features +

Everything a file exchange with customers needs

+

And nothing that turns it into a project: SealShare runs from a single container and is set up in a few minutes. It follows your system's light or dark theme, on desktop and phone.

+
+
+
+ +

Files and folders

+

Drag & drop or browse; folders keep their structure, with live upload progress.

+
+
+ +

A link per share

+

Every upload gets its own random, hard-to-guess link.

+
+
+ +

QR code and share sheet

+

Show the link as a QR code, save it as a PNG, or pass it to the phone's share sheet.

+
+
+ +

Password protection

+

Protect a share with a password; its encryption key is derived from it.

+
+
+ +

Encrypted at rest

+

Encrypted at rest with AES-256-GCM; with a share password the key is never stored.

+
+
+ +

Expiry

+

From 1 hour to 30 days, or never when the admin allows it.

+
+
+ +

Download limits

+

Close a share after a set number of downloads.

+
+
+ +

ZIP download

+

Recipients download everything in one archive.

+
+
+ +

Automatic clean-up

+

Expired shares and their files are deleted every hour.

+
+
+ +

Admin dashboard

+

Every share with its size, downloads and expiry; storage use at a glance.

+
+
+ +

Limits and quota

+

Maximum file and share size, files per share, storage quota, default expiry.

+
+
+ +

Your branding

+

Your logo, site title and description on the upload page.

+
+
+ +

System password

+

Optionally close the upload page to everyone who does not have the password.

+
+
+ +

Two-factor sign-in

+

Admins protect their accounts with authenticator app codes.

+
+
+ +

One Docker image

+

FrankenPHP with Laravel Octane, automatic TLS and SQLite — no separate database.

+
+
+
+
+ +
+
+
+

See it in action

+

The same interface on a laptop and a phone, in light or dark.

+
+
+
+ + +
+
+ + +
+
+
    +
  • +
    +
    +
    +
    + The upload page with two files selected and the share options filled in +
    +
    +
    +
    Upload files and foldersDrag & drop, then set a password, an expiry and a download limit.
    +
    +
    • +
  • +
    +
    +
    +
    + The share created page with the share link, its details and the QR code button +
    +
    +
    +
    Share the linkCopy it, show it as a QR code or send it from the share sheet.
    +
    +
    • +
  • +
    +
    +
    +
    + The QR code dialog for a new share, with a Download button +
    +
    +
    +
    A QR code for the linkScan it from the screen, or save it as a PNG.
    +
    +
    • +
  • +
    +
    +
    +
    + The download page a recipient sees, listing the shared files +
    +
    +
    +
    Your customer downloadsSingle files or everything as a ZIP, without an account.
    +
    +
    • +
  • +
    +
    +
    +
    + The admin dashboard with share statistics, disk usage and the table of shares +
    +
    +
    +
    Admin dashboardEvery share, its size, downloads and expiry at a glance.
    +
    +
    • +
  • +
    +
    +
    +
    + The admin settings page with branding and upload limits +
    +
    +
    +
    Admin settingsUpload limits, storage quota, your logo and title.
    +
    +
    • +
+ +
+
+ +
+
+
+ Compare +

How SealShare compares

+

Hosted transfer services keep your files on their servers; other self-hosted tools do the same job in their own way. Every value below comes from the product's own website, documentation or repository.

+
+
+
+

Hosted transfer services

+

Quick to use, but the files sit with the provider, under the provider's terms.

+
+ + + + + + + + + + + + + + + + + + +
SealShare and hosted transfer services · As of September 2026
SealShareWeTransferSwissTransferDropbox TransferGoogle Drive links
Files storedYour serverWeTransfer's cloud (EU or US)Infomaniak, SwitzerlandDropbox's cloud (US by default)Google's cloud
Operated byYouWeTransferInfomaniakDropboxGoogle
Recipient needs an accountNoNoNoNoNo, with “Anyone with the link”
Password protectionYesYes1YesStandard plan and up—
Link expiryYes, 1 hour to 30 days, or neverUp to 3 or 7 days on Free11 to 30 days47 days; custom on Standard and upWork or school accounts only
Download limitYes—Yes, 1 to 250——
Encryption at restYes, AES-256-GCMYes, AES-256Yes, AES-256Yes, AES-256Yes, AES-256
End-to-end encryptionNoEnterprise add-onNoNoHigher Workspace editions
Folder uploadYesNo, folders are flattenedYesYesYes
Custom brandingYes: logo, title, descriptionUltimate plan and upThrough paid kDriveStandard plan and up—
Maximum file sizeSet by you (server limits)3 GB or 100 GB a month on Free150 GB per transfer2 GB on Basic (free)15 GB of free storage
Licence and costMIT, freeFree (non-commercial use); Starter USD 8/month2FreeFree; Plus EUR 11.99/month2Free; 100 GB CHF 2/month2
QR code for the linkYes————
+
+
+
+

Self-hosted share tools

+

Open-source apps you run yourself, like SealShare. Included are single-purpose tools that install with Docker and had a release in the last 12 months.

+
+ + + + + + + + + + + + + + + + + + +
SealShare and other self-hosted share tools · As of September 2026
SealSharePingvin Share XPsiTransferGokapiErugo
Files storedYour serverYour server or S3Your serverYour server or S3Your server
Operated byYouYouYouYouYou
Recipient needs an accountNoNoNoNoNo
Password protectionYesYesYesYesYes
Link expiryYes, 1 hour to 30 days, or neverYes, up to a maximum you setYes, 1 hour to 8 weeksYes, after days or downloadsYes, 7 days by default
Download limitYesView limit onlyOne-time download onlyYesYes
Encryption at restYes, AES-256-GCMNoNoOptionalNo
End-to-end encryptionNoNoNoOptionalNo
Folder uploadYesYesNoNo, files are listed singly3Yes, keeps structure
Custom brandingYes: logo, title, descriptionYes: logo, name, colours, CSSYes, by editing templatesYes: logo, CSS, JavaScriptYes: logo, colours, themes
Maximum file sizeSet by you (server limits)Set by you (1 GB per share by default)Set by you (no limit by default)Set by you (100 GB by default)Set by you (2 GB per share by default)
Licence and costMIT, freeBSD-2-Clause, freeBSD-2-Clause, freeAGPL-3.0, freeMIT, free
QR code for the linkYesYesYesYesNo
+
+
+

SealShare encrypts files on the server as they arrive. With a share password the key is never stored; without one it is kept in SealShare's database. A value marked “—” could not be confirmed from the product's own sources. Checked on 13 September 2026.

+
+

1 WeTransfer's pricing page and its help centre disagree. The pricing page lists password protection on every plan, expiry up to 7 days and up to 100 GB a month on Free; the help centre (May 2026) lists password protection under Ultimate, expiry up to 3 days, and up to 10 transfers or 3 GB in 30 days on Free.

+

2 The cheapest paid plan, at the price shown in Switzerland on the date above; prices differ by country. WeTransfer's Free plan is for individual, non-commercial use. Dropbox Plus has no passwords or branding for transfers; Google One 100 GB adds storage, not sharing features.

+

3 Gokapi's web interface lists the files of a dropped folder one by one; its command-line client uploads a folder as a ZIP file.

+

4 SwissTransfer's upload form offers 1, 3, 7, 15 or 30 days; Infomaniak's help articles describe 15 days, with an extension to 30 days offered to the sender by email.

+
+
+

Sources

+ +
+
+
+
+ +
+
+
+ Install +

Running in a few minutes

+

All you need is a server with Docker and a domain name.

+
    +
  • The image includes the web server with automatic TLS certificates, and uses SQLite — no separate database.
    • +
  • Migrations run on start. Open your domain and the setup wizard creates the first admin account.
    • +
  • Your files and database live in Docker volumes on your server.
    • +
+ Full instructions on Gitea +
+
+
Production, with Docker Compose
+
mkdir sealshare && cd sealshare
+curl -O https://raw.githubusercontent.com/surtic86/SealShare/main/docker-compose.example.yml
+cp docker-compose.example.yml docker-compose.yml
+
+# Generate an app key and paste it into docker-compose.yml
+docker run --rm ghcr.io/surtic86/sealshare:latest php artisan key:generate --show
+
+# Edit docker-compose.yml — set APP_KEY, APP_URL, and SERVER_NAME
+# Then start:
+docker compose up -d
+
+
+
+ +
+
+
+

Frequently asked questions

+
+
+
+ Is SealShare end-to-end encrypted? +
+

No. SealShare encrypts files on your server as they arrive, with AES-256-GCM in chunks, and stores them only in encrypted form. Because the server does the encrypting, it handles the files in the clear while they are uploaded and downloaded — which is why it matters that the server is yours.

+

For a share without a password the key is kept in SealShare's database. With a share password the key is derived from that password and never stored, so the files cannot be decrypted without it.

+
+
+
+ Can customers send files to us? +
+

Yes. Anyone who can open your upload page can upload and gets a link to send back to you. To keep the page for the people you choose, turn on the optional system password in the admin settings and give it to your customers.

+
+
+
+ How big can files be? +
+

As big as your server allows. The Docker image accepts up to 4 GB per file by default; within that, you set the maximum file size and share size in the admin settings (100 MB and 2 GB out of the box). Behind a reverse proxy, raise its request size and timeouts as well.

+
+
+
+ What does it cost? +
+

Nothing. SealShare is open source under the MIT licence. You pay only for the server you run it on.

+
+
+
+ Who runs it? +
+

You do. There is no SealShare cloud and no account with us: you install the Docker image on a server you run, and your files stay on it instead of passing through a transfer service.

+
+
+
+
+
+ +
+
+
+
+

Questions or feedback?

+

Get in touch, or open an issue on Gitea.

+ surtic86@gmail.com +
+ Open an issue +
+
+
+ +
+ + + + + + + diff --git a/website/privacy.html b/website/privacy.html new file mode 100644 index 0000000..215a117 --- /dev/null +++ b/website/privacy.html @@ -0,0 +1,126 @@ + + + + + + Privacy — SealShare + + + + + + + + + + + + + + +
+
+ SealShare + + +
+
+ +
+
+
+

Privacy

+

Last updated: September 2026

+ +

This page explains what happens to your data when you visit sealshare.nonameweb.ch. It is about this website only. SealShare itself is software that companies install and run on their own servers; this website does not host it, and files shared through a SealShare installation never reach us.

+ +

Who runs this website

+

This website is run by noNameWEB, Switzerland. For any question about your data, write to surtic86@gmail.com.

+ +

Hosting and server logs

+

The website is hosted by METANET AG in Switzerland. When you open a page, the web server records technical data in its logs, as every web server does: your IP address, the date and time, the page requested, your browser's user agent and the referring page. These logs keep the site running and secure; they are not used to identify you and are kept only as long as the host's standard retention.

+ +

Analytics

+

We count visits with Plausible Analytics, a privacy-friendly service hosted in the EU. Plausible uses no cookies and stores no personal data: it does not keep your IP address or build a profile of you. What we see are totals, such as page views, referring sites, countries and device types. See Plausible's data policy.

+ +

No other third parties

+
    +
  • The fonts, images and styles are served from this website. Nothing is loaded from Google or other font and content networks.
    • +
  • There are no advertising, social media or tracking scripts besides Plausible.
    • +
  • The website sets no cookies and has no forms.
    • +
+ +

Links to other sites

+

Links to Gitea, the source repository and Plausible lead to sites with their own privacy policies.

+ +

Your rights

+

Under the Swiss Federal Act on Data Protection you can ask what data about you is processed, and have it corrected or deleted. Write to the address above.

+ +

Changes

+

If this website starts handling data differently, this page is updated and its date changed.

+
+
+
+ + + + + + +