Place to store the code and config used for the next-Iterations live event.
https://iterations.space/live/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
812 lines
21 KiB
812 lines
21 KiB
5 years ago
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name=viewport content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png">
|
||
|
|
<link rel="manifest" href="fav/site.webmanifest">
|
||
|
|
<link rel="mask-icon" href="fav/safari-pinned-tab.svg" color="#5bbad5">
|
||
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
||
|
|
<meta name="theme-color" content="#ffffff">
|
||
|
|
|
||
|
|
<title>next.Iterations</title>
|
||
|
|
|
||
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'unifont';
|
||
|
|
src:
|
||
|
|
url('assets/fonts/unifont.woff') format('woff');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
* { /*remove ugly blue focus ring (breaks navigating using tab key)*/
|
||
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
|
||
|
|
-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
|
||
|
|
outline: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
body{
|
||
|
|
font-family:unifont;
|
||
|
|
}
|
||
|
|
|
||
|
|
path {
|
||
|
|
fill: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
a{
|
||
|
|
text-decoration:none;
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
a{ color: blue;}
|
||
|
|
a:visited{color: blue;}
|
||
|
|
|
||
|
|
.ticket{
|
||
|
|
padding: 7px 3px;
|
||
|
|
transition:all 5s;
|
||
|
|
z-index:5;
|
||
|
|
pointer-events: none;
|
||
|
|
//background:green;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
#marking{
|
||
|
|
width:500px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#divider{
|
||
|
|
border:1px solid black;
|
||
|
|
-webkit-transform:rotate(-80deg);
|
||
|
|
transition:all 5s;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*#divider{
|
||
|
|
border:1px solid black;
|
||
|
|
-webkit-transform:rotate(10deg);
|
||
|
|
transition:all 5s;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
|
||
|
|
#move {
|
||
|
|
top:-15px;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background-color: #000;
|
||
|
|
position : absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* ============= CONTENT ============= */
|
||
|
|
|
||
|
|
#moveMenu{
|
||
|
|
position: relative;
|
||
|
|
top: 0px;
|
||
|
|
left: 25px;
|
||
|
|
width: 200px;
|
||
|
|
height: 50px;
|
||
|
|
font-size: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.againMenu{
|
||
|
|
font-size: 50px;
|
||
|
|
-moz-transform:rotate(2deg);
|
||
|
|
-webkit-transform:rotate(2deg);
|
||
|
|
-o-transform:rotate(2deg);
|
||
|
|
-ms-transform:rotate(2deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
#intro{
|
||
|
|
position:relative;
|
||
|
|
top:-100px;
|
||
|
|
width:40%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#program{
|
||
|
|
display: inline-block;
|
||
|
|
font-weight: bolder;
|
||
|
|
width:50%;
|
||
|
|
color: green; /* For browsers that do not support gradients */
|
||
|
|
background: -webkit-linear-gradient( red 58% , green 50%); /* For Safari 5.1 to 6.0 */
|
||
|
|
background: -o-linear-gradient( red 58% , green 50%); /* For Opera 11.1 to 12.0 */
|
||
|
|
background: -moz-linear-gradient( red 58% , green 50%); /* For Firefox 3.6 to 15 */
|
||
|
|
background: linear-gradient( red 58% , green 50%); /* Likely future */
|
||
|
|
/*background: -webkit-linear-gradient( RosyBrown 58% , Burlywood 50%);
|
||
|
|
background: -o-linear-gradient( RosyBrown 58% , Burlywood 50%);
|
||
|
|
background: -moz-linear-gradient( RosyBrown 58% , Burlywood 50%);
|
||
|
|
background: linear-gradient( Orchid 58% , Burlywood 50%); */
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
#BARchatWrap{
|
||
|
|
position:relative;
|
||
|
|
top:-2250px;
|
||
|
|
left:-30px;
|
||
|
|
float:right;
|
||
|
|
z-index:10;
|
||
|
|
width:40%;
|
||
|
|
}
|
||
|
|
#BARchatWrap iframe{
|
||
|
|
border:0; overflow:hidden;
|
||
|
|
width:100%;
|
||
|
|
height:450px;
|
||
|
|
z-index:10;
|
||
|
|
}
|
||
|
|
#audioStream {
|
||
|
|
top:10px;
|
||
|
|
right:10px;
|
||
|
|
width: 200px;
|
||
|
|
height: 50px;
|
||
|
|
//border-bottom: 2px dashed black;
|
||
|
|
position : fixed;
|
||
|
|
font-size:3.3em;
|
||
|
|
padding:10px;
|
||
|
|
}
|
||
|
|
#audioStream #link{
|
||
|
|
top:0px;
|
||
|
|
right:10px;
|
||
|
|
width: 200px;
|
||
|
|
height: 50px;
|
||
|
|
position : fixed;
|
||
|
|
font-size:10px;
|
||
|
|
padding:10px;
|
||
|
|
}
|
||
|
|
#showHideRadiolink{
|
||
|
|
top:130px;
|
||
|
|
right:10px;
|
||
|
|
width: 200px;
|
||
|
|
height: 50px;
|
||
|
|
position : fixed;
|
||
|
|
font-size:10px;
|
||
|
|
padding:10px;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
#audioButton{
|
||
|
|
cursor:pointer;
|
||
|
|
display:inline-block;
|
||
|
|
width:80%;
|
||
|
|
float:left;
|
||
|
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
||
|
|
-moz-user-select: none; /* Firefox all */
|
||
|
|
-ms-user-select: none; /* IE 10+ */
|
||
|
|
user-select: none; /* Maybe future */
|
||
|
|
}
|
||
|
|
#audioButton:hover{
|
||
|
|
text-decoration:underline;
|
||
|
|
|
||
|
|
}
|
||
|
|
#audioNotAvailable{
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
#volumeButtons{
|
||
|
|
-webkit-user-select: none; /* Chrome all / Safari all */
|
||
|
|
-moz-user-select: none; /* Firefox all */
|
||
|
|
-ms-user-select: none; /* IE 10+ */
|
||
|
|
user-select: none; /* Hopeful future */
|
||
|
|
visibility:hidden;
|
||
|
|
}
|
||
|
|
#volumeButtons span{
|
||
|
|
width:30px;
|
||
|
|
display: inline-block;
|
||
|
|
text-align:center;
|
||
|
|
z-index:10;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
#volumeButtons span:hover{
|
||
|
|
cursor:pointer;
|
||
|
|
color:red;
|
||
|
|
}
|
||
|
|
#volumeButtons span:active{
|
||
|
|
cursor:pointer;
|
||
|
|
background:red;
|
||
|
|
}
|
||
|
|
/* video */
|
||
|
|
#conferenceVideo{
|
||
|
|
position: relative;
|
||
|
|
top:-650px;
|
||
|
|
float: left;
|
||
|
|
width: 70%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
#conferenceVideo video{
|
||
|
|
-webkit-border-radius: 20% 30% 48% 22% / 39% 22% 21% 29%;/*20% 29% 18% 22% / 39% 22% 21% 19%
|
||
|
|
border-radius: 20% 30% 48% 22% / 39% 22% 21% 29%; /*20% 29% 18% 22% / 39% 22% 21% 19% */
|
||
|
|
width:100%;
|
||
|
|
-moz-transition: all 1s;
|
||
|
|
-o-transition: all 1s;
|
||
|
|
-webkit-transition: all 1s;
|
||
|
|
transition: all 1s;
|
||
|
|
}
|
||
|
|
#conferenceVideo video:hover{
|
||
|
|
-webkit-border-radius: 0;/*20% 29% 18% 22% / 39% 22% 21% 19%*/
|
||
|
|
border-radius: 0; /*20% 29% 18% 22% / 39% 22% 21% 19%
|
||
|
|
*/
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* --------------------- */
|
||
|
|
#conferenceVideo img{
|
||
|
|
-webkit-border-radius: 20% 30% 48% 22% / 39% 22% 21% 29%;/*20% 29% 18% 22% / 39% 22% 21% 19%
|
||
|
|
border-radius: 20% 30% 48% 22% / 39% 22% 21% 29%; /*20% 29% 18% 22% / 39% 22% 21% 19% */
|
||
|
|
width:100%;
|
||
|
|
-moz-transition: all 1s;
|
||
|
|
-o-transition: all 1s;
|
||
|
|
-webkit-transition: all 1s;
|
||
|
|
transition: all 1s;
|
||
|
|
}
|
||
|
|
#conferenceVideo img:hover{
|
||
|
|
-webkit-border-radius: 0;/*20% 29% 18% 22% / 39% 22% 21% 19%*/
|
||
|
|
border-radius: 0; /*20% 29% 18% 22% / 39% 22% 21% 19%
|
||
|
|
*/
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#PROGchatWrap{
|
||
|
|
position: relative;
|
||
|
|
top: -1250px;
|
||
|
|
left: -10px;
|
||
|
|
float: right;
|
||
|
|
z-index: 10;
|
||
|
|
width: 33%;
|
||
|
|
background: rgb(255,255,255);
|
||
|
|
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);
|
||
|
|
}
|
||
|
|
#PROGchatWrap iframe{
|
||
|
|
border: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 100%;
|
||
|
|
height: 550px;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
top: -900px;
|
||
|
|
width: 100%;
|
||
|
|
display: table;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.left {
|
||
|
|
display:table-cell;
|
||
|
|
border: 2px solid;
|
||
|
|
}
|
||
|
|
.right {
|
||
|
|
display:table-cell;
|
||
|
|
width:100px;
|
||
|
|
border: 2px solid red;
|
||
|
|
}
|
||
|
|
|
||
|
|
#resources{
|
||
|
|
display:table-cell;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#resourcesContent a{
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
#resources marquee{
|
||
|
|
top: 300px;
|
||
|
|
color: red;
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
#resources2 marquee{
|
||
|
|
top: 300px;
|
||
|
|
color: red;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
#resourcesContent{
|
||
|
|
position: relative;
|
||
|
|
display: table-cell;
|
||
|
|
width: 50%;
|
||
|
|
padding: 10px;
|
||
|
|
bottom: 150px;
|
||
|
|
|
||
|
|
}
|
||
|
|
#publication{
|
||
|
|
display:table-cell;
|
||
|
|
}
|
||
|
|
|
||
|
|
#publication marquee{
|
||
|
|
top: 300px;
|
||
|
|
color: green;
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
#publication2 marquee{
|
||
|
|
top: 300px;
|
||
|
|
color: green;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
#publicationContent{
|
||
|
|
position: relative;
|
||
|
|
display: table-cell;
|
||
|
|
width: 50%;
|
||
|
|
padding: 10px;
|
||
|
|
bottom: 150px;
|
||
|
|
|
||
|
|
}
|
||
|
|
#publicationContent a{
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ============= MOBILE STYLE ============= */
|
||
|
|
@media only screen and (max-width: 968px) {
|
||
|
|
/*
|
||
|
|
[class*="col-"] {
|
||
|
|
width: 90%;
|
||
|
|
padding:20px;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
body{
|
||
|
|
width:100%;
|
||
|
|
overflow-x: hidden;/* doesnt work on mobile safari*/
|
||
|
|
}
|
||
|
|
div#intro{
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
width: 90%;
|
||
|
|
padding: 20px;
|
||
|
|
font-size:20px;
|
||
|
|
}
|
||
|
|
#audioStream{
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
#audioStream #link {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
#showHideRadiolink {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
#program{
|
||
|
|
position: relative;
|
||
|
|
width: 90%;
|
||
|
|
padding: 20px;
|
||
|
|
font-size:20px;
|
||
|
|
}
|
||
|
|
#BARchatWrap{
|
||
|
|
position: relative;
|
||
|
|
width: 80%;
|
||
|
|
left:-40px;
|
||
|
|
padding: 10px;
|
||
|
|
font-size:20px;
|
||
|
|
top:400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#PROGchatWrap{
|
||
|
|
display: none;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
font-size:20px;
|
||
|
|
top:1000;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
#PROGchatWrap:before{
|
||
|
|
content:'PLEASE USE A DIFFERENT SCREEN';
|
||
|
|
}
|
||
|
|
#conference{
|
||
|
|
position: relative;
|
||
|
|
width: 90%;
|
||
|
|
padding: 20px;
|
||
|
|
font-size:20px;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
#conferenceVideo {
|
||
|
|
display: none;
|
||
|
|
position: relative;
|
||
|
|
top: -480px;
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
font-size: 200px;
|
||
|
|
}
|
||
|
|
#conference::before{
|
||
|
|
position: relative;
|
||
|
|
font-size: 50px;
|
||
|
|
width:100%
|
||
|
|
height:100px;
|
||
|
|
background: red;
|
||
|
|
color: white;
|
||
|
|
top:-400px;
|
||
|
|
border: 1px solid red;
|
||
|
|
content: "Inrease your resolution to join the live video stream and PROGchat";
|
||
|
|
}
|
||
|
|
#divider{
|
||
|
|
opacity: 0.4;
|
||
|
|
}
|
||
|
|
#move {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#moveMenu{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.ticket{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.footer{
|
||
|
|
top:400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#program{
|
||
|
|
display: inline-block;
|
||
|
|
font-weight: bolder;
|
||
|
|
width:90%;
|
||
|
|
color: green;
|
||
|
|
background:none ;
|
||
|
|
-webkit-background-clip: none;
|
||
|
|
-webkit-text-fill-color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="marking">
|
||
|
|
<svg viewBox="20 20 425 300">
|
||
|
|
<path id="curve" d="M6,150C49.63,93,105.79,36.65,156.2,47.55,207.89,58.74,213,131.91,264,150c40.67,14.43,108.57-6.91,229-145" />
|
||
|
|
<text x="50">
|
||
|
|
<textPath xlink:href="#curve">
|
||
|
|
next.Iterations
|
||
|
|
</textPath>
|
||
|
|
</text>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div id="move">
|
||
|
|
<div id="moveMenu">navigation</div>
|
||
|
|
<a href="#BARchatWrap">BAR</a>
|
||
|
|
<a href="#program">PROGRAM</a>
|
||
|
|
<a href="#PROGchatFrame">CONFERENCE</a>
|
||
|
|
<a href="#resources">RESOURCES</a>
|
||
|
|
<a href="#publication">PUBLICATION</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="audioStream">
|
||
|
|
<div id="link"><a href="https://stream.p-node.org/cor36.mp3" target="_blank">LISTEN/DOWNLOAD MP3/M3U FILE </a></div>
|
||
|
|
<div id="audioButton">play radio</div>
|
||
|
|
<div id="volumeButtons">
|
||
|
|
<span id="volumeUp">+ </span>
|
||
|
|
<span id="volumeDown">-</span>
|
||
|
|
</div>
|
||
|
|
<audio id="audioStream" src="https://stream.p-node.org/cor36.mp3" type="audio/mp3"></audio>
|
||
|
|
<div id="audioNotAvailable">Sorry, the audiostream is currently offline</div>
|
||
|
|
<div id="showHideRadiolink">[x]SHOW/HIDE RADIO</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id ="divider">play
|
||
|
|
<div id ="divider">bar
|
||
|
|
<div id ="divider"></div>
|
||
|
|
<div id ="divider"></div>
|
||
|
|
<div id ="divider">resources</div>
|
||
|
|
</div>publication
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="intro">WELCOME<br>
|
||
|
|
to the next-Iterations broadcasting area!<br><br>
|
||
|
|
The Iterations book is published! On 17 and 18 may we love to celebrate this by discovering its ins and outs with you. Please find the full programme <a href="#program">here</a> <br><br>
|
||
|
|
|
||
|
|
This moment also marks an occasion to beta test new networking and broadcasting infrastructure for immediate future use. <br><br>
|
||
|
|
|
||
|
|
There are two different chat rooms: <br>
|
||
|
|
<li>In <a href="#BARchatFrame">BARchat</a> we hang out and babble freely.</li>
|
||
|
|
<li>In <a href="#PROGchatFrame">PROGchat</a> we seriously write along the broadcast (not available on mobile).</li>
|
||
|
|
<br><br>
|
||
|
|
Below you'll find a list of links for further reading, including the Collaboration Guidelines, resources repository, etc.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="header">PROGRAM</div>
|
||
|
|
<div id="program"></div>
|
||
|
|
<div class="againMenu">
|
||
|
|
<marquee>
|
||
|
|
MENU:
|
||
|
|
<a href="#BARchatWrap">BAR</a>
|
||
|
|
<a href="#program">PROGRAM</a>
|
||
|
|
<a href="#PROGchatFrame">CONFERENCE</a>
|
||
|
|
<a href="#resources">RESOURCES</a>
|
||
|
|
<a href="#publication">PUBLICATION</a>
|
||
|
|
</marquee>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="BARchatWrap">
|
||
|
|
<iframe id="BARchatFrame" scrolling="no" src=" https://vvvvvvaria.org/kiwi/irc.kiwiirc.com:+6697/?nick=iterator?&channel=#BARchat
|
||
|
|
"></iframe>
|
||
|
|
<div style="text-align:right;"><a href=" https://vvvvvvaria.org/kiwi/irc.kiwiirc.com:+6697/?nick=iterator?&channel=#BARchat
|
||
|
|
" target="_blank">[x]Open chat in new window</a></div>
|
||
|
|
<div style="text-align:right;">if you have trouble connecting to the webchat, use a desktop client to connect to: #BARchat@irc.kiwiirc.com</a></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="conference">
|
||
|
|
<div id="conferenceVideo">
|
||
|
|
<img id="video" src="lastimg.jpg" width="100%"><p>Photo from: </p><a href="https://iterations.space/iterations-5-operating-exploitation/" target="_blank">iterations: 5 Operating Exploitation</a>
|
||
|
|
<!-- <video id="video" muted autoplay controls></video> <!-- muted is required for autoplay to work -->
|
||
|
|
<script>
|
||
|
|
// if(Hls.isSupported()) {
|
||
|
|
// var video = document.getElementById('video');
|
||
|
|
// var hls = new Hls();
|
||
|
|
// hls.loadSource('https://kontakta.modular-t.org:8443/live/hello5.m3u8'); //
|
||
|
|
// hls.attachMedia(video);
|
||
|
|
// hls.on(Hls.Events.MANIFEST_PARSED,function() {
|
||
|
|
// video.play();
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||
|
|
// video.src = 'https://kontakta.modular-t.org:8443/live/hello5.m3u8';
|
||
|
|
// video.addEventListener('canplay',function() {
|
||
|
|
// video.play();
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
<div id="PROGchatWrap">
|
||
|
|
<iframe id="PROGchatFrame" scrolling="no" src="https://vvvvvvaria.org/kiwi/irc.freenode.net/?nick=iterator?&channel=#PROGchat"></iframe>
|
||
|
|
<div style="text-align:right;"><a href="https://vvvvvvaria.org/kiwi/irc.freenode.net/?nick=iterator?&channel=#PROGchat" target="_blank">[x]Open chat in new window</a></div>
|
||
|
|
<div style="text-align:right;">if you have trouble connecting to the webchat, use a desktop client to connect to: #PROGchat@chat.freenode.net</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<div id="resources"><marquee>RESOURCES</marquee></div>
|
||
|
|
<div id="resources2"><marquee>RESOURCES</marquee></div>
|
||
|
|
<div id="resourcesContent">
|
||
|
|
<a href="http://media.constantvzw.org/wefts/123/" target="_blank">Collaboration Guidelines</a>
|
||
|
|
<br><br>
|
||
|
|
<a href="https://iterations.space/underneath-and-on-the-sidelines-sustaining-feminist-infrastructures-using-speculative-fiction/" target="_blank">spideralex's text</a>, English translation [PDF]
|
||
|
|
<p></p>
|
||
|
|
IRC chats urls: <a href="https://vvvvvvaria.org/kiwi/irc.freenode.net/?nick=iterator?&channel=#BARchat" target="_blank"> BARchat</a>,
|
||
|
|
<a hre="https://vvvvvvaria.org/kiwi/irc.freenode.net/?nick=iterator?&channel=#PROGchat" target="_blank">PROGchat</a>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div id="publication"><marquee>PUBLICATION</marquee></div>
|
||
|
|
<div id="publication2"><marquee>PUBLICATION</marquee></div>
|
||
|
|
<div id="publicationContent">
|
||
|
|
<a href="https://iterations.space/files/iterations-publication.pdf" target="_blank" style="border-bottom:1px solid green;padding-bottom:10px;">Publication
|
||
|
|
<br>
|
||
|
|
<img src="https://iterations.space/files/iterations-publication.gif"></a>
|
||
|
|
<br><br>
|
||
|
|
<a href=" https://iterations.space/files/iterations-x-dex.pdf" target="_blank" style="border-bottom:1px solid green;padding-bottom:10px;">x-dex
|
||
|
|
<br>
|
||
|
|
<img src="https://iterations.space/files/iterations-x-dex.gif">
|
||
|
|
|
||
|
|
<!-- static images:
|
||
|
|
https://vvvvvvaria.org/~mb/iterations/iterations-publication-cover.png
|
||
|
|
https://vvvvvvaria.org/~mb/iterations/iterations-x-dex-cover.png -->
|
||
|
|
|
||
|
|
</a>
|
||
|
|
<br><br>
|
||
|
|
More downloads can be found <a href="https://iterations.space/publication/ " target="_blank">here</a>
|
||
|
|
<br><br>
|
||
|
|
Publication's <a href="https://gitlab.constantvzw.org/manetta/iterations-publication" target="_blank">sourcecode</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="againMenu">
|
||
|
|
<marquee>
|
||
|
|
MENU:
|
||
|
|
<a href="#BARchatWrap">BAR</a>
|
||
|
|
<a href="#program">PROGRAM</a>
|
||
|
|
<a href="#PROGchatFrame">CONFERENCE</a>
|
||
|
|
<a href="#resources">RESOURCES</a>
|
||
|
|
<a href="#publication">PUBLICATION</a>
|
||
|
|
</marquee>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
//
|
||
|
|
//var e = $('#marking');
|
||
|
|
// for (var i = 0; i < 5; i++) {
|
||
|
|
//
|
||
|
|
// e.clone().insertAfter(e).css({ WebkitTransform: 'rotate(' + Math.random(10*i) + 'deg)'});
|
||
|
|
// e.css({ WebkitTransform: 'rotate(' + Math.random(10*i) + 'deg)'});
|
||
|
|
// // For Mozilla browser: e.g. Firefox
|
||
|
|
// e.css({ '-moz-transform': 'rotate(' + Math.random(10*i) + 'deg)'});
|
||
|
|
//
|
||
|
|
//
|
||
|
|
// }
|
||
|
|
|
||
|
|
animate_string('audioStream');
|
||
|
|
|
||
|
|
|
||
|
|
function animate_string(id)
|
||
|
|
{
|
||
|
|
var element = document.getElementById(id);
|
||
|
|
var textNode = element.childNodes[0]; // assuming no other children
|
||
|
|
var text = textNode.data;
|
||
|
|
|
||
|
|
setInterval(function ()
|
||
|
|
{
|
||
|
|
text = text[text.length - 1] + text.substring(0, text.length - 1);
|
||
|
|
textNode.data = text;
|
||
|
|
}, 500);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$(document).ready(function(){
|
||
|
|
$("#audioStreamShow").slideUp();
|
||
|
|
|
||
|
|
var ticket="<div class='ticket'><p>next.Iterations</p></div>";
|
||
|
|
var numTickets=10;
|
||
|
|
for(var x=1;x<=numTickets;x++){
|
||
|
|
$(ticket).appendTo(".againMenu");
|
||
|
|
}
|
||
|
|
// get window dimentions
|
||
|
|
var ww = $(window).width();
|
||
|
|
var wh = $(window).height();
|
||
|
|
$(".ticket").each(function(i){
|
||
|
|
var rotationNum=Math.round((Math.random()*360)+1);
|
||
|
|
var rotation="rotate("+rotationNum+"deg)";
|
||
|
|
var posx = Math.round(Math.random() * ww)-20;
|
||
|
|
var posy = Math.round(Math.random() * wh)-20;
|
||
|
|
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//$( "body").mousemove(function( event ) {
|
||
|
|
//
|
||
|
|
// $("#audio").css('top':'event.pageX');
|
||
|
|
// //$( "#log" ).append( "<div>" + msg + "</div>" );
|
||
|
|
//});
|
||
|
|
$("body").click(function(e){
|
||
|
|
var parentOffset = $(this).parent().offset();
|
||
|
|
var relX = e.pageX - parentOffset.left;
|
||
|
|
var relY = e.pageY - parentOffset.top;
|
||
|
|
// console.log ("x: "+relX);
|
||
|
|
// console.log ("y: "+relY);
|
||
|
|
|
||
|
|
$("#move").animate({left: relX, top: relY});
|
||
|
|
|
||
|
|
if(relY < 300 ){
|
||
|
|
|
||
|
|
|
||
|
|
$("#divider").animate({padding: relY, top: relY});
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
//================== CONTENT LOADING ==================
|
||
|
|
|
||
|
|
//================== audio ==================
|
||
|
|
|
||
|
|
//check if audio stream is online
|
||
|
|
$.ajax({
|
||
|
|
url:'https://stream.p-node.org/cor36.mp3',
|
||
|
|
dataType: 'binary',
|
||
|
|
processData: 'false',
|
||
|
|
type:'GET',
|
||
|
|
error: function()
|
||
|
|
{
|
||
|
|
//file not exists
|
||
|
|
console.log('offlline');
|
||
|
|
document.getElementById("audioNotAvailable").style.visibility = "visible";
|
||
|
|
document.getElementById("audioNotAvailable").style.fontSize = "15px";
|
||
|
|
|
||
|
|
document.getElementById("showHideRadiolink").style.visibility = "hidden";
|
||
|
|
document.getElementById("audioButton").style.visibility = "hidden";
|
||
|
|
document.getElementById("link").style.visibility = "hidden";
|
||
|
|
document.getElementById("volumeButtons").style.visibility = "hidden";
|
||
|
|
// #showHideRadiolink #audioButton, #link, #volumeButtons
|
||
|
|
|
||
|
|
},
|
||
|
|
success: function()
|
||
|
|
{
|
||
|
|
//file exists
|
||
|
|
console.log('Audio is online');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
//play stop
|
||
|
|
var playing = false;
|
||
|
|
$( "#audioButton" ).click(function() {
|
||
|
|
|
||
|
|
if (playing == false) {
|
||
|
|
document.getElementsByTagName('audio')[0].play();
|
||
|
|
playing = true;
|
||
|
|
$(this).html("<marquee> playing </marquee>pause");
|
||
|
|
document.getElementById("volumeButtons").style.visibility = "visible";
|
||
|
|
|
||
|
|
} else {
|
||
|
|
document.getElementsByTagName('audio')[0].pause();
|
||
|
|
playing = false;
|
||
|
|
$(this).html("restart sound");
|
||
|
|
document.getElementById("volumeButtons").style.visibility = "hidden";
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// volume buttons
|
||
|
|
$( "#volumeUp" ).click(function() {
|
||
|
|
document.getElementsByTagName('audio')[0].volume+=0.1;
|
||
|
|
});
|
||
|
|
$( "#volumeDown" ).click(function() {
|
||
|
|
document.getElementsByTagName('audio')[0].volume-=0.1;
|
||
|
|
});
|
||
|
|
//show hide player
|
||
|
|
$("#showHideRadiolink").click(function(){
|
||
|
|
$("#audioButton, #link, #audioNotAvailable, #volumeButtons").toggle();
|
||
|
|
$//("#audioButton").toggle();#audioStream #link
|
||
|
|
});
|
||
|
|
|
||
|
|
//================== program ==================
|
||
|
|
|
||
|
|
|
||
|
|
var dataArray = new Array(); //make globally available array for storing the schedule lines
|
||
|
|
var myObj, i, x = "";
|
||
|
|
|
||
|
|
function loadSchedule(){
|
||
|
|
$.get("https://pad.constantvzw.org/p/Iterations_programme/export/txt", function(data){
|
||
|
|
dataArray = data.split("\n"); //add data to array, line by line
|
||
|
|
//parse the pad data
|
||
|
|
for (i in dataArray) {
|
||
|
|
x += "<p id='progLine'>"+ dataArray[i] + "</p>";
|
||
|
|
|
||
|
|
}
|
||
|
|
document.getElementById("program").innerHTML = x;
|
||
|
|
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
loadSchedule(); // This will run on page load, once per page load
|
||
|
|
|
||
|
|
// setInterval(function(){
|
||
|
|
// loadSchedule() // this will run after every 10 seconds
|
||
|
|
// }, 1000);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
setTimeout(function(){ //because program is dynamically loaded, wait 1sec for loading
|
||
|
|
$("p").each(function() {
|
||
|
|
$(this).text( $(this).text() + " ");
|
||
|
|
animate_string('progLine');
|
||
|
|
}); }, 1000);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var marquee = $('#progLine');
|
||
|
|
marquee.each(function() {
|
||
|
|
var mar = $(this),indent = mar.width();
|
||
|
|
mar.marquee = function() {
|
||
|
|
indent--;
|
||
|
|
mar.css('text-indent',indent);
|
||
|
|
if (indent < -1 * mar.children('div.marquee-text').width()) {
|
||
|
|
indent = mar.width();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
mar.data('interval',setInterval(mar.marquee,1000/60));
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//cpu aan een van de audio blokken hangen
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|