[MISC] Informational Diamond
created by:FlowerlyRat
Custom ColorsHTMLCharacterUserMiscellaneous
Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
November 2023 Coders' Quarters || Special challenge: remaking an existing code
Informational Diamond [user warning version]: code by FlowerlyRat || Remake of the "BYF + DNI" code
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing!!!! -> https://th.circlejourney.net/
Accent color (rgba value): 245, 51, 90
Background color: #050823
Border color: #172659
Text color: #fff
If the hover color buttons doesn't suit you, please refer to this comment addressing the different ways of changing it -> https://toyhou.se/~comments/32975317
> Do note the line numbers are no longer accurate to this version, the tags can now be found on lines 40, 48, 56, 64 and 72
To replace everything at once, highlight the part you want to change, "ctrl + F", and replace it with the desired color
-->
<div class="card border-0 rounded-0" style="margin-top: -132px; margin-bottom: -38px; margin-left: -42px; margin-right: -38px">
<div class="card rounded-0 p-3 pt-4" style="border-width: 3px; color: #fff; border-color: #172659; background-color: #080523">
<br>
<!--=====//////BUTTONS//////=====-->
<div class="card bg-transparent border-0 rounded-0" style="position: absolute; top: -30px; left: 0; right: 0; z-index: 5">
<ul class="nav nav-pills justify-content-center">
<!--Decor-->
<li class="card border-0 rounded-0 mb-3 align-items-center justify-content-center" style="bottom: 1px; left: 111.5px; width: 25px; height: 25px; background-color: rgba(245, 51, 90, 0.5); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></li>
<!--Decor end-->
<!--Permission button-->
<li class="nav-item card border-0 rounded-0 align-items-center justify-content-center" style="top: 33px; left: 79px; width: 40px; height: 40px; background-color: rgba(245, 51, 90, 0.8); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 40px; height: 40px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Permissions" href="#PERM">
<i class="fas fa-book" style="margin-top: 2px; font-size: 15px; color: #fff"></i>
</a>
</li>
<!--Permission button end-->
<!--DNI button-->
<li class="nav-item card border-0 rounded-0 mb-3 align-items-center justify-content-center" style="width: 57px; height: 57px; background-color: rgba(245, 51, 90, 1); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 57px; height: 57px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Do Not Interact" href="#DNI">
<i class="fas fa-times-circle" style="color: #fff"></i>
</a>
</li>
<!--DNI button end-->
<!--BYF button-->
<li class="nav-item card border-0 rounded-0 mb-3 align-items-center justify-content-center mx-1" style="margin-top: -21.5px; width: 100px; height: 100px; background-color: rgba(245, 51, 90, 1); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger active rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 100px; height: 100px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Before You Follow" href="#BYF">
<i class="fas fa-exclamation-triangle fa-fade mt-n2" style="font-size: 40px; color: #fff"></i>
</a>
</li>
<!--BYF button end-->
<!--Blacklist button-->
<li class="nav-item card border-0 rounded-0 mb-3 align-items-center justify-content-center" style="width: 57px; height: 57px; background-color: rgba(245, 51, 90, 1); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 57px; height: 57px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Blacklist" href="#BLK">
<i class="fas fa-comment-alt-times" style="color: #fff"></i>
</a>
</li>
<!--Blacklist button end-->
<!--Credit-->
<li class="nav-item card border-0 rounded-0 align-items-center justify-content-center" style="top: 33px; right: 79px; width: 40px; height: 40px; background-color: rgba(245, 51, 90, 0.8); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 40px; height: 40px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
<i class="fas fa-eye" style="margin-top: 2px; font-size: 15px; color: #fff"></i>
</a>
</li>
<!--Credit end-->
<!--Decor-->
<li class="card border-0 rounded-0 mb-3 align-items-center justify-content-center" style="bottom: 1px; right: 111.5px; width: 25px; height: 25px; background-color: rgba(245, 51, 90, 0.5); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></li>
<!--Decor end-->
</ul>
</div>
<!--=====//////BUTTONS end//////=====-->
<!--=====//////TABS//////=====-->
<div class="tab-content">
<!--===///BYF tab///===-->
<div class="tab-pane fade show active" id="BYF">
<!--///Content warning///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-exclamation-triangle fa-fade" style="color: rgba(245, 51, 90, 1)"></i> Content Warning</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">Please proceed with caution, this profile contains the following elements:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-exclamation-triangle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-triangle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-triangle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-triangle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-triangle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
</ul>
</p>
<!--List end-->
<!--///Content warning end///-->
<div class="card bg-transparent rounded-0 mb-4" style="height: 8px; border-width: 3px 0 2px 0; border-color: rgba(245, 51, 90, 1)"></div>
<!--///BYF text///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> Before you follow/Interact</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify">
Write anything you feel others need to know about you, your profile, or your characters before they subscribe/follow and interact with you.
</p>
<!--List end-->
<!--///BYF text end///-->
</div>
<!--===///BYF tab end///===-->
<!--===///DNI tab///===-->
<div class="tab-pane fade" id="DNI">
<!--///DNI list///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-times-circle fa-fade" style="color: rgba(245, 51, 90, 1)"></i> Do Not Interact</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">Never interact with me or my characters if:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
</ul>
</p>
<!--List end-->
<!--///DNI list end///-->
<div class="card bg-transparent rounded-0 mb-4" style="height: 8px; border-width: 2px 0 3px 0; border-color: rgba(245, 51, 90, 1)"></div>
<!--///Wary list///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> Wary</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">You may interact, but I will be wary of you if:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
</ul>
</p>
<!--List end-->
<!--///Wary list end///-->
</div>
<!--===///DNI tab end///===-->
<!--===///Blacklist tab///===-->
<div class="tab-pane fade" id="BLK">
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-comment-alt-times fa-fade" style="color: rgba(245, 51, 90, 1)"></i> Blacklist</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">The following users are blacklisted:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-arrow-alt-circle-right" style="color: rgba(245, 51, 90, 1)"></i> username (optional reason)</li>
<li class="ml-4"><i class="fad fa-arrow-alt-circle-right" style="color: rgba(245, 51, 90, 1)"></i> username (optional reason)</li>
<li class="ml-4"><i class="fad fa-arrow-alt-circle-right" style="color: rgba(245, 51, 90, 1)"></i> username (optional reason)</li>
<li class="ml-4"><i class="fad fa-arrow-alt-circle-right" style="color: rgba(245, 51, 90, 1)"></i> username (optional reason)</li>
<li class="ml-4"><i class="fad fa-arrow-alt-circle-right" style="color: rgba(245, 51, 90, 1)"></i> username (optional reason)</li>
</ul>
</p>
<!--List end-->
</div>
<!--===///Blacklist tab end///===-->
<!--===///Permissions tab///===-->
<div class="tab-pane fade" id="PERM">
<!--///Permissions text///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-book" style="color: rgba(245, 51, 90, 1)"></i> Permissions</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--Text-->
<p class="text-justify">
Small paragraph to explain what these permissions are for, whether they are profile rules or character permissions, maybe even terms of service!
</p>
<!--Text end-->
<!--///Permissions text end///-->
<div class="card bg-transparent rounded-0 mb-4" style="height: 8px; border-width: 3px 0 2px 0; border-color: rgba(245, 51, 90, 1)"></div>
<!--///May not list///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-times-circle fa-fade" style="color: rgba(245, 51, 90, 1)"></i> You may not</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">You may not do any of the following:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-times-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
</ul>
</p>
<!--List end-->
<!--///May not list end///-->
<div class="card bg-transparent rounded-0 mb-4" style="height: 8px; border-width: 2px 0 3px 0; border-color: rgba(245, 51, 90, 1)"></div>
<!--///May list///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> You may</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--List-->
<p class="text-justify" style="font-weight: bold">You may do any of the following:
<ul class="list-unstyled mt-n2">
<li class="ml-4"><i class="fad fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
<li class="ml-4"><i class="fad fa-check-circle" style="color: rgba(245, 51, 90, 1)"></i> content</li>
</ul>
</p>
<!--List end-->
<!--///May list end///-->
</div>
<!--===///Permissions tab end///===-->
</div>
<!--=====//////TABS end//////=====-->
</div>
<!--
If using the "character warning" version of this code in addition to this one, please add the following lines right below - [this is to create a divider to avoid both warnings being stuck to one another]
<div class="mt-3 mb-4" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 1)"></div>
-->
</div>Copy
<!--
╭━━╮╱╱╱╱╱╱╱╱╱╱╱╱╱╭━╮╱╱╭╮
┃━┳┫╭━┳┳┳┳━┳┳┳╮╭┳┫╋┣━╮┃╰╮
┃╭┫╰┫╋┃┃┃┃┻┫╭┫╰┫┃┃╮┫╋╰┫╭┫
╰╯╰━┻━┻━━┻━┻╯╰━╋╮┣┻┻━━┻━╯
╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╰━╯
Informational Diamond [character warning bonus version]: code by FlowerlyRat || Remake of the "BYF + DNI" code
Uses Donut-Toast's F2U Visual Content Warnings [obtained permission]
> It is recommended to use circlejourney's ToyHouse live editor to see what you're doing -> https://th.circlejourney.net/
Accent color (rgba value): 245, 51, 90
Background color: #080523
Warning background color: #03010f
Border color: #172659
Text color: #fff
Warning text color: #1d416c
To replace everything at once, highlight the part you want to change, "ctrl + F", and replace it with the desired color
-->
<div class="card border-0 rounded-0" style="margin-top: -135px; margin-bottom: -38px; margin-left: -42px; margin-right: -38px; z-index: 5">
<div class="card rounded-0 p-3 pt-4" style="color: #fff; border-width: 3px; border-color: #172659; background-color: #080523">
<!--/// HEADER ///-->
<div class="card rounded-0 p-4 mb-3" style="border-style: dotted solid; border-width: 3px 4px; border-color: rgba(245, 51, 90, 1); background-color: rgba(245, 51, 90, 0.2)">
<div class="row no-gutters">
<div class="col-lg-auto align-items-center justify-content-center">
<i class="fas fa-exclamation-triangle fa-fade" style="font-size: 40px; color: rgba(245, 51, 90, 1)"></i>
</div>
<div class="col-lg">
<p class="text-center mb-2" style="font-variant: small-caps; font-size: 40px; color: rgba(245, 51, 90, 1)"><b>Character Content Warning</b></p>
</div>
<div class="col-lg-auto align-items-center justify-content-center">
<i class="fas fa-exclamation-triangle fa-fade" style="font-size: 40px; color: rgba(245, 51, 90, 1)"></i>
</div>
</div>
</div>
<div class="progress my-2 rounded-0"><div class="progress-bar progress-bar-striped progress-bar-animated" style="height: 20px; width: 100%; background-color: rgba(245, 51, 90, 1)"></div></div>
<!--/// HEADER end ///-->
<!--/// CONTENT WARNING ///-->
<h1 class="mt-2" style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-exclamation-triangle fa-fade" style="color: rgba(245, 51, 90, 1)"></i> Content Warning</h1>
<div class="mb-3" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<!--===///////////// Icons by Donut-Toast, find them here -> https://toyhou.se/14383478./gallery /////////////===-->
<div class="p-3 row no-gutters justify-content-around">
<!--/// WARNING ///--> <!--Copy and paste this entire section to add another warning-->
<div class="col-md-2 col-6 text-center p-1">
<div class="card rounded mx-auto border-0" style="height: 100px; width: 100px; background: url(
https://f2.toyhou.se/file/f2-toyhou-se/images/44890965_x360Ug15qv1DzzJ.gif?1643569382
) center no-repeat; background-size: cover;"></div>
<h4 class="p-2 text-uppercase" style="font-weight: bold; background-color: #03010f; color: #1d416c">
warning descriptor
</h4>
</div>
<!--/// WARNING ///-->
</div>
<!--Credits to both the icons and the code to Donut-Toast and me--> <!--If the hover color buttons doesn't suit you, please refer to this comment addressing the different ways of changing it -> https://toyhou.se/~comments/32975317
> Do note the line numbers are no longer accurate to this version, the tags can now be found on lines 88 and 101-->
<div class="row no-gutters mt-1 mb-4">
<div class="col my-auto">
<div class="card bg-transparent rounded-0" style="height: 8px; border-width: 2px 0 2px 0; border-color: rgba(245, 51, 90, 1)"></div>
</div>
<div class="col-auto">
<ul class="nav nav-pills justify-content-center">
<!--Decor-->
<li class="card border-0 rounded-0 my-auto justify-content-center mx-2" style="width: 30px; height: 30px; background-color: rgba(245, 51, 90, 0.5); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
</li>
<!--Decor end-->
<!--Donut-Toast's warning icons link-->
<li class="nav-item card border-0 rounded-0 my-auto justify-content-center" style="width: 40px; height: 40px; background-color: rgba(245, 51, 90, 0.8); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 40px; height: 40px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Icons by Donut-Toast" href="https://toyhou.se/14383478.visual-content-warning-f2u-">
<i class="fas fa-bagel" style="margin-top: 2px; font-size: 15px; color: #fff"></i>
</a>
</li>
<!--Donut-Toast's warning icons link end-->
<!--Decor-->
<li class="card border-0 rounded-0 my-auto justify-content-center mx-2" style="width: 60px; height: 60px; background-color: rgba(245, 51, 90, 1); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
</li>
<!--Decor end-->
<!--FlowerlyRat's code folder link-->
<li class="nav-item card border-0 rounded-0 my-auto justify-content-center" style="width: 40px; height: 40px; background-color: rgba(245, 51, 90, 0.8); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
<a class="btn btn-outline-danger rounded-0 border-0 align-items-center justify-content-center tooltipster" style="width: 40px; height: 40px; font-size: 20px; mix-blend-mode: screen; box-shadow: none" data-toggle="pill" title="Code by FlowerlyRat" href="https://toyhou.se/FlowerlyRat/characters/folder:4673560">
<i class="fas fa-eye" style="margin-top: 2px; font-size: 15px; color: #fff"></i>
</a>
</li>
<!--FlowerlyRat's code folder link end-->
<!--Decor-->
<li class="card border-0 rounded-0 my-auto justify-content-center mx-2" style="width: 30px; height: 30px; background-color: rgba(245, 51, 90, 0.5); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);">
</li>
<!--Decor end-->
</ul>
</div>
<div class="col my-auto">
<div class="card bg-transparent rounded-0" style="height: 8px; border-width: 2px 0 2px 0; border-color: rgba(245, 51, 90, 1)"></div>
</div>
</div>
<!--/// CONTENT WARNING end ///-->
<!--///BYF text///-->
<h1 style="font-variant: small-caps; font-weight: bold; font-size: 30px"><i class="fas fa-exclamation-circle" style="color: rgba(245, 51, 90, 1)"></i> Before you continue</h1>
<div class="mb-3 text-justify" style="border-width: 2px 0 0 0; border-style: solid; color: rgba(245, 51, 90, 0.5)"></div>
<p>
Things to know about the character, their source material, or their profile.
</p>
<!--///BYF text end///-->
</div>
</div>