Skip to content


Subversion checkout URL

You can clone with
Download ZIP
branch: master
191 lines (169 sloc) 6.905 kB
<!DOCTYPE html>
Copyright 2011 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.
Original slides: Marcin Wichary (
Modifications: Chrome DevRel Team (
Alex Russell (
Brad Neuberg
<!-- GB: modifications for s9 template pack:
o removed offline manifest
o removed disclaimer; it's just a prototype anyway
o removed google analytics script code
o removed google maps script code
o removed all slides
o in js/utils.js changed line 541pp queryAll('.transitionSlide')
- looks for h1 (not h2) and doesn't include img (icon)
o in styles/commons.css commented out rules for li and bullets
li {
list-style: none;
padding: 10px 0;
.bullets {
font-size: 40px;
.bullets li::before {
content: '· ';
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title><%= @headers['title'] %></title>
<link href="|Droid+Sans+Mono" rel="stylesheet" type="text/css" />
<link id="prettify-link" href="src/prettify/prettify.css" rel="stylesheet" disabled />
<link href="styles/fonts.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/presentation.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/common.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/default.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/moon.css" rel="stylesheet" type="text/css" media="screen" />
<link class="theme" href="styles/sand.css" rel="stylesheet" type="text/css" media="screen"/>
<link class="theme" href="styles/sea_wave.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="flex-container">
<nav id="helpers">
<button title="Previous slide" id="nav-prev" class="nav-prev">&#8701;</button>
<button title="Jump to a random slide" id="slide-no">5</button>
<button title="Next slide" id="nav-next" class="nav-next">&#8702;</button>
<button type="checkbox" data-command="toc" title="Table of Contents" class="toc">TOC</button>
<!-- <button type="checkbox" data-command="resources" title="View Related Resources">&#9734;</button> -->
<button type="checkbox" data-command="notes" title="View Slide Notes">&#9999;</button>
<button type="checkbox" data-command="source" title="View slide source">&#8635;</button>
<button type="checkbox" data-command="help" title="View Help">?</button>
<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">&rarr;</span> key to advance.</p>
<aside class="note">
Welcome! (This field is for speaker notes and commentary.)
<div class="slide" id="controls-slide">
<header>Slides controls</header>
<li><span class="key">&larr;</span> and <span class="key">&rarr;</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>
<div class="slide" id="title-slide">
<section class="middle">
<%= @headers['title'] %>
<%= @headers['subtitle'] %>
<div class="slide" id="table-of-contents">
<header><h1>Agenda - Table of Contents</h1></header>
<ul id="toc-list">
<% @slides.each_with_index do |slide,i| %>
<div class="slide transitionSlide" id="<%= %Q(slide#{i+2}) %>">
<header><%= slide.header %></header>
<%= slide.content_without_header %>
<% end %>
<div id="speaker-note" class="invisible" style="display: none;"></div>
<aside id="help" class="sidebar invisible" style="display: none;">
<th>Move Around</th>
<th>Source File</th>
<th>Change Theme</th>
<th>Syntax Highlight</th>
<th>Speaker Notes</th>
<th>Toggle 3D</th>
</div> <!-- slides -->
<!--[if lt IE 9]>
<script>CFInstall.check({ mode: "overlay" });</script>
<script src="src/prettify/prettify.js" onload="prettyPrint();" defer></script>
<script src="js/utils.js"></script>
Jump to Line
Something went wrong with that request. Please try again.