Statistics
| Branch: | Tag: | Revision:

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

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.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="IPs"><span class="snf-nic-outline"></span></a></li>
33
                <li><a href="" data-tooltip ="has-tip" title="SSH keys"><span class="snf-key-outline"></span></a></li>
34
                        </ul>
35
                </nav>
36
                <div class="login">
37
                        <div class="wrap">
38
                                <a href="">user1@synnefo.org</a>
39
                                <ul>
40
                                        <li><a href="">dashboard</a></li>
41
                                        <li><a href="">sign out</a></li>
42
                                </ul>
43
                        </div>
44
                </div>
45
                <div class="logo">
46
                        <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
47
                </div>
48
        </header>
49
        
50
        <div class="body-wrapper">
51

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