-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-scroll.html
executable file
·140 lines (136 loc) · 9.93 KB
/
index-scroll.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--SEO-->
<title>FRONTEND SKELETON</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Open Graph-->
<meta property="og:title" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:description" content="">
<!--favicon-->
<link rel="image_src" href="">
<link rel="shortcut icon" type="image/x-icon" href="">
<!--IE--><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="MSThemeCompatible" content="no"/>
<![endif]-->
<!--[if lt IE 7]>
<style>
body > main {
height: 100%;
}
</style><![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/libs/html5shiv.js"></script><![endif]-->
<!--Apple-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!--JS helpers -->
<script type="text/javascript" src="js/libs/helpers.js"></script>
<!--Include JS/CSS-->
<script>(function() {
if (!/debug/.test(window.location.search)) {
console.log('[App] PRODUCTION MODE (Console is disabled)');
$$.disableConsole();
$$.includeJS('js/libs/lib.min.js');
$$.includeCSS('css/project.css');
$$.includeJS('js/project.min.js');
} else {
console.debug('[App] DEBUG MODE');
$$.includeJS('js/libs/jquery-1.10.2.min.js');
$$.includeJS('js/libs/jquery-ui-1.10.3.custom.js');
$$.includeJS('js/libs/jquery.tinyscrollbar.js');
$$.includeJS('js/libs/jquery.cookie.js');
$$.includeJS('js/libs/mustache.js');
$$.includeJS('js/libs/underscore-min.js');
$$.includeJS('js/libs/json2.js');
$$.includeJS('js/libs/backbone.router.js');
$$.includeJS('js/libs/popup.js');
$$.includeJS('js/libs/form.js');
$$.includeJS('js/libs/jquery.jcarousel.js');
$$.includeJS('js/libs/fileuploader.js');
$$.includeCSS('/css/app.css');
$$.includeJS('js/app.models.js');
$$.includeJS('js/app.views.js');
$$.includeJS('js/app.router.js');
$$.includeJS('js/app.js');
}
}).call(this);
</script>
<!--App initialization!-->
<script>
window.app = new App({
name: "Frontend Skeleton",
remoteHost: "",
root: "",
box: true,
});
</script>
</head>
<body>
<main class="view-index-scroll">
<script>
app.onLoad(function(){
app.views.indexScroll.controller();
});
</script>
<header>
<div class="container">
<div class="content">
<div class="logo">
<h5><a href="index.html">HEADER (fixed)</a></h5>
</div>
<nav id="menu">
<ul>
<li><a href="index-render.html">Render</a></li>
<li class="separator"></li>
<li><a href="index-hash.html">Hash</a></li>
<li class="separator"></li>
<li class="navigate"><a href="#" data-page="index">index</a></li>
<li class="separator"></li>
<li class="navigate"><a href="#" data-page="page">page</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="sections">
<section data-page="index" class="page-1">
<div class="container">
<div class="content">
<h1>section#index</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis tempus nisl. Nulla magna metus, imperdiet gravida facilisis ut, porttitor sed sapien. Pellentesque consectetur erat felis, non lobortis est faucibus non. Donec placerat augue in justo fermentum facilisis. Curabitur fringilla neque ut leo scelerisque facilisis. Vivamus vel justo vitae nibh imperdiet interdum id ac neque. Etiam ac massa pellentesque, dictum justo quis, dignissim est. Phasellus sit amet rutrum odio. In mollis dictum dolor vehicula imperdiet. Vestibulum et odio egestas, cursus dui vel, semper mi.</p>
<p>Sed non egestas quam. Pellentesque ac enim turpis. Maecenas ac libero bibendum, venenatis arcu sed, fringilla purus. Morbi ac purus ultricies, sagittis lacus id, molestie felis. Sed eget mi lectus. Etiam rutrum sollicitudin neque a ornare. Nullam blandit mauris orci, luctus porttitor mi porttitor eu. Donec sed lobortis justo. Ut et varius sem. Fusce porttitor rutrum tellus vel faucibus. Donec gravida sapien sapien, ac eleifend diam consequat ut. Donec sodales erat porttitor porttitor volutpat. Donec rutrum lectus a ligula bibendum facilisis. Sed vehicula viverra semper.</p>
<p>Mauris eu justo sodales purus mollis auctor vitae eget diam. Nulla interdum nisl et tellus dictum molestie. Pellentesque nunc elit, sollicitudin at tincidunt ut, sollicitudin a quam. Vivamus consectetur ac risus eget bibendum. Quisque posuere vitae nisl eu gravida. Etiam eros nunc, euismod eu consequat quis, luctus venenatis dolor. Duis vestibulum iaculis tempus. Suspendisse urna lectus, faucibus non libero vel, vestibulum malesuada ante. Sed ornare, velit nec sodales euismod, nisi orci placerat felis, in volutpat ligula sapien eget metus. Sed malesuada purus tempus ante varius pellentesque. Mauris ut tincidunt purus. Mauris at nulla eu mi sagittis viverra. Cras in tempor quam. Quisque porta venenatis est, eu adipiscing ligula tristique ut. Nam a neque vel mi adipiscing bibendum. Sed vitae dui velit.</p>
<p>Donec nec leo at tellus mattis faucibus. Suspendisse a orci consequat, mattis sem sit amet, convallis enim. Morbi iaculis blandit enim, id pretium nisl molestie sit amet. Mauris convallis diam nec mauris condimentum, ac dignissim nulla elementum. Ut eget nulla quam. Morbi sollicitudin nunc sit amet mi adipiscing, in aliquam est eleifend. Nam rhoncus metus risus, eu tincidunt metus accumsan in. Etiam adipiscing tortor et urna semper, et aliquet elit pulvinar. Phasellus suscipit urna nec malesuada pulvinar. In hac habitasse platea dictumst. Aliquam sed gravida tortor, ac elementum augue. Morbi porta pharetra nibh a vulputate. Morbi non vehicula arcu. Nullam tristique, mauris convallis congue tincidunt, mi justo dapibus ligula, at placerat est ligula eu erat. Quisque mauris magna, vulputate vel lacinia nec, venenatis quis mi. Cras non ultrices mauris.</p>
</div>
</div>
</section>
<section data-page="page" class="page-2">
<div class="container">
<div class="content">
<h1>section#page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis tempus nisl. Nulla magna metus, imperdiet gravida facilisis ut, porttitor sed sapien. Pellentesque consectetur erat felis, non lobortis est faucibus non. Donec placerat augue in justo fermentum facilisis. Curabitur fringilla neque ut leo scelerisque facilisis. Vivamus vel justo vitae nibh imperdiet interdum id ac neque. Etiam ac massa pellentesque, dictum justo quis, dignissim est. Phasellus sit amet rutrum odio. In mollis dictum dolor vehicula imperdiet. Vestibulum et odio egestas, cursus dui vel, semper mi.</p>
<p>Sed non egestas quam. Pellentesque ac enim turpis. Maecenas ac libero bibendum, venenatis arcu sed, fringilla purus. Morbi ac purus ultricies, sagittis lacus id, molestie felis. Sed eget mi lectus. Etiam rutrum sollicitudin neque a ornare. Nullam blandit mauris orci, luctus porttitor mi porttitor eu. Donec sed lobortis justo. Ut et varius sem. Fusce porttitor rutrum tellus vel faucibus. Donec gravida sapien sapien, ac eleifend diam consequat ut. Donec sodales erat porttitor porttitor volutpat. Donec rutrum lectus a ligula bibendum facilisis. Sed vehicula viverra semper.</p>
<p>Mauris eu justo sodales purus mollis auctor vitae eget diam. Nulla interdum nisl et tellus dictum molestie. Pellentesque nunc elit, sollicitudin at tincidunt ut, sollicitudin a quam. Vivamus consectetur ac risus eget bibendum. Quisque posuere vitae nisl eu gravida. Etiam eros nunc, euismod eu consequat quis, luctus venenatis dolor. Duis vestibulum iaculis tempus. Suspendisse urna lectus, faucibus non libero vel, vestibulum malesuada ante. Sed ornare, velit nec sodales euismod, nisi orci placerat felis, in volutpat ligula sapien eget metus. Sed malesuada purus tempus ante varius pellentesque. Mauris ut tincidunt purus. Mauris at nulla eu mi sagittis viverra. Cras in tempor quam. Quisque porta venenatis est, eu adipiscing ligula tristique ut. Nam a neque vel mi adipiscing bibendum. Sed vitae dui velit.</p>
<p>Donec nec leo at tellus mattis faucibus. Suspendisse a orci consequat, mattis sem sit amet, convallis enim. Morbi iaculis blandit enim, id pretium nisl molestie sit amet. Mauris convallis diam nec mauris condimentum, ac dignissim nulla elementum. Ut eget nulla quam. Morbi sollicitudin nunc sit amet mi adipiscing, in aliquam est eleifend. Nam rhoncus metus risus, eu tincidunt metus accumsan in. Etiam adipiscing tortor et urna semper, et aliquet elit pulvinar. Phasellus suscipit urna nec malesuada pulvinar. In hac habitasse platea dictumst. Aliquam sed gravida tortor, ac elementum augue. Morbi porta pharetra nibh a vulputate. Morbi non vehicula arcu. Nullam tristique, mauris convallis congue tincidunt, mi justo dapibus ligula, at placerat est ligula eu erat. Quisque mauris magna, vulputate vel lacinia nec, venenatis quis mi. Cras non ultrices mauris.</p>
</div>
</div>
</section>
</div>
<footer>
<div class="container">
<div class="content">
<h5>FOOTER (always at the bottom)</h5>
</div>
</div>
</footer>
</main>
</body>
</html>