serif

info overlay
3 changed files with 36 additions and 16 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
 </head>
 <body>
    <h1>The Jingle Board Parliament</h1>
-    <div class="btn" id="info-btn" value="hiding">?</div>
+    <div class="btn" id="info-btn" >?</div>
    <div class="info" id="info">
        <h2>SI18 - Weekly Release #4</h2>
        <p>The format of this week's release is a jingle board arranged in the layout of a parliament! Each seat is a button that plays an audio snippet when pressed. There is no linear or predefined outcome but the listener can create a unique parliament conference themselves. Therefore, the meaning of the audio contributions can be changed and recontextualised. The contributions include a range from self-made recordings, movie quotes, excerpts and re-enactments of political speeches, sound effects, audio snippets from well-known videos on the internet and covers of European anthems.</p>
@ -18,6 +18,7 @@
        <dl>
            <dt>Contribution by:</dt>
            <dd>Supisara Burapachaisri, Kimberley Cosmilla, Francesco Luzzana, Miriam Schöb, Mitsa Chaida-Michelakou, Ål Nik (Alexandra Nikolova), Gersande Schellinx, Jian Haake, Emma Prato, Carmen, Erica Gargaglione</dd>
+            <br>
            <dt>Caretakers:</dt>
            <dd>Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou</dd>
        </dl>
--- a/script.js
+++ b/script.js
@ -36,16 +36,19 @@ function populateSeats(parliament) {
                    if (audio.paused) {
                        audio.play();
                        mic.innerHTML="Pause";
-                        mic.style.color ="red";
+                        mic.style.color ="white";
+                        mic.style.background = "red"
                    } else {
                        audio.pause();
                        mic.innerHTML="Talk"
+                        
                    }
                });
                audio.addEventListener("ended", () => {
                    audio.pause();
                    audio.currentTime = 0;
-                    mic.innerHTML = "Talk Again"
+                    mic.style.background = "white"
+                    mic.style.color ="red";
                });
            });
            party.appendChild(seat);
@ -57,17 +60,20 @@ function populateSeats(parliament) {
 }

 // info
-// btn.addEventListener("onclick", showInfo())
+btn.addEventListener("click", showInfo)

-// function showInfo(){
-//     if (btn.value == "hiding"){
-//         btn.innerHTML = "X"
-//         btn.value = "showing"
-//     } else {
-//         btn.innerHTML = "?"
-//         btn.value = "hiding"
-//     }
-// }
+
+function showInfo(){
+    
+    if (info.style.display === "none"){
+        btn.innerHTML = "X";
+        console.log("click");
+        info.style.display = "block";
+    } else {
+        btn.innerHTML = "?";
+        info.style.display = "none";
+    }
+}

 /*
 TODO
--- a/style.css
+++ b/style.css
@ -11,36 +11,48 @@ body, html{
    margin: 0;
    padding: 0;
    color: var(--color1);
+    font-family: sans-serif;
 }
 .btn{
    position: fixed;
-    z-index: 99;
+    z-index: 99; 
    top: 16px;
    left: 16px;
    font-size: 36px;
+    font-family: sans-serif;
    text-align: center;
    border: solid 2px var(--color1);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: white;
+    padding: 2px 0;
+}
+.btn:hover{
+    cursor: pointer;
 }
 .info{
    display: none;
-    font-size: 3ch;
+    font-size: 2.5ch;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
-    width: 40vw;
+    width: 50vw;
    height: 100vh;
    background-color: white;
    border: solid 2px var(--color1);
    overflow: auto;
+    padding-left: 16px;
 }
 h2{
    margin: 0;
    margin-top: 96px;
+    font-weight: normal;
+}
+
+dt {
+    font-style: italic;
 }

 .hemicycle{
@ -93,4 +105,5 @@ h4{
 .label{
    width: 90px;
    overflow-wrap: break-word;
+    font-size: 1.5ch;
 }
Author	SHA1	Message	Date
grgr	ce838c2ce3	serif	2 years ago
grgr	302ff7b1f8	info overlay	2 years ago