-
Notifications
You must be signed in to change notification settings - Fork 27
/
index.html
187 lines (159 loc) · 10.6 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
<!DOCTYPE html>
<html>
<head>
<title>Dizzy Editor</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Creating nonlinear presentations like Prezi, without Flash" />
<meta name="keywords" content="Dizzy, Presentation, Prezi, SVG, Javascript, HTML5" />
<link type="text/css" rel="stylesheet" href="./css/editor.css" />
<!-- contains jquery, jquery mousewheel and jquery svg -->
<script type="text/javascript" src="./js/jquery/jquery.full.min.js"></script>
<script type="text/javascript" src="./js/dizzy.full.js"></script>
<script type="text/javascript" src="./js/polyfill.input.color.js"></script>
</head>
<body>
<!-- Canvas-->
<div id="dizzy" class="loading"></div>
<!-- Zebra -->
<div id="zebra">
<div id="zebra-rotate">
<div id="zebra-scale">
<div id="zebra-translate"></div>
</div>
</div>
<div id="zebra-expand-button">›</div>
<div id="zebra-toolbar" class="hidden">
<div class="zebra-toolbar-row">
<div class="toolbutton" id="zebra-toolbar-up" title="Raise group one level"><img src="./images/zebra_tool_up.png" alt="arrow up icon" /></div>
<div class="toolbutton" id="zebra-toolbar-down" title="Lower group one level"><img src="./images/zebra_tool_down.png" alt="arrow down icon" /></div>
</div>
</div>
</div>
<div id="tools-main">
<!-- Tools -->
<div id="toolbar">
<div id="menu-button" class="toolbutton fullwidth">
Menu ▸
</div>
<div class="toolbutton pressed" id="tool-default" title="Default controls"><img src="./images/tool_default.png" alt="default mode" /></div>
<div class="toolbutton" id="tool-path" title="Edit presentation path"><img src="./images/tool_path.png" alt="edit path mode" /></div>
<div class="toolbutton" id="tool-line" title="Draw lines"><img src="./images/tool_line.png" alt="draw line mode" /></div>
<!-- div class="toolbutton inactive" id="tool-arrow" title="not implemented yet" ><img src="./images/tool_arrow.png" alt="draw arrow mode" /></div -->
<div class="toolbutton" id="tool-rect" title="Draw frames"><img src="./images/tool_rect.png" alt="draw frame mode" /></div>
<div class="toolbutton" id="tool-circle" title="Draw ellipses"><img src="./images/tool_circle.png" alt="draw ellipse mode" /></div>
<div class="toolbutton" id="tool-image" title="Insert an image"><img src="./images/tool_image_add.png" alt="insert image button" /></div>
<!-- div class="toolbutton inactive" id="tool-media" title="not implemented yet"><img src="./images/tool_formula.png" alt="insert media button" /></div -->
<div class="toolbutton hidden" id="tool-previous" title="Previous group"><img src="./images/tool_previous.png" alt="Transition to previous group" /></div>
<div class="toolbutton hidden" id="tool-next" title="Next group"><img src="./images/tool_next.png" alt="Transition to next group" /></div>
<div id="tool-color" class="toolbutton fullwidth" title="Choose fill and stroke colors">
<img src="./images/zebra_tool_color.png" alt="color icon" class="hidden" />
<input type="color" value="#000000" id="tool-input-color-fill" title="Fill color" />
<input type="color" value="#FFFFFF" id="tool-input-color-stroke" title="Stroke color" />
</div>
<div id="present-toggle-button" class="toolbutton fullwidth" title="Start presentation" >
<img src="./images/menu_present.png" alt="start presentation image" /> <span>Present</span>
</div>
</div>
<!-- Expendable menu -->
<div id="menu" class="hidden">
<div id="menu-left">
<ul>
<li><h2>File</h2>
<ul>
<li title="Open saved dizzy presentation"
class="selected" id="menu-open"
data-description="Open a saved dizzy presentation. If you choose a new file the current content of the canvas will be erased!">
<img src="./images/menu_open.png" alt="Open file" /> Open
<div id="menu-open-extended" class="hidden">
<hr />
<form>
<fieldset>
<label for="menu-open-input">File:</label>
<input type="file" id="menu-open-input" />
</fieldset>
</form>
</div>
</li>
<li title="Save dizzy presentation" id="menu-save" data-description="Save Dizzy presentation. The SVG file will be opened in a new window. You can then save it like a normal webpage ('File -> Save Page As' in most browsers) "><img src="./images/menu_save.png" alt="Save file" /> Save</li>
<li title="Import Prezi .pez file (not implemented yet)" class="hidden"><img src="./images/menu_import.png" alt="Import file" /> Import Prezi
<div id="menu-import-extended" class="hidden">
<hr />
<form>
<fieldset>
<label for="menu-import-input">File:</label>
<input type="file" id="menu-import-input" />
</fieldset>
</form>
</div>
</li>
</ul>
</li>
<li><h2>Style</h2>
<ul>
<li title="Edit default styles (not implemented yet)" class="hidden"><img src="./images/menu_style.png" alt="default style" /> Default style
<div id="menu-style-extended" class="hidden"><hr />Bla Bla Bla Bla Bla Bla<br />Bla Bla Bla Bla Bla Bla</div>
</li>
<li title="Edit raw CSS" data-description="Edit raw CSS. Check out http://www.w3.org/TR/SVG/styling.html for information on how to style SVG with CSS."><img src="./images/menu_css.png" alt="edit css file" /> Edit CSS
<div id="menu-css-extended" class="hidden"><hr />
<textarea id="menu-style-css-input" rows="15" cols="10"></textarea>
</div>
</li>
</ul>
</li>
<li><h2>Help</h2>
<ul>
<li title="Report bugs found."><img src="./images/menu_bugs.png" alt="report bugs" /> Report bugs
<div id="menu-bugs-extended" class="hidden"><hr />
Please report occured bugs through the <a href="https://github.com/Moerphy/dizzy.js/issues">issue tracker</a>.
If you include information about your browser and what you were doing when the bug occured it usually can be fixed faster.
</div>
</li>
<li title="Information about the software, licenses, attributions, etc.."><img src="./images/menu_about.png" alt="about icon" /> About...
<div id="menu-about-extended" class="hidden"><hr />
Dizzy is a web based presentation application, heavily inspired by <a href="http://prezi.com">Prezi</a>,
that uses a single canvas instead of multiple slides for a presentation.<br />
<br />
Unlike Prezi, presentations with Dizzy are made entirely without Flash, using SVG and Javascript only.
Also everything is open source under the MIT license (code available on <a href="https://github.com/Moerphy/dizzy.js">Github</a>).<br />
<br />
<b>Please keep in mind that this project is still in it's early beta,
so there are many open bugs and quirks and a lot of features yet to be implemented.</b>
<br />
The awesome icons used here are from the fugue icon set by <a href="http://p.yusukekamiyamane.com/">Yusuke Kamiyamane</a><br />
<br />
Author: <a href="http://murphy.metafnord.org">Murphy</a>
<a href="http://www.twitter.com/MrMoerphy"><img src="http://twitter-badges.s3.amazonaws.com/t_small-b.png" alt="Follow me on Twitter" style="border: 0; vertical-align: text-bottom;"/></a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div id="menu-right">Put your mouse over a menu-item to get a description here.</div>
</div>
</div>
<div id="overlay" class="hidden" >
<div id="overlay-dialog-input" class="overlay-dialog hidden">
<div class="overlay-close">x</div>
<form>
<fieldset>
<legend>Link image</legend>
To add a remote image to your presentation just enter the image URL in the text field below.<br /><br />
<label for="image-dialog-input-field">Image URL: </label>
<input type="text" placeholder="http://placekitten.com/300/200" id="overlay-dialog-input-field" />
</fieldset>
<strong class="center">OR</strong>
<fieldset>
<legend>Embed</legend>
To embed an image simply choose a file from your local file system.<br /><br />
<label for="menu-open-input">File:</label>
<input type="file" id="image-dialog-file-field" />
</fieldset>
<span class="floatright">
<a href="#" class="overlay-cancel">Cancel</a> <input type="button" value="Insert image"/>
</span>
</form>
</div>
</div>
</body>
</html>