Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / network_details.html @ f50cc12b

History | View | Annotate | Download (20.1 kB)

1

    
2
<!DOCTYPE html>
3
<!--[if IE 8]>                                  <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5

    
6
<head>
7
        <meta charset="utf-8" />
8
    <meta name="viewport" content="width=device-width" />
9
    <title>Network details</title>
10
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin,greek-ext,greek' rel='stylesheet' type='text/css'>
11
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
14
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
17
</head>
18
<body>
19
                <header class="header">
20
                <nav>
21
                        <ul class="icons-nav">
22
                                <li><a href="vm_list.html" data-tooltip ="has-tip" title="Machines"><span class="snf-pc-outline"></span></a></li>
23
                                <li><a href="network_list.html" data-tooltip ="has-tip " title="Networks"><span class="snf-network-full"></span></a></li>
24
                                <li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li>
25
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage"><span class="snf-pithos-outline"></span></a></li>
26
                                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-image-outline"></span></a></li>
27
                                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li>
28
                                <li><a href="" data-tooltip ="has-tip" title="More"><span class="snf-plus-outline"></span></a></li>
29
                        </ul>
30
                </nav>
31
                <div class="login">
32
                        <div class="wrap">
33
                                <a href="">user1@synnefo.org</a>
34
                                <ul>
35
                                        <li><a href="">dashboard</a></li>
36
                                        <li><a href="">sign out</a></li>
37
                                </ul>
38
                        </div>
39
                </div>
40
                <div class="logo">
41
                        <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
42
                </div>
43
        </header>
44
        <div class="body-wrapper">
45
                <section class="overlay-area-custom">
46
                        <div id="network-wizard" class="overlay-div wizard">
47
                                <div class="top">
48
                                        <div class="numbers">
49
                                                <div class="menus row">
50
                                                        <a href="" class="close"><span class="snf-close"></span></a>
51
                                                        <ul class="nums">
52
                                                                <li class="preselected current">
53
                                                                        <em><span>1</span></em>
54
                                                                        <p><strong>Create new private network</strong></p>
55
                                                                </li>
56
                                                        </ul>
57
                                                </div>
58
                                        </div>
59
                                        <div class="row">
60
                                                <nav class="sub-menu" data-step=1>
61
                                                </nav>
62
                                        </div>
63
                                </div>
64
                                <div class="middle">
65
                                        <div class="steps">
66
                                                <div class="step step-1 preselected current">
67
                                                        <ul class="row network_options">
68
                                                                <li class="project-selection">
69
                                                                        <form class="custom">
70
                                                                          <select class="medium">
71
                                                                            <option class="el5">Basic Project</option>
72
                                                                            <option>Project 2</option>
73
                                                                            <option>Project 3</option>
74
                                                                          </select>
75
                                                                        </form>
76
                                                                </li>
77
                                                                <li>
78
                                                                        <div class="network-name">
79
                                                                                <h2>Network name</h2>
80
                                                                                <span class="input"><input class="el1" type="text" placeholder="My Network"></span>
81
                                                                        </div>
82
                                                                </li>
83
                                                                <li class="dhcp_option"><span>Assign IP addresses automatically:</span>
84
                                                                        <a href="" class="check">
85
                                                                                <span class="snf-checkbox-checked prechecked"></span>
86
                                                                        </a>
87
                                                                </li>
88
                                                                <li class="explanatory">
89
                                                                        If you enable DHCP on the private network, connected virtual machines will automatically be assigned an IP address based on the given subnet. You may disable this option if you want to assign IP addresses to the connected virtual machines manually.
90
                                                                </li>
91
                                                                <li>
92
                                                                        <span class="sub_title">Network subnet:</span>
93
                                                                        <ul class="subnet_options">
94
                                                                                <li>
95
                                                                                        <span>Auto
96
                                                                                                <a href="" class="radio_btn">
97
                                                                                                        <span class="snf-radio-checked prechecked"></span>
98
                                                                                                </a>
99
                                                                                        </span>
100
                                                                                </li>
101
                                                                                <li class="manual">
102
                                                                                        <form>
103
                                                                                                <span>Manual
104
                                                                                                        <a href="" class="radio_btn manual">
105
                                                                                                                <span class="snf-radio-unchecked"></span>
106
                                                                                                        </a>
107
                                                                                                        <span class="input"><input type="text" placeholder="192.168.32.0/24"></span>
108
                                                                                                </span>
109
                                                                                        </form>
110
                                                                                </li>
111
                                                                                <li>
112
                                                                                        <span>10.0.0.0/24
113
                                                                                                <a href="" class="radio_btn">
114
                                                                                                        <span class="snf-radio-unchecked"></span>
115
                                                                                                </a>
116
                                                                                        </span>
117
                                                                                </li>
118
                                                                                <li>
119
                                                                                        <span>192.168.0.0/24
120
                                                                                                <a href="" class="radio_btn">
121
                                                                                                        <span class="snf-radio-unchecked"></span>
122
                                                                                                </a>
123
                                                                                        </span>
124
                                                                                </li>
125
                                                                        </ul>
126
                                                                </li>
127
                                                        </ul>
128
                                                </div>
129
                                        </div>
130
                                </div>
131
                                <div class="bottom">
132
                                        <div class="row">
133
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
134
                                                <a href="" class="nav next" data-next="el1"><span>CREATE</span></a>
135
                                        </div>
136
                                </div>
137
                        </div>
138
                </section>
139
                <section class="overlay-area-reveal">
140
                        <div id="start-confirm" class="reveal-modal medium">
141
                                <p class="message-forimg">Are you sure you want to turn on your machine?</p>
142
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
143
                                <a class="close-reveal-modal" title="close window">X</a>
144
                        </div>
145
                        <div id="reboot-confirm" class="reveal-modal medium">
146
                                <p class="message-forimg">Are you sure you want to reboot your machine?</p>
147
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
148
                                <a class="close-reveal-modal" title="close window">X</a>
149
                        </div>
150
                        <div id="shutdown-confirm" class="reveal-modal medium">
151
                                <p class="message-forimg">Are you sure you want to shutdown your machine?</p>
152
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
153
                                <a class="close-reveal-modal" title="close window">X</a>
154
                        </div>
155
                        <div id="destroy-vm-confirm" class="reveal-modal medium">
156
                                <p class="message-forimg">Are you sure you want to destroy your machine?</p>
157
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
158
                                <a class="close-reveal-modal" title="close window">X</a>
159
                        </div>
160
                        <div id="vm-connect" class="reveal-modal medium">
161
                                <p>A direct connection to this machine can be established using the <a href=​"http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell" target=​"_blank">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
162
                                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
163

    
164
                                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
165
                                <a class="close-reveal-modal" title="close window">X</a>
166
                        </div>
167
                        <div id="connect-vm-to-network" class="reveal-modal medium list-availables">
168
                                <span>Available networks:</span>
169
                                <ul>
170
                                        <li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-network-full"></span><span class="name">network name</span><span>other data</span></li>
171
                                        <li><span class="snf-font snf-radio-unchecked"></span><span class="snf-font snf-network-full"></span><span class="name">network name</span><span>connected machines: 10</span></li>
172
                                </ul>
173
                                <p class="buttons">
174
                                        <a href="" class="btn1">OK</a>
175
                                        <a href="" class="btn1">Cancel</a>
176
                                </p>
177
                        </div>
178
                        <div id="disconnect-from-network" class="reveal-modal medium list-availables remove">
179
                                <p>Are you sure you want to disconnect this machine?</p>
180
                                <p class="buttons">
181
                                        <a href="" class="btn1 ok">OK</a>
182
                                        <a href="" class="btn1 cancel">Cancel</a>
183
                                </p>
184
                                <a class="close-reveal-modal" title="close window">X</a>
185
                        </div>
186
                </section>
187
                <section class="actions-bar clearfix">
188
                        <h2><a href="vm_list.html">Networks</a> > My Awesome network</h2>
189
                        <div class="rt-actions">
190
                                <a href="network_list.html" class="grid" title="grid view"><span class="snf-gridview"></span></a>
191
                                <a href="" class="list" title="list view"><span class="snf-listview "></span></a>
192
                                <a href="network_list.html" class="single current" title="single view"></a>
193
                        </div>
194
                        <div class="filter-menu">
195
                                <a class="filter" href="">Filter</a>
196
                                <ul class="options">
197
                                        <li><a href=""> set an option</a></li>
198
                                        <li><a href=""> set an option</a></li>
199
                                        <li><a href=""> set an option</a></li>
200
                                        <li><a href=""> set an option</a></li>
201
                                </ul>
202
                        </div>
203
                        <div id="hd-search" class="hd-search">
204
                            <form>
205
                                        <span class="hd-icon-search snf-search"></span>
206
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
207
                            </form>
208
                        </div>
209
                </section>
210
                <div class="main row">
211
                        <div class="network details running">
212
                                <a href="" class="toggle-lt-bar">...</a>
213
                                <div class="lt-bar">
214
                                        <div class="scroll-wrap">
215
                                                <ul class="items-list">
216
                                                        <li data-status="add-new" class="add-new">
217
                                                                <div class="container" data-overlay-id="network-wizard">
218
                                                                        <div class="check">
219
                                                                                <span class="snf-checkbox-unchecked"></span>
220
                                                                        </div>
221
                                                                        <div class="img-wrap">
222
                                                                                        <span class="snf-network-create-full snf-font"></span>
223
                                                                        </div>
224
                                                                        <h4>New Network</h4>
225
                                                                </div>
226
                                                                <div class="tags">
227
                                                                </div>
228
                                                                <div class= "status">
229
                                                                </div>
230
                                                        </li>
231
                                                        <li data-status="running" class="running">
232
                                                                <div class="more">
233
                                                                </div>
234
                                                                <div class="container">
235
                                                                        <div class="check">
236
                                                                                <span class="snf-checkbox-unchecked"></span>
237
                                                                        </div>
238
                                                                        <div class="img-wrap">
239
                                                                                <span class="snf-network-full snf-font"></span>
240
                                                                        </div>
241
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
242
                                                                        <div class="actions">
243
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
244
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
245
                                                                        </div>
246
                                                                        <div class= "status">
247
                                                                                <span class="state"></span>
248
                                                                        </div>
249
                                                                        <div class="tags">
250
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
251
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
252
                                                                        </div>
253
                                                                        <div class="info"></div>
254
                                                                </div>
255
                                                        </li>
256
                                                        <li data-status="error" class="error">
257
                                                                <div class="more">
258
                                                                </div>
259
                                                                <div class="container">
260
                                                                        <div class="check">
261
                                                                                <span class="snf-checkbox-unchecked"></span>
262
                                                                        </div>
263
                                                                        <div class="img-wrap">
264
                                                                                <span class="snf-network-full snf-font"></span>
265
                                                                        </div>
266
                                                                        <h4>Private Network</h4>
267
                                                                        <div class="actions">
268
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-thunder-full"></span></a>
269
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info-outline"></a>
270
                                                                        </div>
271
                                                                        <div class= "status">
272
                                                                                <span class="state">Error</span>
273
                                                                        </div>
274
                                                                        <div class="tags">
275
                                                                        </div>
276
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
277
                                                                </div>
278
                                                        </li>
279
                                                </ul>
280
                                        </div>
281
                                </div>
282
                                <section class="top">
283
                                        <div class="lt">
284
                                                <div class="img-wrap">
285
                                                        <span class="snf-network-full"></span>
286
                                                </div>
287
                                        </div>
288
                                        <div class="rt">
289
                                                <div class="title">
290
                                                        <h1>Public Network</h1>
291
                                                </div>
292
                                                <div class="actions">
293
                                                        <ul>
294
                                                                <li><a href="">Add Machine</a></li>
295
                                                                <li><a href="">Destroy</a></li>
296
                                                        </ul>
297
                                                </div>
298
                                                <div class="tabs">
299
                                                        <ul>
300
                                                                <li><a href="#info"><span class="snf-info-outline"></span></a></li>
301
                                                                <li><a href="#vm-connected" class="active"><span class="snf-pc-outline snf-font"></span></a></li>
302
                                                        </ul>
303
                                                </div>
304
                                        </div>
305
                                </section>
306
                                <section class="content info-simple" id="info" style="display:none;">
307
                                        <section class="info-block">
308
                                                <h2>info</h2>
309
                                                <dl>
310
                                                        <dt><span class="snf-font snf-network-full"></span>Name</dt>
311
                                                        <dd>
312
                                                                <div class="editable">
313
                                                                <span class="input-txt">Public Network</span>
314
                                                                <input type="text">
315
                                                                <span class="editbuttons">
316
                                                                                <a href="#" class="edit"><span class="snf-edit"></span></a>
317
                                                                                <a href="#" class="save"><span class="snf-ok-sign"></span></a>
318
                                                                                <a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>
319
                                                                        </span>
320
                                                            </div>
321
                                                        </dd>
322
                                                        <dt><span class="snf-font snf-dashboard-outline"></span>Assigned Project</dt>
323
                                                        <dd>Basic Project</dd>
324
                                                        <dt><span class="snf-pc-full snf-font"></span>Connected Machines</dt>
325
                                                        <dd>4</dd>
326
                                                </dl>
327
                                        </section>
328
                                </section>
329
                                <section class="content connected" id="vm-connected" style="display:block">
330
                                        <section class="item error">
331
                                                <div class="what">
332
                                                        <div class="img-wrap">
333
                                                                <span class="snf-pc-full snf-font"></span>
334
                                                                <span class="os fedora">fedora</span>
335
                                                        </div>
336
                                                        <h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>
337
                                                </div>
338
                                                <div class="clearfix">
339
                                                        <ul class="connections">
340
                                                                <li>
341
                                                                        <a href="#" class="act" data-reveal-id="disconnect-from-network">&nbsp;</a>
342
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
343
                                                                        <div class="data">
344
                                                                                <ul>
345
                                                                                        <li>
346
                                                                                                <h5>IPv6</h5>
347
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
348
                                                                                        </li>
349
                                                                                </ul>
350
                                                                        </div>
351
                                                                        <div class="firewall" data-firewall="fully">
352
                                                                                <p>Firewall <em>on</em></p>
353
                                                                                <div class="more">
354
                                                                                        <p class="fully">
355
                                                                                                <a href="">Fully protected mode<span class="snf-radio-checked"></span></a>
356
                                                                                        </p>
357
                                                                                        <p class="basic">
358
                                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
359
                                                                                        </p>
360
                                                                                        <p class="unprotected">
361
                                                                                                <a href="">Unprotected mode<span class="snf-radio-unchecked"></span></a>
362
                                                                                        </p>
363
                                                                                </div>
364
                                                                        </div>
365
                                                                </li>
366
                                                        </ul>
367
                                                </div>
368
                                        </section>
369
                                        <section class="item running">
370
                                                <div class="what">
371
                                                        <div class="img-wrap">
372
                                                                <span class="snf-pc-full snf-font"></span>
373
                                                                <span class="os fedora">fedora</span>
374
                                                        </div>
375
                                                        <h4>My Awesome Machine</h4>
376
                                                </div>
377
                                                <div class="clearfix">
378
                                                        <ul class="connections">
379
                                                                <li>
380
                                                                        <a href="#" class="act" data-reveal-id="disconnect-from-network">&nbsp;</a>
381
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
382
                                                                        <div class="data">
383
                                                                                <ul>
384
                                                                                        <li>
385
                                                                                                <h5>ipv4</h5>
386
                                                                                                <p>001:648:2ffc</p>
387
                                                                                        </li>
388
                                                                                </ul>
389
                                                                        </div>
390
                                                                        <div class="firewall" data-firewall="unprotected">
391
                                                                                <p>Firewall <em>on</em></p>
392
                                                                                <div class="more">
393
                                                                                        <p class="fully">
394
                                                                                                <a href="">Fully protected mode<span class="snf-radio-unchecked"></span></a>
395
                                                                                        </p>
396
                                                                                        <p class="basic">
397
                                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
398
                                                                                        </p>
399
                                                                                        <p class="unprotected">
400
                                                                                                <a href="">Unprotected mode<span class="snf-radio-checked"></span></a>
401
                                                                                        </p>
402
                                                                                </div>
403
                                                                        </div>
404
                                                                </li>
405
                                                                <li>
406
                                                                        <a href="#" class="act" data-reveal-id="disconnect-from-network">&nbsp;</a>
407
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
408
                                                                        <div class="data">
409
                                                                                <ul>
410
                                                                                        <li>
411
                                                                                                <h5>IPv6</h5>
412
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
413
                                                                                        </li>
414
                                                                                </ul>
415
                                                                        </div>
416
                                                                        <div class="firewall" data-firewall="unprotected">
417
                                                                                <p>Firewall <em>on</em></p>
418
                                                                                <div class="more">
419
                                                                                        <p class="fully">
420
                                                                                                <a href="">Fully protected mode<span class="snf-radio-unchecked"></span></a>
421
                                                                                        </p>
422
                                                                                        <p class="basic">
423
                                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span></a>
424
                                                                                        </p>
425
                                                                                        <p class="unprotected">
426
                                                                                                <a href="">Unprotected mode<span class="snf-radio-checked"></span></a>
427
                                                                                        </p>
428
                                                                                </div>
429
                                                                        </div>
430
                                                                </li>
431
                                                                <li>
432
                                                                        <a href="#" class="act" data-reveal-id="disconnect-from-network">&nbsp;</a>
433
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
434
                                                                        <div class="data">
435
                                                                                <ul>
436
                                                                                        <li>
437
                                                                                                <h5>IPv6</h5>
438
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
439
                                                                                        </li>
440
                                                                                </ul>
441
                                                                        </div>
442
                                                                </li>
443
                                                        </ul>
444
                                                </div>
445
                                        </section>
446
                                        <section class="item running">
447
                                                <div class="what">
448
                                                        <div class="img-wrap">
449
                                                                <span class="snf-pc-full snf-font"></span>
450
                                                                <span class="os fedora">fedora</span>
451
                                                        </div>
452
                                                        <h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>
453
                                                </div>
454
                                                <div class="clearfix">
455
                                                        <ul class="connections">
456
                                                                <li>
457
                                                                        <a href="#" class="act" data-reveal-id="disconnect-from-network">&nbsp;</a>
458
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
459
                                                                        <div class="data">
460
                                                                                <ul>
461
                                                                                        <li>
462
                                                                                                <h5>IPv6</h5>
463
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
464
                                                                                        </li>
465
                                                                                </ul>
466
                                                                        </div>
467
                                                                </li>
468
                                                        </ul>
469
                                                </div>
470
                                        </section>
471
                                        <section class="connect-new">
472
                                                <div class="img-wrap">
473
                                                        <a href="" data-reveal-id="connect-vm-to-network">
474
                                                                <span class="snf-pc-full snf-font"></span>
475
                                                        </a>
476
                                                </div>
477
                                                <p><a href="" data-reveal-id="connect-vm-to-network">Connect Machine</a></p>
478
                                        </section>
479
                                </section>
480
                                <div class="placeholder"></div>
481
                        </div>
482
                </div>
483
        </div>
484
        <script src="javascripts/vendor/jquery.js"></script>
485
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
486
        <script src="javascripts/underscore-min.js"></script>
487
        <script src="javascripts/foundation/foundation.js"></script>
488
        <script src="javascripts/foundation/foundation.alerts.js"></script>
489
        
490
        <script src="javascripts/foundation/foundation.clearing.js"></script>
491
        
492
        <script src="javascripts/foundation/foundation.cookie.js"></script>
493
        
494
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
495
        
496
        <script src="javascripts/foundation/foundation.forms.js"></script>
497
        
498
        <script src="javascripts/foundation/foundation.joyride.js"></script>
499
        
500
        <script src="javascripts/foundation/foundation.magellan.js"></script>
501
        
502
        <script src="javascripts/foundation/foundation.orbit.js"></script>
503
        
504
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
505
        
506
        <script src="javascripts/foundation/foundation.reveal.js"></script>
507
        
508
        <script src="javascripts/foundation/foundation.section.js"></script>
509
        
510
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
511
        <script src="javascripts/foundation/foundation.topbar.js"></script>
512
        <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
513
        <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
514
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
515
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
516
        <!-- dropzone.js used for drag and drop files to upload them -->
517
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
518
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
519
        <!-- fabrastic.js used for the color picker -->
520
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
521
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
522
        <script src="javascripts/common.js"></script>
523
        
524
        <script type="text/javascript" src="javascripts/wizard.js"></script>
525
        <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
526
  <script>
527
    $(document).foundation();
528
  </script>
529
</body>
530
</html>