1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<!-- PROVIDE METADATA -->
<!-- ================ -->
<title>ZZZZ A Deck.js Presentation</title>
<meta name="author" content="ZZZZ Author">
<!-- Required stylesheet -->
<link rel="stylesheet" href="deck.js/core/deck.core.css">
<!-- Style theme. More available in deck.js/themes/style/ or create your own. -->
<link rel="stylesheet" href="deck.js/themes/style/web-2.0.css">
<!-- Transition, for your audience, use it only for short presentations, see deck.js/themes/transition -->
<!--link rel="stylesheet" href="deck.js/themes/transition/****.css"-->
<!-- Required Modernizr file -->
<script src="deck.js/modernizr.custom.js"></script>
<!-- Required JS files. -->
<script src="deck.js/jquery-1.7.2.min.js"></script>
<script src="deck.js/core/deck.core.js"></script>
<!-- PROVIDE EXTENSIONS: JS and CSS files -->
<!-- ============================ -->
<!-- proper slide scaling (type 's' to disable) -->
<script src="deck.js/extensions/fit/deck.fit.js"></script>
<link rel="stylesheet" href="deck.js/extensions/fit/deck.fit-fs.css"> <!-- fit to window -->
<!-- animations, svg etc (better to include it after the 'status' extension... so see below) -->
<!-- math equations -->
<script src="deck.js/libs/display-latex2.user.js"></script>
<script src="deck.js/extensions/simplemath/deck.simplemath.js"></script>
<!-- smart syntax -->
<script src="deck.js/extensions/smartsyntax/deck.smartsyntax.js"></script>
<!-- clone by typing 'c' (popups a slave presentation) (uses "clone snippet" at the end of the page) -->
<script src="deck.js/extensions/clone/deck.clone.js"></script>
<!-- goto by typing 'g' (uses "goto snippet" at the end of the page) -->
<link rel="stylesheet" href="deck.js/extensions/goto/deck.goto.css">
<script src="deck.js/extensions/goto/deck.goto.js"></script>
<!-- slide number indicator (uses "status snippet" at the end of the page) -->
<link rel="stylesheet" href="deck.js/extensions/status/deck.status.css">
<script src="deck.js/extensions/status/deck.status.js"></script>
<!-- navigation buttons (uses "navigation snippet" at the end of the page) -->
<link rel="stylesheet" href="deck.js/extensions/navigation/deck.navigation.css">
<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
<!-- slide selector by typing 'm' -->
<script src="deck.js/extensions/menu/deck.menu.js"></script>
<link rel="stylesheet" href="deck.js/extensions/menu/deck.menu.css">
<!-- permalink (uses "hash snippet" at the end of the page) -->
<link rel="stylesheet" href="deck.js/extensions/hash/deck.hash.css">
<script src="deck.js/extensions/hash/deck.hash.js"></script>
<!-- animations, svg etc (better to include it after the 'status' extension (to avoid huge fake slide numbers) -->
<script src="deck.js/extensions/step/deck.step.js"></script>
<script src="deck.js/extensions/events/deck.events.js"></script>
<script src="deck.js/extensions/anim/deck.anim.js"></script>
<script src="deck.js/libs/jquerysvg/jquery.svg.min.js"></script>
<script src="deck.js/libs/jquerysvg/jquery.svganim.min.js"></script>
<script src="deck.js/extensions/svg/deck.svg.js"></script>
<!-- Deck.js options (advanced) -->
<script>$(function() {$.deck('.slide', {
// fitMarginX:100, fitMarginY:100, // uncomment to tune margin
// fitMode: "stretched", // uncomment to strech
dummy:""
});});
</script>
<!-- override some style here if needed (or in an external file) -->
<style type="text/css">
/* example */ .slide b {color: blue;}
/* example */ .deck-container > .slide {border: 1px solid green;}
/* example */ body.has-clones .deck-container {background: lightslategrey;}
/* example */ .deck-container .title-slide {border: 1px solid red; font-size: 70%}
</style>
</head>
<body>
This text should not be displayed if everything goes well: use left/right arrow keys to browse the presentation.<br/>
<div class="deck-container">
<!-- this presentation uses smart syntax -->
<section class="smart">
==New Presentation With deck.js and Extensions==[title-slide]
=Hello=
* Hi, .....
* Todo
** Write you presentation
** <b>Rehearse a little</b>
* See also
** <a href="http://home.heeere.com/tech-deckjs-ext.html">online samples</a>
** <a href="deck.js/samples">local samples</a>
==Thank you for your attention==[end-slide]
</section>
<!-- end of the presentation -->
<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<!-- deck.status snippet -->
<p class="deck-status">
footer −
<span class="deck-status-current"></span>
/
<span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
<label for="goto-slide">Go to slide:</label>
<input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
<datalist id="goto-datalist"></datalist>
<input type="submit" value="Go">
</form>
<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<!-- deck.clone snippet: simple red box with top-left corner as cursor position -->
<div class="clonepointer" style="position:absolute; width:20px; height:20px; background:red; z-index:10"></div>
<!-- deck.clone snippet: simple green box with center as cursor position -->
<div class="clonepointer" style="position:absolute; z-index:11"><div style="margin: -13px 0 0 -13px; width:18px; height:18px; border:4px solid green;"></div></div>
</div> <!-- end of deck container -->
</body>
</html>
|
