-
Часы
(custom)
<html>
<head>
<style type="text/css">
.container {height 30px; margin: 0 auto; overflow: hidden;}
.clock { margin:0 auto; padding:5px; color:#fff; }
#Date { font-family: Arial, Helvetica, sans-serif; font-size:16px; text-align:center; text-shadow:0 0 5px #00c6ff; }
.layul { margin:0 auto; padding:0px; list-style:none; text-align:center; }
.layli { display:inline; font-size:22px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; }
#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; }
@-webkit-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 10px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 10px #00c6ff; }
}
@-moz-keyframes mymove
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Создаем две переменные с названиями месяцев и дней недели в массиве
var monthNames = [ "Января,", "Февраля,", "Марта,", "Апреля,", "Мая,", "Июня,", "Июля,", "Августа,", "Сентября,", "Октября,", "Ноября,", "Декабря," ];
var dayNames= ["Воскресенье,","Понедельник,","Вторник,","Среда,","Четверг,","Пятница,","Суббота,"]
// Создаем объект newDate()
var newDate = new Date();
// Извлекаем текущую дату из объекта Date
newDate.setDate(newDate.getDate());
// На выходе день, дата, месяц и год
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
// Создаем объект newDate() и извлекаем секунды текущего времени
var seconds = new Date().getSeconds();
// Добавляем начальный ноль к значению секунд
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Создаем объект newDate() и извлекаем минуты текущего времени
var minutes = new Date().getMinutes();
// Добавляем начальный ноль к значению минут
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Создаем объект newDate() и извлекаем часы из текущего времени
var hours = new Date().getHours();
// Добавляем начальный ноль к значению часов
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});
</script>
</head>
<body>
<div>
<div class="container">
<div class="clock">
<div id="Date"></div>
<ul class="layul">
<li class="layli" id="hours"></li>
<li class="layli" id="point">:</li>
<li class="layli" id="min"></li>
<li class="layli" id="point">:</li>
<li class="layli" id="sec"></li>
</ul>
</div>
</div>
</body>
</html>
-
Состояние системы
(custom)
<img src="/img/icons/status/network_32_%Communication.stateColor%.png" align="absmiddle" title="Состояние сети">
<img src="/img/icons/status/lock_32_%Security.stateColor%.png" align="absmiddle" title="Состояние безопасности">
<img src="/img/icons/status/system_32_%System.stateColor%.png" align="absmiddle" title="Состояние системы">
<img src="/img/icons/status/f_%f_PC.stateColor%.png" align="absmiddle">
<img src="/img/icons/status/m_%m_PC.stateColor%.png" align="absmiddle">
<img src="/img/icons/status/n_%notebook.stateColor%.png" align="absmiddle">
%Communication.stateDetails% %Security.stateDetails% %System.stateDetails%
-
Погода (%YandexNVKZ.Temp%°C)
%YandexNVKZ.Type%
5
-
История событий
(label)
-
<#LANG_GENERAL_EVENTS_LOG#> (code)
(custom)
<div style="text-shadow:none;font-weight:normal;">[#module name="shoutbox" limit="10" reverse="1" mobile="1"#]</div>
-
Настройки
8
-
Инфо о сервере (code)
(custom)
%ThisComputer.freespaceHome%<br>
%ThisComputer.CPUtemp%<br>
%ThisComputer.uptime%<br>
%ThisComputer.SiteUptime%
-
Инструменты
5
-
Видеонаблюдение
8
-
Освещение
-
Домашние страницы
1
-
Календарь
(custom)
<style>
#calendar2 {
width: 100%;
font: monospace;
line-height: 1.2em;
font-size: 15px;
text-align: center;
}
#calendar2 thead tr:last-child {
font-size: small;
color: rgb(85, 85, 85);
}
#calendar2 thead tr:nth-child(1) td:nth-child(2) {
color: rgb(50, 50, 50);
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
cursor: pointer;
}
#calendar2 tbody td {
color: rgb(44, 86, 122);
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
background: rgb(220, 0, 0);
color: #fff;
}
</style>
<table id="calendar2">
<thead>
<tr><td>‹<td colspan="5"><td>›
<tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
<tbody>
</table>
<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
for(var i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
for(var i = 0; i < 6; i++) calendar += '<td>';
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
}else{
calendar += '<td>' + i;
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
for(var i = DNlast; i < 7; i++) calendar += '<td> ';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) { // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() {
Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}
</script>