forked from piatra/kreator.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (127 loc) · 7.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kreator.js</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/zenburn.css">
<link rel="stylesheet" type="text/css" href="css/glyphicons.css">
<link rel="stylesheet" type="text/css" href="css/kreator.css">
<link rel="stylesheet" type="text/css" href="css/shepherd-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="css/quill.snow.css">
</head>
<body>
<div class="navbar container">
<div id="message" class="message hidden">
<p>This is a top level view of your presentation</p>
<div>
<div class="menu-item">
<button class="js-handler--overview">Overview</button>
</div>
</div>
</div>
</div>
<div id="topmenu" class="toolbar visually-hidden">
<div class="ql-format-group"><span title="Make text bold" class="ql-format-button ql-bold"></span><span title="Make text italic" class="ql-format-button ql-italic"></span><span title="Underline text" class="ql-format-button ql-underline"></span></div><span class="ql-format-separator"></span>
<select title="Text Alignment" class="ql-align">
<option value="left" label="Left" selected=""></option>
<option value="center" label="Center"></option>
<option value="right" label="Right"></option>
<option value="justify" label="Justify"></option>
</select><span class="ql-format-separator"></span>
<select class="ql-size">
<option value=".8rem">Small</option>
<option value="2rem" selected>Normal</option>
<option value="4rem">Large</option>
<option value="5rem">Huge</option>
</select><span class="ql-format-separator"></span><span class="ql-format-group">
<select title="Text Color" class="ql-color">
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected=""></option>
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
</select><span title="Ordered list" class="ql-format-button ql-list"></span><span title="Unordered list" class="ql-format-button ql-bullet"></span></span><span class="ql-format-separator"></span><span title="Presentation overview" class="ql-format-button js-handler--overview"><span class="glyphicon glyphicon-zoom-out"></span></span>
</div>
<div class="reveal">
<div class="slides">
<section>
<div class="slide-edit-lock">Edit content</div>
<div class="kreator-slide-content">
<h1>Hi!</h1>
<p>Welcome to kreator.js</p>
</div>
</section>
</div>
<div id="editor" class="visually-hidden">
<div></div>
</div>
<div class="progress"><span></span></div>
<div data-direction="right" class="add-slide add-slide--right js-handler--add-slide-right noselect">+</div>
<div data-direction="bottom" class="add-slide add-slide--bottom js-handler--add-slide-down noselect">+</div>
</div>
<div class="sidemenu">
<input type="text" placeholder="Presentation name" class="sidemenu-item js-handler--presentation-name">
<hr>
<button class="sidemenu-item--action js-handler--download"><img src="/img/download.svg">Download presentation</button><a class="js-handler--download-ready"></a>
<hr>
<select name="theme-selector" class="sidemenu-item js-handler--theme-selector">
<option value="default.css">Theme: Default</option>
<option value="night.css">Theme: Night</option>
<option value="beige.css">Theme: Beige</option>
<option value="sky.css">Theme: Sky</option>
</select>
<hr>
<p class="info-box">Upload a reveal.js presentation in the editor. Select the index.html of your presentation</p>
<form action="" class="js-handler--upload">
<input type="file" required>
<button class="sidemenu-item--small">Upload</button>
</form>
<hr>
<p class="info-box">You can use a mobile phone as a remote to change the slides. <a href="http://piatra.github.io/kreator.js/output/remote.html" target="_blank"> Use this url </a> to get the code needed, it is also the page you want to load on your phone or other mobile device.</p>
<button class="sidemenu-item--secondary js-handler--init-remote">Use device as remote</button>
<hr>
<button class="sidemenu-item--secondary--half js-handler--hide-sidemenu">Hide sidemenu</button>
<button class="sidemenu-item--secondary--half js-handler--restart-tour">Show tour</button>
</div>
<script src="lib/quill.min.js"></script>
<script src="lib/head.min.js"></script>
<script src="lib/q.js"></script>
<script src="lib/jszip.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/reveal.min.js"></script>
<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script src="lib/shepherd.min.js"></script>
<script src="lib/build/main.js"></script>
</body>
</html>