forked from impress/impress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.tt
111 lines (91 loc) · 3.8 KB
/
index.tt
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>25 Years of Perl</title>
<meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
<meta name="author" content="Dave Cross" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>
<div id="impress">
<div id="header" class="step slide" data-x="0" data-y="-5850" data-scale="15">
<h1>25 Years<br />of Perl</h1>
<h2>(In about 25 minutes)</h2>
<p class="center credits">Dave Cross <[email protected]></p>
</div>
[% FOR year IN years;
SET x_offset = get_x_offset(year);
SET y_offset = get_y_offset(year) -%]
<div class="step slide" id="[% year %]" data-x="[% -5040 + x_offset %]" data-y="[% 1560 + y_offset %]" data-scale="2">
<p class="center"><img src="[% year %].jpg" /></p>
<p class="year">[% disp_year(year) %]</p>
</div>
<div class="step slide" id="[% year %]-news" data-x="[% -6480 + x_offset %]" data-y="[% 390 + y_offset %]" data-scale="1">
<q>[% disp_year(year) %]</q>
<p class="center">[% headlines.$year %]</p>
</div>
<div class="step slide" id="[% year %]-rel" data-x="[% -5520 + x_offset %]" data-y="[% 390 + y_offset %]" data-scale="1">
<q>[% disp_year(year) %] Releases</q>
[% IF releases.$year -%]
<ul class="small">
[% FOREACH rel IN releases.$year -%]
<li>[% rel %]</li>
[% END -%]
</ul>
[% ELSE -%]
<p>No releases in [% year %]</p>
[% END -%]
</div>
<div class="step slide" id="[% year %]-conf" data-x="[% -4560 + x_offset %]" data-y="[% 390 + y_offset %]" data-scale="1">
<q>[% disp_year(year) %] Community</q>
<ul>
[% FOREACH comm IN community.$year -%]
<li>[% comm %]</li>
[% END -%]
</ul>
</div>
<div class="step slide" id="[% year %]-book" data-x="[% -6480 + x_offset %]" data-y="[% 1170 + y_offset %]" data-scale="1">
<q>[% disp_year(year) %] Technical</q>
<ul>
[% FOREACH t IN tech.$year -%]
<li>[% t %]</li>
[% END -%]
</ul>
</div>
<div class="step slide" id="[% year %]-stuff" data-x="[% -6480 + x_offset %]" data-y="[% 1950 + y_offset %]" data-scale="1">
<q>[% disp_year(year) %] Books</q>
<ul class="small">
[% FOREACH book IN books.$year -%]
<li>[% book %]</li>
[% END -%]
</ul>
</div>
[% END %]
<div class="step" id="overview" data-x="0" data-y="5850" data-scale="15">
</div>
<div class="step" id="thankyou" data-x="0" data-y="5850" data-scale="15">
<p id="thanks">Thank you</p>
</div>
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>