forked from ccoenraets/Keypoint1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·177 lines (147 loc) · 4.41 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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Keypoint1</title>
<link href="assets/css/keypoint-bundle.css" rel="stylesheet" type="text/css">
<link href="assets/css/slides.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="logo"></div>
<div id="wrapper"></div>
<div id="slides" data-base-url="">
<div class="slide bg-intro">
<div style="position: absolute;bottom: 20%;left:10%;text-align:left;">
<h1 >Keypoint1<br/>Mobile First Slides for Salesforce1</h1>
<br/>
<h2>Christophe Coenraets<br/>@ccoenraets</h2>
</div>
</div>
<div class="slide bg">
<h1>Me</h1>
<div class="speaker-info">
<p><i class="icon ion-person"></i>Christophe Coenraets</p>
<p><i class="icon ion-location"></i>Boston, MA</p>
<p><i class="icon ion-social-twitter"></i>@ccoenraets</p>
<p><i class="icon ion-social-rss"></i>http://coenraets.org</p>
<p><i class="icon ion-social-github"></i>https://github.com/ccoenraets</p>
</div>
</div>
<div class="slide bg">
<h1>What's This?</h1>
A single page application in a Visualforce page
</div>
<div class="slide">
<h1>Characteristics</h1>
<ul>
<li>100% Web Standards (HTML, JS, CSS)</li>
<li>Responsive (iPhone to big screens)</li>
<li>Customizable through CSS</li>
<li>Connected: Can show Salesforce data</li>
</ul>
</div>
<div class="slide">
<h1>Responsive</h1>
<img data-src="images/responsive_book.jpg"/>
</div>
<div class="slide">
<h1>Run your slides on your iPad</h1>
<img data-src="images/ipad.png"/>
</div>
<div class="slide">
<h1>... on your phone</h1>
<img data-src="images/iphone.png"/>
</div>
<div class="slide">
<h1>... or in your browser<br/>(it's a Visualforce page)</h1>
<img data-src="images/browser.png"/>
</div>
<div class="slide">
<h1>Optimized for Performance</h1>
Only three slides in the DOM at any given time (current, previous, next)
</div>
<div class="slide">
<h1>Show Live Salesforce Data</h1>
<h2>Top 5 Opportunities</h2>
<ol id="top5"></ol>
</div>
<div class="slide bg">
<h1>Show Data Based on Any Query</h1>
<textarea id="soql-query" style="height: 20%">SELECT Name, Amount FROM Opportunity ORDER BY Amount DESC LIMIT 5</textarea>
<button id="soql-btn" class="button" style="margin: 20px;">Execute SOQL</button>
<textarea id="soql-result" style="height:40%" class="needsclick"></textarea>
</div>
<div class="slide">
<h1>Creating a Slide</h1>
<xmp class="prettyprint"><div class="slide">
<h1>My First Slide</h1>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</div>
</xmp>
</div>
<div class="slide">
<h1>My First Slide</h1>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</div>
<div class="slide">
<h1>Using Images</h1>
<xmp class="prettyprint"><div class="slide">
<h1>A Screenshot</h1>
<img data-src="img/iphone.png"/>
</div>
</xmp>
</div>
<div class="slide">
<h1>A Screenshot</h1>
<img data-src="images/screenshot.png"/>
</div>
<div class="slide bg">
<h1>Custom Background</h1>
<xmp class="prettyprint"><div class="slide bg">
</div>
</xmp>
</div>
<div class="slide">
<h1>Built with</h1>
<ul>
<li>SwipeView</li>
<li>Prettify</li>
<li>Ionic framework</li>
<li>Fastclick</li>
</ul>
</div>
<div class="slide">
<h1>Thank You</h1>
<div class="speaker-info">
<p><i class="icon ion-person"></i>Christophe Coenraets</p>
<p><i class="icon ion-location"></i>Boston, MA</p>
<p><i class="icon ion-social-twitter"></i>@ccoenraets</p>
<p><i class="icon ion-social-rss"></i>http://coenraets.org</p>
<p><i class="icon ion-social-github"></i>https://github.com/ccoenraets</p>
</div>
</div>
</div> <!-- end of '#slides' -->
<button id="menu-btn" class="button button-clear icon ion-navicon"></button>
<div id="menu" class="dark-bg">
<div class="title">Keypoint</div>
<div class="scroller cf">
<ol id="list" class="list"></ol>
</div>
</div>
<script src="lib/keypoint-bundle.js"></script>
<!-- Custom interactions for this presentation -->
<script src="js/slides.js"></script>
<script>
keypoint.init();
</script>
</body>
</html>