<font color="green"><p style="margin-left: 40px"><b>Гостинная</b></p></font>
Температура: %livingroomInformer.uptime%°C</br>
<h3 class="ui-bar ui-bar-b ui-corner-all" align="center">Параметры</h3>
<table align="center">
<tr align="center">
<td>
<img src="/img/system/cpu.png"/></td>
<td>%server.CpuLoad% %<br>
%server.CpuTemp% °C</td>
<td>
<img src="/img/system/ram.png"/></td>
<td>%server.ramuse% %</td>
</tr>
</table>
<table align="center">
<tr>
<td>
<img src="/img/system/hdd.png"/></td>
<td style="width:100%;">
<div class="meter">
<span style="width:%server.disk1use%%"></span>
<p>/</p>
<p2>%server.disk1use%%</p2>
</div>
<div class="meter">
<span style="width:%server.disk2use%%"></span>
<p>/var/log</p>
<p2>%server.disk2use%%</p2>
</div>
<div class="meter">
<span style="width:%server.disk3use%%"></span>
<p>/tmp</p>
<p2>%server.disk3use%%</p2>
</div>
<div class="meter">
<span style="width:%server.disk4use%%"></span>
<p>/home/pi/blynk</p>
<p2>%server.disk4use%%</p2>
</div>
<div class="meter">
<span style="width:%server.disk5use%%"></span>
<p>/var/www/html/debmes</p>
<p2>%server.disk5use%%</p2>
</div>
</td>
</tr>
<tr>
<td>
<img src="/img/system/clock.png"/></td>
<td>Uptime: %server.SystemUptime%</td>
</tr>
</table>
<fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true" align=right>
<input type="radio" name="radio-choice-power" id="reboot" value="reboot" onclick="$.get('/objects/?object=ThisComputer&op=m&m=reboot&');">
<label for="reboot" style="background: #616110; padding-left: 0px; padding-right: 0px;"><span class="ui-btn-icon-left ui-icon-refresh"></span></label>
<input type="radio" name="radio-choice-power" id="poweroff" value="poweroff" onclick="$.get('/objects/?object=ThisComputer&op=m&m=poweroff&');">
<label for="poweroff" style="background: #8a1111; padding-left: 0px; padding-right: 0px; margin-right: -18px;"><span class="ui-btn-icon-left ui-icon-power"></span></label>
</fieldset>
<script>
var bar = $('span');
var p = $('p');
var width = bar.attr('style');
width = width.replace("width:", "");
width = width.substr(0, width.length-1);
var interval;
var start = 0;
var end = parseInt(width);
var current = start;
var countUp = function() {
current++;
if (current === end) {
clearInterval(interval);
}
};
interval = setInterval(countUp, (1000 / (end + 1)));
</script>
<style>
div.meter {
position: relative;
background:#90a6b5;
width: 100%;
height: 25px;
border: 1px solid #b0b0b0;
margin-top: 5px;
/* viewing purposes */
-webkit-box-shadow: inset 0 3px 5px 0 #d3d0d0;
-moz-box-shadow: inset 0 3px 5px 0 #d3d0d0;
box-shadow: inset 0 3px 5px 0 #d3d0d0;
-webkit-border-radius: 12.5px;
-moz-border-radius: 12.5px;
-ms-border-radius: 12.5px;
-o-border-radius: 12.5px;
border-radius: 12.5px;
}
div.meter span {
display: block;
height: 100%;
animation: grower 1s linear;
-moz-animation: grower 1s linear;
-webkit-animation: grower 1s linear;
-o-animation: grower 1s linear;
position: relative;
top: -1px;
left: -1px;
-webkit-border-radius: 12.5px;
-moz-border-radius: 12.5px;
-ms-border-radius: 12.5px;
-o-border-radius: 12.5px;
border-radius: 12.5px;
-webkit-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
border: 1px solid #3c84ad;
background: #6eb2d1;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-background-size: 45px 45px;
-moz-background-size: 45px 45px;
-o-background-size: 45px 45px;
background-size: 45px 45px;
}
div.meter span:before {
content: '';
display: block;
width: 100%;
height: 50%;
position: relative;
top: 50%;
background: rgba(0, 0, 0, 0.03);
}
div.meter p {
position: absolute;
top: 0;
margin: 0 10px;
line-height: 25px;
font-family: 'Helvetica';
font-weight: bold;
-webkit-font-smoothing: antialised;
font-size: 15px;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
div.meter p2 {
position: absolute;
margin: 0 10px;
top: 0;
right:0;
margin: 10 0px;
line-height: 25px;
font-family: 'Helvetica';
font-weight: bold;
-webkit-font-smoothing: antialised;
font-size: 15px;
color: #333;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
}
@keyframes grower {
0% {
width: 0%;
}
}
@-moz-keyframes grower {
0% {
width: 0%;
}
}
@-webkit-keyframes grower {
0% {
width: 0%;
}
}
@-o-keyframes grower {
0% {
width: 0%;
}
}
</style>