mashirozx · March 20, 2022 00:25
diff --git a/vultr-bandwidth-monitor-index.php b/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>