Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / pithos.html @ 4b7e9b6e

History | View | Annotate | Download (13 kB)

1

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

    
7
<head>
8
    <meta charset="utf-8" />
9
    <meta name="viewport" content="width=device-width" />
10
    <title>Pithos</title>
11
    <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'>
12
    <link rel="stylesheet" href="stylesheets/normalize.css" />
13
    <link rel="stylesheet" href="stylesheets/app.css" />
14
    <link rel="stylesheet" href="stylesheets/farbtastic.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-outline"></span></a></li>
25
                <li><a href="network_list.html" data-tooltip ="has-tip" title="Networks"><span class="snf-network-outline"></span></a></li>
26
                <li><a href="volumes_list.html" data-tooltip ="has-tip" title="Disks"><span class="snf-volume-outline"></span></a></li>
27
                <li><a href="pithos.html" data-tooltip ="has-tip " title="Storage"><span class="snf-pithos-outline"></span></a></li>
28
                <li><a href="images_list.html" data-tooltip ="has-tip" title="Images"><span class="snf-image-outline"></span></a></li>
29
                <li><a href="snapshots_list.html" data-tooltip ="has-tip" title="Snapshots"><span class="snf-snapshot-outline"></span></a></li>
30
                <li><a href="" data-tooltip ="has-tip" title="More"><span class="snf-plus-outline"></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
    <div class="body-wrapper all-height">
47
    <section class="actions-bar clearfix">
48
            <h2>root</h2>
49
            <div class="rt-actions">
50
                <a href="" class="add-new"><span class="snf-folder-create-outline"></span></a>
51
                <a href="" class="refresh"><span class="snf-refresh-outline"></span></a>
52
            </div>
53
            <div class="filter-menu">
54
                <div><a class="filter" href="">Filter</a></div>
55
                <ul class="options">
56
                    <li><a href="">option 1</a></li>
57
                    <li><a href="">option 2</a></li>
58
                    <li><a href="">option 3</a></li>
59
                    <li><a href="">option 4</a></li>
60
                </ul>
61
            </div>
62
            <div id="hd-search" class="hd-search">
63
                <form>
64
                    <span class="hd-icon-search snf-search"></span>
65
                    <input class="hd-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search">
66
                </form>
67
            </div>
68
        </section>
69
        <section class="main row containers">
70
            <div class="storage entities list-view">
71
                <ul class="items-list">
72
                    <li class="folder">
73
                        <div class="basic-data col">
74
                            <div class="img-wrap">
75
                                <a href="pithos_list.html" title=""><span class="snf-pithos-outline"></span></a>
76
                            </div>
77
                            <h4><a href="pithos_list.html" title="">Pithos</a></h4>
78
                        </div>
79
                        <div class="size-data col">
80
                            <div class="progress-col">
81
                                <div class="progress">
82
                                    <span class="meter" style="width: 30%">30%</span>
83
                                </div>
84
                            </div>
85
                            <span class="size">2 GB of 50 GB used</span>
86
                        </div>
87
                        <h5>mySuperProject.ece.ntua.gr</h5>
88
                        <div class="project col">
89
                            <a class="btn-more">
90
                                <em>reassign</em>
91
                                <span class="snf-arrow-down"></span>
92
                            </a>
93
                            <ul>
94
                                <li><a href="">another.project.okeanos</a></li>
95
                                <li><a href="">another.project.okeanos</a></li>
96
                                <li><a href="">another.project.okeanos</a></li>
97
                            </ul>
98
                        </div>
99
                    </li>
100
                   <li class="folder">
101
                        <div class="basic-data col">
102
                            <div class="img-wrap">
103
                                <a href="pithos_list.html" title=""><span class="snf-image-outline"></span></a>
104
                            </div>
105
                            <h4><a href="pithos_list.html" title="">Images</a></h4>
106
                        </div>
107
                        <div class="size-data col">
108
                            <div class="progress-col">
109
                                <div class="progress">
110
                                    <span class="meter" style="width: 30%">30%</span>
111
                                </div>
112
                            </div>
113
                            <span class="size">2 GB of 50 GB used</span>
114
                        </div>
115
                        <h5>images.gr</h5>
116
                        <div class="project col">
117
                            <a class="btn-more">
118
                                <em>reassign</em>
119
                                <span class="snf-arrow-down"></span>
120
                            </a>
121
                            <ul>
122
                                <li><a href="">another.project.okeanos</a></li>
123
                                <li><a href="">project.okeanos.gr</a></li>
124
                                <li><a href="">test.com</a></li>
125
                            </ul>
126
                        </div>
127
                    </li>
128
                   <li class="folder">
129
                        <div class="basic-data col">
130
                            <div class="img-wrap">
131
                                <a href="pithos_list.html" title=""><span class="snf-snapshot-outline"></span></a>
132
                            </div>
133
                            <h4><a href="pithos_list.html" title="">Snapshots</a></h4>
134
                        </div>
135
                        <div class="size-data col">
136
                            <div class="progress-col">
137
                                <div class="progress">
138
                                    <span class="meter" style="width: 80%">80%</span>
139
                                </div>
140
                            </div>
141
                            <span class="size">40 GB of 50 GB used</span>
142
                        </div>
143
                        <h5>project1.gr oisdfu soidfusioduf sdiofusido </h5>
144
                        <div class="project col">
145
                            <a class="btn-more">
146
                                <em>reassign</em>
147
                                <span class="snf-arrow-down"></span>
148
                            </a>
149
                            <ul>
150
                                <li><a href="">another.project.okeanos</a></li>
151
                                <li><a href="">another.project.okeanos</a></li>
152
                                <li><a href="">another.project.okeanos</a></li>
153
                            </ul>
154
                        </div>
155
                    </li>
156
                </ul>
157
                <div class="communication-error">
158
                    <p>Sorry! Something went terribly wrong!<br>Try again, but if you keep seeing this message please contact us through the feedback form.</p>
159
                    <p class="buttons">
160
                        <a class="btn5" href="">feedback</a>
161
                        <a href="" class="btn5">close</a>
162
                    </p>
163
                </div>
164
            </div>
165
        </section>
166
        <div class="storage-progress">
167
            <div class="loader" style="width: 60%;"></div>
168
            <div class="row">
169
                <div class="wrap">
170
                    <p class="summary">some files uploading</p>
171
                    <div class="details">
172
                        <ul class="items-list">
173
                            <li>
174
                                <div class="img-wrap">
175
                                    <img src="images/icon-txt.png" alt="" />
176
                                </div>
177
                                <h4>file name.txt</h4>
178
                                <div class="size">
179
                                    100KB
180
                                </div>
181
                                <div class="progress-col">
182
                                    <div class="progress">
183
                                        <span class="meter" style="width: 30%">30%</span>
184
                                    </div>
185
                                </div>
186
                                <div class="remove">
187
                                    <a href="">X <em>Remove</em></a>
188
                                </div>
189
                            </li>
190
                            <li>
191
                                <div class="img-wrap">
192
                                    <img src="images/icon-txt.png" alt="" />
193
                                </div>
194
                                <h4>file name.txt</h4>
195
                                <div class="size">
196
                                    100KB
197
                                </div>
198
                                <div class="progress-col">
199
                                    <div class="progress">
200
                                        <span class="meter" style="width: 80%">80%</span>
201
                                    </div>
202
                                </div>
203
                                <div class="remove">
204
                                    <a href="">X <em>Remove</em></a>
205
                                </div>
206
                            </li>
207
                        </ul>
208
                    </div>
209
                </div>
210
            </div>
211
        </div>
212
    </div>
213

    
214
    <script src="javascripts/vendor/jquery.js"></script>
215
    <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
216
    <script src="javascripts/underscore-min.js"></script>
217
    <script src="javascripts/foundation/foundation.js"></script>
218
    <script src="javascripts/foundation/foundation.alerts.js"></script>
219
    
220
    <script src="javascripts/foundation/foundation.clearing.js"></script>
221
    
222
    <script src="javascripts/foundation/foundation.cookie.js"></script>
223
    
224
    <script src="javascripts/foundation/foundation.dropdown.js"></script>
225
    
226
    <script src="javascripts/foundation/foundation.forms.js"></script>
227
    
228
    <script src="javascripts/foundation/foundation.joyride.js"></script>
229
    
230
    <script src="javascripts/foundation/foundation.magellan.js"></script>
231
    
232
    <script src="javascripts/foundation/foundation.orbit.js"></script>
233
    
234
    <script src="javascripts/foundation/foundation.placeholder.js"></script>
235
    
236
    <script src="javascripts/foundation/foundation.reveal.js"></script>
237
    
238
    <script src="javascripts/foundation/foundation.section.js"></script>
239
    
240
    <script src="javascripts/foundation/foundation.tooltips.js"></script>
241
    <script src="javascripts/foundation/foundation.topbar.js"></script>
242
    <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
243
    <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
244
    <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
245
    <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
246
    <!-- dropzone.js used for drag and drop files to upload them --> 
247
    <script type="text/javascript" src="javascripts/dropzone.js"></script>
248
    <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
249
    <!-- fabrastic.js used for the color picker --> 
250
    <script type="text/javascript" src="javascripts/farbtastic.js"></script>
251
    <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
252
    <script src="javascripts/common.js"></script>
253
    
254
    <script type="text/javascript" src="javascripts/wizard.js"></script>
255
    <script type="text/javascript" src="javascripts/dragfiles.js"></script>
256
    <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
257
  <script>
258
    $(document).foundation();
259
  </script>
260
</body>
261
</html>
262