Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / volumes_list.html @ 92747314

History | View | Annotate | Download (14.1 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>Volumes 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/farbtastic.css" />
16
    <link rel="stylesheet" href="stylesheets/font_custom.css" />
17
    <link rel="stylesheet" href="stylesheets/jquery.jscrollpane.css" media="all" />
18
    <link rel="stylesheet" href="stylesheets/magnific-popup.css" />
19

    
20
    <script src="javascripts/vendor/custom.modernizr.js"></script>
21
</head>
22
<body>
23
        <header class="header">
24
                <nav>
25
                        <ul class="icons-nav">
26
                                <li><a href="vm_list.html" data-tooltip ="has-tip" title="Machines"><span class="snf-pc-outline"></span></a></li>
27
                                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li>
28
                                <li><a href="" data-tooltip ="has-tip " title="Volumes"><span class="snf-volume-outline"></span></a></li>
29
                                <li><a href="pithos_list.html" data-tooltip ="has-tip" title="Storage" ><span class="snf-pithos-outline"></span></a></li>
30
                                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images" ><span class="snf-image-outline"></span></a></li>
31
                                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots" ><span class="snf-snapshot-outline"></span></a></li>
32
                                <li><a href="" data-tooltip ="has-tip" title="More" ><span class="snf-plus-outline"></span></a></li>
33
                        </ul>
34
                </nav>
35
                <div class="login">
36
                        <div class="wrap">
37
                                <a href="">user1@synnefo.org</a>
38
                                <ul>
39
                                        <li><a href="">dashboard</a></li>
40
                                        <li><a href="">sign out</a></li>
41
                                </ul>
42
                        </div>
43
                </div>
44
                <div class="logo">
45
                        <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
46
                </div>
47
        </header>
48
        
49
        <div class="overlay-wrapper">
50

    
51
        <!-- overlays start -->
52
        <section class="overlay-area-custom">
53
                <div id="volume-wizard" class="overlay-div wizard">
54
                        <div class="top">
55
                                <div class="numbers">
56
                                        <div class="menus row">
57
                                                <a href="" class="close"><span class="snf-close"></span></a>
58
                                                <ul class="nums">
59
                                                        <li class="preselected current">
60
                                                                <em><span>1</span></em>
61
                                                                <p><strong>New Volume: Choose your configuration </strong></p>
62
                                                        </li>
63
                                                        <li>
64
                                                                <em><span>2</span></em>
65
                                                                <p><strong>New Volume: Attach to vm</strong></p>
66
                                                        </li>
67
                                                        <li>
68
                                                                <em><span>3</span></em>
69
                                                                <p><strong>New Volume: Summary</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 volume_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  class="volume-name">
93
                                                                        <h2>Volume name</h2>
94
                                                                        <span class="input"><input class="el1" type="text" placeholder="My Volume"></span>
95
                                                                </li>
96
                                                                <li class="volume-size">
97
                                                                        <div class="title">
98
                                                                                <span class="snf-volume-outline snf-font"></span>
99
                                                                                <h2>
100
                                                                                        Disk Size<span> (GB)</span>
101
                                                                                        <em>Choose disk size</em>
102
                                                                                </h2>
103
                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
104
                                                                        </div>
105
                                                                        <div class="options-bar">
106
                                                                                <div class="bar">
107
                                                                                        <div class="wrap">
108
                                                                                                <div class="container">
109
                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
110
                                                                                                        <div class="total low" style="width:40%">
111
                                                                                                                <div class="current" style="width:80%"></div>
112
                                                                                                                <span>40%</span>
113
                                                                                                        </div>
114
                                                                                                </div>
115
                                                                                        </div>
116
                                                                                </div>
117
                                                                                <ul class="options">
118
                                                                                        <li><a href="" class="small current preselected">10</a></li>
119
                                                                                        <li><a href="" class="medium">20</a></li>
120
                                                                                        <li><a href="" class="large">30</a></li>
121
                                                                                        <li><a href="">40</a></li>
122
                                                                                </ul>
123
                                                                        </div>
124
                                                                </li>
125
                                                                <li class="volume-type">
126
                                                                        <div class="title">
127
                                                                                <span class="snf-volume-outline snf-font"></span>
128
                                                                                <h2>
129
                                                                                        Storage
130
                                                                                        <em>Select storage type</em>
131
                                                                                </h2>
132
                                                                                <p>HOVER EXPLANATORY TEXT Volumes residing on our custom storage layer Archipelago, supporting fast VM spawning with cloning. Will also support Volume snapshotting really soon.</p>
133
                                                                        </div>
134
                                                                        <div class="options-bar">
135
                                                                                <div class="bar">
136
                                                                                        <div class="wrap  disabled-progress-bar">
137
                                                                                                <div class="container">
138
                                                                                                        <!-- width percentages do not correspond to actual mesurements -->
139
                                                                                                        <div class="total" style="width:100%">
140
                                                                                                                <div class="current" style="width:0%"></div>
141
                                                                                                                <span></span>
142
                                                                                                        </div>
143
                                                                                                </div>
144
                                                                                        </div>
145
                                                                                </div>
146
                                                                                <ul class="options storage-selection">
147
                                                                                        <li><a href="" class="current preselected">DRBD</a></li>
148
                                                                                        <li><a href="" data-next="el3">Archipelago</a></li>
149
                                                                                </ul>
150
                                                                        </div>
151
                                                                </li>
152
                                                        </ul>
153
                                                </div>
154
                                                <div class="step step-2">
155
                                                        <h2 class="row"> Machines</h2>
156
                                                        <ul class="row vms-list">
157
                                                                <li>
158
                                                                        <div class="img-wrap">
159
                                                                                <span class="snf-pc-outline snf-font"></span>
160
                                                                        </div>
161
                                                                        <div class="name">no machine</div>
162
                                                                        <a href=""><span class="snf-radio-checked prechecked"></span></a>
163
                                                                </li>
164
                                                                <li>
165
                                                                        <div class="img-wrap">
166
                                                                                <span class="snf-pc-full snf-font"></span>
167
                                                                                <span class="os">unknown</span>
168
                                                                        </div>
169
                                                                        <div class="name">Machine Name</div>
170
                                                                        <a href=""><span class="snf-radio-unchecked"></span></a>
171
                                                                </li>
172
                                                                <li>
173
                                                                        <div class="img-wrap">
174
                                                                                <span class="snf-pc-full snf-font"></span>
175
                                                                                <span class="os">unknown</span>
176
                                                                        </div>
177
                                                                        <div class="name">A Longer Machine Name</div>
178
                                                                        <a href=""><span class="snf-radio-unchecked"></span></a>
179
                                                                </li>
180
                                                                <li>
181
                                                                        <div class="img-wrap">
182
                                                                                <span class="snf-pc-full snf-font"></span>
183
                                                                                <span class="os">unknown</span>
184
                                                                        </div>
185
                                                                        <div class="name">Shorty</div>
186
                                                                        <a href=""><span class="snf-radio-unchecked"></span></a>
187
                                                                </li>
188
                                                        </ul>
189
                                                </div>
190
                                                <div class="step step-3">
191
                                                        <div class="summary">
192
                                                                <div class="row">
193
                                                                        <div class="wrap">
194
                                                                                <dl>
195
                                                                                        <dt>Volume name</dt>
196
                                                                                        <dd>My Volume</dd>
197
                                                                                </dl>
198
                                                                        </div>
199
                                                                </div>
200
                                                                <div class="row">
201
                                                                        <div class="wrap">
202
                                                                                <dl>
203
                                                                                        <dt>Project</dt>
204
                                                                                        <dd>Basic Project</dd>
205
                                                                                </dl>
206
                                                                        </div>
207
                                                                </div>
208
                                                                <div class="row">
209
                                                                        <div class="wrap">
210
                                                                                <dl>
211
                                                                                        <dt>Volume size</dt>
212
                                                                                        <dd>15 GB</dd>
213
                                                                                        <dt>Storage type</dt>
214
                                                                                        <dd>Archipelago</dd>
215
                                                                                </dl>
216
                                                                        </div>
217
                                                                </div>
218
                                                                <div class="row">
219
                                                                        <div class="wrap">
220
                                                                                <dl>
221
                                                                                        <dt>Attached to machine</dt>
222
                                                                                        <dd>none</dd>
223
                                                                                </dl>
224
                                                                        </div>
225
                                                                </div>
226
                                                        </div>
227
                                                </div>
228
                                        </div>
229
                                </div>
230
                                <div class="bottom">
231
                                        <div class="row">
232
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
233
                                                <a href="" class="nav next" data-next="el1"><span>NEXT</span></a>
234
                                        </div>
235
                                </div>
236
                        </div>
237
                </section>
238
                <section class="actions-bar clearfix">
239
                        <h2>Volumes</h2>
240
                        <div class="view-type">
241
                                <a href="" class="grid"><span class="snf-gridview current"></span></a>
242
                                <a href="" class="list"><span class="snf-listview "></span></a>
243
                                <a href="" class="single" title="single view"></a>
244
                        </div>
245
                        <div class="filter-menu">
246
                                <a class="filter" href="">Filter</a>
247
                                <ul class="options">
248
                                        <li><a href=""> set an option</a></li>
249
                                        <li><a href=""> set an option</a></li>
250
                                        <li><a href=""> set an option</a></li>
251
                                        <li><a href=""> set an option</a></li>
252
                                </ul>
253
                        </div>
254
                        <div id="hd-search" class="hd-search">
255
                            <form>
256
                                        <span class="hd-icon-search snf-search"></span>
257
                                <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
258
                            </form>
259
                        </div>
260
                </section>
261
                <section class="main row">
262
                        <div class="volumes entities grid-view">
263
                                <ul class="items-list">
264
                                        <li data-status="add-new" class="add-new">
265
                                                <div class="container" data-overlay-id="volume-wizard">
266
                                                        <div class="check">
267
                                                                <span class="snf-checkbox-unchecked"></span>
268
                                                        </div>
269
                                                        <div class="img-wrap">
270
                                                                        <span class="snf-volume-create-full snf-font"></span>
271
                                                        </div>
272
                                                        <h4>New Volume</h4>
273
                                                </div>
274
                                                <div class="tags">
275
                                                </div>
276
                                                <div class= "status">
277
                                                </div>
278
                                        </li>
279
                                        <li data-status="available" class="running">
280
                                                <div class="more">
281
                                                        <div class="clearfix">
282
                                                                <div class="col lt">
283
                                                                        <ul>
284
                                                                                <li><a href="">Attach Machine</a></li>
285
                                                                                <li><a href="">Dettach Machine</a></li>
286
                                                                                <li><a href="">Destroy</a></li>
287
                                                                        </ul>
288
                                                                </div>
289
                                                                <div class="col rt">
290
                                                                        <ul>
291
                                                                                <li>&nbsp;</li>
292
                                                                                <li><a href="">Details</a></li>
293
                                                                        </ul>
294
                                                                </div>
295
                                                        </div>
296
                                                        <div class="name">Volume Name</div>
297
                                                </div>
298
                                                <div class="container">
299
                                                        <div class="check">
300
                                                                <span class="snf-checkbox-unchecked"></span>
301
                                                        </div>
302
                                                        <div class="img-wrap">
303
                                                                <span class="snf-font snf-volume-full"></span>
304
                                                        </div>
305
                                                        <h4>Volume Name</h4>
306
                                                        <div class="tags">
307
                                                        </div>
308
                                                        <div class= "status">
309
                                                                <span class="state">Connected to Machine-i (img? what data?)</span>
310
                                                                <span class="logs"></span>
311
                                                        </div>
312
                                                </div>
313
                                        </li>
314
                                        <li data-status="active" class="off">
315
                                                <div class="more">
316
                                                        <div class="clearfix">
317
                                                                <div class="col lt">
318
                                                                        <ul>
319
                                                                                <li><a href="">Attach Machine</a></li>
320
                                                                                <li><a href="">Dettach Machine</a></li>
321
                                                                                <li><a href="">Destroy</a></li>
322
                                                                        </ul>
323
                                                                </div>
324
                                                                <div class="col rt">
325
                                                                        <ul>
326
                                                                                <li>&nbsp;</li>
327
                                                                                <li><a href="">Details</a></li>
328
                                                                        </ul>
329
                                                                </div>
330
                                                        </div>
331
                                                        <div class="name">Volume Name</div>
332
                                                </div>
333
                                                <div class="container">
334
                                                        <div class="check">
335
                                                                <span class="snf-checkbox-unchecked"></span>
336
                                                        </div>
337
                                                        <div class="img-wrap">
338
                                                                <span class="snf-font snf-volume-full"></span>
339
                                                        </div>
340
                                                        <h4>Volume Name</h4>
341
                                                        <div class="tags">
342
                                                        </div>
343
                                                        <div class= "status">
344
                                                                <span class="state">Not in use -Available</span>
345
                                                                <span class="logs"></span>
346
                                                        </div>
347
                                                </div>
348
                                        </li>
349
                                </ul>
350
                                <div class="lt-bar">
351
                                        <ul>
352
                                                <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>
353
                                                <li class="running pernament"><a href="#" title="" class="active">Destroy</a></li>
354
                                                <li class="running"><a href="#" title="">Detach from Machine</a></li>
355
                                                <!-- in case we want an action always activated
356
                                                <li class="pernament"><a href="" class="active">Action</a></li> -->
357
                                        </ul>
358
                                </div>
359
                                <div class="welcome">It seems you have not yet created a VM! Go ahead!</div>
360
                        </div>
361
                </section>
362
        </div>
363
        
364
        <script src="javascripts/vendor/jquery.js"></script>
365
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
366
        <script src="javascripts/underscore-min.js"></script>
367
        <script src="javascripts/foundation/foundation.js"></script>
368
        <script src="javascripts/foundation/foundation.alerts.js"></script>
369
        <script src="javascripts/foundation/foundation.clearing.js"></script>
370
        <script src="javascripts/foundation/foundation.cookie.js"></script>
371
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
372
        <script src="javascripts/foundation/foundation.forms.js"></script>
373
        <script src="javascripts/foundation/foundation.joyride.js"></script>
374
        <script src="javascripts/foundation/foundation.magellan.js"></script>
375
        <script src="javascripts/foundation/foundation.orbit.js"></script>
376
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
377
        <script src="javascripts/foundation/foundation.reveal.js"></script>
378
        <script src="javascripts/foundation/foundation.section.js"></script>
379
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
380
        <script src="javascripts/foundation/foundation.topbar.js"></script>
381
        <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
382
        <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
383
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
384
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
385
        <!-- dropzone.js used for drag and drop files to upload them --> 
386
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
387
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
388
        <!-- fabrastic.js used for the color picker --> 
389
        <script type="text/javascript" src="javascripts/farbtastic.js"></script>
390
        <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
391
        <script src="javascripts/common.js"></script>
392
        <script type="text/javascript" src="javascripts/wizard.js"></script>
393
        <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
394
        <script>
395
                $(document).foundation();
396
                $(document).ready(function() {})
397
        </script>
398
</body>
399
</html>