179 lines
8.3 KiB
HTML
179 lines
8.3 KiB
HTML
<html>
|
||
<head>
|
||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||
<meta content="utf-8" http-equiv="encoding">
|
||
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
||
<title>VVVW</title>
|
||
<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>
|
||
<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>
|
||
<script src="static/js/jquery-1.12.4.js"></script>
|
||
<script src="static/js/jquery-ui.js"></script>
|
||
<script src="static/js/d3.v3.min.js"></script>
|
||
<script src="static/js/draggable.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container-fluid p-0">
|
||
<div class="bg">
|
||
<div class="row">
|
||
<!-- background audio -->
|
||
<div class="col-md-9" style="position: static;">
|
||
<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 id="about_colophon">
|
||
<a href="#" >About</a>|<a href="#" >Colophon</a>
|
||
</div>
|
||
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
|
||
</div>
|
||
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- new row should start here -->
|
||
|
||
<!-- map area -->
|
||
<div class="row">
|
||
<div class="col-md-8 offset-md-1">
|
||
<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>
|
||
|
||
<div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">×</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>
|
||
|
||
|
||
<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>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="300" height="150" 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 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>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
|
||
<script src="static/js/d3_map.js"></script>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<p id="legend_title">Map legend</p>
|
||
|
||
<div class="map_legend">
|
||
<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>
|
||
</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>
|
||
|
||
<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>
|
||
|
||
<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();
|
||
}
|
||
}
|
||
xhttp.open("GET", file, true);
|
||
xhttp.send();
|
||
/* Exit the function: */
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
includeHTML();
|
||
</script>
|
||
|
||
<script>
|
||
$("#about").click(function(){
|
||
$("#showabout").fadeIn()
|
||
console.log("around")
|
||
});
|
||
|
||
$("#colophon").click(function(){
|
||
$("#showcolophon").fadeIn()
|
||
console.log("around")
|
||
});
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|