messages-styling

content/createArticle.php

@@ -9,12 +9,12 @@ session_start();
 
     <main class="editor-main">
         <?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "internal_error"): ?>
-        <p style="color:red">
+        <p class="alert-message is-error">
             Es ist ein Fehler beim Speichern aufgetreten. Bitte versuche es erneut.
         </p>
         <?php endif; ?>
         <?php if (isset($_SESSION["message"]) && $_SESSION["message"] == "missing_parameters"): ?>
-        <p style="color:red">
+        <p class="alert-message is-error">
             Jeder Beitrag muss einen Titel, Kategorie und Inhalt besitzen.
         </p>
         <?php endif; ?>

css/message.css

@@ -0,0 +1,29 @@
+.alert-message {
+    padding: 12px 16px;
+    margin: 12px 0;
+    border-radius: 6px;
+    border: 1px solid transparent;
+
+    font-family: sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+/* Rote Fehlermeldung */
+.alert-message.is-error {
+    color: #ba1a1a;
+    background-color: #ffeede;
+    border-color: #ffb4ab;
+}
+
+/* Grüne Erfolgsmeldung */
+.alert-message.is-success {
+    color: #006e2c;
+    background-color: #e8f5e9;
+    border-color: #b2dfdb;
+}

index.php

@@ -24,6 +24,7 @@ require_once $abs_path . "/php/controller/index-controller.php";
     <link rel="stylesheet" href="css/navbar.css">
     <link rel="stylesheet" href="css/footer.css">
     <link rel="stylesheet" href="css/article.css">
+    <link rel="stylesheet" href="css/message.css">
     <title>EduForge</title>
 </head>
 
@@ -32,13 +33,9 @@ require_once $abs_path . "/php/controller/index-controller.php";
     <?php
 	include_once $abs_path . '/includes/navbar.php';
     if (isset($_SESSION["message"]) && $_SESSION["message"] == "new_article"): ?>
-    <div class="flexbox">
-        <div class="container" style="width: 50%">
-            <p style="color:green">
+    <p class="alert-message is-success">
         Dein Beitrag wurde erfolgreich veröffentlicht!
     </p>
-        </div>
-    </div>
     <?php endif;
 	//Dynamischer Inhalt:
     if (isset($_GET["pfad"])) {