@@ -49,9 +49,9 @@ | |||||
borderopacity="1.0" | borderopacity="1.0" | ||||
inkscape:pageopacity="0.0" | inkscape:pageopacity="0.0" | ||||
inkscape:pageshadow="2" | inkscape:pageshadow="2" | ||||
inkscape:zoom="1.4" | |||||
inkscape:cx="596.66813" | |||||
inkscape:cy="145.67588" | |||||
inkscape:zoom="0.7" | |||||
inkscape:cx="189.78652" | |||||
inkscape:cy="256.28694" | |||||
inkscape:document-units="px" | inkscape:document-units="px" | ||||
inkscape:current-layer="layer1" | inkscape:current-layer="layer1" | ||||
showgrid="false" | showgrid="false" | ||||
@@ -160,13 +160,12 @@ | |||||
<rect | <rect | ||||
style="fill:#85b5bb;fill-opacity:1;stroke:none" | style="fill:#85b5bb;fill-opacity:1;stroke:none" | ||||
id="rect4487" | id="rect4487" | ||||
width="750" | |||||
height="29.555786" | |||||
x="93.957497" | |||||
y="365.26608" | |||||
rx="10" /> | |||||
width="789.90106" | |||||
height="49.982914" | |||||
x="85.371201" | |||||
y="355.16455" /> | |||||
<g | <g | ||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.488805,1196.9771)" | |||||
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)" | |||||
id="g24" | id="g24" | ||||
style="fill:#ff7050"> | style="fill:#ff7050"> | ||||
<g | <g | ||||
@@ -193,7 +192,7 @@ | |||||
</g> | </g> | ||||
</g> | </g> | ||||
<g | <g | ||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.488805,1196.9771)" | |||||
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.507)" | |||||
id="g40" | id="g40" | ||||
style="fill:#ffed5d"> | style="fill:#ffed5d"> | ||||
<g | <g | ||||
@@ -220,7 +219,7 @@ | |||||
</g> | </g> | ||||
</g> | </g> | ||||
<g | <g | ||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.837185,1196.9771)" | |||||
transform="matrix(1.4512649,0,0,-1.4512649,-115.0147,1453.4765)" | |||||
id="g56" | id="g56" | ||||
style="fill:#93de7f"> | style="fill:#93de7f"> | ||||
<g | <g | ||||
@@ -246,12 +245,5 @@ | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
<rect | |||||
style="fill:#36535a;fill-opacity:1;stroke:none" | |||||
id="rect4838" | |||||
width="750" | |||||
height="7.8571429" | |||||
x="93.957497" | |||||
y="387.40894" /> | |||||
</g> | </g> | ||||
</svg> | </svg> |
@@ -61,7 +61,9 @@ | |||||
<!-- <p class="lead">Share your files using this and drag and rop or click here to upload</p> --> | <!-- <p class="lead">Share your files using this and drag and rop or click here to upload</p> --> | ||||
<div class="row animated fadeInDown"> | <div class="row animated fadeInDown"> | ||||
<div id="from-terminal" class=" box col-md-8 col-md-offset-2 col-xs-12"> | <div id="from-terminal" class=" box col-md-8 col-md-offset-2 col-xs-12"> | ||||
<!-- <div class="terminal-top"></div> --> | |||||
<div class="terminal-top"> | |||||
</div> | |||||
<div id="terminal" class="terminal"> | <div id="terminal" class="terminal"> | ||||
<code> | <code> | ||||
<span class="code-title"># Upload using cURL</span> | <span class="code-title"># Upload using cURL</span> | ||||
@@ -72,7 +74,6 @@ | |||||
</code> | </code> | ||||
</div> | </div> | ||||
<div id="web"> | <div id="web"> | ||||
<code> | <code> | ||||
<br> | <br> | ||||
<span class="code-title"># Upload from web</span> | <span class="code-title"># Upload from web</span> | ||||
@@ -84,7 +85,8 @@ | |||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class='all-files'> | <div class='all-files'> | ||||
<h4>Download your files:</h4> | |||||
<br> | |||||
<span class="code-title"># Download all your files</span><br/> | |||||
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a> | <a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -144,32 +146,42 @@ | |||||
<div class="row"> | <div class="row"> | ||||
<div class="col-md-6 "> | <div class="col-md-6 "> | ||||
<h3>Uploading</h3> | <h3>Uploading</h3> | ||||
<h4>Uploading is easy using curl.</h4> | |||||
<code>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt</code> | |||||
<h4>Download the file.</h4> | |||||
<code>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt</code> | |||||
<div id="" class="terminal"> | |||||
<code> | |||||
<span class="code-title"># Upload is easy using cURL</span> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> | |||||
<br> | |||||
<span class="code-title"># Download the file</span> | |||||
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
<span class="code-title"># Upload multiple files</span> | |||||
<br>$ transfer hello.txt <br> | |||||
https://transfer.sh/eibhM/hello.txt | |||||
<br> | |||||
<br> | |||||
</code> | |||||
</div> | |||||
</div> | </div> | ||||
<div class="col-md-6 "> | <div class="col-md-6 "> | ||||
<h3>Make an alias</h3> | |||||
<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() { | |||||
<h3>Create an alias and add to .bashrc</h3> | |||||
<div id="" class="terminal"> | |||||
<code> | |||||
<span class="code-title"># Upload is easy using cURL</span> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> | |||||
<br> | |||||
<span class="code-title"># Download the file</span> | |||||
<br> | |||||
tmpfile = $( mktemp -t transfer ) | tmpfile = $( mktemp -t transfer ) | ||||
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; | curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; | ||||
cat $tmpfile; | cat $tmpfile; | ||||
rm -f $tmpfile; | rm -f $tmpfile; | ||||
} | |||||
alias transfer=transfers | |||||
</code> | |||||
</pre> | |||||
<h4>Now you can just use | |||||
<strong>transfer</strong>command</h4> | |||||
<code>$transfer hello.txt</code> | |||||
}<br> | |||||
<span class="code-title"># Now you can just use transfer command</span> | |||||
<br>$ transfer hello.txt <br> | |||||
<br> | |||||
</code> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -178,6 +190,49 @@ | |||||
<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="collapse " id="coll"> | ||||
<div class="row"> | |||||
<div class="col-md-6 "> | |||||
<h3>Uploading</h3> | |||||
<div id="" class="terminal"> | |||||
<code> | |||||
<span class="code-title"># Upload is easy using cURL</span> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> | |||||
<br> | |||||
<span class="code-title"># Download the file</span> | |||||
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
<span class="code-title"># Upload multiple files</span> | |||||
<br>$ transfer hello.txt <br> | |||||
https://transfer.sh/eibhM/hello.txt | |||||
<br> | |||||
<br> | |||||
</code> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-6 "> | |||||
<h3>Create an alias and add to .bashrc</h3> | |||||
<div id="" class="terminal"> | |||||
<code> | |||||
<span class="code-title"># Upload is easy using cURL</span> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> | |||||
<br> | |||||
<span class="code-title"># Download the file</span> | |||||
<br> | |||||
tmpfile = $( mktemp -t transfer ) | |||||
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; | |||||
cat $tmpfile; | |||||
rm -f $tmpfile; | |||||
}<br> | |||||
<span class="code-title"># Now you can just use transfer command</span> | |||||
<br>$ transfer hello.txt <br> | |||||
<br> | |||||
</code> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="row"> | <div class="row"> | ||||
<div class="col-md-6"> | <div class="col-md-6"> | ||||
<h3>Transfer multiple files</h3> | <h3>Transfer multiple files</h3> | ||||
@@ -17,7 +17,7 @@ | |||||
} | } | ||||
#web, #terminal { | |||||
#web, .terminal { | |||||
word-wrap: break-word; | word-wrap: break-word; | ||||
.code-title { | .code-title { | ||||
color: @red; | color: @red; | ||||
@@ -39,7 +39,7 @@ font-family: @font-family-mono; | |||||
#web { | #web { | ||||
margin-top: -2px; | margin-top: -2px; | ||||
.border-bottom-radius (10px); | |||||
.border-bottom-radius (5px); | |||||
padding-top: 0; | padding-top: 0; | ||||
padding-bottom: 50px; | padding-bottom: 50px; | ||||
width: 100%; | width: 100%; | ||||
@@ -66,8 +66,8 @@ font-family: @font-family-mono; | |||||
} | } | ||||
#terminal { | |||||
.border-top-radius (10px); | |||||
.terminal { | |||||
.border-top-radius (5px); | |||||
// min-height: 150px; | // min-height: 150px; | ||||
@media (min-width: @screen-sm-min) { | @media (min-width: @screen-sm-min) { | ||||
//min-height: 350px; | //min-height: 350px; | ||||
@@ -84,10 +84,21 @@ font-family: @font-family-mono; | |||||
} | } | ||||
#terminal { | |||||
background: url(../images/terminal.svg); | |||||
.terminal { | |||||
.border-top-radius (0px); | |||||
background: @dark-blue; | |||||
// background: url(../images/terminal.svg); | |||||
background-repeat: no-repeat; | |||||
background-size: cover; | |||||
} | |||||
.terminal-top { | |||||
.border-top-radius (5px); | |||||
background: url(../images/terminal-top.svg); | |||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
background-size: cover; | background-size: cover; | ||||
height: 30px; | |||||
} | } | ||||
.progress { | .progress { | ||||
@@ -21,18 +21,6 @@ | |||||
h4 { | h4 { | ||||
margin-top: 30px; | margin-top: 30px; | ||||
} | } | ||||
code { | |||||
display: block; | |||||
padding: 10px 20px; | |||||
background: @dark-blue; | |||||
font-family: @font-family-mono; | |||||
font-size: 12px; | |||||
border-radius: 5px; | |||||
color: #fff; | |||||
text-align: left; | |||||
font-weight: 400; | |||||
text-wrap:none; | |||||
} | |||||
padding: 50px 0; | padding: 50px 0; | ||||
text-align: center; | text-align: center; | ||||
.btn-cta { | .btn-cta { | ||||
@@ -42,6 +30,10 @@ | |||||
h4 { | h4 { | ||||
text-align: left; | text-align: left; | ||||
} | } | ||||
.terminal { | |||||
padding: 30px 15px; | |||||
font-size: 13px; | |||||
} | |||||
} | } | ||||
#share { | #share { | ||||
@@ -5500,7 +5500,7 @@ a:hover { | |||||
margin: 50px 0 25px 0; | margin: 50px 0 25px 0; | ||||
} | } | ||||
#web, | #web, | ||||
#terminal { | |||||
.terminal { | |||||
word-wrap: break-word; | word-wrap: break-word; | ||||
padding: 35px 0 0 10px; | padding: 35px 0 0 10px; | ||||
font-family: "Droid Sans Mono", monospace; | font-family: "Droid Sans Mono", monospace; | ||||
@@ -5509,23 +5509,23 @@ a:hover { | |||||
color: #fff; | color: #fff; | ||||
} | } | ||||
#web .code-title, | #web .code-title, | ||||
#terminal .code-title { | |||||
.terminal .code-title { | |||||
color: #e96e57; | color: #e96e57; | ||||
} | } | ||||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||||
#web, | #web, | ||||
#terminal { | |||||
.terminal { | |||||
padding: 50px 0 0 20px; | padding: 50px 0 0 20px; | ||||
} | } | ||||
} | } | ||||
#web code, | #web code, | ||||
#terminal code { | |||||
.terminal code { | |||||
font-family: "Droid Sans Mono", monospace; | font-family: "Droid Sans Mono", monospace; | ||||
} | } | ||||
#web { | #web { | ||||
margin-top: -2px; | margin-top: -2px; | ||||
border-bottom-right-radius: 10px; | |||||
border-bottom-left-radius: 10px; | |||||
border-bottom-right-radius: 5px; | |||||
border-bottom-left-radius: 5px; | |||||
padding-top: 0; | padding-top: 0; | ||||
padding-bottom: 50px; | padding-bottom: 50px; | ||||
width: 100%; | width: 100%; | ||||
@@ -5551,17 +5551,27 @@ a:hover { | |||||
#web a { | #web a { | ||||
color: #fff; | color: #fff; | ||||
} | } | ||||
#terminal { | |||||
border-top-right-radius: 10px; | |||||
border-top-left-radius: 10px; | |||||
.terminal { | |||||
border-top-right-radius: 5px; | |||||
border-top-left-radius: 5px; | |||||
} | } | ||||
.dragged { | .dragged { | ||||
background: #f6f8f8; | background: #f6f8f8; | ||||
} | } | ||||
#terminal { | |||||
background: url(../images/terminal.svg); | |||||
.terminal { | |||||
border-top-right-radius: 0px; | |||||
border-top-left-radius: 0px; | |||||
background: #36535a; | |||||
background-repeat: no-repeat; | |||||
background-size: cover; | |||||
} | |||||
.terminal-top { | |||||
border-top-right-radius: 5px; | |||||
border-top-left-radius: 5px; | |||||
background: url(../images/terminal-top.svg); | |||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
background-size: cover; | background-size: cover; | ||||
height: 30px; | |||||
} | } | ||||
.progress { | .progress { | ||||
max-width: 80%; | max-width: 80%; | ||||
@@ -5597,18 +5607,6 @@ a:hover { | |||||
#samples h4 { | #samples h4 { | ||||
margin-top: 30px; | margin-top: 30px; | ||||
} | } | ||||
#samples code { | |||||
display: block; | |||||
padding: 10px 20px; | |||||
background: #36535a; | |||||
font-family: "Droid Sans Mono", monospace; | |||||
font-size: 12px; | |||||
border-radius: 5px; | |||||
color: #fff; | |||||
text-align: left; | |||||
font-weight: 400; | |||||
text-wrap: none; | |||||
} | |||||
#samples .btn-cta { | #samples .btn-cta { | ||||
margin: 30px 0; | margin: 30px 0; | ||||
cursor: pointer; | cursor: pointer; | ||||
@@ -5616,6 +5614,10 @@ a:hover { | |||||
#samples h4 { | #samples h4 { | ||||
text-align: left; | text-align: left; | ||||
} | } | ||||
#samples .terminal { | |||||
padding: 30px 15px; | |||||
font-size: 13px; | |||||
} | |||||
#share { | #share { | ||||
text-align: center; | text-align: center; | ||||
background: #85b5bb; | background: #85b5bb; | ||||