initialize Ikonis system module with motherboard configuration and feature management UI

This commit is contained in:
CPTN Cosmo 2026-04-26 17:03:48 +02:00
commit 7bffeacaac
16 changed files with 1008 additions and 0 deletions

View file

@ -0,0 +1,62 @@
<div class="ikonis-config-container" style="background: #0d0d16; color: white; padding: 1.5rem; display: flex; flex-direction: column; max-height: 600px; box-sizing: border-box;">
<div class="bonded-config-section" style="flex: 0 0 auto; margin-bottom: 1rem; padding: 1rem; border: 1px solid #ff2e63; border-radius: 8px; background: rgba(255,46,99,0.05);">
<h3 style="margin-top: 0; color: #ff2e63; font-size: 1.1rem; border-bottom: 1px solid rgba(255,46,99,0.2); padding-bottom: 0.5rem;">Default Bonded Feature</h3>
<div class="bonded-drop-zone" style="height: 50px; border: 2px dashed #444; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2);">
{{#if bondedName}}
<div style="font-weight: bold; color: #00d2ff;"><i class="fa-solid fa-link"></i> {{bondedName}}</div>
{{else}}
<span style="color: #666; font-size: 0.9rem;">Drop Default Bonded Feature Here</span>
{{/if}}
</div>
</div>
<h3 style="flex: 0 0 auto; margin: 0 0 0.5rem 0; color: #ff2e63; font-size: 1.1rem;">Augment Blueprints</h3>
<div class="augment-manager-scroll" style="flex: 1; overflow-y: auto; border: 1px solid #2d3436; border-radius: 8px; background: rgba(0,0,0,0.2); margin-bottom: 0.5rem; min-height: 150px;">
<table class="config-table" style="width: 100%; border-collapse: separate; border-spacing: 0;">
<thead style="position: sticky; top: 0; background: #16213e; z-index: 10;">
<tr style="text-align: left;">
<th style="padding: 0.75rem 0.5rem; color: #ff2e63; border-bottom: 2px solid #ff2e63;">Name</th>
<th style="padding: 0.75rem 0.5rem; color: #ff2e63; border-bottom: 2px solid #ff2e63;">Effect</th>
<th style="padding: 0.75rem 0.5rem; color: #ff2e63; border-bottom: 2px solid #ff2e63;">Cost</th>
<th style="padding: 0.75rem 0.5rem; color: #ff2e63; border-bottom: 2px solid #ff2e63; width: 140px;">Feature</th>
<th style="padding: 0.75rem 0.5rem; width: 50px; color: #ff2e63; border-bottom: 2px solid #ff2e63;">T</th>
<th style="padding: 0.75rem 0.5rem; width: 30px; border-bottom: 2px solid #ff2e63;"></th>
</tr>
</thead>
<tbody>
{{#each augments as |aug|}}
<tr style="border-bottom: 1px solid #2d3436;" data-id="{{aug.id}}">
<td style="padding: 0.4rem;">
<input type="text" name="augments.{{aug.id}}.name" value="{{aug.name}}" style="width: 100%; background: #1a1a2e; color: white; border: 1px solid #333; padding: 2px 4px;">
</td>
<td style="padding: 0.4rem;">
<input type="text" name="augments.{{aug.id}}.effect" value="{{aug.effect}}" style="width: 100%; background: #1a1a2e; color: white; border: 1px solid #333; padding: 2px 4px;">
</td>
<td style="padding: 0.4rem;">
<input type="text" name="augments.{{aug.id}}.cost" value="{{aug.cost}}" style="width: 100%; background: #1a1a2e; color: white; border: 1px solid #333; padding: 2px 4px;">
</td>
<td style="padding: 0.4rem;">
<div class="feature-slot" style="min-height: 24px; border: 1px dashed #444; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; background: rgba(0,0,0,0.3);">
{{#if aug.featureName}}
<span style="color: #00d2ff; flex: 1; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{aug.featureName}}">{{aug.featureName}}</span>
<a data-action="clearFeature" data-id="{{aug.id}}" style="color: #ff2e63; margin-right: 4px;"><i class="fa-solid fa-times"></i></a>
{{else}}
<span style="color: #444;">Drop Item</span>
{{/if}}
</div>
</td>
<td style="padding: 0.4rem;">
<input type="number" name="augments.{{aug.id}}.precompile" value="{{aug.precompile}}" min="1" max="4" style="width: 100%; background: #1a1a2e; color: white; border: 1px solid #333; padding: 2px 4px;">
</td>
<td style="padding: 0.4rem; text-align: center;">
<a data-action="delete" data-id="{{aug.id}}" style="color: #ff2e63;"><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>