Enhance calculator modifiers and UI styling

This commit is contained in:
2026-01-14 20:44:19 +01:00
parent 9b5ddf5f3d
commit 5da0e5485a
4 changed files with 521 additions and 20 deletions
+40 -5
View File
@@ -148,12 +148,47 @@
<section class="af-grid">
<div class="af-card">
<div class="af-card-header">
<h2>Modifier library</h2>
<p>No live modifiers yet. Use this space to jot down prototype buffs.</p>
<h2>Modifiers &amp; operatives</h2>
<p>Stack items, perks, and abilities with operative-specific bonuses.</p>
</div>
<div class="af-empty">
<p>Modifier slots are empty.</p>
<button type="button" class="af-muted-button">Add placeholder</button>
<div class="af-modifier-stack" data-source="{{ url_for('static', filename='json/modifiers.json') }}">
<label>
Operative
<select id="af-operative-select" name="operativeSelect"
data-source="{{ url_for('static', filename='json/operative.json') }}">
<option value="">No operative selected</option>
</select>
<span class="af-field-hint">Pick an operative to load their unique modifiers.</span>
</label>
<div class="af-modifier-subset">
<p class="af-modifier-title">Operative modifiers</p>
<div class="af-checkbox-grid" id="af-operative-modifiers">
<p class="af-empty-hint">Select an operative to see perk modifiers.</p>
</div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Item buffs</p>
<div class="af-checkbox-grid" id="af-item-modifiers"></div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Operative perks</p>
<div class="af-checkbox-grid" id="af-perk-modifiers"></div>
</div>
<div class="af-modifier-subset">
<p class="af-modifier-title">Ability perks</p>
<div class="af-checkbox-grid" id="af-ability-modifiers"></div>
</div>
</div>
<div class="af-active-modifiers">
<p class="af-modifier-title">Active stack</p>
<div class="af-tag-list" id="af-active-modifiers">
<span class="af-tag">No modifiers selected</span>
</div>
</div>
</div>
<div class="af-card">