Statistics
| Branch: | Tag: | Revision:

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

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

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