/* Card styling */ .editor-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
<!-- Flags Tab --> <div class="tab-content hidden" id="tab-flags" role="tabpanel"> <div class="space-y-6"> <div class="flex items-center justify-between"> <h3 class="font-display font-bold text-sm tracking-wider text-[var(--accent)] uppercase">Game Flags</h3> <div class="flex gap-3"> <input type="text" class="editor-input" placeholder="Search flags..." id="flag-search"> <button class="btn btn-secondary text-xs" id="add-flag-btn">+ Add Flag</button> </div> </div> corruption of champions 2 editor
<!-- Editor Tabs --> <section class="animate-entrance animate-entrance-delay-1" id="editor-section" style="display: none;"> <div class="editor-card"> <!-- Tab Navigation --> <nav class="border-b border-[var(--border)] flex overflow-x-auto" role="tablist" aria-label="Editor tabs"> <button class="tab-btn active" role="tab" aria-selected="true" data-tab="character">Character</button> <button class="tab-btn" role="tab" aria-selected="false" data-tab="stats">Stats</button> <button class="tab-btn" role="tab" aria-selected="false" data-tab="items">Items</button> <button class="tab-btn" role="tab" aria-selected="false" data-tab="perks">Perks</button> <button class="tab-btn" role="tab" aria-selected="false" data-tab="flags">Flags</button> </nav> /* Card styling */
<div class="stat-group" data-stat="tou"> <div class="flex items-center justify-between mb-2"> <label class="text-sm font-bold flex items-center gap-2"> <span class="w-6 h-6 rounded bg-green-900/50 flex items-center justify-center text-xs">T</span> Toughness </label> <input type="number" class="editor-input w-20 text-center" value="15" min="1" max="100"> </div> <div class="stat-bar"> <div class="stat-fill bg-gradient-to-r from-green-900 to-green-600" style="width: 15%"></div> </div> </div> border: 1px solid var(--border)
<div class="pt-4 border-t border-[var(--border)]"> <div class="grid grid-cols-2 gap-4"> <div> <label class="block text-xs text-[var(--muted)] mb-2 uppercase tracking-wider">Attack</label> <input type="number" class="editor-input w-full" value="10" min="0"> </div> <div> <label class="block text-xs text-[var(--muted)] mb-2 uppercase tracking-wider">Defense</label> <input type="number" class="editor-input w-full" value="5" min="0"> </div> </div> </div> </div> </div> </div>
/* Input styling */ .editor-input { background: var(--bg); border: 1px solid var(--border); color: var(--fg); padding: 0.5rem 0.75rem; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; transition: border-color 0.2s, box-shadow 0.2s; } .editor-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .editor-input:disabled { opacity: 0.5; cursor: not-allowed; }
: Go to the Save Editor and use the Load button at the top-right to upload your downloaded file .