deckrb 0.1.1 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (78) hide show
  1. data/README.md +84 -25
  2. data/bin/deck +3 -4
  3. data/lib/deck/rack_app.rb +39 -7
  4. data/lib/deck/slide.rb +9 -2
  5. data/lib/deck/slide_deck.rb +10 -13
  6. data/lib/deck/version.rb +1 -1
  7. data/public/coderay.css +84 -0
  8. data/public/deck.js/GPL-license.txt +278 -0
  9. data/public/deck.js/MIT-license.txt +21 -0
  10. data/public/deck.js/README.md +57 -0
  11. data/public/deck.js/core/deck.core.css +404 -0
  12. data/public/deck.js/core/deck.core.html +39 -0
  13. data/public/deck.js/core/deck.core.js +498 -0
  14. data/public/deck.js/core/deck.core.scss +447 -0
  15. data/public/deck.js/extensions/goto/deck.goto.css +41 -0
  16. data/public/deck.js/extensions/goto/deck.goto.html +7 -0
  17. data/public/deck.js/extensions/goto/deck.goto.js +134 -0
  18. data/public/deck.js/extensions/goto/deck.goto.scss +46 -0
  19. data/public/deck.js/extensions/hash/deck.hash.css +13 -0
  20. data/public/deck.js/extensions/hash/deck.hash.html +2 -0
  21. data/public/deck.js/extensions/hash/deck.hash.js +129 -0
  22. data/public/deck.js/extensions/hash/deck.hash.scss +15 -0
  23. data/public/deck.js/extensions/menu/deck.menu.css +47 -0
  24. data/public/deck.js/extensions/menu/deck.menu.js +187 -0
  25. data/public/deck.js/extensions/menu/deck.menu.scss +58 -0
  26. data/public/deck.js/extensions/navigation/deck.navigation.css +43 -0
  27. data/public/deck.js/extensions/navigation/deck.navigation.html +3 -0
  28. data/public/deck.js/extensions/navigation/deck.navigation.js +91 -0
  29. data/public/deck.js/extensions/navigation/deck.navigation.scss +56 -0
  30. data/public/deck.js/extensions/scale/deck.scale.css +16 -0
  31. data/public/deck.js/extensions/scale/deck.scale.js +156 -0
  32. data/public/deck.js/extensions/scale/deck.scale.scss +17 -0
  33. data/public/deck.js/extensions/status/deck.status.css +18 -0
  34. data/public/deck.js/extensions/status/deck.status.html +6 -0
  35. data/public/deck.js/extensions/status/deck.status.js +95 -0
  36. data/public/deck.js/extensions/status/deck.status.scss +22 -0
  37. data/public/deck.js/extensions/theme-picker/deck.theme-picker.css +55 -0
  38. data/public/deck.js/extensions/theme-picker/deck.theme-picker.js +13 -0
  39. data/public/deck.js/introduction/index.html +221 -0
  40. data/public/deck.js/introduction/index.rb +101 -0
  41. data/public/deck.js/jquery-1.7.min.js +4 -0
  42. data/public/deck.js/modernizr.custom.js +4 -0
  43. data/public/deck.js/test/fixtures/complex.html +24 -0
  44. data/public/deck.js/test/fixtures/empty.html +19 -0
  45. data/public/deck.js/test/fixtures/iframe_simple.html +10 -0
  46. data/public/deck.js/test/fixtures/iframes.html +32 -0
  47. data/public/deck.js/test/fixtures/nesteds.html +36 -0
  48. data/public/deck.js/test/fixtures/standard.html +42 -0
  49. data/public/deck.js/test/index.html +39 -0
  50. data/public/deck.js/test/lib/jasmine-html.js +190 -0
  51. data/public/deck.js/test/lib/jasmine-jquery.js +288 -0
  52. data/public/deck.js/test/lib/jasmine.css +166 -0
  53. data/public/deck.js/test/lib/jasmine.js +2477 -0
  54. data/public/deck.js/test/settings.js +3 -0
  55. data/public/deck.js/test/spec.core.js +434 -0
  56. data/public/deck.js/test/spec.goto.js +119 -0
  57. data/public/deck.js/test/spec.hash.js +81 -0
  58. data/public/deck.js/test/spec.menu.js +66 -0
  59. data/public/deck.js/test/spec.navigation.js +51 -0
  60. data/public/deck.js/test/spec.scale.js +57 -0
  61. data/public/deck.js/test/spec.status.js +58 -0
  62. data/public/deck.js/themes/style/neon.css +114 -0
  63. data/public/deck.js/themes/style/neon.scss +139 -0
  64. data/public/deck.js/themes/style/swiss.css +75 -0
  65. data/public/deck.js/themes/style/swiss.scss +91 -0
  66. data/public/deck.js/themes/style/web-2.0.css +205 -0
  67. data/public/deck.js/themes/style/web-2.0.scss +236 -0
  68. data/public/deck.js/themes/transition/fade.css +44 -0
  69. data/public/deck.js/themes/transition/fade.scss +70 -0
  70. data/public/deck.js/themes/transition/horizontal-slide.css +79 -0
  71. data/public/deck.js/themes/transition/horizontal-slide.scss +94 -0
  72. data/public/deck.js/themes/transition/vertical-slide.css +97 -0
  73. data/public/deck.js/themes/transition/vertical-slide.scss +116 -0
  74. data/public/favicon.ico +0 -0
  75. data/spec/rack_app_spec.rb +101 -33
  76. data/spec/slide_deck_spec.rb +6 -7
  77. data/spec/slide_spec.rb +19 -0
  78. metadata +95 -16
@@ -0,0 +1,18 @@
1
+ .deck-container .deck-status {
2
+ position: absolute;
3
+ bottom: 10px;
4
+ right: 5px;
5
+ color: #888;
6
+ z-index: 3;
7
+ margin: 0;
8
+ }
9
+
10
+ body.deck-container .deck-status {
11
+ position: fixed;
12
+ }
13
+
14
+ @media print {
15
+ .deck-status {
16
+ display: none;
17
+ }
18
+ }
@@ -0,0 +1,6 @@
1
+ <!-- Place the following snippet at the bottom of the deck container. -->
2
+ <p class="deck-status">
3
+ <span class="deck-status-current"></span>
4
+ /
5
+ <span class="deck-status-total"></span>
6
+ </p>
@@ -0,0 +1,95 @@
1
+ /*!
2
+ Deck JS - deck.status
3
+ Copyright (c) 2011 Caleb Troughton
4
+ Dual licensed under the MIT license and GPL license.
5
+ https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
6
+ https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
7
+ */
8
+
9
+ /*
10
+ This module adds a (current)/(total) style status indicator to the deck.
11
+ */
12
+ (function($, deck, undefined) {
13
+ var $d = $(document),
14
+
15
+ updateCurrent = function(e, from, to) {
16
+ var opts = $[deck]('getOptions');
17
+
18
+ $(opts.selectors.statusCurrent).text(opts.countNested ?
19
+ to + 1 :
20
+ $[deck]('getSlide', to).data('rootSlide')
21
+ );
22
+ };
23
+
24
+ /*
25
+ Extends defaults/options.
26
+
27
+ options.selectors.statusCurrent
28
+ The element matching this selector displays the current slide number.
29
+
30
+ options.selectors.statusTotal
31
+ The element matching this selector displays the total number of slides.
32
+
33
+ options.countNested
34
+ If false, only top level slides will be counted in the current and
35
+ total numbers.
36
+ */
37
+ $.extend(true, $[deck].defaults, {
38
+ selectors: {
39
+ statusCurrent: '.deck-status-current',
40
+ statusTotal: '.deck-status-total'
41
+ },
42
+
43
+ countNested: true
44
+ });
45
+
46
+ $d.bind('deck.init', function() {
47
+ var opts = $[deck]('getOptions'),
48
+ slides = $[deck]('getSlides'),
49
+ $current = $[deck]('getSlide'),
50
+ ndx;
51
+
52
+ // Set total slides once
53
+ if (opts.countNested) {
54
+ $(opts.selectors.statusTotal).text(slides.length);
55
+ }
56
+ else {
57
+ /* Determine root slides by checking each slide's ancestor tree for
58
+ any of the slide classes. */
59
+ var rootIndex = 1,
60
+ slideTest = $.map([
61
+ opts.classes.before,
62
+ opts.classes.previous,
63
+ opts.classes.current,
64
+ opts.classes.next,
65
+ opts.classes.after
66
+ ], function(el, i) {
67
+ return '.' + el;
68
+ }).join(', ');
69
+
70
+ /* Store the 'real' root slide number for use during slide changes. */
71
+ $.each(slides, function(i, $el) {
72
+ var $parentSlides = $el.parentsUntil(opts.selectors.container, slideTest);
73
+
74
+ $el.data('rootSlide', $parentSlides.length ?
75
+ $parentSlides.last().data('rootSlide') :
76
+ rootIndex++
77
+ );
78
+ });
79
+
80
+ $(opts.selectors.statusTotal).text(rootIndex - 1);
81
+ }
82
+
83
+ // Find where we started in the deck and set initial state
84
+ $.each(slides, function(i, $el) {
85
+ if ($el === $current) {
86
+ ndx = i;
87
+ return false;
88
+ }
89
+ });
90
+ updateCurrent(null, ndx, ndx);
91
+ })
92
+ /* Update current slide number with each change event */
93
+ .bind('deck.change', updateCurrent);
94
+ })(jQuery, 'deck');
95
+
@@ -0,0 +1,22 @@
1
+ .deck-container {
2
+ .deck-status {
3
+ position:absolute;
4
+ bottom:10px;
5
+ right:5px;
6
+ color:#888;
7
+ z-index:3;
8
+ margin:0;
9
+ }
10
+ }
11
+
12
+ body.deck-container {
13
+ .deck-status {
14
+ position:fixed;
15
+ }
16
+ }
17
+
18
+ @media print {
19
+ .deck-status {
20
+ display:none;
21
+ }
22
+ }
@@ -0,0 +1,55 @@
1
+ .deck-container .theme-picker {
2
+ display: none;
3
+ position: fixed;
4
+ z-index: 3;
5
+ top: 4px;
6
+ right: 10px;
7
+ height: 16px;
8
+ line-height: 20px;
9
+ padding: 5px;
10
+ border: 1px solid #ddd;
11
+ -webkit-border-radius: 5px;
12
+ -moz-border-radius: 5px;
13
+ border-radius: 5px;
14
+ overflow: hidden;
15
+ background: #fff;
16
+ font-family: sans-serif;
17
+ color: #888;
18
+ }
19
+ .js .deck-container .theme-picker {
20
+ display: block;
21
+ }
22
+ .deck-container .theme-picker h2 {
23
+ float: left;
24
+ font-size: 12px;
25
+ border: 0;
26
+ padding: 5px 10px;
27
+ margin: 0;
28
+ height: 20px;
29
+ position: relative;
30
+ top: -5px;
31
+ left: -5px;
32
+ background: #ccc;
33
+ color: #444;
34
+ text-shadow: none;
35
+ font-family: sans-serif;
36
+ font-weight: bold;
37
+ }
38
+ .deck-container .theme-picker label {
39
+ float: left;
40
+ display: block;
41
+ font-size: 12px;
42
+ vertical-align: baseline;
43
+ margin: 0 4px 0 15px;
44
+ }
45
+ .deck-container .theme-picker select {
46
+ float: left;
47
+ display: block;
48
+ font-size: 14px;
49
+ }
50
+
51
+ @media print {
52
+ .theme-picker {
53
+ display: none !important;
54
+ }
55
+ }
@@ -0,0 +1,13 @@
1
+ $(function() {
2
+
3
+ $('.deck-container').prepend('<div class="theme-picker"><h2>Themes</h2><label for="style-themes">Style:</label><select id="style-themes"><option selected="selected" value="deck.js/themes/style/web-2.0.css">Web 2.0</option><option value="deck.js/themes/style/swiss.css">Swiss</option><option value="deck.js/themes/style/neon.css">Neon</option><option value="">None</option></select><label for="transition-themes">Transition:</label><select id="transition-themes"><option value="deck.js/themes/transition/horizontal-slide.css">Horizontal Slide</option><option value="deck.js/themes/transition/vertical-slide.css">Vertical Slide</option><option value="deck.js/themes/transition/fade.css">Fade</option><option selected="selected" value="">None</option></select></div>');
4
+
5
+ $('#style-themes').change(function() {
6
+ $('#style-theme-link').attr('href', $(this).val());
7
+ });
8
+
9
+ $('#transition-themes').change(function() {
10
+ $('#transition-theme-link').attr('href', $(this).val());
11
+ });
12
+ });
13
+
@@ -0,0 +1,221 @@
1
+ <!DOCTYPE html>
2
+ <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
3
+ <!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
4
+ <!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
5
+ <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6
+ <head>
7
+ <meta charset="utf-8">
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
+
10
+ <title>Getting Started with deck.js</title>
11
+
12
+ <meta name="description" content="A jQuery library for modern HTML presentations">
13
+ <meta name="author" content="Caleb Troughton">
14
+ <meta name="viewport" content="width=1024, user-scalable=no">
15
+
16
+ <!-- Core and extension CSS files -->
17
+ <link rel="stylesheet" href="../core/deck.core.css">
18
+ <link rel="stylesheet" href="../extensions/goto/deck.goto.css">
19
+ <link rel="stylesheet" href="../extensions/menu/deck.menu.css">
20
+ <link rel="stylesheet" href="../extensions/navigation/deck.navigation.css">
21
+ <link rel="stylesheet" href="../extensions/status/deck.status.css">
22
+ <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
23
+
24
+ <!-- Theme CSS files (menu swaps these out) -->
25
+ <link rel="stylesheet" id="style-theme-link" href="../themes/style/web-2.0.css">
26
+ <link rel="stylesheet" id="transition-theme-link" href="../themes/transition/horizontal-slide.css">
27
+
28
+ <!-- Custom CSS just for this page -->
29
+ <link rel="stylesheet" href="introduction.css">
30
+
31
+ <script src="../modernizr.custom.js"></script>
32
+ </head>
33
+
34
+ <body class="deck-container">
35
+
36
+ <div class="theme-picker">
37
+ <h2>Themes</h2>
38
+
39
+ <label for="style-themes">Style:</label>
40
+ <select id="style-themes">
41
+ <option selected="selected" value="../themes/style/web-2.0.css">Web 2.0</option>
42
+ <option value="../themes/style/swiss.css">Swiss</option>
43
+ <option value="../themes/style/neon.css">Neon</option>
44
+ <option value="">None</option>
45
+ </select>
46
+
47
+ <label for="transition-themes">Transition:</label>
48
+ <select id="transition-themes">
49
+ <option selected="selected" value="../themes/transition/horizontal-slide.css">Horizontal Slide</option>
50
+ <option value="../themes/transition/vertical-slide.css">Vertical Slide</option>
51
+ <option value="../themes/transition/fade.css">Fade</option>
52
+ <option value="">None</option>
53
+ </select>
54
+ </div>
55
+
56
+ <section class="slide" id="title-slide">
57
+ <h1>Getting Started with deck.js</h1>
58
+ </section>
59
+
60
+ <section class="slide" id="how-to-overview">
61
+ <h2>How to Make a Deck</h2>
62
+ <ol>
63
+ <li>
64
+ <h3>Write Slides</h3>
65
+ <p>Slide content is simple&nbsp;HTML.</p>
66
+ </li>
67
+ <li>
68
+ <h3>Choose Themes</h3>
69
+ <p>One for slide styles and one for deck&nbsp;transitions.</p>
70
+ </li>
71
+ <li>
72
+ <h3>Include Extensions</h3>
73
+ <p>Add extra functionality to your deck, or leave it stripped&nbsp;down.</p>
74
+ </li>
75
+ </ol>
76
+ </section>
77
+
78
+ <section class="slide" id="markup">
79
+ <h2>The Markup</h2>
80
+ <p>Slides are just HTML elements with a class of <code>slide</code>.</p>
81
+ <pre><code>&lt;section class=&quot;slide&quot;&gt;
82
+ &lt;h2&gt;How to Make a Deck&lt;/h2&gt;
83
+ &lt;ol&gt;
84
+ &lt;li&gt;
85
+ &lt;h3&gt;Write Slides&lt;/h3&gt;
86
+ &lt;p&gt;Slide content is simple HTML.&lt;/p&gt;
87
+ &lt;/li&gt;
88
+ &lt;li&gt;
89
+ &lt;h3&gt;Choose Themes&lt;/h3&gt;
90
+ &lt;p&gt;One for slide styles and one for deck transitions.&lt;/p&gt;
91
+ &lt;/li&gt;
92
+ &hellip;
93
+ &lt;/ol&gt;
94
+ &lt;/section&gt;</code></pre>
95
+ </section>
96
+
97
+ <section class="slide" id="themes">
98
+ <h2>Style Themes</h2>
99
+ <p>Customizes the colors, typography, and layout of slide&nbsp;content.</p>
100
+ <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/style-theme.css&quot;&gt;</code></pre>
101
+ <h2>Transition Themes</h2>
102
+ <p>Defines transitions between slides using CSS3 transitions. Less capable browsers fall back to cutaways. But <strong>you</strong> aren&rsquo;t using <em>those</em> browsers to give your presentations, are&nbsp;you&hellip;</p>
103
+ <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/css/transition-theme.css&quot;&gt;</code></pre>
104
+ </section>
105
+
106
+ <section class="slide" id="extensions">
107
+ <h2>Extensions</h2>
108
+ <p>Core gives you basic slide functionality with left and right arrow navigation, but you may want more. Here are the ones included in this&nbsp;deck:</p>
109
+
110
+ <ul>
111
+ <li class="slide" id="extensions-goto">
112
+ <strong>deck.goto</strong>: Adds a shortcut key to jump to any slide number. Hit g, type in the slide number, and hit&nbsp;enter.
113
+ </li>
114
+
115
+ <li class="slide" id="extensions-hash">
116
+ <strong>deck.hash</strong>: Enables internal linking within slides, deep linking to individual slides, and updates the address bar &amp; a permalink anchor with each slide&nbsp;change.
117
+ </li>
118
+
119
+ <li class="slide" id="extensions-menu">
120
+ <strong>deck.menu</strong>: Adds a menu view, letting you see all slides in a grid. Hit m to toggle to menu view, continue navigating your deck, and hit m to return to normal view. Touch devices can double-tap the deck to switch between&nbsp;views.
121
+ </li>
122
+
123
+ <li class="slide" id="extensions-navigation">
124
+ <strong>deck.navigation</strong>: Adds clickable left and right buttons for the less keyboard&nbsp;inclined.
125
+ </li>
126
+
127
+ <li class="slide" id="extensions-status">
128
+ <strong>deck.status</strong>: Adds a page number indicator. (current/total)
129
+ </li>
130
+ </ul>
131
+
132
+ <p class="slide" id="extension-folders">Each extension folder in the download package contains the necessary JavaScript, CSS, and HTML&nbsp;files. For a complete list of extension modules included in deck.js, check out the&nbsp;<a href="http://imakewebthings.github.com/deck.js/docs">documentation</a>.</p>
133
+ </section>
134
+
135
+ <section class="slide" id="nested">
136
+ <h2>Nested Slides</h2>
137
+ <p>That last slide had a few steps. To create substeps in slides, just nest them:</p>
138
+ <pre><code>&lt;section class=&quot;slide&quot;&gt;
139
+ &lt;h2&gt;Extensions&lt;/h2&gt;
140
+ &lt;p&gt;Core gives you basic slide functionality...&lt;/p&gt;
141
+ &lt;ul&gt;
142
+ &lt;li class=&quot;slide&quot;&gt;
143
+ &lt;h3&gt;deck.goto&lt;/h3&gt;
144
+ &lt;p&gt;Adds a shortcut key to jump to any slide number...&lt;/p&gt;
145
+ &lt;/li&gt;
146
+ &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
147
+ &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
148
+ &lt;li class=&quot;slide&quot;&gt;...&lt;/li&gt;
149
+ &lt;/ul&gt;
150
+ &lt;/section&gt;</code></pre>
151
+ </section>
152
+
153
+ <section class="slide" id="elements-images">
154
+ <h2>Other Elements: Images</h2>
155
+ <img src="http://placekitten.com/600/375" alt="Kitties">
156
+ <pre><code>&lt;img src=&quot;http://placekitten.com/600/375&quot; alt=&quot;Kitties&quot;&gt;</code></pre>
157
+ </section>
158
+
159
+ <section class="slide" id="elements-blockquotes">
160
+ <h2>Other Elements: Blockquotes</h2>
161
+ <blockquote cite="http://example.org">
162
+ <p>Food is an important part of a balanced diet.</p>
163
+ <p><cite>Fran Lebowitz</cite></p>
164
+ </blockquote>
165
+ <pre><code>&lt;blockquote cite=&quot;http://example.org&quot;&gt;
166
+ &lt;p&gt;Food is an important part of a balanced diet.&lt;/p&gt;
167
+ &lt;p&gt;&lt;cite&gt;Fran Lebowitz&lt;/cite&gt;&lt;/p&gt;
168
+ &lt;/blockquote&gt;</code></pre>
169
+ </section>
170
+
171
+
172
+ <section class="slide" id="elements-videos">
173
+ <h2>Other Elements: Video Embeds</h2>
174
+ <p>Embed videos from your favorite online video service or with an HTML5 video&nbsp;element.</p>
175
+
176
+ <iframe src="http://player.vimeo.com/video/1063136?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
177
+
178
+ <pre><code>&lt;iframe src=&quot;http://player.vimeo.com/video/1063136?title=0&amp;amp;byline=0&amp;amp;portrait=0&quot; width=&quot;400&quot; height=&quot;225&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;</code></pre>
179
+ </section>
180
+
181
+ <section class="slide" id="digging-deeper">
182
+ <h2>Digging Deeper</h2>
183
+ <p>If you want to learn about making your own themes, extending deck.js, and more, check out the&nbsp;<a href="../docs/">documentation</a>.</p>
184
+ </section>
185
+
186
+ <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
187
+ <a href="#" class="deck-next-link" title="Next">&#8594;</a>
188
+
189
+ <p class="deck-status">
190
+ <span class="deck-status-current"></span>
191
+ /
192
+ <span class="deck-status-total"></span>
193
+ </p>
194
+
195
+ <form action="." method="get" class="goto-form">
196
+ <label for="goto-slide">Go to slide:</label>
197
+ <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
198
+ <datalist id="goto-datalist"></datalist>
199
+ <input type="submit" value="Go">
200
+ </form>
201
+
202
+ <a href="." title="Permalink to this slide" class="deck-permalink">#</a>
203
+
204
+
205
+ <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
206
+ <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
207
+ <script>window.jQuery || document.write('<script src="../jquery-1.7.min.js"><\/script>')</script>
208
+
209
+ <!-- Deck Core and extensions -->
210
+ <script src="../core/deck.core.js"></script>
211
+ <script src="../extensions/hash/deck.hash.js"></script>
212
+ <script src="../extensions/menu/deck.menu.js"></script>
213
+ <script src="../extensions/goto/deck.goto.js"></script>
214
+ <script src="../extensions/status/deck.status.js"></script>
215
+ <script src="../extensions/navigation/deck.navigation.js"></script>
216
+
217
+ <!-- Specific to this page -->
218
+ <script src="introduction.js"></script>
219
+
220
+ </body>
221
+ </html>
@@ -0,0 +1,101 @@
1
+ class Index < Erector::Widget
2
+ def content
3
+ rawtext '<!DOCTYPE html>'
4
+ rawtext '<!--[if lt IE 7]>'
5
+ html :class => 'no-js ie6', :lang => 'en' do
6
+ rawtext '<![endif]-->'
7
+ rawtext '<!--[if IE 7]>'
8
+ html :class => 'no-js ie7', :lang => 'en' do
9
+ rawtext '<![endif]-->'
10
+ rawtext '<!--[if IE 8]>'
11
+ html :class => 'no-js ie8', :lang => 'en' do
12
+ rawtext '<![endif]-->'
13
+ rawtext '<!--[if gt IE 8]>'
14
+ rawtext '<!-->'
15
+ html :class => 'no-js', :lang => 'en' do
16
+ rawtext '<!--<![endif]-->'
17
+ head do
18
+ meta :charset => 'utf-8' do
19
+ meta 'http-equiv' => 'X-UA-Compatible', :content => 'IE=edge,chrome=1' do
20
+ title do
21
+ text 'Getting Started with deck.js'
22
+ end
23
+ meta :name => 'description', :content => 'A jQuery library for modern HTML presentations' do
24
+ meta :name => 'author', :content => 'Caleb Troughton' do
25
+ meta :name => 'viewport', :content => 'width=1024, user-scalable=no' do
26
+ rawtext '<!-- Core and extension CSS files -->'
27
+ link :rel => 'stylesheet', :href => '../core/deck.core.css' do
28
+ link :rel => 'stylesheet', :href => '../extensions/goto/deck.goto.css' do
29
+ link :rel => 'stylesheet', :href => '../extensions/menu/deck.menu.css' do
30
+ link :rel => 'stylesheet', :href => '../extensions/navigation/deck.navigation.css' do
31
+ link :rel => 'stylesheet', :href => '../extensions/status/deck.status.css' do
32
+ link :rel => 'stylesheet', :href => '../extensions/hash/deck.hash.css' do
33
+ rawtext '<!-- Theme CSS files (menu swaps these out) -->'
34
+ link :rel => 'stylesheet', :id => 'style-theme-link', :href => '../themes/style/web-2.0.css' do
35
+ link :rel => 'stylesheet', :id => 'transition-theme-link', :href => '../themes/transition/horizontal-slide.css' do
36
+ rawtext '<!-- Custom CSS just for this page -->'
37
+ link :rel => 'stylesheet', :href => 'introduction.css' do
38
+ script :src => '../modernizr.custom.js' do
39
+ end
40
+ end
41
+ body :class => 'deck-container' do
42
+ section :class => 'slide', :id => 'title-slide' do
43
+ h1 do
44
+ text 'Getting Started with deck.js'
45
+ end
46
+ end
47
+ a :href => '#', :class => 'deck-prev-link', :title => 'Previous' do
48
+ text '←'
49
+ end
50
+ a :href => '#', :class => 'deck-next-link', :title => 'Next' do
51
+ text '→'
52
+ end
53
+ p :class => 'deck-status' do
54
+ span :class => 'deck-status-current' do
55
+ end
56
+ text '/'
57
+ span :class => 'deck-status-total' do
58
+ end
59
+ end
60
+ form :action => '.', :method => 'get', :class => 'goto-form' do
61
+ label :for => 'goto-slide' do
62
+ text 'Go to slide:'
63
+ end
64
+ input :type => 'text', :name => 'slidenum', :id => 'goto-slide', :list => 'goto-datalist' do
65
+ datalist :id => 'goto-datalist' do
66
+ end
67
+ input :type => 'submit', :value => 'Go' do
68
+ end
69
+
70
+
71
+ a :href => '.', :title => 'Permalink to this slide', :class => 'deck-permalink' do
72
+ text '#'
73
+ end
74
+ rawtext '<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->'
75
+ script :src => '//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js' do
76
+ end
77
+ script do
78
+ text 'window.jQuery || document.write(\''
79
+ script :src => '../jquery-1.7.min.js' do
80
+ text '<\/script>\')'
81
+ end
82
+ rawtext '<!-- Deck Core and extensions -->'
83
+ script :src => '../core/deck.core.js' do
84
+ end
85
+ script :src => '../extensions/hash/deck.hash.js' do
86
+ end
87
+ script :src => '../extensions/menu/deck.menu.js' do
88
+ end
89
+ script :src => '../extensions/goto/deck.goto.js' do
90
+ end
91
+ script :src => '../extensions/status/deck.status.js' do
92
+ end
93
+ script :src => '../extensions/navigation/deck.navigation.js' do
94
+ end
95
+ rawtext '<!-- Specific to this page -->'
96
+ script :src => 'introduction.js' do
97
+ end
98
+ end
99
+ end
100
+ end
101
+ end