diff --git a/frontend/src/download.js b/frontend/src/download.js index f16adf40..47dac9f3 100644 --- a/frontend/src/download.js +++ b/frontend/src/download.js @@ -1,37 +1,41 @@ const FileReceiver = require('./fileReceiver'); const { notify } = require('./utils'); const $ = require('jquery'); +require('jquery-circle-progress'); const Raven = window.Raven; $(document).ready(function() { $('#download-progress').hide(); - $('#send-file').click(() => { + $('.send-new').click(() => { window.location.replace(`${window.location.origin}`); }); + //initiate progress bar + $('#dl-progress').circleProgress({ + value: 0.0, + startAngle: -Math.PI/2, + fill: '#00C8D7', + size: 158 + }); $('#download-btn').click(download); function download() { const fileReceiver = new FileReceiver(); const name = document.createElement('p'); const $btn = $('#download-btn'); - fileReceiver.on('progress', percentComplete => { + fileReceiver.on('progress', progress => { $('#download-page-one').hide(); - $('.send-new').hide(); $('#download-progress').show(); + let percent = progress[0]/progress[1]; // update progress bar - document - .querySelector('#progress-bar') - .style.setProperty('--progress', percentComplete + '%'); - $('#progress-text').html(`${percentComplete}%`); + $('#dl-progress').circleProgress('value', percent ); + $('.percent-number').html(`${Math.floor(percent*100)}`); + $('.progress-text').append(` (${(progress[0]/1000000).toFixed(2)}MB of ${(progress[1]/1000000).toFixed(2)}MB)`); //on complete - if (percentComplete === 100) { + if (percent === 1) { fileReceiver.removeAllListeners('progress'); - $('#download-text').html('Download complete!'); - $('.send-new').show(); - $btn.text('Download complete!'); - $btn.attr('disabled', 'true'); notify('Your download has finished.'); + $('.title').html('Download Complete'); } }); diff --git a/frontend/src/fileReceiver.js b/frontend/src/fileReceiver.js index 17b5393f..e65781fa 100644 --- a/frontend/src/fileReceiver.js +++ b/frontend/src/fileReceiver.js @@ -16,7 +16,7 @@ class FileReceiver extends EventEmitter { const percentComplete = Math.floor( event.loaded / event.total * 100 ); - this.emit('progress', percentComplete); + this.emit('progress', [event.loaded, event.total]); } }; diff --git a/frontend/src/fileSender.js b/frontend/src/fileSender.js index 888e1de4..866cbe0d 100644 --- a/frontend/src/fileSender.js +++ b/frontend/src/fileSender.js @@ -107,8 +107,7 @@ class FileSender extends EventEmitter { xhr.upload.addEventListener('progress', e => { if (e.lengthComputable) { - const percentComplete = Math.floor(e.loaded / e.total * 100); - self.emit('progress', percentComplete); + self.emit('progress', [e.loaded, e.total]); } }); diff --git a/frontend/src/upload.js b/frontend/src/upload.js index 69935376..303395f9 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -1,27 +1,29 @@ const FileSender = require('./fileSender'); const { notify, gcmCompliant } = require('./utils'); const $ = require('jquery'); +require('jquery-circle-progress'); const Raven = window.Raven; $(document).ready(function() { gcmCompliant().catch(err => { $('#page-one').hide(); - $('#compliance-error').show(); + $('#unsupported-browser').show(); }); $('#file-upload').change(onUpload); - $('#page-one').on('dragover', allowDrop).on('drop', onUpload); + $('body').on('dragover', allowDrop).on('drop', onUpload); // reset copy button const $copyBtn = $('#copy-btn'); $copyBtn.attr('disabled', false); - $copyBtn.html('Copy'); + $('#link').attr('disabled', false); + $copyBtn.html('Copy to Clipboard'); $('#page-one').show(); - $('#file-list').show(); $('#upload-progress').hide(); $('#share-link').hide(); $('#upload-error').hide(); + $('#unsupported-browser').hide(); $('#compliance-error').hide(); if (localStorage.length === 0) { @@ -44,24 +46,42 @@ $(document).ready(function() { document.body.removeChild(aux); //disable button for 3s $copyBtn.attr('disabled', true); - $copyBtn.html('Copied!'); + $('#link').attr('disabled', true); + $copyBtn.html(""); window.setTimeout(() => { $copyBtn.attr('disabled', false); - $copyBtn.html('Copy'); + $('#link').attr('disabled', false); + $copyBtn.html('Copy to Clipboard'); }, 3000); }); + $('.upload-window').on('dragover', () => { + $('.upload-window').addClass('ondrag'); + }); + $('.upload-window').on('dragleave', () => { + $('.upload-window').removeClass('ondrag'); + }); + //initiate progress bar + $('#ul-progress').circleProgress({ + value: 0.0, + startAngle: -Math.PI/2, + fill: '#3B9DFF', + size: 158 + }); // link back to home page $('.send-new').click(() => { $('#page-one').show(); - $('#file-list').show(); $('#upload-progress').hide(); $('#share-link').hide(); $('#upload-error').hide(); $copyBtn.attr('disabled', false); - $copyBtn.html('Copy'); + $('#link').attr('disabled', false); + $copyBtn.html('Copy to Clipboard'); }); + //cancel the upload + $('#cancel-upload').click(() => { + }); // on file upload by browse or drag & drop function onUpload(event) { event.preventDefault(); @@ -74,17 +94,19 @@ $(document).ready(function() { const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field const fileSender = new FileSender(file); - fileSender.on('progress', percentComplete => { + fileSender.on('progress', progress => { $('#page-one').hide(); - $('#file-list').hide(); $('#upload-progress').show(); $('#upload-error').hide(); - $('#upload-filename').innerHTML += file.name; + let percent = progress[0]/progress[1]; // update progress bar - document - .querySelector('#progress-bar') - .style.setProperty('--progress', percentComplete + '%'); - $('#progress-text').html(`${percentComplete}%`); + $('#ul-progress').circleProgress('value', percent ); + $('.percent-number').html(`${Math.floor(percent*100)}`); + if(progress[1] < 1000000000){ + $('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000).toFixed(1)}MB)`); + } else { + $('.progress-text').html(`${file.name} (${(progress[0]/1000000).toFixed(1)}MB of ${(progress[1]/1000000000).toFixed(1)}GB)`); + } }); fileSender.on('loading', isStillLoading => { @@ -117,8 +139,6 @@ $(document).ready(function() { fileSender .upload() .then(info => { - const url = info.url.trim() + `#${info.secretKey}`.trim(); - $('#link').attr('value', url); const fileData = { name: file.name, fileId: info.fileId, @@ -129,12 +149,13 @@ $(document).ready(function() { expiry: expiration }; localStorage.setItem(info.fileId, JSON.stringify(fileData)); - - $('#page-one').hide(); - $('#file-list').hide(); - $('#upload-progress').hide(); - $('#share-link').show(); - $('#upload-error').hide(); + $('#upload-filename').html('Ready to Send'); + const t = window.setTimeout(() => { + $('#page-one').hide(); + $('#upload-progress').hide(); + $('#share-link').show(); + $('#upload-error').hide(); + }, 2000); populateFileList(JSON.stringify(fileData)); notify('Your upload has finished.'); @@ -143,7 +164,9 @@ $(document).ready(function() { Raven.captureException(err); console.log(err); $('#page-one').hide(); + $('#upload-progress').hide(); $('#upload-error').show(); + window.clearTimeout(t); }); } @@ -181,19 +204,31 @@ $(document).ready(function() { const link = document.createElement('td'); const expiry = document.createElement('td'); const del = document.createElement('td'); - del.setAttribute('align', 'center'); - const btn = document.createElement('button'); const popupDiv = document.createElement('div'); - const $popupText = $('', { class: 'popuptext' }); + const $popupText = $('
', { class: 'popuptext' }); const cellText = document.createTextNode(file.name); + const url = file.url.trim() + `#${file.secretKey}`.trim(); + $('#link').attr('value', url); + $('#copy-text').html('Copy and share the link to send your file: ' + file.name); + $popupText.attr('tabindex', '-1'); + name.appendChild(cellText); // create delete button - btn.innerHTML = 'x'; - btn.classList.add('delete-btn'); + del.innerHTML = ""; - link.innerHTML = file.url.trim() + `#${file.secretKey}`.trim(); + link.innerHTML = "" + //copy link to clipboard when icon clicked + $(link).click(function() { + const aux = document.createElement('input'); + aux.setAttribute('value', url); + document.body.appendChild(aux); + aux.select(); + document.execCommand('copy'); + document.body.removeChild(aux); + notify('The link has been copied to your clipboard.'); + }); file.creationDate = new Date(file.creationDate); @@ -215,18 +250,13 @@ $(document).ready(function() { seconds = Math.floor(countdown / 1000 % 60); let t; - if (hours > 1) { - expiry.innerHTML = hours + 'h'; - t = window.setTimeout(() => { - poll(); - }, 3600000); - } else if (hours === 1) { - expiry.innerHTML = hours + 'h'; + if (hours >= 1) { + expiry.innerHTML = hours + 'h ' + minutes % 60 + 'm'; t = window.setTimeout(() => { poll(); }, 60000); } else if (hours === 0) { - expiry.innerHTML = minutes + 'm' + seconds + 's'; + expiry.innerHTML = minutes + 'm ' + seconds + 's'; t = window.setTimeout(() => { poll(); }, 1000); @@ -236,6 +266,7 @@ $(document).ready(function() { localStorage.removeItem(file.fileId); $(expiry).parents('tr').remove(); window.clearTimeout(t); + toggleHeader(); } } @@ -253,32 +284,42 @@ $(document).ready(function() { toggleHeader(); }); }); + document.getElementById('delete-file').onclick = e => { + FileSender.delete(file.fileId, file.deleteToken).then(() => { + localStorage.removeItem(file.fileId); + toggleHeader(); + $('.send-new').click(); + }); + }; // add data cells to table row row.appendChild(name); row.appendChild(link); row.appendChild(expiry); - popupDiv.appendChild(btn); + //popupDiv.appendChild(btn); $(popupDiv).append($popupText); del.appendChild(popupDiv); row.appendChild(del); // show popup - del.addEventListener('click', toggleShow); + del.addEventListener('click', function(){ + $popupText.addClass('show'); + $popupText.focus(); + }); // hide popup $popupText.find('.nvm').click(function(e) { e.stopPropagation(); - toggleShow(); + $popupText.removeClass('show'); }); $popupText.click(function(e) { e.stopPropagation(); }); - + //close when popup loses focus + $popupText.blur(() => { + $popupText.removeClass('show'); + }); $('tbody').append(row); //add row to table - function toggleShow() { - $popupText.toggleClass('show'); - } toggleHeader(); } function toggleHeader() { diff --git a/package.json b/package.json index 44d5e4c1..c29a1e82 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "express-handlebars": "^3.0.0", "helmet": "^3.6.1", "jquery": "^3.2.1", + "jquery-circle-progress": "^1.2.2", "mozlog": "^2.1.1", "raven": "^2.1.0", "raven-js": "^3.16.0", diff --git a/public/main.css b/public/main.css index 2e73aec2..6f2bf5d2 100644 --- a/public/main.css +++ b/public/main.css @@ -1,44 +1,51 @@ /*** index.html ***/ html { - background: url('resources/background.png'); - font-family: 'Fira Sans'; - font-weight: 300; - font-style: normal; - background-size: contain; + background: url('resources/Send_bg.svg'); + font-family: 'SF Pro Display', sans-serif; + font-weight: 200; + background-size: 112%; + background-repeat: no-repeat; + background-position: center top; + margin-top: -25px; height: 100%; - display: flex; - justify-content: center; - align-items: center; - align-content: center; - flex-direction: column; +} + +body { + overflow-y: scroll; + margin-top: 12%; } input, select, textarea, button { font-family: inherit; } -/** page-one **/ -.main-window { - border: 1px solid; - width: 606px; - min-height: 447px; - background-color: white; - border-radius: 5px; +span { + cursor: pointer; } +/** page-one **/ .title { - font-size: 14px; - width: 80%; - margin: 40px auto; + font-size: 33px; + margin: 20px auto; text-align: center; } +.description { + font-family: 'SF Pro Text', sans-serif; + font-size: 15px; + line-height: 23px; + width: 630px; + text-align: center; + margin: 0 auto 60px auto; + color: #0C0C0D; +} + .upload-window { - border: 1px dashed; + border: 1px dashed rgb(0, 148, 251, 0.5); margin: 0 auto; - width: 470px; - height: 250px; - border-radius: 5px; + width: 640px; + height: 254.7px; + border-radius: 4px; display: flex; justify-content: center; align-items: center; @@ -46,31 +53,41 @@ input, select, textarea, button { text-align: center; } +.upload-window.ondrag { + border: 3px dashed rgb(0, 148, 251, 0.5); + margin: 0 auto; + width: 672px; + height: 267px; + border-radius: 4.2px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +.link { + color: #0094FB; + text-decoration: none; +} + +#upload-text { + font-size: 22px; + color: #737373; + margin: 20px 0 30px 0; +} + #browse { - float: right; - color: #2D7EFF; -} - -#browse-text { - float: left; - width: 128px; -} - -#upload-img { - padding-right: 20px; -} - -.upload-window > div:nth-child(2) { - font-size: 26px; -} - -.upload { - font-size: 12px; - width: auto; - overflow: hidden; -} - -.file-upload { + background: #0297F8; + border-radius: 5px; + font-family: 'SF Pro Text', sans-serif; + font-size: 15px; + color: #FFFFFF; + width: 240px; + height: 44px; + display: flex; + justify-content: center; + align-items: center; cursor: pointer; } @@ -78,26 +95,29 @@ input[type="file"] { display: none; } -form { - width: 45px; - float: right; -} - /** file-list **/ th { - font-size: 10px; - color: #737373; - font-weight: normal; + font-size: 16px; + color: #858585; + font-weight: lighter; text-align: left; + background: rgb(0, 148, 251, 0.05); + height: 40px; + border-top: 1px solid rgb(0, 148, 251, 0.1); + padding: 0 19px; } td { - font-size: 12px; + font-size: 15px; vertical-align: top; + color: #4A4A4A; + padding: 17px 19px 0 19px; + line-height: 23px; } table { - table-layout: fixed; + border-collapse: collapse; + font-family: Segoe UI, 'SF Pro Text', sans-serif; } tbody { @@ -105,18 +125,11 @@ tbody { } #uploaded-files { - width: 472px; - margin: 10px auto; + width: 640px; + margin: 45.3px auto; table-layout: fixed; } -.delete-btn { - padding: 0; - border: none; - background: none; - cursor: pointer; -} - /* Popup container */ .popup { position: relative; @@ -135,11 +148,12 @@ tbody { padding: 8px 0; position: absolute; z-index: 1; - bottom: 125%; + bottom: 20px; left: 50%; - margin-left: -80px; + margin-left: -96px; transition: opacity 0.5s; opacity: 0; + outline: 0; } /* Popup arrow */ @@ -160,31 +174,61 @@ tbody { } /** upload-progress **/ -#progress-bar { - width: 300px; - height: 5px; - background: linear-gradient( - 90deg, - #FD9800, - #D73000 var(--progress), - white var(--progress) - ); - border: 0.5px solid; - border-radius: 5px; -} - -/** share-link **/ -.share-window { - margin: 0 auto; - width: 470px; - height: 250px; +.progress-bar { + margin-top: 3px; display: flex; justify-content: center; align-items: center; + text-align: center; } -#share-window-r { - width: 50%; +.percentage { + position: absolute; +} + +.percent-number { + font-size: 43.2px; + letter-spacing: -0.78px; + line-height: 58px; + font-family: Segoe UI, 'SF Pro Text', sans-serif; +} + +.percent-sign { + font-size: 28.8px; + color: rgb(104, 104, 104); + letter-spacing: -0.78px; + font-family: Segoe UI, 'SF Pro Text', sans-serif; +} + +.upload { + margin: 0 auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +.progress-text { + font-family: 'SF Pro Text', sans-serif; + font-size: 15px; + color: rgba(0,0,0,0.50); + letter-spacing: -0.4px; + margin-top: 24px; + margin-bottom: 74px; +} + +#cancel-upload { + font-family: 'SF Pro Text', sans-serif; + font-size: 15px; + color: #D70022; + cursor: pointer; + text-decoration: underline; +} + +/** share-link **/ +#share-window { + width: 645px; margin: 0 auto; display: flex; justify-content: center; @@ -202,46 +246,150 @@ tbody { flex-wrap: nowrap; } +#copy-text { + align-self: flex-start; + margin-top: 60px; + margin-bottom: 10px; + color: #0C0C0D; +} + #link { - width: 216px; - height: 41px; - border: 1px solid #979797; + width: 480px; + height: 56px; + border: 1px solid #0297F8; + border-radius: 6px 0 0 6px; + font-size: 24px; + color: #737373; + font-family: 'SF Pro Text'; +} + +#link:disabled { + border: 1px solid #05A700; + background: #FFFFFF; } #copy-btn { - width: 60px; - height: 45px; - background: #337FEB; - border: 1px solid #979797; + width: 165px; + height: 60px; + background: #0297F8; + border: 1px solid #0297F8; + border-radius: 0 6px 6px 0; color: white; cursor: pointer; + font-size: 15px; + font-family: 'SF Pro Text'; } #copy-btn:disabled { - background: #47B04B; + background: #05A700; + border: 1px solid #05A700; cursor: auto; } +#delete-file { + width: 176px; + height: 44px; + background: #FFFFFF; + border: 1px solid rgba(12,12,13,0.30); + border-radius: 5px; + font-size: 15px; + font-family: 'SF Pro Text'; + margin-top: 50px; + margin-bottom: 12px; + cursor: pointer; + color: #313131; +} + .send-new { - font-size: 14px; + font-size: 15px; margin: auto; width: 80%; text-align: center; - color: #2D7EFF; + color: #0094FB; cursor: pointer; + text-decoration: underline; +} + +/*upload-error*/ +#upload-error { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} + +#upload-error-img { + margin-bottom: 90px; + margin-top: 5px; +} + +/*unsupported-browser*/ +#unsupported-browser { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.unsupported-description { + font-family: 'SF Pro Text', sans-serif; + font-size: 13px; + line-height: 23px; + width: 630px; + text-align: center; + color: #7D7D7D; + margin: 0 auto 23px auto; +} + +#firefox-logo { + width: 70px; +} + +#dl-firefox { + margin-bottom: 181px; + width: 260px; + height: 80px; + background: #12bc00; + border-radius: 3px; + cursor: pointer; + border: none; + box-shadow: 0 5px 3px rgb(234,234,234); + font-family: 'Fira Sans'; + font-weight: 500; + color: #FFFFFF; + font-size: 26px; + display: flex; + justify-content: center; + align-items: center; + line-height: 1; +} + +#dl-firefox-text { + text-align: left; + margin-left: 20.4px; +} + +#dl-firefox-text>span { + font-family: 'Fira Sans'; + font-weight: 300; + font-size: 18px; + letter-spacing: -0.69px; } /** download.html **/ #download-btn { - font-size: 18px; + font-size: 15px; + font-family: 'SF Pro Text'; color: white; - width: 214px; - height: 87px; - margin: 50px auto; + width: 180px; + height: 44px; + margin-top: 20px; + margin-bottom: 30px; text-align: center; - background: #337FEB; - border: 1px solid #3EA050; - border-radius: 6px; + background: #0297F8; + border: 1px solid #0297F8; + border-radius: 5px; font-weight: 300; cursor: pointer; } @@ -251,10 +399,8 @@ tbody { cursor: auto; } -#download-page-one { +#download { margin: 0 auto; - width: 470px; - height: 250px; display: flex; justify-content: center; align-items: center; @@ -263,13 +409,22 @@ tbody { } #expired-img { - display: none; + margin: 51px 0 71px 0; +} + +.expired-description { + font-family: 'SF Pro Text', sans-serif; + font-size: 15px; + line-height: 23px; + width: 630px; + text-align: center; + font-size: 15px; + color: #7D7D7D; + margin: 0 auto 23px auto; } #download-progress { margin: 0 auto; - width: 470px; - height: 250px; display: flex; justify-content: center; align-items: center; @@ -277,6 +432,7 @@ tbody { text-align: center; } -#download-text { - margin-bottom: 40px; +#download-img { + width: 283px; + height: 196px; } diff --git a/public/resources/background.png b/public/resources/background.png deleted file mode 100644 index 634b72a2..00000000 Binary files a/public/resources/background.png and /dev/null differ diff --git a/public/resources/firefox_logo-only.svg b/public/resources/firefox_logo-only.svg new file mode 100644 index 00000000..6c9d5ce3 --- /dev/null +++ b/public/resources/firefox_logo-only.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/resources/fontello-24c5e6ad/LICENSE.txt b/public/resources/fontello-24c5e6ad/LICENSE.txt new file mode 100755 index 00000000..5897837d --- /dev/null +++ b/public/resources/fontello-24c5e6ad/LICENSE.txt @@ -0,0 +1,21 @@ +Font license info + + +## Entypo + + Copyright (C) 2012 by Daniel Bruce + + Author: Daniel Bruce + License: SIL (http://scripts.sil.org/OFL) + Homepage: http://www.entypo.com + + +## Font Awesome + + Copyright (C) 2016 by Dave Gandy + + Author: Dave Gandy + License: SIL () + Homepage: http://fortawesome.github.com/Font-Awesome/ + + diff --git a/public/resources/fontello-24c5e6ad/README.txt b/public/resources/fontello-24c5e6ad/README.txt new file mode 100755 index 00000000..beaab336 --- /dev/null +++ b/public/resources/fontello-24c5e6ad/README.txt @@ -0,0 +1,75 @@ +This webfont is generated by http://fontello.com open source project. + + +================================================================================ +Please, note, that you should obey original font licenses, used to make this +webfont pack. Details available in LICENSE.txt file. + +- Usually, it's enough to publish content of LICENSE.txt file somewhere on your + site in "About" section. + +- If your project is open-source, usually, it will be ok to make LICENSE.txt + file publicly available in your repository. + +- Fonts, used in Fontello, don't require a clickable link on your site. + But any kind of additional authors crediting is welcome. +================================================================================ + + +Comments on archive content +--------------------------- + +- /font/* - fonts in different formats + +- /css/* - different kinds of css, for all situations. Should be ok with + twitter bootstrap. Also, you can skip style and assign icon classes + directly to text elements, if you don't mind about IE7. + +- demo.html - demo file, to show your webfont content + +- LICENSE.txt - license info about source fonts, used to build your one. + +- config.json - keeps your settings. You can import it back into fontello + anytime, to continue your work + + +Why so many CSS files ? +----------------------- + +Because we like to fit all your needs :) + +- basic file, .css - is usually enough, it contains @font-face + and character code definitions + +- *-ie7.css - if you need IE7 support, but still don't wish to put char codes + directly into html + +- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face + rules, but still wish to benefit from css generation. That can be very + convenient for automated asset build systems. When you need to update font - + no need to manually edit files, just override old version with archive + content. See fontello source code for examples. + +- *-embedded.css - basic css file, but with embedded WOFF font, to avoid + CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. + We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` + server headers. But if you ok with dirty hack - this file is for you. Note, + that data url moved to separate @font-face to avoid problems with + + + + + + + +
+

+ fontello + font demo +

+ +
+
+
+
icon-cancel-10xe801
+
icon-check0xe802
+
icon-docs0xf0c5
+
+
+
Generated by fontello.com
+ + \ No newline at end of file diff --git a/public/resources/fontello-24c5e6ad/font/fontello.eot b/public/resources/fontello-24c5e6ad/font/fontello.eot new file mode 100755 index 00000000..30b0ddc1 Binary files /dev/null and b/public/resources/fontello-24c5e6ad/font/fontello.eot differ diff --git a/public/resources/fontello-24c5e6ad/font/fontello.svg b/public/resources/fontello-24c5e6ad/font/fontello.svg new file mode 100755 index 00000000..431b9d7c --- /dev/null +++ b/public/resources/fontello-24c5e6ad/font/fontello.svg @@ -0,0 +1,16 @@ + + + +Copyright (C) 2017 by original authors @ fontello.com + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/fontello-24c5e6ad/font/fontello.ttf b/public/resources/fontello-24c5e6ad/font/fontello.ttf new file mode 100755 index 00000000..86b99e44 Binary files /dev/null and b/public/resources/fontello-24c5e6ad/font/fontello.ttf differ diff --git a/public/resources/fontello-24c5e6ad/font/fontello.woff b/public/resources/fontello-24c5e6ad/font/fontello.woff new file mode 100755 index 00000000..25766584 Binary files /dev/null and b/public/resources/fontello-24c5e6ad/font/fontello.woff differ diff --git a/public/resources/fontello-24c5e6ad/font/fontello.woff2 b/public/resources/fontello-24c5e6ad/font/fontello.woff2 new file mode 100755 index 00000000..ca749888 Binary files /dev/null and b/public/resources/fontello-24c5e6ad/font/fontello.woff2 differ diff --git a/public/resources/illustration_download.svg b/public/resources/illustration_download.svg new file mode 100644 index 00000000..6eb6a775 --- /dev/null +++ b/public/resources/illustration_download.svg @@ -0,0 +1,126 @@ + + + + +illustration_01 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/resources/illustration_error.svg b/public/resources/illustration_error.svg new file mode 100644 index 00000000..ca44824d --- /dev/null +++ b/public/resources/illustration_error.svg @@ -0,0 +1,93 @@ + + + + illustration + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/illustration_expired.svg b/public/resources/illustration_expired.svg new file mode 100644 index 00000000..9c551a28 --- /dev/null +++ b/public/resources/illustration_expired.svg @@ -0,0 +1,64 @@ + + + + Group + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/resources/link_expired.png b/public/resources/link_expired.png deleted file mode 100644 index b4872db6..00000000 Binary files a/public/resources/link_expired.png and /dev/null differ diff --git a/public/resources/send_bg.svg b/public/resources/send_bg.svg new file mode 100644 index 00000000..ae022575 --- /dev/null +++ b/public/resources/send_bg.svg @@ -0,0 +1,90 @@ + + + + File transfer_homepage Copy + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + + + + + + + + \ No newline at end of file diff --git a/public/resources/share.png b/public/resources/share.png deleted file mode 100644 index 0628d7ce..00000000 Binary files a/public/resources/share.png and /dev/null differ diff --git a/public/resources/upload.svg b/public/resources/upload.svg index d731adba..e9bb7fc2 100644 --- a/public/resources/upload.svg +++ b/public/resources/upload.svg @@ -1,93 +1,24 @@ - - - - Group 14 + + + + upload Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/views/download.handlebars b/views/download.handlebars index 50cc365a..451007da 100644 --- a/views/download.handlebars +++ b/views/download.handlebars @@ -6,7 +6,6 @@ {{> sentry dsn=dsn}} {{/if}} - {{#if trackerId}} {{> analytics trackerId=trackerId}} @@ -14,56 +13,60 @@ -
-
- {{#if filename}} +
+ {{#if filename}} +
- Your friend is sending you a file:
- {{{filename}}} ({{{filesize}}}) + Download {{{filename}}} ({{{filesize}}})
-
-
- -
-
- -
+
+ Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
- - -
-
- Downloading File... -
-
- -
-
-
+ +
+
- -
- Send your own files -
- - {{else}} - -
- This link has expired or never existed in the first place. -
- - -
- Send your own files -
- {{/if}}
-
- +
+
+ Downloading {{{filename}}} ({{{filesize}}}) +
+
+ Please leave this tab open while we fetch your file and decrypt it. +
+ +
+
+ + % +
+
+
+
{{{filename}}}
+
+
+ +
+ Try Firefox Send +
+ {{else}} + +
+ This link has expired or never existed in the first place. +
+ + +
+ Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever. +
+
+ Try Firefox Send +
+ {{/if}} +
diff --git a/views/index.handlebars b/views/index.handlebars index b34a9e80..00456ac6 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -6,45 +6,42 @@ {{> sentry dsn=dsn}} {{/if}} - + + {{#if trackerId}} {{> analytics trackerId=trackerId}} {{/if}} - -
- Share your files quickly, privately and securely. + Private, Encrypted File Sharing
-
+
+ Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
Learn more +
+
Upload
-
- DRAG & DROP -
-
-
- your file/folder here or -
-
-
- - -
-
+
+ Drop your files here to start uploading
+ +
+ + +
+
- - - - + + + + @@ -57,57 +54,74 @@
- Uploading + Uploading Your File
-
-
Upload
-
- -
-
+
+ +
+ +
+
+ + %
+
+
+
Cancel Upload
+
FileCopy URLExpires inDeleteFileCopy URLExpires inDelete