@@ -16,7 +16,7 @@ | |||
<link rel="stylesheet" href="styles/main.css"> | |||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'> | |||
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'> | |||
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600' rel='stylesheet' type='text/css'> | |||
<!-- build:js scripts/vendor/modernizr.js --> | |||
<script src="bower_components/modernizr/modernizr.js"></script> | |||
@@ -58,45 +58,46 @@ | |||
<h2> | |||
Easy file sharing from the command line | |||
</h2> | |||
<!-- <p class="lead">Share your files using this and drag and rop or click here to upload</p> --> | |||
<div class="row animated fadeInDown"> | |||
<div id="from-terminal" class=" box col-md-6 col-xs-12"> | |||
<h3>Share from terminal</h3> | |||
<div id="terminal"> | |||
<pre> | |||
<code id="terminal-code" class="bash">ls this</code></pre> | |||
</div> | |||
</div> | |||
<div id="from-web" class="col-md-6 col-xs-12"> | |||
<h3>Share from web</h3> | |||
<div id="web"> | |||
<a class="browse" href="#"> | |||
<i class="icon-upload-cloud"></i> | |||
<p class="click">Drag your files here to upload or click to browse</p> | |||
</a> | |||
<input type="file" multiple="multiple" style='display: none;' /> | |||
<ul class='queue' style='; list-style-type: none; margin: 0;'> | |||
<li> | |||
</li> | |||
</ul> | |||
<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 id="from-terminal" class=" box col-md-8 col-md-offset-2 col-xs-12"> | |||
<div id="terminal" class="terminal"> | |||
<div class="terminal-top"></div> | |||
<div class="examples"> | |||
<code class=""> | |||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt r | |||
<br> | |||
<br>$ transfer hello.txt #################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||
<br> | |||
<br># Upload from web. Drag your files here, or <a class="browse" href="#"> click to browse.</a> | |||
</code> | |||
<div id="web"> | |||
<input type="file" multiple="multiple" style='display: none;' /> | |||
<ul class='queue' style='; list-style-type: none; margin: 0;'> | |||
<li> | |||
</li> | |||
</ul> | |||
<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> | |||
</div> | |||
</div> | |||
</div> | |||
<div> | |||
<br> | |||
<br> | |||
<a href="#features" class="btn-cta">learn more</i> </a> | |||
<br> | |||
<br> | |||
</div> | |||
</section> | |||
<section id="features"> | |||
<div class="wrapper container"> | |||
<div class="row animated fadeInDown "> | |||
@@ -106,7 +107,7 @@ | |||
</div> | |||
<div class="col-md-3 col-xs-6"> | |||
<i class="icon-link"></i> | |||
<h3>Share files with an URL</h3> | |||
<h3>Share files with a URL</h3> | |||
</div> | |||
<div class="col-md-3 col-xs-6"> | |||
<i class="icon-database"></i> | |||
@@ -151,13 +152,15 @@ | |||
<h4>Create an alias, and add it to .bashrc for faster use</h4> | |||
<pre> | |||
<code id="terminal-code" class="bash"> | |||
# transfer.sh alias | |||
# write output to tmpfile because of progress bar | |||
$ transfer() | |||
{ | |||
tmpfile=$( mktemp -t transfer ) | |||
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; cat $tmpfile; rm -f $tmpfile; } | |||
alias transfer=transfer | |||
# transfer.sh alias | |||
# write output to tmpfile because of progress bar | |||
$ transfer() { | |||
tmpfile = $( mktemp -t transfer ) | |||
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; | |||
cat $tmpfile; | |||
rm -f $tmpfile; | |||
} | |||
alias transfer=transfers | |||
</code> | |||
</pre> | |||
@@ -167,38 +170,37 @@ | |||
</div> | |||
</div> | |||
</div> | |||
<a class="btn-cta" data-target="#coll" data-toggle="collapse">More examples</a> | |||
<a class="btn-cta" data-target="#coll" data-toggle="collapse">More examples</a> | |||
<div class="collapse " id="coll"> | |||
<div class="row"> | |||
<div class="col-md-6"> | |||
<h3>Transfer multiple files</h3> | |||
<h4>Upload multiple files at once | |||
</h4> | |||
<code>$ curl -i -F filedata=@/tmp/hello.txt -F filedata=@/tmp/hello2.txt https://transfer.sh/</code> | |||
<div class="collapse " id="coll"> | |||
<div class="row"> | |||
<div class="col-md-6"> | |||
<h3>Transfer multiple files</h3> | |||
<h4>Upload multiple files at once | |||
</h4> | |||
<code>$ curl -i -F filedata=@/tmp/hello.txt -F filedata=@/tmp/hello2.txt https://transfer.sh/</code> | |||
<h4>Combining downloads as zip or tar archive</h4> | |||
<code>$ curl https://transfer.sh/(15HKz/hello.txt,15HKz/hello.txt).tar.gz</code> | |||
<br> | |||
<h4>Combining downloads as zip or tar archive</h4> | |||
<code>$ curl https://transfer.sh/(15HKz/hello.txt,15HKz/hello.txt).tar.gz</code> | |||
<br> | |||
<code>$ curl https://transfer.sh/(15HKz/hello.txt,15HKz/hello.txt).zip</code> | |||
<code>$ curl https://transfer.sh/(15HKz/hello.txt,15HKz/hello.txt).zip</code> | |||
</div> | |||
<div class="col-md-6"> | |||
<h3>Encrypt your files before the transfer</h3> | |||
<h4>You can encrypt files using gpg. The following command will encrypt the data before it leaves your server using the password you enter and upload it to transfer.sh.</h4> | |||
<h4></h4> | |||
<code>$ cat /tmp/hello.txt|gpg -ac -o-|curl -X PUT --upload-file "-" https://transfer.sh/test.txt</code> | |||
<h4>Encrypt and upload</h4> | |||
<code>$ curl https://transfer.sh/1lDau/test.txt|gpg -o- > /tmp/hello.txt</code> | |||
</div> | |||
</div> | |||
<div class="col-md-6"> | |||
<h3>Encrypt your files before the transfer</h3> | |||
<h4>You can encrypt files using gpg. The following command will encrypt the data before it leaves your server using the password you enter and upload it to transfer.sh.</h4> | |||
<h4></h4> | |||
<code>$ cat /tmp/hello.txt|gpg -ac -o-|curl -X PUT --upload-file "-" https://transfer.sh/test.txt</code> | |||
<h4>Encrypt and upload</h4> | |||
<code>$ curl https://transfer.sh/1lDau/test.txt|gpg -o- > /tmp/hello.txt</code> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</section> | |||
@@ -326,6 +328,7 @@ | |||
<!-- build:js scripts/main.js --> | |||
<script src="bower_components/jquery/dist/jquery.js"></script> | |||
<script src="bower_components/highlightjs/highlight.pack.js"></script> | |||
<!-- </*script*/ src="bower_components/typed.js/js/typed.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,9 +1,9 @@ | |||
$(document).ready(function() { | |||
hljs.initHighlightingOnLoad(); | |||
/* hljs.initHighlightingOnLoad();*/ | |||
// 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 "], | |||
/* $("#terminal-code").typed({ | |||
strings: ["# Upload using this \n acurl --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 | |||
@@ -13,42 +13,37 @@ $(document).ready(function() { | |||
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 typewriter = require('typewriter'); | |||
var twSpan = document.getElementById('terminal-code'); | |||
var tw = typewriter(twSpan).withAccuracy(100) | |||
.withMinimumSpeed(17) | |||
.withMinimumSpeed() | |||
.withMaximumSpeed(25) | |||
.build(); | |||
tw.put('$ ') | |||
tw.put('$ ') | |||
.put('<span class="hljs-comment"># Upload using cURL </span>') | |||
.waitRange(500, 1000) | |||
.type('curl --upload-file ./hello.txt https://transfer.sh/hello.txt') | |||
.put('<br/>') | |||
.type('$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt') | |||
.put('<br/>') | |||
.put('https://transfer.sh/66nb8/hello.txt ') | |||
.put('<br/>') | |||
.put('$ ') | |||
.waitRange(500, 1000) | |||
.put('<br/>') | |||
.put('$ ') | |||
.waitRange(500, 1000) | |||
.put('<span class="hljs-comment"># Upload using alias</span>') | |||
.put('<br/>') | |||
.put('$ ') | |||
.waitRange(500, 1000) | |||
.type('transfer hello.txt') | |||
.put('<br/>') | |||
.type('####################################################') | |||
.put(' 100.0%') | |||
.put('<br/>') | |||
.put('https://transfer.sh/eibhM/hello.txt ') | |||
.put('<br/>') | |||
.put('$ ') | |||
.waitRange(1000, 1500) | |||
.put('<br/>') | |||
.put('$ ') | |||
.put('https://transfer.sh/eibhM/hello.txt ')*/ | |||
// Smooth scrolling | |||
$('a[href*=#]:not([href=#])').click(function() { | |||
@@ -66,7 +61,7 @@ $(document).ready(function() { | |||
// function resizePages() { | |||
// var h = $(window).height(); | |||
// var h = $(window).heightP(); | |||
// var height = h < 600 ? 600 : h; | |||
/* $('section').css('height',height); | |||
$('#home').css('height',height*0.98); | |||
@@ -82,15 +77,16 @@ $(document).ready(function() { | |||
$('.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>')); | |||
li.append($('<div><div class="progress active upload-progress" style="margin-bottom: 0;"><div class="bar" style="width: 0%;">############################>span></span></div></div><p>Uploading... ' + file.name + '</p></div>')); | |||
$(li).appendTo($('.queue')); | |||
var xhr = new XMLHttpRequest(); | |||
xhr.upload.addEventListener("progress", function(e) { | |||
var pc = parseInt((e.loaded / e.total * 100)); | |||
$('.upload-progress', $(li)).show(); | |||
/* $('.upload-progress', $(li)).show();*/ | |||
$('.upload-progress .bar', $(li)).css('width', pc + "%"); | |||
$('.upload-progress .bar .span').append( pc + "%"); | |||
}, false); | |||
xhr.onreadystatechange = function(e) { | |||
@@ -9,7 +9,7 @@ | |||
// Core CSS | |||
@import "../bower_components/bootstrap/less/scaffolding.less"; | |||
@import "../bower_components/bootstrap/less/type.less"; | |||
//@import "../bower_components/bootstrap/less/code.less"; | |||
/* @import "../bower_components/bootstrap/less/code.less"; */ | |||
@import "../bower_components/bootstrap/less/grid.less"; | |||
//@import "../bower_components/bootstrap/less/tables.less"; | |||
//@import "../bower_components/bootstrap/less/forms.less"; | |||
@@ -8,14 +8,15 @@ | |||
@navbar-default-bg: #fff; | |||
@lik-color: @text-color; | |||
@text-color: @dark-blue; | |||
@link-color: @dark-gray; | |||
@progress-bg: @blue; | |||
@text-color: @dark-gray; | |||
@progress-bg: @blue; | |||
// Typography | |||
@font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
@font-family-mono: "Source code Pro", monospace; | |||
@font-family-mono: "Source Code Pro", monospace; | |||
@headings-font-family: @font-family-base; | |||
@headings-font-weight: 100; | |||
@@ -18,6 +18,9 @@ | |||
text-align: center; | |||
font-family: @font-family-mono; | |||
margin-bottom: 15px; | |||
color: #3b3b3b; | |||
font-weight: 600; | |||
letter-spacing: -1px; | |||
} | |||
@media (min-width: @screen-sm-min) { | |||
@@ -49,6 +52,7 @@ h2 { | |||
color: @red; | |||
border-radius: 10px; | |||
display: inline-block; | |||
text-decoration: none; | |||
&:hover { | |||
text-decoration: none; | |||
border-color: @dark-blue; | |||
@@ -71,14 +75,18 @@ img { | |||
margin: 0 auto; | |||
} | |||
a { | |||
text-decoration: underline; | |||
color: @dark-blue; | |||
} | |||
a:hover { | |||
text-decoration: none; | |||
color: inherit ; | |||
} | |||
::selection { | |||
background: @red; /* WebKit/Blink Browsers */ | |||
background: @red; | |||
} | |||
::-moz-selection { | |||
background: @red; /* Gecko Browsers */ | |||
background: @red; | |||
} |
@@ -1,103 +1,94 @@ | |||
#home { | |||
text-align: center; | |||
h2 { | |||
font-size: 40px; | |||
} | |||
@media (min-width: @screen-sm-min) { | |||
padding: 50px; | |||
h2 { | |||
font-size: 60px; | |||
font-size: 45px; | |||
margin-top: -10px; | |||
margin-bottom: 45px; | |||
} | |||
} | |||
} | |||
#from-terminal, | |||
#from-web { | |||
.make-md-column(6); | |||
#from-terminal, #from-web { | |||
h3 { | |||
font-size: 30px; | |||
} | |||
} | |||
#web { | |||
#web { | |||
.transition(all @animation-duration ease); | |||
border: 1px dashed @blue; | |||
padding-top: 10px; | |||
i { | |||
font-size: 160px; | |||
font-size: 100px; | |||
color: @blue; | |||
display: block; | |||
margin-top: -20px; | |||
} | |||
p.click { | |||
margin-top: -66px; | |||
font-size: 18px; | |||
} | |||
border-radius: 5px; | |||
.btn-cta { | |||
.btn-cta { | |||
padding: 5px 10px; | |||
font-size: 14px; | |||
} | |||
cursor: pointer; | |||
.click { | |||
margin-top: -50px; | |||
color: #fff; | |||
} | |||
.queue { | |||
margin: 0; | |||
list-style: none; | |||
padding: 0; | |||
} | |||
a { | |||
color: #fff; | |||
} | |||
} | |||
#web, #terminal { | |||
#terminal { | |||
min-height: 150px; | |||
@media (min-width: @screen-sm-min) { | |||
min-height: 270px; | |||
min-height: 350px; | |||
} | |||
.examples { | |||
padding: 10px 0px; | |||
} | |||
code { | |||
font-family: @font-family-mono; | |||
} | |||
} | |||
#web .uploading { | |||
i { | |||
.transition(font @animation-duration ease); | |||
font-size: 40px; | |||
} | |||
p.click { | |||
margin-top: -10px; | |||
p.click { | |||
font-size: 14px; | |||
} | |||
} | |||
.dragged { | |||
background: @light-gray; | |||
} | |||
#terminal { | |||
padding: 10px; | |||
text-align: left; | |||
color: #fff; | |||
background: @dark-blue; | |||
background: url(../images/terminal.svg); | |||
background-repeat: no-repeat; | |||
background-repeat: no-repeat; | |||
background-size: 100% auto; | |||
font-family: @font-family-mono; | |||
font-size: 11px; | |||
font-size: 15px; | |||
@media (min-width: @screen-sm-min) { | |||
padding: 30px 20px; | |||
padding: 10px 20px; | |||
} | |||
} | |||
.progress { | |||
max-width: 80%; | |||
margin: 0 auto; | |||
} | |||
.all-files { | |||
display: none; | |||
} | |||
.all-files .show { | |||
display:block; | |||
} | |||
display: block; | |||
} |
@@ -1,5 +1,4 @@ | |||
@charset "UTF-8"; | |||
@import "../bower_components/highlightjs/styles/zenburn.css"; | |||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ | |||
article, | |||
aside, | |||
@@ -260,7 +259,7 @@ body { | |||
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
font-size: 14px; | |||
line-height: 1.42857143; | |||
color: #36535a; | |||
color: #3b3b3b; | |||
background-color: #ffffff; | |||
} | |||
input, | |||
@@ -272,12 +271,12 @@ textarea { | |||
line-height: inherit; | |||
} | |||
a { | |||
color: #428bca; | |||
color: #3b3b3b; | |||
text-decoration: none; | |||
} | |||
a:hover, | |||
a:focus { | |||
color: #2a6496; | |||
color: #151515; | |||
text-decoration: underline; | |||
} | |||
a:focus { | |||
@@ -623,6 +622,7 @@ address { | |||
font-style: normal; | |||
line-height: 1.42857143; | |||
} | |||
/* @import "../bower_components/bootstrap/less/code.less"; */ | |||
.container { | |||
margin-right: auto; | |||
margin-left: auto; | |||
@@ -5373,8 +5373,11 @@ body { | |||
} | |||
#navigation h1 { | |||
text-align: center; | |||
font-family: "Source code Pro", monospace; | |||
font-family: "Source Code Pro", monospace; | |||
margin-bottom: 15px; | |||
color: #3b3b3b; | |||
font-weight: 600; | |||
letter-spacing: -1px; | |||
} | |||
@media (min-width: 768px) { | |||
#navigation ul { | |||
@@ -5403,6 +5406,7 @@ h2 { | |||
color: #e96e57; | |||
border-radius: 10px; | |||
display: inline-block; | |||
text-decoration: none; | |||
} | |||
.btn-cta:hover { | |||
text-decoration: none; | |||
@@ -5452,17 +5456,19 @@ img { | |||
max-width: 100%; | |||
margin: 0 auto; | |||
} | |||
a { | |||
text-decoration: underline; | |||
color: #36535a; | |||
} | |||
a:hover { | |||
text-decoration: none; | |||
color: inherit ; | |||
} | |||
::selection { | |||
background: #e96e57; | |||
/* WebKit/Blink Browsers */ | |||
} | |||
::-moz-selection { | |||
background: #e96e57; | |||
/* Gecko Browsers */ | |||
} | |||
#home { | |||
text-align: center; | |||
@@ -5475,25 +5481,11 @@ a:hover { | |||
padding: 50px; | |||
} | |||
#home h2 { | |||
font-size: 60px; | |||
font-size: 45px; | |||
margin-top: -10px; | |||
margin-bottom: 45px; | |||
} | |||
} | |||
#from-terminal, | |||
#from-web { | |||
position: relative; | |||
min-height: 1px; | |||
padding-left: 38px; | |||
padding-right: 38px; | |||
} | |||
@media (min-width: 992px) { | |||
#from-terminal, | |||
#from-web { | |||
float: left; | |||
width: 50%; | |||
} | |||
} | |||
#from-terminal h3, | |||
#from-web h3 { | |||
font-size: 30px; | |||
@@ -5501,59 +5493,67 @@ a:hover { | |||
#web { | |||
-webkit-transition: all 0.3s ease; | |||
transition: all 0.3s ease; | |||
border: 1px dashed #85b5bb; | |||
padding-top: 10px; | |||
border-radius: 5px; | |||
cursor: pointer; | |||
} | |||
#web i { | |||
font-size: 160px; | |||
font-size: 100px; | |||
color: #85b5bb; | |||
} | |||
#web p.click { | |||
margin-top: -66px; | |||
font-size: 18px; | |||
display: block; | |||
margin-top: -20px; | |||
} | |||
#web .btn-cta { | |||
padding: 5px 10px; | |||
font-size: 14px; | |||
} | |||
#web, | |||
#web .click { | |||
margin-top: -50px; | |||
color: #fff; | |||
} | |||
#web .queue { | |||
margin: 0; | |||
list-style: none; | |||
padding: 0; | |||
} | |||
#web a { | |||
color: #fff; | |||
} | |||
#terminal { | |||
min-height: 150px; | |||
} | |||
@media (min-width: 768px) { | |||
#web, | |||
#terminal { | |||
min-height: 270px; | |||
min-height: 350px; | |||
} | |||
} | |||
#terminal .examples { | |||
padding: 10px 0px; | |||
} | |||
#terminal code { | |||
font-family: "Source Code Pro", monospace; | |||
} | |||
#web .uploading i { | |||
-webkit-transition: font 0.3s ease; | |||
transition: font 0.3s ease; | |||
font-size: 40px; | |||
} | |||
#web .uploading p.click { | |||
margin-top: -10px; | |||
font-size: 14px; | |||
} | |||
.dragged { | |||
background: #f6f8f8; | |||
} | |||
#terminal { | |||
padding: 10px; | |||
text-align: left; | |||
color: #fff; | |||
background: #36535a; | |||
background: url(../images/terminal.svg); | |||
background-repeat: no-repeat; | |||
background-size: 100% auto; | |||
font-family: "Source code Pro", monospace; | |||
font-size: 11px; | |||
font-family: "Source Code Pro", monospace; | |||
font-size: 15px; | |||
} | |||
@media (min-width: 768px) { | |||
#terminal { | |||
padding: 30px 20px; | |||
padding: 10px 20px; | |||
} | |||
} | |||
.progress { | |||
@@ -5594,7 +5594,7 @@ a:hover { | |||
display: block; | |||
padding: 10px 20px; | |||
background: #36535a; | |||
font-family: "Source code Pro", monospace; | |||
font-family: "Source Code Pro", monospace; | |||
font-size: 12px; | |||
border-radius: 5px; | |||
color: #fff; | |||
@@ -2,9 +2,6 @@ | |||
@import "../bower_components/animate.less/animate.less"; | |||
@import "../bower_components/highlightjs/styles/zenburn.css"; | |||
@import "config"; | |||
@import "includes/global"; | |||