-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathslides.html5.html
161 lines (143 loc) · 5.67 KB
/
slides.html5.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
---
---
{% if jekyll %}
{% assign headers = site.headers %}
{% assign slides = site.slides %}
{% endif %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ headers['title'] }}</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono">
<link rel="stylesheet" href="src/prettify/prettify.css" id="prettify-link" disabled>
<link rel="stylesheet" href="styles/fonts.css" media="screen">
<link rel="stylesheet" href="styles/presentation.css" media="screen">
<link rel="stylesheet" href="styles/common.css" media="screen">
<!-- todo: check - is media="screen" needed? what is the "default"? -->
<link rel="stylesheet" href="styles/default.css" class="theme" media="screen">
<link rel="stylesheet" href="styles/moon.css" class="theme" media="screen">
<link rel="stylesheet" href="styles/sand.css" class="theme" media="screen">
<link rel="stylesheet" href="styles/sea_wave.css" class="theme" media="screen">
</head>
<body>
<div id="flex-container">
<nav id="helpers">
<button title="Previous slide" id="nav-prev" class="nav-prev">⇽</button>
<button title="Jump to a random slide" id="slide-no">5</button>
<button title="Next slide" id="nav-next" class="nav-next">⇾</button>
<menu>
<button type="checkbox" data-command="toc" title="Table of Contents" class="toc">TOC</button>
<!-- <button type="checkbox" data-command="resources" title="View Related Resources">☆</button> -->
<button type="checkbox" data-command="notes" title="View Slide Notes">✏</button>
<button type="checkbox" data-command="source" title="View slide source">↻</button>
<button type="checkbox" data-command="help" title="View Help">?</button>
</menu>
</nav>
<div class="slides">
<div id="presentation-counter">Loading...</div>
<div class="slide" id="landing-slide">
<section class="middle">
<p>This presentation is an HTML5 website</p>
<p>Press <span id="left-init-key" class="key">→</span> key to advance.</p>
</section>
<aside class="note">
<section>
Welcome! (This field is for speaker notes and commentary.)
</section>
</aside>
</div>
<div class="slide" id="controls-slide">
<header>Slides controls</header>
<section>
<ul>
<li><span class="key">←</span> and <span class="key">→</span> to move around.</li>
<li><span class="key">Ctrl/Command</span> and <span class="key">+</span> or <span class="key">-</span> to zoom in and out if slides don’t fit.</li>
<li><span class="key">S</span> to view page source.</li>
<li><span class="key">T</span> to change the theme.</li>
<li><span class="key">H</span> to toggle syntax highlight.</li>
<li><span class="key">N</span> to toggle speaker notes.</li>
<li><span class="key">3</span> to toggle 3D effect.</li>
<li><span class="key">0</span> to toggle help.</li>
</ul>
</section>
</div>
<div class="slide" id="title-slide">
<section class="middle">
<hgroup>
<h1>
{{ headers['title'] }}
</h1>
<h2>
{{ headers['subtitle'] }}
</h2>
</hgroup>
</section>
</div>
<div class="slide" id="table-of-contents">
<header><h1>Agenda - Table of Contents</h1></header>
<section>
<ul id="toc-list">
</ul>
</section>
</div>
{% for slide in slides %}
{% if jekyll %}
{% capture slide_header %}<h1>{{slide.title}}</h1>{% endcapture %}
{% assign slide_content_without_header = slide.content %}
{% else %}
{% capture slide_header %}{{ slide.header }}{% endcapture %}
{% capture slide_content_without_header %}{{ slide.content_without_header }}{% endcapture %}
{% endif %}
<div class="slide transitionSlide" id="slide{{ forloop.index }}"> <!-- fix: add +2 or +1 was: (i+2).to_s -->
<header>{{ slide_header }}</header>
<section>
{{ slide_content_without_header }}
</section>
</div>
{% endfor %}
<div id="speaker-note" class="invisible" style="display: none;"></div>
<aside id="help" class="sidebar invisible" style="display: none;">
<table>
<caption>Help</caption>
<tbody>
<tr>
<th>Move Around</th>
<td>← →</td>
</tr>
<tr>
<th>Source File</th>
<td>s</td>
</tr>
<tr>
<th>Change Theme</th>
<td>t</td>
</tr>
<tr>
<th>Syntax Highlight</th>
<td>h</td>
</tr>
<tr>
<th>Speaker Notes</th>
<td>n</td>
</tr>
<tr>
<th>Toggle 3D</th>
<td>3</td>
</tr>
<tr>
<th>Help</th>
<td>0</td>
</tr>
</tbody>
</table>
</aside>
</div> <!-- slides -->
</div>
<script src="src/prettify/prettify.js" onload="prettyPrint();" defer></script>
<script src="js/utils.js"></script>
<script src="js/slide.js"></script>
<script src="js/slideshow.js"></script>
<script src="js/start.js"></script>
</body>
</html>