<!--------------------------------
"ARPG TRACKER" - F2U HTML by @StormyStarlight
VERSION - 3 Sep 2023*
https://toyhou.se/23267778.f2u-html-arpg-tracker
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<!------ MOBILE NAV BUTTONS ----->
<div class="justify-content-center d-lg-none mb-3">
<a href="#" data-target="#carousel" data-slide="prev" class="btn btn-outline-secondary bg-faded rounded-circle justify-content-center align-items-center mr-2" style="width: 48px; height: 48px; border-width: 3px;"><i class="fa-solid fa-caret-left" style="font-size: 35px;"></i></a>
<a href="#" data-target="#carousel" data-slide="next" class="btn btn-outline-secondary bg-faded rounded-circle justify-content-center align-items-center ml-2" style="width: 48px; height: 48px; border-width: 3px;"><i class="fa-solid fa-caret-right" style="font-size: 35px;"></i></a>
</div>
<!------ MAIN CONTENT ----------->
<div class="mx-n3 mx-lg-0"><div class="row no-gutters justify-content-center mx-n5 mx-lg-0">
<!------ LEFT NAV BUTTON ------>
<div class="col-auto d-none d-lg-flex align-items-center mr-3"><a href="#" data-target="#carousel" data-slide="prev" class="btn btn-outline-secondary bg-faded rounded-circle justify-content-center align-items-center" style="width: 48px; height: 48px; border-width: 3px;"><i class="fa-solid fa-caret-left" style="font-size: 35px;"></i></a></div>
<!------ MIDDLE SECTION ------->
<div class="col carousel slide" style="max-width: calc(100% - 2rem - 96px);" data-ride="false" data-pause="true" id="carousel">
<!------ HEADING BAR -------->
<div class="card mb-2 bg-dark border-0 overflow-hidden text-center p-2">
<h2 class="display-4 text-light m-0">
<!------------------------
Below can be replaced with any icon from
https://fontawesome.com/search
------------------------->
<i class="fa-solid fa-stars"></i>
- Character Name - ARPG Name
</h2>
</div>
<!------ CAROUSEL ----------->
<div class="carousel-inner rounded">
<!------ IMAGE TABLE ------>
<div class="carousel-item active table-responsive bg-faded" style="overflow: auto; height: 325px;"><table class="table-striped table-hover w-100 bg-faded border-0">
<!------ HEADER --------->
<thead class="sticky-top text-uppercase"><tr>
<th class="py-1 px-2">Character(s)</th>
<th class="py-1 px-2" style="min-width: 150px;">Artist</th>
<th class="py-1 px-2">Date</th>
<th class="py-1 px-2">Image Link</th>
<th class="py-1 px-2">Redeemed?</th>
<th class="py-1 px-2" style="min-width: 200px;">Ratings</th>
<th class="py-1 px-2">LVLs</th>
<th class="py-1 px-2">Currency</th>
</tr></thead>
<!------ BODY ----------->
<tbody style="white-space: nowrap;">
<!----------------------
• Each "CHARACTER" line can be copy + pasted as many times as necessary
• Use <br> to create multiple lines in any other field
• CHECK MARK CODE: <i class="fa-solid fa-check text-success"></i>
• X MARK CODE: <i class="fa-solid fa-xmark text-danger"></i>
----------------------->
<tr> <!-- NEW ROW -->
<td class="py-1 px-2"><ul class="fa-ul mb-0 ml-4">
<!-- CHARACTER --> <li class="font-weight-bold"><i class="fa-li fa-regular fa-hyphen"></i>@@CHARACTERID</li>
</ul></td>
<!-- ARTIST -----> <td class="py-1 px-2">@USERNAME</td>
<!-- DATE -------> <td class="py-1 px-2">CONTENT</td>
<!-- LINK -------> <td class="py-1 px-2"><a href="LINKHERE"><i class="fa-solid fa-image"></i></a></td>
<!-- REDEEMED ---> <td class="py-1 px-2"><i class="fa-solid fa-check text-success"></i></td>
<!-- RATINGS ----> <td class="py-1 px-2" style="white-space: normal;">CONTENT</td>
<!-- LVLS -------> <td class="py-1 px-2">+ CONTENT</td>
<!-- CURRENCY ---> <td class="py-1 px-2">+ CONTENT</td>
</tr>
<tr> <!-- NEW ROW -->
<td class="py-1 px-2"><ul class="fa-ul mb-0 ml-4">
<!-- CHARACTER --> <li class="font-weight-bold"><i class="fa-li fa-regular fa-hyphen"></i>@@CHARACTERID</li>
</ul></td>
<!-- ARTIST -----> <td class="py-1 px-2">@USERNAME</td>
<!-- DATE -------> <td class="py-1 px-2">CONTENT</td>
<!-- LINK -------> <td class="py-1 px-2"><a href="LINKHERE"><i class="fa-solid fa-image"></i></a></td>
<!-- REDEEMED ---> <td class="py-1 px-2"><i class="fa-solid fa-xmark text-danger"></i></td>
<!-- RATINGS ----> <td class="py-1 px-2" style="white-space: normal;">CONTENT</td>
<!-- LVLS -------> <td class="py-1 px-2">+ CONTENT</td>
<!-- CURRENCY ---> <td class="py-1 px-2">+ CONTENT</td>
</tr>
</tbody>
</table></div>
<!------ END IMAGE TABLE -->
<!------ LIT TABLE -------->
<div class="carousel-item table-responsive bg-faded" style="overflow: auto; height: 325px;"><table class="table-striped table-hover w-100 bg-faded border-0">
<!------ HEADER --------->
<thead class="sticky-top text-uppercase"><tr>
<th class="py-1 px-2">Character(s)</th>
<th class="py-1 px-2" style="min-width: 150px;">Author</th>
<th class="py-1 px-2">Date</th>
<th class="py-1 px-2">Literature Link</th>
<th class="py-1 px-2">Redeemed?</th>
<th class="py-1 px-2" style="min-width: 200px;">Ratings</th>
<th class="py-1 px-2">LVLs</th>
<th class="py-1 px-2">Currency</th>
</tr></thead>
<!------ BODY ----------->
<tbody style="white-space: nowrap;">
<!----------------------
• Each "CHARACTER" line can be copy + pasted as many times as necessary
• Use <br> to create multiple lines in any other field
• CHECK MARK CODE: <i class="fa-solid fa-check text-success"></i>
• X MARK CODE: <i class="fa-solid fa-xmark text-danger"></i>
----------------------->
<tr> <!-- NEW ROW -->
<td class="py-1 px-2"><ul class="fa-ul mb-0 ml-4">
<!-- CHARACTER --> <li class="font-weight-bold"><i class="fa-li fa-regular fa-hyphen"></i>@@CHARACTERID</li>
</ul></td>
<!-- ARTIST -----> <td class="py-1 px-2">@USERNAME</td>
<!-- DATE -------> <td class="py-1 px-2">CONTENT</td>
<!-- LINK -------> <td class="py-1 px-2"><a href="LINKHERE"><i class="fa-solid fa-book"></i></a></td>
<!-- REDEEMED ---> <td class="py-1 px-2"><i class="fa-solid fa-check text-success"></i></td>
<!-- RATINGS ----> <td class="py-1 px-2" style="white-space: normal;">CONTENT</td>
<!-- LVLS -------> <td class="py-1 px-2">+ CONTENT</td>
<!-- CURRENCY ---> <td class="py-1 px-2">+ CONTENT</td>
</tr>
<tr> <!-- NEW ROW -->
<td class="py-1 px-2"><ul class="fa-ul mb-0 ml-4">
<!-- CHARACTER --> <li class="font-weight-bold"><i class="fa-li fa-regular fa-hyphen"></i>@@CHARACTERID</li>
</ul></td>
<!-- ARTIST -----> <td class="py-1 px-2">@USERNAME</td>
<!-- DATE -------> <td class="py-1 px-2">CONTENT</td>
<!-- LINK -------> <td class="py-1 px-2"><a href="LINKHERE"><i class="fa-solid fa-book"></i></a></td>
<!-- REDEEMED ---> <td class="py-1 px-2"><i class="fa-solid fa-xmark text-danger"></i></td>
<!-- RATINGS ----> <td class="py-1 px-2" style="white-space: normal;">CONTENT</td>
<!-- LVLS -------> <td class="py-1 px-2">+ CONTENT</td>
<!-- CURRENCY ---> <td class="py-1 px-2">+ CONTENT</td>
</tr>
</tbody>
</table></div>
<!------ END LIT TABLE ---->
</div>
<!------ END CAROUSEL ------->
<!-- CREDIT ----------------->
<div class="pull-right text-faded mt-1" style="font-size: .7rem;">
<a href="https://toyhou.se/delfinxxia" class="text-muted tooltipster" title="Layout by delfinxxia"><i class="fa-light fa-table-layout"></i></a>
<a href="#" class="text-muted tooltipster" title="F2U HTML by StormyStarlight"><i class="fa-light fa-code"></i></a></div>
</div>
<!------ RIGHT NAV BUTTON ----->
<div class="col-auto d-none d-lg-flex align-items-center ml-3"><a href="#" data-target="#carousel" data-slide="next" class="btn btn-outline-secondary bg-faded rounded-circle justify-content-center align-items-center" style="width: 48px; height: 48px; border-width: 3px;"><i class="fa-solid fa-caret-right" style="font-size: 35px;"></i></a></div>
</div></div>