COD CLASSIC THEME

<html>

<!--CREDDDITS !!!

https://ps1.tumblr.com/post/616166839615176704/base-code-by-ps1-preview-code-a-simple-sidebar - THE AUDIO FIX THANKS 4 MY LIFE.

-->

<head>

<meta charset="UTF-8">

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

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

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

<!--METAS-->

<meta name="color:background" contents="" />
<meta name="color:container background" contents="" />
<meta name="color:back container background" contents="" />
<meta name="color:container border" contents="" />
<meta name="color:header border" contents="" />
<meta name="color:post background" contents="" />
<meta name="color:post border" contents="" />

<meta name="color:play button" contents="" />
<meta name="color:song details" contents="" />
<meta name="color:navigation" contents="" />
<meta name="color:links" contents="" />
<meta name="color:permalink" contents="" />
<meta name="color:tags" contents="" />
<meta name="color:pagination" contents="" />

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

<meta name="if:repeat background" contents="" />
<meta name="if:cover background" contents="" />

<meta name="if:repeat container background" contents="" />
<meta name="if:cover container background" contents="" />

<meta name="if:repeat post background" contents="" />
<meta name="if:cover post background" contents="" />

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

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

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

<meta name="text:song details" contents="" />
<meta name="text:mp3 link" contents="" />

<meta name="text:home title" contents="" />
<meta name="text:ask title" contents="" />
<meta name="text:archive title" contents="" />
<meta name="text:iv title" contents="" />
<meta name="text:v title" contents="" />

<meta name="text:iv link" contents="" />
<meta name="text:v link" contents="" />

<style>

::-webkit-scrollbar {

  display: none;

}

body {

background-color: {color:background};

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

background-attachment: fixed;

{block:ifrepeatbackground}

background-repeat: repeat;

{/block:ifrepeatbackground}

{block:ifcoverbackground}

background-size: cover;

{/block:ifcoverbackground}

font-family: ms gothic;

}

#credit {

position:fixed;

left:12px;

bottom:6px;

font-size:14px;

}

.center {

max-width: 600px;

margin: auto;

}

.container {

width: 500px;

height: 740px;

padding: 10px;

border: 1px {select:container border} {color:container border};

z-index: 20;

margin-top: 50px;

overflow: hidden;

position: absolute;

background-color: {color:container background};

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

background-attachment: fixed;

{block:ifrepeatcontainerbackground}

background-repeat: repeat;

{/block:ifrepeatcontainerbackground}

{block:ifcovercontainerbackground}

background-size: cover;

{/block:ifcovercontainerbackground}

scrollbar-width: none;

}

.header {

width: 498px;

height: 100px;

border: 1px {select:header border} {color:header border};

margin-bottom: 10px;

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

background-size: cover;

}

.postwrap {

width: 500px;

height: 638px;

overflow: scroll;

scrollbar-width: none;

}

.posts {

padding: 10px;

text-align: justify;

border: 1px {select:post border} {color:post border};

background-color: {color:post background};

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

background-attachment: fixed;

{block:ifrepeatpostbackground}

background-repeat: repeat;

{/block:ifrepeatpostbackground}

{block:ifcoverpostbackground}

background-size: cover;

{/block:ifcoverpostbackground}

scrollbar-width: none;

}

.posts a {

color: {color:links};

}

.pagination {

width: 100px;

height: 20px;

border: 1px {select:container border} {color:container border};

position: absolute;

margin-left: -65px;

margin-top: 125px;

transform: rotate(270deg);

text-align: center;

padding-top: 2px;

padding-bottom: 2px;

padding-left: 5px;

padding-right: 5px;

background-color: {color:container background};

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

background-attachment: fixed;

{block:ifrepeatcontainerbackground}

background-repeat: repeat;

{/block:ifrepeatcontainerbackground}

{block:ifcovercontainerbackground}

background-size: cover;

{/block:ifcovercontainerbackground}

scrollbar-width: none;

}

.pagination a {

color: {color:pagination};

}

.backcontainer {

width: 440px;

height: 340px;

padding: 4px;

border: 1px {select:container border} {color:container border};

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

position: absolute;

margin-left: 99px;

text-align: center;

z-index: 1;

margin-top: 27px;

border-bottom-right-radius: 20%;

scrollbar-width: none;

}

ol {

text-align: justify;

line-height: 25px;

}

/*PS1 FIX*/

.trackback {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 19px;
    height: 19px;
    background-color: #fff;
    padding: 10px;
    opacity: .4;}

.pressplay{
    position: relative;
    width: 25px;
    height: 25px;
    overflow: hidden;
    left: -6px;
    top: -3px;}

.albumpic {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 79px;
    height: 79px;}

.albumpic img {
    width: 100%;
    height: auto;
    border: 1px solid {color:font color};}

.trackinfo {
    width: auto;
    display:inline-block;
    margin-left: 90px;
    min-height: 85px;}

.audiowrapper {
position: relative; display:inline-block;}

</style>

</head>

<body>

<div class="center">

<div class="container">

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

<div class="postwrap">

{block:posts}

<div class="posts">

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Quote}
<div class="quote"><h2 style="margin-top: 2px; margin-bottom: 2px;"><b>"</b> <i>{Quote}</i> <b>"</b></h2></div>
{block:Source}<div class="source">&mdash; {Source}</div><br>{/block:Source}
{/block:Quote}

{block:Link}
<big><a href="{URL}">{Name}</a></big>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}{Label}{/block:Label} {Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Answer}
<span style="float: right;"><b>{Asker}</b></span><br>
<div class="question" style="border-bottom: 1px dotted {color:post border};;"><i>{Question}</i></div><br>
{Answer}
{/block:Answer}

<center>
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{Permalink}"/>{LinkCloseTag}
</center>

{/block:Photo}

<center>
{block:Photoset}
{Photoset-400}</center>

{/block:Photoset}

{block:Video}
{Video-400}

{/block:Video}

{block:AudioPlayer}
<div class="audiowrapper">
{block:AlbumArt}
<div class="albumpic"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="trackback">
<div class="pressplay">
{AudioPlayer}
</div></div>
<div class="trackinfo">
{block:TrackName}{TrackName}{/block:TrackName}<br>
{block:Artist}<b>{Artist}</b>{/block:Artist}<br>
{block:Album}<i>{Album}</i>{/block:Album}<br>
</div></div>
{/block:AudioPlayer}

{block:Date}

{block:PermalinkPage}
{/block:PermalinkPage}

{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}

{/block:Date}
 <br>
<div class="footer">

<div id="permalink" style="text-align: right;">

<a style="text-decoration: none; color:{color:permalink}" href="{Permalink}" title="{TimeAgo}">

{DayOfMonth} {ShortMonth}

</a>

{block:HasTags}

<div class="tags" style="text-align: left;">

{block:Tags}

<a href="{TagUrl}" style="text-decoration: none; color:{color:tags}" title="{Tag}">#{Tag}</a>

{/block:Tags}
</div>

{/block:HasTags}

</div>

</div>

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

<br>

{/block:Posts} <!--POSTS-->

</div> <!--POST WRAP-->

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

<div class="backcontainer">

<!--MUSIC PLAYER-->

<div class="player" style="text-align: left; margin-left: 10px; margin-top: -1px;">

<a id="playme" class="playme fa fa-play" data-src="{text:mp3 link}" style="color:{color:play button}"></a>

<marquee scrolldelay="120" style="width: 410px; float:right; color: {color:song details}">

{text:song details}

</marquee>

</div>

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

<!--MUSIC PLAYER-->

<br>

<span style="float: right; font-size: 12px;">

<a href="/" title="{text:home title}" style="text-decoration: none; color: {color:navigation}">I</a>

<br><br>

<a href="/ask" title="{text:ask title}" style="text-decoration: none; color: {color:navigation}">II</a>

<br><br>

<a href="/archive" title="{text:archive title}" style="text-decoration: none; color: {color:navigation}">III</a>

<br><br>

<a href="/{text:iv link}" title="{text:iv title}" style="text-decoration: none; color: {color:navigation}">IV</a>

<br><br>

<a href="/{text:v link}" title="{text:v title}" style="text-decoration: none; color: {color:navigation}">V</a>

</span>

</div> <!--BACK CONTAINER-->

<div class="pagination">

{block:Pagination}

{block:NextPage}

<a href="{NextPage}" style="float: left; text-decoration: none; color: {color:pagination}">NEXT</a>

{block:PreviousPage}

<a href="{PreviousPage}" style="float: right; text-decoration: none; color: {color:pagination}">PREV</a>

{/block:PreviousPage}

{/block:Pagination}

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

</div> <!--CENTER CLOSE-->

<div id="credit">

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

</div>

</body>

</html>