int commit

5 years ago · 075de28f0d
commit 075de28f0d
3 changed files with 154 additions and 0 deletions
--- a/css/style1.css
+++ b/css/style1.css
@ -0,0 +1,46 @@
+body {
+    background-color: rgb(143, 188, 143);
+}
+
+.btn {
+	width: 100px;
+	height: 60px;
+	border-radius: 5px;
+	border: #f54e4e;
+	background-color: #f54e4e;
+	color: #fff;
+	transition: 0.5s ease all;
+	outline: none;
+	cursor: pointer;
+	text-align: center;
+	margin: auto;
+	justify-content : center 
+
+}
+
+.btn:hover {
+	color: #f54e4e;
+	background-color: #fff;
+}
+
+.btn-wrap {
+	max-width: 250px;
+	margin: auto;
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: flex;
+}
+
+
+h1 { 
+    text-align: center
+}
+
+DIV {
+    text-align: center
+}
+
+
+
--- a/index.php
+++ b/index.php
@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr">
+
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<link rel="stylesheet" type="text/css" href="/css/style1.css"> 
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
+	<title>My Test Radio</title>
+	<script
+		src="https://code.jquery.com/jquery-3.4.1.js"
+		integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
+		crossorigin="anonymous">
+	</script>
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+  <script>
+  $( function() {
+    $( "#slider" ).slider();
+  } );
+  </script>
+
+</head>
+
+<body>
+	<h1>Just Radio</h1> 
+	
+	<div id="song">
+		now playing:
+		
+		<br>
+		
+		<div id="title">title</div>
+			
+		<br>
+
+		<div class="btn-wrap">
+			<button id="play" class="btn">
+			<i class="fas fa-play-circle"></i>
+			Play
+			</button>
+			<button id="pause" class="btn">
+			<i class="fas fa-pause-circle"></i>
+			Pause
+			</button>	
+		</div>
+		
+		<br>
+	
+		<div>
+			vol:
+			<br> 
+			<input id="volume" type="range" min="0" max="20" value="5" />
+		</div>
+
+		<span id="duration"></span>
+		<br>
+		
+		<div id="slider"></div>
+		
+	</div>
+
+<script language="JavaScript">
+	var audio = new Audio('http://stream.santic-zombie.ru');
+	var play = document.getElementById('play');
+	play.addEventListener('click', function() {
+		audio.play();
+	}, false);
+	var pause = document.getElementById('pause');
+	pause.addEventListener('click', function() {
+	     audio.pause();
+	}, false);
+	var volume = document.getElementById('volume');
+	volume.addEventListener('change', function(){
+	    audio.volume = parseFloat(this.value / 10);
+	}, false);
+	audio.addEventListener("timeupdate", function() {
+	    var duration = document.getElementById('duration');
+	    var s = parseInt(audio.currentTime % 60);
+	    var m = parseInt((audio.currentTime / 60) % 60);
+	    var h = parseInt((audio.currentTime / 3600) % 60);
+	    if (s < 10) s = '0' + s;
+	    if (m < 10) m = '0' + m;
+	    if (h < 10) h = '0' + h;
+	    duration.innerHTML = h + ':' + m + ':' + s;
+	}, false);
+</script>
+
+<script  language="JavaScript">  
+    function show()  
+    {  
+        $.ajax({  
+            url: '/trackname.php',  
+	    cache: false,  
+            success: function(html){  
+                $('#title').html(html);  
+            }  
+        });  
+    }
+    $(document).ready(function(){  
+        show();  
+        setInterval('show()',5000);  
+    });  
+</script>
+
+</body>
+
+</html>
--- a/trackname.php
+++ b/trackname.php
@ -0,0 +1 @@
+<?php echo exec('mpc current');?>