From 463393552b518c0f70f52a2351ea83f3b07a6a06 Mon Sep 17 00:00:00 2001
From: John Gruen <john.gruen@gmail.com>
Date: Thu, 20 Jul 2017 23:52:21 +0200
Subject: [PATCH] make site responsive and add feedback link
---
.stylelintrc | 2 +-
frontend/src/fileReceiver.js | 73 +++++----
frontend/src/upload.js | 85 +++++-----
public/locales/send.en-US.ftl | 2 +
public/main.css | 233 ++++++++++++++++++++++------
public/resources/feedback.svg | 1 +
public/resources/send_logo_type.svg | 1 -
server/server.js | 12 +-
views/layouts/main.handlebars | 15 +-
9 files changed, 290 insertions(+), 134 deletions(-)
create mode 100644 public/resources/feedback.svg
delete mode 100644 public/resources/send_logo_type.svg
diff --git a/.stylelintrc b/.stylelintrc
index 3c593e83..c0c673c7 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,6 +1,6 @@
extends: stylelint-config-standard
rules:
- color-hex-case: upper
+ color-hex-case: lower
declaration-colon-newline-after: null
selector-list-comma-newline-after: null
diff --git a/frontend/src/fileReceiver.js b/frontend/src/fileReceiver.js
index 155a8dd9..ad1611df 100644
--- a/frontend/src/fileReceiver.js
+++ b/frontend/src/fileReceiver.js
@@ -58,41 +58,46 @@ class FileReceiver extends EventEmitter {
true,
['encrypt', 'decrypt']
)
- ]).then(([fdata, key]) => {
- this.emit('decrypting', true);
- return Promise.all([
- window.crypto.subtle.decrypt(
- {
- name: 'AES-GCM',
- iv: hexToArray(fdata.iv),
- additionalData: hexToArray(fdata.aad)
- },
- key,
- fdata.data
- ).then(decrypted => {
- this.emit('decrypting', false);
- return Promise.resolve(decrypted)
- }),
- fdata.filename,
- hexToArray(fdata.aad)
- ]);
- }).then(([decrypted, fname, proposedHash]) => {
- this.emit('hashing', true);
- return window.crypto.subtle.digest('SHA-256', decrypted).then(calculatedHash => {
- this.emit('hashing', false);
- const integrity = new Uint8Array(calculatedHash).toString() === proposedHash.toString();
- if (!integrity) {
- this.emit('unsafe', true)
- return Promise.reject();
- } else {
- this.emit('safe', true);
- return Promise.all([
- decrypted,
- decodeURIComponent(fname)
- ]);
- }
+ ])
+ .then(([fdata, key]) => {
+ this.emit('decrypting', true);
+ return Promise.all([
+ window.crypto.subtle
+ .decrypt(
+ {
+ name: 'AES-GCM',
+ iv: hexToArray(fdata.iv),
+ additionalData: hexToArray(fdata.aad)
+ },
+ key,
+ fdata.data
+ )
+ .then(decrypted => {
+ this.emit('decrypting', false);
+ return Promise.resolve(decrypted);
+ }),
+ fdata.filename,
+ hexToArray(fdata.aad)
+ ]);
})
- })
+ .then(([decrypted, fname, proposedHash]) => {
+ this.emit('hashing', true);
+ return window.crypto.subtle
+ .digest('SHA-256', decrypted)
+ .then(calculatedHash => {
+ this.emit('hashing', false);
+ const integrity =
+ new Uint8Array(calculatedHash).toString() ===
+ proposedHash.toString();
+ if (!integrity) {
+ this.emit('unsafe', true);
+ return Promise.reject();
+ } else {
+ this.emit('safe', true);
+ return Promise.all([decrypted, decodeURIComponent(fname)]);
+ }
+ });
+ });
}
}
diff --git a/frontend/src/upload.js b/frontend/src/upload.js
index 194d50af..3f6ba2cf 100644
--- a/frontend/src/upload.js
+++ b/frontend/src/upload.js
@@ -40,7 +40,9 @@ $(document).ready(function() {
//disable button for 3s
$copyBtn.attr('disabled', true);
$('#link').attr('disabled', true);
- $copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
+ $copyBtn.html(
+ '<img src="/resources/check-16.svg" class="icon-check"></img>'
+ );
window.setTimeout(() => {
$copyBtn.attr('disabled', false);
$('#link').attr('disabled', false);
@@ -71,12 +73,14 @@ $(document).ready(function() {
event.preventDefault();
let file = '';
if (event.type === 'drop') {
- if (event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files[0].size === 0){
+ if (
+ event.originalEvent.dataTransfer.files.length > 1 ||
+ event.originalEvent.dataTransfer.files[0].size === 0
+ ) {
$('.upload-window').removeClass('ondrag');
- document.l10n.formatValue('uploadPageMultipleFilesAlert')
- .then(str => {
- alert(str);
- });
+ document.l10n.formatValue('uploadPageMultipleFilesAlert').then(str => {
+ alert(str);
+ });
return;
}
file = event.originalEvent.dataTransfer.files[0];
@@ -95,10 +99,9 @@ $(document).ready(function() {
$('#cancel-upload').click(() => {
fileSender.cancel();
location.reload();
- document.l10n.formatValue('uploadCancelNotification')
- .then(str => {
- notify(str);
- });
+ document.l10n.formatValue('uploadCancelNotification').then(str => {
+ notify(str);
+ });
});
fileSender.on('progress', progress => {
@@ -110,15 +113,21 @@ $(document).ready(function() {
});
if (progress[1] < 1000000) {
$('.progress-text').text(
- `${file.name} (${(progress[0] / 1000).toFixed(1)}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
+ `${file.name} (${(progress[0] / 1000).toFixed(
+ 1
+ )}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
);
} else if (progress[1] < 1000000000) {
$('.progress-text').text(
- `${file.name} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
+ `${file.name} (${(progress[0] / 1000000).toFixed(
+ 1
+ )}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
);
} else {
$('.progress-text').text(
- `${file.name} (${(progress[0] / 1000000).toFixed(1)}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
+ `${file.name} (${(progress[0] / 1000000).toFixed(
+ 1
+ )}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
);
}
});
@@ -163,7 +172,10 @@ $(document).ready(function() {
expiry: expiration
};
localStorage.setItem(info.fileId, JSON.stringify(fileData));
- $('#upload-filename').attr('data-l10n-id', 'uploadSuccessConfirmHeader');
+ $('#upload-filename').attr(
+ 'data-l10n-id',
+ 'uploadSuccessConfirmHeader'
+ );
t = window.setTimeout(() => {
$('#page-one').attr('hidden', true);
$('#upload-progress').attr('hidden', true);
@@ -172,10 +184,9 @@ $(document).ready(function() {
}, 1000);
populateFileList(JSON.stringify(fileData));
- document.l10n.formatValue('notifyUploadDone')
- .then(str => {
- notify(str);
- });
+ document.l10n.formatValue('notifyUploadDone').then(str => {
+ notify(str);
+ });
})
.catch(err => {
Raven.captureException(err);
@@ -219,10 +230,18 @@ $(document).ready(function() {
const row = document.createElement('tr');
const name = document.createElement('td');
const link = document.createElement('td');
- const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', 'data-l10n-id': 'copyUrlHover'});
+ const $copyIcon = $('<img>', {
+ src: '/resources/copy-16.svg',
+ class: 'icon-copy',
+ 'data-l10n-id': 'copyUrlHover'
+ });
const expiry = document.createElement('td');
const del = document.createElement('td');
- const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', 'data-l10n-id': 'deleteButtonHover' });
+ const $delIcon = $('<img>', {
+ src: '/resources/close-16.svg',
+ class: 'icon-delete',
+ 'data-l10n-id': 'deleteButtonHover'
+ });
const popupDiv = document.createElement('div');
const $popupText = $('<div>', { class: 'popuptext' });
const cellText = document.createTextNode(file.name);
@@ -230,14 +249,8 @@ $(document).ready(function() {
const url = file.url.trim() + `#${file.secretKey}`.trim();
$('#link').attr('value', url);
- $('#copy-text').attr(
- 'data-l10n-args',
- '{"filename": "' + file.name + '"}'
- );
- $('#copy-text').attr(
- 'data-l10n-id',
- 'copyUrlFormLabelWithName'
- );
+ $('#copy-text').attr('data-l10n-args', '{"filename": "' + file.name + '"}');
+ $('#copy-text').attr('data-l10n-id', 'copyUrlFormLabelWithName');
$popupText.attr('tabindex', '-1');
name.appendChild(cellText);
@@ -264,10 +277,9 @@ $(document).ready(function() {
aux.select();
document.execCommand('copy');
document.body.removeChild(aux);
- document.l10n.formatValue('copiedUrl')
- .then(translated => {
- link.innerHTML = translated;
- });
+ document.l10n.formatValue('copiedUrl').then(translated => {
+ link.innerHTML = translated;
+ });
window.setTimeout(() => {
const linkImg = document.createElement('img');
$(linkImg).addClass('icon-copy');
@@ -327,13 +339,7 @@ $(document).ready(function() {
$(popupNvmSpan).addClass('nvm');
$(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
- $popupText.html([
- popupDelSpan,
- ' ',
- ' ',
- popupNvmSpan
- ]);
-
+ $popupText.html([popupDelSpan, ' ', ' ', popupNvmSpan]);
// add data cells to table row
row.appendChild(name);
@@ -378,7 +384,6 @@ $(document).ready(function() {
$popupText.removeClass('show');
});
-
toggleHeader();
}
function toggleHeader() {
diff --git a/public/locales/send.en-US.ftl b/public/locales/send.en-US.ftl
index a3873fbb..a68ab579 100644
--- a/public/locales/send.en-US.ftl
+++ b/public/locales/send.en-US.ftl
@@ -1,4 +1,6 @@
title = Firefox Send
+siteSubtitle = web experiment
+siteFeedback = Feedback
uploadPageHeader = Private, Encrypted File Sharing
uploadPageExplainer = Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
diff --git a/public/main.css b/public/main.css
index e1a1bf7b..18ea52a0 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,7 +1,12 @@
/*** index.html ***/
html {
background: url('resources/send_bg.svg');
- font-family: 'SF Pro Text', sans-serif;
+ font-family: -apple-system,
+ BlinkMacSystemFont,
+ 'SF Pro Text',
+ Helvetica,
+ Arial,
+ sans-serif;
font-weight: 200;
background-size: 100%;
background-repeat: no-repeat;
@@ -10,24 +15,94 @@ html {
}
body {
- min-height: 100%;
- position: relative;
+ display: flex;
+ flex-direction: column;
margin: 0;
+ min-height: 100vh;
+ position: relative;
+}
+
+.header {
+ align-items: flex-start;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ padding: 31px;
+ width: 100%;
}
.send-logo {
+ display: flex;
position: relative;
- top: 31px;
- left: 31px;
- display: inline-block;
+ align-items: center;
+}
+
+.site-title {
+ font-size: 34px;
+ font-weight: 500;
+ margin: 0;
+ position: relative;
+ top: -1px;
+}
+
+.site-subtitle {
+ font-size: 12px;
+ margin: 0 8px;
+ color: #0c0c0d;
+}
+
+.site-subtitle a {
+ font-weight: bold;
+ color: #0c0c0d;
+ transition: color 50ms;
+}
+
+.send-logo:hover a {
+ color: #0297f8;
+}
+
+.feedback {
+ background-color: #0297f8;
+ background-image: url('resources/feedback.svg');
+ background-position: 4px 6px;
+ background-repeat: no-repeat;
+ background-size: 14px;
+ border-radius: 3px;
+ border: 1px solid #0297f8;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ color: #fff;
+ cursor: pointer;
+ display: block;
+ float: right;
+ font-size: 12px;
+ line-height: 12px;
+ opacity: 0.9;
+ padding: 6px 6px 5px 20px;
+}
+
+.feedback:hover,
+.feedback:focus {
+ background-color: #0287e8;
+}
+
+.feedback:active {
+ background-color: #0277d8;
}
.all {
- padding-top: 10%;
- padding-bottom: 51px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ max-width: 630px;
+ margin: 0 auto;
+ width: 96%;
}
-input, select, textarea, button {
+input,
+select,
+textarea,
+button {
font-family: inherit;
}
@@ -38,24 +113,26 @@ a {
/** page-one **/
.title {
font-size: 33px;
+ line-height: 40px;
margin: 20px auto;
text-align: center;
+ max-width: 520px;
font-family: 'SF Pro Display', sans-serif;
}
.description {
font-size: 15px;
line-height: 23px;
- width: 630px;
+ max-width: 630px;
text-align: center;
margin: 0 auto 60px;
- color: #0C0C0D;
+ color: #0c0c0d;
+ width: 92%;
}
.upload-window {
border: 1px dashed rgba(0, 148, 251, 0.5);
margin: 0 auto;
- width: 640px;
height: 255px;
border-radius: 4px;
display: flex;
@@ -63,14 +140,15 @@ a {
align-items: center;
flex-direction: column;
text-align: center;
+ transition: transform 150ms;
+ padding: 15px;
}
.upload-window.ondrag {
border: 3px dashed rgba(0, 148, 251, 0.5);
margin: 0 auto;
- width: 636px;
height: 251px;
- transform: scale(1.05);
+ transform: scale(1.04);
border-radius: 4.2px;
display: flex;
justify-content: center;
@@ -80,7 +158,7 @@ a {
}
.link {
- color: #0094FB;
+ color: #0094fb;
text-decoration: none;
}
@@ -92,10 +170,10 @@ a {
}
#browse {
- background: #0297F8;
+ background: #0297f8;
border-radius: 5px;
font-size: 15px;
- color: #FFF;
+ color: #fff;
width: 240px;
height: 44px;
display: flex;
@@ -110,6 +188,7 @@ input[type="file"] {
#file-size-msg {
font-size: 12px;
+ line-height: 16px;
color: #737373;
margin-bottom: 22px;
}
@@ -129,7 +208,7 @@ th {
td {
font-size: 15px;
vertical-align: top;
- color: #4A4A4A;
+ color: #4a4a4a;
padding: 17px 19px 0;
line-height: 23px;
}
@@ -144,12 +223,13 @@ tbody {
}
#uploaded-files {
- width: 640px;
margin: 45.3px auto;
table-layout: fixed;
}
-.icon-delete, .icon-copy, .icon-check {
+.icon-delete,
+.icon-copy,
+.icon-check {
cursor: pointer;
}
@@ -165,7 +245,7 @@ tbody {
visibility: hidden;
width: 160px;
background-color: #555;
- color: #FFF;
+ color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
@@ -239,14 +319,13 @@ tbody {
}
#cancel-upload {
- color: #D70022;
+ color: #d70022;
cursor: pointer;
text-decoration: underline;
}
/** share-link **/
#share-window {
- width: 645px;
margin: 0 auto;
display: flex;
justify-content: center;
@@ -262,53 +341,59 @@ tbody {
#copy {
display: flex;
flex-wrap: nowrap;
+ width: 640px;
}
#copy-text {
align-self: flex-start;
margin-top: 60px;
margin-bottom: 10px;
- color: #0C0C0D;
+ color: #0c0c0d;
}
#link {
- width: 480px;
+ flex: 1;
height: 56px;
- border: 1px solid #0297F8;
+ border: 1px solid #0297f8;
border-radius: 6px 0 0 6px;
font-size: 24px;
color: #737373;
font-family: 'SF Pro Display', sans-serif;
letter-spacing: 0;
line-height: 23px;
+ padding-left: 5px;
+ padding-right: 5px;
}
#link:disabled {
- border: 1px solid #05A700;
- background: #FFF;
+ border: 1px solid #05a700;
+ background: #fff;
}
#copy-btn {
- width: 165px;
- height: 60px;
- background: #0297F8;
- border: 1px solid #0297F8;
+ flex: 0 1 165px;
+ background: #0297f8;
border-radius: 0 6px 6px 0;
+ border: 1px solid #0297f8;
color: white;
cursor: pointer;
font-size: 15px;
+ height: 60px;
+ padding-left: 10px;
+ padding-right: 10px;
+ white-space: nowrap;
}
#copy-btn:disabled {
- background: #05A700;
- border: 1px solid #05A700;
+ background: #05a700;
+ border: 1px solid #05a700;
cursor: auto;
}
#delete-file {
width: 176px;
height: 44px;
- background: #FFF;
+ background: #fff;
border: 1px solid rgba(12, 12, 13, 0.3);
border-radius: 5px;
font-size: 15px;
@@ -322,7 +407,7 @@ tbody {
font-size: 15px;
margin: auto;
text-align: center;
- color: #0094FB;
+ color: #0094fb;
cursor: pointer;
text-decoration: underline;
}
@@ -336,7 +421,8 @@ tbody {
text-align: center;
}
-#upload-error[hidden], #unsupported-browser[hidden] {
+#upload-error[hidden],
+#unsupported-browser[hidden] {
display: none;
}
@@ -356,9 +442,8 @@ tbody {
.unsupported-description {
font-size: 13px;
line-height: 23px;
- width: 630px;
text-align: center;
- color: #7D7D7D;
+ color: #7d7d7d;
margin: 0 auto 23px;
}
@@ -370,14 +455,14 @@ tbody {
margin-bottom: 181px;
width: 260px;
height: 80px;
- background: #12BC00;
+ background: #12bc00;
border-radius: 3px;
cursor: pointer;
border: 0;
box-shadow: 0 5px 3px rgb(234, 234, 234);
font-family: 'Fira Sans';
font-weight: 500;
- color: #FFF;
+ color: #fff;
font-size: 26px;
display: flex;
justify-content: center;
@@ -406,15 +491,15 @@ tbody {
margin-top: 20px;
margin-bottom: 30px;
text-align: center;
- background: #0297F8;
- border: 1px solid #0297F8;
+ background: #0297f8;
+ border: 1px solid #0297f8;
border-radius: 5px;
font-weight: 300;
cursor: pointer;
}
#download-btn:disabled {
- background: #47B04B;
+ background: #47b04b;
cursor: auto;
}
@@ -434,9 +519,8 @@ tbody {
.expired-description {
font-size: 15px;
line-height: 23px;
- width: 630px;
text-align: center;
- color: #7D7D7D;
+ color: #7d7d7d;
margin: 0 auto 23px;
}
@@ -460,14 +544,13 @@ tbody {
/* footer */
.footer {
- position: absolute;
right: 0;
bottom: 0;
left: 0;
font-size: 15px;
display: flex;
align-items: flex-end;
- padding: 10px;
+ padding: 50px 10px 10px;
}
.mozilla-logo {
@@ -495,8 +578,60 @@ tbody {
margin-left: 30px;
}
-.github, .twitter {
+.github,
+.twitter {
width: 32px;
height: 32px;
margin-bottom: -5px;
}
+
+@media (max-width: 768px) {
+ .description {
+ margin: 0 auto 25px;
+ }
+
+ #copy {
+ width: 100%;
+ }
+
+ #link {
+ font-size: 18px;
+ }
+
+ .mozilla-logo {
+ margin-left: -7px;
+ }
+
+ .legal-links > * {
+ display: block;
+ padding: 10px 0;
+ }
+}
+
+@media (max-width: 520px) {
+ #copy {
+ width: 100%;
+ flex-direction: column;
+ }
+
+ #link {
+ font-size: 22px;
+ padding: 15px 10px;
+ border-radius: 6px 6px 0 0;
+ }
+
+ #copy-btn {
+ border-radius: 0 0 6px 6px;
+ flex: 0 1 65px;
+ }
+
+ th {
+ font-size: 14px;
+ padding: 0 5px;
+ }
+
+ td {
+ font-size: 13px;
+ padding: 17px 5px 0;
+ }
+}
diff --git a/public/resources/feedback.svg b/public/resources/feedback.svg
new file mode 100644
index 00000000..1e3e3fe5
--- /dev/null
+++ b/public/resources/feedback.svg
@@ -0,0 +1 @@
+<svg width="15" height="13" viewBox="0 0 15 13" xmlns="http://www.w3.org/2000/svg"><title>Combined Shape</title><path d="M10.274 9.193a5.957 5.957 0 0 1-2.98.778C4.37 9.97 2 7.963 2 5.485 2 3.008 4.37 1 7.294 1c2.924 0 5.294 2.008 5.294 4.485 0 .843-.274 1.632-.751 2.305l.577 2.21-2.14-.807zm-5.983-2.96a.756.756 0 0 0 .763-.748.756.756 0 0 0-.763-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.764.747c0 .413.342.748.764.748zm3.054 0a.756.756 0 0 0 .764-.748.756.756 0 0 0-.764-.747.756.756 0 0 0-.763.747c0 .413.342.748.763.748z" fill="#FFF" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/resources/send_logo_type.svg b/public/resources/send_logo_type.svg
deleted file mode 100644
index 07091885..00000000
--- a/public/resources/send_logo_type.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="180" height="25" viewBox="0 0 180 25" xmlns="http://www.w3.org/2000/svg"><title>logo design_01 copy</title><path d="M82.652.6h5.408v1.299h-3.89v2.446h3.556v1.252H84.17v3.407h-1.517V.6zm7.025.772a.733.733 0 0 1-.253-.574c0-.233.084-.424.253-.574A.938.938 0 0 1 90.323 0c.267 0 .483.075.65.224a.74.74 0 0 1 .25.574.736.736 0 0 1-.25.574c-.167.15-.383.224-.65.224a.938.938 0 0 1-.646-.224zm1.375 1.26v6.372H89.6V2.633h1.452zm3.21 0v.99h.1c.058-.209.17-.396.332-.561.162-.165.363-.295.602-.39.24-.096.494-.143.764-.143.11 0 .222.006.336.017.113.012.203.027.27.047v1.34a1.703 1.703 0 0 0-.32-.056 3.936 3.936 0 0 0-.427-.026c-.313 0-.591.061-.834.183a1.364 1.364 0 0 0-.568.519 1.46 1.46 0 0 0-.202.771v3.681h-1.458V2.633h1.405zm8.488 5.621a2.512 2.512 0 0 1-.985.652 3.77 3.77 0 0 1-1.349.228c-.627 0-1.168-.132-1.622-.396A2.615 2.615 0 0 1 97.747 7.6c-.242-.493-.364-1.08-.364-1.76 0-.679.122-1.269.367-1.77.245-.5.595-.887 1.05-1.159.454-.272.99-.408 1.604-.408.608 0 1.132.129 1.573.385a2.5 2.5 0 0 1 1.01 1.11c.234.483.35 1.057.35 1.72v.466h-4.49v.076c.011.35.084.654.217.915.133.26.32.46.559.6.239.14.517.21.834.21.36 0 .664-.064.908-.19a1.12 1.12 0 0 0 .527-.545h1.38c-.09.385-.264.719-.522 1.002zm-3.122-4.409a1.43 1.43 0 0 0-.543.545 1.841 1.841 0 0 0-.232.812h3.027a1.811 1.811 0 0 0-.2-.818 1.333 1.333 0 0 0-.517-.542 1.506 1.506 0 0 0-.764-.19 1.54 1.54 0 0 0-.77.193zm4.591-.017V2.673h1.052V2.05c0-.637.18-1.1.538-1.392.359-.291.899-.437 1.62-.437.223 0 .468.022.735.064v1.078a3.028 3.028 0 0 0-.559-.047c-.306 0-.532.068-.679.204-.147.136-.22.35-.22.64v.513h1.399v1.154h-1.382v5.177h-1.452V3.827h-1.052zm6.175 4.91a2.615 2.615 0 0 1-1.067-1.145c-.247-.499-.37-1.09-.37-1.773 0-.68.124-1.27.373-1.768a2.646 2.646 0 0 1 1.073-1.148c.466-.266 1.015-.399 1.646-.399.635 0 1.184.133 1.649.4.464.265.82.647 1.07 1.144.248.497.373 1.087.373 1.77 0 .684-.125 1.275-.373 1.774-.25.499-.606.88-1.07 1.145-.465.264-1.014.396-1.65.396-.638 0-1.19-.132-1.654-.396zm2.834-1.366c.276-.367.414-.885.414-1.552 0-.664-.14-1.18-.417-1.55-.279-.369-.67-.553-1.176-.553-.51 0-.903.184-1.182.553-.278.37-.417.886-.417 1.55 0 .667.14 1.185.417 1.552.279.367.673.55 1.182.55.51 0 .902-.183 1.179-.55zm4.14 1.633H115.8l2.081-3.162-2.098-3.21h1.687l1.281 2.19h.1l1.27-2.19h1.604l-2.075 3.152 2.099 3.22h-1.646l-1.317-2.195h-.1l-1.316 2.195zm11.14-7.105h-2.61v-1.3h6.742v1.3h-2.616v7.105h-1.516V1.9zm9.693 6.354a2.512 2.512 0 0 1-.985.652 3.77 3.77 0 0 1-1.349.228c-.627 0-1.168-.132-1.622-.396a2.615 2.615 0 0 1-1.047-1.136c-.243-.493-.364-1.08-.364-1.76 0-.679.122-1.269.367-1.77.245-.5.595-.887 1.05-1.159.454-.272.99-.408 1.604-.408.608 0 1.132.129 1.573.385a2.5 2.5 0 0 1 1.01 1.11c.234.483.35 1.057.35 1.72v.466h-4.49v.076c.011.35.084.654.217.915.133.26.32.46.559.6.239.14.517.21.834.21.36 0 .663-.064.908-.19s.42-.308.526-.545h1.382c-.09.385-.265.719-.523 1.002zm-3.122-4.409a1.43 1.43 0 0 0-.543.545 1.841 1.841 0 0 0-.232.812h3.027a1.811 1.811 0 0 0-.2-.818 1.333 1.333 0 0 0-.517-.542 1.506 1.506 0 0 0-.765-.19 1.54 1.54 0 0 0-.77.193zm5.352-.402c.218-.295.522-.525.912-.69.39-.165.835-.248 1.337-.248.505 0 .947.072 1.325.216.378.144.675.352.89.626.216.274.342.603.377.987h-1.37a.848.848 0 0 0-.396-.538c-.21-.13-.483-.196-.82-.196-.22 0-.418.033-.594.1a1.013 1.013 0 0 0-.417.273.593.593 0 0 0-.153.402c0 .179.077.326.232.443.155.116.395.211.72.285l1.135.256c.619.14 1.073.348 1.363.624.29.275.435.646.435 1.112 0 .4-.116.754-.35 1.063-.233.309-.557.548-.972.72-.416.17-.888.256-1.417.256-.533 0-.997-.073-1.393-.219-.396-.145-.708-.357-.938-.635a1.775 1.775 0 0 1-.396-.993h1.44c.07.241.218.426.444.556.225.13.518.196.878.196.243 0 .459-.033.647-.1a1.01 1.01 0 0 0 .44-.279.608.608 0 0 0 .16-.414.553.553 0 0 0-.215-.448c-.143-.116-.367-.208-.673-.274l-1.14-.262c-.62-.14-1.077-.356-1.373-.65-.296-.292-.444-.678-.444-1.155 0-.38.109-.719.326-1.014zm8.327-.769h1.375v1.154h-1.375v3.127c0 .315.07.545.211.69.141.146.365.219.67.219.134 0 .298-.01.494-.03v1.13c-.243.047-.497.07-.764.07-.498 0-.896-.058-1.196-.174-.3-.117-.52-.301-.658-.553-.14-.253-.21-.587-.21-1.002V3.827h-1.016V2.673h1.017V1.072h1.452v1.601zM159.862.958c.43.239.766.573 1.005 1.002.239.429.358.923.358 1.482 0 .548-.123 1.034-.37 1.46a2.58 2.58 0 0 1-1.032.992c-.44.237-.945.356-1.513.356h-1.84v2.754h-1.517V.6h3.421c.56 0 1.056.12 1.488.358zm-1.893 4.045c.545 0 .967-.136 1.267-.408.3-.271.45-.656.45-1.153 0-.512-.149-.905-.445-1.176-.295-.272-.718-.408-1.266-.408h-1.505v3.145h1.499zm4.867-3.631a.733.733 0 0 1-.253-.574c0-.233.084-.424.253-.574a.938.938 0 0 1 .646-.224c.267 0 .483.075.65.224.167.15.25.341.25.574a.736.736 0 0 1-.25.574c-.167.15-.383.224-.65.224a.938.938 0 0 1-.646-.224zm1.375 1.26v6.372h-1.452V2.633h1.452zM167.533.17v8.835h-1.458V.17h1.458zm2.96 8.568a2.615 2.615 0 0 1-1.068-1.145c-.247-.499-.37-1.09-.37-1.773 0-.68.124-1.27.373-1.768a2.646 2.646 0 0 1 1.073-1.148c.466-.266 1.015-.399 1.646-.399.635 0 1.184.133 1.649.4.464.265.82.647 1.07 1.144.248.497.373 1.087.373 1.77 0 .684-.125 1.275-.374 1.774-.248.499-.605.88-1.07 1.145-.464.264-1.013.396-1.648.396-.639 0-1.19-.132-1.655-.396zm2.832-1.366c.277-.367.415-.885.415-1.552 0-.664-.14-1.18-.418-1.55-.278-.369-.67-.553-1.175-.553-.51 0-.903.184-1.182.553-.278.37-.417.886-.417 1.55 0 .667.14 1.185.417 1.552.279.367.672.55 1.182.55.51 0 .902-.183 1.178-.55zm5.3-4.698H180v1.154h-1.375v3.127c0 .315.07.545.211.69.141.146.365.219.67.219.133 0 .298-.01.494-.03v1.13a4.02 4.02 0 0 1-.764.07c-.498 0-.897-.058-1.196-.174a1.23 1.23 0 0 1-.659-.553c-.139-.253-.208-.587-.208-1.002V3.827h-1.017V2.673h1.017V1.072h1.452v1.601zm-90.83 20.248l-1.557-5.207h-.076l-1.558 5.207h-.811L82 16.648h.782l1.405 5.323h.07l1.564-5.323h.77l1.563 5.323h.07l1.418-5.323h.775l-1.804 6.273h-.817zm8.404-.67a2.47 2.47 0 0 1-.903.574c-.356.134-.754.2-1.193.2-.576 0-1.077-.131-1.502-.396a2.602 2.602 0 0 1-.984-1.127c-.232-.487-.347-1.059-.347-1.715 0-.652.115-1.223.347-1.712a2.6 2.6 0 0 1 .987-1.133c.427-.266.925-.399 1.493-.399.557 0 1.04.125 1.45.376.409.25.723.61.943 1.077.219.468.329 1.019.329 1.651v.338h-4.756v.035c.012.47.104.88.277 1.23.172.349.411.618.717.809.305.19.66.285 1.064.285.446 0 .827-.084 1.14-.253.314-.17.539-.409.676-.72h.782a2.096 2.096 0 0 1-.52.88zm-3.125-4.767a1.9 1.9 0 0 0-.708.748 2.638 2.638 0 0 0-.297 1.124h3.944a2.542 2.542 0 0 0-.246-1.124 1.794 1.794 0 0 0-.673-.748 1.878 1.878 0 0 0-1.003-.265c-.38 0-.719.088-1.017.265zm7.142 5.18a2.203 2.203 0 0 1-.858-.996h-.076v1.253h-.735V14.15h.77v3.716h.07a2.09 2.09 0 0 1 .841-.967 2.414 2.414 0 0 1 1.293-.355c.53 0 .996.134 1.4.402.403.268.714.646.934 1.136.22.489.329 1.056.329 1.7 0 .641-.11 1.207-.332 1.698-.222.491-.533.872-.935 1.142-.401.27-.867.405-1.396.405-.486 0-.92-.12-1.305-.362zm.062-5.12c-.312.21-.553.509-.723.895-.17.386-.256.834-.256 1.342 0 .51.086.957.256 1.343s.411.684.723.894c.312.21.673.314 1.085.314.411 0 .77-.103 1.075-.311.306-.208.541-.505.706-.891.164-.387.246-.838.246-1.354 0-.517-.082-.966-.246-1.349a1.987 1.987 0 0 0-.706-.885 1.867 1.867 0 0 0-1.075-.312c-.412 0-.773.105-1.085.315zm13.437 4.707c-.245.248-.545.44-.902.574a3.37 3.37 0 0 1-1.193.2c-.576 0-1.077-.131-1.502-.396a2.602 2.602 0 0 1-.985-1.127c-.23-.487-.346-1.059-.346-1.715 0-.652.115-1.223.346-1.712.232-.49.56-.867.988-1.133.427-.266.925-.399 1.493-.399.556 0 1.04.125 1.449.376.41.25.724.61.943 1.077.22.468.33 1.019.33 1.651v.338h-4.756v.035c.012.47.104.88.276 1.23.173.349.412.618.718.809.305.19.66.285 1.063.285.447 0 .827-.084 1.14-.253.314-.17.54-.409.677-.72h.782a2.096 2.096 0 0 1-.52.88zm-3.124-4.767a1.9 1.9 0 0 0-.708.748 2.638 2.638 0 0 0-.297 1.124h3.944a2.542 2.542 0 0 0-.247-1.124 1.794 1.794 0 0 0-.673-.748 1.878 1.878 0 0 0-1.002-.265c-.38 0-.719.088-1.017.265zm5.567 5.437h-.882l2.234-3.157-2.252-3.116h.93l1.721 2.504h.071l1.71-2.504h.888l-2.222 3.087 2.246 3.186h-.923l-1.723-2.563h-.07l-1.728 2.563zm10.219-5.976c.402.268.713.646.934 1.136.222.489.333 1.056.333 1.7 0 .645-.111 1.212-.333 1.701-.22.49-.532.869-.934 1.139s-.867.405-1.396.405c-.49 0-.924-.116-1.302-.347a2.056 2.056 0 0 1-.832-.952h-.07V25h-.77v-8.352h.734v1.281h.07c.197-.43.487-.77.87-1.016.385-.247.818-.37 1.3-.37.529 0 .994.134 1.396.402zm-.485 5.076c.306-.208.542-.503.708-.885.167-.383.25-.832.25-1.349 0-.516-.083-.968-.25-1.354a2.002 2.002 0 0 0-.708-.891 1.867 1.867 0 0 0-1.076-.312 1.88 1.88 0 0 0-1.084.318 2.05 2.05 0 0 0-.723.894c-.17.384-.256.83-.256 1.34 0 .508.085.955.256 1.339.17.384.411.682.723.894.311.212.67.317 1.078.317.416 0 .776-.103 1.082-.311zm8.026.23c-.244.248-.545.44-.902.574-.356.134-.754.2-1.193.2-.576 0-1.077-.131-1.502-.396a2.602 2.602 0 0 1-.985-1.127c-.23-.487-.346-1.059-.346-1.715 0-.652.115-1.223.346-1.712.232-.49.56-.867.988-1.133.427-.266.925-.399 1.493-.399.557 0 1.04.125 1.449.376.41.25.724.61.943 1.077.22.468.33 1.019.33 1.651v.338h-4.756v.035c.012.47.104.88.277 1.23.172.349.411.618.717.809.305.19.66.285 1.064.285.446 0 .826-.084 1.14-.253.313-.17.539-.409.676-.72h.782a2.096 2.096 0 0 1-.52.88zm-3.124-4.767a1.9 1.9 0 0 0-.708.748 2.638 2.638 0 0 0-.297 1.124h3.944a2.542 2.542 0 0 0-.247-1.124 1.794 1.794 0 0 0-.673-.748 1.878 1.878 0 0 0-1.002-.265c-.38 0-.719.088-1.017.265zm6.149-.836v1.03h.076a1.44 1.44 0 0 1 .362-.593c.17-.171.377-.304.62-.4.243-.094.503-.142.782-.142.25 0 .448.018.593.052v.763a3.366 3.366 0 0 0-.688-.076c-.32 0-.612.075-.872.225-.26.15-.466.355-.615.617a1.754 1.754 0 0 0-.223.883v3.914h-.77v-6.273h.735zm3.853-1.567a.551.551 0 0 1-.168-.402c0-.155.056-.288.168-.399a.552.552 0 0 1 .403-.166c.156 0 .291.056.405.166.114.111.17.244.17.4a.547.547 0 0 1-.167.401.554.554 0 0 1-.408.17.547.547 0 0 1-.403-.17zm.79 1.567v6.273h-.77v-6.273h.77zm2.751 0v1.13h.077a1.79 1.79 0 0 1 .69-.906c.324-.22.703-.329 1.138-.329.435 0 .808.11 1.12.33.311.219.536.52.673.905h.076a1.97 1.97 0 0 1 .773-.903c.35-.221.752-.332 1.202-.332.635 0 1.128.182 1.479.545.35.363.526.876.526 1.54v4.293h-.77v-4.118c0-.513-.125-.903-.374-1.17-.248-.269-.612-.403-1.09-.403-.317 0-.6.075-.846.225-.247.15-.44.354-.576.614-.138.26-.206.551-.206.874v3.978h-.77v-4.2c0-.299-.061-.56-.182-.786a1.278 1.278 0 0 0-.512-.521 1.544 1.544 0 0 0-.764-.184c-.302 0-.577.082-.826.245a1.7 1.7 0 0 0-.588.667 2.02 2.02 0 0 0-.214.929v3.85h-.77v-6.273h.734zm14.293 5.603c-.245.248-.546.44-.902.574-.357.134-.755.2-1.193.2-.577 0-1.077-.131-1.502-.396a2.602 2.602 0 0 1-.985-1.127c-.231-.487-.347-1.059-.347-1.715 0-.652.116-1.223.347-1.712.231-.49.56-.867.988-1.133.427-.266.924-.399 1.493-.399.556 0 1.04.125 1.449.376.41.25.724.61.943 1.077.22.468.33 1.019.33 1.651v.338h-4.756v.035c.012.47.104.88.276 1.23.173.349.412.618.717.809.306.19.66.285 1.064.285.447 0 .827-.084 1.14-.253.314-.17.54-.409.677-.72h.781a2.096 2.096 0 0 1-.52.88zm-3.124-4.767a1.9 1.9 0 0 0-.708.748 2.638 2.638 0 0 0-.297 1.124h3.944a2.542 2.542 0 0 0-.247-1.124 1.794 1.794 0 0 0-.673-.748 1.878 1.878 0 0 0-1.002-.265c-.38 0-.72.088-1.017.265zm6.148-.836v1.13h.077c.168-.392.427-.696.776-.912.348-.215.772-.323 1.27-.323.705 0 1.25.201 1.636.603.386.402.58.968.58 1.698v4.077h-.77v-3.885c0-.598-.139-1.049-.415-1.351-.276-.303-.689-.455-1.237-.455a1.93 1.93 0 0 0-.979.245 1.703 1.703 0 0 0-.664.69c-.159.297-.238.64-.238 1.028v3.728h-.77v-6.273h.734zm7.442 0h1.464v.646h-1.464v3.891c0 .384.078.663.235.836.157.173.414.259.77.259.177 0 .33-.006.459-.017v.652a4.021 4.021 0 0 1-.54.04c-.409 0-.736-.053-.983-.16a1.039 1.039 0 0 1-.54-.51c-.114-.232-.17-.54-.17-.925v-4.066h-1.035v-.646h1.034v-1.63h.77v1.63zM4.739 19.117c.448.494 1.042.875 1.782 1.143s1.585.402 2.534.402c.876 0 1.663-.137 2.361-.41.699-.273 1.244-.654 1.635-1.143.39-.49.586-1.043.586-1.661 0-.804-.326-1.458-.977-1.963-.652-.505-1.702-.922-3.152-1.252l-2.924-.664c-2.044-.454-3.558-1.193-4.543-2.218C1.056 10.326.563 8.984.563 7.325c0-1.34.35-2.516 1.048-3.531.698-1.015 1.681-1.803 2.948-2.365C5.825.868 7.293.587 8.96.587c1.564 0 2.966.276 4.207.827 1.24.551 2.226 1.321 2.956 2.31.73.99 1.126 2.118 1.188 3.385H13.45c-.135-.979-.61-1.757-1.423-2.334-.813-.577-1.84-.865-3.08-.865-.855 0-1.609.129-2.26.386-.652.258-1.158.624-1.517 1.097a2.66 2.66 0 0 0-.54 1.654c0 .752.308 1.363.923 1.831.615.47 1.621.863 3.018 1.183l2.596.587c1.533.34 2.776.785 3.73 1.337.954.55 1.655 1.23 2.103 2.04.449.808.673 1.784.673 2.928 0 1.432-.357 2.679-1.071 3.74-.715 1.061-1.739 1.878-3.073 2.45-1.335.571-2.91.857-4.723.857-1.71 0-3.217-.27-4.52-.811-1.303-.541-2.328-1.309-3.073-2.303-.745-.994-1.15-2.16-1.212-3.5h3.941c.083.66.35 1.236.798 1.73zm29.895 2.333c-.688.752-1.561 1.33-2.62 1.73-1.058.403-2.254.604-3.589.604-1.668 0-3.107-.35-4.316-1.051-1.21-.7-2.137-1.705-2.784-3.014-.646-1.308-.97-2.864-.97-4.667s.326-3.369.978-4.698C21.985 9.025 22.915 8 24.125 7.28c1.209-.721 2.632-1.082 4.269-1.082 1.616 0 3.01.34 4.183 1.02 1.173.68 2.07 1.661 2.69 2.944.62 1.283.93 2.805.93 4.567v1.236H24.25v.2c.03.928.224 1.737.578 2.427.355.69.85 1.221 1.486 1.592.636.37 1.376.556 2.22.556.96 0 1.765-.167 2.417-.502.652-.335 1.118-.817 1.4-1.445h3.675a5.853 5.853 0 0 1-1.392 2.658zM26.33 9.751a3.8 3.8 0 0 0-1.447 1.445c-.36.624-.566 1.342-.618 2.156h8.054c-.02-.824-.198-1.548-.531-2.171a3.542 3.542 0 0 0-1.377-1.437c-.584-.335-1.261-.503-2.033-.503-.76 0-1.444.17-2.048.51zm16.899-3.214v2.704h.266c.417-.968 1.055-1.717 1.916-2.248.86-.53 1.915-.796 3.166-.796 1.898 0 3.355.546 4.372 1.638 1.016 1.092 1.524 2.648 1.524 4.667v10.942h-3.878v-10.03c0-1.298-.282-2.27-.845-2.913-.563-.644-1.433-.966-2.611-.966-.761 0-1.426.165-1.994.495a3.307 3.307 0 0 0-1.314 1.414c-.308.613-.461 1.331-.461 2.155v9.845h-3.88V6.537h3.738zm17.697 16.119c-1.064-.711-1.88-1.724-2.448-3.037-.568-1.314-.852-2.862-.852-4.644 0-1.772.287-3.312.86-4.62.574-1.31 1.39-2.319 2.448-3.03 1.058-.71 2.301-1.066 3.73-1.066 1.167 0 2.21.263 3.127.788a5.042 5.042 0 0 1 2.065 2.179h.266V0H74v23.444h-3.753V20.77h-.266a5.252 5.252 0 0 1-2.135 2.171c-.933.52-1.994.78-3.182.78-1.429 0-2.675-.355-3.738-1.065zm2.666-12.48c-.64.438-1.133 1.07-1.478 1.894-.344.824-.516 1.797-.516 2.92 0 1.134.172 2.11.516 2.929.345.819.837 1.447 1.478 1.885.642.438 1.4.657 2.276.657.886 0 1.652-.219 2.299-.657.646-.438 1.141-1.069 1.485-1.893.344-.824.516-1.798.516-2.92 0-1.113-.174-2.082-.523-2.906-.35-.824-.848-1.458-1.494-1.9-.646-.444-1.407-.665-2.283-.665-.876 0-1.634.219-2.276.656z" fill="#3E3D40" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/server/server.js b/server/server.js
index 24e1d418..97787255 100644
--- a/server/server.js
+++ b/server/server.js
@@ -34,10 +34,12 @@ app.engine(
app.set('view engine', 'handlebars');
app.use(helmet());
-app.use(helmet.hsts({
- maxAge: 31536000,
- force: conf.env === 'production'
-}));
+app.use(
+ helmet.hsts({
+ maxAge: 31536000,
+ force: conf.env === 'production'
+ })
+);
app.use(
helmet.contentSecurityPolicy({
directives: {
@@ -241,7 +243,7 @@ app.post('/upload', (req, res, next) => {
.catch(err => {
log.info('DeleteError:', newId);
});
- })
+ });
});
app.get('/__lbheartbeat__', (req, res) => {
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 285ad3c7..5eb891ff 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -13,10 +13,17 @@
<script defer src="/l20n/dist/web/l20n.js"></script>
</head>
<body>
- <div class="send-logo">
- <img src="/resources/send_logo.svg"/>
- <img src="/resources/send_logo_type.svg"/>
- </div>
+ <header class="header">
+ <div class="send-logo">
+ <img src="/resources/send_logo.svg" alt="Send"/>
+ <h1 class="site-title">Send</h1>
+ <div class="site-subtitle">
+ <a href="https://testpilot.firefox.com" target="_blank">Firefox Test Pilot</a>
+ <div data-l10n-id="siteSubtitle">web experiment</div>
+ </div>
+ </div>
+ <a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank" data-l10n-id="siteFeedback">Feedback</a>
+ </header>
<div class="all">
{{{body}}}
</div>