überarbeitet zu einem feedbackfeld

assets/index.html

@@ -12,37 +12,30 @@
     </header>
 
     <main>
-      <h1>Absolvententreffen</h1>
-      <h2>2025</h2>
+      <h2><strong>Geben Sie uns gerne Feedback zu unserem Diplomprojekt AlumniHub</strong></h2>
       <div class="buttons">
-        <button class="btn green" onclick="toggleOverlay('zusage')">
-          Zusage
-        </button>
-        <button class="btn red" onclick="toggleOverlay('absage')">
-          Absage
+        <button class="btn green" onclick="toggleOverlay('feedback')">
+          Feedback
         </button>
       </div>
     </main>
 
     <!-- Zusage Overlay -->
-    <div class="overlay" id="zusage">
+    <div class="overlay" id="feedback">
       <div class="form-box">
-        <h3>Zugesagt</h3>
+        <h3>Feedback</h3>
         <p>Um es zu Finalisieren füllen Sie bitte die Felder aus</p>
+
         <form method="post" action="/post">
-          <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="year" type="text" placeholder="Jahrgang" />
-          <input
-            name="zusage"
-            id="zusage"
-            type="checkbox"
-            checked
-            style="display: none"
-          />
-          <button type="submit">Absenden</button>
+            <input name="email" type="email" placeholder="Email" required />
+            <textarea name="Feedback"
+                      id="feedbackText"
+                      placeholder="Feedback"
+                      rows="4"
+                      cols="40"
+                      required>
+                    </textarea>
+            <button type="submit">Absenden</button>
         </form>
         <img src="logo.png" alt="HTL Logo" class="form-logo" />
       </div>
@@ -57,7 +50,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,101 +32,38 @@ 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);
     }
   );
 
-  transporter.sendMail(
-    {
-      from: "Alumnihub <alumnihub@kocoder.xyz>",
-      to: `${req.body.firstname} ${req.body.lastname} <${req.body.email}>`,
-      envelope: {
-        from: "alumnihub@kocoder.xyz",
-        to: req.body.email,
-      },
-      subject: "Deine Anmeldung für's Absolvententreffen.",
-      text: `
-  <!DOCTYPE html>
-  <html lang="de">
-  <body style="font-family: Arial, sans-serif; line-height: 1.5;">
-
-  <p>Liebe/r ${req.body.firstname},</p>
-
-  <p>vielen Dank für deine Anmeldung zum Absolvent*innentreffen am<br>
-  📅 <strong>Donnerstag, 25. September 2025</strong>,<br>
-  ⏰ <strong>von 17:00 bis 20:00 Uhr</strong><br>
-  📍 im Speisesaal des SZU, Ungargasse 69, 1030 Wien.</p>
-
-  <p>Wir freuen uns sehr, dich an diesem besonderen Abend begrüßen zu dürfen!</p>
-
-  <p>Dich erwarten spannende Einblicke in aktuelle Entwicklungen am SZU, interessante Führungen sowie die Möglichkeit zum Wiedersehen, Austauschen und gemeinsamen Erinnern. Für das leibliche Wohl sorgt eine engagierte Abschlussklasse – der Reinerlös unterstützt ihre Abschlussreise. <strong>Bitte bring dafür Bargeld mit.</strong></p>
-
-  <p>📸 Wenn du Erinnerungsfotos aus deiner Schulzeit beisteuern möchtest, sende sie uns gerne vorab an:<br>
-  📧 <a href="mailto:szu.absolventinnentreffen@outlook.com">szu.absolventinnentreffen@outlook.com</a></p>
-
-  <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>Herzliche Grüße<br>
-  Gerti Brindlmayer &amp; Lukas Aigner<br>
-  im Namen des Teams des Absolvent*innen- &amp; Fördervereins des SZU</p>
-
-  </body>
-  </html>
-  `,
-    },
     (err, info) => {
       if (err) return res.send(err);
     }
-  );
+ 
 
-  return res.sendFile("bestaetigung.html", {
+  return res.sendFile("zusage.html", {
     root: path.join(__dirname, "views"),
   });
-});
 
 app.post("/cancel", (req, res) => {
-  transporter.sendMail(
-    {
-      from: "Alumnihub <alumnihub@kocoder.xyz>",
-      to: `${req.body.firstname} ${req.body.lastname} <${req.body.email}>`,
-      envelope: {
-        from: "alumnihub@kocoder.xyz",
-        to: req.body.email,
-      },
-      subject: "Deine Absage für's Absolvententreffen.",
-      text: `
-    <!DOCTYPE html>
-    <html lang="de">
-    <body style="font-family: Arial, sans-serif; line-height: 1.5;">
+  fs.writeFile(
+    `./data/${req.body.email}.json`,
+    JSON.stringify(req.body),
+    (err) => {
+      console.log(err);
+    }
+  );
 
-    <p>Liebe/r ${req.body.firstname},</p>
-
-    <p>vielen Dank für deine Rückmeldung zum Absolventinnentreffen am <strong>25. September 2025</strong>. Auch wenn du diesmal nicht teilnehmen kannst, freut es uns sehr, dass du mit dem <strong>Absolventinnen- &amp; Förderverein des SZU</strong> in Verbindung bleiben möchtest.</p>
-
-    <p>Wir haben deine Kontaktdaten gespeichert und melden uns gerne bei zukünftigen Veranstaltungen oder Aktivitäten des Vereins wieder bei dir.</p>
-
-    <p>Wenn du Fragen hast oder dich aktiv einbringen möchtest, erreichst du uns jederzeit unter:<br>
-    📧 <a href="mailto:szu.absolventinnentreffen@outlook.com">szu.absolventinnentreffen@outlook.com</a></p>
-
-    <p>Herzliche Grüße<br>
-    Gerti Brindlmayer &amp; Lukas Aigner<br>
-    im Namen des Teams des Absolvent*innen- &amp; Fördervereins des SZU</p>
-
-    </body>
-    </html>
-    `,
     },
     (err, info) => {
       if (err) return res.send(err);
     }
   );
 
-  return res.sendFile("bestaetigung.html", {
+  return res.sendFile("absage.html", {
     root: path.join(__dirname, "views"),
   });
 });

package.json

@@ -16,6 +16,7 @@
     "nodemailer": "^7.0.5"
   },
   "devDependencies": {
+    "eslint": "^9.36.0",
     "nodemon": "^3.1.10"
   }
 }

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,21 @@
+<!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>Vielen Dank für deine Feedback</h1>
+        
+        
+       
+    </main>
+  </body>
+</html>