From dcf3626d6bac636432efd77f8a19a6ec4cdb394c Mon Sep 17 00:00:00 2001
From: santic-zombie <santicmail@rambler.ru>
Date: Fri, 27 Mar 2020 11:18:03 +0300
Subject: [PATCH] onclick button change playing status, replace main block

---
 css/style1.css | 17 ++++++++++++++---
 index.php      |  9 ++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)
diff --git a/css/style1.css b/css/style1.css
index 4f71aa7..6a086ea 100644
--- a/css/style1.css
+++ b/css/style1.css
@@ -6,11 +6,22 @@ body {
   background-size: cover;
 }
 
+.parent {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    align-content: center; 
+    justify-content: center; 
+    overflow: auto;   
+}
+
 #song{
   width: 400px;
-  height: 300px;
-  margin: auto;
-  justify-content : center;
+  height: 340px;
   background-color: rgba(0, 0, 0, 0.7);
   border-radius: 10px;
   color: #fff;
diff --git a/index.php b/index.php
index 4f82e09..7204380 100755
--- a/index.php
+++ b/index.php
@@ -16,13 +16,12 @@
 
 <body>
 
+<div class="parent">
 	<div id="song">
 
 		<h1>Just Radio</h1>
 
-		now playing:
-
-		<br>
+		<div id="myPlay">-</div>
 
 		<div id="title">title</div>
 
@@ -53,15 +52,19 @@
 		<div id="listeners">title</div>
 
 	</div>
+</div>
+
 
 <script language="JavaScript">
 	var audio = new Audio('http://stream.santic-zombie.ru');
 	var play = document.getElementById('play');
 	play.addEventListener('click', function() {
+		$("#myPlay").text("Now playing:");
 		audio.play();
 	}, false);
 	var pause = document.getElementById('pause');
 	pause.addEventListener('click', function() {
+		 $("#myPlay").text("Paused");
 	     audio.pause();
 	}, false);
 	var volume = document.getElementById('volume');
