1027 lines
No EOL
42 KiB
HTML
1027 lines
No EOL
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inventory Search - Dereth Tracker</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
/* Override main app styles to enable scrolling */
|
|
html, body {
|
|
overflow: auto !important;
|
|
height: auto !important;
|
|
display: block !important;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 11px;
|
|
font-family: Arial, sans-serif;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
/* Inventory-specific styles */
|
|
.inventory-container {
|
|
display: flex;
|
|
gap: 5px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.character-sidebar {
|
|
width: 120px;
|
|
background: white;
|
|
border: 1px solid #999;
|
|
padding: 3px;
|
|
height: fit-content;
|
|
}
|
|
|
|
.character-sidebar h4 {
|
|
margin: 0 0 3px 0;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.character-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.character-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1px;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.character-item input[type="checkbox"] {
|
|
margin: 0 2px 0 0;
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.character-item label {
|
|
cursor: pointer;
|
|
color: #000;
|
|
flex: 1;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.inventory-header {
|
|
background: #333;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.inventory-header h1 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.search-form {
|
|
background: white;
|
|
padding: 5px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
/* Filter Section Styling */
|
|
.filter-card {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.filter-card-header {
|
|
font-weight: bold;
|
|
font-size: 11px;
|
|
color: #495057;
|
|
margin-bottom: 6px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.filter-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filter-group label {
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
color: #343a40;
|
|
min-width: 60px;
|
|
text-align: right;
|
|
}
|
|
|
|
.filter-group-wide label {
|
|
min-width: 80px;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="number"],
|
|
select {
|
|
border: 1px solid #ced4da;
|
|
border-radius: 3px;
|
|
padding: 4px 6px;
|
|
font-size: 11px;
|
|
height: 24px;
|
|
background: white;
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="number"]:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: #80bdff;
|
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
input[type="text"] {
|
|
width: 140px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width: 50px;
|
|
}
|
|
|
|
select {
|
|
width: 110px;
|
|
}
|
|
|
|
.range-separator {
|
|
color: #6c757d;
|
|
font-weight: bold;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
|
|
.section-label {
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
min-width: 50px;
|
|
padding-top: 2px;
|
|
color: #000;
|
|
}
|
|
|
|
.checkbox-sections-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 9px;
|
|
white-space: nowrap;
|
|
width: calc(50% - 2px);
|
|
min-width: 80px;
|
|
}
|
|
|
|
.checkbox-item input[type="checkbox"] {
|
|
margin: 0 1px 0 0;
|
|
width: 9px;
|
|
height: 9px;
|
|
}
|
|
|
|
.checkbox-item label {
|
|
cursor: pointer;
|
|
color: #000;
|
|
}
|
|
|
|
.subsection-label {
|
|
font-weight: bold;
|
|
margin-bottom: 2px;
|
|
display: block;
|
|
font-size: 9px;
|
|
color: #333;
|
|
}
|
|
|
|
.search-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.btn {
|
|
padding: 2px 8px;
|
|
border: 1px solid #999;
|
|
background: #e0e0e0;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #4a80c0;
|
|
color: white;
|
|
border-color: #336699;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #336699;
|
|
}
|
|
|
|
.results-container {
|
|
background: white;
|
|
border: 1px solid #999;
|
|
margin-top: 5px;
|
|
max-height: calc(100vh - 150px);
|
|
overflow: auto;
|
|
}
|
|
|
|
.results-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 10px;
|
|
color: #000;
|
|
}
|
|
|
|
.results-table th {
|
|
background: #d0d0d0;
|
|
padding: 1px 3px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
border: 1px solid #999;
|
|
position: sticky;
|
|
top: 0;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.results-table td {
|
|
padding: 1px 3px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.results-table tbody tr:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.item-name {
|
|
color: #0066cc;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-equipped {
|
|
color: #008800;
|
|
}
|
|
|
|
.status-inventory {
|
|
color: #5f6368;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #5f6368;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 20px;
|
|
color: #5f6368;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.error {
|
|
text-align: center;
|
|
padding: 10px;
|
|
color: #d93025;
|
|
background: #fef7e0;
|
|
margin: 5px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.results-info {
|
|
padding: 3px 5px;
|
|
background: #f0f0f0;
|
|
border-bottom: 1px solid #999;
|
|
font-weight: normal;
|
|
color: #333;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #1a73e8;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #1557b0;
|
|
}
|
|
|
|
.back-link::before {
|
|
content: "←";
|
|
margin-right: 8px;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
/* Set Analysis specific styles */
|
|
.set-analysis-section {
|
|
background: white;
|
|
border: 1px solid #999;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.set-analysis-form {
|
|
background: #f8f8f8;
|
|
padding: 8px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.set-analysis-form h3 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.set-analysis-form select {
|
|
width: 140px;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Column width control */
|
|
.narrow-col {
|
|
width: 120px;
|
|
max-width: 120px;
|
|
font-size: 9px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.medium-col {
|
|
width: 150px;
|
|
max-width: 150px;
|
|
}
|
|
|
|
.set-col {
|
|
width: 100px;
|
|
max-width: 100px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.spells-cell {
|
|
font-size: 9px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.legendary-cantrip {
|
|
color: #ffd700;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.regular-spell {
|
|
color: #88ccff;
|
|
}
|
|
|
|
/* Pagination controls */
|
|
.pagination-controls {
|
|
padding: 12px 16px;
|
|
text-align: center;
|
|
background: #f8f8f8;
|
|
border-top: 1px solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.pagination-controls button {
|
|
padding: 4px 8px;
|
|
border: 1px solid #999;
|
|
background: #e0e0e0;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.pagination-controls button:hover:not(:disabled) {
|
|
background: #d0d0d0;
|
|
}
|
|
|
|
.pagination-controls button:disabled {
|
|
background: #f0f0f0;
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin: 0 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="inventory-header">
|
|
<h1>Inventory Search</h1>
|
|
<a href="/" style="color: white; text-decoration: none; font-size: 11px;">← Back</a>
|
|
</div>
|
|
|
|
<div class="inventory-container">
|
|
<!-- Character Selection Sidebar -->
|
|
<div class="character-sidebar">
|
|
<h4>Characters</h4>
|
|
<div class="character-item">
|
|
<input type="checkbox" id="char_all" checked>
|
|
<label for="char_all">All Characters</label>
|
|
</div>
|
|
<div class="character-list" id="characterList">
|
|
<!-- Character checkboxes will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<form class="search-form" id="inventorySearchForm">
|
|
|
|
<!-- Basic Filters -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Basic Search</div>
|
|
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Name:</label>
|
|
<input type="text" id="searchText" placeholder="Item name">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Status:</label>
|
|
<select id="searchEquipStatus">
|
|
<option value="all">All</option>
|
|
<option value="equipped">Equipped</option>
|
|
<option value="unequipped">Inventory</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Type:</label>
|
|
<div style="display: flex; gap: 8px;">
|
|
<label style="display: flex; align-items: center; font-weight: normal;">
|
|
<input type="radio" name="equipmentType" id="armorOnly" value="armor" checked style="margin-right: 3px;">
|
|
Armor Only
|
|
</label>
|
|
<label style="display: flex; align-items: center; font-weight: normal;">
|
|
<input type="radio" name="equipmentType" id="jewelryOnly" value="jewelry" style="margin-right: 3px;">
|
|
Jewelry Only
|
|
</label>
|
|
<label style="display: flex; align-items: center; font-weight: normal;">
|
|
<input type="radio" name="equipmentType" id="shirtOnly" value="shirt" style="margin-right: 3px;">
|
|
Shirts Only
|
|
</label>
|
|
<label style="display: flex; align-items: center; font-weight: normal;">
|
|
<input type="radio" name="equipmentType" id="pantsOnly" value="pants" style="margin-right: 3px;">
|
|
Pants Only
|
|
</label>
|
|
<label style="display: flex; align-items: center; font-weight: normal;">
|
|
<input type="radio" name="equipmentType" id="allItems" value="all" style="margin-right: 3px;">
|
|
All Items
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Slot:</label>
|
|
<select id="slotFilter">
|
|
<option value="">All Slots</option>
|
|
<optgroup label="Armor Slots">
|
|
<option value="Head">Head</option>
|
|
<option value="Chest">Chest</option>
|
|
<option value="Upper Arms">Upper Arms</option>
|
|
<option value="Lower Arms">Lower Arms</option>
|
|
<option value="Hands">Hands</option>
|
|
<option value="Abdomen">Abdomen</option>
|
|
<option value="Upper Legs">Upper Legs</option>
|
|
<option value="Lower Legs">Lower Legs</option>
|
|
<option value="Feet">Feet</option>
|
|
<option value="Shield">Shield</option>
|
|
</optgroup>
|
|
<optgroup label="Jewelry Slots">
|
|
<option value="Neck">Neck</option>
|
|
<option value="Left Ring">Left Ring</option>
|
|
<option value="Right Ring">Right Ring</option>
|
|
<option value="Left Wrist">Left Wrist</option>
|
|
<option value="Right Wrist">Right Wrist</option>
|
|
<option value="Trinket">Trinket</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Filters -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Item Stats</div>
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Armor:</label>
|
|
<input type="number" id="searchMinArmor" placeholder="Min">
|
|
<span class="range-separator">-</span>
|
|
<input type="number" id="searchMaxArmor" placeholder="Max">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Crit Dmg:</label>
|
|
<input type="number" id="searchMinCritDamage" placeholder="Min">
|
|
<span class="range-separator">-</span>
|
|
<input type="number" id="searchMaxCritDamage" placeholder="Max">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Dmg Rating:</label>
|
|
<input type="number" id="searchMinDamageRating" placeholder="Min">
|
|
<span class="range-separator">-</span>
|
|
<input type="number" id="searchMaxDamageRating" placeholder="Max">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Heal Boost:</label>
|
|
<input type="number" id="searchMinHealBoost" placeholder="Min">
|
|
<span class="range-separator">-</span>
|
|
<input type="number" id="searchMaxHealBoost" placeholder="Max">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Vitality:</label>
|
|
<input type="number" id="searchMinVitalityRating" placeholder="Min">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Dmg Resist:</label>
|
|
<input type="number" id="searchMinDamageResistRating" placeholder="Min">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Crit Dmg Resist:</label>
|
|
<input type="number" id="searchMinCritDamageResistRating" placeholder="Min">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkbox Sections in Grid Layout -->
|
|
<div class="checkbox-sections-container">
|
|
<!-- Equipment Sets -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Equipment Sets</div>
|
|
<div class="checkbox-container" id="equipmentSets">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_14" value="14">
|
|
<label for="set_14">Adept's</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_16" value="16">
|
|
<label for="set_16">Defender's</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_13" value="13">
|
|
<label for="set_13">Soldier's</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_21" value="21">
|
|
<label for="set_21">Wise</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_40" value="40">
|
|
<label for="set_40">Heroic Protector</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_41" value="41">
|
|
<label for="set_41">Heroic Destroyer</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_46" value="46">
|
|
<label for="set_46">Relic Alduressa</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_47" value="47">
|
|
<label for="set_47">Ancient Relic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_48" value="48">
|
|
<label for="set_48">Noble Relic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_15" value="15">
|
|
<label for="set_15">Archer's</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_19" value="19">
|
|
<label for="set_19">Hearty</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_20" value="20">
|
|
<label for="set_20">Dexterous</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_22" value="22">
|
|
<label for="set_22">Swift</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_24" value="24">
|
|
<label for="set_24">Reinforced</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_26" value="26">
|
|
<label for="set_26">Flame Proof</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="set_29" value="29">
|
|
<label for="set_29">Lightning Proof</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legendary Cantrips -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Legendary Cantrips</div>
|
|
<div class="checkbox-container" id="cantrips">
|
|
<!-- Legendary Attributes -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_strength" value="Legendary Strength">
|
|
<label for="cantrip_legendary_strength">Strength</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_endurance" value="Legendary Endurance">
|
|
<label for="cantrip_legendary_endurance">Endurance</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_quickness" value="Legendary Quickness">
|
|
<label for="cantrip_legendary_quickness">Quickness</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_coordination" value="Legendary Coordination">
|
|
<label for="cantrip_legendary_coordination">Coordination</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_willpower" value="Legendary Willpower">
|
|
<label for="cantrip_legendary_willpower">Willpower</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_focus" value="Legendary Focus">
|
|
<label for="cantrip_legendary_focus">Focus</label>
|
|
</div>
|
|
<!-- Legendary Weapon Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_finesse" value="Legendary Finesse Weapon Aptitude">
|
|
<label for="cantrip_legendary_finesse">Finesse</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_heavy" value="Legendary Heavy Weapon Aptitude">
|
|
<label for="cantrip_legendary_heavy">Heavy</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_light" value="Legendary Light Weapon Aptitude">
|
|
<label for="cantrip_legendary_light">Light</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_missile" value="Legendary Missile Weapon Aptitude">
|
|
<label for="cantrip_legendary_missile">Missile</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_twohanded" value="Legendary Two Handed Combat Aptitude">
|
|
<label for="cantrip_legendary_twohanded">Two-handed</label>
|
|
</div>
|
|
<!-- Legendary Magic Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_war" value="Legendary War Magic Aptitude">
|
|
<label for="cantrip_legendary_war">War Magic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_void" value="Legendary Void Magic Aptitude">
|
|
<label for="cantrip_legendary_void">Void Magic</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_creature" value="Legendary Creature Enchantment Aptitude">
|
|
<label for="cantrip_legendary_creature">Creature</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_item" value="Legendary Item Enchantment Aptitude">
|
|
<label for="cantrip_legendary_item">Item</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_life" value="Legendary Life Magic Aptitude">
|
|
<label for="cantrip_legendary_life">Life Magic</label>
|
|
</div>
|
|
<!-- Legendary Defense -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_magic_defense" value="Legendary Magic Resistance">
|
|
<label for="cantrip_legendary_magic_defense">Magic Def</label>
|
|
</div>
|
|
|
|
<!-- Combat Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_blood_thirst" value="Legendary Blood Thirst">
|
|
<label for="cantrip_legendary_blood_thirst">Blood Thirst</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_sneak_attack" value="Legendary Sneak Attack Prowess">
|
|
<label for="cantrip_legendary_sneak_attack">Sneak Attack</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_defender" value="Legendary Defender">
|
|
<label for="cantrip_legendary_defender">Defender</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_recklessness" value="Legendary Recklessness Prowess">
|
|
<label for="cantrip_legendary_recklessness">Recklessness</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_shield" value="Legendary Shield Aptitude">
|
|
<label for="cantrip_legendary_shield">Shield</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_dual_wield" value="Legendary Dual Wield Aptitude">
|
|
<label for="cantrip_legendary_dual_wield">Dual Wield</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_dirty_fighting" value="Legendary Dirty Fighting Prowess">
|
|
<label for="cantrip_legendary_dirty_fighting">Dirty Fighting</label>
|
|
</div>
|
|
|
|
<!-- Magic/Utility Skills -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_summoning" value="Legendary Summoning Prowess">
|
|
<label for="cantrip_legendary_summoning">Summoning</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_healing" value="Legendary Healing Prowess">
|
|
<label for="cantrip_legendary_healing">Healing</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_arcane" value="Legendary Arcane Prowess">
|
|
<label for="cantrip_legendary_arcane">Arcane</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_tinkering" value="Legendary Magic Item Tinkering Expertise">
|
|
<label for="cantrip_legendary_tinkering">Tinkering</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_mana_conversion" value="Legendary Mana Conversion Prowess">
|
|
<label for="cantrip_legendary_mana_conversion">Mana Convert</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_leadership" value="Legendary Leadership">
|
|
<label for="cantrip_legendary_leadership">Leadership</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_deception" value="Legendary Deception Prowess">
|
|
<label for="cantrip_legendary_deception">Deception</label>
|
|
</div>
|
|
|
|
<!-- Defensive Spells -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_impenetrability" value="Legendary Impenetrability">
|
|
<label for="cantrip_legendary_impenetrability">Impenetrability</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_impregnability" value="Legendary Impregnability">
|
|
<label for="cantrip_legendary_impregnability">Impregnability</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_invulnerability" value="Legendary Invulnerability">
|
|
<label for="cantrip_legendary_invulnerability">Invulnerability</label>
|
|
</div>
|
|
|
|
<!-- Specialized/Rare -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_hermetic_link" value="Legendary Hermetic Link">
|
|
<label for="cantrip_legendary_hermetic_link">Hermetic Link</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_person_attunement" value="Legendary Person Attunement">
|
|
<label for="cantrip_legendary_person_attunement">Person Attune</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_spirit_thirst" value="Legendary Spirit Thirst">
|
|
<label for="cantrip_legendary_spirit_thirst">Spirit Thirst</label>
|
|
</div>
|
|
|
|
<!-- Bane Spells -->
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_piercing_bane" value="Legendary Piercing Bane">
|
|
<label for="cantrip_legendary_piercing_bane">Piercing Bane</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="cantrip_legendary_storm_bane" value="Legendary Storm Bane">
|
|
<label for="cantrip_legendary_storm_bane">Storm Bane</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legendary Wards -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Legendary Wards</div>
|
|
<div class="checkbox-container" id="protections">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_flame" value="Legendary Flame Ward">
|
|
<label for="protection_flame">Flame</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_frost" value="Legendary Frost Ward">
|
|
<label for="protection_frost">Frost</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_acid" value="Legendary Acid Ward">
|
|
<label for="protection_acid">Acid</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_storm" value="Legendary Storm Ward">
|
|
<label for="protection_storm">Storm</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_slashing" value="Legendary Slashing Ward">
|
|
<label for="protection_slashing">Slashing</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_piercing" value="Legendary Piercing Ward">
|
|
<label for="protection_piercing">Piercing</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_bludgeoning" value="Legendary Bludgeoning Ward">
|
|
<label for="protection_bludgeoning">Bludgeoning</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="protection_armor" value="Legendary Armor">
|
|
<label for="protection_armor">Armor</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Equipment Slots -->
|
|
<div class="filter-card">
|
|
<div class="filter-card-header">Equipment Slots</div>
|
|
<div class="checkbox-container" id="all-slots">
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_head" value="Head">
|
|
<label for="slot_head">Head</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_chest" value="Chest">
|
|
<label for="slot_chest">Chest</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_abdomen" value="Abdomen">
|
|
<label for="slot_abdomen">Abdomen</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_upper_arms" value="Upper Arms">
|
|
<label for="slot_upper_arms">Upper Arms</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_lower_arms" value="Lower Arms">
|
|
<label for="slot_lower_arms">Lower Arms</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_hands" value="Hands">
|
|
<label for="slot_hands">Hands</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_upper_legs" value="Upper Legs">
|
|
<label for="slot_upper_legs">Upper Legs</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_lower_legs" value="Lower Legs">
|
|
<label for="slot_lower_legs">Lower Legs</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_feet" value="Feet">
|
|
<label for="slot_feet">Feet</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_shield" value="Shield">
|
|
<label for="slot_shield">Shield</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_neck" value="Neck">
|
|
<label for="slot_neck">Neck</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_ring" value="Ring">
|
|
<label for="slot_ring">Ring</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_bracelet" value="Bracelet">
|
|
<label for="slot_bracelet">Bracelet</label>
|
|
</div>
|
|
<div class="checkbox-item">
|
|
<input type="checkbox" id="slot_trinket" value="Trinket">
|
|
<label for="slot_trinket">Trinket</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-actions">
|
|
<button type="button" class="btn btn-secondary" id="clearBtn">Clear All</button>
|
|
<button type="submit" class="btn btn-primary">Search Items</button>
|
|
<button type="button" class="btn btn-secondary" id="setAnalysisBtn">Analyze Sets</button>
|
|
<button type="button" class="btn btn-secondary" id="slotViewBtn">Slot View</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Set Analysis Section -->
|
|
<div class="set-analysis-section" id="setAnalysisSection" style="display: none;">
|
|
<div class="set-analysis-form">
|
|
<h3>Equipment Set Combination Analysis</h3>
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label>Primary Set (5 pieces):</label>
|
|
<select id="primarySetSelect">
|
|
<option value="14">Adept's Set</option>
|
|
<option value="16">Defender's Set</option>
|
|
<option value="13">Soldier's Set</option>
|
|
<option value="21">Wise Set</option>
|
|
<option value="40">Heroic Protector</option>
|
|
<option value="41">Heroic Destroyer</option>
|
|
<option value="46">Relic Alduressa</option>
|
|
<option value="47">Ancient Relic</option>
|
|
<option value="48">Noble Relic</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label>Secondary Set (4 pieces):</label>
|
|
<select id="secondarySetSelect">
|
|
<option value="13">Soldier's Set</option>
|
|
<option value="14">Adept's Set</option>
|
|
<option value="16">Defender's Set</option>
|
|
<option value="21">Wise Set</option>
|
|
<option value="40">Heroic Protector</option>
|
|
<option value="41">Heroic Destroyer</option>
|
|
<option value="46">Relic Alduressa</option>
|
|
<option value="47">Ancient Relic</option>
|
|
<option value="48">Noble Relic</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<button type="button" class="btn btn-primary" id="runSetAnalysis">Analyze</button>
|
|
<button type="button" class="btn btn-secondary" id="backToSearch">Back to Search</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results-container" id="setAnalysisResults">
|
|
<div class="no-results">Select primary and secondary sets above and click "Analyze" to find valid combinations.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slot View Section -->
|
|
<div class="slot-view-section" id="slotViewSection" style="display: none;">
|
|
<div class="slot-view-header">
|
|
<h3>Equipment Slot View</h3>
|
|
<div class="filter-row">
|
|
<button type="button" class="btn btn-primary" id="loadSlotView">Load Items</button>
|
|
<button type="button" class="btn btn-secondary" id="backToSearchFromSlots">Back to Search</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slots-grid" id="slotsGrid">
|
|
<!-- Slots will be populated by JavaScript -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="results-container" id="searchResults">
|
|
<div class="no-results">Enter search criteria above and click "Search Items" to find inventory items.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="inventory.js"></script>
|
|
</body>
|
|
</html> |