Mini Kabibi Habibi
<div data-options="dxView : { name: 'Index', layout: 'default' } " >
<div style="height: 100%" data-options="dxContent : { targetPlaceholder: 'content' } " >
<div class="header">
<a href="#Index" class="logo"></a>
</div>
<div data-bind="dxTileView: {
baseItemWidth: 240,
baseItemHeight: 220,
itemMargin: 12,
activeStateEnabled: false,
itemTemplate: function(index) {
return index;
},
items: [
{ heightRatio: 2, widthRatio: 2 },
{ heightRatio: 1, widthRatio: 1 },
{ heightRatio: 1, widthRatio: 1 },
{ heightRatio: 1, widthRatio: 1 },
{ heightRatio: 1, widthRatio: 1 },
{ heightRatio: 2, widthRatio: 1 },
{ heightRatio: 1, widthRatio: 2 }
]}" class="tiles">
<div data-bind="dxAction: '#HotDeals'" class="tile-hot-deals" data-options="dxTemplate : { name: '0' } " >
<h2>Hot Deals</h2>
<h2>OMG: New York!</h2>
<div class="new-york">
<h3>New York</h3>
<h4>36 Hours in Brooklyn</h4>
<h4>To Get Those Summer Tickets in New York, Strategize</h4>
<h4>Manhattan Hotels Fill Rooms With Low Rates</h4>
</div>
</div>
<div data-bind="dxAction: 'https://maps.google.com/maps?q=John+F.+Kennedy+International+Airport,+New+York,+NY,+United+States&ll=40.648671,-73.78581&spn=0.052292,0.087805&sll=40.73985,-73.98848&sspn=0.104442,0.17561&oq=new+york+airport+j&hq=John+F.+Kennedy+International+Airport,+New+York,+NY,+United+States&t=m&z=14&iwloc=A'" class="tile-map" data-options="dxTemplate : { name: '1' } " >
<div class="map" data-bind="dxMap: { location: 'New York, NY', zoom: 12, provider: 'googleStatic', width: 220, height: 170 }"></div>
<h3 class="align-center">New York, NY</h3>
</div>
<div class="tile-search" data-options="dxTemplate : { name: '2' } " >
<a class="search">
Travel Search
</a>
</div>
<div class="tile-most-available-miles" data-options="dxTemplate : { name: '3' } " >
<h2 class="align-center">Most Available Miles</h2>
<div id="miles-chart" style="height: 150px; width: 210px;" data-bind="dxChart: {
commonSeriesSettings: {
type: 'stackedBar'
},
margin: {
top: 15
},
palette: ['#ea8b2c', '#ffffff', '#959595'],
rotated: true,
argumentAxis: {
categories: ['Airline 1', 'Airline 2', 'Airline 3']
},
legend: {
visible: false
},
series: [
{
data: [{arg: 'Airline 1', val: 24078}, {arg: 'Airline 2', val: 0}, {arg: 'Airline 3', val: 0}]
},
{
data: [{arg: 'Airline 1', val: 0}, {arg: 'Airline 2', val: 7600}, {arg: 'Airline 3', val: 0}]
},
{
data: [{arg: 'Airline 1', val: 0}, {arg: 'Airline 2', val: 0}, {arg: 'Airline 3', val: 2005}]
}
]
}">
</div>
</div>
<div class="tile-my-cities" data-options="dxTemplate : { name: '4' } " >
<h2 class="align-center">My Cities</h2>
<div id="my-cities-chart" style="height: 180px; width: 210px;" data-bind="dxPieChart: {
palette: ['#ea8b2c', '#ffffff', '#00a4db', '#959595'],
legend: {
verticalAlignment: 'bottom',
horizontalAlignment: 'center',
itemTextPosition: 'right',
margin: 8,
rowCount: 2,
font: {
size: 12
},
markerSize: 12,
rowItemSpacing: 0
},
margin: {
top: 8,
bottom: 0,
left: 0,
right: 0
},
series: [{
argumentField: 'category',
point: {
borderWidth: 1,
borderColor: '#3a3b3c',
hoverStyle: {
borderWidth: 1,
borderColor: '#3a3b3c'
}
},
data: [{
category: 'Seattle 65%',
val: 65
}, {
category: 'NYC 20%',
val: 20
}, {
category: 'LA 10%',
val: 10
}, {
category: 'Other 5%',
val: 5
}
]
}]
}"></div>
</div>
<div data-bind="dxAction: 'http://www.weather.com/weather/today/New+York+NY+USNY0996'" class="tile-weather" data-options="dxTemplate : { name: '5' } " >
<h2 class="align-center">Weather</h2>
<div class="weather-featured">
<span class="sign">+</span><span class="temp">74°</span>
<p class="city">New York</p>
</div>
<div class="weather-cities clearfix">
<div class="weather-city">
<span class="city">Seattle</span><br />
<span class="temp">+59°</span><br />
<span class="weather-icon-sun"></span>
</div>
<div class="weather-city">
<span class="city">Los Angeles</span><br />
<span class="temp">+70°</span><br />
<span class="weather-icon-sun"></span>
</div>
</div>
</div>
<div style="padding: 0;" class="tile-photos" data-options="dxTemplate : { name: '6' } " >
<div class="tile-photos-gallery" data-bind="dxGallery: { slideshowDelay: 3000, dataSource: [
'tile-photos-slide1',
'tile-photos-slide2',
'tile-photos-slide3',
'tile-photos-slide4',
'tile-photos-slide5'
]}">
<div data-bind="attr: { 'class': $data }" style="width: 100%; height: 100%" data-options="dxTemplate : { name: 'item' } " ></div>
</div>
<h3>New York</h3>
</div>
</div>
</div>
</div>