Mercurial > hg > Papers > 2013 > nobuyasu-jssst

comparison presen/template.html @ 48:5dadfd75cfb0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add presen
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Mon, 09 Sep 2013 09:03:33 +0900
parents
children
comparison
equal deleted inserted replaced
47:533180cea89f 48:5dadfd75cfb0
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Presentation</title>
6
7 <meta charset='utf-8'>
8 <script
9 src='./slides.js'></script>
10 </head>
11
12 <style>
13 /* Your individual styles here, or just use inline styles if that’s
14 what you want. */
15
16
17 </style>
18
19 <body style='display: none'>
20
21 <section class='slides layout-regular template-default'>
22
23 <!-- Your slides (<article>s) go here. Delete or comment out the
24 slides below. -->
25
26
27
28 <article class='biglogo'>
29 </article>
30
31 <article>
32 <h1>
33 Title Goes Here Up
34 <br>
35 To Two Lines
36 </h1>
37 <p>
38 Sergey Brin
39 <br>
40 May 10, 2011
41 </p>
42 </article>
43
44 <article>
45 <p>
46 This is a slide with just text. This is a slide with just text.
47 This is a slide with just text. This is a slide with just text.
48 This is a slide with just text. This is a slide with just text.
49 </p>
50 <p>
51 There is more text just underneath.
52 </p>
53 </article>
54
55 <article>
56 <h3>
57 Simple slide with header and text
58 </h3>
59 <p>
60 This is a slide with just text. This is a slide with just text.
61 This is a slide with just text. This is a slide with just text.
62 This is a slide with just text. This is a slide with just text.
63 </p>
64 <p>
65 There is more text just underneath with a <code>code sample: 5px</code>.
66 </p>
67 </article>
68
69 <article class='smaller'>
70 <h3>
71 Simple slide with header and text (small font)
72 </h3>
73 <p>
74 This is a slide with just text. This is a slide with just text.
75 This is a slide with just text. This is a slide with just text.
76 This is a slide with just text. This is a slide with just text.
77 </p>
78 <p>
79 There is more text just underneath with a <code>code sample: 5px</code>.
80 </p>
81 </article>
82
83 <article>
84 <h3>
85 Slide with bullet points and a longer title, just because we
86 can make it longer
87 </h3>
88 <ul>
89 <li>
90 Use this template to create your presentation
91 </li>
92 <li>
93 Use the provided color palette, box and arrow graphics, and
94 chart styles
95 </li>
96 <li>
97 Instructions are provided to assist you in using this
98 presentation template effectively
99 </li>
100 <li>
101 At all times strive to maintain Google's corporate look and feel
102 </li>
103 </ul>
104 </article>
105
106 <article>
107 <h3>
108 Slide with bullet points that builds
109 </h3>
110 <ul class="build">
111 <li>
112 This is an example of a list
113 </li>
114 <li>
115 The list items fade in
116 </li>
117 <li>
118 Last one!
119 </li>
120 </ul>
121
122 <div class="build">
123 <p>Any element with child nodes can build.</p>
124 <p>It doesn't have to be a list.</p>
125 </div>
126 </article>
127
128 <article class='smaller'>
129 <h3>
130 Slide with bullet points (small font)
131 </h3>
132 <ul>
133 <li>
134 Use this template to create your presentation
135 <li>
136 Use the provided color palette, box and arrow graphics, and
137 chart styles
138 <li>
139 Instructions are provided to assist you in using this
140 presentation template effectively
141 <li>
142 At all times strive to maintain Google's corporate look and feel
143 </ul>
144 </article>
145
146 <article>
147 <h3>
148 Slide with a table
149 </h3>
150
151 <table>
152 <tr>
153 <th>
154 Name
155 <th>
156 Occupation
157 <tr>
158 <td>
159 Luke Mahé
160 <td>
161 V.P. of Keepin’ It Real
162 <tr>
163 <td>
164 Marcin Wichary
165 <td>
166 The Michael Bay of Doodles
167 </table>
168 </article>
169
170 <article class='smaller'>
171 <h3>
172 Slide with a table (smaller text)
173 </h3>
174
175 <table>
176 <tr>
177 <th>
178 Name
179 <th>
180 Occupation
181 <tr>
182 <td>
183 Luke Mahé
184 <td>
185 V.P. of Keepin’ It Real
186 <tr>
187 <td>
188 Marcin Wichary
189 <td>
190 The Michael Bay of Doodles
191 </table>
192 </article>
193
194 <article>
195 <h3>
196 Styles
197 </h3>
198 <ul>
199 <li>
200 <span class='red'>class="red"</span>
201 <li>
202 <span class='blue'>class="blue"</span>
203 <li>
204 <span class='green'>class="green"</span>
205 <li>
206 <span class='yellow'>class="yellow"</span>
207 <li>
208 <span class='black'>class="black"</span>
209 <li>
210 <span class='white'>class="white"</span>
211 <li>
212 <b>bold</b> and <i>italic</i>
213 </ul>
214 </article>
215
216 <article>
217 <h2>
218 Segue slide
219 </h2>
220 </article>
221
222 <article>
223 <h3>
224 Slide with an image
225 </h3>
226 <p>
227 <img style='height: 500px' src='images/example-graph.png'>
228 </p>
229 <div class='source'>
230 Source: Sergey Brin
231 </div>
232 </article>
233
234 <article>
235 <h3>
236 Slide with an image (centered)
237 </h3>
238 <p>
239 <img class='centered' style='height: 500px' src='images/example-graph.png'>
240 </p>
241 <div class='source'>
242 Source: Larry Page
243 </div>
244 </article>
245
246 <article class='fill'>
247 <h3>
248 Image filling the slide (with optional header)
249 </h3>
250 <p>
251 <img src='images/example-cat.jpg'>
252 </p>
253 <div class='source white'>
254 Source: Eric Schmidt
255 </div>
256 </article>
257
258 <article>
259 <h3>
260 This slide has some code
261 </h3>
262 <section>
263 <pre>
264 &lt;script type='text/javascript'&gt;
265 // Say hello world until the user starts questioning
266 // the meaningfulness of their existence.
267 function helloWorld(world) {
268 for (var i = 42; --i &gt;= 0;) {
269 alert('Hello ' + String(world));
270 }
271 }
272 &lt;/script&gt;
273 &lt;style&gt;
274 p { color: pink }
275 b { color: blue }
276 u { color: 'umber' }
277 &lt;/style&gt;
278 </pre>
279 </section>
280 </article>
281
282 <article class='smaller'>
283 <h3>
284 This slide has some code (small font)
285 </h3>
286 <section>
287 <pre>
288 &lt;script type='text/javascript'&gt;
289 // Say hello world until the user starts questioning
290 // the meaningfulness of their existence.
291 function helloWorld(world) {
292 for (var i = 42; --i &gt;= 0;) {
293 alert('Hello ' + String(world));
294 }
295 }
296 &lt;/script&gt;
297 &lt;style&gt;
298 p { color: pink }
299 b { color: blue }
300 u { color: 'umber' }
301 &lt;/style&gt;
302 </pre>
303 </section>
304 </article>
305
306 <article>
307 <q>
308 The best way to predict the future is to invent it.
309 </q>
310 <div class='author'>
311 Alan Kay
312 </div>
313 </article>
314
315 <article class='smaller'>
316 <q>
317 A distributed system is one in which the failure of a computer
318 you didn’t even know existed can render your own computer unusable.
319 </q>
320 <div class='author'>
321 Leslie Lamport
322 </div>
323 </article>
324
325 <article class='nobackground'>
326 <h3>
327 A slide with an embed + title
328 </h3>
329
330 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
331 </article>
332
333 <article class='nobackground'>
334 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
335 </article>
336
337 <article class='fill'>
338 <h3>
339 Full-slide embed with (optional) slide title on top
340 </h3>
341 <iframe src='http://www.google.com/doodle4google/history.html'></iframe>
342 </article>
343
344 <article>
345 <h3>
346 Thank you!
347 </h3>
348
349 <ul>
350 <li>
351 <a href='http://www.google.com'>google.com</a>
352 </ul>
353 </article>
354
355 </section>
356
357 </body>
358 </html>