first commit with live.hangar.org content

assets/css/hangar-static-app.css

@@ -0,0 +1,423 @@
+/*
+hangar css styles
+version 0.6
+date: 2020 12 16
+author jorge@hangar.org
+*/
+:root{
+  --color-hangar: rgb(0,0,255);
+  --color-body: rgb(20,20,20);
+  --color-secondary: rgb(90,90,90) ;
+  --color-background: rgb(250,250,250);
+  --color-body-invert: rgb(200,200,200);
+  --color-background-invert: rgb(10,10,10);
+  --color-black: rgb(0,0,0);
+  --color-white: rgb(255,255,255);
+  --color-grey-dark: rgb(110,110,110);
+  --color-grey-light: rgb(230,230,230);
+  --global-padding: 1rem;
+  --global-margin: 1rem;
+  --global-border: 0.05rem solid var(--color-grey-light);
+  --global-radius: 1rem;
+}
+
+@media screen{
+  body{
+    background-color: var(--color-white);
+    color: var(--color-body);
+    font-family: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
+  }
+  a{
+    color: var(--color-hangar);
+  }
+  a:hover{
+    color: var(--color-grey-dark);
+    border-bottom:0.2rem solid var(--color-hangar);
+    margin-bottom:-0.2rem;
+  }
+
+  .hangar-blue{
+    color:var(--color-hangar);
+  }
+  .hangar-grey{
+    color:var(--color-grey-dark);
+  }
+
+  span.hangar-blue-bg,
+  .hangar-blue-bg img{
+    background-color:var(--color-hangar);
+  }
+  .hangar-blue-invert{
+    color:var(--color-white);
+    background-color:var(--color-hangar);
+  }
+  .invert-bg{
+    background-color: black;
+  }
+  .hangar-logo {
+    font-size:0px;
+    color:transparent;
+  }
+  .hangar-logo::after {
+    display:inline-block;
+    content:'';
+    background-image: url('https://grafica.hangar.org/assets/img/hangar-logo.svg');
+    width: 9rem;
+    height: 3.8rem;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: var(--color-white);
+    position: relative;
+    bottom:-0.5rem;
+  }
+  .hangar-logo.small::after{
+    width: 4rem;
+    height: 1.7rem;
+    bottom:-0.3rem;
+  }
+  .hangar-logo.icon::after{
+    background-image: url('https://grafica.hangar.org/assets/img/hangar-logo-icon.svg');
+    width: 3rem;
+    height:3rem;
+    bottom:-0.3rem;
+  }
+  .hangar-logo.small.icon::after{
+    width: 1.5rem;
+    height: 1.5rem;
+    bottom:-0.2rem;
+  }
+  .hangar-logo.hangar-blue-bg::after{
+    background-color:var(--color-hangar);
+  }
+  .up-arrow::before {
+    display:inline;
+    content:"\21D1";
+  }
+  .up-arrow:hover{
+    display: inline;
+  }
+  .full-height{
+    min-height: 100vh;
+  }
+  .hide{
+    display:none;
+  }
+  h1,h2,h3,h4,h5,h6{
+    font-weight: bold;
+    margin:2rem auto;
+  }
+  h1{
+    font-size:4rem;
+  }
+  h2{
+    font-size:3.5rem;
+  }
+  h3{
+    font-size:3rem;
+  }
+  h4{
+    font-size:2.5rem;
+  }
+  h5{
+    font-size:2rem;
+  }
+  h6{
+    font-size:1.5rem;
+  }
+  ul{
+    list-style: none;
+  }
+  /* menu fixed to the right side*/
+  .menu-fixed-right {
+    position: fixed;
+    top: 1rem;
+    right: 1em;
+    max-width: 7rem;
+    padding: 0.5rem;
+    background: var(--color-grey-light);
+    font-size: 0.8rem;
+    text-align: right;
+    line-height: 0.9rem;
+  }
+
+  .menu-fixed-right li {
+    padding: 0.2rem 0;
+    border-bottom:1px dotted var(--color-hangar);
+  }
+
+  footer {
+    margin-top: 2rem;
+    border-top: var(--global-border);
+    color: var(--color-grey-dark);
+    font-size: 0.8rem;
+  }
+
+  /* only for class hangar-grafica */
+  .hangar-grafica h1,
+  .hangar-grafica h2,
+  .hangar-grafica h3,
+  .hangar-grafica h4,
+  .hangar-grafica h5,
+  .hangar-grafica h6 {
+    color: var(--color-grey-dark);
+    background-color: var(--color-grey-light);
+    padding: 0.5rem;
+  }
+  .hangar-grafica .logos a,
+  .hangar-grafica .icons a{
+    display: inline-block;
+  }
+  .hangar-grafica .logos img {
+    max-width: 30vw;
+    margin:1rem 0;
+  }
+  .hangar-grafica .icons img {
+    max-width: 15vw;
+  }
+  .hangar-grafica figcaption {
+    color: var(--color-grey-dark);
+    font-size: 0.9rem;
+    font-style: italic;
+  }
+  .hangar-grafica .codeblock {
+    background-color: var(--color-grey-light);
+    text-align: left;
+    padding:1rem;
+  }
+  .hangar-grafica a[href$=".SVG"]::after,
+  .hangar-grafica a[href$=".svg"]::after,
+  .hangar-grafica a[href$=".JPG"]::after,
+  .hangar-grafica a[href$=".jpg"]::after,
+  .hangar-grafica a[href$=".PNG"]::after,
+  .hangar-grafica a[href$=".png"]::after,
+  .hangar-grafica a[href$=".GIF"]::after,
+  .hangar-grafica a[href$=".gif"]::after {
+    content: '';
+    display: inline-block;
+    margin-bottom:1rem;
+    border-bottom: 1px solid grey;
+  }
+  .hangar-grafica a[href$=".SVG"]::after,
+  .hangar-grafica a[href$=".svg"]::after {
+    content:"file svg";
+  }
+  .hangar-grafica a[href$=".JPG"]::after,
+  .hangar-grafica a[href$=".jpg"]::after {
+    content:"file jpg";
+  }
+  .hangar-grafica a[href$=".PNG"]::after,
+  .hangar-grafica a[href$=".png"]::after {
+    content:"file png";
+  }
+  .hangar-grafica a[href$=".GIF"]::after,
+  .hangar-grafica a[href$=".gif"]::after {
+    content:"file gif";
+  }
+  /* buttons */
+  .button {
+    background-color: var(--color-hangar);
+    color: var(--color-body-invert);
+    padding: calc(var(--global-padding) / 4);
+    border-radius: calc(var(--global-radius) / 4);
+  }
+  a.button {
+    display: inline-block;
+    margin: calc(var(--global-margin) / 4);
+  }
+  a:hover.button{
+    border: none;
+    color: var(--color-white);
+  }
+  /* cards - services */
+  .card {
+    border: var(--global-border);
+    border-radius: var(--global-radius) * 0.3;
+    padding: 1rem;
+    margin: 0.5rem;
+  }
+  .card-divider{
+    padding-bottom: calc(var(--global-padding)/2);
+    border-bottom: var(--global-border);
+  }
+  .card-divider a{
+    color: var(--color-body);
+  }
+  .card-image {
+    height: 5rem;
+    display: flex;
+    align-self: center;
+  }
+  .card-section{
+    padding-top: calc(var(--global-padding) / 2);
+    border-top: var(--global-border);
+  }
+
+  /* only for live-streaming */
+  .live-streaming h1,
+  .live-streaming h2,
+  .live-streaming h3,
+  .live-streaming h4,
+  .live-streaming h5,
+  .live-streaming h6{
+    margin:0.5rem 0;
+  }
+  .live-streaming h1{
+    font-size: 2.5rem;
+  }
+  .live-streaming h2{
+    font-size: 2rem;
+  }
+  .live-streaming .video-js, .live-streaming .video-dimensions,.embedchat iframe {
+    width: calc(30vw * 3);
+    height: calc(15vw * 3);
+    margin-bottom:1.5rem;
+  }
+  .embedchat iframe {
+    max-width: 48rem;
+    min-height:24rem;
+    border: none;
+  }
+
+  /* switches for color & view */
+  #wrapper.colorswitch-invert, #wrapper.viewswitch-change{
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+  }
+  input.colorswitch, input.viewswitch {
+    display:none;
+  }
+  label.colorswitch, label.viewswitch{
+    z-index: 10;
+    position:relative;
+    display:inline-block;
+    width: 2rem;
+    height: 1rem;
+  }
+  label.colorswitch {
+    top: 1rem;
+    left: 80vw;
+  }
+  label.viewswitch {
+    top: 2.5rem;
+    left: calc(80vw - 2.3rem);
+  }
+  label.colorswitch .slider,label.viewswitch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--color-grey-dark);
+    border: var(--global-border);
+    border-radius: var(--global-radius);
+    transition: all 0.4s;
+  }
+  label.colorswitch .slider:before,
+  label.viewswitch .slider:before {
+    position: absolute;
+    content: "";
+    width: 0.7rem;
+    height: 0.7rem;
+    left: 0.05rem;
+    top: 0.05rem;
+    background-color: var(--color-white);
+    border-radius: var(--global-radius);
+    transition: all 0.4s;
+  }
+  input.colorswitch:checked ~ label.colorswitch .slider,input.viewswitch:checked ~ label.viewswitch .slider  {
+    background-color: var(--color-grey-dark);
+  }
+  input.colorswitch:checked ~ label.colorswitch .slider:before,input.viewswitch:checked ~ label.viewswitch .slider:before {
+    transform: translateX(1rem);
+  }
+  label:before,label:after {
+    font-family: "Font Awesome 5 Free";
+    font-size: 0.7rem;
+    display: inline-block;
+    position: absolute;
+  }
+  label.colorswitch:before,label.viewswitch:before {
+    right: 2.5rem;
+  }
+  label.colorswitch:after,label.viewswitch:after {
+    left: 2.5rem;
+  }
+  input.viewswitch ~ label.viewswitch:before {
+    content: "\f0c8\f0c8"/*"top/bottom"*/;
+    transform: rotate(90deg);
+    margin-right:-0.25rem;
+  }
+  input.viewswitch ~ label.viewswitch:after {
+    content: "\f0c8\f0c8"/*"left/right"*/;
+  }
+  input.colorswitch ~ label.colorswitch:before{
+    content: "\f0eb"/*"light"*/;
+  }
+  input.colorswitch ~ label.colorswitch:after{
+    content: "\f186"/*"dark"*/;
+  }
+  input.colorswitch:checked ~ label.colorswitch,
+  input.colorswitch:checked ~ label.viewswitch {
+    color:var(--color-white);
+  }
+  input.colorswitch:checked ~ .colorswitch-invert {
+    color: var(--color-white);
+    background: var(--color-body);
+  }
+  input.colorswitch:checked ~ .colorswitch-invert .hangar-logo::after {
+    filter: invert(90%);
+    --webkit-filter: invert(90%);
+  }
+  input.colorswitch:checked ~ .colorswitch-invert code,
+  input.colorswitch:checked ~ .colorswitch-invert .embedchat iframe {
+    filter: invert(80%);
+    --webkit-filter: invert(80%);
+  }
+  input.viewswitch:checked ~ .viewswitch-change .viewswitch-container{
+    max-width: unset;
+  }
+  input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-webchat {
+    flex-flow: row;
+    justify-content: center;
+  }
+  input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-js,
+  input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-dimensions {
+    width: calc(30vw * 2);
+    max-width:970px;
+    height: calc(15vw * 2);
+    max-height:calc(970px / 2);
+    float: left;
+    margin-right:1rem;
+  }
+  input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .embedchat iframe {
+    width: calc(30vw * 1);
+    height: calc(15vw * 2);
+    max-height:calc(970px / 2);
+  }
+}
+@media screen and (min-width:768px) {
+  .live-streaming h2.logo {
+    float: left;
+    margin-right: 2rem;
+  }
+  .live-streaming .video-js, .live-streaming .video-dimensions {
+    width: calc(30vw * 2);
+    max-width:970px;
+    height: calc(15vw * 2);
+    max-height:calc(970px / 2);
+  }
+  .embedchat iframe {
+    width: calc(30vw * 2);
+    max-width: 48rem;
+    height: calc(15vw * 2);
+    min-height:24rem;
+  }
+}
+@media screen and (min-width: 850px) {
+}

assets/css/hangar-static-app.css.2020126

@@ -0,0 +1,252 @@
+:root{
+  --color-body: rgb(10,10,10);
+  --color-secondary: rgb(90,90,90) ;
+  --color-background: rgb(250,250,250);
+  --color-body-invert: rgb(200,200,200);
+  --color-background-invert: rgb(10,10,10);
+  --color-hangar: rgb(0,0,255);
+}
+
+@media screen{
+
+  body{
+    background-color: --color-background;
+    color: var(--color-body);
+    font-family: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
+  }
+  a{
+    color: var(--color-hangar);
+  }
+  a:hover{
+    color: --color-secondary;
+    border-bottom:0.2rem solid var(--color-hangar);
+    margin-bottom:-0.2rem;
+  }
+  h1,h2,h3,h4,h5,h6{
+    font-weight: bold;
+    margin:2rem auto;
+  }
+  h1{
+    font-size:4rem;
+  }
+  h2{
+    font-size:3.5rem;
+  }
+  h3{
+    font-size:3rem;
+  }
+  h4{
+    font-size:2.5rem;
+  }
+  h5{
+    font-size:2rem;
+  }
+  h6{
+    font-size:1.5rem;
+  }
+  ul{
+    list-style: none;
+  }
+  .code-inline, code {
+     border:none;
+  }
+  .hide{
+    display:none;
+  }
+  .up-arrow::before {
+    display:inline;
+    content:"\21D1";
+    float:left;
+  }
+  .up-arrow:hover{
+    display: inline;
+  }
+  .full-height{
+    min-height: 100vh;
+  }
+  /*hangar brand styles*/
+  .hangar-blue{
+    color:var(--color-hangar);
+  }
+  .hangar-blue-bg img{
+    background-color:var(--color-hangar);
+  }
+  .hangar-logo {
+    font-size:0px;
+    color:transparent;
+  }
+  .hangar-logo::after {
+      display:inline-block;
+      content:'';
+      background-image: url('../img/hangar-logo.svg');
+      width: 9rem;
+      height: 3.8rem;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: --color-background;
+  }
+  .hangar-logo.small::after{
+    width: 4rem;
+    height: 1.7rem;
+  }
+  .hangar-logo.icon::after{
+      background-image: url('../img/hangar-logo-icon.svg');
+      width: 3rem;
+      height:3rem;
+  }
+  .hangar-logo.small.icon::after{
+    width: 1.5rem;
+    height: 1.5rem;
+    background-position-y: 0.2rem;
+  }
+  .hangar-logo.hangar-blue-bg::after{
+    background-color:var(--color-hangar);
+  }
+  /* invert colors*/
+  .invert-bg{
+    color: #ccc;
+    background-color: var(--color-background-invert);
+  }
+  .invert-bg .hangar-logo::after {
+      background-image: url('../img/hangar-logo-invert.svg');
+      background-color: var(--color-body);
+  }
+  .invert-bg .code-inline,
+  .invert-bg code{
+     color: #aaa;
+     background-color: #333;
+  }
+  /* menu fixed to the right side*/
+  .menu-fixed-right {
+      position: fixed;
+      top: 1rem;
+      right: 1em;
+      max-width: 7rem;
+      padding: 0.5rem;
+      background: #f5f5f5;
+      font-size: 0.8rem;
+      text-align: right;
+      line-height: 0.9rem;
+  }
+  
+  .menu-fixed-right li {
+      padding: 0.2rem 0;
+      border-bottom:1px dotted var(--color-hangar);
+  }
+  
+  footer {
+    border-top: 1px solid var(--color-body-invert);
+    color:#666;
+    font-size: 0.8rem;
+  }
+  
+  /* only for class hangar-grafica */
+  .hangar-grafica h1,
+  .hangar-grafica h2,
+  .hangar-grafica h3,
+  .hangar-grafica h4,
+  .hangar-grafica h5,
+  .hangar-grafica h6 {
+    color: #333;
+    background-color:#eee;
+    padding: 0.5rem;
+  }
+  .hangar-grafica .logos a,
+  .hangar-grafica .icons a{
+    display: inline-block;
+  }
+  .hangar-grafica .logos img {
+    max-width: 30vw;
+    margin:1rem 0;
+  }
+  .hangar-grafica .icons img {
+    max-width: 15vw;
+  }
+  .hangar-grafica figcaption {
+    color: #888;
+    font-size: 0.9rem;
+    font-style: italic;
+  }
+  
+  .hangar-grafica .codeblock {
+    background-color: var(--color-body-invert);
+    text-align: left;
+    padding:1rem;
+  }
+  
+  .hangar-grafica a[href$=".SVG"]::after,
+  .hangar-grafica a[href$=".svg"]::after,
+  .hangar-grafica a[href$=".JPG"]::after,
+  .hangar-grafica a[href$=".jpg"]::after,
+  .hangar-grafica a[href$=".PNG"]::after,
+  .hangar-grafica a[href$=".png"]::after,
+  .hangar-grafica a[href$=".GIF"]::after,
+  .hangar-grafica a[href$=".gif"]::after {
+    content: '';
+    display: inline-block;
+    margin-bottom:1rem;
+    border-bottom: 1px solid grey;
+  }
+  .hangar-grafica a[href$=".SVG"]::after,
+  .hangar-grafica a[href$=".svg"]::after {
+    content:"file svg";
+  }
+  .hangar-grafica a[href$=".JPG"]::after,
+  .hangar-grafica a[href$=".jpg"]::after {
+    content:"file jpg";
+  }
+  .hangar-grafica a[href$=".PNG"]::after,
+  .hangar-grafica a[href$=".png"]::after {
+    content:"file png";
+  }
+  .hangar-grafica a[href$=".GIF"]::after,
+  .hangar-grafica a[href$=".gif"]::after {
+    content:"file gif";
+  }
+
+
+  /* only for live-streaming */
+  .live-streaming h1,
+  .live-streaming h2,
+  .live-streaming h3,
+  .live-streaming h4,
+  .live-streaming h5,
+  .live-streaming h6{
+    margin:0.5rem 0;
+  }
+  .live-streaming h1{
+    font-size: 2.5rem;
+  }
+  .live-streaming h2{
+    font-size: 2rem;
+  }
+  .live-streaming .video-js, .live-streaming .video-dimensions,.embedchat iframe {
+    width: calc(30vw * 3);
+    height: calc(15vw * 3);
+    margin-bottom:1.5rem;
+  }
+ .embedchat iframe {
+    max-width: 48rem;
+    min-height:24rem;
+    border: none;
+  }
+  .embedchat iframe .kiwi-statebrowser.kiwi-theme-bg,
+  .embedchat iframe .kiwi-container-toggledraw-statebrowser{
+   /* display:none;*/
+  }
+}
+@media screen and (min-width:768px) {
+  .live-streaming .video-js, .live-streaming .video-dimensions {
+    width: calc(30vw * 2);
+    max-width:970px;
+    height: calc(15vw * 2);
+    max-height:calc(970px / 2);
+  }
+  .embedchat iframe {
+    width: calc(30vw * 2);
+    max-width: 48rem;
+    height: calc(15vw * 2);
+    min-height:24rem;
+    }
+}

assets/favicons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

assets/favicons/header.txt

@@ -0,0 +1,20 @@
+<!-- header icons anf favicons -->
+<!-- include this in your html file -->
+<link rel="apple-touch-icon" sizes="57x57" href="/assets/faivcons/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/assets/faivcons/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/assets/faivcons/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/assets/faivcons/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/assets/faivcons/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/assets/faivcons/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/assets/faivcons/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/assets/faivcons/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/faivcons/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/assets/faivcons/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/faivcons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/assets/faivcons/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/assets/faivcons/favicon-16x16.png">
+<link rel="manifest" href="/assets/faivcons/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/assets/faivcons/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+<!-- end header icons anf favicons -->

assets/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

assets/img/hangar-logo-icon.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg3390"
+   version="1.1"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   width="512"
+   height="512"
+   viewBox="0 0 479.99997 480"
+   sodipodi:docname="hangar-logo-icon.svg"
+   inkscape:export-filename="/home/vitrubio/Documents/trabajo/hangar/hangar-logo/hangar-logo-icon-152.png"
+   inkscape:export-xdpi="28.5"
+   inkscape:export-ydpi="28.5">
+  <metadata
+     id="metadata3396">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3394" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="744"
+     id="namedview3392"
+     showgrid="false"
+     inkscape:zoom="0.70710678"
+     inkscape:cx="291.7134"
+     inkscape:cy="427.67035"
+     inkscape:window-x="0"
+     inkscape:window-y="336"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3390"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <g
+     id="g865"
+     transform="matrix(2.5235055,0,0,2.5235055,-231.6381,-0.71970655)">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 254.96688,104.95946 c 1.77274,3.36732 7.47095,4.04851 10.28944,1.23004 0.61585,-0.61585 1.27106,-1.66487 1.45603,-2.33113 0.19282,-0.69451 0.33705,-3.77805 0.33802,-7.226629 l 0.002,-6.015218 h -6.39592 -6.39592 v 6.500313 c 0,6.210624 0.0315,6.560124 0.70665,7.842624 z m -3.13363,-26.52564 h 24.08328 l -0.095,14.847678 -0.095,14.847672 -0.74921,2.13199 c -1.07251,3.05196 -2.85456,5.50416 -5.1331,7.06343 -2.80121,1.91696 -4.61256,2.37816 -9.34028,2.37816 -3.82482,0 -4.0295,-0.0333 -6.02248,-0.97725 -2.71262,-1.28493 -4.99939,-3.58255 -6.35514,-6.38535 l -1.04563,-2.1617 -9.58274,5.4433 -9.58274,5.44333 -0.0822,-6.61983 c -0.0723,-5.81614 -0.0223,-6.66369 0.41188,-6.98116 0.27178,-0.19873 4.18063,-2.37157 8.68632,-4.82851 l 8.19214,-4.467196 v -3.771181 -3.771196 l -8.60403,-0.08085 -8.60404,-0.08085 -0.0827,-6.01521 -0.0826,-6.015213 z m -24.99785,61.77572 c 1.26403,-6.89304 4.84264,-11.80142 10.71028,-14.69017 4.38578,-2.15921 6.76632,-2.67683 13.05974,-2.8397 4.48245,-0.116 5.79047,-0.0431 8.22637,0.45915 9.2777,1.9126 15.43925,7.4265 17.72579,15.86265 0.76584,2.82554 0.91775,10.04591 0.27322,12.98543 -0.64473,2.94042 -2.1106,6.4165 -3.72152,8.82503 -1.50117,2.24442 -5.17723,5.94048 -6.89306,6.93055 l -0.91367,0.52721 -2.21221,-5.08195 c -1.64591,-3.78104 -2.10586,-5.1174 -1.79676,-5.22044 0.22851,-0.0761 1.1402,-0.82391 2.02598,-1.66165 5.94898,-5.62629 4.88491,-16.33724 -1.96774,-19.80733 -4.97891,-2.52125 -12.8413,-2.66464 -18.04559,-0.32909 -2.43581,1.09311 -4.85315,3.63058 -5.78525,6.0727 -1.84953,4.84572 -0.17306,11.21525 3.61094,13.71939 1.27641,0.84467 3.81915,1.73068 4.11575,1.43409 0.099,-0.0991 0.1801,-2.4872 0.1801,-5.30699 v -5.12688 h 4.72079 4.72081 v 10.35529 10.3553 h -13.56119 -13.5612 l 0.084,-4.64466 0.084,-4.64465 1.89832,-0.15228 1.89832,-0.15228 -1.09145,-1.37056 c -1.33641,-1.67814 -2.61958,-4.16524 -3.29983,-6.39592 -0.5899,-1.93435 -0.87897,-7.95441 -0.4851,-10.10223 z m 10.54356,-83.85687 c 1.67056,5.398685 8.42987,8.861811 16.11986,8.258991 7.79306,-0.610899 12.56042,-4.220201 13.53049,-10.243748 0.62884,-3.904749 -0.48719,-7.618376 -3.08109,-10.252375 -3.33301,-3.38454 -9.59967,-4.784706 -16.17134,-3.613188 -8.5377,1.522013 -12.81434,8.041228 -10.39792,15.85032 z m -10.38275,-8.83246 c 1.82686,-9.81892 8.96204,-16.797596 19.32021,-18.89643 3.5003,-0.709247 10.15994,-0.484727 13.42603,0.452642 6.73641,1.933364 12.24204,6.332222 15.05773,12.030748 1.82644,3.696428 2.39778,6.385641 2.39778,11.28612 0,4.900483 -0.57134,7.5897 -2.39778,11.286124 -2.81569,5.698518 -8.32132,10.097387 -15.05773,12.03075 -3.26609,0.937368 -9.92573,1.161886 -13.42603,0.452638 -8.73745,-1.77044 -15.39547,-7.162108 -18.16644,-14.711189 -1.54221,-4.201543 -1.98016,-9.489674 -1.15377,-13.931403 z"
+       style="fill:#000000;stroke-width:0.30456755"
+       id="path848" />
+    <path
+       id="path3475"
+       d="M 96.560952,98.375354 V 29.097629 h 17.650358 17.65039 v 24.710535 24.710542 h 26.0343 26.03431 V 53.808164 29.097629 h 17.20368 17.20366 l 0.22599,68.103856 0.226,69.737145 0.0218,0.71459 H 183.9302 V 138.53023 109.4071 H 157.896 131.8617 v 29.12313 29.12312 H 114.21131 96.560952 V 98.375647 Z"
+       style="fill:#000000;stroke-width:0.88251895"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

assets/kiwiirc/themes/hangar/theme.css

@@ -0,0 +1,97 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #0000ff;
+    --brand-primary-hover: #2222dd;
+    --brand-midtone: #ededed;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #2222ee;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Input elements */
+    --brand-input-border: #e2e2e2;
+    --brand-input-fg: #616161;
+    --brand-input-bg: transparent;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: var(--brand-default-fg);
+    --comp-statebrowser-bg-networkname: #454545;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #0e0e0e;
+    --comp-statebrowser-network-border: #656565;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #42b992;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #0f0; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #d6d63d; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #0f0; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #d6d63d; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
+
+.kiwi-statebrowser {
+    box-shadow: 0px 0 2px #101010;
+}
+
+.hide,
+.kiwi-startup-common-section-info-content {
+  display:none;
+}

chat

@@ -0,0 +1 @@
+/usr/share/kiwiirc

index.html

@@ -0,0 +1,122 @@
+<!doctype html>
+<html class="no-js" lang="en" dir="ltr">
+<head>
+  <!--
+    version: 0.2
+    date: 2020 12 16
+    author: jorge@hangar.org
+  -->
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>live - hangar.org</title>
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
+  <link rel="stylesheet" href="./assets/css/video-js.min.css">
+  <link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
+  <!-- header icons anf favicons -->
+  <link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="https://grafica.hangar.org/assets/favicons/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="https://grafica.hangar.org/assets/favicons/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="https://grafica.hangar.org/assets/favicons/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="https://grafica.hangar.org/assets/favicons/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="https://grafica.hangar.org/assets/favicons/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="https://grafica.hangar.org/assets/favicons/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="https://grafica.hangar.org/assets/favicons/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="https://grafica.hangar.org/assets/favicons/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="https://grafica.hangar.org/assets/favicons/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://grafica.hangar.org/assets/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="https://grafica.hangar.org/assets/favicons/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://grafica.hangar.org/assets/favicons/favicon-16x16.png">
+  <link rel="manifest" href="https://grafica.hangar.org/assets/favicons/manifest.json">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="https://grafica.hangar.org/assets/img/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
+  <!-- end header icons anf favicons -->
+  <style type="text/css">
+  </style>
+</head>
+<body class="live-streaming">
+  <!-- change color switcher -->
+  <input type="checkbox" id=changecolor class="colorswitch">
+  <label for=changecolor class="colorswitch">
+    <span class="slider"></span>
+  </label>
+  <!-- change view switcher-->
+  <input type="checkbox" id=changeview class="viewswitch">
+    <label for=changeview class="viewswitch">
+      <span class="slider"></span>
+    </label>
+  <div id="wrapper" class="colorswitch-invert viewswitch-change">
+    <a name="top"></a>
+    <header class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="primary flex-child-shrink">
+            <h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
+            <h1>live streaming</h1>
+          </div>
+        </div>
+      </div>
+    </header>
+    <main class="grid-container viewswitch-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="primary flex-child-auto">
+            <content class="video-webchat">
+              <video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
+              <div id="webchat" class="embedchat">
+                <iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe>
+              </div>
+            </content>
+
+            <aside id="instructions" style="display:none;">
+              <p>
+                To create a new stream, pick a unique name for it, and set your broadcast
+                software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
+              </p>
+              <p>
+                You will then be able to watch the live stream at
+                <code>https://live.hangar.org/#<b>stream_name</b></code>.
+              </p>
+              <p>
+                You can also point your favourite video player directly to
+                <code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
+                Use this url also for html embedding.
+              </p>
+            </aside>
+          </div>
+        </div>
+      </div>
+    </main>
+    <footer class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="cell small-12 flex-container flex-dir-column">
+          <div class="text-center flex-child-shrink">
+            <p>
+              another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script src="./assets/js/jquery-slim.min.js"></script>
+  <script src="./assets/js/video.min.js"></script>
+  <script>
+    $(function() {
+      if (window.location.hash) {
+        var name = window.location.hash.substr(1);
+        console.log('playing "' + name + '"');
+        $('#title').text('live.hangar.org - ' + name);
+        var v = videojs('video');
+        v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
+      } else {
+        $('#v-ideo').hide();
+        $('#w-ebchat').hide();
+        $('#instructions').show();
+      }
+    });
+  </script>
+</body>
+</html>