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

buttons im frontend kleiner gemacht. AI status badge nur sichtbar, wenn das feature aktiviert ist.

Browse Source
This commit is contained in:
soeren
2025-12-07 21:36:10 +01:00
parent 8e8d934b4b
commit bc353fa2c2
2 changed files with 35 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,6 +45,7 @@
<div v-if="!showStyleSelectorView" class="space-y-3">
<button
v-if="props.allowAiStyles"
type="button"
class="flex w-full items-center justify-between gap-3 rounded-2xl border px-4 py-3 text-left font-semibold text-slate-900 transition focus:outline-none focus-visible:ring-2 dark:text-white"
:class="[effectiveAiAvailable ? 'border-white/20 bg-white/40 hover:border-emerald-400 hover:bg-white/70 dark:border-white/10 dark:bg-white/5' : 'border-rose-200 bg-rose-50 cursor-not-allowed opacity-70']"

66
resources/js/Pages/Home.vue
View File

@@ -2,43 +2,45 @@
<Head title="Start" />
<div class="min-h-screen bg-gradient-to-br from-slate-100 via-white to-slate-200 text-slate-900 transition-colors duration-500 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 dark:text-slate-100">
<div class="mx-auto flex w-full max-w-7xl flex-col gap-6 px-2 py-8 sm:px-4 lg:px-6">
<header class="rounded-3xl border border-slate-200 bg-white/90 p-6 text-slate-900 shadow-2xl backdrop-blur transition-colors duration-300 dark:border-white/10 dark:bg-white/5 dark:text-white">
<div class="flex flex-wrap items-start justify-between gap-6">
<div>
<header class="relative rounded-3xl border border-slate-200 bg-white/90 p-6 text-slate-900 shadow-2xl backdrop-blur transition-colors duration-300 dark:border-white/10 dark:bg-white/5 dark:text-white">
<div class="absolute right-4 top-4 z-10 flex items-center gap-3 sm:right-6 sm:top-6">
<button
type="button"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-900 shadow-sm transition hover:border-emerald-400 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 disabled:opacity-60 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
@click="handleManualRefresh"
:disabled="isRefreshing"
:title="isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren'"
>
<font-awesome-icon :icon="['fas', 'arrows-rotate']" class="h-5 w-5" :class="{ 'animate-spin': isRefreshing }" />
<span class="sr-only">{{ isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren' }}</span>
</button>
<button
type="button"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-900 shadow-sm transition hover:border-cyan-400 hover:text-cyan-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:text-cyan-200"
@click="toggleTheme"
:title="currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode')"
>
<font-awesome-icon
:icon="currentTheme === 'light' ? ['fas', 'moon'] : ['fas', 'sun']"
class="h-5 w-5"
/>
<span class="sr-only">{{ currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode') }}</span>
</button>
</div>
<div
v-if="allowAiStyles && !aiAvailable"
class="absolute right-4 top-16 z-10 inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-rose-700 shadow-sm dark:border-rose-500/40 dark:bg-rose-500/10 dark:text-rose-200 sm:right-6 sm:top-20"
>
<span class="h-2 w-2 rounded-full bg-rose-500"></span>
<span>AI offline</span>
</div>
<div class="flex flex-col gap-3 sm:gap-4">
<div class="pr-20 sm:pr-0 sm:pt-1">
<p class="text-xs uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">Live Gallery</p>
<h1 class="mt-1 text-3xl font-semibold text-slate-900 dark:text-white sm:text-4xl">
{{ props.galleryHeading }}
</h1>
</div>
<div class="flex flex-wrap items-center gap-3">
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-900 shadow-sm transition hover:border-emerald-400 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 disabled:opacity-60 dark:border-white/20 dark:bg-white/10 dark:text-white dark:hover:text-emerald-200"
@click="handleManualRefresh"
:disabled="isRefreshing"
>
<font-awesome-icon :icon="['fas', 'arrows-rotate']" class="h-4 w-4" :class="{ 'animate-spin': isRefreshing }" />
<span>{{ isRefreshing ? 'Aktualisiere…' : 'Jetzt aktualisieren' }}</span>
</button>
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-900 shadow-sm transition hover:border-cyan-400 hover:text-cyan-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:text-cyan-200"
@click="toggleTheme"
>
<font-awesome-icon
:icon="currentTheme === 'light' ? ['fas', 'moon'] : ['fas', 'sun']"
class="h-4 w-4"
/>
<span>{{ currentTheme === 'light' ? __('api.dark_mode') : __('api.light_mode') }}</span>
</button>
<div
v-if="!effectiveAiAvailable"
class="inline-flex items-center gap-2 rounded-full border border-rose-200 bg-rose-50 px-3 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-rose-700 shadow-sm dark:border-rose-500/40 dark:bg-rose-500/10 dark:text-rose-200"
>
<span class="h-2 w-2 rounded-full bg-rose-500"></span>
<span>AI offline</span>
</div>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-500 dark:text-slate-300">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 px-3 py-1 text-emerald-700 dark:text-emerald-200">