@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { Archive } from '@lucide/svelte';
|
||||
|
||||
type Props = {
|
||||
onFilesSelected: (files: File[]) => void;
|
||||
onFilesRejected?: (files: File[]) => void;
|
||||
@@ -7,6 +9,7 @@
|
||||
ariaLabel?: string;
|
||||
label?: string;
|
||||
sublabel?: string;
|
||||
icon?: typeof Archive;
|
||||
class?: string;
|
||||
};
|
||||
|
||||
@@ -18,6 +21,7 @@
|
||||
ariaLabel = 'PDF-Dateien hinzufügen',
|
||||
label = 'Dateien hinzufügen',
|
||||
sublabel = 'PDF hier ablegen oder zum Auswählen klicken',
|
||||
icon = undefined,
|
||||
class: className = ''
|
||||
}: Props = $props();
|
||||
|
||||
@@ -110,6 +114,10 @@
|
||||
ondragleave={handleDragLeave}
|
||||
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">
|
||||
<span class="text-[18px] font-bold text-primary-900">{label}</span>
|
||||
<span class="text-[20px] font-extrabold text-primary">+</span>
|
||||
|
||||
@@ -13,8 +13,8 @@
|
||||
{onFilesSelected}
|
||||
accept=".zip,application/zip,application/x-zip-compressed"
|
||||
multiple={true}
|
||||
ariaLabel="ZIP-Dateien hinzufügen"
|
||||
ariaLabel="beA-ZIP-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}"
|
||||
/>
|
||||
|
||||
+19
-10
@@ -60,7 +60,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>juri-merger — PDF-Werkzeuge</title>
|
||||
<title>beA-Edit — Werkzeugkasten für das besondere elektronische Anwaltspostfach</title>
|
||||
</svelte:head>
|
||||
|
||||
<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"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div>
|
||||
<div class="px-4">
|
||||
<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>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-10 px-4 py-10">
|
||||
<!-- Hero -->
|
||||
<div class="flex flex-col items-center gap-4 text-center">
|
||||
<h1 class="text-[28px] font-bold text-primary-900">PDF-Werkzeuge</h1>
|
||||
<p class="max-w-lg text-[15px] text-primary-700">
|
||||
<div class="flex flex-col items-center gap-2 text-center">
|
||||
<h1 class="text-[28px] font-bold text-primary-900">Werkzeugkasten für beA</h1>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
@@ -96,16 +101,20 @@
|
||||
onFilesSelected={openBeaFiles}
|
||||
accept=".zip,application/zip,application/x-zip-compressed"
|
||||
multiple={true}
|
||||
ariaLabel="ZIP-Archiv bearbeiten"
|
||||
label="ZIP-Archiv bearbeiten"
|
||||
sublabel="ZIP-Datei hier ablegen oder zum Auswählen klicken"
|
||||
ariaLabel="beA-ZIP öffnen"
|
||||
label="beA-ZIP öffnen"
|
||||
sublabel="ZIP aus dem besonderen elektronischen Anwaltspostfach (beA) hier ablegen oder zum Auswählen klicken"
|
||||
icon={Archive}
|
||||
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>
|
||||
|
||||
<!-- Tool grid -->
|
||||
<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">
|
||||
{#each tools as tool}
|
||||
{@const Icon = iconMap[tool.icon] ?? FileText}
|
||||
|
||||
Reference in New Issue
Block a user