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     <script type="text/javascript">
  26
  27       SWS.Presentation.setTemplate('sws-template-slide-deactivate', function (o, k) {
  28       o.animate({ 'opacity': 0, 'top':'-50%'},350, function () { k(o)});
  29       });
  30
  31       SWS.Presentation.setTemplate('sws-template-slide-activate', function (o, k) {
  32       o.animate({ 'opacity': '1.0', 'top':'0pt'}, function () { k(o) });
  33       });
  34
  35       SWS.Presentation.setTemplate('sws-template-frame-deactivate', function (o, k) {
  36       o.fadeOut(250, function () { k(o)});
  37       });
  38
  39       SWS.Presentation.setTemplate('sws-template-frame-activate', function (o, k) {
  40       o.fadeIn(250, function () { k(o) });
  41       });
  42
  43
  44
  45
  46       SWS.Presentation.init();
  47
  48     </script>
  49   </head>
  50   <body>
  51
  52     <div class="sws-slide sws-cover sws-option-nofooter">
  53       <div class="centerbox">
  54         <h1>SimpleWebSlides</h1>
  55         <h1>An <em>HTML</em><img style="height:28pt"
  56              src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" alt="5"/>
  57           Presentation framework</h1>
  58         <a href="mailto:kim@nguyen.vg">kim@nguyen.vg</a>
  59       </div>
  60     </div>
  61
  62
  63     <h1>Introduction</h1>
  64
  65     <div class="sws-slide" >
  66       <h1>What is it?</h1>
  67       <em>SimpleWebSlides</em> is simple tool that allows
  68       you to build funky presentations:
  69       <ul>
  70         <li class="sws-pause" >Write your presentations in (X)HTML5!</li>
  71         <li class="sws-pause" >Theme to your <span style='font-size:larger'>❤</span>'s content with <em>CSS</em>!</li>
  72         <li  id="foo" class="sws-pause" >Create animations using Javascript &amp; jQuery!</li>
  73         <script type="text/javascript">
  74           SWS.Presentation.registerCustom(3, function (canvas) {
  75
  76           var h1 = canvas.find("h1");
  77           var old_size = h1.css('font-size');
  78           h1.animate({"font-size":"100pt" }, 300)
  79           .animate({"font-size":old_size }, 300);
  80           });
  81         </script>
  82       </ul>
  83     </div>
  84
  85   </body>
  86 </html>