alicestrt 3 years ago
parent
commit
4983a1b710
  1. 21
      wells/index.html
  2. 23
      wells/static/css/style.css
  3. BIN
      wells/static/images/poster1.png
  4. 4
      wells/static/js/d3_map.js

21
wells/index.html

@ -37,7 +37,13 @@
</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">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>about texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div>
</div>
</div>
<!-- new row should start here -->
@ -57,7 +63,8 @@
<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">&times</span><iframe width="300" height="150" id="videoasikA" 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 class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</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>
<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>
@ -154,6 +161,18 @@ function includeHTML() {
includeHTML();
</script>
<script>
$("#about").click(function(){
$("#showabout").fadeIn()
console.log("around")
});
$("#colophon").click(function(){
$("#showcolophon").fadeIn()
console.log("around")
});
</script>
</div>
</body>
</html>

23
wells/static/css/style.css

@ -66,6 +66,7 @@ cursor: pointer;
}
/* Node styling */
.group2 {
@ -313,9 +314,29 @@ h2 {
float: right;
cursor: pointer;
font-size: 100%;
color: red;
color: black;
}
/* about and colophon */
/* #about {
} */
#showabout, #showcolophon {
display: none;
left: 20%;
background-image: url("../images/poster1.png");
word-wrap: break-word;
background-size: 100%;
width: 50%;
height: auto;
border: 1px solid black;
padding: 2%;
}
/*d3 map*/
.link {
stroke: #c46666;

BIN
wells/static/images/poster1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

4
wells/static/js/d3_map.js

@ -162,10 +162,12 @@ function popup(name,time) {
dada.className += " active";
dada.scrollIntoView();
var audio1 = document.getElementById("audioBG");
audio1.currentpopupTime = time;
audio1.currentTime = time;
audio1.play();
};
// <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>
//stop events when clicking somewhere else
$(document).click(function (e) {

Loading…
Cancel
Save