forked from Khan/khan-mobile
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (106 loc) · 4.13 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Khan Academy</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="css/jquery.mobile.splitview.css" />
<link rel="stylesheet" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" href="css/jquery.mobile.grids.collapsible.css" />
<link rel="stylesheet" href="css/khan.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<!-- Needed for browsers that don't support fixed positioning. -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.mobile.scrollview.js"></script>
<!-- Support simulated, iPad-like, menus -->
<script type="text/javascript" src="js/jquery.mobile.splitview.js"></script>
<!-- Load jQuery Mobile itself -->
<script type="text/javascript" src="js/jquery.mobile-1.0a4.1.js"></script>
<!-- Main application logic -->
<script type="text/javascript" src="js/tmpl.js"></script>
<script type="text/javascript" src="js/khan.js"></script>
</head>
<body>
<!-- The menu panel, will hold all navigation. -->
<div data-role="panel" id="menu" data-id="menu" data-hash="crumbs">
<div data-role="page" id="playlists-page">
<div data-role="header" data-theme="b">
<h1>Playlists</h1>
</div>
<div data-role="content" id="playlists-content"></div>
</div>
</div>
<!-- The main panel, will show videos and exercises. -->
<div data-role="panel" data-id="main" id="main" data-hash="false">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Khan Academy</h1>
</div>
<div data-role="content">
<center>
<iframe class="youtube-player" type="text/html" width="480" height="380" src="http://www.youtube.com/embed/gM95HHI4gLk?wmode=opaque" frameborder="0"></iframe>
<p>Learn more about Khan Academy.</p>
</center>
</div>
</div>
</div>
<!-- Template for constructing a listview of playlists. -->
<script type="text/html" id="playlists-tmpl">
<ul data-role="listview" class="ui-listview" id="playlists">
<% each list in playlists %>
<li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" data-theme="c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#list-<%= list.youtube_id %>" class="ui-link-inherit">
<h3 class="ui-li-heading"><%= list.title %></h3>
<p class="ui-li-desc"><%= list.description %></p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
<% } %>
</ul>
</script>
<!-- Template for constructing a page (w/ listview) of videos. -->
<script type="text/html" id="playlist-tmpl">
<div data-role="page" id="list-<%= youtube_id %>" data-url="list-<%= youtube_id %>">
<div data-role="header" data-theme="b">
<h1><%= title %></h1>
</div>
<div data-role="content">
<ul data-role="listview" class="playlist">
<% each video in videos %>
<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" data-theme="c">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<img src="http://img.youtube.com/vi/<%= video.youtube_id %>/2.jpg" class="ui-li-thumb">
<a href="#video-<%= video.youtube_id %>" class="ui-link-inherit" data-panel="main" data-transition="slideup">
<h3 class="ui-li-heading"><%= video.title %></h3>
<p class="ui-li-desc"><%= video.description %></p>
</a>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
<% } %>
</ul>
</div>
</div>
</script>
<!-- Template for constructing a single video page. -->
<script type="text/html" id="video-tmpl">
<div data-role="page" id="video-<%= youtube_id %>" data-url="video-<%= youtube_id %>">
<div data-role="header" data-theme="b">
<h1><%= title %></h1>
</div>
<div data-role="content">
<center>
<iframe class="youtube-player" type="text/html" width="480" height="380" src="http://www.youtube.com/embed/<%= youtube_id %>?wmode=opaque" frameborder="0"></iframe>
<p><%= description %></p>
</center>
</center>
</div>
</div>
</script>
</body>
</html>