<div id="tabs">
<ul>
<li>
<a href="#a">
<img class="icon home-icon" src="/cms/menu_theme/MB__home.png" alt="Home"/></a>
</li>
<li>
<a href="#b">
<img class="icon bulb-icon" src="/cms/menu_theme/MB__bulb.png" alt="Bulb"/></a>
</li>
<li>
<a href="#c">
<img class="icon camera-icon" src="/cms/menu_theme/MB__camera.png" alt="Camera"/></a>
</li>
<li>
<a href="#d">
<img class="icon calendar-icon" src="/cms/menu_theme/MB__calendar.png" alt="Calendar"/></a>
</li>
<li>
<a href="#f">
<img class="icon navigation-icon" src="/cms/menu_theme/MB__navigation.png" alt="Navigation"/></a>
</li>
</ul>
<div id="a">
<div class="panel panel-time mb-block-center">
<div class="date panel-header">%ThisComputer.Day%, %ThisComputer.Date%</div>
<div class="time panel-main">%ThisComputer.timeH%<span class="blnk">:</span>%ThisComputer.timeM%</div>
<div class="panel-secondary">✹ %ThisComputer.SunRiseTime% , ✶%ThisComputer.SunSetTime%</div>
<!--<div class="panel-secondary">USD %cur.USD_nbrb% EURO %cur.EURO_nbrb% RUR %cur.RUR_nbrb%</div>-->
</div>
<div> </div>
<div class="panel panel-weather mb-block-center">
<div class="location panel-header">%ow_city.name%</div>
<img class="icon" src="/cached/openweather/image/%ow_fact.image%.png" alt="%ow_fact.weather_type%"/>
<div class="temp-weather panel-main">%ow_fact.temperature%<span class="degree">°C</span></div>
<div class="text-weather panel-secondary">%ow_fact.weather_type%</div>
<div class="updated-weather panel-secondary">на %ow_city.updatedTime%</div>
</div>
<div> </div>
<div class="panel panel-weather mb-block-center">
<div class="location panel-header">Прогноз</div>
<img class="icon" src="/cached/openweather/image/%ow_day1.image%.png" alt="%ow_day0.weather_type%"/>
<div class="temp-weather panel-main">%ow_day1.temperature%<span class="degree">°C</span></div>
<div class="text-weather panel-secondary">%ow_day1.weather_type%</div>
<div class="updated-weather panel-secondary">на %ow_day1.date%</div>
</div>
<div> </div>
<div class="panel panel-currency mb-block-center">
%cur.Informer%
</div>
</div>
<div id="b">
Content of B
</div>
<div id="c">
Content of C
</div>
<div id="d">
Content of D
</div>
<div id="f">
<div class='mb_iframe'>
<iframe src="/popup/app_gpstrack.html"></iframe>
</div>
</div>
</div>
<style>
/* --------------------------------------------------------------------*/
/* табы */
/* --------------------------------------------------------------------*/
#tabs .icon{
width:40px;
height:40px;
}
#tabs ul{
padding:0;
margin:0;
}
.ui-tabs.ui-tabs-vertical {
padding: 0;
}
.ui-tabs.ui-tabs-vertical .ui-widget-header {
border: none;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
float: left;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
clear: left;
width: 100%;
margin: 0.2em 0;
overflow: hidden;
position: relative;
z-index: 2;
}
ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
display: block;
padding: 1em 1em 1em 0;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
cursor: pointer;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
padding-bottom: 0;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
margin-bottom: 0.5em;
}
.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
border-radius: 0;
position: relative;
margin: 0 0 0 52px;
}
/* --------------------------------------------------------------------*/
/* панели общее */
/* --------------------------------------------------------------------*/
#tabs .mb-block-center{
margin: 0 auto;
animation: fortime 1s ease-out;
padding:0 0 10px 0;
}
#tabs .panel{
box-sizing: border-box;
color: White;
background-color: rgba(0, 0, 0, 0.4);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
width: 14em;
border-radius: 0.5em 0.5em 0.5em 0.5em;
animation: fortime 1s ease-out;
}
#tabs .panel-footer, #tabs .panel-header, #tabs .module-kurs_nbrb h3{
background-color: rgb(4, 174, 218);
font-size: 1em;
line-height: 1.2;
text-align: center;
font-family: arial;
font-weight: 100;
}
#tabs .panel-footer {
border-radius: 0px 0px 0.5em 0.5em;
}
#tabs .panel-header,#tabs .module-kurs_nbrb h3{
border-radius: 0.5em 0.5em 0px 0px;
}
#tabs .panel-main{
font-size: 3em;
line-height: 1.1;
text-align: center;
font-family: arial;
font-weight: 600;
}
#tabs .panel-secondary {
text-align: center;
}
/* --------------------------------------------------------------------*/
/* панель времени */
/* --------------------------------------------------------------------*/
#tabs .panel-time .time .blnk {
animation: blink 1s ease infinite;
}
/* --------------------------------------------------------------------*/
/* панель погоды */
/* --------------------------------------------------------------------*/
#tabs .panel-weather {
text-align: center;
}
#tabs .panel-weather img{
padding: 10px 0 0 0;
}
#tabs .panel-weather .temp-weather {
display: inline-block;
padding: 10px 0 0 0;
vertical-align: top;
}
#tabs .panel-weather .temp-weather .degree {
font-size: 0.5em;
vertical-align: top;
}
#tabs .updated-weather{
font-size: 0.5em;
}
/* --------------------------------------------------------------------*/
/* панель валют */
/* --------------------------------------------------------------------*/
#tabs .module-kurs_nbrb h3{
text-align:center;
font-weight: 100 !important;
margin: 0 0 10px 0!important;
}
#tabs .module-kurs_nbrb tr:nth-last-child(-n+3) {
display:none;
}
/* --------------------------------------------------------------------*/
/* Навигация */
/* --------------------------------------------------------------------*/
#tabs .mb_iframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY
border: solid black 1px;
}
#tabs .mb_iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<script>
$(document).ready(function() {
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
});
</script>