Hybrid Publishing hybrid publication of the project Volitional Volutions of the Volatile Waters
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

95 lines
4.6 KiB

{% extends "base.html" %}
{% block title %}VVVW{% endblock %}
{% block body %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="bg">
<div class="row">
<div class="col-md-7">
<div class="map_area">
<script src="../static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p>Map legend</p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div class="thesis">
{% include 'thesis.html' %}
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div id="showdadaloglu"><div class='text_audio'>Audio for Dadaloglu</div><audio id="audiodadaloglu" controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="../static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
</div>
<!-- scripts for mouse events -->
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
{% endblock %}