Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / network_list.html @ 28aa17cb

History | View | Annotate | Download (12.6 kB)

1

    
2

    
3
<!DOCTYPE html>
4
    <!--[if lte IE 7]><script src="javascripts/lte-ie7.js"></script><![endif]-->
5
<!--[if IE 8]>                                  <html class="no-js lt-ie9" lang="en"> <![endif]-->
6
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
7

    
8
<head>
9
        <meta charset="utf-8" />
10
    <meta name="viewport" content="width=device-width" />
11
    <title>Networks list</title>
12
    <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'>
13
    <link rel="stylesheet" href="stylesheets/normalize.css" />
14
    <link rel="stylesheet" href="stylesheets/app.css" />
15
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
16
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
17
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
18
    <script src="javascripts/vendor/custom.modernizr.js"></script>
19
</head>
20
<body>
21
                <header class="header">
22
                <nav>
23
                        <ul class="icons-nav">
24
                                <li><a href="vm_list.html" data-tooltip ="has-tip" title="Machines"><span class="snf-PC"></span></a></li>
25
                                <li><a href="network_list.html" data-tooltip ="has-tip " title="Networks"><span class="snf-network_full"></span></a></li>
26
                                <li><a href="" data-tooltip ="has-tip" title="Disks"><span class="snf-HDD"></span></a></li>
27
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-Pithos"></span></a></li>
28
                                <li><a href="" data-tooltip ="has-tip" title="Images" ><span class="snf-images"></span></a></li>
29
                                <li><a href="" data-tooltip ="has-tip" title="Snapshots" ><span class="snf-snapshot"></span></a></li>
30
                                <li><a href="" data-tooltip ="has-tip" title="More" ><span class="snf-plus"></span></a></li>
31
                        </ul>
32
                </nav>
33
                <div class="login">
34
                        <div class="wrap">
35
                                <a href="">user1@synnefo.org</a>
36
                                <ul>
37
                                        <li><a href="">dashboard</a></li>
38
                                        <li><a href="">sign out</a></li>
39
                                </ul>
40
                        </div>
41
                </div>
42
                <div class="logo">
43
                        <a href="index.html"><img src="images/logo_01.png" alt="software logo"></a>
44
                </div>
45
        </header>
46
        
47
        <div class="overlay-wrapper">
48

    
49
        <!-- overlays start -->
50
        <div class="overlay-area-custom">
51
                
52
                <div id="overlay1" class="overlay-div">
53
                        <a href="" class="close"><span class="snf-close"></span></a>
54
                        <p>Are you sure you want to reboot your machine?</p>
55
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
56
                </div>
57
                <div id="overlay2" class="overlay-div">
58
                        <p>Are you sure you want to shutdown your machine?</p>
59
                        <p class="buttons"><a href="" class="btn4">YES</a><a href="" class="btn4">NO</a></p>
60
                </div>
61
                        <div id="network-wizard" class="overlay-div wizard">
62
                                <div class="top">
63
                                        <div class="numbers">
64
                                                <div class="menus row">
65
                                                        <a href="" class="close"><span class="snf-close"></span></a>
66
                                                        <ul class="nums">
67
                                                                <li class="preselected current">
68
                                                                        <em><span>1</span></em>
69
                                                                        <p><strong>Create new private network</strong></p>
70
                                                                </li>
71
                                                        </ul>
72
                                                </div>
73
                                        </div>
74
                                        <div class="row">
75
                                                <nav class="sub-menu" data-step=1>
76
                                                </nav>
77
                                        </div>
78
                                </div>
79
                                <div class="middle">
80
                                <div class="steps">
81
                                        <div class="step step-1 preselected current">
82
                                                <ul class="row network_options">
83
                                                                <li class="project-selection">
84
                                                                        <form class="custom">
85
                                                                          <select class="medium">
86
                                                                            <option class="el5">Basic Project</option>
87
                                                                            <option>Project 2</option>
88
                                                                            <option>Project 3</option>
89
                                                                          </select>
90
                                                                        </form>
91
                                                                </li>
92
                                                                <li>
93
                                                                        <div class="network-name">
94
                                                                                <h2>Network name</h2>
95
                                                                                <span class="input"><input class="el1" type="text" placeholder="My Network"></span>
96
                                                                        </div>
97
                                                                </li>
98
                                                                <li class="dhcp_option"><span>Assign IP addresses automatically:</span>
99
                                                                        <a href="" class="check">
100
                                                                                <span class="snf-checkbox-checked prechecked"></span>
101
                                                                        </a>
102
                                                                </li>
103
                                                                <li class="explanatory">
104
                                                                        If you enable DHCP on the private network, connected virtual machines will automatically be assigned an IP address based on the given subnet. You may disable this option if you want to assign IP addresses to the connected virtual machines manually.
105
                                                                </li>
106
                                                                <li>
107
                                                                        <span class="sub_title">Network subnet:</span>
108
                                                                        <ul class="subnet_options">
109
                                                                                <li>
110
                                                                                        <span>Auto 
111
                                                                                                <a href="" class="radio_btn">
112
                                                                                                        <span class="snf-radio-checked prechecked"></span>
113
                                                                                                </a>
114
                                                                                        </span>
115
                                                                                </li>
116
                                                                                <li class="manual">
117
                                                                                        <form>
118
                                                                                                <span>Manual
119
                                                                                                        <a href="" class="radio_btn manual">
120
                                                                                                                <span class="snf-radio-unchecked"></span>
121
                                                                                                        </a>
122
                                                                                                        <span class="input"><input type="text" placeholder="192.168.32.0/24"></span>
123
                                                                                                </span>
124
                                                                                        </form>
125
                                                                                </li>
126
                                                                                <li>
127
                                                                                        <span>10.0.0.0/24 
128
                                                                                                <a href="" class="radio_btn">
129
                                                                                                        <span class="snf-radio-unchecked"></span>
130
                                                                                                </a>
131
                                                                                        </span>
132
                                                                                </li>
133
                                                                                <li>
134
                                                                                        <span>192.168.0.0/24 
135
                                                                                                <a href="" class="radio_btn">
136
                                                                                                        <span class="snf-radio-unchecked"></span>
137
                                                                                                </a>
138
                                                                                        </span>
139
                                                                                </li>
140
                                                                        </ul>
141
                                                                </li>        
142
                                                        </ul>
143
                                                </div>
144
                                        </div>
145
                                </div>
146
<!-- new tba start -->
147
                                <div class="bottom">
148
                                        <div class="row">
149
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
150
                                                <a href="" class="nav next" data-next="el1"><span>CREATE</span></a>
151
                                                
152
                                        </div>
153
                                </div>
154
<!-- new tba end -->
155

    
156
                        </div>
157

    
158
        </div>
159
        <!-- overlays end -->
160
        
161
                                <section class="actions-bar clearfix">
162
                        <h2>Networks</h2>
163
                        <div class="view-type">
164
                                <a href="" class="list"><span class="snf-listview "></span></a>
165
                                <a href="" class="grid"><span class="snf-gridview current"></span></a>
166
                        </div>
167
                        <div class="filter-menu">
168
                                <a class="filter" href="">Filter</a>
169
                                <ul class="options">
170
                                        <li><a href=""> set an option</a></li>
171
                                        <li><a href=""> set an option</a></li>
172
                                        <li><a href=""> set an option</a></li>
173
                                        <li><a href=""> set an option</a></li>
174
                                </ul>
175
                        </div>
176
                        <div id="hd-search" class="hd-search">
177
                            <form>
178
                                        <span class="hd-icon-search snf-search"></span>
179
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
180
                            </form>
181
                        </div>
182
                </section>
183
                <section class="main row">
184
                        <div class="networks entities grid-view">
185
                                <ul class="items-list">
186
                                        <li data-status="add-new" class="add-new">
187
                                                <div class="container" data-overlay-id="network-wizard">
188
                                                        <div class="check">
189
                                                                <span class="snf-checkbox-unchecked"></span>
190
                                                        </div>
191
                                                        <div class="img-wrap">
192
                                                                        <span class="snf-network_full"></span>
193
                                                        </div>
194
                                                        <h4>New Network</h4>
195
                                                </div>
196
                                                <div class="tags">
197
                                                </div>
198
                                                <div class= "status">
199
                                                </div>
200
                                        </li>
201
                                        <li data-status="active">
202
                                                <div class="more">
203
                                                        <div class="clearfix">
204
                                                                <div class="col lt">
205
                                                                        <ul>
206
                                                                                <li><a href="">Option i</a></li>
207
                                                                                <li><a href="network_details.html">Details</a></li>
208
                                                                                <li><a href="">Option k</a></li>
209
                                                                                <li><a href="">Option l</a></li>
210
                                                                                <li><a href="">Option m</a></li>
211
                                                                        </ul>
212
                                                                </div>
213
                                                                <div class="col rt">
214
                                                                        <ul>
215
                                                                                <li><a href="">Option i</a></li>
216
                                                                                <li><a href="network_details.html">Details</a></li>
217
                                                                        </ul>
218
                                                                </div>
219
                                                        </div>
220
                                                        <div class="name">Network Name</div>
221
                                                </div>
222
                                                <div class="container">
223
                                                        <div class="check">
224
                                                                <span class="snf-checkbox-unchecked"></span>
225
                                                        </div>
226
                                                        <div class="img-wrap">
227
                                                                <span class="snf-network_full"></span>
228
                                                        </div>
229
                                                        <h4>Network Name</h4>
230
                                                        <div class="tags">
231
                                                        </div>
232
                                                        <div class= "status">
233
                                                                <span class="state"></span>
234
                                                                <span class="logs"></span>
235
                                                        </div>
236
                                                </div>
237
                                        </li>
238
                                        <li data-status="active">
239
                                                <div class="more">
240
                                                        <div class="clearfix">
241
                                                                <div class="col lt">
242
                                                                        <ul>
243
                                                                                <li><a href="">Option i</a></li>
244
                                                                                <li><a href="network_details.html">Details</a></li>
245
                                                                                <li><a href="">Option k</a></li>
246
                                                                                <li><a href="">Option l</a></li>
247
                                                                                <li><a href="">Option m</a></li>
248
                                                                        </ul>
249
                                                                </div>
250
                                                                <div class="col rt">
251
                                                                        <ul>
252
                                                                                <li><a href="">Option i</a></li>
253
                                                                                <li><a href="network_details.html">Details</a></li>
254
                                                                        </ul>
255
                                                                </div>
256
                                                        </div>
257
                                                        <div class="name">Network Name</div>
258
                                                </div>
259
                                                <div class="container">
260
                                                        <div class="check">
261
                                                                <span class="snf-checkbox-unchecked"></span>
262
                                                        </div>
263
                                                        <div class="img-wrap">
264
                                                                <span class="snf-network_full"></span>
265
                                                        </div>
266
                                                        <h4>Network Name</h4>
267
                                                        <div class="tags">
268
                                                        </div>
269
                                                        <div class= "status">
270
                                                                <span class="state"></span>
271
                                                                <span class="logs"></span>
272
                                                        </div>
273
                                                </div>
274
                                        </li>
275
                                        <li data-status="active">
276
                                                <div class="more">
277
                                                        <div class="clearfix">
278
                                                                <div class="col lt">
279
                                                                        <ul>
280
                                                                                <li><a href="">Option i</a></li>
281
                                                                                <li><a href="network_details.html">Details</a></li>
282
                                                                                <li><a href="">Option k</a></li>
283
                                                                                <li><a href="">Option l</a></li>
284
                                                                                <li><a href="">Option m</a></li>
285
                                                                        </ul>
286
                                                                </div>
287
                                                                <div class="col rt">
288
                                                                        <ul>
289
                                                                                <li><a href="">Option i</a></li>
290
                                                                                <li><a href="network_details.html">Details</a></li>
291
                                                                        </ul>
292
                                                                </div>
293
                                                        </div>
294
                                                        <div class="name">Network Name</div>
295
                                                </div>
296
                                                <div class="container">
297
                                                        <div class="check">
298
                                                                <span class="snf-checkbox-unchecked"></span>
299
                                                        </div>
300
                                                        <div class="img-wrap">
301
                                                                <span class="snf-network_full"></span>
302
                                                        </div>
303
                                                        <h4>Network Name</h4>
304
                                                        <div class="tags">
305
                                                        </div>
306
                                                        <div class= "status">
307
                                                                <span class="state"></span>
308
                                                                <span class="logs"></span>
309
                                                        </div>
310
                                                </div>
311
                                        </li>
312
                                </ul>
313
                                <div class="lt-bar">
314
                                        <ul>
315
                                                <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>
316
                                                <li class="running"><a href="#" title="">Connect VM</a></li>
317
                                                <li class="permanent"><a href="#" class="active">Destroy</a></li>
318
                                                <li class="both"><a href="#" >Option i</a></li>
319
                                                <!-- in case we want an action always activated
320
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
321
                                        </ul>
322
                                </div>
323
                                <div class="welcome">It seems you have not yet created a VM! Go ahead!</div>
324
                        </div>
325
                </section>
326
        </div>
327
        
328

    
329
  <script src="javascripts/vendor/jquery.js"></script>
330
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
331
        <script src="javascripts/foundation/foundation.js"></script>
332
        <script src="javascripts/foundation/foundation.alerts.js"></script>
333
        
334
        <script src="javascripts/foundation/foundation.clearing.js"></script>
335
        
336
        <script src="javascripts/foundation/foundation.cookie.js"></script>
337
        
338
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
339
        
340
        <script src="javascripts/foundation/foundation.forms.js"></script>
341
        
342
        <script src="javascripts/foundation/foundation.joyride.js"></script>
343
        
344
        <script src="javascripts/foundation/foundation.magellan.js"></script>
345
        
346
        <script src="javascripts/foundation/foundation.orbit.js"></script>
347
        
348
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
349
        
350
        <script src="javascripts/foundation/foundation.reveal.js"></script>
351
        
352
        <script src="javascripts/foundation/foundation.section.js"></script>
353
        
354
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
355
        
356
        <script src="javascripts/foundation/foundation.topbar.js"></script>
357
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
358
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
359
        <!-- dropzone.js used for drag and drop files to upload them --> 
360
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
361
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
362
        
363

    
364
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/modernizr.custom.js"></script>
365
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/classie.js"></script>
366
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/uisearch.js"></script>
367
        <script src="javascripts/common.js"></script>
368
        <script src="javascripts/wizard.js"></script>
369
        
370

    
371
  <script>
372
    $(document).foundation();
373
  </script>
374
</body>
375
</html>