Mercurial > hg > Papers > 2013 > nobuyasu-jssst
diff presen/template.html @ 48:5dadfd75cfb0
add presen
| author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
|---|---|
| date | Mon, 09 Sep 2013 09:03:33 +0900 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/presen/template.html Mon Sep 09 09:03:33 2013 +0900 @@ -0,0 +1,358 @@ +<!DOCTYPE html> + +<html> + <head> + <title>Presentation</title> + + <meta charset='utf-8'> + <script + src='./slides.js'></script> + </head> + + <style> + /* Your individual styles here, or just use inline styles if that’s + what you want. */ + + + </style> + + <body style='display: none'> + + <section class='slides layout-regular template-default'> + + <!-- Your slides (<article>s) go here. Delete or comment out the + slides below. --> + + + + <article class='biglogo'> + </article> + + <article> + <h1> + Title Goes Here Up + <br> + To Two Lines + </h1> + <p> + Sergey Brin + <br> + May 10, 2011 + </p> + </article> + + <article> + <p> + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + </p> + <p> + There is more text just underneath. + </p> + </article> + + <article> + <h3> + Simple slide with header and text + </h3> + <p> + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + </p> + <p> + There is more text just underneath with a <code>code sample: 5px</code>. + </p> + </article> + + <article class='smaller'> + <h3> + Simple slide with header and text (small font) + </h3> + <p> + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + This is a slide with just text. This is a slide with just text. + </p> + <p> + There is more text just underneath with a <code>code sample: 5px</code>. + </p> + </article> + + <article> + <h3> + Slide with bullet points and a longer title, just because we + can make it longer + </h3> + <ul> + <li> + Use this template to create your presentation + </li> + <li> + Use the provided color palette, box and arrow graphics, and + chart styles + </li> + <li> + Instructions are provided to assist you in using this + presentation template effectively + </li> + <li> + At all times strive to maintain Google's corporate look and feel + </li> + </ul> + </article> + + <article> + <h3> + Slide with bullet points that builds + </h3> + <ul class="build"> + <li> + This is an example of a list + </li> + <li> + The list items fade in + </li> + <li> + Last one! + </li> + </ul> + + <div class="build"> + <p>Any element with child nodes can build.</p> + <p>It doesn't have to be a list.</p> + </div> + </article> + + <article class='smaller'> + <h3> + Slide with bullet points (small font) + </h3> + <ul> + <li> + Use this template to create your presentation + <li> + Use the provided color palette, box and arrow graphics, and + chart styles + <li> + Instructions are provided to assist you in using this + presentation template effectively + <li> + At all times strive to maintain Google's corporate look and feel + </ul> + </article> + + <article> + <h3> + Slide with a table + </h3> + + <table> + <tr> + <th> + Name + <th> + Occupation + <tr> + <td> + Luke Mahé + <td> + V.P. of Keepin’ It Real + <tr> + <td> + Marcin Wichary + <td> + The Michael Bay of Doodles + </table> + </article> + + <article class='smaller'> + <h3> + Slide with a table (smaller text) + </h3> + + <table> + <tr> + <th> + Name + <th> + Occupation + <tr> + <td> + Luke Mahé + <td> + V.P. of Keepin’ It Real + <tr> + <td> + Marcin Wichary + <td> + The Michael Bay of Doodles + </table> + </article> + + <article> + <h3> + Styles + </h3> + <ul> + <li> + <span class='red'>class="red"</span> + <li> + <span class='blue'>class="blue"</span> + <li> + <span class='green'>class="green"</span> + <li> + <span class='yellow'>class="yellow"</span> + <li> + <span class='black'>class="black"</span> + <li> + <span class='white'>class="white"</span> + <li> + <b>bold</b> and <i>italic</i> + </ul> + </article> + + <article> + <h2> + Segue slide + </h2> + </article> + + <article> + <h3> + Slide with an image + </h3> + <p> + <img style='height: 500px' src='images/example-graph.png'> + </p> + <div class='source'> + Source: Sergey Brin + </div> + </article> + + <article> + <h3> + Slide with an image (centered) + </h3> + <p> + <img class='centered' style='height: 500px' src='images/example-graph.png'> + </p> + <div class='source'> + Source: Larry Page + </div> + </article> + + <article class='fill'> + <h3> + Image filling the slide (with optional header) + </h3> + <p> + <img src='images/example-cat.jpg'> + </p> + <div class='source white'> + Source: Eric Schmidt + </div> + </article> + + <article> + <h3> + This slide has some code + </h3> + <section> + <pre> +<script type='text/javascript'> + // Say hello world until the user starts questioning + // the meaningfulness of their existence. + function helloWorld(world) { + for (var i = 42; --i >= 0;) { + alert('Hello ' + String(world)); + } + } +</script> +<style> + p { color: pink } + b { color: blue } + u { color: 'umber' } +</style> +</pre> + </section> + </article> + + <article class='smaller'> + <h3> + This slide has some code (small font) + </h3> + <section> + <pre> +<script type='text/javascript'> + // Say hello world until the user starts questioning + // the meaningfulness of their existence. + function helloWorld(world) { + for (var i = 42; --i >= 0;) { + alert('Hello ' + String(world)); + } + } +</script> +<style> + p { color: pink } + b { color: blue } + u { color: 'umber' } +</style> +</pre> + </section> + </article> + + <article> + <q> + The best way to predict the future is to invent it. + </q> + <div class='author'> + Alan Kay + </div> + </article> + + <article class='smaller'> + <q> + A distributed system is one in which the failure of a computer + you didn’t even know existed can render your own computer unusable. + </q> + <div class='author'> + Leslie Lamport + </div> + </article> + + <article class='nobackground'> + <h3> + A slide with an embed + title + </h3> + + <iframe src='http://www.google.com/doodle4google/history.html'></iframe> + </article> + + <article class='nobackground'> + <iframe src='http://www.google.com/doodle4google/history.html'></iframe> + </article> + + <article class='fill'> + <h3> + Full-slide embed with (optional) slide title on top + </h3> + <iframe src='http://www.google.com/doodle4google/history.html'></iframe> + </article> + + <article> + <h3> + Thank you! + </h3> + + <ul> + <li> + <a href='http://www.google.com'>google.com</a> + </ul> + </article> + + </section> + + </body> +</html>