AliceDarkest
74 lines
3.2 KiB
HTML
74 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SysnaptiK Neural – Trophäen</title>
|
||
<link rel="stylesheet" href="/css/theme.css?v=3">
|
||
<script src="/js/theme.js?v=4"></script>
|
||
<style>
|
||
.mf-ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem; }
|
||
.achievement-card { background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:1.3rem 1.1rem; text-align:center; transition:transform .16s ease, box-shadow .25s ease; }
|
||
.achievement-card.unlocked { border-color:var(--border-accent); box-shadow:0 0 18px var(--glow-w); }
|
||
.achievement-card.unlocked:hover { transform:translateY(-4px); box-shadow:0 0 24px var(--glow-s); }
|
||
.achievement-card.locked { opacity:.55; }
|
||
.achievement-card .trophy-icon { font-size:2.4rem; margin-bottom:.6rem; filter:drop-shadow(0 0 8px var(--glow-s)); }
|
||
.achievement-card.locked .trophy-icon { filter:grayscale(1); }
|
||
.achievement-card h2 { color:var(--heading); font-size:1.05rem; margin-bottom:.5rem; }
|
||
.achievement-card p { color:var(--muted); font-size:.84rem; line-height:1.45; }
|
||
.achievement-card .status { margin-top:.7rem; font-weight:700; color:var(--accent); }
|
||
.achievement-card.locked .status { color:var(--muted); }
|
||
.mf-footer { text-align:center; color:var(--muted); font-size:.82rem; padding:1.6rem 1rem; }
|
||
.mf-footer a { color:var(--muted); text-decoration:none; margin:0 .15rem; }
|
||
.mf-footer a:hover { color:var(--accent); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="mf-theme-float"><button class="mf-theme"></button></div>
|
||
|
||
<div class="mf-container">
|
||
|
||
<div class="mf-page-head">
|
||
<a th:href="@{/dashboard}" class="mf-back">⟵ Zurück zum Dashboard</a>
|
||
</div>
|
||
<span class="mf-eyebrow">Deine Erfolge</span>
|
||
<h1 style="color:var(--heading); font-size:1.9rem; font-weight:800; margin:.3rem 0 .25rem;">🏆 Deine Erfolge</h1>
|
||
<p style="color:var(--muted); margin-bottom:1.4rem;">Sammle sie alle und werde zur Legende!</p>
|
||
|
||
<nav th:replace="~{fragments/layout :: profileTabs('erfolge')}"></nav>
|
||
|
||
<div class="mf-panel">
|
||
<div class="mf-ach-grid">
|
||
<div class="achievement-card"
|
||
th:each="achievement : ${achievements}"
|
||
th:classappend="${achievement.dateAchieved != null} ? ' unlocked' : ' locked'">
|
||
|
||
<div class="trophy-icon">🏆</div>
|
||
|
||
<h2 th:text="${achievement.title}">Titel des Erfolgs</h2>
|
||
|
||
<p th:text="${achievement.description}">Beschreibung des Erfolgs</p>
|
||
|
||
<p class="status"
|
||
th:text="${achievement.dateAchieved != null} ? '✔️ Freigeschaltet' : '🔒 Gesperrt'">
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="mf-footer">
|
||
<a href="#">Support</a>
|
||
<a href="#">Feedback</a>
|
||
<a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
|
||
<a href="/richtlinien">Richtlinien</a>
|
||
<a href="/datenschutz">Datenschutz</a>
|
||
<a href="/impressum">Impressum</a>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|