Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / vm_details.html @ fc6bf782

History | View | Annotate | Download (30.9 kB)

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>VM details</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/farbtastic.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
    <script src="javascripts/vendor/custom.modernizr.js"></script>
18
</head>
19
<body>
20
                <header class="header">
21
                <nav>
22
                        <ul class="icons-nav">
23
                                <li><a href="vm_list.html" data-tooltip ="has-tip " title="Machines"><span class="snf-PC_fill"></span></a></li>
24
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network"></span></a></li>
25
                                <li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
26
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage"><span class="snf-Pithos"></span></a></li>
27
                                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-images"></span></a></li>
28
                                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot"></span></a></li>
29
                                <li><a href="" data-tooltip ="has-tip" title="More"><span class="snf-plus"></span></a></li>
30
                        </ul>
31
                </nav>
32
                <div class="login">
33
                        <div class="wrap">
34
                                <a href="">user1@synnefo.org</a>
35
                                <ul>
36
                                        <li><a href="">dashboard</a></li>
37
                                        <li><a href="">sign out</a></li>
38
                                </ul>
39
                        </div>
40
                </div>
41
                <div class="logo">
42
                        <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
43
                </div>
44
        </header>
45
        <div class="info top-info alert">
46
                <div class="wrap">
47
                        <p>ALERT!</p>
48
                        <p>Nunc at velit quis lectus nonummy eleifend. Curabitur eros. Aenean ligula dolor, gravida auctor, auctor et, neque ut neque. In at libero. </p>
49
                </div>
50
                <a href="#" class="close" title="hide message">close</a>
51
        </div>
52
        <div class="overlay-wrapper">
53
                <div id="start-confirm" class="reveal-modal medium">
54
                        <p class="message-forimg">Are you sure you want to turn on your machine?</p>
55
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
56
                        <a class="close-reveal-modal" title="close window">X</a>
57
                </div>
58
                <div id="reboot-confirm" class="reveal-modal medium">
59
                        <p class="message-forimg">Are you sure you want to reboot your machine?</p>
60
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
61
                        <a class="close-reveal-modal" title="close window">X</a>
62
                </div>
63
                <div id="shutdown-confirm" class="reveal-modal medium">
64
                        <p class="message-forimg">Are you sure you want to shutdown your machine?</p>
65
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
66
                        <a class="close-reveal-modal" title="close window">X</a>
67
                </div>
68
                <div id="destroy-vm-confirm" class="reveal-modal medium">
69
                        <p class="message-forimg">Are you sure you want to destroy your machine?</p>
70
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
71
                        <a class="close-reveal-modal" title="close window">X</a>
72
                </div>
73
                 <div id="vm-connect" class="reveal-modal medium">
74
                          <p>A direct connection to this machine can be established using the <a href="http:​/​/​en.wikipedia.org/​wiki/​Secure_Shell" target="_blank">​SSH Protocol</a>. To do so open a terminal and type the following at the prompt to connect to your machine:</p>
75
                        <p class="ssh"><span>ssh user@snf-38389.vm.okeanos.grnet.gr</span></p>
76

    
77
                        <p class="info">Keep in mind that recently rebooted or created VMs may take up to 5 minutes to connect to them.</p>
78
                          <a class="close-reveal-modal" title="close window">&#215;</a>
79
                </div>
80
                <section class="actions-bar clearfix">
81
                        <h2><a href="vm_list.html">Virtual Machines</a> > My Awesome Network</h2>
82
                        <div class="view-type">
83
                                <a href="" class="grid" title="grid view"><span class="snf-gridview"></span></a>
84
                                <a href="" class="list" title="list view"><span class="snf-listview "></span></a>
85
                                <a href="" class="single current" title="single view"></a>
86
                        </div>
87
                        <div class="filter-menu">
88
                                <a class="filter" href="">Filter</a>
89
                                <ul class="options">
90
                                        <li><a href=""> set an option</a></li>
91
                                        <li><a href=""> set an option</a></li>
92
                                        <li><a href=""> set an option</a></li>
93
                                        <li><a href=""> set an option</a></li>
94
                                </ul>
95
                        </div>
96
                        <div id="hd-search" class="hd-search">
97
                            <form>
98
                                        <span class="hd-icon-search snf-search"></span>
99
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
100
                            </form>
101
                        </div>
102
                </section>
103
                <div class="main row">
104
                        <div class="vm details running">
105
                                <a href="" class="toggle-lt-bar">...</a>
106
                                <div class="lt-bar">
107
                                        <div class="scroll-wrap">
108
                                                <ul class="items-list">
109
                                                        <li data-status="rebooting" class="rebooting">
110
                                                                <a href="" class="btn5 temp">animation</a>
111
                                                                <div class="more">
112
                                                                        <div class="clearfix">
113
                                                                                <div class="col lt">
114
                                                                                        <ul>
115
                                                                                                <li><a href="" class="start">Start</a></li>
116
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
117
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
118
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
119
                                                                                                 <li><a href="">Option i</a></li>
120
                                                                                        </ul>
121
                                                                                </div>
122
                                                                                <div class="col rt">
123
                                                                                        <ul>
124
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
125
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
126
                                                                                        </ul>
127
                                                                                </div>
128
                                                                        </div>
129
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
130
                                                                </div>
131
                                                                <div class="container">
132
                                                                        <div class="check">
133
                                                                                <span class="snf-checkbox-unchecked"></span>
134
                                                                        </div>
135
                                                                        <div class="img-wrap">
136
                                                                                <span class="snf-PC_fill"></span>
137
                                                                                <span class="os kubuntu">kubuntu</span>
138
                                                                        </div>
139
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
140
                                                                        <div class="actions">
141
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
142
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
143
                                                                        </div>
144
                                                                        <div class= "status">
145
                                                                                <span class="state">REBOOTING</span>
146
                                                                        </div>
147
                                                                        <div class="tags">
148
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
149
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
150
                                                                        </div>
151
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
152
                                                                </div>
153
                                                        </li>
154
                                                        <li data-status="starting" class="starting">
155
                                                                <div class="more">
156
                                                                        <div class="clearfix">
157
                                                                                <div class="col lt">
158
                                                                                        <ul>
159
                                                                                                <li><a href=""   class="start">Start</a></li>
160
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
161
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
162
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
163
                                                                                                 <li><a href="">Option i</a></li>
164
                                                                                        </ul>
165
                                                                                </div>
166
                                                                                <div class="col rt">
167
                                                                                        <ul>
168
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
169
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
170
                                                                                        </ul>
171
                                                                                </div>
172
                                                                        </div>
173
                                                                        <div class="name">vm name 1 </div>
174
                                                                </div>
175
                                                                <div class="container">
176
                                                                        <div class="check">
177
                                                                                <span class="snf-checkbox-unchecked"></span>
178
                                                                        </div>
179
                                                                        <div class="img-wrap">
180
                                                                                <span class="snf-PC_fill"></span>
181
                                                                                <span class="os kubuntu">kubuntu</span>
182
                                                                        </div>
183
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
184
                                                                        <div class="actions">
185
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
186
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
187
                                                                        </div>
188
                                                                        <div class= "status">
189
                                                                                <span class="state">STARTING</span>
190
                                                                        </div>
191
                                                                        <div class="tags">
192
                                                                        </div>
193
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
194
                                                                </div>
195
                                                        </li>
196
                                                        <li  data-status="shutting" class="shutting">
197
                                                                <div class="more">
198
                                                                        <div class="clearfix">
199
                                                                                <div class="col lt">
200
                                                                                        <ul>
201
                                                                                                <li><a href=""   class="start">Start</a></li>
202
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
203
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
204
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
205
                                                                                                 <li><a href="">Option i</a></li>
206
                                                                                        </ul>
207
                                                                                </div>
208
                                                                                <div class="col rt">
209
                                                                                        <ul>
210
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
211
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
212
                                                                                        </ul>
213
                                                                                </div>
214
                                                                        </div>
215
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
216
                                                                </div>
217
                                                                <div class="container">
218
                                                                        <div class="check">
219
                                                                                <span class="snf-checkbox-unchecked"></span>
220
                                                                        </div>
221
                                                                        <div class="img-wrap">
222
                                                                                <div class="img running">
223
                                                                                        <span class="snf-PC_fill"></span>
224
                                                                                        <span class="os kubuntu">kubuntu</span>
225
                                                                                </div>
226
                                                                        </div>
227
                                                                        <h4>short name</h4>
228
                                                                        <div class="actions">
229
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
230
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
231
                                                                        </div>
232
                                                                        <div class= "status">
233
                                                                                <span class="state">SHUTTING DOWN</span>
234
                                                                        </div>
235
                                                                        <div class="tags">
236
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
237
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
238
                                                                        </div>
239
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
240
                                                                </div>
241
                                                        </li>
242
                                                         <li data-status="running" class="running">
243
                                                                <div class="more">
244
                                                                        <div class="clearfix">
245
                                                                                <div class="col lt">
246
                                                                                        <ul>
247
                                                                                                <li><a href=""   class="start">Start</a></li>
248
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
249
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
250
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
251
                                                                                                 <li><a href="">Option i</a></li>
252
                                                                                        </ul>
253
                                                                                </div>
254
                                                                                <div class="col rt">
255
                                                                                        <ul>
256
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
257
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
258
                                                                                        </ul>
259
                                                                                </div>
260
                                                                        </div>
261
                                                                        <div class="name">short name</div>
262
                                                                </div>
263
                                                                <div class="container">
264
                                                                        <div class="check">
265
                                                                                <span class="snf-checkbox-unchecked"></span>
266
                                                                        </div>
267
                                                                        <div class="img-wrap">
268
                                                                                <span class="snf-PC_fill"></span>
269
                                                                                <span class="os kubuntu">kubuntu</span>
270
                                                                        </div>
271
                                                                        <h4>short name</h4>
272
                                                                        <div class="actions">
273
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
274
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
275
                                                                        </div>
276

    
277
                                                                        <div class= "status">
278
                                                                                <span class="state"></span>
279
                                                                        </div>
280
                                                                        <div class="tags">
281
                                                                                <a href="" class="tag tag1 has-tip" data-tooltip ="Tooltip1">&nbsp;</a>
282
                                                                                <a href="" class="tag tag2 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
283
                                                                                <a href="" class="tag tag3 has-tip" data-tooltip ="Tooltip2">&nbsp;</a>
284
                                                                        </div>
285
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
286
                                                                </div>
287
                                                        </li>
288
                                                        <li data-status="off" class="off">
289
                                                                <div class="more">
290
                                                                        <div class="clearfix">
291
                                                                                <div class="col lt">
292
                                                                                        <ul>
293
                                                                                                <li><a href=""   class="start">Start</a></li>
294
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
295
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
296
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
297
                                                                                                 <li><a href="">Option i</a></li>
298
                                                                                        </ul>
299
                                                                                </div>
300
                                                                                <div class="col rt">
301
                                                                                        <ul>
302
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
303
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
304
                                                                                        </ul>
305
                                                                                </div>
306
                                                                        </div>
307
                                                                        <div class="name">short name</div>
308
                                                                </div>
309
                                                                <div class="container">
310
                                                                        <div class="check">
311
                                                                                <span class="snf-checkbox-unchecked"></span>
312
                                                                        </div>
313
                                                                        <div class="img-wrap">
314
                                                                                <span class="snf-PC_fill"></span>
315
                                                                                <span class="os fedora">fedora</span>
316
                                                                        </div>
317
                                                                        <h4>short name</h4>
318
                                                                        <div class="actions">
319
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
320
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
321
                                                                        </div>
322
                                                                        <div class= "status">
323
                                                                        </div>
324
                                                                        <div class="tags">
325
                                                                        </div>
326
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
327
                                                                </div>
328
                                                        </li>
329
                                                        <li data-status="error" class="error">
330
                                                                <div class="more">
331
                                                                        <div class="clearfix">
332
                                                                                <div class="col lt">
333
                                                                                        <ul>
334
                                                                                                <li><a href=""   class="start">Start</a></li>
335
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
336
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
337
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
338
                                                                                                 <li><a href="">Option i</a></li>
339
                                                                                        </ul>
340
                                                                                </div>
341
                                                                                <div class="col rt">
342
                                                                                        <ul>
343
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
344
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
345
                                                                                        </ul>
346
                                                                                </div>
347
                                                                        </div>
348
                                                                        <div class="name">vm name 1</div>
349
                                                                </div>
350
                                                                <div class="container">
351
                                                                        <div class="check">
352
                                                                                <span class="snf-checkbox-unchecked"></span>
353
                                                                        </div>
354
                                                                        <div class="img-wrap">
355
                                                                                <span class="snf-PC_fill"></span>
356
                                                                                <span class="os">unknown</span>
357
                                                                        </div>
358
                                                                        <h4>short name</h4>
359
                                                                        <div class="actions">
360
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
361
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
362
                                                                        </div>
363
                                                                        <div class="tags">
364
                                                                        </div>
365
                                                                        <div class= "status">
366
                                                                                <span class="state">ERROR</span>
367
                                                                                <span class="logs">Image customization failed. Did not finish on time.</span>
368
                                                                        </div>
369
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
370
                                                                </div>
371
                                                        </li>
372
                                                        <li data-status="running" class="running">
373
                                                                <div class="more">
374
                                                                        <div class="clearfix">
375
                                                                                <div class="col lt">
376
                                                                                        <ul>
377
                                                                                                <li><a href=""   class="start">Start</a></li>
378
                                                                                                <li><a href="" data-reveal-id="shutdown-confirm" class="shut">Shutdown</a></li>
379
                                                                                                <li><a href="" data-reveal-id="reboot-confirm" class="reboot">Reboot</a></li>
380
                                                                                                <li><a href="" data-reveal-id="destroy-vm-confirm" class="destroy">Destroy</a></li>
381
                                                                                                 <li><a href="">Option i</a></li>
382
                                                                                        </ul>
383
                                                                                </div>
384
                                                                                <div class="col rt">
385
                                                                                        <ul>
386
                                                                                                <li><a href="" data-reveal-id="vm-connect" class="connect"><span class="snf-lightning"></span>Connect</a></li>
387
                                                                                                <li><a href="vm_details.html"><span class="snf-info_outline"></span>Details</a></li>
388
                                                                                        </ul>
389
                                                                                </div>
390
                                                                        </div>
391
                                                                        <div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
392
                                                                </div>
393
                                                                <div class="container">
394
                                                                        <div class="check">
395
                                                                                <span class="snf-checkbox-unchecked"></span>
396
                                                                        </div>
397
                                                                        <div class="img-wrap">
398
                                                                                <span class="snf-PC_fill"></span>
399
                                                                                <span class="os fedora">fedora</span>
400
                                                                        </div>
401
                                                                        <h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
402
                                                                        <div class="actions">
403
                                                                                <a href="" data-reveal-id="vm-connect" title="connect" class="connect"><span class="snf-lightning"></span></a>
404
                                                                                <a href="vm_details.html" title="view vm details" class="snf-info_outline"></a>
405
                                                                        </div>
406
                                                                        <div class= "status">
407
                                                                        </div>
408
                                                                        <div class="tags">
409
                                                                        </div>
410
                                                                        <div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
411
                                                                </div>
412
                                                        </li>
413
                                                </ul>
414
                                        </div>
415
                                </div>
416
                                <section class="top">
417
                                        <div class="lt">
418
                                                <div class="img-wrap">
419
                                                        <span class="snf-PC_fill"></span>
420
                                                        <span class="os fedora">fedora</span>
421
                                                </div>        
422
                                        </div>
423
                                        <div class="rt">
424
                                                <div class="title">
425
                                                        <h1>My Opensuse Desktop Server 1<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h1>
426
                                                </div>
427
                                                <div class="actions">
428
                                                        <ul>
429
                                                                <li><a href="" data-reveal-id="start-confirm">Start</a></li>
430
                                                                <li><a href="" data-reveal-id="shutdown-confirm">Shutdown</a></li>
431
                                                                <li><a href="" data-reveal-id="reboot-confirm">Reboot</a></li>
432
                                                                <li><a href="" data-reveal-id="destroy-vm-confirm">Destroy</a></li>
433
                                                        </ul>
434
                                                </div>
435
                                                <div class="tabs">
436
                                                        <ul>
437
                                                                <li><a href="#info" class="active"><span class="snf-info_outline"></span></a></li>
438
                                                                <li><a href="#disk-connected"><span class="snf-HDD"></span></a></li>
439
                                                                <li><a href="#network-connected"><span class="snf-network_full"></span></a></li>
440
                                                        </ul>
441
                                                </div>
442
                                        </div>
443
                                </section>
444
                                <section class="content info-simple" id="info">
445
                                        <section class="info-block">
446
                                                <h2>info</h2>
447
                                                <dl>
448
                                                        <dt><span class="font-icon"></span>Project</dt>
449
                                                        <dd>Basic Project</dd>
450
                                                        <dt><span class="font-icon snf-PC_fill"></span>Name</dt>
451
                                                        <dd>
452
                                                                <div class="editable">
453
                                                                <span class="input-txt">My Opensuse Desktop Server 1</span>
454
                                                                <input type="text">
455
                                                                <span class="editbuttons">
456
                                                                                <a href="#" class="edit"><span class="snf-edit-1"></span></a>
457
                                                                                <a href="#" class="save"><span class="snf-ok-sign"></span></a>
458
                                                                                <a href="#" class="cancel"><span class="snf-cancel-circled"></span></a>
459
                                                                        </span>
460
                                                            </div>
461
                                                        </dd>
462
                                                        <dt><span class="snf-cpu font-icon"></span>CPUs</dt>
463
                                                        <dd>4</dd>
464
                                                        <dt><span class="snf-ram-full font-icon"></span>RAM</dt>
465
                                                        <dd>512 MB</dd>
466
                                                        <dt><span class="snf-HDD-full font-icon"></span>System Disk Size</dt>
467
                                                        <dd>4GB</dd>
468
                                                        <dt><span class="snf-HDD-full font-icon"></span>Storage Type</dt>
469
                                                        <dd>Archipelago</dd>
470
                                                        <dt><span class="snf-images font-icon"></span>Image Name</dt>
471
                                                        <dd>Fedora</dd>
472
                                                        <dt><span class="snf-images font-icon"></span>Image Size</dt>
473
                                                        <dd>3.68 GB</dd>
474
                                                        <dt><span class="snf-nic-full font-icon"></span>IPv4</dt>
475
                                                        <dd>83.212.96.152</dd>
476
                                                        <dt><span class="snf-nic-full font-icon"></span>IPv4</dt>
477
                                                        <dd>83.212.96.153</dd>
478
                                                        <dt><span class="snf-nic-full font-icon"></span>IPv6</dt>
479
                                                        <dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>
480
                                                </dl>
481
                                        </section>
482
                                        <section class="info-block tags">
483
                                                <h2>tags</h2>
484
                                                <div class="tag-data">
485
                                                        <a href="" class="tag tag1 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
486
                                                        <span>Tag Name</span>
487
                                                        <a class="delete"><span>X</span></a>
488
                                                </div>
489
                                                <div class="tag-data">
490
                                                        <a href="" class="tag tag2 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
491
                                                        <span>Tag Name</span>
492
                                                        <a class="delete"><span>X</span></a>
493
                                                </div>
494
                                                <div class="tag-data">
495
                                                        <a href="" class="tag tag3 has-tip" data-tooltip="" title="Tooltip1">&nbsp;</a>
496
                                                        <span>Tag Name</span>
497
                                                        <a class="delete"><span>X</span></a>
498
                                                </div>
499
                                                <div class="buttons">
500
                                                        <a href="" class="btn1 show-add-tag id="show-add-tag"">add new tag</a>
501
                                                </div>
502
                                                <div class="snf-color-picker">
503
                                                <h3>Select color:</h3>
504
                                                        <form action="#" method="post">
505
                                                                <div id="picker">
506
                                                                        <div class="farbtastic">
507
                                                                                <div class="color" style="background-color: rgb(255, 0, 21);"></div>
508
                                                                                <div class="wheel"></div>
509
                                                                                <div class="overlay"></div>
510
                                                                                <div class="h-marker marker" style="left: 90px; top: 13px;"></div>
511
                                                                                <div class="sl-marker marker" style="left: 87px; top: 114px;"></div>
512
                                                                        </div>
513
                                                                </div>
514
                                                                <div class="form-item">
515
                                                                        <input type="text" id="color" name="color" value="#16C1E9" disabled
516
                                                                        <span ="input"><input class="tag_name" type="text" placeholder="My Tag"></span>
517
                                                                </div>
518
                                                        </form>
519
                                                        <div class="btns">
520
                                                                <a class="btn1" href="">OK</a>
521
                                                                <a class="btn1 hide-add-tag" href="">CANCEL</a>
522
                                                        </div>
523
                                                </div>
524
                                        </section>
525
                                        <section class="info-block charts">
526
                                                <div>
527
                                                        <h2>CPU utilization</h2>
528
                                                        <div class="graph_container">
529
                                                                <img src="images/cpu-ts.png" alt="CPU utilization graph">
530
                                                        </div>
531
                                                </div>
532
                                                <div>
533
                                                        <h2>Network utilization</h2>
534
                                                        <div class="graph_container">
535
                                                                <img src="images/net-ts.png" alt="network utilization graph">
536
                                                        </div>
537
                                                </div>
538
                                        </section>
539
                                </section>
540
                                <section class="content connected" id="network-connected" style="display:none">
541
                                        <section class="item running">
542
                                                <div class="what">
543
                                                        <div class="img-wrap">
544
                                                                <span class="snf-network_full"></span>
545
                                                        </div>
546
                                                        <h4>Public Network</h4>
547
                                                </div>
548
                                                <div class="clearfix">
549
                                                        <ul class="connections">
550
                                                                <li>
551
                                                                        <a href="#" class="act">act</a>
552
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
553
                                                                        <div class="data">
554
                                                                                <ul>
555
                                                                                        <li>
556
                                                                                                <h5 class="ip-data">IPv4</h5>
557
                                                                                                <p>83.212.96.12</p>
558
                                                                                        </li>
559
                                                                                </ul>
560
                                                                        </div>
561
                                                                </li>
562
                                                                <li>
563
                                                                        <a href="#" class="act">act</a>
564
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
565
                                                                        <div class="data">
566
                                                                                <ul>
567
                                                                                        <li>
568
                                                                                                <h5 class="ip-data">IPv4</h5>
569
                                                                                                <p>83.212.96.12</p>
570
                                                                                        </li>
571
                                                                                </ul>
572
                                                                        </div>
573
                                                                </li>
574
                                                                <li>
575
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
576
                                                                        <div class="data">
577
                                                                                <ul>
578
                                                                                        <li>
579
                                                                                                <h5 class="ip-data">IPv6</h5>
580
                                                                                                <p>2001:648:2ffc:1112:a80c:eaff:fe34:1234</p>
581
                                                                                        </li>
582
                                                                                </ul>
583
                                                                        </div>
584
                                                                </li>
585
                                                        </ul>
586
                                                        <div class="firewall" data-firewall="fully">
587
                                                                <p>Firewall <em>on</em></p>
588
                                                                <div class="more">
589
                                                                        <p class="fully">
590
                                                                                <a href="">Fully protected mode<span class="snf-radio-checked"></span><em>on</em></a>
591
                                                                        </p>
592
                                                                        <p class="basic">
593
                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
594
                                                                        </p>
595
                                                                        <p class="unprotected">
596
                                                                                <a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
597
                                                                        </p>
598
                                                                </div>
599
                                                        </div>
600
                                                </div>
601
                                        </section>
602
                                        <section class="item error">
603
                                                <div class="what">
604
                                                        <div class="img-wrap">
605
                                                                <span class="snf-network_full"></span>
606
                                                        </div>
607
                                                        <h4>My Awesome Network<span class="status">Error</span></h4>
608
                                                </div>
609
                                                <div class="clearfix">
610
                                                        <ul class="connections">
611
                                                                <li>
612
                                                                        <a href="#" class="act">act</a>
613
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
614
                                                                        <div class="data">
615
                                                                                <ul>
616
                                                                                        <li>
617
                                                                                                <h5 class="ip-data">ipv6</h5>
618
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
619
                                                                                        </li>
620
                                                                                        <li>
621
                                                                                                <h5 class="ip-data">ipv4</h5>
622
                                                                                                <p>001:648:2ffc</p>
623
                                                                                        </li>
624
                                                                                </ul>
625
                                                                        </div>
626
                                                                </li>
627
                                                                <li>
628
                                                                        <a href="#" class="act">act</a>
629
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
630
                                                                        <div class="data">
631
                                                                                <ul>
632
                                                                                        <li>
633
                                                                                                <h5 class="ip-data">ipv6</h5>
634
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
635
                                                                                        </li>
636
                                                                                </ul>
637
                                                                        </div>
638
                                                                </li>
639
                                                                <li>
640
                                                                        <a href="#" class="act">act</a>
641
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
642
                                                                        <div class="data">
643
                                                                                <ul>
644
                                                                                        <li>
645
                                                                                                <h5 class="ip-data">ipv6</h5>
646
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
647
                                                                                        </li>
648
                                                                                        <li>
649
                                                                                                <h5 class="ip-data">ipv6</h5>
650
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee</p>
651
                                                                                        </li>
652
                                                                                </ul>
653
                                                                        </div>
654
                                                                </li>
655
                                                        </ul>
656

    
657
                                                </div>
658
                                        </section>
659
                                        <section class="item running">
660
                                                <div class="what">
661
                                                        <div class="img-wrap">
662
                                                                <span class="snf-network_full"></span>
663
                                                        </div>
664
                                                        <h4>My Private Network</h4>
665
                                                </div>
666
                                                <div class="clearfix">
667
                                                        <ul class="connections">
668
                                                                <li>
669
                                                                        <a href="#" class="act">act</a>
670
                                                                        <div class="icon"><span class="snf-nic-full"></span></div>
671
                                                                        <div class="data">
672
                                                                                <ul>
673
                                                                                        <li>
674
                                                                                                <h5 class="ip-data">ipv6</h5>
675
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
676
                                                                                        </li>
677
                                                                                </ul>
678
                                                                        </div>
679
                                                                </li>
680
                                                        </ul>
681

    
682
                                                </div>
683
                                        </section>
684
                                        <section class="connect-new">
685
                                                <div class="img-wrap">
686
                                                        <a href="">
687
                                                                <span class="snf-network_full"></span>
688
                                                        </a>
689
                                                </div>
690
                                                <p><a href="">Connect to Network</a></p>
691
                                        </section>
692
                                </section>
693
                                <section class="content connected" id="disk-connected" style="display:none">
694
                                        <section class="item running">
695
                                                <div class="what">
696
                                                        <div class="img-wrap">
697
                                                                <span class="snf-HDD-full font-icon"></span>
698
                                                        </div>
699
                                                        <h4>Volume Name</h4>
700
                                                </div>
701
                                                <div class="clearfix">
702
                                                        <ul class="connections">
703
                                                                <li>
704
                                                                        <a href="#" class="act">act</a>
705
                                                                        <div class="icon"><span>?</span></div>
706
                                                                        <div class="data">
707
                                                                                <ul>
708
                                                                                        <li>
709
                                                                                                <h5 class="volume-data">Size</h5>
710
                                                                                                <p>10 GB</p>
711
                                                                                        </li>
712
                                                                                        <li>
713
                                                                                                <h5 class="volume-data">Storage Type</h5>
714
                                                                                                <p>Archipelago</p>
715
                                                                                        </li>
716
                                                                                </ul>
717
                                                                        </div>
718
                                                                </li>
719
                                                        </ul>
720
                                                </div>
721
                                        </section>
722
                                        <section class="item error">
723
                                                <div class="what">
724
                                                        <div class="img-wrap">
725
                                                                <span class="snf-HDD-full font-icon"></span>
726
                                                        </div>
727
                                                        <h4>Another Volume<span class="status">Error</span></h4>
728
                                                </div>
729
                                                <div class="clearfix">
730
                                                        <ul class="connections">
731
                                                                <li>
732
                                                                        <a href="#" class="act">act</a>
733
                                                                        <div class="icon"><span>?</span></div>
734
                                                                        <div class="data">
735
                                                                                <ul>
736
                                                                                        <li>
737
                                                                                                <h5 class="volume-data">Size</h5>
738
                                                                                                <p>20 GB</p>
739
                                                                                        </li>
740
                                                                                        <li>
741
                                                                                                <h5 class="volume-data">Storage Type</h5>
742
                                                                                                <p>Archipelago</p>
743
                                                                                        </li>
744
                                                                                </ul>
745
                                                                        </div>
746
                                                                </li>
747
                                                        </ul>
748

    
749
                                                </div>
750
                                        </section>
751
                                        <section class="connect-new">
752
                                                <div class="img-wrap">
753
                                                        <a href="">
754
                                                                <span class="snf-HDD-full font-icon"></span>
755
                                                        </a>
756
                                                </div>
757
                                                <p><a href="">Attach Volume</a></p>
758
                                        </section>
759
                                </section>
760
                                <div class="placeholder"></div>
761
                        </div>
762
                </div>
763
        </div>
764
  <script src="javascripts/vendor/jquery.js"></script>
765
  <script src="javascripts/foundation/foundation.js"></script>
766
        
767
        <script src="javascripts/foundation/foundation.alerts.js"></script>
768
        
769
        <script src="javascripts/foundation/foundation.clearing.js"></script>
770
        
771
        <script src="javascripts/foundation/foundation.cookie.js"></script>
772
        
773
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
774
        
775
        <script src="javascripts/foundation/foundation.forms.js"></script>
776
        
777
        <script src="javascripts/foundation/foundation.joyride.js"></script>
778
        
779
        <script src="javascripts/foundation/foundation.magellan.js"></script>
780
        
781
        <script src="javascripts/foundation/foundation.orbit.js"></script>
782
        
783
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
784
        
785
        <script src="javascripts/foundation/foundation.reveal.js"></script>
786
        
787
        <script src="javascripts/foundation/foundation.section.js"></script>
788
        
789
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
790
        
791
        <script src="javascripts/foundation/foundation.topbar.js"></script>
792
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
793
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
794
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
795
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
796
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
797
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>        
798
        <script src="javascripts/common.js"></script>
799
        
800
  
801
  <script>
802
    $(document).foundation();
803
  </script>
804
</body>
805
</html>