From e6daf9fcbb909b9b1e564b6326299852836955d6 Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Mon, 11 Jul 2022 10:16:15 +0700
Subject: [PATCH] small grid rewrite of crafter

---
 crafter/index.html | 444 ++++++++++++++++++++++-----------------------
 1 file changed, 218 insertions(+), 226 deletions(-)

diff --git a/crafter/index.html b/crafter/index.html
index 8a59b07..022e0f4 100644
--- a/crafter/index.html
+++ b/crafter/index.html
@@ -31,265 +31,257 @@
             <hr/>
             <a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
         </div>
-        <div class = "container py-5 vh-100 mx-0 mx-lg-auto">
-            <div class = "col">
-                <div class = "row g-3">
-                    <div class = "col-lg-5 col-sm-12 text-center">
-                        <div class = "row gx-5 mb-2">
-                            <div class = "col-lg-6 col-sm-12">
-                                <div id = "recipe-dropdown" class = "row h-100 dark-shadow dark-6 rounded">
-                                    <div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
-                                        <img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png"> 
-                                    </div>
-                                    <div class = "col px-0">
-                                        <div class = "row align-items-center">
-                                            <div class = "col-4 px-0">
-                                                <p class = "text-right mb-0 scaled-font fw-bold">Type:</p>
-                                            </div>
-                                            <div class = "col-7 px-0">
-                                                <input class="recipeinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
-                                                <datalist id="recipe-choices">
-                                                </datalist> 
-                                            </div>
-                                        </div>
-                                        <div class = "row align-items-center">
-                                            <div class = "col-4 px-0">
-                                                <p class = "text-right mb-0 scaled-font fw-bold">Lv:</p>
-                                            </div>
-                                            <div class = "col-7 px-0">
-                                                <input class="levelinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
-                                                <datalist id="level-choices">
-                                                </datalist>
-                                            </div>
-                                        </div>
-                                    </div>
+        <div class="container mt-5">
+            <div class="row">
+                <div class="col-5">
+                    <!--crafter ui-->
+                    <div class="row row-cols-2 gx-5 gy-2">
+                        <div class="col" id="recipe-dropdown">
+                            <div class="row dark-shadow dark-5 rounded">
+                                <div id = "recipe-img-loc" class = "col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon">
+                                    <img id = "recipe-img" class = "img-fluid rounded Crafted-shadow" src = "../media/items/new/generic-potion.png"> 
                                 </div>
-                            </div>
-                            <div class = "col-lg-6 col-sm-12">
-                                <div id = "atkSpdChoices" class = "row h-100 dark-shadow dark-6 rounded">
-                                    <div class = "col py-2">
-                                        <div class = "row h-50 align-items-center">
-                                            <p class = "text-right mb-0 scaled-font fw-bold">Attack Speed</p>
+                                <div class = "col ps-3">
+                                    <div class = "row row-cols-2 align-items-center">
+                                        <div class = "col-4 px-0">
+                                            <p class = "mb-0 scaled-font fw-bold">Type:</p>
                                         </div>
-                                        <div class = "row h-50">
-                                            <div class = "col-4 pl-1">
-                                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
-                                                    Slow
-                                                </button>
-                                            </div>
-                                            <div class = "col-4 px-0">
-                                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
-                                                    Normal
-                                                </button>
-                                            </div>
-                                            <div class = "col-4 pr-1">
-                                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
-                                                    Fast
-                                                </button>
-                                            </div>
+                                        <div class = "col-8 px-0">
+                                            <input class="recipeinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="recipe-choices" id="recipe-choice" name="recipe-choice" placeholder="Potion"/>
+                                            <datalist id="recipe-choices">
+                                            </datalist> 
+                                        </div>
+                                        <div class = "col-4 px-0">
+                                            <p class = "mb-0 scaled-font fw-bold">Lv:</p>
+                                        </div>
+                                        <div class = "col-8 px-0">
+                                            <input class="levelinput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="level-choices" id="level-choice" name="level-choice" placeholder="103-105" />
+                                            <datalist id="level-choices">
+                                            </datalist>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class = "row gx-5 mb-2">
-                            <div class = "col-lg-6 col-sm-12 justify-content-center">
-                                <div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
-                                    <div class = "col-6 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold" id = "mat-1">Mat 1 Tier:</p>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-2" onclick = "toggleMaterial('mat-1-2')">2</button>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-3" onclick = "toggleMaterial('mat-1-3')">3</button>
-                                    </div>
-                                </div>                                
-                            </div>
-                            <div class = "col-lg-6 col-sm-12 justify-content-center">
-                                <div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
-                                    <div class = "col-6 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold" id = "mat-2">Mat 2 Tier:</p>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-2" onclick = "toggleMaterial('mat-2-2')">2</button>
-                                    </div>
-                                    <div class = "col px-0">
-                                        <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-3" onclick = "toggleMaterial('mat-2-3')">3</button>
-                                    </div>
-                                </div>                                
-                            </div>
-                        </div>
-                        <div class = "row gx-5 mb-1">
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
-                                    </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-1">
-                                        </datalist>
-                                    </div>   
+                        <div class="col">
+                            <div id = "atkSpdChoices" class = "row row-cols-1 dark-shadow dark-5 rounded">
+                                <div class="col pt-1">
+                                    <p class = "text-center scaled-font fw-bold mb-1">Attack Speed</p>
                                 </div>
-                            </div>
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
+                                <div class="col mb-2">
+                                    <div class="row justify-content-center">
+                                        <div class="col-auto">
+                                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "slow-atk-button" onclick = "toggleAtkSpd('slow-atk-button')">
+                                                Slow
+                                            </button>
+                                        </div>
+                                        <div class="col-auto">
+                                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "normal-atk-button" onclick = "toggleAtkSpd('normal-atk-button')">
+                                                Normal
+                                            </button>
+                                        </div>
+                                        <div class="col-auto">
+                                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "fast-atk-button" onclick = "toggleAtkSpd('fast-atk-button')">
+                                                Fast
+                                            </button>
+                                        </div>
                                     </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-2">
-                                        </datalist>
-                                    </div>   
                                 </div>
                             </div>
                         </div>
-                        <div class = "row gx-5 mb-1">
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
-                                    </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-3">
-                                        </datalist>
-                                    </div>   
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
+                                <div class = "col-6 px-0">
+                                    <p class = "mb-0 scaled-font fw-bold text-center" id = "mat-1">Mat 1 Tier:</p>
                                 </div>
-                            </div>
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
-                                    </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-4">
-                                        </datalist>
-                                    </div>   
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-1" onclick = "toggleMaterial('mat-1-1')">1</button>
                                 </div>
-                            </div>
-                        </div>
-                        <div class = "row gx-5 mb-1">
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
-                                    </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-5">
-                                        </datalist>
-                                    </div>   
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-2" onclick = "toggleMaterial('mat-1-2')">2</button>
                                 </div>
-                            </div>
-                            <div class = "col">
-                                <div class = "row h-100 dark-shadow dark-6 rounded align-items-center">
-                                    <div class = "col-3 px-0">
-                                        <p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
-                                    </div>
-                                    <div class = "col-9 px-0">
-                                        <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
-                                        <datalist id="ing-choices-6">
-                                        </datalist>
-                                    </div>   
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-1-3" onclick = "toggleMaterial('mat-1-3')">3</button>
                                 </div>
+                            </div>                                
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded py-1 align-items-center">
+                                <div class = "col-6 px-0">
+                                    <p class = "mb-0 scaled-font fw-bold text-center" id = "mat-2">Mat 2 Tier:</p>
+                                </div>
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-1" onclick = "toggleMaterial('mat-2-1')">1</button>
+                                </div>
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-2" onclick = "toggleMaterial('mat-2-2')">2</button>
+                                </div>
+                                <div class = "col px-0">
+                                    <button class = "button Star rounded scaled-font fw-bold text-light dark-5" id = "mat-2-3" onclick = "toggleMaterial('mat-2-3')">3</button>
+                                </div>
+                            </div>                                
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center just">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 1:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-1" id="ing-choice-1" name="ing-choice-1" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-1">
+                                    </datalist>
+                                </div>   
                             </div>
                         </div>
-                        
-                        <div class = "row rounded dark-shadow dark-6 py-2 gy-3">
-                            <div class = "col-lg-2 col-sm-6">
-                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
-                                Reset
-                                </button>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 2:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-2" id="ing-choice-2" name="ing-choice-2" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-2">
+                                    </datalist>
+                                </div>   
                             </div>
-                            <div class = "col-lg-3 col-sm-6">
-                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-hash-button" onclick = "copyRecipeHash()">
-                                Copy Hash
-                                </button>
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 3:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-3" id="ing-choice-3" name="ing-choice-3" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-3">
+                                    </datalist>
+                                </div>   
                             </div>
-                            <div class = "col-lg-4 col-sm-6">
-                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
-                                Copy Short
-                                </button>
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 4:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-4" id="ing-choice-4" name="ing-choice-4" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-4">
+                                    </datalist>
+                                </div>   
                             </div>
-                            <div class = "col-lg-3 col-sm-6">
-                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
-                                Copy Long
-                                </button>
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 5:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-5" id="ing-choice-5" name="ing-choice-5" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-5">
+                                    </datalist>
+                                </div>   
+                            </div>
+                        </div>
+                        <div class="col">
+                            <div class = "row dark-shadow dark-6 rounded align-items-center">
+                                <div class = "col-3 px-0 ps-2">
+                                    <p class = "mb-0 scaled-font fw-bold">Ing 6:</p>
+                                </div>
+                                <div class = "col-9 px-0">
+                                    <input class="inginput border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" list="ing-choices-6" id="ing-choice-6" name="ing-choice-6" placeholder="No Ingredient" />
+                                    <datalist id="ing-choices-6">
+                                    </datalist>
+                                </div>   
                             </div>
                         </div>
                     </div>
-                    <div class = "col-lg-4">
-                        <div class = "recipe hide-container-block px-3 col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" style = "display:none">
-                            <div class = "row recipe-stats">
-                                <div class = "col" id = "recipe-stats"></div>
-                            </div>
-                            <div class = "row craft-warnings">
-                                <div class = "" id = "craft-warnings"></div>
-                            </div>
+                    <div class = "row rounded dark-shadow dark-6 mt-3 p-2 align-items-center justify-content-center">
+                        <div class = "col-auto mx-auto">
+                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetFields()">
+                            Reset
+                            </button>
+                        </div>
+                        <div class = "col-auto mx-auto">
+                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-hash-button" onclick = "copyRecipeHash()">
+                            Copy Hash
+                            </button>
+                        </div>
+                        <div class = "col-auto mx-auto">
+                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "copy-button" onclick = "copyRecipe()">
+                            Copy Short
+                            </button>
+                        </div>
+                        <div class = "col-auto mx-auto">
+                            <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "share-button" onclick = "shareRecipe()">
+                            Copy Long
+                            </button>
                         </div>
                     </div>
-                    <div class = "col-lg-3">
-                        <div class = "crafted row hide-container-block" style = "display:none">
-                            <div class = "craft-stats">
-                                <div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
-                            </div>
+                </div>
+                <div class="col-4">
+                    <div class = "recipe hide-container-block px-3 col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" style = "display:none">
+                        <div class = "row recipe-stats">
+                            <div class = "col" id = "recipe-stats"></div>
+                        </div>
+                        <div class = "row craft-warnings">
+                            <div class = "" id = "craft-warnings"></div>
                         </div>
                     </div>
-                </div> 
-            </div>
-            <div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
-                <div class = "col-lg-6 col-sm-12 hide-container-grid" id = "ingreds">
-                    <div class = "row mb-3">
-                        <p class="box-title hide-container-block">
-                            Ingredients
-                        </p>
-                    </div>
-                    <div class = "row mb-3">
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-1">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div>
-                        </div>
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-2">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
+                </div>
+                <div class="col-3">
+                    <div class = "crafted row hide-container-block" style = "display:none">
+                        <div class = "craft-stats">
+                            <div class = "col rounded dark-6 text-light scaled-font p-3 border-dark dark-shadow g-0" id = "craft-stats"></div>
                         </div>
                     </div>
-                    <div class = "row mb-3">
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-3">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
-                        </div>
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-4">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
-                        </div>
-                    </div>
-                    <div class = "row mb-3">
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-5">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div>
-                        </div>
-                        <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-6">
-                            <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div>
-                        </div>
-                    </div>  
                 </div>
             </div>
-            <div class="col dark-5 scaled-font">
-                <footer class="text-center">
-                    <div id="header2">
-                        <p>Made by <b class = "hppeng">hppeng</b>, <b class = "ferricles">ferricles</b>, and <b>reschan</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
-                        <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
+            <div class="row">
+                <div class="col ingredients-container hide-container-grid" id = "ingreds" style = "display:none">
+                    <div class = "col-lg-6 col-sm-12 hide-container-grid" id = "ingreds">
+                        <div class = "row mb-3">
+                            <p class="box-title hide-container-block">
+                                Ingredients
+                            </p>
+                        </div>
+                        <div class = "row mb-3">
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-1">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-1-stats"></div>
+                            </div>
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-2">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-2-stats"></div>
+                            </div>
+                        </div>
+                        <div class = "row mb-3">
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-3">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-3-stats"></div>
+                            </div>
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-4">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-4-stats"></div>
+                            </div>
+                        </div>
+                        <div class = "row mb-3">
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-5">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-5-stats"></div>
+                            </div>
+                            <div class="ing-stats col-lg-6 col-sm scaled-font" id = "ing-6">
+                                <div class = "rounded col g-0 dark-6 border border-3 border-dark dark-shadow p-3" id = "ing-6-stats"></div>
+                            </div>
+                        </div>  
                     </div>
-                    <div id="credits">
-                        <a href="../credits.txt" class="link">Additional credits</a>
-                    </div>
-                </footer>
+                </div>
+            </div>
+            <div class="row my-2">
+                <div class="col dark-5 scaled-font">
+                    <footer class="text-center">
+                        <div id="header2">
+                            <p>Made by <b class = "hppeng">hppeng</b>, <b class = "ferricles">ferricles</b>, and <b>reschan</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
+                            <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
+                        </div>
+                        <div id="credits">
+                            <a href="../credits.txt" class="link">Additional credits</a>
+                        </div>
+                    </footer>
+                </div>
             </div>
         </div>
         <script type="text/javascript" src="../js/query.js"></script>