index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <!doctype html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  6. <title>Upload</title>
  7. <style>
  8. body, html {
  9. height: 100%;
  10. margin: 0;
  11. padding: 0;
  12. font-family: Sans-Serif;
  13. }
  14. body {
  15. background-color: #1d1f21;
  16. }
  17. .contentarea h1 {
  18. color: white;
  19. text-align: center;
  20. vertical-align: middle;
  21. line-height: 200px;
  22. margin: 0;
  23. }
  24. .contentarea {
  25. width: 200px;
  26. height: 200px;
  27. position: absolute;
  28. top: 0;
  29. bottom: 0;
  30. left: 0;
  31. right: 0;
  32. margin: auto;
  33. border: 2px solid white;
  34. }
  35. #pastearea {
  36. cursor: pointer;
  37. }
  38. #pastearea.dragover {
  39. background-color: rgba(255, 255, 255, .2);
  40. }
  41. progress {
  42. width: 100%;
  43. position: relative;
  44. top: 50%;
  45. border: none;
  46. transform: translateY(-50%);
  47. }
  48. #progressamountbg {
  49. position: absolute;
  50. top: 0;
  51. left: 0;
  52. background-color: rgba(0, 10, 0, .5);
  53. width: 0;
  54. height: 100%;
  55. z-index: -1;
  56. }
  57. #finallink {
  58. color: white;
  59. }
  60. #downloadview, #downloaddetails {
  61. width: 100%;
  62. height: 100%;
  63. position: absolute;
  64. top: 0;
  65. }
  66. #downloadview .preview {
  67. max-width: 100%;
  68. max-height: 100%;
  69. display: block;
  70. margin: 0 auto;
  71. }
  72. #previewimg, audio.preview, video.preview, #downloadprogress {
  73. position: relative;
  74. top: 50%;
  75. text-align: center;
  76. transform: translateY(-50%);
  77. }
  78. #pastecatcher {
  79. position: absolute;
  80. top: 0;
  81. left: 0;
  82. width: 0;
  83. height: 0;
  84. opacity: 0;
  85. overflow: hidden;
  86. }
  87. #previewtext code {
  88. background: none;
  89. width: 100%;
  90. height: calc(100% - 110px);
  91. box-sizing: border-box;
  92. -moz-box-sizing: border-box;
  93. position: absolute;
  94. top: 47px;
  95. border: 0;
  96. padding-bottom: 0;
  97. overflow-y: auto;
  98. resize: none;
  99. }
  100. .hidden {
  101. display: none !important;
  102. }
  103. #filename {
  104. position: absolute;
  105. top: 0;
  106. left: 0;
  107. padding: 5px;
  108. background-color: rgba(0, 0, 0, .5);
  109. border-bottom-right-radius: 5px;
  110. margin: 0;
  111. color: white;
  112. opacity: .75;
  113. z-index: 1;
  114. max-width: 100%;
  115. box-sizing: border-box;
  116. -moz-box-sizing: border-box;
  117. white-space: nowrap;
  118. overflow: hidden;
  119. }
  120. #btnarea, #globalbtnarea {
  121. position: absolute;
  122. bottom: 5px;
  123. height: 40px;
  124. display: table;
  125. border-collapse: separate;
  126. border-spacing: 5px;
  127. }
  128. #globalbtnarea {
  129. right: 0;
  130. }
  131. .btn {
  132. height: 40px;
  133. border: 2px solid white;
  134. display: inline-block;
  135. cursor: pointer;
  136. vertical-align: middle;
  137. display: table-cell;
  138. margin-right: 5px;
  139. color: white !important;
  140. text-decoration: none;
  141. opacity: .75;
  142. padding: 5px;
  143. background-color: rgba(0, 0, 0, .5);
  144. box-sizing: border-box;
  145. -moz-box-sizing: border-box;
  146. }
  147. #downloadprogress {
  148. color: white;
  149. }
  150. .btn:hover {
  151. opacity: 1;
  152. }
  153. </style>
  154. <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  155. <script src="/static/js/drop.js"></script>
  156. <script src="/static/js/loadencryption.js"></script>
  157. <script src="/static/js/downloadable.js"></script>
  158. <script>
  159. $(window).unload(function () { $(window).unbind('unload') })
  160. </script>
  161. <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/hybrid.min.css">
  162. <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
  163. </head>
  164. <body>
  165. <div class="contentarea" id="uploadview">
  166. <div id="pastearea">
  167. <h1>Upload</h1>
  168. </div>
  169. <div class="hidden" id="uploadprogress">
  170. <h1 id="progressamount">0%</h1>
  171. <div id="progressamountbg"></div>
  172. </div>
  173. <div class="hidden" id="uploadfinish">
  174. <h1><a href="" id="finallink">Link</a></h1>
  175. </div>
  176. <input type="file" id="filepicker" class="hidden" />
  177. </div>
  178. <div id="downloadview" class="hidden">
  179. <h1 id="downloadprogress"></h1>
  180. <div id="downloaddetails" class="hidden">
  181. <h1 id="filename">Filename</h1>
  182. <img src="" class="hidden preview" id="previewimg" />
  183. <pre class="hidden preview" id="previewtext">
  184. <code>
  185. </code>
  186. </pre>
  187. <video class="hidden preview" controls autoplay></video>
  188. <audio class="hidden preview" controls autoplay></audio>
  189. <div id="btnarea">
  190. <a class="btn" id="dlbtn" href="#">Download</a>
  191. <a class="btn" id="inbrowserbtn" target="_blank" href="#">View In Browser</a>
  192. </div>
  193. <div id="globalbtnarea">
  194. <a class="btn" id="newupload" href="#">New Upload</a>
  195. </div>
  196. </div>
  197. </div>
  198. </body>
  199. </html>