diff options
Diffstat (limited to 'www/index.html')
| -rw-r--r-- | www/index.html | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/www/index.html b/www/index.html new file mode 100644 index 0000000..37cda88 --- /dev/null +++ b/www/index.html @@ -0,0 +1,146 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- Latest compiled and minified CSS --> + <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> + <!-- Optional: Include the jQuery library --> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <!-- Optional: Incorporate the Bootstrap JavaScript plugins --> + <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> + + + <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> + + <base url="/"> + + </head> + <body> + <style> + .navbar-vfs{ + background-color: #3083D6; + } + #vfs-logo{ + height: 70px; + width: 70px; + margin: 5px; + padding: 0; + background-image: url('img/logo.png'); + background-repeat: no-repeat; + background-size: 66px 66px; + background-position: center center; + } + + #vfs-logo:hover{ + background:#2669AB; + border-radius: 10px; + box-shadow: 3px -3px 5px black; + background-image: url('img/logo.png'); + background-repeat: no-repeat; + background-size: 66px 66px; + background-position: center center; + } + + .navbar-brand{ + padding: 0; + } + .navbar-brand, + .navbar-nav li a { + line-height: 80px; + height: 80px; + padding-top: 0; + } + + + tr.file{ + height: 30px; + width: 100%; + } + + tr.file:hover{ + background: #CCCCCC; + cursor: pointer; + } + table.file-browser{ + width: 100%; + } + + td.fileicon{ + font-size: 25px; + width: 30px; + } + + td.filename{ + text-align: right; + } + </style> + <nav class="navbar navbar-vfs navbar-static-top"> + <div class="navbar-header"> + <div class="navbar-brand" href="#"> + <div id="vfs-logo"></div> + </div> + </div> + </nav> + <!--File Browser--> + <div class="container-fluid" ng-app="fileBrowser" ng-init="loggedin = true" ng-controller="fileListController" ng-show="loggedin" > + <table class="file-browser"> + <tr ng-click="up()" class="file" > + <td colspan="0"><b>..</b></td> + </tr> + <tr class="file" ng-repeat="ob in files" ng-click="open(ob)"> + <td class="fileicon"><spans class="file-browser fileicon" ng-class="icon(ob)"></span></td><td class="file-browser filename"> {{ob.folder.name || ob.file.name}}</td><td>{{ob.file.size? ob.file.size +"kB" : ""}}</td> + </tr> + </table> + </div> + + <!--Login--> +<!-- <div class="container-fluid col-sm-4 col-sm-offset-4" ng-app="login" ng-hide="loggedin"> + <form action="return false"> + <input type="text" placeholder="username" class="form-control"> + <input type="password" placeholder="password" class="form-control"> + <button class="form-control">Login</button> + </form> + </div>--> + + <script> + fileBrowser = angular.module("fileBrowser", []); + + + fileBrowser.config(function($locationProvider){ + $locationProvider.html5Mode(true); + }); + + + fileBrowser.controller("fileListController", function ($scope, $http, $location){ + $http.get("json.php").success(function(response){$scope.files = response;}); + + $scope.icon = function(ob){ + if(ob.folder){ + return "glyphicon glyphicon-folder-close"; + }else{ + switch(ob.file.mime){ + default: return "glyphicon glyphicon-file"; + } + } + }; + + $scope.up = function(){ + path = $location.path(); + endsWithSlash = path.lastIndexOf('/') == path.length-1; + if(endsWithSlash) + path = path.substr(0,path.length-1); + $location.path(path.substring(0,path.lastIndexOf('/'))); + //TODO reload filelist + } + + $scope.open = function(ob){ + endsWithSlash = $location.path().lastIndexOf('/') == $location.path().length-1; + name = ob.file ? ob.file.name : ob.folder.name; + slash = endsWithSlash ? "" : "/"; + $location.path($location.path()+slash+name+"/"); + } + }); + </script> + </body> +</html>
\ No newline at end of file |