forked from impress/impress.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (74 loc) · 4.45 KB
/
index.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
<!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>TODO</title>
<meta name="description" content="TODO" />
<meta name="author" content="Derek VerLee" />
<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/fp-talk.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="curtain-card" class="step slide" data-x="-1000" data-y="-1500">
<h1>Functional Values</h1>
<h2>... for your modern lifestyle</h2>
</div>
<div class="step" data-x="0" data-y="-1500" data-scale="0.15" data-rotate-x="90">
<div class="quote-too-long">
<p>In computer science, functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It is a declarative programming paradigm, which means programming is done with expressions. In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function f twice with the same value for an argument x will produce the same result f(x) each time. Eliminating side effects, i.e. changes in state that do not depend on the function inputs, can make it much easier to understand and predict the behavior of a program, which is one of the key motivations for the development of functional programming.</p>
<div>- Wikipedia</div>
</div>
</div>
<div class="step" data-x="50" data-y="-1500" data-scale="0.15">
<div><q>tl;dr</q></div>
</div>
<div class="step" data-x="0" data-y="-1450" data-scale="0.30">
<p>it's not about paradigms...</p>
</div>
<div class="step" data-x="50" data-y="-1375" data-scale="0.35">
<p>it's about learning powerful new ways to think and understand</p>
</div>
<div class="step" data-x="100" data-y="-1275" data-scale="0.45">
<p>to compose</p>
<p>and to build <sup>*</sup></p>
</div>
<div class="step" data-x="50" data-y="-1230" data-scale="0.15">
<div><sup>*</sup>(the same thing, right?)</div>
</div>
<!--
TODO -- move to file as per suggestion below..
Hint is not related to impress.js in any way.
When the presentation step is shown (selected) its element gets the class of "active" and the body element
gets the class based on active step id `impress-on-ID` (where ID is the step's id)... It may not be
so clear because of all these "ids" in previous sentence, so for example when the first step (the one with
the id of `bored`) is active, body element gets a class of `impress-on-bored`.
This class is used by this hint below. Check CSS file to see how it's shown with delayed CSS animation when
the first step of presentation is visible for a couple of seconds.
...
And when it comes to this piece of JavaScript below ... kids, don't do this at home ;)
It's just a quick and dirty workaround to get different hint text for touch devices.
In a real world it should be at least placed in separate JS file ... and the touch content should be
probably just hidden somewhere in HTML - not hard-coded in the script.
Just sayin' ;)
-->
<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>