<style type="text/css">
@import url("/css/font-awesome/css/font-awesome.min.css");
progress {
-webkit-appearance: none;
height: 14px;
width: 120px;
}
progress[value]::-webkit-progress-bar {
background-color: rgb(68, 68, 68);
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}
progress[value]::-webkit-progress-value {
border-radius: 3px;
}
s_grey progress[value]::-webkit-progress-value {
background-color: grey;
}
s_yellow progress[value]::-webkit-progress-value {
background-color: yellow;
}
s_greenyellow progress[value]::-webkit-progress-value {
background-color: greenyellow;
}
s_lime progress[value]::-webkit-progress-value {
background-color: lime;
}
s_green progress[value]::-webkit-progress-value {
background-color: green;
}
s_orange progress[value]::-webkit-progress-value {
background-color: orange;
}
s_red progress[value]::-webkit-progress-value {
background-color: red;
}
div.vov {
width: 12px;
line-height: 3px;
font-size: 18px;
float: left;
margin-top: -7px;
padding-bottom: 14px;
}
div.vov-cont {
float: right;
}
.wp-table {
width: 100%;
margin: 1 auto;
border-collapse: collapse;
font-size: 11px;
font-family: arial;
color: rgb(200, 200, 200);
}
/* Background-color of the odd rows */
.wp-table tr:nth-child(odd) {
background-color: rgb(49, 49, 49);
}
/* Background-color of the even rows */
.wp-table tr:nth-child(even) {
background-color: rgb(59, 59, 59);
}
.wp-table td {
padding: 4px;
border-top: 2px solid rgb(42, 42, 42);
}
.toggle_ip {
font-size: 150%;
float: right;
color: grey;
cursor: pointer;
}
</style>
<div align="center" style="font-size:14px;"><span style="font-size:24px; color:orange;"><b>Алиса</b></span><br>
<table class="wp-table">
<tbody>
<tr>
<td colspan="3" align="center">
<b><span style="font-size:12px; color:orange;">Raspberry Pi 3B+</span></b><br>
</td>
</tr>
<tr>
<td>Последнее сообщение<br>
</td>
<td colspan="2" align="right">"<span style="font-size:11px; color:orange;">%ThisComputer.lastSayMessage%</span>"</td>
</tr>
<tr>
<td><br>
Громкос. сист.<br>
<br>
</td>
<td align="left"><div class="vov-cont"><s_orange><progress value="%ThisComputer.volumeLevel%" max="100"></progress></s_orange></div></td>
<td> <span style="font-size:12px; color:orange;">%ThisComputer.volumeLevel% %</span></td>
</tr>
<tr>
<td><br>
Загрузка ОЗУ<br>
<br>
</td>
<td align="left">
<!-- блок вывода гистограммы загрузки CPU -->
<div class="vov-cont">
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_9%">%ThisComputer.System_memory_9%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_8%">%ThisComputer.System_memory_8%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_7%">%ThisComputer.System_memory_7%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_6%">%ThisComputer.System_memory_6%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_5%">%ThisComputer.System_memory_5%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_4%">%ThisComputer.System_memory_4%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_3%">%ThisComputer.System_memory_3%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_2%">%ThisComputer.System_memory_2%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_1%">%ThisComputer.System_memory_1%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.System_memory_color_0%">%ThisComputer.System_memory_0%</b>
</div>
</div> <br>
</td>
<td> <span style="font-size:12px; color:orange;">%ThisComputer.System_memory% %</span></td>
</tr>
<tr>
<td>Загрузка CPU</td>
<td align="left">
<!-- блок вывода гистограммы загрузки CPU -->
<div class="vov-cont">
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_9%">%ThisComputer.CPUload_9%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_8%">%ThisComputer.CPUload_8%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_7%">%ThisComputer.CPUload_7%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_6%">%ThisComputer.CPUload_6%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_5%">%ThisComputer.CPUload_5%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_4%">%ThisComputer.CPUload_4%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_3%">%ThisComputer.CPUload_3%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_2%">%ThisComputer.CPUload_2%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_1%">%ThisComputer.CPUload_1%</b>
</div>
<div class="vov">
<b style="color:%ThisComputer.CPUload_color_0%">%ThisComputer.CPUload_0%</b>
</div>
</div> <br>
</td>
<td> <span style="font-size:12px; color:orange">%ThisComputer.CPUload% %</span></td></tr>
<tr>
<td><br>
Температ. CPU<br>
<br>
</td>
<td align="left"><div class="vov-cont"><s_%ThisComputer.CPU_temp_color%><progress value="%ThisComputer.CPU_temp%" max="100"></progress></s_%ThisComputer.CPU_temp_color%></div></td>
<td> <span style="font-size:12px; color:%ThisComputer.CPU_temp_color%;">%ThisComputer.CPU_temp%°C</span></td>
</tr>
<tr>
<td><br>
Uptime<br>
<br>
</td>
<td align="right"><span style="font-size:11px; color:orange;">%ThisComputer.System_uptime%</span></td>
<td></td>
</tr>
</tbody>
</table>
</div>