niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

profile.php mit Nutzerbeiträgen + css

Browse Source
This commit is contained in:
NOrtmann1
2026-05-29 15:09:45 +02:00
parent df17478d72
commit 2a5ff14cb5
3 changed files with 180 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
content/profile.php
+59 -27
View File
@@ -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>
css/main.css
+10
View File
@@ -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;
}
css/profile.css
+111
View File
@@ -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;
}
}