[SNIP] Company Overlays
created by:FlowerlyRat
Custom ColorsHTMLMiscellaneous
Copy
<!--===/// SCRAP SCAN ///===-->
<!--
Add "position: absolute; top: -2px; left: -3px;" to the first div to put it on top of the character avatar, play around with "top" and "left" to position it correctly
I highly recommend having 2 different ones for computer and mobile, as depending on the number of tags, it may no longer align -> add "hidden-md-up" to hide from computers, and "hidden-md-down" to hide from mobile devices, in the "class" of the first div
-->
<div class="card bg-transparent justify-content-center m-2 mx-auto" style="height: 142px; width: 142px; border-radius: 50%; border-width: 2px; border-color: rgba(67, 201, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 134px; width: 134px; border-radius: 50%; border-width: 2px; border-color: rgba(67, 201, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 120px; width: 120px; border-radius: 50%; border-width: 2px; border-color: rgba(67, 201, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 80px; width: 80px; border-radius: 50%; border-width: 2px; border-color: #43c901">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 50px; width: 50px; border-radius: 50%; border-width: 2px; border-color: #43c901">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 42px; width: 42px; border-radius: 50%; border-width: 2px; border-color: #43c901"></div>
</div>
</div>
</div>
</div>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; right: -120px; width: 170px; font-family: monospace; z-index: 1">
<div class="card border-0 rounded-0 p-1 mb-1" style="font-size: 1.2em; color: #4ce600; background-color: rgba(55, 167, 0, 0.8)">
<p class="text-truncate">
<!--// Name //-->
Bottles
<!--// Name end //-->
</p>
</div>
<div class="card border-0 col-9 rounded-0 px-1" style="font-size: 12px; color: #4ce600; background-color: rgba(55, 167, 0, 0.8)">
<p class="text-truncate">
<!--// Value //--> <!--Delete the "p" tag and replace "font-size: 12px;" by "padding-top: 18px;" if you want the lower section to be empty-->
Value: <i class="fa fa-rectangle-vertical ml-1" style="font-size: 8px"></i> 52
<!--// Value end //-->
</p>
</div>
</div>
</div>
<!--===/// SCRAP SCAN end ///===-->
<!--===/// CREATURE SCAN ///===-->
<!--
Add "position: absolute; top: -2px; left: -3px;" to the first div to put it on top of the character avatar, play around with "top" and "left" to position it correctly
I highly recommend having 2 different ones for computer and mobile, as depending on the number of tags, it may no longer align -> add "hidden-md-up" to hide from computers, and "hidden-md-down" to hide from mobile devices, in the "class" of the first div
-->
<div class="card bg-transparent justify-content-center m-2 mx-auto" style="height: 142px; width: 142px; border-radius: 50%; border-width: 2px; border-color: rgba(214, 11, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 134px; width: 134px; border-radius: 50%; border-width: 2px; border-color: rgba(214, 11, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 120px; width: 120px; border-radius: 50%; border-width: 2px; border-color: rgba(214, 11, 1, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 80px; width: 80px; border-radius: 50%; border-width: 2px; border-color: #d60b01">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 50px; width: 50px; border-radius: 50%; border-width: 2px; border-color: #d60b01">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 42px; width: 42px; border-radius: 50%; border-width: 2px; border-color: #d60b01"></div>
</div>
</div>
</div>
</div>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; right: -120px; width: 170px; font-family: monospace; z-index: 1">
<div class="card border-0 rounded-0 p-1 mb-1" style="font-size: 1.2em; color: #600101; background-color: rgba(214, 11, 1, 0.8)">
<p class="text-truncate">
<!--// Name //-->
Coil-head
<!--// Name end//-->
</p>
</div>
<div class="card border-0 col-9 rounded-0 px-1" style="padding-top: 18px; color: #600101; background-color: rgba(214, 11, 1, 0.8)">
<!--Add:
<p class="text-truncate">
text here
</p>
here and replace "padding-top: 18px;" by "font-size: 12px;" if you want the lower section to have text-->
</div>
</div>
</div>
<!--===/// CREATURE SCAN end ///===-->
<!--===/// OTHER SCAN ///===-->
<!--
Add "position: absolute; top: -2px; left: -3px;" to the first div to put it on top of the character avatar, play around with "top" and "left" to position it correctly
I highly recommend having 2 different ones for computer and mobile, as depending on the number of tags, it may no longer align -> add "hidden-md-up" to hide from computers, and "hidden-md-down" to hide from mobile devices, in the "class" of the first div
-->
<div class="card bg-transparent justify-content-center m-2 mx-auto" style="height: 142px; width: 142px; border-radius: 50%; border-width: 2px; border-color: rgba(26, 20, 145, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 134px; width: 134px; border-radius: 50%; border-width: 2px; border-color: rgba(26, 20, 145, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 120px; width: 120px; border-radius: 50%; border-width: 2px; border-color: rgba(26, 20, 145, 0.5)">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 80px; width: 80px; border-radius: 50%; border-width: 2px; border-color: #1a1491">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 50px; width: 50px; border-radius: 50%; border-width: 2px; border-color: #1a1491">
<div class="card bg-transparent justify-content-center mx-auto" style="height: 42px; width: 42px; border-radius: 50%; border-width: 2px; border-color: #1a1491"></div>
</div>
</div>
</div>
</div>
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; right: -120px; width: 170px; font-family: monospace; z-index: 1">
<div class="card border-0 rounded-0 p-1 mb-1" style="font-size: 1.2em; color: #1098e3; background-color: rgba(26, 20, 145, 0.8)">
<p class="text-truncate">
<!--// Name //-->
Brake lever
<!--// Name end //-->
</p>
</div>
<div class="card border-0 col-9 rounded-0 px-1" style="font-size: 12px; color: #1098e3; background-color: rgba(26, 20, 145, 0.8)">
<p class="text-truncate">
<!--// Function //--> <!--Delete the "p" tag and replace "font-size: 12px;" by "padding-top: 18px;" if you want the lower section to be empty-->
Lands the ship
<!--// Function end //-->
</p>
</div>
</div>
</div>
<!--===/// OTHER SCAN end ///===-->
Copy
<!--===/// RED: RADIATION LEVELS ///===-->
<div class="card col-md-6 col-12 bg-transparent border-0 rounded-0 ml-auto m-2">
<div class="card border-0 rounded-0 p-2" style="min-height: 180px; font-family: monospace; font-weight: bold; color: #cdccca; background-color: rgba(105, 5, 0, 0.7); overflow: hidden">
<!--// Warning symbol //-->
<span class="fa-stack" style="position: absolute; bottom: -85px; right: -90px; font-size: 12em">
<i class="fal fa-sharp fa-warning fa-stack-1x" style="color: rgba(37, 18, 13, 0.7)"></i>
<i class="fal fa-sharp fa-warning fa-stack-1x fa-inverse fa-fade" style="color: #c3080e"></i>
</span>
<!--// Warning symbol end //-->
<!--// Text //-->
<p class="mb-n3 text-uppercase" style="font-size: 3em; z-index: 1">
warning
</p>
<p class="text-uppercase" style="font-size: 2em; z-index: 1">
increased levels of radiation
</p>
<p class="mt-auto" style="font-size: 2em; z-index: 1">
70 mSv
</p>
<!--// Text end //-->
</div>
</div>
<!--===/// RED: RADIATION LEVELS end ///===-->
Copy
<!--===/// BLUE: CREATURE DATA / LOG FOUND ///===-->
<div class="container p-0 justify-content-center m-md-2 my-2">
<div class="card border-0 rounded-0 p-3" style="font-family: monospace; font-weight: bold; color: #163d7a; background-color: #2a69ca; display: inline-block">
<p>
<!--// Text //-->
New creature data sent to terminal!
<!--// Text end //-->
</p>
</div>
</div>
<!--===/// BLUE: CREATURE DATA / LOG FOUND end ///===-->
Copy
<!--===/// BLACK: AUTOPILOT SHIP ANNOUNCEMENT ///===-->
<div class="card bg-transparent border-0 rounded-0 m-md-2 my-2">
<div class="card bg-transparent border-0 rounded-0 mx-auto">
<div class="card col-md-7 col-9 border-0 rounded-0 py-1 px-2 text-uppercase mb-2" style="font-family: monospace; font-weight: bold; letter-spacing: 1px; color: #0deae9; background-color: rgba(0, 0, 0, 0.6)">
<p>
<!--// Title //-->
Pilot computer
<!--// Title end//-->
</p>
</div>
<div class="card border-0 rounded-0 p-2" style="min-height: 80px; max-width: 520px; font-family: monospace; font-weight: bold; letter-spacing: 1px; color: #0deae9; background-color: rgba(0, 0, 0, 0.6); display: inline-block">
<p>
<!--// Text //-->
Warning! No response from crew, which has not returned.<br>
Emergency code activated
<!--// Text end //-->
</p>
</div>
</div>
</div>
<!--===/// BLACK: AUTOPILOT SHIP ANNOUNCEMENT end ///===-->
Copy
<!--===/// RED: PERFORMANCE REPORT ///===-->
<div class="card col-md-8 col-12 bg-transparent border-0 rounded-0 mx-auto m-2">
<!--/// TOP CARD ///-->
<div class="card border-0 rounded-0 py-1 px-5 text-uppercase text-center mb-2" style="font-family: monospace; font-size: 3em; letter-spacing: 1px; color: #ff3401; background-color: rgba(105, 5, 0, 0.7)">
<p>performance report</p>
</div>
<!--/// TOP CARD end ///-->
<!--/// MIDDLE CARD ///-->
<div class="card border-0 rounded-0 py-1 px-md-0 px-2 mb-2" style="font-family: monospace; color: #ff3401; background-color: rgba(105, 5, 0, 0.7)">
<!--/// Player 1 ///-->
<div class="row no-gutters mt-1 justify-content-center">
<!--// Name //-->
<div class="card bg-transparent rounded-0 col-lg-4 p-1 m-1 justify-content-center" style="height: 70px; font-size: 1.3em; border: 4px solid #ff3401">
<p class="text-truncate"><a style="color: #ff3401" href=
"LINK_TO_CHARACTER_HERE">
Player name
</a></p>
</div>
<!--// Name end //-->
<!--// Status //-->
<!--
To replace the status, get rid of the entire "p" tag and replace it with one of the following:
Deceased / Missing [just change the word]:
<p style="transform: rotate(350deg)">
deceased
</p>
Alive:
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
-->
<div class="card bg-transparent rounded-0 col-lg-2 p-2 m-1 justify-content-center text-center text-uppercase" style="height: 70px; font-size: 1.5em; border: 4px solid #ff3401">
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
</div>
<!--// Status end //-->
<!--// Notes //-->
<div class="card bg-transparent border-0 rounded-0 col-lg-5 px-2 m-1" style="height: 70px">
<p class="mb-n1">Notes:</p>
<p style="overflow: auto">
<!--Copy and paste to add more, although it's recommended to not go over 2 lines-->
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>The laziest employee<br>
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>Most profitable<br>
</p>
</div>
<!--// Notes end //-->
<div class="card bg-transparent rounded-0 col-lg-5 ml-auto mr-3 hidden-md-down" style="border-width: 3px 0 0 0; border-color: #ff3401"></div>
</div>
<!--/// Player 1 end ///-->
<!--/// Player 2 ///-->
<div class="row no-gutters justify-content-center">
<!--// Name //-->
<div class="card bg-transparent rounded-0 col-lg-4 p-1 m-1 justify-content-center" style="height: 70px; font-size: 1.3em; border: 4px solid #ff3401">
<p class="text-truncate"><a style="color: #ff3401" href=
"LINK_TO_CHARACTER_HERE">
Player name
</a></p>
</div>
<!--// Name end //-->
<!--// Status //-->
<!--
To replace the status, get rid of the entire "p" tag and replace it with one of the following:
Deceased / Missing [just change the word]:
<p style="transform: rotate(350deg)">
deceased
</p>
Alive:
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
-->
<div class="card bg-transparent rounded-0 col-lg-2 p-2 m-1 justify-content-center text-center text-uppercase" style="height: 70px; font-size: 1.5em; border: 4px solid #ff3401">
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
</div>
<!--// Status end //-->
<!--// Notes //-->
<div class="card bg-transparent border-0 rounded-0 col-lg-5 px-2 m-1" style="height: 70px">
<p class="mb-n1">Notes:</p>
<p style="overflow: auto">
<!--Copy and paste to add more, although it's recommended to not go over 2 lines-->
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>The laziest employee<br>
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>Most profitable<br>
</p>
</div>
<!--// Notes end //-->
<div class="card bg-transparent rounded-0 col-lg-5 ml-auto mr-3 hidden-md-down" style="border-width: 3px 0 0 0; border-color: #ff3401"></div>
</div>
<!--/// Player 2 end ///-->
<!--/// Player 3 ///-->
<div class="row no-gutters justify-content-center">
<!--// Name //-->
<div class="card bg-transparent rounded-0 col-lg-4 p-1 m-1 justify-content-center" style="height: 70px; font-size: 1.3em; border: 4px solid #ff3401">
<p class="text-truncate"><a style="color: #ff3401" href=
"LINK_TO_CHARACTER_HERE">
Player name
</a></p>
</div>
<!--// Name end //-->
<!--// Status //-->
<!--
To replace the status, get rid of the entire "p" tag and replace it with one of the following:
Deceased / Missing [just change the word]:
<p style="transform: rotate(350deg)">
deceased
</p>
Alive:
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
-->
<div class="card bg-transparent rounded-0 col-lg-2 p-2 m-1 justify-content-center text-center text-uppercase" style="height: 70px; font-size: 1.5em; border: 4px solid #ff3401">
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
</div>
<!--// Status end //-->
<!--// Notes //-->
<div class="card bg-transparent border-0 rounded-0 col-lg-5 px-2 m-1" style="height: 70px">
<p class="mb-n1">Notes:</p>
<p style="overflow: auto">
<!--Copy and paste to add more, although it's recommended to not go over 2 lines-->
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>The laziest employee<br>
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>Most profitable<br>
</p>
</div>
<!--// Notes end //-->
<div class="card bg-transparent rounded-0 col-lg-5 ml-auto mr-3 hidden-md-down" style="border-width: 3px 0 0 0; border-color: #ff3401"></div>
</div>
<!--/// Player 3 end ///-->
<!--/// Player 4 ///-->
<div class="row no-gutters justify-content-center">
<!--// Name //-->
<div class="card bg-transparent rounded-0 col-lg-4 p-1 m-1 justify-content-center" style="height: 70px; font-size: 1.3em; border: 4px solid #ff3401">
<p class="text-truncate"><a style="color: #ff3401" href=
"LINK_TO_CHARACTER_HERE">
Player name
</a></p>
</div>
<!--// Name end //-->
<!--// Status //-->
<!--
To replace the status, get rid of the entire "p" tag and replace it with one of the following:
Deceased / Missing [just change the word]:
<p style="transform: rotate(350deg)">
deceased
</p>
Alive:
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
-->
<div class="card bg-transparent rounded-0 col-lg-2 p-2 m-1 justify-content-center text-center text-uppercase" style="height: 70px; font-size: 1.5em; border: 4px solid #ff3401">
<p>
<i class="far fa-sharp fa-check" style="font-size: 3.5em"></i>
</p>
</div>
<!--// Status end //-->
<!--// Notes //-->
<div class="card bg-transparent border-0 rounded-0 col-lg-5 px-2 m-1" style="height: 70px">
<p class="mb-n1">Notes:</p>
<p style="overflow: auto">
<!--Copy and paste to add more, although it's recommended to not go over 2 lines-->
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>The laziest employee<br>
<i class="fa-solid fa-asterisk my-auto mr-1" style="font-size: 10px"></i>Most profitable<br>
</p>
</div>
<!--// Notes end //-->
</div>
<!--/// Player 4 end ///-->
</div>
<!--/// MIDDLE CARD end ///-->
<!--/// BOTTOM CARD ///-->
<div class="card border-0 rounded-0 py-1 px-5 text-uppercase text-center" style="font-family: monospace; font-size: 1.5em; color: #ff3401; background-color: rgba(105, 5, 0, 0.7)">
<div class="row no-gutters mt-1 justify-content-center">
<!--/// Collected ///-->
<div class="card bg-transparent rounded-0 col-lg-5 p-1 m-1 mx-3 justify-content-center" style="height: 80px; border: 4px solid #ff3401">
<div class="row no-gutters align-items-center">
<div class="col-6">
<p style="letter-spacing: -1px">collected:</p>
</div>
<div class="col-6">
<div class="ml-lg-1 ml-3"><p>
<!--// Number collected //-->
48
<!--// Number collected end //-->
</p></div>
<div class="card bg-transparent rounded-0 ml-lg-1 ml-3" style="border-width: 2px 0 0 0; border-color: #ff3401"></div>
<div class="ml-lg-1 ml-3"><p>
<!--// Number available //-->
367
<!--// Number available end //-->
</p></div>
</div>
</div>
</div>
<!--/// Collected end ///-->
<!--/// Grade ///-->
<div class="card bg-transparent border-0 rounded-0 col-lg col-12 p-1 m-1 justify-content-center" style="height: 70px; font-weight: bold; font-size: 2.7em">
<div class="row no-gutters align-items-center">
<div class="col-6">
<p>grade:</p>
</div>
<div class="col-6 text-uppercase text-right" style="font-size: 1.5em"><p>
<!--// Grade //--> <!--Would not recommend adding a minus/plus, as it breaks on mobile-->
b
<!--// Grade end //-->
</p></div>
</div>
</div>
<!--/// Grade end ///-->
</div>
</div>
<!--/// BOTTOM CARD end ///-->
</div>
<!--===/// RED: PERFORMANCE REPORT end ///===-->
Copy
<!--===/// DARK BLUE: FINES ///===-->
<div class="container p-0 justify-content-center m-md-2 my-2">
<div class="card border-0 col-md-3 rounded-0 p-3 text-center" style="font-family: monospace; color: #fd013a; background-color: rgba(22, 2, 82, 0.8); display: inline-block">
<p class="mb-4" style="font-size: 2em">Fines</p><p>
<!--// Casualities //-->
1 casualities: -20%<br>
( 0 bodies recovered )
<!--// Casualities end //-->
</p><div class="card bg-transparent rounded-0 my-4" style="height: 50px; border-width: 0 0 2px 0; border-color: #fd013a"></div>
<p style="font-size: 1.5em">DUE: <i class="fa fa-rectangle-vertical mr-n2" style="font-size: 15px"></i>
<!--// Due //-->
12
<!--// Due end //-->
</p>
</div>
</div>
<!--===/// DARK BLUE: FINES end ///===-->
Copy
<!--===/// DAYS LEFT ///===-->
<div class="container p-0 justify-content-center m-md-2 my-2">
<!--To change to 1 / 0 days left, replace the "color" with 380d07, and the "background-color" with 195, 8, 14-->
<div class="card border-0 rounded-0 py-4 px-5 text-center" style="font-family: monospace; font-weight: bold;
color: #0d1643; background-color: rgba(42, 105, 202, 0.7);
display: inline-block">
<p class="mb-n1" style="font-size: 3em">
<!--// Days left //-->
2 Days Left
<!--// Days left end //-->
</p>
<p class="text-uppercase" style="font-size: 2em">
<!--// Text //-->
to meet profit quota
<!--// Text end //-->
</p>
</div>
</div>
<!--===/// DAYS LEFT end ///===-->