soeren/ai-stylegallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend richtig schick gemacht und backend geordnet. ComfyUI Prompt zum Seeder hinzugefügt.

Browse Source
This commit is contained in:
soeren
2025-12-02 21:24:18 +01:00
parent 7b7a12ed27
commit 908b1dcdff
17 changed files with 473 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/Components/ImageContextMenu.vue
View File

@@ -1,8 +1,11 @@
<template>
<div class="fixed inset-0 z-[110] flex items-center justify-center bg-slate-950/80 px-4 backdrop-blur-lg" @click.self="$emit('close')">
<div class="w-full max-w-6xl overflow-hidden rounded-[2.5rem] border border-white/10 bg-white/95 text-slate-900 shadow-[0_45px_85px_rgba(15,23,42,0.45)] ring-1 ring-slate-200 transition dark:bg-slate-900/95 dark:text-white">
<div class="flex flex-col gap-6 lg:flex-row">
<figure class="relative flex-1 overflow-hidden bg-slate-900/80">
<div class="flex flex-col gap-6 transition-all duration-300 lg:flex-row">
<figure
class="relative w-full overflow-hidden bg-slate-900/80"
:class="showStyleSelectorView ? 'lg:w-[12%]' : 'lg:flex-1'"
>
<img
v-if="image?.path"
:src="image.path"
@@ -18,7 +21,10 @@
</div>
</figure>
<div class="flex w-full flex-col gap-6 p-6 lg:w-[360px]">
<div
class="flex w-full flex-col gap-6 p-6"
:class="showStyleSelectorView ? 'lg:w-[88%]' : 'lg:w-[360px]'"
>
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-xs uppercase tracking-[0.4em] text-slate-400">Menü</p>
@@ -33,9 +39,7 @@
@click="$emit('close')"
aria-label="Kontextmenü schließen"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m6 6 12 12M6 18 18 6" />
</svg>
<font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
</button>
</div>
@@ -50,9 +54,7 @@
<p class="text-sm font-normal text-slate-500 dark:text-slate-400">Lass die KI dein Motiv verzaubern.</p>
</div>
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-white/60 text-slate-900 shadow-md dark:bg-slate-800/70 dark:text-white">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v3m0 12v3m9-9h-3M6 12H3m13.5-6 1.5 1.5M7.5 18 6 19.5M18 7.5 19.5 6M6 4.5 4.5 6m9.75 3.75-2.122 2.122a2.25 2.25 0 0 0 0 3.182l2.122 2.121a2.25 2.25 0 0 0 3.182 0l2.121-2.121a2.25 2.25 0 0 0 0-3.182l-2.121-2.122a2.25 2.25 0 0 0-3.182 0Z" />
</svg>
<font-awesome-icon :icon="['fas', 'magic-wand-sparkles']" class="h-5 w-5" />
</span>
</button>
@@ -67,9 +69,7 @@
<p class="text-sm font-normal text-slate-500 dark:text-slate-400">Sofort den Druckdialog öffnen</p>
</div>
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-cyan-100 text-cyan-900 shadow-md dark:bg-cyan-400/20 dark:text-cyan-200">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 9V4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5V9m-12 0h12m-12 0H4.5A1.5 1.5 0 0 0 3 10.5v6A1.5 1.5 0 0 0 4.5 18H6m12-9h1.5A1.5 1.5 0 0 1 21 10.5v6a1.5 1.5 0 0 1-1.5 1.5H18m-12 0v4.5A1.5 1.5 0 0 0 7.5 24h9a1.5 1.5 0 0 0 1.5-1.5V18m-12 0h12" />
</svg>
<font-awesome-icon :icon="['fas', 'print']" class="h-5 w-5" />
</span>
</button>
@@ -84,9 +84,7 @@
<p class="text-sm font-normal text-slate-500 dark:text-slate-400">Datei lokal speichern</p>
</div>
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-900 shadow-md dark:bg-indigo-400/20 dark:text-indigo-200">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0 4-4m-4 4-4-4m-5 7.5h18" />
</svg>
<font-awesome-icon :icon="['fas', 'download']" class="h-5 w-5" />
</span>
</button>
@@ -100,23 +98,19 @@
<p class="text-sm font-normal text-slate-500 dark:text-slate-400">Zurück zur Galerie</p>
</div>
<span class="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-900 shadow-md dark:bg-rose-400/20 dark:text-rose-200">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
<font-awesome-icon :icon="['fas', 'xmark']" class="h-5 w-5" />
</span>
</button>
</div>
<div v-else class="space-y-4">
<div v-else class="space-y-4">
<div class="flex items-center justify-between text-sm text-slate-400">
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-white/20 px-3 py-1 text-xs uppercase tracking-[0.3em] text-white/80 transition hover:border-emerald-300"
class="inline-flex items-center gap-2 rounded-full border border-slate-200 px-3 py-1 text-xs uppercase tracking-[0.3em] text-slate-600 transition hover:border-emerald-300 hover:text-emerald-600 dark:border-white/20 dark:text-white/80"
@click="showStyleSelectorView = false"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m10 19-7-7 7-7m-7 7h18" />
</svg>
<font-awesome-icon :icon="['fas', 'arrow-left']" class="h-3.5 w-3.5" />
Zurück
</button>
<span>Stilauswahl</span>

8
resources/js/Components/Navigation.vue
View File

@@ -14,9 +14,7 @@
@click="$emit('prevPage')"
:disabled="currentPage === 1"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
</svg>
<font-awesome-icon :icon="['fas', 'arrow-left']" class="h-4 w-4" />
{{ __('api.navigation.previous') }}
</button>
<button
@@ -26,9 +24,7 @@
:disabled="currentPage === totalPages"
>
{{ __('api.navigation.next') }}
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<font-awesome-icon :icon="['fas', 'arrow-right']" class="h-4 w-4" />
</button>
</div>
</div>

10
resources/js/Components/PrintQuantityModal.vue
View File

@@ -4,7 +4,7 @@
<div class="flex items-start justify-between gap-4">
<div>
<p class="text-xs uppercase tracking-[0.5em] text-slate-400">{{ __('api.print_dialog.title') }}</p>
<h2 class="mt-2 text-3xl font-semibold text-white">{{ __('api.print_dialog.quantity_prompt') }}</h2>
<h2 class="mt-2 text-3xl font-semibold text-slate-900 dark:text-white">{{ __('api.print_dialog.quantity_prompt') }}</h2>
<p class="mt-2 text-sm text-slate-300">
Maximale Ausgabe pro Auftrag:
<span class="font-semibold text-emerald-300">{{ maxCopies }}</span>
@@ -16,9 +16,7 @@
@click="$emit('close')"
:aria-label="__('api.print_dialog.cancel_button')"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6m-12 0 12 12" />
</svg>
<font-awesome-icon :icon="['fas', 'xmark']" class="h-4 w-4" />
</button>
</div>
@@ -32,7 +30,7 @@
@click="decrementQuantity"
aria-label="-1"
>
−
<font-awesome-icon :icon="['fas', 'minus']" class="h-6 w-6" />
</button>
<div class="min-w-[4rem] text-6xl font-bold tracking-tight text-slate-900 dark:text-white">{{ quantity }}</div>
<button
@@ -41,7 +39,7 @@
@click="incrementQuantity"
aria-label="+1"
>
+
<font-awesome-icon :icon="['fas', 'plus']" class="h-6 w-6" />
</button>
</div>
</div>

54
resources/js/Components/StyleSelector.vue
View File

@@ -8,9 +8,7 @@
@click="$emit('close')"
aria-label="Auswahl schließen"
>
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6m-12 0 12 12" />
</svg>
<font-awesome-icon :icon="['fas', 'xmark']" class="h-4 w-4" />
</button>
</div>
@@ -22,31 +20,33 @@
{{ loadError }}
</p>
<template v-else>
<button
v-for="style in styles"
:key="style.id"
type="button"
class="group flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-white/90 p-3 text-left text-slate-900 transition hover:border-emerald-300 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
@click="selectStyle(style)"
>
<img
v-if="style.preview_image"
:src="buildPreviewPath(style.preview_image)"
loading="lazy"
class="h-24 w-24 flex-none rounded-2xl object-cover opacity-90 transition group-hover:opacity-100"
alt="Style preview"
/>
<div
v-else
class="flex h-24 w-24 flex-none items-center justify-center rounded-2xl border border-dashed border-slate-200 text-[0.65rem] uppercase tracking-[0.4em] text-slate-500 dark:border-white/20 dark:text-slate-400"
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
<button
v-for="style in styles"
:key="style.id"
type="button"
class="group flex w-full items-center gap-4 rounded-2xl border border-slate-200 bg-white/90 p-3 text-left text-slate-900 transition hover:border-emerald-300 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/5 dark:text-white"
@click="selectStyle(style)"
>
AI
</div>
<div class="flex flex-col">
<p class="text-base font-semibold text-slate-900 dark:text-white">{{ style.title }}</p>
<p class="text-sm text-slate-500 dark:text-slate-200">{{ style.description }}</p>
</div>
</button>
<img
v-if="style.preview_image"
:src="buildPreviewPath(style.preview_image)"
loading="lazy"
class="h-24 w-24 flex-none rounded-2xl object-cover opacity-90 transition group-hover:opacity-100"
alt="Style preview"
/>
<div
v-else
class="flex h-24 w-24 flex-none items-center justify-center rounded-2xl border border-dashed border-slate-200 text-[0.65rem] uppercase tracking-[0.4em] text-slate-500 dark:border-white/20 dark:text-slate-400"
>
AI
</div>
<div class="flex flex-col">
<p class="text-base font-semibold text-slate-900 dark:text-white">{{ style.title }}</p>
<p class="text-sm text-slate-500 dark:text-slate-200">{{ style.description }}</p>
</div>
</button>
</div>
</template>
</div>
</div>