varia
/
web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity
This is repo hosts experiments for the broadcast (aka narrowcast) webpage at Varia.zone
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.
335 Commits
1 Branch
0 Tags
56 MiB
Tree: 5e18205f6c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5e18205f6c'
${ noResults }
web-narrowcast/index-default.html

289 lines
14 KiB
Raw Normal View History

usercond 04
3 years ago
<!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" /> -->
<!-- OUR STYLES -->
<link rel="stylesheet" type="text/css" media="all" href="narrowstyle.css"></link>
<link rel="stylesheet" type="text/css" media="all" href="narrowstyle-extra.css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
<!-- OUR SCRIPTS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="narrowscripts.js"></script>
<script type="text/javascript" src="narrowskin.js"></script>
</head>
<body>
<div class="linkmore">
cleaning narrowcast
3 years ago
<a href="https://vvvvvvaria.org/logs/zamopuzo" target="_blank">back ↗ stage </a>
<br>
usercond 04
3 years ago
<a href="https://stream.vvvvvvaria.org/about.html"> about ↯ over ↻ </a>
</div>
cleaning up
2 years ago
usercond 04
3 years ago
<div id="side" class="sidebar sidemin">
cleaning narrowcast
3 years ago
<button class="minimize" onclick="fside()">⇆</button>
<div class="sidetop">
<!-- ADD A FUTURE EVENT HERE -->
<!-- once the event is over remember to move to the sidebottom section -->
<!-- if no event is left please add this placeholder: <p>more TBA soon! <a href="https://varia.zone/en" target="_blank" > &#128064; </a> <br> meer TBA binnenkort! -->
cleaning up
2 years ago
<!-- <p>more TBA soon! <a href="https://varia.zone/en" target="_blank" > &#128064; </a> <br> meer TBA binnenkort! </p> -->
cleaning narrowcast
3 years ago
</div>
<div class="middle">
cleaning up
2 years ago
<!-- <p>⇈ Soon<br>⇈ Binnenkort</p> -->
<!-- <p id="livetitle">LIVE NOW ⇶ </p> -->
<!-- <p><br>MONTH XX, XXXX<br>(time): <a href="XXX" target="_blank"><span id="livetitle">XXX</span></a><br><br></p> -->
cleaning narrowcast
3 years ago
<!-- ADD A CURRENT LIVE EVENT HERE -->
cleaning up
2 years ago
<p>⇊ Previous broadcasts<br>⇊ Vorige uitzendingen </p>
<p> <a href="https://vvvvvvaria.org/archive/">Archive ↩</a></p>
cleaning narrowcast
3 years ago
</div>
<div class="sidebottom">
cleaning up
2 years ago
<p><br>October 5th, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank"><span id="">Publishing Partyline, Broadcast #3: web-to-print in education, with Julien Bidoret & Quentin Juhel</span></a><br><br></p>
<p>September 29th-30th, Sonic Liberation Front, Women Life Freedom<a href="https://cloud.disroot.org/apps/files_sharing/publicpreview/wFzqNR8yrHidif3?x=1080&y=1125&a=true&file=IMG_20220929_142643_959.jpg&scalingup=0" target="_blank"></a></p>
<p>September 21st, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank">Publishing Partyline, Broadcast #2: dependency relations in the ecosystem, with Paged.js</a></p>
<p>September 7th, 2022<br>18:00-19:00 (CEST): <a href="https://varia.zone/en/publishing-partyline.html" target="_blank">Publishing Partyline, Broadcast #1: standards and work arounds, with Open Source Publishing (OSP)</a></p>
<p>23 maart / March '22: A Transversal Network of Feminist Servers (<a href="https://varia.zone/atnofs-varia.html" target="_blank">een radio uitzending</a> / <a href="https://varia.zone/en/atnofs-varia.html" target="_blank">a radio broadcast</a>)</a></p>
<p>18 December '21: <a href="http://varia.zone/en/usercond04.html" target="_blank">The User Condition #04 - "Losing Your Data is Good for You" - with Dave Young </a></p>
<p>17 December '21: <a href="http://varia.zone/en/double-launch-si16-and-vernaculars-come-to-matter.html" target="_blank">Double publication launch: <em>Learning How to Walk While Catwalking</em> and <em>Vernaculars come to matter</em></a></p>
cleaning narrowcast
3 years ago
<p>17 December '21: <a href="https://vvvvvvaria.org/archive/2021-12-17_Radio_Activity_Wireless_Orchestra/" target="_blank" >Radio Activity ↝ a Wireless Orchestra ↜ </a></p>
<p>5 December '21: <a href="http://varia.zone/en/cc-nlcl-tales.html" target="_blank">Ch◦re◦graphing C◦ding ↝ tales from real-time collaborative audio-visual coding ↜ </a></p>
<p>29-30 November'21: <a href="https://radioee.net/" target="_blank"> Mirroring the 24hr radio marathon ROOTS </a></p>
<p>29 July'21: <a href="https://vvvvvvaria.org/usercond03.html" target="_blank">The User Condition #03 - met Anaëlle Beignon </a></p>
<p>24 July'21: <a href="https://vvvvvvaria.org/fhm-2.html" target="_blank">Feminist Hack Meetings #2 - Polyphonic Radio Ensemble</a></p>
<p>12 July'21: <a href="" target="_blank">Waste/d voices and infrastructures</a></p>
<p>12-14 June'21: <a href="https://vvvvvvaria.org/archive/2021-05-20-Sonic-Liberation-Front" target="_blank">Mirroring Radio Alhara: Sonic Liberation Front</a></p>
<p>11 June'21: <a href="" target="_blank">Ecstatic Speech</a></p>
<p>19-23 May'21: <a href="https://vvvvvvaria.org/archive/2021-05-20-Sonic-Liberation-Front" target="_blank">Mirroring Radio Alhara: Sonic Liberation Front</a></p>
<p>17 May'21: <a href="https://vvvvvvaria.org/usercond02.html" target="_blank">The User Condition #02 - Met Brendan Howell </a></p>
<p>28 March'21: <a href="https://varia.zone/en/rr-sense-full-1.html" target="_blank">Read &amp; Repair</a></p>
<p>23 March'21: <a href="http://varia.zone/en/usercond01.html" target="_blank">User Condition S01E01</a></p>
<p>13 March'21: <a href="https://varia.zone/en/fhm-servers-migrations.html" target="_blank">FHM #1 Feminist Hack Meetings: Feminist Servers</a></p>
<p>28 February'21: <a href="https://varia.zone/en/rr-wireless-imagination-2.html" target="_blank">Read &amp; Repair: Wireless Imagination</a></p>
<p>27 June'20: <a href="https://varia.zone/en/corporeal-whispers.html" target="_blank">RE#SISTER: Corporeal Whispers</a></p>
<p>19 June'20: <a href="https://varia.zone/en/Groeten_Charlois.html" target="_blank">Niek Hilkmann - Groeten uit Charlois</a></p>
<p>18 April'20: <a href="https://varia.zone/en/we-hope-this-email.html" target="_blank">We hope this email finds you well</a></p>
<p>14 March'20:<a href="https://varia.zone/en/radio-on-radio.html" target="_blank">Radio on the Radio</a></p>
</div>
</div>
usercond 04
3 years ago
<div class="live live-flex">
<!-- BUTTONS HIDE SHOW MEDIA -->
<div class="b_allmedia">
<!-- audio streaming or files -->
<button onclick="hideshowAudio()" class="bhide_chat_off" id="bhide_au">LISTENING <br> LUISTEREN</button>
cleaning up
2 years ago
<!-- image multiple -->
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
<!-- chat -->
<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHATTING <br> CHATTEN</button>
cleaned interface and added placeholders
3 years ago
<!-- etherpad-->
cleaning narrowcast
3 years ago
<button onclick="hideshowPad()" class="bhide_chat_off" id="bhide_ether">WRITING <br> SCHRIJVEN</button>
cleaned interface and added placeholders
3 years ago
<!-- jitsi or alike -->
cleaning narrowcast
3 years ago
<button onclick="hideshowJitsi()" class="bhide_chat_off" id="bhide_jit">CALLING <br> BELLEN</button>
usercond 04
3 years ago
<!-- PDFs-->
<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">READING <br> LEZING</button>
cleaned interface and added placeholders
3 years ago
<!-- video streaming or files -->
cleaning narrowcast
3 years ago
<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">WATCHING <br> KIJKEND</button>
<!-- image single -->
cleaning up
2 years ago
<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE <br> BEELD</button>
cleaned interface and added placeholders
3 years ago
usercond 04
3 years ago
</div>
<!-- MEDIA CONTENT -->
cleaned interface and added placeholders
3 years ago
<!-- MARQUEE PLACEHOLDER — CHANGE THE TEXT -->
added back maarquee placeholder
3 years ago
<!-- if online: -->
<!-- " ♪ . *⁽⁽ ◝꒰´꒳`∗꒱◟ ₎₎₊· * ON AIR ♪ ♬ ヾclick on the buttons on the right side to display the different modalities ﾉ ♬ ♪ ON AIR ♫♪.ılılıll|̲̅̅●̲̅̅|̲̅̅=̲̅̅|̲̅̅●̲̅̅|llılılı.♫♪ " -->
<!-- if offline: -->
<!-- " ♬ ¨ * • WELCOME TO THE VARIA NARROWCAST • ♬ °¸. there is currently no event happening, please check our agenda @ varia.zone " -->
cleaning up
2 years ago
<!-- <marquee scrolldelay="92">" ♬ ¨ * • WELCOME TO THE VARIA NARROWCAST • ♬ °¸. there is currently no event happening, please check our agenda @ varia.zone "</marquee> -->
usercond 04
3 years ago
cleaned interface and added placeholders
3 years ago
<!-- AUDIO -->
cleaning up
2 years ago
<!-- PLACEHOLDER link: https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3 -->
<div class="audio-stream fullscreen" id="showAudio">
<audio id="player" preload="none">
<source src="https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3 " type="audio/mpeg">
Your browser does not support the audio element. Try the direct link to the audio below!
</audio>
usercond 04
3 years ago
<p>
cleaning up
2 years ago
Press play to tune in! It might take a few seconds to load.</p>
usercond 04
3 years ago
<div class="audio-buttons">
cleaning up
2 years ago
<button id="audioButton" class="stream-button b-narrow" onclick="Play()">Play</button>
<script>
var audio = document.getElementById("player");
audio.volume = 0.6;
var butn = document.getElementById("audioButton");
function Play() {
if(audio.paused) {
audio.play();
butn.innerText = "Pause";
}
else {
audio.pause();
butn.innerText = "Play";
}
}
</script>
usercond 04
3 years ago
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume += 0.1">Vol +</button>
<button class="stream-button b-narrow vol" onclick="document.getElementById('player').volume -= 0.1">Vol -</button>
</div>
cleaning up
2 years ago
<span class="audio-link">(<a class="windowlinks" href="https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3" target="_blank">direct link to audio</a>)</span>
usercond 04
3 years ago
</div>
cleaning up
2 years ago
<!-- IMAGE GALLERY -->
<!-- PLACEHOLDER links:
https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg
https://vvvvvvaria.org/archive/varia-server/7e920c7f_Screenshot%20from%202020-03-21%2019-07-20.png
https://vvvvvvaria.org/archive/varia-server/varia-home-red.png
https://vvvvvvaria.org/archive/varia-server/welcome.png -->
<div class="img-gallery" id="showGal">
<!-- <p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p> -->
<figure>
<img alt="XXX" src="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg"><br>
(<a class="windowlinks" href="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/a_safe_image.php.jpeg" target="_blank" alt="">link to image</a>)
</figure>
<figure>
<img alt="XXX" src="https://vvvvvvaria.org/archive/00-varia-server/7e920c7f_Screenshot%20from%202020-03-21%2019-07-20.png"><br>
(<a class="windowlinks" href="https://vvvvvvaria.org/archive/00-varia-server/7e920c7f_Screenshot%20from%202020-03-21%2019-07-20.png" target="_blank" alt="">link to image</a>)
</figure>
<figure>
<img alt="XXX" src="https://vvvvvvaria.org/archive/00-varia-server/varia-home-red.png"><br>
(<a class="windowlinks" href="https://vvvvvvaria.org/archive/00-varia-server/varia-home-red.png" target="_blank" alt="">link to image</a>)
</figure>
<figure>
<img alt="XXX" src="https://vvvvvvaria.org/archive/00-varia-server/welcome.png"><br>
(<a class="windowlinks" href="https://vvvvvvaria.org/archive/00-varia-server/welcome.png" target="_blank" alt="">link to image</a>)
</figure>
</div>
<!-- CHAT -->
<!-- PLACEHOLDER link: https://chat.vvvvvvaria.org/ -->
<div class="fullscreen chat" id="">
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br>
Chat room
(<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank">direct link this chat</a>)
</div>
cleaned interface and added placeholders
3 years ago
<!-- ETHERPAD -->
<!-- PLACEHOLDER link: https://pad.vvvvvvaria.org/varia.broadcast.intro
PLACEHOLDER desc: Varia Narrowcast Intro-->
cleaning up
2 years ago
<div class="fullscreen" id="showEther">
<iframe src="https://pad.vvvvvvaria.org/varia.broadcast.intro"></iframe><br>
Live transcriptions pad
(<a class="windowlinks" href="https://pad.vvvvvvaria.org/varia.broadcast.intro" target="_blank">direct link to this pad</a>)
cleaning narrowcast
3 years ago
</div>
cleaned interface and added placeholders
3 years ago
<!-- JITSI -->
<!-- PLACEHOLDER link: https://meet.jit.si/varia.broadcats -->
cleaning narrowcast
3 years ago
<div class="halfscreen hide" id="showJit">
cleaned interface and added placeholders
3 years ago
<iframe src="https://meet.jit.si/varia.broadcats" width="640" height="480" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe>
<br> ↬
<a class="windowlinks" href="" target="_blank"> direct link to ↬ Jitsi</a>
cleaning narrowcast
3 years ago
</div>
cleaned interface and added placeholders
3 years ago
<!-- Jitsi for use -->
<!-- PLACEHOLDER link: https://meet.jit.si/varia.example -->
cleaning up
2 years ago
<div class="fullscreen" id="showJit">
cleaned interface and added placeholders
3 years ago
<iframe src="https://meet.jit.si/varia.example" allow="camera; microphone" width="640" height="800" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe>
<br> ↬
<a class="windowlinks" href="https://meet.jit.si/varia.example" target="_blank"> direct link to ↬ Jitsi</a>
cleaning up
2 years ago
</div>
cleaned interface and added placeholders
3 years ago
cleaning narrowcast
3 years ago
<!-- ESSAY -->
<!-- PLACEHOLDER link: https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html -->
<div class="halfscreen hide" id="showEssay">
<iframe src="https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html"></iframe><br> ↬
<a class="windowlinks" href="https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html" target="_blank"> ↬ direct link to text</a>
</div>
<!-- here is an example if you would like to add an iframe -->
cleaning up
2 years ago
<!-- <iframe class="halfscreen hide" id="showEssay" src="https://loading.vvvvvvaria.org" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen></iframe> -->
cleaning narrowcast
3 years ago
cleaned interface and added placeholders
3 years ago
<!-- IMAGE -->
<!-- PLACEHOLDER link: https://varia.zone/images/de_varia.jpg -->
cleaning narrowcast
3 years ago
<figure class="halfscreen" id="showImg">
<img src="https://varia.zone/images/de_varia.jpg">
<br> ↬
<a class="windowlinks" href="https://varia.zone/images/de_varia.jpg" alt=""> caption: ↬ link to .jpg</a>
cleaned interface and added placeholders
3 years ago
</figure>
<!-- VIDEO -->
<!-- PLACEHOLDER link: https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/tv-varia.mp4 -->
cleaning narrowcast
3 years ago
<div class="fullscreen hide" id="showVideo">
cleaned interface and added placeholders
3 years ago
<video
id="player"
class="video-js vjs-default-skin"
controls
preload="none"
>
<source
src="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/tv-varia.mp4"
type="video/mp4"
/>
</video>
<br> ↬
<a class="windowlinks" href="https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/tv-varia.mp4" target="_blank"> ↬ direct link to video </a>
cleaning narrowcast
3 years ago
</div>
cleaning narrowcast
3 years ago
usercond 04
3 years ago
<script type="text/javascript" src="narrowscripts.js"></script>
</body>
</html>