forked from palerdot/slide-my-text
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
427 lines (278 loc) · 18 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!--
Slide My Text !
by palerdot
website: http://palerdot.in
github: http://github.com/palerdot/
contact: [email protected]
Released under GPLv3 license
http://opensource.org/licenses/GPL-3.0
This app uses icons by Glyphicons
released under the
Creative Commons Attribution 3.0 Unported (CC BY 3.0).
http://creativecommons.org/licenses/by/3.0/
website: http://glyphicons.com
-->
<!DOCTYPE html>
<html>
<head>
<title>Slide My Text !</title>
<link href="css/main.css" rel="stylesheet" media="screen">
<script src = "js/jquery.js"></script>
<script src = "js/main.js"></script>
<script></script>
</head>
<body>
<div id = "settings"></div>
<div id = "theme_div">
<span id = "theme_label">Themes : </span>
<span id = "theme_sunny" class = "themes sunny" title = "sunny theme"></span>
<span id = "theme_cloudy" class = "themes cloudy" title = "cloudy theme"></span>
<span id = "theme_green" class = "themes green" title = "green theme"></span>
<span id = "theme_dark" class = "themes dark" title = "dark theme"></span>
<span id = "theme_preview_button" title = "theme preview"></span>
</div>
<!-- START: start of theme preview -->
<div id = "theme_preview" class = "modal fade">
<div class="modal-header">
<button type="button" class="close" id = "theme_preview_close">×</button>
<h3>Current Theme : <span id = "theme_name"></span></h3>
</div>
<div class = "modal-body theme_preview_body">
<img src = "imgs/theme-s.png" class = "preview_imgs" id = "theme_s"></img>
<img src = "imgs/theme-c.png" class = "preview_imgs" id = "theme_c"></img>
<img src = "imgs/theme-g.png" class = "preview_imgs" id = "theme_g"></img>
<img src = "imgs/theme-d.png" class = "preview_imgs" id = "theme_d"></img>
</div>
</div>
<!-- END: end of theme preview -->
<!-- START: start of file drop holder -->
<div id = "file_drop_holder">
<div id = "file_drop_pane">
<div id = "text_file_drop_pane">
<div id = "text_file_alert_pane">
<span id = "text_file_alert" class = "alert-yellow">sorry ! not a text file </span>
</div>
<div id = "text_file_drop_area"> <span id = "text_file_drop_message"></span> </div>
<div id = "text_file_select_area">
<span class = "file_select_icon browse_text" id = "text_file_select">Add a text file</span>
<input type = "file" id = "text_file" name = "text_file" />
</div>
<div id = "text_file_info_area"><span id = "file_name"> No text file </span> added</div>
<div id = "text_file_options_area">
<span id = "pmode_select" class = "control_icon keynote_icon"></span>
<span>Presentation mode :</span>
<span id = "pmode_status">Off</span>
</div>
</div>
<div id = "pics_drop_pane">
<div id = "pics_file_alert_pane">
<span id = "no_image_alert" class = "alert-yellow">No images added</span>
</div>
<div id = "pics_file_drop_area"> <span id = "pics_file_drop_message"></span> </div>
<div id = "pics_file_select_area">
<span class = "pics_select_icon browse_text" id = "images_select">Add image(s)</span>
<input type = "file" id = "image_files" name = "image_files" multiple />
</div>
<div id = "pics_file_info_area">Image(s) added: <span id = "image_count">0</span></div>
<div id = "pics_file_options_area"><button class = "btn btn-orange options-btn" id = "image_reset">Reset</button><button class = "btn btn-orange options-btn" id = "images_preview">Preview</button></div>
</div>
</div>
<div id = "create_slide_button_pane">
<button class = "btn btn-large btn-primary align-center" id = "create_slide"> <strong> Create Slide Presentation ! </strong> </button>
</div>
</div>
<!-- END: end of file drop holder -->
<!-- START: start of slide show pane -->
<div id = "slide_show_pane">
<div id = "slide_title_holder">Slide Title !</div>
<div id = "slide_content_holder">
</div>
<div id = "slide_control_holder">
<div id = "control_pane">
<span class = "control_icon fullscreen_icon" title = "toggle full screen" id = "fullscreen_button"></span>
<span class = "control_icon stop_icon" title = "quit slide show" id = "stop_button"></span>
<span class = "control_icon first_slide_icon" title = "show first slide" id = "show_first_button"></span>
<span class = "control_icon prev_slide_icon" title = "show previous" id = "prev_button"></span>
<span class = "control_icon keynote_icon" title = "presentation mode inactive" id = "keynote_button"></span>
<span class = "control_icon next_slide_icon" title = "show next" id = "next_button"></span>
<span class = "control_icon last_slide_icon" title = "show last slide" id = "show_last_button"></span>
<span class = "control_icon slide_list_icon" title = "show slide list" id = "slide_list_button"></span>
<span class = "control_icon image_list_icon" title = "show images" id = "show_images_button"></span>
<span class = "control_icon mm_icon" title = "multimedia" id = "mm_button"></span>
</div>
</div>
</div>
<!-- END: end of slide show pane -->
<!-- START: start of image list overlay and image divs -->
<div id = "image_list_overlay">
<button id = "image_list_close" class = "image_close">×</button>
<div id = "image_name">hello</div>
<div id = "i_fullscreen_button" class = "control_icon fullscreen_icon" title = "toggle full screen"></div>
<div id = "image_holder" class = "i_holder"></div>
<div id = "image_prev" class = "active"></div> <div id = "image_next" class = "active"></div>
<div id = "image_thumbnail_holder" class = "i_t_holder" >
<div class = "i_slider" id = "i_slider"><span id = "i_slider_out"></span><span id = "i_slider_in" style="display:none;"></span></div>
<div id = "thumbnail_div">
<div id = "thumbnail_div_header"></div>
<div id = "thumbnail_div_body"></div>
</div>
</div>
</div>
<!-- END: end of image list overlay and image divs -->
<!-- START: start of multimedia overlay -->
<div id = "mm_overlay">
<button id = "mm_close" class = "image_close">×</button>
<div id = "mm_name"></div>
<div id = "mm_filetype_button">
<div id = "video_type" class = "control_icon mm_icon" title = "video file"></div>
<div id = "audio_type" class = "control_icon music_icon" title = "audio file"></div>
</div>
<div id = "mm_drag_zone">
<video id = "video" controls></video>
<audio id = "audio" controls></audio>
<div id = "media_reset" class = "btn btn-primary">Reset media</div>
</div>
<div id = "mm_add_file" class = "btn btn-primary btn-large">Drag and Drop media file above or add here !</div>
<div id = "mm_error_div" class = "alert-yellow">
<span id = "mm_error"></span><button id = "mm_error_close" class = "close">×</button>
</div>
<input type = "file" id = "mm_file" name = "mm_file" />
</div>
<!-- END: end of multimedia overlay -->
<!-- START: start of slide list overlay and modal -->
<div id = "slide_list_overlay" class = "slide_list_overlay"></div>
<div id = "slide_list_modal" class = "modal fade">
<div class="modal-header">
<button type="button" class="close" id = "slide_list_close">×</button>
<h3 id="">Slide List</h3>
</div>
<div class = "modal-body" id = "slide_list_modal_body"></div>
<div class = "modal-footer"> click on the title to view the slide </div>
</div>
<!-- END: end of slide list overlay and modal -->
<!-- START: start of intro overlay and modal -->
<div id = "intro_overlay" class = "intro_overlay"></div>
<div id = "intro_modal" class = "modal fade">
<div class="modal-header">
<button type="button" class="close" id = "intro_close">×</button>
<h3 id="">Slide My Text !</h3>
</div>
<div class="modal-body">
<div class = "line">
<div class = "align-center intro_body_line">
<span class = "intro_modal_text"> Plain text files</span>
<span class = "intro_modal_text"> ==> </span>
<span class = "intro_modal_text"> Slide presentations !</span>
</div>
</div>
<div class = "line">
<div class = "align-center intro_body_line">
<span class = "intro_modal_text"> Have a look at the </span>
</div>
<div class = "align-center intro_body_line">
<button class = "btn btn-large btn-primary" id = "show_guide"> How-To Guide </button>
</div>
</div>
<div class = "line">
<div class = "align-center intro_body_line">
<span class = "intro_modal_text"> or just </span>
</div>
<div class = "align-center intro_body_line">
<button id = "create_slide_message_button" class = "btn btn-large btn-primary"> create slide presentations from plain text files ! </button>
</div>
</div>
</div>
<div class="modal-footer">
<a href = "http://github.com/palerdot/slide-my-text" target = "_blank"><button class = "btn btn-primary fork_text">Fork this app !</button></a>This app uses icons by <a href = "http://glyphicons.com/" target = "_blank" class = "gly_text">Glyphicons</a>.
</div>
</div>
<!-- END: end of intro overlay and modal -->
<!-- START: start of how to guide -->
<div id = "how_to_guide">
<div class="modal-header">
<button type="button" class="close" id = "guide_close">×</button>
<h3 id=""> How-To guide </h3>
</div>
<div class="guide_body">
<span class = "bold">Slide My Text !</span> allows to you create slide presentations from plain text files. Plain text files are files with extensions as '.txt' and MIME type 'text/plain'. Since plain text files are ubiquitous and light weight to deal with across different OS platforms, one can just type in their plain text files and drop into this app in the browser. The text file content will be converted into a slide presentation with a lot of cool features including image slide show and multimedia file playback during presentation.
<span class = "h_line"></span>
<div class = "gb_heading">Overview:</div>
This section gives an overview of functionalities of this app. Detailed explanation is in the following section.
Slide My Text ! allows you to do the following by simple formatting of your plain text files.
- create new slides
- Add titles for the slides (optional)
- create 3 types of slide points (normal point, bullet point, highlight point)
The resulting slide has the following functionalites
- has a <span class = "bold">presentation mode</span> which allows you to step through each slide point during the presentation. This mode can be switched on or off at any time during the presentation.
- abilities to jump to any slide instantly using a slide switching window. Just click on a slide title to switch to the corresponding slide.
- ability to show image slide shows (depends on the browser for image support)
- ability to play multimedia files (depends on the browser for the types of file it can play)
- full screen mode
<span class = "h_line"></span>
<div class = "gb_heading">Formatting:</div>
Slide My Text ! uses lightweight formatting to create slides from text files.
A new slide is created by drawing a new line with 4 or more * (asterisks) or - (hyphens), like this:
*******************
That's it ! a new slide is now created. Whatever is typed after this line is a part of a new slide. One does not have to be precise about the number of asterisks or hyphens. You can draw as long as you like. It just have to be 4 or more. Mixing of asterisks and hyphens are also allowed as long as total is more than 4.
One or more <span class = "bold">blank lines</span> creates a new slide point.
<div class = "tiny_ht">Wrapping
one long line
into multiple lines
with newlines like this,
<span class = "bold">will not</span> create new points. It
will be a part of the same slide point.
This is for convenience purposes
as people like to format a
long line by breaking into small pieces.</div>
<span class = "bold">One or more blank lines</span> like this creates a new point.
Again one can format the text file with as much <span class = "bold">blank lines/empty new lines</span> as one likes. It just
have to be more than one blank line.
<span class = "h_line"></span>
<div class = "gb_heading">Slide titles:</div>
You can also create slide titles by typing the title in the <span class = "bold">first line of the slide within asterisks.</span> For example:
-------------------------------
* new slide title *
Now a new slide is created with a title of 'new slide title'
Only the first line of the slide within asterisks is considered for slide titles. Doing the same in other lines will
be displayed as it is.
<span class = "h_line"></span>
<div class = "gb_heading">Bullet and Highlight points:</div>
A slide point can also be formatted in two other ways: as bullet points, as highlight points.
- Bullet point is created by adding a - (hyphen) at the start of the point like this line. One can have one or more spaces after the hyphen as they like. Bullet points cannot be nested. That is, there is only one level of nesting in the whole slide.
-- Highlight point is created by adding -- two consecutive hyphens at the start of the point like this line. One can have one or more spaces after the hyphens as they like.
<span class = "h_line"></span>
<div class = "gb_heading">Being liberal with white spaces and new lines:</div>
One can be liberal with their white spaces and blank lines in their text files. For example
**************************************
* new slide ! *
this still marks the beginning of a new slide with the title 'new slide !' even though there are multiple spaces infront of the line and within the title string.
- slide points can have any number of spaces before them. It will still be a new slide point. For example, this will still be a bullet point even though there are spaces between the hyphen and the point. Same applies for highlight points too.
<span class = "h_line"></span>
<div class = "gb_heading">Presentation mode:</div>
This app has a presentation mode which allows you to step through each slides point by point. This setting can be turned on/off any time during the presentation.
One also have an option of starting the presentation in presentation mode. Starting in presentation mode shows the first slide title and the first point of the slide. Pressing next will display the next point. If the current slide has reached its end, next slide title and first point is shown. You can again step through each point for this new slide, and so on. (Showing the first point along with slide title during the presentation mode is because, since slide titles are optionally added this makes sure that atleast something is shown instead of a blank screen during slide transition.)
If the presentation mode is turned off entire slide content is shown. Pressing next moves to next slide and shows the next slide contents fully. Switching off presentation mode during halfway of the present slide will reveal the remaining points. To show the current slide again in presentation mode, switch on the presentation mode and click the corresponding slide title from the slide list section.
<span class = "h_line"></span>
<div class = "gb_heading">Slide Controls:</div>
Slide controls can be accessed by <span class = "bold">hovering the mouse</span> to the bottom of the slide screen. The controls are hidden by default during the presentation. It is made visible only by hovering the mouse to the bottom of the presentation.
Following controls are present in slide
- <span class = "bold">fullscreen button:</span> allows you to toggle full screen
- <span class = "bold">next button:</span> If presentation mode is on, clicking next will show the next point. Otherwise it shows the next slide.
- <span class = "bold">previous button:</span> If presentation mode is on, clicking previous will show the title and first point of previous slide. Otherwise it will show the entire previous slide.
- <span class = "bold">first slide button:</span> If presentation mode is on, clicking this will show the title and first point of first slide. Otherwise it will show the entire first slide.
- <span class = "bold">last slide button:</span> If presentation mode is on, clicking this will show the title and first point of last slide. Otherwise it will show the entire last slide.
- <span class = "bold">presentation mode toggle:</span> Allows to switch on/off presentation mode during the slide presentation.
- <span class = "bold">slide list button:</span> Shows a popup that contains buttons with titles of all slide. Clicking it will take you to the corresponding slide. If presentation mode is on clicking this will show the title and first point of the corresponding slide. Otherwise it will show the entire slide. Since slide titles are optional, 'No title' will be displayed if no slide title is present.
- <span class = "bold">Image list button:</span> Image slide show button. Before creating the presentation one can choose the images to be shown during the presentation. Selected images can be viewed by clicking this button.
- <span class = "bold">Media button:</span> Allows you to play the media files.
- <span class = "bold">quit button:</span> Quits the slide show presentation.
<span class = "h_line"></span>
<div class = "gb_heading">Themes:</div>
Four themes are available which can be previewed by clicking the projector icon at the top right corner.
<span class = "h_line"></span>
One has to be careful with formatting when external text is copied to text files. In such occasions, one can go through the copied text in the text file and insert necessary formatting manually if necessary, as characters such as multiple spaces may be mistaken for new lines.
</div>
</div>
<!-- END: end of how to guide -->
</body>
</html>