mashirozx/vultr-bandwidth-monitor-index.php

## vultr-bandwidth-monitor-index.php
<?php
error_reporting(E_ERROR);
ini_set("display_errors","Off");
$request = "https://api.vultr.com/v1/server/bandwidth?SUBID=YOUR_SUBID&api_key=YOUR_API_KEY";
$serviceInfo = json_decode(file_get_contents($request));
$income = $serviceInfo->incoming_bytes;
$outgo = $serviceInfo->outgoing_bytes;
$sumin = 0;
$sumout = 0;
foreach ($income as $invalue) {
  $sumin = $sumin + $invalue[1];
}
foreach ($outgo as $outvalue) {
  $sumout = $sumout + $outvalue[1];
}
$data = array(
    "plan_monthly_data" => 1073741824000,
    "data_counter" => $sumin + $sumout,
    );
$json = json_encode($data);
file_put_contents("data.json", $json);

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bandwidth Usage</title>
	<link rel="shortcut icon" type="images/x-icon" href="./favicon.ico">
	<meta name="theme-color" content="#fff">
    <meta name="viewport" content="width=320,maximum-scale=1.0,user-scalable=no">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<style>
	@import url('https://fonts.proxy.ustclug.org/css?family=Indie+Flower|Josefin+Sans|Libre+Barcode+39+Text');
	/**For some reason this is a Google Fonts Mirror for China, you may replace it with the real Google Fonts Domain**/
    body {
        /* margin: 0;
         * padding: 0;
         * background: url('./bg.jpg') center ;
		 */
		margin:0;
		padding: 0;
		background: #16A085;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #F4D03F, #16A085);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #F4D03F, #16A085); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    }

	header {
		text-align: center;
		color: white;
		font: 50px "Libre Barcode 39 Text",sans-serif
	}

	footer {
		margin:10px;
		padding: 0;
		text-align: center;
		color: white;
		font: 25px "Indie Flower",sans-serif;
		bottom: 0px
	}
	.fixed-bottom {position: fixed;bottom: 0;width:100%;}

    div {
        font: 25px 'Josefin Sans',sans-serif;
        text-shadow: 0 0 5px;
		text-align: center;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 5px;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

	hr {
	  border : 0;
	  height: 2px;
	  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	}

    @media screen and (max-width: 700px) {
        body {
            background-position: 32% 50%;
        }
    }
}
</style>
</head>

<body>
  <header>Designed by Mashiro</header>
  <div id="data-used"></div><div id="data-info"></div>
  <footer class="fixed-bottom">This is the Real-Time Bandwidth Usage of the Past 30 Days</footer>
<script>
$(function(){
    function footerPosition(){
        $("footer").removeClass("fixed-bottom");
        var contentHeight = document.body.scrollHeight,//网页正文全文高度
            winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
        if(!(contentHeight > winHeight)){
            //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
            $("footer").addClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});
</script>
<script>

    $.ajax({
        url: "./data.json",
        cache: false,
        dataType: "json",
        type: "GET",
        success: function(data){
            var plan_data, used_data, data_income, data_outcome, date_update, val;
            used_data = (data["data_counter"] / 1024 / 1024 / 1024 / 2).toFixed(3);
            plan_data = data["plan_monthly_data"] / 1024 / 1024 / 1024;
            //val = (data["data_counter"] / data["plan_monthly_data"]).toFixed(4);
			val = (used_data / plan_data * 100).toFixed(0);
            $("#data-info").html("Used: " + val + "%<br><br>" + used_data + " GB<hr>" + plan_data + " GB");
			val/=100;
            $("#data-used").circleProgress({
                value: val,
                emptyFill: "rgba( 255, 255, 255, .7)",
                size: 300,
                startAngle: -(Math.PI/2),
                thickness: 10,
                lineCap: "round",
                fill: { gradient: ["#3aeabb", "#fdd250"] },
            });
        }
    });

</script>
</body>
</html>
	<?php
	error_reporting(E_ERROR);
	ini_set("display_errors","Off");
	$request = "https://api.vultr.com/v1/server/bandwidth?SUBID=YOUR_SUBID&api_key=YOUR_API_KEY";
	$serviceInfo = json_decode(file_get_contents($request));
	$income = $serviceInfo->incoming_bytes;
	$outgo = $serviceInfo->outgoing_bytes;
	$sumin = 0;
	$sumout = 0;
	foreach ($income as $invalue) {
	$sumin = $sumin + $invalue[1];
	}
	foreach ($outgo as $outvalue) {
	$sumout = $sumout + $outvalue[1];
	}
	$data = array(
	"plan_monthly_data" => 1073741824000,
	"data_counter" => $sumin + $sumout,
	);
	$json = json_encode($data);
	file_put_contents("data.json", $json);

	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Bandwidth Usage</title>
	<link rel="shortcut icon" type="images/x-icon" href="./favicon.ico">
	<meta name="theme-color" content="#fff">
	<meta name="viewport" content="width=320,maximum-scale=1.0,user-scalable=no">
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
	<style>
	@import url('https://fonts.proxy.ustclug.org/css?family=Indie+Flower\|Josefin+Sans\|Libre+Barcode+39+Text');
	/For some reason this is a Google Fonts Mirror for China, you may replace it with the real Google Fonts Domain/
	body {
	/* margin: 0;
	* padding: 0;
	* background: url('./bg.jpg') center ;
	*/
	margin:0;
	padding: 0;
	background: #16A085; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #F4D03F, #16A085); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #F4D03F, #16A085); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	}

	header {
	text-align: center;
	color: white;
	font: 50px "Libre Barcode 39 Text",sans-serif
	}

	footer {
	margin:10px;
	padding: 0;
	text-align: center;
	color: white;
	font: 25px "Indie Flower",sans-serif;
	bottom: 0px
	}
	.fixed-bottom {position: fixed;bottom: 0;width:100%;}

	div {
	font: 25px 'Josefin Sans',sans-serif;
	text-shadow: 0 0 5px;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 5px;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	}

	hr {
	border : 0;
	height: 2px;
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
	}

	@media screen and (max-width: 700px) {
	body {
	background-position: 32% 50%;
	}
	}
	}
	</style>
	</head>

	<body>
	<header>Designed by Mashiro</header>
	<div id="data-used"></div><div id="data-info"></div>
	<footer class="fixed-bottom">This is the Real-Time Bandwidth Usage of the Past 30 Days</footer>
	<script>
	$(function(){
	function footerPosition(){
	$("footer").removeClass("fixed-bottom");
	var contentHeight = document.body.scrollHeight,//网页正文全文高度
	winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
	if(!(contentHeight > winHeight)){
	//当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
	$("footer").addClass("fixed-bottom");
	}
	}
	footerPosition();
	$(window).resize(footerPosition);
	});
	</script>
	<script>

	$.ajax({
	url: "./data.json",
	cache: false,
	dataType: "json",
	type: "GET",
	success: function(data){
	var plan_data, used_data, data_income, data_outcome, date_update, val;
	used_data = (data["data_counter"] / 1024 / 1024 / 1024 / 2).toFixed(3);
	plan_data = data["plan_monthly_data"] / 1024 / 1024 / 1024;
	//val = (data["data_counter"] / data["plan_monthly_data"]).toFixed(4);
	val = (used_data / plan_data * 100).toFixed(0);
	$("#data-info").html("Used: " + val + "%<br><br>" + used_data + " GB<hr>" + plan_data + " GB");
	val/=100;
	$("#data-used").circleProgress({
	value: val,
	emptyFill: "rgba( 255, 255, 255, .7)",
	size: 300,
	startAngle: -(Math.PI/2),
	thickness: 10,
	lineCap: "round",
	fill: { gradient: ["#3aeabb", "#fdd250"] },
	});
	}
	});

	</script>
	</body>
	</html>