Revision 316d2e42

b/snf-cyclades-app/synnefo/ui/new_ui/ui/demoHeader.html
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 id="ha-header" class="header ha-header ha-header-large">
22
		<div class="ha-header-perspective">
23
			<nav>
24
				<ul class="icons-nav">
25
					<li><a href="pithos_list.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
26
					<li><a href="vm_list.html" data-tooltip class="has-tip current" title="Machines"><span class="snf-PC"></span></a></li>
27
					<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
28
					<li><a href="network_list.html" data-tooltip class="has-tip" title="Networks"><span class="snf-network"></span></a></li>
29
					<li><a href="" data-tooltip class="has-tip" title="Dashboard"><span class="snf-DASHboard"></span></a></li>
30
				</ul>
31
			</nav>
32
			<div class="login">
33
				<a href="">test@grnet.gr</a>
34
			</div>
35
			<div class="logo">
36
				<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
37
			</div>
38
	</div>
39
	</header>
40
	<div class="overlay-wrapper">
41
		<div class="overlay-area">
42
			<a href="" class="close"><span class="snf-close"></span></a>
43
			<div id="overlay1" class="overlay-div">
44
				<p>Are you sure you want to reboot your machine?</p>
45
				<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
46
			</div>
47
			<div id="overlay2" class="overlay-div">
48
				<p>Are you sure you want to shutdown your machine?</p>
49
				<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
50
			</div>
51
			<div id="vm-wizard" class="overlay-div wizard">
52
				<div class="top">
53
					<div class="row">
54
						<a href="" class="close"><span class="snf-close"></span></a>
55
						<nav class="sub-menu" data-step="1">
56
							<ul>
57
								<li><a href="" class="current">System</a></li>
58
								<li><a href="">My images</a></li>
59
								<li><a href="">Shared with me</a></li>
60
								<li><a href="">Public</a></li>
61
							</ul>
62
						</nav>
63
						<nav class="sub-menu" data-step=2>
64
							<ul>
65
								<li><a href="" class="current" data-size="small">Small</a></li>
66
								<li><a href="" data-size="medium">Medium</a></li>
67
								<li><a href="" data-size="large">Large</a></li>
68
							</ul>
69
						</nav>
70
					</div>
71
				</div>
72
				<div class="middle">
73
					<div class="wizard-content">
74
						<div class="vm-wizard-carousel">
75
							<div class="step step-1">
76
								<ul class="os">
77
									<li>
78
										<div class="row">
79
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
80
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
81
											<div class="size-col">10GB</div>
82
											<div class="btn-col"><a href="">details</a></div>
83
										</div>
84
										<div class="details">
85
											<div class="row">
86
												<h3>Image metadata</h3>
87
												<dl>
88
													<dt>Owner</dt>
89
													<dd>system</dd>
90
													<dt>OS</dt>
91
													<dd>Kubuntu</dd>
92
													<dt>Kernel</dt>
93
													<dd>4.8.2</dd>
94
													<dt>Size</dt>
95
													<dd>2.51GB</dd>
96
													<dt>Users</dt>
97
													<dd>user</dd>
98
													<dt>Root partition</dt>
99
													<dd>1</dd>
100
												</dl>
101
											</div>
102
										</div>
103
									</li>
104
									<li>
105
										<div class="row">
106
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
107
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
108
											<div class="size-col">10GB</div>
109
											<div class="btn-col"><a href="">details</a></div>
110
										</div>
111
										<div class="details">
112
											<div class="row">
113
												<h3>Image metadata</h3>
114
												<dl>
115
													<dt>Owner</dt>
116
													<dd>system</dd>
117
													<dt>OS</dt>
118
													<dd>Kubuntu</dd>
119
													<dt>Kernel</dt>
120
													<dd>4.8.2</dd>
121
													<dt>Size</dt>
122
													<dd>2.51GB</dd>
123
													<dt>Users</dt>
124
													<dd>user</dd>
125
													<dt>Root partition</dt>
126
													<dd>1</dd>
127
												</dl>
128
											</div>
129
										</div>
130
									</li>
131
									<li>
132
										<div class="row">
133
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
134
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
135
											<div class="size-col">10GB</div>
136
											<div class="btn-col"><a href="">details</a></div>
137
										</div>
138
										<div class="details">
139
											<div class="row">
140
												<h3>Image metadata</h3>
141
												<dl>
142
													<dt>Owner</dt>
143
													<dd>system</dd>
144
													<dt>OS</dt>
145
													<dd>Kubuntu</dd>
146
													<dt>Kernel</dt>
147
													<dd>4.8.2</dd>
148
													<dt>Size</dt>
149
													<dd>2.51GB</dd>
150
													<dt>Users</dt>
151
													<dd>user</dd>
152
													<dt>Root partition</dt>
153
													<dd>1</dd>
154
												</dl>
155
											</div>
156
										</div>
157
									</li>
158
									<li  class="current">
159
										<div class="row">
160
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
161
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
162
											<div class="size-col">10GB</div>
163
											<div class="btn-col"><a href="">details</a></div>
164
										</div>
165
										<div class="details">
166
											<div class="row">
167
												<h3>Image metadata</h3>
168
												<dl>
169
													<dt>Owner</dt>
170
													<dd>system</dd>
171
													<dt>OS</dt>
172
													<dd>Kubuntu</dd>
173
													<dt>Kernel</dt>
174
													<dd>4.8.2</dd>
175
													<dt>Size</dt>
176
													<dd>2.51GB</dd>
177
													<dt>Users</dt>
178
													<dd>user</dd>
179
													<dt>Root partition</dt>
180
													<dd>1</dd>
181
												</dl>
182
											</div>
183
										</div>
184
									</li>
185
									<li>
186
										<div class="row">
187
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
188
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
189
											<div class="size-col">10GB</div>
190
											<div class="btn-col"><a href="">details</a></div>
191
										</div>
192
										<div class="details">
193
											<div class="row">
194
												<h3>Image metadata</h3>
195
												<dl>
196
													<dt>Owner</dt>
197
													<dd>system</dd>
198
													<dt>OS</dt>
199
													<dd>Kubuntu</dd>
200
													<dt>Kernel</dt>
201
													<dd>4.8.2</dd>
202
													<dt>Size</dt>
203
													<dd>2.51GB</dd>
204
													<dt>Users</dt>
205
													<dd>user</dd>
206
													<dt>Root partition</dt>
207
													<dd>1</dd>
208
												</dl>
209
											</div>
210
										</div>
211
									</li>
212
									<li>
213
										<div class="row">
214
											<div class="img-col"><img src="images/os-windows.png" alt=""></div>
215
											<a href="" class="name-col">Windows 2012</a>
216
											<div class="size-col">10GB</div>
217
											<div class="btn-col"><a href="">details</a></div>
218
										</div>
219
										<div class="details">
220
											<div class="row">
221
												<h3>Image metadata</h3>
222
												<dl>
223
													<dt>Owner</dt>
224
													<dd>system</dd>
225
													<dt>OS</dt>
226
													<dd>Kubuntu</dd>
227
													<dt>Kernel</dt>
228
													<dd>4.8.2</dd>
229
													<dt>Size</dt>
230
													<dd>2.51GB</dd>
231
													<dt>Users</dt>
232
													<dd>user</dd>
233
													<dt>Root partition</dt>
234
													<dd>1</dd>
235
												</dl>
236
											</div>
237
										</div>
238
									</li>
239
									<li>
240
										<div class="row">
241
											<div class="img-col"><img src="images/os-kubuntu.png" alt=""></div>
242
											<a href="" class="name-col">Kubuntu</a>
243
											<div class="size-col">10GB</div>
244
											<div class="btn-col"><a href="">details</a></div>
245
										</div>
246
										<div class="details">
247
											<div class="row">
248
												<h3>Image metadata</h3>
249
												<dl>
250
													<dt>Owner</dt>
251
													<dd>system</dd>
252
													<dt>OS</dt>
253
													<dd>Kubuntu</dd>
254
													<dt>Kernel</dt>
255
													<dd>4.8.2</dd>
256
													<dt>Size</dt>
257
													<dd>2.51GB</dd>
258
													<dt>Users</dt>
259
													<dd>user</dd>
260
													<dt>Root partition</dt>
261
													<dd>1</dd>
262
												</dl>
263
											</div>
264
										</div>
265
									</li>
266
									<li>
267
										<div class="row">
268
											<div class="img-col"><img src="images/os-fedora.png" alt=""></div>
269
											<a href="" class="name-col">Ubuntu Desktop LTS (Long Term Support)</a>
270
											<div class="size-col">10GB</div>
271
											<div class="btn-col"><a href="">details</a></div>
272
										</div>
273
										<div class="details">
274
											<div class="row">
275
												<h3>Image metadata</h3>
276
												<dl>
277
													<dt>Owner</dt>
278
													<dd>system</dd>
279
													<dt>OS</dt>
280
													<dd>Kubuntu</dd>
281
													<dt>Kernel</dt>
282
													<dd>4.8.2</dd>
283
													<dt>Size</dt>
284
													<dd>2.51GB</dd>
285
													<dt>Users</dt>
286
													<dd>user</dd>
287
													<dt>Root partition</dt>
288
													<dd>1</dd>
289
												</dl>
290
											</div>
291
										</div>
292
									</li>
293
								</ul>
294
							</div>
295
							<div class="step step-2">
296
								<div class="row">
297
									<form class="custom">
298
									  <select id="" class="medium">
299
									    <option>Assign to project</option>
300
									    <option>Project 2</option>
301
									    <option>Project 3</option>
302
									  </select>
303
									</form>
304
									<ul class="flavor">
305
										<li>
306
											<div class="title">
307
												<span class="snf-cpu icon"></span>
308
												<h2>CPU<span> (x cores)</span></h2>
309
												<p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
310
											</div>
311
											<div class="options-bar">
312
												<div class="bar">
313
													<div class="wrap">
314
														<div class="container">
315
															<!-- width percentages do not correspond to actual mesurements -->
316
															<div class="total" style="width:60%">
317
																<div class="current" style="width:30%"></div>
318
																<span>60%</span>
319
															</div>
320
														</div>
321
													</div>
322
												</div>
323
												<ul class="options with-flavor">
324
													<li><a href="" class="small current">1</a></li>
325
													<li><a href="" class="medium">2</a></li>
326
													<li><a href="" class="large">3</a></li>
327
													<li><a href="">4</a></li>
328
												</ul>
329
											</div>
330
										</li>
331
										<li>
332
											<div class="title">
333
												<span class="snf-ram icon"></span>
334
												<h2>Memory Size <span> (MB)</span></h2>
335
												<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>
336
											</div>
337
											<div class="options-bar">
338
												<div class="bar">
339
													<div class="wrap">
340
														<div class="container">
341
															<!-- width percentages do not correspond to actual mesurements -->
342
															<div class="total" style="width:60%">
343
																<div class="current" style="width:30%"></div>
344
																<span>60%</span>
345
															</div>
346
														</div>
347
													</div>
348
												</div>
349
												<ul class="options with-flavor">
350
													<li><a href="" class="small current">1024</a></li>
351
													<li><a href="" class="medium">2048</a></li>
352
													<li><a href="" class="large">4096</a></li>
353
												</ul>
354
											</div>
355
										</li>
356
										<li>
357
											<div class="title">
358
												<span class="snf-HDD icon"></span>
359
												<h2>Disk Size<span> (GB)</span></h2>
360
												<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>
361
											</div>
362
											<div class="options-bar">
363
												<div class="bar">
364
													<div class="wrap">
365
														<div class="container">
366
															<!-- width percentages do not correspond to actual mesurements -->
367
															<div class="total" style="width:40%">
368
																<div class="current" style="width:80%"></div>
369
																<span>40%</span>
370
															</div>
371
														</div>
372
													</div>
373
												</div>
374
												<ul class="options with-flavor">
375
													<li><a href="" class="small current">10</a></li>
376
													<li><a href="" class="medium">20</a></li>
377
													<li><a href="" class="large">30</a></li>
378
													<li><a href="">40</a></li>
379
												</ul>
380
											</div>
381
										</li>
382
										<li>
383
											<div class="title">
384
												<span class="snf-HDD icon"></span>
385
												<h2>Storage</h2>
386
												<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>
387
											</div>
388
											<div class="options-bar">
389
												<div class="bar">
390
													&nbsp;
391
												</div>
392
												<ul class="options">
393
													<li><a href="" class="current">DRBD</a></li>
394
													<li><a href="">Archipelago</a></li>
395
												</ul>
396
											</div>
397
										</li>
398
									</ul>
399
								</div>
400
							</div>
401
<!--step 3 -->
402
							<div class="step step-3">
403
								<div class="advanced-conf-step">
404
									<div class="adv-main row">
405
										<div class="vm-name">
406
											<h2>Machine name</h2>
407
											<span class="input"><input type="text" placeholder="My Ubuntu Server"></span>
408
										</div>
409
										<div class="expand-btn">
410
											<a class="expand-link" href="">
411
												Advanced Configuration
412
												<span class="snf-arrow-down"></span>
413
											</a>
414
										</div>
415
									</div>
416
									<div class="advanced-conf-options">
417
										<div class="ssh-keys-area area">
418
											<div class="row">
419
												<h2>Public SSH keys</h2>
420
												<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>
421
												<ul>
422
													<li class="checkbox"><h3>My public key long name one </h3><span class="snf-checkbox-unchecked"></span></li>
423
													<li class="checkbox"><h3>Other public key </h3><span class="snf-checkbox-unchecked"></span></li>
424
													<li class="checkbox"><h3>My public key long name one </h3><span class="snf-checkbox-unchecked"></span></li>
425
												</ul>
426
												<div>
427
													<a href="" class="btn5">... show more keys</a>
428
												</div>
429
											</div>
430
										</div>
431

  
432
										<div class="networks-area area">
433
											<h2 class="row">Networks</h2>
434
											<ul>
435
												<li class="checkbox row has-more select-net">
436
												<h3 class="">	
437
													<div class="net-icons">
438
														<span class="snf-www"></span>
439
														<span class="snf-modem"></span>
440
														<span class="snf-network_full"></span>
441
													</div>
442
													Public Network</h3>
443
													<span class="snf-checkbox-unchecked"></span>
444
												</li>
445
												<li class="more">
446
													<div class="row">
447
														<div class="checkbox clearfix">
448
															<h3>192.168.2.3</h3>
449
															<span class=" default snf-checkbox-checked"></span>
450
														</div>
451
														<div class="checkbox clearfix">
452
															<h3>192.168.2.3</h3>
453
															<span class="snf-checkbox-unchecked"></span>
454
														</div>
455
														<div class="checkbox clearfix">
456
															<h3>192.168.2.3</h3>
457
															<span class="snf-checkbox-unchecked"></span>
458
														</div>
459
														<div>
460
															<a href="" class="btn5">manage IPs</a>
461
														</div>
462
													</div>
463
												</li>
464
												<li class="checkbox row select-net">
465
												<h3 class="net-name">
466
													<div class="net-icons">
467
														<span class="snf-modem"></span>
468
														<span class="snf-network_full"></span>
469
													</div>
470
													Routed Network</h3>
471
													<span class="snf-checkbox-unchecked"></span>
472
												</li>
473
												<li class="checkbox row select-net">
474
												<h3 class="net-name">
475
													<div class="net-icons">
476
														<span class="snf-network_full"></span>
477
													</div>
478
													Private Network 1</h3>
479
													<span class="snf-checkbox-unchecked"></span>
480
												</li>
481
												<li class="checkbox row select-net">
482
													<h3 class="net-name">
483
													<div class="net-icons">
484
														<span class="snf-network_full"></span>
485
													</div>
486
													Private Network 2</h3>
487
													<span class="snf-checkbox-unchecked"></span>
488
												</li>
489
											</ul>
490

  
491
										</div>
492
										<div class="tags-area area">
493
											<div class="row">
494
												<h2>Tags</h2>
495
												<p>Dude use your tags like you eat your cereal.<br>You can color code them as well</p>
496
												<ul>
497
													<li class="checkbox">
498
														<h3>
499
															<span class="tag-demo tag4"></span>
500
															Operating system
501
														</h3>
502
														<span class="snf-checkbox-unchecked"></span>
503
													</li>
504
													<li class="checkbox">
505
														<h3>
506
															<span class="tag-demo tag5"></span>
507
															Pirate PC1
508
														</h3>
509
														<span class="snf-checkbox-unchecked"></span>
510
													</li>
511
													<li class="checkbox">
512
														<h3>
513
															<span class="tag-demo tag6"></span>
514
															Pirate PC1
515
														</h3>
516
														<span class="snf-checkbox-unchecked"></span>
517
													</li>
518
												</ul>
519
												<div ><a class="btn5 show-add-tag" href="">add Tag</a></div>
520
												<div class="snf-color-picker">
521
													<form action="" style="width: 400px;">
522
														<div id="picker">
523
															<div class="farbtastic">
524
																<div class="color" style="background-color: rgb(255, 0, 21);"></div>
525
																<div class="wheel"></div>
526
																<div class="overlay"></div>
527
																<div class="h-marker marker" style="left: 90px; top: 13px;"></div>
528
																<div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
529
															</div>
530
														</div>
531
														<div class="form-item">
532
															<input type="text" id="color" name="color" value="#16C1E9" disabled>
533
															<span class="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
534
														</div>
535
													</form>									
536
													<div class="btns">
537
														<a class="btn5" href="">OK</a>
538
														<a class="btn5 hide-add-tag" href="" id="hide-add-tag">CANCEL</a>
539
													</div>
540

  
541
												</div>
542
											</div> <!-- end of row -->
543
										</div>
544
									</div>
545
								</div>
546
<!-- end step 3 -->				</div>
547
							<div class="step step-4">
548
								<div class="summary">
549
									<div class="row">
550
										<dl>
551
											<dt>Machine name</dt>
552
											<dd>handsome frank</dd>
553
										</dl>
554
									</div>
555
									<div class="row">
556
										<h2>Images</h2>
557
										<dl>
558
											<dt>Name</dt>
559
											<dd>Debian Base</dd>
560
											<dt>Desciption</dt>
561
											<dd>open suse description open suse description open suse description open suse description open suse description</dd>
562
											<dt>os</dt>
563
											<dd>Debian</dd>
564
											<dt>Size</dt>
565
											<dd>10.4GB</dd>
566
											<dt>GUI</dt>
567
											<dd>No GUI</dd>
568
											<dt>Kernel</dt>
569
											<dd>2.3.4</dd>
570
										</dl>
571
									</div>
572
									<div class="row">
573
										<h2>Flavor</h2>
574
										<dl>
575
											<dt><span class="snf-cpu icon"></span>CPUs</dt>
576
											<dd>4x</dd>
577
											<dt><span class="snf-ram icon"></span>Memory</dt>
578
											<dd>512 MB</dd>
579
											<dt><span class="snf-HDD icon"></span>Disk</dt>
580
											<dd>4GB</dd>
581
											<dt><span class="snf-HDD icon"></span>Storage Type</dt>
582
											<dd>DRBD</dd>
583
										</dl>
584
									</div>
585
									<div class="row">
586
										<dl>
587
											<dt>Machine Tags</dt>
588
											<dd>Database server</dd>
589
											<dt>SSH Keys</dt>
590
											<dd>
591
												my public key 1<br>
592
												my public key 3<br>
593
											</dd>
594
											<dt>IPs</dt>
595
											<dd>192.168.1.3<br>192.168.1.3</dd>
596
											<dt>Private networks</dt>
597
											<dd>No private networks selected</dd>
598
										</dl>
599
									</div>
600
								</div>
601
							</div>
602
						</div>
603
					</div>
604
				</div>
605
				<div class="bottom">
606
					<div class="row">
607
						<a href="" class="nav prev"><span>CANCEL</span></a>
608
						<a href="" class="nav next"><span>NEXT</span></a>
609
						<ul class="nums">
610
							<li class="current"><span href="">1</span></li>
611
							<li><span href="" disabled>2</span></li>
612
							<li><span href="" disabled>3</span></li>
613
							<li><span href="" disabled>4</span></li>
614
						</ul>
615
					</div>
616
				</div>
617
			</div>
618
		</div>
619
		
620
		<section class="actions-bar clearfix">
621
			<div class="row">
622
				<div class="new-btn"><a href="" data-overlay-id="#vm-wizard"><span>+</span> NEW MACHINE </a></div>
623
				<div class="main-actions">
624
					<ul>
625
						<li class="running" ><a href="" data-overlay-id="#overlay1">Reboot</a></li>
626
						<li class="running"><a href="" data-overlay-id="#overlay1">Shutdown</a></li>
627
						<li class="both"><a href="">Destroy</a></li>
628
						<li class="stopped"><a href="">Start</a></li>
629
						 <!-- in case we want an action always activated
630
						<li class="pernament"><a href="" class="active">Action</a></li> -->
631
					</ul>
632
				</div>
633
			</div>
634
		</section>
635
		<section class="main row">
636
			<div class="vms entities">
637
				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
638
					<li data-order="0">
639
						<div class="container">
640
							<div class="img-wrap">
641
								<div class="img running">
642
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
643
									<span class="os" data-reveal-id="vm-connect">unknown</span>
644
								</div>
645
							</div>
646
							<p class="visible-info">
647
								<span class="title">
648
									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
649
								</span>
650
							</p>
651
							<div class="tags">
652
								<a href="" class="tag1" title="Server">&nbsp;</a>
653
								<a href="" class="tag2" title="Experiment">&nbsp;</a>
654
							</div>
655
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
656
						</div>
657
					</li>
658
					<li data-order="1">
659
						<div class="container">
660
							<div class="img-wrap">
661
								<div class="img running">
662
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
663
									<span class="os fedora" data-reveal-id="vm-connect">fedora</span>
664
								</div>
665
							</div>
666
							<p class="visible-info">
667
								<span class="title">
668
									<a href="vm_details.html"><em>vm name 1 really large name</em></a>
669
								</span>
670
							</p>
671
							<div class="tags">
672
								<a href="" class="tag3">&nbsp;</a>
673
								<a href="" class="tag2">&nbsp;</a>
674
							</div>
675
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
676
						</div>
677
					</li>
678
					<li data-order="2">
679
						<div class="container">
680
							<div class="img-wrap">
681
								<div class="img running">
682
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
683
									<span class="os" data-reveal-id="vm-connect">unknown</span>
684
								</div>
685
							</div>
686
							<p class="visible-info">
687
								<span class="title">
688
									<a href="vm_details.html"><em>vm name 2</em></a>
689
								</span>
690
							</p>
691
							<div class="tags">
692
								<a href="" class="tag2">&nbsp;</a>
693
							</div>
694
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
695
						</div>
696
					</li>
697
					<li  data-order="3">
698
						<div class="container">
699
							<div class="img-wrap">
700
								<div class="img stopped">
701
									<span class="snf-PC_fill"></span>
702
									<span class="os fedora">fedora</span>
703
								</div>
704
							</div>
705
							<p class="visible-info">
706
								<span class="title">
707
									<a href="vm_details.html"><em>vm name 3</em></a>
708
								</span>
709
							</p>
710
							<div class="tags">
711
								<a href="" class="tag1">&nbsp;</a>
712
								<a href="" class="tag2">&nbsp;</a>
713
								<a href="" class="tag3">&nbsp;</a>
714
							</div>
715
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
716
						</div>
717
					</li>
718
					<li  data-order="4">
719
						<div class="container">
720
							<div class="img-wrap">
721
								<div class="img running">
722
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
723
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
724
								</div>
725
							</div>
726
							<p class="visible-info">
727
								<span class="title">
728
									<a href="vm_details.html"><em>vm name 4</em></a>
729
								</span>
730
							</p>
731
							<div class="tags">
732
								<a href="" class="tag1">&nbsp;</a>
733
								<a href="" class="tag2">&nbsp;</a>
734
							</div>
735
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
736
						</div>
737
					</li>
738
					 <li  data-order="5">
739
						<div class="container">
740
							<div class="img-wrap">
741
								<div class="img running">
742
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
743
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
744
								</div>
745
							</div>
746
							<p class="visible-info">
747
								<span class="title">
748
									<a href="vm_details.html"><em>vm name 4</em></a>
749
								</span>
750
							</p>
751
							<div class="tags">
752
								<a href="" class="tag1">&nbsp;</a>
753
								<a href="" class="tag2">&nbsp;</a>
754
							</div>
755
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
756
						</div>
757
					</li>
758
					 <li  data-order="6">
759
						<div class="container">
760
							<div class="img-wrap">
761
								<div class="img running">
762
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
763
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
764
								</div>
765
							</div>
766
							<p class="visible-info">
767
								<span class="title">
768
									<a href="vm_details.html"><em>vm name 4</em></a>
769
								</span>
770
							</p>
771
							<div class="tags">
772
								<a href="" class="tag1">&nbsp;</a>
773
								<a href="" class="tag2">&nbsp;</a>
774
							</div>
775
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
776
						</div>
777
					</li>
778
					 <li  data-order="6">
779
						<div class="container">
780
							<div class="img-wrap">
781
								<div class="img running">
782
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
783
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
784
								</div>
785
							</div>
786
							<p class="visible-info">
787
								<span class="title">
788
									<a href="vm_details.html"><em>vm name 4</em></a>
789
								</span>
790
							</p>
791
							<div class="tags">
792
								<a href="" class="tag1">&nbsp;</a>
793
								<a href="" class="tag2">&nbsp;</a>
794
							</div>
795
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
796
						</div>
797
					</li>
798
					 <li  data-order="7">
799
						<div class="container">
800
							<div class="img-wrap">
801
								<div class="img running">
802
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
803
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
804
								</div>
805
							</div>
806
							<p class="visible-info">
807
								<span class="title">
808
									<a href="vm_details.html"><em>vm name 4</em></a>
809
								</span>
810
							</p>
811
							<div class="tags">
812
								<a href="" class="tag1">&nbsp;</a>
813
								<a href="" class="tag2">&nbsp;</a>
814
							</div>
815
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
816
						</div>
817
					</li>
818
					 <li  data-order="8">
819
						<div class="container">
820
							<div class="img-wrap">
821
								<div class="img running">
822
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
823
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
824
								</div>
825
							</div>
826
							<p class="visible-info">
827
								<span class="title">
828
									<a href="vm_details.html"><em>vm name 4</em></a>
829
								</span>
830
							</p>
831
							<div class="tags">
832
								<a href="" class="tag1">&nbsp;</a>
833
								<a href="" class="tag2">&nbsp;</a>
834
							</div>
835
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
836
						</div>
837
					</li>
838
					 <li  data-order="9">
839
						<div class="container">
840
							<div class="img-wrap">
841
								<div class="img running">
842
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
843
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
844
								</div>
845
							</div>
846
							<p class="visible-info">
847
								<span class="title">
848
									<a href="vm_details.html"><em>vm name 4</em></a>
849
								</span>
850
							</p>
851
							<div class="tags">
852
								<a href="" class="tag1">&nbsp;</a>
853
								<a href="" class="tag2">&nbsp;</a>
854
							</div>
855
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
856
						</div>
857
					</li>
858
					 <li  data-order="10">
859
						<div class="container">
860
							<div class="img-wrap">
861
								<div class="img running">
862
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
863
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
864
								</div>
865
							</div>
866
							<p class="visible-info">
867
								<span class="title">
868
									<a href="vm_details.html"><em>vm name 4</em></a>
869
								</span>
870
							</p>
871
							<div class="tags">
872
								<a href="" class="tag1">&nbsp;</a>
873
								<a href="" class="tag2">&nbsp;</a>
874
							</div>
875
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
876
						</div>
877
					</li>
878
					 <li  data-order="11">
879
						<div class="container">
880
							<div class="img-wrap">
881
								<div class="img running">
882
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
883
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
884
								</div>
885
							</div>
886
							<p class="visible-info">
887
								<span class="title">
888
									<a href="vm_details.html"><em>vm name 4</em></a>
889
								</span>
890
							</p>
891
							<div class="tags">
892
								<a href="" class="tag1">&nbsp;</a>
893
								<a href="" class="tag2">&nbsp;</a>
894
							</div>
895
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
896
						</div>
897
					</li>
898
					 <li  data-order="12">
899
						<div class="container">
900
							<div class="img-wrap">
901
								<div class="img running">
902
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
903
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
904
								</div>
905
							</div>
906
							<p class="visible-info">
907
								<span class="title">
908
									<a href="vm_details.html"><em>vm name 4</em></a>
909
								</span>
910
							</p>
911
							<div class="tags">
912
								<a href="" class="tag1">&nbsp;</a>
913
								<a href="" class="tag2">&nbsp;</a>
914
							</div>
915
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
916
						</div>
917
					</li>
918
					 <li  data-order="13">
919
						<div class="container">
920
							<div class="img-wrap">
921
								<div class="img running">
922
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
923
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
924
								</div>
925
							</div>
926
							<p class="visible-info">
927
								<span class="title">
928
									<a href="vm_details.html"><em>vm name 4</em></a>
929
								</span>
930
							</p>
931
							<div class="tags">
932
								<a href="" class="tag1">&nbsp;</a>
933
								<a href="" class="tag2">&nbsp;</a>
934
							</div>
935
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
936
						</div>
937
					</li>
938
					 <li  data-order="14">
939
						<div class="container">
940
							<div class="img-wrap">
941
								<div class="img running">
942
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
943
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
944
								</div>
945
							</div>
946
							<p class="visible-info">
947
								<span class="title">
948
									<a href="vm_details.html"><em>vm name 4</em></a>
949
								</span>
950
							</p>
951
							<div class="tags">
952
								<a href="" class="tag1">&nbsp;</a>
953
								<a href="" class="tag2">&nbsp;</a>
954
							</div>
955
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
956
						</div>
957
					</li>
958
					 <li  data-order="15">
959
						<div class="container">
960
							<div class="img-wrap">
961
								<div class="img running">
962
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
963
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
964
								</div>
965
							</div>
966
							<p class="visible-info">
967
								<span class="title">
968
									<a href="vm_details.html"><em>vm name 4</em></a>
969
								</span>
970
							</p>
971
							<div class="tags">
972
								<a href="" class="tag1">&nbsp;</a>
973
								<a href="" class="tag2">&nbsp;</a>
974
							</div>
975
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
976
						</div>
977
					</li>
978
					 <li  data-order="16">
979
						<div class="container">
980
							<div class="img-wrap">
981
								<div class="img running">
982
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
983
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
984
								</div>
985
							</div>
986
							<p class="visible-info">
987
								<span class="title">
988
									<a href="vm_details.html"><em>vm name 4</em></a>
989
								</span>
990
							</p>
991
							<div class="tags">
992
								<a href="" class="tag1">&nbsp;</a>
993
								<a href="" class="tag2">&nbsp;</a>
994
							</div>
995
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
996
						</div>
997
					</li>
998
					 <li  data-order="17">
999
						<div class="container">
1000
							<div class="img-wrap">
1001
								<div class="img running">
1002
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1003
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1004
								</div>
1005
							</div>
1006
							<p class="visible-info">
1007
								<span class="title">
1008
									<a href="vm_details.html"><em>vm name 4</em></a>
1009
								</span>
1010
							</p>
1011
							<div class="tags">
1012
								<a href="" class="tag1">&nbsp;</a>
1013
								<a href="" class="tag2">&nbsp;</a>
1014
							</div>
1015
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1016
						</div>
1017
					</li>
1018
					 <li  data-order="18">
1019
						<div class="container">
1020
							<div class="img-wrap">
1021
								<div class="img running">
1022
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1023
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1024
								</div>
1025
							</div>
1026
							<p class="visible-info">
1027
								<span class="title">
1028
									<a href="vm_details.html"><em>vm name 4</em></a>
1029
								</span>
1030
							</p>
1031
							<div class="tags">
1032
								<a href="" class="tag1">&nbsp;</a>
1033
								<a href="" class="tag2">&nbsp;</a>
1034
							</div>
1035
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1036
						</div>
1037
					</li>
1038
					 <li  data-order="19">
1039
						<div class="container">
1040
							<div class="img-wrap">
1041
								<div class="img running">
1042
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1043
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1044
								</div>
1045
							</div>
1046
							<p class="visible-info">
1047
								<span class="title">
1048
									<a href="vm_details.html"><em>vm name 4</em></a>
1049
								</span>
1050
							</p>
1051
							<div class="tags">
1052
								<a href="" class="tag1">&nbsp;</a>
1053
								<a href="" class="tag2">&nbsp;</a>
1054
							</div>
1055
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1056
						</div>
1057
					</li>
1058
					  <li  data-order="20">
1059
						<div class="container">
1060
							<div class="img-wrap">
1061
								<div class="img running">
1062
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1063
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1064
								</div>
1065
							</div>
1066
							<p class="visible-info">
1067
								<span class="title">
1068
									<a href="vm_details.html"><em>vm name 4</em></a>
1069
								</span>
1070
							</p>
1071
							<div class="tags">
1072
								<a href="" class="tag1">&nbsp;</a>
1073
								<a href="" class="tag2">&nbsp;</a>
1074
							</div>
1075
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1076
						</div>
1077
					</li>
1078
					  <li  data-order="21">
1079
						<div class="container">
1080
							<div class="img-wrap">
1081
								<div class="img running">
1082
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1083
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1084
								</div>
1085
							</div>
1086
							<p class="visible-info">
1087
								<span class="title">
1088
									<a href="vm_details.html"><em>vm name 4</em></a>
1089
								</span>
1090
							</p>
1091
							<div class="tags">
1092
								<a href="" class="tag1">&nbsp;</a>
1093
								<a href="" class="tag2">&nbsp;</a>
1094
							</div>
1095
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1096
						</div>
1097
					</li>
1098
					  <li  data-order="22">
1099
						<div class="container">
1100
							<div class="img-wrap">
1101
								<div class="img running">
1102
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1103
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1104
								</div>
1105
							</div>
1106
							<p class="visible-info">
1107
								<span class="title">
1108
									<a href="vm_details.html"><em>vm name 4</em></a>
1109
								</span>
1110
							</p>
1111
							<div class="tags">
1112
								<a href="" class="tag1">&nbsp;</a>
1113
								<a href="" class="tag2">&nbsp;</a>
1114
							</div>
1115
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1116
						</div>
1117
					</li>
1118
					  <li  data-order="23">
1119
						<div class="container">
1120
							<div class="img-wrap">
1121
								<div class="img running">
1122
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1123
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1124
								</div>
1125
							</div>
1126
							<p class="visible-info">
1127
								<span class="title">
1128
									<a href="vm_details.html"><em>vm name 4</em></a>
1129
								</span>
1130
							</p>
1131
							<div class="tags">
1132
								<a href="" class="tag1">&nbsp;</a>
1133
								<a href="" class="tag2">&nbsp;</a>
1134
							</div>
1135
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1136
						</div>
1137
					</li>
1138
					  <li  data-order="24">
1139
						<div class="container">
1140
							<div class="img-wrap">
1141
								<div class="img running">
1142
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1143
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1144
								</div>
1145
							</div>
1146
							<p class="visible-info">
1147
								<span class="title">
1148
									<a href="vm_details.html"><em>vm name 4</em></a>
1149
								</span>
1150
							</p>
1151
							<div class="tags">
1152
								<a href="" class="tag1">&nbsp;</a>
1153
								<a href="" class="tag2">&nbsp;</a>
1154
							</div>
1155
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1156
						</div>
1157
					</li>
1158
					  <li  data-order="25">
1159
						<div class="container">
1160
							<div class="img-wrap">
1161
								<div class="img running">
1162
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1163
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1164
								</div>
1165
							</div>
1166
							<p class="visible-info">
1167
								<span class="title">
1168
									<a href="vm_details.html"><em>vm name 4</em></a>
1169
								</span>
1170
							</p>
1171
							<div class="tags">
1172
								<a href="" class="tag1">&nbsp;</a>
1173
								<a href="" class="tag2">&nbsp;</a>
1174
							</div>
1175
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1176
						</div>
1177
					</li>
1178
					  <li  data-order="26">
1179
						<div class="container">
1180
							<div class="img-wrap">
1181
								<div class="img running">
1182
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1183
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1184
								</div>
1185
							</div>
1186
							<p class="visible-info">
1187
								<span class="title">
1188
									<a href="vm_details.html"><em>vm name 4</em></a>
1189
								</span>
1190
							</p>
1191
							<div class="tags">
1192
								<a href="" class="tag1">&nbsp;</a>
1193
								<a href="" class="tag2">&nbsp;</a>
1194
							</div>
1195
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1196
						</div>
1197
					</li>
1198
					  <li  data-order="27">
1199
						<div class="container">
1200
							<div class="img-wrap">
1201
								<div class="img running">
1202
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1203
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1204
								</div>
1205
							</div>
1206
							<p class="visible-info">
1207
								<span class="title">
1208
									<a href="vm_details.html"><em>vm name 4</em></a>
1209
								</span>
1210
							</p>
1211
							<div class="tags">
1212
								<a href="" class="tag1">&nbsp;</a>
1213
								<a href="" class="tag2">&nbsp;</a>
1214
							</div>
1215
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1216
						</div>
1217
					</li>
1218
					  <li  data-order="28">
1219
						<div class="container">
1220
							<div class="img-wrap">
1221
								<div class="img running">
1222
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1223
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1224
								</div>
1225
							</div>
1226
							<p class="visible-info">
1227
								<span class="title">
1228
									<a href="vm_details.html"><em>vm name 4</em></a>
1229
								</span>
1230
							</p>
1231
							<div class="tags">
1232
								<a href="" class="tag1">&nbsp;</a>
1233
								<a href="" class="tag2">&nbsp;</a>
1234
							</div>
1235
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1236
						</div>
1237
					</li>
1238
					  <li  data-order="29">
1239
						<div class="container">
1240
							<div class="img-wrap">
1241
								<div class="img running">
1242
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1243
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1244
								</div>
1245
							</div>
1246
							<p class="visible-info">
1247
								<span class="title">
1248
									<a href="vm_details.html"><em>vm name 4</em></a>
1249
								</span>
1250
							</p>
1251
							<div class="tags">
1252
								<a href="" class="tag1">&nbsp;</a>
1253
								<a href="" class="tag2">&nbsp;</a>
1254
							</div>
1255
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1256
						</div>
1257
					</li>
1258
					  <li  data-order="30">
1259
						<div class="container">
1260
							<div class="img-wrap">
1261
								<div class="img running">
1262
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1263
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1264
								</div>
1265
							</div>
1266
							<p class="visible-info">
1267
								<span class="title">
1268
									<a href="vm_details.html"><em>vm name 4</em></a>
1269
								</span>
1270
							</p>
1271
							<div class="tags">
1272
								<a href="" class="tag1">&nbsp;</a>
1273
								<a href="" class="tag2">&nbsp;</a>
1274
							</div>
1275
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1276
						</div>
1277
					</li>
1278
					  <li  data-order="31">
1279
						<div class="container">
1280
							<div class="img-wrap">
1281
								<div class="img running">
1282
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1283
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1284
								</div>
1285
							</div>
1286
							<p class="visible-info">
1287
								<span class="title">
1288
									<a href="vm_details.html"><em>vm name 4</em></a>
1289
								</span>
1290
							</p>
1291
							<div class="tags">
1292
								<a href="" class="tag1">&nbsp;</a>
1293
								<a href="" class="tag2">&nbsp;</a>
1294
							</div>
1295
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1296
						</div>
1297
					</li>
1298
					  <li  data-order="32">
1299
						<div class="container">
1300
							<div class="img-wrap">
1301
								<div class="img running">
1302
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1303
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1304
								</div>
1305
							</div>
1306
							<p class="visible-info">
1307
								<span class="title">
1308
									<a href="vm_details.html"><em>vm name 4</em></a>
1309
								</span>
1310
							</p>
1311
							<div class="tags">
1312
								<a href="" class="tag1">&nbsp;</a>
1313
								<a href="" class="tag2">&nbsp;</a>
1314
							</div>
1315
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1316
						</div>
1317
					</li>
1318
					  <li  data-order="33">
1319
						<div class="container">
1320
							<div class="img-wrap">
1321
								<div class="img running">
1322
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1323
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1324
								</div>
1325
							</div>
1326
							<p class="visible-info">
1327
								<span class="title">
1328
									<a href="vm_details.html"><em>vm name 4</em></a>
1329
								</span>
1330
							</p>
1331
							<div class="tags">
1332
								<a href="" class="tag1">&nbsp;</a>
1333
								<a href="" class="tag2">&nbsp;</a>
1334
							</div>
1335
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1336
						</div>
1337
					</li>
1338
					  <li  data-order="34">
1339
						<div class="container">
1340
							<div class="img-wrap">
1341
								<div class="img running">
1342
									<span class="snf-PC_fill" data-reveal-id="vm-connect"></span>
1343
									<span class="os kubuntu" data-reveal-id="vm-connect">kubuntu</span>
1344
								</div>
1345
							</div>
1346
							<p class="visible-info">
1347
								<span class="title">
1348
									<a href="vm_details.html"><em>vm name 4</em></a>
1349
								</span>
1350
							</p>
1351
							<div class="tags">
1352
								<a href="" class="tag1">&nbsp;</a>
1353
								<a href="" class="tag2">&nbsp;</a>
1354
							</div>
1355
							<a href="" class="check"><span class="snf-checkbox-unchecked"></span></a>
1356
						</div>
1357
					</li>
1358
					 
1359
					<li  data-order="35">
1360
						<div class="add-new"><a href="vm_create_a.html">NEW<br>MACHINE</a></div>	
1361
					</li>
1362
					 
1363
				</ul>
1364
			</div>
1365
		</section>
1366
		</div>
1367
	
1368
	<div id="vm-connect" class="reveal-modal medium">
1369
  		<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>
1370
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
1371
		
1372
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
1373
		<p>Alternatively you can connect to your VM via <a href="">Console</a> (slow connection - meant only for troubleshooting.</p>
1374
  		<a class="close-reveal-modal" title="close window">&#215;</a>
1375
	</div>
1376

  
1377
	<script src="javascripts/vendor/jquery.js"></script>
1378
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
1379
	<script src="javascripts/foundation/foundation.js"></script>
1380
	<script src="javascripts/foundation/foundation.alerts.js"></script>
1381
	
1382
	<script src="javascripts/foundation/foundation.clearing.js"></script>
1383
	
1384
	<script src="javascripts/foundation/foundation.cookie.js"></script>
1385
	
1386
	<script src="javascripts/foundation/foundation.dropdown.js"></script>
1387
	
1388
	<script src="javascripts/foundation/foundation.forms.js"></script>
1389
	
1390
	<script src="javascripts/foundation/foundation.joyride.js"></script>
1391
	
1392
	<script src="javascripts/foundation/foundation.magellan.js"></script>
1393
	
1394
	<script src="javascripts/foundation/foundation.orbit.js"></script>
1395
	
1396
	<script src="javascripts/foundation/foundation.placeholder.js"></script>
1397
	
1398
	<script src="javascripts/foundation/foundation.reveal.js"></script>
1399
	
1400
	<script src="javascripts/foundation/foundation.section.js"></script>
1401
	
1402
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
1403
	
1404
	<script src="javascripts/foundation/foundation.topbar.js"></script>
1405
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
1406
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
1407
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
1408
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
1409
	<script src="javascripts/common.js"></script>
1410
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>
1411
	<script type="text/javascript" src="javascripts/vm-wizard.js"></script>
1412
  <script>
1413
    $(document).foundation();
1414
    $(document).ready(function() {
1415

  
1416
    })
1417
  </script>
1418
</body>
1419
</html>
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
276 276
		a {
277 277
			position: relative;
278 278
			top:-5px;
279
			&:focus {
280
				border: 1px solid $secondary-color;
281
				padding: 10px;
282
			}
279 283
		}
280 284
		img {
281 285
			max-height: 30px;			
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
1
/* line 264, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
1
/* line 264, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
2 2
*,
3 3
*:before,
4 4
*:after {
......
7 7
  box-sizing: border-box;
8 8
}
9 9

  
10
/* line 269, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
10
/* line 269, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
11 11
html,
12 12
body {
13 13
  font-size: 100%;
14 14
}
15 15

  
16
/* line 272, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
16
/* line 272, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
17 17
body {
18 18
  background: white;
19 19
  color: #222222;
......
27 27
  cursor: default;
28 28
}
29 29

  
30
/* line 285, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
30
/* line 285, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
31 31
a:hover {
32 32
  cursor: pointer;
33 33
}
34 34

  
35
/* line 288, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
35
/* line 288, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
36 36
a:focus {
37 37
  outline: none;
38 38
}
39 39

  
40
/* line 293, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
40
/* line 293, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
41 41
img,
42 42
object,
43 43
embed {
......
45 45
  height: auto;
46 46
}
47 47

  
48
/* line 296, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
48
/* line 296, ../../../../../../../../.rvm/gems/ruby-1.9.2-p320/gems/zurb-foundation-4.3.1/scss/foundation/components/_global.scss */
49 49
object,
50 50
embed {
... This diff was truncated because it exceeds the maximum size that can be displayed.

Also available in: Unified diff