re-arranged header tags

This commit is contained in:
Frederik Palmø 2022-04-11 15:06:09 +02:00
parent dc8a3927d6
commit 402a13e7c1
6 changed files with 212 additions and 143 deletions

View File

@ -23,7 +23,7 @@
<body onload="init();"> <body onload="init();">
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h2><a href="/">Elden Ring Build Planner</a></h2>
<ul> <ul>
<li><a href="/planner.html">Build Planner</a></li> <li><a href="/planner.html">Build Planner</a></li>
</ul> </ul>
@ -142,7 +142,7 @@
</div> </div>
</div> </div>
<hr /> <hr />
<b>Locked Items</b> <b>Locked Armor</b>
<template id="locked-option"> <template id="locked-option">
<option value="">Placeholder</option> <option value="">Placeholder</option>
</template> </template>
@ -181,7 +181,7 @@
<template id="result"> <template id="result">
<thead> <thead>
<tr> <tr>
<th>Items</th> <th>Armor</th>
<th>Stats</th> <th>Stats</th>
</tr> </tr>
</thead> </thead>
@ -211,20 +211,17 @@
</article> </article>
<!-- filter --> <!-- filter -->
<article> <article>
<ul> <b>Allowed Armor</b>
<li> <p>(Under development)</p>
<b>Allowed Armor</b>
</li>
</ul>
</article> </article>
</div> </div>
</main> </main>
<footer> <footer>
<h5> <h4>
Erdtree Planner (<a Erdtree Planner (<a
href="https://git.palmoe.dk/vodofrede/erdtree">available under href="https://git.palmoe.dk/vodofrede/erdtree">available under
BSD-3-Clause license</a>) BSD-3-Clause license</a>)
</h5> </h4>
<h5>Copyright 2022 vodofrede</h5> <h5>Copyright 2022 vodofrede</h5>
</footer> </footer>
</body> </body>

View File

@ -23,13 +23,13 @@
<body onload="init();"> <body onload="init();">
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h2><a href="/">Elden Ring Build Planner</a></h2>
<ul> <ul>
<a href="/planner.html">Build Planner</a> <a href="/planner.html">Build Planner</a>
</ul> </ul>
</nav> </nav>
<header> <header>
<h2>Class Optimizer</h2> <h1>Class Optimizer</h1>
</header> </header>
<main> <main>
<div class="app"> <div class="app">
@ -144,13 +144,14 @@
</article> </article>
<article> <article>
<div> <div>
<b>Helmet</b> <label>
<b>Helmet</b>
</label>
<select id="helmet" name="equipment" onchange="update()"> <select id="helmet" name="equipment" onchange="update()">
<option id="none" value="none">No Helmet</option> <option id="none" value="none">No Helmet</option>
</select> </select>
</div> </div>
<hr /> <hr />
<b>Talismans</b>
<div> <div>
<ul id="talismans"> <ul id="talismans">
<template id="talisman"> <template id="talisman">
@ -170,106 +171,134 @@
</div> </div>
</article> </article>
</div> </div>
<h3 style="text-align: center">Softcaps</h3> <div>
<table> <h2 style="text-align: center">Explanation & Usage</h2>
<thead> <p>
<tr> The four columns in the second box represent, in order:
<th>Skill</th> </p>
<th>Stat</th> <ol>
<th>Softcaps</th> <li>
<th>Notes</th> Class base stats, e.g. the stats the class has at its base
</tr> level.
</thead> </li>
<tbody> <li>
<tr> Desired stats. Here, you should input what the absolute
<td>Vigor</td> minimum stats for your build should be. Leave the input
<td>HP</td> fields blank for stats you don't care about.
<td>25 (800HP)<br />40 (1450HP)<br />60 (1900HP)</td> </li>
<td>A +12 upgraded crimson flask heals for 810HP.</td> <li>
</tr> Final stats. These are your characters stats as they should
<tr> appear on your level-up screen.
<td>Mind</td> </li>
<td>FP</td> <li>
<td>40 (220FP)</td> Virtual stats. These are your characters stats after
<td>A +12 upgraded cerulean flask gives 220FP.</td> talismans and helmet stat buffs are applied.
</tr> </li>
<tr> </ol>
<td>Endurance</td> </div>
<td>Stamina</td> <div>
<td>30 (125stm.)<br />50 (155stm.)</td> <h2 style="text-align: center">Softcaps</h2>
<td></td> <table>
</tr> <thead>
<tr> <tr>
<td></td> <th>Skill</th>
<td>Equip Load</td> <th>Stat</th>
<td>25 (72 wgt.)<br />60 (120 wgt.)</td> <th>Softcaps</th>
<td></td> <th>Notes</th>
</tr> </tr>
<tr> </thead>
<td>Strength</td> <tbody>
<td>AR</td> <tr>
<td>37 ≃ 55 (2h)<br />54 ≃ 80 (2h)<br />66 ≃ 99 (2h)<br />80 <td>Vigor</td>
</td> <td>HP</td>
<td>2-handing gives you 1.5x strength.</td> <td>25 (800HP)<br />40 (1450HP)<br />60 (1900HP)</td>
</tr> <td>A +12 upgraded crimson flask heals for 810HP.</td>
<tr> </tr>
<td>Dexterity</td> <tr>
<td>AR</td> <td>Mind</td>
<td>55, 80</td> <td>FP</td>
<td></td> <td>40 (220FP)</td>
</tr> <td>A +12 upgraded cerulean flask gives 220FP.</td>
<tr> </tr>
<td>Intelligence</td> <tr>
<td>AR</td> <td>Endurance</td>
<td>55, 80</td> <td>Stamina</td>
<td></td> <td>30 (125stm.)<br />50 (155stm.)</td>
</tr> <td></td>
<tr> </tr>
<td></td> <tr>
<td>Spell Buff</td> <td></td>
<td>60, 80</td> <td>Equip Load</td>
<td></td> <td>25 (72 wgt.)<br />60 (120 wgt.)</td>
</tr> <td></td>
<tr> </tr>
<td>Faith</td> <tr>
<td>AR</td> <td>Strength</td>
<td>55, 80</td> <td>AR</td>
<td></td> <td>37 ≃ 55 (2h)<br />54 ≃ 80 (2h)<br />66 ≃ 99
</tr> (2h)<br />80
<tr> </td>
<td></td> <td>2-handing gives you 1.5x strength.</td>
<td>Spell Buff</td> </tr>
<td>60, 80</td> <tr>
<td></td> <td>Dexterity</td>
</tr> <td>AR</td>
<tr> <td>55, 80</td>
<td>Arcane</td> <td></td>
<td>AR</td> </tr>
<td>55, 80</td> <tr>
<td></td> <td>Intelligence</td>
</tr> <td>AR</td>
<tr> <td>55, 80</td>
<td></td> <td></td>
<td>Status</td> </tr>
<td>45, 60</td> <tr>
<td></td> <td></td>
</tr> <td>Spell Buff</td>
<tr> <td>60, 80</td>
<td></td> <td></td>
<td>Spell Buff</td> </tr>
<td>60, 80 (Pure catalyst)<br />30, 45 (Hybrid catalyst) <tr>
</td> <td>Faith</td>
<td></td> <td>AR</td>
</tr> <td>55, 80</td>
</tbody> <td></td>
</table> </tr>
<tr>
<td></td>
<td>Spell Buff</td>
<td>60, 80</td>
<td></td>
</tr>
<tr>
<td>Arcane</td>
<td>AR</td>
<td>55, 80</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Status</td>
<td>45, 60</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Spell Buff</td>
<td>60, 80 (Pure catalyst)<br />30, 45 (Hybrid catalyst)
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</main> </main>
<footer> <footer>
<h5> <h4>
Erdtree Planner (<a Erdtree Planner (<a
href="https://git.palmoe.dk/vodofrede/erdtree">available under href="https://git.palmoe.dk/vodofrede/erdtree">available under
BSD-3-Clause license</a>) BSD-3-Clause license</a>)
</h5> </h4>
<h5>Copyright 2022 vodofrede</h5> <h5>Copyright 2022 vodofrede</h5>
</footer> </footer>
</body> </body>

View File

@ -21,7 +21,7 @@
<body> <body>
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h2><a href="/">Elden Ring Build Planner</a></h2>
<ul> <ul>
<li><a href="/planner.html">Build Planner</a></li> <li><a href="/planner.html">Build Planner</a></li>
</ul> </ul>
@ -31,34 +31,34 @@
</header> </header>
<main> <main>
<div class="cards"> <div class="cards">
<article> <a href="/class.html">
<a href="/class.html"> <article>
<h3>Class Optimizer</h3> <h2>Class Optimizer</h2>
<br /> <br />
<p>Find the optimal starting class for your build.</p> <p>Find the optimal starting class for your build.</p>
</a> </article>
</article> </a>
<article> <a href="/armor.html">
<a href="/armor.html"> <article>
<h3>Armor Optimizer</h3> <h2>Armor Optimizer</h2>
<br /> <br />
<p>Maximize defensive stats.</p> <p>Maximize defensive stats.</p>
</a> </article>
</article> </a>
<article> <a href="/weapon.html">
<a href="/weapon.html"> <article>
<h3>Weapon Finder</h3> <h2>Weapon Finder</h2>
<br /> <br />
<p>Get suggestions for usable weapons.</p> <p>Get suggestions for usable weapons.</p>
</a> </article>
</article> </a>
<article> <a href="/planner.html">
<a href="/planner.html"> <article>
<h3>Build Planner (in progress)</h3> <h2>Build Planner (in progress)</h2>
<br /> <br />
<p>Create a new build.</p> <p>Create a new build.</p>
</a> </article>
</article> </a>
</div> </div>
<h3>Credits</h3> <h3>Credits</h3>
<p> <p>
@ -67,11 +67,11 @@
</p> </p>
</main> </main>
<footer> <footer>
<h5> <h4>
Erdtree Planner (<a Erdtree Planner (<a
href="https://git.palmoe.dk/vodofrede/erdtree">available under href="https://git.palmoe.dk/vodofrede/erdtree">available under
BSD-3-Clause license</a>) BSD-3-Clause license</a>)
</h5> </h4>
<h5>Copyright 2022 vodofrede</h5> <h5>Copyright 2022 vodofrede</h5>
</footer> </footer>
</body> </body>

View File

@ -23,7 +23,7 @@
<body onload="init()"> <body onload="init()">
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h2><a href="/">Elden Ring Build Planner</a></h2>
<ul> <ul>
<li><a href="/planner.html">Build Planner</a></li> <li><a href="/planner.html">Build Planner</a></li>
</ul> </ul>
@ -264,13 +264,18 @@
<li><b>Spells</b></li> <li><b>Spells</b></li>
</article> </article>
</div> </div>
<div>
<h2 style="text-align: center">Explanation & Usage</h2>
<p>This page is under development, don't expect everything to work
perfectly.</p>
</div>
</main> </main>
<footer> <footer>
<h5> <h4>
Erdtree Planner (<a Erdtree Planner (<a
href="https://git.palmoe.dk/vodofrede/erdtree">available under href="https://git.palmoe.dk/vodofrede/erdtree">available under
BSD-3-Clause license</a>) BSD-3-Clause license</a>)
</h5> </h4>
<h5>Copyright 2022 vodofrede</h5> <h5>Copyright 2022 vodofrede</h5>
</footer> </footer>
</body> </body>

View File

@ -94,7 +94,7 @@ footer {
hr { hr {
color: var(--border); color: var(--border);
margin-top: 0.3rem; margin-top: 0.12rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
@ -227,7 +227,9 @@ button {
} }
label { label {
display: inline-block;
user-select: none; user-select: none;
text-align: right;
} }
input { input {
@ -252,14 +254,18 @@ select option {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
justify-content: center; justify-content: center;
gap: 15px; gap: 1.5rem;
}
.cards * {
flex-basis: 40%;
} }
.cards article { .cards article {
text-align: center; text-align: center;
flex-basis: 40%; flex-basis: 40%;
margin: 0.2rem; padding: 0.8rem 0rem 0.9rem 0rem;
border: 1px solid var(--font-color); border: 1px solid var(--font-color);
border-radius: 5px; border-radius: 5px;
@ -299,7 +305,8 @@ select option {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: center;
text-align: center;
} }
.app article input { .app article input {

View File

@ -23,7 +23,7 @@
<body onload="init();"> <body onload="init();">
<nav> <nav>
<h1><a href="/">Elden Ring Build Planner</a></h1> <h2><a href="/">Elden Ring Build Planner</a></h2>
<ul> <ul>
<li><a href="/planner.html">Build Planner</a></li> <li><a href="/planner.html">Build Planner</a></li>
</ul> </ul>
@ -111,7 +111,7 @@
<input type="radio" id="2h-sometimes" name="handedness" <input type="radio" id="2h-sometimes" name="handedness"
onchange="update()" /> onchange="update()" />
<label for="2h-sometimes">Usable <label for="2h-sometimes">Usable
One-Handed</label> One-handed</label>
</span> </span>
</div> </div>
<div> <div>
@ -676,14 +676,45 @@
</div> </div>
</article> </article>
</div> </div>
<div>
<h2 style="text-align: center">Notes</h2>
<p>Click the headers in the table to sort the table based that
column.
</p>
<p>
You can choose between three modes of handedness:
<ol>
<li>One-handed: Calculates damage and requirements based on
one-handed use</li>
<li>
Usable one-handed: Calculates damage based on two-handed
use, but accounts for weapon being usable one-handed as
well
</li>
<li>Two-handed: Self-explanatory</li>
</ol>
</p>
<p>This calculator currently doesn't take auxiliary damage procs
(cold,
bleed, scarlet rot and poison) into account. Therefore, it won't
be very useful for finding weapons to use in a bleed build.
</p>
<p>Catalysts (sacred seals and glintstone staffs) will show their
<em>attack rating</em>, not their <em>spell scaling</em>.
</p>
<p>The same holds true for shields, which are also sorted based on
<em>attack
rating</em>
</p>
</div>
</main> </main>
<footer> <footer>
<h5> <h4>
Erdtree Planner ( Erdtree Planner (
<a href="https://git.palmoe.dk/vodofrede/erdtree">available under <a href="https://git.palmoe.dk/vodofrede/erdtree">available under
BSD-3-Clause license</a> BSD-3-Clause license</a>
) )
</h5> </h4>
<h5>Copyright 2022 vodofrede</h5> <h5>Copyright 2022 vodofrede</h5>
</footer> </footer>
</body> </body>