HTML/CSS website redesigned Randio

img/randio_liberation_logo.svg

@@ -0,0 +1,101 @@
+<?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"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="randio_liberation_logo.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.98994949"
+     inkscape:cx="50.347852"
+     inkscape:cy="947.57221"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1366"
+     inkscape:window-height="741"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.265;stroke:#000000;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect815"
+       width="71.059525"
+       height="27.214285"
+       x="19.654762"
+       y="16.730654"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       inkscape:export-filename="/usr/share/icons/Ultra-Flat/custom-icons/flowRoot829.png" />
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.26458332;stroke-opacity:1"
+       id="rect825"
+       width="8.0076342"
+       height="1.4404112"
+       x="19.654762"
+       y="16.730654"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       inkscape:export-filename="/usr/share/icons/Ultra-Flat/custom-icons/flowRoot829.png" />
+    <rect
+       y="42.455345"
+       x="19.654762"
+       height="1.4404112"
+       width="8.0076342"
+       id="rect827"
+       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.26458332;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       inkscape:export-filename="/usr/share/icons/Ultra-Flat/custom-icons/flowRoot829.png" />
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot829"
+       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
+       transform="matrix(0.36241496,0,0,0.36241496,-7.4629343,-8.3489842)"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       inkscape:export-filename="/usr/share/icons/Ultra-Flat/custom-icons/flowRoot829.png"><flowRegion
+         id="flowRegion831"><rect
+           id="rect833"
+           width="194.95944"
+           height="62.124382"
+           x="90.408653"
+           y="83.072716" /></flowRegion><flowPara
+         id="flowPara835"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:38.93633652px;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono'">randio~</flowPara></flowRoot>  </g>
+</svg>

img/randio_r_logo.svg

@@ -0,0 +1,430 @@
+<?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"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666665 8.4666669"
+   version="1.1"
+   id="svg5137"
+   inkscape:export-filename="/media/618ea635-ea17-48e4-8b01-9cb0b4b18b6a/Documents/randio/randio_sito/img/logo-tilde32.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="randio_r_logo.svg">
+  <defs
+     id="defs5131" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="18.876634"
+     inkscape:cy="23.126508"
+     inkscape:document-units="mm"
+     inkscape:current-layer="svg5137"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="741"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5682" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid5684"
+       originx="0.13229167"
+       originy="0.13229167"
+       color="#ff3f00"
+       opacity="0.1254902"
+       empcolor="#ffffff"
+       empopacity="0.25098039"
+       empspacing="0"
+       dotted="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5134">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="cornice"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.53332)"
+     style="display:inline">
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0.13229167,288.66561 H 8.3343749 v 8.20208 H 0.13229167 Z"
+       id="path5694"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.33467439px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0.26458333,288.93019 H 2.38125"
+       id="path5696"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5698"
+       d="M 0.26458333,289.19478 H 2.38125"
+       style="fill:none;stroke:#000000;stroke-width:0.33467439px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5700"
+       d="M 0.26458333,296.33852 H 2.38125"
+       style="fill:none;stroke:#000000;stroke-width:0.33467439px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:0.33467439px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 0.26458333,296.60311 H 2.38125"
+       id="path5702"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="r"
+     style="display:none">
+    <text
+       transform="translate(0,-288.53331)"
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:54.44511414px;line-height:1.25;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono';letter-spacing:0px;word-spacing:0px;display:inline;fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:1.36112785"
+       x="2.3681526"
+       y="294.4646"
+       id="text5714"><tspan
+         sodipodi:role="line"
+         id="tspan5712"
+         x="2.3681526"
+         y="294.4646"
+         style="font-size:7.25934887px;line-height:3.25;fill:#cccccc;stroke-width:1.36112785">r</tspan></text>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="r-pix"
+     style="display:none">
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,294.22186 H 3.96875"
+       id="path5730"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5777"
+       d="M 3.43958,5.4239583 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,5.159375 H 3.96875"
+       id="path5779"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5781"
+       d="M 3.43958,4.8947917 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,4.6302083 H 3.96875"
+       id="path5783"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5785"
+       d="M 3.43958,4.365625 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,3.571875 H 3.96875"
+       id="path5791"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5793"
+       d="M 3.43958,3.3072917 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,3.0427083 H 3.96875"
+       id="path5795"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5797"
+       d="M 3.43958,2.778125 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.1749967,2.5135417 h 0.52917"
+       id="path5799"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5801"
+       d="m 3.1749967,2.2489583 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.9687467,3.0427083 h 0.52917"
+       id="path5805"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5807"
+       d="m 4.2333333,2.778125 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.2333333,2.778125 h 0.52917"
+       id="path5809"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5813"
+       d="m 4.4979167,2.5135417 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.7624967,2.5135417 h 0.52917"
+       id="path5815"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5817"
+       d="m 5.0270833,2.2489583 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.7624967,2.778125 h 0.52917"
+       id="path5819"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5821"
+       d="m 5.2916633,2.5135417 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5823"
+       d="m 3.9687467,3.3072917 h 0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5825"
+       d="M 4.23333,3.0427083 H 4.7625"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 5.2916633,2.2489583 h 0.52917"
+       id="path5827"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.571875,292.76666 v -0.52917"
+       id="path5738"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5740"
+       d="m 3.8364583,292.76666 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="tilde"
+     style="display:inline">
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5732"
+       d="m 2.778125,293.03124 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 3.0427083,292.76666 v -0.52917"
+       id="path5734"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5736"
+       d="m 3.3072917,292.76666 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.1010417,292.76666 v -0.52917"
+       id="path5742"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5744"
+       d="m 4.365625,292.76666 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 4.6302083,293.03124 v -0.52917"
+       id="path5746"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5748"
+       d="m 4.8947917,293.03124 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 5.159375,293.03124 v -0.52917"
+       id="path5750"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5752"
+       d="m 5.4239583,293.03124 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 5.6885417,293.03124 v -0.52917"
+       id="path5754"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       inkscape:connector-curvature="0"
+       id="path5756"
+       d="m 5.953125,293.03124 v -0.52917"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       transform="translate(0,-288.53331)"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="m 6.2177083,292.76666 v -0.52917"
+       id="path5758"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       d="M 3.43958,4.1010417 H 3.96875"
+       id="path5787"
+       inkscape:connector-curvature="0"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path5789"
+       d="M 3.43958,3.8364583 H 3.96875"
+       style="display:inline;fill:none;stroke:#000000;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96" />
+  </g>
+</svg>

index.html

@@ -0,0 +1,308 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <title>Randio algorithmic radio</title>
+    <meta name="description" content="Algorithmic real-time internet radio fueled by free software">
+    <link rel="stylesheet" type="text/css" href="stile.css" />
+    <meta property="og:image" content="img/randio_s.png" charset="UTF-8"/>
+    <meta property="og:title" content="Randio Radio"/>
+    <meta property="og:url" content="http://www.randio.it"/>
+  </head>
+  <body>
+    <div id="logo" >
+      <div class="pd-style logo" style="width:16em;margin: 3em 0 0 5em;">
+        <h1 style="margin-left:0.5em;font-size: 3em;font-family: monospace;font-weight: 400;">randio~</h1>
+      </div>
+    </div>
+
+    <main>
+
+  <section id="radio-info">
+    <div id="radio-wrapper">
+      <audio controls preload style="margin:auto">
+        <source src="http://www.randio.it:8000/randio.mp3" />
+      </audio>
+    </div>
+    <div class="info-wrapper">
+      <div class="pd-style" style="flex: 1 1 100%;width:100%;margin-bottom:1.3em">
+              <h2 style="margin-left:1em">Composition</h2>
+            </div>
+      <div style="width:100%;margin-bottom:1.3em" class="pd-style">
+        <h3 style="margin-left:1em">Artist</h3>
+      </div>
+            <div style="width:100%;" id="piece-text" class="pd-style">
+            <div id="description-wrapper">
+              <div id="info-paragraph-wrapper">
+                <p>
+
+                      A set of things working together as parts of a mechanism or an interconnecting network; a complex whole.
+                      A set of principles or procedures according to which something is done; an organized scheme or method.
+
+                  Oxford English Dictionary
+
+
+                  For his 1965 composition <i>It's Gonna Rain</i>, Steve Reich designed a generative mechanical system.
+                  Steve Reich: <i>It's Gonna Rain</i> (1965)
+
+                  It was a system of two tape recorders.
+
+                  A system of two tape recorders
+
+                  Reich had made field recordings of speech on tape.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+  </section>
+        <div>
+            <input name="tendina" type="checkbox" id="bang" style="opacity:0" checked>
+            <label class="bang" for="bang"></label>
+            <h5 style=""><!--about--></h5>
+          <!--
+          <input name="tendina" type="radio" id="toggle-1" style="opacity:0">
+          <label class="about-bar dx" for="toggle-1"></label>
+          <input name="tendina" type="radio" id="toggle-2" style="opacity:0">
+          <label class="about-bar sx" for="toggle-2"></label>
+          -->
+        <aside id="about">
+          <div class="accordion-strip">
+            <a class="accordion-title" href="#about-randio"><h3>About Randio</h3></a>
+            <a class="accordion-title" href="#listen"><h3>How to listen</h3></a>
+            <a class="accordion-title" href="#functioning"><h3>How it works</h3></a>
+            <a class="accordion-title" href="#further"><h3>More information about each piece</h3></a>
+            <a class="accordion-title" href="#random"><h3>Randomness</h3></a>
+            <a class="accordion-title" href="#contribution"><h3>How to contribute</h3></a>
+            <a class="accordion-title" href="#policy"><h3>Policy</h3></a>
+            <a class="accordion-title" href="#patches"><h3>Patches</h3></a>
+            <a class="accordion-title" href="#contacts"><h3>Contacts</h3></a>
+            <a class="accordion-title" href="#other-radios"><h3>Other interesting radios</h3></a>
+          </div>
+
+          <!---https://stackoverflow.com/questions/10865717/multi-column-vertical-scrolling-in-css-javascript-->
+
+          <div class="text-wrapper">
+            <article id="about-randio"><div class="text">
+                <p>
+                  Radio Randio is an algorithmic in-real-time internet radio. All the music is generated in real-time by algorithms developed using
+                  <a href="http://puredata.info/" target="_blank">Pure Data</a>. We are not associated in any way with Pure Data, but we love it.
+                  We also love open-source software and use it to make the stream possible.
+                  The streaming server is self-maintained by us and at the moment could be not 100%
+                  reliable. We are open to collaboration and we hope to attract artists whishing to share
+                  their patches with us and our listeners.
+                </p>
+              </div>
+            </article>
+            <article id="listen">
+              <div class="text">
+                <p>
+                  To listen Randio, just click play above, there should be a little player. As an alternative you can connect your media player to
+                  <a href="http://www.randio.it:8000/randio.mp3" class="barra" target="_blank">http://www.randio.it:8000/randio.mp3</a>.
+                  It is also possible to download an <a href="http://www.randio.it:8000/randio.mp3.m3u" class="barra" target="_blank">m3u</a>
+                  file or an <a href="http://www.randio.it:8000/randio.mp3.xspf" class="barra" target="_blank">xspf</a>
+                  one.
+                </p>
+              </div>
+            </article>
+            <article id="functioning">
+              <div class="text">
+                <p>
+                  Randio consists of an <a href="http://www.icecast.org/" class="barra" target="_blank">Icecast</a>
+                  server providing an online audio stream and of Pure Data
+                  patches, one for each piece, generating the audio stream. These patches are called by a
+                  scheduler, which is also a patch. Each piece has a minimum streaming time and an additional variable one defined a-priori.
+                  When the patch is called by the scheduler, the total streaming time is computed.
+                  The scheduler calls all the patches one after the other, and at the end of this playlist
+                  it starts over and over again. We prefer to use non-deterministic patches, but determistic ones are also used.
+                  Occasionally, we also stream soundscapes. We share all patches included in our playlist with our contributors.
+                </p>
+              </div>
+            </article>
+            <article id="further">
+              <div class="text">
+                <p>
+                Each piece is complemented by an info.txt file which contains information about the artist, the piece itself
+                and the data or samples used to create the piece. If the piece use data released under come kind on creative-commons
+                license, or other compatible licenses, citations may be found in this file as well. To browse info.txt files follow this link: <a href="http://www.randio.it/info/" class="barra" target="_blank">http://www.randio.it/info/</a>
+                </p>
+              </div>
+            </article>
+            <article id="random">
+              <div class="text">
+                <p>
+                  In Randio each patch is opened and then closed each time it is performed. This process has the side effect that, for each performance, the random numbers generated by Pd's [random] object are always the same. This behavior could be sometimes desirable, as instance when an artist wants to use randomness during the process of composition, but also wants to be sure that its piece will eventually sound as expected.
+                  In other cases different random numbers for each performance are desired, in order to have a slightly different sound for each execution. In the latter case Pd's [random] object alone is not sufficient, it is necessary to change the seed of the random number generator at each boot of the patch.
+                  For this purpose, we here provide two objects to be used when composing a randio piece. The first one is [urandom], which uses [binfile], which in turn is a component of <a href="http://puredata.info/downloads/mrpeach" class="barra" target="_blank">mrpeach</a>
+                  library. Here [binfile] is used to read 1 byte of data from /dev/urandom, a special file capable to supply pseudo-random data in Unix-like operating systems. Another approach is exploited by [trandom], which generates a random seed by using current system time.
+                  Here system time is provided by the [time] object from <a href="https://puredata.info/downloads/zexy" class="barra" target="_blank">zexy</a> library. Both these objects works just like [random] and can be used instead of the traditional [random] object. [urandom] can be downloaded
+                  <a href="randiom/urandom.pd" class="barra" target="_blank">here</a>, while
+                  [trandom] can be downloaded <a href="randiom/trandom.pd" class="barra" target="_blank">here</a>,
+                  feel free to download and use them for your next patch. We tend to do not stream patches without some randomness inside, and contributions without randomness are discouraged.
+                </p>
+              </div>
+            </article>
+            <article id="contribution">
+              <div class="text">
+                <p>
+                  We welcome new artists that whishes to stream their patches through Randio. We encourage the creation and stream of non-deterministic patches, but determistic ones
+                  are also appreciated. If you would like to send us a patch, please do. Send us an
+                  <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">email</a>
+                  following these guidelines:
+                  <ul>
+                    <li>The patch must auto-start. Be sure to activate it with [loadbang] objects.</li>
+                    <li>DSP must auto-start. Be sure to activate it with a [;pd dsp 1] message bound
+                        to a [loadbang].</li>
+                    <li>Audio output must flow through a [dac~] object.</li>
+                    <li>Each patch must be contained in its own directory, even if only one .pd
+                        file is involved.</li>
+                    <li>If a patch needs custom objects or samples these must be stored in their own
+                        sub-directory, inside the directory of the patch. These sub-directories must be
+                        declared inside the patch by using a [declare] object. Always use relative and
+                        never absolute paths. Example: [declare -path ./samples]</li>
+                    <li>Add an info.txt file to your patch. An info.txt file is a text file containing
+                        information about the piece and the artist. It should be written following simple
+                        rules as described inside <a href="txt/info.txt" class="barra" target="_blank">info.txt</a>
+                        sample file. In this file you can also write the name of the license of your patch and
+                        citations about samples or other things used that require a citation. Example: a sample file
+                        released under a Creative Commons Attribution license.</li>
+                    <li>Specify the time that your composition takes inside info.txt file. This time is composed by a fixed duration,
+                        (as to say the minimum amount of time the composition should take), and a variable duration (an additional number of minutes
+                        that can be added to the fixed duration).
+                        If your piece needs a fixed duration only, these values will be something like: Fixed_duration: 4, Variable_duration: 0.
+                        If your piece has a variable duration, add a reasonable amount of minutes to the variable duration camp inside info.txt.
+                    <li>Add a license file. It is a text file containing the license of your choice for your patch. Example:
+                        <a href="txt/license.txt" class="barra" target="_blank">license.txt</a>.</li>
+                    <li>Compress all these files in an .tar.gz or .zip archive. The content of the
+                        archive should have the following structure:
+                      <ol>
+                        <li>piece_name</li>
+                        <li>info.txt</li>
+                        <li>license.txt</li>
+                        <li>piece_name.pd</li>
+                        <li>objects</li>
+                        <li>obj1.pd</li>
+                        <li>samples</li>
+                        <li>sample1.wav</li>
+                        <li>sample2.wav</li>
+                      </ol>
+                    </li>
+                    <li>Send the archive to us by writing an <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">email</a> with the subject: "New Randio patch!".</li>
+                    <li>All patches sent in a different way as described, with a not properly designed archive or patch, or sent to a different address, or sent with a different subject will be ignored.</li>
+                    <li>If you send us a patch as described above, you implicitly accept our policy, as described below.</li>
+                  </ul>
+                </p>
+              </div>
+            </article>
+            <article id="policy">
+              <div class="text">
+                  <p>
+                  Radio Randio developers are free to stream Radio Randio and its contents in any way, with any means and for any purpose. People who wish to contribute to Radio Randio must understand and accept that. If an artist decide to share his work with us and our listeners, we will cite him as the original
+                  author of his work, but in order to make our collaboration possible it is important that:
+                  <ul>
+                    <li> The code must be released under the terms of some open source license that grant us the right to use and share the code.</li>
+                    <li> The music generated and the data used to generate it (for example samples) must be released using licenses
+                    that grant to us the possibility to stream freely without restrictions.</li>
+                  </ul>
+                  <p>
+
+                    If you use samples or other data that is released under the terms of a license that require citation of the original author, remember to do that and write all required references inside the info.txt file and the patch. It is forbidden the use of samples, compositions or anything that is protected by any form of copyright that does not grant
+                    the possibility to share the work freely and without payment and/or belonging to any kind of copyright collection society. The verification of the copyright status of each part of a patch is a duty of the author of the patch itself, and must be
+                    done before sending the patch to Randio. Either if the author of a patch is member of any kind of copyright collection society or not, Randio and its developers
+                    can not be held responsible for issues regarding the author of a patch and any copyright collection society. When we receive a patch and its complementary files from an author we trust that the sender has the rights to send us that
+                    patch and its complementary files. The author of the patch, will be cited during the stream of its music by writing his name and the name of the piece
+                    as Icecast metadata. The correct operation of this citation process is not 100% guaranteed but it should work. We like and accept the following licenses:
+                  </p>
+                  <ul>
+                    <li> Creative Commons licenses that also allow commercial use of the work. </li>
+                    <li> BSD licenses. </li>
+                  </ul>
+                  <p>
+                    Neither Randio nor the names of its contributors may be used to endorse or promote products derived from Randio and its
+                    software and its music without specific prior written permission. Once a patch is sent as described in the <i>How to contribute</i> section, the author of the patch implicitly accept this policy,
+                    and grant to Radio Randio developers the right to use that patch for any purpose, even commercial ones. This policy can change in any time and without prior notice. If you don't agree to this policy, do not use this service.
+                </p>
+                </p>
+              </div>
+            </article>
+            <article id="patches">
+              <div class="text">
+                  <p>
+                    We share our code with all contributors. To be a contributor you must send us a patch as described above, and this patch must be accepted to be added to the playlist. After that, we will send you an email containing an username and a password that will grant you access to our repository. Our repository of patches is available here: <a href="http://www.randio.it/patch/" class="barra" target="_blank">http://www.randio.it/patch</a>. Read <a href="http://www.randio.it/patch/POLICY.txt" class="barra" target="_blank">POLICY.txt</a> file before downloading any file from us and, please, in order to prevent server overloads, avoid the download of the entire repository using automatic download systems.
+                  </p>
+                </div>
+            </article>
+            <article id="contacts">
+              <div class="text">
+                <p>You can reach us at <a href="mailto:randio@autoproduzioni.net" class="barra" target="_blank">[email]</a></p>
+              </div>
+            </article>
+            <!---<div id="shadow-caster" style=-"box-shadow: 0px -80px 40px white;width: 100%;height: 5em;"></div>--->
+            <article id="other-radios">
+              <div class="text">
+                other interesting radios
+              </div>
+            </article>
+          </div>
+          <div id="ring-wrapper">
+            <div id="pd-ring">
+                          <table class="pd_ring" cellpadding="0" cellspacing="0" border="0">
+                          <tr>
+                            <td class="pd_ringnext">
+                              <input class="pd_ringnext" type="image" name="next" src="http://pd.klingt.org/pd_ring/next.gif" /></td>
+                            <td class="pd_ringlist">
+                              <input class="pd_ringlist" type="image" name="list" src="http://pd.klingt.org/pd_ring/list.gif" /></td>
+                            <td class="pd_ringrandom">
+                              <input class="pd_ringrandom" type="image" name="random" src="http://pd.klingt.org/pd_ring/random.gif" /></td>
+
+                            <td class="pd_ringprevious">
+                              <input class="pd_ringprevious" type="image" name="previous" src="http://pd.klingt.org/pd_ring/previous.gif" /></td>
+                          </tr>
+                          <tr>
+                            <td class="pd_ringinfo" colspan="4">
+                              <a href="http://pd.klingt.org/pd_ring/info.html" target="_blank">
+                              <img class="pd_ringinfo" src="http://pd.klingt.org/pd_ring/pd_ring.gif" alt="pd_ring info"/></a>
+                            </td>
+                          </tr>
+                        </table>
+          </div>
+
+
+        </aside>
+      </div>
+    </main>
+    <div class="cookies">
+      <p style="margin:auto">We respect your privacy and this website does not use cookies.</p>
+    </div>
+
+    <script>
+    function getTitle(){
+      var result = '';
+      $.ajax({
+               url: "./title.php",
+               async: false,
+               success: function(data) {
+                          result = data;
+                        }
+      });
+      return result;
+    }
+    function printTitle(){
+      var title = getTitle()
+      var titlezone = document.querySelector('h7');
+      titlezone.textContent = 'Now playing: ' + title;
+    }
+    function printInfo(){
+      var title = getTitle()
+      var titlezone = document.querySelector('h6');
+      titlezone.innerHTML = '<a href=./info/' + title + '.info.txt class="barra" target="_blank">[Track info]</a> <a href="txt/playlist.txt" class="barra" target="_blank">[Playlist]</a><br><br>';
+    }
+    printTitle();
+    printInfo();
+    setInterval(printTitle, 10*1000);
+    setInterval(printInfo, 10*1000);
+    </script>
+  </body>
+</html>

info/README

@@ -0,0 +1 @@
+qui ci vanno i file info delle patch

listeners.php

@@ -0,0 +1,4 @@
+<?php
+	$output = shell_exec('curl -s "http://randio.it:8000" | sed "s/tr>/\n/g" | grep -i listeners | sed "s/<td>//g" | sed "s/<\/td>//g" | sed "s/<td class=\"streamstats\">//g" | sed "s/<\///g" | grep current | cut -d ":" -f 2');
+	echo $output
+?>

patch/README

@@ -0,0 +1 @@
+qui ci vanno le patch

randiom/README

@@ -0,0 +1 @@
+qui ci vanno oggetti randomizzatori

stile-mobile.css

@@ -0,0 +1,458 @@
+@media screen and (max-width: 700px) {
+
+.accordion-strip{
+	right: 0;
+	position: absolute;
+}
+
+.accordion-strip > a > h3{
+	margin-top:0em;
+}
+
+#about{
+	bottom:0 !important;
+}
+}
+
+
+@media screen and (max-width: 999px) {
+
+body{
+	position: relative;
+}
+
+main{
+	position: relative;
+
+}
+
+aside{
+}
+
+  nav {
+		flex-wrap: wrap;
+		position: relative;
+		padding:2em;
+  }
+
+	#logo{
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	#logo > div{
+	margin: auto;
+	}
+
+	#radio-player{
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.accordion-strip{
+		bottom: 0;
+		position: absolute;
+		margin-top: 5em;
+	}
+
+	.accordion-title{
+		flex: 1 1 auto;
+	}
+
+	.text-wrapper{
+		height: 100vh;
+		padding: 0 2em;
+	}
+}
+
+
+@media screen and (min-width: 1000px) {
+
+	nav {
+	  -moz-box-shadow:    0 0 10px #000000;
+	  -webkit-box-shadow: 0 0 10px #000000;
+	  box-shadow:         0 0 10px #000000;
+	  flex: 1 1 100%;
+		height:7em;
+		display: flex;position: fixed;
+		width: 100%;
+		background: white;
+		z-index: 20;
+	}
+
+	main{
+	width: 100%;
+	height: 100%;
+	height: 87em;
+	display: flex;
+	justify-content: left;
+	padding-top:7em;
+	}
+
+	#radio-player{
+	position: relative;
+	flex:0 1 50%;
+	display: flex;
+	flex-wrap: wrap;
+	align-content: flex-start;
+	padding: 5em 5em 5em 0;
+	}
+
+
+
+	#now-playing{
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-content: flex-start;
+		padding: 0 4em 0 4em;
+	}
+
+	#piece-text
+	{
+		border: solid 1px black;
+		width:100%;
+	}
+
+	#social{
+		flex: 0 1 18%;
+		padding-top:5em;
+	}
+
+	#connected-people{
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		border: solid 1px black;
+		height: 13em;
+		margin-bottom: 3em;
+	}
+
+	#piece-text > h3{
+		padding-left: 1em;
+		padding-right: 1em;
+	}
+
+	#piece-text > p{
+		width: 70%;
+		margin: auto;
+		margin-bottom: 3em;
+	}
+
+	#about{
+		height: 100vh;
+		right: -60%;
+		max-width: 60%;
+		position: fixed;
+		z-index: 33 !important;
+		padding: 0 0 0 1%;
+	}
+
+	#about:hover{
+	animation-name: tendina;
+	animation-duration: 1s;
+	animation-fill-mode: forwards;
+	animation-timing-function: cubic-bezier(.17,.84,.44,1);
+	column-fill:auto;
+	}
+
+	.text-wrapper{
+		width: 80%;
+	}
+
+	.text
+	{
+		max-width: auto;
+		margin: 2em auto;
+		border-right: solid black 0.3em;
+		padding-right: 2.5em;
+		column-count: 2;
+		column-fill: auto;
+		width:100%;
+		max-height: 30em;
+	}
+
+	.accordion-title{
+		margin: 1em 0.5em 0 0.5em;
+	}
+
+	.accordion-strip{
+	}
+
+	.accordion-strip > a > h3{
+		margin-top:1em;
+	}
+	/*
+	#about:hover > .cookies{
+		right: 0em;
+		width: 40%;
+		font-size: 0.8em;
+	}
+	*/
+
+	#logo{
+		margin: auto;
+		flex: 1 1 auto;
+	}
+
+	#logo > div{
+		margin-left: 1em;
+	}
+
+	#news
+	{
+		display: flex;
+		margin: 0 17em 0 4em;
+	}
+
+	.cookies{
+		bottom: 0;
+	}
+
+	#pd-ring{
+		position: absolute;
+		bottom: 2em;
+		width: 100%;
+	}
+
+	#pd-ring > table{
+		margin:auto;
+	}
+
+	@keyframes tendina {
+	    0% {right: -60%;}
+	    100% {right: 0;}
+	}
+
+	@keyframes schiacciamento {
+	    0% {height: 0em;}
+	    50% {height: 4em;}
+	    100% {height: 0em;}
+	}
+
+	@keyframes scomparsa {
+	    0% {color: transparent;}
+	    20% {color: white;}
+	    50% {color: white;}
+	    80% {color: transparent;}
+	}
+
+	h1 {
+	  background-color:#ffffff;
+	  font:36px mono;
+	  font-weight:bold;
+	  color:#000000;
+	  text-decoration:none;
+	  margin-left:10%;
+	  margin-right:10%;
+	}
+
+	#now-playing > h2, #now-playing > h3{
+		background: none;
+		border:solid 1pt black;
+		flex:1 1 100%;
+		padding-left:1em;
+		padding-right:1em;
+		margin-bottom: 0;
+		margin-top: 1em;
+	}
+
+	#piece-text{
+		margin-bottom: 0;
+		margin-top: 1em;
+	}
+
+	a.logo:link {
+	  color:#000000;
+	  text-decoration:none;
+	}
+
+	a.logo:visited {
+	  color:#000000;
+	  text-decoration:none;
+	}
+
+	a.logo:hover {
+	  color:#f1b2b7;
+	  text-decoration:underline;
+	}
+
+	a.logo:active {
+	  color:#ffffff;
+	  background-color:#ffffff;
+	  text-decoration:none;
+	}
+
+	a.corpo:link {
+	  color:#000000;
+	  text-decoration:underline;
+	}
+
+	a.corpo:visited {
+	  color:#000000;
+	  text-decoration:underline;
+	}
+
+	a.corpo:hover {
+	  color:#f1b2b7;
+	  text-decoration:none;
+	}
+
+	a.corpo:active {
+	  color:#ffffff;
+	  background-color:#ffffff;
+	  text-decoration:none;
+	}
+
+	a.barra:link {
+	  color:#000000;
+	  text-decoration:underline;
+	}
+
+	a.barra:visited {
+	  color:#000000;
+	  text-decoration:underline;
+	}
+
+	a.barra:hover {
+	  color:#f1b2b7;
+	  background-color:#ffffff;
+	  text-decoration:none;
+	}
+
+	a.barra:active {
+	  color:#ffffff;
+	  background-color:#ffffff;
+	  text-decoration:none;
+	}
+
+	audio {
+	  background-color:#000000;
+	}
+
+	.pd_ring {
+	    width:260px;
+	    height:75px;
+	    background-color:"#FFFFFF";
+	}
+
+	.pd_ringnext {
+	    width:55px;
+	    height:25px;
+	    vertical-align:middle;
+	    border:none;
+	}
+
+	.pd_ringlist {
+	    width: 62px;
+	    height: 25px;
+	    vertical-align:middle;
+	    border:none;
+	}
+
+	.pd_ringrandom {
+	    width:63px;
+	    height:25px;
+	    vertical-align:middle;
+	    border:none;
+	}
+
+	.pd_ringprevious {
+	    width:80px;
+	    height:25px;
+	    vertical-align:middle;
+	    border:none;
+	}
+
+	.pd_ringinfo {
+	    width:260px;
+	    height:50px;
+	    vertical-align:middle;
+	    border:none;
+	}
+
+}
+
+
+
+/*=======================COMUNE=====================*/
+
+html{
+	width: 100%;
+	height: 100%;
+}
+
+body {
+  margin:0;
+  font-family: monospace;
+	width: 100%;
+	height:100%;
+	height: 100vh;
+}
+
+#about{
+	background: #333333;
+	z-index: 10;
+}
+
+#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
+{
+	display:block;
+}
+
+
+.text-wrapper > article{
+	margin: 0;
+	font-size: 1.2em;
+}
+
+.accordion-strip > a > h3{
+	margin: 0;
+	background: white;
+	border:0.1em solid black;
+	color:black;
+	padding-left:1em;
+	padding-right:1em;
+}
+
+.accordion-strip{
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.accordion-title{
+	text-decoration: none;
+	display: block;
+}
+
+.text
+{
+	display:none;
+	color:white;
+	line-height: 1.5em;
+	max-height: 30em;
+	overflow: scroll;
+}
+
+.cookies{
+	background:black;
+	width:100%;
+	height: 0%;
+	position: fixed;
+	text-align: center;
+	left: 0;
+	display: flex;
+	animation-name: schiacciamento;
+	animation-duration: 4s;
+	animation-delay: 0.3s;
+	animation-fill-mode: forwards;
+	animation-iteration-count: 1;
+}
+
+.cookies > p{
+	color: white;
+	animation-name: scomparsa;
+	animation-duration: 4s;
+	animation-delay: 0.3s;
+}

stile.css

@@ -0,0 +1,579 @@
+
+/*=======================COMUNE=====================*/
+
+html{
+	width: 100%;
+	height: 100%;
+}
+
+body {
+  margin:0;
+  font-family: monospace;
+}
+
+article:not(:target){
+	display: none;
+}
+
+article{
+	height: 100%;
+}
+
+
+#about{
+	background: transparent;
+	z-index: 10;
+	/*
+	border-left:solid 1em white;
+	*/
+	transition: border-left 3s ease-in 4s;
+}
+
+#about-randio:target > .text, #listen:target > .text, #functioning:target > .text, #further:target > .text, #random:target > .text, #contribution:target > .text, #policy:target > .text, #patches:target > .text, #contacts:target > .text, #other-radios:target > .text
+{
+	display:block;
+}
+
+#radio-wrapper{
+	width:100%;
+	/*margin: 0.5em 0 1.5em -3.7em;
+	allineare il player con info-wrapper*/
+	margin: 0.5em 0 1.5em 0em;
+	justify-content: center;
+}
+
+#now-playing{
+	margin: auto;
+	width: 100%;
+}
+
+.text
+{
+	display:none;
+	color:#333333;
+	line-height: 1.5em;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.pd-style{
+	background:white;
+	border: solid 0.12em black;
+	position: relative;
+}
+
+h3.pd-style{
+
+}
+
+.pdlet{
+}
+
+.pd-style::before{
+        content: " ";
+        display: block;
+				position: absolute;
+				background: black;
+				width: 2em;
+				height: 0.4em;
+}
+
+.pd-style::after{
+        content: " ";
+        display: block;
+				position: absolute;
+				background: black;
+				width: 2em;
+				height: 0.4em;
+				bottom:0;
+}
+
+.text-wrapper{
+	height:100%;
+}
+
+.text-wrapper > article{
+	margin: 0;
+	font-size: 1.2em;
+}
+
+.accordion-strip > a > h3{
+	margin: 0;
+	background: white;
+	border:0.1em solid black;
+	color:black;
+	padding-left:0.4em;
+	padding-right:0.4em;
+}
+
+.accordion-strip{
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.accordion-title{
+	text-decoration: none;
+	display: block;
+}
+
+.text
+{
+}
+
+.cookies{
+	background:black;
+	width:100%;
+	height: 0%;
+	position: fixed;
+	text-align: center;
+	left: 0;
+	display: flex;
+	bottom:0;
+	animation-name: schiacciamento;
+	animation-duration: 4s;
+	animation-delay: 0.3s;
+	animation-fill-mode: forwards;
+	animation-iteration-count: 1;
+}
+
+.cookies > p{
+	color: white;
+	animation-name: scomparsa;
+	animation-duration: 4s;
+	animation-delay: 0.3s;
+}
+
+@keyframes schiacciamento {
+		0% {height: 0em;}
+		50% {height: 4em;}
+		100% {height: 0em;}
+}
+
+@keyframes scomparsa {
+		0% {color: transparent;}
+		20% {color: white;}
+		50% {color: white;}
+		80% {color: transparent;}
+}
+
+/* 1.25 dpr */
+@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
+
+	html{
+		font-size:1.7em;
+	}
+}
+
+
+
+
+@media screen and (max-width: 700px) {
+
+	.accordion-strip{
+		right: 0;
+		border-top: 0.1em solid black;
+	}
+
+	.accordion-strip > a > h3{
+		margin-top:0em;
+	}
+
+	#about{
+		bottom:0 !important;
+	}
+}
+
+
+@media screen and (max-width: 999px) {
+
+	body{
+		justify-content: center;
+		flex-wrap: wrap;
+		display: flex;
+	}
+
+	main{
+		position: relative;
+		width: 100%;
+		max-width: 45em;
+		padding-bottom: 4em;
+	}
+
+	aside{
+	}
+
+	  nav {
+			flex-wrap: wrap;
+			position: relative;
+			padding:2em;
+	  }
+
+		p{
+			max-width: 40em;
+		}
+
+		#about{
+		padding-right: 1em;
+		}
+
+		#logo{
+			height:7em;
+			flex: 1 1 100%;
+		}
+
+		#logo > div{
+		margin: auto;
+		}
+
+		#info-wrapper{
+		padding: 0 1em 0 1em;
+		}
+
+		#description-wrapper{
+			padding: 0 1em 0.5em 1em;
+		}
+
+	 #ring-wrapper{
+		 position:absolute;
+		 bottom:10em;
+		 justify-content:center;
+		 width:100%;
+		 padding-bottom:2em;
+		 padding-top:2em;
+		 display:flex;
+		 flex:1 1 100%;"
+		}
+
+		#radio-info{
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		.accordion-strip{
+			bottom: 0;
+			position: absolute;
+			margin-top: 5em;
+		}
+
+		.accordion-title{
+			flex: 1 1 auto;
+		}
+
+		.info-wrapper {
+			padding:1em;
+		}
+
+		.text{
+		}
+
+		.text > *{
+			max-width: 35em;
+			padding: 0 5% 0 1%;
+			list-style-type: none;
+		}
+
+		.text-wrapper{
+			padding: 1em 1em 19em 1em;
+			overflow:hidden;
+		}
+
+		.text-wrapper > article{
+			padding: 0;
+			width: 116%;
+		}
+}
+
+
+@media screen and (min-width: 1000px) {
+
+		nav {
+		  -moz-box-shadow:    0 0 10px #000000;
+		  -webkit-box-shadow: 0 0 10px #000000;
+		  box-shadow:         0 0 10px #000000;
+		  flex: 1 1 100%;
+			height:7em;
+			display: flex;position: fixed;
+			width: 100%;
+			background: white;
+			z-index: 20;
+		}
+
+		main {
+			padding-left: 5em;
+			padding-top: 2em;
+		}
+
+		article{
+			overflow: hidden;
+			width: 43em;
+		}
+
+		.text-wrapper{
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		#radio-info{
+		max-width: 30em;
+		}
+
+
+
+		#now-playing{
+		}
+
+		#piece-text
+		{
+			border: solid 1px black;
+			width:100%;
+		}
+
+		#radio-column{
+			flex: 0 1 18%;
+			padding-top:5em;
+		}
+
+		#piece-text > h3{
+			padding-left: 1em;
+			padding-right: 1em;
+		}
+
+		#description-wrapper{
+			width: 23em;
+			margin: 0 0 0 1em;
+		}
+
+		#about{
+			height: 100vh;
+/*			right: -61%; */
+/* ====================== */
+			right:0;
+			opacity: 0;
+			transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
+/* ====================== */
+			max-width: 60%;
+			position: fixed;
+			z-index: 33 !important;
+			padding: 0 0 0 1%;
+			top:0;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+		}
+
+		.about-bar{
+			position: fixed;
+			right: 0em;
+			height: 100%;
+			width: 1em;
+			top: 0;
+			display: inline-block;
+			z-index: 43;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+		}
+
+		input[type=checkbox]:checked + label + h5 + #about{
+			/*
+			right:0em;
+			border-left: solid 1em black;
+			transition: border-left 3s ease-in;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+			*/
+			opacity:1;
+			transition: opacity 1.5s cubic-bezier(.17,.84,.44,1);
+		}
+
+		input[type=checkbox]:not(:checked) + label + h5 + #about{
+			/*
+			right:0em;
+			border-left: solid 1em black;
+			transition: border-left 3s ease-in;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+			*/
+			opacity:0;
+			transition: opacity 0.6s linear 0.1s;
+		}
+
+		input[type=checkbox]:active + .bang::after{
+			background: black;
+		}
+
+		.bang{
+			position: fixed;
+			border: solid 1pt black;
+			top: 0;
+/*			right: 4em;*/
+			right: 1em;
+			width: 1.6em;
+			height: 1.6em;
+			padding: 0;
+			margin: 0.4em 0.4em 0;
+			z-index: 60;
+		}
+
+	.bang::after{
+		width: 0;
+    height: 0;
+    border-left: 0.8em solid transparent;
+    border-right: 0.8em solid transparent;
+    border-top: black;
+    position: absolute;
+    content: "";
+    left: -0.8em;
+    background: white;
+    padding-left: 0.8em;
+    padding-bottom: 1.6em;
+    padding-right: 0.8em;
+    border-radius: 1em;
+    border: solid 1pt black;
+    margin-left: 0.7em;
+    top: -0.1em;
+	 }
+
+	 input[type=reset]:active{
+    /* the reset button when mouse-down */
+	 }
+
+		.dx{
+			background-color: aquamarine;
+		}
+
+		input[type="radio"]:checked + #about{
+			right:0;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+		}
+
+		.sx{
+		background-color: black;
+		}
+
+		input[id="toggle-2"]:checked + .sx{
+			right:60%;
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+		}
+
+		input[id="toggle-2"]:checked + label + #about {
+			transition: right 1s cubic-bezier(.17,.84,.44,1);
+			right:0em;
+		}
+
+		label + h5{
+			top: 0;
+			right: 1.4em;
+			position: fixed;
+			margin: 0.7em 0 0 0em;
+			padding: 0;
+			font-size: 1em;
+		}
+
+		.text
+		{
+			max-width: auto;
+			margin: 3em auto;
+			padding-right: 2.5em;
+			width: 42em;
+			height: 45%;
+		}
+
+		.accordion-title{
+			margin: 0.1em 0.5em 0 0.5em;
+		}
+
+		.accordion-strip{
+			padding: 2em 8em 0 6em;
+		}
+
+		.accordion-strip > a > h3{
+			margin-top:1em;
+		}
+
+		#ring-wrapper{
+			bottom: 5.5em;
+			position: absolute;
+			width: 100%;
+		}
+
+		#logo > div{
+			margin-left: 1em;
+		}
+
+		#news
+		{
+			display: flex;
+			margin: 0 17em 0 4em;
+		}
+
+		#news-wrapper{
+		}
+
+		#pd-ring > table{
+			margin:auto;
+		}
+
+		#now-playing > h2, #now-playing > h3{
+			background: none;
+			border:solid 1pt black;
+			flex:1 1 100%;
+			padding-left:1em;
+			padding-right:1em;
+			margin-bottom: 0;
+			margin-top: 1em;
+		}
+
+		audio {
+		  background-color:#000000;
+		}
+
+		.pd_ring {
+		    width:260px;
+		    height:75px;
+		    background-color:"#FFFFFF";
+		}
+
+		.pd_ringnext {
+		    width:55px;
+		    height:25px;
+		    vertical-align:middle;
+		    border:none;
+		}
+
+		.pd_ringlist {
+		    width: 62px;
+		    height: 25px;
+		    vertical-align:middle;
+		    border:none;
+		}
+
+		.pd_ringrandom {
+		    width:63px;
+		    height:25px;
+		    vertical-align:middle;
+		    border:none;
+		}
+
+		.pd_ringprevious {
+		    width:80px;
+		    height:25px;
+		    vertical-align:middle;
+		    border:none;
+		}
+
+		.pd_ringinfo {
+		    width:260px;
+		    height:50px;
+		    vertical-align:middle;
+		    border:none;
+		}
+
+}
+
+@media screen and (min-height: 701px) {
+	.text{
+		height:45%;
+	}
+}
+
+@media screen and (max-height: 700){
+	.text{
+		height:65%;
+	}
+}

title.php

@@ -0,0 +1,45 @@
+<?php
+	/**
+	 * Please be aware. This gist requires at least PHP 5.4 to run correctly.
+	 * Otherwise consider downgrading the $opts array code to the classic "array" syntax.
+	 */
+	function getMp3StreamTitle($streamingUrl, $interval, $offset = 0, $headers = true)
+	{
+		$needle = 'StreamTitle=';
+		$ua = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36';
+
+		$opts = [
+			'http' => [
+				'method' => 'GET',
+				'header' => 'Icy-MetaData: 1',
+				'user_agent' => $ua
+			]
+		];
+
+		if (($headers = get_headers($streamingUrl)))
+			foreach ($headers as $h)
+				if (strpos(strtolower($h), 'icy-metaint') !== false && ($interval = explode(':', $h)[1]))
+					break;
+
+		$context = stream_context_create($opts);
+
+		if ($stream = fopen($streamingUrl, 'r', false, $context))
+		{
+			$buffer = stream_get_contents($stream, $interval, $offset);
+			fclose($stream);
+
+			if (strpos($buffer, $needle) !== false)
+			{
+				$title = explode($needle, $buffer)[1];
+				return substr($title, 1, strpos($title, ';') - 2);
+			}
+			else
+				return getMp3StreamTitle($streamingUrl, $interval, $offset + $interval, false);
+		}
+		else
+			throw new Exception("Unable to open stream [{$streamingUrl}]");
+	}
+
+	$current_title = getMp3StreamTitle('http://randio.it:8000/randio.mp3', 19200);
+	echo $current_title
+?>

txt/info.txt

@@ -0,0 +1,11 @@
+#Optional comments begins with "#"
+#Empty lines are forbidden.
+#": " is a separator and is important to keep it.
+Date: dd/mm/yyyy
+Artist: Name
+Piece: Title
+Genre: Algorithmic
+Fixed_duration: Minimum amount of minutes a composition should take
+Variable_duration: Additional number of minutes that can be randomly addedd to the fixed time.
+Description: Short description
+References: Sample XXX was recorded by YYY from ZZZ.net and released under the term of CCC.

txt/license.txt

@@ -0,0 +1,24 @@
+Copyright (c) <year>, <author>
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the <organization> nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

txt/playlist.txt

@@ -0,0 +1,53 @@
+1. Archita_Zabaleta-MosquitoSmack
+2. fbipolare-current_time
+3. Archita_Zabaleta-BlueCachexyDrama
+4. David_Sprinkle-Submarine_Debarkation_Zone
+5. fbipolare-free_as_in_jazz
+6. Mattia_Giovanetti-Golden-bloomed
+7. Leadtowill-Fumunt_2
+8. Archita_Zabaleta-Moon_waltz
+9. fbipolare-reblues
+10. alistair_blunt-NoDues
+11. Leadtowill-Tablenge_2
+12. Dr.Fab-Squagghio
+13. Randio-Radio_Randio
+14. Archita_Zabaleta-Raggamusy
+15. Archita_Zabaleta-Belt_of_onion
+16. Archita_Zabaleta-Afrika_struggle
+17. Swarna_Ninad-Ab_Chakra
+18. Leadtowill-Tonneosht_2
+19. Dr.Fab-Blue_Tale
+20. Leadtowill-Catscandl_2
+21. Mattia_Giovanetti-Waiting_for_Apophis_with_a_Tesla_jacket
+22. alistair_blunt-cog
+23. Dr.Fab-WLD14
+24. Dr.Fab-modulanza
+25. Archita_Zabaleta-ABorigen
+26. fbipolare-random_walk
+27. Mattia_Giovanetti-Micro_Loop_4
+28. Yesternow-Strait_answer
+29. Archita_Zabaleta-Inner_triller
+30. Archita_Zabaleta-Nasty_trio
+31. Leadtowill-ACDC
+32. Archita_Zabaleta-Sweet_pentacle
+33. Archita_Zabaleta-Sacrée
+34. Mattia_Giovanetti-van-memory
+35. Archita_Zabaleta-phryze
+36. Dr.Fab-Technosy
+37. Dr.Fab-h_prysm
+38. fbipolare-La_resistenza_è_futile
+39. Archita_Zabaleta-Cage_of_noise
+40. Leadtowill-Kalith_2
+41. Archita_Zabaleta-H55
+42. dna_recycler-p3h2
+43. alistair_blunt-xey-tu
+44. Randio-Radio_Randio
+45. Leadtowill-ASAP_2
+46. fbipolare-eu440
+47. Dr.Fab-Minimal_asset
+48. Mattia_Giovanetti-Chod_Variations
+49. alistair_blunt-agone
+50. Archita_Zabaleta-HPlan
+51. Swarna_Ninad-E_Chackra
+52. Frabio-Randio_1
+53. Archita_Zabaleta-Never_ending_story

txt/trefresh.txt

@@ -0,0 +1,4 @@
+The title shown in the page is the one of the piece streamed at the moment of access to the page.
+If you refresh your page, you should see the updated title.
+In order to make an auto-updated title on the page I should use something like javascript and I dont like/want to.
+If you use a media player to listen Randio, you should be able to see the titles in sync with the playlist.