eaiaiaiaoi/index.php

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">


<!-- <link href="styles/app.css" rel="stylesheet" type="text/css">
 -->
  </head>
<body>
  <h4 align="right">This is an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices. Author/Narrator: Angeliki Diakrousi</h4>
<!-- (the unfolding/overlayering of)  -->

<div class="tab">
  <button class="tablinks" style="position: absolute;font-size: 28px;margin-right: 90%; padding: 8px !important; border: none !important; margin-top: 0% !important;" onclick="openCity(event, 'about')">About</button>
</div>
<div id="about" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
  <span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>

  It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational
</div>

<!-- for about -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<div style="top: 10px;">
<a style="font-size: 28px;margin-right: 90%;" href="#" title="It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes a set of podcasts that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational">About</a></div> -->


<!-- menu -->
<!-- <div align="left">
      <div class="tooltip-wrap">
          <p style="font-size: 28px;background-color: lightgrey; margin-right: 90%;width: 150px;">Dive into</p>
          <div class="tooltip-content-down" style="font-size: 28px;min-width: 1800px;">
            <div>
          <li class="list" style="border-top: none !important;">
            <a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>
            
          </li>
          <li class="list">
            <a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>
            
          </li>
          <li class="list">
            <a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
          </li>
          <li class="list">
            <a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
            
          </li>
         <li class="list">
            <a href="player.html" target="_blank">Player <div class="description">ARCHIVE</div></a>
          </li>
          </div>
            </div>
      </div> -->


<div class="tab">
  <button class="tablinks" style="position: absolute;font-size: 28px !important;margin-right: 90%; padding: 8px !important;margin-top: 4% !important;" onclick="openCity(event, 'menu')">Dive Into</button>
</div>
<div id="menu" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">
  <span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>
  <ul>
  <li class="list" style="border-top: none !important;">
            <a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>
            
          </li>
          <li class="list">
            <a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>
            
          </li>
          <li class="list">
            <a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>
          </li>
          <li class="list">
            <a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>
            
          </li>
         <li class="list">
            <a href="player.html" target="_blank">Player <div class="description">AUDIO ARCHIVE</div></a>
          </li></ul></div>
</div>


</section>

<div style="position:absolute; top:20%; left:26%;">
	<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" width="100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
  </div> 
  
<script>
  //This is a naive solution that only handles one tooltip at a time
//You should really move clicked as a data attribute of the element in question
var clicked;
var tooltips = $('a[title]').on('mouseleave focusout mouseover focusin', function(event) {
  if (clicked) {
    event.stopImmediatePropagation();
  }
}).tooltip().click(function() {
  var $this = $(this);
  var isOpen = $this.data('tooltip');
  var method = isOpen ? 'close' : 'open';
  $this.tooltip(method);
  //verbosity for clarity sake, yes you could just use !isOpen or clicked = (method === 'open')
  if (method === 'open') {
    clicked = true;
  } else {
    clicked = false;
  }
  $this.data('tooltip', !isOpen);
});
</script>

<!-- scripts for tab button -->
<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>


</body>

</html>
made index.html 5 years ago			`<html lang="en">`
add dropdown menu and simplified the index 5 years ago			`<head>`
added javascript/record mic audio 5 years ago			`<meta charset="utf-8">`
add dropdown menu and simplified the index 5 years ago			`<meta name="viewport" content="width=device-width, initial-scale=1">`
moved stuff around and renamed main folder 5 years ago			`<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">`
added more styling in hover/tabs/buttons 5 years ago			`<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">`


moved stuff around and renamed main folder 5 years ago			`<!-- <link href="styles/app.css" rel="stylesheet" type="text/css">`
edit html pages focused on web audio players 5 years ago			`-->`
added javascript/record mic audio 5 years ago			`</head>`
edit index 5 years ago			`<body>`
it works! recorder and save in my server 5 years ago			`<h4 align="right">This is an<span style="font-size:50"> audio zine</span> on amplification of female and collective voices. Author/Narrator: Angeliki Diakrousi</h4>`
			`<!-- (the unfolding/overlayering of) -->`
added recorder script tha also uploads the audio files 5 years ago
			`<div class="tab">`
			`<button class="tablinks" style="position: absolute;font-size: 28px;margin-right: 90%; padding: 8px !important; border: none !important; margin-top: 0% !important;" onclick="openCity(event, 'about')">About</button>`
			`</div>`
it works! recorder and save in my server 5 years ago			`<div id="about" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">`
added recorder script tha also uploads the audio files 5 years ago			`<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>`

			It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">a set of podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes?</div></div></div>that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational
			`</div>`

more styling on hover/tabs 5 years ago			`<!-- for about -->`
added recorder script tha also uploads the audio files 5 years ago			`<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>`
more styling on hover/tabs 5 years ago			`<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>`
			`<div style="top: 10px;">`
added recorder script tha also uploads the audio files 5 years ago			<a style="font-size: 28px;margin-right: 90%;" href="#" title="It is a collection of audio recordings coming from meetings I co-organised, internet sources, podcasts and soundwalks. 'Revisiting podcasts' questions the establishment of authoritative/male voices that create exclusive speech platforms, along the assumption that voices have to be rational, authoritative (voice of expertise) etc. The intervention that changes the paradigm becomes a set of podcasts that revisit the sound material produced in situated amplification meetings and soundwalks. Every podcast includes the previous one, on a way that creates repetetive layers of the same material. Creating presence by repetetion.'Revisiting podcasts' are upsetting binaries such as male/female, expert/amateur, rational/irrational">About</a></div> -->
edit tooltip in podcast1 5 years ago
add dropdown menu and simplified the index 5 years ago
added texts and images in player 5 years ago			`<!-- menu -->`
more styling on hover/tabs 5 years ago			`<!-- <div align="left">`
edit tooltip in podcast1 5 years ago			`<div class="tooltip-wrap">`
some more details on player menus 5 years ago			`<p style="font-size: 28px;background-color: lightgrey; margin-right: 90%;width: 150px;">Dive into</p>`
edit tooltip in podcast1 5 years ago			`<div class="tooltip-content-down" style="font-size: 28px;min-width: 1800px;">`
			`<div>`
some more details on player menus 5 years ago			`<li class="list" style="border-top: none !important;">`
			`<a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>`
podcasts in array in podcast1.php 5 years ago
			`</li>`
			`<li class="list">`
some more details on player menus 5 years ago			`<a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>`
edit tooltip in podcast1 5 years ago
			`</li>`
			`<li class="list">`
			`<a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>`
			`</li>`
			`<li class="list">`
			`<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>`

			`</li>`
			`<li class="list">`
			`<a href="player.html" target="_blank">Player <div class="description">ARCHIVE</div></a>`
			`</li>`
			`</div>`
			`</div>`
more styling on hover/tabs 5 years ago			`</div> -->`


			`<div class="tab">`
added recorder script tha also uploads the audio files 5 years ago			`<button class="tablinks" style="position: absolute;font-size: 28px !important;margin-right: 90%; padding: 8px !important;margin-top: 4% !important;" onclick="openCity(event, 'menu')">Dive Into</button>`
more styling on hover/tabs 5 years ago			`</div>`
it works! recorder and save in my server 5 years ago			`<div id="menu" class="tabcontent" style="font-size: 28px !important; left: 5px !important; top: 350px !important; width: 1000px !important;padding: 0px !important;">`
added recorder script tha also uploads the audio files 5 years ago			`<span onclick="this.parentElement.style.display='none'" class="topleft">&times</span>`
more styling on hover/tabs 5 years ago			`<ul>`
			`<li class="list" style="border-top: none !important;">`
			`<a href="podcast1.php" target="_blank">Podcasts <div class="description">AUDIO MOMENTS</div></a>`

			`</li>`
			`<li class="list">`
			`<a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things <div class="description">THESIS</div></a>`

			`</li>`
			`<li class="list">`
			`<a href="amplification.html" target="_blank">Amplification of female voices <div class="description">VOCAL EXERCISES, MEETINGS</div></a>`
			`</li>`
			`<li class="list">`
			`<a href="../Grad_project proposal/1902_describe-soundwalks/West Rotterdam/leeszaal_repetition.html" target="_blank">Diary of West Rotterdam <div class="description">PROCESS, ARCHIVE</div></a>`

			`</li>`
			`<li class="list">`
added recorder script tha also uploads the audio files 5 years ago			`<a href="player.html" target="_blank">Player <div class="description">AUDIO ARCHIVE</div></a>`
more styling on hover/tabs 5 years ago			`</li></ul></div>`
			`</div>`
edit tooltip in podcast1 5 years ago
added more styling in hover/tabs/buttons 5 years ago


added player and other 5 years ago
added recorder script tha also uploads the audio files 5 years ago
added pop up windows in index 5 years ago
add dropdown menu and simplified the index 5 years ago			`</section>`

edit html pages focused on web audio players 5 years ago			`<div style="position:absolute; top:20%; left:26%;">`
it works! recorder and save in my server 5 years ago			`<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="texts/thesis/carson-list.jpg" width="100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>`
edit html pages focused on web audio players 5 years ago			`</div>`

added more styling in hover/tabs/buttons 5 years ago			`<script>`
			`//This is a naive solution that only handles one tooltip at a time`
			`//You should really move clicked as a data attribute of the element in question`
			`var clicked;`
			`var tooltips = $('a[title]').on('mouseleave focusout mouseover focusin', function(event) {`
			`if (clicked) {`
			`event.stopImmediatePropagation();`
			`}`
			`}).tooltip().click(function() {`
			`var $this = $(this);`
			`var isOpen = $this.data('tooltip');`
			`var method = isOpen ? 'close' : 'open';`
			`$this.tooltip(method);`
			`//verbosity for clarity sake, yes you could just use !isOpen or clicked = (method === 'open')`
			`if (method === 'open') {`
			`clicked = true;`
			`} else {`
			`clicked = false;`
			`}`
			`$this.data('tooltip', !isOpen);`
			`});`
			`</script>`
edit thesis and presentation of April 5 years ago
more styling on hover/tabs 5 years ago			`<!-- scripts for tab button -->`
			`<script>`
			`function openCity(evt, cityName) {`
			`var i, tabcontent, tablinks;`
			`tabcontent = document.getElementsByClassName("tabcontent");`
			`for (i = 0; i < tabcontent.length; i++) {`
			`tabcontent[i].style.display = "none";`
			`}`
			`tablinks = document.getElementsByClassName("tablinks");`
			`for (i = 0; i < tablinks.length; i++) {`
			`tablinks[i].className = tablinks[i].className.replace(" active", "");`
			`}`
			`document.getElementById(cityName).style.display = "block";`
			`evt.currentTarget.className += " active";`
			`}`
			`</script>`


edit index 5 years ago			`</body>`
edit proposal 5 years ago
made index.html 5 years ago			`</html>`