<style>
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: normal;
src: url('/fonts/RobotoCondensed-Regular.ttf') format('truetype')
}
@font-face {
font-family: 'Roboto Condensed';
font-style: normal;
font-weight: bold;
src: url('/fonts/RobotoCondensed-Bold.ttf') format('truetype')
}
.ui-content {
font-family: Roboto Condensed !important;
color: #3D3E3F;
padding: 0;
}
.ui-header {
display: none;
}
.ui-listview {
margin-top: 0px !important;
}
.ui-li-static {
background: #ECF1F4 !important;
}
.ui_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.ui_header-text {
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.ui_header {
width: 100%;
}
.ui_logo {
width: 24px;
height: 29px;
}
.ui_float-right {
float: right;
}
.ui_divider {
width: 100%;
height: 5px;
background: #3D3E3F;
}
.ui_user {
width: 150px;
height: 150px;
flex-shrink: 0;
border-radius: 10px;
background: #FFF;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 8px;
margin-right: 8px;
}
.ui_user > .ui_image {
width: 75px;
height: 75px;
border-left: 8px solid #B6D584;
margin-top: 16px;
}
.ui_user > .ui_image > img {
width: 75px;
height: 75px;
}
.ui_user > .ui_content {
color: #3D3E3F;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 8px;
margin-left: 12px;
width: 90%;
}
.ui_user > .ui_footer {
width: 90%;
margin-top: 6px;
margin-left: 12px;
}
.ui_user > .ui_footer > .ui_place {
color: #3D3E3F;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-top: 13px;
}
.ui_user > .ui_footer > .ui_time {
text-align: right;
font-size: 9px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-right: 10px;
padding-top: 5px;
}
.ui_user[data-attr="faded"] {
background-color: #C4C4C4;
opacity: 0.75;
}
.ui_top-content {
min-height: calc(90vh - 35px);
}
.ui_menu {
height: 120px;
}
.ui_menu > .ui_container > a > img {
width: 32px;
height: 32px;
margin-top: 6px;
margin-left: 20px;
}
</style>
<div class="ui_top-content">
<div class="ui_container">
<div class="ui_header">
<span class="ui_header-text">ПОЛЬЗОВАТЕЛИ</span>
<img class="ui_logo ui_float-right" src="/img/icons/Logo.svg" />
</div>
<div class="ui_divider"></div>
<div class="ui_header">
<span class="ui_header-text">%ThisComputer.timeNow%</span>
<span class="ui_header-text ui_float-right">%ThisComputer.Date%</span>
</div>
<div class="ui_user" id="user-natasha">
<div class="ui_image">
<img src="/img/users/natasha.jpg" />
</div>
<div class="ui_content">%Natasha.FullName%</div>
<div class="ui_footer">
<span class="ui_place">%Natasha.seenAt%</span>
<span class="ui_time ui_float-right" id="user-natasha-seen"></span>
</div>
</div>
<div class="ui_user" id="user-sasha">
<div class="ui_image">
<img src="/img/users/sasha.jpg" />
</div>
<div class="ui_content">%Alex.FullName%</div>
<div class="ui_footer">
<span class="ui_place">%Alex.seenAt%</span>
<span class="ui_time ui_float-right" id="user-sasha-seen"></span>
</div>
</div>
<div class="ui_user" id="user-ulyana">
<div class="ui_image">
<img src="/img/users/ulyana.png" />
</div>
<div class="ui_content">%Ulyana.FullName%</div>
<div class="ui_footer">
<span class="ui_place">%Ulyana.seenAt%</span>
<span class="ui_time ui_float-right" id="user-ulyana-seen"></span>
</div>
</div>
<div class="ui_user" id="user-misha">
<div class="ui_image">
<img src="/img/users/misha.png" />
</div>
<div class="ui_content">%Misha.FullName%</div>
<div class="ui_footer">
<span class="ui_place">%Misha.seenAt%</span>
<span class="ui_time ui_float-right" id="user-misha-seen"></span>
</div>
</div>
</div>
</div>
<div class="ui_menu">
<div class="ui_divider"></div>
<div class="ui_container">
<a href="/menu/205.html">
<img src="/img/icons/user.svg" /></a>
<a href="/menu/206.html">
<img src="/img/icons/thermometer.svg" /></a>
<a href="/menu/208.html">
<img src="/img/icons/camera.svg" /></a>
<a href="/menu/212.html">
<img src="/img/icons/chart-donut.svg" /></a>
<a href="/menu/227.html" class="ui-link"><i class="home-3-alt icon medium"></i></a>
</div>
</div>
<script type="text/javascript">
if ('%Natasha.seenAt%' != 'ДОМ') {
$("#user-natasha").attr("data-attr", "faded");
let natashaSeenAt = new Date(%Natasha.CoordinatesUpdatedTimestamp%*1000);
diff = (new Date() - natashaSeenAt);
mm = Math.floor(diff / 1000 / 60) % 60;
hh = Math.floor(diff / 1000 / 60 / 60);
if (hh > 0) { str = hh.toString()+" ч " + mm.toString()+" мин назад" } else { str = mm.toString()+" мин назад" }
$("#user-natasha-seen").html(str);
}
if ('%Alex.seenAt%' != 'ДОМ') {
$("#user-sasha").attr("data-attr", "faded");
let sashaSeenAt = new Date(%Sasha.CoordinatesUpdatedTimestamp%*1000);
diff = (new Date() - sashaSeenAt);
mm = Math.floor(diff / 1000 / 60) % 60;
hh = Math.floor(diff / 1000 / 60 / 60);
if (hh > 0) { str = hh.toString()+" ч " + mm.toString()+" мин назад" } else { str = mm.toString()+" мин назад" }
$("#user-sasha-seen").html(str);
}
if ('%Ulyana.seenAt%' != 'ДОМ') {
$("#user-ulyana").attr("data-attr", "faded");
let ulyanaSeenAt = new Date(%Ulyana.CoordinatesUpdatedTimestamp%*1000);
diff = (new Date() - ulyanaSeenAt);
mm = Math.floor(diff / 1000 / 60) % 60;
hh = Math.floor(diff / 1000 / 60 / 60);
if (hh > 0) { str = hh.toString()+" ч " + mm.toString()+" мин назад" } else { str = mm.toString()+" мин назад" }
$("#user-ulyana-seen").html(str);
}
if ('%Misha.seenAt%' != 'ДОМ') {
$("#user-misha").attr("data-attr", "faded");
let mishaSeenAt = new Date(%Misha.CoordinatesUpdatedTimestamp%*1000);
diff = (new Date() - mishaSeenAt);
mm = Math.floor(diff / 1000 / 60) % 60;
hh = Math.floor(diff / 1000 / 60 / 60);
if (hh > 0) { str = hh.toString()+" ч " + mm.toString()+" мин назад" } else { str = mm.toString()+" мин назад" }
$("#user-misha-seen").html(str);
}
</script>