uho/html/templates/homepage.jinja

368 lines
16 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" style="background-image: url(episode/{{episode_number}}/{{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-12" style="background-color: rgba(0,0,0, 0.7)" data-aos="fade-up" data-aos-delay="400">
<h2 class="tex font-weight-light mb-2 display-4" style="margin:0; padding-bottom:0; margin-bottom:0">The Podcast {{show_name}}!</h2>
<p class="tex font-weight-light mb-2 display-4">The best alternative music from Slovenia, every week.</p>
<p class="text-white font-weight-light" >Latest Episode: #{{episode_number}} with music from: {{episode_artists}}</p>
<p><a href="episode/{{episode_number}}/index.html" class="btn btn-primary btn-sm py-3 px-4 small">Episode #{{episode_number}} Details and Player</a></p>
<div class="text-white mb-4"><span class="text-white">Produced by Zavod Rizoma and Presented by: {{episode_author}} {{episode_date}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="site-section bg-light">
<div class="container">
<div class="row mb-5" data-aos="fade-up">
<div class="col-md-12 text-center">
<h2 class="font-weight-bold text-black">Previous Episodes</h2>
</div>
</div>
{% for episode in episodes %}
<div class="d-block d-md-flex podcast-entry bg-white mb-5" data-aos="fade-up">
<div class="image" style="background-image: url('episode/{{episode.episode_number}}/{{episode_image}}');"></div>
<div class="text">
<h3 class="font-weight-light"><a href="episode/{{episode.episode_number}}/index.html">Episode: # {{episode.episode_number}} </a></h3>
<div class="text-white mb-3"><span class="text-black-opacity-05">
<small>Presented by Rob Canning <span class="sep">/</span> {{episode.episode_date}} <span class="sep">/</span> {{episode.episode_duration}}</small></span></div>
<p class="mb-4"><b>On this weeks show music from: {{episode.episode_artists}} </b> </p>
</div>
</div>
{% endfor %}
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-md-12 text-center">
<div class="site-block-27">
<ul>
<li><a href="#">&lt;</a></li>
<li class="active"><span>1</span></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&gt;</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="site-section">
</div>
<!-- <div class="site-section"> -->
<!-- <div class="container" data-aos="fade-up"> -->
<!-- <div class="row mb-5"> -->
<!-- <div class="col-md-12 text-center"> -->
<!-- <h2 class="font-weight-bold text-black">Behind The Mic</h2> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="row"> -->
<!-- <div class="col-md-6 col-lg-4 mb-5 mb-lg-5"> -->
<!-- <div class="team-member"> -->
<!-- <img src="images/rob_canning.jpeg" alt="Image" class="img-fluid"> -->
<!-- <div class="text"> -->
<!-- <h2 class="mb-2 font-weight-light h4">Rob Canning</h2> -->
<!-- <span class="d-block mb-2 text-white-opacity-05">Creative Director</span> -->
<!-- <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit ullam reprehenderit nemo.</p> -->
<!-- <p> -->
<!-- <a href="#" class="text-white p-2"><span class="icon-facebook"></span></a> -->
<!-- <a href="#" class="text-white p-2"><span class="icon-twitter"></span></a> -->
<!-- <a href="#" class="text-white p-2"><span class="icon-linkedin"></span></a> -->
<!-- </p> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="site-section bg-light block-13"> -->
<!-- <div class="container"> -->
<!-- <div class="row mb-5"> -->
<!-- <div class="col-md-12 text-center"> -->
<!-- <h2 class="font-weight-bold text-black">Featured Labels</h2> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="nonloop-block-13 owl-carousel"> -->
<!-- <div class="text-center p-6 p-md-5 bg-white"> -->
<!-- <div class="mb-4"> -->
<!-- <img src="images/label_logos/kamizdat.png" alt="Image" class="w-50 mx-auto img-fluid rounded-circle"> -->
<!-- </div> -->
<!-- <div class=""> -->
<!-- <h3 class="font-weight-light h5">Kamizdat</h3> -->
<!-- <\!-- <p>Kamizdat is a Slovene free-form boutique netlabel for Creative Commons music by local artists exploring a wide range of genres often packaged in locally-made and unique hand-numbered limited editions.</p> -\-> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="text-center p-6 p-md-5 bg-white"> -->
<!-- <div class="mb-4"> -->
<!-- <img src="images/label_logos/sploh.jpeg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle"> -->
<!-- </div> -->
<!-- <div class=""> -->
<!-- <h3 class="font-weight-light h5">Zavod Sploh</h3> -->
<!-- <\!-- <p>Sploh (Sound, Performing, Listening, Observing, Hearing) for art production and publishing is engaged in music, performing arts and intermedia arts production, publishing and education. Primarily it is oriented towards developing, staging, establishing and reflecting musical practices that dip a toe in the waters of: improvisation, contemporary composition, and sound/tech experiments. s</p> -\-> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="text-center p-6 p-md-5 bg-white"> -->
<!-- <div class="mb-4"> -->
<!-- <img src="images/label_logos/terraformer.jpeg" alt="Image" class="w-50 mx-auto img-fluid rounded-circle"> -->
<!-- </div> -->
<!-- <div class=""> -->
<!-- <h3 class="font-weight-light h5">Terraformer Research Facilities</h3> -->
<!-- <\!-- <p>Terraformer Research Facilities Label for experimental, drone, ambient, noise improvised music. Velenje, Slovenia.</p> -\-> -->
<!-- </div> -->
<!-- </div> -->
<!-- <div class="text-center p-6 p-md-5 bg-white"> -->
<!-- <div class="mb-4"> -->
<!-- <img src="images/label_logos/PF.png" alt="Image" class="w-50 mx-auto img-fluid rounded-circle"> -->
<!-- </div> -->
<!-- <div class=""> -->
<!-- <h3 class="font-weight-light h5">Pharmafabrik Records</h3> -->
<!-- <\!-- <p>Delivers rare but comprehensive records of experimental, drone, ambient, electronic, and electro-acoustic music.</p> -\-> -->
<!-- </div> -->
<!-- </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 Podcast {{show_name}}</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>
</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>
</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>