248 lines
11 KiB
PHP
248 lines
11 KiB
PHP
<style>
|
|
@charset "utf-8";
|
|
/* CSS Document */
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
|
|
body{ padding:0; margin:0; font-weight:400; font-size:15px}
|
|
.container{ max-width:1152px; font-weight:400;}
|
|
img{ max-width:100%; height:auto; display:block}
|
|
h1{ font-weight:100; margin-bottom:20px; }
|
|
h1 strong{ font-weight:900; }
|
|
|
|
.header{ background:#fff; padding:20px 0}
|
|
.nav{ margin:0; padding:0; margin-top:15px; display:block; text-align:right}
|
|
.nav li{ display:inline-block; text-transform:uppercase; font-weight:400; margin-left:20px;}
|
|
.nav li a{ color:#000}
|
|
.nav li a:hover{ text-decoration:none}
|
|
|
|
.slider{ background:url(cdn/images/slide-bg.jpg); max-height:550px; overflow:hidden; color:#fff;background-repeat: repeat-x;background-position: center;}
|
|
.slider ul{ margin:0; padding:0}
|
|
.slider li{ display:inline-block; margin-right:10px;}
|
|
.slider h1{ margin-top:170px; line-height:55px; font-weight:300}
|
|
.phone-animation{ background:url(cdn/images/phone.png) no-repeat top; height:600px; position:relative; padding:129px 42px 0px 44px; }
|
|
.phone-animation .item{ padding:0; margin:0 ;}
|
|
|
|
.block-1{ background:#fff; font-size:35px; font-weight:100; padding:60px 0;}
|
|
.block-1 strong{ font-weight:900;}
|
|
.block-1 a{ background:#F98300; color:#fff; border-radius:25px; padding:5px 20px; text-transform:uppercase}
|
|
|
|
|
|
|
|
.block-5{ background:#2068ad; color:#fff; padding:30px 0}
|
|
.block-5 li{ display:inline-block; font-size:28px; text-align:center; border:solid 2px #fff; margin:5px 35px; border-radius:100%; height:200px; width:200px; padding-top:40px;}
|
|
.block-5 li strong{ font-size:35px; font-weight:700}
|
|
.block-5 ul{ margin:0; padding:0; display:block; text-align:center;}
|
|
|
|
.block-6{padding:100px 0; }
|
|
|
|
.app-container{ padding:0px 0px 100px 0;}
|
|
.app-block {padding:0px 0px; background:#fff;
|
|
-webkit-box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.12);
|
|
-moz-box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.12);
|
|
box-shadow: 0px 0px 14px 2px rgba(0,0,0,0.12);}
|
|
.group-expense{ background:#07467d}
|
|
.mess-expense{ background:#607d8b}
|
|
.family-expense{ background:#55bb76}
|
|
|
|
.app-block img{ width:60px; float:left; padding:15px 10px 10px 10px; }
|
|
.app-container h1 {
|
|
font-size: 28px;
|
|
line-height: 20px !important;
|
|
padding: 15px;
|
|
color: #FFFFFF;
|
|
min-height: 6.5rem;
|
|
}
|
|
.app-container h1 span {font-size:11px; font-weight:600}
|
|
.app-desc {padding: 0px 15px;
|
|
min-height: 240px;
|
|
line-height: 25px;
|
|
text-align: justify;
|
|
font-weight: 500;
|
|
font-size: 0.91rem;
|
|
}
|
|
.app-info{ list-style:none; margin:0; margin-top:30px; padding:0}
|
|
.app-info ul { margin:0; padding:0}
|
|
.app-info li{ display:block; background:#d2d2d2; border-bottom:solid 1px #fff; padding:8px 0; margin:0;}
|
|
.app-info a{ color:#e65b37 !important; font-weight:bold;}
|
|
.app-info a.create-new{ background:url(cdn/images/icon/ico-create-new.png) no-repeat right center; padding-right:25px; }
|
|
.app-info a.download{ background:url(cdn/images/icon/ico-download.png) no-repeat right center; padding-right:25px; }
|
|
|
|
.feature { font-size:13px; border-bottom:solid 1px #dadada; margin-bottom:15px; }
|
|
.feature img{margin-right:20px; }
|
|
.feature h3{ font-size:15px; text-transform:uppercase }
|
|
|
|
.footer{ background:url(cdn/images/footer-bg.png) repeat-x #4e97dc; color:#fff; padding-bottom:50px;}
|
|
.social-icons{ margin:0; padding:0}
|
|
.social-icons li{ list-style:none; display:inline-block}
|
|
.social-tab{ padding:50px 0; border-bottom:solid 1px #4283c0; margin-bottom:50px;}
|
|
|
|
.copyright{ background:#0a4782; color:#fff; padding:20px 0; font-size:12px; text-align:center}
|
|
|
|
.block7{ padding:50px 0; background:#f1f1f1;}
|
|
.testimonial .item { font-style:italic;}
|
|
.testimonial .item img{ width:100px !important; margin:0 auto; margin-bottom:15px; }
|
|
.testimonial .item cite{ color:#000; font-weight:400;}
|
|
|
|
@media (min-width: 320px) and (max-width: 768px) {
|
|
.slider h1{ margin-top:100px;}
|
|
h1{ font-size:170%}
|
|
.app-info li{ display:block; margin-bottom:15px;}
|
|
.social-icons{ text-align:center !important; margin-bottom:10px;}
|
|
.block-5 li{ display:block; text-align:center; margin:20px auto;}
|
|
img{ margin:10px 0;}
|
|
.phone-animation { display:none;}
|
|
.slider{ text-align:center;}
|
|
}
|
|
/*.dialog iframe{
|
|
width:60% !important;
|
|
}
|
|
.dialog .ui-dialog{
|
|
width : 100% !important
|
|
}*/
|
|
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable{
|
|
width:60% !important;
|
|
}
|
|
.demo-video img{
|
|
width:250px;
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 991px) {
|
|
.app-desc {
|
|
padding: 0px 12px;
|
|
min-height: 250px;
|
|
line-height: 19px;
|
|
}
|
|
}
|
|
</style>
|
|
<!--3 column App Inof-->
|
|
<div class="app-container">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="app-block">
|
|
<div class="group-expense"><img src="<?php echo CDN_URL; ?>images/WeXpense.png" alt=""/>
|
|
<h1><?php echo __("LBL_GROUP_EXPENSE_STRONG");?> <br>
|
|
<span><em><?php echo __("LBL_TRACK_SPLIT_SHARE_GROUP_EXPENSE");?></em></span></h1>
|
|
</div>
|
|
<div class="app-desc"><?php echo __("LBL_GROUP_EXPENSE_DESC");?> </div>
|
|
<div class="text-center demo-video">
|
|
<a title="<?php echo __("LBL_VIDEO_WATCH");?>" id="groupExpenseVideo" href="javascript:void(0);" style="display:inline-block" ><img style="padding: 0px;" src="<?php echo CDN_URL; ?>images/pic1_preview.png" alt="" ></a>
|
|
<a target="_blank" id="groupExpenseVideo" href="javascript:void(0);"><?php // echo __("LBL_VIDEO_WATCH");?></a></div>
|
|
<div class="text-center"><a href="<?php echo HTTP_SITE_URL;?>/6pbPNva1"><?php echo __("LBL_DEMO");?></a>
|
|
</div>
|
|
<div class="text-center app-info">
|
|
<ul>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/Home/createGroupExpense" class="create-new"><?php echo __("LBL_CREATE_NEW");?> </a> </li>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/pages/mobileApps/1" class="download"><?php echo __("LBL_DOWNLOAD_APP");?></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--End Here -->
|
|
<div class="col-md-4">
|
|
<div class="app-block">
|
|
<div class="mess-expense"><img src="<?php echo CDN_URL; ?>images/MessXpense.png" alt=""/>
|
|
<h1><?php echo __("LBL_MESS_EXPENSE_STRONG");?> <br>
|
|
<span><em><?php echo __("LBL_MANAGE_MEAL_AND_EXPENSE");?></em></span></h1>
|
|
</div>
|
|
<div class="app-desc"><?php echo __("LBL_IF_YOU_STAYING_IN_MESS_HOSTEL_SHARING_APARTMENT");?> </div>
|
|
<div class="text-center demo-video">
|
|
<a title="<?php echo __("LBL_VIDEO_WATCH");?>" id="messExpenseVideo" href="javascript:void(0);" style="display:inline-block" ><img style="padding: 0px;" src="<?php echo CDN_URL; ?>images/pic2_preview.png" alt="" ></a><br>
|
|
<a target="_blank" id="messExpenseVideo" href="javascript:void(0);"><?php // echo __("LBL_VIDEO_WATCH");?></a></div>
|
|
<div class="text-center">
|
|
<a href="<?php echo HTTP_SITE_URL;?>/7qbMRgPO"><?php echo __("LBL_DEMO");?></a></div>
|
|
<div class="text-center app-info">
|
|
<ul>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/Home/createMessExpense" class="create-new"><?php echo __("LBL_CREATE_NEW");?> </a> </li>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/pages/mobileApps/2" class="download"><?php echo __("LBL_DOWNLOAD_APP");?></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--End Here -->
|
|
<div class="col-md-4">
|
|
<div class="app-block">
|
|
<div class="family-expense"><img src="<?php echo CDN_URL; ?>images/MyXpense.png" alt=""/>
|
|
<h1><?php echo __("LBL_FAMILY_EXPENSE_STRONG");?> <br>
|
|
<span><em><?php echo __("LBL_ORGANIZE_MONTHLY_INCOME_EXPENSE");?> </em></span></h1>
|
|
</div>
|
|
<div class="app-desc"><?php echo __("LBL_MANAGE_FINANCE_IMPORTNAT_TASK_EVERDAY");?> </div>
|
|
<div class="text-center demo-video">
|
|
<!-- FamilyExpense video is not ready yet -->
|
|
<a title="<?php echo __("LBL_VIDEO_WATCH");?>" style="display:inline-block" ><img style="padding: 0px;" src="<?php echo CDN_URL; ?>images/pic3.jpg" alt="" ></a><br>
|
|
<a target="_blank" id="#" href="javascript:void(0);" ><?php // echo __("LBL_VIDEO_WATCH");?></a></div>
|
|
|
|
<div class="text-center"><a href="<?php echo HTTP_SITE_URL;?>/8nbRbGcc"><?php echo __("LBL_DEMO");?></a></div>
|
|
<div class="text-center app-info">
|
|
<ul>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/Home/createFamilyExpense" class="create-new"><?php echo __("LBL_CREATE_NEW");?> </a> </li>
|
|
<li><a href="<?php echo HTTP_SITE_URL;?>/pages/mobileApps/3" class="download"><?php echo __("LBL_DOWNLOAD_APP");?></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--End Here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<!--<link rel="stylesheet" href="/resources/demos/style.css">-->
|
|
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<script>
|
|
$( function() {
|
|
$( ".dialog" ).dialog({
|
|
autoOpen: false,
|
|
show: {
|
|
effect: "blind",
|
|
duration: 100
|
|
},
|
|
hide: {
|
|
effect: "explode",
|
|
duration: 100
|
|
}
|
|
});
|
|
var url1 = $("#dialog iframe").attr('src');
|
|
var url2 = $("#messDialog iframe").attr('src');
|
|
var url3 = $("#familyDialog iframe").attr('src');
|
|
$(".dialog iframe").attr('src', '');
|
|
$( "#groupExpenseVideo" ).on( "click", function() {
|
|
$("#dialog iframe").attr('src', url1+'&autoplay=1');
|
|
$( "#dialog" ).dialog( "open" );
|
|
//setTimeout(groupExpenseVideofunc, 111);
|
|
});
|
|
$( "#messExpenseVideo" ).on( "click", function() {
|
|
$("#messDialog iframe").attr('src', url2+'&autoplay=1');
|
|
$( "#messDialog" ).dialog( "open" );
|
|
//setTimeout(groupExpenseVideofunc, 111);
|
|
});
|
|
$( "#familyExpenseVideo" ).on( "click", function() {
|
|
$("#familyDialog iframe").attr('src', url3+'&autoplay=1');
|
|
$( "#familyDialog" ).dialog( "open" );
|
|
//setTimeout(groupExpenseVideofunc, 111);
|
|
});
|
|
$(".ui-dialog .ui-dialog-titlebar-close").on("click", function () {
|
|
$(".dialog iframe").attr('src', '');
|
|
});
|
|
});
|
|
|
|
|
|
function groupExpenseVideofunc() {
|
|
|
|
// $( ".dialog" ).parent('.ui-dialog').css('position','fixed');
|
|
// $( ".dialog" ).parent('.ui-dialog').css('top','10%');
|
|
// $( ".dialog" ).parent('.ui-dialog').css('left','20%');
|
|
}
|
|
|
|
</script>
|
|
|
|
<div id="dialog" class="dialog" title="WeXpense">
|
|
<iframe width="730" height="434" src="https://www.youtube.com/embed/j2yeMjFViWQ?rel=0" allow="autoplay; encrypted-media"></iframe>
|
|
</div>
|
|
<div id="messDialog" class="dialog" title="MessXpense">
|
|
<iframe width="730" height="434" src="https://www.youtube.com/embed/KX2Q9XYOdsc?rel=0" allow="autoplay; encrypted-media"></iframe>
|
|
</div>
|
|
<div id="familyDialog" class="dialog" title="MyXpense">
|
|
<iframe width="730" height="434" src="https://www.youtube.com/embed/1kPCbMqoV6M?rel=0" allow="autoplay; encrypted-media"></iframe>
|
|
</div>
|