test pushino

master
grgr 3 years ago
parent b0920162fa
commit f67bbbf857

@ -9,7 +9,20 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>The Jingle-board Parliament</h1> <h1>The Jingle Board Parliament</h1>
<div class="btn" id="info-btn" value="hiding">?</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>
<p>Our take on this idea of the parliament is rooted in the influence that elements of pop-culture have on politics, and more precisely on shaping the characters and the voices that then inhabit a parliament. While much of the politics happens outside of official institutional buildings, yet the idea of the parliament remains a pure symbol of the place in which democracy is being performed. Let's renew the voices that are usually heard in political discourses!</p>
<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>
<dt>Caretakers:</dt>
<dd>Erica Gargaglione, Miriam Schöb, Mitsa Chaida-Michelakou</dd>
</dl>
</div>
<div class="hemicycle"> <div class="hemicycle">
<div class="party"id="partyRef"> <div class="party"id="partyRef">
<h4 id="partyName"></h4> <h4 id="partyName"></h4>

@ -4,7 +4,8 @@ let seatRef = document.querySelector(".seat")
let hemicycle = document.getElementsByClassName("hemicycle")[0] let hemicycle = document.getElementsByClassName("hemicycle")[0]
let row = 5 let row = 5
let btn = document.getElementById("info-btn")
let info = document.getElementById("info")
fetch("https://hub.xpub.nl/soupboat/the-parliament/") fetch("https://hub.xpub.nl/soupboat/the-parliament/")
.then((response) => response.json()) .then((response) => response.json())
@ -55,8 +56,18 @@ function populateSeats(parliament) {
} }
} }
// info
// btn.addEventListener("onclick", showInfo())
// function showInfo(){
// if (btn.value == "hiding"){
// btn.innerHTML = "X"
// btn.value = "showing"
// } else {
// btn.innerHTML = "?"
// btn.value = "hiding"
// }
// }
/* /*
TODO TODO

@ -12,6 +12,36 @@ body, html{
padding: 0; padding: 0;
color: var(--color1); color: var(--color1);
} }
.btn{
position: fixed;
z-index: 99;
top: 16px;
left: 16px;
font-size: 36px;
text-align: center;
border: solid 2px var(--color1);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: white;
}
.info{
display: none;
font-size: 3ch;
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 40vw;
height: 100vh;
background-color: white;
border: solid 2px var(--color1);
overflow: auto;
}
h2{
margin: 0;
margin-top: 96px;
}
.hemicycle{ .hemicycle{
display: flex; display: flex;

Loading…
Cancel
Save