then/iterations-live-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
bc856e99b8
iterations-live-website/website/index.html

812 lines
21 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink