Add new item replacement comparison

index.html

@@ -89,6 +89,23 @@
         <div id="effectTotals" class="effect-totals"></div>
       </section>
 
+      <section class="card new-item-card" aria-labelledby="new-item-heading">
+        <div class="gear-title-row">
+          <h2 id="new-item-heading">New item comparison</h2>
+          <span id="newItemTargetHint" class="piece-score"></span>
+        </div>
+        <label>
+          Would replace
+          <select id="newItemTarget"></select>
+        </label>
+        <div id="newItemBaseFields" class="inline-fields"></div>
+        <div id="newItemEffects" class="effects"></div>
+        <div class="replacement-results">
+          <div><span>DPS change</span><strong id="replacementDpsDelta">0</strong></div>
+          <div><span>Regen change</span><strong id="replacementRegenDelta">0</strong></div>
+        </div>
+      </section>
+
       <section>
         <div class="section-heading">
           <h2>Equipment</h2>