WIP

<html>

<!--NOTES:

-BOB ICONS

-->

  <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script>

          $( function() {
            $( "#draggable" ).draggable();
          } );

    </script>

<meta name="if:static" contents="false" />

<meta name="image:pagedoll" contents="" />

<meta name="text:desc" contents="" />

<!--TVS-->

<meta name="if:tv red" content="true" />

<meta name="if:tv orange" contents="" />

<meta name="if:tv yellow" contents="" />

<meta name="if:tv green" contents="" />

<meta name="if:tv blue" contents="" />

<meta name="if:tv indigo" contents="" />

<meta name="if:tv purple" contents="" />

<meta name="if:tv pink" contents="" />

<!--BORDERS-->

<meta name="image:background" contents="" />
<meta name="color:background" contents="" />

<meta name="color:links" contents="" />

<meta name="color:icon 1 border" contents="" />

<meta name="color:icon 2 border" contents="" />

<meta name="color:icon 3 border" contents="" />

<meta name="color:icon 4 border" contents="" />

<meta name="color:desc border" contents="" />

<meta name="select:icon 1 border" content="solid" />
<meta name="select:icon 1 border" content="dashed" />
<meta name="select:icon 1 border" content="double" />
<meta name="select:icon 1 border" content="dotted" />
<meta name="select:icon 1 border" content="groove" />
<meta name="select:icon 1 border" content="ridge" />
<meta name="select:icon 1 border" content="inset" />
<meta name="select:icon 1 border" content="outset" />

<meta name="select:icon 2 border" content="solid" />
<meta name="select:icon 2 border" content="dashed" />
<meta name="select:icon 2 border" content="double" />
<meta name="select:icon 2 border" content="dotted" />
<meta name="select:icon 2 border" content="groove" />
<meta name="select:icon 2 border" content="ridge" />
<meta name="select:icon 2 border" content="inset" />
<meta name="select:icon 2 border" content="outset" />

<meta name="select:icon 3 border" content="solid" />
<meta name="select:icon 3 border" content="dashed" />
<meta name="select:icon 3 border" content="double" />
<meta name="select:icon 3 border" content="dotted" />
<meta name="select:icon 3 border" content="groove" />
<meta name="select:icon 3 border" content="ridge" />
<meta name="select:icon 3 border" content="inset" />
<meta name="select:icon 3 border" content="outset" />

<meta name="select:icon 4 border" content="solid" />
<meta name="select:icon 4 border" content="dashed" />
<meta name="select:icon 4 border" content="double" />
<meta name="select:icon 4 border" content="dotted" />
<meta name="select:icon 4 border" content="groove" />
<meta name="select:icon 4 border" content="ridge" />
<meta name="select:icon 4 border" content="inset" />
<meta name="select:icon 4 border" content="outset" />

<meta name="select:desc border" content="solid" />
<meta name="select:desc border" content="dashed" />
<meta name="select:desc border" content="double" />
<meta name="select:desc border" content="dotted" />
<meta name="select:desc border" content="groove" />
<meta name="select:desc border" content="ridge" />
<meta name="select:desc border" content="inset" />
<meta name="select:desc border" content="outset" />

<meta name="color:desc font" contents="" />

<meta name="select:background size" content="auto" />
<meta name="select:background size" content="cover" />
<meta name="select:background size" content="fill" />

<meta name="image:icon 1" contents="" />

<meta name="image:icon 2" contents="" />

<meta name="image:icon 3" contents="" />

<meta name="image:icon 4" contents="" />

<meta name="image:desc background" contents="" />
<meta name="color:desc background" contents="" />

<meta name="image:posts outline" contents="" />
<meta name="color:posts outline" contents="" />

<meta name="image:posts background" contents="" />
<meta name="color:posts background" contents="" />

<meta name="select:posts border" content="solid" />
<meta name="select:posts border" content="dashed" />
<meta name="select:posts border" content="double" />
<meta name="select:posts border" content="dotted" />
<meta name="select:posts border" content="groove" />
<meta name="select:posts border" content="ridge" />
<meta name="select:posts border" content="inset" />
<meta name="select:posts border" content="outset" />

<meta name="color:posts border" contents="" />

<meta name="color:posts font" contents="" />

<meta name="color:permalinks background" contents="" />
<meta name="color:permalinks border" contents="" />

<meta name="select:permalinks border" content="solid" />
<meta name="select:permalinks border" content="dashed" />
<meta name="select:permalinks border" content="double" />
<meta name="select:permalinks border" content="dotted" />
<meta name="select:permalinks border" content="groove" />
<meta name="select:permalinks border" content="ridge" />
<meta name="select:permalinks border" content="inset" />
<meta name="select:permalinks border" content="outset" />

<meta name="color:permalinks" contents="" />

<meta name="color:footer background" contents="" />
<meta name="color:footer border" contents="" />

<meta name="select:footer border" content="solid" />
<meta name="select:footer border" content="dashed" />
<meta name="select:footer border" content="double" />
<meta name="select:footer border" content="dotted" />
<meta name="select:footer border" content="groove" />
<meta name="select:footer border" content="ridge" />
<meta name="select:footer border" content="inset" />
<meta name="select:footer border" content="outset" />

<meta name="color:tags" contents="" />

<meta name="color:pagination" contents="" />
<meta name="color:pagination outline" contents="" />

<style>

::-webkit-scrollbar {

display: none;

}

html {

display: table;

margin: auto;

}

.static::before {

content: "";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: linear-gradient(rgba(20, 20, 20, 0) 66%, rgba(0, 0, 0, 0.15) 142%);

background-size: 100% 4px;

z-index: 9999;

pointer-events: none;

animation: scanlines-anim 1.0s linear infinite;

}

body {

display: table-cell;

vertical-align: middle;

padding-top: 20px;

background-color: {color:background};

background-image: url("{image:background}");

background-size: {select:background size};

}

a, ahref {

color: {color:links};

}

.tv {

width: 793px;

height: 70px;

position: absolute;

}

.icon {

width: 100px;

height: 100px;

border: 3px {select:icon 1 border} {color:icon 1 border};

display: inline-block;

margin: 10px;

background-image: url("{image:icon 1}");

background-size: cover;

}

.icon2 {

width: 100px;

height: 100px;

border: 3px {select:icon 2 border} {color:icon 2 border};

display: inline-block;

margin: 10px;

background-image: url("{image:icon 2}");

background-size: cover;

}

.icon3 {

width: 100px;

height: 100px;

border: 3px {select:icon 3 border} {color:icon 3 border};

display: inline-block;

margin: 10px;

background-image: url("{image:icon 3}");

background-size: cover;

}

.icon4 {

width: 100px;

height: 100px;

border: 3px {select:icon 4 border} {color:icon 4 border};

display: inline-block;

margin: 10px;

background-image: url("{image:icon 4}");

background-size: cover;

}

.desc {

width: 249px;

height: 100px;

border: 3px {select:desc border} {color:desc border};

display: inline-block;

margin: 10px;

overflow: auto;

color: {color:desc font};

background-image: url("{image:desc background}");

background-color: {color:desc background};

scrollbar-width: none;

}

.postcontainer {

width: 540px;

height: 370px;

border: 3px solid transparent;

margin-left: 50px;

margin-top: 75px;

overflow: auto;

position: absolute;

z-index: 99;

scrollbar-width: none;

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(white), to(transparent));
-webkit-mask-image: linear-gradient(to bottom, white 70%, transparent 100%);
mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(transparent));
mask-image: linear-gradient(to bottom, white 70%, transparent 100%);

}

.postscover {

background-image: url("{image:posts background}");

background-color: {color:posts background};

background-size: cover;

padding: 10px;

}

.posts {

width: 270px;

padding: 10px;

height: auto;

border: 2px {color:posts border} {select:posts border};

color: {color:posts font};

text-align: justify;

font-size: 12px;

overflow: hidden;

background-image: url("{image:posts outline}");

background-color: {color:posts outline};

background-size: cover;

}

.posts img, audio, video {

max-width: 100%;

height: auto;

}

.aboveposts {

width: auto;

height: auto;

background-color: {color:permalinks background};

border: 2px {color:permalinks border} {select:permalinks border};

padding: 3px;

margin-bottom: 10px;

font-size: 14px;

background-image: url("https://cdn.discordapp.com/attachments/1119451241286737970/1120143340051116173/Untitled-1.png");

color: {color:permalinks};

}

.aboveposts a {

color: {color:permalinks};

}

.tags {

width: auto;

padding: 3px;

background-color: {color:footer background};

border: 2px {color:footer border} {select:footer border};

font-size: 10px;

}

.tags a {

text-decoration: none;

color: {color:tags};

}

blockquote {

margin-left: 2px;

padding-left: 5px;

border-left: 1px dotted #000;

}

.pagination {

color: {color:pagination};

text-align: center;

margin-top: -10px;

z-index: 16;

position: relative;

text-shadow:
    -1px -1px 0 {color:pagination outline},
     0   -1px 0 {color:pagination outline},
     1px -1px 0 {color:pagination outline},
     1px  0   0 {color:pagination outline},
     1px  1px 0 {color:pagination outline},
     0    1px 0 {color:pagination outline},
    -1px  1px 0 {color:pagination outline},
    -1px  0   0 {color:pagination outline};

scrollbar-width: none;

}

.jump_page {

padding: 4px 2px;

text-align: center;

color: {color:pagination};

font-size: 18px;

text-decoration: none;

z-index: 16;

}

.current_page {

padding: 4px 2px;

text-align: center;

color: {color:pagination};

font-size: 18px;

text-decoration: underline;

z-index: 16;

}

.pagedoll {

width: 100px;

height: 100px;

margin-top: 200px;

margin-left: -80px;

float: right;

z-index: 900;

}

#credit {

position:fixed;

left:12px;

bottom:6px;

font-size:14px;

}

/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    translateY(-8px);
  }
  50% {translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
#hvr-bob {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}


@-webkit-keyframes hvr-bob2 {
  0% {
    translateY(8px);
  }
  50% {translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-bob2 {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
#hvr-bob2 {
  -webkit-animation-name: hvr-bob-float2, hvr-bob2;
  animation-name: hvr-bob-float2, hvr-bob2;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

</style>

</head>

<body {block:ifstatic}class="static"{/block:ifstatic}>

<div class="pagedoll" id="draggable">

<img src="{image:pagedoll}">

</div> <!--PAGE DOLL-->

<div class="pagination" style="z-index: 16; float: right;">
<br>
{block:Pagination}

{block:JumpPagination length="5"}

{block:CurrentPage}

<span class="current_page" style="margin-bottom: 5px;">{PageNumber}</span><br>

{/block:CurrentPage}

{block:JumpPage}

<a class="jump_page" href="{URL}" style="margin-bottom: 5px;">{PageNumber}</a><br>

{/block:JumpPage}

{/block:JumpPagination}

{/block:Pagination}

</div> <!--PAG-->

<div class="icon" id="hvr-bob">

</div> <!--ICON 1-->

<div class="icon2" id="hvr-bob2">

</div> <!--ICON 2-->

<div class="icon3" id="hvr-bob">

</div> <!--ICON 3-->

<div class="icon4" id="hvr-bob2">

</div> <!--ICON 4-->

<div class="desc">

<p style="padding-left: 8px; padding-right: 8px; margin-top: 8px; margin-bottom: 8px; text-align: justify">

{text:desc}

</p>

</div> <!--DESC-->

<div class="postcontainer">

<center>

{block:posts}

<div class="posts">

<div class="postscover">

<div class="aboveposts">

<a href="{permalink}" style="text-decoration: none;" title="{timeago}"><b>{ShortMonth} {DayOfMonth}</b></a>

<span style="float: right;">

{NoteCount}

</span>

</div> <!--ABOVE POSTS-->


{block:text}

{block:title}

<div class="title">{title}</div>

{/block:title}

{body}

{/block:text}

{block:chat}

{block:title}

<div class="title">{title}</div>

{/block:title}

{block:lines}

{block:label}

{label}

{/block:label}

{line}<br>

{/block:lines}

{/block:chat}

{block:photo}

<img src="{photourl-250}">

{/block:photo}

{block:photoset}

{photoset-250}

{/block:photoset}

{block:video}

{video-250}

{/block:video}

{block:audio}

{block:audioembed}

{audioembed-250}

{/block:audioembed}

{block:audioplayer}

{audioplayer}

{/block:audioplayer}

{block:albumart}

<img src="{albumarturl}" style="width: 50px;">

{/block:albumart}

{block:trackname}

{trackname}

{/block:trackname}

{/block:audio}

{block:quote}

<h3>❛ {quote} ❜</h3>

{block:source}

— {source}

{/block:source}

{/block:quote}

{block:link}

<a href="{url}" target="_blank">{name}</a>

{block:description}

{description}

{/block:description}

{/block:link}

{block:answer}

{asker} says:

{question}

{block:answerer}

{answer}

{/block:answerer}

{/block:answer}

{block:date}

<br>

<div class="footer">

{block:hastags}

<div class="tags" style="background-image:url(https://cdn.discordapp.com/attachments/1119451241286737970/1120143340051116173/Untitled-1.png);">

{block:tags}

<a href="{tagurl}">#{tag}</a> &nbsp;

{/block:tags}

</div>

{/block:hastags}

{block:permalinkpage}

{block:notecount}

{block:postnotes}

{postnotes}

{/block:postnotes}

{/block:notecount}

{/block:permalinkpage}

{block:rebloggedfrom}

{reblogparentname}

{/block:rebloggedfrom}

</div>

{/block:date}

</div> <!--POSTS-->

</div> <!--POST COVER-->

<br>

{/block:posts}

</center> <!--POSTS CENTER-->

</div> <!--POST CONTAINER-->

<div class="tv">

{block:iftvred}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451345246757004/red.png">

{/block:iftvred}

{block:iftvorange}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451345569730640/orange.png">

{/block:iftvorange}

{block:iftvyellow}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451345859117096/yellow.png">

{/block:iftvyellow}

{block:iftvgreen}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451346106589234/green.png">

{/block:iftvgreen}

{block:iftvblue}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451346416980069/blue.png">

{/block:iftvblue}

{block:iftvindigo}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451346714755153/indigo.png">

{/block:iftvindigo}

{block:iftvpurple}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451380088848404/purple.png">

{/block:iftvpurple}

{block:iftvpink}

<img src="https://cdn.discordapp.com/attachments/1119451241286737970/1119451380424384552/pink.png">

{/block:iftvpink}

</div> <!--TV-->

<div id="credit">

<a href="https://cod.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>

</div>

</body>

</html>