Update interface with better table layout

3 files changed, 91 insertions, 30 deletions

diff --git a/index.html b/index.html
index a9b416b..1088334 100644
--- a/index.html
+++ b/index.html
@@ -18,17 +18,26 @@
                 <blockquote class="blockquote">
                     <p class="quote">Saw that sweet sweet item that got listed accidentally for 400 Gil, while it should be 400,000 Gil and wondered if you buy it and sell it again, how much profit you would make? You know you pay tax both ways, but how much will you end up with?</p>
                 </blockquote>
+                <div>
+                    <p class="tooltip credit-text">
+                        <span class="spl">1.</span> All graphics and icons used in this website are licensed under the <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
+                        <br>
+                        <span class="spl">2.</span> This project is not affiliated with Square Enix Co., Ltd. or any of its subsidiaries. The Final Fantasy XIV logo is a trademark of Square Enix Co., Ltd.
+                        <br>
+                        <span class="spl">3.</span> This project is licensed under the <a href="https://opensource.org/license/mit/" target="_blank">MIT License</a>. The source code can be found on <a href="https://github.com/luciferreeves/ffxivmfp" target="_blank">GitHub</a>.
+                    </p>
+                </div>
             </div>
             <div class="calculator">
                 <form id="calculate">
                     <div class="form-block">
-                        <label for="buyprice">Listed Price</label>
-                        <input type="text" name="buyprice" id="buyprice" class="afnum" placeholder="Buying Price (Gil)" required autocomplete="off">
+                        <label for="buyprice">Buying Price</label>
+                        <input type="text" name="buyprice" id="buyprice" class="afnum" placeholder="Market Place Listed Price" required autocomplete="off">
                         <img class="gillogo" src="static/images/gil.webp" alt="Gil Logo">
                     </div>
                     <div class="form-block">
-                        <label for="sellprice">Listing Price</label>
-                        <input type="text" name="sellprice" id="sellprice" class="afnum" placeholder="Selling Price (Gil)" required autocomplete="off">
+                        <label for="sellprice">Selling Price</label>
+                        <input type="text" name="sellprice" id="sellprice" class="afnum" placeholder="Price You're Listing For" required autocomplete="off">
                         <img class="gillogo" src="static/images/gil.webp" alt="Gil Logo">
                     </div>
                     <div class="form-block">
@@ -45,15 +54,7 @@
                     </div>
                     <div id="result"></div>
                 </form>
-                <div class="mt-2">
-                    <p class="tooltip credit-text">
-                        <span class="spl">1.</span> All graphics and icons used in this website are licensed under the <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
-                        <br>
-                        <span class="spl">2.</span> This project is not affiliated with Square Enix Co., Ltd. or any of its subsidiaries. The Final Fantasy XIV logo is a trademark of Square Enix Co., Ltd.
-                        <br>
-                        <span class="spl">3.</span> This project is licensed under the <a href="https://opensource.org/license/mit/" target="_blank">MIT License</a>. The source code can be found on <a href="https://github.com/luciferreeves/ffxivmfp" target="_blank">GitHub</a>.
-                    </p>
-                </div>
+                
             </div>
         </div>
     </div>
diff --git a/static/css/main.css b/static/css/main.css
index d8c567e..4b9553e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital@0;1&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');
 * {
     margin: 0;
     padding: 0;
@@ -22,6 +22,7 @@ body {
     padding: 0;
     display: flex;
     justify-content: center;
+    font-weight: 400;
     font-family: 'Crimson Text', serif;
 }
 
@@ -46,8 +47,7 @@ label {
 
 input[type="text"] {
     font-size: 1rem;
-    font-weight: bold;
-    color: #8b6b00;
+    color: #472504;
     font-family: 'Crimson Text', serif;
     background-color: rgba(183, 154, 26, 0.2);
     border: 2px solid #795b00;
@@ -138,7 +138,7 @@ input[type="submit"] {
 .calculator {
     width: 100%;
     max-width: 460px;
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
     background-color: #ffefd0bd;
     border: 2px solid Gold;
     border-radius: 8px;
@@ -183,12 +183,11 @@ input[type="submit"] {
 }
 
 .blockquote {
-    padding: 20px;
+    padding: 15px;
 }
 
 .quote {
-    font-size: 1.4rem;
-    line-height: 1.4;
+    font-size: 1.1rem;
     font-style: italic;
     text-align: justify;
 }
@@ -197,7 +196,7 @@ input[type="submit"] {
     margin-top: 0.5em;
     border-top: 1px solid #795b00;
     padding-top: 0.5em;
-    font-weight: 700;
+    font-weight: 400;
     font-family: 'Crimson Text', serif;
     color: #792200;
     font-size: 12px;
@@ -212,10 +211,42 @@ a:hover {
     color: #9b7a0d;
 }
 
+table {
+    width: 100%;
+    border-collapse: collapse;
+    border: 1px solid #795b00;
+    border-radius: 8px;
+    margin-bottom: 1em;
+    font-size: 1.1rem;
+}
+
+td {
+    border-right: 1px solid #795b00;
+    padding: 0.5em;
+}
+
+tr {
+    border-bottom: 1px solid #795b00;
+}
+
+td:first-child {
+    font-weight: 700;
+}
+
+td:last-child {
+    text-align: right;
+    font-weight: 400;
+}
+
+tr:last-child {
+    border-top: 2px solid #795b00;
+}
+
+
 .credit-text {
     font-size: 12px;
-    font-weight: 700;
     color: #2e345a;
+    padding: 15px;
 }
 
 #result {
diff --git a/static/js/script.js b/static/js/script.js
index 9c4cc0e..caf78d1 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -11,7 +11,9 @@ function commaSeparateNumber(val) {
 
 numInputs.forEach((input) => {
     input.addEventListener("keyup", (e) => {
-        const num = e.target.value.replace(/\D/g, "");
+        const value = e.target.value;
+        const formattedValue = commaSeparateNumber(value.replace(/\D/g, ""));
+        e.target.value = formattedValue;
     });
 });
 
@@ -22,15 +24,42 @@ calculateForm.addEventListener("submit", (e) => {
     const reducedTaxes = document.getElementById("taxrates");
     const buyTaxRate = 0.05;
     const sellTaxRate = reducedTaxes.checked ? 0.03 : 0.05;
-    const buyPriceValue = buyPrice.value.replace(/\D/g, "");
-    const sellPriceValue = sellPrice.value.replace(/\D/g, "");
+    const buyPriceValue = parseInt(buyPrice.value.replace(/\D/g, ""));
+    const sellPriceValue = parseInt(sellPrice.value.replace(/\D/g, ""));
     const buyTax = Math.ceil(buyPriceValue * buyTaxRate);
     const sellTax = Math.ceil(sellPriceValue * sellTaxRate);
     const profit = sellPriceValue - buyPriceValue - buyTax - sellTax;
-    
-    const resultStatement = `For an item listed at ${commaSeparateNumber(buyPriceValue)} Gil, you will pay ${commaSeparateNumber(buyTax)} Gil in taxes. If you sell the item for ${commaSeparateNumber(sellPriceValue)} Gil, you will pay ${commaSeparateNumber(sellTax)} Gil in taxes. After all taxes are paid, you will ${profit > 0 ? "<span class='profit'>make a profit</span>" : "<span class='loss'>suffer a loss</span>"} of ${commaSeparateNumber(Math.abs(profit))} Gil.`;
-    const statementElement = document.createElement("p");
-    statementElement.innerHTML = resultStatement;
+    const timesProfit  = profit / (buyPriceValue + buyTax);
+
+    const resultDisplay = `
+        <table class="result-display">
+            <tr>
+                <td>Buying Cost:</td>
+                <td>${commaSeparateNumber(buyPriceValue)} Gil</td>
+            </tr>
+            <tr>
+                <td>Buying Tax:</td>
+                <td>${commaSeparateNumber(buyTax)} Gil</td>
+            </tr>
+            <tr>
+                <td>Selling Cost:</td>
+                <td>${commaSeparateNumber(sellPriceValue)} Gil</td>
+            </tr>
+            <tr>
+                <td>Selling Tax:</td>
+                <td>${commaSeparateNumber(sellTax)} Gil</td>
+            </tr>
+            <tr>
+                <td>${profit > 0 ? "Profit" : "Loss"}:</td>
+                <td><span class="${profit > 0 ? "profit" : "loss"}">${commaSeparateNumber(Math.abs(profit))}</span> Gil 
+                ${profit > 0 ? `(${timesProfit.toFixed(2)}x returns)` : `(${timesProfit.toFixed(2)}x loss)`}</td>
+                </td>
+            </tr>
+        </table>
+    `;
+
+    const resultElement = document.createElement("div");
+    resultElement.innerHTML = resultDisplay;
     result.innerHTML = "";
-    result.appendChild(statementElement);
+    result.appendChild(resultElement);
 });