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

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

@@ -1,20 +1,19 @@
<template>
<Head title="Start" />
<div class="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-slate-100">
<div class="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-8 sm:px-6 lg:px-8">
<header class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur">
<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>
<p class="text-xs uppercase tracking-[0.35em] text-slate-400">Live Gallery</p>
<h1 class="mt-2 text-3xl font-semibold text-white sm:text-4xl">
<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>
<p class="mt-1 text-sm text-slate-400">Touch-friendly wall with the freshest images.</p>
</div>
<div class="flex flex-wrap items-center gap-3">
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-4 py-2 text-sm font-semibold text-white transition hover:border-emerald-400 hover:text-emerald-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 disabled:opacity-60"
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"
>
@@ -36,7 +35,7 @@
</button>
<button
type="button"
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold text-white transition hover:border-cyan-300 hover:text-cyan-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400"
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"
>
<svg v-if="currentTheme === 'light'" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -53,9 +52,9 @@
</button>
</div>
</div>
<div class="mt-4 flex flex-wrap items-center gap-4 text-xs text-slate-300">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-400/10 px-3 py-1 text-emerald-200">
<span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
<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">
<span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
Auto-Refresh · alle {{ refreshIntervalSeconds }}s
</div>
<div class="flex items-center gap-2">
@@ -72,12 +71,12 @@
</header>
<section
class="rounded-3xl border border-white/5 bg-white/5 p-4 shadow-2xl backdrop-blur touch-pan-y"
class="rounded-3xl border border-slate-200 bg-white/80 p-3 shadow-2xl backdrop-blur transition-colors duration-300 touch-pan-y dark:border-white/5 dark:bg-white/5 sm:p-4"
@touchstart.passive="handleTouchStart"
@touchmove.passive="handleTouchMove"
@touchend="handleTouchEnd"
>
<GalleryGrid :images="paginatedImages" @imageTapped="showContextMenu" :translations="props.translations" />
<GalleryGrid :images="paginatedImages" @imageTapped="showContextMenu" />
</section>
<Navigation :currentPage="currentPage" :totalPages="totalPages" @prevPage="prevPage" @nextPage="nextPage" />
@@ -133,10 +132,6 @@ const props = defineProps({
type: String,
default: 'Gallery',
},
translations: {
type: Object,
default: () => ({}),
},
images: {
type: Array,
default: () => [],