KVinS/main.html

## main.html
<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="mobile-web-app-capable" content="yes" />

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />

    <!-- JS dependencies (order matters!) -->
    <script src="js/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>


	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"  />

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />

	 <style>
    .item {
      padding: 10px;
      line-height: 1;
    }
    .item-thum {
      background-color: white;
      width: 70px;
      height: 70px;
      border-radius: 4px;
    }
    .item-title {
      font-size: 15px;
      font-weight: 500;
    }
    .item-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.3;
      margin: 4px 0 0 0;
      padding: 0 30px 0 0;
      max-height: 30px;
    }
    .item-label {
      font-size: 12px;
      color: #999;
      float: right;
    }
  </style>

    <!-- --------------- App init --------------- -->

    <title>Onsen UI Split View</title>


    <script>
		function myCtrl($scope) {
		$scope.LessonsDelegate = {
				  configureItemScope: function(index, itemScope) {
					console.log("Created item #" + index);
					itemScope.item = {
					  title: 'Урок №' + (index + 1),
					  steps: 'Шагов: 7',
					  complexity: 'Сложно',
					  rand: img(index)
					};
				  },
				  calculateItemHeight: function(index) {
					return 91;
				  },
				  countItems: function() {
					return 60;
				  },
				  destroyItemScope: function(index, scope) {
					console.log("Destroyed item #" + index);
				  }
				};

	}

		function img(index) {
			while (index > 6) index-=6;
			return index;
	    }

        angular.module('app', ['onsen'])
		.controller("myCtrl", myCtrl)
    </script>

</head>

<body>


    <ons-split-view var="splitView"
                    secondary-page="page1.html"
                    main-page="secondary.html"
                    main-page-width="60%"
                    collapse="portrait">
    </ons-split-view>

    <ons-template id="page1.html">
		<ons-page ng-controller="myCtrl">
		  <ons-list>

			<ons-list-item modifier="chevron" class="item" ons-lazy-repeat="LessonsDelegate" onclick="alert('!')">
				<ons-row>
				  <ons-col width="80px">
					<img src="img/prews/{{item.rand}}.svg" class="item-thum"></img>
				  </ons-col>
				  <ons-col>
					<header>
					  <span class="item-title">{{item.title}}</span>
					  <span class="item-label">{{item.complexity}}</span>
					</header>
					<div ng-show="item.desc==''">
							  <p>
									<span style='opacity: 0.7;'>
										<ons-icon icon='fa-spinner' spin='true'></ons-icon>
										Loading bacon...
									</span>
							  </p>
					</div>
					<p class="item-desc">{{ item.steps }}</p>
				  </ons-col>
				</ons-row>
			</ons-list-item>

		  </ons-list>
		</ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">Page 2</div>
            </ons-toolbar>

            <div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
                <p>Rotate the device to landscape/portrait see the views split/collapse.</p>
                <p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height ().</p>
            </div>

            <ons-bottom-toolbar>
            </ons-bottom-toolbar>
        </ons-page>
    </ons-template>

<ons-template id="secondary.html">
  <ons-page style="background-color: white; border-right: 1px solid #ddd;">
    <ons-list>
      <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page1.html');">
        <i class="fa fa-home fa-lg" style="color: #666"></i> &nbsp; Page 1
      </ons-list-item>

      <ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page2.html');">
        <i class="fa fa-gear fa-lg" style="color: #666"></i> &nbsp; Page 2
      </ons-list-item>

    </ons-list>
  </ons-page>
</ons-template>

    <script type="text/javascript" src="cordova.js"></script>
    <!-- Cordova reference -->
    <script type="text/javascript" src="js/index.js"></script>
    <!-- -->
    <script type="text/javascript">
            app.initialize();
			app.config(['$compileProvider', function($compileProvider) {
			$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
			$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|x-wmapp0):|data:image\//);
			$compileProvider.imgSrcSanitizationWhitelist('img/');
			$compileProvider.imgSrcSanitizationWhitelist('img/prews/');
}]);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
	<html lang="en" ng-app="app" ng-csp>
	<head>
	<meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="mobile-web-app-capable" content="yes" />

	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />

	<!-- JS dependencies (order matters!) -->
	<script src="js/platformOverrides.js"></script>
	<script src="lib/angular/angular.js"></script>
	<script src="lib/onsen/js/onsenui.js"></script>


	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

	<!-- CSS dependencies -->
	<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
	<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

	<!-- CSP support mode (required for Windows Universal apps) -->
	<link rel="stylesheet" href="lib/angular/angular-csp.css" />

	<style>
	.item {
	padding: 10px;
	line-height: 1;
	}
	.item-thum {
	background-color: white;
	width: 70px;
	height: 70px;
	border-radius: 4px;
	}
	.item-title {
	font-size: 15px;
	font-weight: 500;
	}
	.item-desc {
	font-size: 14px;
	color: #666;
	line-height: 1.3;
	margin: 4px 0 0 0;
	padding: 0 30px 0 0;
	max-height: 30px;
	}
	.item-label {
	font-size: 12px;
	color: #999;
	float: right;
	}
	</style>

	<!-- --------------- App init --------------- -->

	<title>Onsen UI Split View</title>


	<script>
	function myCtrl($scope) {
	$scope.LessonsDelegate = {
	configureItemScope: function(index, itemScope) {
	console.log("Created item #" + index);
	itemScope.item = {
	title: 'Урок №' + (index + 1),
	steps: 'Шагов: 7',
	complexity: 'Сложно',
	rand: img(index)
	};
	},
	calculateItemHeight: function(index) {
	return 91;
	},
	countItems: function() {
	return 60;
	},
	destroyItemScope: function(index, scope) {
	console.log("Destroyed item #" + index);
	}
	};

	}

	function img(index) {
	while (index > 6) index-=6;
	return index;
	}

	angular.module('app', ['onsen'])
	.controller("myCtrl", myCtrl)
	</script>

	</head>

	<body>


	<ons-split-view var="splitView"
	secondary-page="page1.html"
	main-page="secondary.html"
	main-page-width="60%"
	collapse="portrait">
	</ons-split-view>

	<ons-template id="page1.html">
	<ons-page ng-controller="myCtrl">
	<ons-list>

	<ons-list-item modifier="chevron" class="item" ons-lazy-repeat="LessonsDelegate" onclick="alert('!')">
	<ons-row>
	<ons-col width="80px">
	<img src="img/prews/{{item.rand}}.svg" class="item-thum"></img>
	</ons-col>
	<ons-col>
	<header>
	<span class="item-title">{{item.title}}</span>
	<span class="item-label">{{item.complexity}}</span>
	</header>
	<div ng-show="item.desc==''">
	<p>
	<span style='opacity: 0.7;'>
	<ons-icon icon='fa-spinner' spin='true'></ons-icon>
	Loading bacon...
	</span>
	</p>
	</div>
	<p class="item-desc">{{ item.steps }}</p>
	</ons-col>
	</ons-row>
	</ons-list-item>

	</ons-list>
	</ons-page>
	</ons-template>

	<ons-template id="page2.html">
	<ons-page>
	<ons-toolbar>
	<div class="center">Page 2</div>
	</ons-toolbar>

	<div class="content-padded" style="font-size: 13px; text-align: center; color: #999;">
	<p>Rotate the device to landscape/portrait see the views split/collapse.</p>
	<p>Or resize the window so that the width is larger than the height (landscape)/smaller than the height ().</p>
	</div>

	<ons-bottom-toolbar>
	</ons-bottom-toolbar>
	</ons-page>
	</ons-template>

	<ons-template id="secondary.html">
	<ons-page style="background-color: white; border-right: 1px solid #ddd;">
	<ons-list>
	<ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page1.html');">
	<i class="fa fa-home fa-lg" style="color: #666"></i>   Page 1
	</ons-list-item>

	<ons-list-item modifier="tappable" class="list__item__line-height" onclick="app.splitView.setMainPage('page2.html');">
	<i class="fa fa-gear fa-lg" style="color: #666"></i>   Page 2
	</ons-list-item>

	</ons-list>
	</ons-page>
	</ons-template>

	<script type="text/javascript" src="cordova.js"></script>
	<!-- Cordova reference -->
	<script type="text/javascript" src="js/index.js"></script>
	<!-- -->
	<script type="text/javascript">
	app.initialize();
	app.config(['$compileProvider', function($compileProvider) {
	$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?\|ftp\|mailto\|file\|ghttps?\|ms-appx\|x-wmapp0):/);
	$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?\|ftp\|file\|ms-appx\|x-wmapp0):\|data:image\//);
	$compileProvider.imgSrcSanitizationWhitelist('img/');
	$compileProvider.imgSrcSanitizationWhitelist('img/prews/');
	}]);
	</script>
	</body>
	</html>