more user friendly

master
Angeliki 6 years ago
parent 4425e34d92
commit 71f76a98db

@ -317,17 +317,17 @@
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

@ -102,17 +102,17 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;"> <div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;"> <div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;"> <div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

@ -27,16 +27,13 @@
<!-- (the unfolding/overlayering of) --> <!-- (the unfolding/overlayering of) -->
<!-- draggable --> <!-- draggable menu -->
<div class="draggable scaleable-wrapper" style="top:8%;left:58%;width: 23%;"> <div class="draggable scaleable-wrapper" style="top:8%;left:58%;width: 23%;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%;"></img><div class="tooltip-content-right" style="min-width: 40% !important;" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div> <div class="tooltip-wrap"> <img src="images/carson-list.jpg" style="width: 100%;"></img><div class="tooltip-content-right" style="min-width: 40% !important;" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 10%;"> <div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 10%;">
<h2 style="font-size: 110%;"><a href="podcast1.php" >Podcast1</a></h2> <h2 style="font-size: 110%;"><a href="podcast1.php" >Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast1.txt'; ?> <?php include 'texts/podcast1.txt'; ?>
</div> </div>
@ -50,19 +47,19 @@
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 10%;"> <div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 10%;">
<h2 style="font-size: 110%;"><a href="podcast2.php" >Podcast2</a></h2> <h2 style="font-size: 110%;"><a href="podcast2.php" >Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast2.txt'; ?> <?php include 'texts/podcast2.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 10%;"> <div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 10%;">
<h2 style="font-size: 110%;"><a href="podcast3.php" >Podcast3</a></h2> <h2 style="font-size: 110%;"><a href="podcast3.php" >Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast3.txt'; ?> <?php include 'texts/podcast3.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 10%;"> <div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 10%;">
<h2 style="font-size: 110%;"><a href="podcast4.php" >Podcast4</a></h2> <h2 style="font-size: 110%;"><a href="podcast4.php" >Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast4.txt'; ?> <?php include 'texts/podcast4.txt'; ?>
</div> </div>

@ -25,6 +25,7 @@ $(document).ready(function() {
start: function(event, ui) { $(this).css("z-index", a++); } start: function(event, ui) { $(this).css("z-index", a++); }
}); });
// font size relative to div draggable/resizable size // font size relative to div draggable/resizable size
var $wrapper = $(".scaleable-wrapper"); var $wrapper = $(".scaleable-wrapper");
$wrapper.each(function (d) { $wrapper.each(function (d) {

@ -209,13 +209,13 @@
<!-- draggable youtube links and other --> <!-- draggable youtube links and other -->
<!-- sources --> <!-- sources -->
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div id="show1" class="draggable scaleable-wrapper"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="90%" height="90%" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show2" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div id="show2" class="draggable scaleable-wrapper"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="90%" height="90%" src="https://www.youtube.com/embed/JVpoOdz1AKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show3" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div id="show3" class="draggable scaleable-wrapper"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="90%" height="90%" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="show4" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="93%" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div id="show4" class="draggable scaleable-wrapper"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="90%" height="90%" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- links --> <!-- links -->
@ -275,7 +275,7 @@ $("#katalin").click(function(){
<div class="draggable full-width" style="top: 160%; left:0.2%"> <div class="draggable full-width" style="top: 160%; left:0.2%">
<button id="but">listen</button> <button id="but">listen</button>
First sample of city sounds related to public/private and speech and recordings of descriptions from different people First sample of city sounds related to public/private and speech and recordings of descriptions from different people
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
@ -283,7 +283,7 @@ $("#katalin").click(function(){
</div> </div>
</div> </div>
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<div id="transcriptWrapper" class='sub'> <div id="transcriptWrapper" class='sub'>
@ -302,7 +302,7 @@ $("#katalin").click(function(){
</div></div> </div></div>
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<div id="transcriptWrapper3" class='sub'> <div id="transcriptWrapper3" class='sub'>
@ -324,7 +324,7 @@ $("#katalin").click(function(){
</div></div> </div></div>
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -360,14 +360,14 @@ $("#katalin").click(function(){
<div class="draggable full-width" style="top: 190%; left:0.2%"> <div class="draggable full-width" style="top: 190%; left:0.2%">
<button id="butB">listen</button> <button id="butB">listen</button>
Second sample of city sounds related to public/private and speech and recordings of descriptions from different people Second sample of city sounds related to public/private and speech and recordings of descriptions from different people
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<div>selection of audio recordings collected while wandering around the area of Leeszaal</div> <div>selection of audio recordings collected while wandering around the area of Leeszaal</div>
</div> </div>
</div> </div>
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -395,7 +395,7 @@ $("#katalin").click(function(){
</div> </div>
</div></div> </div></div>
<div class="tooltip-wrap"> <div class="tooltip-wrap no-pink">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
@ -467,17 +467,17 @@ $("#katalin").click(function(){
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 95%; left: 2%;"> <div class="draggable scaleable-wrapper" style="top: 95%; left: 2%;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 105%; left: 2%;"> <div class="draggable scaleable-wrapper" style="top: 105%; left: 2%;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 115%; left: 3%;"> <div class="draggable scaleable-wrapper" style="top: 115%; left: 3%;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 125%; left: 1%;"> <div class="draggable scaleable-wrapper" style="top: 125%; left: 1%;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div>s</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 1%; left: 1%;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 1%; left: 1%;">

@ -9,6 +9,10 @@
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style> <style>
h3 {font-weight: normal !important} h3 {font-weight: normal !important}
a {
text-decoration: none;
color: #A19696;
}
</style> </style>
</head> </head>
@ -55,13 +59,13 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
@ -85,11 +89,14 @@ $files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap no-underline"><audio src='.$num.' controls></audio><div class="tooltip-content-down"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt'; echo '<td><audio src='.$num.' controls></audio>';
echo '<div class="tooltip-wrap" style="left:1%; top:-10px;background-color:transparent !important;"><img src="images/plus-icon.png" width="20px"><div class="tooltip-content-down content-transcription"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt'; echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">'; echo '</div></div></div>';
echo '<div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></td>'; } ?>
</tr></table> </tr></table>
<br> <br>

@ -9,6 +9,10 @@
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style> <style>
h3 {font-weight: normal !important} h3 {font-weight: normal !important}
a {
text-decoration: none;
color: #A19696;
}
</style> </style>
</head> </head>
@ -55,13 +59,13 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

@ -9,6 +9,10 @@
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style> <style>
h3 {font-weight: normal !important} h3 {font-weight: normal !important}
a {
text-decoration: none;
color: #A19696;
}
</style> </style>
</head> </head>
@ -55,13 +59,13 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

@ -9,6 +9,10 @@
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
<style> <style>
h3 {font-weight: normal !important} h3 {font-weight: normal !important}
a {
text-decoration: none;
color: #A19696;
}
</style> </style>
</head> </head>
@ -56,13 +60,13 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 25%; right: 5%"> <div class="draggable scaleable-wrapper" style="top: 25%; right: 5%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 34%; right: 3%"> <div class="draggable scaleable-wrapper" style="top: 34%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 40%; right: 8%"> <div class="draggable scaleable-wrapper" style="top: 40%; right: 8%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

@ -13,12 +13,12 @@ section {
display: block; display: block;
} }
a { a {
/*font-weight: normal;*/ color: black;
text-decoration: none;
color: #A19696;
} }
.active { .active {
color: red; color: red;
font-size: 125% ; font-size: 125% ;
@ -63,6 +63,42 @@ h2 {
} }
h2 a {
text-decoration: none;
color: #A19696;
}
h2 a:hover {
color: red;
}
h2 a:hover .hover-icon {
opacity: 1;
}
li a {
text-decoration: none;
color: #A19696;
}
li a:hover {
color: red;
}
.hover-icon {
transition: .5s ease;
opacity: 0;
position: absolute;
top:20px;
left:-7%;
}
.hover-icon img{
width: 20%;
}
h3 { h3 {
font-size: 95%; font-size: 95%;
text-align: center; text-align: center;
@ -339,7 +375,16 @@ input[type=checkbox]:checked ~ aside {
/*hover of images and transcriptions style*/ /*hover of images and transcriptions style*/
.tooltip-wrap { .tooltip-wrap {
position: relative; position: relative;
text-decoration: underline; background-color: pink;
display: inline;
}
.no-pink {
background-color: white !important;
}
.tooltip-wrap img:hover {
background-color: pink;
} }
.no-underline { .no-underline {
@ -350,9 +395,9 @@ input[type=checkbox]:checked ~ aside {
display: none; display: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 25%; top: 75%;
/*bottom: 100%;*/ /*bottom: 100%;*/
left: 0%; left: 10%;
/*right: 100%;*/ /*right: 100%;*/
padding: 0.2em; padding: 0.2em;
background-color: white; background-color: white;
@ -365,6 +410,12 @@ input[type=checkbox]:checked ~ aside {
font-size: 80%; font-size: 80%;
} }
.content-transcription {
left: -1000% !important;
top: 175% !important;
min-width:5500% !important;
}
.tooltip-wrap .tooltip-content-right { .tooltip-wrap .tooltip-content-right {
display: none; display: none;
position: absolute; position: absolute;
@ -387,7 +438,6 @@ input[type=checkbox]:checked ~ aside {
z-index: 1; z-index: 1;
/*top: 100%;*/ /*top: 100%;*/
bottom: 100%; bottom: 100%;
left: 2%;
/*right: 100%;*/ /*right: 100%;*/
padding: 0.2em; padding: 0.2em;
background-color: rgba(255, 255, 255, 0.93); background-color: rgba(255, 255, 255, 0.93);
@ -543,15 +593,16 @@ input[type=checkbox]:checked ~ aside {
.draggable { .draggable {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: white; background-color: white;
/* border:1px;
border-style:solid;
border-color:black;*/
cursor: all-scroll; cursor: all-scroll;
position: absolute !important; position: absolute !important;
width: 20%; width: 15%;
display: inline; display: inline;
/* transform: scale(20);*/ /* transform: scale(20);*/
/*min-height: 100px;*/ /*min-height: 100px;*/
background-image: url("../images/resize-icon.png");
background-position: 100% 100%;
background-size: 30px 30px;
background-repeat: no-repeat;
} }
.draggable-circle { .draggable-circle {
@ -563,7 +614,7 @@ input[type=checkbox]:checked ~ aside {
display: inline; display: inline;
} }
.draggable p { .draggable-circle p {
text-align: center; text-align: center;
color: #A19696; color: #A19696;
} }
@ -592,7 +643,7 @@ input[type=checkbox]:checked ~ aside {
.ui-resizable-se { .ui-resizable-se {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: pink; /*background: pink;*/
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;

@ -1,4 +1,4 @@
'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational. It includes a set of <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect and difficulties, of a project like that reveals? The website consists of different web-audio implementations</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap" style="display: inline;text-decoration:underline;">workshops<div class="tooltip-content-right" ><div></div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries. 'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational. It includes a set of <div class="tooltip-wrap">podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect and difficulties, of a project like that reveals? The website consists of different web-audio implementations</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap">workshops<div class="tooltip-content-right" ><div></div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries.

@ -1,3 +1,3 @@
This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. The produced material is being included in an audio archive, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">player.<div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div> This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. The produced material is being included in an audio archive, <div class="tooltip-wrap">player.<div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>

@ -1,5 +1,5 @@
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice message. Amplification can happen through repetition and multiplication, through the gathering of multiple individual voices repeating fragments of situations. <p>Maximum duration: 1 min</p> you are invited to <div class="tooltip-wrap">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice message. Amplification can happen through repetition and multiplication, through the gathering of multiple individual voices repeating fragments of situations. <p>Maximum duration: 1 min</p>

@ -1 +1 @@
This is a diary from my first experiments. It includes mostly material from my walks. I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space. This is a diary from my first experiments. It includes mostly material from my walks. I recorded sounds from the West Rotterdam, <div class="tooltip-wrap">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.

@ -61,17 +61,17 @@
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 80%; right: 4%;"> <div class="draggable scaleable-wrapper" style="top: 80%; right: 4%;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 100%; right: 3%;"> <div class="draggable scaleable-wrapper" style="top: 100%; right: 3%;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;"> <div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3<div class="hover-icon"><img src="images/icon-play.png"></div></a></h2>
</div> </div>

Loading…
Cancel
Save