Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / network_details.html @ 34d12b31

History | View | Annotate | Download (11.2 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>Synnefo | 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/app.css" />
13
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
14
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
15
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
16
    <script src="javascripts/vendor/custom.modernizr.js"></script>
17
</head>
18
<body>
19
                <header class="header">
20
                <nav>
21
                        <ul class="icons-nav">
22
                                <li><a href="vm_list.html" data-tooltip ="has-tip" title="Machines"><span class="snf-PC"></span></a></li>
23
                                <li><a href="network_list.html" data-tooltip ="has-tip " title="Networks"><span class="snf-network_full"></span></a></li>
24
                                <li><a href="" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
25
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
26
                                <li><a href="" data-tooltip ="has-tip" title="Images" ><span class="snf-images"></span></a></li>
27
                                <li><a href="" data-tooltip ="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>
28
                                <li><a href="" data-tooltip ="has-tip" title="More" ><span class="snf-plus"></span></a></li>
29
                        </ul>
30
                </nav>
31
                <div class="login">
32
                        <div class="wrap">
33
                                <a href="">user1@synnefo.org</a>
34
                                <ul>
35
                                        <li><a href="">dashboard</a></li>
36
                                        <li><a href="">sign out</a></li>
37
                                </ul>
38
                        </div>
39
                </div>
40
                <div class="logo">
41
                        <a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
42
                </div>
43
        </header>
44
        <div class="overlay-wrapper">
45
                <section class="actions-bar clearfix">
46
                        <h2><a href="vm_list.html">Networks</a> > My Awesome network</h2>
47
                        <div class="view-type">
48
                                <a href="" class="list" title="list view"><span class="snf-listview "></span></a>
49
                                <a href="" class="grid" title="grid view"><span class="snf-gridview current"></span></a>
50
                        </div>
51
                        <div class="filter-menu">
52
                                <a class="filter" href="">Filter</a>
53
                                <ul class="options">
54
                                        <li><a href=""> set an option</a></li>
55
                                        <li><a href=""> set an option</a></li>
56
                                        <li><a href=""> set an option</a></li>
57
                                        <li><a href=""> set an option</a></li>
58
                                </ul>
59
                        </div>
60
                        <div id="hd-search" class="hd-search">
61
                            <form>
62
                                        <span class="hd-icon-search snf-search"></span>
63
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
64
                            </form>
65
                        </div>
66
                </section>
67
                <div class="main row">
68
                        <div class="network details running">
69
                                <section class="top">
70
                                        <div class="lt">
71
                                                <div class="img-wrap">
72
                                                        <span class="snf-network_full"></span>
73
                                                </div>
74
                                        </div>
75
                                        <div class="rt">
76
                                                <div class="title">
77
                                                        <h1>Internet access 001:648:2ffc:1112:a80c:eaff:fe15:baee</h1>
78
                                                </div>
79
                                                <div class="actions">
80
                                                        <ul>
81
                                                                <li><a href="">Start</a></li>
82
                                                                <li><a href="">Shutdown</a></li>
83
                                                        </ul>
84
                                                </div>
85
                                                <div class="tabs">
86
                                                        <ul>
87
                                                                <li><a href="#info"><span class="snf-info_outline"></span></a></li>
88
                                                                <li><a href="#vm-connected" class="active"><span class="snf-PC_fill"></span></a></li>
89
                                                        </ul>
90
                                                </div>
91
                                        </div>
92
                                </section>
93
                                <section class="content info-simple" id="info" style="display:none;">
94
                                        <section class="info-block">
95
                                                <h2>info</h2>
96
                                                <dl>
97
                                                        <dt><span class="snf-cpu icon"></span>CPUs</dt>
98
                                                        <dd>4</dd>
99
                                                        <dt><span class="snf-ram icon"></span>RAM</dt>
100
                                                        <dd>512 MB</dd>
101
                                                        <dt><span class="snf-HDD icon"></span>System Disk Size</dt>
102
                                                        <dd>4GB</dd>
103
                                                        <dt><span class="snf-HDD icon"></span>Storage Type</dt>
104
                                                        <dd>Archipelago</dd>
105
                                                        <dt><span class="snf-images icon"></span>Image Name</dt>
106
                                                        <dd>Fedora</dd>
107
                                                        <dt><span class="snf-images icon"></span>Image Size</dt>
108
                                                        <dd>3.68 GB</dd>
109
                                                        <dt><span class="snf-ram icon"></span>IPv4</dt>
110
                                                        <dd>83.212.96.152</dd>
111
                                                        <dt><span class="snf-ram icon"></span>IPv4</dt>
112
                                                        <dd>83.212.96.153</dd>
113
                                                        <dt><span class="snf-ram icon"></span>IPv6</dt>
114
                                                        <dd>2001:648:2ffc:1112:a80c:eaff:fec2:8cd9</dd>
115
                                                </dl>
116
                                        </section>
117
                                </section>
118
                                <section class="content connected" id="vm-connected" style="display:block">
119
                                        <section class="item error">
120
                                                <div class="what">
121
                                                        <div class="img-wrap">
122
                                                                <span class="snf-PC_fill"></span>
123
                                                                <span class="os fedora">fedora</span>
124
                                                        </div>
125
                                                        <h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>
126
                                                </div>
127
                                                <div class="clearfix">
128
                                                        <ul class="connections">
129
                                                                <li>
130
                                                                        <a href="#" class="act">act</a>
131
                                                                        <div class="icon"><span class="snf-info_outline"></span></div>
132
                                                                        <div class="data">
133
                                                                                <ul>
134
                                                                                        <li>
135
                                                                                                <h5>ipv6</h5>
136
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
137
                                                                                        </li>
138
                                                                                        <li>
139
                                                                                                <h5>ipv6</h5>
140
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee</p>
141
                                                                                        </li>
142
                                                                                </ul>
143
                                                                        </div>
144
                                                                </li>
145
                                                        </ul>
146
                                                        <div class="firewall" data-firewall="fully">
147
                                                                <p>Firewall <em>on</em></p>
148
                                                                <div class="more">
149
                                                                        <p class="fully">
150
                                                                                <a href="">Fully protected mode<span class="snf-radio-checked"></span><em>on</em></a>
151
                                                                        </p>
152
                                                                        <p class="basic">
153
                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
154
                                                                        </p>
155
                                                                        <p class="unprotected">
156
                                                                                <a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
157
                                                                        </p>
158
                                                                </div>
159
                                                        </div>
160
                                                </div>
161
                                        </section>
162
                                        <section class="item running">
163
                                                <div class="what">
164
                                                        <div class="img-wrap">
165
                                                                <span class="snf-PC_fill"></span>
166
                                                                <span class="os fedora">fedora</span>
167
                                                        </div>
168
                                                        <h4>My Awesome Machine</h4>
169
                                                </div>
170
                                                <div class="clearfix">
171
                                                        <ul class="connections">
172
                                                                <li>
173
                                                                        <a href="#" class="act">act</a>
174
                                                                        <div class="icon"><span class="snf-info_outline"></span></div>
175
                                                                        <div class="data">
176
                                                                                <ul>
177
                                                                                        <li>
178
                                                                                                <h5>ipv6</h5>
179
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
180
                                                                                        </li>
181
                                                                                        <li>
182
                                                                                                <h5>ipv4</h5>
183
                                                                                                <p>001:648:2ffc</p>
184
                                                                                        </li>
185
                                                                                </ul>
186
                                                                        </div>
187
                                                                </li>
188
                                                                <li>
189
                                                                        <a href="#" class="act">act</a>
190
                                                                        <div class="icon"><span class="snf-info_outline"></span></div>
191
                                                                        <div class="data">
192
                                                                                <ul>
193
                                                                                        <li>
194
                                                                                                <h5>ipv6</h5>
195
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
196
                                                                                        </li>
197
                                                                                </ul>
198
                                                                        </div>
199
                                                                </li>
200
                                                                <li>
201
                                                                        <a href="#" class="act">act</a>
202
                                                                        <div class="icon"><span class="snf-info_outline"></span></div>
203
                                                                        <div class="data">
204
                                                                                <ul>
205
                                                                                        <li>
206
                                                                                                <h5>ipv6</h5>
207
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
208
                                                                                        </li>
209
                                                                                        <li>
210
                                                                                                <h5>ipv6</h5>
211
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee</p>
212
                                                                                        </li>
213
                                                                                </ul>
214
                                                                        </div>
215
                                                                </li>
216
                                                        </ul>
217
                                                        <div class="firewall" data-firewall="basic">
218
                                                                <p>Firewall <em>on</em></p>
219
                                                                <div class="more">
220
                                                                        <p class="fully">
221
                                                                                <a href="">Fully protected mode<span class="snf-radio-unchecked"></span><em>on</em></a>
222
                                                                        </p>
223
                                                                        <p class="basic">
224
                                                                                <a href="">Basically protected mode<span class="snf-radio-checked"></span><em>off</em></a>
225
                                                                        </p>
226
                                                                        <p class="unprotected">
227
                                                                                <a href="">Unprotected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
228
                                                                        </p>
229
                                                                </div>
230
                                                        </div>
231
                                                </div>
232
                                        </section>
233
                                        <section class="item running">
234
                                                <div class="what">
235
                                                        <div class="img-wrap">
236
                                                                <span class="snf-PC_fill"></span>
237
                                                                <span class="os fedora">fedora</span>
238
                                                        </div>
239
                                                        <h4>My Awesome Machine<span class="status">BUILDING 798.56 MB of 4.33 GB (18%)</span></h4>
240
                                                </div>
241
                                                <div class="clearfix">
242
                                                        <ul class="connections">
243
                                                                <li>
244
                                                                        <a href="#" class="act">act</a>
245
                                                                        <div class="icon"><span class="snf-info_outline"></span></div>
246
                                                                        <div class="data">
247
                                                                                <ul>
248
                                                                                        <li>
249
                                                                                                <h5>ipv6</h5>
250
                                                                                                <p>001:648:2ffc:1112:a80c:eaff:fe15:baee </p>
251
                                                                                        </li>
252
                                                                                </ul>
253
                                                                        </div>
254
                                                                </li>
255
                                                        </ul>
256
                                                        <div class="firewall" data-firewall="unprotected">
257
                                                                <p>Firewall <em>on</em></p>
258
                                                                <div class="more">
259
                                                                        <p class="fully">
260
                                                                                <a href="">Fully protected mode<span class="snf-radio-unchecked"></span><em>on</em></a>
261
                                                                        </p>
262
                                                                        <p class="basic">
263
                                                                                <a href="">Basically protected mode<span class="snf-radio-unchecked"></span><em>off</em></a>
264
                                                                        </p>
265
                                                                        <p class="unprotected">
266
                                                                                <a href="">Unprotected mode<span class="snf-radio-checked"></span><em>off</em></a>
267
                                                                        </p>
268
                                                                </div>
269
                                                        </div>
270
                                                </div>
271
                                        </section>
272
                                        <section class="connect-new">
273
                                                <div class="img-wrap">
274
                                                        <a href="">
275
                                                                <span class="snf-PC_fill"></span>
276
                                                                <span class="symbol">+</span>
277
                                                        </a>
278
                                                </div>
279
                                                <p><a href="">Connect Machine</a></p>
280
                                        </section>
281
                                </section>
282
                                <div class="placeholder"></div>
283
                        </div>
284
                </div>
285
        </div>
286
        <script src="javascripts/vendor/jquery.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/dropzone.js"></script>
317
        
318
        <script src="javascripts/common.js"></script>
319
        
320
  
321
  <script>
322
    $(document).foundation();
323
  </script>
324
</body>
325
</html>