doc/demo.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4 >
   5 <html xmlns="http://www.w3.org/1999/xhtml">
   6   <head>
   7     <title>SimpleWebSlides</title>
   8
   9     <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  10     <meta name="copyright"
  11           content="Copyright &#169; 2013 Kim Nguyễn" />
  12
  13     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
  14           media="all" />
  15     <!-- allows to switch themes in firefox -->
  16
  17     <link rel="stylesheet" title="Default" href="../themes/default.css"
  18           type="text/css" />
  19     <link rel="alternate stylesheet"  title="Web 2.0"
  20           href="../themes/webTwoPointO.css"
  21           type="text/css" />
  22
  23     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  24     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  25   </head>
  26   <body>
  27
  28     <div class="sws-slide sws-cover sws-option-nofooter">
  29       <div class="centerbox">
  30         <h1>SimpleWebSlides</h1>
  31         <h1>An <em>HTML</em><img style="height:28pt"
  32              src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
  33           Presentation framework</h1>
  34         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
  35       </div>
  36     </div>
  37
  38
  39     <h1>Introduction</h1>
  40
  41     <div class="sws-slide" >
  42       <h1>What is it?</h1>
  43       <em>SimpleWebSlides</em> is an HTML5 framework that allows
  44       you to build presentation slides:
  45       <ul>
  46         <li class="sws-pause" >Write your slides in HTML5!</li>
  47         <li class="sws-pause" >Theme your slides with <em>CSS</em>!</li>
  48         <li class="sws-pause" >Script your slides with Javascript!</li>
  49         <script type="text/javascript">
  50           SimpleWebSlides.registerCustom(3, function (canvas) {
  51           var h1 = canvas.find("h1");
  52           var old_color = h1.css('color');
  53           var old_size = h1.css('font-size');
  54           h1.animate({"font-size":"100pt" }, 500);
  55           h1.animate({"font-size":old_size }, 500);
  56           });
  57         </script>
  58       </ul>
  59     </div>
  60
  61   </body>
  62 </html>