POKÉ PREVIEW

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<title>{text:title}</title>

<link href="/style.css" rel="stylesheet" tyle="text/css" media="all">

<link rel="icon" type="image/x-icon" href="{image:favicon}">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<!--FONTS-->

<style>

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Fredoka+One&family=Silkscreen&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Fuzzy+Bubbles&display=swap');

</style>

<!--METAS-->

<meta name="select:font family" content="arial" />
<meta name="select:font family" content="comic sans ms" />
<meta name="select:font family" content="times" />
<meta name="select:font family" content="ms gothic" />
<meta name="select:font family" content="Caveat" />
<meta name="select:font family" content="Fuzzy Bubbles" />
<meta name="select:font family" content="DynaPuff" />
<meta name="select:font family" content="Silkscreen" />
<meta name="select:font family" content="Cherry Bomb One" />
<meta name="select:font family" content="Fredoka One" />

<meta name="text:title" contents="site title here" />

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

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

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

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

<meta name="text:font family" contents="ms gothic">

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

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

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

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

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

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

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

<meta name="select:header size" content="auto" />
<meta name="select:header size" content="cover" />
<meta name="select:header size" content="contain" />

<meta name="image:music player background" contents="" />

<meta name="color:music player background" contents="" />

<meta name="color:music player border" contents="" />

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

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

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

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

<meta name="image:navigation pixel" contents="" />

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

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

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

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

<meta name="color:mobile view font" contents="" />

<meta name="color:mobile view outline" contents="" />

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

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

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

<meta name="image:inner container background" contents="" />

<meta name="color:inner container background" contents="" />

<meta name="color:inner container border" contents="" />

<meta name="select:inner container background size" content="auto" />
<meta name="select:inner container background size" content="cover" />
<meta name="select:inner container background size" content="contain" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<meta name="color:pagination current page" contents="" />

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

<meta name="text:permalink" contents="x" />

<meta name="text:MP3" contents="MP3 link here" />

<meta name="text:play button hover" contents="" />

<meta name="color:play button" contents="" />

<meta name="color:play button outline" contents="" />

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

<meta name="text:refresh title" content="REFRESH TITLE" />

<meta name="text:refresh" content="REFRESH" />

<meta name="text:ask title" content="ASK TITLE" />

<meta name="text:ask" content="ASK" />

<meta name="text:archive title" content="ARCHIVE TITLE" />

<meta name="text:archive" content="ARCHIVE" />

<meta name="text:extra link 1 path" content="/link 1" />
<meta name="text:extra link 2 path" content="/link 2" />
<meta name="text:extra link 3 path" content="/link 3" />

<meta name="text:extra link 1 title" content="LINK 1 TITLE" />
<meta name="text:extra link 2 title" content="LINK 2 TITLE" />
<meta name="text:extra link 3 title" content="LINK 3 TITLE" />

<meta name="text:extra link 1" content="LINK 1" />
<meta name="text:extra link 2" content="LINK 2" />
<meta name="text:extra link 3" content="LINK 3" />

<meta name="color:scrolling image border" contents="" />

<meta name="image:scrolling image 1" contents="" />
<meta name="image:scrolling image 2" contents="" />
<meta name="image:scrolling image 3" contents="" />
<meta name="image:scrolling image 4" contents="" />
<meta name="image:scrolling image 5" contents="" />
<meta name="image:scrolling image 6" contents="" />

<!--SCRIPTS-->

<!--AUDIO PLAYER-->

<script>

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  isPlaying ? myAudio.pause() : myAudio.play();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

</script>

<!--MOVING TITLE-->

<script>

var documentTitle = document.title + "   ";

(function titleMarquee() {
    document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
    setTimeout(titleMarquee, 200);
})();

</script>

<!--LINK ANI-->

<style>

#forward {

display: inline-block;

-webkit-transform: perspective(1px) translateZ(0);

transform: perspective(1px) translateZ(0);

box-shadow: 0 0 1px rgba(0, 0, 0, 0);

-webkit-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-property: transform;

transition-property: transform;

}

#forward:hover, #foward:focus, #forward:active {

-webkit-transform: translateX(8px);

transform: translateX(8px);

}

</style>

<!--EVERYTHING ELSE-->

<style>

::-webkit-scrollbar {

width: 0px;

}

#credit {

position:fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

body {

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

background-size: {select:background size};

background-color: {color:background};

position: relative;

margin-left: auto;

margin-right: auto;

width: 900px;

font-family: {select:font family};

margin-top: 80px;

}

.icon {

position: absolute;

width: 194px;

height: 194px;

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

background-size: cover;

border: 2px outset {color:icon border};

margin-left: 1px;

margin-top: -46px;

}

.container {

width: 890px;

height: 645px;

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

background-color: {color:container background};

border: 4px outset {color:container border};

padding: 10px;

}

.header {

width: 680px;

height: 150px;

margin-left: 207px;

margin-top: -2px;

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

background-position: center;

border: 2px outset {color:header border};

background-size: {select:header size};

}

.sidebar {

width: 200px;

height: 488px;

float: left;

margin-top: 9px;

margin-left: -1px;

display: inline-block;

}

.player {

width: 176px;

height: 10px;

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

background-color: {color:music player background};

border: 2px outset {color:music player border};

margin-bottom: 7px;

padding: 10px;

}

.navigation {

width: 176px;

height: 110px;

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

background-color: {color:navigation background};

border: 2px outset {color:navigation border};

margin-bottom: 7px;

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

padding-left: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-top: 10px;

text-align: left;

line-height: 20px;

overflow: auto;

scrollbar-width: none;

}

.navigation a {

text-decoration: none;

color: {color:navigation font};

}

.extra {

width: 176px;

height: 19px;

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

background-color: {color:extra background};

border: 2px outset {color:extra border};

padding: 10px;

overflow: auto;

scrollbar-width: none;

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

}

.scrolling {

width: 176px;

height: 176px;

margin-top: 9px;

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

background-size: cover;

background-position: center;

background-color: {color:scrolling background};

border: 2px outset {color:scrolling border};

padding: 10px;

}

.body {

width: 680px;

height: 481px;

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

background-size: {select:inner container background size};

background-color: {color:inner container background};

border: 2px inset {color:inner container border};

margin-top: 9px;

margin-left: 6px;

overflow: auto;

scrollbar-width: none;

display: inline-block;

}

.postwrap {

width: 580px;

height: auto;

break-inside: avoid;

column-count: 2;

column-gap: 2px;

display: inline-block;

}

.posts {

width: 250px;

padding: 10px;

height: auto;

break-inside: avoid;

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

background-size: cover;

background-color: {color:posts background};

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

color: {color:posts font};

text-align: justify;

font-size: 12px;

overflow: hidden;

}

.posts a {

color: {color:posts links};

}

.posts img {

max-width: 100%;

height: auto;

}

.npf_row {

margin: 0 !important;

}

.aboveposts {

width: auto;

height: auto;

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

background-size: cover;

background-color: {color:posts top background};

border: 2px inset {color:posts top border};

padding: 3px;

margin-bottom: 10px;

font-size: 14px;

}

.footer {

margin-top: 10px;

}

.tags {

width: auto;

height: auto;

padding: 3px;

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

background-color: {color:tags background};

border: 2px inset {color:tags border};

font-size: 10px;

}

.tags a {

color: {color:tags font};

}

blockquote {

margin-left: 0px;

border-left: 1px dotted #000;

padding-left: 5px;

}

.pagination {

width: 176px;

height: 19px;

margin-top: 8px;

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

background-size: cover;

background-color: {color:pagination background};

border: 2px outset {color:pagination border};

padding: 10px;

overflow: hidden;

}

.pagi {

color: {color:pagination font};

text-align: center;

margin-top: -3px;

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};

}

.pagi a {

color: {color:pagination font};

}

.jump_page {

padding: 4px 2px;

text-align: center;

font-size: 20px;

text-decoration: none;

}

.current_page {

padding: 4px 2px;

text-align: center;

font-size: 20px;

color: {color:pagination current page};

text-decoration: underline;

}

</style>

<body>

<center>

<div class="container">

<div class="icon"></div> <!--ICON CLOSE-->

<div class="header"></div> <!--HEADER CLOSE-->

<div class="body">

<br>

<div class="postwrap">

{block:posts}

<div class="posts">

<div class="aboveposts">

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

</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}

<div class="footer">

{block:hastags}

<div class="tags">

{block:tags}

<a href="{tagurl}">{tag}</a>

{/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-->

<br>

{/block:posts}

</div> <!--POSTWRAP-->

</div> <!--BODY-->

<div class="sidebar">

<div class="player">

<a id="playme" class="playme fa fa-play" data-src="{text:MP3}" onclick="document.getElementById('music').play()" title="{text:play button hover}"

style="

float: right;

margin-top: -2px;

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

text-decoration: none;

color: {color:play button}"></a>

<img src="{image:blinkie}" style="

margin-top: -5px;

margin-right: 10px;">

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<script id="rendered-js">

var clicked_id;
var audio_var = new Audio();


$('.playme').on("click", function () {
  var datasrc = $(this).attr('data-src');
  clicked_id = $(this).attr('id');
  console.log(clicked_id);
  audio_var.pause();

  $('.playme').not(this).each(function () {
    $(this).removeClass('fa-pause');
    $(this).addClass('fa-play');
  });

  if ($(this).hasClass('fa-play')) {
    console.log('play_click');
    audio_var.src = datasrc;
    $(this).removeClass('fa-play');
    $(this).addClass('fa-pause');
    console.log(audio_var);
    audio_var.play();
  } else {
    console.log('pause_click');
    $(this).removeClass('fa-pause');
    $(this).addClass('fa-play');
    console.log(audio_var);
    audio_var.pause();
    //audio_var.src='';
    //audio_var.load();
    console.log(audio_var);
  }

});

audio_var.onended = function () {
  $("#" + clicked_id).removeClass('fa-pause');
  $("#" + clicked_id).addClass('fa-play');
};

</script>

</div> <!--PLAYER CLOSE-->

<div class="navigation">

<div style="padding: 0px; margin-top: -4px;">

<img src="{image:navigation pixel}"> &nbsp;<a href="/" title="{text:refresh title}" id="forward">{text:refresh}</a><br>

<img src="{image:navigation pixel}"> &nbsp;<a href="/ask" title="{text:ask title}" id="forward">{text:ask}</a><br>

<img src="{image:navigation pixel}"> &nbsp;<a href="/archive" title="{text:archive title}" id="forward">{text:archive}</a><br>

<img src="{image:navigation pixel}"> &nbsp;<a href="{text:extra link 1 path}" title="{text:extra link 1 title}" id="forward">{text:extra link 1}</a><br>

<img src="{image:navigation pixel}"> &nbsp;<a href="{text:extra link 2 path}" title="{text:extra link 2 title}" id="forward">{text:extra link 2}</a><br>

<img src="{image:navigation pixel}"> &nbsp;<a href="{text:extra link 3 path}" title="{text:extra link 3 title}" id="forward">{text:extra link 3}</a>

</div> <!--EXTRA STYLE DIV-->

</div> <!--NAVIGATION-->

<div class="extra"><a href="https://www.tumblr.com/{name}" style="color: {color:mobile view font}; text-decoration: none;">MOBILE VIEW</a></div> <!--EXTRA CLOSE-->

<div class="scrolling">

<marquee scrolldelay="120" direction="right" style="margin-bottom: 9px; margin-top: -4px; margin-left: -5px; margin-right: -6px;" onmouseover="this.stop();" onmouseout="this.start();">

<img src="{image:scrolling image 1}" style="height: 180px; border: 3px double {color:scrolling image border}"> &nbsp;

<img src="{image:scrolling image 2}" style="height: 180px; border: 3px double {color:scrolling image border}"> &nbsp;

<img src="{image:scrolling image 3}" style="height: 180px; border: 3px double {color:scrolling image border}"> &nbsp;

<img src="{image:scrolling image 4}" style="height: 180px; border: 3px double {color:scrolling image border}"> &nbsp;

<img src="{image:scrolling image 5}" style="height: 180px; border: 3px double {color:scrolling image border}"> &nbsp;

<img src="{image:scrolling image 6}" style="height: 180px; border: 3px double {color:scrolling image border}">

</marquee>

</div> <!--SCROLLING CLOSE-->

<div class="pagination">

<div class="pagi">

{block:Pagination}

{block:JumpPagination length="5"}

{block:CurrentPage}

<span class="current_page">{PageNumber}</span>

{/block:CurrentPage}

{block:JumpPage}

<a class="jump_page" href="{URL}">{PageNumber}</a>

{/block:JumpPage}

{/block:JumpPagination}

{/block:Pagination}

</div> <!--PAGI CLOSE-->

</div> <!--PAGINATION CLOSE-->

</div> <!--SIDEBAR CLOSE-->

</div> <!--CONTAINER CLOSE-->

</center>

<div id="credit">

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

</div>

</body>

</html>