@@ -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> Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p>— 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> Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p> <a href="https://twitter.com/arvestad/status/519507976491499521">— 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">— 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">— 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">— 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">— 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">— Jacob Lindgren (@jacoblindgren11) September 30, 2014</a> | |||
</p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">— 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"> | |||
— Dave Sims (@FloifyDave)October 1, 2014</a> | |||
— 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> | |||
@@ -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); | |||
} | |||
@@ -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 { | |||
} | |||
} | |||
@@ -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; | |||
} |
@@ -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; | |||
@@ -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; | |||
} |
@@ -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 */ |
@@ -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; | |||
} | |||