File: /home/imensosw/public_html/imenso.co/dev/FortVision/index.php
<?php include 'header.php';?>
<?php include 'menu.php';?>
<!-- Demo Section Open -->
<div class="demo_area bg_theme txt_white">
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<h1 class="text-center screen_heading">DEMO PREVIEW</h1>
<div class="screen_area d-flex align-items-stretch">
<div class="nav_area">
<!-- Main-Menu area open -->
<div class="main_menu h-100 animate visible">
<div class="mb-4">
<h6>By Format</h6>
<ul class="list-unstyled format">
<li>
<a href="javascript:;" data-target="Content Pages">
<div>
<span class="rounded-circle1"> <img src="images/svg/story-bub-ico-copy.svg" alt="desktop icon" /></span> Content Pages
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li>
<a href="javascript:;" data-target="Poll" >
<div>
<span class="rounded-circle1"> <img src="images/svg/poll-bub-ico-copy-2.svg" alt="desktop icon" /></span> Poll
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li class="story">
<a href="javascript:;" data-target="Story">
<div>
<span class="rounded-circle1"> <img src="images/svg/story-bub-ico-copy-3.svg" alt="desktop icon" /></span> Story
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li class="swiper">
<a href="javascript:;" data-target="Swiper" >
<div>
<span class="rounded-circle1"> <img src="images/svg/quiz-bub-ico-copy.svg" alt="desktop icon" /></span> Swiper
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li class="teaser">
<a href="javascript:;" data-target="Teaser">
<div>
<span class="rounded-circle1"> <img src="images/svg/cta-bub-ico.svg" alt="desktop icon" /></span> Teaser
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
</ul>
</div>
<div class="mb-4">
<h6>By Media Type</h6>
<ul class="list-unstyled media_type">
<li>
<a href="javascript:;" data-target="Video" >
<div>
<span class="rounded-circle1"> <img src="images/svg/play.svg" alt="desktop icon" /></span> Video
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li>
<a href="javascript:;" data-target="Interactive">
<div>
<span class="rounded-circle1"> <img src="images/svg/hand.svg" alt="desktop icon" /></span> Interactive
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li>
<a href="javascript:;" data-target="Static">
<div>
<span class="rounded-circle1"> <img src="images/svg/square.svg" alt="desktop icon" /></span> Static
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
</ul>
</div>
<div>
<h6>By Component</h6>
<ul class="list-unstyled component mb-0">
<li>
<a href="javascript:;" data-target="Lead Forms">
<div>
<span class="rounded-circle1"> <img src="images/svg/page-insert-form-copy.svg" alt="desktop icon" /></span> Lead Forms
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li>
<a href="javascript:;" data-target="E-COM">
<div>
<span class="rounded-circle1"> <img src="images/svg/ecom-ico.svg" alt="desktop icon" /></span> E-COM
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
<li>
<a href="javascript:;" data-target="Countdowns" >
<div>
<span class="rounded-circle1"> <img src="images/svg/countdown.svg" alt="desktop icon" /></span> Countdowns
</div>
<div>
<span class="icon-item animate"><img src="images/svg/chevron-right-blue.svg" /></span>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Main-Menu area close -->
<!-- Sub-Menu area open -->
<div class="sub_menu h-100 animate content_page_menu">
<div class="sub_menu1">
<div class="mb-4">
<a href="javascript:;" class="btn btn-outline-primary hidesub_menu"><img src="images/svg/previous.svg" class="img-svg" alt="previous" /> Back</a>
</div>
<div class="s_menu">
</div>
</div>
<div class="mt-4">
<div class="d-none d-md-block">
<nav class="navigation" aria-label="Page navigation">
<!-- <ul class="pagination justify-content-center mb-0">
<li class="page-item disabled previous_page">
<a class="page-link" href="#" tabindex="-1"> <i class="fa fa-angle-left"></i></a>
</li>
<li class="page-item"><a class="page-link active" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item next_page">
<a class="page-link" href="#"> <i class="fa fa-angle-right"></i></a>
</li>
</ul> -->
</nav>
</div>
<div class="d-block d-md-none text-center"><a href="" class="btn btn-outline-primary">Load More</a></div>
</div>
</div>
<!-- Sub-Menu area close -->
</div>
<div class="screen animate align-items-center d-flex">
<!-- Mobile navigation opne -->
<div class="mobile_nav">
<a href="javascript:;"><i class="fa fa-angle-left"></i> <span>Return to Demos</span></a>
</div>
<!-- Mobile navigation close -->
<!-- Screen navigation Open -->
<div class="screen_icon">
<a href="javascript:;" class="active" title="mobile-screen" data-list="mobile-url"><img src="images/svg/mobile-ico-preview-active.svg" class="img-svg" alt="mobile icon" /></a>
<div class="divider"></div>
<a href="javascript:;" title="desktop-screen" data-list="desktop-url"><img src="images/svg/desktop-ico-preview-up.svg" class="img-svg" alt="desktop icon" /></a>
</div>
<!-- Screen navigation Close -->
<!-- Screen screen Open -->
<div class="px-3 text-center device w-100">
<div id="main_mobile_desktop_screen" class="mobile-screen animated">
<img id="device_image" src="images/device.png" alt="device" />
<div class="iframe">
<iframe src="https://www.fortvision.com/demo/?fv-c=152237" border='0' id="main_iframe"></iframe>
</div>
</div>
<!-- <div class="desktop-screen animated" style="display: none;">
<img src="images/desktop-preview.png" alt="device" />
<div class="iframe">
<iframe src="https://www.fortvision.com/demo/?fv-c=152246" border='0' id="iframe_desktop"></iframe>
</div>
</div> -->
</div>
<!-- Screen screen Close -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Demo Section Close -->
<!-- Form Area Open -->
<div class="burger form-area">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<h2>Like what you see?</h2>
</div>
<!-- <div class="col-sm-10 offset-sm-1"> -->
<div class="col-md-10 offset-md-1">
<div class="form-card d-flex align-items-stretch">
<div class="w-50 form-msg align-items-center d-flex">
<h3 class="txt_white">JOIN THE WORLD’S BIGGEST BRANDS & PUBLISHERS</h3>
</div>
<div class="w-50">
<div class="form-cnt">
<h4>Let’s talk<div class="Oval rounded-circle"></div></h4>
<form>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your full name">
<!-- <small class="form-text fomr-error">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your category name">
<!-- <small class="form-text text-muted fomr-error">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" placeholder="Enter your phone">
<!-- <small class="form-text text-muted fomr-error">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group">
<label for="compant">Company</label>
<input type="text" class="form-control" id="compant" placeholder="Who do you work for?">
<!-- <small class="form-text text-muted fomr-error">We'll never share your email with anyone else.</small> -->
</div>
<div class="form-group mb-4">
<label>I am a…</label>
<select class="form-control">
<option>Choose category</option>
</select>
<!-- <small class="form-text text-muted fomr-error">We'll never share your email with anyone else.</small> -->
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Area Close -->
<?php include 'footer.php';?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script type="text/javascript">
var unId="P&G Always";
var uindex=0;
var menuName="Content Pages";
var type="mobile";
var roundTotal=0;
var question;
$.ajax({
url: "js/config.json",
//force to handle it as text
dataType: "text",
success: function(data) {
question = $.parseJSON(data);
// question=data;
showImg();
}
});
var templates_pagination ="";
$.ajax({
url: "pagination.html",
//force to handle it as text
dataType: "text",
success: function(data) {
templates_pagination=_.template(data);
// question=data;
}
});
function showImg(){
if(uindex!=""){
$( "#main_iframe").attr("src",question['url'][menuName][uindex]['url']);
}
}
//alert("sdaf");
$(document).on("click",".screen_icon a", function() {
$( ".screen_icon a" ).removeClass("active");
var attr_val=$( this ).attr("title");
$( this ).addClass("active");
/*
$(".device>.animated").hide();
$("."+attr_val).fadeIn();
var attr_val=$(this).attr("data-list");
var desktop_val="";
if(attr_val=="desktop-url"){
desktop_val=$('.sub_menu li a.active').attr("desktop-url");
type="desktop";
}
else{
type="mobile";
desktop_val=$('.sub_menu li a.active').attr("mobile-url");
}
// unId=$(this).attr('data-uid');
// $( ".ScreenImage_url" ).attr("src","images/screen/"+desktop_val);
showImg();*/
if(attr_val=="mobile-screen")
{
$('#main_mobile_desktop_screen').removeClass('desktop-screen').addClass("mobile-screen");
$('#device_image').attr('src','images/device.png');
}
else
{
$('#main_mobile_desktop_screen').removeClass('mobile-screen').addClass("desktop-screen");
$('#device_image').attr('src','images/desktop-preview.png');
}
});
$(document).on( "click", ".s_menu li a", function() {
$( ".sub_menu li a" ).removeClass("active");
$( this ).addClass("active");
var attr_val=$( ".screen_icon").find('.active').attr("data-list");
var desktop_val="";
if(attr_val=="desktop-url"){
desktop_val=$( this ).attr("desktop-url");
type="desktop";
}
else{
desktop_val=$( this ).attr("mobile-url");
type="mobile";
}
unId=$(this).attr('data-uid');
uindex=$(this).attr('data-index');
//$( ".ScreenImage_url" ).attr("src","images/screen/"+desktop_val);
/*For Mobiel View add Class*/
$( ".screen").addClass("mobile_fix");
showImg();
});
$(document).on( "click",".main_menu li a" , function() {
$( ".main_menu").removeClass("visible");
menuName=$(this).attr('data-target');
var htm="";
htm="<h6>"+menuName+"</h6>";
htm+='<ul class="list-unstyled component">';
var page=1;
var menudata=question['url'][menuName];
var j=0;
var page_count=1;
_.each(menudata, function(usr) {
// alert(menudata['name']);
if(page_count==9)
{
page++;
page_count=1;
}
if(usr['sub']=="true")
{
htm+='<li style="display:none" class="each_page page_'+page+'"><h6>'+usr['sub_name']+'</h6></li>';
}
htm+='<li style="display:none" class="each_page page_'+page+'">';
htm+='<a href="javascript:;" data-index="'+j+'" data-uid="" class=""><span class="sub_txt">'+usr['name']+'</span> <span class="option-item Muli-Italic"><span>In-Feed</span><img src="images/svg/chevron-right-blue.svg" class="img-svg" /></span> </a>';
htm+='</li>';
j++;
page_count++;
});
htm+='</ul>';
$('.s_menu').html(htm);
roundTotal= Math.ceil(j/8);
$('.navigation').html(templates_pagination({
pagination:{'page':1,'total':roundTotal}
}));
if($('.page_1').length)
{
$('.page_1').show();
}
// $( "."+target).addClass("visible");
$( ".sub_menu").addClass("visible");
});
$(document).on( "click",".hidesub_menu", function() {
$(this).closest(".sub_menu").removeClass("visible");
$( ".main_menu").addClass("visible");
});
$(document).on( "click",".mobile_nav a", function() {
$( ".screen").removeClass("mobile_fix");
});
$(document).on('click touch', '.paginationlink a', function(e) {
e.preventDefault();
var page1=$(this).attr("data-page");
$('.navigation').html(templates_pagination({
pagination:{'page':page1,'total':roundTotal}
}));
if($('.page_'+page1).length)
{
$('.each_page').hide();
$('.page_'+page1).show();
}
});
/*
$('#pagination').html(templates.pagination({
pagination: app.resp.paginationresult
}));
*/
</script>