varia
/
web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

added older files to from cc-nlcl-tales

master
JoanaChicau 3 years ago
parent
a97dbf0a40
commit
0cc752af84
5 changed files with 1227 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      old-events/cc-nlcl-tales/cmunbtl.ttf
  2. BIN
      old-events/cc-nlcl-tales/cmunci.ttf
  3. 428
      old-events/cc-nlcl-tales/index.html
  4. 214
      old-events/cc-nlcl-tales/narrowscripts.js
  5. 585
      old-events/cc-nlcl-tales/narrowstyle.css

BIN
old-events/cc-nlcl-tales/cmunbtl.ttf
View File

Binary file not shown.

BIN
old-events/cc-nlcl-tales/cmunci.ttf
View File

Binary file not shown.

428
old-events/cc-nlcl-tales/index.html
View File

@ -0,0 +1,428 @@
<!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>
<style type="text/css">
.img-gallery figure {
width: 30%;
margin: 0.5rem;
}
iframe {
width: 100%;
height: auto;
}
.allchance{
width: 100%;
margin: 1%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.chance, button.chance {
font-family: "Computer Modern Typewriter Light";
margin: 1%;
padding: 0.5rem;
background-color: var(--color-lightpink);
border-radius: 1.2rem;
height: 5rem;
border: none;
box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink);
}
a.chance-link , a.chance-link: visited {
color: var(--color-lightpink) !important;
text-decoration: none !important;
}
.chance-cap{
font-size: 0.8rem;
}
#rnd {
font-size: 2rem;
margin: 0.25rem;
}
</style>
<script type="text/javascript">
const icons = ["🤖 🤝 🙃", "💻 💛🔥 🎹", "🌍 🔊 🌈", "🌊 🎶", "©️ ➡️ ♻️ ", "🔮 🖥️✨"];
function randomize() {
const random = Math.floor(Math.random() * icons.length);
console.log(random, icons[random]);
document.getElementById("rnd").innerHTML = icons[random];
}
</script>
</head>
<body>
<div class="linkmore">
<a href="https://stream.vvvvvvaria.org/about.html"> about ↯ over ↻ </a>
</div>
<div id="side" class="sidebar sidemin">
<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! -->
<p>more TBA soon! <a href="https://varia.zone/en" target="_blank" > &#128064; </a> <br> meer TBA binnenkort! </p>
<p>5 Dec'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>
</div>
<div class="middle">
<p>⇈ Will be awesome ⇈ <br> ⇈ Zal geweldig zijn ⇈</p>
<p id="livetitle">LIVE ↝ N↻W ⇶ </p>
<p id="livesubtitle"></p>
<p>⇊ Was amazing ↷ geweldig ⇊</p>
<p> <a href="archive.html">Archive ↩</a></p>
</div>
<div class="sidebottom">
<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 & 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 & 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>
<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>
-->
<!-- jitsi or alike CALLING BELLEN-->
<button onclick="hideshowJitsi()" class="" id="bhide_jit"> ⭑✰⭑ <br> STREAM </button>
<!-- etherpad-->
<button onclick="hideshowPad()" class="" id="bhide_ether">ETHERPAD <br> & CHAT</button>
<!-- video streaming or files -->
<button onclick="hideshowVideo()" class="bhide_chat_off" id="bhide_vid">AR'QUATIC <br> Sasj & T.mo </button>
<!-- chat
<button onclick="hideshowChat()" class="bhide_chat_off" id="bhide_chat">CHATTING <br> CHATTEN</button>
-->
<!-- image single
<button onclick="hideshowIMG()" class="bhide_chat_off" id="bhide_img">IMAGE <br> BEELD</button>
-->
<!-- image multiple -->
<button onclick="hideshowGal()" class="bhide_chat_off" id="bhide_gal">GALLERY <br> GALERIJ</button>
<!-- PDFs-->
<button onclick="hideshowEssay()" class="bhide_chat_off" id="bhide_ess">+ INF◉ +<br>+ ++ +</button>
</div>
<!-- MEDIA CONTENT -->
<!-- MARQUEE PLACEHOLDER — CHANGE THE TEXT
<!-- 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 " -->
<marquee scrolldelay="92"> * ◝ ₊· ON AIR ♪ ♬ ヾ♬ ¨ * • WELCOME TO THE VARIA NARROWCAST • ♬ °¸.✧ ♪ ♬ ヾclick on the buttons on the right side to display the different modalities ﾉ ♬ ♪ ON AIR ♫♪. ♪ . * ◝ ₊· </marquee>
<!-- AUDIO -->
<!-- PLACEHOLDER link: https://vvvvvvaria.org/logs/zamopuzo/audio/varia_broadcasts_jingle1.mp3
previous audio cast: https://stream.w-i-t-m.net/meander -->
<div class="audio-stream fullscreen hide" id="showAudio">
<audio id="player" preload="none" src="https://radio.alonetogether.pub/live"> </audio>
<p>
Press play (best listened in FireFox). It might take a minute to load.</p>
<div class="audio-buttons">
<button id="bp" class="stream-button b-narrow" onclick="document.getElementById('player').play(); bplaytoggle()">Play</button>
<button id="bs" class="stream-button b-narrow" onclick="document.getElementById('player').pause();document.getElementById('player').src=document.getElementById('player').src; bstoptoggle()">Stop</button>
<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>
<span class="audio-link"> ↬ <a class="windowlinks" href="https://radio.alonetogether.pub/live" target="_blank"> direct link to audio! </a></span>
</div>
<!-- JITSI -->
<!-- PLACEHOLDER link: https://meet.jit.si/varia.broadcats -->
<div class="halfscreen" id="showJit">
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/0AatWkdB5CU?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬
<a class="windowlinks" href="https://www.youtube.com/watch?v=0AatWkdB5CU" target="_blank"> direct link to ↬ youtube stream</a>
</div>
<!-- Jitsi for use -->
<!-- PLACEHOLDER link: https://meet.jit.si/varia.example -->
<!-- <div class="fullscreen" id="showJit">
<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>
</div> -->
<!-- ETHERPAD -->
<!-- PLACEHOLDER link: https://pad.vvvvvvaria.org/varia.broadcast.intro
PLACEHOLDER desc: Varia Narrowcast Intro-->
<div class="halfscreen" id="showEther">
<iframe src="https://pad.vvvvvvaria.org/ChoreographingCodingTales"></iframe><br> ↝
<a class="windowlinks" href="https://pad.vvvvvvaria.org/ChoreographingCodingTales" target="_blank"> direct link to ↬ pad </a>
</div>
<!-- NEW ZONE -->
<div class="allchance">
<button class="chance" onclick="randomize()">click here ▸ chance operations *･゜<p id="rnd"></p></button>
<div class="chance-cap">
<br>
🤖 🤝 🙃 = "human-machine collaboration";
💻 💛🔥 🎹 = "CodeKlavier";
🌍 🔊 🌈 = "networked audio-visuals";
🌊 🎶 = "Tidal Cycles";
©️ ➡️ ♻️ = "FL0SS" (free/libre and open source software);
🔮 🖥️✨ = esoteric programming languages;
<sup><a style="color:var(--color-lightpink);" class="chance-link" href="https://walkerart.org/magazine/chance-conversations-an-interview-with-merce" target="_blank" > about chance operations [+]</a><sup>
</div>
</div>
<!-- here is an example if you would like to add an iframe -->
<!-- <iframe class="halfscreen hide" id="showEssay" src="https://loading.vvvvvvaria.org" width="600" height="680" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen>
</iframe> -->
<!-- IMAGE -->
<!-- PLACEHOLDER link: https://varia.zone/images/de_varia.jpg -->
<figure class="halfscreen hide" 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>
</figure>
<!-- VIDEO -->
<!-- PLACEHOLDER link: https://vvvvvvaria.org/archive/2021-01+02-Read-and-Repair_Wireless-Imagination/tv-varia.mp4 -->
<div class="fullscreen hide" id="showVideo">
<!-- <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> -->
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/h6mXDQg3qYc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ ARquatic at Home
<a class="windowlinks" href="https://www.youtube.com/watch?v=h6mXDQg3qYc" target="_blank"> ↬ direct link to video stream</a> and
<a class="windowlinks" href="https://apps.apple.com/nl/app/arquatic/id1557620712?l=en" target="_blank"> ↬ link to Apple app</a> or
<a class="windowlinks" href="https://play.google.com/store/apps/details?id=space.codeklavier.arquatic&hl=en_US&gl=US" target="_blank"> ↬ link to Android app</a>
<br><br><br><br>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/r4ws5evLO_g?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Sasj & Timo - Live at Choreographing Coding
<a class="windowlinks" href="https://www.youtube.com/watch?v=r4ws5evLO_g" target="_blank"> ↬ direct link to stream </a>
</div>
<!-- CHAT -->
<!-- PLACEHOLDER link: https://chat.vvvvvvaria.org/ -->
<div class="chat halfscreen hide" id="showChat">
<iframe src="https://chat.vvvvvvaria.org/"></iframe><br> ↬
<a class="windowlinks" href="https://chat.vvvvvvaria.org/" target="_blank"> direct link to chat! </a>
</div>
<!-- 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 hide" id="showGal">
<p class="img-gallery-title"> ⇩ IMAGE ⇊ GALLERY ⇘ IMAGE ⇊ GALERIJ ⇩ </p>
<figure>
<img src="https://geometries.xyz/o.gif"><br> ↬
<a class="windowlinks" href="https://geometries.xyz/o.gif" target="_blank" alt=""> caption: 'Joana and Renick performing Círculo & Meio' ↬ link to .jpg</a>
</figure>
<figure>
<img src="https://vvvvvvaria.org/~jochicau/ChoreographingCodingTales/azamiline_JSoLang.png"><br> ↬
<a class="windowlinks" href="https://vvvvvvaria.org/~jochicau/ChoreographingCodingTales/azamiline_JSoLang.png" target="_blank" alt="">caption: 'JSoLang azamiline - Chiho Oka' ↬ link to .jpg ↫ </a>
</figure>
<figure>
<img src="https://vvvvvvaria.org/~jochicau/ChoreographingCodingTales/DSC01222%281%29.JPG"><br> ↬
<a class="windowlinks" href="https://vvvvvvaria.org/~jochicau/ChoreographingCodingTales/DSC01222%281%29.JPG" target="_blank" alt=""> caption: 'Chiho performing Automated Cursor - Chiho Oka' ↬ link to .png ↫</a>
</figure>
<!-- 2 -->
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/VZr92KzaqC4?start=11863" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Live at ITERATIONS: Creative Coding Symposium 2021 - Saskia and T.mo
<a class="windowlinks" href="https://www.youtube.com/embed/VZr92KzaqC4?start=11863" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/7S0hFRui9GA" title="SuperContinent performance at NIME 2021" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ SuperContinent performance at NIME 2021 - Chiho Oka
<a class="windowlinks" href="https://www.youtube.com/watch?v=7S0hFRui9GA" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/CWrJ0Hxlb6c" title="Mieko Shiomi - Boundary Music (1963)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Casual Internet Party on datafruits.fm - Chiho Oka
<a class="windowlinks" href="https://www.youtube.com/watch?v=CWrJ0Hxlb6c" target="_blank"> ↬ link ↫ </a>
</figure>
<!-- 3 -->
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/ynkr8fyHCZw?start=99" title="Sasj & T.mo - Amalgam 2.0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Amalgam 2.0 (Live at TOPLAP Transnodal 2021) - Sasj & T.mo
<a class="windowlinks" href="https://www.youtube.com/watch?v=ynkr8fyHCZw&t=98s" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/im6d3-9jmD0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ ARquatic Trailer - Anne Veinberg, Felipe Ignacio Noriega, Patrick Borgeat
<a class="windowlinks" href="https://www.youtube.com/watch?v=im6d3-9jmD0" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/l4D1d1VROOA" title="Mieko Shiomi - Boundary Music (1963)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Ensemble for Experimental Music and Theatre
<a class="windowlinks" href="https://www.youtube.com/watch?v=l4D1d1VROOA" target="_blank"> ↬ link ↫ </a>
</figure>
<!-- 4 -->
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/4DTn2km1378" title="[No Bounds x Hope Works] Alpaca Session 1.1 - Chiho Oka" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Automated Cursor [No Bounds x Hope Works] Alpaca Session 1.1 - Chiho Oka
<a class="windowlinks" href="https://www.youtube.com/watch?v=4DTn2km1378" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe width="100%" height="auto" src="https://www.youtube.com/embed/kT9Pc6Z3isU" title="[No Bounds x Hope Works] Alpaca Session 1.1 - Chiho Oka" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br> ↬ The YouTube Slave - Chiho Oka
<a class="windowlinks" href="https://www.youtube.com/watch?v=kT9Pc6Z3isU" target="_blank"> ↬ link ↫ </a>
</figure>
<figure>
<iframe src="https://player.vimeo.com/video/650992697?h=25b5a977ef&title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<br> ↬ Playing Beuys’s Records - Concert - Chiho Oka
<a class="windowlinks" href="https://vimeo.com/650992697" target="_blank"> ↬ link ↫ </a>
</figure>
</div>
<!-- ESSAY -->
<!-- PLACEHOLDER link: https://etherdump.vvvvvvaria.org/publish/digital-solidarity-networks.raw.html -->
<div class="fullscreen hide" id="showEssay">
<iframe src="https://geometries.xyz/"></iframe><br> ↬
<a class="windowlinks" href="https://geometries.xyz/" target="_blank"> ↬ direct link to Choreographies of the Circle & Other Geometries</a>
</div>
<!-- NEW NOTE -->
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly * <u>Nota</u>: deze interface is in experimentele fase ☆ﾟ.*･｡ﾟ en sommige dingen kunnen niet altijd soepel werken *</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>
<script type="text/javascript" src="narrowscripts.js"></script>
</body>
</html>

214
old-events/cc-nlcl-tales/narrowscripts.js
View File

@ -0,0 +1,214 @@
// SCRIPTS FOR THE NEW AUDIO PLAYER
(function(){
function waitForIt(selector, time) {
if(document.querySelector(selector)!=null) {
var chat_title = document.getElementsByClassName("chatbox-title__text")[0];
var element = document.createElement("span");
element.innerHTML = '<audio id="player" preload="none" src="http://w-i-t-m.net:8001/radiodrama"></audio><div><button onclick="document.getElementById(\'player\').play()">Play</button><button onclick="document.getElementById(\'player\').pause();document.getElementById(\'player\').src=document.getElementById(\'player\').src;">Stop</button><button onclick="document.getElementById(\'player\').volume += 0.1">Vol +</button><button onclick="document.getElementById(\'player\').volume -= 0.1">Vol -</button></div>';
chat_title.insertAdjacentElement('afterend', element);
return;
}
else {
setTimeout(function() {
waitForIt(selector, time);
}, time);
}
}
waitForIt(".toggle-smiley", 1000);
})();
$(function() {
console.log("PARENT READY");
$("iframe").on("load", function(){
console.log("LOADED");
$(this).contents().find('.kiwi-startup-common').hide();
});
});
// SCRIPT for button to hide side pannel -->
function fside() {
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
}
// SCRIPT MOBILE SIDEMENU HIDE
var x = window.matchMedia("(max-width: 768px)")
function fsidemobile(x) {
if (x.matches) { // If media query matches
var element = document.getElementById("side");
element.classList.toggle("sideminclicked");
} else {
element.classList.toggle("");
}
}
fsidemobile(x)
function hideshowWelcome() {
var elwel = document.getElementById("showWel");
elwel.classList.toggle("hide");
var bwel = document.getElementById("bhide_wel");
bwel.classList.toggle("bhide_chat_off")
we = document.getElementById("showWel");
we.scrollIntoView();
}
function hideshowChat() {
var elchat = document.getElementById("showChat");
elchat.classList.toggle("hide");
var bchat = document.getElementById("bhide_chat");
bchat.classList.toggle("bhide_chat_off")
cha = document.getElementById("showChat");
cha.scrollIntoView();
}
function hideshowPad() {
var elether = document.getElementById("showEther");
elether.classList.toggle("hide");
var bether = document.getElementById("bhide_ether");
bether.classList.toggle("bhide_chat_off")
eth = document.getElementById("showEther");
eth.scrollIntoView();
}
function hideshowAudio() {
var elau = document.getElementById("showAudio");
elau.classList.toggle("hide");
var bau = document.getElementById("bhide_au");
bau.classList.toggle("bhide_chat_off")
au = document.getElementById("showAudio");
au.scrollIntoView();
}
function hideshowJitsi() {
var eljit = document.getElementById("showJit");
eljit.classList.toggle("hide");
var bjit = document.getElementById("bhide_jit");
bjit.classList.toggle("bhide_chat_off")
jit = document.getElementById("showJit");
jit.scrollIntoView();
}
function hideshowEssay() {
var eless = document.getElementById("showEssay");
eless.classList.toggle("hide");
var bess = document.getElementById("bhide_ess");
bess.classList.toggle("bhide_chat_off")
ess = document.getElementById("showEssay");
ess.scrollIntoView();
}
function hideshowVideo() {
var elvid = document.getElementById("showVideo");
elvid.classList.toggle("hide");
var bvid = document.getElementById("bhide_vid");
bvid.classList.toggle("bhide_chat_off")
vid = document.getElementById("showVideo");
vid.scrollIntoView();
}
function hideshowIMG() {
var elimg = document.getElementById("showImg");
elimg.classList.toggle("hide");
var bimg = document.getElementById("bhide_img");
bimg.classList.toggle("bhide_chat_off")
im = document.getElementById("showImg");
im.scrollIntoView();
}
function hideshowGal() {
var elgal = document.getElementById("showGal");
elgal.classList.toggle("hide");
var bgal = document.getElementById("bhide_gal");
bgal.classList.toggle("bhide_chat_off")
gal = document.getElementById("showGal");
gal.scrollIntoView();
}
// button while playing extra style
function bplaytoggle () {
var pbutton = document.getElementById("bp");
pbutton.classList.add("bClicked");
var sbutton = document.getElementById("bs");
sbutton.classList.remove("bClicked");
}
function bstoptoggle () {
var pbutton = document.getElementById("bp");
pbutton.classList.remove("bClicked");
var sbutton = document.getElementById("bs");
sbutton.classList.add("bClicked");
}
// src="https://vjs.zencdn.net/7.10.2/video.min.js"
// var player = videojs("#player");
// var aud1= document.getElementById('audioBG');
// var dur1= document.getElementById('dur1');
// function mDur(dur,aud){dur.max= aud.duration};
// function mPlay(dur,aud){dur.value=aud.currentTime};
// function mSet(dur,aud){aud.currentTime=dur.value};
// function playpause(podcast){
// var myAudio = document.getElementById(podcast);
// var myIcon = document.querySelector("."+podcast);
// if (myAudio.paused) {
// myIcon.className = podcast+" fa b-pause";
// myAudio.play();
// } else {
// myIcon.className = podcast+" fa b-play";
// myAudio.pause();
// }
// }

585
old-events/cc-nlcl-tales/narrowstyle.css
View File

@ -0,0 +1,585 @@
@font-face {
font-family: "Computer Modern Classical Serif Italic";
src: url("cmunci.eot");
src: url("cmunci.eot?#iefix") format("embedded-opentype"),
url("cmunci.woff") format("woff"), url("cmunci.ttf") format("truetype"),
url("cmunci.svg#cmunci") format("svg");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Computer Modern Typewriter Light";
src: url("cmunbtl.eot");
src: url("cmunbtl.eot?#iefix") format("embedded-opentype"),
url("cmunbtl.woff") format("woff"), url("cmunbtl.ttf") format("truetype"),
url("cmunbtl.svg#cmuntt") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Computer Modern Typewriter Light";
src: url("cmunbto.eot");
src: url("cmunbto.eot?#iefix") format("embedded-opentype"),
url("cmunbto.woff") format("woff"), url("cmunbto.ttf") format("truetype"),
url("cmunbto.svg#cmunbto") format("svg");
font-weight: normal;
font-style: italic;
}
html {
box-sizing: border-box;
height: 100%;
font-size: 14pt;
line-height: 16pt;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
:root {
--color-purple: #393c56;
--color-lightpink: #ffe4fd;
--color-pink: #ff029c;
--color-lightblue: #aec7ea;
--color-lightyellow: #ffffe5;
}
body {
margin: 0rem;
font-family: "Computer Modern Typewriter Light";
background-color: var(--color-purple);
color: var(--color-lightpink);
height: 100%;
}
iframe,
video {
border: none;
width: inherit;
}
a,
button {
cursor: pointer;
}
marquee {
}
#about {
margin: 5rem 2%;
width: 60%;
}
p.about {
width: 70%;
}
.note {
font-size: 0.8rem;
position: fixed;
bottom: 7px;
right: 25px;
margin: 0.2rem;
margin-left: 310px;
background-color: var(--color-purple);
}
.linkmore {
font-family: "Computer Modern Classical Serif Italic";
position: fixed;
top: 0;
right: 0;
margin: 3% 1% 0% 1%;
color: var(--color-lightyellow);
z-index: 99;
max-width: 80px;
}
.linkmore a, .linkmore a:visited {
font-size: 1rem;
line-height: 0.6rem;
color: var(--color-lightyellow);
text-decoration: none;
text-shadow: 0.1rem 0.01rem 0.05rem var(--color-purple);
padding: 0rem 0rem 0rem 0rem;
}
.linkmore a:hover {
text-decoration: underline;
text-underline-position: unset;
text-decoration-style: wavy;
}
#side {
box-shadow: inset 0rem -0.4rem 1rem var(--color-lightpink);
}
.sidebar {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
box-shadow: 1rem 0rem 6rem var(--color-lightpink);
overflow-x: hidden;
overflow-y: hidden;
}
.sidemin {
width: 300px;
transition: width 2s;
}
.sideminclicked {
width: 30px;
}
.sideminclicked + .live {
transition: margin-left 2s;
margin-left: 40px;
}
button.minimize {
box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink);
border-radius: 0.5rem 5rem 5rem 5rem;
line-height: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
height: 2rem;
font-size: 1.8rem;
width: 2rem;
background-color: var(--color-purple);
color: var(--color-lightpink);
position: fixed;
top: 0;
left: 0;
margin: 0.5rem;
border: none;
}
button.minimize:hover {
color: var(--color-purple);
background-color: var(--color-lightpink);
border-radius: inset 0.5rem 5rem 5rem 5rem;
}
.sidetop,
.sidebottom {
overflow-y: scroll;
scrollbar-width: none;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
-ms-overflow-style: -ms-autohiding-scrollbar;
overflow: -ms-autohiding-scrollbar;
display: flex;
flex-direction: column;
padding: 1rem 1rem;
}
.sidetop {
height: 45vh;
font-size: 1.2rem;
justify-content: flex-end;
}
.sidetop p {
margin: 0.5rem 0rem;
color: var(--color-lightblue);
}
.sidetop a {
color: var(--color-lightpink);
margin-top: auto;
}
.middle {
height: auto;
font-size: 0.8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
padding: 0.5rem 1rem;
}
.middle p {
margin: 0px;
}
.middle p a, .middle p a:visited {
font-family: "Computer Modern Typewriter Light";
color: var(--color-lightpink);
text-decoration: none;
font-size: 14pt;
line-height: 16pt;
}
.middle p a:hover {
color: var(--color-lightblue);
}
#livetitle {
font-size: 1.8rem;
animation: glow 1.6s infinite alternate;
-webkit-animation: glow 1.6s infinite alternate;
margin: 0.4rem 0rem 0rem 0rem;
}
#livesubtitle{
font-size: 1rem;
animation: glow 1.6s infinite alternate;
-webkit-animation: glow 1.6s infinite alternate;
line-height: 1rem;
margin: 0.2rem 0rem 0.2rem 0rem;
}
@-webkit-keyframes glow {
to {
text-shadow: 0 0 8px var(--color-pink);
}
}
@-webkit-keyframes glowbutton {
to {
box-shadow: 0 0 8px var(--color-pink);
}
}
.windowlinks {
color: var(--color-lightpink);
}
.sidebottom {
height: 45vh;
box-shadow: 10rem -6rem 4rem var(--color-lightpink);
}
.sidebottom p {
margin: 0.25rem 0rem;
}
.sidebottom a {
color: var(--color-lightblue);
}
.sidebottom p:last-child {
padding-bottom: 2rem;
}
.b_allmedia {
top: 100px;
margin: 0% 1% 1% 1%;
z-index: 99;
}
.hide {
display: none !important;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.b_allmedia {
position: fixed;
right: 0;
width: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.b_allmedia button {
font-family: "Computer Modern Typewriter Light";
color: var(--color-lightpink);
box-shadow: inset 0.3rem 0.2rem 0.3rem var(--color-lightpink);
border-radius: 1.2rem;
font-size: 0.8rem;
line-height: 1.2rem;
align-items: center;
background-color: var(--color-purple);
margin: 0.5rem;
border: none;
}
.b_allmedia button:hover {
box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink);
}
.bhide_chat_off {
color: var(--color-purple) !important;
background-color: var(--color-lightpink) !important;
box-shadow: none !important;
border: 0.03rem solid var(--color-purple) !important;
}
.bhide_chat_off{
background: -moz-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%);
background: -webkit-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%);
background: linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%);
/*content: " OFF";*/
}
.bhide_chat_off:hover {
background: -moz-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%);
background: -webkit-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%);
background: linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%);
}
.live {
margin-left: 300px;
display: inline-block;
transition: margin-left 2s;
}
.live-flex {
display: flex;
box-sizing: border-box;
box-shadow: inset -0.6rem 0rem 0.8rem var(--color-lightpink);
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
flex-wrap: wrap;
flex-direction: row;
padding: 0rem 0rem 4rem 0rem;
}
.live-flex a {
word-wrap: break-word;
}
.fullscreen, .fullscreen > video, .fullscreen > iframe, .halfscreen > iframe, .thirdscreen > iframe {
margin: 1%;
width: 95%;
}
.fullscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.fullscreen > img, .halfscreen > img, .thirdscreen > img {
max-width: 100% !important;
height: auto !important;
}
#showAudio > * {
height: auto !important;
}
.halfscreen {
margin: 1%;
width: 44.5%;
}
.halfscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.thirdscreen {
margin: 1%;
width: 25%;
}
.thirdscreen > * {
height: 60vh;
border-radius: 0.2rem;
}
.live > * {
/* touch-action: none;*/
}
@keyframes corners {
0% {
border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
-webkit-border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
}
20% {
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
}
100% {
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
}
}
@-webkit-keyframes corners {
0% {
border-radius: 2rem 0rem 1rem 2rem;
-webkit-border-radius: 2rem 0rem 1rem 2rem;
}
20% {
border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
-webkit-border-radius: 0rem 4rem 2rem 1rem / 0rem 1rem 2rem 0rem;
}
100% {
border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
-webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%;
}
}
.audio-stream {
margin: 4rem 0% 0% 0%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, 0%);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
}
.audio-link {
margin: 2rem 0% 2rem 0% ;
}
.audio-stream > input {
margin: 0% 2rem 0% 2rem;
}
.audio-stream button {
margin: 0.5rem 0rem;
}
.audio-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
width: 80%;
margin: 0rem 1rem;
}
button.b-narrow {
box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink);
border: 0.03rem solid #393c56;
border-radius: 0.5rem 5rem 5rem 5rem;
line-height: 1rem;
text-align: center;
vertical-align: middle;
display: inline;
padding: 0.6rem;
font-size: 1.6rem;
width: auto;
color: var(--color-purple);
background-color: var(--color-lightpink);
}
button.b-narrow:hover {
background-color: var(--color-purple);
text-shadow: -1px -1px 1px var(--color-lightpink) !important;
}
.bClicked {
background-color: var(--color-purple) !important;
color: var(--color-lightpink) !important;
/* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ffe4fd !important; */
}
button.vol {
border-radius: 5rem 0.5rem 5rem 5rem;
}
.b-play::before {
content: 'PLAY';
}
.b-pause::before {
content: 'PAUSE';
}
img {
width: 100%;
height: auto;
border-radius: 0.2rem;
max-width: 100%;
}
.img-gallery {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding: 1rem;
}
.img-gallery-title {
width: 100%;
margin: 0rem 1rem;
}
.img-gallery figure {
width: 20%;
margin: 0.5rem;
}
.img-gallery img {
width: 100%;
border-radius: 1rem 0.5rem 1rem 0.5rem;
}
/* :::::::::::::::::::::::::::::::::::::::::::::: Responsiveness :::::::::::::::::::::::::::::::::::::::::::::: */
@media only screen and (max-width: 768px) {
/* .live-flex {
flex-direction: column;
}*/
.b_allmedia button {
font-size: 0.7rem;
line-height: 1rem;
}
.linkmore a {
font-size: 0.8rem;
}
p.about {
width: 95%;
}
.halfscreen , .thirdscreen {
width: 100%;
margin: 4rem 0% 0rem 0%;
}
.note {
position: relative;
margin: 0% 0% 2rem 2rem !important;
}
.audio-stream {
margin: 4rem 0% 2rem 0%;
}
.img-gallery figure {
width: 98%;
}
}
Write Preview
Loading…
Cancel
Save