parent
ae9f20acce
commit
6d38d7b1e9
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -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?
|
||||
*/
|
||||
@ -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{
|
||||
--text: #111;
|
||||
--wireframe: #111;
|
||||
--background: #ff6347;
|
||||
--color1: rgb(105, 105, 255);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
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;
|
||||
color: var(--color1);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.btn{
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
font-size: 36px;
|
||||
font-family: sans-serif;
|
||||
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;
|
||||
border: solid 2px var(--color1);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
padding: 2px 0;
|
||||
}
|
||||
.btn:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#reference {
|
||||
.info{
|
||||
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;
|
||||
}
|
||||
|
||||
.contribution {
|
||||
padding: 16px;
|
||||
padding-bottom: 64px;
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
|
||||
.contribution .title {
|
||||
h2{
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
font-size: 42px;
|
||||
margin-top: 96px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.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 {
|
||||
dt {
|
||||
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;
|
||||
.hemicycle{
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
align-content: stretch;
|
||||
justify-content: right;
|
||||
/* width: 100vw; */
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1{
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content img {
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
height: auto;
|
||||
#partyRef,
|
||||
#seatRef{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#btn-print {
|
||||
display: inline-block;
|
||||
color: var(--text);
|
||||
margin-top: 32px;
|
||||
background: none;
|
||||
border: 1px solid var(--text);
|
||||
padding: 4px 8px;
|
||||
font-size: 1rem;
|
||||
.party{
|
||||
/* border: solid 1px black; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
justify-content: center;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
#btn-print:hover {
|
||||
cursor: pointer;
|
||||
h4{
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
color: currentColor;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: white;
|
||||
.seats{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
margin: 4px 4px;
|
||||
}
|
||||
|
||||
@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;
|
||||
.seat .mic{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 10%;
|
||||
border: solid 3px var(--color1);
|
||||
background-color: white;
|
||||
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;
|
||||
}
|
||||
.label{
|
||||
width: 90px;
|
||||
overflow-wrap: break-word;
|
||||
font-size: 1.5ch;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue