From 54c42322ef9795bb3bc8ed49dc4ca846eb536273 Mon Sep 17 00:00:00 2001
From: ferricles <ferricles@gmail.com>
Date: Sat, 21 May 2022 19:29:30 -0700
Subject: [PATCH] temp

---
 builder/index.html | 127 ++++++++++++++++++++++++++-------------------
 css/sq2bs.css      |   6 ++-
 js/sq2bs.js        |  21 ++++++++
 3 files changed, 100 insertions(+), 54 deletions(-)

diff --git a/builder/index.html b/builder/index.html
index 270d7ba..b55614c 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -74,10 +74,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -101,10 +101,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                    <!-- <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
+                                                    <!-- <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
                                                 </div>
                                             </div>
                                         </div>
@@ -128,10 +128,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -155,7 +155,7 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end" style="height: 100%;">
                                                 </div>
@@ -181,10 +181,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="no powders" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="leggings-powder" name="leggings-powder" placeholder="no powders" tabindex="1"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -208,7 +208,7 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end" style="height: 100%;">
                                                     
@@ -235,10 +235,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -262,7 +262,7 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end" style="height: 100%;">
                                                 </div>
@@ -288,10 +288,10 @@
                                         <div class="col g-0 rounded">
                                             <div class="row row-cols-1 h-100 align-items-center">
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
                                                 </div>
                                             </div>
                                         </div>
@@ -302,21 +302,42 @@
                                         <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
                                             <img class="img-fluid rounded" src="../media/icons/new/Gears.png">
                                         </div>
-                                        <div class="col">
+                                        <div class="col-3">
+                                            <div class="row row-cols-1 h-100 align-items-center">
+                                                <div class="col scaled-font fw-bold gx-3" id="weapon-dps">
+                                                    base dps: 0
+                                                </div>
+                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv">
+                                                    0
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="col g-0 rounded">
+                                            <div class="row row-cols-1 h-100 align-items-center">
+                                                <div class="col d-flex justify-content-end">
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
+                                                </div>
+                                                <div class="col d-flex justify-content-end">
+                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-3">
                                             <div class="row align-items-center">
                                                 <div class="col-3 text-nowrap scaled-font">
                                                     Level:
                                                 </div>
                                                 <div class="col d-flex justify-content-end">
-                                                    <input class="border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
+                                                    <input class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
                                                 </div>
                                             </div>
                                             <div class="row align-items-center">
                                                 <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="border-dark text-light dark-5 rounded scaled-font rounded" id=copy-button onclick="copyBuild()">Copy short</button>
+                                                    <button class="button text-light dark-5 rounded scaled-font" id=copy-button onclick="copyBuild()">Copy short</button>
                                                 </div>
                                                 <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="border-dark text-light dark-5 rounded scaled-font rounded" id=share-button onclick="shareBuild()">Copy for sharing</button>
+                                                    <button class="button text-light dark-5 rounded scaled-font" id=share-button onclick="shareBuild()">Copy for sharing</button>
                                                 </div>
                                             </div>
                                         </div>
@@ -456,7 +477,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -480,7 +501,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -504,7 +525,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -528,7 +549,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -552,7 +573,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -576,7 +597,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -600,7 +621,7 @@
                                                         <div class="col g-0 rounded">
                                                             <div class="row row-cols-1 h-100 align-items-center">
                                                                 <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/>
+                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/>
                                                                 </div>
                                                             </div>
                                                         </div>
@@ -618,7 +639,7 @@
                                                         Spell Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="sdPct" name="sdPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="sdPct" name="sdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "sdPct-base">
                                                         Original Value: 0
@@ -629,7 +650,7 @@
                                                         Spell Damage Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="sdRaw" name="sdRaw" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="sdRaw" name="sdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "sdRaw-base">
                                                         Original Value: 0
@@ -640,7 +661,7 @@
                                                         Melee Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="mdPct" name="mdPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="mdPct" name="mdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "mdPct-base">
                                                         Original Value: 0
@@ -651,7 +672,7 @@
                                                         Melee Damage Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="mdRaw" name="mdRaw" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="mdRaw" name="mdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "mdRaw-base">
                                                         Original Value: 0
@@ -664,7 +685,7 @@
                                                         Poison:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="poison" name="poison" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="poison" name="poison" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "poison-base">
                                                         Original Value: 0
@@ -675,7 +696,7 @@
                                                         Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="eDamPct" name="eDamPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="eDamPct" name="eDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "eDamPct-base">
                                                         Original Value: 0
@@ -686,7 +707,7 @@
                                                         Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="tDamPct" name="tDamPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="tDamPct" name="tDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "tDamPct-base">
                                                         Original Value: 0
@@ -697,7 +718,7 @@
                                                         Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="wDamPct" name="wDamPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="wDamPct" name="wDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "wDamPct-base">
                                                         Original Value: 0
@@ -710,7 +731,7 @@
                                                         Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="fDamPct" name="fDamPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="fDamPct" name="fDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "fDamPct-base">
                                                         Original Value: 0
@@ -721,7 +742,7 @@
                                                         Damage %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="aDamPct" name="aDamPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="aDamPct" name="aDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "aDamPct-base">
                                                         Original Value: 0
@@ -732,7 +753,7 @@
                                                         + Tier:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="atkTier" name="atkTier" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="atkTier" name="atkTier" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "atkTier-base">
                                                         Original Value: 0
@@ -751,7 +772,7 @@
                                                         Defense %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="eDefPct" name="eDefPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="eDefPct" name="eDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "eDefPct-base">
                                                         Original Value: 0
@@ -762,7 +783,7 @@
                                                         Defense %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="tDefPct" name="tDefPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="tDefPct" name="tDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "tDefPct-base">
                                                         Original Value: 0
@@ -773,7 +794,7 @@
                                                         Defense %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="wDefPct" name="wDefPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="wDefPct" name="wDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "wDefPct-base">
                                                         Original Value: 0
@@ -784,7 +805,7 @@
                                                         Defense %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="fDefPct" name="fDefPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="fDefPct" name="fDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "fDefPct-base">
                                                         Original Value: 0
@@ -797,7 +818,7 @@
                                                         Defense %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="aDefPct" name="aDefPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="aDefPct" name="aDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "aDefPct-base">
                                                         Original Value: 0
@@ -808,7 +829,7 @@
                                                         Health Regen Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hprRaw" name="hprRaw" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="hprRaw" name="hprRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "hprRaw-base">
                                                         Original Value: 0
@@ -819,7 +840,7 @@
                                                         Health Regen %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hprPct" name="hprPct" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="hprPct" name="hprPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "hprPct-base">
                                                         Original Value: 0
@@ -830,7 +851,7 @@
                                                         Health Bonus:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hpBonus" name="hpBonus" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="hpBonus" name="hpBonus" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "hpBonus-base">
                                                         Original Value: 0
@@ -846,7 +867,7 @@
                                                         1st Spell Cost %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct1" name="spPct1" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spPct1" name="spPct1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spPct1-base">
                                                         Original Value: 0
@@ -857,7 +878,7 @@
                                                         2nd Spell Cost %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct2" name="spPct2" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spPct2" name="spPct2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spPct2-base">
                                                         Original Value: 0
@@ -868,7 +889,7 @@
                                                         3rd Spell Cost %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct3" name="spPct3" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spPct3" name="spPct3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spPct3-base">
                                                         Original Value: 0
@@ -879,7 +900,7 @@
                                                         4th Spell Cost %:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct4" name="spPct4" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spPct4" name="spPct4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spPct4-base">
                                                         Original Value: 0
@@ -892,7 +913,7 @@
                                                         1st Spell Cost Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw1" name="spRaw1" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spRaw1" name="spRaw1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spRaw1-base">
                                                         Original Value: 0
@@ -903,7 +924,7 @@
                                                         2nd Spell Cost Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw2" name="spRaw2" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spRaw2" name="spRaw2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spRaw2-base">
                                                         Original Value: 0
@@ -914,7 +935,7 @@
                                                         3rd Spell Cost Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw3" name="spRaw3" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spRaw3" name="spRaw3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spRaw3-base">
                                                         Original Value: 0
@@ -925,7 +946,7 @@
                                                         4th Spell Cost Raw:
                                                     </div>
                                                     <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw4" name="spRaw4" value="0" class="border-semi-dark border-2 text-light dark-5 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                        <input type = "number" placeholder = "0" id="spRaw4" name="spRaw4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                     </div>
                                                     <div class = "row" id = "spRaw4-base">
                                                         Original Value: 0
diff --git a/css/sq2bs.css b/css/sq2bs.css
index 87c7514..5429cd0 100644
--- a/css/sq2bs.css
+++ b/css/sq2bs.css
@@ -336,6 +336,10 @@ input.equipment-input {
     background-color: hsl(0, 0%, 16%) !important;
 }
 
+.dark-10 {
+    background-color: hsl(0, 0%, 20%) !important;
+}
+
 .dark-1u {
     background-color: hsl(0, 0%, 5%);
 }
@@ -407,4 +411,4 @@ input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none; 
-}
\ No newline at end of file
+}
diff --git a/js/sq2bs.js b/js/sq2bs.js
index 50675c8..1b508e8 100644
--- a/js/sq2bs.js
+++ b/js/sq2bs.js
@@ -113,6 +113,27 @@ function doSearchSchedule(){
     }, 500);
 }
 
+function sq2ResetFields(){
+    for (let i in powderInputs) {
+        setValue(powderInputs[i], "");
+    }
+    for (let i in equipmentInputs) {
+        setValue(equipmentInputs[i], "");
+    }
+
+    for (let i in tomeInputs) {
+        setValue(tomeInputs[i], "");
+    }
+    setValue("str-skp", "0");
+    setValue("dex-skp", "0");
+    setValue("int-skp", "0");
+    setValue("def-skp", "0");
+    setValue("agi-skp", "0");
+    setValue("level-choice", "106");
+    location.hash = "";
+    calculateBuild();
+}
+
 // equipment field dynamic styling
 function update_field(field) {
     // built on the assumption of no one will type in CI/CR letter by letter