<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< title > NARROWCAST< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link href = "https://vjs.zencdn.net/7.10.2/video-js.css" rel = "stylesheet" / >
< link rel = "stylesheet" type = "text/css" media = "all" href = "narrowstyle.css" > < / link >
< / head >
< body >
< div class = "about" > < a href = "https://vvvvvvaria.org/logs/zamopuzo" target = "_blank" > back< span > ↗< / span > < br > ↬ stage < / a > < / div >
< div id = "side" class = "sidebar sidemin" >
< button class = "minimize" onclick = "fside()" > ⇔< / button >
< div class = "sidetop" >
<!-- to add a new event copy paste above — as the ones below. -->
<!-- once the event is over remember to move to the sidebottom section -->
< p > 2021.03.23: < a href = "http://varia.zone/en/usercond01.html" target = "_blank" > User Condition S01E01< / a > < / p >
< / div >
< div class = "middle" >
< p > ⇈ Will be awesome ⇈< / p >
< p id = "livetitle" > LIVE ↝ N↻W ⇶ < / p >
< p id = "livesubtitle" > < / p >
< p > ⇊ Was amazing ↷ < / p >
< / div >
< div class = "sidebottom" >
< p > 2021.03.13: < a href = "https://varia.zone/en/fhm-servers-migrations.html" target = "_blank" > FHM #1 Feminist Hack Meetings: Feminist Servers< / a > < / p >
< p > 2021.02.28: < a href = "https://varia.zone/en/rr-wireless-imagination-2.html" target = "_blank" > Read & Repair: Wireless Imagination< / a > < / p >
< p > 2020.06.27: < a href = "https://varia.zone/en/corporeal-whispers.html" target = "_blank" > RE#SISTER: Corporeal Whispers< / a > < / p >
< p > 2020.06.19: < a href = "https://varia.zone/en/Groeten_Charlois.html" target = "_blank" > Niek Hilkmann - Groeten uit Charlois< / a > < / p >
< p > 2020.04.18: < a href = "https://varia.zone/en/we-hope-this-email.html" target = "_blank" > We hope this email finds you well< / a > < / p >
< p > 2020.03.14:< a href = "https://varia.zone/en/radio-on-radio.html" target = "_blank" > Radio on the Radio< / a > < / p >
< / div >
< / div >
< div class = "live live-flex" >
<!-- essay frame -->
< div class = "essay" >
< iframe src = "https://theusercondition.computer/" > < / iframe > < br > ↬
< a class = "windowlinks" href = "https://theusercondition.computer/" target = "_blank" > theusercondition.computer< / a >
< / div >
<!-- CHAT INTERFACE -->
< div class = "chat" >
< iframe src = "https://chat.vvvvvvaria.org/" > < / iframe > < br > ↬
< a class = "windowlinks" href = "https://chat.vvvvvvaria.org/" target = "_blank" > chat.vvvvvvaria.org< / a >
< / div >
<!-- AUDIO STREAM -->
< audio controls loop = "" class = "audio" src = "http://w-i-t-m.net:8001/meander" type = "audio/mp3" > < / audio >
<!-- lil face -->
< div class = "lil-face loading" style = "position: absolute ;
bottom: 50px;
right: 38px;">
< a href = "https://silviolorusso.com" >
< img src = "https://i.ytimg.com/vi/AsFBRdkFKx8/mqdefault.jpg" style = "width: 100px; border-radius: 25px; box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;" / >
< / a >
< / div >
<!-- TO ACTIVATE A BELOW SECTION FOR YOUR EVENT -->
<!-- REMOVE THE UNCOMMENT " < ! - - " and " - - > " SIGNS -->
<!-- AND ADD THE APPROPRIATE URLS -->
<!-- EXAMPLE JITSI or similar -->
<!--
< iframe class = "resize-drag" src = "https://meet.jit.si/varia.broadcats" allow = "camera; microphone" width = "640" height = "480" frameborder = "0" webkitallowfullscreen = "true" mozallowfullscreen = "true" allowfullscreen >
< / iframe >
-->
<!-- EXAMPLE VIDEO FILE -->
<!--
< video class = "resize-drag" autoplay = "" loop = "" >
< source src = "https://ia600703.us.archive.org/3/items/vjmorph_pack1/BWdotSphereAVS01_1_640_512kb.mp4"
type="video/mp4">
< / video >
-->
<!-- <div class="fullscreen" style="margin: 0% 0% 2% 0%;">
< video
id="player"
class="video-js vjs-default-skin"
controls
preload="none"
>
< source
src="https://video.vvvvvvaria.org/test.m3u8"
type="application/x-mpegURL"
/>
< / video > < br >
< a class = "windowlinks" href = "https://bbb.constantvzw.org/b/ang-twu-g0m-hib" target = "_blank" > if you want to join the call click here to access direct link of the BBB!< / a >
< / div > -->
<!-- EXAMPLE ETHERPAD -->
<!-- <div class="halfscreen">
< iframe src = "https://pad.vvvvvvaria.org/fhm#1.notes" > < / iframe > < br > ↝
< a class = "windowlinks" href = "https://pad.vvvvvvaria.org/fhm#1.notes" target = "_blank" > pad.vvvvvvaria.org/fhm#1.notes< / a >
< / div > -->
< p class = "note" > < u > Note< / u > : this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly *< / p >
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
< / div >
<!-- button to hide side pannel -->
< script type = "text/javascript" >
function fside() {
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
}
< / script >
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn - streamlined -->
< script src = "interact.min.js" > < / script >
<!-- script above same as <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> -->
<!-- also found this other options:
https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP -->
< script >
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener
})
.resizable({
preserveAspectRatio: true,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = event.rect.width + '×' + event.rect.height;
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
< / script >
< script src = "https://vjs.zencdn.net/7.10.2/video.min.js" > < / script >
< script >
var player = videojs("#player");
< / script >
< / body >
< / html >
