diff options
Diffstat (limited to 'slides/final/template.html')
-rw-r--r-- | slides/final/template.html | 416 |
1 files changed, 416 insertions, 0 deletions
diff --git a/slides/final/template.html b/slides/final/template.html new file mode 100644 index 0000000..64ac86c --- /dev/null +++ b/slides/final/template.html | |||
@@ -0,0 +1,416 @@ | |||
1 | <!-- | ||
2 | Google IO 2012/2013 HTML5 Slide Template | ||
3 | |||
4 | Authors: Eric Bidelman <ebidel@gmail.com> | ||
5 | Luke Mahé <lukem@google.com> | ||
6 | |||
7 | URL: https://code.google.com/p/io-2012-slides | ||
8 | --> | ||
9 | <!DOCTYPE html> | ||
10 | <html> | ||
11 | <head> | ||
12 | <title></title> | ||
13 | <meta charset="utf-8"> | ||
14 | <meta http-equiv="X-UA-Compatible" content="chrome=1"> | ||
15 | <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">--> | ||
16 | <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">--> | ||
17 | <!--This one seems to work all the time, but really small on ipad--> | ||
18 | <!--<meta name="viewport" content="initial-scale=0.4">--> | ||
19 | <meta name="apple-mobile-web-app-capable" content="yes"> | ||
20 | <link rel="stylesheet" media="all" href="theme/css/default.css"> | ||
21 | <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="theme/css/phone.css"> | ||
22 | <base target="_blank"> <!-- This amazingness opens all links in a new tab. --> | ||
23 | <script data-main="js/slides" src="js/require.js"></script> | ||
24 | </head> | ||
25 | <body style="opacity: 0"> | ||
26 | |||
27 | <slides class="layout-widescreen"> | ||
28 | |||
29 | <slide class="logoslide nobackground"> | ||
30 | <article class="flexbox vcenter"> | ||
31 | <span><img src="images/google_developers_logo.png"></span> | ||
32 | </article> | ||
33 | </slide> | ||
34 | |||
35 | <slide class="title-slide segue nobackground"> | ||
36 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | ||
37 | <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> | ||
38 | <hgroup class="auto-fadein"> | ||
39 | <h1 data-config-title><!-- populated from slide_config.json --></h1> | ||
40 | <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> | ||
41 | <p data-config-presenter><!-- populated from slide_config.json --></p> | ||
42 | </hgroup> | ||
43 | </slide> | ||
44 | |||
45 | <slide> | ||
46 | <hgroup> | ||
47 | <h2>Slide with Bullets</h2> | ||
48 | </hgroup> | ||
49 | <article> | ||
50 | <ul> | ||
51 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> | ||
52 | <li>Title capitalization is title case | ||
53 | <ul> | ||
54 | <li>Subtitle capitalization is title case</li> | ||
55 | </ul> | ||
56 | </li> | ||
57 | <li>Subtitle capitalization is title case</li> | ||
58 | <li>Titles and subtitles should never have a period at the end</li> | ||
59 | </ul> | ||
60 | </article> | ||
61 | </slide> | ||
62 | |||
63 | <slide> | ||
64 | <hgroup> | ||
65 | <h2>Slide with Bullets that Build</h2> | ||
66 | <h3>Subtitle Placeholder</h3> | ||
67 | </hgroup> | ||
68 | <article> | ||
69 | <p>A list where items build:</p> | ||
70 | <ul class="build"> | ||
71 | <li>Pressing 'h' highlights code snippets</li> | ||
72 | <li>Pressing 'p' toggles speaker notes (if they're on the current slide)</li> | ||
73 | <li>Pressing 'f' toggles fullscreen viewing</li> | ||
74 | <li>Pressing 'w' toggles widescreen</li> | ||
75 | <li>Pressing 'o' toggles overview mode</li> | ||
76 | <li>Pressing 'ESC' toggles off these goodies</li> | ||
77 | </ul> | ||
78 | <p>Another list, but items fade as they build:</p> | ||
79 | <ul class="build fade"> | ||
80 | <li>Hover over me!</li> | ||
81 | <li>Hover over me!</li> | ||
82 | <li>Hover over me!</li> | ||
83 | </ul> | ||
84 | </article> | ||
85 | </slide> | ||
86 | |||
87 | <slide> | ||
88 | <hgroup> | ||
89 | <h2>Slide with (Smaller Font)</h2> | ||
90 | </hgroup> | ||
91 | <article class="smaller"> | ||
92 | <ul> | ||
93 | <li>All <a href="http://google.com">links</a> open in new tabs.</li> | ||
94 | <li>To change that this, add <code>target="_self"</code> to the link.</li> | ||
95 | </ul> | ||
96 | </article> | ||
97 | </slide> | ||
98 | |||
99 | <slide hidden> | ||
100 | Hidden slides are left out of the presentation. | ||
101 | </slide> | ||
102 | |||
103 | <slide> | ||
104 | <hgroup> | ||
105 | <h2>Code Slide (with Subtitle Placeholder)</h2> | ||
106 | <h3>Subtitle Placeholder</h3> | ||
107 | </hgroup> | ||
108 | <article> | ||
109 | <p>Press 'h' to highlight important sections of code (wrapped in <code><b></code>).</p> | ||
110 | <pre class="prettyprint" data-lang="javascript"> | ||
111 | <script type='text/javascript'> | ||
112 | // Say hello world until the user starts questioning | ||
113 | // the meaningfulness of their existence. | ||
114 | function helloWorld(world) { | ||
115 | <b>for (var i = 42; --i >= 0;) { | ||
116 | alert('Hello ' + String(world)); | ||
117 | }</b> | ||
118 | } | ||
119 | </script> | ||
120 | </pre> | ||
121 | </article> | ||
122 | </slide> | ||
123 | |||
124 | <slide> | ||
125 | <hgroup> | ||
126 | <h2>Code Slide (Smaller Font)</h2> | ||
127 | </hgroup> | ||
128 | <article class="smaller"> | ||
129 | <pre class="prettyprint" data-lang="javascript"> | ||
130 | // Say hello world until the user starts questioning | ||
131 | // the meaningfulness of their existence. | ||
132 | function helloWorld(world) { | ||
133 | for (var i = 42; --i >= 0;) { | ||
134 | alert('Hello ' + String(world)); | ||
135 | } | ||
136 | } | ||
137 | </pre> | ||
138 | <pre class="prettyprint" data-lang="css"> | ||
139 | <style> | ||
140 | p { color: pink } | ||
141 | b { color: blue } | ||
142 | </style> | ||
143 | </pre> | ||
144 | <pre class="prettyprint" data-lang="html"> | ||
145 | <!DOCTYPE html> | ||
146 | <html> | ||
147 | <head> | ||
148 | <title>My Awesome Page</title> | ||
149 | </head> | ||
150 | <body> | ||
151 | <p>Hello world</p> | ||
152 | <body> | ||
153 | </html> | ||
154 | </pre> | ||
155 | </article> | ||
156 | </slide> | ||
157 | |||
158 | <slide> | ||
159 | <aside class="note"> | ||
160 | <section> | ||
161 | <ul> | ||
162 | <li>Point I wanted to make #1</li> | ||
163 | <li>Point I wanted to make #2</li> | ||
164 | <li>Point I wanted to make #3</li> | ||
165 | <li>Example <a href="#">link</a> in notes.</li> | ||
166 | </ul> | ||
167 | <p><b>Remember to say this tag line!</b></p> | ||
168 | </section> | ||
169 | </aside> | ||
170 | <hgroup> | ||
171 | <h2>Slide with Speaker Notes</h2> | ||
172 | </hgroup> | ||
173 | <article> | ||
174 | <p>Press 'p' to toggle speaker notes.</p> | ||
175 | </article> | ||
176 | </slide> | ||
177 | |||
178 | <slide> | ||
179 | <aside class="note"> | ||
180 | <section> | ||
181 | <ul> | ||
182 | <li>See this amazing link: <a href="http://www.google.com">link</a>.</li> | ||
183 | </ul> | ||
184 | <p><b>Remember to say this tag line!</b></p> | ||
185 | </section> | ||
186 | </aside> | ||
187 | <hgroup> | ||
188 | <h2>Presenter Mode</h2> | ||
189 | </hgroup> | ||
190 | <article> | ||
191 | <p>Add <code><a href="?presentme=true" target="_self">?presentme=true</a></code> to the URL to enabled presenter mode. | ||
192 | This setting is sticky, meaning refreshing the page will persist presenter | ||
193 | mode.</p> | ||
194 | <p>Hit <code><a href="?presentme=false" target="_self">?presentme=false</a></code> to disable presenter mode.</p> | ||
195 | </article> | ||
196 | </slide> | ||
197 | |||
198 | <slide> | ||
199 | <hgroup> | ||
200 | <h2>Slide with Image</h2> | ||
201 | </hgroup> | ||
202 | <article> | ||
203 | <img src="images/chart.png" class="reflect" alt="Description" title="Description"> | ||
204 | <footer class="source">source: place source info here</footer> | ||
205 | </article> | ||
206 | </slide> | ||
207 | |||
208 | <slide> | ||
209 | <hgroup> | ||
210 | <h2>Slide with Image (Centered horz/vert)</h2> | ||
211 | </hgroup> | ||
212 | <article class="flexbox vcenter"> | ||
213 | <img src="images/barchart.png" alt="Description" title="Description"> | ||
214 | <footer class="source">source: place source info here</footer> | ||
215 | </article> | ||
216 | </slide> | ||
217 | |||
218 | <slide> | ||
219 | <hgroup> | ||
220 | <h2>Table Option A</h2> | ||
221 | <h3>Subtitle Placeholder</h3> | ||
222 | </hgroup> | ||
223 | <article> | ||
224 | <table> | ||
225 | <tr> | ||
226 | <th></th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th> | ||
227 | </tr> | ||
228 | <tr> | ||
229 | <td>Row 1</td><td>placeholder</td><td class="highlight">placeholder</td><td>placeholder</td><td>placeholder</td> | ||
230 | </tr> | ||
231 | <tr> | ||
232 | <td>Row 2</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td> | ||
233 | </tr> | ||
234 | <tr> | ||
235 | <td>Row 3</td><td>placeholder</td><td>placeholder</td><td>placeholder</td><td>placeholder</td> | ||
236 | </tr> | ||
237 | <tr> | ||