Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (26.5 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>Synnefo | VM 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/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
16
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
17
    <link rel="stylesheet" href="stylesheets/farbtastic.css" />
18
    <script src="javascripts/vendor/custom.modernizr.js"></script>
19
</head>
20
<body>        
21
        <header class="header">
22
                <nav>
23
                        <ul class="icons-nav">
24
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
25
                                <li><a href="vm_list.html" data-tooltip ="has-tip " title="Machines"><span class="snf-PC"></span></a></li>
26
                                <li><a href="" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
27
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network"></span></a></li>
28
                                <li><a href="" data-tooltip ="has-tip" title="Dashboard"><span class="snf-DASHboard"></span></a></li>
29
                        </ul>
30
                </nav>
31
                <div class="login">
32
                        <a href="">test@grnet.gr</a>
33
                </div>
34
                <div class="logo">
35
                        <a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
36
                </div>
37
        </header>
38
        <div class="overlay-wrapper">
39
                <div class="overlay-area">
40
                        <a href="" class="close"><span class="snf-close"></span></a>
41
                        <div id="overlay1" class="overlay-div">
42
                                <p>Are you sure you want to reboot your machine?</p>
43
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
44
                        </div>
45
                        <div id="overlay2" class="overlay-div">
46
                                <p>Are you sure you want to shutdown your machine?</p>
47
                                <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
48
                        </div>
49
                        <div id="vm-wizard" class="overlay-div wizard">
50
                                <div class="top">
51
                                        <div class="numbers">
52
                                                <div class="row">
53
                                                        <a href="" class="close"><span class="snf-close"></span></a>
54
                                                        <ul class="nums">
55
                                                                <li class="current">
56
                                                                        <em><span href="">1</span></em>
57
                                                                        <p><strong>Select an OS</strong> Choose your preferred image</p>
58
                                                                </li>
59
                                                                <li>
60
                                                                        <em><span href="" disabled2</span</em
61
                                                                        <p<strongSelect , RAM  Disk  </strong
62
Available  are  based  the  image</p
63
                                                                </li
64
                                                                <li
65
                                                                        <em<span ="" disabled3</span</em
66
                                                                        <p<strongVirtual  custom </strong
67
Virtual  custom </p
68
                                                                </li
69
                                                                <li
70
                                                                        <em<span ="" disabled4</span</em
71
                                                                        <p<strongConfirm  settings</strong
72
Confirm  the  you  selected  correct</p
73
                                                                </li
74
                                                        </ul
75
                                                </div
76
                                        </div
77
                                        <div ="row">
78
                                                <nav class="sub-menu" data-step=1>
79
                                                        <ul>
80
                                                                <li><a href="" class="current">System</a></li>
81
                                                                <li><a href="">My images</a></li>
82
                                                                <li><a href="">Shared with me</a></li>
83
                                                                <li><a href="">Public</a></li>
84
                                                        </ul>
85
                                                </nav>
86
                                                <nav class="sub-menu" data-step=2>
87
                                                        <ul>
88
                                                                <li><a href="" class="current" data-size="small">Small</a></li>
89
                                                                <li><a href="" data-size="medium">Medium</a></li>
90
                                                                <li><a href="" data-size="large">Large</a></li>
91
                                                        </ul>
92
                                                </nav>
93
                                        </div>
94
                                </div>
95
                                <div class="middle">
96
                                        <div class="wizard-content">
97
                                                <div class="vm-wizard-carousel">
98
                                                        <div class="step step-1" id="step-1" data-step="1">
99
                                                                <ul class="os">
100
                                                                        <li>
101
                                                                                <div class="row">
102
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
103
                                                                                        <a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
104
                                                                                        <div class="size-col">10GB</div>
105
                                                                                        <div class="btn-col"><a href="">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>
128
                                                                                <div class="row">
129
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
130
                                                                                        <a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
131
                                                                                        <div class="size-col">10GB</div>
132
                                                                                        <div class="btn-col"><a href="">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>
155
                                                                                <div class="row">
156
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
157
                                                                                        <a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
158
                                                                                        <div class="size-col">10GB</div>
159
                                                                                        <div class="btn-col"><a href="">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="current preselected">
182
                                                                                <div class="row">
183
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
184
                                                                                        <a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
185
                                                                                        <div class="size-col">10GB</div>
186
                                                                                        <div class="btn-col"><a href="">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
                                                                </ul>
209
                                                        </div>
210
                                                        <div class="step step-2" id="step-2" data-step=2>
211
                                                                <div class="row">
212
                                                                        <form class="custom">
213
                                                                          <select class="medium">
214
                                                                            <option><a href=>Assign to project</a></option>
215
                                                                            <option><a href="">Project 2</a></option>
216
                                                                            <option><a href="">Project 3</a></option>
217
                                                                          </select>
218
                                                                        </form>
219
                                                                        <ul class="flavor">
220
                                                                                <li>
221
                                                                                        <div class="title">
222
                                                                                                <span class="snf-cpu icon"></span>
223
                                                                                                <h2>CPU<span> (x cores)</span></h2>
224
                                                                                                <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>
225
                                                                                        </div>
226
                                                                                        <div class="options-bar">
227
                                                                                                <div class="bar">
228
                                                                                                        <div class="wrap">
229
                                                                                                                <div class="container">
230
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
231
                                                                                                                        <div class="total" style="width:60%">
232
                                                                                                                                <div class="current" style="width:30%"></div>
233
                                                                                                                                <span>60%</span>
234
                                                                                                                        </div>
235
                                                                                                                </div>
236
                                                                                                        </div>
237
                                                                                                </div>
238
                                                                                                <ul class="options with-flavor">
239
                                                                                                        <li><a href="" class="small current">1</a></li>
240
                                                                                                        <li><a href="" class="medium">2</a></li>
241
                                                                                                        <li><a href="" class="large">3</a></li>
242
                                                                                                        <li><a href="">4</a></li>
243
                                                                                                </ul>
244
                                                                                        </div>
245
                                                                                </li>
246
                                                                                <li>
247
                                                                                        <div class="title">
248
                                                                                                <span class="snf-ram icon"></span>
249
                                                                                                <h2>Memory Size <span> (MB)</span></h2>
250
                                                                                                <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>
251
                                                                                        </div>
252
                                                                                        <div class="options-bar">
253
                                                                                                <div class="bar">
254
                                                                                                        <div class="wrap">
255
                                                                                                                <div class="container">
256
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
257
                                                                                                                        <div class="total" style="width:60%">
258
                                                                                                                                <div class="current" style="width:30%"></div>
259
                                                                                                                                <span>60%</span>
260
                                                                                                                        </div>
261
                                                                                                                </div>
262
                                                                                                        </div>
263
                                                                                                </div>
264
                                                                                                <ul class="options with-flavor">
265
                                                                                                        <li><a href="" class="small current">1024</a></li>
266
                                                                                                        <li><a href="" class="medium">2048</a></li>
267
                                                                                                        <li><a href="" class="large">4096</a></li>
268
                                                                                                </ul>
269
                                                                                        </div>
270
                                                                                </li>
271
                                                                                <li>
272
                                                                                        <div class="title">
273
                                                                                                <span class="snf-HDD icon"></span>
274
                                                                                                <h2>Disk Size<span> (GB)</span></h2>
275
                                                                                                <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>
276
                                                                                        </div>
277
                                                                                        <div class="options-bar">
278
                                                                                                <div class="bar">
279
                                                                                                        <div class="wrap">
280
                                                                                                                <div class="container">
281
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
282
                                                                                                                        <div class="total" style="width:40%">
283
                                                                                                                                <div class="current" style="width:80%"></div>
284
                                                                                                                                <span>40%</span>
285
                                                                                                                        </div>
286
                                                                                                                </div>
287
                                                                                                        </div>
288
                                                                                                </div>
289
                                                                                                <ul class="options with-flavor">
290
                                                                                                        <li><a href="" class="small current">10</a></li>
291
                                                                                                        <li><a href="" class="medium">20</a></li>
292
                                                                                                        <li><a href="" class="large">30</a></li>
293
                                                                                                        <li><a href="">40</a></li>
294
                                                                                                </ul>
295
                                                                                        </div>
296
                                                                                </li>
297
                                                                                <li>
298
                                                                                        <div class="title">
299
                                                                                                <span class="snf-HDD icon"></span>
300
                                                                                                <h2>Storage</h2>
301
                                                                                                <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>
302
                                                                                        </div>
303
                                                                                        <div class="options-bar">
304
                                                                                                <div class="bar">
305
                                                                                                        <div class="wrap  disabled-progress-bar">
306
                                                                                                                <div class="container">
307
                                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
308
                                                                                                                        <div class="total" style="width:100%">
309
                                                                                                                                <div class="current" style="width:0%"></div>
310
                                                                                                                                <span></span>
311
                                                                                                                        </div>
312
                                                                                                                </div>
313
                                                                                                        </div>
314
                                                                                                </div>
315
                                                                                                <ul class="options">
316
                                                                                                        <li><a href="" class="current">DRBD</a></li>
317
                                                                                                        <li><a href="">Archipelago</a></li>
318
                                                                                                </ul>
319
                                                                                        </div>
320
                                                                                </li>
321
                                                                        </ul>
322
                                                                </div>
323
                                                        </div>
324
<!--step 3 -->
325
                                                        <div class="step step-3" id="step-3" data-step="3">
326
                                                                <div class="advanced-conf-step">
327
                                                                        <div class="adv-main row">
328
                                                                                <div class="vm-name">
329
                                                                                        <h2>Machine name</h2>
330
                                                                                        <span class="input"><input type="text" placeholder="My Ubuntu Server"></span>
331
                                                                                </div>
332
                                                                                <div class="expand-btn">
333
                                                                                        <a class="expand-link" href="">
334
                                                                                                Advanced Configuration
335
                                                                                                <span class="snf-arrow-down"></span>
336
                                                                                        </a>
337
                                                                                </div>
338
                                                                        </div>
339
                                                                        <div class="advanced-conf-options">
340
                                                                                <div class="ssh-keys-area area">
341
                                                                                        <div class="row">
342
                                                                                                <h2>Public SSH keys</h2>
343
                                                                                                <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>
344
                                                                                                <ul>
345
                                                                                                        <li class="checkbox"><h3>My public key long name one </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
346
                                                                                                        <li class="checkbox"><h3>Other public key </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
347
                                                                                                        <li class="checkbox"><h3>My public key long name one </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
348
                                                                                                </ul>
349
                                                                                                <div>
350
                                                                                                        <a href="" class="btn5">... show more keys</a>
351
                                                                                                </div>
352
                                                                                        </div>
353
                                                                                </div>
354

    
355
                                                                                <div class="networks-area area">
356
                                                                                        <h2 class="row">Networks</h2>
357
                                                                                        <ul>
358
                                                                                                <li class="checkbox row has-more select-net">
359
                                                                                                <h3 class="">        
360
                                                                                                        <div class="net-icons">
361
                                                                                                                <span class="snf-www"></span>
362
                                                                                                                <span class="snf-modem"></span>
363
                                                                                                                <span class="snf-network_full"></span>
364
                                                                                                        </div>
365
                                                                                                        Public Network</h3>
366
                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
367
                                                                                                </li>
368
                                                                                                <li class="more">
369
                                                                                                        <div class="row">
370
                                                                                                                <div class="checkbox clearfix">
371
                                                                                                                        <h3>192.168.2.3</h3>
372
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
373
                                                                                                                </div>
374
                                                                                                                <div class="checkbox clearfix">
375
                                                                                                                        <h3>192.168.2.3</h3>
376
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
377
                                                                                                                </div>
378
                                                                                                                <div class="checkbox clearfix">
379
                                                                                                                        <h3>192.168.2.3</h3>
380
                                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
381
                                                                                                                </div>
382
                                                                                                                <div>
383
                                                                                                                        <a href="" class="btn5">manage IPs</a>
384
                                                                                                                </div>
385
                                                                                                        </div>
386
                                                                                                </li>
387
                                                                                                <li class="checkbox row select-net">
388
                                                                                                <h3 class="net-name">
389
                                                                                                        <div class="net-icons">
390
                                                                                                                <span class="snf-modem"></span>
391
                                                                                                                <span class="snf-network_full"></span>
392
                                                                                                        </div>
393
                                                                                                        Routed Network</h3>
394
                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
395
                                                                                                </li>
396
                                                                                                <li class="checkbox row select-net">
397
                                                                                                <h3 class="net-name">
398
                                                                                                        <div class="net-icons">
399
                                                                                                                <span class="snf-network_full"></span>
400
                                                                                                        </div>
401
                                                                                                        Private Network 1</h3>
402
                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
403
                                                                                                </li>
404
                                                                                                <li class="checkbox row select-net">
405
                                                                                                        <h3 class="net-name">
406
                                                                                                        <div class="net-icons">
407
                                                                                                                <span class="snf-network_full"></span>
408
                                                                                                        </div>
409
                                                                                                        Private Network 2</h3>
410
                                                                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
411
                                                                                                </li>
412
                                                                                        </ul>
413

    
414
                                                                                </div>
415
                                                                                <div class="tags-area area">
416
                                                                                        <div class="row">
417
                                                                                                <h2>Tags</h2>
418
                                                                                                <p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
419
                                                                                                <ul>
420
                                                                                                        <li class="checkbox">
421
                                                                                                                <h3>
422
                                                                                                                        <span class="tag-demo tag4"></span>
423
                                                                                                                        Operating system
424
                                                                                                                </h3>
425
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
426
                                                                                                        </li>
427
                                                                                                        <li class="checkbox">
428
                                                                                                                <h3>
429
                                                                                                                        <span class="tag-demo tag5"></span>
430
                                                                                                                        Pirate PC1
431
                                                                                                                </h3>
432
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
433
                                                                                                        </li>
434
                                                                                                        <li class="checkbox">
435
                                                                                                                <h3>
436
                                                                                                                        <span class="tag-demo tag6"></span>
437
                                                                                                                        Pirate PC1
438
                                                                                                                </h3>
439
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
440
                                                                                                        </li>
441
                                                                                                </ul>
442
                                                                                                <div ><a class="btn5 show-add-tag" href="">add Tag</a></div>
443
                                                                                                <div class="snf-color-picker">
444
                                                                                                        <form action="" style="width: 400px;">
445
                                                                                                                <div id="picker">
446
                                                                                                                        <div class="farbtastic">
447
                                                                                                                                <div class="color" style="background-color: rgb(255, 0, 21);"></div>
448
                                                                                                                                <div class="wheel"></div>
449
                                                                                                                                <div class="overlay"></div>
450
                                                                                                                                <div class="h-marker marker" style="left: 90px; top: 13px;"></div>
451
                                                                                                                                <div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
452
                                                                                                                        </div>
453
                                                                                                                </div>
454
                                                                                                                <div class="form-item">
455
                                                                                                                        <input type="text" id="color" name="color" value="#16C1E9" disabled
456
                                                                                                                        <span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
457
                                                                                                                </div>
458
                                                                                                        </form>                                                                        
459
                                                                                                        <div class="btns">
460
                                                                                                                <a class="btn5" href="">OK</a>
461
                                                                                                                <a class="btn5 hide-add-tag" href="" id="hide-add-tag">CANCEL</a>
462
                                                                                                        </div>
463

    
464
                                                                                                </div>
465
                                                                                        </div> <!-- end of row -->
466
                                                                                </div>
467
                                                                        </div>
468
                                                                </div>
469
<!-- end step 3 -->                                </div>
470
                                                        <div class="step step-4" id="step-4" data-step=4>
471
                                                                <div class="summary">
472
                                                                        <div class="row">
473
                                                                                <dl>
474
                                                                                <a href="" id="topEl"></a>
475
                                                                                        <dt>Machine name</dt>
476
                                                                                        <dd>handsome frank</dd>
477
                                                                                </dl>
478
                                                                        </div>
479
                                                                        <div class="row">
480
                                                                                <h2>Images</h2>
481
                                                                                <dl>
482
                                                                                        <dt>Name</dt>
483
                                                                                        <dd>Debian Base</dd>
484
                                                                                        <dt>Desciption</dt>
485
                                                                                        <dd>open suse description open suse description open suse description open suse description open suse description</dd>
486
                                                                                        <dt>os</dt>
487
                                                                                        <dd>Debian</dd>
488
                                                                                        <dt>Size</dt>
489
                                                                                        <dd>10.4GB</dd>
490
                                                                                        <dt>GUI</dt>
491
                                                                                        <dd>No GUI</dd>
492
                                                                                        <dt>Kernel</dt>
493
                                                                                        <dd>2.3.4</dd>
494
                                                                                </dl>
495
                                                                        </div>
496
                                                                        <div class="row">
497
                                                                                <h2>Flavor</h2>
498
                                                                                <dl>
499
                                                                                        <dt><span class="snf-cpu icon"></span>CPUs</dt>
500
                                                                                        <dd>4x</dd>
501
                                                                                        <dt><span class="snf-ram icon"></span>Memory</dt>
502
                                                                                        <dd>512 MB</dd>
503
                                                                                        <dt><span class="snf-HDD icon"></span>Disk</dt>
504
                                                                                        <dd>4GB</dd>
505
                                                                                        <dt><span class="snf-HDD icon"></span>Storage Type</dt>
506
                                                                                        <dd>DRBD</dd>
507
                                                                                </dl>
508
                                                                        </div>
509
                                                                        <div class="row">
510
                                                                                <dl>
511
                                                                                        <dt>Machine Tags</dt>
512
                                                                                        <dd>Database server</dd>
513
                                                                                        <dt>SSH Keys</dt>
514
                                                                                        <dd>
515
                                                                                                my public key 1<br>
516
                                                                                                my public key 3<br>
517
                                                                                        </dd>
518
                                                                                        <dt>IPs</dt>
519
                                                                                        <dd>192.168.1.3<br>192.168.1.3</dd>
520
                                                                                        <dt>Private networks</dt>
521
                                                                                        <dd>No private networks selected</dd>
522
                                                                                </dl>
523
                                                                        </div>
524
                                                                </div>
525
                                                        </div>
526
                                                </div>
527
                                        </div>
528
                                </div>
529
                                <div class="bottom">
530
                                        <div class="row">
531
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
532
                                                <a href="" class="nav next" data-step="1"><span>NEXT</span></a>
533
                                        </div>
534
                                </div>
535
                        </div>
536
                </div>
537
                
538
                <section class="actions-bar clearfix">
539
                        <div class="row">
540
                                <div class="new-btn"><a href="" data-overlay-id="#vm-wizard"><span>+</span> NEW MACHINE </a></div>
541
                                <div class="main-actions">
542
                                        <ul>
543
                                                <li class="running" ><a href="" data-overlay-id="#overlay1">Reboot</a></li>
544
                                                <li class="running"><a href="" data-overlay-id="#overlay1">Shutdown</a></li>
545
                                                <li class="both"><a href="">Destroy</a></li>
546
                                                <li class="stopped"><a href="">Start</a></li>
547
                                                 <!-- in case we want an action always activated
548
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
549
                                        </ul>
550
                                </div>
551
                        </div>
552
                </section>
553
                <section class="main row">
554
                        <div class="vms entities">
555
                                <ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
556
                                        <li data-order="0">
557
                                                <div class="container">
558
                                                        <div class="img-wrap">
559
                                                                <div class="img running">
560
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
561
                                                                        <span class="os" data-reveal-id="vm-connect">unknown</span>
562
                                                                </div>
563
                                                        </div>
564
                                                        <p class="visible-info">
565
                                                                <span class="title">
566
                                                                        <a href="vm_details.html"><em>vm name 1 really large name</em></a>
567
                                                                </span>
568
                                                        </p>
569
                                                        <div class="tags">
570
                                                                <a href="" class="tag1" title="Server">&nbsp;</a>
571
                                                                <a href="" class="tag2" title="Experiment">&nbsp;</a>
572
                                                        </div>
573
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
574
                                                </div>
575
                                        </li>
576
                                        <li data-order="1">
577
                                                <div class="container">
578
                                                        <div class="img-wrap">
579
                                                                <div class="img running">
580
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
581
                                                                        <span class="os fedora" data-reveal-id="vm-connect">fedora</span>
582
                                                                </div>
583
                                                        </div>
584
                                                        <p class="visible-info">
585
                                                                <span class="title">
586
                                                                        <a href="vm_details.html"><em>vm name 1 really large name</em></a>
587
                                                                </span>
588
                                                        </p>
589
                                                        <div class="tags">
590
                                                                <a href="" class="tag3">&nbsp;</a>
591
                                                                <a href="" class="tag2">&nbsp;</a>
592
                                                        </div>
593
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
594
                                                </div>
595
                                        </li>
596
                                        <li data-order="2">
597
                                                <div class="container">
598
                                                        <div class="img-wrap">
599
                                                                <div class="img running">
600
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
601
                                                                        <span class="os" data-reveal-id="vm-connect">unknown</span>
602
                                                                </div>
603
                                                        </div>
604
                                                        <p class="visible-info">
605
                                                                <span class="title">
606
                                                                        <a href="vm_details.html"><em>vm name 2</em></a>
607
                                                                </span>
608
                                                        </p>
609
                                                        <div class="tags">
610
                                                                <a href="" class="tag2">&nbsp;</a>
611
                                                        </div>
612
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
613
                                                </div>
614
                                        </li>
615
                                        <li  data-order="3">
616
                                                <div class="container">
617
                                                        <div class="img-wrap">
618
                                                                <div class="img stopped">
619
                                                                        <span class="snf-PC_fill"></span>
620
                                                                        <span class="os fedora">fedora</span>
621
                                                                </div>
622
                                                        </div>
623
                                                        <p class="visible-info">
624
                                                                <span class="title">
625
                                                                        <a href="vm_details.html"><em>vm name 3</em></a>
626
                                                                </span>
627
                                                        </p>
628
                                                        <div class="tags">
629
                                                                <a href="" class="tag1">&nbsp;</a>
630
                                                                <a href="" class="tag2">&nbsp;</a>
631
                                                                <a href="" class="tag3">&nbsp;</a>
632
                                                        </div>
633
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
634
                                                </div>
635
                                        </li>
636
                                        <li  data-order="4">
637
                                                <div class="container">
638
                                                        <div class="img-wrap">
639
                                                                <div class="img running">
640
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
641
                                                                        <span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
642
                                                                </div>
643
                                                        </div>
644
                                                        <p class="visible-info">
645
                                                                <span class="title">
646
                                                                        <a href="vm_details.html"><em>vm name 4</em></a>
647
                                                                </span>
648
                                                        </p>
649
                                                        <div class="tags">
650
                                                                <a href="" class="tag1">&nbsp;</a>
651
                                                                <a href="" class="tag2">&nbsp;</a>
652
                                                        </div>
653
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
654
                                                </div>
655
                                        </li>
656
                                         
657
                                        <li  data-order="5">
658
                                                <div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div>
659
                                        </li>
660
                                         
661
                                </ul>
662
                        </div>
663
                </section>
664
                </div>
665
        
666
        <div id="vm-connect" class="reveal-modal medium">
667
                  <p>A direct connection to this machine can be established using the <a target="_blank" href="http://en.wikipedia.org/wiki/Secure_Shell">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
668
                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
669
                
670
                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
671
                <p>Alternatively you can connect to your VM via <a href="">Console</a> (slow connection - meant only for troubleshooting.</p>
672
                  <a class="close-reveal-modal" title="close window">&#215;</a>
673
        </div>
674

    
675
        <script src="javascripts/vendor/jquery.js"></script>
676
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
677
        <script src="javascripts/foundation/foundation.js"></script>
678
        <script src="javascripts/foundation/foundation.alerts.js"></script>
679
        
680
        <script src="javascripts/foundation/foundation.clearing.js"></script>
681
        
682
        <script src="javascripts/foundation/foundation.cookie.js"></script>
683
        
684
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
685
        
686
        <script src="javascripts/foundation/foundation.forms.js"></script>
687
        
688
        <script src="javascripts/foundation/foundation.joyride.js"></script>
689
        
690
        <script src="javascripts/foundation/foundation.magellan.js"></script>
691
        
692
        <script src="javascripts/foundation/foundation.orbit.js"></script>
693
        
694
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
695
        
696
        <script src="javascripts/foundation/foundation.reveal.js"></script>
697
        
698
        <script src="javascripts/foundation/foundation.section.js"></script>
699
        
700
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
701
        
702
        <script src="javascripts/foundation/foundation.topbar.js"></script>
703
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
704
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
705
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
706
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
707
        <script src="javascripts/common.js"></script>
708
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
709
        <script type="text/javascript" src="javascripts/vm-wizard.js"></script>
710
  <script>
711
    $(document).foundation();
712
    $(document).ready(function() {
713

714
    })
715
  </script>
716
</body>
717
</html>