296 lines
12 KiB
Django/Jinja
296 lines
12 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Google tag (gtag.js) -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KYQSVBZSME"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-KYQSVBZSME');
|
|
</script>
|
|
|
|
<title>{{show_name}}</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,700,900">
|
|
<link rel="stylesheet" href="../../fonts/icomoon/style.css">
|
|
|
|
<link rel="stylesheet" href="../../css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../../css/magnific-popup.css">
|
|
<link rel="stylesheet" href="../../css/jquery-ui.css">
|
|
<link rel="stylesheet" href="../../css/owl.carousel.min.css">
|
|
<link rel="stylesheet" href="../../css/owl.theme.default.min.css">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/mediaelementplayer.min.css">
|
|
|
|
<link rel="stylesheet" href="../../css/aos.css">
|
|
|
|
<link rel="stylesheet" href="../../css/style.css">
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="site-wrap">
|
|
|
|
<div class="site-mobile-menu">
|
|
<div class="site-mobile-menu-header">
|
|
<div class="site-mobile-menu-close mt-3">
|
|
<span class="icon-close2 js-menu-toggle"></span>
|
|
</div>
|
|
</div>
|
|
<div class="site-mobile-menu-body"></div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="site-blocks-cover overlay inner-page-cover" style="background-image: url({{episode_image}});" data-aos="fade" data-stellar-background-ratio="0.5">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center text-center">
|
|
<div class="col-md-8" style="background-color: rgba(0,0,0,0.5)" data-aos="fade-up" data-aos-delay="400">
|
|
<h2 class="text-white font-weight-light mb-2 display-4">{{show_name}} | Episode #{{episode_number}} </h2>
|
|
<p class="text-white font-weight-light">Latest Episode: #{{episode_number}} with music from: {{episode_artists}}</p>
|
|
|
|
<!-- <div class="player mb-2"> -->
|
|
<audio id="player2" preload="none" controls style="max-width: 30%">
|
|
<source src="show.mp3" type="audio/mp3">
|
|
</audio>
|
|
<!-- </div> -->
|
|
|
|
|
|
<div class="text-white mb-3">
|
|
<span class="text-white" style="" >
|
|
Produced by Zavod Rizoma, Presented by: {{episode_author}}
|
|
<br> First broadcast: {{episode_date}}
|
|
<br> Total running time: {{episode_duration}}
|
|
</small>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="container site-section"> -->
|
|
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-12">
|
|
<table class="table table-striped">
|
|
<!-- <img src="{{episode_image}}" width="500"/> TODO MAKE THIS PRETTY -->
|
|
<!-- <TD class="c1"><IMG src="favicon.ico"></TD> -->
|
|
<TD class="c0"><b>#</b></TD>
|
|
<TD class="c1"><b>TRACK</b></TD>
|
|
<TD class="c2"><b>ARTIST</b></TD>
|
|
<TD class="c3"><b>ALBUM</b></TD>
|
|
<TD class="c4"><b>YEAR</b></TD>
|
|
<TD class="c5"><b>DURATION</b></TD>
|
|
<TD class="c5"><b>LABEL</b></TD>
|
|
|
|
{% for track in episode_playlist[0:] %}
|
|
<TR>
|
|
|
|
<!-- <TD class="c1"><IMG src="favicon.ico"></TD> -->
|
|
<TD class="c0"><i>{{track[0]}}</i></TD>
|
|
<TD class="c1"><i>{{track[1]}}</i></TD>
|
|
<TD class="c2">{{track[2]}}</TD>
|
|
<TD class="c3">{{track[3]}}</TD>
|
|
<TD class="//c4">{{track[4]}}</TD>
|
|
<TD class="c5">{{track[5]}}</TD>
|
|
<TD class="c5">{{track[6]}}</T>
|
|
|
|
<!-- <Item> -->
|
|
<!-- <p>{{track}}</p> -->
|
|
<!-- </item> -->
|
|
</TR>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<div class="row align-items-center justify-content-center text-center">
|
|
<p><a href="../../index.html" class="btn btn-primary btn-sm py-3 px-4 small">Back to Episode List</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-4">
|
|
<div class="mb-5">
|
|
<h3 class="footer-heading mb-4">About The {{show_name}} Podcast</h3>
|
|
<p>{{about_show}}</p>
|
|
</div>
|
|
|
|
<!-- <div class="mb-5"> -->
|
|
<!-- <h3 class="footer-heading mb-4">Previous Podcast</h3> -->
|
|
<!-- <div class="block-25"> -->
|
|
<!-- <ul class="list-unstyled"> -->
|
|
<!-- <li class="mb-3"> -->
|
|
<!-- <a href="#" class="d-flex"> -->
|
|
<!-- <figure class="image mr-4"> -->
|
|
<!-- <img src="images/img_1.jpg" alt="" class="img-fluid"> -->
|
|
<!-- </figure> -->
|
|
<!-- <div class="text"> -->
|
|
<!-- <h3 class="heading font-weight-light">Lorem ipsum dolor sit amet consectetur elit</h3> -->
|
|
<!-- </div> -->
|
|
<!-- </a> -->
|
|
<!-- </li> -->
|
|
<!-- <li class="mb-3"> -->
|
|
<!-- <a href="#" class="d-flex"> -->
|
|
<!-- <figure class="image mr-4"> -->
|
|
<!-- <img src="images/img_1.jpg" alt="" class="img-fluid"> -->
|
|
<!-- </figure> -->
|
|
<!-- <div class="text"> -->
|
|
<!-- <h3 class="heading font-weight-light">Lorem ipsum dolor sit amet consectetur elit</h3> -->
|
|
<!-- </div> -->
|
|
<!-- </a> -->
|
|
<!-- </li> -->
|
|
<!-- <li class="mb-3"> -->
|
|
<!-- <a href="#" class="d-flex"> -->
|
|
<!-- <figure class="image mr-4"> -->
|
|
<!-- <img src="images/img_1.jpg" alt="" class="img-fluid"> -->
|
|
<!-- </figure> -->
|
|
<!-- <div class="text"> -->
|
|
<!-- <h3 class="heading font-weight-light">Lorem ipsum dolor sit amet consectetur elit</h3> -->
|
|
<!-- </div> -->
|
|
<!-- </a> -->
|
|
<!-- </li> -->
|
|
<!-- </ul> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
|
|
</div>
|
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
|
<div class="row mb-5">
|
|
<div class="col-md-12">
|
|
<h3 class="footer-heading mb-4">Quick Menu</h3>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">News</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6 col-lg-6">
|
|
<ul class="list-unstyled">
|
|
<li><a href="#">About Us</a></li>
|
|
<li><a href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
|
|
<h3 class="footer-heading mb-4">Follow Us on Social Media</h3>
|
|
|
|
We are on most of the social media platforms, please follow us and tell your friends about the podcast!
|
|
|
|
<div>
|
|
<a href="https://www.facebook.com/profile.php?id=61555936138715" class="pl-0 pr-3"><span class="icon-facebook"></span></a>
|
|
<a href="https://twitter.com/uho_podcast" class="pl-3 pr-3"><span class="icon-twitter"></span></a>
|
|
<a href="https://www.instagram.com/uho.podcast" class="pl-3 pr-3"><span class="icon-instagram"></span></a>
|
|
<a href="https://www.youtube.com/@uho.podcast" class="pl-3 pr-3"><span class="icon-youtube"></span></a>
|
|
<a href="https://soundcloud.com/uho-podcast" class="pl-3 pr-3"><span class="icon-soundcloud"></span></a>
|
|
|
|
</div>
|
|
<p></p>
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3 class="footer-heading mb-4">Support us on Patreon</h3>
|
|
|
|
<div>
|
|
<a href="https://www.patreon.com/bePatron?u=116340955">Become a Patreon member! Support the show financially, for as little as 5 euros/dollars/pounds a month </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-lg-4 mb-5 mb-lg-0">
|
|
<div class="mb-5">
|
|
<h3 class="footer-heading mb-4">Subscribe to Podcast RSS Feed</h3>
|
|
<div class="block-16">
|
|
<figure>
|
|
<a href="{{show_url}}/{{show_rss}}">
|
|
<img src="/images/podcast-main.jpeg" alt="podcast" class="img-fluid rounded">
|
|
</a>
|
|
"P", palette=Image.ADAPTIVE, colors=256</figure>
|
|
<a href="{{show_url}}/{{show_rss}}">{{show_url}}/{{show_rss}}</a>
|
|
</div>
|
|
You can also subscribe to our RSS feed via Soundcloud <a href="https://soundcloud.com/uho-podcast" class="pl-3 pr-3"><span class="icon-soundcloud"></span></a> or Youtube <a href="https://www.youtube.com/@uho.podcast" class="pl-3 pr-3"><span class="icon-youtube"></span></a>
|
|
</div>
|
|
|
|
<!-- <div class="mb-5"> -->
|
|
<!-- <h3 class="footer-heading mb-2">Subscribe Newsletter</h3> -->
|
|
|
|
<!-- <form action="#" method="post"> -->
|
|
<!-- <div class="input-group mb-3"> -->
|
|
<!-- <input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2"> -->
|
|
<!-- <div class="input-group-append"> -->
|
|
<!-- <button class="btn btn-primary" type="button" id="button-addon2">Send</button> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
<!-- </form> -->
|
|
|
|
<!-- </div> -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="../../js/jquery-3.3.1.min.js"></script>
|
|
<script src="js/jquery-migrate-3.0.1.min.js"></script>
|
|
<script src="../../js/jquery-ui.js"></script>
|
|
<script src="../../js/popper.min.js"></script>
|
|
<script src="../../js/bootstrap.min.js"></script>
|
|
<script src="../../js/owl.carousel.min.js"></script>
|
|
<script src="../../js/jquery.stellar.min.js"></script>
|
|
<script src="../../js/jquery.countdown.min.js"></script>
|
|
<script src="../../js/jquery.magnific-popup.min.js"></script>
|
|
<script src="../../js/aos.js"></script>
|
|
|
|
<script src="../../js/mediaelement-and-player.min.js"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var mediaElements = document.querySelectorAll('video, audio'), total = mediaElements.length;
|
|
|
|
for (var i = 0; i < total; i++) {
|
|
new MediaElementPlayer(mediaElements[i], {
|
|
pluginPath: 'https://cdn.jsdelivr.net/npm/mediaelement@4.2.7/build/',
|
|
shimScriptAccess: 'always',
|
|
success: function () {
|
|
var target = document.body.querySelectorAll('.player'), targetTotal = target.length;
|
|
for (var j = 0; j < targetTotal; j++) {
|
|
target[j].style.visibility = 'visible';
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script src="../../js/main.js"></script>
|
|
|
|
</body>
|
|
</html>
|