<!--
/\ /\ _ _ _ - _ __
/!!\ /--\| || |(_)\/|| |(_)
/____\ _/ _)
\ /- _ _| _ _ |\/| _ _| _ |
\/\/ || |(_|(_)\/\/_\ | |(_)(_|(_\|
Layout by mrpuppychow
Made for the Advent 2021 Coding Calendar!
-->
<div id="annoying" class="collapse show" style="transition:none !important;position:fixed;top:0;bottom:0;left:0;width:100%;background:rgba(0,0,0,0.8);padding-top:150px;z-index:1000;">
<div id="accordion" class="mx-auto col-10 col-md-7 col-lg-4" style="background:silver;padding:3px;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;font-family:'MS Sans Serif', Geneva, Arial, sans-serif;">
<h2 style="padding:3px;color:#fff;font-weight:600;background:linear-gradient(90deg,#000080,#1084d0);">Toyhou.se<i style="float:right;padding:3px 5px;font-size:75%;background:silver;color:#7f7f7f;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;" class="fa fa-times"></i></h2>
<!-- layout -->
<--
- icon image = I provided four you can use on the main page,
but you can use any image you like.
- description = the main body text of the warning. Expands
vertically when you add more text.
- link = this triggers the next page of the modal. The last
one should always be set to #annoying to close the modal.
By default, this layout has 4 pages. You can add more or less
pages to the modal like any standard carousel by simply
copying and pasting new layers. However, make sure you update
the links and layer IDs to keep the chain functional (noted in
green text on the html code page).
-->
<div id="layerOne" data-parent="#accordion" class="collapse show" style="transition:none !important;">
<div class="py-2 row no-gutters m-auto col-10 align-items-center">
<p class="col-2 text-center mb-0"><img src="img_link"></p>
<p class="col-10" style="color:#000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque blandit malesuada efficitur. Duis nec est venenatis, accumsan nisi vitae, ullamcorper metus. Praesent interdum enim nec varius fermentum. Duis consectetur molestie felis eget pulvinar. Donec mollis risus volutpat ultrices gravida. Curabitur ac gravida dolor, quis vestibulum turpis.</p>
</div>
<div class="p-2"><a data-toggle="collapse" href="#layerTwo" role="button" aria-expanded="" aria-controls="" style="display:block;width:100px;text-align:center;margin:auto;padding:3px;background:silver;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;color:black;text-decoration:none;">OK</a></div>
</div>
<div id="layerTwo" data-parent="#accordion" class="collapse" style="transition:none !important;">
<div class="py-2 row no-gutters m-auto col-10 align-items-center">
<p class="col-2 text-center mb-0"><img src="img_link"></p>
<p class="col-10" style="color:#000;">Sed venenatis eros maximus risus aliquet, a fringilla augue mattis. Fusce varius odio eu velit aliquam bibendum. Donec sed eros auctor, scelerisque leo sit amet, pharetra felis. Donec feugiat mi ut elementum suscipit. In vitae lectus non dolor consequat efficitur. Nam non iaculis leo. Suspendisse eget viverra nibh, eget euismod nulla.</p>
</div>
<div class="p-2"><a data-toggle="collapse" href="#layerThree" role="button" aria-expanded="" aria-controls="" style="display:block;width:100px;text-align:center;margin:auto;padding:3px;background:silver;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;color:black;text-decoration:none;">OK</a></div>
</div>
<div id="layerThree" data-parent="#accordion" class="collapse" style="transition:none !important;">
<div class="py-2 row no-gutters m-auto col-10 align-items-center">
<p class="col-2 text-center mb-0"><img src="img_link"></p>
<p class="col-10" style="color:#000;">Duis iaculis eu metus sit amet ullamcorper. Nullam sollicitudin pulvinar nulla sed sollicitudin. Vivamus mollis odio imperdiet tempus pretium. Integer in mauris erat. Curabitur tempor auctor euismod. Suspendisse a massa eget ipsum consequat feugiat a at lacus.</p>
</div>
<div class="p-2"><a data-toggle="collapse" href="#layerFour" role="button" aria-expanded="" aria-controls="" style="display:block;width:100px;text-align:center;margin:auto;padding:3px;background:silver;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;color:black;text-decoration:none;">OK</a></div>
</div>
<div id="layerFour" data-parent="#accordion" class="collapse" style="transition:none !important;">
<div class="py-2 row no-gutters m-auto col-10 align-items-center">
<p class="col-2 text-center mb-0"><img src="img_link"></p>
<p class="col-10" style="color:#000;">Suspendisse ultrices elit et dui malesuada, sit amet pretium mauris finibus. Donec fringilla tristique enim, vitae vestibulum lectus. Ut ut enim id enim venenatis porta. Duis.</p>
</div>
<div class="p-2"><a data-toggle="collapse" href="#annoying" role="button" aria-expanded="" aria-controls="" style="display:block;width:100px;text-align:center;margin:auto;padding:3px;background:silver;box-shadow:-1px -1px #0a0a0a inset,1px 1px #fff inset,-2px -2px #808080 inset,2px 2px #dfdfdf inset;color:black;text-decoration:none;">OK</a></div>
</div>
</div>
<div class="d-block p-0" style="position:fixed;bottom:20px;right:20px;"><a href="https://toyhou.se/13943456.-f2u-annoying-windows-modal" class="text-secondary text-decoration-none" data-toggle="tooltip" title="get the code!"></<span class="fas fa-paw small"></span>></a></div>
</div>