Save using email

assets/index.html

@@ -14,6 +14,9 @@
     <main>
       <h1>Absolvententreffen</h1>
       <h2>2025</h2>
+      <h2><strong>Datum:</strong> Donnerstag, 25.September 2025</h2>
+      <h2><strong>Uhrzeit:</strong> 17:00 bis 20:00 Uhr</h2>
+      <h2><strong>Ort:</strong> Speisesaal des SZU, Ungargasse 69,1030 Wien</h2>
       <div class="buttons">
         <button class="btn green" onclick="toggleOverlay('zusage')">
           Zusage
@@ -33,7 +36,7 @@
           <input name="firstname" type="text" placeholder="Vorname" required />
           <input name="lastname" type="text" placeholder="Nachname" required />
           <input name="email" type="email" placeholder="Email" required />
-          <input name="department" type="text" placeholder="Abteilung" />
+          <input name="faculty" type="text" placeholder="Fachrichtung" />
           <input name="year" type="text" placeholder="Jahrgang" />
           <input
             name="zusage"
@@ -57,7 +60,7 @@
           <input name="firstname" type="text" placeholder="Vorname" required />
           <input name="lastname" type="text" placeholder="Nachname" required />
           <input name="email" type="email" placeholder="Email" required />
-          <input name="department" type="text" placeholder="Abteilung" />
+          <input name="faculty" type="text" placeholder="Fachrichtung" />
           <input name="year" type="text" placeholder="Jahrgang" />
           <input
             name="absage"

assets/styles.css

@@ -1,114 +1,115 @@
-
 body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  text-align: center;
-  background-color: #fff;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    text-align: center;
+    background-color: #fff;
 }
 
 header {
-  background: #ccc;
-  padding: 10px;
-  text-align: left;
+    background: #ccc;
+    padding: 1rem;
+    text-align: left;
 }
 
 .logo {
-  height: 60px;
+    height: 4rem; /* Relative H<>he */
 }
 
 main {
-  padding: 50px 20px;
+    padding: 5rem 2rem; /* Relative Werte f<>r Padding */
 }
 
 h1 {
-  font-size: 48px;
-  margin: 0;
+    font-size: clamp(1.8rem, 5vw, 3rem); /* Relative Schriftgr<67><72>e */
+    margin: 0;
+    text-align:center;
+    word-wrap: break-word;
 }
 
 h2 {
-  font-size: 24px;
-  color: #666;
-  margin-bottom: 30px;
+    font-size: 1.5rem;
+    color: #666;
+    margin-bottom: 2rem;
 }
 
 .buttons {
-  display: flex;
-  justify-content: center;
-  gap: 15px;
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
 }
 
 .btn {
-  padding: 10px 25px;
-  font-size: 16px;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
+    padding: 0.6rem 2rem; /* Relative Werte f<>r Padding */
+    font-size: 1rem; /* Relative Schriftgr<67><72>e */
+    color: white;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
 }
 
-.btn.green {
-  background-color: #28a745;
-}
+    .btn.green {
+        background-color: #28a745;
+    }
 
-.btn.red {
-  background-color: #dc3545;
-}
+    .btn.red {
+        background-color: #dc3545;
+    }
 
 .overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
-  display: none;
-  align-items: center;
-  justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: none;
+    align-items: center;
+    justify-content: center;
 }
 
 .form-box {
-  background: white;
-  padding: 30px;
-  border-radius: 10px;
-  width: 90%;
-  max-width: 400px;
-  position: relative;
-  text-align: left;
+    background: white;
+    padding: 2rem;
+    border-radius: 1rem;
+    width: 90%;
+    max-width: 25rem; /* Maximale Breite relativ */
+    position: relative;
+    text-align: left;
 }
 
-.form-box h3 {
-  text-align: center;
-}
+    .form-box h3 {
+        text-align: center;
+    }
 
-.form-box p {
-  font-size: 12px;
-  text-align: center;
-}
+    .form-box p {
+        font-size: 0.75rem; /* Relativer Wert */
+        text-align: center;
+    }
 
-.form-box form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 15px;
-}
+    .form-box form {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem; /* Relative Gap */
+        margin-top: 1.5rem;
+    }
 
-.form-box input {
-  padding: 10px;
-  font-size: 14px;
-}
+    .form-box input {
+        padding: 1rem;
+        font-size: 0.875rem; /* Relativer Wert */
+    }
 
-.form-box button {
-  background: black;
-  color: white;
-  padding: 10px;
-  font-size: 16px;
-  border: none;
-  margin-top: 10px;
-  cursor: pointer;
-}
+    .form-box button {
+        background: black;
+        color: white;
+        padding: 1rem;
+        font-size: 1rem;
+        border: none;
+        margin-top: 1rem;
+        cursor: pointer;
+    }
 
 .form-logo {
-  display: block;
-  margin: 20px auto 0;
-  height: 40px;
+    display: block;
+    margin: 2rem auto 0;
+    height: 2.5rem; /* Relative H<>he */
 }

index.js

@@ -32,7 +32,7 @@ app.use(bodyParser.urlencoded({ extended: true }));
 
 app.post("/post", (req, res) => {
   fs.writeFile(
-    `./data/${req.body.firstname}-${req.body.lastname}.json`,
+    `./data/${req.body.email}.json`,
     JSON.stringify(req.body),
     (err) => {
       console.log(err);
@@ -69,7 +69,7 @@ app.post("/post", (req, res) => {
 
   <p>❗Falls du wider Erwarten doch nicht teilnehmen kannst, bitten wir dich um eine kurze Absage per E-Mail an dieselbe Adresse. So können wir besser planen – vielen Dank!</p>
 
-  <p>Wir freuen uns auf einen stimmungsvollen Abend mit dir und auf viele schöne Begegnungen!</p>
+  <p>Wir freuen uns auf einen Abend mit viele schöne Begegnungen!</p>
 
   <p>Herzliche Grüße<br>
   Gerti Brindlmayer &amp; Lukas Aigner<br>
@@ -84,12 +84,20 @@ app.post("/post", (req, res) => {
     }
   );
 
-  return res.sendFile("bestaetigung.html", {
+  return res.sendFile("zusage.html", {
     root: path.join(__dirname, "views"),
   });
 });
 
 app.post("/cancel", (req, res) => {
+  fs.writeFile(
+    `./data/${req.body.email}.json`,
+    JSON.stringify(req.body),
+    (err) => {
+      console.log(err);
+    }
+  );
+
   transporter.sendMail(
     {
       from: "Alumnihub <alumnihub@kocoder.xyz>",
@@ -126,7 +134,7 @@ app.post("/cancel", (req, res) => {
     }
   );
 
-  return res.sendFile("bestaetigung.html", {
+  return res.sendFile("absage.html", {
     root: path.join(__dirname, "views"),
   });
 });

views/absage.html

@@ -14,11 +14,11 @@
     <main>
       <h1>Absolvententreffen</h1>
       <h2>2025</h2>
-      <div class="buttons">
+      
         Vielen Dank für das hinterlassen der Informationen zu dir und das
         Interesse am Absolventinnentreffen. Wir werden dich über folgende
         Veranstaltungen informieren.
-      </div>
+      
     </main>
   </body>
 </html>

views/zusage.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Absolvententreffen 2025</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img src="logo.png" alt="HTL Ungargasse Logo" class="logo" />
+    </header>
+
+    <main>
+        <h1>Absolvententreffen</h1>
+        <h2>2025</h2>
+        
+        <h2>Vielen Dank für deine Anmeldung!</h2>
+
+        <p>
+            Deine Anmeldung zum Absolvent*innentreffen am Donnerstag, 25.
+            September 2025, von 17:00 bis 20:00 Uhr im Speisesaal des SZU wurde
+            erfolgreich übermittelt.
+        </p>
+
+        <p>
+            Du erhältst in Kürze ein Bestätigungsmail mit allen wichtigen
+            Informationen.
+        </p>
+        <p>
+            Solltest du das Mail nicht innerhalb weniger Minuten sehen, wirf bitte
+            auch einen Blick in deinen Spam-Ordner.
+        </p>
+
+        <p>
+            Wir freuen uns schon sehr darauf, dich im September wieder am SZU zu
+            begrüßen!
+        </p>
+        
+    </main>
+  </body>
+</html>