@@ -7,139 +7,31 @@ | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||||
xmlns:svg="http://www.w3.org/2000/svg" | xmlns:svg="http://www.w3.org/2000/svg" | ||||
xmlns="http://www.w3.org/2000/svg" | xmlns="http://www.w3.org/2000/svg" | ||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
version="1.1" | |||||
width="750" | width="750" | ||||
height="30" | height="30" | ||||
id="svg4149" | |||||
version="1.1" | |||||
inkscape:version="0.48.3.1 r9886" | |||||
sodipodi:docname="terminal-top.svg"> | |||||
id="svg4149"> | |||||
<defs | <defs | ||||
id="defs4151"> | id="defs4151"> | ||||
<clipPath | <clipPath | ||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath60"> | id="clipPath60"> | ||||
<path | <path | ||||
inkscape:connector-curvature="0" | |||||
d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | ||||
id="path62" /> | id="path62" /> | ||||
</clipPath> | </clipPath> | ||||
<clipPath | <clipPath | ||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath44"> | id="clipPath44"> | ||||
<path | <path | ||||
inkscape:connector-curvature="0" | |||||
d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" | d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" | ||||
id="path46" /> | id="path46" /> | ||||
</clipPath> | </clipPath> | ||||
<clipPath | <clipPath | ||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath28"> | id="clipPath28"> | ||||
<path | <path | ||||
inkscape:connector-curvature="0" | |||||
d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | ||||
id="path30" /> | id="path30" /> | ||||
</clipPath> | </clipPath> | ||||
</defs> | </defs> | ||||
<sodipodi:namedview | |||||
id="base" | |||||
pagecolor="#ffffff" | |||||
bordercolor="#666666" | |||||
borderopacity="1.0" | |||||
inkscape:pageopacity="0.0" | |||||
inkscape:pageshadow="2" | |||||
inkscape:zoom="0.7" | |||||
inkscape:cx="189.78652" | |||||
inkscape:cy="256.28694" | |||||
inkscape:document-units="px" | |||||
inkscape:current-layer="layer1" | |||||
showgrid="false" | |||||
fit-margin-top="0" | |||||
fit-margin-left="0" | |||||
fit-margin-right="0" | |||||
fit-margin-bottom="0" | |||||
borderlayer="true" | |||||
inkscape:showpageshadow="false" | |||||
showborder="true" | |||||
showguides="false" | |||||
inkscape:window-width="1680" | |||||
inkscape:window-height="1023" | |||||
inkscape:window-x="0" | |||||
inkscape:window-y="0" | |||||
inkscape:window-maximized="1"> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,482.82629" | |||||
id="guide4830" /> | |||||
<sodipodi:guide | |||||
position="482.82629,0" | |||||
orientation="-25.270071,0" | |||||
id="guide4832" /> | |||||
<sodipodi:guide | |||||
position="482.82629,25.270071" | |||||
orientation="0,-482.82629" | |||||
id="guide4834" /> | |||||
<sodipodi:guide | |||||
position="0,25.270071" | |||||
orientation="25.270071,0" | |||||
id="guide4836" /> | |||||
<inkscape:grid | |||||
type="xygrid" | |||||
id="grid4844" | |||||
empspacing="5" | |||||
visible="true" | |||||
enabled="true" | |||||
snapvisiblegridlinesonly="true" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,1000" | |||||
id="guide4884" /> | |||||
<sodipodi:guide | |||||
position="1000,0" | |||||
orientation="-25,0" | |||||
id="guide4886" /> | |||||
<sodipodi:guide | |||||
position="1000,25" | |||||
orientation="0,-1000" | |||||
id="guide4888" /> | |||||
<sodipodi:guide | |||||
position="0,25" | |||||
orientation="25,0" | |||||
id="guide4890" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,750" | |||||
id="guide4892" /> | |||||
<sodipodi:guide | |||||
position="750,0" | |||||
orientation="-25,0" | |||||
id="guide4894" /> | |||||
<sodipodi:guide | |||||
position="750,25" | |||||
orientation="0,-750" | |||||
id="guide4896" /> | |||||
<sodipodi:guide | |||||
position="0,25" | |||||
orientation="25,0" | |||||
id="guide4898" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,750" | |||||
id="guide4999" /> | |||||
<sodipodi:guide | |||||
position="750,0" | |||||
orientation="-30,0" | |||||
id="guide5001" /> | |||||
<sodipodi:guide | |||||
position="750,30" | |||||
orientation="0,-750" | |||||
id="guide5003" /> | |||||
<sodipodi:guide | |||||
position="0,30" | |||||
orientation="30,0" | |||||
id="guide5005" /> | |||||
</sodipodi:namedview> | |||||
<metadata | <metadata | ||||
id="metadata4154"> | id="metadata4154"> | ||||
<rdf:RDF> | <rdf:RDF> | ||||
@@ -153,17 +45,12 @@ | |||||
</rdf:RDF> | </rdf:RDF> | ||||
</metadata> | </metadata> | ||||
<g | <g | ||||
inkscape:label="Layer 1" | |||||
inkscape:groupmode="layer" | |||||
id="layer1" | |||||
transform="translate(-93.957497,-365.26607)"> | |||||
<rect | |||||
style="fill:#85b5bb;fill-opacity:1;stroke:none" | |||||
transform="translate(-93.957497,-365.26607)" | |||||
id="layer1"> | |||||
<path | |||||
d="m 85.371201,355.16455 789.901059,0 0,49.98291 -789.901059,0 z" | |||||
id="rect4487" | id="rect4487" | ||||
width="789.90106" | |||||
height="49.982914" | |||||
x="85.371201" | |||||
y="355.16455" /> | |||||
style="fill:#85b5bb;fill-opacity:1;stroke:none" /> | |||||
<g | <g | ||||
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)" | transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)" | ||||
id="g24" | id="g24" | ||||
@@ -184,9 +71,8 @@ | |||||
style="fill:#ff7050"> | style="fill:#ff7050"> | ||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path38" | id="path38" | ||||
inkscape:connector-curvature="0" /> | |||||
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
@@ -211,9 +97,8 @@ | |||||
style="fill:#ffed5d"> | style="fill:#ffed5d"> | ||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path54" | id="path54" | ||||
inkscape:connector-curvature="0" /> | |||||
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
@@ -238,9 +123,8 @@ | |||||
style="fill:#93de7f"> | style="fill:#93de7f"> | ||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path70" | id="path70" | ||||
inkscape:connector-curvature="0" /> | |||||
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
@@ -17,7 +17,7 @@ | |||||
<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+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'> | ||||
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'> | ||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'> | |||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'> | |||||
<!-- build:js scripts/vendor/modernizr.js --> | <!-- build:js scripts/vendor/modernizr.js --> | ||||
<script src="bower_components/modernizr/modernizr.js"></script> | <script src="bower_components/modernizr/modernizr.js"></script> | ||||
<!-- endbuild --> | <!-- endbuild --> | ||||
@@ -45,7 +45,7 @@ | |||||
<div class="wrapper"> | <div class="wrapper"> | ||||
<h1>transfer.sh</h1> | <h1>transfer.sh</h1> | ||||
<ul> | <ul> | ||||
<li><a href="#samples">Sample use cases</a> | |||||
<li><a href="#samples">sample use cases</a> | |||||
</li> | </li> | ||||
<li><a href="#contact">contact us</a> | <li><a href="#contact">contact us</a> | ||||
</li> | </li> | ||||
@@ -65,40 +65,43 @@ | |||||
</div> | </div> | ||||
<div id="terminal" class="terminal"> | <div id="terminal" class="terminal"> | ||||
<code> | |||||
<span class="code-title"># Upload 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"># Create an alias</span> | |||||
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
</code> | |||||
<code> | |||||
<span class="code-title"># Upload 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"># Create an alias</span> | |||||
<br>$ transfer hello.txt | |||||
<br>##################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
</code>ch | |||||
</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> | ||||
<br>Drag your files here, or <a class="browse" href="#"> click to browse.</a> | <br>Drag your files here, or <a class="browse" href="#"> click to browse.</a> | ||||
</code> | </code> | ||||
<input type="file" multiple="multiple" style='display: none;' /> | <input type="file" multiple="multiple" style='display: none;' /> | ||||
<ul class='queue' style='; list-style-type: none; margin: 0;'> | |||||
<ul class='queue'> | |||||
<li> | <li> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
<div class='all-files'> | <div class='all-files'> | ||||
<br> | <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> | |||||
<div> | |||||
<span class="code-title"># Download all your files</span> | |||||
<br/> | |||||
<br/> | |||||
<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> | ||||
</div> | |||||
<div> | |||||
<a href="#features" class="btn-cta btn-home">learn more</i> </a> | |||||
<div> | |||||
<a href="#features" class="btn-cta btn-home">learn more</i> </a> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | |||||
</section> | </section> | ||||
@@ -146,41 +149,41 @@ | |||||
<div class="row"> | <div class="row"> | ||||
<div class="col-md-6 "> | <div class="col-md-6 "> | ||||
<h3>Uploading</h3> | <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 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> | ||||
<div class="col-md-6 "> | <div class="col-md-6 "> | ||||
<h3>Create an alias and add to .bashrc</h3> | <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> | |||||
<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> | |||||
<span class="code-title"># Now you can just use transfer command</span> | |||||
<br>$ transfer hello.txt | |||||
<br> | |||||
<br> | |||||
</code> | |||||
</code> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -190,49 +193,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"> | |||||
<div class="row"> | |||||
<div class="col-md-6 "> | |||||
<h3>Uploading</h3> | |||||
<div id="" class="terminal"> | |||||
<code> | <code> | ||||
<span class="code-title"># Upload is easy using cURL</span> | <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>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt | |||||
<br> | |||||
<br> | <br> | ||||
<span class="code-title"># Download the file</span> | <span class="code-title"># Download the file</span> | ||||
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
<br>$ transfer hello.txt | |||||
<br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
<span class="code-title"># Upload multiple files</span> | <span class="code-title"># Upload multiple files</span> | ||||
<br>$ transfer hello.txt <br> | |||||
https://transfer.sh/eibhM/hello.txt | |||||
<br>$ transfer hello.txt | |||||
<br>https://transfer.sh/eibhM/hello.txt | |||||
<br> | <br> | ||||
<br> | <br> | ||||
</code> | </code> | ||||
</div> | |||||
</div> | |||||
</div> | |||||
<div class="col-md-6 "> | |||||
<h3>Create an alias and add to .bashrc</h3> | |||||
<div id="" class="terminal"> | |||||
</div> | |||||
<div class="col-md-6 "> | |||||
<h3>Create an alias and add to .bashrc</h3> | |||||
<div id="" class="terminal"> | |||||
<code> | <code> | ||||
<span class="code-title"># Upload is easy using cURL</span> | <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>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt | |||||
<br> | |||||
<br> | <br> | ||||
<span class="code-title"># Download the file</span> | <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> | <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> | <span class="code-title"># Now you can just use transfer command</span> | ||||
<br>$ transfer hello.txt <br> | |||||
<br>$ transfer hello.txt | |||||
<br> | |||||
<br> | <br> | ||||
</code> | </code> | ||||
</div> | |||||
</div> | </div> | ||||
</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> | ||||
@@ -1,49 +1,49 @@ | |||||
$(document).ready(function() { | $(document).ready(function() { | ||||
/* hljs.initHighlightingOnLoad();*/ | |||||
/* hljs.initHighlightingOnLoad();*/ | |||||
// Terminal typing animation | // Terminal typing animation | ||||
/* $("#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 | |||||
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-code'); | |||||
var tw = typewriter(twSpan).withAccuracy(100) | |||||
.withMinimumSpeed() | |||||
.withMaximumSpeed(25) | |||||
.build(); | |||||
tw.put('$ ') | |||||
.put('<span class="hljs-comment"># Upload using cURL </span>') | |||||
.waitRange(500, 1000) | |||||
.put('<br/>') | |||||
.type('$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt') | |||||
.put('<br/>') | |||||
.put('https://transfer.sh/66nb8/hello.txt ') | |||||
.put('<br/>') | |||||
.waitRange(500, 1000) | |||||
.put('<br/>') | |||||
.waitRange(500, 1000) | |||||
.put('<span class="hljs-comment"># Upload using alias</span>') | |||||
.put('<br/>') | |||||
.type('transfer hello.txt') | |||||
.put('<br/>') | |||||
.type('####################################################') | |||||
.put(' 100.0%') | |||||
.put('<br/>') | |||||
.put('https://transfer.sh/eibhM/hello.txt ')*/ | |||||
/* $("#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 | |||||
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-code'); | |||||
var tw = typewriter(twSpan).withAccuracy(100) | |||||
.withMinimumSpeed() | |||||
.withMaximumSpeed(25) | |||||
.build(); | |||||
tw.put('$ ') | |||||
.put('<span class="hljs-comment"># Upload using cURL </span>') | |||||
.waitRange(500, 1000) | |||||
.put('<br/>') | |||||
.type('$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt') | |||||
.put('<br/>') | |||||
.put('https://transfer.sh/66nb8/hello.txt ') | |||||
.put('<br/>') | |||||
.waitRange(500, 1000) | |||||
.put('<br/>') | |||||
.waitRange(500, 1000) | |||||
.put('<span class="hljs-comment"># Upload using alias</span>') | |||||
.put('<br/>') | |||||
.type('transfer hello.txt') | |||||
.put('<br/>') | |||||
.type('####################################################') | |||||
.put(' 100.0%') | |||||
.put('<br/>') | |||||
.put('https://transfer.sh/eibhM/hello.txt ')*/ | |||||
// Smooth scrolling | // Smooth scrolling | ||||
$('a[href*=#]:not([href=#])').click(function() { | $('a[href*=#]:not([href=#])').click(function() { | ||||
@@ -77,21 +77,21 @@ $(document).ready(function() { | |||||
$('.browse').addClass('uploading'); | $('.browse').addClass('uploading'); | ||||
var li = $('<li style="clear:both;"/>'); | var li = $('<li style="clear:both;"/>'); | ||||
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.append($('<div><div class="upload-progress"><span></span><div class="bar" style="width:0%;">####################################################</div></div><p>Uploading... ' + file.name + '</p></div>')); | |||||
$(li).appendTo($('.queue')); | $(li).appendTo($('.queue')); | ||||
var xhr = new XMLHttpRequest(); | var xhr = new XMLHttpRequest(); | ||||
xhr.upload.addEventListener("progress", function(e) { | xhr.upload.addEventListener("progress", function(e) { | ||||
var pc = parseInt((e.loaded / e.total * 100)); | 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', $(li)).css('width', pc + "%"); | ||||
$('.upload-progress .bar .span').append( pc + "%"); | |||||
$('.upload-progress span ').empty().append(pc + "%"); | |||||
}, false); | }, false); | ||||
xhr.onreadystatechange = function(e) { | xhr.onreadystatechange = function(e) { | ||||
if (xhr.readyState == 4) { | if (xhr.readyState == 4) { | ||||
$('.upload-progress', $(li)).hide(); | |||||
/* $('.upload-progress', $(li)).hide();*/ | |||||
$('#web').addClass('uploading'); | $('#web').addClass('uploading'); | ||||
// progress.className = (xhr.status == 200 ? "success" : "failure"); | // progress.className = (xhr.status == 200 ? "success" : "failure"); | ||||
if (xhr.status == 200) { | if (xhr.status == 200) { | ||||
@@ -121,7 +121,6 @@ $(document).ready(function() { | |||||
}; | }; | ||||
$(document).bind("dragenter", function(event) { | $(document).bind("dragenter", function(event) { | ||||
event.preventDefault(); | event.preventDefault(); | ||||
}).bind("dragover", function(event) { | }).bind("dragover", function(event) { | ||||
event.preventDefault(); | event.preventDefault(); | ||||
@@ -129,7 +128,6 @@ $(document).ready(function() { | |||||
$('#web').addClass('dragged'); | $('#web').addClass('dragged'); | ||||
}).bind("dragleave", function(event) { | }).bind("dragleave", function(event) { | ||||
$('#web').removeClass('dragged'); | $('#web').removeClass('dragged'); | ||||
console.log('asdasd'); | |||||
}).bind("drop dragdrop", function(event) { | }).bind("drop dragdrop", function(event) { | ||||
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files; | var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files; | ||||
@@ -158,5 +156,3 @@ $(document).ready(function() { | |||||
}); | }); | ||||
}); | }); | ||||
})(); | })(); | ||||
@@ -22,21 +22,20 @@ | |||||
.code-title { | .code-title { | ||||
color: @red; | color: @red; | ||||
} | } | ||||
padding: 35px 0 0 10px; | |||||
padding: 30px 0 0 10px; | |||||
@media (min-width: @screen-sm-min) { | @media (min-width: @screen-sm-min) { | ||||
padding: 50px 0 0 20px; | |||||
padding: 30px 0 0 20px; | |||||
} | } | ||||
code { | code { | ||||
font-family: @font-family-mono; | |||||
font-family: @font-family-mono; | |||||
} | } | ||||
font-family: @font-family-mono; | |||||
font-family: @font-family-mono; | |||||
font-size: 15px; | font-size: 15px; | ||||
text-align: left; | text-align: left; | ||||
color: #fff; | color: #fff; | ||||
} | } | ||||
#web { | #web { | ||||
margin-top: -2px; | margin-top: -2px; | ||||
.border-bottom-radius (5px); | .border-bottom-radius (5px); | ||||
@@ -51,10 +50,6 @@ font-family: @font-family-mono; | |||||
font-size: 14px; | font-size: 14px; | ||||
border-color: #fff; | border-color: #fff; | ||||
} | } | ||||
.click { | |||||
margin-top: -50px; | |||||
color: #fff; | |||||
} | |||||
.queue { | .queue { | ||||
margin: 0; | margin: 0; | ||||
list-style: none; | list-style: none; | ||||
@@ -65,27 +60,8 @@ font-family: @font-family-mono; | |||||
} | } | ||||
} | } | ||||
.terminal { | .terminal { | ||||
.border-top-radius (5px); | |||||
// min-height: 150px; | |||||
@media (min-width: @screen-sm-min) { | |||||
//min-height: 350px; | |||||
} | |||||
} | |||||
#web .uploading { | |||||
} | |||||
.dragged { | |||||
background: @light-gray; | |||||
} | |||||
.terminal { | |||||
.border-top-radius (0px); | |||||
.border-top-radius (0); | |||||
background: @dark-blue; | background: @dark-blue; | ||||
// background: url(../images/terminal.svg); | // background: url(../images/terminal.svg); | ||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
@@ -93,7 +69,6 @@ font-family: @font-family-mono; | |||||
} | } | ||||
.terminal-top { | .terminal-top { | ||||
.border-top-radius (5px); | .border-top-radius (5px); | ||||
background: url(../images/terminal-top.svg); | background: url(../images/terminal-top.svg); | ||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
@@ -101,11 +76,18 @@ font-family: @font-family-mono; | |||||
height: 30px; | height: 30px; | ||||
} | } | ||||
.progress { | |||||
.upload-progress { | |||||
max-width: 80%; | max-width: 80%; | ||||
margin: 0 auto; | |||||
.bar { | |||||
word-wrap: normal; | |||||
overflow: hidden; | |||||
} | |||||
span { | |||||
float: right; | |||||
} | |||||
} | } | ||||
.all-files { | .all-files { | ||||
display: none; | display: none; | ||||
} | } | ||||
@@ -5502,7 +5502,7 @@ a:hover { | |||||
#web, | #web, | ||||
.terminal { | .terminal { | ||||
word-wrap: break-word; | word-wrap: break-word; | ||||
padding: 35px 0 0 10px; | |||||
padding: 30px 0 0 10px; | |||||
font-family: "Droid Sans Mono", monospace; | font-family: "Droid Sans Mono", monospace; | ||||
font-size: 15px; | font-size: 15px; | ||||
text-align: left; | text-align: left; | ||||
@@ -5515,7 +5515,7 @@ a:hover { | |||||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||||
#web, | #web, | ||||
.terminal { | .terminal { | ||||
padding: 50px 0 0 20px; | |||||
padding: 30px 0 0 20px; | |||||
} | } | ||||
} | } | ||||
#web code, | #web code, | ||||
@@ -5539,10 +5539,6 @@ a:hover { | |||||
font-size: 14px; | font-size: 14px; | ||||
border-color: #fff; | border-color: #fff; | ||||
} | } | ||||
#web .click { | |||||
margin-top: -50px; | |||||
color: #fff; | |||||
} | |||||
#web .queue { | #web .queue { | ||||
margin: 0; | margin: 0; | ||||
list-style: none; | list-style: none; | ||||
@@ -5552,15 +5548,8 @@ a:hover { | |||||
color: #fff; | color: #fff; | ||||
} | } | ||||
.terminal { | .terminal { | ||||
border-top-right-radius: 5px; | |||||
border-top-left-radius: 5px; | |||||
} | |||||
.dragged { | |||||
background: #f6f8f8; | |||||
} | |||||
.terminal { | |||||
border-top-right-radius: 0px; | |||||
border-top-left-radius: 0px; | |||||
border-top-right-radius: 0; | |||||
border-top-left-radius: 0; | |||||
background: #36535a; | background: #36535a; | ||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
background-size: cover; | background-size: cover; | ||||
@@ -5573,9 +5562,15 @@ a:hover { | |||||
background-size: cover; | background-size: cover; | ||||
height: 30px; | height: 30px; | ||||
} | } | ||||
.progress { | |||||
.upload-progress { | |||||
max-width: 80%; | max-width: 80%; | ||||
margin: 0 auto; | |||||
} | |||||
.upload-progress .bar { | |||||
word-wrap: normal; | |||||
overflow: hidden; | |||||
} | |||||
.upload-progress span { | |||||
float: right; | |||||
} | } | ||||
.all-files { | .all-files { | ||||
display: none; | display: none; | ||||