nico/Wackelpeter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skill icons to level-up offer cards

Browse Source 
Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
nico
2026-08-18 13:26:41 +02:00
co-authored by Qwen-Coder
parent 6f207ba1a0
commit 9e3e5c70e0
3 changed files with 228 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+14 -2
View File
@@ -167,7 +167,7 @@
display: flex; gap: 20px;
}
.offer-card {
width: 230px; min-height: 140px; background: rgba(20,20,30,0.9);
width: 230px; min-height: 220px; background: rgba(20,20,30,0.9);
border: 2px solid #888; padding: 14px; cursor: pointer;
display: flex; flex-direction: column; gap: 10px;
transition: transform 0.1s ease, border-color 0.1s ease;
@@ -177,8 +177,17 @@
border-color: #ffcc00; background: rgba(60,50,20,0.95);
transform: scale(1.04); box-shadow: 0 0 18px rgba(255,204,0,0.4);
}
.offer-icon {
width: 76px; height: 76px; margin: 2px auto 0;
filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
transition: filter 0.1s ease;
}
.offer-icon svg { width: 100%; height: 100%; display: block; }
.offer-card:hover .offer-icon, .offer-card.selected .offer-icon {
filter: drop-shadow(0 0 9px rgba(255,204,0,0.5));
}
.offer-title {
color: #ffcc00; font-size: 18px; font-weight: bold;
color: #ffcc00; font-size: 18px; font-weight: bold; text-align: center;
}
.offer-desc {
color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5;
@@ -244,16 +253,19 @@
<h2>Level Up!</h2>
<div id="offer-row">
<div id="offer-0" class="offer-card">
<div id="offer-icon-0" class="offer-icon"></div>
<div id="offer-title-0" class="offer-title"></div>
<div id="offer-desc-0" class="offer-desc"></div>
<div class="offer-hint">[1] auswählen</div>
</div>
<div id="offer-1" class="offer-card">
<div id="offer-icon-1" class="offer-icon"></div>
<div id="offer-title-1" class="offer-title"></div>
<div id="offer-desc-1" class="offer-desc"></div>
<div class="offer-hint">[2] auswählen</div>
</div>
<div id="offer-2" class="offer-card">
<div id="offer-icon-2" class="offer-icon"></div>
<div id="offer-title-2" class="offer-title"></div>
<div id="offer-desc-2" class="offer-desc"></div>
<div class="offer-hint">[3] auswählen</div>