Dateiverwaltung für die WebBox
ulrich
2017-03-21 6bd2c116db33972d971235120d9fa9107f2b4525
commit | author | age
fb4538 1 <!DOCTYPE html>
UH 2 <html>
3   <head>
4     <title>Flexbox Demo</title>
5     <meta charset="UTF-8">
6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7     <link rel="stylesheet" type="text/css" href="/jslib/bootstrap/css/bootstrap.min.css">
8     <link rel="stylesheet" type="text/css" href="/jslib/font-awesome/css/font-awesome.min.css">
1f3919 9     <link rel="stylesheet" type="text/css" href="stile.css">
fb4538 10   </head>
UH 11   <body>
12     <!-- Kopfzeile -->
13     <div class="nord">
14       
15       <div id="menue"> <!-- Menue -->
16         <ul class="nav">
17           <li class="nav-item dropdown">
18             <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
19             <div class="dropdown-menu">
20               <a class="dropdown-item" href="/">WebBox</a>
21               <div class="dropdown-divider"></div>
22               <a class="dropdown-item" href="/wbx/mng">Apps</a>
23               <a class="dropdown-item" href="/um/ui">Benutzer</a>
24             </div>
25           </li>
26           <li class="nav-item dropdown">
27             <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
28             <div class="dropdown-menu">
29               <a id="logout" class="dropdown-item" href="#">Abmelden</a>
30             </div>
31           </li>
32         </ul>
33       </div> <!-- Menue -->
34       
35     </div>
36     <div class="inhalt">
37       <!-- westliche Seitenleiste -->
38       <div class="west hidden-xs-down">
39           <!-- linke Seitenleiste mit Links -->
40           <nav class="nav flex-column">
41             <a class="nav-link active" href="#">Active</a>
42             <a class="nav-link" href="#">Link</a>
43             <a class="nav-link" href="#">Link</a>
44             <a class="nav-link disabled" href="#">Disabled</a>
45           </nav>    
46       </div>
47       <!-- zentraler Inhaltsbereich -->
48       <div class="zentrum">
49         <div class="zentrum-bc">
50           <nav class="breadcrumb">
51             <a class="breadcrumb-item" href="#">Home</a>
52             <a class="breadcrumb-item" href="#">Library</a>
53             <a class="breadcrumb-item" href="#">Data</a>
54             <span class="breadcrumb-item active">Bootstrap</span>
55             <div class="pull-right align-middle">
56               <i class="fa fa-th-large"></i>
57             </div>
58           </nav>            
59         </div>
60         <div class="zentrum-liste">
61           <table class="table table-hover table-sm table-responsive tableBodyScroll">
62             <thead>
63               <tr>
64                 <th colspan="2">Name</th>
65                 <th>Gr&ouml;&szlig;e</th>
66                 <th>Art</th>
67                 <th>ge&auml;ndert</th>
68               </tr>
69             </thead>
70             <tbody>
71               <tr>
72                 <td><i class="fa fa-folder-o"></i></td>
73                 <td>Ordner 1</td>
74                 <td>4 Objekte</td>
75                 <td>Ordner</td>
76                 <td>14.02.2017</td>
77               </tr>
78               <tr>
79                 <td><i class="fa fa-file-o"></i></td>
80                 <td>Datei 1</td>
81                 <td>6 kB</td>
82                 <td>Text</td>
83                 <td>12.02.2017</td>
84               </tr>
85               <tr>
86                 <td><i class="fa fa-file-o"></i></td>
87                 <td>Datei 2</td>
88                 <td>20 MB</td>
89                 <td>Text</td>
90                 <td>16.10.2016</td>
91               </tr>
92
93               <tr>
94                 <td><i class="fa fa-file-o"></i></td>
95                 <td>Datei 2</td>
96                 <td>20 MB</td>
97                 <td>Text</td>
98                 <td>16.10.2016</td>
99               </tr>
100               <tr>
101                 <td><i class="fa fa-file-o"></i></td>
102                 <td>Datei 2</td>
103                 <td>20 MB</td>
104                 <td>Text</td>
105                 <td>16.10.2016</td>
106               </tr>
107               <tr>
108                 <td><i class="fa fa-file-o"></i></td>
109                 <td>Datei 2</td>
110                 <td>20 MB</td>
111                 <td>Text</td>
112                 <td>16.10.2016</td>
113               </tr>
114               <tr>
115                 <td><i class="fa fa-file-o"></i></td>
116                 <td>Datei 2</td>
117                 <td>20 MB</td>
118                 <td>Text</td>
119                 <td>16.10.2016</td>
120               </tr>
121               <tr>
122                 <td><i class="fa fa-file-o"></i></td>
123                 <td>Datei 2</td>
124                 <td>20 MB</td>
125                 <td>Text</td>
126                 <td>16.10.2016</td>
127               </tr>
128               <tr>
129                 <td><i class="fa fa-file-o"></i></td>
130                 <td>Datei 2</td>
131                 <td>20 MB</td>
132                 <td>Text</td>
133                 <td>16.10.2016</td>
134               </tr>
135               <tr>
136                 <td><i class="fa fa-file-o"></i></td>
137                 <td>Datei 2</td>
138                 <td>20 MB</td>
139                 <td>Text</td>
140                 <td>16.10.2016</td>
141               </tr>
142               <tr>
143                 <td><i class="fa fa-file-o"></i></td>
144                 <td>Datei 2</td>
145                 <td>20 MB</td>
146                 <td>Text</td>
147                 <td>16.10.2016</td>
148               </tr>
149               <tr>
150                 <td><i class="fa fa-file-o"></i></td>
151                 <td>Datei 2</td>
152                 <td>20 MB</td>
153                 <td>Text</td>
154                 <td>16.10.2016</td>
155               </tr>
156               <tr>
157                 <td><i class="fa fa-file-o"></i></td>
158                 <td>Datei 2</td>
159                 <td>20 MB</td>
160                 <td>Text</td>
161                 <td>16.10.2016</td>
162               </tr>
163               <tr>
164                 <td><i class="fa fa-file-o"></i></td>
165                 <td>Datei 2</td>
166                 <td>20 MB</td>
167                 <td>Text</td>
168                 <td>16.10.2016</td>
169               </tr>
170             </tbody>
171           </table>
172         </div>
173       </div>
174       <!-- oestliche Seitenleiste -->
175       <!--
176       <div class="ost">
177         &ouml;stliche Seitenleiste
178       </div>
179       -->
180     </div>
181     <!-- Fusszeile -->
182     <!--
183     <div class="sued">
184       Fu&szlig;zeile
185     </div>
186     -->
187     <!-- Skripte -->
188     <script src="/jslib/jquery/jquery.min.js"></script>
189     <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
190     <script src="/jslib/mustache/mustache.min.js"></script>
191     <script src="ui.js"></script>
192     <script type="text/javascript" charset="utf-8">
193       //var ui;
194       $(document).ready(function() {
195         // init
196       });
197     </script>
198   </body>
199 </html>