add Logo + Header & Footer Confirmsite

This commit is contained in:
Michaela Grabke 2024-09-14 16:34:45 +02:00
parent c4abbc7ef7
commit 715d25a35e
8 changed files with 119 additions and 47 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import Logo from '../tshirt.png';
const ConfirmationPage = ({spendenData}) => { const ConfirmationPage = ({spendenData}) => {
if (!spendenData) { if (!spendenData) {
@ -9,12 +10,17 @@ const ConfirmationPage = ({ spendenData }) => {
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_${
spendenData.lieferart === 'Abholung' ? spendenData.abholadresse.replace(/\s+/g, '_') : 'uebergabe'
}_${
spendenData.timestamp
}.json`;
link.click(); link.click();
// URL-Objekt wieder freigeben // URL-Objekt wieder freigeben
@ -22,29 +28,68 @@ const ConfirmationPage = ({ spendenData }) => {
}; };
return ( 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"> <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> <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"> <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 Bestätigungs-Datei herunterladen
</button> </button>
</div> </div>
</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>
); );
}; };

View File

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

BIN
src/tshirt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB