70 lines
1.8 KiB
Twig
Executable File
70 lines
1.8 KiB
Twig
Executable File
{% extends 'templates/default.php' %}
|
|
|
|
{% block javascripts %}
|
|
<script type="text/javascript" src="/js/modules/music-player.js"></script>
|
|
<script type="text/javascript" src="/js/music.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block title %}Music{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<header id="music-header" class="row">
|
|
<h1>Music</h1>
|
|
</header>
|
|
|
|
<!-- music player -->
|
|
<section class="row">
|
|
<!-- no javascript warning -->
|
|
<noscript class="card">Woah there, lassy! You will need to enable Javascript to use this page!</noscript>
|
|
|
|
<!-- left album stuff -->
|
|
<article class="col-sm-5 col-xs-12">
|
|
<div class="thumbnail shadow-1">
|
|
<img class="image-responsive" src="{{ albums[0].album_art }}" alt="{{ albums[0].title }}">
|
|
<div class="caption">
|
|
<h3>{{ albums[0].title }}</h3>
|
|
{% if albums[0].description %}
|
|
<hr />
|
|
<p>{{ albums[0].description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- right album stuff -->
|
|
<div class="col-sm-7 col-xs-12">
|
|
<article id="music-player-card" class="card">
|
|
<audio id="music-player" controls>
|
|
<source src="{{ albums[0].songs[0].audio_file }}.ogg" type="audio/ogg" />
|
|
<source src="{{ albums[0].songs[0].audio_file }}.mp3" type="audio/mpeg" />
|
|
</audio>
|
|
</article>
|
|
|
|
<article class="card">
|
|
<ul>
|
|
{% for song in album.songs %}
|
|
<li>{{ song.title }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- available albums -->
|
|
<section class="row">
|
|
{% for album in albums %}
|
|
<!-- album details -->
|
|
<div class="col-sm-3 col-xs-6">
|
|
<div class="thumbnail shadow-1">
|
|
<img src="{{ album.album_art }}" alt="{{ album.title }}">
|
|
<div class="caption">
|
|
<h5>{{ album.title }}</h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
{% endblock %}
|