-
Notifications
You must be signed in to change notification settings - Fork 1
/
Presenter.html
117 lines (107 loc) · 2.25 KB
/
Presenter.html
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
<html>
<head>
<title>Percona toolkit tutorial - PLNY 2012</title>
<style>
html, body {
margin:0;
border:0;
padding:0;
font-family: helvetica;
color: white;
}
div.centered {
margin:auto;
font-size:40px;
width:20em; /* So we get about 10 words per line */
}
.slideCount {
position: absolute;
bottom: 1em;
right: 1em;
}
td {
font-size:25px;
}
/* My styling here */
code {
font-size:25;
}
body {
background: #223;
background: -webkit-gradient(linear, left top, left bottom, from(#334), to(#112));
background: -moz-linear-gradient(top, #334, #112);
text-shadow: #000 0 -2px 0;
}
.bg {
background-image: url(bg.jpg);
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
opacity:0.01;
}
.warning {
color:red;
}
.highlight {
color:green;
}
/* End styling */
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="showdown.js"></script>
</head>
<body>
<div class="bg"> </div>
<table style="width:100%;height:100%;border-collapse:collapse">
<tr valign=center>
<td>
<div class='centered'>
<em>Loading</em>
</div>
</td>
</tr>
</table>
<div class='slideCount'>Slide X of Y</div>
</body>
</html>
<script>
var Present = {};
Present.converter = new Showdown.converter();
Present.showSlide = function(slide) {
Present.currentSlide = slide;
$('.centered').html(Present.slides[Present.currentSlide]);
$('.slideCount').html('Slide ' + (Present.currentSlide+1) + ' of ' + Present.slides.length);
};
Present.nextSlide = function() {
if (Present.currentSlide < Present.slides.length-1) {
Present.showSlide(Present.currentSlide+1);
}
};
Present.prevSlide = function() {
if (Present.currentSlide > 0) {
Present.showSlide(Present.currentSlide-1);
}
};
$.ajax({
url: 'presentation.md',
success: function(data) {
if (data.length>0) {
var converted = Present.converter.makeHtml(data);
Present.slides = converted.split('<p>!</p>');
Present.showSlide(0);
}
}
});
$(document).keydown(function(e){
if (e.keyCode == 37) {
Present.prevSlide();
return false;
}
if (e.keyCode == 39) {
Present.nextSlide();
return false;
}
});
</script>