Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (26.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>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 preselected el2">System</a></li>
81
                                                                <li><a href="">My images</a></li>
82
                                                                <li><a href="">Shared with me</a></li>
83
                                                                <li><a href="" data-next="el1">Public</a></li>
84
                                                        </ul>
85
                                                </nav>
86
                                                <nav class="sub-menu" data-step=2>
87
                                                        <ul>
88
                                                                <li><a href="" class="current preselected el4" data-size="small">Small</a></li>
89
                                                                <li><a href="" data-size="medium">Medium</a></li>
90
                                                                <li><a href="" data-size="large" data-next="el5">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  class="current preselected">
101
                                                                                <div class="row">
102
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
103
                                                                                        <a href="" class="name-col el1">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>
182
                                                                                <div class="row">
183
                                                                                        <div class="img-col"><img src="images/os-fedora.png" alt=""></div>
184
                                                                                        <a href="" class="name-col" data-next="el3">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="" class="el5">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 preselected">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 preselected">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 preselected">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 preselected">DRBD</a></li>
317
                                                                                                        <li><a href="" data-next="el6">Archipelago</a></li>
318
                                                                                                </ul>
319
                                                                                        </div>
320
                                                                                </li>
321
                                                                        </ul>
322
                                                                </div>
323
                                                        </div>
324
                                                        <div class="step step-3" id="step-3" data-step=3>
325
                                                                <div class="advanced-conf-step">
326
                                                                        <div class="adv-main row">
327
                                                                                <div class="vm-name">
328
                                                                                        <h2>Machine name</h2>
329
                                                                                        <span class="input"><input type="text" placeholder="My Ubuntu Server" class="el7"></span>
330
                                                                                </div>
331
                                                                                <div class="expand-btn">
332
                                                                                        <a class="expand-link" href="">
333
                                                                                                Advanced Configuration
334
                                                                                                <span class="snf-arrow-down preselected"></span>
335
                                                                                        </a>
336
                                                                                </div>
337
                                                                        </div>
338
                                                                        <div class="advanced-conf-options">
339
                                                                                <div class="ssh-keys-area area">
340
                                                                                        <div class="row">
341
                                                                                                <h2>Public SSH keys</h2>
342
                                                                                                <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>
343
                                                                                                <ul>
344
                                                                                                        <li class="checkbox"><h3>My public key long name one </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
345
                                                                                                        <li class="checkbox"><h3>Other public key </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
346
                                                                                                        <li class="checkbox"><h3>My public key long name one </h3><a href="" class="check"><span class="snf-checkbox-unchecked"></span></a></li>
347
                                                                                                </ul>
348
                                                                                                <div>
349
                                                                                                        <a href="" class="btn5">... show more keys</a>
350
                                                                                                </div>
351
                                                                                        </div>
352
                                                                                </div>
353

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

    
413
                                                                                </div>
414
                                                                                <div class="tags-area area">
415
                                                                                        <div class="row">
416
                                                                                                <h2>Tags</h2>
417
                                                                                                <p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
418
                                                                                                <ul>
419
                                                                                                        <li class="checkbox">
420
                                                                                                                <h3>
421
                                                                                                                        <span class="tag-demo tag4"></span>
422
                                                                                                                        Operating system
423
                                                                                                                </h3>
424
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
425
                                                                                                        </li>
426
                                                                                                        <li class="checkbox">
427
                                                                                                                <h3>
428
                                                                                                                        <span class="tag-demo tag5"></span>
429
                                                                                                                        Pirate PC1
430
                                                                                                                </h3>
431
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
432
                                                                                                        </li>
433
                                                                                                        <li class="checkbox">
434
                                                                                                                <h3>
435
                                                                                                                        <span class="tag-demo tag6"></span>
436
                                                                                                                        Pirate PC1
437
                                                                                                                </h3>
438
                                                                                                                <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
439
                                                                                                        </li>
440
                                                                                                </ul>
441
                                                                                                <div ><a class="btn5 show-add-tag" href="">add Tag</a></div>
442
                                                                                                <div class="snf-color-picker">
443
                                                                                                        <form action="" style="width: 400px;">
444
                                                                                                                <div id="picker">
445
                                                                                                                        <div class="farbtastic">
446
                                                                                                                                <div class="color" style="background-color: rgb(255, 0, 21);"></div>
447
                                                                                                                                <div class="wheel"></div>
448
                                                                                                                                <div class="overlay"></div>
449
                                                                                                                                <div class="h-marker marker" style="left: 90px; top: 13px;"></div>
450
                                                                                                                                <div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
451
                                                                                                                        </div>
452
                                                                                                                </div>
453
                                                                                                                <div class="form-item">
454
                                                                                                                        <input type="text" id="color" name="color" value="#16C1E9" disabled
455
                                                                                                                        <span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
456
                                                                                                                </div>
457
                                                                                                        </form>                                                                        
458
                                                                                                        <div class="btns">
459
                                                                                                                <a class="btn5" href="">OK</a>
460
                                                                                                                <a class="btn5 hide-add-tag" href="" id="hide-add-tag">CANCEL</a>
461
                                                                                                        </div>
462
                                                                                                </div>
463
                                                                                        </div>
464
                                                                                </div>
465
                                                                        </div>
466
                                                                </div>
467
<!-- end step 3 -->                                </div>
468
                                                        <div class="step step-4" id="step-4" data-step=4>
469
                                                                <div class="summary">
470
                                                                        <div class="row">
471
                                                                                <dl>
472
                                                                                <a href="" id="topEl"></a>
473
                                                                                        <dt>Machine name</dt>
474
                                                                                        <dd>handsome frank</dd>
475
                                                                                </dl>
476
                                                                        </div>
477
                                                                        <div class="row">
478
                                                                                <h2>Images</h2>
479
                                                                                <dl>
480
                                                                                        <dt>Name</dt>
481
                                                                                        <dd>Debian Base</dd>
482
                                                                                        <dt>Desciption</dt>
483
                                                                                        <dd>open suse description open suse description open suse description open suse description open suse description</dd>
484
                                                                                        <dt>os</dt>
485
                                                                                        <dd>Debian</dd>
486
                                                                                        <dt>Size</dt>
487
                                                                                        <dd>10.4GB</dd>
488
                                                                                        <dt>GUI</dt>
489
                                                                                        <dd>No GUI</dd>
490
                                                                                        <dt>Kernel</dt>
491
                                                                                        <dd>2.3.4</dd>
492
                                                                                </dl>
493
                                                                        </div>
494
                                                                        <div class="row">
495
                                                                                <h2>Flavor</h2>
496
                                                                                <dl>
497
                                                                                        <dt><span class="snf-cpu icon"></span>CPUs</dt>
498
                                                                                        <dd>4x</dd>
499
                                                                                        <dt><span class="snf-ram icon"></span>Memory</dt>
500
                                                                                        <dd>512 MB</dd>
501
                                                                                        <dt><span class="snf-HDD icon"></span>Disk</dt>
502
                                                                                        <dd>4GB</dd>
503
                                                                                        <dt><span class="snf-HDD icon"></span>Storage Type</dt>
504
                                                                                        <dd>DRBD</dd>
505
                                                                                </dl>
506
                                                                        </div>
507
                                                                        <div class="row">
508
                                                                                <dl>
509
                                                                                        <dt>Machine Tags</dt>
510
                                                                                        <dd>Database server</dd>
511
                                                                                        <dt>SSH Keys</dt>
512
                                                                                        <dd>
513
                                                                                                my public key 1<br>
514
                                                                                                my public key 3<br>
515
                                                                                        </dd>
516
                                                                                        <dt>IPs</dt>
517
                                                                                        <dd>192.168.1.3<br>192.168.1.3</dd>
518
                                                                                        <dt>Private networks</dt>
519
                                                                                        <dd>No private networks selected</dd>
520
                                                                                </dl>
521
                                                                        </div>
522
                                                                </div>
523
                                                        </div>
524
                                                </div>
525
                                        </div>
526
                                </div>
527
                                <div class="bottom">
528
                                        <div class="row">
529
                                                <a href="" class="nav prev el3 el6"><span>CANCEL</span></a>
530
                                                <a href="" class="nav next" data-step="1" data-next="el2"><span>NEXT</span></a>
531
                                        </div>
532
                                </div>
533
                        </div>
534
                </div>
535
                
536
                <section class="actions-bar clearfix">
537
                        <div class="row">
538
                                <div class="new-btn"><a href="" data-overlay-id="#vm-wizard"><span>+</span> NEW MACHINE </a></div>
539
                                <div class="main-actions">
540
                                        <ul>
541
                                                <li class="running" ><a href="" data-overlay-id="#overlay1">Reboot</a></li>
542
                                                <li class="running"><a href="" data-overlay-id="#overlay1">Shutdown</a></li>
543
                                                <li class="both"><a href="">Destroy</a></li>
544
                                                <li class="stopped"><a href="">Start</a></li>
545
                                                 <!-- in case we want an action always activated
546
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
547
                                        </ul>
548
                                </div>
549
                        </div>
550
                </section>
551
                <section class="main row">
552
                        <div class="vms entities">
553
                                <ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
554
                                        <li data-order="0">
555
                                                <div class="container">
556
                                                        <div class="img-wrap">
557
                                                                <div class="img running">
558
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
559
                                                                        <span class="os" data-reveal-id="vm-connect">unknown</span>
560
                                                                </div>
561
                                                        </div>
562
                                                        <p class="visible-info">
563
                                                                <span class="title">
564
                                                                        <a href="vm_details.html"><em>vm name 1 really large name</em></a>
565
                                                                </span>
566
                                                        </p>
567
                                                        <div class="tags">
568
                                                                <a href="" class="tag1" title="Server">&nbsp;</a>
569
                                                                <a href="" class="tag2" title="Experiment">&nbsp;</a>
570
                                                        </div>
571
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
572
                                                </div>
573
                                        </li>
574
                                        <li data-order="1">
575
                                                <div class="container">
576
                                                        <div class="img-wrap">
577
                                                                <div class="img running">
578
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
579
                                                                        <span class="os fedora" data-reveal-id="vm-connect">fedora</span>
580
                                                                </div>
581
                                                        </div>
582
                                                        <p class="visible-info">
583
                                                                <span class="title">
584
                                                                        <a href="vm_details.html"><em>vm name 1 really large name</em></a>
585
                                                                </span>
586
                                                        </p>
587
                                                        <div class="tags">
588
                                                                <a href="" class="tag3">&nbsp;</a>
589
                                                                <a href="" class="tag2">&nbsp;</a>
590
                                                        </div>
591
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
592
                                                </div>
593
                                        </li>
594
                                        <li data-order="2">
595
                                                <div class="container">
596
                                                        <div class="img-wrap">
597
                                                                <div class="img running">
598
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
599
                                                                        <span class="os" data-reveal-id="vm-connect">unknown</span>
600
                                                                </div>
601
                                                        </div>
602
                                                        <p class="visible-info">
603
                                                                <span class="title">
604
                                                                        <a href="vm_details.html"><em>vm name 2</em></a>
605
                                                                </span>
606
                                                        </p>
607
                                                        <div class="tags">
608
                                                                <a href="" class="tag2">&nbsp;</a>
609
                                                        </div>
610
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
611
                                                </div>
612
                                        </li>
613
                                        <li  data-order="3">
614
                                                <div class="container">
615
                                                        <div class="img-wrap">
616
                                                                <div class="img stopped">
617
                                                                        <span class="snf-PC_fill"></span>
618
                                                                        <span class="os fedora">fedora</span>
619
                                                                </div>
620
                                                        </div>
621
                                                        <p class="visible-info">
622
                                                                <span class="title">
623
                                                                        <a href="vm_details.html"><em>vm name 3</em></a>
624
                                                                </span>
625
                                                        </p>
626
                                                        <div class="tags">
627
                                                                <a href="" class="tag1">&nbsp;</a>
628
                                                                <a href="" class="tag2">&nbsp;</a>
629
                                                                <a href="" class="tag3">&nbsp;</a>
630
                                                        </div>
631
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
632
                                                </div>
633
                                        </li>
634
                                        <li  data-order="4">
635
                                                <div class="container">
636
                                                        <div class="img-wrap">
637
                                                                <div class="img running">
638
                                                                        <span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
639
                                                                        <span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
640
                                                                </div>
641
                                                        </div>
642
                                                        <p class="visible-info">
643
                                                                <span class="title">
644
                                                                        <a href="vm_details.html"><em>vm name 4</em></a>
645
                                                                </span>
646
                                                        </p>
647
                                                        <div class="tags">
648
                                                                <a href="" class="tag1">&nbsp;</a>
649
                                                                <a href="" class="tag2">&nbsp;</a>
650
                                                        </div>
651
                                                        <a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
652
                                                </div>
653
                                        </li>
654
                                         
655
                                        <li  data-order="5">
656
                                                <div class="add-new"><a href="vm_create_a.html" data-overlay-id="#vm-wizard">NEW<br>MACHINE</a></div>
657
                                        </li>
658
                                         
659
                                </ul>
660
                        </div>
661
                </section>
662
                </div>
663
        
664
        <div id="vm-connect" class="reveal-modal medium">
665
                  <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>
666
                <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
667
                
668
                <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
669
                <p>Alternatively you can connect to your VM via <a href="">Console</a> (slow connection - meant only for troubleshooting.</p>
670
                  <a class="close-reveal-modal" title="close window">&#215;</a>
671
        </div>
672

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

712
    })
713
  </script>
714
</body>
715
</html>