Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / volumes.html @ e60fa595

History | View | Annotate | Download (9.9 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>Synnefo | Network 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"></span></a></li>
26
                                <li><a href="" data-tooltip ="has-tip " title="Volumes"><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 volume</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>Volume name</h2>
95
                                                                                <span class="input"><input class="el1" type="text" placeholder="My Network"></span>
96
                                                                        </div>
97
                                                                </li>
98
                                                                <li class="dhcp_option">
99
                                                                </li>        
100
                                                        </ul>
101
                                                </div>
102
                                        </div>
103
                                </div>
104
<!-- new tba start -->
105
                                <div class="bottom">
106
                                        <div class="row">
107
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
108
                                                <a href="" class="nav next" data-next="el1"><span>CREATE</span></a>
109
                                                
110
                                        </div>
111
                                </div>
112
<!-- new tba end -->
113

    
114
                        </div>
115

    
116
        </div>
117
        <!-- overlays end -->
118
        
119
                <section class="actions-bar clearfix">
120
                        <h2>Volumes</h2>
121
                        <div class="view-type">
122
                                <a href="" class="list"><span class="snf-listview "></span></a>
123
                                <a href="" class="grid"><span class="snf-gridview current"></span></a>
124
                        </div>
125
                        <div class="filter-menu">
126
                                <a class="filter" href="">Filter</a>
127
                                <ul class="options">
128
                                        <li><a href=""> set an option</a></li>
129
                                        <li><a href=""> set an option</a></li>
130
                                        <li><a href=""> set an option</a></li>
131
                                        <li><a href=""> set an option</a></li>
132
                                </ul>
133
                        </div>
134
                        <div id="hd-search" class="hd-search">
135
                            <form>
136
                                        <span class="hd-icon-search snf-search"></span>
137
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
138
                            </form>
139
                        </div>
140
                </section>
141
                <section class="main row">
142
                        <div class="networks entities grid-view">
143
                                <ul class="items-list">
144
                                        <li data-status="add-new" class="add-new">
145
                                                <div class="container" data-overlay-id="network-wizard">
146
                                                        <div class="img-wrap">
147
                                                                        <span class="snf-HDD"></span>
148
                                                        </div>
149
                                                        <h4>New Volume</h4>
150
                                                </div>
151
                                                <div class="tags">
152
                                                </div>
153
                                                <div class= "status">
154
                                                </div>
155
                                        </li>
156
                                        <li data-status="active">
157
                                                <div class="more">
158
                                                        <div class="clearfix">
159
                                                                <div class="col lt">
160
                                                                        <ul>
161
                                                                                <li><a href="">Option i</a></li>
162
                                                                                <li><a href="">Option j</a></li>
163
                                                                                <li><a href="">Option k</a></li>
164
                                                                                <li><a href="">Option l</a></li>
165
                                                                                <li><a href="">Option m</a></li>
166
                                                                        </ul>
167
                                                                </div>
168
                                                                <div class="col rt">
169
                                                                        <ul>
170
                                                                                <li><a href="">Option i</a></li>
171
                                                                                <li><a href="">Option j</a></li>
172
                                                                        </ul>
173
                                                                </div>
174
                                                        </div>
175
                                                        <div class="name">Volume Name</div>
176
                                                </div>
177
                                                <div class="container">
178
                                                        <div class="check">
179
                                                                <span class="snf-checkbox-unchecked"></span>
180
                                                        </div>
181
                                                        <div class="img-wrap">
182
                                                                <span class="snf-HDD"></span>
183
                                                        </div>
184
                                                        <h4>Network Name</h4>
185
                                                        <div class="tags">
186
                                                        </div>
187
                                                        <div class= "status">
188
                                                                <span class="state"></span>
189
                                                                <span class="logs"></span>
190
                                                        </div>
191
                                                </div>
192
                                        </li>
193
                                        <li data-status="active">
194
                                                <div class="more">
195
                                                        <div class="clearfix">
196
                                                                <div class="col lt">
197
                                                                        <ul>
198
                                                                                <li><a href="">Option i</a></li>
199
                                                                                <li><a href="">Option j</a></li>
200
                                                                                <li><a href="">Option k</a></li>
201
                                                                                <li><a href="">Option l</a></li>
202
                                                                                <li><a href="">Option m</a></li>
203
                                                                        </ul>
204
                                                                </div>
205
                                                                <div class="col rt">
206
                                                                        <ul>
207
                                                                                <li><a href="">Option i</a></li>
208
                                                                                <li><a href="">Option j</a></li>
209
                                                                        </ul>
210
                                                                </div>
211
                                                        </div>
212
                                                        <div class="name">Volume Name</div>
213
                                                </div>
214
                                                <div class="container">
215
                                                        <div class="check">
216
                                                                <span class="snf-checkbox-unchecked"></span>
217
                                                        </div>
218
                                                        <div class="img-wrap">
219
                                                                <span class="snf-HDD"></span>
220
                                                        </div>
221
                                                        <h4>Network Name</h4>
222
                                                        <div class="tags">
223
                                                        </div>
224
                                                        <div class= "status">
225
                                                                <span class="state"></span>
226
                                                                <span class="logs"></span>
227
                                                        </div>
228
                                                </div>
229
                                        </li>
230
                                </ul>
231
                                <div class="lt-bar">
232
                                        <ul>
233
                                                <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>
234
                                                <li class="running"><a href="#" title="">Action 1</a></li>
235
                                                <li class="running"><a href="#" title="">Action 2</a></li>
236
                                                <li class="both"><a href="#">Destroy</a></li>
237
                                                <li class="stopped"><a href="#">Start</a></li>
238
                                                 <!-- in case we want an action always activated
239
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
240
                                        </ul>
241
                                </div>
242
                                <div class="welcome">It seems you have not yet created a VM! Go ahead!</div>
243
                        </div>
244
                </section>
245
        </div>
246
        
247

    
248
  <script src="javascripts/vendor/jquery.js"></script>
249
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
250
        <script src="javascripts/foundation/foundation.js"></script>
251
        <script src="javascripts/foundation/foundation.alerts.js"></script>
252
        
253
        <script src="javascripts/foundation/foundation.clearing.js"></script>
254
        
255
        <script src="javascripts/foundation/foundation.cookie.js"></script>
256
        
257
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
258
        
259
        <script src="javascripts/foundation/foundation.forms.js"></script>
260
        
261
        <script src="javascripts/foundation/foundation.joyride.js"></script>
262
        
263
        <script src="javascripts/foundation/foundation.magellan.js"></script>
264
        
265
        <script src="javascripts/foundation/foundation.orbit.js"></script>
266
        
267
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
268
        
269
        <script src="javascripts/foundation/foundation.reveal.js"></script>
270
        
271
        <script src="javascripts/foundation/foundation.section.js"></script>
272
        
273
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
274
        
275
        <script src="javascripts/foundation/foundation.topbar.js"></script>
276
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
277
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
278
        <!-- dropzone.js used for drag and drop files to upload them --> 
279
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
280
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
281
        
282

    
283
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/modernizr.custom.js"></script>
284
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/classie.js"></script>
285
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/uisearch.js"></script>
286
        <script src="javascripts/common.js"></script>
287
        <script src="javascripts/wizard.js"></script>
288
        
289

    
290
  <script>
291
    $(document).foundation();
292
  </script>
293
</body>
294
</html>