2020-11-10 13:45:35 +01:00
< html >
< head >
2020-11-10 14:15:59 +01:00
< meta content = "text/html;charset=utf-8" http-equiv = "Content-Type" >
< meta content = "utf-8" http-equiv = "encoding" >
2020-11-12 13:27:42 +01:00
< meta http-equiv = "Access-Control-Allow-Origin" content = "*" >
2020-11-10 13:45:35 +01:00
< title > VVVW< / title >
2020-11-10 14:15:59 +01:00
< link rel = "stylesheet" href = "static/css/style.css" >
< link rel = "stylesheet" href = "static/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous" >
< script src = "static/js/jquery.min.js" > < / script >
< script type = "text/javascript" src = "static/js/p5/p5.min.js" > < / script >
2020-11-10 19:09:39 +01:00
< script src = "static/js/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" > < / script >
< script src = "static/js/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" > < / script >
< script src = "static/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" > < / script >
2020-11-10 14:15:59 +01:00
< script src = "static/js/jquery-1.12.4.js" > < / script >
< script src = "static/js/jquery-ui.js" > < / script >
2020-11-12 13:27:42 +01:00
< script src = "static/js/d3.v3.min.js" > < / script >
< script src = "static/js/draggable.js" > < / script >
2020-11-10 13:45:35 +01:00
< / head >
< body >
2020-11-10 14:15:59 +01:00
< div class = "container-fluid p-0" >
< div class = "bg" >
< div class = "row" >
2020-11-12 13:27:42 +01:00
<!-- background audio -->
< div class = "col-md-9" style = "position: static;" >
2020-11-10 14:15:59 +01:00
< div class = "row" >
< div class = "col-md-12" >
2020-11-12 13:27:42 +01:00
< 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 >
2020-11-10 13:45:35 +01:00
< / div >
2020-11-12 13:27:42 +01:00
< / div >
2020-12-04 11:42:41 +01:00
< div id = "about_colophon" >
< a href = "#" > About< / a > |< a href = "#" > Colophon< / a >
2020-11-10 14:15:59 +01:00
< / div >
2020-12-04 11:42:36 +01:00
< div id = "showabout" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div > about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf< / div >
2020-11-10 14:15:59 +01:00
< / div >
2020-12-04 11:42:41 +01:00
< div id = "showcolophon" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div > about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf< / div >
< / div >
2020-11-16 15:44:28 +01:00
< / div >
< / div >
<!-- new row should start here -->
2020-11-10 13:45:35 +01:00
2020-11-12 13:27:42 +01:00
<!-- map area -->
2020-11-16 15:44:28 +01:00
< div class = "row" >
2020-12-04 11:42:40 +01:00
< div class = "col-md-10 offset-md-1" >
2020-11-12 13:27:42 +01:00
< div class = "map_area" >
< div w3-include-html = "thesis.html" class = "thesis draggable" id = "showthesis" >
< / div >
<!-- <p>Related media</p> -->
< div class = "draggable" id = "showdadaloglu" > < div class = 'text_audio' > Bio< / 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 > -->
< img src = "static/images/poem.png" >
< / div >
2020-11-10 13:45:35 +01:00
2020-12-04 11:42:36 +01:00
< div class = "draggable" id = "showasikA" > < div class = 'text_audio' > Bio Aşı < / div > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < iframe width = "300" height = "80" id = "videoasikA" src = "https://www.youtube.com/embed/AnsVY_gjJns" frameborder = "0" allowfullscreen = "false" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< div class = "draggable" id = "showasikV" > < div class = 'text_audio' > Bio< / div > < iframe width = "300" height = "150" src = "https://www.youtube.com/embed/5_9PAugYb4s" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< iframe width = "300" height = "150" src = "https://www.youtube.com/embed/t64yH04XWs8" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe >
2020-11-12 13:27:42 +01:00
< / div >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< div class = "draggable" id = "showmuharrem" > < div class = 'text_audio' > < / div > < iframe width = "300" height = "150" src = "https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
2020-11-10 13:45:35 +01:00
2020-12-04 11:42:40 +01:00
< div class = "draggable" id = "shownazim" > < div class = 'text_audio' > < / div > < iframe width = "360" height = "80" src = "https://www.youtube.com/embed/11XRG-cz3lY" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen = "false" > < / iframe > < / div >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< div class = "draggable" id = "showneyzen" > < div class = 'text_audio' > < / div > < iframe width = "300" height = "150" src = "https://www.youtube.com/embed/CD-CEeaLGdk" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< div class = "draggable" id = "showruhisu" > < div class = 'text_audio' > < / div > < iframe width = "300" height = "150" src = "https://www.youtube.com/embed/fKOKxuFyEdg" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
2020-11-10 13:45:35 +01:00
2020-11-30 16:21:26 +01:00
< div class = "draggable" id = "showasu" > < div class = 'text_audio' > < / div > < iframe width = "300" height = "150" src = "https://www.youtube.com/embed/mETzamzufh4" frameborder = "0" allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe > < / div >
2020-11-12 13:27:42 +01:00
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
< script src = "static/js/d3_map.js" > < / script >
2020-11-10 13:45:35 +01:00
< / div >
< / div >
2020-11-12 13:27:42 +01:00
2020-11-10 14:15:59 +01:00
< / div >
< div class = "row" >
2020-11-16 15:44:28 +01:00
< div class = "col-md-6" >
2020-11-12 13:27:42 +01:00
< p id = "legend_title" > Map legend< / p >
< div class = "map_legend" >
2020-11-30 17:20:02 +01:00
< div id = "box1" onclick = "popup_bg(120)" > < / div > < p > Folklore literature< / p >
< div id = "box2" onclick = "popup_bg(300)" > < / div > < p > Islamic Mysticism< / p >
< div id = "box3" onclick = "popup_bg(700)" > < / div > < p > Contemporary poets< / p >
< div id = "box4" onclick = "popup_bg(1000)" > < / div > < p > Contemporary musicians< / p >
2020-11-12 13:27:42 +01:00
< / div >
< / div >
2020-11-10 14:15:59 +01:00
< / 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 >
2020-11-30 17:20:02 +01:00
< script >
function popup_bg(time) {
var box = document.getElementById("audioBG");
if (box.currentTime>0) {
box.currentTime = 0;
}
box.currentTime = time;
box.play();
btn.innerHTML = "(Pause)";
};
< / script >
2020-11-10 14:15:59 +01:00
< script >
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length ; i + + ) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
2020-11-10 13:45:35 +01:00
}
2020-11-10 14:15:59 +01:00
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
2020-11-10 13:45:35 +01:00
}
2020-11-10 14:15:59 +01:00
}
}
2020-11-10 19:09:39 +01:00
includeHTML();
< / script >
2020-12-04 11:42:36 +01:00
< script >
$("#about").click(function(){
$("#showabout").fadeIn()
console.log("around")
});
2020-12-04 11:42:41 +01:00
$("#colophon").click(function(){
$("#showcolophon").fadeIn()
console.log("around")
});
2020-12-04 11:42:36 +01:00
< / script >
2020-11-10 14:15:59 +01:00
< / div >
2020-11-10 13:45:35 +01:00
< / body >
2020-11-10 19:09:39 +01:00
< / html >
