archived #3 and uploaded #04

archive/03/style.css

@@ -0,0 +1,279 @@
+@font-face {
+	font-family: Fengardo;
+	src: url("fonts/fengardoneue_regular-webfont.woff");
+}
+
+@font-face {
+	font-family: Fengardo;
+	src: url("fonts/fengardoneue_black-webfont.woff");
+	font-weight: bold;
+}
+
+:root {
+	--text: #111;
+	--wireframe: #111;
+	--background: #ff6347;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body,
+html {
+	margin: 0;
+	padding: 0;
+	background-color: var(--background);
+	color: var(--text);
+	font-family: Fengardo;
+	font-size: 21px;
+	line-height: 1.6;
+
+	overflow: hidden;
+}
+
+.container {
+	display: flex;
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	overflow: hidden;
+}
+
+.container > * {
+	flex-basis: 50%;
+}
+
+.atlas {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	border-right: solid 1px var(--wireframe);
+}
+
+.info {
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	height: 100px;
+	width: 100%;
+	border-top: solid 1px var(--wireframe);
+}
+
+.libretto {
+	overflow-y: scroll;
+	scroll-behavior: smooth;
+}
+
+.libretto > * {
+	border-bottom: solid 1px var(--wireframe);
+}
+
+.contribution:last-of-type {
+	border-bottom: none;
+}
+
+.atlas svg {
+	padding: 32px;
+	width: 100%;
+	overflow: visible;
+}
+
+.atlas svg #live-path {
+	color: currentColor;
+	stroke-dasharray: 18159;
+	stroke-dashoffset: 18159;
+	animation: dash 300s linear forwards;
+}
+
+@keyframes dash {
+	to {
+		stroke-dashoffset: 0;
+	}
+}
+
+path[data-link] {
+	pointer-events: all;
+	pointer-events: bounding-box;
+}
+
+.moment {
+	text-transform: uppercase;
+}
+
+.cover {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+
+	min-height: 100vh;
+	padding: 32px;
+}
+
+.cover .release {
+	font-style: italic;
+}
+
+.cover .title {
+	font-size: 64px;
+	margin: 64px 0;
+}
+
+.cover .description {
+	max-width: 50ch;
+}
+
+dl {
+	margin-top: 128px;
+}
+
+dt {
+	margin-top: 24px;
+	font-style: italic;
+}
+
+dd {
+	max-width: 60ch;
+	margin: 0;
+}
+
+.index {
+	display: none;
+}
+
+#reference {
+	display: none;
+}
+
+.contribution {
+	padding: 16px;
+	padding-bottom: 64px;
+	border-bottom: 1px solid currentColor;
+}
+
+.contribution .title {
+	margin: 0;
+	margin-top: 0;
+	font-size: 42px;
+}
+
+.contribution .meta {
+	/* font-size: 0.8em; */
+	/* font-weight: bold; */
+	text-transform: uppercase;
+}
+
+.contribution .audio {
+	margin-bottom: 32px;
+}
+
+.contribution .player {
+	border: 1px solid currentColor;
+	outline: none;
+	background: none;
+	padding: 4px 8px;
+	cursor: pointer;
+}
+
+ul,
+ol {
+	margin: 16px 0;
+}
+
+.contribution .description {
+	font-style: italic;
+
+	padding-bottom: 8px;
+}
+
+.contribution .content h3,
+.contribution .content h2 {
+	font-size: 28px;
+	margin: 16px 0;
+}
+
+.contribution .content ol {
+	padding-inline-start: 16px;
+}
+
+.contribution img {
+	width: 100%;
+	height: auto;
+	object-fit: contain;
+}
+
+.content {
+	white-space: pre-line;
+}
+
+.content p,
+.content h2 {
+	margin: 0;
+}
+
+.content img {
+	width: 100%;
+	object-fit: contain;
+	height: auto;
+}
+
+#btn-print {
+	display: inline-block;
+	color: var(--text);
+	margin-top: 32px;
+	background: none;
+	border: 1px solid var(--text);
+	padding: 4px 8px;
+	font-size: 1rem;
+}
+
+#btn-print:hover {
+	cursor: pointer;
+}
+
+a {
+	position: relative;
+	color: currentColor;
+	pointer-events: all;
+}
+
+a:hover {
+	color: white;
+}
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* Necessary to select only SVG <a> elements, and not also HTML's.
+   See warning below */
+
+svg|a:link,
+svg|a:visited {
+	cursor: pointer;
+	color: currentColor;
+	pointer-events: all;
+}
+
+svg|g {
+	pointer-events: all;
+}
+
+@media (max-width: 991.98px) {
+	.container {
+		height: auto;
+		width: 100%;
+		display: block;
+	}
+
+	.libretto {
+		overflow: hidden;
+	}
+
+	.atlas svg {
+		padding: 16px;
+	}
+
+	.info {
+		display: none;
+	}
+}

script.js

@@ -0,0 +1,84 @@
+let source_url = ""
+let partyRef = document.getElementById("partyRef")
+let seatRef = document.querySelector(".seat")
+let hemicycle = document.getElementsByClassName("hemicycle")[0]
+let row = 5
+
+let btn = document.getElementById("info-btn")
+let info = document.getElementById("info")
+
+fetch("https://hub.xpub.nl/soupboat/the-parliament/")
+    .then((response) => response.json()) 
+    .then((data) => {
+        source_url = data.base_url;
+        populateSeats(data.parliament)
+    }); 
+
+function populateSeats(parliament) {
+    for (const group of Object.keys(parliament)){  //gets the parent's keys
+        let party = partyRef.cloneNode(true);
+        let partyName = party.querySelector("h4")
+        party.id = group;
+        
+        partyName.innerHTML = group;
+        for (representative of parliament[group]){
+            let seat = seatRef.cloneNode(true);
+            seat.querySelector(".label").innerHTML = representative.who;
+            seat.id = representative.who;
+            let filename = source_url + group + '/' + representative.filename;
+            let audio = new Audio(filename)
+            audio.addEventListener("canplaythrough", (e) => {
+                console.log(filename);
+                let mic = seat.querySelector(".mic");
+                mic.innerHTML = "Talk";
+                mic.addEventListener("click", () => {
+                    console.log(filename);
+                    if (audio.paused) {
+                        audio.play();
+                        mic.innerHTML="Pause";
+                        mic.style.color ="white";
+                        mic.style.background = "red"
+                    } else {
+                        audio.pause();
+                        mic.innerHTML="Talk"
+                        
+                    }
+                });
+                audio.addEventListener("ended", () => {
+                    audio.pause();
+                    audio.currentTime = 0;
+                    mic.style.background = "white"
+                    mic.style.color ="red";
+                });
+            });
+            party.appendChild(seat);
+        }
+        
+        hemicycle.appendChild(party);
+
+    }
+}
+
+// info
+btn.addEventListener("click", showInfo)
+
+
+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
+ - upload svg
+ - loop through the elements to associate seat to each of them
+ - create label 
+ - rotation? 
+*/

style.css

@@ -1,279 +1,109 @@
-@font-face {
-	font-family: Fengardo;
-	src: url("fonts/fengardoneue_regular-webfont.woff");
-}
-
-@font-face {
-	font-family: Fengardo;
-	src: url("fonts/fengardoneue_black-webfont.woff");
-	font-weight: bold;
-}
 
-:root {
+:root{
-	--text: #111;
+    --color1: rgb(105, 105, 255);
-	--wireframe: #111;
-	--background: #ff6347;
 }
 
 * {
     box-sizing: border-box;
 }
 
-body,
+body, html{
-html {
     margin: 0;
     padding: 0;
-	background-color: var(--background);
+    color: var(--color1);
-	color: var(--text);
+    font-family: sans-serif;
-	font-family: Fengardo;
+}
-	font-size: 21px;
+.btn{
-	line-height: 1.6;
+    position: fixed;
-
+    z-index: 99; 
-	overflow: hidden;
+    top: 16px;
-}
+    left: 16px;
-
+    font-size: 36px;
-.container {
+    font-family: sans-serif;
-	display: flex;
-	width: 100vw;
-	height: 100vh;
-	margin: 0;
-	overflow: hidden;
-}
-
-.container > * {
-	flex-basis: 50%;
-}
-
-.atlas {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	border-right: solid 1px var(--wireframe);
-}
-
-.info {
-	display: flex;
-	justify-content: space-around;
-	align-items: center;
-	height: 100px;
-	width: 100%;
-	border-top: solid 1px var(--wireframe);
-}
-
-.libretto {
-	overflow-y: scroll;
-	scroll-behavior: smooth;
-}
-
-.libretto > * {
-	border-bottom: solid 1px var(--wireframe);
-}
-
-.contribution:last-of-type {
-	border-bottom: none;
-}
-
-.atlas svg {
-	padding: 32px;
-	width: 100%;
-	overflow: visible;
-}
-
-.atlas svg #live-path {
-	color: currentColor;
-	stroke-dasharray: 18159;
-	stroke-dashoffset: 18159;
-	animation: dash 300s linear forwards;
-}
-
-@keyframes dash {
-	to {
-		stroke-dashoffset: 0;
-	}
-}
-
-path[data-link] {
-	pointer-events: all;
-	pointer-events: bounding-box;
-}
-
-.moment {
-	text-transform: uppercase;
-}
-
-.cover {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
     text-align: center;
-
+    border: solid 2px var(--color1);
-	min-height: 100vh;
+    width: 48px;
-	padding: 32px;
+    height: 48px;
-}
+    border-radius: 50%;
-
+    background-color: white;
-.cover .release {
+    padding: 2px 0;
-	font-style: italic;
+}
-}
+.btn:hover{
-
+    cursor: pointer;
-.cover .title {
-	font-size: 64px;
-	margin: 64px 0;
-}
-
-.cover .description {
-	max-width: 50ch;
-}
-
-dl {
-	margin-top: 128px;
-}
-
-dt {
-	margin-top: 24px;
-	font-style: italic;
-}
-
-dd {
-	max-width: 60ch;
-	margin: 0;
 }
-
+.info{
-.index {
     display: none;
+    font-size: 2.5ch;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 50vw;
+    height: 100vh;
+    background-color: white;
+    border: solid 2px var(--color1);
+    overflow: auto;
+    padding-left: 16px;
 }
-
+h2{
-#reference {
-	display: none;
-}
-
-.contribution {
-	padding: 16px;
-	padding-bottom: 64px;
-	border-bottom: 1px solid currentColor;
-}
-
-.contribution .title {
     margin: 0;
-	margin-top: 0;
+    margin-top: 96px;
-	font-size: 42px;
+    font-weight: normal;
 }
 
-.contribution .meta {
+dt {
-	/* font-size: 0.8em; */
-	/* font-weight: bold; */
-	text-transform: uppercase;
-}
-
-.contribution .audio {
-	margin-bottom: 32px;
-}
-
-.contribution .player {
-	border: 1px solid currentColor;
-	outline: none;
-	background: none;
-	padding: 4px 8px;
-	cursor: pointer;
-}
-
-ul,
-ol {
-	margin: 16px 0;
-}
-
-.contribution .description {
     font-style: italic;
-
-	padding-bottom: 8px;
-}
-
-.contribution .content h3,
-.contribution .content h2 {
-	font-size: 28px;
-	margin: 16px 0;
 }
 
-.contribution .content ol {
+.hemicycle{
-	padding-inline-start: 16px;
+    display: flex;
-}
+    flex-flow: column wrap;
-
+    align-content: stretch;
-.contribution img {
+    justify-content: right;
-	width: 100%;
+    /* width: 100vw; */
-	height: auto;
+    margin: 0 auto;
-	object-fit: contain;
+}
-}
+h1{
-
+    font-size: 60px;
-.content {
+    text-align: center;
-	white-space: pre-line;
 }
 
-.content p,
+#partyRef,
-.content h2 {
+#seatRef{
-	margin: 0;
+    display: none;
 }
-
+.party{
-.content img {
+    /* border: solid 1px black; */
-	width: 100%;
+    display: flex;
-	object-fit: contain;
+    flex-direction: row;
-	height: auto;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: center;
+    margin: 8px 0;
 }
 
-#btn-print {
+h4{
-	display: inline-block;
+    width: 160px;
-	color: var(--text);
-	margin-top: 32px;
-	background: none;
-	border: 1px solid var(--text);
-	padding: 4px 8px;
-	font-size: 1rem;
 }
 
-#btn-print:hover {
-	cursor: pointer;
-}
 
-a {
+.seats{
-	position: relative;
+    display: flex;
-	color: currentColor;
+    flex-direction: row;
-	pointer-events: all;
+    align-content: center;
-}
+    margin: 4px 4px;
-
-a:hover {
-	color: white;
 }
 
-@namespace svg url(http://www.w3.org/2000/svg);
+.seat .mic{
-/* Necessary to select only SVG <a> elements, and not also HTML's.
+    width: 80px;
-   See warning below */
+    height: 80px;
-
+    border-radius: 10%;
-svg|a:link,
+    border: solid 3px var(--color1);
-svg|a:visited {
+    background-color: white;
-	cursor: pointer;
     color: currentColor;
-	pointer-events: all;
-}
-
-svg|g {
-	pointer-events: all;
 }
-
+.label{
-@media (max-width: 991.98px) {
+    width: 90px;
-	.container {
+    overflow-wrap: break-word;
-		height: auto;
+    font-size: 1.5ch;
-		width: 100%;
-		display: block;
-	}
-
-	.libretto {
-		overflow: hidden;
-	}
-
-	.atlas svg {
-		padding: 16px;
-	}
-
-	.info {
-		display: none;
-	}
 }