fionera
/
transfer.sh
geforkt von kiska/transfer.sh
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

terminal progress bar

tags/v1.0.0
Uvis Grinfelds vor 9 Jahren
Ursprung
f770f5484c
Commit
45e29d5d7d
6 geänderte Dateien mit 159 neuen und 299 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +10
    -126
      transfersh-web/images/terminal-top.svg
  2. +73
    -70
      transfersh-web/index.html
  3. +47
    -51
      transfersh-web/scripts/main.js
  4. +16
    -34
      transfersh-web/styles/includes/home.less
  5. +12
    -17
      transfersh-web/styles/main.css
  6. +1
    -1
      transfersh-web/styles/main.css.map

+ 10
- 126
transfersh-web/images/terminal-top.svg Datei anzeigen

@@ -7,139 +7,31 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="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"
height="30"
id="svg4149"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="terminal-top.svg">
id="svg4149">
<defs
id="defs4151">
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath60">
<path
inkscape:connector-curvature="0"
d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z"
id="path62" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath44">
<path
inkscape:connector-curvature="0"
d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z"
id="path46" />
</clipPath>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath28">
<path
inkscape:connector-curvature="0"
d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z"
id="path30" />
</clipPath>
</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
id="metadata4154">
<rdf:RDF>
@@ -153,17 +45,12 @@
</rdf:RDF>
</metadata>
<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"
width="789.90106"
height="49.982914"
x="85.371201"
y="355.16455" />
style="fill:#85b5bb;fill-opacity:1;stroke:none" />
<g
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)"
id="g24"
@@ -184,9 +71,8 @@
style="fill:#ff7050">
<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"
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path38"
inkscape:connector-curvature="0" />
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</g>
</g>
@@ -211,9 +97,8 @@
style="fill:#ffed5d">
<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"
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path54"
inkscape:connector-curvature="0" />
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</g>
</g>
@@ -238,9 +123,8 @@
style="fill:#93de7f">
<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"
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path70"
inkscape:connector-curvature="0" />
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g>
</g>
</g>


+ 73
- 70
transfersh-web/index.html Datei anzeigen

@@ -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+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 -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
@@ -45,7 +45,7 @@
<div class="wrapper">
<h1>transfer.sh</h1>
<ul>
<li><a href="#samples">Sample use cases</a>
<li><a href="#samples">sample use cases</a>
</li>
<li><a href="#contact">contact us</a>
</li>
@@ -65,40 +65,43 @@

</div>
<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 id="web">
<code>
<br>
<br>
<span class="code-title"># Upload from web</span>
<br>Drag your files here, or <a class="browse" href="#"> click to browse.</a>
</code>
<input type="file" multiple="multiple" style='display: none;' />
<ul class='queue' style='; list-style-type: none; margin: 0;'>
<ul class='queue'>
<li>
</li>
</ul>
<div class='all-files'>
<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>
<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>
</section>


@@ -146,41 +149,41 @@
<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 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>
<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>

@@ -190,49 +193,49 @@
<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>Uploading</h3>
<div id="" class="terminal">
<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>$ 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
<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>$ transfer hello.txt
<br>https://transfer.sh/eibhM/hello.txt
<br>
<br>
</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>
<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>
<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>
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>$ transfer hello.txt
<br>
<br>

</code>
</div>
</div>
</div>

</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Transfer multiple files</h3>


+ 47
- 51
transfersh-web/scripts/main.js Datei anzeigen

@@ -1,49 +1,49 @@
$(document).ready(function() {

/* hljs.initHighlightingOnLoad();*/
/* hljs.initHighlightingOnLoad();*/
// 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
$('a[href*=#]:not([href=#])').click(function() {
@@ -77,21 +77,21 @@ $(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="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'));

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 + "%");
$('.upload-progress span ').empty().append(pc + "%");
}, false);

xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) {
$('.upload-progress', $(li)).hide();
/* $('.upload-progress', $(li)).hide();*/
$('#web').addClass('uploading');
// progress.className = (xhr.status == 200 ? "success" : "failure");
if (xhr.status == 200) {
@@ -121,7 +121,6 @@ $(document).ready(function() {
};

$(document).bind("dragenter", function(event) {

event.preventDefault();
}).bind("dragover", function(event) {
event.preventDefault();
@@ -129,7 +128,6 @@ $(document).ready(function() {
$('#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;
@@ -158,5 +156,3 @@ $(document).ready(function() {
});
});
})();



+ 16
- 34
transfersh-web/styles/includes/home.less Datei anzeigen

@@ -22,21 +22,20 @@
.code-title {
color: @red;
}
padding: 35px 0 0 10px;
padding: 30px 0 0 10px;
@media (min-width: @screen-sm-min) {
padding: 50px 0 0 20px;
padding: 30px 0 0 20px;
}
code {
font-family: @font-family-mono;

font-family: @font-family-mono;
}
font-family: @font-family-mono;
font-family: @font-family-mono;
font-size: 15px;
text-align: left;
color: #fff;

}


#web {
margin-top: -2px;
.border-bottom-radius (5px);
@@ -51,10 +50,6 @@ font-family: @font-family-mono;
font-size: 14px;
border-color: #fff;
}
.click {
margin-top: -50px;
color: #fff;
}
.queue {
margin: 0;
list-style: none;
@@ -65,27 +60,8 @@ font-family: @font-family-mono;
}
}


.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: url(../images/terminal.svg);
background-repeat: no-repeat;
@@ -93,7 +69,6 @@ font-family: @font-family-mono;
}

.terminal-top {

.border-top-radius (5px);
background: url(../images/terminal-top.svg);
background-repeat: no-repeat;
@@ -101,11 +76,18 @@ font-family: @font-family-mono;
height: 30px;
}

.progress {


.upload-progress {
max-width: 80%;
margin: 0 auto;
.bar {
word-wrap: normal;
overflow: hidden;
}
span {
float: right;
}
}

.all-files {
display: none;
}


+ 12
- 17
transfersh-web/styles/main.css Datei anzeigen

@@ -5502,7 +5502,7 @@ a:hover {
#web,
.terminal {
word-wrap: break-word;
padding: 35px 0 0 10px;
padding: 30px 0 0 10px;
font-family: "Droid Sans Mono", monospace;
font-size: 15px;
text-align: left;
@@ -5515,7 +5515,7 @@ a:hover {
@media (min-width: 768px) {
#web,
.terminal {
padding: 50px 0 0 20px;
padding: 30px 0 0 20px;
}
}
#web code,
@@ -5539,10 +5539,6 @@ a:hover {
font-size: 14px;
border-color: #fff;
}
#web .click {
margin-top: -50px;
color: #fff;
}
#web .queue {
margin: 0;
list-style: none;
@@ -5552,15 +5548,8 @@ a:hover {
color: #fff;
}
.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-repeat: no-repeat;
background-size: cover;
@@ -5573,9 +5562,15 @@ a:hover {
background-size: cover;
height: 30px;
}
.progress {
.upload-progress {
max-width: 80%;
margin: 0 auto;
}
.upload-progress .bar {
word-wrap: normal;
overflow: hidden;
}
.upload-progress span {
float: right;
}
.all-files {
display: none;


+ 1
- 1
transfersh-web/styles/main.css.map
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


Verfassen Vorschau
Laden…
Abbrechen
Speichern