up1/index.html

<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <title>Upload</title>

    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: Sans-Serif;
        }

        body {
            background-color: #1d1f21;
        }

        .contentarea h1 {
            color: white;
            text-align: center;
            vertical-align: middle;
            line-height: 200px;
            margin: 0;
        }

        .contentarea {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border: 2px solid white;
        }

        #pastearea {
            cursor: pointer;
        }

            #pastearea.dragover {
                background-color: rgba(255, 255, 255, .2);
            }


        progress {
            width: 100%;
            position: relative;
            top: 50%;
            border: none;
            transform: translateY(-50%);
        }

        #progressamountbg {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 10, 0, .5);
            width: 0;
            height: 100%;
            z-index: -1;
        }

        #finallink {
            color: white;
        }


        #downloadview, #downloaddetails {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

            #downloadview .preview {
                max-width: 100%;
                max-height: 100%;
                display: block;
                margin: 0 auto;
            }

        #previewimg, audio.preview, video.preview, #downloadprogress {
            position: relative;
            top: 50%;
            text-align: center;
            transform: translateY(-50%);
        }

        #pastecatcher {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            opacity: 0;
            overflow: hidden;
        }

        #previewtext code {
            background: none;
            width: 100%;
            height: calc(100% - 110px);
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            position: absolute;
            top: 47px;
            border: 0;
            padding-bottom: 0;
            overflow-y: auto;
            resize: none;
        }

        .hidden {
            display: none !important;
        }

        #filename {
            position: absolute;
            top: 0;
            left: 0;
            padding: 5px;
            background-color: rgba(0, 0, 0, .5);
            border-bottom-right-radius: 5px;
            margin: 0;
            color: white;
            opacity: .75;
            z-index: 1;
            word-wrap: break-word;
        }

        #btnarea, #globalbtnarea {
            position: absolute;
            bottom: 5px;
            height: 40px;
            display: table;
            border-collapse: separate;
            border-spacing: 5px;
        }

        #globalbtnarea {
            right: 0;
        }

        .btn {
            height: 40px;
            border: 2px solid white;
            display: inline-block;
            cursor: pointer;
            vertical-align: middle;
            display: table-cell;
            margin-right: 5px;
            color: white !important;
            text-decoration: none;
            opacity: .75;
            padding: 5px;
            background-color: rgba(0, 0, 0, .5);
            box-sizing: border-box;
            -moz-box-sizing: border-box;
        }


        #downloadprogress {
            color: white;
        }

            .btn:hover {
                opacity: 1;
            }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/static/js/drop.js"></script>
    <script src="/static/js/loadencryption.js"></script>
    <script src="/static/js/downloadable.js"></script>
    <script>
        $(window).unload(function () { $(window).unbind('unload') })
    </script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/hybrid.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
</head>
<body>
    <div class="contentarea" id="uploadview">
        <div id="pastearea">
            <h1>Upload</h1>
        </div>
        <div class="hidden" id="uploadprogress">
            <h1 id="progressamount">0%</h1>
            <div id="progressamountbg"></div>
        </div>
        <div class="hidden" id="uploadfinish">
            <h1><a href="" id="finallink">Link</a></h1>
        </div>
        <input type="file" id="filepicker" class="hidden" />
    </div>


    <div id="downloadview" class="hidden">

        <h1 id="downloadprogress"></h1>
        <div id="downloaddetails" class="hidden">
            <h1 id="filename">Filename</h1>
            <img src="" class="hidden preview" id="previewimg" />
            <pre class="hidden preview" id="previewtext">
                <code>
                </code>
            </pre>
            <video class="hidden preview" controls autoplay></video>
            <audio class="hidden preview" controls autoplay></audio>
            <div id="btnarea">

                <a class="btn" id="dlbtn" href="#">Download</a>
                <a class="btn" id="inbrowserbtn" target="_blank" href="#">View In Browser</a>
            </div>

            <div id="globalbtnarea">
                <a class="btn" id="newupload" href="#">New Upload</a>
            </div>
        </div>
    </div>
</body>
</html>