add Logo + Header & Footer Confirmsite

.idea/misc.xml

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ComposerSettings">
     <execution />

spenden/2024-09-14T14-27-54.json

@@ -0,0 +1,8 @@
+{
+  "kleidungsart": "hose",
+  "krisengebiet": "syrien",
+  "lieferart": "Übergabe",
+  "abholadresse": "N/A",
+  "plz": "N/A",
+  "timestamp": "2024-09-14T14:27:54.077Z"
+}

spenden/2024-09-14T14-32-47.json

@@ -0,0 +1,8 @@
+{
+  "kleidungsart": "tshirt",
+  "krisengebiet": "syrien",
+  "lieferart": "Übergabe",
+  "abholadresse": "N/A",
+  "plz": "N/A",
+  "timestamp": "2024-09-14T14:32:47.870Z"
+}

spenden/2024-09-14T14-33-23.json

@@ -0,0 +1,8 @@
+{
+  "kleidungsart": "hose",
+  "krisengebiet": "ukraine",
+  "lieferart": "Übergabe",
+  "abholadresse": "N/A",
+  "plz": "N/A",
+  "timestamp": "2024-09-14T14:33:23.627Z"
+}

spenden/Teststrasse_4.json

@@ -1,8 +1,8 @@
 {
-  "kleidungsart": "jacke",
+  "kleidungsart": "hose",
-  "krisengebiet": "ukraine",
+  "krisengebiet": "erdbeben",
-  "lieferart": "Übergabe",
+  "lieferart": "Abholung",
   "abholadresse": "Teststrasse 4",
   "plz": "24159",
-  "timestamp": "2024-09-09T16:48:30.248Z"
+  "timestamp": "2024-09-12T09:02:11.386Z"
 }

src/components/ConfimationPage.js

@@ -1,51 +1,96 @@
 import React from 'react';
+import Logo from '../tshirt.png';
 
-const ConfirmationPage = ({ spendenData }) => {
+const ConfirmationPage = ({spendenData}) => {
-    if (!spendenData) {
+	if (!spendenData) {
-        return <p>Lade Daten...</p>;
+		return <p>Lade Daten...</p>;
-    }
+	}
 
-    // Funktion zum Herunterladen der JSON-Datei
+	// Funktion zum Herunterladen der JSON-Datei
-    const downloadJSON = () => {
+	const downloadJSON = () => {
-        const jsonData = JSON.stringify(spendenData, null, 2); // Pretty-print JSON
+		const jsonData = JSON.stringify(spendenData, null, 2); // Pretty-print JSON
-        const blob = new Blob([jsonData], { type: 'application/json' }); // Blob erstellen
+		const blob = new Blob([jsonData], {type: 'application/json'}); // Blob erstellen
-        const url = URL.createObjectURL(blob); // URL erstellen
+		const url = URL.createObjectURL(blob);
+		// URL erstellen
 
-        // Link erstellen und den Download auslösen
+		// Link erstellen und den Download auslösen
-        const link = document.createElement('a');
+		const link = document.createElement('a');
-        link.href = url;
+		link.href = url;
-        link.download = `spende_${spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'}_${spendenData.timestamp}.json`;
+		link.download = `spende_${
-        link.click();
+			spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'
+		}_${
+			spendenData.timestamp
+		}.json`;
+		link.click();
 
-        // URL-Objekt wieder freigeben
+		// URL-Objekt wieder freigeben
-        URL.revokeObjectURL(url);
+		URL.revokeObjectURL(url);
-    };
+	};
 
-    return (
+	return (
-        <div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg">
+		<div className="flex flex-col min-h-screen">
-            <h2 className="text-2xl font-bold text-center mb-4">Spenden Bestätigung</h2>
+			<header className="bg-purple-600 text-white p-4 text-center">
-            <p><strong>Kleidungsart:</strong> {spendenData.kleidungsart}</p>
+                <div className="flex items-center justify-center">
-            <p><strong>Krisengebiet:</strong> {spendenData.krisengebiet}</p>
+                    <img src={Logo} alt="Logo" className="h-12 w-12 mr-4" />
-            <p><strong>Lieferart:</strong> {spendenData.lieferart}</p>
+                    <h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
-            {spendenData.lieferart === 'Abholung' && (
+                </div>
-                <>
+            </header>
-                    <p><strong>Abholadresse:</strong> {spendenData.abholadresse}</p>
+			<main className="flex-grow p-4 bg-gray-100">
-                    <p><strong>PLZ:</strong> {spendenData.plz}</p>
+				<div className="max-w-lg mx-auto p-6 bg-white shadow-lg rounded-lg">
-                </>
+					<h2 className="text-2xl font-bold text-center mb-4">Spenden Bestätigung</h2>
-            )}
+					<p>
-            <p><strong>Registrierungsdatum:</strong> {spendenData.timestamp}</p>
+						<strong>Kleidungsart:</strong>
-            <p className="text-center mt-4"><strong>Vielen Dank für Ihre Spende!</strong></p>
+						{
+						spendenData.kleidungsart
+					}</p>
+					<p>
+						<strong>Krisengebiet:</strong>
+						{
+						spendenData.krisengebiet
+					}</p>
+					<p>
+						<strong>Lieferart:</strong>
+						{
+						spendenData.lieferart
+					}</p>
+					{
+					spendenData.lieferart === 'Abholung' && (
+						<>
+							<p>
+								<strong>Abholadresse:</strong>
+								{
+								spendenData.abholadresse
+							}</p>
+							<p>
+								<strong>PLZ:</strong>
+								{
+								spendenData.plz
+							}</p>
+						</>
+					)
+				}
+					<p>
+						<strong>Registrierungsdatum:</strong>
+						{
+						spendenData.timestamp
+					}</p>
+					<p className="text-center mt-4">
+						<strong>Vielen Dank für Ihre Spende!</strong>
+					</p>
 
-            <div className="text-center mt-6">
+					<div className="text-center mt-6">
-                <button
+						<button onClick={downloadJSON}
-                    onClick={downloadJSON}
+							className="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500">
-                    className="bg-purple-600 text-white px-4 py-2 rounded-md hover:bg-purple-800 focus:outline-none focus:ring-2 focus:ring-purple-500"
+							Bestätigungs-Datei herunterladen
-                >
+						</button>
-                    Bestätigungs-Datei herunterladen
+					</div>
-                </button>
+				</div>
-            </div>
+			</main>
-        </div>
+			<footer className="bg-gray-800 text-white text-center p-4">
-    );
+				<p>&copy; 2024 Lokaler Verein. Alle Rechte vorbehalten.</p>
+			</footer>
+		</div>
+	);
 };
 
 export default ConfirmationPage;

src/components/SpendenForm.js

@@ -2,6 +2,7 @@ import React, {useState} from "react";
 import { Formik, Form, Field, ErrorMessage } from "formik";
 import axios from "axios";
 import ConfirmationPage from "./ConfimationPage";
+import Logo from '../tshirt.png';
 
 const SpendenForm = () => {
     const [isSubmitted, setIsSubmitted] = useState(false);
@@ -38,7 +39,10 @@ const SpendenForm = () => {
     return (
         <div className="flex flex-col min-h-screen">
             <header className="bg-purple-600 text-white p-4 text-center">
-                <h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
+                <div className="flex items-center justify-center">
+                    <img src={Logo} alt="Logo" className="h-12 w-12 mr-4" />
+                    <h1 className="text-3xl font-bold">Kleiderspende Registrierung</h1>
+                </div>
             </header>
 
             <main className="flex-grow p-4 bg-gray-100">