masterlist

created by:8byte
HTMLBootstrapWorldMiscellaneous

Line Count: 263
Difficulty:
Copy
<!---
==== Masterlist
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors. 
--->
<div class="container p-0">
  <!---
  ==== Key Section
  ---- This is the first table and gives an overview on the different tags.
  --->
  <div class="container p-2 bg-primary">
    <h1 class="mb-0"><i class="fas fa-icons mr-1"></i> Icon Key</h1>
  </div>
  <table class="table table-hover bg-faded">
    <tr>
      <th scope="row" style="width: 30%;">Ticket Type</th>
      <td>
        <!--- 
        ==== Ticket Type Tags
        ---- The preset is stars, but you can change the icons or replace it with text.
        ---- Colors can be changed as needed, keep in mind bootstrap is different across all themes.
        ---- When adding new rows to the masterlist, you can also copy/paste the needed tags from
        ---- here.
        --->
        <!--- common --->
        <a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Common">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
        </a>
        <!--- uncommon --->
        <a class="btn btn-sm bg-success tooltipster" data-toggle="tooltip" title="Uncommon">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </a>
        <!--- rare --->
        <a class="btn btn-sm bg-secondary tooltipster" data-toggle="tooltip" title="Rare">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </a>
        <!--- epic --->
        <a class="btn btn-sm bg-danger tooltipster" data-toggle="tooltip" title="Epic">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </a>
        <!--- mythical --->
        <a class="btn btn-sm bg-warning tooltipster" data-toggle="tooltip" title="Mythical">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </a>
        <!--- legendary --->
        <a class="btn btn-sm bg-light tooltipster" data-toggle="tooltip" title="Legendary">
          <!--- text within the tag --->
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </a>
        <!--- end of ticket types --->
      </td>
    </tr>
    <tr>
      <th scope="row">Trade Status</th>
      <td>
        <!--- 
        ==== Trade Status Tags
        ---- Colors can be changed as needed, keep in mind bootstrap is different across all themes. 
        ---- When adding new rows to the masterlist, you can also copy/paste the needed tags from
        ---- here.
        --->
        <!--- for sale --->
        <a class="btn btn-sm bg-success tooltipster" data-toggle="tooltip" title="For Sale" style="width: 40px;">
          <!--- icon --->
          <i class="fas fa-dollar-sign"></i>
        </a>
        <!--- for trade --->
        <a class="btn btn-sm bg-danger tooltipster" data-toggle="tooltip" title="For Trade" style="width: 40px;">
          <!--- icon --->
          <i class="fas fa-random"></i>
        </a>
        <!--- for offer --->
        <a class="btn btn-sm bg-warning tooltipster" data-toggle="tooltip" title="For Offer" style="width: 40px;">
          <!--- icon --->
          <i class="fas fa-question"></i>
        </a>
        <!--- min price --->
        <a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Price" style="width: 40px; font-weight: bold;">
          <!--- icon + min price --->
          <i class="fas fa-dollar-sign"></i> 5
        </a>
        <!--- not ufs/uft --->
        <a class="btn btn-sm bg-faded tooltipster" data-toggle="tooltip" title="Not UFS/UFT" style="width: 40px;">
          <!--- icon --->
          <i class="fas fa-empty-set"></i>
        </a>
        <!--- end of status tags --->
      </td>
    </tr>
  </table>
  <!---
  ==== Masterlist Section
  ---- This is the second table and is the actual masterlist.
  --->
  <div class="container p-2 bg-primary">
    <h1 class="my-auto"><i class="fas fa-sparkles mr-1"></i> Masterlist</h1>
  </div>
  <table class="table table-hover bg-faded mb-1">
    <!--- header, do not touch this section --->
    <tr>
      <th>Slot #</th>
      <th>Owner</th>
      <th>Designer</th>
      <th>Link</th>
      <th>Ticket Type</th>
      <th style="width: 120px;">Traits</th>
      <th style="width: 120px;">Extras</th>
      <th style="width: 120px;">Changelog</th>
      <th style="width: 120px;">Tradelog</th>
      <th>Trade Status</th>
    </tr>
    <!--- 
    ==== Sample Entry
    ---- When adding new entries, copy paste everything from here to the comment
    ---- tagged "end of sample entry"
    --->
    <tr>
      <!--- masterlist number --->
      <td>1</td>
      <!--- 
      ==== owner
      ---- If the owner is not a toyhouse user, you can replace with:
      
      <a href="LINK">username</a>
      
      --->
      <td>@user</td>
      <!--- 
      ==== designer
      ---- If the designer is not a toyhouse user, you can replace with:
      
      <a href="LINK">username</a>
      
      --->
      <td>@user</td>
      <!--- link to character --->
      <td><a href="LINK"><i class="fas fa-heart mr-1"></i>character name</a></td>
      <!--- ticket type --->
      <td>
        <!--- copy paste from the above key table --->
        <a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Common">
          <i class="fas fa-star"></i>
        </a>
      </td>
      <!--- traits --->
      <td>
        <!---
        ==== collapse 
        ---- when adding a new row, make sure to change the number to match
        ---- the masterlist number. For example, the second entry should be
        ---- #traits-2 and traits-2
        --->
        <a data-toggle="collapse" href="#traits-1">View All</a>
        <div class="collapse" id="traits-1">
          <ul class="list-unstyled">
            <!--- trait --->
            <li><a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Common">Trait One</a></li>
            <!--- trait --->
            <li><a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Common">Trait Two</a></li>
            <!--- trait --->
            <li><a class="btn btn-sm bg-success tooltipster" data-toggle="tooltip" title="Uncommon">Trait Three</a></li>
          </ul>
        </div>
      </td>
      <!--- extras --->
      <td>
        <!---
        ==== collapse 
        ---- when adding a new row, make sure to change the number to match
        ---- the masterlist number. For example, the second entry should be
        ---- #extras-2 and extras-2
        --->
        <a data-toggle="collapse" href="#extras-1">View All</a>
        <div class="collapse" id="extras-1">
          <ul class="list-unstyled">
            <!--- extra --->
            <li><a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Common">Extra One</a></li>
            <!--- extra --->
            <li><a class="btn btn-sm bg-success tooltipster" data-toggle="tooltip" title="Uncommon">Extra Two</a></li>
            <!--- extra --->
            <li><a class="btn btn-sm bg-danger tooltipster" data-toggle="tooltip" title="Epic">Extra Three</a></li>
          </ul>
        </div>
      </td>
      <!--- changelog --->
      <td>
        <!---
        ==== collapse 
        ---- when adding a new row, make sure to change the number to match
        ---- the masterlist number. For example, the second entry should be
        ---- #change-2 and change-2
        --->
        <a data-toggle="collapse" href="#change-1">View All</a>
        <div class="collapse" id="change-1">
          <ul class="list-unstyled">
            <!--- change --->
            <li>Added Trait</li>
            <!--- change --->
            <li>Upgraded Trait</li>
            <!--- change --->
            <li>Changed Ticket</li>
          </ul>
        </div>
      </td>
      <!--- ownership/trade log --->
      <td>
        <!---
        ==== collapse 
        ---- when adding a new row, make sure to change the number to match
        ---- the masterlist number. For example, the second entry should be
        ---- #trade-2 and trade-2
        --->
        <a data-toggle="collapse" href="#trade-1" aria-expanded="false" aria-controls="trade-1">View All</a>
        <div class="collapse" id="trade-1">
          <ul class="list-unstyled">
            <!--- trade --->
            <li>@user - $5</li>
            <!--- trade --->
            <li>@user - trade</li>
            <!--- trade --->
            <li>@user - gift</li>
          </ul>
        </div>
      </td>
      <!--- trade listing --->
      <td>
        <!--- copy paste from the above key table --->
        <a class="btn btn-sm bg-success tooltipster" data-toggle="tooltip" title="For Sale" style="width: 40px;">
          <i class="fas fa-dollar-sign"></i>
        </a>
        <a class="btn btn-sm bg-info tooltipster" data-toggle="tooltip" title="Price" style="width: 40px; font-weight: bold;">
          <i class="fas fa-dollar-sign"></i> 5
        </a>
        <!--- end of trade tags --->
      </td>
    </tr>
    <!--- end of sample entry --->
    <!--- when adding additional entries, paste directly before this line --->
  </table>
  <div class="text-right"><a href="/8byte" class="tooltipster" title="code credits" data-placement="bottom"><i class="fas fa-crow"></i></a></div>
</div>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.