Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / pithos_list.html @ 4f4e4b12

History | View | Annotate | Download (15.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="IPs"><span class="snf-nic-outline"></span></a></li>
31
                <li><a href="" data-tooltip ="has-tip" title="SSH keys"><span class="snf-key-outline"></span></a></li>
32
            </ul>
33
        </nav>
34
        <div class="login">
35
            <div class="wrap">
36
                <a href="">user1@synnefo.org</a>
37
                <ul>
38
                    <li><a href="">dashboard</a></li>
39
                    <li><a href="">sign out</a></li>
40
                </ul>
41
            </div>
42
        </div>
43
        <div class="logo">
44
            <a href="index.html"><img src="images/synnefo-logo.png" alt="software logo"></a>
45
        </div>
46
    </header>
47
    <div class="body-wrapper all-height">
48
        <section class="actions-bar clearfix">
49
            <h2><a href="pithos.html">root</a> <a href="">pithos</a> my folder</h2>
50
             <div class="rt-actions">
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 all-height">
71
            <div class="storage entities list-view">
72
                <ul class="items-list" id="drop">
73
                    <li class="add-new">
74
                        <div class="check">
75
                        </div>
76
                        <div class="img-wrap">
77
                            <span class="rect-plus">+</span>
78
                        </div>
79
                        <h4>Upload file</h4>
80
                        <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
81
                            <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
82
                            <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
83
                        </form>
84
                    </li>
85
                    <li data-status="folder" class="folder" data-path="/folder1/temp/"  draggable="true">
86
                        <div class="check">
87
                            <span class="snf-checkbox-unchecked"></span>
88
                        </div>
89
                        <div class="img-wrap"></div>
90
                        <h4>Folder 1</h4>
91
                        <div class="size">
92
                            100KB
93
                        </div>
94
                        <div class="info">Last updated: 23/12/2013 11:56pm</div>
95
                        <div class="actions-col">
96
                            <a href="#" title="share" data-tooltip ="has-tip"><span class="snf-link-outline"></span></a>
97
                            <a href="#" title="download" data-tooltip ="has-tip"><span class="snf-download-full"></span></a>
98
                            <a href="#" title="delete" data-tooltip ="has-tip"><span>x</span></a>
99
                            <a href="#" title="edit" data-tooltip ="has-tip"><span class="snf-edit"></span></a>
100
                        </div>
101
                    </li>
102
                    <li data-status="file" class="file"  draggable="true">
103
                        <div class="check">
104
                            <span class="snf-checkbox-unchecked"></span>
105
                        </div>
106
                        <div class="img-wrap">
107
                            <span class="ai"></span>
108
                        </div>
109
                        <h4>supercool.ai</h4>
110
                        <div class="size">
111
                            100KB
112
                        </div>
113
                        <div class="info">Last updated: 23/12/2013 11:56pm</div>
114
                        <div class="actions-col">
115
                            <a href="#" title="share" data-tooltip ="has-tip"><span class="snf-link-outline"></span></a>
116
                            <a href="#" title="download" data-tooltip ="has-tip"><span class="snf-download-full"></span></a>
117
                            <a href="#" title="delete" data-tooltip ="has-tip"><span>x</span></a>
118
                            <a href="#" title="edit" data-tooltip ="has-tip"><span class="snf-edit"></span></a>
119
                        </div>
120
                    </li>
121
                    <li data-status="file" class="file"  draggable="true">
122
                        <div class="check">
123
                            <span class="snf-checkbox-unchecked"></span>
124
                        </div>
125
                        <div class="img-wrap">
126
                            <span class="txt"></span>
127
                        </div>
128
                        <h4>words.txt</h4>
129
                        <div class="size">
130
                            100KB
131
                        </div>
132
                        <div class="info">Last updated: 23/12/2013 11:56pm</div>
133
                        <div class="actions-col">
134
                            <a href="#" title="share" data-tooltip ="has-tip"><span class="snf-link-outline"></span></a>
135
                            <a href="#" title="download" data-tooltip ="has-tip"><span class="snf-download-full"></span></a>
136
                            <a href="#" title="delete" data-tooltip ="has-tip"><span>x</span></a>
137
                            <a href="#" title="edit" data-tooltip ="has-tip"><span class="snf-edit"></span></a>
138
                        </div>
139
                    </li>
140
                    <li data-status="file" class="file"  draggable="true">
141
                        <div class="check">
142
                            <span class="snf-checkbox-unchecked"></span>
143
                        </div>
144
                        <div class="img-wrap">
145
                            <span class="pdf"></span>
146
                        </div>
147
                        <h4>presentation.pdf</h4>
148
                        <div class="size">
149
                            100KB
150
                        </div>
151
                        <div class="info">Last updated: 23/12/2013 11:56pm</div>
152
                        <div class="actions-col">
153
                            <a href="#" title="share" data-tooltip ="has-tip"><span class="snf-link-outline"></span></a>
154
                            <a href="#" title="download" data-tooltip ="has-tip"><span class="snf-download-full"></span></a>
155
                            <a href="#" title="delete" data-tooltip ="has-tip"><span>x</span></a>
156
                            <a href="#" title="edit" data-tooltip ="has-tip"><span class="snf-edit"></span></a>
157
                        </div>
158
                    </li>
159
                </ul>
160
                <div class="communication-error">
161
                    <p>Sorry! Something went terribly wrong!<br>Try again, but if you keep seeing this message please contact us through the feedback form.</p>
162
                    <p class="buttons">
163
                        <a class="btn5" href="">feedback</a>
164
                        <a href="" class="btn5">close</a>
165
                    </p>
166
                </div>
167
                <div class="lt-bar">
168
                    <ul class="lt-actions">
169
                        <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>Un</em>Select all</li>
170
                        <li class="files"><a href="#" title=""><span class="snf-link-outline"></span> Share</a></li>
171
                        <li class="files"><a href="#" title=""><span class="snf-download-full"></span> Download</a></li>
172
                        <li class="files"><a href="#"><span>x</span> Delete</a></li>
173
                        <li class="all"><a href="#"><span class="snf-edit"></span> Rename</a></li>
174
                        <li class="all"><a href="#"><span class="snf-folder-move-outline"></span> Move</a></li>
175
                        <li class="all"><a href="#"><span class="snf-copy-outline"></span> Copy</a></li>
176
                        <li class="folders"><a href="#"><span>...</span> Version</a></li>
177
                    </ul>
178
                    <ul class="more">
179
                        <li><a href="#"><span class="snf-shared-by-me-outline"></span> Shared by me</a></li>
180
                        <li><a href="#"><span class="snf-shared-to-me-outline"></span> Shared to me</a></li>
181
                    </ul>
182
                </div>
183
            </div>
184
        </section>
185
        <div class="storage-progress">
186
            <div class="loader" style="width: 60%;"></div>
187
            <div class="row">
188
                <div class="wrap">
189
                    <p class="summary">some files uploading</p>
190
                    <div class="details">
191
                        <ul class="items-list">
192
                            <li>
193
                                <div class="img-wrap">
194
                                    <img src="images/icon-txt.png" alt="" />
195
                                </div>
196
                                <h4>file name.txt</h4>
197
                                <div class="size">
198
                                    100KB
199
                                </div>
200
                                <div class="progress-col">
201
                                    <div class="progress">
202
                                        <span class="meter" style="width: 30%">30%</span>
203
                                    </div>
204
                                </div>
205
                                <div class="remove">
206
                                    <a href="">x</a>
207
                                </div>
208
                            </li>
209
                            <li>
210
                                <div class="img-wrap">
211
                                    <img src="images/icon-txt.png" alt="" />
212
                                </div>
213
                                <h4>file name.txt</h4>
214
                                <div class="size">
215
                                    100KB
216
                                </div>
217
                                <div class="progress-col">
218
                                    <div class="progress">
219
                                        <span class="meter" style="width: 80%">80%</span>
220
                                    </div>
221
                                </div>
222
                                <div class="remove">
223
                                    <a href="">x</a>
224
                                </div>
225
                            </li>
226
                        </ul>
227
                    </div>
228
                </div>
229
            </div>
230
        </div>
231
    </div>
232

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