Dateiverwaltung für die WebBox
ulrich
2017-03-14 d920b78320312112835e541012b17c54d0b843b3
commit | author | age
1f3919 1 <!DOCTYPE html>
UH 2 <html>
3   <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6     <title>Prototyp Dateiverwaltung</title>
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">
9     <link rel="stylesheet" type="text/css" href="stile.css">
10     <script id="tpl-list" type="x-tmpl-mustache">
11       {{#List}}
12       {{#List}}
13         <option value="{{ String }}">{{ String }}</option>'
14       {{/List}}
15       {{/List}}
16     </script>
17   </head>
18   <body>
19     
20     <!-- Menue -->
21     <div id="menue">
22       <ul class="nav">
23         <li class="nav-item dropdown">
24           <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Verwaltung</a>
25           <div class="dropdown-menu">
26             <a class="dropdown-item" href="/">WebBox</a>
27             <div class="dropdown-divider"></div>
28             <a class="dropdown-item" href="/wbx/mng">Apps</a>
29             <a class="dropdown-item" href="/um/ui">Benutzer</a>
30           </div>
31         </li>
32         <li class="nav-item dropdown">
33           <a id="userMenu" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
34           <div class="dropdown-menu">
35             <a id="logout" class="dropdown-item" href="#">Abmelden</a>
36           </div>
37         </li>
38       </ul>
39     </div>
40     
41     
42     <!-- Inhalt -->
43     <div class="container-fluid" id="inhalt">
44       
45       <div class="row">
46         <div class="col-sm-2 col-md-2 col-lg-2 hidden-xs-down">
47           <!-- linke Seitenleiste mit Links -->
48           <nav class="nav flex-column">
49             <a class="nav-link active" href="#">Active</a>
50             <a class="nav-link" href="#">Link</a>
51             <a class="nav-link" href="#">Link</a>
52             <a class="nav-link disabled" href="#">Disabled</a>
53           </nav>    
54         </div>
55         <div class="col-sm-10 col-md-10 col-lg-10">
56
57           <nav class="breadcrumb">
58             <a class="breadcrumb-item" href="#">Home</a>
59             <a class="breadcrumb-item" href="#">Library</a>
60             <a class="breadcrumb-item" href="#">Data</a>
61             <span class="breadcrumb-item active">Bootstrap</span>
62             <div class="pull-right align-middle">
63               <i class="fa fa-th-list"></i>
64             </div>
65           </nav>            
66           
67           <div class="row">
68             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
69               <figure class="figure text-center text-warning">
70                 <i class="fa fa-folder-o fa-3x"></i>
71                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
72               </figure>              
73             </div>
74             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
75               <figure class="figure text-center bg-warning text-primary">
76                 <i class="fa fa-folder-o fa-3x"></i>
77                 <figcaption class="figure-caption text-primary">A caption for the above image.</figcaption>
78               </figure>              
79             </div>
80             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
81               <figure class="figure text-center text-warning">
82                 <i class="fa fa-folder-o fa-3x"></i>
83                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
84               </figure>              
85             </div>
86             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
87               <figure class="figure text-center text-warning">
88                 <i class="fa fa-folder-o fa-3x"></i>
89                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
90               </figure>              
91             </div>
92             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
93               <figure class="figure text-center text-warning">
94                 <i class="fa fa-folder-o fa-3x"></i>
95                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
96               </figure>              
97             </div>
98             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
99               <figure class="figure text-center text-warning">
100                 <i class="fa fa-folder-o fa-3x"></i>
101                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
102               </figure>              
103             </div>
104             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
105               <figure class="figure text-center text-warning">
106                 <i class="fa fa-folder-o fa-3x"></i>
107                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
108               </figure>              
109             </div>
110             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
111               <figure class="figure text-center text-warning">
112                 <i class="fa fa-folder-o fa-3x"></i>
113                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
114               </figure>              
115             </div>
116             <div class="col-sm-4 col-md-3 col-lg-2 col-xl-2">
117               <figure class="figure text-center text-warning">
118                 <i class="fa fa-folder-o fa-3x"></i>
119                 <figcaption class="figure-caption">A caption for the above image.</figcaption>
120               </figure>              
121             </div>
122           </div>
123           
124         </div>
125       </div>
126     </div>
127     
128     <!-- Skripte -->
129     <script src="/jslib/jquery/jquery.min.js"></script>
130     <script src="/jslib/bootstrap/js/bootstrap.min.js"></script>
131     <script src="/jslib/mustache/mustache.min.js"></script>
132     <script src="ui.js"></script>
133     <script type="text/javascript" charset="utf-8">
134       //var ui;
135       $(document).ready(function() {
136         fm_init();
137       });
138     </script>
139     
140     <!-- Ende Body -->
141   </body>
142 </html>