mozilla
/
blurts-server
зеркало из https://github.com/mozilla/blurts-server.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge branch 'template-updates'

This commit is contained in:
groovecoder 2018-06-01 06:44:41 -05:00
Родитель da9a81d48a 61f8047a5d
Коммит 64f4125190
29 изменённых файлов: 831 добавлений и 811 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
.gitignore поставляемый
Просмотреть файл

@ -3,5 +3,6 @@ node_modules
.nyc_output
.coveralls.yml
.DS_Store
.vscode
breach_hashsets
version.json

760
public/css/app.css
Просмотреть файл

@ -1,209 +1,601 @@
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,600,700');
html {
font-size: 0.9rem;
--grey-20: #EDEDF0;
--primary-text-color: #0c0c0d;
--secondary-text-color: #737373;
}
* {
html, body {
margin: 0 0 0 0;
padding:0 0 0 0;
color: #ffffff;
font-family: 'Fira Sans', sans-serif;
font-weight: 300;
}
.default-body {
min-height: 100vh;
display: flex;
flex-flow: column;
}
.default-body > :not(.filler-footer) {
flex: 0 0 auto;
}
.default-body > .filler-footer {
flex: 1 0 auto;
body {
background: rgba(0, 62, 170,1);
background-image: linear-gradient(140deg,
rgba(69, 161, 255,1),rgba(10, 132, 255,1),
rgba(0, 96, 223,1),rgba(0, 96, 223,1), rgba(0, 62, 170,1) );
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
h1, h2, h3, h4, h5 {
/* Override Foundation */
font-family: 'Fira Sans', sans-serif;
margin-bottom: 0;
font-family: 'Fira Sans', sans-serif !important;
font-weight:300;
}
.demi {
font-weight:400;
}
.medium {
font-weight:500;
}
.bold {
font-weight: 600;
}
.thin {
font-size: 0.8rem;
color: var(--secondary-text-color);
}
.top-bar {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
padding-left: calc(8.33vw + .625rem); /* equal to one 1 grid column out of 12 */
padding-right: calc(8.33vw + .625rem);
background-color: black;
color: white;
align-items: baseline;
}
img.logo {
margin-bottom: 10px;
width: 64px !important;
height: 64px !important;
}
.top-bar a:not(.button) {
color: inherit;
}
.top-bar a.button {
padding: .75em 1em;
margin-bottom: .75em;
}
.top-bar-left > * {
display: inline-block;
}
.top-bar-left > ul {
background: none;
margin-left: 1.25rem;
}
.top-bar-left > ul > li {
margin-left: 1.25rem;
margin-right: 1.25rem;
display: inline-block;
border-bottom: 3px solid white;
}
.top-bar-left > ul > li > a {
font-size: 1.25rem;
padding: 0;
padding-bottom: 0.25rem;
}
.gray-bg {
background-color: var(--grey-20);
}
.rounded-cell {
border-radius: 0.25rem;
background: white;
margin-left: 0.625rem !important;
margin-right: 0 !important;
width: calc(83.33333vw - 1.25rem) !important;
}
.rounded-cell.small-6 {
width: calc(50vw - 1.25rem) !important;
}
.rounded-cell.small-4 {
width: calc(33.33333vw - 0.675rem) !important;
}
.flexbox {
display: flex;
}
.email-to-hash {
max-width: 25rem;
}
.breach-img {
margin: auto;
flex: 0 0 auto;
text-align: center;
padding-right: 2rem;
}
.protect-img {
margin: auto;
width: 33%;
max-width: 225px;
flex: 0 0 auto;
text-align: center;
padding-right: 2rem;
}
.breach-img {
max-width: 150px;
}
.fill {
fill: blue;
}
.flex-grow {
flex: 1 auto;
}
.flex {
flex: 1 1 auto;
}
.main-grid .cell {
padding: 2rem;
}
.padding {
padding: 1.25rem !important;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
.bottom-border {
border-bottom: 2px solid var(--grey-20);
}
.tips-header {
flex: 0 0 auto;
}
.padding-start {
padding-left: 1.625rem !important;
}
#subscribe-modal {
width: 31rem;
}
#subscribe-modal:focus {
outline: none;
}
.center-center {
display: flex;
align-items: center;
justify-content: center;
}
.full-width {
#banner-sections-wrapper, .section-wrapper, .tips-wrapper, #compromised-accounts-wrapper {
max-width:1300px;
min-width:800px;
width:100%;
}
.breach-item-container {
.section-wrapper {
margin: auto auto;
overflow:hidden;
text-align:center;
}
/* header **************** */
.logo-wrapper {
max-height:100px;
min-height:80px;
height:10vh;
}
.top-bar, .section-container{
padding-left: calc(4.33vw + .625rem);
padding-right: calc(4.33vw + .625rem);
}
header.top-bar {
padding-top: 0;
padding-bottom: 0;
background: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
min-height: 90px;
height: 9vh;
max-height: 100px;
}
.top-bar-left a,
.top-bar-left a h2,
.top-bar-left {
height: 100%;
}
.top-bar-left a {
color: inherit;
display:flex;
align-items:center;
}
.top-bar-left a h1 {
font-size: calc(27px + .5vw);
letter-spacing: -0.77px;
}
img.logo {
margin-right: 20px;
width: auto !important;
height:60px;
}
/* banner-info **************** */
.section-container{
display:flex;
flex-flow:column;
justify-content: center;
align-items: center;
}
#banner-info {
background: white;
background-color: #fff;
color: black;
overflow:hidden;
}
#banner-sections-wrapper{
min-height:300px;
display:inline-flex;
flex-direction: row;
flex-wrap:nowrap;
margin: auto auto;
text-align:left;
}
#banner-left,
#banner-right {
flex: 1 1 auto;
display:flex;
padding-top:calc(2.5rem + .5vw);
padding-bottom: calc(2.5rem + .5vw);
position:relative;
}
#banner-left {
padding-right: 4.5rem;
}
#banner-left .account {
flex-direction:column;
border-bottom:0px !important;
padding:0 0 0 0;
}
.banner-content .account .image-wrap {
flex-basis: auto;
max-width: 90px;
}
.banner-content span.medium {
color: #d10022;
}
.banner-content span.breach-info {
margin-top: calc(5px + .25vh + .25vw);
max-width:300px;
width:100%;
font-weight:400;
}
#breach-title-date span.breach-info {
margin-top: 0px;
}
.banner-content span.breach-info span.medium {
display:block;
}
#breach-title-wrapper {
display:flex;
margin-bottom:calc(.5vh + .5vw);
}
#breach-title-date {
display: flex;
align-items:center;
justify-content:center;
flex-direction:column;
align-items: flex-start;
}
#breach-title-date h3, #breach-title-date span {
white-space:nowrap;
}
#banner-right {
padding-left: 4.5rem;
}
#banner-right img#arrow-divider {
position:absolute;
top:-5%;
bottom:-5%;
left:-11%;
height:110%;
pointer-events: none;
}
.banner-content {
display: flex;
align-items: flex-start;
justify-content: center;
flex: 1 1 auto;
height: 100%;
flex-flow: column;
min-width: 350px;
max-width: 500px;
}
#banner-right .banner-content {
align-items:center;
margin: auto;
}
.banner-content p{
max-width:520px;
line-height:1.3;
font-size:15px;
}
#sign-up-button-group p.demi{
padding-top:0px;
}
.banner-content p,
.banner-content form {
padding-top:2rem;
margin-bottom: 0px;
}
.banner-content h2 {
line-height: 1.3;
font-size: calc(24px + .5vw);
}
.banner-content form {
max-width:385px;
}
.input-group>:first-child {
min-width: 300px;
text-indent:1rem;
}
.banner-content form input{
height: 55px;
border-right: none !important;
}
.banner-content form input::-moz-placeholder {
color:#979797;
}
.banner-content form input:focus {
border-color: #0a84ff;
}
div.input-group {
margin-bottom: 4px;
}
form span {
font-size: 11px;
}
.input-group-button {
color: white;
transition: background-color .25s ease-out,color .25s ease-out;
border-radius: 0px 3px 3px 0px;
position: relative;
min-width: 100px;
}
.input-group img, .input-group-button .button {
margin: auto;
position:absolute;
bottom:0;
top:0;
}
.input-group-button img {
z-index: 1;
position:absolute;
left:12px;
margin: auto;
}
.input-group-button .button {
width:100%;
right: 0;
text-align: right;
}
.input-group-button:hover, .input-group-button:hover .button, .button:hover {
background-color: #0052be;
}
/* sign up for alerts button + message *************************** */
#sign-up-button-group {
min-width:300px;
max-width: 400px;
width: calc(300px + 1vw);
font-size:17px;
line-height:21px;
}
#sign-up-button-group button{
width:100%;
height:60px;
font-size:20px;
}
/* tips *************************** */
#tips-container {
padding-bottom: calc(4.33vw + .625rem);
}
#password-advice {
margin-top: calc(4.33vw + .625rem);
}
#password-advice p {
margin: calc(.66vw + .625rem) auto calc(.66vw + .625rem) auto;
width: 70%;
}
.tips-wrapper {
display:inline-flex;
margin: auto;
justify-content:space-between;
flex-wrap:wrap;
}
.tip-container {
margin-top: calc(30px + 3vw);
min-width:250px;
width:100%;
flex-basis: 32%;
}
.tip {
min-height:400px;
height:100%;
text-align:center;
position:relative;
border: 1px solid #002275;
border-radius:2px;
}
.tip p {
margin: 0 0 0 0;
font-size: 15px;
padding-top: calc(10px + .55vw);
padding-left: calc(10px + 1vw + 1vh);
padding-right: calc(10px + 1vw + 1vh);
padding-bottom: calc(10px + .55vw);
line-height:1.7;
text-align:center;
}
.tip-header {
background:#002275;
color: white;
padding-top:calc(45px + 1.95vw);
padding-bottom: calc(10px + .55vw);
}
.tip-header h4 {
font-weight:400;
font-size:18px;
text-align: center;
}
.tip-numeral {
font-size: 22px;
line-height:10px;
margin-top:10px;
}
.svg-background {
background:white;
border-radius: 50%;
height: calc(60px + 1.95vw);
width: calc(60px + 1.95vw);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: calc(2px + .5vw);
position: absolute;
top: -30px;
left: 0;
right: 0;
margin: 0 auto;
color: #002275;
}
.svg-background img {
max-width:80%;
max-height:60%;
}
#false-door {
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
z-index:2;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.22);
transition: opacity .15s ease, display .2s ease, background-color .2s ease;
}
#false-door div {
margin: auto;
border-radius: 2px;
background: white;
color: black;
display: inline-block;
width: 40vw;
min-width:300px;
max-width:600px;
padding-top:calc(4.33vw + .625rem);
padding-bottom: calc(4.33vw + .625rem);
transition: all 0.2s ease;
}
#false-door div p {
line-height:1.3;
font-size:14px;
}
#false-door div button {
width: 100%;
}
#false-door div p, #false-door div button{
margin: 2vh auto 2vh auto;
}
/* compromised accounts ********** */
#compromised-accounts-wrapper {
display:inline-flex;
flex-direction: row;
justify-content: space-between;
padding-top:calc(2.5rem + .5vw);
padding-bottom:calc(2.5rem + .5vw);
flex-wrap:nowrap;
width:100%;
}
#compromised-accounts {
display: flex;
flex-direction: column;
}
#compromised-accounts h3 {
margin-bottom: calc(15px + 1vh + 1vw);
}
.column-container-twothirds {
flex-basis: 66%;
align-self: flex-start;
width:100%;
}
.column-container-third {
flex-basis: 30%;
align-self:flex-end;
}
.account {
display: flex;
flex-direction: row;
border-bottom: 1px solid #00217550;
padding: 2vh 0 2vh 0;
}
.breach-item-container > img {
flex: 0 0 auto;
padding-right: 1rem;
object-fit: contain;
.account .image-wrap {
flex-basis: 16%;
align-self:flex-start;
margin-right: calc(15px + .5vh + .5vw);
border-radius: 9%;
overflow: hidden;
}
.footer-bg {
background-color: #091818;
span.breach-info {
display: block;
}
#what-to-do {
font-size:17px;
list-style: none;
background-color: #0021753a;
padding: calc(15px + .5vh + .5vw);
width:100%;
min-width: 250px;
max-width:400px;
}
#what-to-do span:first-of-type {
display: block;
font-size: 32px;
line-height: 1.05;
}
#what-to-do li {
margin-bottom: calc(15px + .5vh + .5vw);
line-height:1.4;
}
#what-to-do form label {
color:white;
font-size:17px;
}
#what-to-do .input-group-button img{
right:0;
left: 0;
margin: auto;
}
#what-do-do form {
width:100%;
}
#what-to-do form .input-group > :first-child {
height: 55px;
min-width:100px;
width:100%;
text-indent:10px;
}
#what-to-do form .input-group-button {
width: 50px;
position:absolute;
bottom:0;
right:0;
}
#what-to-do .input-group {
position:relative;
border-radius:6px;
overflow: hidden;
}
#what-to-do .input-group-button {
position: absolute;
top:0;
bottom:0;
right:0;
width:50px;
min-width:50px;
}
#what-to-do .input-group-button .button {
background-color: #0a84ff;
}
#source-info {
margin-top: calc(15px + .5vh + .5vw);
font-size:15px;
}
#pwned {
display: inline-block;
border:1px solid white;
border-radius:5px;
padding: 0 .45rem .1rem .45rem;
margin:0 .5rem;
}
/* sign up button in header on {{breach}} */
#header-button {
display: inline-flex;
align-self: flex-end;
align-items: center;
height:100%;
}
#header-button p {
margin:0 0 0 0;
line-height: 1.2;
font-size:16px;
text-align:right;
}
#header-button #sign-up {
background-color: #003eaa;
margin-left: calc(10px + .25vh + .25vw);
margin-bottom: 0px;
height: 55px;
}
.top-bar .section-wrapper {
display:flex;
}

Двоичные данные
public/img/Password_Tip_1@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 2.2 KiB

Двоичные данные
public/img/Password_Tip_2@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.6 KiB

Двоичные данные
public/img/Password_Tip_3@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 932 B

Двоичные данные
public/img/Password_Tip_4@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 2.2 KiB

Двоичные данные
public/img/Password_Tip_5@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 558 B

Двоичные данные
public/img/Password_Tip_6@2x.png Executable file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 1.5 KiB

6
public/img/Search.svg Normal file
Просмотреть файл

@ -0,0 +1,6 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="white" d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"></path>
</svg>
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 463 B

86
public/img/Tip1.svg
Просмотреть файл

@ -1,86 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; fill: #082470;" xml:space="preserve">
<g>
<g>
<g>
<path d="M509.501,386.499c-1.6-1.6-3.771-2.499-6.035-2.499h-34.133V85.333c-0.015-14.132-11.468-25.585-25.6-25.6H68.267
c-14.132,0.015-25.585,11.468-25.6,25.6V384H8.533c-2.263-0.001-4.434,0.898-6.035,2.499c-1.6,1.6-2.499,3.771-2.499,6.035V409.6
c0.028,23.553,19.114,42.639,42.667,42.667h426.667c23.553-0.028,42.639-19.114,42.667-42.667v-17.067
C512.001,390.27,511.102,388.099,509.501,386.499z M59.733,85.333c0.005-4.711,3.822-8.529,8.533-8.533h375.467
c4.711,0.005,8.529,3.822,8.533,8.533V384H331.525c-7.261-0.14-13.796,4.381-16.225,11.225c-0.436,1.289-1.183,2.451-2.175,3.383
c-1.559,1.591-3.698,2.479-5.925,2.458H204.8c-3.681-0.008-6.945-2.371-8.1-5.867c-2.433-6.833-8.964-11.344-16.217-11.2H59.733
V85.333z M494.933,409.6c-0.015,14.132-11.468,25.585-25.6,25.6H42.667c-14.132-0.015-25.585-11.468-25.6-25.6v-8.554
l33.598-0.087c0.186,0.012,0.346,0.108,0.535,0.108c0.196,0,0.358-0.098,0.55-0.111l128.767-0.335
c3.481,10.456,13.263,17.51,24.283,17.513h102.4c6.759,0.049,13.25-2.642,17.992-7.458c2.761-2.724,4.919-5.997,6.333-9.609
h163.408V409.6z"/>
<path d="M435.2,349.867V110.933c-0.011-9.421-7.645-17.056-17.067-17.067h-76.8c-4.713,0-8.533,3.82-8.533,8.533
s3.821,8.533,8.533,8.533h76.8v238.933H93.867V110.933h76.8c4.713,0,8.533-3.821,8.533-8.533s-3.82-8.533-8.533-8.533h-76.8
c-9.421,0.011-17.056,7.646-17.067,17.067v238.933c0.011,9.421,7.646,17.056,17.067,17.067h324.267
C427.555,366.923,435.189,359.288,435.2,349.867z"/>
<path d="M256,230.4c27.593,0.002,52.47-16.619,63.031-42.111c10.561-25.492,4.725-54.836-14.786-74.348
c-19.511-19.512-48.854-25.349-74.347-14.79c-25.493,10.559-42.115,35.435-42.115,63.028
C187.824,199.838,218.341,230.357,256,230.4z M256,111.025c20.69-0.002,39.344,12.461,47.263,31.575s3.544,41.118-11.086,55.749
c-14.63,14.631-36.632,19.008-55.748,11.091c-19.116-7.917-31.579-26.57-31.579-47.261
C204.879,133.941,227.762,111.056,256,111.025z"/>
<path d="M241.434,185.279c1.6,1.601,3.77,2.5,6.033,2.5s4.433-0.899,6.033-2.5l25.6-25.6c2.155-2.156,2.997-5.297,2.208-8.242
c-0.789-2.944-3.089-5.244-6.033-6.033c-2.944-0.789-6.086,0.053-8.242,2.208l-19.567,19.567l-2.5-2.5
c-3.336-3.308-8.719-3.296-12.041,0.026c-3.322,3.322-3.333,8.705-0.025,12.041L241.434,185.279z"/>
<path d="M145.067,213.333c-14.132,0.015-25.585,11.468-25.6,25.6V307.2c0.015,14.132,11.468,25.585,25.6,25.6h221.867
c14.132-0.015,25.585-11.468,25.6-25.6v-68.267c-0.015-14.132-11.468-25.585-25.6-25.6H332.8c-4.713,0-8.533,3.82-8.533,8.533
s3.821,8.533,8.533,8.533h34.133c4.711,0.005,8.529,3.822,8.533,8.533V307.2c-0.005,4.711-3.822,8.529-8.533,8.533H145.067
c-4.711-0.005-8.529-3.822-8.533-8.533v-68.267c0.005-4.711,3.822-8.529,8.533-8.533H179.2c4.713,0,8.533-3.821,8.533-8.533
s-3.82-8.533-8.533-8.533H145.067z"/>
<path d="M204.363,267.232c0.716-2.147,0.549-4.491-0.463-6.516c-1.012-2.025-2.786-3.565-4.934-4.281
c-2.148-0.716-4.492-0.549-6.516,0.464l-4.717,2.358V256c0-4.713-3.82-8.533-8.533-8.533s-8.533,3.82-8.533,8.533v3.258
l-4.717-2.358c-2.729-1.375-5.984-1.187-8.536,0.494c-2.552,1.681-4.01,4.598-3.824,7.647s1.989,5.767,4.726,7.125l1.8,0.9
l-1.8,0.9c-4.2,2.117-5.896,7.232-3.792,11.438s7.213,5.919,11.426,3.829l4.717-2.358v3.258c0,4.713,3.82,8.533,8.533,8.533
s8.533-3.821,8.533-8.533v-3.258l4.717,2.358c4.213,2.09,9.323,0.378,11.426-3.829s0.407-9.321-3.792-11.438l-1.8-0.9l1.8-0.9
C202.108,271.155,203.648,269.38,204.363,267.232z"/>
<path d="M281.163,267.232c0.716-2.147,0.549-4.491-0.463-6.516c-1.011-2.026-2.786-3.567-4.933-4.283
c-2.148-0.716-4.492-0.548-6.517,0.466l-4.717,2.358V256c0-4.713-3.82-8.533-8.533-8.533s-8.533,3.82-8.533,8.533v3.258
l-4.717-2.358c-2.729-1.375-5.984-1.187-8.536,0.494c-2.552,1.681-4.01,4.598-3.824,7.647c0.186,3.05,1.989,5.767,4.726,7.125
l1.8,0.9l-1.8,0.9c-4.2,2.117-5.896,7.232-3.792,11.438s7.213,5.919,11.426,3.829l4.717-2.358v3.258
c0,4.713,3.82,8.533,8.533,8.533s8.533-3.821,8.533-8.533v-3.258l4.717,2.358c4.213,2.09,9.323,0.378,11.426-3.829
s0.407-9.321-3.792-11.438l-1.8-0.9l1.8-0.9C278.908,271.155,280.448,269.38,281.163,267.232z"/>
<path d="M311.014,257.394c-2.552,1.681-4.01,4.598-3.824,7.647c0.186,3.05,1.989,5.767,4.726,7.125l1.8,0.9l-1.8,0.9
c-4.2,2.117-5.896,7.232-3.792,11.438s7.213,5.919,11.426,3.829l4.717-2.358v3.258c0,4.713,3.821,8.533,8.533,8.533
c4.713,0,8.533-3.821,8.533-8.533v-3.258l4.717,2.358c4.213,2.09,9.323,0.378,11.426-3.829c2.103-4.206,0.407-9.321-3.792-11.438
l-1.8-0.9l1.8-0.9c4.2-2.117,5.896-7.232,3.792-11.438c-2.103-4.206-7.213-5.919-11.426-3.829l-4.717,2.358V256
c0.001-2.263-0.898-4.434-2.499-6.035c-1.6-1.6-3.771-2.499-6.035-2.499c-2.263-0.001-4.434,0.898-6.035,2.499
c-1.6,1.6-2.499,3.771-2.499,6.035v3.258l-4.717-2.358C316.821,255.525,313.566,255.713,311.014,257.394z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 5.3 KiB

70
public/img/Tip2.svg
Просмотреть файл

@ -1,70 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.005 512.005" style="enable-background:new 0 0 512.005 512.005; fill: #24596F" xml:space="preserve">
<g>
<g>
<g>
<path d="M366.738,285.286c-24.557,0.014-46.029,16.555-52.309,40.296c-6.279,23.741,4.207,48.734,25.546,60.888v44.075
c0,14.782,11.983,26.765,26.765,26.765s26.765-11.983,26.765-26.765v-44.075c21.34-12.154,31.826-37.148,25.546-60.89
C412.769,301.838,391.296,285.298,366.738,285.286z M381.512,373.436L381.512,373.436c-3.085,1.368-5.074,4.425-5.075,7.8v49.308
c0,5.356-4.342,9.698-9.698,9.698s-9.698-4.342-9.698-9.698v-49.308c-0.001-3.375-1.99-6.432-5.075-7.8
c-16.095-6.999-25.069-24.332-21.495-41.515s18.717-29.499,36.267-29.499s32.693,12.316,36.267,29.499
C406.582,349.104,397.607,366.437,381.512,373.436z"/>
<path d="M466.433,261.373v-64.763c0.217-27.035-10.229-53.066-29.075-72.45c-29.189-30.777-74.974-39.054-113.092-20.444V93.061
c1.8-21.929-5.176-43.676-19.396-60.467c-18.975-21.625-49.775-32.592-91.537-32.592c-41.804,0-72.621,10.975-91.592,32.608
c-14.208,16.792-21.165,38.538-19.342,60.458v50.042c-5.947,6.64-9.255,15.228-9.3,24.142v37.383
c-0.003,11.156,5.102,21.699,13.854,28.617c6.398,24.465,17.486,47.455,32.65,67.692v31.175
c0.033,9.344-5.039,17.961-13.225,22.467l-83.033,45.399C16.597,414.659-0.022,442.752,0,473.261v30.208
c-0.001,2.263,0.898,4.434,2.499,6.035c1.6,1.6,3.771,2.499,6.035,2.499h358.229c59.486,0.071,112.987-36.182,134.969-91.458
C523.714,365.269,509.722,302.174,466.433,261.373z M320.637,125.602c32.565-22.986,77.074-18.544,104.454,10.425h0
c15.752,16.211,24.475,37.98,24.275,60.583v50.75c-6.147-4.276-12.624-8.056-19.371-11.304v-39.446
c0.185-17.5-6.55-34.365-18.737-46.925c-12.405-13.296-30.097-20.363-48.249-19.274c-18.152,1.09-34.871,10.222-45.597,24.907
c-9.085,11.84-13.969,26.368-13.884,41.292v39.447c-6.747,3.248-13.224,7.028-19.372,11.304l0.001-50.751
C284.012,168.409,297.627,141.908,320.637,125.602z M412.929,196.611v32.479c-29.97-9.97-62.363-9.97-92.333,0v-32.479
c-0.07-11.188,3.59-22.081,10.4-30.958c8.359-11.408,21.624-18.189,35.767-18.283c12.258-0.003,23.954,5.143,32.233,14.183
C408.085,170.942,413.093,183.544,412.929,196.611z M17.067,494.936v-21.675c-0.019-24.273,13.197-46.626,34.475-58.308
l83.025-45.392c13.661-7.498,22.139-21.858,22.104-37.442v-34.133c0.001-1.998-0.7-3.932-1.979-5.467
c-15.134-19.61-25.987-42.176-31.858-66.242c-0.497-2.161-1.815-4.044-3.675-5.25c-5.591-3.578-8.979-9.754-8.992-16.392v-37.384
c0.03-5.489,2.397-10.705,6.508-14.342c1.778-1.615,2.792-3.906,2.792-6.308V92.586c-0.001-0.362-0.024-0.724-0.071-1.084
c-1.322-17.326,4.179-34.482,15.329-47.808c15.608-17.666,42.058-26.625,78.608-26.625c36.513,0,62.942,8.95,78.558,26.608
c11.159,13.32,16.677,30.471,15.379,47.8c-0.046,0.368-0.07,0.738-0.071,1.108v21.939c-25.37,19.666-40.184,49.986-40.108,82.086
v64.756c-34.079,32.025-50.598,78.534-44.353,124.881s34.484,86.826,75.824,108.688H17.067z M486.49,412.565
c-18.968,49.627-66.599,82.397-119.728,82.371c-53.154,0.081-100.832-32.682-119.812-82.332
c-18.98-49.65-5.316-105.863,34.337-141.26c0.265-0.232,0.513-0.483,0.742-0.75c9.938-8.868,21.236-16.082,33.463-21.367
c32.714-14.228,69.87-14.222,102.579,0.017c12.204,5.279,23.482,12.482,33.404,21.333c0.12,0.137,0.257,0.26,0.386,0.39
l0.012,0.012c0.118,0.119,0.227,0.243,0.352,0.356C491.827,306.753,505.458,362.938,486.49,412.565z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 3.8 KiB

77
public/img/Tip3.svg
Просмотреть файл

@ -1,77 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; fill: #72164D;" xml:space="preserve">
<g>
<g>
<g>
<path d="M443.733,247.467v-153.6c0-0.187-0.094-0.343-0.106-0.527c-0.112-2.057-0.957-4.006-2.384-5.493l-0.012-0.016
L355.903,2.503l-0.016-0.012c-0.713-0.689-1.542-1.248-2.448-1.651c-0.247-0.115-0.503-0.18-0.761-0.272
c-0.748-0.266-1.531-0.424-2.323-0.469C350.183,0.089,350.04,0,349.867,0H102.4C83.558,0.022,68.288,15.291,68.267,34.133V153.6
c-18.842,0.021-34.112,15.291-34.133,34.133v290.133c0.022,18.842,15.291,34.112,34.133,34.133h375.467
c18.842-0.022,34.112-15.291,34.133-34.133V281.6C477.845,262.758,462.576,247.488,443.733,247.467z M358.4,29.133l56.2,56.2
h-39.133c-9.422-0.009-17.057-7.645-17.067-17.067V29.133z M68.267,494.933c-9.422-0.009-17.057-7.645-17.067-17.067V187.733
c0.009-9.422,7.645-17.057,17.067-17.067h88.663c5.724-0.001,11.067,2.865,14.234,7.633l18.966,28.454
c6.338,9.438,16.957,15.103,28.325,15.113h157.013c9.422,0.009,17.057,7.645,17.067,17.067v238.933
c0.034,6.01,1.674,11.902,4.748,17.067H68.267z M375.467,204.8H218.454c-5.678-0.009-10.981-2.838-14.15-7.55l-18.942-28.417
c-6.328-9.52-17.002-15.238-28.433-15.233H85.333V34.133c0.009-9.422,7.645-17.057,17.067-17.067h238.933v51.2
c0.022,18.842,15.291,34.112,34.133,34.133h51.2v341.333c-0.009,9.422-7.645,17.057-17.067,17.067V238.933
C409.578,220.091,394.309,204.822,375.467,204.8z M460.8,477.867c-0.009,9.422-7.645,17.057-17.067,17.067h-17.067
c-9.422-0.009-17.057-7.645-17.067-17.067c18.842-0.022,34.112-15.291,34.133-34.133v-179.2
c9.422,0.009,17.057,7.645,17.067,17.067V477.867z"/>
<path d="M307.2,68.267H119.467c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533H307.2c4.713,0,8.533-3.82,8.533-8.533
S311.913,68.267,307.2,68.267z"/>
<path d="M307.2,102.4H119.467c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533H307.2c4.713,0,8.533-3.82,8.533-8.533
S311.913,102.4,307.2,102.4z"/>
<path d="M307.2,136.533H204.8c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533h102.4c4.713,0,8.533-3.821,8.533-8.533
S311.913,136.533,307.2,136.533z"/>
<path d="M307.2,170.667h-85.333c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533H307.2c4.713,0,8.533-3.82,8.533-8.533
S311.913,170.667,307.2,170.667z"/>
<path d="M318.138,268.821c-0.676-3.376-3.315-6.015-6.692-6.692l-29.817-5.962c-2.798-0.569-5.695,0.308-7.708,2.333l-85.004,85
c-22.02-3.926-44.369,4.915-57.744,22.842c-13.375,17.927-15.484,41.869-5.45,61.858c10.035,19.99,30.494,32.602,52.86,32.587
c17.489,0.019,34.087-7.716,45.319-21.121c11.233-13.405,15.944-31.1,12.864-48.316l13.442-13.446c1.6-1.6,2.5-3.77,2.5-6.033
V356.55h15.321c4.713,0,8.533-3.82,8.533-8.533v-15.321h15.317c4.713,0,8.533-3.82,8.533-8.533v-15.317h15.321
c2.557,0,4.979-1.147,6.599-3.124c1.621-1.977,2.269-4.577,1.767-7.084L318.138,268.821z M291.879,291.779
c-4.713,0-8.533,3.82-8.533,8.533v15.317h-15.317c-4.713,0-8.533,3.82-8.533,8.533v15.321h-15.321
c-4.713,0-8.533,3.82-8.533,8.533v20.321l-14.254,14.255c-2.159,2.159-3,5.306-2.208,8.254
c5.258,19.712-4.393,40.355-22.89,48.96s-40.504,2.69-52.194-14.03c-11.69-16.72-9.69-39.419,4.743-53.838l0,0
c7.892-7.87,18.583-12.289,29.729-12.288c3.666-0.001,7.315,0.482,10.854,1.438c2.948,0.784,6.091-0.057,8.254-2.208
l85.083-85.083l19.763,3.95l2.804,14.033H291.879z"/>
<path d="M169.4,377.331c-11.306,4.673-17.734,16.684-15.352,28.683c2.382,11.999,12.91,20.644,25.144,20.645v0
c6.789,0.013,13.304-2.679,18.104-7.479v-0.004c8.662-8.638,10.014-22.194,3.228-32.373S180.705,372.658,169.4,377.331z
M182.46,408.958c-3.189,1.321-6.861,0.591-9.302-1.85c-1.606-1.598-2.51-3.77-2.51-6.035c0-2.266,0.903-4.438,2.51-6.035v0
c2.441-2.441,6.112-3.171,9.302-1.85c3.19,1.321,5.269,4.433,5.269,7.886C187.729,404.525,185.65,407.637,182.46,408.958z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 4.2 KiB

87
public/img/Tip4.svg
Просмотреть файл

@ -1,87 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512; fill: #3D0E6C;" xml:space="preserve">
<g>
<g>
<g>
<path d="M460.8,281.6h-42.667c-4.713,0-8.533,3.821-8.533,8.533c0,4.713,3.82,8.533,8.533,8.533H460.8
c4.713,0,8.533-3.821,8.533-8.533C469.333,285.421,465.513,281.6,460.8,281.6z"/>
<path d="M401.067,264.533H460.8c4.713,0,8.533-3.82,8.533-8.533c0-4.713-3.82-8.533-8.533-8.533h-59.733
c-4.713,0-8.533,3.82-8.533,8.533C392.533,260.713,396.354,264.533,401.067,264.533z"/>
<path d="M477.867,17.067H34.133C15.29,17.087,0.02,32.357,0,51.2v256c0.02,18.843,15.29,34.113,34.133,34.133h143.634
c5.947,13.523,15.286,25.28,27.111,34.133h-68.345c-14.132,0.015-25.585,11.468-25.6,25.6v68.267
c0.015,14.132,11.468,25.585,25.6,25.6h238.933c14.132-0.015,25.585-11.468,25.6-25.6v-68.267
c-0.015-14.132-11.468-25.585-25.6-25.6h-68.345c11.826-8.853,21.165-20.611,27.111-34.133h143.634
c18.843-0.02,34.113-15.29,34.133-34.133v-256C511.98,32.357,496.71,17.087,477.867,17.067z M375.467,392.533
c4.711,0.005,8.529,3.822,8.533,8.533v68.267c-0.005,4.711-3.822,8.529-8.533,8.533H136.533
c-4.711-0.005-8.529-3.823-8.533-8.533v-68.267c0.005-4.711,3.822-8.529,8.533-8.533h117.658
c0.608,0.013,1.198,0.092,1.809,0.092s1.202-0.079,1.809-0.092H375.467z M257.81,375.467h-3.621
c-37.362-0.991-66.991-31.822-66.496-69.194s30.932-67.407,68.307-67.407s67.811,30.036,68.307,67.407
S295.172,374.476,257.81,375.467z M494.933,307.2c-0.011,9.421-7.645,17.056-17.067,17.067h-138.2
c6.898-33.926-7.374-68.66-36.133-87.935c-28.759-19.275-66.31-19.275-95.069,0c-28.759,19.275-43.031,54.008-36.133,87.935
H34.133c-9.421-0.011-17.056-7.645-17.067-17.067V136.533h477.867V307.2z M494.933,119.467H17.067V85.333h477.867V119.467z
M494.933,68.267H17.067V51.2c0.011-9.421,7.646-17.056,17.067-17.067h443.733c9.421,0.011,17.056,7.646,17.067,17.067V68.267z"
/>
<path d="M59.733,307.2h34.133c14.132-0.015,25.585-11.468,25.6-25.6v-17.067c-0.015-14.132-11.468-25.585-25.6-25.6H59.733
c-14.132,0.015-25.585,11.468-25.6,25.6V281.6C34.149,295.732,45.601,307.185,59.733,307.2z M51.2,264.533
c0.005-4.711,3.822-8.529,8.533-8.533h34.133c4.711,0.005,8.529,3.822,8.533,8.533V281.6c-0.005,4.711-3.822,8.529-8.533,8.533
H59.733c-4.711-0.005-8.529-3.822-8.533-8.533V264.533z"/>
<path d="M51.2,204.8H256c9.421-0.011,17.056-7.645,17.067-17.067v-17.067c-0.011-9.421-7.646-17.056-17.067-17.067H51.2
c-9.421,0.011-17.056,7.646-17.067,17.067v17.067C34.144,197.155,41.779,204.789,51.2,204.8z M51.2,170.667H256l0.012,17.067
H51.2V170.667z"/>
<path d="M282.165,273.023c-3.06-0.189-5.986,1.278-7.665,3.843l-28.358,42.542l-9.709-9.708
c-3.341-3.281-8.701-3.256-12.012,0.054c-3.311,3.311-3.335,8.671-0.054,12.012l17.067,17.067c1.6,1.601,3.77,2.5,6.033,2.5
c0.279,0,0.558-0.017,0.842-0.042c2.544-0.252,4.84-1.631,6.258-3.758l34.133-51.2c1.722-2.536,1.951-5.802,0.6-8.554
C287.949,275.028,285.225,273.212,282.165,273.023z"/>
<path d="M204.363,429.366c0.716-2.147,0.549-4.491-0.463-6.516c-1.011-2.026-2.786-3.567-4.934-4.283
c-2.148-0.716-4.492-0.548-6.516,0.466l-4.717,2.358v-3.258c0-4.713-3.82-8.533-8.533-8.533s-8.533,3.821-8.533,8.533v3.258
l-4.717-2.358c-2.729-1.375-5.984-1.187-8.536,0.494s-4.01,4.598-3.824,7.647s1.989,5.767,4.726,7.125l1.8,0.9l-1.8,0.9
c-4.2,2.117-5.896,7.232-3.792,11.438s7.213,5.919,11.426,3.829l4.717-2.358v3.258c0,4.713,3.82,8.533,8.533,8.533
s8.533-3.82,8.533-8.533v-3.258l4.717,2.358c4.213,2.09,9.323,0.378,11.426-3.829s0.407-9.321-3.792-11.438l-1.8-0.9l1.8-0.9
C202.108,433.288,203.648,431.513,204.363,429.366z"/>
<path d="M247.467,418.133v3.258l-4.717-2.358c-2.729-1.375-5.984-1.187-8.536,0.494c-2.552,1.681-4.01,4.598-3.824,7.647
c0.186,3.05,1.989,5.767,4.726,7.125l1.8,0.9l-1.8,0.9c-4.2,2.117-5.896,7.232-3.792,11.438s7.213,5.919,11.426,3.829
l4.717-2.358v3.258c0,4.713,3.82,8.533,8.533,8.533s8.533-3.82,8.533-8.533v-3.258l4.717,2.358
c4.213,2.09,9.323,0.378,11.426-3.829s0.407-9.321-3.792-11.438l-1.8-0.9l1.8-0.9c4.2-2.117,5.896-7.232,3.792-11.438
s-7.213-5.919-11.426-3.829l-4.717,2.358v-3.258c0-4.713-3.82-8.533-8.533-8.533S247.467,413.421,247.467,418.133z"/>
<path d="M311.917,434.3l1.8,0.9l-1.8,0.9c-2.025,1.012-3.564,2.787-4.28,4.934c-0.716,2.147-0.549,4.491,0.463,6.516
c2.109,4.214,7.234,5.923,11.45,3.817l4.717-2.358v3.258c0,4.713,3.821,8.533,8.533,8.533c4.713,0,8.533-3.82,8.533-8.533v-3.258
l4.717,2.358c4.213,2.09,9.323,0.378,11.426-3.829c2.103-4.206,0.407-9.321-3.792-11.438l-1.8-0.9l1.8-0.9
c4.2-2.117,5.896-7.232,3.792-11.438s-7.213-5.919-11.426-3.829l-4.717,2.358v-3.258c0-4.713-3.821-8.533-8.533-8.533
c-4.713,0-8.533,3.821-8.533,8.533v3.258l-4.717-2.358c-2.729-1.375-5.984-1.187-8.536,0.494s-4.01,4.598-3.824,7.647
C307.377,430.225,309.18,432.942,311.917,434.3z"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 5.2 KiB

70
public/img/Tip5.svg
Просмотреть файл

@ -1,70 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 511 511" style="enable-background:new 0 0 511 511; fill: #2A631A;" xml:space="preserve">
<g>
<path d="M487.5,24h-464C10.542,24,0,34.542,0,47.5v304C0,364.458,10.542,375,23.5,375h158.057l-11.714,41H135.5
c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h39.976c0.009,0,0.019,0.002,0.028,0.002c0.008,0,0.016-0.002,0.024-0.002H271.5
c4.142,0,7.5-3.358,7.5-7.5s-3.358-7.5-7.5-7.5h-86.057l11.714-41H271.5c4.142,0,7.5-3.358,7.5-7.5s-3.358-7.5-7.5-7.5h-248
c-4.687,0-8.5-3.813-8.5-8.5v-304c0-4.687,3.813-8.5,8.5-8.5h464c4.687,0,8.5,3.813,8.5,8.5v304c0,4.142,3.358,7.5,7.5,7.5
s7.5-3.358,7.5-7.5v-304C511,34.542,500.458,24,487.5,24z"/>
<path d="M471.5,56h-432c-4.142,0-7.5,3.358-7.5,7.5v272c0,4.142,3.358,7.5,7.5,7.5h232c4.142,0,7.5-3.358,7.5-7.5
s-3.358-7.5-7.5-7.5H47V135h417v32.5c0,4.142,3.358,7.5,7.5,7.5s7.5-3.358,7.5-7.5v-104C479,59.358,475.642,56,471.5,56z M47,120
V71h417v49H47z"/>
<path d="M391.5,88h-240c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h240c4.142,0,7.5-3.358,7.5-7.5S395.642,88,391.5,88z"/>
<path d="M439.5,88h-16c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h16c4.142,0,7.5-3.358,7.5-7.5S443.642,88,439.5,88z"/>
<path d="M71.5,88c-1.97,0-3.91,0.8-5.3,2.2c-1.4,1.39-2.2,3.33-2.2,5.3c0,1.97,0.8,3.91,2.2,5.3c1.39,1.4,3.33,2.2,5.3,2.2
c1.97,0,3.91-0.8,5.3-2.2c1.4-1.39,2.2-3.33,2.2-5.3c0-1.97-0.8-3.91-2.2-5.3C75.41,88.8,73.47,88,71.5,88z"/>
<path d="M95.5,88c-1.98,0-3.91,0.8-5.3,2.2c-1.4,1.39-2.2,3.32-2.2,5.3c0,1.97,0.8,3.91,2.2,5.3c1.39,1.4,3.33,2.2,5.3,2.2
c1.97,0,3.91-0.8,5.3-2.2c1.4-1.39,2.2-3.33,2.2-5.3c0-1.98-0.8-3.91-2.2-5.3C99.41,88.8,97.48,88,95.5,88z"/>
<path d="M119.5,88c-1.97,0-3.91,0.8-5.3,2.2c-1.4,1.39-2.2,3.33-2.2,5.3c0,1.97,0.8,3.91,2.2,5.3c1.39,1.4,3.33,2.2,5.3,2.2
c1.98,0,3.91-0.8,5.3-2.2c1.4-1.39,2.2-3.33,2.2-5.3c0-1.97-0.8-3.91-2.2-5.3C123.41,88.8,121.48,88,119.5,88z"/>
<path d="M455.5,192h-136c-12.958,0-23.5,10.542-23.5,23.5v248c0,12.958,10.542,23.5,23.5,23.5h136c12.958,0,23.5-10.542,23.5-23.5
v-248C479,202.542,468.458,192,455.5,192z M311,239h153v33H311V239z M311,287h153v153H311V287z M319.5,207h136
c4.687,0,8.5,3.813,8.5,8.5v8.5H311v-8.5C311,210.813,314.813,207,319.5,207z M455.5,472h-136c-4.687,0-8.5-3.813-8.5-8.5V455h153
v8.5C464,468.187,460.187,472,455.5,472z"/>
<path d="M415.5,248h-88c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h88c4.142,0,7.5-3.358,7.5-7.5S419.642,248,415.5,248z"/>
<path d="M447.5,248h-8c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h8c4.142,0,7.5-3.358,7.5-7.5S451.642,248,447.5,248z"/>
<path d="M87.5,160c-8.547,0-15.5,6.953-15.5,15.5v104c0,8.547,6.953,15.5,15.5,15.5h120c8.547,0,15.5-6.953,15.5-15.5v-104
c0-8.547-6.953-15.5-15.5-15.5H87.5z M158.836,227.5L208,184.12v86.761L158.836,227.5z M147.5,217.498L99.336,175h96.328
L147.5,217.498z M87,270.88V184.12l49.164,43.38L87,270.88z M147.5,237.502L195.664,280H99.336L147.5,237.502z"/>
<path d="M255.5,175h184c4.142,0,7.5-3.358,7.5-7.5s-3.358-7.5-7.5-7.5h-184c-4.142,0-7.5,3.358-7.5,7.5S251.358,175,255.5,175z"/>
<path d="M271.5,200h-16c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h16c4.142,0,7.5-3.358,7.5-7.5S275.642,200,271.5,200z"/>
<path d="M271.5,240h-16c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h16c4.142,0,7.5-3.358,7.5-7.5S275.642,240,271.5,240z"/>
<path d="M271.5,280h-16c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h16c4.142,0,7.5-3.358,7.5-7.5S275.642,280,271.5,280z"/>
<path d="M431.5,304h-88c-8.547,0-15.5,6.953-15.5,15.5v56c0,8.547,6.953,15.5,15.5,15.5h88c8.547,0,15.5-6.953,15.5-15.5v-56
C447,310.953,440.047,304,431.5,304z M401.47,347.5L432,328.072v38.856L401.47,347.5z M387.5,338.61L356.684,319h61.632
L387.5,338.61z M343,366.928v-38.856l30.53,19.428L343,366.928z M387.5,356.39L418.316,376h-61.632L387.5,356.39z"/>
<path d="M439.5,408h-104c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h104c4.142,0,7.5-3.358,7.5-7.5S443.642,408,439.5,408z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 4.2 KiB

Двоичные данные
public/img/arrow_divider.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 5.3 KiB

55
public/js/test.js
Просмотреть файл

@ -41,26 +41,47 @@ function removeUser() {
}
// eslint-disable-next-line no-unused-vars
function doOauth() {
window.open("/oauth/init");
// function doOauth() {
// window.open("/oauth/init");
// }
// function isValidEmail(val) {
// // https://stackoverflow.com/a/46181
// const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// return re.test(String(val).toLowerCase());
// }
// function enableBtnIfEmailValid(e) {
// const emailBtn = document.getElementById("subscribe-email-btn");
// if (isValidEmail(e.target.value)) {
// emailBtn.disabled = false;
// } else {
// emailBtn.disabled = true;
// }
// }
function showFalseDoor(){
const falseDoorBlurb = "<div class='section-container'><h4>Thank you for trying Firefox Monitor</h4><p>FireFox Monitor is a concept we are testing. We hope to provide the service to everyone soon.</p><p>Stay up-to-date with Firefox Monitor and other new features when you sign up for the <a href='https://www.mozilla.org/newsletter/firefox/'>Firefox newsletter.</a></p><button class='button' id='close-false-door'>Close</button></div>";
const falseDoor = document.createElement("div");
falseDoor.setAttribute("id", "false-door");
document.body.appendChild(falseDoor);
falseDoor.innerHTML = falseDoorBlurb;
const falseDoorButton = document.getElementById("close-false-door");
falseDoorButton.onclick = function (){
falseDoor.parentElement.removeChild(falseDoor);
};
}
function isValidEmail(val) {
// https://stackoverflow.com/a/46181
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(val).toLowerCase());
}
function enableBtnIfEmailValid(e) {
const emailBtn = document.getElementById("subscribe-email-btn");
if (isValidEmail(e.target.value)) {
emailBtn.disabled = false;
} else {
emailBtn.disabled = true;
}
}
$(document).foundation();
document.querySelector("#subscribe-fxa-btn").addEventListener("click", doOauth);
document.querySelector("#subscribe-email-input").addEventListener("input", enableBtnIfEmailValid);
document.querySelector("#sign-up").addEventListener("click", showFalseDoor);
// document.querySelector("#subscribe-fxa-btn").addEventListener("click", doOauth);
// document.querySelector("#subscribe-email-input").addEventListener("input", enableBtnIfEmailValid);

2
routes/user.js
Просмотреть файл

@ -25,8 +25,6 @@ router.post("/add", urlEncodedParser, async (req, res) => {
const unverifiedEmailHash = await DBUtils.addUnverifiedEmailHash(email);
const url = `${AppConstants.SERVER_URL}/user/verify?token=${encodeURIComponent(unverifiedEmailHash.verification_token)}&email=${encodeURIComponent(email)}`;
// TODO: Temporary for debugging.
console.log(url);
try {
await EmailUtils.sendEmail(

67
views/layouts/default.hbs
Просмотреть файл

@ -4,75 +4,32 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="/css/vendor/foundation.min.css">
<link rel="stylesheet" href="/css/app.css">
<script type="text/javascript" src="/js/vendor/jquery.js" defer></script>
<script type="text/javascript" src="/js/vendor/foundation.min.js" defer></script>
<script type="text/javascript" src="/js/test.js" defer></script>
</head>
<body class="default-body">
<div class="top-bar">
<body>
<header class ="top-bar">
<div class="section-wrapper">
<div class="top-bar-left">
<a href="/">
<h2>
<img alt="placeholder" class="logo" src="/img/firefox.png">
<span class="bold">Firefox</span> Monitor
</h2>
<a href="/" alt="Firefox Monitor">
<h1><img alt="Firefox Logo" class="logo" src="/img/firefox.png" /><span class="medium">Firefox</span> Monitor</h1>
</a>
<ul class="menu">
<li><a href="#start">Start</a></li>
<li><a href="#tips">Tips</a></li>
</ul>
</div>
{{#if breach}}
<div class="top-bar-right">
<a class="button" data-open="subscribe-modal">Subscribe</a>
{{> sign_up_header }}
</div>
{{/if}}
</div>
<div class="grid-x main-grid grid-padding-x grid-padding-y gray-bg">
</header>
{{{ body }}}
<div class="cell"></div>
<div class="cell small-1 footer-bg"></div>
<div class="cell small-10 no-padding footer-bg"><img src="img/footer.png"></div>
<div class="cell small-1 footer-bg"></div>
</div>
<div class="reveal grid-x" id="subscribe-modal" data-reveal>
<div class="cell small-1"></div>
<div class="cell small-10">
<br>
<h3 class="text-justify cell">Subscribe to Breach Alerts</h3>
<br>
<p class="cell">Explanation of what the user will get if they subscribe to breach alerts.</p>
<br>
<a id="subscribe-fxa-btn" class="button sign-in-btn cell">Subscribe with Firefox Accounts</a>
<div class="grid-x cell">
<div class="cell small-5"><hr></div>
<div class="cell small-2 center-center">OR</div>
<div class="cell small-5"><hr></div>
</div>
<br>
<div class="cell grid-x">
<form class="cell small-12" action="/user/add" method="post">
<input id="subscribe-email-input" type="email" name="email" placeholder="Enter Email">
<button id="subscribe-email-btn" type="submit" class="button cell" disabled>Subscribe with Email Account</button>
</form>
</div>
<br>
</div>
<div class="cell small-1"></div>
</div>
</body>
</html>

63
views/monitor.hbs
Просмотреть файл

@ -1,50 +1,25 @@
{{!< default }}
<div class="cell"></div>
<div class="cell small-1"></div>
<div class="cell small-10 rounded-cell flexbox grid-x grid-padding-x grid-padding-y no-padding">
<div class="cell">
<a name="start"></a>
<h2>Protect yourself from hackers. Start here.</h2>
</div>
<div id="banner-info" class="section-container">
<div id="banner-sections-wrapper">
<div id="banner-left">
<div class="banner-content">
{{#if breach }}
<div class="cell flexbox">
<div class="breach-img">
<img alt="placeholder" class="thumbnail" src="img/{{ breach.name }}.png">
</div>
<div class="flex">
<h4>{{ breach.name }} Breach</h4><br>
<p>
<span class="bold">Breach date:</span> {{ breach.date }}<br>
<span class="bold">Compromised data:</span> {{ breach.dataClasses }}<br>
<span class="bold">Compromised accounts:</span> {{ breach.acCount }}<br>
{{ breach.description }}
</p>
</div>
</div>
{{> banner_breach }}
{{ else }}
{{> protect_yourself }}
{{/if}}
<div class="cell">
<div>
<p class="bold">The first step to keeping your online accounts safe is knowing what you’re up against.<br>
Enter your email to find out if your accounts have been compromised.</p>
<br>
<form action="/scan" method="post">
<div class="input-group">
<input class="input-group-field email-to-hash" type="email" name="email">
<div class="input-group-button">
<input id="submit-email" type="submit" class="button" value="Scan">
</div>
</div><!--closes banner-left-->
<div id="banner-right">
<img id="arrow-divider" src="img/arrow_divider.png" />
<div class="banner-content">
{{#if breach}}
{{> protect_yourself }}
{{ else }}
{{> sign_up }}
{{/if}}
</div>
</div><!--close banner-right -->
</div>
</div>
</form>
<p class="thin">
Your email will not be stored or sent content. Find out more in our Privacy Policy.
</p>
</div>
</div>
</div>
<div class="cell small-1"></div>
<div class="cell"></div>
{{> tips }}

14
views/partials/banner_breach.hbs Normal file
Просмотреть файл

@ -0,0 +1,14 @@
<div class="account">
<div id="breach-title-wrapper">
<div class="image-wrap">
<img alt="{{ breach.name }}" src="img/{{ breach.name }}.png">
</div>
<div id="breach-title-date">
<h3>{{ breach.name }} Breach</h3>
<span class="breach-info"><span class="medium">Breach date:</span> {{prettyDate breach.date }}</span>
</div>
</div>
<span class="breach-info"><span class="medium">Compromised data:</span> {{ breach.dataClasses }}</span>
<span class="breach-info"><span class="medium">Compromised accounts:</span> {{ breach.acCount }}</span>
<span class="breach-info">{{ breach.description }}</span>
</div>

17
views/partials/compromised_accounts.hbs Normal file
Просмотреть файл

@ -0,0 +1,17 @@
<div id="compromised-accounts">
<h3>Your Compromised Accounts</h3>
{{#each foundBreaches }}
<div class="account">
<div class="image-wrap">
<img alt="{{ name }}" src="img/{{ name }}.png">
</div>
<div class="breach-info-wrap">
<h4 class="demi">{{ name }}</h4>
<span class="breach-info"><span class="medium">Breach date:</span> {{prettyDate meta.BreachDate }}</span>
<span class="breach-info"><span class="medium">Compromised data:</span> {{breachDataClasses meta.DataClasses }}</span>
<span class="breach-info"><span class="medium">Compromised accounts:</span> {{localeString meta.PwnCount }}</span>
</div>
</div>
{{/each}}
<span id="source-info">Breach data provided by <span id="pwned">';--</span><span class="medium"> Have I been Pwned?</span></span>
</div>

4
views/partials/no_breaches.hbs Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<h2>So far, so good.</h2>
<p class="demi">
Your email address does not appear in our list of compromised accounts. That's good news. But it doesn't mean you're safe: data breaches can happen at any time in a number of ways, so take action to protect your passwords and sign up for alerts from Firefox Monitor.
</p>

4
views/partials/oh_no.hbs Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<h2>Oh, no!<br>This might be a problem.</h2>
<p class="demi">
Your email address appears in our list of compromised accounts. Change your password on these sites and anywhere else you've used the same password. Then, take action to protect all of your accounts and sign up for alerts from Firefox Monitor.
</p>

20
views/partials/protect_yourself.hbs Normal file
Просмотреть файл

@ -0,0 +1,20 @@
<div class="aligner">
<h2>Protect yourself from hackers.<br />Start here.</h2>
{{#if breach }}
<p class="demi">See if your account was exposed in the {{ breach.name }} breach or other data breaches.</p>
{{else}}
<p class="demi">The first step to keeping your online accounts safe is knowing what you’re up against. Enter your email to find out if your accounts have been compromised.</p>
{{/if}}
<form action="/scan" method="post">
<div class="input-group">
<input class="input-group-field email-to-hash" type="email" name="email" placeholder="Enter Email Address">
<div class="input-group-button">
<img src="img/Search.svg" alt="search icon" />
<input id="submit-email" type="submit" class="button" value="Search">
</div>
</div>
<span>Your email will not be stored. Find out more in our <a href="
https://www.mozilla.org/privacy/firefox/" alt="Mozilla Firefox privacy policy">Privacy Policy.</a></span>
</form>
</div>

4
views/partials/sign_up.hbs Normal file
Просмотреть файл

@ -0,0 +1,4 @@
<div id="sign-up-button-group">
<button class="button" id="sign-up">Sign up for alerts</button>
<p class="demi">Get an alert if your account information gets compromised.</p>
</div>

5
views/partials/sign_up_header.hbs Normal file
Просмотреть файл

@ -0,0 +1,5 @@
<div id="header-button">
<p class="demi">Get an alert if your account information<br />is compromised.</p>
<button class="button" id="sign-up">Sign up for alerts</button>
</div>

156
views/partials/tips.hbs
Просмотреть файл

@ -1,68 +1,96 @@
{{!< default }}
<div class="cell small-1"></div>
<div id="password-advice" class="section-container">
<div class="section-wrapper">
<h3>Passwords</h3>
<h4>The Key to Account Security</h4>
<p>Your passwords protect all of the personal information that resides in your online accounts, from bank balances and credit card numbers to your home address and private messages. Passwords are so valuable that thousands of passwords are stolen every day and accounts are traded on the black market. Take these six steps to protect yours.</p>
</div>
</div>
<div id="tips-container" class="section-container">
<div class="tips-wrapper">
<div class="cell small-10 rounded-cell flexbox grid-x grid-padding-x grid-padding-y no-padding">
<div class="cell tips-header bottom-border">
<a name="tips"></a>
<div class="text-center">
<h4 class="bold">Passwords: The key to account security</h4>
</div>
</div>
<div class="cell flexbox bottom-border">
<div class="protect-img">
<img src="img/Tip1.svg">
</div>
<div class="flex">
<h5>1. Use a different password for every account.</h5>
<br>
<p>When an attacker steals the password database for a site that you use (like LinkedIn or Yahoo), there’s nothing you can do but change your password for that site. That’s bad, but the damage can be much worse if you’ve re-used that password with other websites — then the attacker can access your accounts on those sites as well. To keep the damage contained, always use different passwords for different websites.</p>
<br>
</div>
</div>
<div class="cell flexbox bottom-border">
<div class="protect-img">
<img src="img/Tip2.svg">
</div>
<div class="flex">
<h5>2. Create strong passwords.</h5>
<br>
<p>The secret to preventing guessing, theft or password reset is a whole lot of randomness. When attackers try to guess passwords, they usually do two things: use lists of common passwords that people use all the time and make random guesses. The longer and more random your password is, the less likely that either of these guessing techniques will !nd it.</p>
<br>
</div>
</div>
<div class="cell flexbox bottom-border">
<div class="protect-img">
<img src="img/Tip3.svg">
</div>
<div class="flex">
<h5>3. Make your answers to security questions just as strong as your passwords.</h5>
<br>
<p>If you’ve forgotten your password, some sites make you answer security questions before you can reset it. The answers to these questions need to be just as secret as your password. Otherwise, an attacker can guess the answers and set your password to something he knows.
Randomness can be a problem, since the security questions that sites often use things people know or can learn about you, like your birthplace, your birthday, or your relatives’ names. The good news is that websites don’t care if your answers are correct, so you can give answers to the security questions that are long and random, like your passwords.</p>
<br>
</div>
</div>
<div class="cell flexbox bottom-border">
<div class="protect-img">
<img src="img/Tip4.svg">
</div>
<div class="flex">
<h5>4. Use a password manager.</h5>
<br>
<p>These tips may seem overwhelming, but there are tools that can help. Password managers like 1Password, LastPass, or Dashlane can generate strong passwords for you, remember them for you, and !ll them into websites so you don’t have type them in.
Many can even store the long, random answers to your security questions, in case you need to reset your accounts. There are risks in using password managers, since they create a database that has all your passwords in it. However, all reputable password managers encrypt their databases with a “master password.”</p>
<br>
</div>
</div>
<div class="cell flexbox">
<div class="protect-img">
<img src="img/Tip5.svg">
</div>
<div class="flex">
<h5>5. Use two-factor authentication.</h5>
<br>
<p>When an attacker steals the password database for a site that you use (like LinkedIn or Yahoo), there’s nothing you can do but change your password for that site. That’s bad, but the damage can be much worse if you’ve re-used that password with other websites — then the attacker can access your accounts on those sites as well. To keep the damage contained, always use different passwords for different websites.</p>
<br>
</div>
<!-- tip #1-->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_1@2x.png" alt="Use a different password for every account">
<span class="tip-numeral demi">1</span>
</div>
<div class="tip-header">
<h4>Use a different password<br>for every account</h4>
</div>
<p>You can't prevent a data breach, but you can limit your exposure by always using different passwords for different websites.</p>
</div><!--closes tip-->
</div><!--closes tip-container 1-->
<!-- tip # 2 -->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_2@2x.png" alt="Create strong passwords">
<span class="tip-numeral demi">2</span>
</div>
<div class="tip-header">
<h4>Create strong<br>passwords</h4>
</div>
<p>Hackers try to steal passwords by using lists of common passwords and by guessing. The longer and more random your password is, the harder it will be to steal.</p>
</div><!--closes tip-->
</div><!--closes tip-container 2-->
<!-- tip #3 -->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_3@2x.png" alt="Make strong security questions">
<span class="tip-numeral demi">3</span>
</div>
<div class="tip-header">
<h4>Make strong<br>security questions</h4>
</div>
<p>Websites don't care if your security questions are accurate - they only care that your answers match every time. So give answers to the security questions that are long and random, like your passwords.</p>
</div><!--closes tip-->
</div><!--closes tip-container 3-->
<!-- tip # 4 -->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_4@2x.png" alt="Use a password manager">
<span class="tip-numeral demi">4</span>
</div>
<div class="tip-header">
<h4>Use a password<br>manager</h4>
</div>
<p>Password managers like 1Password, LastPass, or Dashlane can generate strong passwords for you, remember them for you, and fill them into websites so you don't have to type them in.</p>
</div><!--closes tip-->
</div><!--closes tip-container 4-->
<!-- tip # 5 -->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_5@2x.png" alt="Use two-factor authentication">
<span class="tip-numeral demi">5</span>
</div>
<div class="tip-header">
<h4>Use two-factor<br>authentication</h4>
</div>
<p>Websites that offer two-factor authentication (also known as 2FA) will commonly register your mobile number or provide you with an access code to install an app. When you log in to the site, you will be prompted to enter a code sent to your phone or respond to a message on the app before gaining access.</p>
</div><!--closes tip-->
</div><!--closes tip-container 5-->
<!-- tip # 6 -->
<div class="tip-container">
<div class="tip">
<div class="svg-background">
<img src="img/Password_Tip_6@2x.png" alt="Sign up for alerts from Firefox Monitor">
<span class="tip-numeral demi">6</span>
</div>
<div class="tip-header">
<h4>Sign up for alerts from<br>Firefox Monitor</h4>
</div>
<p>We'll let you know if your account information is compromised in a data breach or exposed to hackers in some other way.</p>
</div><!--closes tip-->
</div><!--closes tip-container 6-->
</div>
</div>

30
views/partials/what_to_do.hbs Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<ol id="what-to-do">
<li>
<span>1</span>
<span class="bold">Change your password</span> on these sites and anywhere else you've used the same password.
</li>
<li>
<span>2</span>
Make your answers to <span class="bold">security questions</span> just as strong as your passwords.
</li>
<li>
<span>3</span>
<span class="bold">Use password managers</span> like 1Password, LastPass, or Dashlane to generate strong passwords for you, remember them for you, and fill them into websites so you don't have to type them in.
</li>
<li>
<span>4</span>
<span class="bold">Subscribe</span> for alerts from Firefox Monitor to learn sooner about your compromised accounts.
</li>
<li>
<form action="/scan" method="post">
<label class="medium">Scan another email address</label>
<div class="input-group">
<input class="input-group-field email-to-hash" type="email" name="email" placeholder="Enter Email">
<div class="input-group-button">
<img src="img/Search.svg" alt="search icon" />
<input id="submit-email" type="submit" class="button" value="">
</div>
</div>
</form>
</li>
</ol>

100
views/scan.hbs
Просмотреть файл

@ -1,97 +1,31 @@
{{!< default }}
<div class="cell"></div>
<div class="cell small-1"></div>
<div class="cell small-10 rounded-cell flexbox grid-x grid-padding-x grid-padding-y no-padding">
<div class="cell">
<a name="start"></a>
<h2>
<div id="banner-info" class="section-container">
<div id="banner-sections-wrapper">
<div id="banner-left">
<div class="banner-content">
{{#if foundBreaches }}
Oh, no! This might be a problem.
{{> oh_no }}
{{ else }}
So far, so good.
{{> no_breaches }}
{{/if}}
</h2>
</div>
<div class="cell">
<p class="bold">
{{#if foundBreaches }}
{{ email }} appears in our list of compromised accounts. Change your password on these sites and anywhere else you’ve used the same password. Then, take action to protect all of your accounts and sign up for alerts from Firefox Monitor.
{{ else }}
{{ email }} does not appear in our list of compromised accounts. That’s good news. But it doesn’t mean you’re safe - data breaches can happen at any time in a number of ways, so take action to protect your passwords and sign up for alerts from Firefox Monitor.
{{/if}}
</p>
<br>
<form action="/scan" method="post">
<div class="input-group">
<input class="input-group-field email-to-hash" type="email" name="email">
<div class="input-group-button">
<input id="submit-email" type="submit" class="button" value="Scan">
</div><!--closes banner-left-->
<div id="banner-right">
<img id="arrow-divider" src="img/arrow_divider.png" />
<div class="banner-content">
{{> sign_up }}
</div>
</div><!--close banner-right -->
</div>
</div>
</form>
<p class="thin">
Your email will not be stored or sent content. Find out more in our Privacy Policy.
</p>
<p>
Get an alert if your account information is compromised.<br>
<a>Subscribe to Firefox Monitor</a>
</p>
</div>
</div>
<div class="cell small-1"></div>
{{#if foundBreaches }}
<div class="cell"></div>
<div class="cell small-1"></div>
<div class="cell small-6 rounded-cell flexbox grid-x grid-padding-x grid-padding-y no-padding">
<div class="cell tips-header bottom-border">
<div class="text-center">
<h4 class="bold">Your Compromised Accounts</h4>
<div class="section-container">
<div id="compromised-accounts-wrapper">
<div class="column-container-twothirds">{{> compromised_accounts }}</div>
<div class="column-container-third">{{> what_to_do }}</div>
</div>
</div>
{{#each foundBreaches }}
<div class="cell flexbox bottom-border">
<div class="protect-img breach-img">
<img src="img/{{ name }}.png">
</div>
<div class="flex">
<h4>{{ name }}</h4><br>
<p>
<span class="bold">Breach date:</span> {{prettyDate meta.BreachDate }}<br>
<span class="bold">Compromised data:</span> {{breachDataClasses meta.DataClasses }}<br>
<span class="bold">Compromised accounts:</span> {{localeString meta.PwnCount }}<br>
{{! breach Description is run thru dompurify, so we can use triple-{{{ }}
{{{ meta.Description }}}
</p>
</div>
</div>
{{/each}}
<div class="cell"></div>
</div>
<div class="cell small-4 rounded-cell flexbox grid-y grid-padding-x grid-padding-y no-padding">
<div class="cell tips-header bottom-border">
<div class="text-center">
<h4 class="bold">What to Do</h4>
</div>
</div>
<div class="cell">
<p><span class="bold">Change your password</span> on these sites and anywhere else you’ve used the same password.</p>
<p>Make your answers to <span class="bold">security questions</span> just as strong as your passwords.</p>
<p><span class="bold">Use password managers</span> like 1Password, LastPass, or Dashlane to generate strong passwords for you, remember them for you, and fill them into websites so you don’t have type them in.</p>
<p>Sign up for alerts from Firefox Monitor to learn sooner about your compromised accounts.</p>
</div>
<div class="cell"></div>
</div>
<div class="cell small-1"></div>
{{ else }}
<div class="cell"></div>
{{> tips }}
{{/if}}