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

WIP: frontend optimierungen & sprachkorrekturen

Browse Source
This commit is contained in:
soeren
2025-11-13 19:55:50 +01:00
parent cf41055cbd
commit 3f52f124ef
11 changed files with 136 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<template>
<div class="flex h-full flex-col gap-4 rounded-3xl border border-white/10 bg-white/5 p-4 text-white">
<div class="flex items-center justify-between gap-2 text-xs uppercase tracking-[0.3em] text-slate-300">
<div class="flex h-full flex-col gap-4 rounded-3xl border border-slate-200 bg-white p-4 text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-white">
<div class="flex items-center justify-between gap-2 text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-300">
<span>Varianten</span>
<button
type="button"
class="rounded-full border border-white/20 p-1 text-white/70 transition hover:border-rose-300 hover:text-rose-300"
class="rounded-full border border-slate-200 p-1 text-slate-500 transition hover:border-rose-300 hover:text-rose-400 dark:border-white/20 dark:text-white/70 dark:hover:text-rose-300"
@click="$emit('close')"
aria-label="Auswahl schließen"
>
@@ -15,10 +15,10 @@
</div>
<div class="flex-1 space-y-3 overflow-y-auto pr-1">
<p v-if="isLoading" class="rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-center text-sm text-slate-300">
<p v-if="isLoading" class="rounded-2xl border border-slate-200 bg-white px-4 py-3 text-center text-sm text-slate-500 dark:border-white/10 dark:bg-white/5 dark:text-slate-300">
Stile werden geladen …
</p>
<p v-else-if="loadError" class="rounded-2xl border border-rose-400/40 bg-rose-500/10 px-4 py-3 text-center text-sm text-rose-100">
<p v-else-if="loadError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-center text-sm text-rose-500 dark:border-rose-400/40 dark:bg-rose-500/10 dark:text-rose-100">
{{ loadError }}
</p>
<template v-else>
@@ -26,7 +26,7 @@
v-for="style in styles"
:key="style.id"
type="button"
class="group flex w-full items-center gap-4 rounded-2xl border border-white/10 bg-white/5 p-3 text-left transition hover:border-emerald-300"
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
@@ -38,13 +38,13 @@
/>
<div
v-else
class="flex h-24 w-24 flex-none items-center justify-center rounded-2xl border border-dashed border-white/20 text-[0.65rem] uppercase tracking-[0.4em] text-slate-400"
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-white">{{ style.title }}</p>
<p class="text-sm text-slate-200">{{ style.description }}</p>
<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>
</template>