Updated for Transfer.sh v1.4.0

src/404.html

@@ -147,10 +147,6 @@
         <li>a mistyped address</li>
         <li>an out-of-date link</li>
     </ul>
-    <script>
-        var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
-    </script>
-    <script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
 </div>
 </body>
 </html>

src/download.audio.html

@@ -32,7 +32,7 @@ include "includes/download-navigation.html"
                            controls
                            preload="auto"
                            data-setup='{}'>
-                        <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        <source src="{{.URL}}" type="{{.ContentType}}"></source>
                     </audio>
                 </div>
             </div>

src/download.image.html

@@ -24,7 +24,7 @@ include "includes/download-navigation.html"
 
                 </div>
                 <div id="terminal" class="terminal preview-image">
-                    <img src="{{.Url}}"  alt="">
+                    <img src="{{.URL}}"  alt="">
                 </div>
             </div>
         </div>

src/download.video.html

@@ -30,7 +30,7 @@ include "includes/download-navigation.html"
                            controls
                            preload="auto"
                            data-setup='{}'>
-                        <source src="{{.Url}}" type="{{.ContentType}}"></source>
+                        <source src="{{.URL}}" type="{{.ContentType}}"></source>
                     </video>
                 </div>
             </div>

src/includes/download-delete.html

@@ -1,13 +1,14 @@
-<a href="{{.Url}}" id="fire-delete" class="btn-cta btn"> delete</i> </a> <br/><br/>
-<div class="delete-modal row animated fadeInDown hide">
+<a href="{{.URL}}" id="fire-delete" class="btn-cta btn"> delete</i> </a> <br/><br/>
+<div class="delete-modal row animated fadeInDown">
   <div id="from-terminal" class=" box col-md-8  col-md-offset-2 col-xs-12">
     <div class="terminal-top">
     </div>
     <div class="terminal">
-      <div id="web" class="DeleteTerm">
+      <div id="web">
         <input type="text" id="deletion-token" value="" placeholder="Please enter the deletion token">
         <a href="#" id="confirm-delete" class="btn-cta btn"> confirm</i> </a> <br/><br/>
       </div>
+      <div id="error"></div>
     </div>
   </div>
 </div>

src/includes/download-footer.html

@@ -1,6 +1,5 @@
 <footer>
   <div class="wrapper">
-              <br/>
       <img src="../images/Logo-orange.png" alt="Founded in Holland">
       <p>A instance of transfer.sh<br>
         Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
@@ -9,20 +8,6 @@
 
 </footer>
 
-    <script>
-    (function() {
-      var userVoiceKey = "{{.UserVoiceKey}}";
-      if (userVoiceKey != "") {
-        var uv = document.createElement('script');
-        uv.type = 'text/javascript';
-        uv.async = true;
-        uv.src = '//widget.uservoice.com/{{.UserVoiceKey}}.js';
-        var s = document.getElementsByTagName('script')[0];
-        s.parentNode.insertBefore(uv, s)
-      }
-    })()
-    </script>
-
     <!--[if lt IE 7]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->

src/includes/download-top.html

@@ -3,7 +3,7 @@
         <h4>type: <b>{{.ContentType}}</b></h4>
         <h4>size: <b>{{.ContentLength | format "#,###."}}</b> bytes</h4>
 
-        <a href="{{.UrlGet}}" class="btn-cta btn"> download</i> </a> <br/><br/>
+        <a href="{{.URLGet}}" class="btn-cta btn"> download</i> </a> <br/><br/>
         <div class="qrcode">
                 <img src="data:image/png;base64,{{.QRCode}}"/>
         </div>

src/includes/footer.html

@@ -1,7 +1,5 @@
 <footer>
-  <div class="wrapper">
-              <br/>
-      <img src="../images/Logo-orange.png" alt="Founded in Holland">
+        <img src="images/Logo-orange.png" alt="Founded in Holland">
       <p>A instance of transfer.sh<br>
         Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
       </p>

src/index.html

@@ -11,25 +11,6 @@ include "includes/head.html"
 
 <body>
 
-<script>
-    var gaKey = "{{.GAKey}}";
-    if (gaKey != "") {
-        (function (i, s, o, g, r, a, m) {
-            i['GoogleAnalyticsObject'] = r;
-            i[r] = i[r] || function () {
-                (i[r].q = i[r].q || []).push(arguments)
-            }, i[r].l = 1 * new Date();
-            a = s.createElement(o),
-                    m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m)
-        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
-        ga('create', gaKey, 'transfer.sh');
-        ga('send', 'pageview');
-    }
-</script>
-
 include "includes/navigation.html"
 
 <section id="home">
@@ -43,11 +24,13 @@ include "includes/navigation.html"
                 </div>
                 <div id="terminal" class="terminal">
                     <code class="code-wrapper"><span class="code-title"># Upload using cURL</span>
-                        $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt {{.WebAddress}}{{.SampleToken}}/hello.txt
+                        $ curl --upload-file ./hello.txt {{.WebAddress}}hello.txt
+                        {{.WebAddress}}{{.SampleToken}}/hello.txt
 
                         <span class="code-title"># Using the shell function</span>
                         $ transfer hello.txt
-                        ##################################################### 100.0% {{.WebAddress}}{{.SampleToken2}}/hello.txt
+                        ##################################################### 100.0%
+                        {{.WebAddress}}{{.SampleToken2}}/hello.txt
                     </code>
                 </div>
                 <div id="web">

src/scripts/base.js

@@ -51,9 +51,10 @@ $(document).ready(function() {
                 xhr.onreadystatechange = function() {
                     if (xhr.readyState === 4) {
                         if (xhr.status === 200) {
-                            deleteModal.find('#web').html('<span style="clear:both">File deleted</span></div>');
+                            deleteModal.find('#web').html('<span style="clear:both">File deleted</span>');
+                            deleteModal.find('#error').html('')
                         } else {
-                            deleteModal.find('#web').append('<span>Error (' + xhr.status + ') during deletion of file</span>');
+                            deleteModal.find('#error').html('<span>Error (' + xhr.status + ') during deletion of file</span>');
                         }
                     }
                 };

src/styles/config.less

@@ -1,16 +1,20 @@
 // Colors
 
+@blue: #1e70bf;
 @light-gray:#4c505c;
 @light-blue: #86acd1;
+@dark-blue: #fff;
+@term: #000;
 @red: #e96e57;
 @dark-gray: #3b3b3b;
-@dark-blue: #1e70bf;
 @white: #fff;
 @term: #000;
-@navbar-default-bg:    #fff;
-@text-color: @light-blue;
-@link-color: @dark-blue;
-@progress-bg:    @light-gray;
+
+@navbar-default-bg:#383c49;
+@page-default-bg:#383c49;
+@text-color:  @light-blue;
+@link-color:  @blue;
+@progress-bg: @light-gray;
 
 // Typography
 @font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

src/styles/includes/contact.less

@@ -2,14 +2,14 @@
     text-align: center;
     i {
         font-size: 160px;
-        color: @light-gray;
+        color: @blue;
     }
     padding: 100px 0;
 }
 
 #share {
     text-align:center;
-    background: @dark-blue;
+    background: @blue;
     color: #fff;
     i {
         font-size: 50px;
@@ -28,11 +28,10 @@
 
 footer {
     text-align: center;
-    background: @light-blue;
+    background: @dark-blue;
     padding: 30px 0;
     p {
         margin: 0;
-        color: @white;
     }
     i {
         color: @red;
@@ -46,7 +45,7 @@ footer {
     background: @dark-gray;
     text-align: center;
     i {
-        color: @light-gray;
+        color: @blue;
         font-size: 160px;
     }
     padding: 40px 0;
@@ -59,7 +58,7 @@ footer {
     code {
         display:block;
         padding: 20px;
-        background: @dark-gray;
+        background: @light-gray;
         font-family: @font-family-mono;
     }
 }

src/styles/includes/global.less

@@ -1,7 +1,7 @@
 body {
     max-width: 100%;
     margin: 0 auto;
-    background-color: #383c49;
+    background-color: @page-default-bg;
 }
 
 .browsehappy {
@@ -16,7 +16,7 @@ body {
     ul {
         list-style: none;
         max-width: 400px;
-       // marghomein: 0 auto;
+        marghomein: 0 auto;
     }
     li {
         display: inline-block;
@@ -26,13 +26,13 @@ body {
         text-align: center;
         font-family: @font-family-mono;
         margin-bottom: 15px;
-        color: @light-blue;
+        color: @dark-blue;
         font-size: 35px;
     }
     a {
         text-decoration: none;
         font-size: 15px;
-        color: @dark-blue;
+        color: @dark-gray;
     }
 }
 
@@ -48,9 +48,9 @@ body {
 .btn-cta {
     .transition(all @animation-duration);
     padding: 10px 50px;
-    border: 2px solid @light-blue;
+    border: 2px solid @red;
     font-size: 20px;
-    color: @light-blue;
+    color: @red;
     border-radius: 10px;
     display: inline-block;
     text-decoration: none;
@@ -59,16 +59,6 @@ body {
         border-color: @dark-blue;
         color: @dark-blue;
     }
-    &:focus {
-        text-decoration: none;
-        border-color: @dark-blue;
-        color: @dark-blue;
-    }
-}
-
-.download-btn {
-    color: @red;
-    border-color: @red;
 }
 
 .wrapper {
@@ -77,6 +67,10 @@ body {
     .container;
 }
 
+section {
+   // padding: 50px 0
+}
+
 img {
     max-width: 100%;
     margin: 0 auto;
@@ -84,7 +78,7 @@ img {
 
 a {
     text-decoration: underline;
-    color: @light-blue;
+    color: @dark-blue;
     &:hover {
         text-decoration: none;
         color: inherit;

src/styles/includes/home.less

@@ -14,6 +14,14 @@
     .btn-home {
         margin: 50px 0 25px 0;
     }
+    hr {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        margin-right: 20px;
+        border: 0;
+        border-top: 1px solid #eeeeee;
+        height: 0;
+    }
 }
 
 
@@ -65,6 +73,9 @@
     }
       .border-bottom-radius (5px);
 
+}
+ .dragged {
+        background: lighten(@term, 40%)!important;
 }
 
 .terminal {
@@ -76,8 +87,7 @@
 
     .border-bottom-radius (5px);
     background: @term;
- //   background: url(../images/terminal.svg);
- //   backbground-repeat: no-repeat;
+    backbground-repeat: no-repeat;
     background-size: cover;
 }
 
@@ -133,8 +143,8 @@
     h3 {color: #fff;
         font-size: 25px;
     }
-    background: @light-gray;
+    background: @blue;
     .btn-cta {
-        border-color: @light-blue;
+        border-color: @dark-blue;
     }
 }

src/styles/includes/pages.less

@@ -11,7 +11,7 @@
         font-size: 18px
     }
     i {
-        color: @dark-blue;
+        color: @blue;
         font-size: 100px;
     }
     padding:100px 0;
@@ -39,7 +39,7 @@
 
 #share {
     text-align:center;
-    background: @dark-blue;
+    background: @blue;
     color: #fff;
     i {
         font-size: 50px;
@@ -74,7 +74,7 @@
         margin: 0 auto;
         margin-bottom: 10px;
     }
-    background: @dark-gray;
+    background: @light-gray;
     padding: 50px 0;
     a {
         font-size: 20px;
@@ -107,7 +107,7 @@ footer {
     text-align: center;
     i {
         font-size: 160px;
-        color: @light-gray;
+        color: @blue;
     }
     padding:100px 0;
     @media (min-width: @screen-sm-min) {

src/styles/includes/preview.less

@@ -1,3 +1,12 @@
+.delete-modal {
+  display: none;
+}
+
+.delete-modal .show {
+  display: block;
+}
+
+
 .preview-wrapper {
     padding-bottom: 30px;
 }
@@ -62,7 +71,7 @@ padding: 0px;
   width: 50%;
   max-width: 500px;
   min-width: 300px;
-  background-color: @light-gray;
+  background-color: @blue;
   border-radius: 2px;
   transform: translateX(-50%) translateY(-50%);
   opacity: 0;
@@ -82,7 +91,7 @@ padding: 0px;
 		color: #fff;
 	}
   input {
-    background-color: @dark-gray;
+    background-color: @light-gray;
     color: @text-color;
     border: 0;
     font-size: 1em;

src/styles/includes/reviews.less

@@ -1,5 +1,5 @@
 #reviews {
-    background: @dark-gray;
+    background: @light-gray;
     padding: 130px 0;
     .twitter-profile {
         float: left;

src/styles/includes/video-js.less

@@ -23,10 +23,10 @@
 // The default color of control backgrounds is mostly black but with a little
 // bit of blue so it can still be seen on all-black video frames, which are common.
 // Try changing to #900
-@primary-background-color: @light-gray;  // #2B333F default
+@primary-background-color: @blue;  // #2B333F default
 @red-primary-background-color: red(@primary-background-color);
 @green-primary-background-color: green(@primary-background-color);
-@light-gray-primary-background-color: blue(@primary-background-color);
+@blue-primary-background-color: blue(@primary-background-color);
 
 // Try changing to true
 @center-big-play-button: true; // true default
@@ -91,20 +91,20 @@
   /* IE8 - has no alpha support */
   background-color: @primary-background-color;
   /* Opacity: 1.0 = 100%, 0.0 = 0% */
-  background-color: rgba(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color, 0.7);
+  background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7);
 }
 
 // Make a slightly lighter version of the main background
 // for the slider background.
-@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color), 33%);
+@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%);
 @red-slider-bg-color: red(@slider-bg-color);
 @green-slider-bg-color: green(@slider-bg-color);
-@light-gray-slider-bg-color: blue(@slider-bg-color);
+@blue-slider-bg-color: blue(@slider-bg-color);
 
 /* Slider - used for Volume bar and Progress bar */
 .video-js .vjs-slider {
   background-color: @slider-bg-color;
-  background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
+  background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
 }
 
 /* The slider bar color is used for the progress bar and the volume bar
@@ -118,18 +118,18 @@
 /* The main progress bar also has a bar that shows how much has been loaded. */
 .video-js .vjs-load-progress {
   /* For IE8 we'll lighten the color */
-  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 25%);
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%);
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5);
 }
 
 /* The load progress bar also has internal divs that represent
    smaller disconnected loaded time ranges */
 .video-js .vjs-load-progress div {
   /* For IE8 we'll lighten the color */
-  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 50%);
+  background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%);
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.75);
+  background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75);
 }
 
 

src/styles/main.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
-@import "../bower_components/videojs/dist/video-js.min.css";
+@import "../bower_components/videojs/dist/video-js.css";
 article,
 aside,
 details,
@@ -5949,7 +5949,6 @@ body {
   animation-name: wobble;
 }
 body {
-  max-width: 100%;
   margin: 0 auto;
   background-color: #383c49;
 }
@@ -5965,6 +5964,7 @@ body {
 #navigation ul {
   list-style: none;
   max-width: 400px;
+  marghomein: 0 auto;
 }
 #navigation li {
   display: inline-block;
@@ -5974,13 +5974,13 @@ body {
   text-align: center;
   font-family: "Droid Sans Mono", monospace;
   margin-bottom: 15px;
-  color: #86acd1;
+  color: #fff;
   font-size: 35px;
 }
 #navigation a {
   text-decoration: none;
   font-size: 15px;
-  color: #1e70bf;
+  color: #3b3b3b;
 }
 .page-title {
   text-align: center;
@@ -5995,26 +5995,17 @@ body {
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
   padding: 10px 50px;
-  border: 2px solid #86acd1;
+  border: 2px solid #e96e57;
   font-size: 20px;
-  color: #86acd1;
+  color: #e96e57;
   border-radius: 10px;
   display: inline-block;
   text-decoration: none;
 }
 .btn-cta:hover {
   text-decoration: none;
-  border-color: #1e70bf;
-  color: #1e70bf;
-}
-.btn-cta:focus {
-  text-decoration: none;
-  border-color: #1e70bf;
-  color: #1e70bf;
-}
-.download-btn {
-  color: #e96e57;
-  border-color: #e96e57;
+  border-color: #fff;
+  color: #fff;
 }
 .wrapper {
   margin: 0 auto;
@@ -6061,7 +6052,7 @@ img {
 }
 a {
   text-decoration: underline;
-  color: #86acd1;
+  color: #fff;
 }
 a:hover {
   text-decoration: none;
@@ -6096,6 +6087,14 @@ img.navimg {
 #home .btn-home {
   margin: 50px 0 25px 0;
 }
+#home hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+  height: 0;
+}
 #web,
 .terminal {
   word-wrap: break-word;
@@ -6151,12 +6150,16 @@ img.navimg {
 #web a {
   color: #fff;
 }
+.dragged {
+  background: #666666 !important;
+}
 .terminal {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   background: #000;
+  backbground-repeat: no-repeat;
   background-size: cover;
 }
 .terminal a {
@@ -6191,7 +6194,7 @@ img.navimg {
   color: #fff;
   text-align: center;
   padding: 40px 0;
-  background: #4c505c;
+  background: #1e70bf;
 }
 #thank-you .col-md-4 {
   text-align: center;
@@ -6213,7 +6216,7 @@ img.navimg {
   font-size: 25px;
 }
 #thank-you .btn-cta {
-  border-color: #86acd1;
+  border-color: #fff;
 }
 #features {
   background: #3b3b3b;
@@ -6279,7 +6282,7 @@ img.navimg {
 }
 #tor {
   text-align: center;
-  background: #3b3b3b;
+  background: #4c505c;
   padding: 50px 0;
 }
 #tor img {
@@ -6316,7 +6319,7 @@ footer img {
 }
 #contact i {
   font-size: 160px;
-  color: #4c505c;
+  color: #1e70bf;
 }
 @media (min-width: 768px) {
   #contact i {
@@ -6328,7 +6331,7 @@ footer img {
   margin-bottom: 40px;
 }
 #reviews {
-  background: #3b3b3b;
+  background: #4c505c;
   padding: 130px 0;
 }
 #reviews .twitter-profile {
@@ -6439,14 +6442,14 @@ blockquote.tweet-xl a {
 .video-js .vjs-big-play-button,
 .video-js .vjs-menu-button .vjs-menu-content {
   /* IE8 - has no alpha support */
-  background-color: #4c505c;
+  background-color: #1e70bf;
   /* Opacity: 1.0 = 100%, 0.0 = 0% */
-  background-color: rgba(76, 80, 92, 0.7);
+  background-color: rgba(30, 112, 191, 0.7);
 }
 /* Slider - used for Volume bar and Progress bar */
 .video-js .vjs-slider {
-  background-color: #a0a4b0;
-  background-color: rgba(160, 164, 176, 0.5);
+  background-color: #97c3ef;
+  background-color: rgba(151, 195, 239, 0.5);
 }
 /* The slider bar color is used for the progress bar and the volume bar
    (the first two can be removed after a fix that's coming) */
@@ -6458,9 +6461,9 @@ blockquote.tweet-xl a {
 /* The main progress bar also has a bar that shows how much has been loaded. */
 .video-js .vjs-load-progress {
   /* For IE8 we'll lighten the color */
-  background: #e6e7ea;
+  background: #ffffff;
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(160, 164, 176, 0.5);
+  background: rgba(151, 195, 239, 0.5);
 }
 /* The load progress bar also has internal divs that represent
    smaller disconnected loaded time ranges */
@@ -6468,7 +6471,7 @@ blockquote.tweet-xl a {
   /* For IE8 we'll lighten the color */
   background: #ffffff;
   /* Otherwise we'll rely on stacked opacities */
-  background: rgba(160, 164, 176, 0.75);
+  background: rgba(151, 195, 239, 0.75);
 }
 :not(.vjs-has-started) .vjs-control-bar {
   display: flex;
@@ -6555,6 +6558,12 @@ blockquote.tweet-xl a {
 .icon-gplus:before {
   content: "p";
 }
+.delete-modal {
+  display: none;
+}
+.delete-modal .show {
+  display: block;
+}
 .preview-wrapper {
   padding-bottom: 30px;
 }
@@ -6612,7 +6621,7 @@ html {
   width: 50%;
   max-width: 500px;
   min-width: 300px;
-  background-color: #4c505c;
+  background-color: #1e70bf;
   border-radius: 2px;
   transform: translateX(-50%) translateY(-50%);
   transition: opacity 0.2s ease;
@@ -6632,7 +6641,7 @@ html {
   color: #fff;
 }
 .copy-link-wrapper input {
-  background-color: #3b3b3b;
+  background-color: #4c505c;
   color: #86acd1;
   border: 0;
   font-size: 1em;
@@ -6667,16 +6676,4 @@ audio {
   -webkit-appearance: none;
   background: red;
 }
-.DeleteTerm {
-  margin: auto !important;
-  padding-left: 15% !important;
-  border: 3px;
-}
-input#deletion-token::placeholder {
-  color: white !important;
-}
-input#deletion-token {
-  background: black !important;
-  color: white !important;
-}
 /*# sourceMappingURL=styles/main.css.map */

src/styles/main.less

@@ -8,7 +8,7 @@
 @import "includes/home";
 @import "includes/pages";
 @import "includes/reviews";
-@import "../bower_components/videojs/dist/video-js.min.css";
+@import "../bower_components/videojs/dist/video-js.css";
 @import "includes/video-js";
 @import "includes/transfersh-icons";
 @import "includes/preview";