diff --git a/frontend/public/hobbyhimmel_logo.svg b/frontend/public/hobbyhimmel_logo.svg
new file mode 100644
index 0000000..3168a7c
--- /dev/null
+++ b/frontend/public/hobbyhimmel_logo.svg
@@ -0,0 +1,63 @@
+
+
+
+
diff --git a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js b/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js
index ccd7b72..0286667 100644
--- a/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js
+++ b/frontend/src/Components/ComponentUtils/LoadingAnimation/Loading.js
@@ -1,17 +1,41 @@
import '../../../App.css'
-import Lottie from 'lottie-react';
-import animationData from './animation.json';
+import React from "react";
+import './LoadingLogo.css';
-export default function Loading() {
- return (
-
-
-
- );
+const Loading = () => {
+
+ return (
+
+ );
}
+
+export default Loading;
diff --git a/frontend/src/Components/ComponentUtils/LoadingAnimation/LoadingLogo.css b/frontend/src/Components/ComponentUtils/LoadingAnimation/LoadingLogo.css
new file mode 100644
index 0000000..f416dc8
--- /dev/null
+++ b/frontend/src/Components/ComponentUtils/LoadingAnimation/LoadingLogo.css
@@ -0,0 +1,52 @@
+.loading-logo-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 400px;
+ position: relative;
+ perspective: 1000px;
+}
+
+/* Äußerer Container: Y-Achsen-Rotation für Wolke UND Hammer zusammen */
+.rotor {
+ display: inline-block;
+ transform-origin: center;
+ transform-style: preserve-3d;
+ will-change: transform;
+ animation: rotateY 4s linear infinite;
+}
+
+.loading-logo {
+ display: block;
+ width: 400px;
+ height: auto;
+}
+
+/* Hammer: zusätzliche Rotation um eigene Längsachse */
+.loading-logo #g136 {
+ transform-box: fill-box; /* Bezieht sich auf eigene Bounding Box */
+ transform-origin: center; /* Mittelpunkt der eigenen BBox */
+ will-change: transform;
+ animation: rotateHammerAxis 3s linear infinite;
+}
+
+/* Y-Achsen-Rotation mit leichter X-Neigung (vermeidet Totpunkt bei 90°) */
+@keyframes rotateY {
+ from {
+ transform: rotateY(0deg) rotateX(15deg);
+ }
+ to {
+ transform: rotateY(360deg) rotateX(15deg);
+ }
+}
+
+/* Hammer-Rotation um eigene Längsachse (diagonal) */
+@keyframes rotateHammerAxis {
+ from {
+ transform: rotate3d(1, -1, 0, 0deg);
+ }
+ to {
+ transform: rotate3d(1, -1, 0, 360deg);
+ }
+}
diff --git a/frontend/src/Components/Pages/MultiUploadPage.js b/frontend/src/Components/Pages/MultiUploadPage.js
index 8a35531..12728d8 100644
--- a/frontend/src/Components/Pages/MultiUploadPage.js
+++ b/frontend/src/Components/Pages/MultiUploadPage.js
@@ -32,6 +32,8 @@ function MultiUploadPage() {
});
const [uploading, setUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
+ const [uploadComplete, setUploadComplete] = useState(false);
+ const [uploadResult, setUploadResult] = useState(null);
const [isEditMode, setIsEditMode] = useState(false);
const [imageDescriptions, setImageDescriptions] = useState({});
@@ -165,23 +167,10 @@ function MultiUploadPage() {
clearInterval(progressInterval);
setUploadProgress(100);
- // Kurze Verzögerung für UX
+ // Kurze Verzögerung für UX, dann Erfolgsmeldung anzeigen
setTimeout(() => {
- setUploading(false);
-
- Swal.fire({
- icon: 'success',
- title: 'Upload erfolgreich!',
- text: `${result.imageCount} Bild${result.imageCount !== 1 ? 'er' : ''} wurden hochgeladen.`,
- confirmButtonColor: '#4CAF50',
- timer: 2000,
- showConfirmButton: false
- });
-
- // Seite neu laden für nächsten Upload
- setTimeout(() => {
- window.location.reload();
- }, 2000);
+ setUploadComplete(true);
+ setUploadResult(result);
}, 500);
} catch (error) {
@@ -305,6 +294,56 @@ function MultiUploadPage() {
totalFiles={selectedImages.length}
isUploading={uploading}
/>
+
+ {uploadComplete && uploadResult && (
+
+
+ ✅ Upload erfolgreich!
+
+
+ {uploadResult.imageCount} Bild{uploadResult.imageCount !== 1 ? 'er' : ''} wurden hochgeladen.
+
+
+
+ )}
)}