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>
<li>
<b>Allowed Armor</b> <b>Allowed Armor</b>
</li> <p>(Under development)</p>
</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>
<label>
<b>Helmet</b> <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,7 +171,33 @@
</div> </div>
</article> </article>
</div> </div>
<h3 style="text-align: center">Softcaps</h3> <div>
<h2 style="text-align: center">Explanation & Usage</h2>
<p>
The four columns in the second box represent, in order:
</p>
<ol>
<li>
Class base stats, e.g. the stats the class has at its base
level.
</li>
<li>
Desired stats. Here, you should input what the absolute
minimum stats for your build should be. Leave the input
fields blank for stats you don't care about.
</li>
<li>
Final stats. These are your characters stats as they should
appear on your level-up screen.
</li>
<li>
Virtual stats. These are your characters stats after
talismans and helmet stat buffs are applied.
</li>
</ol>
</div>
<div>
<h2 style="text-align: center">Softcaps</h2>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -208,7 +235,8 @@
<tr> <tr>
<td>Strength</td> <td>Strength</td>
<td>AR</td> <td>AR</td>
<td>37 ≃ 55 (2h)<br />54 ≃ 80 (2h)<br />66 ≃ 99 (2h)<br />80 <td>37 ≃ 55 (2h)<br />54 ≃ 80 (2h)<br />66 ≃ 99
(2h)<br />80
</td> </td>
<td>2-handing gives you 1.5x strength.</td> <td>2-handing gives you 1.5x strength.</td>
</tr> </tr>
@ -263,13 +291,14 @@
</tr> </tr>
</tbody> </tbody>
</table> </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">
<h3>Class Optimizer</h3> <article>
<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>
<article> </a>
<a href="/armor.html"> <a href="/armor.html">
<h3>Armor Optimizer</h3> <article>
<h2>Armor Optimizer</h2>
<br /> <br />
<p>Maximize defensive stats.</p> <p>Maximize defensive stats.</p>
</a>
</article> </article>
<article> </a>
<a href="/weapon.html"> <a href="/weapon.html">
<h3>Weapon Finder</h3> <article>
<h2>Weapon Finder</h2>
<br /> <br />
<p>Get suggestions for usable weapons.</p> <p>Get suggestions for usable weapons.</p>
</a>
</article> </article>
<article> </a>
<a href="/planner.html"> <a href="/planner.html">
<h3>Build Planner (in progress)</h3> <article>
<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>