First commit

Signed-off-by: Blagovest Petrov <blagovest@petrovs.info>
3 years ago · c43ebe6d80
4 changed files with 105 additions and 0 deletions
--- a/images/background-small.jpg
+++ b/images/background-small.jpg
--- a/images/background.jpg
+++ b/images/background.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,56 @@
 <!doctype html>
 <html lang="bg">
 <head>
 <meta charset="utf-8">
 <title>Радио онлайн</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="author" content="Blagovest Petrov">
  <meta name="description" content="Българско радио онлайн">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <nav class="navbar" id="top">
    <div class="inner">
      <a href="https://petrovs.info">About</a>
    </div>
  </nav>
  <header class="container">
    <section class="content">
    </section>
  </header>
  <div id="app"></div>
    <script src="https://unpkg.com/webamp@1.4.2/built/webamp.bundle.min.js"></script>
    <script>
    const Webamp = window.Webamp;
    const webamp = new Webamp({
      initialTracks: [
          {
              metaData: {
                  artist: "horizont",
                  title: "bnr"
                },
                url: "http://stream-bg-01.radiotangra.com:8000/Tangra-high",
                duration: 9.22
            },
            {
                metaData: {
                    artist: "Some Artist",
                    title: "Title of Second Track"
                },
                url: "https://cdn.jsdelivr.net/gh/captbaritone/webamp@43434d82cfe0e37286dbbe0666072dc3190a83bc/mp3/llama-2.91.mp3",
                duration: 5.322286
            }
        ],
    });
    webamp.renderWhenReady(document.getElementById('app'));
  </script>
 </body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,49 @@
 body {
  /* Location of the image */
  background-image: url(images/background.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color:#3074b4;
 }
 /* For mobile devices */
@media only screen and (max-width: 767px) {
  body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(images/background-small.jpg);
  }
 	}
 html, body, .container {
  height: 100%;
 }
 .navbar {
  width: 100%;
  background-color: rgb(212, 208, 201);
  height: 40px;
  z-index: 9999;
  position: fixed;
 }
  .inner {
    position: relative;
    margin: 0 auto;
    text-align: center;
  }
 .navbar a {
  display: inline-block;
  border: 1px solid rgb(0, 0, 0);
  font-size: 14px;
  line-height: 24px;
  border-radius: 3px;
  padding: 2px 15px;
  text-decoration-color: rgb(0, 0, 0);
  margin-top: 5px;
 }