alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added play icon on legend and cganhed its position

Browse Source
This commit is contained in:
nglk 2020-12-17 14:18:09 +01:00
parent 4fb232708b
commit 63d24c5beb
2 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -6,6 +6,8 @@
<title>VVVW</title> <title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
<link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- <link rel="stylesheet" href="static/css/font-awesome/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <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 src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script> <script type="text/javascript" src="static/js/p5/p5.min.js"></script>
@ -38,9 +40,15 @@
Your browser does not support the audio tag. Your browser does not support the audio tag.
</audio> </audio>
</div> </div>
</div> <div class="map_legend">
<div id="box1" onclick="popup_bg(120,group1)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(300,group2)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(500,group3)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700,group4)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
</div> </div>
</div>
</div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="row"> <div class="row">
@ -111,16 +119,6 @@ Technical details: We have built the visualization from scratch using a javascri
</div>
<div class="row">
<div class="col-md-6">
<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(500)"></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
</div>
</div>
</div> </div>
</div> </div>
@ -141,7 +139,7 @@ Technical details: We have built the visualization from scratch using a javascri
</script> </script>
<script> <script>
function popup_bg(time) { function popup_bg(time,group) {
var box = document.getElementById("audioBG"); var box = document.getElementById("audioBG");
// if (box.currentTime>0) { // if (box.currentTime>0) {
// box.currentTime = 0; // box.currentTime = 0;

19
static/css/style.css
View File

@ -146,7 +146,7 @@ a {
margin-left : 10px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
background-color: #d81159; color: #d81159;
} }
#box2 { #box2 {
@ -154,7 +154,7 @@ a {
width: 15px; width: 15px;
margin-left : 10px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
background-color: #ffbc42; color: #ffbc42;
display: inline-block; display: inline-block;
} }
@ -164,7 +164,7 @@ a {
width: 15px; width: 15px;
margin-left : 10px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
background-color: #218380; color: #218380;
display: inline-block; display: inline-block;
} }
@ -175,7 +175,7 @@ a {
margin-left : 10px; margin-left : 10px;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
background-color: #73d2de; color: #73d2de;
} }
#box1:hover { #box1:hover {
@ -287,7 +287,8 @@ h2 {
font-size: .8em; font-size: .8em;
font-weight: bold; font-weight: bold;
font-family:'Walter Turncoat', cursive; font-family:'Walter Turncoat', cursive;
color: #AEB10A; /* color: #AEB10A; */
color: #d81159;
cursor: pointer; cursor: pointer;
} }
@ -417,22 +418,22 @@ h2 {
/* about and colophon */ /* about and colophon */
#about, #colophon, #how { #about, #colophon, #how {
font-family:'Walter Turncoat', cursive; font-family:'Walter Turncoat', cursive;
color: #AEB10A; color: #d81159;
} }
#about a { #about a {
text-decoration: none; text-decoration: none;
color: #AEB10A; color: #d81159;
} }
#colophon a { #colophon a {
text-decoration: none; text-decoration: none;
color: #AEB10A; color: #d81159;
} }
#how a { #how a {
text-decoration: none; text-decoration: none;
color: #AEB10A; color: #d81159;
} }
#showabout, #showcolophon, #showhow { #showabout, #showcolophon, #showhow {