Refactor build process and dependency management

.bowerrc

@@ -1,3 +0,0 @@
-{
-	"directory": "public/libs"
-}

bower.json

@@ -1,13 +0,0 @@
-{
-  "name": "shimapan",
-  "version": "1.0.0",
-  "dependencies": {
-    "bootstrap": "latest",
-    "font-awesome": "latest",
-    "animate.css": "latest",
-    "angular": "latest",
-    "angular-ui-router": "latest",
-    "ng-file-upload": "latest",
-    "ngclipboard": "^1.1.1"
-  }
-}

gulpfile.js

@@ -1,29 +1,121 @@
-var gulp   = require('gulp');
+var gulp = require('gulp');
 var concat = require('gulp-concat');
 var rename = require('gulp-rename');
 var uglify = require('gulp-uglify');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var evstream = require('event-stream');
+var cleanCSS = require('gulp-clean-css');
+var nodemon = require('gulp-nodemon');
+var path = require('path');
 
-gulp.task('js', function() {
-    gulp.start('shimapan');
-    gulp.start('shimapan-panel');
+gulp.task('start', function () {
+    nodemon({
+        script: 'server.js',
+        ext: 'js html css',
+        env: {'NODE_ENV': 'dev'},
+        tasks: function (changedFiles) {
+            var tasks = [];
+            changedFiles.forEach(function (file) {
+                if (path.extname(file) === '.js' && !~tasks.indexOf('minjs'))
+                    tasks.push('minjs');
+                if (path.extname(file) === '.css' && !~tasks.indexOf('mincss'))
+                    tasks.push('mincss');
+            });
+            return tasks;
+        }
+    }).on('restart?', function () {
+        gulp.start('default');
+    });
 });
 
-gulp.task('shimapan', function() {
-	return gulp.src([
-	    'public/js/services/*.js',
-        'public/js/shimapan/**/*.js'
-    ])
-		.pipe(concat('shimapan.min.js'))
-		.pipe(uglify())
-        .pipe(gulp.dest('public/libs/app'));
+gulp.task('default', function () {
+    gulp.start('minjs');
+    gulp.start('mincss');
 });
 
-gulp.task('shimapan-panel', function() {
-    return gulp.src([
-        'public/js/services/*.js',
-        'public/js/shimapan-panel/**/*.js'
-    ])
-        .pipe(concat('shimapan-panel.min.js'))
-        .pipe(uglify())
-        .pipe(gulp.dest('public/libs/app'));
+gulp.task('mincss', function () {
+    var files = [
+        {
+            src: 'public/css/form.css',
+            name: 'form.min.css'
+        },
+        {
+            src: 'public/css/home.css',
+            name: 'home.min.css'
+        },
+        {
+            src: 'public/css/panel.css',
+            name: 'panel.min.css'
+        },
+        {
+            src: 'public/css/index.css',
+            name: 'index.min.css'
+        }
+    ];
+
+    var tasks = files.map(function (entry) {
+        return gulp.src(entry.src)
+            .pipe(cleanCSS())
+            .pipe(rename(entry.name))
+            .pipe(gulp.dest('public/css'));
+    });
+
+    return evstream.merge.apply(null, tasks);
+})
+
+gulp.task('minjs', function () {
+    gulp.start('concatjs');
+    gulp.start('browserify');
+});
+
+gulp.task('concatjs', function () {
+    var files = [
+        {
+            src: [
+                'public/js/services/*.js',
+                'public/js/shimapan-panel/**/*.js'
+            ],
+            name: 'panel.min.js'
+        },
+        {
+            src: [
+                'public/js/services/*.js',
+                'public/js/shimapan/**/*.js'
+            ],
+            name: 'shimapan.min.js'
+        }
+    ];
+
+    var tasks = files.map(function (entry) {
+        return gulp.src(entry.src)
+            .pipe(concat(entry.name))
+            .pipe(uglify())
+            .pipe(gulp.dest('public/libs/app'));
+    });
+
+    return evstream.merge.apply(null, tasks);
+})
+
+gulp.task('browserify', ['concatjs'], function () {
+    var files = [
+        {
+            src: 'public/libs/app/shimapan.min.js',
+            name: 'shimapan.bundle.js'
+        },
+        {
+            src: 'public/libs/app/panel.min.js',
+            name: 'panel.bundle.js'
+        }
+    ];
+
+    var tasks = files.map(function (entry) {
+        return browserify({entries: [entry.src]})
+            .bundle()
+            .pipe(source(entry.src))
+            .pipe(rename(entry.name))
+            .pipe(gulp.dest('public/libs/app'));
+    });
+
+    return evstream.merge.apply(null, tasks);
 });

package.json

@@ -2,6 +2,7 @@
   "name": "shimapan",
   "version": "1.0.0",
   "dependencies": {
+    "angular": "^1.6.6",
     "angular-messages": "^1.6.6",
     "angular-ui-router": "^0.4.3",
     "async": "^2.5.0",
@@ -9,36 +10,46 @@
     "config": "^1.26.2",
     "connect-mongo": "^2.0.0",
     "cookie-parser": "^1.4.3",
+    "event-stream": "^3.3.4",
     "express": "^4.16.2",
     "express-sanitizer": "^1.0.2",
     "express-session": "^1.15.6",
+    "gulp-nodemon": "^2.2.1",
     "helmet": "^3.9.0",
     "method-override": "latest",
     "mongoose": "^4.12.1",
     "morgan": "^1.9.0",
     "multer": "^1.3.0",
     "ng-file-upload": "^12.2.13",
+    "ngclipboard": "^1.1.2",
     "passport": "^0.4.0",
     "passport-local": "^1.0.0",
     "passport-local-mongoose": "^4.2.1",
-    "striptags": "^3.1.0"
+    "vinyl-source-stream": "^1.1.0"
   },
   "description": "A simple file sharing website.",
   "main": "index.js",
   "devDependencies": {
+    "browserify": "^14.5.0",
     "chai": "^4.1.2",
     "chai-http": "^3.0.0",
-    "gulp": "latest",
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^3.9.0",
     "gulp-concat": "^2.6.1",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^3.0.0",
     "mocha": "^4.0.1",
-    "nyc": "^11.2.1"
+    "nodemon": "^1.12.1",
+    "npx": "^9.7.1"
   },
   "author": "Jack Foltz",
   "license": "WTFPL",
   "scripts": {
-    "test": "mocha"
+    "test": "npx mocha",
+    "build": "npx gulp",
+    "watch": "npm run watch-js & npm run watch-css",
+    "watch-js": "npx nodemon -e js -w public/js -x 'npx gulp minjs'",
+    "watch-css": "npx nodemon -e css -w public/css -x 'npx gulp mincss'"
   },
   "repository": {
     "type": "git",

public/css/form.min.css

@@ -0,0 +1 @@
+body{background-color:#000;margin:0;color:#d3d3d3;font-family:Roboto,sans-serif}::-moz-focus-inner{border:0}.form{margin:50px auto;width:300px}.form h3{background-color:#000;border:2px solid #2a9fd6;border-radius:5px 5px 0 0;color:#eee;font-size:18px;padding:20px;margin:0;text-align:center;text-transform:uppercase}fieldset{border:2px solid #2a9fd6;border-top:none;margin:0;background:#000;border-radius:0 0 5px 5px;padding:20px;position:relative}fieldset:before{border-bottom:2px solid #2a9fd6;border-right:2px solid #2a9fd6;background-color:#000;content:"";width:8px;height:8px;left:50%;margin:-4px 0 0 -4px;position:absolute;top:0;transform:rotate(45deg) translateY(-2px)}.form input{display:block;font-size:14px;background:#000;color:#d3d3d3;border:1px solid #999;width:226px;padding:12px 12px;margin:auto;margin-bottom:5px}button{background:#000;border:2px solid #2a9fd6;border-radius:4px;color:#d3d3d3;cursor:pointer;display:block;padding:10px 30px;margin:auto;margin-top:20px;transition:background .25s}button:hover{background:#2a9fd6;color:#fff;text-decoration:none;outline:0}

public/css/home.min.css

@@ -0,0 +1 @@
+body{background-color:#060606;color:#d3d3d3;font-family:Roboto,sans-serif;font-size:14px;height:100%;line-height:20px;margin:0;padding-top:20px;padding-bottom:40px}#container{max-width:700px;text-align:center;display:flex;flex-direction:column;margin:auto}a{color:#0078b4;text-decoration:none;transition:color .25s}a:active,a:focus,a:hover{color:#005580}h1{font-size:72px;font-weight:700}.upload{margin:60px 0}.btn{font-family:Roboto,sans-serif;background:#000;border:2px solid #2a9fd6;border-radius:4px;color:#d3d3d3;cursor:pointer;display:inline-block;font-size:24px;padding:28px 48px;transition:background-color .25s,width .5s,height .5s}.btn:hover{background-color:#2a9fd6;color:#fff;text-decoration:none;outline:0}:focus{outline:0}::-moz-focus-inner{border:0}#upload-filelist{list-style-type:none;margin:20px 50px;padding:0;text-align:left}#upload-filelist>li{margin-top:5px;overflow:hidden;display:flex}.list-name{margin-top:6px;overflow:hidden;max-width:70%;text-overflow:ellipsis;white-space:nowrap}.list-url{font-family:'Roboto Mono',monospace;margin-left:auto}.list-progress{margin:10px 30px 10px 30px;flex-grow:2}.list-url a{vertical-align:super;color:#5c5c5c}.list-url a:hover{color:#d3d3d3}.list-url-clipboard-btn{border:2px solid #222;height:32px;margin-left:5px;border-radius:3px;cursor:pointer;background-color:#5c5c5c;transition:background-color .25s}.list-url-clipboard-btn:focus,.list-url-clipboard-btn:hover{background-color:#ababab;outline:0}.list-err{font-family:'Roboto Mono',monospace;margin-left:auto;color:#f66;vertical-align:super}nav a,nav>ul{color:#32809f;list-style:none;margin:0;padding:0;text-align:center}nav>ul>li{display:inline-block;margin:0;padding:0;cursor:default}nav>ul>li:after{content:"|";margin:0 8px;opacity:.3}nav>ul>li:last-child:after{content:"";margin:0}

public/css/index.min.css

@@ -0,0 +1 @@
+*{margin:0}body{background:#000}a{position:absolute;top:5px;left:48%;opacity:.1;height:30px;width:30px;z-index:100;cursor:default}a img{width:30px;height:30px}canvas{position:absolute;top:0;left:0}video{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:1920px;height:760px;z-index:-100;transform:translateX(-50%) translateY(-50%);background-size:cover;transition:1s opacity}#buffer{display:none}

public/css/panel.css

@@ -1,3 +1,7 @@
+@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+
 *, *:before, *:after {
     margin: 0;
     padding: 0;
@@ -190,4 +194,37 @@ body {
     margin: auto;
     -moz-user-select: none;
     user-select: none;
+}
+
+.modal {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-header {
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+}
+
+.modal-body {
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+}
+
+.modal-footer {
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
 }

public/css/panel.min.css

@@ -0,0 +1 @@
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);@import url(https://fonts.googleapis.com/css?family=Roboto);@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{height:100vh}body{font:600 14px Roboto,sans-serif;color:#000;background:#000;overflow-x:hidden}.container{display:flex;min-height:100%}.sidebar{position:absolute;width:220px}.content{flex:1;padding:30px;background:#444;box-shadow:0 0 5px rgba(0,0,0,1);transform:translate3d(0,0,0);transition:transform .3s;color:#ccc}.content.isOpen{transform:translate3d(220px,0,0)}.button{position:relative;width:120px;height:40px;cursor:pointer;margin:10px 0 40px 0;padding:15px;transition-property:opacity,filter;transition-duration:.15s;text-transform:none}.button-inner{left:0;top:50%;display:inline-block;margin-top:-2px}.button-inner,.button-inner::after,.button-inner::before{background-color:#fff;position:absolute;width:40px;height:4px;transition:transform .15s ease;border-radius:4px}.button-inner::after,.button-inner::before{content:"";display:block}.button-inner::before{top:-10px}.button-inner::after{bottom:-10px}.button.isOpen .button-inner::before{transform:translate3d(-8px,0,0) rotate(-45deg) scale(.7,1)}.button.isOpen .button-inner::after{transform:translate3d(-8px,0,0) rotate(45deg) scale(.7,1)}.button-label{position:absolute;top:6px;left:50px;font-size:24px;color:#fff}.sidebar-title{color:#2a9fd6;cursor:pointer;font-size:16px;line-height:50px;text-align:center;text-transform:uppercase;letter-spacing:7px;border-bottom:1px solid #222;background:#2a2a2a}.nav li a{outline:0;position:relative;display:block;padding:20px 0 20px 50px;font-size:14px;color:#eee;background:#333;border-bottom:1px solid #222;text-decoration:none}.nav li a:before{font:14px fontawesome;position:absolute;top:19px;left:20px}.nav li:nth-child(1) a:before{content:'\f00a'}.nav li:nth-child(2) a:before{content:'\f002'}.nav li:nth-child(3) a:before{content:'\f084'}.nav li:nth-child(4) a:before{content:'\f0e0'}.nav li:nth-child(5) a:before{content:'\f0c0'}.nav li:nth-child(6) a:before{content:'\f233'}.nav li:nth-child(7) a:before{content:'\f023';left:23px}.nav li a:hover{background:#444}::-moz-focus-inner{border:0}.nav li a.active{box-shadow:inset 5px 0 0 #2a9fd6,inset 6px 0 0 #222;background:#444}.inner{display:flex;flex-direction:column}.keys{display:flex;flex-direction:row;flex-wrap:wrap}.key{background:#555;border:3px solid #2a9fd6;border-radius:5px;box-shadow:5px 5px 10px #000;margin:20px;width:300px;height:100px;cursor:pointer;display:flex;justify-content:flex-start;flex-direction:row;transition:box-shadow .2s}.key:hover{box-shadow:0 0 10px #eee}.key i{font-size:48px;margin:auto 0 auto 20px}.key span{font-size:16px;vertical-align:center;margin:auto;-moz-user-select:none;user-select:none}.modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal-header{margin:15% auto;padding:20px;border:1px solid #888;width:80%}.modal-body{margin:auto;padding:20px;border:1px solid #888;width:80%}.modal-footer{margin:auto;padding:20px;border:1px solid #888;width:80%}

public/js/services/ApiSvc.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('ApiSvc', []).service('ApiService', ['$http', '$window', function ($http, $window) {
     this.getKey = function (identifier, cb) {
         $http({

public/js/services/AuthSvc.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('AuthSvc', []).service('AuthService', ['$http', '$window', function($http, $window) {
     this.login = function(user) {
         return $http({

public/js/shimapan-panel/controllers/ApiCtrl.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('ApiCtrl', ['ApiSvc', 'AuthSvc']).controller('ApiController', ['$scope', 'ApiService', 'AuthService', function($scope, ApiService, AuthService) {
     $scope.getKeys = function() {
         ApiService.getAll(function(keys) {

public/js/shimapan-panel/controllers/NavCtrl.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('NavCtrl', ['AuthSvc']).controller('NavController', ['$scope', '$window', 'AuthService', function($scope, $window, AuthService) {
     $scope.user = {};
     AuthService.currentUser(function(user) {

public/js/shimapan-panel/routes.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('PanelRoutes', ['ui.router']).config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
     $locationProvider.html5Mode(true);
 

public/js/shimapan-panel/shimapan-panel.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+var uirouter = require('angular-ui-router');
 var app = angular.module('shimapan-panel', ['ui.router', 'AuthSvc', 'ApiSvc', 'ApiCtrl', 'NavCtrl', 'PanelRoutes']);
 
 app.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {

public/js/shimapan/components/LoginComp.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('LoginComp', ['AuthSvc']).component('loginComponent', {
     templateUrl: '/views/shimapan/login-form.html',
     controller: ['$scope', 'AuthService', function ($scope, AuthService) {

public/js/shimapan/components/RegisterComp.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('RegisterComp', ['AuthSvc']).component('registerComponent', {
     templateUrl: '/views/shimapan/register-form.html',
     controller: ['$scope', 'AuthService', function ($scope, AuthService) {

public/js/shimapan/components/UploadComp.js

@@ -1,3 +1,5 @@
+var angular = require('angular');
+
 angular.module('UploadComp', ['ngFileUpload', 'AuthSvc']).component('uploadComponent', {
     templateUrl: '/views/shimapan/upload-form.html',
     controller: ['$scope', 'Upload', '$timeout', 'AuthService', function ($scope, Upload, $timeout, AuthService) {

public/js/shimapan/shimapan.js

@@ -1 +1,4 @@
+var angular = require('angular');
+var ngFileUpload = require('ng-file-upload');
+var ngclipboard = require('ngclipboard');
 var app = angular.module('shimapan', ['ngFileUpload', 'ngclipboard', 'UploadComp', 'RegisterComp', 'LoginComp']);

public/views/home.html

@@ -5,16 +5,11 @@
     <base href="/"/>
     <title>Shimapan</title>
 
-    <link rel="stylesheet" href="/css/home.css"/>
+    <link rel="stylesheet" href="/css/home.min.css"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
 
-    <script src="/libs/angular/angular.min.js"></script>
-    <script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script>
-    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
-    <script src="/libs/ngclipboard/src/ngclipboard.js"></script>
-
-    <script src="/libs/app/shimapan.min.js"></script>
+    <script src="/libs/app/shimapan.bundle.js"></script>
 
 </head>
 <body ng-app="shimapan">

public/views/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link href="/css/index.css" type="text/css" rel="stylesheet"/>
+    <link href="/css/index.min.css" type="text/css" rel="stylesheet"/>
     <script src="/js/typegraph.js" defer></script>
     <title>「ｓｈｉｍａｐａｎ．ｒｏｃｋｓ」</title>
 </head>

public/views/login.html

@@ -4,14 +4,9 @@
     <meta charset="utf-8"/>
     <title>Login</title>
 
-    <link href="/css/form.css" type="text/css" rel="stylesheet"/>
+    <link href="/css/form.min.css" type="text/css" rel="stylesheet"/>
 
-    <script src="/libs/angular/angular.min.js"></script>
-    <script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script>
-    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
-    <script src="/libs/ngclipboard/src/ngclipboard.js"></script>
-
-    <script src="/libs/app/shimapan.min.js"></script>
+    <script src="/libs/app/shimapan.bundle.js"></script>
 </head>
 <body ng-app="shimapan">
 <div id="container">

public/views/panel.html

@@ -4,17 +4,8 @@
     <meta charset="utf-8">
     <base href="/panel"/>
     <title>Panel</title>
-
-    <link rel="stylesheet" href="/css/panel.css"/>
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-
-    <script src="/libs/angular/angular.min.js"></script>
-    <script src="/libs/angular-ui-router/release/angular-ui-router.min.js"></script>
-
-    <script src="/js/shimapan-panel/controllers/NavCtrl.js" defer></script>
-    <script src="/libs/app/shimapan-panel.min.js"></script>
+    <link rel="stylesheet" href="/css/panel.min.css"/>
+    <script src="/libs/app/panel.bundle.js"></script>
 </head>
 <body ng-app="shimapan-panel">
     <div class="container">
@@ -27,7 +18,7 @@
                 <li><a ui-sref="invites" ng-class="{active: $state.$current.name=='invites'}">Invites</a></li>
                 <li ng-hide="!hasPermission('users.view')"><a ui-sref="users" ng-class="{active: $state.$current.name=='users'}">Users</a></li>
                 <li><a ui-sref="stats" ng-class="{active: $state.$current.name=='stats'}">Statistics</a></li>
-                <li><a ui-sref="" ng-click="logout()">Logout</a></li>
+                <li><a ng-click="logout()">Logout</a></li>
             </ul>
         </div>
         <div class="content" ng-class="{isOpen: open}">

public/views/register.html

@@ -4,14 +4,9 @@
     <meta charset="utf-8"/>
     <title>Register</title>
 
-    <link href="/css/form.css" type="text/css" rel="stylesheet"/>
+    <link href="/css/form.min.css" type="text/css" rel="stylesheet"/>
 
-    <script src="/libs/angular/angular.min.js"></script>
-    <script src="/libs/ng-file-upload/ng-file-upload-all.min.js"></script>
-    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
-    <script src="/libs/ngclipboard/src/ngclipboard.js"></script>
-
-    <script src="/libs/app/shimapan.min.js"></script>
+    <script src="/libs/app/shimapan.bundle.js"></script>
 </head>
 <body ng-app="shimapan">
     <div id="container">

public/views/shimapan-panel/panel-api.html

@@ -1,5 +1,4 @@
-<div class="inner" ng-controller="ApiController" ng-init="getKeys()">
-    <p ng-hide="keys">Loading...</p>
+<div class="inner" ng-controller="ApiController" ng-init="currKey={};showModal=false;getKeys()">
     <div class="keys">
         <div class="key" ng-repeat="key in keys">
             <i class="fa fa-key"></i>
@@ -10,4 +9,22 @@
             <span>Create</span>
         </div>
     </div>
+    <div class="modal" ng-show="showModal==true">
+        <div class="modal-header">
+            <button class="close" type="button"></button>
+            <h4 class="modal-title">API Key</h4>
+        </div>
+        <div class="modal-body modal-key">
+            <p>API Key:</p>
+            <pre class="code">{{currKey.code}}</pre>
+            <p>Use this key with your preferred method of utilizing the Shimapan API.</p>
+            <p>Example with cURL:</p>
+            <pre class="code"></pre>
+            <div id="qr"></div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn-delete" type="button"></button>
+            <button class="btn-back" type="button"></button>
+        </div>
+    </div>
 </div>