responsivness

transfersh-web/index.html

@@ -60,7 +60,7 @@
             </h2>
 
             <div class="row">
-                <div id="from-terminal" class="box col-md-6 col-xs-12">
+                <div id="from-terminal" class="animated fadeIn box col-md-6 col-xs-12">
                     <h3>Easy sharing from the command-line</h3>
                     <div id="terminal">
                         <p style='white-space:pre'></p>
@@ -79,8 +79,9 @@
                             <li>
                             </li>
                         </ul>
-                        <div class='span8 all-files' style='margin: 0; opacity: 0;'>
-                            download all files link <a class="download-zip" href="#">zip</a>  <a class="download-tar" href="#">tar.gz</a>
+                        <div class='all-files' >
+                            <h4>Download your files:</h4>
+                            <a class="download-zip btn-cta" href="#">zip</a>  <a class="download-tar btn-cta" href="#">tar.gz</a>
                         </div>
                         <div>
                         </div>
@@ -95,7 +96,7 @@
     <section id="features">
         <div class="wrapper container">
             <div class="row">
-                <div class="col-md-3 col-xs-3">
+                <div class="col-md-3 col-xs-6">
                     <i class="icon-terminal"></i>
                     <h3>Made for use with shell</h3>
                 </div>
@@ -192,9 +193,9 @@
             <div class="row">
 
                 <div class="col-md-8 col-md-offset-2 col-xs-12">
-                    <blockquote class="twitter-tweet xl" lang="en">
+                    <blockquote class="twitter-tweet tweet-xl" lang="en">
                 <img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
-                        <p>transfer.sh is my latest fav service! Try simple command-line and web file sharing! <a href="https://t.co/FSrsb1JKJd">https://t.co/FSrsb1JKJd</a>&#10;Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p>&mdash; Lars Arvestad (@arvestad) <a href="https://twitter.com/arvestad/status/519507976491499521">October 7, 2014</a>
+                        <p>transfer.sh is my latest fav service! Try simple command-line and web file sharing! <a href="https://t.co/FSrsb1JKJd">https://t.co/FSrsb1JKJd</a>&#10;Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p> <a href="https://twitter.com/arvestad/status/519507976491499521">&mdash; Lars Arvestad (@arvestad)</a>
                     </blockquote>
                 </div>
             </div>
@@ -207,14 +208,14 @@
 
                     <blockquote class="twitter-tweet" lang="en">
                         <img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
-                        <p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p><a href="https://twitter.com/kareemk/status/517029789191118849">&mdash; Kareem Kouddous (@kareemk) September 30, 2014</a>
+                        <p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p><a href="https://twitter.com/kareemk/status/517029789191118849">&mdash; Kareem Kouddous (@kareemk) </a>
                     </blockquote>
 
                 </div>
                 <div class="col-md-6 col-xs-12">
                     <blockquote class="twitter-tweet" lang="en">
                         <img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
-                        <p><a href="http://t.co/JomAmqWYEB">http://t.co/JomAmqWYEB</a> by <a href="https://twitter.com/dutchcoders">@dutchcoders</a> is pure awesomeness! any chance of source on github? :-)</p><a href="https://twitter.com/drakpz/status/517008058841829376">&mdash; PJ Spagnolatti (@drakpz) September 30, 2014</a>
+                        <p><a href="http://t.co/JomAmqWYEB">http://t.co/JomAmqWYEB</a> by <a href="https://twitter.com/dutchcoders">@dutchcoders</a> is pure awesomeness! any chance of source on github? :-)</p><a href="https://twitter.com/drakpz/status/517008058841829376">&mdash; PJ Spagnolatti (@drakpz)</a>
                     </blockquote>
 
                 </div>
@@ -226,7 +227,7 @@
                     <blockquote class="twitter-tweet" lang="en">
                         <img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
                         <p>Love transfer.sh! Will be using it from now on! Thanks for the amazing service we can use from the CLI <a href="https://twitter.com/dutchcoders">@dutchcoders</a>
-                        </p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">&mdash; Jacob Lindgren (@jacoblindgren11) September 30, 2014</a>
+                        </p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">&mdash; Jacob Lindgren (@jacoblindgren11) </a>
                     </blockquote>
 
                 </div>
@@ -235,7 +236,7 @@
                         <img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
                         <p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> Thanks for transfer.sh. Just used it for a production purpose for a customer. So great, so easy, so https. :)</p>
                         <a href="https://twitter.com/FloifyDave/status/517383101425516544">
-                            &mdash; Dave Sims (@FloifyDave)October 1, 2014</a>
+                            &mdash; Dave Sims (@FloifyDave)</a>
                     </blockquote>
 
                 </div>
@@ -323,6 +324,7 @@
     <!-- build:js scripts/main.js -->
     <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/typed.js/js/typed.js"></script>
+     <script src="bower_components/realistic-typewriter.js/build/typewriter-bundle.min.js"></script>
     <script src="bower_components/uri.js/src/URI.min.js"></script>
     <script src="bower_components/bootstrap/js/transition.js"></script>
     <script src="bower_components/bootstrap/js/collapse.js"></script>

transfersh-web/scripts/main.js

@@ -1,21 +1,43 @@
-$(document).ready(function () {
+$(document).ready(function() {
 
     // Terminal typing animation
-    $("#from-terminal p").typed({
-        strings: ["curl --upload-file ./hello.txt https://transfer.sh/hello.txt\n######################################################\nhttps://transfer.sh/66nb8/hello.txt \n "],
-        typeSpeed: 0, // typing speed
-        backSpeed: 0, // backspacing speed
-        startDelay: 0, // time before typing starts
-        backDelay: 500, // pause before backspacing
-        loop: false, // loop on or off (true or false)
-        loopCount: false, // number of loops, false = infinite
-        showCursor: true,
-        attr: null, // attribute to type, null = text for everything except inputs, which default to placeholder
-        callback: function(){ } // call function after typing is done
-    });
+    /*    $("#from-terminal p").typed({
+            strings: ["curl --upload-file ./hello.txt https://transfer.sh/hello.txt\n######################################################\nhttps://transfer.sh/66nb8/hello.txt \n "],
+            typeSpeed: 0, // typing speed
+            backSpeed: 0, // backspacing speed
+            startDelay: 0, // time before typing starts
+            backDelay: 500, // pause before backspacing
+            loop: false, // loop on or off (true or false)
+            loopCount: false, // number of loops, false = infinite
+            showCursor: true,
+            attr: null, // attribute to type, null = text for everything except inputs, which default to placeholder
+            callback: function(){ } // call function after typing is done
+        });
+    */
+    var typewriter = require('typewriter');
+
+    var twSpan = document.getElementById('terminal');
+
+    var tw = typewriter(twSpan).withAccuracy(95)
+        .withMinimumSpeed(5)
+        .withMaximumSpeed(17)
+        .build();
+    tw.put('$ ')
+        .waitRange(500, 1000)
+        .type('curl --upload-file ./hello.txt https://transfer.sh/hello.txt\n#######################')
+        .put('<br/>')
+        .waitRange(1000, 1500)
+        .put('ls: realistic-typewriter.js: No such file or directory<br/>')
+        .put('$ ')
+        .waitRange(1000, 1500)
+        .type('exit')
+        .put('<br/>')
+        .wait(500)
+        .put('logout<br/><br/>')
+        .put('[Process completed]<br/>');
 
     // Smooth scrolling
-    $('a[href*=#]:not([href=#])').click(function () {
+    $('a[href*=#]:not([href=#])').click(function() {
         if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
             var target = $(this.hash);
             target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
@@ -29,19 +51,21 @@ $(document).ready(function () {
     });
 
 
-   // function resizePages() {
-   //     var h = $(window).height();
-   //     var height  =  h < 600 ? 600 : h;
-      /*  $('section').css('height',height);
+    // function resizePages() {
+    //     var h = $(window).height();
+    //     var height  =  h < 600 ? 600 : h;
+    /*  $('section').css('height',height);
         $('#home').css('height',height*0.98);
     }
     resizePages();*/
 });
 
-(function () {
+(function() {
     var files = Array()
 
     function upload(file) {
+
+        $('.browse').addClass('uploading');
         var li = $('<li style="clear:both;"/>');
 
         li.append($('<div><div class="progress active upload-progress" style="margin-bottom: 0;"><div class="progress-bar bar" style="width: 0%;"></div></div><p>Uploading... ' + file.name + '</p></div>'));
@@ -49,13 +73,13 @@ $(document).ready(function () {
 
         var xhr = new XMLHttpRequest();
 
-        xhr.upload.addEventListener("progress", function (e) {
+        xhr.upload.addEventListener("progress", function(e) {
             var pc = parseInt((e.loaded / e.total * 100));
             $('.upload-progress', $(li)).show();
             $('.upload-progress .bar', $(li)).css('width', pc + "%");
         }, false);
 
-        xhr.onreadystatechange = function (e) {
+        xhr.onreadystatechange = function(e) {
             if (xhr.readyState == 4) {
                 $('.upload-progress', $(li)).hide();
                 $('#web').addClass('uploading');
@@ -72,7 +96,7 @@ $(document).ready(function () {
                 $(".download-zip").attr("href", URI("(" + files.join(",") + ").zip").absoluteTo(location.href).toString());
                 $(".download-tar").attr("href", URI("(" + files.join(",") + ").tar.gz").absoluteTo(location.href).toString());
 
-                $(".all-files").css("opacity", "1");
+                $(".all-files").addClass('show');
 
             }
 
@@ -86,15 +110,21 @@ $(document).ready(function () {
         xhr.send(file);
     };
 
-    $(document).bind("dragenter", function (event) {
+    $(document).bind("dragenter", function(event) {
+
         event.preventDefault();
-    }).bind("dragover", function (event) {
+    }).bind("dragover", function(event) {
         event.preventDefault();
         // show drop indicator
-    }).bind("dragleave", function (event) {}).bind("drop dragdrop", function (event) {
+        $('#web').addClass('dragged');
+    }).bind("dragleave", function(event) {
+        $('#web').removeClass('dragged');
+        console.log('asdasd');
+
+    }).bind("drop dragdrop", function(event) {
         var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
 
-        $.each(files, function (index, file) {
+        $.each(files, function(index, file) {
             console.debug(file);
             upload(file);
         });
@@ -103,15 +133,15 @@ $(document).ready(function () {
         event.preventDefault();
     });
 
-    $('a.browse').on('click', function (event) {
+    $('a.browse').on('click', function(event) {
         $("input[type=file]").click();
         return (false);
     });
 
 
 
-    $('input[type=file]').on('change', function (event) {
-        $.each(this.files, function (index, file) {
+    $('input[type=file]').on('change', function(event) {
+        $.each(this.files, function(index, file) {
             if (file instanceof Blob) {
                 upload(file);
             }

transfersh-web/styles/includes/global.less

@@ -8,17 +8,28 @@
 
 #navigation {
     ul {
-        float: right;
         list-style: none;
-        margin: 30px 0;
     }
     li {
         display: inline-block;
         padding: 0 10px;
     }
     h1 {
+        text-align: center;
         font-family: @font-family-mono;
-        float:left;
+        margin-bottom: 15px;
+
+    }
+    @media (min-width: @screen-sm-min) {
+        ul {
+            float: right;
+            margin: 30px 0;
+        }
+        h1 {
+            float: left
+        }
+    }
+    a {
     }
 }
 

transfersh-web/styles/includes/home.less

@@ -1,10 +1,8 @@
 #home {
     text-align: center;
-    .btn-cta {
-        margin: 30px 0;
-    }
+
     h2 {
-        font-size: 20px;
+        font-size: 40x;
     }
 
     @media (min-width: @screen-sm-min) {
@@ -27,6 +25,7 @@
 }
 
 #web {
+    .transition(all @animation-duration ease);
     border: 1px dashed @blue;
     padding-top: 10px;
     i {
@@ -41,11 +40,33 @@
 }
 
 #web, #terminal {
-    min-height: 250px;
+    min-height: 150px;
+    @media (min-width: @screen-sm-min) {
+        min-height: 270px;
+    }
+    
 }
 
+#web .uploading {
+
+    i {
+        .transition(font @animation-duration ease);
+        font-size: 40px;
+    }
+        p.click {
+        margin-top: -10px;
+        font-size: 14px;
+    }
+}
+
+
+.dragged {
+    background: @light-gray;
+}
+
+
 #terminal {
-    padding: 40px 20px;
+    padding: 10px;
     text-align: left;
     color: #fff;
     background: @dark-blue;
@@ -54,10 +75,20 @@
     background-size: 100% auto;
     font-family: @font-family-mono;
     font-size: 11px;
-
+    @media (min-width: @screen-sm-min) {
+        padding: 30px 20px;
+    }
 }
 
 .progress {
     max-width: 80%;
     margin: 0 auto;
+}
+
+.all-files {
+    display: none;
+}
+
+.all-files .show {
+    display:block;
 }

transfersh-web/styles/includes/pages.less

@@ -28,6 +28,7 @@
         font-family: @font-family-mono;
         font-size: 12px;
     }
+    padding: 50px 0;
 }
 
 #share {
@@ -77,7 +78,7 @@ footer {
 #contact {
     text-align: center;
     i {
-        font-size: 60px;
+        font-size: 160px;
         color: @blue;
     }
     padding:100px 0;

transfersh-web/styles/includes/reviews.less

@@ -21,11 +21,10 @@ blockquote.twitter-tweet {
 
   text-align: right;
   border: 0;
-  .xl {
-    font-size: 18px;
-  }
+
 }
- 
+
+
 blockquote.twitter-tweet p {
   font-size: 17px;
   font-weight: normal;
@@ -43,4 +42,9 @@ blockquote.twitter-tweet a {
 blockquote.twitter-tweet a:hover,
 blockquote.twitter-tweet a:focus {
   text-decoration: underline;
-}
+}
+ 
+   blockquote.tweet-xl p {
+    font-size: 22px;
+    line-height: 25px;
+  }

transfersh-web/styles/main.css

@@ -1941,17 +1941,25 @@ td.visible-print {
   padding: 0.2em 0;
 }
 #navigation ul {
-  float: right;
   list-style: none;
-  margin: 30px 0;
 }
 #navigation li {
   display: inline-block;
   padding: 0 10px;
 }
 #navigation h1 {
+  text-align: center;
   font-family: "Source code Pro", monospace;
-  float: left;
+  margin-bottom: 15px;
+}
+@media (min-width: 768px) {
+  #navigation ul {
+    float: right;
+    margin: 30px 0;
+  }
+  #navigation h1 {
+    float: left;
+  }
 }
 h2 {
   text-align: center;
@@ -2031,7 +2039,7 @@ a:hover {
   margin: 30px 0;
 }
 #home h2 {
-  font-size: 20px;
+  font-size: 40x;
 }
 @media (min-width: 768px) {
   #home {
@@ -2062,6 +2070,8 @@ a:hover {
   font-size: 30px;
 }
 #web {
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
   border: 1px dashed #85b5bb;
   padding-top: 10px;
   border-radius: 5px;
@@ -2076,10 +2086,31 @@ a:hover {
 }
 #web,
 #terminal {
-  min-height: 250px;
+  min-height: 150px;
+}
+@media (min-width: 768px) {
+  #web,
+  #terminal {
+    min-height: 270px;
+  }
+}
+#web .uploading i {
+  -webkit-transition: font 0.3s ease;
+  transition: font 0.3s ease;
+  font-size: 30px;
+}
+#web .uploading p.click {
+  margin-top: -10px;
+  font-size: 12px;
+}
+.dragged {
+  background: #f6f8f8;
+}
+.browse .uploading i {
+  font-size: 30px;
 }
 #terminal {
-  padding: 40px 20px;
+  padding: 10px;
   text-align: left;
   color: #fff;
   background: #36535a;
@@ -2089,10 +2120,21 @@ a:hover {
   font-family: "Source code Pro", monospace;
   font-size: 11px;
 }
+@media (min-width: 768px) {
+  #terminal {
+    padding: 30px 20px;
+  }
+}
 .progress {
   max-width: 80%;
   margin: 0 auto;
 }
+.all-files {
+  display: none;
+}
+.all-files .show {
+  display: block;
+}
 #features {
   background: #f6f8f8;
   text-align: center;
@@ -2110,6 +2152,9 @@ a:hover {
   color: #85b5bb;
   font-size: 100px;
 }
+#samples {
+  padding: 50px 0;
+}
 #samples h4 {
   margin-top: 30px;
 }
@@ -2165,7 +2210,7 @@ footer img {
   padding: 150px 0;
 }
 #contact i {
-  font-size: 60px;
+  font-size: 160px;
   color: #85b5bb;
 }
 @media (min-width: 768px) {
@@ -2198,9 +2243,6 @@ blockquote.twitter-tweet {
   text-align: right;
   border: 0;
 }
-blockquote.twitter-tweet .xl {
-  font-size: 18px;
-}
 blockquote.twitter-tweet p {
   font-size: 17px;
   font-weight: normal;
@@ -2217,6 +2259,10 @@ blockquote.twitter-tweet a:hover,
 blockquote.twitter-tweet a:focus {
   text-decoration: underline;
 }
+blockquote.tweet-xl p {
+  font-size: 22px;
+  line-height: 25px;
+}
 @font-face {
   font-family: "transfersh";
   src: url("../fonts/transfersh.eot");
@@ -2293,7 +2339,4 @@ blockquote.twitter-tweet a:focus {
 .icon-gplus:before {
   content: "p";
 }
-.uploading {
-  background: red;
-}
 /*# sourceMappingURL=/styles/main.css.map */

transfersh-web/styles/main.less

@@ -1,9 +1,8 @@
 @import "bootstrap.less";
 
-/*
-@import "../bower_components/octicons/octicons/octicons.less";
 
-@octicons-font-path: "../bower_components/octicons/octicons/";*/
+@import "../bower_components/";
+
 @import "config";
 @import "includes/global";
 @import "includes/home";
@@ -12,7 +11,3 @@
 @import "includes/transfersh-icons";
 
 
-.uploading {
-	background: red;
-}
-