diff --git a/player.css b/player.css
index 7bc517d..b246d67 100644
--- a/player.css
+++ b/player.css
@@ -1,324 +1,146 @@
-/*
-Theme Name: Radio Ostravan Prehravac
-Text Domain: radioostravan
-Version: 2.00:public
-Author: Daniel Honus
-Author URI: https://danielhonus.xyz/
-Theme URI: https://danielhonus.xyz/
-License: GNU General Public License v2 or later
-License URI: http://www.gnu.org/licenses/gpl-2.0.html
-
-All files, unless otherwise stated, are released under the GNU General Public
-License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
-*/
-
-body {font-family:  "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;background: #dbd9d9;margin: 0;width: 100%;margin: auto;/* box-shadow: 0px 0px 4px 1px rgb(191, 190, 190); */font-size: 18px;}
+body {
+	font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
+	background: #dbd9d9;
+	margin: 0;
+	width: 100%;
+	margin: auto;
+	font-size: 18px;
+}
 
 /* Sections ---------------------------------- */
 
+/* main flex container */
+.flex_1 {
+	display: flex;
+	flex-direction: column;
+	max-width: 427px;
+	margin: auto;
+	background: #bababa;
+}
 
-.flex_1 {display:flex;flex-direction: column;max-width: 427px;margin: auto;background: #bababa;}
-.player{justify-content: center;}
-.left {flex:1;overflow: auto;}
-.right {flex:2;border-bottom: 7px solid #bcbcbc;background: #510909;padding: 1.5em 0;/* border-radius: 50px; */background: #f7f7f7;margin: 1.222em;box-shadow: 0 0 10px 1px gray;background:;}
-.uvodni_obrazek{
-	height: 23em;
-	position: absolute;
-	width: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	/* background: url(http://job.danielhonus.xyz/wp-content/uploads/2020/08/head.png); */
-	z-index: 0;
-	background-position: bottom;
-	/* box-shadow: 0 1px 2px 0px rgb(122 120 120); */
-	filter: brightness(1.1);
+.player {
+	justify-content: center;
 }
-.page-template-default article, .page-template-template-full-width article {flex:2;box-shadow: -9px -7px 9px -4px rgba(97, 97, 97, 0.1);}
 
-.slogan{width:100%;display:flex;flex-direction: column;-webkit-flex-flow: row;}
-.slogan1{flex:1;/* background: linear-gradient(to bottom, #c7c7c7, #d2d2d2); */border-bottom: 1px #d4443d solid;background: #d4d4d4;color: black;}
-.slogan2{
+.background {
 	flex: 2;
-	background: linear-gradient(to bottom, #e8e8e8, #ece9e9);
-	background: #e8e8e8;
-	color: #444444;
-}
-.slogan p {
-	font-size: larger;
-	margin: .3em 1em!important;
-	/* font-weight: bold; */
-}
-.thetwo{
+	border-bottom: 7px solid #bcbcbc;
+	background: #510909;
+	padding: 1.5em 0;
+	/* border-radius: 50px; */
+	background: #f7f7f7;
+	margin: 1.222em;
+	box-shadow: 0 0 10px 1px gray;
+	background: ;
+}
+
+
+.prehravac {
+	min-height: 100%;
+	background-color: #E1E1E1;
+	text-align: left;
+	color: black;
+	box-shadow: inset -7px 0 9px -7px rgba(134, 130, 130, 0.24);
+	flex: 1;
 	display: flex;
 	flex-direction: row;
-	flex-direction: column;
-flex: 2;
-display: -webkit-flex;
-	order: 2;
-}
-.prehravac{min-height: 100%;background-color: #E1E1E1;text-align: left;color: black;box-shadow: inset -7px 0 9px -7px rgba(134, 130, 130, 0.24);flex: 1;display:flex;flex-direction: row;border-bottom: 1px #cac9c9 solid;}
-section {
-	padding: 5rem 0;
-	width: 100%;
-}
-#container{
-	margin:.3em;
-	flex:2;
-}
-.section-inner {
-	margin-left: auto;
-	margin-right: auto;
-	max-width: 120rem;
-	width: calc(100% - 4rem);
+	border-bottom: 1px #cac9c9 solid;
 }
 
-.section-inner.max-percentage {
-	width: 100%;
+.aroundbutton {
+	overflow: visible;
+	margin-top: .59em;
 }
 
-.section-inner.thin {
-	max-width: 58rem;
+.playbutton {
+	position: relative;
+	z-index: 1;
+	/* top: 50%; */
+	/* left: 50%; */
+	/* transform: translateX(-50%) translateY(-50%); */
+	box-sizing: content-box;
+	display: block;
+	width: 24px;
+	height: 31px;
+	border-radius: 50%;
+	padding: 16px 39px 16px 26px;
 }
 
-.section-inner.small {
-	max-width: 80rem;
+.playbutton:before {
+	content: "";
+	position: absolute;
+	z-index: 0;
+	left: 50%;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	display: block;
+	width: 75px;
+	height: 75px;
+	background: #9b4d4d;
+	border-radius: 50%;
+	animation: pulse-border 2.2s ease-out infinite;
 }
 
-.section-inner.medium {
-	max-width: 100rem;
+.playbutton:after {
+	content: "";
+	position: absolute;
+	z-index: 1;
+	left: 50%;
+	top: 50%;
+	transform: translateX(-50%) translateY(-50%);
+	display: block;
+	width: 75px;
+	height: 75px;
+	background: #b22c25;
+	border-radius: 50%;
+	transition: all 200ms;
 }
 
-.section-inner.no-margin {
-	margin: 0;
+.playbutton:hover:after {
+	background-color: darken(#fa183d, 10%);
 }
-.kolemtlacitka{
-	overflow: visible;
-	margin-top: .59em;
+
+.playbutton img {
+	position: relative;
+	z-index: 3;
+	max-width: 100%;
+	width: auto;
+	height: auto;
 }
-.tlacitkoplay {
-  position: relative;
-  z-index: 1;
-  /* top: 50%; */
-  /* left: 50%; */
-  /* transform: translateX(-50%) translateY(-50%); */
-  box-sizing: content-box;
-  display: block;
-  width: 24px;
-  height: 31px;
-  border-radius: 50%;
-  padding: 16px 39px 16px 26px;
-}
-
-.tlacitkoplay:before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  display: block;
-  width: 75px;
-  height: 75px;
-  background: #9b4d4d;
-  border-radius: 50%;
-  animation: pulse-border 2.2s ease-out infinite;
-}
-
-.tlacitkoplay:after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  display: block;
-  width: 75px;
-  height: 75px;
-  background: #b22c25;
-  border-radius: 50%;
-  transition: all 200ms;
-}
-
-.tlacitkoplay:hover:after {
-  background-color: darken(#fa183d, 10%);
-}
-
-.tlacitkoplay img {
-  position: relative;
-  z-index: 3;
-  max-width: 100%;
-  width: auto;
-  height: auto;
-}
-
-.tlacitkoplay span {
-  display: block;
-  position: relative;
-  z-index: 3;
-  width: 0;
-  height: 0;
-  border-left: 22px solid #fff1f1;
+
+.playbutton span {
+	display: block;
+	position: relative;
+	z-index: 3;
+	width: 0;
+	height: 0;
+	border-left: 22px solid #fff1f1;
 	border-top: 15px solid transparent;
 	border-bottom: 15px solid transparent;
 }
 
+/* animation for the play button */
 @keyframes pulse-border {
-  0% {
-    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
-    opacity: 0;
-  }
-}
-
-
-.jedenblok{background:#e7e5e5;border-bottom:1px #9e7a7a solid;margin: 0px auto;height: 5em;display: flex;flex-direction: row;align-items: center;}
-.jedenblok:hover{background:#d3d3d3;}
-.kliknutelnyblok{cursor: pointer;background: #d0d0d0;border-bottom:1px #9e7a7a solid;height: 4em;font-weight: bold;display: flex;flex-direction: column;align-items: center;padding: 10px 0;}
-.kliknutelnyblok:hover{background:#AB1D1D; color:white;}
-.kliknutelnyblok:hover > .sipka {
-	border: solid white;
-border-width: 0 3px 3px 0;
-}
-.site_drop_shadow{
-	box-shadow: inset 0px 6px 9px -4px rgb(0 0 0 / 5%);
-	background: whitesmoke;
-	height: 2em;
-}
-.bloky {
-	flex: 1;
-	overflow: auto;
-	background: #ffffff;
-}
-	.bloky p {display: none;
-}
-.thepage{
-	    flex: 2;
-	    box-shadow: -9px -7px 9px -4px rgba(97, 97, 97, 0.1);
-	    /* border-bottom: 1px solid #d5d4d4; */
-	    position: relative;
-}
-.site-logo{border: 1px solid transparent;}
-.site-logo:hover {
-    border-bottom: 1px solid #d61e1e;}
-.sipka {
-  border: solid black;
-  border-width: 0 3px 3px 0;
-  display: inline-block;
-  padding: 3px;
-  transform: rotate(45deg);
-  -webkit-transform: rotate(45deg);
-  margin: auto;
-}
-#blok_cislo_0 {
-	color:white;
-	font-weight: bold;
-	background-color: #AB1D1D;
-	animation-name: color;
-	animation-duration: 3s;
-	animation-iteration-count: infinite;
-}
-
-@keyframes color {
-  0% {
-    background-color: #AB1D1D;
-  }
-  50% {
-    background-color: #941A1A;
-  }
-  100% {
-    background-color: #AB1D1D;
-  }
-}
-.jedenblok dt {
-	cursor: auto;
-	width: 45%;
-	text-align: center;
-	display: inline-block;
+	0% {
+		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
+		opacity: 0;
+	}
 }
-.jedenblok dd {
-margin: 0 !important;
-    display: inline-block;
-    width: 50%;
-    vertical-align:middle;
 
-}
 #song {
-	font-weight:normal;
+	font-weight: normal;
 }
-#umelec {
-		font-weight:bold;
 
-		font-size: large;
-}
-.ics-calendar {
-margin-top:0!important;
-padding:0 0;
-}
-.ics-calendar h4 {
-	margin-top:0;
-	margin: 0;
-	/*! text-align: center; */
-	padding-top: 9px;
-	padding-bottom: 8px;
-	padding-left: 0.3em;
-	border-bottom: 1px #9e7a7a solid;
-	background: #f4f4f4;
-	text-transform: lowercase;
-	font-size: x-large;
-}
-.ics-calendar h4:hover {
-	background:#ebebeb;
-}
-.textik{
-	color:white;
-	padding-left:4em;
-	width: 50%;
-}
-.textik p {font-size: 15px;}
-.textik *{
-	background: #9c1b1b;
-	display: inline-block;
-	padding: 6px 10px;
-}
-.textik h3 {
-	margin-bottom:.3em;
-	margin-top: 1.4em;
-}
-.aktuality_flex{
-	display: flex;
-	flex-direction: row;
-	padding: 1em;
-	flex-wrap: wrap;
-}
-.aktuality_flex .post {
-	flex:1 1 30%;
-	background: whitesmoke;
-	margin: 0.25em;
-	font-size: 1.5em;
-	border: #dadada 1px solid;
-	height: auto;
-	z-index: 2;
-	/*! -webkit-box-shadow: 0px 0px 9px 0px rgba(199,195,199,1); */
-	/*! -moz-box-shadow: 0px 0px 9px 0px rgba(199,195,199,1); */
-	/*! box-shadow: 0px 0px 9px 0px rgba(199,195,199,1); */
-}
-.aktuality_flex h2.entry-title {
-	font-size: 3.5rem;
-}
-.aktuality_flex .post-author, .aktuality_flex .post-comment-link {
-	display:none!important;
-}
-.aktuality_flex .section-inner.medium {
-	overflow: hidden;
-	width:100%!important;
-	height: 100%;
+#umelec {
+	font-weight: bold;
+	font-size: large;
 }
-.iframe_reload {border:none;width: 427px!important;height:100%;position: absolute;box-shadow: 0 3px 4px 1px rgb(204, 204, 204);}
-#vol-control{
+
+#vol-control {
 	appearance: slider-horizontal;
 	cursor: default;
 	border: initial;
@@ -328,130 +150,154 @@ padding:0 0;
 	border-radius: 15px;
 	filter: hue-rotate(140deg)brightness(.9);
 }
+
 i.fa-volume-down {
 	margin-right: -8px;
 	right: 0;
 	margin: 2px;
 	font-size: 15px;
+}
+
+.fa-pause {
+	width: 1.20em !important;
+}
+
+.fa-play {
+	width: 1.35em!important;
+}
+
+i.fa-volume-up {
+	margin-right: -8px;
+	right: 0;
+	margin: 2px;
+	font-size: 15px;
+}
+
+/* offsets the inner parts of the player */
+.controls {
+	display: flex;
+	padding: 0 4em;
+	flex-direction: row;
+	margin-top: 3em;
+	justify-content: center;
+}
+
+/* responsivity */
+@media screen and (min-width: 1200px) {
+	body {
+		width: 500px;
 	}
-	.fa-pause {
-		width: 1.20em !important;
+	.flex_1 {
+		width: 100%;
+		max-width: 100%;
+		background: #dbd9d9;
 	}
-	.fa-play{
-		width: 1.35em!important;
+	.iframe_reload {
+		width: 458px !important;
+		margin: 1.2em;
+		background: white;
+		height: 80%;
+		box-shadow: 0 0 10px 1px grey;
+		border-bottom: 5px solid #acacac;
 	}
+}
 
-	i.fa-volume-up {
-		margin-right: -8px;
-		right: 0;
-		margin: 2px;
-		font-size: 15px;
+@media screen and (max-width: 900px) {
+	.flex_1 {
+		max-width: 100%;
+	}
+	.iframe_reload {
+		max-width: 100%
 	}
-button {
-	-webkit-appearance: none;
--moz-appearance: none;
-background: #cd2653;
-border: none;
-border-radius: 0;
-color: #fff;
-cursor: pointer;
-display: inline-block;
-font-size: 1.5rem;
-font-weight: 600;
-letter-spacing: 0.0333em;
-line-height: 1.25;
-margin: 0;
-opacity: 1;
-padding: 1.1em 1.44em;
-text-align: center;
-text-decoration: none;
-text-transform: uppercase;
-transition: opacity 0.15s linear;
-font-size: 13px;
-}
-.gray {
-		color:white;
-		background: gray ;
-}
-.red {
-	color: white;
-	background: #b22b2b;
 }
-dl{margin:0;}
-.controls {display: flex;padding: 0 4em;flex-direction: row;margin-top: 3em;justify-content: center;}
-@media screen and (min-width: 1200px){
-	body{width: 500px;}
-	.flex_1{width: 100%;max-width: 100%;background: #dbd9d9;}
-	.iframe_reload{width: 458px !important;margin: 1.2em;background:white;height:80%;box-shadow: 0 0 10px 1px grey;border-bottom:5px solid #acacac;}
 
+#nojs_message {
+	background: #726f6f;
+	color: white;
+	font-weight: bolder;
+	line-height: 1.5em;
+	padding: 1em;
 }
-@media screen and (max-width: 900px){
-	.flex_1 {max-width: 100%;}
-	.iframe_reload {max-width:100%}
-}
-#nojs_message {background: #726f6f;color:white;font-weight: bolder;line-height: 1.5em;padding: 1em;}
+
 @media screen and (max-width: 1200px) {
-button{margin-bottom: 1em!important;line-height: 2.25;/* border-radius: 500px; */}
-body{max-width: 100%;}
-.flex_1{max-width: 450px;box-shadow: 0 0 10px 1px #918e8e;}
-.iframe_reload {width: 100%!important;max-width: 450px;box-shadow: 0 0 10px 1px #bababa;}
+	button {
+		margin-bottom: 1em!important;
+		line-height: 2.25;
+		/* border-radius: 500px; */
+	}
+	body {
+		max-width: 100%;
+	}
+	.flex_1 {
+		max-width: 450px;
+		box-shadow: 0 0 10px 1px #918e8e;
+	}
+	.iframe_reload {
+		width: 100%!important;
+		max-width: 450px;
+		box-shadow: 0 0 10px 1px #bababa;
+	}
 }
 
-
 input[type="checkbox"] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  cursor: pointer;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	-webkit-tap-highlight-color: transparent;
+	cursor: pointer;
 }
+
 input[type="checkbox"]:focus {
-  outline: 0;
+	outline: 0;
 }
 
 .toggle {
-  height: 28px;
-  width: 48px;
-  border-radius: 16px;
-  display: inline-block;
-  position: relative;
-  margin: 1em .3em;
-  border: 2px solid #a2a2a4;
-  background: linear-gradient(180deg, #494A50 0%, #29292B 100%);
-  transition: all 0.2s ease;
+	height: 28px;
+	width: 48px;
+	border-radius: 16px;
+	display: inline-block;
+	position: relative;
+	margin: 1em .3em;
+	border: 2px solid #a2a2a4;
+	background: linear-gradient(180deg, #494A50 0%, #29292B 100%);
+	transition: all 0.2s ease;
 }
+
 .toggle:after {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: white;
-  box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
-  transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
+	content: "";
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	background: white;
+	box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2);
+	transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
 }
+
 .toggle:checked {
-  /*! border-color: #B22B2B; */
-  background: #b22c25;
-  margin: 1em .3em;
+	/*! border-color: #B22B2B; */
+	background: #b22c25;
+	margin: 1em .3em;
 }
+
 .toggle:checked:after {
-  transform: translatex(20px);
+	transform: translatex(20px);
 }
 
 .pressed {
-  display: block;
-  position: relative;
-  z-index: 3;
+	display: block;
+	position: relative;
+	z-index: 3;
 	background: #fff1f1;
-  width: 22px!important;
-  height: 22px!important;
-  border-left: 0px solid #fff1f1!important;
+	width: 22px!important;
+	height: 22px!important;
+	border-left: 0px solid #fff1f1!important;
 	border-top: 0px solid transparent!important;
 	border-bottom: 0px solid transparent!important;
 }
+
 .on {
 	color: white;
 	z-index: 100;
@@ -460,8 +306,8 @@ input[type="checkbox"]:focus {
 	position: inherit;
 	font-size: 32px!important;
 	border: none;
-
 }
+
 .loader {
 	border: 3px solid #eae7e7;
 	/* border-top-color: rgb(255 255 255); */
@@ -477,41 +323,88 @@ input[type="checkbox"]:focus {
 }
 
 /* Safari */
+
 @-webkit-keyframes spin {
-  0% { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
+	0% {
+		-webkit-transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+	}
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
 }
-.kvalitadiv{display: flex;flex-direction: row;margin-top: 5em;padding-top: .25em;justify-content: center;border-top: 1px solid #c8c8c8;}
 
+.quality {
+	display: flex;
+	flex-direction: row;
+	margin-top: 5em;
+	padding-top: .25em;
+	justify-content: center;
+	border-top: 1px solid #c8c8c8;
+}
+
+
+/* optional dark mode support. If not desired remove all code until from here until the end */
 @media (prefers-color-scheme: dark) {
 	html {
-	background:#121212;
+		background: #121212;
 	}
-	#umelec{margin-top:2em}
-	.ics-calendar h4{background: #232323;color: white;}
-	.ics-calendar h4:hover{background: #232323;color: white;}
-	body{
-	box-shadow: 	none;
-	background: #121212;
+	#umelec {
+		margin-top: 2em
 	}
-	p,a,h1,h2,h3 {color:white;}
-	.right{background: #181a1b;box-shadow: none;border-bottom: 7px solid #8c1e18;}
-	.flex_1{background:#232323;box-shadow: none;}
-	.iframe_reload{box-shadow: none;}
-	.iconify{color: whitesmoke !important;}
-	.loader{border:3px solid #181a1b;}
-	.jedenblok{background: #181a1b;color: white;}
-		.jedenblok:hover{background: #121212;}
-
-	@media screen and (min-width: 1200px){
-		.flex_1{background: #121212;}
-		.right{margin-top:0;padding-top:3em}
+	.ics-calendar h4 {
+		background: #232323;
+		color: white;
+	}
+	.ics-calendar h4:hover {
+		background: #232323;
+		color: white;
+	}
+	body {
+		box-shadow: none;
+		background: #121212;
+	}
+	p,
+	a,
+	h1,
+	h2,
+	h3 {
+		color: white;
+	}
+	.right {
+		background: #181a1b;
+		box-shadow: none;
+		border-bottom: 7px solid #8c1e18;
+	}
+	.flex_1 {
+		background: #232323;
+		box-shadow: none;
+	}
+	.iframe_reload {
+		box-shadow: none;
+	}
+	.iconify {
+		color: whitesmoke !important;
+	}
+	.loader {
+		border: 3px solid #181a1b;
 	}
 
-}
-
+	@media screen and (min-width: 1200px) {
+		.flex_1 {
+			background: #121212;
+		}
+		.right {
+			margin-top: 0;
+			padding-top: 3em
+		}
+	}
+}
\ No newline at end of file
diff --git a/player.html b/player.html
new file mode 100644
index 0000000..7efbae5
--- /dev/null
+++ b/player.html
@@ -0,0 +1,163 @@
+<!--
+   To whoever it may concern: replace 'stream.mp3' and const radioSource = '"https://icecast9.play.cz/radio-ostravan.mp3"' with the music stream of your choice.
+-->
+
+<!DOCTYPE html>
+<html lang="cs">
+
+<head>
+   <title>Simple js player</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='player.css' media='all' />
+    <!-- Monospace font for play and pause buttons-->
+    <script src="https://kit.fontawesome.com/6b02184769.js" crossorigin="anonymous"></script>
+    <!-- OFL font for rest of controls-->
+    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
+
+</head>
+<body>
+    <!-- if JS is not enabled -->
+    <noscript>
+         <div id="nojs_message">
+            <p>In order for this audio player to function, you need to have javascript enabled. If for any reason you do not wish to use javascript, here is an <ahref="stream.mp3">alternative link to an audio stream</a>.</p>
+         </div>
+      </noscript>
+    <!-- main flex container -->
+    <div class="flex_1" id="flex_1">
+        <div class="background">
+            <center>
+                <a target="_blank" href="#" title="A custom link"></a>
+                <div class="player">
+                    <audio preload="metadata" id="audio">Your browser lacks javascript support, please make use of this alternative link https://audio.mp3></audio>
+                    <p id="umelec" title="Current playing artist">Current playing artist</p>
+                    <p id="song" title="Current playing artist">Current playing song</p>
+                    
+                    <div class="controls">
+                        <h4 id="loader" style="visibility: hidden;
+                           position: absolute;
+                           display: block;
+                           margin: auto;
+                           overflow: visible;"/>
+                     
+                     <!-- wraps the play button and for js to listen to on click -->
+                     <div class="loader"></div>
+                        </h4>
+                        <div class="aroundbutton" alt="Run the stream" id="aroundbutton" title="Start the audio stream" style="cursor: pointer;">
+                            <a class="playbutton">
+                                <i class="fas fa-play fa-fw on" onclick="" id="on"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="quality" title="Higher quality">
+                        <span class="iconify" data-icon="si-glyph:button-hd" data-inline="false" style="line-height: 10px;color: rgb(178 44 37);margin: 0.455em 0.3em;font-size: 29px;display: table-cell;">></span></i>
+                        <input type="checkbox" class="toggle" onclick="check()" id="quality" checked>
+                    </div>
+
+                    <!-- volume an quality controls-->
+                    <span class="iconify" data-icon="fa:volume-down" data-inline="false" style="color: #343434;height:14px"></span>
+                    <input title="Volume" id="vol-control" type="range" min="0" max="100" step="1" value="100" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
+                    <span class="iconify" data-icon="fa:volume-up" data-inline="false" style="color: #343434;height:14px"></span>
+                </div>
+        </div>
+    </div>
+
+    <!-- The audio player code -->
+    <script>
+       //set initial volume var
+        window.SetVolume = function(val)
+         {
+             var player = document.getElementById('audio');
+             console.log('Before: ' + player.volume);
+             player.volume = val / 100;
+             console.log('After: ' + player.volume);
+         }
+         // check for which audio quality to load
+         var checkBox = document.getElementById("quality");
+         
+         const radioSource = "https://icecast9.play.cz/radio-ostravan-256.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
+         const resetAudio = "about:blank";
+         const loader = document.getElementById('loader');
+         const audio = document.getElementById('audio');
+         audio.addEventListener('loadstart', () => {
+           if (audio.src !== resetAudio) {
+             loader.style.visibility = "visible";
+           }
+         });
+         audio.addEventListener('playing', () => {
+           loader.style.visibility = "hidden";
+         });
+         // if cliked the play button start the stream
+         document.getElementById('aroundbutton').addEventListener('click', (evt) => {
+           var element = document.getElementById("on");
+           if(audio.paused){
+             audio.src = resetAudio;
+             audio.pause();
+         		audio.src = radioSource;
+             audio.load();
+             audio.play();
+         		element.classList.remove("fa-play");
+             element.classList.add("fa-pause");
+         		checkBox.checked = true;
+           } else {
+             element.classList.remove("fa-pause");
+             element.classList.add("fa-play");
+             audio.src = resetAudio;
+             audio.pause();
+           }
+          })
+    </script>
+    <script>
+        function check(){
+           if (checkBox.checked == true){
+             const radioSource = "https://icecast9.play.cz/radio-ostravan-256.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
+             const resetAudio = "about:blank";
+         		var element = document.getElementById("on");
+             audio.src = resetAudio;
+             audio.pause();
+         		audio.src = radioSource;
+             audio.load();
+         		audio.play();
+         		element.classList.remove("fa-play");
+         	 element.classList.add("fa-pause");
+         
+          } else {
+            const radioSource = "https://icecast9.play.cz/radio-ostravan.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
+            const resetAudio = "about:blank";
+         	 var element = document.getElementById("on");
+         	 audio.src = resetAudio;
+         	 audio.pause();
+         	 audio.src = radioSource;
+         	 audio.load();
+         	 audio.play();
+         	 element.classList.remove("fa-play");
+         	 element.classList.add("fa-pause");
+         }
+         
+         }
+            // json parser for current playing song and artist
+            function whatIsPlaying() {
+            var url = "https://onair.play.cz/json/radio-ostravan.json";
+            var xmlHttp = new XMLHttpRequest();
+            xmlHttp.onreadystatechange = function() {
+            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
+            document.getElementById('songs').innerHTML = JSON.parse(xmlHttp.responseText).song;
+            document.getElementById('umelecs').innerHTML = JSON.parse(xmlHttp.responseText).artist;
+            window.document.title = JSON.parse(xmlHttp.responseText).artist + " - " + JSON.parse(xmlHttp.responseText).song + " | Simple player";
+            	}
+            }
+            xmlHttp.open("GET", url, true);
+            xmlHttp.send();
+            }
+            whatIsPlaying();
+            setInterval(whatIsPlaying, 1500); // 2s
+    </script>
+    <script>
+        document.getElementById('on').addEventListener('click', (evt) => {
+           var element = document.getElementById("on");
+           element.classList.remove("fa-pause");
+           element.classList.add("fa-play");
+         })
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/prehravac.html b/prehravac.html
deleted file mode 100644
index 1dd0267..0000000
--- a/prehravac.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<!DOCTYPE html>
-<html lang="cs">
-   <head>
-      <meta name="viewport" content="width=device-width, initial-scale=1">
-      <title>Simple js player</title>
-      <link rel='stylesheet' id='prehravac'  href='player.css' media='all' />
-      <!-- Monospace font for play and pause buttons-->
-      <script src="https://kit.fontawesome.com/6b02184769.js" crossorigin="anonymous"></script>
-      <!-- OFL font for rest of controls-->
-      <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
-      <script>
-         /*
-         @licstart  The following is the entire license notice for the
-         JavaScript code in this page.
-         
-         Copyright (C) 2020  Daniel Honus
-         
-         The JavaScript code in this page is free software: you can
-         redistribute it and/or modify it under the terms of the GNU
-         General Public License (GNU GPL) as published by the Free Software
-         Foundation, either version 3 of the License, or (at your option)
-         any later version.  The code is distributed WITHOUT ANY WARRANTY;
-         without even the implied warranty of MERCHANTABILITY or FITNESS
-         FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
-         
-         As additional permission under GNU GPL version 3 section 7, you
-         may distribute non-source (e.g., minimized or compacted) forms of
-         that code without the copy of the GNU GPL normally required by
-         section 4, provided you include this license notice and a URL
-         through which recipients can access the Corresponding Source.
-         
-         
-         @licend  The above is the entire license notice
-         for the JavaScript code in this page.
-         */
-      </script>
-   </head>
-   <body>
-      <noscript>
-         <div id="nojs_message">
-            <p>In order for this audio player to function, you need to have
-               javascript enabled. If for any reason you do not wish to use
-               javascript, here is an <a
-                  href="stream.mp3">alternative link to
-               an audio stream</a>.
-            </p>
-         </div>
-      </noscript>
-      <div class="flex_1" id="flex_1">
-         <div class="right">
-            <center>
-            <a target="_blank" href="#" title="A custom link">
-            </a>
-            <div class="player">
-               <audio preload="metadata" id="audio">Your browser lacks javascript
-                  support, please make use of this alternative link https://audio.mp3
-               </audio>
-               <p id="umelec" title="Current playing artist">Current playing artist</p>
-               <p id="song" title="Current playing artist">Current playing song</p>
-               <div class="controls">
-                  <h4 id="loader" style="visibility: hidden;
-                     position: absolute;
-                     display: block;
-                     margin: auto;
-                     overflow: visible;">
-                     <div class="loader"></div>
-                  </h4>
-                  <div class="kolemtlacitka" alt="Run the stream" id="kolemtlacitka" title="Start the audio stream" style="cursor: pointer;">
-                     <a class="tlacitkoplay" >
-                     <i class="fas fa-play fa-fw on" onclick="" id="on"></i>
-                     </a>
-                  </div>
-               </div>
-               <div class="kvalitadiv" title="Higher quality">
-                  <span class="iconify" data-icon="si-glyph:button-hd" data-inline="false" style="line-height: 10px;color: rgb(178 44 37);margin: 0.455em 0.3em;font-size: 29px;display: table-cell;">></span></i>
-                  <input type="checkbox" class="toggle" onclick="check()" id="kvalita" checked>
-               </div>
-               <span class="iconify" data-icon="fa:volume-down" data-inline="false" style="color: #343434;height:14px"></span>
-               <input title="Volume" id="vol-control" type="range" min="0" max="100" step="1" value="100" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
-               <span class="iconify" data-icon="fa:volume-up" data-inline="false" style="color: #343434;height:14px"></span>
-            </div>
-         </div>
-      </div>
-      <!-- The audio player -->
-      <script>
-         window.SetVolume = function(val)
-         {
-             var player = document.getElementById('audio');
-             console.log('Before: ' + player.volume);
-             player.volume = val / 100;
-             console.log('After: ' + player.volume);
-         }
-         // Volba kvality
-         var checkBox = document.getElementById("kvalita");
-         
-         const radioSource = "https://icecast9.play.cz/radio-ostravan-256.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
-         const resetAudio = "about:blank";
-         const loader = document.getElementById('loader');
-         const audio = document.getElementById('audio');
-         audio.addEventListener('loadstart', () => {
-           if (audio.src !== resetAudio) {
-             loader.style.visibility = "visible";
-           }
-         });
-         audio.addEventListener('playing', () => {
-           loader.style.visibility = "hidden";
-         });
-         document.getElementById('kolemtlacitka').addEventListener('click', (evt) => {
-           var element = document.getElementById("on");
-           if(audio.paused){
-             audio.src = resetAudio;
-             audio.pause();
-         		audio.src = radioSource;
-             audio.load();
-             audio.play();
-         		element.classList.remove("fa-play");
-             element.classList.add("fa-pause");
-         		checkBox.checked = true;
-           } else {
-             element.classList.remove("fa-pause");
-             element.classList.add("fa-play");
-             audio.src = resetAudio;
-             audio.pause();
-           }
-          })
-         
-      </script>
-      <script>
-         function check(){
-           if (checkBox.checked == true){
-             const radioSource = "https://icecast9.play.cz/radio-ostravan-256.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
-             const resetAudio = "about:blank";
-         		var element = document.getElementById("on");
-             audio.src = resetAudio;
-             audio.pause();
-         		audio.src = radioSource;
-             audio.load();
-         		audio.play();
-         		element.classList.remove("fa-play");
-         	 element.classList.add("fa-pause");
-         
-          } else {
-            const radioSource = "https://icecast9.play.cz/radio-ostravan.mp3" + "?" + Math.floor((Math.random() * 10000) + 1) ;
-            const resetAudio = "about:blank";
-         	 var element = document.getElementById("on");
-         	 audio.src = resetAudio;
-         	 audio.pause();
-         	 audio.src = radioSource;
-         	 audio.load();
-         	 audio.play();
-         	 element.classList.remove("fa-play");
-         	 element.classList.add("fa-pause");
-         }
-         
-         }
-            function CoHraje() {
-            var url = "https://onair.play.cz/json/radio-ostravan.json";
-            var xmlHttp = new XMLHttpRequest();
-            xmlHttp.onreadystatechange = function() {
-            if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
-            document.getElementById('songs').innerHTML = JSON.parse(xmlHttp.responseText).song;
-            document.getElementById('umelecs').innerHTML = JSON.parse(xmlHttp.responseText).artist;
-            window.document.title = JSON.parse(xmlHttp.responseText).artist + " - " + JSON.parse(xmlHttp.responseText).song + " | Simple player";
-            	}
-            }
-            xmlHttp.open("GET", url, true);
-            xmlHttp.send();
-            }
-            CoHraje();
-            setInterval(CoHraje, 1500); // 2s
-         
-      </script>
-      <script>
-         document.getElementById('on').addEventListener('click', (evt) => {
-           var element = document.getElementById("on");
-           element.classList.remove("fa-pause");
-           element.classList.add("fa-play");
-         })
-      </script>
-      <script></script>
-   </body>
-</html>
-
-