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;
+}
+
+