diff options
Diffstat (limited to 'deck.js/samples/deck-smartsyntax.html')
| -rw-r--r-- | deck.js/samples/deck-smartsyntax.html | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/deck.js/samples/deck-smartsyntax.html b/deck.js/samples/deck-smartsyntax.html new file mode 100644 index 0000000..0fab88d --- /dev/null +++ b/deck.js/samples/deck-smartsyntax.html @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]--> +<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]--> +<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]--> +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + + <title>deck.smartsyntax.js test/demo</title> + + <meta name="description" content="deck.*.js"> + <meta name="author" content="Rémi Emonet"> + <!--meta name="viewport" content="width=1024, user-scalable=no"/--> + + <!-- Core and extension CSS files --> + <link rel="stylesheet" href="../core/deck.core.css"> + <link rel="stylesheet" href="../extensions/status/deck.status.css"> + <link rel="stylesheet" href="../extensions/hash/deck.hash.css"> + + <!-- Style theme. More available in /themes/style/ or create your own. --> + <link rel="stylesheet" href="../themes/style/neon.css"> + + <!-- Transition theme. More available in /themes/transition/ or create your own. --> + <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"--> + + <script src="../modernizr.custom.js"></script> + + <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline --> + <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> + <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script> + + <!-- Deck Core and extensions --> + <script src="../core/deck.core.js"></script> + <script src="../extensions/hash/deck.hash.js"></script> + <!--script src="../extensions/status/deck.status.js"></script---> + <script src="../extensions/fit/deck.fit.js"></script> + <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css"> + + <script src="../extensions/step/deck.step.js"></script> + <script src="../extensions/events/deck.events.js"></script> + <script src="../extensions/anim/deck.anim.js"></script> + <script src="../libs/jquerysvg/jquery.svg.min.js"></script> + <script src="../libs/jquerysvg/jquery.svganim.min.js"></script> + <script src="../extensions/svg/deck.svg.js"></script> + <script src="../libs/display-latex2.user.js"></script> + <script src="../extensions/simplemath/deck.simplemath.js"></script> + + <script src="../extensions/smartsyntax/deck.smartsyntax.js"></script> + + + <style type="text/css"> + .deck-container>.slide {border: 1px dashed #333;} /* for the demo */ + .slide ul ul {margin-bottom: 0.25em;} /* remove some big spacing with neon nested lists */ + .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */ + .slide h1 {font-size: 3em;} + .slide h1 b {color: #0F0;} + .slide h1 em {color: #445; text-shadow: none; font-size: .3em;} + .slide h1 em {color: #445; text-shadow: none; font-size: .3em; display: inline-block;} + .slide .smaller {text-shadow: none; font-size: .8em;} + + .slide b {color: blue;} + .slide .highlight {color: red;} + .funny b {color: chartreuse} + .svgThatFloatsRight {float: right} + + .slide .floatright {float:right;} + .slide div.svgitem {display: inline-block; vertical-align: middle;} + </style> + </head> + +<!-- for the demo, the body is not the container so it can be resized by the user --> +<body> +<svg id="svg-image-blur"> + <filter id="blur-effect-1"> + <feGaussianBlur stdDeviation="5" /> + </filter> +</svg> + +This page surely has a purpose.<br/> +Use left/right arrow keys to browse the presentation.<br/> + +<!-- for the demo, a resizeable wrapper around the container --> +<div class="deck-container"> + +<section class="smart"> + ==Getting started with deck.js:<br/><b>smartsyntax</b> extension<br/><em>use right arrow to move on</em>==#title-slide + + =SmartSynt. ≃ Wiki Synt.= + * Easy bullet points (numbered or not) + * To learn smart syntax + ** Go through the current presentation<br/>to get an idea of what is possible + ** View the source of this page (Ctrl+U) + + =SmartSynt. ≃ Wiki++= + * Easy class additions + *# on the slide itself (see next one) + *# on a bullet point (like this one who has a 'highlight' class)[highlight] + * Allow tags e.g. <b>this is inside a <b> tag</b> + * NB + ** <b> (bold) is styled in blue + ** 'highlight' class is styled in red + + =Styled Slide=[funny] + * In the "smart syntax" source + ** this slide has the custom 'funny' class + * In the css of this page + ** <b> tags within a 'funny' are styled in chartreuse (green) + ** (with <tt>.funny b {color: chartreuse}</tt>) + * and an example: <b>chartreuse is great!</b>, (<a href="http://duckduckgo.com/?q=chartreuse">learn more on chartreuse</a>) + + =Deck.js Friendly= + * Friend with deck.js + ** creation of slides (<tt><section></tt> with a <tt>slide</tt> class) + * Friend with the theme conventions + ** title slides with a <tt><h1></tt> (using "<tt>==....==</tt>") + ** normal slides with a <tt><h2></tt> (using "<tt>=....=</tt>") + + =Deck.*.js Friendly= + @svg: svgThatFloatsRight smiley.svg 150px 150px + * Friend with some deck.js extensions + ** SVG inclusion <br/>(smiley from <a href="http://openclipart.org/detail/77641/smiley-face-by-inky2010">inky2010</a>) + ** Latex maths using a pair of $$ signs + *** $E = mc^2$ + *** $c = \sqrt{a^2+b^2}$ + *** (use two consecutive dollar signs to output a dollar)[smaller] + ** more on next slide + + =Animations Friendly= + * Progressive display: use the <tt>slide</tt> class + * This has both <tt>slide</tt> and <tt>highlight</tt> classes[slide][highlight] + * Next: more things[slide] + @svg: svg,floatright smiley.svg 150px 300px + <video class="myvid" style="float:left" src="simple.ogv" height="200" width="200" onclick="this.paused ? this.play() : this.pause()" controls="true"></video> + + @anim-appear:800: #bottom | #left + #right | .svg #reflect + -#bottom | @#zoom | @#far | #bottom + @anim-play: .myvid + @anim-pause: video + @anim-attribute:400: h2: font-size: .75em + @anim-attribute:400: h2: font-size: 2.5em +</section> + +<!-- we can make stop the smartsyntax section and start another afterwards --> +<section class="slide"> + <h2>Browser support</h2> + <ul> + <li>Should be ok</li> + </ul> +</section> + +<section class="smart"> + =Additional Notes= + * Case insensitive… <tt><span class="s1">@ANIM-…</span> ≡ <span class="s2">@aNiM-…</span> ≡ <span class="s3">@anim-…</span></tt> + @ANIM-APPEAR:600: .s1 + @aNiM-aPPear:600: .s2 + @anim-appear:600: .s3 + * No compilation phase[slide] + ** interpreted at loading time + ** faster development + * Backward compatible with old version[slide] + +</section> + +<!-- DEMO: smartsyntax --> + +<!-- deck.navigation snippet --> +<!--a href="#" class="deck-prev-link" title="Previous">←</a> +<a href="#" class="deck-next-link" title="Next">→</a--> + +<!-- deck.status snippet --> +<!--p class="deck-status"> + <span class="deck-status-current"></span> + / + <span class="deck-status-total"></span> +</p--> + +<!-- deck.hash snippet --> +<a href="." title="Permalink to this slide" class="deck-permalink">#</a> + +<!-- Initialize the deck --> +<script> +$(function() { + $.deck('.slide', { + // fitMarginX:100, fitMarginY:100, + // fitMode: "stretched" //"center middle" //"bottom right" //"top left" + }); +}); +</script> +</div> +</body> +</html> |