Revision 27cd6fcb

b/snf-cyclades-app/synnefo/ui/new_ui/ui/index.html
21 21
 			<h2>Misc</h2>
22 22
 			<ul>
23 23
 				<li><a href="icon_guide.html">Info about Icon-Font</a></li>
24
 				<li><a href="vm_list_test_icon.html">Icon-Font samples in UI</a></li>
25 24
 			</ul>
26 25
 		
27 26
 			<h2>Kpal original designs</h2>
/dev/null
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 | Network 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/font_custom.css" />
13
    <link rel="stylesheet" href="stylesheets/icons.css" />
14
    <link rel="stylesheet" href="stylesheets/normalize.css" />
15
    <link rel="stylesheet" href="stylesheets/app.css" />
16
    <link rel="stylesheet" href="stylesheets/styles.css" />
17
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
18
    <script src="javascripts/vendor/custom.modernizr.js"></script>
19

  
20
</head>
21
<body>
22
	
23
	<div class="row-full">
24
		<header class="header">
25
			
26
			<div class="logo">
27
				<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
28
			</div>
29
			
30
			<nav class="top-nav menu2 icons-nav">
31
				
32
				<ul>
33
					<li><a href="pithos_list_test_icon.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-font">y</span></a></li>
34
					<li><a href="vm_list_test_icon.html" data-tooltip class="has-tip" title="Machines"><span class="snf-font">w</span></a></li>
35
					
36
					<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-font">u</span></a></li>
37
					<li><a href="network_list_test_icon.html" data-tooltip class="has-tip" title="Networks"><span class="snf-font">v</span></a></li>
38
					<li><a href="" data-tooltip class="has-tip" title="Dashboard"><span class="snf-font">z</span></a></li>
39
				</ul>
40
				 
41
			</nav>
42
			
43
			<div class="login">
44
				<a href="">test@grnet.gr</a>
45
			</div>
46
			<div class="actions clearfix">
47
				<div class="lt-actions">
48
					<div class="new-btn">
49
						<a href="network_create.html"><span>+</span> NEW NETWORK
50
						</a>
51
					</div>
52
				</div>
53
				<div class="main-actions">
54
					<ul>
55
						<li class="running single"><a href="">Add machine</a></li>
56
						<li class="both"><a href="">Destroy</a></li>
57
					</ul>
58
				</div>
59
				</div>
60
			</div>
61
		</header>
62
		<div class="info top-info alert">
63
			<div class="wrap">
64
				<p>ALERT!</p>
65

  
66
				<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
67
			</div>
68
			<a href="#" class="close" title="hide message">close</a>
69
		</div>
70

  
71
	</div>
72
	<div class="row-full wrapper">
73

  
74
		
75
		<!-- main area -->
76
		<section class="main onecol">
77
			
78
			<div class="networks entities">
79
				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
80
					<li data-order="0">
81
						<div class="container">
82
							<div class="options">
83
								<div class="wrap">
84
									<a href="network_details.html">details</a>
85
								</div>
86
							</div>
87
							<div class="img-wrap">
88
								<div class="img running">
89
									<div class="snf-font">v</div>								
90
								</div>
91
							</div>
92
							
93
							<p class="visible-info">
94
								<span><em>IPv4 83.212.97.127</em></span>
95
								<span class="title"><em>Network Name</em></span>
96
							</p>
97
							<a href="" class="check"><span class="snf-font snf-font">a</span></a>
98
							
99
						</div>
100
					</li>
101
					<li data-order="1">
102
						<div class="container">
103
							<div class="options">
104
								<div class="wrap">
105
									
106
									<a href="network_details.html">details</a>
107
									
108
								</div>
109
							</div>
110
							<div class="img-wrap">
111
								<div class="img running">
112
									<div class="snf-font">v</div>
113
									
114
								</div>
115
							</div>
116
							
117
							<p class="visible-info">
118
								<span><em>IPv4 83.212.97.127</em></span>
119
								<span class="title"><em>Network Name</em></span>
120
							</p>
121
							<a href="" class="check"><span class="snf-font snf-font">a</span></a>
122
							
123
						</div>
124
					</li>
125
					
126
					<li data-order="2">
127
						<div class="container">
128
							<div class="options">
129
								<div class="wrap">
130
									
131
									<a href="network_details.html">details</a>
132
									
133
								</div>
134
							</div>
135
							<div class="img-wrap">
136
								<div class="img running">
137
									<div class="snf-font bolding">v</div>
138
								</div>
139
							</div>
140
							
141
							<p class="visible-info">
142
								<span><em>IPv4 83.212.97.127</em></span>
143
								<span class="title"><em>Network Name</em></span>
144
							</p>
145
							<a href="" class="check"><span class="snf-font snf-font">a</span></a>
146
							
147
						</div>
148
					</li>
149
					
150
					 
151
					<li data-order="3">
152
						<div class="add-new"><a href="network_create.html">NEW<br>NETWORK</a></div>	
153
					</li>
154
					 
155
				</ul>
156
			</div>
157
		</section>
158
	</div>
159
	
160
	<div id="vm-connect" class="reveal-modal medium">
161
  		<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>
162
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
163

  
164
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
165
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
166
  		<a class="close-reveal-modal" title="close window">&#215;</a>
167
	</div>
168
 
169
  <script src="javascripts/vendor/jquery.js"></script>
170
  <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
171
  <script src="javascripts/foundation/foundation.js"></script>
172
	
173
	<script src="javascripts/foundation/foundation.alerts.js"></script>
174
	
175
	<script src="javascripts/foundation/foundation.clearing.js"></script>
176
	
177
	<script src="javascripts/foundation/foundation.cookie.js"></script>
178
	
179
	<script src="javascripts/foundation/foundation.dropdown.js"></script>
180
	
181
	<script src="javascripts/foundation/foundation.forms.js"></script>
182
	
183
	<script src="javascripts/foundation/foundation.joyride.js"></script>
184
	
185
	<script src="javascripts/foundation/foundation.magellan.js"></script>
186
	
187
	<script src="javascripts/foundation/foundation.orbit.js"></script>
188
	
189
	<script src="javascripts/foundation/foundation.placeholder.js"></script>
190
	
191
	<script src="javascripts/foundation/foundation.reveal.js"></script>
192
	
193
	<script src="javascripts/foundation/foundation.section.js"></script>
194
	
195
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
196
	
197
	<script src="javascripts/foundation/foundation.topbar.js"></script>
198
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
199
	
200
	<script src="javascripts/common.js"></script>
201
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
202
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
203
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
204
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
205
	
206
  <script>
207
    $(document).foundation();
208
  </script>
209
</body>
210
</html>
/dev/null
1

  
2
<!DOCTYPE html>
3
<!--[if IE 8]> 				 <html class="no-js lt-ie9" lang="en"> <![endif]-->
4
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
5

  
6
<head>
7
	<meta charset="utf-8" />
8
    <meta name="viewport" content="width=device-width" />
9
    <title>Synnefo | Pithos  list</title>
10
    <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'>
11
    <link rel="stylesheet" href="stylesheets/normalize.css" />
12
    <link rel="stylesheet" href="stylesheets/app.css" />
13
    <link rel="stylesheet" href="stylesheets/icons.css" />
14
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
16

  
17
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
18
    <script src="javascripts/vendor/custom.modernizr.js"></script>
19

  
20
</head>
21
<body>
22
	
23
	<div class="row-full">
24
		<header class="header">
25
			
26
			<div class="logo">
27
				<img src="images/logo_01.png" alt="software logo">
28
			</div>
29
			
30
			<nav class="top-nav menu3 icons-nav">
31
				
32
				<ul>
33
					<li><a href="pithos_list_test_icon.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-font">s</span></a></li>
34
					<li><a href="vm_list_test_icon.html" data-tooltip class="has-tip" title="Machines"><span class="snf-font">w</span></a></li>
35
					
36
					<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-font">t</span></a></li>
37
					<li><a href="network_list_test_icon.html" data-tooltip class="has-tip" title="Networks"><span class="snf-font">v</span></a></li>
38
					<li><a href="" data-tooltip class="has-tip" title="Dashboard"><span class="snf-font">z</span></a></li>
39
				</ul>
40
				 
41
			</nav>
42
			
43
			<div class="login">
44
				<a href="">test@grnet.gr</a>
45
			</div>
46
			<div class="actions clearfix">
47
				
48
				<div class="lt-actions">
49
					<div class="new-btn"><a href="#" data-overlay-id="#uploader"><span>+</span> UPLOAD </a></div>
50
				</div>
51
				<div class="main-actions">
52
					<ul>
53
						<li class="running"><a href="" class="active">Action 1</a></li>
54
						<li class="both"><a href="" class="active">Action 2</a></li>
55
					</ul>
56
				</div>
57
			</div>
58
		</header>
59
		<div class="info top-info alert">
60
			<div class="wrap">
61
				<p>ALERT!</p>
62

  
63
				<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
64
			</div>
65
			<a href="#" class="close" title="hide message"></a>
66
		</div>
67

  
68
	</div>
69
	<div class="row-full overlay-wrapper storage">
70
		<div class="overlay-area">
71
			<a href="" class="close">close</a>
72
			<div id="uploader" class="overlay-div upload-widget">
73
				<form action="#" class="dropzone" id="files-dropzone">
74

  
75
					<h2>Drag and drop files here</h2>
76
					<ul class="breadcrumbs">
77
						<li><a href="">shared by me</a></li>
78
						<li><a href="">folder 1</a></li>
79
						<li>folder 2</li>
80
					</ul>
81
					<ul class="files dropzone-files"></ul>
82
					
83
				</form>
84
				<div class="btns">
85
						<a href="" class="browse-files">browse files</a>
86
						<a href="">change folder</a>
87
						<a href="">ok</a>
88
					</div>
89

  
90
			</div>
91

  
92
		</div>
93
		<div class="onecol">
94
			<!-- sidebar -->
95
			<div class="lt-sidebar">
96
				 <nav class="sidenav">
97
				 	<ul>
98
				 		<li><a href="">trash</a><span>></span></li>
99
				 		<li><a href="">shared with me</a><span>></span></li>
100
				 		<li><a href="">shared by me</a><span>></span></li>
101
				 		<li><a href="">groups</a><span>></span></li>
102
				 	</ul>
103
				 </nav>
104
				 <form action="" method="">
105
				 	<input type="text" placeholder="search">
106
				 </form>
107
			</div>
108

  
109
			<div class="main content">
110
				
111

  
112
			<div class="confirmation"></div>
113
				<ul class="breadcrumbs">
114
					<li><a href="">shared by me</a></li>
115
					<li><a href="">folder 1</a></li>
116
					<li>folder 2</li>
117
				</ul>
118
				<ul class="files">
119
					<li class="titles">
120
						<div class="name-col">name</div>
121
						<div class="size-col">size</div>
122
						<div class="date-col">last modified</div>
123
						<div class="actions-col">&nbsp;</div>
124
					</li>
125
					<li>
126
						<div class="name-col folder has-tip" data-tooltip title="metadata or info (ex. contains 3 files)">folder1</div>
127
						<div class="size-col">123KB</div>
128
						<div class="date-col">23/12/12 6:23 am</div>
129
						<div class="actions-col">
130
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
131
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
132
						</div>
133
					</li>
134
					<li>
135
						<div class="name-col image">Image.png</div>
136
						<div class="size-col">123KB</div>
137
						<div class="date-col">23/12/12 4:23 pm</div>
138
						<div class="actions-col">
139
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
140
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
141
							<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="my Image">Show</a>
142
						</div>
143
					</li>
144
					<li>
145
						<div class="name-col image has-tip"  data-tooltip title="metadata or info (ex. has been modified 3 times)">Myimage.jpg</div>
146
						<div class="size-col">5MB</div>
147
						<div class="date-col">23/12/12 6:23 am</div>
148
						<div class="actions-col">
149
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
150
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
151
							<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="yet another image">Show</a>
152
						</div>
153
					</li>
154
					<li>
155
						<div class="name-col pdf">mypdfile.pdf</div>
156
						<div class="size-col">123KB</div>
157
						<div class="date-col">23/12/12 6:23 am</div>
158
						<div class="actions-col">
159
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
160
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
161
						</div>
162
					</li>
163
					<li>
164
						<div class="name-col folder">folder1</div>
165
						<div class="size-col">123KB</div>
166
						<div class="date-col">23/12/12 6:23 am</div>
167
						<div class="actions-col">
168
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
169
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
170
						</div>
171
					</li>
172
					<li>
173
						<div class="name-col image">cool.jpg</div>
174
						<div class="size-col">5MB</div>
175
						<div class="date-col">23/12/12 6:23 am</div>
176
						<div class="actions-col">
177
							<a href="" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
178
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
179
							<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" class="show has-tip image"  data-tooltip title="Copy" data-title="love this pic">Show</a>
180
						</div>
181
					</li>
182
					<li>
183
						<div class="name-col pdf">mypdfile.pdf</div>
184
						<div class="size-col">123KB</div>
185
						<div class="date-col">23/12/12 6:23 am</div>
186
						<div class="actions-col">
187
							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
188
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
189
						</div>
190
					</li>
191
					<li>
192
						<div class="name-col folder">folder1</div>
193
						<div class="size-col">123KB</div>
194
						<div class="date-col">23/12/12 6:23 am</div>
195
						<div class="actions-col">
196
							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
197
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
198
						</div>
199
					</li>
200
					<li>
201
						<div class="name-col txt">file1.txt</div>
202
						<div class="size-col">5MB</div>
203
						<div class="date-col">23/12/12 6:23 am</div>
204
						<div class="actions-col">
205
							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
206
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
207
							<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" class="show has-tip txt"  data-tooltip title="Copy">Show</a>
208
						</div>
209
					</li>
210
					<li>
211
						<div class="name-col pdf">mypdfile.pdf</div>
212
						<div class="size-col">123KB</div>
213
						<div class="date-col">23/12/12 6:23 am</div>
214
						<div class="actions-col">
215
							<a href="http://www.synnefo.org/images/synnefo-logo@2x.png" class="delete has-tip" data-tooltip title="Delete"><span class="snf-font">n</span></a>
216
							<a href="" class="copy has-tip"  data-tooltip title="Copy"><span class="snf-font">q</span></a>
217
						</div>
218
					</li>
219
				</ul>
220

  
221
			</div>
222
		</div>
223
		<div class="progress-bar">
224
			<div class="onecol">
225
				<span class="counter">6 files uploading</span>
226
				<div class="progress-wrap"><div class="progress"><span class="meter" style="width:25%"></span></div></div>
227
				<span class="more"><a href="">details ></a></span>
228
			</div>
229
		</div>
230
	</div>
231
	
232
 
233
  <script src="javascripts/vendor/jquery.js"></script>
234
  <script src="javascripts/foundation/foundation.js"></script>
235
	
236
	<script src="javascripts/foundation/foundation.alerts.js"></script>
237
	
238
	<script src="javascripts/foundation/foundation.clearing.js"></script>
239
	
240
	<script src="javascripts/foundation/foundation.cookie.js"></script>
241
	
242
	<script src="javascripts/foundation/foundation.dropdown.js"></script>
243
	
244
	<script src="javascripts/foundation/foundation.forms.js"></script>
245
	
246
	<script src="javascripts/foundation/foundation.joyride.js"></script>
247
	
248
	<script src="javascripts/foundation/foundation.magellan.js"></script>
249
	
250
	<script src="javascripts/foundation/foundation.orbit.js"></script>
251
	
252
	<script src="javascripts/foundation/foundation.placeholder.js"></script>
253
	
254
	<script src="javascripts/foundation/foundation.reveal.js"></script>
255
	
256
	<script src="javascripts/foundation/foundation.section.js"></script>
257
	
258
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
259
	
260
	<script src="javascripts/foundation/foundation.topbar.js"></script>
261
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
262
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
263
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
264
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
265
	
266
	<script src="javascripts/common.js"></script>
267
	
268
  
269
  <script>
270
    $(document).foundation();
271
  </script>
272
</body>
273
</html>
/dev/null
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/font_custom.css" />
13
    <link rel="stylesheet" href="stylesheets/normalize.css" />
14
    <link rel="stylesheet" href="stylesheets/icons.css" />
15
    <link rel="stylesheet" href="stylesheets/app.css" />
16
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
17
    <script src="javascripts/vendor/custom.modernizr.js"></script>
18

  
19
</head>
20
<body>
21
	<div class="row-full">
22
		<header class="header">
23
			
24
			<div class="logo">
25
				<a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
26
			</div>
27
			
28
			<nav class="top-nav menu1 icons-nav">
29
				
30
				<ul>
31
					<li><a href="pithos_list_test_icon.html" data-tooltip class="has-tip" title="Storage" ><span class="snf-font">y</span></a></li>
32
					<li><a href="vm_list_test_icon.html" data-tooltip class="has-tip" title="Machines"><span class="snf-font">w</span></a></li>
33
					
34
					<li><a href="" data-tooltip class="has-tip" title="Disks"><span class="snf-font">u</span></a></li>
35
					<li><a href="network_list_test_icon.html" data-tooltip class="has-tip" title="Networks"><span class="snf-font">v</span></a></li>
36
					<li><a href="" data-tooltip class="has-tip" title="Dashboard"><span class="snf-font">z</span></a></li>
37
				</ul>
38
				 
39
			</nav>
40
			
41
			<div class="login">
42
				<a href="">test@grnet.gr</a>
43
			</div>
44
			<div class="actions clearfix">
45
				
46
				<div class="lt-actions">
47
					<div class="new-btn"><a href="vm_create_a.html"><span>+</span> NEW MACHINE </a></div>
48
				</div>
49
				<div class="main-actions">
50
					<ul>
51
						<li class="running" ><a href="" data-overlay-id="#overlay1">Reboot</a></li>
52
						<li class="running"><a href="" data-overlay-id="#overlay1">Shutdown</a></li>
53
						<li class="both"><a href="">Destroy</a></li>
54
						<li class="stopped"><a href="">Start</a></li>
55
						 <!-- in case we want an action always activated
56
						<li class="pernament"><a href="" class="active">Action</a></li> -->
57

  
58
					</ul>
59
				</div>
60
			</div>
61
		</header>
62
		<div class="info top-info alert">
63
			<div class="wrap">
64
				<p>ALERT!</p>
65

  
66
				<p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
67
			</div>
68
			<a href="#" class="close" title="hide message">close</a>
69
		</div>
70

  
71
	</div>
72
	<div class="row-full content  overlay-wrapper ">
73
		<div class="overlay-area">
74
			<a href="" class="close">close</a>
75
			<div id="overlay1" class="overlay-div">
76
				<p>Are you sure you want to reboot your machine?</p>
77
				<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
78
			</div>
79
			<div id="overlay2" class="overlay-div">
80
				<p>Are you sure you want to shutdown your machine?</p>
81
				<p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
82
			</div>
83
		</div>
84
		<!-- main area -->
85
		<section class="main onecol">
86
			
87
			<div class="vms entities">
88
				<ul class="items-list small-block-grid-2 large-block-grid-3 sortable">
89
					<li data-order="0">
90
						<div class="container">
91
							<div class="options">
92
								<div class="wrap">
93
									<a href="vm_details.html" class="details">details</a>
94
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
95
								</div>
96
							</div>
97
							<div class="img-wrap">
98
								<div class="img running">
99
									<div class="snf-font">x</div>
100
									<span class="os windows">windows</span>
101
								</div>
102
							</div>
103
							
104
							<p class="visible-info">
105
								<span><em>IPv4 83.212.97.127</em></span>
106
								<span class="title"><em>vm name 1 really large name</em></span>
107
							</p>
108
							<a href="" class="check"><span class="snf-font snf-custom-checkbox">a</span></a>
109
							<div class="info-box">
110
								<h2>VM full name</h2>
111
								<p>blah blah</p>
112
								<dl>
113
									<dt>Status</dt>
114
									<dd>running</dd>
115
									<dt>OS</dt>
116
									<dd><img class="txt_size" src="images/os-windows.png"> Windows</dd>
117
									<dt>IPv4</dt>
118
									<dd>83.212.97.127</dd>
119
								</dl>
120
							</div>
121
						</div>
122
					</li>
123
					<li data-order="1">
124
						<div class="container">
125
							<div class="options">
126
								<div class="wrap">
127
									
128
									<a href="vm_details.html" class="details">details</a>
129
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
130
								</div>
131
							</div>
132
							<div class="img-wrap">
133
								<div class="img running">
134
									<div class="snf-font">x</div>
135
									<span class="os windows">windows</span>
136
								</div>
137
							</div>
138
							
139
							<p class="visible-info">
140
								<span><em>IPv4 83.212.97.127</em></span>
141
								<span class="title"><em>vm name 2</em></span>
142
							</p>
143
							<a href="" class="check"><span class="snf-font snf-custom-checkbox">a</span></a>
144
							<div class="info-box">
145
								<h2>VM full name</h2>
146
								<p>blah blah</p>
147
								<dl>
148
									<dt>Status</dt>
149
									<dd>running</dd>
150
									<dt>OS</dt>
151
									<dd><img class="txt_size" src="images/os-windows.png"> Windows</dd>
152
									<dt>IPv4</dt>
153
									<dd>83.212.97.127</dd>
154
								</dl>
155
							</div>
156
						</div>
157
					</li>
158
					<li data-order="2">
159
						<div class="container">
160
							<div class="options">
161
								<div class="wrap">
162
									
163
									<a href="vm_details.html" class="details">details</a>
164
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
165
								</div>
166
							</div>
167
							<div class="img-wrap">
168
								<div class="img stopped">
169
									<div class="snf-font">x</div>
170
									<span class="os fedora">fedora</span>
171
								</div>
172
							</div>
173
							
174
							<p class="visible-info">
175
								<span><em>IPv4 83.212.97.127</em></span>
176
								<span class="title"><em>vm name 3</em></span>
177
							</p>
178
							<a href="" class="check"><span class="snf-font snf-custom-checkbox">a</span></a>
179
							<div class="info-box">
180
								<h2>VM full name</h2>
181
								<p>blah blah</p>
182
								<dl>
183
									<dt>Status</dt>
184
									<dd>running</dd>
185
									<dt>OS</dt>
186
									<dd><img class="txt_size" src="images/os-windows.png"> Windows</dd>
187
									<dt>IPv4</dt>
188
									<dd>83.212.97.127</dd>
189
								</dl>
190
							</div>
191
						</div>
192
					</li>
193
					<li  data-order="3">
194
						<div class="container">
195
							<div class="options">
196
								<div class="wrap">
197
									
198
									<a href="vm_details.html" class="details">details</a>
199
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
200
								</div>
201
							</div>
202
							<div class="img-wrap">
203
								<div class="img running">
204
									<div class="snf-font">x</div>
205
									<span class="os">unknown</span>
206
								</div>
207
							</div>
208
							
209
							<p class="visible-info">
210
								<span><em>IPv4 83.212.97.127</em></span>
211
								<span class="title"><em>vm name 4</em></span>
212
							</p>
213
							<a href="" class="check"><span class="snf-font snf-custom-checkbox">a</span></a>
214
							<div class="info-box">
215
								<h2>VM full name</h2>
216
								<p>blah blah</p>
217
								<dl>
218
									<dt>Status</dt>
219
									<dd>running</dd>
220
									<dt>OS</dt>
221
									<dd><img class="txt_size" src="images/os-windows.png"> Windows</dd>
222
									<dt>IPv4</dt>
223
									<dd>83.212.97.127</dd>
224
								</dl>
225
							</div>
226
						</div>
227
					</li>
228
					<li  data-order="4">
229
						<div class="container">
230
							<div class="options">
231
								<div class="wrap">
232
									
233
									<a href="vm_details.html" class="details">details</a>
234
									<a href="#" data-reveal-id="vm-connect" class="connect">connect</a>
235
								</div>
236
							</div>
237
							<div class="img-wrap">
238
								<div class="img running">
239
									<div class="snf-font">x</div>
240
									<span class="os kubuntu">kubuntu</span>
241
								</div>
242
							</div>
243
							
244
							<p class="visible-info">
245
								<span><em>IPv4 83.212.97.127</em></span>
246
								<span class="title"><em>vm name 5</em></span>
247
							</p>
248
							<a href="" class="check"><span class="snf-font snf-custom-checkbox">a</span></a>
249
							<div class="info-box">
250
								<h2>VM full name</h2>
251
								<p>blah blah</p>
252
								<dl>
253
									<dt>Status</dt>
254
									<dd>running</dd>
255
									<dt>OS</dt>
256
									<dd><img class="txt_size" src="images/os-windows.png"> Windows</dd>
257
									<dt>IPv4</dt>
258
									<dd>83.212.97.127</dd>
259
								</dl>
260
							</div>
261
						</div>
262
					</li>
263
					 
264
					<li  data-order="5">
265
						<div class="add-new"><a href="vm_create_a.html">NEW<br>MACHINE</a></div>	
266
					</li>
267
					 
268
				</ul>
269
			</div>
270
		</section>
271
	</div>
272
	<div class="extras">
273
		<span data-tooltip class="has-tip ours suggestions" title="Μήπως να είναι λίγο πιο έντονα τα χρώματα; Μοιάζουν απενεργοποιημένα..." style="top:0;left:200px">:)</span>
274
		<span data-tooltip class="has-tip ours questions" title="Πόσο θα είναι το μέγιστο πλάτος της κύριας περιοχής" style="top:240px;left:20px">?</span>
275
		<span data-tooltip class="has-tip ours problems" title="Πώς θα έχουμε δράσεις όπως filters κτλ" style="top:140px;left:250px">!!</span>
276
	</div>
277
	<div id="vm-connect" class="reveal-modal medium">
278
  		<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>
279
		<p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
280
		
281
		<p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
282
		<p>Alternatively you can connect to your VM via <a href="">Console</a> (slow connection - meant only for troubleshooting.</p>
283
  		<a class="close-reveal-modal" title="close window">&#215;</a>
284
	</div>
285
	<script src="javascripts/vendor/jquery.js"></script>
286
	<script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
287
	<script src="javascripts/foundation/foundation.js"></script>
288
	<script src="javascripts/foundation/foundation.alerts.js"></script>
289
	
290
	<script src="javascripts/foundation/foundation.clearing.js"></script>
291
	
292
	<script src="javascripts/foundation/foundation.cookie.js"></script>
293
	
294
	<script src="javascripts/foundation/foundation.dropdown.js"></script>
295
	
296
	<script src="javascripts/foundation/foundation.forms.js"></script>
297
	
298
	<script src="javascripts/foundation/foundation.joyride.js"></script>
299
	
300
	<script src="javascripts/foundation/foundation.magellan.js"></script>
301
	
302
	<script src="javascripts/foundation/foundation.orbit.js"></script>
303
	
304
	<script src="javascripts/foundation/foundation.placeholder.js"></script>
305
	
306
	<script src="javascripts/foundation/foundation.reveal.js"></script>
307
	
308
	<script src="javascripts/foundation/foundation.section.js"></script>
309
	
310
	<script src="javascripts/foundation/foundation.tooltips.js"></script>
311
	
312
	<script src="javascripts/foundation/foundation.topbar.js"></script>
313
	<script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
314
	<script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
315
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
316
	<script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
317
	<script type="text/javascript" src="javascripts/dropzone.js"></script>
318
	<script src="javascripts/common.js"></script>
319
	
320
	  
321
  <script>
322
    $(document).foundation();
323
  </script>
324
</body>
325
</html>

Also available in: Unified diff