rekt-theme/src/index.html

361 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://www.google-analytics.com">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
function gtag(){}
</script>
<meta charset="UTF-8"/>
<meta name="theme-color" content="#110F10">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"/>
<meta name="keywords" content="rekt, cyberpunk, rekt fm, dubstep, drum, bass, online radio, music, aesthetic, futurism, live, podcast, DJ, 320k, streaming, equalizer, equaliser, milkdrop, visualiser, visualizer, webaudio, webrtc, webirc, irc"/>
<title>Rekt Network - The Home of Cyberpunk Radio</title>
<meta name="description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
<link id="favicon" rel="shortcut icon" href="/static/img/favicon.png">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#181818">
<!--FACEBOOK-->
<meta property="og:title" content="Rekt Network - The Home of Cyberpunk Radio">
<meta property="og:description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
<meta property="og:image" content="https://rekt.fm/static/img/logo.png">
<meta property="og:site_name" content="Rekt FM">
<meta property="og:url" content="https://rekt.fm/?station=rekt">
<meta property="fb:app_id" content="1000465486695949"/>
<meta property="og:audio" content="https://rekt.fm/stream/rekt.m4a">
<meta property="og:type" content="music.radio_station">
<!--TWITTER-->
<meta name="twitter:title" content="Rekt Network - The Home of Cyberpunk Radio">
<meta name="twitter:description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
<meta name="twitter:image" content="https://rekt.fm/static/img/logo.png">
<meta name="twitter:url" content="https://rekt.fm/?station=rekt">
<meta name="twitter:site" content="@TheRektNetwork">
<meta name="twitter:creator" content="@TheRektNetwork">
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://rekt.fm/player/?station=rekt">
<meta name="twitter:player:stream" content="https://rekt.fm/stream/rekt.m4a">
<meta name="twitter:player:stream:content_type" content="audio/aac">
<meta name="twitter:player:width" content="1200">
<meta name="twitter:player:height" content="900">
<link rel="canonical" href="https://rekt.fm"/>
<link rel="apple-touch-icon" href="static/img/logo.png"/>
<link rel="apple-touch-startup-image" href="static/img/logo.png"/>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@graph": [{
"@type": "WebSite",
"@id": "https://rekt.fm/#website",
"name": "Rekt FM",
"description": "Rekt FM is an online radio platform providing 320kbps cyberpunk electronic music streams",
"url": "https://rekt.fm",
"genre": "Cyberpunk",
"keywords": "radio,music,cyberpunk,electronic,programming",
"accessMode": ["textual", "auditory", "visual", "musicOnVisual"],
"creator": {"@id": "https://rekt.fm/#person-z"},
"sourceOrganization": {"@id": "https://rekt.fm/#organization"}
}, {
"@type": "WebPage",
"@id": "https://rekt.fm/#webpage",
"name": "Rekt FM - Cyberpunk Radio",
"description": "Rekt FM is an online radio platform providing 320kbps cyberpunk electronic music streams",
"url": "https://rekt.fm",
"isPartOf":{"@id":"https://rekt.fm/#website"},
"genre": "Cyberpunk",
"audio": {
"@type": "AudioObject",
"@id": "https://rekt.fm/#audio-rekt",
"name": "rekt.m4a",
"description": "Rekt FM Cyberpunk Radio Stream",
"isAccessibleForFree": true,
"genre": "Cyberpunk",
"bitrate": "320000",
"contentUrl": "https://rekt.fm/stream/rekt.m4a",
"embedUrl": "https://rekt.fm/stream/rekt.m4a",
"encodingFormat": "audio/aac",
"publication": [
{
"@type": "BroadcastEvent",
"isLiveBroadcast": true,
"startDate": "2019-06-29T00:00:00Z",
"endDate": "2022-06-29T00:00:00Z"
}
],
"discussionUrl": "https://rekt.fm/#Chat"
}
}, {
"@type": "Organization",
"@id": "https://rekt.fm/#organization",
"name": "Rekt FM",
"url": "https://rekt.fm",
"email": "info@rekt.fm",
"founder": {"@id": "https://rekt.fm/#person-z"},
"sameAs": [
"https://twitter.com/TheRektNetwork"
],
"parentOrganization": {"@id": "https://rekt.fm/#parent"}
}, {
"@type": "Organization",
"@id": "https://rekt.fm/#parent",
"name": "Rekt Network",
"url": "https://rekt.network",
"email": "info@rekt.network",
"founder": {"@id": "https://rekt.fm/#person-z"},
"sameAs": [
"https://twitter.com/TheRektNetwork"
]
}, {
"@type": "RadioStation",
"@id": "https://rekt.fm/#radio-station",
"openingHours": ["Mo-Su"],
"brand": {"@id": "https://rekt.fm/#organization"},
"parentOrganization": {"@id": "https://rekt.fm/#organization"},
"name": "Rekt FM",
"url": "https://rekt.fm",
"email": "info@rekt.fm",
"founder": {"@id": "https://rekt.fm/#person-z"},
"image": "https://rekt.fm/static/img/logo.png",
"logo": "https://rekt.fm/static/img/logo.png",
"mainEntityOfPage": {"@id": "https://rekt.fm/#website"},
"sameAs": [
"https://twitter.com/TheRektNetwork"
]
}, {
"@type":"Person",
"@id": "https://rekt.fm/#person-z",
"name": "Z",
"email": "z@rekt.network"
}]
}
</script>
<link rel="stylesheet" href="static/css/main.css">
<noscript>
<style>
header{
box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
}
audio {
display:block;
}
</style>
<!-- <link rel="stylesheet" href="static/css/rekt.css"> -->
</noscript>
</head>
<body class="loading scanlines flicker">
<div class="overlay radial"></div>
<div class="overlay flicker"></div>
<div class="overlay scanlines"></div>
<div class="overlay scanline"></div>
<header>
<div class="headerTop fr">
<div class="headerLeft">
</div>
<div class="headerCenter" id="player" style="padding-bottom:2vmin;">
<div id="playerPlay" class="toggle f0">
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
<polyline class="fill" id="playSVG" points="4.35,0 4.35,65 60.65,32.5"/>
</svg>
</div>
<div id="playerStop" class="toggle f0">
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
<rect class="fill" id="stopSVG" width="65" height="65"/>
</svg>
</div>
<div id="playerSlider" class="slider horizontal f0">
<svg id="volumeSVG" viewBox="0 0 780 65" height="65px" width="780px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rektGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="65">
<stop offset="0" stop-color="var(--gradient-stop-0, #FD0000)"/>
<stop offset="1" stop-color="var(--gradient-stop-1, #980000)"/>
</linearGradient>
<mask id="mask1">
<rect id="activeMask" x="0" y="0" width="780" height="65" fill="white" />
</mask>
<mask id="mask2">
<rect id="passiveMask" x="780" y="0" width="780" height="65" fill="white" />
</mask>
<g id="rektnetwork">
<path d="M 190.19957,-0.35100882 156.17143,30.906736 h 16.94948 l 34.02866,-31.25774482 z m 572.85646,0 -34.02865,31.25774482 h 16.94949 L 780.00552,-0.35100882 Z M 605.01544,2.2271461 c -8.85081,0 -16.30503,3.0292181 -22.36309,9.0873639 -6.01513,6.015183 -9.02278,13.448149 -9.02278,22.299056 0,8.764984 3.45874,16.197946 10.37616,22.299061 6.91742,6.058146 13.92048,9.087364 21.00971,9.087364 8.89382,0 16.34854,-3.007584 22.3637,-9.022767 6.01512,-6.015187 9.02225,-13.469784 9.02225,-22.363658 0,-8.764979 -3.07202,-16.176828 -9.21607,-22.234978 -6.144,-6.1011074 -13.53383,-9.1514419 -22.16988,-9.1514419 z M 6.7024813,2.355821 V 15.761303 H 32.54605 c 5.413624,0 9.817436,2.019306 13.211691,6.05807 2.878675,3.566145 4.318114,7.540377 4.318114,11.922872 h 13.469557 c 0,-8.764983 -3.072007,-16.176315 -9.216039,-22.234464 C 48.185341,5.4066695 40.795522,2.355821 32.159509,2.355821 Z m 290.6200087,0 v 62.64417 h 13.27575 V 33.678163 h 18.88324 z m 52.07368,0 v 31.322342 h -18.88323 l 32.15951,31.321828 V 2.355821 Z m 152.85013,0 v 62.64417 L 534.40584,33.678163 H 515.52262 V 2.355821 Z m 32.15954,31.322342 32.15951,31.321828 V 51.272567 2.355821 H 554.12673 V 33.678163 Z M 650.42595,2.355821 v 13.405482 h 25.84354 c 5.41364,0 9.81796,2.019306 13.21222,6.05807 2.87866,3.566145 4.31758,7.540377 4.31758,11.922872 h 13.46957 c 0,-8.764983 -3.07198,-16.176315 -9.21603,-22.234464 -6.14404,-6.1011115 -13.53386,-9.15196 -22.16988,-9.15196 z M 212.6025,2.4850062 V 15.632099 h 15.91852 l -0.0646,49.367885 h 27.1329 V 15.632106 h 15.33872 V 2.4850138 Z m 226.19714,0 V 15.632099 h 15.9185 l -0.0646,49.367885 h 27.1324 V 15.632106 h 15.33868 V 2.4850138 Z M 70.867501,2.5490696 V 15.632084 H 135.18652 V 2.5490696 Z m 297.064609,0 V 15.632084 h 64.31903 V 2.5490696 Z m 237.4699,13.0830144 c 5.41361,0 9.81792,2.019827 13.21219,6.058591 2.92167,3.566146 4.3822,7.540381 4.3822,11.922869 0,5.026974 -1.74022,9.280341 -5.22039,12.760554 -3.48018,3.480214 -7.60484,5.220392 -12.374,5.220392 -5.32769,0 -9.70986,-2.126944 -13.1471,-6.380537 -2.92163,-3.566138 -4.3827,-7.432744 -4.3827,-11.600409 0,-4.941042 1.71857,-9.173296 5.15577,-12.696472 3.48021,-3.523183 7.60488,-5.284988 12.37403,-5.284988 z M 70.867501,26.781871 70.674214,64.935372 135.1219,64.999965 V 51.852381 H 84.465732 V 39.929508 H 94.648649 V 26.781893 Z m 297.064609,0 -0.19378,38.153501 64.44818,0.06459 V 51.852354 H 381.53032 V 39.929482 h 10.18295 V 26.781893 Z M 0,33.742245 V 64.999991 H 13.469559 V 33.742245 Z m 14.436432,0 32.159508,31.257746 H 63.545412 L 31.385907,33.742245 Z m 127.427248,0 v 31.257746 h 13.53415 V 33.742245 Z m 14.30775,0 34.02814,31.257746 h 16.95 L 173.12091,33.742245 Z m 487.55201,0 v 31.257746 h 13.46958 V 33.742245 Z m 14.43643,0 32.15954,31.257746 h 16.94945 L 675.10935,33.742245 Z m 56.55978,0 v 31.257746 h 13.53413 V 33.742245 Z m 14.30773,0 34.02865,31.257746 h 16.94949 L 745.97687,33.742245 Z M 278.24082,56.363766 v 8.636225 h 9.92453 v -8.636225 z"/>
</g>
<pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" preserveAspectRatio="xMidYMid slice" viewBox="0 0 780 65" height="65px" width="780px">
<image id="imagePattern" x="0" y="0" width="100%" height="65px" xlink:href="#rektGradient" preserveAspectRatio="xMidYMid slice"/>
</pattern>
</defs>
<use xlink:href="#rektnetwork" x="0" y="0" style="fill:white;mask: url(#mask2)"></use>
<use id="rektNetworkActive" class="fill" xlink:href="#rektnetwork" x="0" y="0" style="mask: url(#mask1)"></use>
</svg>
<div id="playerSliderActive" style="width:100%">
<div id="speaker">
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="M832 352v1088q0 26-19 45t-45 19-45-19l-333-333h-262q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45zm384 544q0 76-42.5 141.5t-112.5 93.5q-10 5-25 5-26 0-45-18.5t-19-45.5q0-21 12-35.5t29-25 34-23 29-36 12-56.5-12-56.5-29-36-34-23-29-25-12-35.5q0-27 19-45.5t45-18.5q15 0 25 5 70 27 112.5 93t42.5 142zm256 0q0 153-85 282.5t-225 188.5q-13 5-25 5-27 0-46-19t-19-45q0-39 39-59 56-29 76-44 74-54 115.5-135.5t41.5-173.5-41.5-173.5-115.5-135.5q-20-15-76-44-39-20-39-59 0-26 19-45t45-19q13 0 26 5 140 59 225 188.5t85 282.5zm256 0q0 230-127 422.5t-338 283.5q-13 5-26 5-26 0-45-19t-19-45q0-36 39-59 7-4 22.5-10.5t22.5-10.5q46-25 82-51 123-91 192-227t69-289-69-289-192-227q-36-26-82-51-7-4-22.5-10.5t-22.5-10.5q-39-23-39-59 0-26 19-45t45-19q13 0 26 5 211 91 338 283.5t127 422.5z" fill="#aaa"/>
</svg>
</div>
</div>
</div>
</div>
<div class="headerRight">
<nav class="menu">
<button class="menu" id="navSettings" data-name="Settings" title="Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M7,0 h2 v2 h2 v-1 h2 v2 h-1 v1 h1 v1 h1 v-1 h2 v2 h-1 v1 h-1 v2 h1 v1 h1 v2 h-2 v-1 h-1 v1 h-1 v1 h1 v2 h-2 v-1 h-2 v2 h-2 v-2 h-2 v1 h-2 v-2 h1 v-1 h-1 v-1 h-1 v1 h-2 v-2 h1 v-1 h1 v-2 h-1 v-1 h-1 v-2 h2 v1 h1 v-1 h1 v-1 h-1 v-2 h2 v1 h2 z M6,4 h4 v1 h1 v1 h1 v4 h-1 v1 h-1 v1 h-4 v-1 h-1 v-1 h-1 v-4 h1 v-1 h1 z M7,6 h2 v1 h1 v2 h-1 v1 h-2 v-1 h-1 v-2 h1 z"/>
</button>
</a>
</nav>
</div>
</div>
<div id="nowplayingDiv"class="headerBottom fr">
<div id="seek" class="meta">
<div class="npTime f0">
<a id="npTime" title="Progress"></a>
</div>
<h1 id="nowplaying">
<a id="npArtist" title="Rekt FM">Rekt FM</a>
<a id="npTitle" title="Cyberpunk Radio">The Home of Cyberpunk Radio</a>
</h1>
<div class="npTime f0">
<a id="npDuration" title="Duration"></a>
</div>
</div>
</div>
</header>
<nav id="nav" class="menu">
<a class="menu" id="navEQ" data-name="EQ" href="#EQ" title="Graphic Equalizer"><h2>EQ</h2></a>
<a class="menu" id="navMilkdrop" data-name="Milkdrop" href="#Milkdrop" title="Milkdrop Visualiser"><h2>Milkdrop</h2></a>
<a class="menu" id="navStations" data-name="Station" href="#Station" title="Radio Stations"><h2>Station</h2></a>
<a class="menu" id="navChat" data-name="Chat" href="#Chat" title="IRC Chatroom"><h2>Chat</h2></a>
<a class="menu" id="navArchive" data-name="Archive" href="#Archive" title="Archived Shows"><h2>Archive</h2></a>
<a class="menu" id="navReleases" data-name="Releases" href="#Releases" title="Music Releases"><h2>Releases</h2></a>
</nav>
<main id="main">
<section id="init" class="active init">
<noscript>
Please Enable JavaScript Then Jack-In
</noscript>
<audio id="audio" controls preload="none" src="/stream/rekt.m4a"></audio>
</section>
<section id="pageEQ">
<canvas id="waves"></canvas>
<div id="eqs" class="fr">
<!-- Q-Values tuned to band crossover at -3dB -->
<div class="eq" data-f="31.25" data-type="lowshelf"></div>
<div class="eq" data-f="62.5" data-q="1"></div>
<div class="eq" data-f="125" data-q="2"></div>
<div class="eq" data-f="250" data-q="1.3333"></div>
<div class="eq" data-f="500" data-q="1.6"></div>
<div class="eq" data-f="1000" data-q="1.4545"></div>
<div class="eq" data-f="2000" data-q="1.5238"></div>
<div class="eq" data-f="4000" data-q="1.4884"></div>
<div class="eq" data-f="8000" data-q="1.5059"></div>
<div class="eq" data-f="10656.25" data-type="highshelf"></div>
</div>
<canvas id="bars"></canvas>
</section>
<section id="pageMilkdrop" class="fr">
<canvas id="canvasMilkdrop"></canvas>
</section>
<section id="pageStations">
<nav>
<a class="station" data-station="rekt" data-type="stream"><h3>REKT</h3></a>
<a class="station" data-station="nightride" data-type="stream"><h3>NIGHTRIDE</h3></a>
<a class="station" data-station="rektory" data-type="stream"><h3>REKTORY</h3></a>
<a class="station" data-station="rektify" data-type="stream"><h3>REKTIFY</h3></a>
<a class="station" data-station="archives" data-type="file"><h3>ARCHIVES</h3></a>
<a class="station" data-station="releases" data-type="file"><h3>RELEASES</h3></a>
</nav>
</section>
<section id="pageChat">
<div>
<div class="fr">
<div id="chatMain" class="rtl">
</div>
<div id="chatSide" class="container f0 auto">
<nav id="chatChannels" class="menu c r chanlist active">
<ol id="serverList">
<a class="channel title" data-channel="" title="irc.rekt.network">!Rekt.Network</a>
</ol>
<ol id="publicList">
<a class="channel title" data-channel="#rekt" data-active="1" title="rekt">#rekt</a>
</ol>
<ol id="privateList">
</ol>
</nav>
</div>
</div>
<div id="chatInput" class="f0 auto">
<input></input>
</div>
</div>
</section>
<section id="pageArchive" class="fr">
<nav id="archiveMenu" class="menu c rtl">
<!-- <a class="title filter" data-station="all"><h3>ALL</h3></a>
<a class="title filter" data-station="rekt"><h3>REKT</h3></a>
<a class="title filter" data-station="nightride"><h3>NIGHTRIDE</h3></a>
<a class="title filter" data-station="rektory"><h3>REKTORY</h3></a>
<a class="title filter" data-station="rektify"><h3>REKTIFY</h3></a> -->
</nav>
<div id="archiveMain" class="container">
<!-- <section></section> -->
</div>
</section>
<section id="pageReleases" class="fr">
<nav id="releaseMenu"class="menu c rtl">
</nav>
<div id="releaseMain" class="container">
<!-- <section></section> -->
</div>
</section>
<section id="pageSettings">
<article id="About">
</article>
<nav id="pageSettingsNav">
<a class="setting" id="settingFlicker" title="Toggle CRT Flicker Effects"><h3>Flicker FX</h3></a>
<a class="setting" id="settingScanlines" title="Toggle Scanline Overlay Effects"><h3>Scanlines</h3></a>
<a class="setting" id="settingClearCache" title="Clear All Stored Data"><h3>Clear Cache</h3></a>
</nav>
</section>
</main>
<footer></footer>
</div>
<!-- SCRIPTS -->
<script src="/static/js/helper.js"></script>
<script src="/static/js/slider.js"></script>
<script src="/static/js/station.js"></script>
<script src="/static/js/page.js"></script>
<script src="/static/js/webrtc.js"></script>
<script src="/static/js/chat.js"></script>
<script src="/static/js/eq.js"></script>
<script src="<%= require('!!file-loader!./rekt-embedded.js') %>"></script>
<script src="<%= require('!!file-loader!./dj.js') %>"></script>
</body>
</html>