refactor account page layout and styles for improved user experience and responsiveness
This commit is contained in:
parent
84d77f0e0e
commit
2039b7ba0f
90
account.php
90
account.php
@ -62,63 +62,89 @@ if (!$user)
|
||||
include 'header.php';
|
||||
?>
|
||||
|
||||
|
||||
<main class="auth" role="main">
|
||||
<section class="auth__grid auth__card__side" aria-label="Account Bereich">
|
||||
<div class="auth__card auth__card__side__picture">
|
||||
<header class="auth__header">
|
||||
<img src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
|
||||
alt="Profilbild"
|
||||
width="240"
|
||||
style="max-width:100%; height:auto;">
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="auth__card">
|
||||
<header class="auth__header">
|
||||
<p class="auth__title">Username: <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
<p class="auth__title">UserID: <?php echo (int)$user['userID']; ?></p>
|
||||
<p class="auth__title">Email: <?php echo htmlspecialchars($user['email']); ?></p>
|
||||
</header>
|
||||
<section class="account" aria-label="Account Bereich">
|
||||
|
||||
<?php if (isset($_GET['upload']) && $_GET['upload'] === 'ok'): ?>
|
||||
<p class="auth__alert__sucess" role="status">Upload erfolgreich.</p>
|
||||
<p class="auth__alert__sucess account__toast" role="status">Profilbild wurde erfolgreich aktualisiert.</p>
|
||||
<?php endif; ?>
|
||||
<?php if (isset($_GET['upload']) && $_GET['upload'] === 'err'): ?>
|
||||
<p class="auth__alert__error account__toast" role="alert">Upload fehlgeschlagen. Bitte eine gültige Bilddatei auswählen.</p>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (isset($_GET['upload']) && $_GET['upload'] === 'err'): ?>
|
||||
<p class="auth__alert__error" role="alert">Upload fehlgeschlagen. Bitte eine gültige Bilddatei auswählen.</p>
|
||||
<?php endif; ?>
|
||||
<!-- ═══ Profil-Sidebar ═══ -->
|
||||
<div class="auth__card account__profile">
|
||||
<div class="account__avatar-wrapper">
|
||||
<img class="account__avatar"
|
||||
src="<?php echo htmlspecialchars($user['profilePicture']); ?>"
|
||||
alt="Profilbild von <?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?>"
|
||||
width="180">
|
||||
</div>
|
||||
|
||||
<div class="auth__card">
|
||||
<h1 class="account__displayname"><?php echo htmlspecialchars($user['displayName'], ENT_QUOTES, 'UTF-8'); ?></h1>
|
||||
|
||||
<dl class="account__details">
|
||||
<div class="account__detail-row">
|
||||
<dt>User-ID</dt>
|
||||
<dd>#<?php echo (int)$user['userID']; ?></dd>
|
||||
</div>
|
||||
<div class="account__detail-row">
|
||||
<dt>E-Mail</dt>
|
||||
<dd><?php echo htmlspecialchars($user['email']); ?></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Einstellungen ═══ -->
|
||||
<div class="account__settings">
|
||||
|
||||
<!-- Profilbild ändern -->
|
||||
<div class="auth__card account__section">
|
||||
<h2 class="account__section-title">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
||||
Profilbild ändern
|
||||
</h2>
|
||||
<form class="auth__form" action="upload.php" method="post" enctype="multipart/form-data">
|
||||
<div class="auth__field">
|
||||
<label for="file">Profilbild auswählen</label>
|
||||
<label for="file">Neue Bilddatei auswählen</label>
|
||||
<input type="file" name="uploadFile" id="file" accept="image/*" required>
|
||||
<p class="auth__tip">Erlaubt: JPG/PNG. max. 20MB.</p>
|
||||
<p class="auth__tip">Erlaubt: JPG / PNG · max. 20 MB</p>
|
||||
</div>
|
||||
|
||||
<div class="auth__actions">
|
||||
<button class="auth__submit" type="submit">Hochladen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="auth__card">
|
||||
<div class="auth__actions">
|
||||
<a href="productAdder.php" style="display:block;">
|
||||
<button class="auth__submit" type="button">Produkt hinzufügen</button>
|
||||
<!-- Schnellaktionen -->
|
||||
<div class="auth__card account__section">
|
||||
<h2 class="account__section-title">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
|
||||
Schnellaktionen
|
||||
</h2>
|
||||
<div class="account__quick-actions">
|
||||
<a href="productAdder.php" class="auth__submit account__action-link">
|
||||
Produkt hinzufügen
|
||||
</a>
|
||||
<a href="wunschliste.php" class="auth__submit account__action-link account__action-link--secondary">
|
||||
Meine Wunschliste
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Abmelden -->
|
||||
<div class="auth__card account__section account__section--danger">
|
||||
<h2 class="account__section-title account__section-title--danger">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||
Sitzung beenden
|
||||
</h2>
|
||||
<p class="account__danger-text">Du wirst ausgeloggt und musst dich erneut anmelden.</p>
|
||||
<form action="logout.php" method="post">
|
||||
<div class="auth__actions">
|
||||
<button class="auth__submit auth__submit--danger" type="submit">
|
||||
Abmelden
|
||||
</button>
|
||||
<button class="auth__submit auth__submit--danger" type="submit">Abmelden</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -439,6 +439,173 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
ACCOUNT PAGE – Profile + Settings Layout
|
||||
========================================================== */
|
||||
|
||||
/* ─── Main Grid ─── */
|
||||
.account {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 1.5rem;
|
||||
width: min(960px, 100%);
|
||||
margin: 0 auto;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* Toast spans full width */
|
||||
.account__toast {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* ─── Profile Sidebar ─── */
|
||||
.account__profile {
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
text-align: center;
|
||||
padding: 2rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto 1.25rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--border-default);
|
||||
box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
|
||||
transition: all var(--transition-smooth);
|
||||
}
|
||||
|
||||
.account__avatar-wrapper:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.account__avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.account__displayname {
|
||||
margin: 0 0 1.25rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.3px;
|
||||
background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ─── Detail Rows (User info) ─── */
|
||||
.account__details {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.account__detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.65rem 0;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.account__detail-row:last-child {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.account__detail-row dt {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.account__detail-row dd {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ─── Settings Column ─── */
|
||||
.account__settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* ─── Section Cards ─── */
|
||||
.account__section {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.account__section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.account__section-title svg {
|
||||
color: var(--color-primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.account__section-title--danger svg {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* ─── Quick Actions ─── */
|
||||
.account__quick-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.account__action-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff;
|
||||
}
|
||||
|
||||
.account__action-link--secondary {
|
||||
background: linear-gradient(135deg, var(--color-accent), #059669) !important;
|
||||
box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
|
||||
}
|
||||
|
||||
.account__action-link--secondary:hover {
|
||||
box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4) !important;
|
||||
}
|
||||
|
||||
/* ─── Danger Section ─── */
|
||||
.account__section--danger {
|
||||
border-color: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.account__section--danger:hover {
|
||||
border-color: rgba(239, 68, 68, 0.2);
|
||||
box-shadow: var(--shadow-md), 0 0 40px rgba(239, 68, 68, 0.08);
|
||||
}
|
||||
|
||||
.account__danger-text {
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ==========================================================
|
||||
RESPONSIVE
|
||||
========================================================== */
|
||||
@ -482,6 +649,21 @@
|
||||
.auth__sideCard {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Account page responsive */
|
||||
.account {
|
||||
grid-template-columns: 1fr;
|
||||
width: min(520px, 100%);
|
||||
}
|
||||
|
||||
.account__profile {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.account__avatar-wrapper {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
|
||||
@ -93,7 +93,7 @@
|
||||
<a class="nav__login nav__wishlist" href="wunschliste.php" aria-label="Wunschliste">
|
||||
<svg class="icon icon-user" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M16 2H8a3 3 0 0 0-3 3v16a1 1 0 0 0 .5.87a1 1 0 0 0 1 0l5.5-3.18l5.5 3.18a1 1 0 0 0 .5.13a1 1 0 0 0 .5-.13A1 1 0 0 0 19 21V5a3 3 0 0 0-3-3Zm1 17.27l-4.5-2.6a1 1 0 0 0-1 0L7 19.27V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="nav__login" href="account.php" aria-label="Account">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user