@@ -1,4 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { Archive } from '@lucide/svelte';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
onFilesSelected: (files: File[]) => void;
|
onFilesSelected: (files: File[]) => void;
|
||||||
onFilesRejected?: (files: File[]) => void;
|
onFilesRejected?: (files: File[]) => void;
|
||||||
@@ -7,6 +9,7 @@
|
|||||||
ariaLabel?: string;
|
ariaLabel?: string;
|
||||||
label?: string;
|
label?: string;
|
||||||
sublabel?: string;
|
sublabel?: string;
|
||||||
|
icon?: typeof Archive;
|
||||||
class?: string;
|
class?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -18,6 +21,7 @@
|
|||||||
ariaLabel = 'PDF-Dateien hinzufügen',
|
ariaLabel = 'PDF-Dateien hinzufügen',
|
||||||
label = 'Dateien hinzufügen',
|
label = 'Dateien hinzufügen',
|
||||||
sublabel = 'PDF hier ablegen oder zum Auswählen klicken',
|
sublabel = 'PDF hier ablegen oder zum Auswählen klicken',
|
||||||
|
icon = undefined,
|
||||||
class: className = ''
|
class: className = ''
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
@@ -110,6 +114,10 @@
|
|||||||
ondragleave={handleDragLeave}
|
ondragleave={handleDragLeave}
|
||||||
ondrop={handleDrop}
|
ondrop={handleDrop}
|
||||||
>
|
>
|
||||||
|
{#if icon}
|
||||||
|
{@const IconComponent = icon}
|
||||||
|
<IconComponent class="h-10 w-10 text-primary" />
|
||||||
|
{/if}
|
||||||
<div class="flex flex-row items-baseline justify-center gap-2">
|
<div class="flex flex-row items-baseline justify-center gap-2">
|
||||||
<span class="text-[18px] font-bold text-primary-900">{label}</span>
|
<span class="text-[18px] font-bold text-primary-900">{label}</span>
|
||||||
<span class="text-[20px] font-extrabold text-primary">+</span>
|
<span class="text-[20px] font-extrabold text-primary">+</span>
|
||||||
|
|||||||
@@ -13,8 +13,8 @@
|
|||||||
{onFilesSelected}
|
{onFilesSelected}
|
||||||
accept=".zip,application/zip,application/x-zip-compressed"
|
accept=".zip,application/zip,application/x-zip-compressed"
|
||||||
multiple={true}
|
multiple={true}
|
||||||
ariaLabel="ZIP-Dateien hinzufügen"
|
ariaLabel="beA-ZIP-Dateien hinzufügen"
|
||||||
label="Dateien hinzufügen"
|
label="Dateien hinzufügen"
|
||||||
sublabel="ZIP-Dateien hier ablegen oder zum Auswählen klicken"
|
sublabel="beA-ZIP-Dateien hier ablegen oder zum Auswählen klicken"
|
||||||
class="min-h-[calc(-180px+100vh)] border-0 bg-transparent {className}"
|
class="min-h-[calc(-180px+100vh)] border-0 bg-transparent {className}"
|
||||||
/>
|
/>
|
||||||
|
|||||||
+19
-10
@@ -60,7 +60,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>juri-merger — PDF-Werkzeuge</title>
|
<title>beA-Edit — Werkzeugkasten für das besondere elektronische Anwaltspostfach</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<svelte:window
|
<svelte:window
|
||||||
@@ -74,18 +74,23 @@
|
|||||||
class="pointer-events-none fixed inset-3 z-50 grid place-items-center rounded-3xl border-4 border-dashed border-primary bg-background/95 text-center shadow-2xl"
|
class="pointer-events-none fixed inset-3 z-50 grid place-items-center rounded-3xl border-4 border-dashed border-primary bg-background/95 text-center shadow-2xl"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
<div>
|
<div class="px-4">
|
||||||
<Archive class="mx-auto h-12 w-12" />
|
<Archive class="mx-auto h-12 w-12" />
|
||||||
<p class="mt-4 text-xl font-bold">ZIP-Archiv hier ablegen</p>
|
<p class="mt-4 text-xl font-bold">beA-ZIP hier ablegen</p>
|
||||||
|
<p class="mt-1 text-sm">Archiv aus dem besonderen elektronischen Anwaltspostfach</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="flex flex-col gap-10 px-4 py-10">
|
<div class="flex flex-col gap-10 px-4 py-10">
|
||||||
<!-- Hero -->
|
<!-- Hero -->
|
||||||
<div class="flex flex-col items-center gap-4 text-center">
|
<div class="flex flex-col items-center gap-2 text-center">
|
||||||
<h1 class="text-[28px] font-bold text-primary-900">PDF-Werkzeuge</h1>
|
<h1 class="text-[28px] font-bold text-primary-900">Werkzeugkasten für beA</h1>
|
||||||
<p class="max-w-lg text-[15px] text-primary-700">
|
<p class="max-w-lg text-[15px] font-medium text-primary-700">
|
||||||
|
Bereiten Sie ZIP-Archive aus dem besonderen elektronischen Anwaltspostfach (beA) auf — plus
|
||||||
|
praktische PDF-Werkzeuge.
|
||||||
|
</p>
|
||||||
|
<p class="max-w-lg text-[13px] text-primary-700">
|
||||||
Alle Werkzeuge laufen zu 100 % in Ihrem Browser — keine Dateien werden hochgeladen.
|
Alle Werkzeuge laufen zu 100 % in Ihrem Browser — keine Dateien werden hochgeladen.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,16 +101,20 @@
|
|||||||
onFilesSelected={openBeaFiles}
|
onFilesSelected={openBeaFiles}
|
||||||
accept=".zip,application/zip,application/x-zip-compressed"
|
accept=".zip,application/zip,application/x-zip-compressed"
|
||||||
multiple={true}
|
multiple={true}
|
||||||
ariaLabel="ZIP-Archiv bearbeiten"
|
ariaLabel="beA-ZIP öffnen"
|
||||||
label="ZIP-Archiv bearbeiten"
|
label="beA-ZIP öffnen"
|
||||||
sublabel="ZIP-Datei hier ablegen oder zum Auswählen klicken"
|
sublabel="ZIP aus dem besonderen elektronischen Anwaltspostfach (beA) hier ablegen oder zum Auswählen klicken"
|
||||||
|
icon={Archive}
|
||||||
class="py-10"
|
class="py-10"
|
||||||
/>
|
/>
|
||||||
|
<p class="mt-2 text-center text-[12px] text-primary-600">
|
||||||
|
Tipp: In beA exportierte Archive enden auf .zip und enthalten Ihre Anlagen als PDF.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tool grid -->
|
<!-- Tool grid -->
|
||||||
<div class="mx-auto w-full max-w-4xl">
|
<div class="mx-auto w-full max-w-4xl">
|
||||||
<h2 class="mb-4 text-[18px] font-bold text-primary-900">Werkzeuge</h2>
|
<h2 class="mb-4 text-[18px] font-bold text-primary-900">Weitere PDF-Werkzeuge</h2>
|
||||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
{#each tools as tool}
|
{#each tools as tool}
|
||||||
{@const Icon = iconMap[tool.icon] ?? FileText}
|
{@const Icon = iconMap[tool.icon] ?? FileText}
|
||||||
|
|||||||
@@ -85,7 +85,7 @@ test('start page exposes only working tools and forwards a dropped ZIP to beA',
|
|||||||
const zip = Buffer.from(zipSync({ 'anlage.pdf': pdf }));
|
const zip = Buffer.from(zipSync({ 'anlage.pdf': pdf }));
|
||||||
|
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await expect(page.getByRole('heading', { name: 'PDF-Werkzeuge' })).toBeVisible();
|
await expect(page.getByRole('heading', { name: 'Werkzeugkasten für beA' })).toBeVisible();
|
||||||
await expect(page.getByRole('link', { name: /Signieren/ })).toHaveCount(0);
|
await expect(page.getByRole('link', { name: /Signieren/ })).toHaveCount(0);
|
||||||
|
|
||||||
await dropFiles(page, 'window', [
|
await dropFiles(page, 'window', [
|
||||||
|
|||||||
Reference in New Issue
Block a user