diff options
Diffstat (limited to 'template.html')
-rw-r--r-- | template.html | 899 |
1 files changed, 528 insertions, 371 deletions
diff --git a/template.html b/template.html index 64ac86c..3f8a487 100644 --- a/template.html +++ b/template.html | |||
@@ -2,112 +2,155 @@ | |||
2 | Google IO 2012/2013 HTML5 Slide Template | 2 | Google IO 2012/2013 HTML5 Slide Template |
3 | 3 | ||
4 | Authors: Eric Bidelman <ebidel@gmail.com> | 4 | Authors: Eric Bidelman <ebidel@gmail.com> |
5 | Luke Mahé <lukem@google.com> | 5 | Luke Mahé <lukem@google.com> |
6 | 6 | ||
7 | URL: https://code.google.com/p/io-2012-slides | 7 | URL: https://code.google.com/p/io-2012-slides |
8 | --> | 8 | --> |
9 | <!DOCTYPE html> | 9 | <!DOCTYPE html> |
10 | <html> | 10 | <html> |
11 | <head> | 11 | <head> |
12 | <title></title> | 12 | <title></title> |
13 | <meta charset="utf-8"> | 13 | <meta charset="utf-8"> |
14 | <meta http-equiv="X-UA-Compatible" content="chrome=1"> | 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">--> | 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">--> | 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--> | 17 | <!--This one seems to work all the time, but really small on ipad--> |
18 | <!--<meta name="viewport" content="initial-scale=0.4">--> | 18 | <!--<meta name="viewport" content="initial-scale=0.4">--> |
19 | <meta name="apple-mobile-web-app-capable" content="yes"> | 19 | <meta name="apple-mobile-web-app-capable" content="yes"> |
20 | <link rel="stylesheet" media="all" href="theme/css/default.css"> | 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"> | 21 | <link rel="stylesheet" media="only screen and (max-device-width: 480px)" |
22 | <base target="_blank"> <!-- This amazingness opens all links in a new tab. --> | 22 | href="theme/css/phone.css"> |
23 | <script data-main="js/slides" src="js/require.js"></script> | 23 | <base target="_blank"> |
24 | </head> | 24 | <!-- This amazingness opens all links in a new tab. --> |
25 | <body style="opacity: 0"> | 25 | <script data-main="js/slides" src="js/require.js"></script> |
26 | </head> | ||
27 | <body style="opacity: 0"> | ||
26 | 28 | ||
27 | <slides class="layout-widescreen"> | 29 | <slides class="layout-widescreen"> |
28 | 30 | <slide | |
29 | <slide class="logoslide nobackground"> | 31 | class="logoslide nobackground"> |
30 | <article class="flexbox vcenter"> | 32 | <article class="flexbox vcenter"> |
31 | <span><img src="images/google_developers_logo.png"></span> | 33 | <span><img src="images/google_developers_logo.png"></span> |
32 | </article> | 34 | </article> |
33 | </slide> | 35 | </slide> |
34 | 36 | <slide class="title-slide segue nobackground"> | |
35 | <slide class="title-slide segue nobackground"> | 37 | <aside class="gdbar"> |
36 | <aside class="gdbar"><img src="images/google_developers_icon_128.png"></aside> | 38 | <img src="images/google_developers_icon_128.png"> |
37 | <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> | 39 | </aside> |
38 | <hgroup class="auto-fadein"> | 40 | <!-- The content of this hgroup is replaced programmatically through the slide_config.json. --> |
39 | <h1 data-config-title><!-- populated from slide_config.json --></h1> | 41 | <hgroup class="auto-fadein"> |
40 | <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> | 42 | <h1 data-config-title><!-- populated from slide_config.json --></h1> |
41 | <p data-config-presenter><!-- populated from slide_config.json --></p> | 43 | <h2 data-config-subtitle><!-- populated from slide_config.json --></h2> |
42 | </hgroup> | 44 | <p data-config-presenter> |
43 | </slide> | 45 | <!-- populated from slide_config.json --> |
44 | 46 | </p> | |
45 | <slide> | 47 | </hgroup> |
46 | <hgroup> | 48 | </slide> |
47 | <h2>Slide with Bullets</h2> | 49 | <slide> |
48 | </hgroup> | 50 | <hgroup> |
49 | <article> | 51 | <h2>Slide with Bullets</h2> |
50 | <ul> | 52 | </hgroup> |
51 | <li>Titles are formatted as Open Sans with bold applied and font size is set at 45</li> | 53 | <article> |
52 | <li>Title capitalization is title case | 54 | <ul> |
53 | <ul> | 55 | <li> |
54 | <li>Subtitle capitalization is title case</li> | 56 | Titles are formatted as Open Sans with bold applied and font size is |
55 | </ul> | 57 | set at 45 |
56 | </li> | 58 | </li> |
57 | <li>Subtitle capitalization is title case</li> | 59 | <li> |
58 | <li>Titles and subtitles should never have a period at the end</li> | 60 | Title capitalization is title case |
59 | </ul> | 61 | <ul> |
60 | </article> | 62 | <li> |
61 | </slide> | 63 | Subtitle capitalization is title case |
62 | 64 | </li> | |
63 | <slide> | 65 | </ul> |
64 | <hgroup> | 66 | </li> |
65 | <h2>Slide with Bullets that Build</h2> | 67 | <li> |
66 | <h3>Subtitle Placeholder</h3> | 68 | Subtitle capitalization is title case |
67 | </hgroup> | 69 | </li> |
68 | <article> | 70 | <li> |
69 | <p>A list where items build:</p> | 71 | Titles and subtitles should never have a period at the end |
70 | <ul class="build"> | 72 | </li> |
71 | <li>Pressing 'h' highlights code snippets</li> | 73 | </ul> |
72 | <li>Pressing 'p' toggles speaker notes (if they're on the current slide)</li> | 74 | </article> |
73 | <li>Pressing 'f' toggles fullscreen viewing</li> | 75 | </slide> |
74 | <li>Pressing 'w' toggles widescreen</li> | 76 | <slide> |
75 | <li>Pressing 'o' toggles overview mode</li> | 77 | <hgroup> |
76 | <li>Pressing 'ESC' toggles off these goodies</li> | 78 | <h2>Slide with Bullets that Build</h2> |
77 | </ul> | 79 | <h3>Subtitle Placeholder</h3> |
78 | <p>Another list, but items fade as they build:</p> | 80 | </hgroup> |
79 | <ul class="build fade"> | 81 | <article> |
80 | <li>Hover over me!</li> | 82 | <p> |
81 | <li>Hover over me!</li> | 83 | A list where items build: |
82 | <li>Hover over me!</li> | 84 | </p> |
83 | </ul> | 85 | <ul class="build"> |
84 | </article> | 86 | <li> |
85 | </slide> | 87 | Pressing 'h' highlights code snippets |
86 | 88 | </li> | |
87 | <slide> | 89 | <li> |
88 | <hgroup> | 90 | Pressing 'p' toggles speaker notes (if they're on the current slide) |
89 | <h2>Slide with (Smaller Font)</h2> | 91 | </li> |
90 | </hgroup> | 92 | <li> |
91 | <article class="smaller"> | 93 | Pressing 'f' toggles fullscreen viewing |
92 | <ul> | 94 | </li> |
93 | <li>All <a href="http://google.com">links</a> open in new tabs.</li> | 95 | <li> |
94 | <li>To change that this, add <code>target="_self"</code> to the link.</li> | 96 | Pressing 'w' toggles widescreen |
95 | </ul> | 97 | </li> |
96 | </article> | 98 | <li> |
97 | </slide> | 99 | Pressing 'o' toggles overview mode |
98 | 100 | </li> | |
99 | <slide hidden> | 101 | <li> |
100 | Hidden slides are left out of the presentation. | 102 | Pressing 'ESC' toggles off these goodies |
101 | </slide> | 103 | </li> |
102 | 104 | </ul> | |
103 | <slide> | 105 | <p> |
104 | <hgroup> | 106 | Another list, but items fade as they build: |
105 | <h2>Code Slide (with Subtitle Placeholder)</h2> | 107 | </p> |
106 | <h3>Subtitle Placeholder</h3> | 108 | <ul class="build fade"> |
107 | </hgroup> | 109 | <li> |
108 | <article> | 110 | Hover over me! |
109 | <p>Press 'h' to highlight important sections of code (wrapped in <code><b></code>).</p> | 111 | </li> |
110 | <pre class="prettyprint" data-lang="javascript"> | 112 | <li> |
113 | Hover over me! | ||
114 | </li> | ||
115 | <li> | ||
116 | Hover over me! | ||
117 | </li> | ||
118 | </ul> | ||
119 | </article> | ||
120 | </slide> | ||
121 | <slide> | ||
122 | <hgroup> | ||
123 | <h2>Slide with (Smaller Font)</h2> | ||
124 | </hgroup> | ||
125 | <article class="smaller"> | ||
126 | <ul> | ||
127 | <li> | ||
128 | All <a href="http://google.com">links</a> open in new tabs. | ||
129 | </li> | ||
130 | <li> | ||
131 | To change that this, add <code> | ||
132 | target="_self"</code> | ||
133 | to the link. | ||
134 | </li> | ||
135 | </ul> | ||
136 | </article> | ||
137 | </slide> | ||
138 | <slide hidden> | ||
139 | Hidden slides are left out of the presentation. | ||
140 | </slide> | ||
141 | <slide> | ||
142 | <hgroup> | ||
143 | <h2>Code Slide (with Subtitle Placeholder)</h2> | ||
144 | <h3>Subtitle Placeholder</h3> | ||
145 | </hgroup> | ||
146 | <article> | ||
147 | <p> | ||
148 | Press 'h' to highlight important sections of code (wrapped in | ||
149 | <code> | ||
150 | <b></code> | ||
151 | ). | ||
152 | </p> | ||
153 | <pre class="prettyprint" data-lang="javascript"> | ||
111 | <script type='text/javascript'> | 154 | <script type='text/javascript'> |
112 | // Say hello world until the user starts questioning | 155 | // Say hello world until the user starts questioning |
113 | // the meaningfulness of their existence. | 156 | // the meaningfulness of their existence. |
@@ -118,15 +161,14 @@ URL: https://code.google.com/p/io-2012-slides | |||
118 | } | 161 | } |
119 | </script> | 162 | </script> |
120 | </pre> | 163 | </pre> |
121 | </article> | 164 | </article> |
122 | </slide> | 165 | </slide> |
123 | 166 | <slide> | |
124 | <slide> | 167 | <hgroup> |
125 | <hgroup> | 168 | <h2>Code Slide (Smaller Font)</h2> |
126 | <h2>Code Slide (Smaller Font)</h2> | 169 | </hgroup> |
127 | </hgroup> | 170 | <article class="smaller"> |
128 | <article class="smaller"> | 171 | <pre class="prettyprint" data-lang="javascript"> |
129 | <pre class="prettyprint" data-lang="javascript"> | ||