Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / images_list.html @ fc6bf782

History | View | Annotate | Download (9.3 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>Images 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/synnefo-logo.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="image-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>To be added...</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
                                                </div>
83
                                        </div>
84
                                </div>
85
<!-- new tba start -->
86
                                <div class="bottom">
87
                                        <div class="row">
88
                                                <a href="" class="nav prev"><span>CANCEL</span></a>
89
                                                <a href="" class="nav next" data-next="el1"><span>CREATE</span></a>
90
                                                
91
                                        </div>
92
                                </div>
93
<!-- new tba end -->
94

    
95
                        </div>
96

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

    
230
  <script src="javascripts/vendor/jquery.js"></script>
231
        <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
232
        <script src="javascripts/foundation/foundation.js"></script>
233
        <script src="javascripts/foundation/foundation.alerts.js"></script>
234
        
235
        <script src="javascripts/foundation/foundation.clearing.js"></script>
236
        
237
        <script src="javascripts/foundation/foundation.cookie.js"></script>
238
        
239
        <script src="javascripts/foundation/foundation.dropdown.js"></script>
240
        
241
        <script src="javascripts/foundation/foundation.forms.js"></script>
242
        
243
        <script src="javascripts/foundation/foundation.joyride.js"></script>
244
        
245
        <script src="javascripts/foundation/foundation.magellan.js"></script>
246
        
247
        <script src="javascripts/foundation/foundation.orbit.js"></script>
248
        
249
        <script src="javascripts/foundation/foundation.placeholder.js"></script>
250
        
251
        <script src="javascripts/foundation/foundation.reveal.js"></script>
252
        
253
        <script src="javascripts/foundation/foundation.section.js"></script>
254
        
255
        <script src="javascripts/foundation/foundation.tooltips.js"></script>
256
        
257
        <script src="javascripts/foundation/foundation.topbar.js"></script>
258
        <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
259
        <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
260
        <!-- dropzone.js used for drag and drop files to upload them --> 
261
        <script type="text/javascript" src="javascripts/dropzone.js"></script>
262
        <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
263
        
264

    
265
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/modernizr.custom.js"></script>
266
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/classie.js"></script>
267
        <script type="text/javascript" src="javascripts/ExpandingSearchBar/uisearch.js"></script>
268
        <script src="javascripts/common.js"></script>
269
        <script src="javascripts/wizard.js"></script>
270
        
271

    
272
  <script>
273
    $(document).foundation();
274
  </script>
275
</body>
276
</html>