Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (12.7 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><a href="pithos_containers.html">root</a> <a href="">pithos</a> my folder</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 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/">
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="" class="has-tip" data-tooltip ="Delete"><span class="snf-minus-sign"></span></a>
97
                            <a href="" class="has-tip"  data-tooltip ="Copy"><span class="snf-edit"></span></a>
98
                        </div>
99
                    </li>
100
                    <li data-status="file" class="file">
101
                        <div class="check">
102
                            <span class="snf-checkbox-unchecked"></span>
103
                        </div>
104
                        <div class="img-wrap">
105
                            <img src="images/icon-pdf.png" alt="" />
106
                        </div>
107
                        <h4>supercool.mp4</h4>
108
                        <div class="size">
109
                            100KB
110
                        </div>
111
                        <div class="info">Last updated: 23/12/2013 11:56pm</div>
112
                        <div class="actions-col">
113
                            <a href="" class="delete has-tip" data-tooltip ="Delete"><span class="snf-minus-sign"></span></a>
114
                            <a href="" class="copy has-tip"  data-tooltip ="Copy"><span class="snf-edit"></span></a>
115
                            <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" class="show has-tip image"  data-tooltip ="Copy" data-title="my Image"><span class="snf-eye"></span></a>
116
                        </div>
117
                    </li>
118
                </ul>
119
                <div class="communication-error">
120
                    <p>Sorry! Something went terribly wrong!<br>Try again, but if you keep seeing this message please contact us through the feedback form.</p>
121
                    <p class="buttons">
122
                        <a class="btn5" href="">feedback</a>
123
                        <a href="" class="btn5">close</a>
124
                    </p>
125
                </div>
126
                <div class="lt-bar">
127
                    <ul class="lt-actions">
128
                        <li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>
129
                        <li class="files"><a href="#" title=""><span class="snf-link-outline"></span> Share</a></li>
130
                        <li class="files"><a href="#" title=""><span class="snf-download-full"></span> Download</a></li>
131
                        <li class="files"><a href="#"><span>X</span> Delete</a></li>
132
                        <li class="all"><a href="#"><span class="snf-edit"></span> Rename</a></li>
133
                        <li class="all"><a href="#"><span class="snf-folder-move-outline"></span> Move</a></li>
134
                        <li class="all"><a href="#"><span class="snf-copy-outline"></span> Copy</a></li>
135
                        <li class="folders"><a href="#"><span>...</span> Version</a></li>
136
                    </ul>
137
                    <ul class="more">
138
                        <li><a href="#"><span class="snf-eye"></span> Shared by me</a></li>
139
                        <li><a href="#"><span class="snf-eye"></span> Shared to me</a></li>
140
                    </ul>
141
                </div>
142
            </div>
143
        </section>
144
        <div class="storage-progress">
145
            <div class="loader" style="width: 60%;"></div>
146
            <div class="row">
147
                <div class="wrap">
148
                    <p class="summary">some files uploading</p>
149
                    <div class="details">
150
                        <ul class="items-list">
151
                            <li>
152
                                <div class="img-wrap">
153
                                    <img src="images/icon-txt.png" alt="" />
154
                                </div>
155
                                <h4>file name.txt</h4>
156
                                <div class="size">
157
                                    100KB
158
                                </div>
159
                                <div class="progress-col">
160
                                    <div class="progress">
161
                                        <span class="meter" style="width: 30%">30%</span>
162
                                    </div>
163
                                </div>
164
                                <div class="remove">
165
                                    <a href="">X <em>Remove</em></a>
166
                                </div>
167
                            </li>
168
                            <li>
169
                                <div class="img-wrap">
170
                                    <img src="images/icon-txt.png" alt="" />
171
                                </div>
172
                                <h4>file name.txt</h4>
173
                                <div class="size">
174
                                    100KB
175
                                </div>
176
                                <div class="progress-col">
177
                                    <div class="progress">
178
                                        <span class="meter" style="width: 80%">80%</span>
179
                                    </div>
180
                                </div>
181
                                <div class="remove">
182
                                    <a href="">X <em>Remove</em></a>
183
                                </div>
184
                            </li>
185
                        </ul>
186
                    </div>
187
                </div>
188
            </div>
189
        </div>
190
    </div>
191

    
192
    <script src="javascripts/vendor/jquery.js"></script>
193
    <script src="javascripts/jquery-ui-1.10.3.custom.min.js"></script>
194
    <script src="javascripts/underscore-min.js"></script>
195
    <script src="javascripts/foundation/foundation.js"></script>
196
    <script src="javascripts/foundation/foundation.alerts.js"></script>
197
    
198
    <script src="javascripts/foundation/foundation.clearing.js"></script>
199
    
200
    <script src="javascripts/foundation/foundation.cookie.js"></script>
201
    
202
    <script src="javascripts/foundation/foundation.dropdown.js"></script>
203
    
204
    <script src="javascripts/foundation/foundation.forms.js"></script>
205
    
206
    <script src="javascripts/foundation/foundation.joyride.js"></script>
207
    
208
    <script src="javascripts/foundation/foundation.magellan.js"></script>
209
    
210
    <script src="javascripts/foundation/foundation.orbit.js"></script>
211
    
212
    <script src="javascripts/foundation/foundation.placeholder.js"></script>
213
    
214
    <script src="javascripts/foundation/foundation.reveal.js"></script>
215
    
216
    <script src="javascripts/foundation/foundation.section.js"></script>
217
    
218
    <script src="javascripts/foundation/foundation.tooltips.js"></script>
219
    <script src="javascripts/foundation/foundation.topbar.js"></script>
220
    <script type="text/javascript" src="javascripts/jquery.scrollTo.js"></script>
221
    <script type="text/javascript" src="javascripts/jquery.easing.1.3.js"></script>
222
    <script type="text/javascript" src="javascripts/jquery.mousewheel.js"></script>
223
    <script type="text/javascript" src="javascripts/jquery.jscrollpane.js"></script>
224
    <!-- dropzone.js used for drag and drop files to upload them --> 
225
    <script type="text/javascript" src="javascripts/dropzone.js"></script>
226
    <script type="text/javascript" src="javascripts/jquery.magnific-popup.js"></script>
227
    <!-- fabrastic.js used for the color picker --> 
228
    <script type="text/javascript" src="javascripts/farbtastic.js"></script>
229
    <script type="text/javascript" src="javascripts/jquery.scrollintoview.js"></script>
230
    <script src="javascripts/common.js"></script>
231
    
232
    <script type="text/javascript" src="javascripts/wizard.js"></script>
233
    <script type="text/javascript" src="javascripts/dragfiles.js"></script>
234
    <script type="text/javascript" src="javascripts/sshkeys-wizard.js"></script>
235
  <script>
236
    $(document).foundation();
237
    /*$(document).ready(function() {
238
         $("#drop").dropzone({ url: "/file/post", clickable: false});
239

240
    })*/
241
  </script>
242
</body>
243
</html>
244