Revision 25a02c79

b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_overlays.scss
103 103
		display:none;
104 104
	}
105 105
	&.no-vm {
106
		background:url(../images/draw-welcome.png) no-repeat center 80px $secondary-color;
106
		background:url(../images/draw-welcome.png) no-repeat center 50px $secondary-color;
107 107
		.welcome {
108 108
			display:none;
109 109
			color:#fff;
110 110
			text-align:center;
111 111
			position: relative;
112
			top:10px;
112
			top:-15px;
113 113
			left:75px;
114 114
			display:block;
115 115
		}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
1014 1014
$tooltip-bg: $primary-color;
1015 1015
$tooltip-font-size: emCalc(12px);
1016 1016
$tooltip-font-weight: normal;
1017
$tooltip-font-color: $black;
1017
$tooltip-font-color: #fff;
1018 1018
// $tooltip-line-height: 1.3;
1019 1019
// $tooltip-close-font-size: emCalc(10px);
1020 1020
// $tooltip-close-font-weight: normal;
b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
6596 6596
  max-width: 85%;
6597 6597
  left: 50%;
6598 6598
  width: 100%;
6599
  color: #1a1a1a;
6599
  color: white;
6600 6600
  background: #919194;
6601 6601
  -webkit-border-radius: 7px;
6602 6602
  border-radius: 7px;
......
8669 8669
}
8670 8670
/* line 105, ../sass/_overlays.scss */
8671 8671
.overlay-wrapper.no-vm {
8672
  background: url(../images/draw-welcome.png) no-repeat center 80px #30c79e;
8672
  background: url(../images/draw-welcome.png) no-repeat center 50px #30c79e;
8673 8673
}
8674 8674
/* line 107, ../sass/_overlays.scss */
8675 8675
.overlay-wrapper.no-vm .welcome {
......
8677 8677
  color: #fff;
8678 8678
  text-align: center;
8679 8679
  position: relative;
8680
  top: 10px;
8680
  top: -15px;
8681 8681
  left: 75px;
8682 8682
  display: block;
8683 8683
}
b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list_no_vms.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/farbtastic.css" />
15
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
16
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
17
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
18

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

  
775
	<script src="javascripts/vendor/jquery.js"></script>
776
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
777
	<script src="javascripts/underscore-min.js"></script>
778
	<script src="javascripts/foundation/foundation.js"></script>
779
	<script src="javascripts/foundation/foundation.alerts.js"></script>
780
	
781
	<script src="javascripts/foundation/foundation.clearing.js"></script>
782
	
783
	<script src="javascripts/foundation/foundation.cookie.js"></script>
784
	
785
	<script src="javascripts/foundation/foundation.dropdown.js"></script>
786
	
787
	<script src="javascripts/foundation/foundation.forms.js"></script>
788
	
789
	<script src="javascripts/foundation/foundation.joyride.js"></script>
790
	
791
	<script src="javascripts/foundation/foundation.magellan.js"></script>
792
	
793
	<script src="javascripts/foundation/foundation.orbit.js"></script>
794
	
795
	<script src="javascripts/foundation/foundation.placeholder.js"></script>
796
	
797
	<script src="javascripts/foundation/foundation.reveal.js"></script>
798
	
799
	<script src="javascripts/foundation/foundation.section.js"></script>
800
	
801
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
802
	<script src="javascripts/foundation/foundation.topbar.js"></script>
803
	<script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
804
	<script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
805
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
806
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
807
	<!-- dropzone.js used for drag and drop files to upload them --> 
808
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
809
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
810
	<!-- fabrastic.js used for the color picker --> 
811
	<script type="text/javascript" src="javascripts/farbtastic.js"></script>
812
	<script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
813
	<script src="javascripts/common.js"></script>
814
	
815
	<script type="text/javascript" src="javascripts/wizard.js"></script>
816
	<script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
817
  <script>
818
    $(document).foundation();
819
    $(document).ready(function() {
820

  
821
    })
822
  </script>
823
</body>
824
</html>

Also available in: Unified diff