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

finished the upgrade to filament 4. completely revamped the frontend with codex, now it looks great!

Browse Source
This commit is contained in:
SEB Fotografie - soeren
2025-11-13 17:42:43 +01:00
parent f59fda588b
commit b311188bc1
138 changed files with 5440 additions and 4105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,69 @@
<template>
<div class="modal-overlay" @click.self="$emit('close')">
<div class="modal-content">
<h2 class="text-xl font-bold mb-4">{{ __('api.print_dialog.title') }}</h2>
<p class="mb-4">{{ __('api.print_dialog.quantity_prompt') }}</p>
<div class="flex items-center justify-center space-x-4 mb-6">
<button @click="decrementQuantity" class="quantity-button">
-
</button>
<span class="text-5xl font-bold">{{ quantity }}</span>
<button @click="incrementQuantity" class="quantity-button">
+
<div class="fixed inset-0 z-[120] flex items-center justify-center bg-slate-950/70 px-6 py-10 backdrop-blur" @click.self="$emit('close')">
<div class="w-full max-w-md rounded-[2.5rem] border border-white/10 bg-gradient-to-b from-slate-900 via-slate-900/90 to-slate-950 p-8 text-white shadow-[0_35px_80px_rgba(2,6,23,0.65)]">
<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>
<p class="mt-2 text-sm text-slate-300">
Maximale Ausgabe pro Auftrag:
<span class="font-semibold text-emerald-300">{{ maxCopies }}</span>
</p>
</div>
<button
type="button"
class="rounded-full border border-white/10 p-2 text-slate-200 transition hover:border-rose-300 hover:text-rose-300"
@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>
</button>
</div>
<div class="flex justify-end space-x-2">
<button @click="$emit('close')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">
<div class="mt-8 flex flex-col gap-6">
<div class="rounded-3xl border border-white/10 bg-white/5 p-6 text-center text-slate-200">
<p class="text-sm uppercase tracking-[0.4em] text-slate-400">Anzahl</p>
<div class="mt-4 flex items-center justify-center gap-6">
<button
type="button"
class="flex h-14 w-14 items-center justify-center rounded-2xl border border-white/20 bg-white/10 text-3xl font-semibold text-white transition hover:border-emerald-300 hover:text-emerald-200"
@click="decrementQuantity"
aria-label="-1"
>
−
</button>
<div class="min-w-[4rem] text-6xl font-bold tracking-tight text-white">{{ quantity }}</div>
<button
type="button"
class="flex h-14 w-14 items-center justify-center rounded-2xl border border-white/20 bg-white/10 text-3xl font-semibold text-white transition hover:border-emerald-300 hover:text-emerald-200"
@click="incrementQuantity"
aria-label="+1"
>
+
</button>
</div>
</div>
<p class="text-center text-xs uppercase tracking-[0.4em] text-slate-400">
Du steuerst direkt den Sofortdruck.
</p>
</div>
<div class="mt-8 flex flex-wrap gap-3">
<button
type="button"
class="flex-1 rounded-full border border-white/20 bg-white/5 px-5 py-3 text-center text-sm font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-rose-300 hover:text-rose-200"
@click="$emit('close')"
>
{{ __('api.print_dialog.cancel_button') }}
</button>
<button @click="confirmPrint" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
<button
type="button"
class="flex-1 rounded-full border border-emerald-300 bg-emerald-400/20 px-5 py-3 text-center text-sm font-semibold uppercase tracking-[0.2em] text-emerald-100 transition hover:bg-emerald-400/40"
@click="confirmPrint"
>
{{ __('api.print_dialog.print_button') }}
</button>
</div>
@@ -32,7 +77,7 @@ import { ref, watch } from 'vue';
const props = defineProps({
maxCopies: {
type: Number,
default: 10, // Default max if not provided
default: 10,
},
});
@@ -56,40 +101,12 @@ const confirmPrint = () => {
emit('printConfirmed', quantity.value);
};
// Watch for changes in maxCopies prop and adjust quantity if it exceeds new max
watch(() => props.maxCopies, (newMax) => {
if (quantity.value > newMax) {
quantity.value = newMax;
watch(
() => props.maxCopies,
(newMax) => {
if (quantity.value > newMax) {
quantity.value = newMax;
}
}
});
);
</script>
<style scoped>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: var(--color-background);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 400px;
color: var(--color-text);
}
.quantity-button {
@apply bg-blue-500 text-white rounded-full w-16 h-16 flex items-center justify-center text-4xl font-bold;
@apply hover:bg-blue-600 transition-colors duration-200;
}
</style>