Skip to content

Commit 6ba7122

Browse files
madeofpendletonwoolmadeofpendletonwool
committed
Added tab for inventory
1 parent 57b7912 commit 6ba7122

6 files changed

Lines changed: 1186 additions & 7 deletions

File tree

‎client/index.html‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,10 @@
7272
<i class="ph ph-shopping-cart nav-icon"></i>
7373
<span class="nav-text">Shopping</span>
7474
</a>
75+
<a href="#" data-page="inventory" class="nav-link">
76+
<i class="ph ph-archive nav-icon"></i>
77+
<span class="nav-text">Inventory</span>
78+
</a>
7579
<a href="#" data-page="settings" class="nav-link">
7680
<i class="ph ph-gear nav-icon"></i>
7781
<span class="nav-text">Settings</span>
@@ -835,6 +839,181 @@ <h3 style="margin-bottom: 1rem;">Filters & Sorting</h3>
835839
</div>
836840
</div>
837841

842+
<!-- Inventory Page -->
843+
<div id="inventory-page" class="page hidden">
844+
<div class="page-header">
845+
<h2>My Inventory</h2>
846+
<div class="page-header-actions">
847+
<button id="inventory-select-toggle" class="btn btn-secondary" title="Select multiple cards">
848+
<i class="ph ph-selection btn-icon"></i>
849+
<span class="btn-text">Select</span>
850+
</button>
851+
<button id="inventory-bulk-add-btn" class="btn btn-primary">
852+
<i class="ph ph-plus-circle btn-icon"></i>
853+
<span class="btn-text">Bulk Add</span>
854+
</button>
855+
</div>
856+
</div>
857+
858+
<!-- Bulk Actions Bar (hidden by default) -->
859+
<div id="inventory-bulk-actions" class="inventory-bulk-actions hidden">
860+
<div class="bulk-actions-left">
861+
<span id="inventory-selected-count">0 selected</span>
862+
<button id="inventory-select-all" class="btn btn-sm btn-secondary">Select All</button>
863+
<button id="inventory-clear-selection" class="btn btn-sm btn-secondary">Clear</button>
864+
</div>
865+
<div class="bulk-actions-right">
866+
<button id="inventory-add-to-deck" class="btn btn-sm btn-primary">
867+
<i class="ph ph-folder-plus"></i> Add to Deck
868+
</button>
869+
<button id="inventory-remove-selected" class="btn btn-sm btn-danger">
870+
<i class="ph ph-trash"></i> Remove
871+
</button>
872+
</div>
873+
</div>
874+
875+
<!-- Stats row -->
876+
<div id="inventory-stats" class="inventory-stats"></div>
877+
878+
<!-- Quick Add search bar -->
879+
<div class="inventory-quick-add">
880+
<div class="quick-add-wrapper">
881+
<input
882+
type="text"
883+
id="inventory-quick-search"
884+
placeholder="Quick add: type card name..."
885+
autocomplete="off"
886+
/>
887+
<div id="inventory-quick-results" class="inventory-quick-results hidden"></div>
888+
</div>
889+
</div>
890+
891+
<!-- Filters -->
892+
<div class="inventory-filters">
893+
<div class="inventory-filter-row">
894+
<div class="filter-group">
895+
<label>Search</label>
896+
<input
897+
type="text"
898+
id="inventory-search"
899+
placeholder="Filter by name..."
900+
class="filter-input"
901+
/>
902+
</div>
903+
<div class="filter-group">
904+
<label>Sort By</label>
905+
<select id="inventory-sort" class="filter-select">
906+
<option value="name">Name</option>
907+
<option value="quantity">Quantity</option>
908+
<option value="cmc">Mana Value</option>
909+
<option value="color">Color</option>
910+
<option value="type">Type</option>
911+
</select>
912+
</div>
913+
<div class="filter-group">
914+
<label>Card Type</label>
915+
<select id="inventory-type" class="filter-select">
916+
<option value="all">All Types</option>
917+
<option value="Creature">Creature</option>
918+
<option value="Instant">Instant</option>
919+
<option value="Sorcery">Sorcery</option>
920+
<option value="Enchantment">Enchantment</option>
921+
<option value="Artifact">Artifact</option>
922+
<option value="Planeswalker">Planeswalker</option>
923+
<option value="Land">Land</option>
924+
</select>
925+
</div>
926+
<div class="filter-group">
927+
<label>Availability</label>
928+
<select id="inventory-availability" class="filter-select">
929+
<option value="all">All Cards</option>
930+
<option value="available">Available Only</option>
931+
<option value="in_decks">In Decks Only</option>
932+
</select>
933+
</div>
934+
<div class="filter-group">
935+
<label>Colors</label>
936+
<div id="inventory-colors" class="color-filter-group">
937+
<label class="color-checkbox">
938+
<input type="checkbox" value="W" />
939+
<span class="color-checkbox-box"><i class="ms ms-w ms-cost"></i></span>
940+
</label>
941+
<label class="color-checkbox">
942+
<input type="checkbox" value="U" />
943+
<span class="color-checkbox-box"><i class="ms ms-u ms-cost"></i></span>
944+
</label>
945+
<label class="color-checkbox">
946+
<input type="checkbox" value="B" />
947+
<span class="color-checkbox-box"><i class="ms ms-b ms-cost"></i></span>
948+
</label>
949+
<label class="color-checkbox">
950+
<input type="checkbox" value="R" />
951+
<span class="color-checkbox-box"><i class="ms ms-r ms-cost"></i></span>
952+
</label>
953+
<label class="color-checkbox">
954+
<input type="checkbox" value="G" />
955+
<span class="color-checkbox-box"><i class="ms ms-g ms-cost"></i></span>
956+
</label>
957+
<label class="color-checkbox">
958+
<input type="checkbox" value="C" />
959+
<span class="color-checkbox-box"><i class="ms ms-c ms-cost"></i></span>
960+
</label>
961+
</div>
962+
</div>
963+
<div class="filter-group">
964+
<label>View</label>
965+
<div class="view-toggle">
966+
<button id="inventory-grid-view-btn" class="btn-icon active" title="Grid view">
967+
<i class="ph ph-squares-four"></i>
968+
</button>
969+
<button id="inventory-list-view-btn" class="btn-icon" title="List view">
970+
<i class="ph ph-list"></i>
971+
</button>
972+
</div>
973+
</div>
974+
</div>
975+
</div>
976+
977+
<!-- Card Grid/List -->
978+
<div id="inventory-grid" class="inventory-grid"></div>
979+
980+
<!-- Pagination -->
981+
<div id="inventory-pagination" class="pagination">
982+
<button id="inventory-prev-page" class="btn btn-secondary" disabled>Previous</button>
983+
<span id="inventory-page-info" style="font-weight: 600">Page 1 of 1</span>
984+
<button id="inventory-next-page" class="btn btn-secondary" disabled>Next</button>
985+
</div>
986+
</div>
987+
988+
<!-- Bulk Add Modal -->
989+
<div id="bulk-add-modal" class="modal hidden">
990+
<div class="modal-content" style="max-width: 700px">
991+
<span class="modal-close" id="bulk-add-modal-close">&times;</span>
992+
<h2 style="margin-bottom: 1rem">Bulk Add Cards</h2>
993+
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
994+
Paste a list of cards to add to your inventory. Format: "4 Lightning Bolt" or "4 Lightning Bolt [M21]"
995+
</p>
996+
<div class="form-group">
997+
<label for="bulk-add-text">Card List</label>
998+
<textarea
999+
id="bulk-add-text"
1000+
rows="12"
1001+
placeholder="4 Lightning Bolt&#10;2 Counterspell [DMR]&#10;1 Black Lotus&#10;3 Sol Ring"
1002+
style="font-family: monospace; font-size: 0.875rem; width: 100%;"
1003+
></textarea>
1004+
</div>
1005+
<div id="bulk-add-preview" class="hidden" style="margin-bottom: 1rem;">
1006+
<h4 style="margin-bottom: 0.5rem;">Preview</h4>
1007+
<div id="bulk-add-preview-content" style="background: var(--bg-tertiary); padding: 1rem; border-radius: 0.5rem; max-height: 200px; overflow-y: auto;"></div>
1008+
</div>
1009+
<div style="display: flex; gap: 0.5rem;">
1010+
<button id="bulk-add-preview-btn" class="btn btn-secondary" style="flex: 1">Preview</button>
1011+
<button id="bulk-add-submit-btn" class="btn btn-primary" style="flex: 1">Add to Inventory</button>
1012+
</div>
1013+
<div id="bulk-add-result" class="hidden" style="margin-top: 1rem; padding: 1rem; background: var(--bg-tertiary); border-radius: 0.5rem;"></div>
1014+
</div>
1015+
</div>
1016+
8381017
<!-- Settings Page -->
8391018
<div id="settings-page" class="page hidden">
8401019
<div class="page-header">

0 commit comments

Comments
 (0)