From 2a5ff14cb52cd6c053748562dbbfbd55cf099eb3 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Fri, 29 May 2026 15:09:45 +0200
Subject: [PATCH] =?UTF-8?q?profile.php=20mit=20Nutzerbeitr=C3=A4gen=20+=20?=
 =?UTF-8?q?css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/profile.php |  86 +++++++++++++++++++++++-----------
 css/main.css        |  10 ++++
 css/profile.css     | 111 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 180 insertions(+), 27 deletions(-)
 create mode 100644 css/profile.css

diff --git a/content/profile.php b/content/profile.php
index 769b4fb..ed13d04 100644
--- a/content/profile.php
+++ b/content/profile.php
@@ -4,43 +4,75 @@
 -->
 
 <main class="form-page">
+    <div class="profile-layout-container">
 
-    <div class="form-container">
-        <form>
+        <!-- Linke Spalte: Profildaten -->
+        <div class="form-container">
+            <form>
+                <label class="input-label">Vorname</label>
+                <input type="text" name="Vorname" class="login-input" required
+                       placeholder="Vorname"
+                       value="<?php //DB-Daten ?>">
 
-            <label class="input-label">Vorname</label>
+                <label class="input-label">Nachname</label>
+                <input type="text" name="Nachname" class="login-input" required
+                       placeholder="Nachname"
+                       value="<?php //DB-Daten ?>">
 
-            <input type="text" name="Vorname" class="login-input" required
-                   placeholder="Vorname"
-                   value="<?php //DB-Daten ?>">
+                <label class="input-label">Email-Adresse</label>
+                <input type="email" name="Email" class="login-input" required
+                       placeholder="mustermann@web.de"
+                       value="<?php //DB-Daten ?>">
 
-            <label class="input-label">Nachname</label>
-            <input type="text" name="Nachname" class="login-input" required
-                   placeholder="Nachname"
-                   value="<?php //DB-Daten ?>">
+                <label class="input-label">Passwort</label>
+                <input type="password" name="Passwort" class="login-input"
+                       required placeholder="Passwort">
 
-            <label class="input-label">Email-Adresse</label>
-            <input type="email" name="Email" class="login-input" required
-                   placeholder="mustermann@web.de"
-                   value="<?php //DB-Daten ?>">
+                <button type="submit" class="login-button">
+                    Speichern
+                </button>
 
-            <label class="input-label">Passwort</label>
-            <input type="password" name="Passwort" class="login-input"
-                   required placeholder="Passwort">
+                <button type="button" class="login-button delete-account-button">
+                    Account löschen
+                </button>
+            </form>
+        </div>
 
-            <br>
+        <!-- Rechte Spalte: Eigene Beiträge -->
+        <div id="articlesFromUser" class="form-container">
+            <h2 class="section-title">Meine Beiträge</h2>
+            <div class="articles-list">
 
-            <button type="submit" class="login-button">
-                Speichern
-            </button>
+                <!-- Beispiel-Eintrag 1 (Wird spaeter per PHP wiederholt) -->
+                <div class="article-item">
+                    <div class="article-meta">
+                        <span class="article-date">29.05.2026</span>
+                        <span class="article-category">Technologie</span>
+                    </div>
+                    <h3 class="article-title">Die Zukunft von CSS Grid</h3>
+                    <div class="article-tags">
+                        <span class="tag">Webdesign</span>
+                        <span class="tag">Frontend</span>
+                    </div>
+                    <a href="edit-article.php?id=1" class="edit-link-button">Bearbeiten</a>
+                </div>
 
-            <br><br>
+                <!-- Beispiel-Eintrag 2 -->
+                <div class="article-item">
+                    <div class="article-meta">
+                        <span class="article-date">15.04.2026</span>
+                        <span class="article-category">Lifestyle</span>
+                    </div>
+                    <h3 class="article-title">Produktiv im Homeoffice</h3>
+                    <div class="article-tags">
+                        <span class="tag">Tipps</span>
+                        <span class="tag">Arbeit</span>
+                    </div>
+                    <a href="edit-article.php?id=2" class="edit-link-button">Bearbeiten</a>
+                </div>
 
-            <button type="button" class="login-button">
-                Account löschen
-            </button>
-
-        </form>
+            </div>
+        </div>
 
     </div>
 </main>
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index b0634b1..b448a22 100644
--- a/css/main.css
+++ b/css/main.css
@@ -212,3 +212,13 @@ a, button, input, select, textarea, label, main{
     border-radius: 10px;
     box-shadow: 0 6px 20px rgba(0,0,0,0.1);
 }
+
+.form-container {
+    flex: 1 1 450px;
+    padding: 30px;
+    background-color: white;
+    border: 1px solid #dbe3ec;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/css/profile.css b/css/profile.css
new file mode 100644
index 0000000..9edc24a
--- /dev/null
+++ b/css/profile.css
@@ -0,0 +1,111 @@
+/* Roter Button fuer Account loeschen */
+.form-container #articlesFromUser {
+    flex: 1 1 450px;
+    padding: 30px;
+    background-color: white;
+    border: 1px solid #dbe3ec;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+    box-sizing: border-box;
+}
+
+.profile-layout-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 30px;
+    width: 100%;
+    align-items: flex-start;
+}
+
+.delete-account-button {
+    background-color: #dc2626;
+    margin-bottom: 0;
+}
+
+.delete-account-button:hover {
+    background-color: #b91c1c;
+}
+
+/* Beitragsliste Styling */
+.section-title {
+    margin-top: 0;
+    margin-bottom: 25px;
+    font-size: 1.5rem;
+    color: #1f2937;
+    border-bottom: 2px solid #eef2f7;
+    padding-bottom: 10px;
+}
+
+.articles-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.article-item {
+    padding: 15px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background-color: #f9fafb;
+    position: relative;
+}
+
+.article-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.85rem;
+    color: #6b7280;
+    margin-bottom: 8px;
+}
+
+.article-category {
+    font-weight: bold;
+    color: #2563eb;
+}
+
+.article-title {
+    margin: 0 0 10px 0;
+    font-size: 1.2rem;
+    color: #1f2937;
+}
+
+.article-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 15px;
+}
+
+.tag {
+    font-size: 0.75rem;
+    background-color: #e5e7eb;
+    color: #374151;
+    padding: 3px 8px;
+    border-radius: 4px;
+}
+
+/* Bearbeiten-Button als Link deklariert */
+.edit-link-button {
+    display: inline-block;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: bold;
+    color: #2563eb;
+    border: 1px solid #2563eb;
+    padding: 6px 12px;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.edit-link-button:hover {
+    background-color: #2563eb;
+    color: white;
+}
+
+/* --- RESPONSIVE DESIGN (MOBILGERÄTE) --- */
+@media (max-width: 760px) {
+    .profile-layout-container {
+        flex-direction: column;
+    }
+}
\ No newline at end of file