summaryrefslogtreecommitdiff
path: root/deck.js/samples/deck-smartsyntax.html
diff options
context:
space:
mode:
authorChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
committerChristian Franke <nobody@nowhere.ws>2013-04-09 14:31:22 +0200
commit5a774ef6f3b38b19b26913a34b1388530c72334e (patch)
tree543127427771d75f652fc9e726cc39aa1a72571c /deck.js/samples/deck-smartsyntax.html
Initial Commit
Diffstat (limited to 'deck.js/samples/deck-smartsyntax.html')
-rw-r--r--deck.js/samples/deck-smartsyntax.html191
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 &lt;b> tag</b>
+ * NB
+ ** &lt;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
+ ** &lt;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>&lt;section></tt> with a <tt>slide</tt> class)
+ * Friend with the theme conventions
+ ** title slides with a <tt>&lt;h1></tt> (using "<tt>==....==</tt>")
+ ** normal slides with a <tt>&lt;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">&#8592;</a>
+<a href="#" class="deck-next-link" title="Next">&#8594;</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>