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,4 +1,5 @@
 import React from 'react';
+import Logo from '../tshirt.png';
 
 const ConfirmationPage = ({spendenData}) => {
 	if (!spendenData) {
@@ -9,12 +10,17 @@ const ConfirmationPage = ({ spendenData }) => {
 	const downloadJSON = () => {
 		const jsonData = JSON.stringify(spendenData, null, 2); // Pretty-print JSON
 		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
 		const link = document.createElement('a');
 		link.href = url;
-        link.download = `spende_${spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'}_${spendenData.timestamp}.json`;
+		link.download = `spende_${
+			spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'
+		}_${
+			spendenData.timestamp
+		}.json`;
 		link.click();
 
 		// URL-Objekt wieder freigeben
@@ -22,29 +28,68 @@ const ConfirmationPage = ({ spendenData }) => {
 	};
 
 	return (
+		<div className="flex flex-col min-h-screen">
+			<header className="bg-purple-600 text-white p-4 text-center">
+                <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">
 				<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><strong>Kleidungsart:</strong> {spendenData.kleidungsart}</p>
+					<p>
-            <p><strong>Krisengebiet:</strong> {spendenData.krisengebiet}</p>
+						<strong>Kleidungsart:</strong>
-            <p><strong>Lieferart:</strong> {spendenData.lieferart}</p>
+						{
-            {spendenData.lieferart === 'Abholung' && (
+						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>
-                    <p><strong>PLZ:</strong> {spendenData.plz}</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>
+					<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">
-                <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>
 					</div>
 				</div>
+			</main>
+			<footer className="bg-gray-800 text-white text-center p-4">
+				<p>&copy; 2024 Lokaler Verein. Alle Rechte vorbehalten.</p>
+			</footer>
+		</div>
 	);
 };
 

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">
+                <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">