Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_list.html @ c076dbd9

History | View | Annotate | Download (53.7 kB)

1

    
2
<!DOCTYPE html>
3
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
4
<!--[if IE 8]>                                  <html class="no-js lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
6

    
7
<head>
8
        <meta charset="utf-8" />
9
    <meta name="viewport" content="width=device-width" />
10
    <title>VMs list</title>
11
    <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'>
12
    <link rel="stylesheet" href="stylesheets/normalize.css" />
13
    <link rel="stylesheet" href="stylesheets/app.css" />
14
    <link rel="stylesheet" href="stylesheets/farbtastic.css" />
15
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
16
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
17
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
18

    
19
    <script src="javascripts/vendor/custom.modernizr.js"></script>
20
</head>
21
<body>        
22
        <header class="header">
23
                <nav>
24
                        <ul class="icons-nav">
25
                                <li><a href="vm_list.html" data-tooltip ="has-tip " title="Machines"><span class="snf-pc-outline"></span></a></li>
26
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li>
27
                                <li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li>
28
                                <li><a href="pithos.html" data-tooltip ="has-tip" title="Storage"><span class="snf-pithos-outline"></span></a></li>
29
                                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-image-outline"></span></a></li>
30
                                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li>
31
                                <li><a href="" data-tooltip ="has-tip" title="IPs"><span class="snf-nic-outline"></span></a></li>
32
                <li><a href="" data-tooltip ="has-tip" title="SSH keys"><span class="snf-key-outline"></span></a></li>
33
                        </ul>
34
                </nav>
35
                <div class="login">
36
                        <div class="wrap">
37
                                <a href="">user1@synnefo.org</a>
38
                                <ul>
39
                                        <li><a href="">dashboard</a></li>
40
                                        <li><a href="">sign out</a></li>
41
                                </ul>
42
                        </div>
43
                </div>
44
                <div class="logo">
45
                        <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
46
                </div>
47
        </header>
48
        <div class="body-wrapper">
49
                <section class="overlay-area-custom">
50
                        <div id="vm-wizard" class="overlay-div wizard">
51
                                <div class="top">
52
                                        <div class="numbers">
53
                                                <div class="row">
54
                                                        <a href="" class="close"><span class="snf-close"></span></a>
55
                                                        <ul class="nums">
56
                                                                <li class="current preselected">
57
                                                                        <em><span>1</span></em>
58
                                                                        <p><strong>Select an OS</strong> Choose your preferred image</p>
59
                                                                </li>
60
                                                                <li>
61
                                                                        <em><span>2</span></em>
62
                                                                        <p><strong>Select CPUs, RAM and Disk Size </strong>
63
Available options are filtered based on the selected image</p>
64
                                                                </li>
65
                                                                <li>
66
                                                                        <em><span>3</span></em>
67
                                                                        <p><strong>Virtual machine custom options</strong>
68
Virtual machine custom options</p>
69
                                                                </li>
70
                                                                <li>
71
                                                                        <em><span>4</span></em>
72
                                                                        <p><strong>Confirm your settings</strong>
73
Confirm that the options you have selected are correct</p>
74
                                                                </li>
75
                                                        </ul>
76
                                                </div>
77
                                        </div>
78
                                        <div class="row menus">
79
                                                <nav class="sub-menu" data-step=1>
80
                                                        <ul>
81
                                                                <li><a href="" class="current preselected el2 firstfocus-1" data-img-type="system-images">System</a></li>
82
                                                                <li><a href="" data-img-type="my-images">My images</a></li>
83
                                                                <li><a href="" data-img-type="shared-images">Shared with me</a></li>
84
                                                                <li><a href="" data-next="el1" data-img-type="public-images">Public</a></li>
85
                                                        </ul>
86
                                                </nav>
87
                                                <nav class="sub-menu" data-step=2>
88
                                                        <ul>
89
                                                                <li><a href="" class="current preselected el4 firstfocus-2" data-size="small">Small</a></li>
90
                                                                <li><a href="" data-size="medium">Medium</a></li>
91
                                                                <li><a href="" data-size="large" data-next="el5">Large</a></li>
92
                                                        </ul>
93
                                                </nav>
94
                                        </div>
95
                                </div>
96
                                <div class="middle">
97
                                                <div class="steps">
98
                                                        <div class="step step-1 current preselected" id="step-1" data-step="1">
99
                                                                <ul class="os">
100
                                                                        <li  class="current preselected system-images">
101
                                                                                <div class="row">
102
                                                                                        <div class="img-col"><img src="images/os-kubuntu.png" alt=""></div>
103
                                                                                        <a href="" class="name-col el1">Kubuntu</a>
104
                                                                                        <div class="size-col">3.13 GB</div>
105
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
106
                                                                                </div>
107
                                                                                <div class="details">
108
                                                                                        <div class="row">
109
                                                                                                <h3>Image metadata</h3>
110
                                                                                                <dl>
111
                                                                                                        <dt>Owner</dt>
112
                                                                                                        <dd>system</dd>
113
                                                                                                        <dt>OS</dt>
114
                                                                                                        <dd>Kubuntu</dd>
115
                                                                                                        <dt>Kernel</dt>
116
                                                                                                        <dd>4.8.2</dd>
117
                                                                                                        <dt>Size</dt>
118
                                                                                                        <dd>2.51GB</dd>
119
                                                                                                        <dt>Users</dt>
120
                                                                                                        <dd>user</dd>
121
                                                                                                        <dt>Root partition</dt>
122
                                                                                                        <dd>1</dd>
123
                                                                                                </dl>
124
                                                                                        </div>
125
                                                                                </div>
126
                                                                        </li>
127
                                                                        <li class="public-images">
128
                                                                                <div class="row">
129
                                                                                        <div class="img-col"><img src="images/os-kubuntu.png" alt=""></div>
130
                                                                                        <a href="" class="name-col">Kubuntu LTS (by Kpal)</a>
131
                                                                                        <div class="size-col">10GB</div>
132
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
133
                                                                                </div>
134
                                                                                <div class="details">
135
                                                                                        <div class="row">
136
                                                                                                <h3>Image metadata</h3>
137
                                                                                                <dl>
138
                                                                                                        <dt>Owner</dt>
139
                                                                                                        <dd>system</dd>
140
                                                                                                        <dt>OS</dt>
141
                                                                                                        <dd>Kubuntu</dd>
142
                                                                                                        <dt>Kernel</dt>
143
                                                                                                        <dd>4.8.2</dd>
144
                                                                                                        <dt>Size</dt>
145
                                                                                                        <dd>2.51GB</dd>
146
                                                                                                        <dt>Users</dt>
147
                                                                                                        <dd>user</dd>
148
                                                                                                        <dt>Root partition</dt>
149
                                                                                                        <dd>1</dd>
150
                                                                                                </dl>
151
                                                                                        </div>
152
                                                                                </div>
153
                                                                        </li>
154
                                                                        <li class="public-images">
155
                                                                                <div class="row">
156
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
157
                                                                                        <a href="" class="name-col">Fedora (by Athina)</a>
158
                                                                                        <div class="size-col">10GB</div>
159
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
160
                                                                                </div>
161
                                                                                <div class="details">
162
                                                                                        <div class="row">
163
                                                                                                <h3>Image metadata</h3>
164
                                                                                                <dl>
165
                                                                                                        <dt>Owner</dt>
166
                                                                                                        <dd>system</dd>
167
                                                                                                        <dt>OS</dt>
168
                                                                                                        <dd>Kubuntu</dd>
169
                                                                                                        <dt>Kernel</dt>
170
                                                                                                        <dd>4.8.2</dd>
171
                                                                                                        <dt>Size</dt>
172
                                                                                                        <dd>2.51GB</dd>
173
                                                                                                        <dt>Users</dt>
174
                                                                                                        <dd>user</dd>
175
                                                                                                        <dt>Root partition</dt>
176
                                                                                                        <dd>1</dd>
177
                                                                                                </dl>
178
                                                                                        </div>
179
                                                                                </div>
180
                                                                        </li>
181
                                                                        <li class="shared-images">
182
                                                                                <div class="row">
183
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
184
                                                                                        <a href="" class="name-col">Fedora (by Athina)</a>
185
                                                                                        <div class="size-col">3.67 GB</div>
186
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
187
                                                                                </div>
188
                                                                                <div class="details">
189
                                                                                        <div class="row">
190
                                                                                                <h3>Image metadata</h3>
191
                                                                                                <dl>
192
                                                                                                        <dt>Owner</dt>
193
                                                                                                        <dd>system</dd>
194
                                                                                                        <dt>OS</dt>
195
                                                                                                        <dd>Kubuntu</dd>
196
                                                                                                        <dt>Kernel</dt>
197
                                                                                                        <dd>4.8.2</dd>
198
                                                                                                        <dt>Size</dt>
199
                                                                                                        <dd>2.51GB</dd>
200
                                                                                                        <dt>Users</dt>
201
                                                                                                        <dd>user</dd>
202
                                                                                                        <dt>Root partition</dt>
203
                                                                                                        <dd>1</dd>
204
                                                                                                </dl>
205
                                                                                        </div>
206
                                                                                </div>
207
                                                                        </li>
208
                                                                        <li class="my-images">
209
                                                                                <div class="row">
210
                                                                                        <div class="img-col"><img src="images/os-windows.png" alt=""></div>
211
                                                                                        <a href="" class="name-col">Windows Server 2012</a>
212
                                                                                        <div class="size-col">13.66 GB</div>
213
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
214
                                                                                </div>
215
                                                                                <div class="details">
216
                                                                                        <div class="row">
217
                                                                                                <h3>Image metadata</h3>
218
                                                                                                <dl>
219
                                                                                                        <dt>Owner</dt>
220
                                                                                                        <dd>system</dd>
221
                                                                                                        <dt>OS</dt>
222
                                                                                                        <dd>Kubuntu</dd>
223
                                                                                                        <dt>Kernel</dt>
224
                                                                                                        <dd>4.8.2</dd>
225
                                                                                                        <dt>Size</dt>
226
                                                                                                        <dd>2.51GB</dd>
227
                                                                                                        <dt>Users</dt>
228
                                                                                                        <dd>user</dd>
229
                                                                                                        <dt>Root partition</dt>
230
                                                                                                        <dd>1</dd>
231
                                                                                                </dl>
232
                                                                                        </div>
233
                                                                                </div>
234
                                                                        </li>
235
                                                                        <li class="system-images">
236
                                                                                <div class="row">
237
                                                                                        <div class="img-col"><img src="images/os-windows.png" alt=""></div>
238
                                                                                        <a href="" class="name-col">Windows Server 2012</a>
239
                                                                                        <div class="size-col">13.66 GB</div>
240
                                                                                        <div class="btn-col"><a href="" class="wrap-a">details</a></div>
241
                                                                                </div>
242
                                                                                <div class="details">
243
                                                                                        <div class="row">
244
                                                                                                <h3>Image metadata</h3>
245
                                                                                                <dl>
246
                                                                                                        <dt>Owner</dt>
247
                                                                                                        <dd>system</dd>
248
                                                                                                        <dt>OS</dt>
249
                                                                                                        <dd>Kubuntu</dd>
250
                                                                                                        <dt>Kernel</dt>
251
                                                                                                        <dd>4.8.2</dd>
252
                                                                                                        <dt>Size</dt>
253
                                                                                                        <dd>2.51GB</dd>
254
                                                                                                        <dt>Users</dt>
255
                                                                                                        <dd>user</dd>
256
                                                                                                        <dt>Root partition</dt>
257
                                                                                                        <dd>1</dd>
258
                                                                                                </dl>
259
                                                                                        </div>
260
                                                                                </div>
261
                                                                        </li>
262
                                                                        <li class="system-images">
263
                                                                                <div class="row">
264
                                                                                        <div class="img-col"><img src="images/os-windows.png" alt=""></div>
265
                                                                                        <a href="" class="name-col">Windows Server 2008</a>
266
                                                                                        <div class="size-col">10.79 GB</div>
267
                                                                                        <div class="btn-col"><a href="" class="wrap-a" data-next="el3">details</a></div>
268
                                                                                </div>
269
                                                                                <div class="details">
270
                                                                                        <div class="row">
271
                                                                                                <h3>Image metadata</h3>
272
                                                                                                <dl>
273
                                                                                                        <dt>Owner</dt>
274
                                                                                                        <dd>system</dd>
275
                                                                                                        <dt>OS</dt>
276
                                                                                                        <dd>Kubuntu</dd>
277
                                                                                                        <dt>Kernel</dt>
278
                                                                                                        <dd>4.8.2</dd>
279
                                                                                                        <dt>Size</dt>
280
                                                                                                        <dd>2.51GB</dd>
281
                                                                                                        <dt>Users</dt>
282
                                                                                                        <dd>user</dd>
283
                                                                                                        <dt>Root partition</dt>
284
                                                                                                        <dd>1</dd>
285
                                                                                                </dl>
286
                                                                                        </div>
287
                                                                                </div>
288
                                                                        </li>
289
                                                                        
290
                                                                </ul>
291
                                                        </div>
292
                                                        <div class="step step-2" id="step-2" data-step=2>
293
                                                                <div class="row">
294
                                                                        <form class="custom">
295
                                                                          <select class="medium">
296
                                                                            <option class="el5">Basic Project</option>
297
                                                                            <option>Project 2</option>
298
                                                                            <option>Project 3</option>
299
                                                                          </select>
300
                                                                        </form>
301
                                                                        <ul class="flavor">
302
                                                                                <li>
303
                                                                                        <div class="title">
304
                                                                                                <span class="snf-chip-outline snf-font"></span>
305
                                                                                                <h2>
306
                                                                                                        CPU<span> (x cores)</span>
307
                                                                                                        <em>Choose number of CPU cores</em>
308
                                                                                                </h2>
309
                                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
310
                                                                                        </div>
311
                                                                                        <div class="options-bar">
312
                                                                                                <div class="bar">
313
                                                                                                        <div class="wrap">
314
                                                                                                                <div class="container">
315
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
316
                                                                                                                        <div class="total" style="width:60%">
317
                                                                                                                                <div class="current" style="width:30%"></div>
318
                                                                                                                                <span>60%</span>
319
                                                                                                                        </div>
320
                                                                                                                </div>
321
                                                                                                        </div>
322
                                                                                                </div>
323
                                                                                                <ul class="options with-flavor">
324
                                                                                                        <li><a href="" class="small current preselected  wrap-a" data-help="help text for 1">1</a></li>
325
                                                                                                        <li><a href="" class="medium wrap-a" data-help="help text for 2">2</a></li>
326
                                                                                                        <li><a href="" class="large disabled wrap-a" data-help="help text for 3">3</a></li>
327
                                                                                                        <li><a href="" class="disabled wrap-a" data-help="help text for 4">4</a></li>
328
                                                                                                </ul>
329
                                                                                        </div>
330
                                                                                </li>
331
                                                                                <li>
332
                                                                                        <div class="title">
333
                                                                                                <span class="snf-ram-outline snf-font"></span>
334
                                                                                                <h2>
335
                                                                                                        Memory Size 
336
                                                                                                        <span> (MB)</span>
337
                                                                                                        <em>Choose memory size</em>
338
                                                                                                </h2>
339
                                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
340
                                                                                        </div>
341
                                                                                        <div class="options-bar">
342
                                                                                                <div class="bar">
343
                                                                                                        <div class="wrap">
344
                                                                                                                <div class="container">
345
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
346
                                                                                                                        <div class="total" style="width:60%">
347
                                                                                                                                <div class="current" style="width:30%"></div>
348
                                                                                                                                <span>60%</span>
349
                                                                                                                        </div>
350
                                                                                                                </div>
351
                                                                                                        </div>
352
                                                                                                </div>
353
                                                                                                <ul class="options with-flavor">
354
                                                                                                        <li><a href="" class="small current preselected wrap-a">1024</a></li>
355
                                                                                                        <li><a href="" class="medium wrap-a">2048</a></li>
356
                                                                                                        <li><a href="" class="large wrap-a">4096</a></li>
357
                                                                                                </ul>
358
                                                                                        </div>
359
                                                                                </li>
360
                                                                                <li>
361
                                                                                        <div class="title">
362
                                                                                                <span class="snf-volume-outline snf-font"></span>
363
                                                                                                <h2>
364
                                                                                                        Disk Size<span> (GB)</span>
365
                                                                                                        <em>Choose disk size</em>
366
                                                                                                </h2>
367
                                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
368
                                                                                        </div>
369
                                                                                        <div class="options-bar">
370
                                                                                                <div class="bar">
371
                                                                                                        <div class="wrap">
372
                                                                                                                <div class="container">
373
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
374
                                                                                                                        <div class="total low" style="width:40%">
375
                                                                                                                                <div class="current" style="width:80%"></div>
376
                                                                                                                                <span>40%</span>
377
                                                                                                                        </div>
378
                                                                                                                </div>
379
                                                                                                        </div>
380
                                                                                                </div>
381
                                                                                                <ul class="options with-flavor">
382
                                                                                                        <li><a href="" class="small current preselected wrap-a">10</a></li>
383
                                                                                                        <li><a href="" class="medium wrap-a">20</a></li>
384
                                                                                                        <li><a href="" class="large wrap-a">30</a></li>
385
                                                                                                        <li><a href="" class="wrap-a">40</a></li>
386
                                                                                                </ul>
387
                                                                                        </div>
388
                                                                                </li>
389
                                                                                <li>
390
                                                                                        <div class="title">
391
                                                                                                <span class="snf-volume-outline snf-font"></span>
392
                                                                                                <h2>
393
                                                                                                        Storage
394
                                                                                                        <em>Select storage type</em>
395
                                                                                                </h2>
396
                                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
397
                                                                                        </div>
398
                                                                                        <div class="options-bar">
399
                                                                                                <div class="bar">
400
                                                                                                        <div class="wrap  disabled-progress-bar">
401
                                                                                                                <div class="container">
402
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
403
                                                                                                                        <div class="total" style="width:100%">
404
                                                                                                                                <div class="current" style="width:0%"></div>
405
                                                                                                                                <span></span>
406
                                                                                                                        </div>
407
                                                                                                                </div>
408
                                                                                                        </div>
409
                                                                                                </div>
410
                                                                                                <ul class="options vm-storage-selection">
411
                                                                                                        <li><a href="" class="current preselected wrap-a">DRBD</a></li>
412
                                                                                                        <li><a href="" data-next="el3" class="wrap-a">Archipelago</a></li>
413
                                                                                                </ul>
414
                                                                                        </div>
415
                                                                                </li>
416
                                                                        </ul>
417
                                                                </div>
418
                                                        </div>
419
                                                        <div class="step step-3" id="step-3" data-step=3>
420
                                                                <div class="advanced-conf-step">
421
                                                                        <div class="adv-main row">
422
                                                                                <div class="name">
423
                                                                                        <h2>Machine name</h2>
424
                                                                                        <span class="input">
425
                                                                                                <input type="text" placeholder="My Ubuntu Server" class="el7">
426
                                                                                        </span>
427
                                                                                </div>
428
                                                                                <div class="expand-btn">
429
                                                                                        <a class="expand-arrow" href="">
430
                                                                                                Advanced Configuration
431
                                                                                                <span class="snf-arrow-down preselected"></span>
432
                                                                                        </a>
433
                                                                                </div>
434
                                                                        </div>
435
                                                                        <div class="advanced-conf-options">
436
                                                                                <div class="ssh-keys-area area">
437
                                                                                        <div class="row">
438
                                                                                                <h2>Public SSH keys</h2>
439
                                                                                                <p>Your account contains the following SSH public keys. Select one or more to activate in your new machine. You will then be able to ssh with the corresponding private key without a password."</p>
440
                                                                                                <ul>
441
                                                                                                        <li class="with-checkbox">
442
                                                                                                                <h3>My public key long name one </h3>
443
                                                                                                                <a href="" class="check">
444
                                                                                                                        <span class="snf-checkbox-unchecked"></span>
445
                                                                                                                </a>
446
                                                                                                        </li>
447
                                                                                                        <li class="with-checkbox">
448
                                                                                                                <h3>Other public key </h3>
449
                                                                                                                <a href="" class="check">
450
                                                                                                                        <span class="snf-checkbox-unchecked"></span>
451
                                                                                                                </a>
452
                                                                                                        </li>
453
                                                                                                        <li class="with-checkbox">
454
                                                                                                                <h3>My public key long name one </h3>
455
                                                                                                                <a href="" class="check">
456
                                                                                                                        <span class="snf-checkbox-unchecked"></span>
457
                                                                                                                </a>
458
                                                                                                        </li>
459
                                                                                                </ul>
460
                                                                                                <div>
461
                                                                                                        <a href="" class="btn5 wrap-a" data-reveal-id="sshkeys-wizard" title="set data-reveal-id: sshkeys-wizard">manage ssh keys</a>
462
                                                                                                </div>
463
                                                                                        </div>
464
                                                                                </div>
465
                                                                                <div class="networks-area area">
466
                                                                                        <h2 class="row">Networks</h2>
467
                                                                                        <ul>
468
                                                                                                <li class="with-checkbox row has-more select-net">
469
                                                                                                        <h3 class="">        
470
                                                                                                                <span class="net-icons">
471
                                                                                                                        <span class="temp-line line1"></span>
472
                                                                                                                        <span class="snf-www"></span>
473
                                                                                                                        <span class="snf-network-full"></span>
474
                                                                                                                </span>
475
                                                                                                                Public Network
476
                                                                                                        </h3>
477
                                                                                                        <a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a>
478
                                                                                                </li>
479
                                                                                                <li class="more">
480
                                                                                                        <div class="row">
481
                                                                                                                <div class="with-checkbox clearfix">
482
                                                                                                                        <h3>192.168.2.3</h3>
483
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-checked prechecked"></span></a>
484
                                                                                                                </div>
485
                                                                                                                <div class="with-checkbox clearfix">
486
                                                                                                                        <h3>192.168.2.3</h3>
487
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
488
                                                                                                                </div>
489
                                                                                                                <div class="with-checkbox clearfix">
490
                                                                                                                        <h3>192.168.2.3</h3>
491
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
492
                                                                                                                </div>
493
                                                                                                                <div>
494
                                                                                                                        <a href="" class="btn5 wrap-a">allocate ip</a>
495
                                                                                                                </div>
496
                                                                                                        </div>
497
                                                                                                </li>
498
                                                                                                <li class="with-checkbox row select-net">
499
                                                                                                        <h3 class="net-name">
500
                                                                                                                <span class="net-icons">
501
                                                                                                                        <span class="temp-line line1"></span>
502
                                                                                                                        <span class="temp-line line2"></span>
503
                                                                                                                        <span class="snf-www"></span>
504
                                                                                                                        <span class="snf-router-outline"></span>
505
                                                                                                                        <span class="snf-network-full"></span>
506
                                                                                                                </span>
507
                                                                                                                Routed Network
508
                                                                                                        </h3>
509
                                                                                                        <a href="" class="check">
510
                                                                                                                <span class="snf-checkbox-unchecked"></span>
511
                                                                                                        </a>
512
                                                                                                </li>
513
                                                                                                <li class="with-checkbox row select-net">
514
                                                                                                        <h3 class="net-name">
515
                                                                                                                <span class="net-icons">
516
                                                                                                                        <span class="snf-network-full"></span>
517
                                                                                                                </span>
518
                                                                                                                Private Network 1
519
                                                                                                        </h3>
520
                                                                                                        <a href="" class="check">
521
                                                                                                                <span class="snf-checkbox-unchecked"></span>
522
                                                                                                        </a>
523
                                                                                                </li>
524
                                                                                                <li class="with-checkbox row select-net">
525
                                                                                                        <h3 class="net-name">
526
                                                                                                                <span class="net-icons">
527
                                                                                                                        <span class="snf-network-full"></span>
528
                                                                                                                </span>
529
                                                                                                                Private Network 2
530
                                                                                                        </h3>
531
                                                                                                        <a href="" class="check">
532
                                                                                                                <span class="snf-checkbox-unchecked"></span>
533
                                                                                                        </a>
534
                                                                                                </li>
535
                                                                                        </ul>
536
                                                                                </div>
537
                                                                                <div class="tags-area area">
538
                                                                                        <div class="row">
539
                                                                                                <h2>Tags</h2>
540
                                                                                                <p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
541
                                                                                                <ul>
542
                                                                                                        <li>
543
                                                                                                                <h3>My tags</h3>
544
                                                                                                                <span>select</span>
545
                                                                                                        </li>
546
                                                                                                        <li class="with-checkbox">
547
                                                                                                                <h3>
548
                                                                                                                        <span class="tag-demo tag4"></span>
549
                                                                                                                        Operating system
550
                                                                                                                </h3>
551
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
552
                                                                                                        </li>
553
                                                                                                        <li class="with-checkbox">
554
                                                                                                                <h3>
555
                                                                                                                        <span class="tag-demo tag5"></span>
556
                                                                                                                        Pirate PC1
557
                                                                                                                </h3>
558
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
559
                                                                                                        </li>
560
                                                                                                        <li class="with-checkbox">
561
                                                                                                                <h3>
562
                                                                                                                        <span class="tag-demo tag6"></span>
563
                                                                                                                        Pirate PC1
564
                                                                                                                </h3>
565
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
566
                                                                                                        </li>
567
                                                                                                </ul>
568
                                                                                                <div ><a class="btn5 show-add-tag wrap-a" href="" id="show-add-tag">add new Tag</a></div>
569
                                                                                                <div class="snf-color-picker">
570
                                                                                                        <form action="#" method="post">
571
                                                                                                                <div id="picker-1">
572
                                                                                                                        <div class="farbtastic">
573
                                                                                                                                <div class="color" style="background-color: rgb(255, 0, 21);"></div>
574
                                                                                                                                <div class="wheel"></div>
575
                                                                                                                                <div class="overlay"></div>
576
                                                                                                                                <div class="h-marker marker" style="left: 90px; top: 13px;"></div>
577
                                                                                                                                <div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
578
                                                                                                                        </div>
579
                                                                                                                </div>
580
                                                                                                                <div class="form-item">
581
                                                                                                                        <input type="text" id="color-1" class="color-preview" name="color" value="#16C1E9" disabled
582
                                                                                                                        <span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
583
                                                                                                                </div>
584
                                                                                                        </form>                                                                        
585
                                                                                                        <div class="btns">
586
                                                                                                                <a class="btn5 wrap-a" href="">OK</a>
587
                                                                                                                <a class="btn5 hide-add-tag wrap-a" href="">CANCEL</a>
588
                                                                                                        </div>
589
                                                                                                        <a href="" id="hide-add-tag-dummy" style="position:relative;top:50px">&nbsp;</a>
590
                                                                                                </div>
591
                                                                                        </div>
592
                                                                                </div>
593
                                                                        </div>
594
                                                                </div>
595
        <!-- end step 3 -->                                </div>
596
                                                        <div class="step step-4" id="step-4" data-step=4>
597
                                                                <div class="summary">
598
                                                                        <div class="row">
599
                                                                                <div class="wrap">
600
                                                                                        <dl>
601
                                                                                                <dt><span class="snf-pc-full snf-font"></span>Machine name</dt>
602
                                                                                                <dd>handsome frank</dd>
603
                                                                                        </dl>
604
                                                                                </div>
605
                                                                        </div>
606
                                                                        <div class="row">
607
                                                                                <div class="wrap">
608
                                                                                        <dl>
609
                                                                                                <dt>Image</dt>
610
                                                                                                <dd>Fedora</dd>
611
                                                                                                <dt>Name</dt>
612
                                                                                                <dd>Debian Base</dd>
613
                                                                                                <dt>Desciption</dt>
614
                                                                                                <dd>open suse description open suse description open suse description open suse description open suse description</dd>
615
                                                                                                <dt>os</dt>
616
                                                                                                <dd>Debian</dd>
617
                                                                                                <dt>Size</dt>
618
                                                                                                <dd>10.4GB</dd>
619
                                                                                                <dt>GUI</dt>
620
                                                                                                <dd>No GUI</dd>
621
                                                                                                <dt>Kernel</dt>
622
                                                                                                <dd>2.3.4</dd>
623
                                                                                        </dl>
624
                                                                                </div>
625
                                                                        </div>
626
                                                                        <div class="row">
627
                                                                                <div class="wrap">
628
                                                                                        <h2>Flavor</h2>
629
                                                                                        <dl>
630
                                                                                                <dt><span class="snf-chip-outline snf-font"></span>CPUs</dt>
631
                                                                                                <dd>4x</dd>
632
                                                                                                <dt><span class="snf-ram-outline snf-font"></span>Memory</dt>
633
                                                                                                <dd>512 MB</dd>
634
                                                                                                <dt><span class="snf-volume-outline snf-font"></span>Disk</dt>
635
                                                                                                <dd>4GB</dd>
636
                                                                                                <dt><span class="snf-volume-outline snf-font"></span>Storage Type</dt>
637
                                                                                                <dd>DRBD</dd>
638
                                                                                        </dl>
639
                                                                                </div>
640
                                                                        </div>
641
                                                                        <div class="row">
642
                                                                                <div class="wrap">
643
                                                                                        <dl>
644
                                                                                                <dt>Machine Tags</dt>
645
                                                                                                <dd>Database server</dd>
646
                                                                                                <dt>SSH Keys</dt>
647
                                                                                                <dd>
648
                                                                                                        my public key 1<br>
649
                                                                                                        my public key 3<br>
650
                                                                                                </dd>
651
                                                                                                <dt>IPs</dt>
652
                                                                                                <dd>192.168.1.3<br>192.168.1.3</dd>
653
                                                                                                <dt>Private networks</dt>
654
                                                                                                <dd>No private networks selected</dd>
655
                                                                                        </dl>
656
                                                                                </div>
657
                                                                        </div>
658
                                                                </div>
659
                                                        </div>
660
                                                </div>
661
                                        </div>
662
                                <div class="bottom">
663
                                        <div class="row">
664
                                                <a href="" class="nav prev el3"><span>CANCEL</span></a>
665
                                                <a href="" class="nav next" data-step="1" data-next="el2"><span>NEXT</span></a>
666
                                        </div>
667
                                </div>
668
                        </div>
669
                </section>
670
                <section class="overlay-area-reveal">
671
                        <div id="sshkeys-wizard" class="reveal-modal medium secondary-wizard">
672
                <h2>SSH keys</h2>
673
                <a class="close-reveal-modal close" title="close">x</a>
674
                <p>You can use SSH keys to establish a secure connection between your computer and your virtual machines.<br>
675
                Note: SSH keys are supported only for Linux machines.</p>
676
                <p>Click "generate new" to create a new SSH key pair.</p>
677
                <p>Click "import/add" to import your public key from your home machine or to copy/paste its contents to ~okeanos.</p>
678
                <p class="buttons"><a href="" class="btn4 generate-key-btn">generate</a><a href="" class="btn4 import-key-btn">add/import</a></p>
679
                <div class="generate-key-area">
680
                    <p>clock tba</p>
681
                    <p>
682
                        Your new public key has been added.<br>
683
                        To download your *private key* click here.
684
                    </p>
685
                    <p>
686
                        Note: We do not keep it! I f you don't download now you cannot access it in the future.
687
                    </p>
688
                <p class="buttons"><a href="" class="btn4">ok</a></p>
689
                </div>
690
                <div class="import-key-area">
691
                    <div class="key-name">
692
                    <h4>Key name</h4>
693
                        <span class="input"><input class="key-name-input" type="text" placeholder="my key"></span>
694
                        <div class="error-msg"></div>
695
                    </div>
696
                    <div class="key-content">
697
                        <h4>Key content</h4>
698
                        <div class="error-msg"></div>
699
                        <textarea></textarea>
700
                    </div>
701
                    <div class="upload-key">
702
                        <label>Import from file (header maybe?)</label>
703
                            <p class="buttons">
704
                                <a href="" class="browse-files dz-clickable">browse files</a>
705
                            </p>
706
                        <form action="#" class="dropzone" id="files-dropzone">
707
                            <p>sto plai?</p>
708
                            <ul class="files dropzone-files"></ul>
709
                            <div class="dz-default dz-message"><span></span></div>
710
                        </form>
711
                        <p class="buttons"><a href="" class="btn4">Cancel</a><a href="" class="btn4">Submit</a></p>
712
                    </div>
713
                </div>
714
                <h3>Your SSH public keys</h3>
715
                <ul>
716
                    <li>
717
                        <div class="name-col">key name 1</div>
718
                        <div class="actions-col">
719
                            <a href="" class="show-key">key</a>
720
                            <a href="" class="show-fingerprint">fingerprint</a>
721
                            <a href="" class="edit">edit</a>
722
                            <a href="">remove</a>
723
                        </div>
724
                    </li>
725
                    <li>
726
                        <div class="name-col">key name 2</div>
727
                        <div class="actions-col">
728
                            <a href="" class="show-key">key</a>
729
                            <a href="" class="show-fingerprint">fingerprint</a>
730
                            <a href="" class="edit">edit</a>
731
                            <a href="">remove</a>
732
                        </div>
733
                    </li>
734
                </ul>
735
                <p class="buttons"><a href="" class="btn4 close-reveal-modal">close</a></p>
736
            </div>
737

    
738
                        <div id="vm-connect" class="reveal-modal medium">
739
                                <p>A direct connection to this machine can be established using the<a href="http://en.wikipedia.org/wiki/Secure_Shell" title=""> SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
740
                                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
741
                                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
742
                                <p>Alternatively you can connect to your VM via <a href="#" title="">Console</a> (slow connection - meant only for troubleshooting).</p>
743
                                <a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a>
744
                        </div>
745
                        <div id="start-confirm" class="reveal-modal medium">
746
                                <p class="message-forimg">Are you sure you want to turn on your machine?</p>
747
                                <p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p>
748
                                <a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a>
749
                        </div>
750
                        <div id="reboot-confirm" class="reveal-modal medium">
751
                                <p class="message-forimg">Are you sure you want to reboot your machine?</p>
752
                                <p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p>
753
                                <a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a>
754
                        </div>
755
                        <div id="shutdown-confirm" class="reveal-modal medium">
756
                                <p class="message-forimg">Are you sure you want to shutdown your machine?</p>
757
                                <p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p>
758
                                <a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a>
759
                        </div>
760
                        <div id="destroy-vm-confirm" class="reveal-modal medium">
761
                                <p class="message-forimg">Are you sure you want to destroy your machine?</p>
762
                                <p class="buttons"><a href="" class="btn4 wrap-a">Yes</a><a href="" class="btn4 wrap-a">No</a></p>
763
                                <a class="close-reveal-modal has-tip" data-tooltip ="close ">x</a>
764
                        </div>
765
                </section>
766
                <section class="actions-bar clearfix">
767
                        <h2>Virtual Machines</h2>
768
                        <div class="rt-actions">
769
                                <a href="vm_details.html" class="single"></a>
770
                                <a href="#grid" class="grid"><span class="snf-gridview current"></span></a>
771
                                <a href="#list" class="list"><span class="snf-listview "></span></a>
772
                        </div>
773
                        <div class="filter-menu">
774
                                <div><a class="filter" href="">Filter</a></div>
775
                                <ul class="options">
776
                                        <li><a href="">option 1</a></li>
777
                                        <li><a href="">option 2</a></li>
778
                                        <li><a href="">option 3</a></li>
779
                                        <li><a href="">option 4</a></li>
780
                                </ul>
781
                        </div>
782
                        <div id="hd-search" class="hd-search">
783
                            <form>
784
                                        <span class="hd-icon-search snf-search"></span>
785
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
786
                            </form>
787
                        </div>
788
                </section>
789
                <section class="main row">
790
                        <div class="vms entities grid-view">
791
                                <ul class="items-list">
792
                                        <li data-status="add-new" class="add-new" data-overlay-id="vm-wizard">
793
                                                <div class="container">
794
                                                        <div class="check"></div>
795
                                                        <div class="img-wrap">
796
                                                                <span class="snf-pc-create-full snf-font"></span>
797
                                                        </div>
798
                                                        <h4>New Machine</h4>
799
                                                </div>
800
                                        </li>
801
                                        <li data-status="building" class="building">
802
                                                <a href="" class="btn5 temp">animation</a>
803
                                                <div class="more">
804
                                                        <div class="clearfix">
805
                                                                <div class="col lt">
806
                                                                        <ul>
807
                                                                                <li><a href=""   class="start">Start</a></li>
808
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
809
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
810
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
811
                                                                                 <li><a href="">Option i</a></li>
812
                                                                        </ul>
813
                                                                </div>
814
                                                                <div class="col rt">
815
                                                                        <ul>
816
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
817
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
818
                                                                        </ul>
819
                                                                </div>
820
                                                        </div>
821
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
822
                                                </div>
823
                                                <div class="container">
824
                                                        <div class="check">
825
                                                                <span class="snf-checkbox-unchecked"></span>
826
                                                        </div>
827
                                                        <div class="img-wrap">
828
                                                                <span class="snf-pc-full snf-font incomplete"></span>
829
                                                                <span class="snf-pc-full snf-font complete"></span>
830
                                                                <span class="os">unknown</span>
831
                                                        </div>
832
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
833
                                                        <div class="actions">
834
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
835
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
836
                                                        </div>
837
                                                        <div class= "status">
838
                                                                <span class="state">BUILDING</span>
839
                                                                <span class="logs">798.56 MB of 4.33 GB (18%)</span>
840
                                                        </div>
841
                                                        <div class="tags">
842
                                                        </div>
843
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
844
                                                </div>
845
                                        </li>
846
                                        <li data-status="error" class="error">
847
                                                <div class="more">
848
                                                        <div class="clearfix">
849
                                                                <div class="col lt">
850
                                                                        <ul>
851
                                                                                <li><a href=""   class="start">Start</a></li>
852
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
853
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
854
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
855
                                                                                 <li><a href="">Option i</a></li>
856
                                                                        </ul>
857
                                                                </div>
858
                                                                <div class="col rt">
859
                                                                        <ul>
860
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
861
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
862
                                                                        </ul>
863
                                                                </div>
864
                                                        </div>
865
                                                        <div class="name">vm name 1</div>
866
                                                </div>
867
                                                <div class="container">
868
                                                        <div class="check">
869
                                                                <span class="snf-checkbox-unchecked"></span>
870
                                                        </div>
871
                                                        <div class="img-wrap">
872
                                                                <span class="snf-pc-full snf-font"></span>
873
                                                                <span class="os">unknown</span>
874
                                                        </div>
875
                                                        <h4>short name</h4>
876
                                                        <div class="actions">
877
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
878
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
879
                                                        </div>
880
                                                        <div class="tags">
881
                                                        </div>
882
                                                        <div class= "status">
883
                                                                <span class="state">ERROR</span>
884
                                                                <span class="logs">Image customization failed. Did not finish on time.</span>
885
                                                        </div>
886
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
887
                                                </div>
888
                                        </li>
889
                                        <li data-status="running" class="running">
890
                                                <div class="more">
891
                                                        <div class="clearfix">
892
                                                                <div class="col lt">
893
                                                                        <ul>
894
                                                                                <li><a href=""   class="start">Start</a></li>
895
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
896
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
897
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
898
                                                                                 <li><a href="">Option i</a></li>
899
                                                                        </ul>
900
                                                                </div>
901
                                                                <div class="col rt">
902
                                                                        <ul>
903
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
904
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
905
                                                                        </ul>
906
                                                                </div>
907
                                                        </div>
908
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
909
                                                </div>
910
                                                <div class="container">
911
                                                        <div class="check">
912
                                                                <span class="snf-checkbox-unchecked"></span>
913
                                                        </div>
914
                                                        <div class="img-wrap">
915
                                                                <span class="snf-pc-full snf-font"></span>
916
                                                                <span class="os fedora">fedora</span>
917
                                                        </div>
918
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
919
                                                        <div class="actions">
920
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
921
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
922
                                                        </div>
923
                                                        <div class= "status">
924
                                                        </div>
925
                                                        <div class="tags">
926
                                                        </div>
927
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
928
                                                </div>
929
                                        </li>
930
                                        <li data-status="rebooting" class="rebooting">
931
                                                <a href="" class="btn5 temp">animation</a>
932
                                                <div class="more">
933
                                                        <div class="clearfix">
934
                                                                <div class="col lt">
935
                                                                        <ul>
936
                                                                                <li><a href="" class="start">Start</a></li>
937
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
938
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
939
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
940
                                                                                 <li><a href="">Option i</a></li>
941
                                                                        </ul>
942
                                                                </div>
943
                                                                <div class="col rt">
944
                                                                        <ul>
945
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
946
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
947
                                                                        </ul>
948
                                                                </div>
949
                                                        </div>
950
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
951
                                                </div>
952
                                                <div class="container">
953
                                                        <div class="check">
954
                                                                <span class="snf-checkbox-unchecked"></span>
955
                                                        </div>
956
                                                        <div class="img-wrap">
957
                                                                <span class="snf-pc-full snf-font"></span>
958
                                                                <span class="os kubuntu">kubuntu</span>
959
                                                        </div>
960
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
961
                                                        <div class="actions">
962
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
963
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
964
                                                        </div>
965
                                                        <div class= "status">
966
                                                                <span class="state">REBOOTING</span>
967
                                                        </div>
968
                                                        <div class="tags">
969
                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
970
                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
971
                                                        </div>
972
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
973
                                                </div>
974
                                        </li>
975
                                        <li data-status="starting" class="starting">
976
                                                <div class="more">
977
                                                        <div class="clearfix">
978
                                                                <div class="col lt">
979
                                                                        <ul>
980
                                                                                <li><a href=""   class="start">Start</a></li>
981
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
982
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
983
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
984
                                                                                 <li><a href="">Option i</a></li>
985
                                                                        </ul>
986
                                                                </div>
987
                                                                <div class="col rt">
988
                                                                        <ul>
989
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
990
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
991
                                                                        </ul>
992
                                                                </div>
993
                                                        </div>
994
                                                        <div class="name">vm name 1 </div>
995
                                                </div>
996
                                                <div class="container">
997
                                                        <div class="check">
998
                                                                <span class="snf-checkbox-unchecked"></span>
999
                                                        </div>
1000
                                                        <div class="img-wrap">
1001
                                                                <span class="snf-pc-full snf-font"></span>
1002
                                                                <span class="os kubuntu">kubuntu</span>
1003
                                                        </div>
1004
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
1005
                                                        <div class="actions">
1006
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1007
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1008
                                                        </div>
1009
                                                        <div class= "status">
1010
                                                                <span class="state">STARTING</span>
1011
                                                        </div>
1012
                                                        <div class="tags">
1013
                                                        </div>
1014
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1015
                                                </div>
1016
                                        </li>
1017
                                        <li  data-status="shutting" class="shutting">
1018
                                                <div class="more">
1019
                                                        <div class="clearfix">
1020
                                                                <div class="col lt">
1021
                                                                        <ul>
1022
                                                                                <li><a href=""   class="start">Start</a></li>
1023
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
1024
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
1025
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
1026
                                                                                 <li><a href="">Option i</a></li>
1027
                                                                        </ul>
1028
                                                                </div>
1029
                                                                <div class="col rt">
1030
                                                                        <ul>
1031
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
1032
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
1033
                                                                        </ul>
1034
                                                                </div>
1035
                                                        </div>
1036
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
1037
                                                </div>
1038
                                                <div class="container">
1039
                                                        <div class="check">
1040
                                                                <span class="snf-checkbox-unchecked"></span>
1041
                                                        </div>
1042
                                                        <div class="img-wrap">
1043
                                                                <div class="img running">
1044
                                                                        <span class="snf-pc-full snf-font"></span>
1045
                                                                        <span class="os kubuntu">kubuntu</span>
1046
                                                                </div>
1047
                                                        </div>
1048
                                                        <h4>short name</h4>
1049
                                                        <div class="actions">
1050
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1051
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1052
                                                        </div>
1053
                                                        <div class= "status">
1054
                                                                <span class="state">SHUTTING DOWN</span>
1055
                                                        </div>
1056
                                                        <div class="tags">
1057
                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
1058
                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
1059
                                                        </div>
1060
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1061
                                                </div>
1062
                                        </li>
1063
                                         <li data-status="running" class="running">
1064
                                                <div class="more">
1065
                                                        <div class="clearfix">
1066
                                                                <div class="col lt">
1067
                                                                        <ul>
1068
                                                                                <li><a href=""   class="start">Start</a></li>
1069
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
1070
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
1071
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
1072
                                                                                 <li><a href="">Option i</a></li>
1073
                                                                        </ul>
1074
                                                                </div>
1075
                                                                <div class="col rt">
1076
                                                                        <ul>
1077
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
1078
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
1079
                                                                        </ul>
1080
                                                                </div>
1081
                                                        </div>
1082
                                                        <div class="name">short name</div>
1083
                                                </div>
1084
                                                <div class="container">
1085
                                                        <div class="check">
1086
                                                                <span class="snf-checkbox-unchecked"></span>
1087
                                                        </div>
1088
                                                        <div class="img-wrap">
1089
                                                                <span class="snf-pc-full snf-font"></span>
1090
                                                                <span class="os kubuntu">kubuntu</span>
1091
                                                        </div>
1092
                                                        <h4>short name</h4>
1093
                                                        <div class="actions">
1094
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1095
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1096
                                                        </div>
1097
                                                        <div class= "status">
1098
                                                                <span class="state"></span>
1099
                                                        </div>
1100
                                                        <div class="tags">
1101
                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
1102
                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
1103
                                                                <a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
1104
                                                        </div>
1105
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1106
                                                </div>
1107
                                        </li>
1108
                                        <li data-status="off" class="off">
1109
                                                <div class="more">
1110
                                                        <div class="clearfix">
1111
                                                                <div class="col lt">
1112
                                                                        <ul>
1113
                                                                                <li><a href=""   class="start">Start</a></li>
1114
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
1115
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
1116
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
1117
                                                                                 <li><a href="">Option i</a></li>
1118
                                                                        </ul>
1119
                                                                </div>
1120
                                                                <div class="col rt">
1121
                                                                        <ul>
1122
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
1123
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
1124
                                                                        </ul>
1125
                                                                </div>
1126
                                                        </div>
1127
                                                        <div class="name">short name</div>
1128
                                                </div>
1129
                                                <div class="container">
1130
                                                        <div class="check">
1131
                                                                <span class="snf-checkbox-unchecked"></span>
1132
                                                        </div>
1133
                                                        <div class="img-wrap">
1134
                                                                <span class="snf-pc-full snf-font"></span>
1135
                                                                <span class="os fedora">fedora</span>
1136
                                                        </div>
1137
                                                        <h4>short name</h4>
1138
                                                        <div class="actions">
1139
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1140
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1141
                                                        </div>
1142
                                                        <div class= "status">
1143
                                                        </div>
1144
                                                        <div class="tags">
1145
                                                        </div>
1146
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1147
                                                </div>
1148
                                        </li>
1149
                                        <li data-status="off" class="off">
1150
                                                <div class="more">
1151
                                                        <div class="clearfix">
1152
                                                                <div class="col lt">
1153
                                                                        <ul>
1154
                                                                                <li><a href=""   class="start">Start</a></li>
1155
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
1156
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
1157
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
1158
                                                                                 <li><a href="">Option i</a></li>
1159
                                                                        </ul>
1160
                                                                </div>
1161
                                                                <div class="col rt">
1162
                                                                        <ul>
1163
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
1164
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
1165
                                                                        </ul>
1166
                                                                </div>
1167
                                                        </div>
1168
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
1169
                                                </div>
1170
                                                <div class="container">
1171
                                                        <div class="check">
1172
                                                                <span class="snf-checkbox-unchecked"></span>
1173
                                                        </div>
1174
                                                        <div class="img-wrap">
1175
                                                                <span class="snf-pc-full snf-font"></span>
1176
                                                                <span class="os fedora">fedora</span>
1177
                                                        </div>
1178
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
1179
                                                        <div class="actions">
1180
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1181
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1182
                                                        </div>
1183
                                                        <div class="tags">
1184
                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
1185
                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
1186
                                                                <a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip3">&nbsp;</a>
1187
                                                        </div>
1188
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1189
                                                </div>
1190
                                        </li>
1191
                                        <li data-status="off" class="off">
1192
                                                <div class="more">
1193
                                                        <div class="clearfix">
1194
                                                                <div class="col lt">
1195
                                                                        <ul>
1196
                                                                                <li><a href=""   class="start">Start</a></li>
1197
                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
1198
                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
1199
                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
1200
                                                                                 <li><a href="">Option i</a></li>
1201
                                                                        </ul>
1202
                                                                </div>
1203
                                                                <div class="col rt">
1204
                                                                        <ul>
1205
                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-thunder-full"></span>Connect</a></li>
1206
                                                                                <li><a href="vm_details.html"><span class="snf-info-outline"></span>Details</a></li>
1207
                                                                        </ul>
1208
                                                                </div>
1209
                                                        </div>
1210
                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
1211
                                                </div>
1212
                                                <div class="container">
1213
                                                        <div class="check">
1214
                                                                <span class="snf-checkbox-unchecked"></span>
1215
                                                        </div>
1216
                                                        <div class="img-wrap">
1217
                                                                <span class="snf-pc-full snf-font"></span>
1218
                                                                <span class="os fedora">fedora</span>
1219
                                                        </div>
1220
                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
1221
                                                        <div class="actions">
1222
                                                                <a href="" data-reveal-id="vm-connect" data-tooltip ="connect" class="connect has-tip"><span class="snf-thunder-full"></span></a>
1223
                                                                <a href="vm_details.html" data-tooltip ="view  details" class="snf-info-outline has-tip"></a>
1224
                                                        </div>
1225
                                                        <div class="tags">
1226
                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
1227
                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
1228
                                                                <a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip3">&nbsp;</a>
1229
                                                        </div>
1230
                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
1231
                                                </div>
1232
                                        </li>
1233
                                        <li class="temp-for-btns"><a href="" class="btn5 temp communication-error-btn">communication error</a></li>
1234
                                </ul>
1235
                                <div class="communication-error">
1236
                                        <p>Sorry! Something went wrong!<br>Try again, but if you keep seeing this message please contact us through the feedback form.</p>
1237
                                        <p class="buttons">
1238
                                                <a class="btn5" href="">feedback</a>
1239
                                                <a href="" class="btn5">close</a>
1240
                                        </p>
1241
                                </div>
1242
                                <div class="lt-bar">
1243
                                        <ul class="lt-actions">
1244
                                                <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>Un</em>Select all</li>
1245
                                                <li class="running"><a href="#" title="" data-reveal-id="reboot-confirm">Reboot</a></li>
1246
                                                <li class="running"><a href="#" title="" data-reveal-id="shutdown-confirm">Shutdown</a></li>
1247
                                                <li class="both"><a href="#" data-reveal-id="destroy-vm-confirm">Destroy</a></li>
1248
                                                <li class="off"><a href="#">Start</a></li>
1249
                                                 <!-- in case we want an action always activated
1250
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
1251
                                        </ul>
1252
                                </div>
1253
                                <div class="welcome">It seems you have not yet created a VM! Go ahead!</div>
1254
                        </div>
1255
                </section>
1256
        </div>
1257

    
1258
        <script src="javascripts/vendor/jquery.js"></script>
1259
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
1260
        <script src="javascripts/underscore-min.js"></script>
1261
        <script src="javascripts/foundation/foundation.js"></script>
1262
        <script src="javascripts/foundation/foundation.alerts.js"></script>
1263
        
1264
        <script src="javascripts/foundation/foundation.clearing.js"></script>
1265
        
1266
        <script src="javascripts/foundation/foundation.cookie.js"></script>
1267
        
1268
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
1269
        
1270
        <script src="javascripts/foundation/foundation.forms.js"></script>
1271
        
1272
        <script src="javascripts/foundation/foundation.joyride.js"></script>
1273
        
1274
        <script src="javascripts/foundation/foundation.magellan.js"></script>
1275
        
1276
        <script src="javascripts/foundation/foundation.orbit.js"></script>
1277
        
1278
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
1279
        
1280
        <script src="javascripts/foundation/foundation.reveal.js"></script>
1281
        
1282
        <script src="javascripts/foundation/foundation.section.js"></script>
1283
        
1284
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
1285
        <script src="javascripts/foundation/foundation.topbar.js"></script>
1286
        <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
1287
        <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
1288
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
1289
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
1290
        <!-- dropzone.js used for drag and drop files to upload them --> 
1291
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
1292
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
1293
        <!-- fabrastic.js used for the color picker --> 
1294
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
1295
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
1296
        <script src="javascripts/common.js"></script>
1297
        
1298
        <script type="text/javascript" src="javascripts/wizard.js"></script>
1299
        <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
1300
  <script>
1301
    $(document).foundation();
1302
    $(document).ready(function() {
1303

1304
    })
1305
  </script>
1306
</body>
1307
</html>