emptyfm

listen to FM radio station from your browser
git clone git://git.nirm.al/emptyfm
Log | Files | Refs | README | LICENSE

index.html (5110B)

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5   <meta charset="UTF-8">
      6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7   <title>EmptyFM - Listen to your favorite FM Radio station from your browser</title>
      8   <link rel="shorcut icon" type="image/png"
      9     href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAF4SURBVHgB7Zj/jURQEMfH5f7cLWC3gG1AAwqgAA1QgAYoQAEUQAEUQAEKoAAK4P+7+74ccbJ7e/Eum4nMJ5H48cT7mJk3wTBN84MOwBsdBBHhhohwQ0S4ISLcEBFuiAg3RIQbhxF5p3/gfD6T67rkOA5dLhd1rus6yrKMyrJ8eu/pdFL70zTROI60B0P3C/F6vVKSJIvAlr7vyfd9Gobh7nXP89QGmqZRY/eglVrPJOYxiIxt23ev3263ZX9vNIBWan1F84dEURRU17WaENJsnjzSJwxDJZWm6TIex5ZlLceIyF60RNZvGRJRFNF6Um3bUhAEyzmkEO6BLOpiLQGqqqK9aIms0wKT25LnuRKK43iJHKKAhWELIvWojv6CVo1glcHDsT3Kb6xeKODfVi9IrFNuD8Yr/2uhppBOiA7EIQlBnSKfMY7yg04a4ow0xG+kIW6QhgikIW6QhrjiMA1Rvtm5ISLcEBFuiAg3RIQbIsINEeHGYUQ+AbWJ/va1HA5qAAAAAElFTkSuQmCC">
     10   <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
     11   <style>
     12     :root {
     13       --bg: #fff;
     14       --fg: #333;
     15       --alt: #b7b7b7;
     16     }
     17 
     18     body {
     19       font-size: 14px;
     20       text-rendering: optimizeLegibility;
     21       -webkit-font-smoothing: antialiased;
     22       -moz-osx-font-smoothing: grayscale;
     23       padding: 0 2em;
     24       margin: 2em auto;
     25       background-color: var(--bg);
     26       color: var(--fg);
     27       font-family: verdana, arial, sans-serif, helvetica;
     28       max-width: 590px;
     29     }
     30 
     31     .logo {
     32       display: block;
     33       font-size: 1rem;
     34       margin-bottom: 0.7em;
     35     }
     36 
     37     a,
     38     a:visited {
     39       color: var(--fg);
     40     }
     41 
     42     .tagline {
     43       font-size: 1rem;
     44       margin-bottom: 1em;
     45     }
     46 
     47     .description {
     48       font-size: 14px;
     49       font-style: italic;
     50     }
     51 
     52     .nav a {
     53       margin-top: 0.5em;
     54       font-size: 0.9rem;
     55     }
     56 
     57     h3 {
     58       font-size: 1rem;
     59     }
     60 
     61     select,
     62     button {
     63       width: 100%;
     64       height: 32px;
     65       font-size: 1rem;
     66       box-sizing: border-box;
     67       margin-bottom: 1em;
     68     }
     69 
     70     button {
     71       font-family: verdana, arial, sans-serif, helvetica;
     72       font-size: 1.2rem;
     73       padding: 0 1em;
     74       background: #15C;
     75       border: 1px solid var(--fg);
     76       color: white;
     77       cursor: pointer;
     78       margin-top: 1em;
     79     }
     80 
     81     #fmlist {
     82       display: flex;
     83       flex-direction: column;
     84       margin: 1em 0 4em;
     85     }
     86 
     87     #fmlist a {
     88       margin-bottom: 0.7em;
     89     }
     90 
     91     #emptyfm {
     92       position: fixed;
     93       display: none;
     94       width: 100vw;
     95       left: 0;
     96       bottom: 0;
     97       background: #555;
     98       height: 40px !important;
     99       overflow: hidden;
    100       z-index: 1;
    101     }
    102 
    103     .recents {
    104       background: #efefef;
    105       margin: 2rem 0;
    106     }
    107 
    108     .recents ul {
    109       max-height: 14em;
    110       overflow-x: hidden;
    111       overflow-y: auto;
    112       margin: 0;
    113     }
    114 
    115     .recents li {
    116       margin: 1em 0;
    117     }
    118 
    119     .recents div {
    120       background: #666;
    121       color: white;
    122       margin: 0;
    123       padding: 0 0.7em;
    124       font-size: 1rem;
    125     }
    126 
    127     .video-js {
    128       background: transparent;
    129     }
    130 
    131     .vjs-control-bar {
    132       position: static !important;
    133       padding-top: 5px;
    134       background-color: #555 !important;
    135     }
    136 
    137     .vjs-fullscreen-control,
    138     .vjs-picture-in-picture-control {
    139       display: none !important;
    140     }
    141 
    142     .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    143       opacity: 1 !important;
    144     }
    145 
    146     .vjs-big-play-button,
    147     .vjs-loading-spinner {
    148       display: none ! important;
    149     }
    150   </style>
    151 </head>
    152 
    153 <body>
    154   <a class="logo" href="/">EmptyFM</a>
    155   <div class="tagline">Listen to your favorite FM Radio station from your browser.</div>
    156   <p class="description">An in-browser app to listen to various FM Radio stations around the world - No data goes to the server.</p>
    157   <div class="nav">
    158     <p>A project by <a href="https://nirm.al" target="_blank">Nirmal Kumar R</a>. Find the <a href="https://github.com/mysticmode/emptyfm" target="_blank">source code</a>.</p>
    159     <p>Acknowledgements: Purely goes to <a href="https://www.radio-browser.info" target="_blank">RadioBrowser</a>.</p>
    160   </div>
    161 
    162   <header>
    163     <div class="recents">
    164       <div>Recents</div>
    165       <ul id="recentList"></ul>
    166     </div>
    167 
    168     <div class="form-item">
    169       <label for="countryCode">Choose a country:</label>
    170       <select name="country_code" id="countryCode">
    171         <option value="" selected>None</option>
    172       </select>
    173     </div>
    174 
    175     <div class="form-item">
    176       <label for="languages">Choose a language:</label>
    177       <select name="languages" id="languages">
    178         <option value="" selected>None</option>
    179       </select>
    180     </div>
    181 
    182     <div class="form-item">
    183       <button onclick="fetchFMStations()">Find stations</button>
    184     </div>
    185   </header>
    186 
    187   <div class="fmstations" id="fmlist"></div>
    188 
    189   <video id="emptyfm" class="video-js" controls preload="auto" data-setup="{}">
    190   </video>
    191 
    192   <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
    193   <script src="https://unpkg.com/browse/@videojs/http-streaming@2.6.0/dist/videojs-http-streaming.min.js"></script>
    194 
    195   <script src="emptyfm.js"></script>
    196 </body>
    197 
    198 </html>