diff --git a/package-lock.json b/package-lock.json index 24c1378..84dc5dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -919,7 +919,6 @@ "version": "7.3.1", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.1.tgz", "integrity": "sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==", - "dev": true, "requires": { "regenerator-runtime": "^0.12.0" }, @@ -927,8 +926,7 @@ "regenerator-runtime": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz", - "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==", - "dev": true + "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==" } } }, @@ -3232,6 +3230,11 @@ "integrity": "sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==", "dev": true }, + "chain-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz", + "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==" + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -3375,7 +3378,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3396,12 +3400,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3416,17 +3422,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3543,7 +3552,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3555,6 +3565,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3569,6 +3580,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3576,12 +3588,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3600,6 +3614,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3680,7 +3695,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3692,6 +3708,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3777,7 +3794,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3813,6 +3831,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3832,6 +3851,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3875,12 +3895,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -5232,6 +5254,14 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz", + "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==", + "requires": { + "@babel/runtime": "^7.1.2" + } + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -7242,12 +7272,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7267,7 +7299,8 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -13279,6 +13312,14 @@ "scheduler": "^0.13.5" } }, + "react-addons-css-transition-group": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.2.tgz", + "integrity": "sha1-nkN2vPQLUhfRTsaFUwgc7ksIptY=", + "requires": { + "react-transition-group": "^1.2.0" + } + }, "react-app-polyfill": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.2.tgz", @@ -13502,6 +13543,18 @@ "workbox-webpack-plugin": "3.6.3" } }, + "react-transition-group": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz", + "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==", + "requires": { + "chain-function": "^1.0.0", + "dom-helpers": "^3.2.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.5.6", + "warning": "^3.0.0" + } + }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", @@ -17161,6 +17214,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watch": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.18.0.tgz", diff --git a/package.json b/package.json index 04a3e41..ffc388f 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "react": "16.8.5", + "react-addons-css-transition-group": "15.6.2", "react-dom": "16.8.5" }, "devDependencies": { diff --git a/src/app/app.css b/src/app/app.css deleted file mode 100644 index 1c4d511..0000000 --- a/src/app/app.css +++ /dev/null @@ -1,27 +0,0 @@ -.app { - text-align: center; -} - -.app-header { - display: flex; - min-height: 100vh; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #282c34; - color: #fff; - font-size: calc(10px + 2vmin); -} - -.app-link { - color: #61dafb; -} - -@keyframes app-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/app/app.jsx b/src/app/app.jsx deleted file mode 100644 index f759eed..0000000 --- a/src/app/app.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react'; - -import './app.css'; - -export class App extends Component { - render() { - return ( -
-
-

- Edit src/app/app.jsx and save to reload. -

- - Learn React - -
-
- ); - } -} diff --git a/src/components/app/app.css b/src/components/app/app.css new file mode 100644 index 0000000..512f153 --- /dev/null +++ b/src/components/app/app.css @@ -0,0 +1,20 @@ +.app { + position: absolute; + + width: 100%; + min-width: 800px; + height: 100%; + min-height: 600px; +} + +.app__menu { + position: relative; + + margin-left: 22px; + float: left; +} + +.app__content-block { + margin-right: 22px; + margin-left: 191px; +} diff --git a/src/components/app/app.jsx b/src/components/app/app.jsx new file mode 100644 index 0000000..62a0a75 --- /dev/null +++ b/src/components/app/app.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import './app.css'; + +import { Header } from '../header'; +import { Menu } from '../menu'; +import { Content } from '../content'; + +export class App extends Component { + render() { + return ( +
+
+ + +
+ ); + } +} diff --git a/src/app/app.test.jsx b/src/components/app/app.test.jsx similarity index 100% rename from src/app/app.test.jsx rename to src/components/app/app.test.jsx diff --git a/src/app/index.js b/src/components/app/index.js similarity index 100% rename from src/app/index.js rename to src/components/app/index.js diff --git a/src/components/content/checker/checker.css b/src/components/content/checker/checker.css new file mode 100644 index 0000000..b36116b --- /dev/null +++ b/src/components/content/checker/checker.css @@ -0,0 +1,8 @@ +.check-view { + width: 14px; + height: 14px; +} + +.check-view_clicked { + background: rgba(0, 0, 0, 0.15); +} diff --git a/src/components/content/checker/checker.jsx b/src/components/content/checker/checker.jsx new file mode 100644 index 0000000..83cfc81 --- /dev/null +++ b/src/components/content/checker/checker.jsx @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +import './checker.css'; + +export class Checker extends Component { + constructor(props) { + super(props); + this.state = { + checked: this.props.checked + }; + } + + static getDerivedStateFromProps(props, state) { + if (props.checked !== state.checked) { + return { + checked: props.checked + }; + } + return null; + } + + render() { + return ( +
+ ); + } +} diff --git a/src/components/content/checker/index.js b/src/components/content/checker/index.js new file mode 100644 index 0000000..16f40f0 --- /dev/null +++ b/src/components/content/checker/index.js @@ -0,0 +1 @@ +export * from './checker'; diff --git a/src/components/content/content-menu/content-menu.css b/src/components/content/content-menu/content-menu.css new file mode 100644 index 0000000..18a3fd5 --- /dev/null +++ b/src/components/content/content-menu/content-menu.css @@ -0,0 +1,52 @@ +.content-menu { + width: 100%; + height: 38px; + + border: solid 0px; + border-bottom-width: 2px; + border-bottom-color: #e2e2e2; +} + +.content-menu__check { + display: none; +} + +.content-menu__check-view { + position: relative; + top: 50%; + left: -11px; + + margin-left: 31px; + + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 3px; + float: left; + transform: translateY(-50%); +} + +.content-menu__check:checked + label { + background: rgba(0, 0, 0, 0.15); +} + +.content-menu__button { + position: relative; + top: 50%; + + display: inline; + margin-left: 26px; + color: #ccc; + float: left; + font-family: HelveticaNeue, sans-serif; + font-size: 13px; + font-weight: 500; + transform: translateY(-50%); +} + +.content-menu__button:hover { + color: #bdb9b9; + font-weight: 700; +} + +.content-menu__button_first { + margin-left: 0px; +} diff --git a/src/components/content/content-menu/content-menu.jsx b/src/components/content/content-menu/content-menu.jsx new file mode 100644 index 0000000..5cbe3ee --- /dev/null +++ b/src/components/content/content-menu/content-menu.jsx @@ -0,0 +1,32 @@ +import React, { Component } from 'react'; + +import './content-menu.css'; + +import { Checker } from '../checker'; + +export class ContentMenu extends Component { + render() { + return ( +
+ + Переслать + + Удалить + + Это спам! + Прочитано +
+ ); + } +} diff --git a/src/components/content/content-menu/index.js b/src/components/content/content-menu/index.js new file mode 100644 index 0000000..4388db4 --- /dev/null +++ b/src/components/content/content-menu/index.js @@ -0,0 +1 @@ +export * from './content-menu'; diff --git a/src/components/content/content.css b/src/components/content/content.css new file mode 100644 index 0000000..166975a --- /dev/null +++ b/src/components/content/content.css @@ -0,0 +1,155 @@ +.content-block { + height: calc(100% - 70px); + background-color: #fff; + border-radius: 3px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.34); +} + +.content-block__content-menu { + position: relative; +} + +.content-block__new-page { + position: absolute; +} + +.content-block__open-email-page:checked ~ .content-block__new-page { + display: block; +} + +.content-block__footer { + position: relative; +} + +::-webkit-scrollbar { + width: 0; +} + +.emails-block { + width: 100%; + height: calc(100% - 73px); + overflow-y: auto; +} + +.emails-block_invisible { + display: none; +} + +.emails-list { + width: 100%; + height: 100%; + list-style-type: none; +} + +.emails-block__emails-list { + z-index: 0; + + padding: 0; + margin: 0; +} + +.animated-enter { + height: 1px; + opacity: 0; +} + +.animated-enter.animated-enter-active { + height: 42px; + opacity: 1; + transition: height 0.5s linear 0s, opacity 1s linear 0.3s; +} + +.animated-leave { + margin-top: 0; + opacity: 1; +} + +.animated-leave.animated-leave-active { + margin-top: -45px; + opacity: 0; + transition: opacity 0.5s linear 0s, margin-top 1s linear 0.3s; +} + +.emails-list__element { + width: 100%; + + border: solid 0px; + border-bottom-width: 2px; + border-bottom-color: #e2e2e2; + font-family: HelveticaNeue, sans-serif; + line-height: 40px; +} + +.emails-list__element_nonvisible { + display: none; +} + +.emails-list__check-view { + display: inline-block; + margin-left: 20px; + + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 3px; + vertical-align: middle; +} + +.emails-list__logo { + display: inline-block; + width: 30px; + max-width: 100%; + height: 30px; + margin-left: 10px; + vertical-align: middle; +} + +.emails-list__title { + display: inline-block; + overflow: hidden; + width: calc((100% - 206px) * 0.2); + margin-left: 10px; + font-size: 13px; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; +} + +.emails-list__read-circle-indicator { + display: inline-block; + width: 10px; + height: 10px; + margin-left: 10px; + background-color: white; + border-radius: 50%; + vertical-align: middle; +} + +.emails-list__preview { + display: inline-block; + overflow: hidden; + width: calc((100% - 206px) * 0.8); + margin-left: 10px; + font-size: 13px; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; +} + +.emails-list__date { + display: inline-block; + overflow: hidden; + width: 45px; + margin-left: 10px; + color: #9b9b9b; + font-size: 13px; + font-weight: 500; + vertical-align: middle; + white-space: nowrap; +} + +.emails-list__element_highlighted { + font-weight: 700; +} + +.emails-list__read-circle-indicator_not-read { + background-color: #6287bd; +} diff --git a/src/components/content/content.jsx b/src/components/content/content.jsx new file mode 100644 index 0000000..cf146d0 --- /dev/null +++ b/src/components/content/content.jsx @@ -0,0 +1,171 @@ +import React, { Component } from 'react'; + +import './content.css'; + +import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; +import { ContentMenu } from './content-menu'; +import { NewPage } from './new-page'; +import { Footer } from './footer'; +import { generateEmail } from '../../scripts/generator'; + +import { Email } from './email'; + +export class Content extends Component { + constructor(props) { + super(props); + this.state = { + items: [], + selectAllChecker: false, + opened: false, + text: [''] + }; + this.lastMessageTime = Math.floor(Math.random() * 590 + 10); + this.n = 5; + } + + componentDidMount() { + this.newMail(); + } + + componentWillUnmount() { + this.items.clear(); + } + + newMail = () => { + const from = this.lastMessageTime < 3000 ? 3000 - this.lastMessageTime : 10; + this.lastMessageTime = Math.floor(Math.random() * (6000 - from) + from); + this.add(); + setTimeout(this.newMail, this.lastMessageTime); + }; + + add = () => { + const newEmail = generateEmail(); + this.state.items.unshift(newEmail); + if (this.state.items.length > this.n) { + this.state.items[this.n].visible = false; + this.state.items[this.n].checked = false; + } + this.setState(prevState => ({ + items: prevState.items, + selectAllChecker: false, + opened: prevState.opened, + text: prevState.text + })); + }; + + selectOne = prevEmail => () => { + const newEmail = prevEmail; + if (this.state.selectAllChecker) { + this.state.selectAllChecker = false; + } + newEmail.checked = !newEmail.checked; + this.forceUpdate(); + }; + + selectAll = () => { + if (this.state.opened) { + return; + } + const newAll = !this.state.selectAllChecker; + this.setState(prevState => { + const newState = prevState; + const { items } = newState; + for (let i = 0; i < this.n && i < items.length; i++) { + items[i].checked = newAll; + } + newState.selectAllChecker = newAll; + newState.items = items; + return newState; + }); + }; + + deleteEMail = () => { + if (this.state.opened) { + return; + } + this.setState(prevState => { + const newState = prevState; + const { items } = newState; + let cur = 0; + const len = items.length; + for (let i = 0; i < this.n && i < len; i++) { + if (items[cur].checked) { + items.splice(cur, 1); + cur--; + if (items.length > this.n) { + items[this.n - 1].visible = true; + } + } + cur++; + } + newState.selectAllChecker = false; + newState.items = items; + return newState; + }); + }; + + openMessage = prevEmail => () => { + const newEmail = prevEmail; + newEmail.highlighted = false; + this.setState(prevState => ({ + items: prevState.items, + selectAllChecker: prevState.selectAllChecker, + opened: true, + text: newEmail.text + })); + }; + + closeMessage = () => { + this.setState(prevState => ({ + items: prevState.items, + selectAllChecker: prevState.selectAllChecker, + opened: false, + text: [''] + })); + }; + + render() { + const ems = this.state.items; + const emails = ems.map(item => { + return ( + + ); + }); + + return ( +
+ + +
+
    + + {emails} + +
+
+
+
+ ); + } +} diff --git a/src/components/content/email/email.jsx b/src/components/content/email/email.jsx new file mode 100644 index 0000000..8d42222 --- /dev/null +++ b/src/components/content/email/email.jsx @@ -0,0 +1,62 @@ +import React, { Component } from 'react'; + +import { Checker } from '../checker'; + +import '../content-menu/content-menu.css'; +import '../content.css'; + +export class Email extends Component { + constructor(props) { + super(props); + this.ref = React.createRef(); + } + + openMessage = event => { + if (!event.target.classList.contains('check-view')) { + this.props.openF(); + } + }; + + render() { + const { + logo, + title, + preview, + date, + highlighted, + checked, + checkedAll, + clickF, + visible + } = this.props; + const textMod = highlighted ? ' emails-list__element_highlighted' : ''; + const isVisible = !visible ? ' emails-list__element_nonvisible' : ''; + const indMod = highlighted ? ' emails-list__read-circle-indicator_not-read' : ''; + return ( +
+ +
+ {title} +
+ {preview} + {date} +
+ ); + } +} diff --git a/src/components/content/email/index.js b/src/components/content/email/index.js new file mode 100644 index 0000000..944fe6c --- /dev/null +++ b/src/components/content/email/index.js @@ -0,0 +1 @@ +export * from './email'; diff --git a/src/components/content/footer/footer.css b/src/components/content/footer/footer.css new file mode 100644 index 0000000..db4fe6a --- /dev/null +++ b/src/components/content/footer/footer.css @@ -0,0 +1,19 @@ +.footer { + width: 100%; + height: 31px; + + border-top: 2px solid #e2e2e2; +} + +.footer__info { + position: relative; + top: 50%; + + display: inline; + margin-right: 20px; + color: #ccc; + float: right; + font-family: HelveticaNeue, sans-serif; + font-size: 11px; + transform: translateY(-55%); +} diff --git a/src/components/content/footer/footer.jsx b/src/components/content/footer/footer.jsx new file mode 100644 index 0000000..d89cf62 --- /dev/null +++ b/src/components/content/footer/footer.jsx @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; +import './footer.css'; + +export class Footer extends Component { + render() { + return ( +
+ © 2001 - 2018, Яндекс + Реклама + Помощь и обратная связь +
+ ); + } +} diff --git a/src/components/content/footer/index.js b/src/components/content/footer/index.js new file mode 100644 index 0000000..a058eae --- /dev/null +++ b/src/components/content/footer/index.js @@ -0,0 +1 @@ +export * from './footer'; diff --git a/src/components/content/index.js b/src/components/content/index.js new file mode 100644 index 0000000..7b367d1 --- /dev/null +++ b/src/components/content/index.js @@ -0,0 +1 @@ +export * from './content'; diff --git a/src/components/content/new-page/index.js b/src/components/content/new-page/index.js new file mode 100644 index 0000000..ca0df4c --- /dev/null +++ b/src/components/content/new-page/index.js @@ -0,0 +1 @@ +export * from './new-page'; diff --git a/src/components/content/new-page/new-page.css b/src/components/content/new-page/new-page.css new file mode 100644 index 0000000..8df47a7 --- /dev/null +++ b/src/components/content/new-page/new-page.css @@ -0,0 +1,49 @@ +.new-page { + display: none; + width: calc(100% - 213px); + height: calc(100% - 143px); + background-color: white; +} + +.new-page_open { + display: block; +} + +.new-page-content { + overflow: hidden; + width: 100%; + height: 100%; + overflow-y: scroll; +} + +.new-page-content__close-page { + display: block; +} + +.new-page-content__close-page-icon { + display: block; + width: 30px; + height: 20px; + margin: 20px; + float: right; + background: url('../../../images/fe0abd829d.png') center / 100% auto no-repeat; + opacity: 0.34; +} + +.new-page-content__circle { + float: right; +} + +.new-page-content__text { + margin-right: 22px; + margin-left: 22px; + font-size: 13px; + font-weight: 500; + font-family: HelveticaNeue, sans-serif; +} + +.new-page-content__title { + margin-left: 22px; + font-size: 13px; + font-weight: 700; +} diff --git a/src/components/content/new-page/new-page.jsx b/src/components/content/new-page/new-page.jsx new file mode 100644 index 0000000..c7ca671 --- /dev/null +++ b/src/components/content/new-page/new-page.jsx @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import './new-page.css'; + +export class NewPage extends Component { + render() { + const modifier = `new-page content-block__new-page${this.props.opened ? ' new-page_open' : ''}`; + const pars = this.props.text.map(p => { + return

{p}

; + }); + return ( +
+
+
+ {pars} +
+
+ ); + } +} diff --git a/src/components/header/burger-menu/burger-menu.css b/src/components/header/burger-menu/burger-menu.css new file mode 100644 index 0000000..dc483ca --- /dev/null +++ b/src/components/header/burger-menu/burger-menu.css @@ -0,0 +1,15 @@ +.burger-menu { + width: 20px; + height: 17px; +} + +.burger-menu__element { + width: 20px; + height: 3px; + margin-top: 4px; + background-color: #000; +} + +.burger-menu__element_without-top-margine { + margin-top: 0; +} diff --git a/src/components/header/burger-menu/burger-menu.jsx b/src/components/header/burger-menu/burger-menu.jsx new file mode 100644 index 0000000..6e0f658 --- /dev/null +++ b/src/components/header/burger-menu/burger-menu.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +import './burger-menu.css'; + +export class BurgerMenu extends Component { + render() { + return ( +
+
+
+
+
+ ); + } +} diff --git a/src/components/header/burger-menu/index.js b/src/components/header/burger-menu/index.js new file mode 100644 index 0000000..2782b93 --- /dev/null +++ b/src/components/header/burger-menu/index.js @@ -0,0 +1 @@ +export * from './burger-menu'; diff --git a/src/components/header/header.css b/src/components/header/header.css new file mode 100644 index 0000000..104d87a --- /dev/null +++ b/src/components/header/header.css @@ -0,0 +1,23 @@ +.header { + width: 100%; + height: 56px; +} + +.header__burger-menu { + margin-top: 19px; + margin-left: 22px; + float: left; +} + +.header__yandex-logo-image { + margin-top: 12px; + margin-left: 10px; + float: left; +} + +.header__search { + position: relative; + top: 15%; + left: 16%; + float: left; +} diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx new file mode 100644 index 0000000..85b13f4 --- /dev/null +++ b/src/components/header/header.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +import './header.css'; + +import { BurgerMenu } from './burger-menu'; +import { Logo } from './logo'; +import { Search } from './search'; + +export class Header extends Component { + render() { + return ( +
+ + + +
+ ); + } +} diff --git a/src/components/header/index.js b/src/components/header/index.js new file mode 100644 index 0000000..677ca79 --- /dev/null +++ b/src/components/header/index.js @@ -0,0 +1 @@ +export * from './header'; diff --git a/src/components/header/logo/index.js b/src/components/header/logo/index.js new file mode 100644 index 0000000..cb6151d --- /dev/null +++ b/src/components/header/logo/index.js @@ -0,0 +1 @@ +export * from './logo'; diff --git a/src/components/header/logo/logo.css b/src/components/header/logo/logo.css new file mode 100644 index 0000000..a36018e --- /dev/null +++ b/src/components/header/logo/logo.css @@ -0,0 +1,9 @@ +.yandex-logo-image { + display: block; + width: 153px; + height: 31px; + background-image: url(../../../images/Shape@4x.png); + background-position: center; + background-repeat: no-repeat; + background-size: 100% auto; +} diff --git a/src/components/header/logo/logo.jsx b/src/components/header/logo/logo.jsx new file mode 100644 index 0000000..92c68a2 --- /dev/null +++ b/src/components/header/logo/logo.jsx @@ -0,0 +1,9 @@ +import React, { Component } from 'react'; + +import './logo.css'; + +export class Logo extends Component { + render() { + return
; + } +} diff --git a/src/components/header/search/index.js b/src/components/header/search/index.js new file mode 100644 index 0000000..5a2bdeb --- /dev/null +++ b/src/components/header/search/index.js @@ -0,0 +1 @@ +export * from './search'; diff --git a/src/components/header/search/search.css b/src/components/header/search/search.css new file mode 100644 index 0000000..5c0ebfc --- /dev/null +++ b/src/components/header/search/search.css @@ -0,0 +1,47 @@ +.search { + width: 35%; + min-width: 301px; + height: 32px; + background-color: #f2f5f8; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); +} + +.search__clean-search { + position: relative; + top: 50%; + + display: block; + width: 15px; + height: 15px; + margin-right: 5%; + background-image: url(../../../images/fe0abd829d.png); + background-position: center; + background-repeat: no-repeat; + background-size: 100% auto; + float: right; + opacity: 0.34; + transform: translateY(-50%); +} + +.search__input { + position: relative; + left: 5%; + + width: 78%; + height: 100%; + + border: none; + background-color: rgba(0, 0, 255, 0); + color: #989b9e; + font-size: 15px; + font-weight: 400; +} + +.search__input:focus { + outline: none; +} + +.search__input::placeholder { + color: #989b9e; + font-family: 'Yandex Sans Text', sans-serif; +} diff --git a/src/components/header/search/search.jsx b/src/components/header/search/search.jsx new file mode 100644 index 0000000..784f943 --- /dev/null +++ b/src/components/header/search/search.jsx @@ -0,0 +1,14 @@ +import React, { Component } from 'react'; + +import './search.css'; + +export class Search extends Component { + render() { + return ( +
+ +
+
+ ); + } +} diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css new file mode 100644 index 0000000..54cafd2 --- /dev/null +++ b/src/components/menu/Menu.css @@ -0,0 +1,9 @@ +.menu { + width: 147px; + height: calc(100% - 70px); +} + +.menu__buttons-list { + padding: 0; + margin: 0; +} diff --git a/src/components/menu/Menu.jsx b/src/components/menu/Menu.jsx new file mode 100644 index 0000000..6c955dd --- /dev/null +++ b/src/components/menu/Menu.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +import './Menu.css'; + +import { ButtonsList } from './buttons-list'; + +export class Menu extends Component { + render() { + return ( +
+ +
+ ); + } +} diff --git a/src/components/menu/buttons-list/button/button.jsx b/src/components/menu/buttons-list/button/button.jsx new file mode 100644 index 0000000..988ec20 --- /dev/null +++ b/src/components/menu/buttons-list/button/button.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +export class Button extends Component { + render() { + return ( +
  • + {this.props.name} +
    • + ); + } +} diff --git a/src/components/menu/buttons-list/button/index.js b/src/components/menu/buttons-list/button/index.js new file mode 100644 index 0000000..eaf5eea --- /dev/null +++ b/src/components/menu/buttons-list/button/index.js @@ -0,0 +1 @@ +export * from './button'; diff --git a/src/components/menu/buttons-list/buttons-list.css b/src/components/menu/buttons-list/buttons-list.css new file mode 100644 index 0000000..6a29df3 --- /dev/null +++ b/src/components/menu/buttons-list/buttons-list.css @@ -0,0 +1,34 @@ +.buttons-list { + height: 100%; + list-style-type: none; +} + +.buttons-list__element { + padding: 2% 10% 3% 10px; + border-radius: 3px; + color: #707070; + font-family: HelveticaNeue, sans-serif; + font-size: 11px; + font-weight: 500; +} + +.buttons-list__element:hover { + background-color: #cdd6e4; + color: #555555; + font-weight: 700; +} + +.buttons-list__element_new-message-button { + padding-top: 3%; + padding-bottom: 4%; + margin-bottom: 5%; + background-color: #6287bd; + color: #ffffff; + font-size: 12px; + text-align: center; +} + +.buttons-list__element_new-message-button:hover { + background-color: #4e72a6; + color: #fff; +} diff --git a/src/components/menu/buttons-list/buttons-list.jsx b/src/components/menu/buttons-list/buttons-list.jsx new file mode 100644 index 0000000..e7ac52a --- /dev/null +++ b/src/components/menu/buttons-list/buttons-list.jsx @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; + +import './buttons-list.css'; + +import { Button } from './button'; + +export class ButtonsList extends Component { + render() { + return ( +
      +
    + ); + } +} diff --git a/src/components/menu/buttons-list/index.js b/src/components/menu/buttons-list/index.js new file mode 100644 index 0000000..c8d20ac --- /dev/null +++ b/src/components/menu/buttons-list/index.js @@ -0,0 +1 @@ +export * from './buttons-list'; diff --git a/src/components/menu/index.js b/src/components/menu/index.js new file mode 100644 index 0000000..629d3d0 --- /dev/null +++ b/src/components/menu/index.js @@ -0,0 +1 @@ +export * from './Menu'; diff --git a/src/fonts/YandexSansDisplay-Bold.eot b/src/fonts/YandexSansDisplay-Bold.eot new file mode 100644 index 0000000..f68c472 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Bold.eot differ diff --git a/src/fonts/YandexSansDisplay-Bold.ttf b/src/fonts/YandexSansDisplay-Bold.ttf new file mode 100644 index 0000000..d901f4b Binary files /dev/null and b/src/fonts/YandexSansDisplay-Bold.ttf differ diff --git a/src/fonts/YandexSansDisplay-Bold.woff b/src/fonts/YandexSansDisplay-Bold.woff new file mode 100644 index 0000000..16aca42 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Bold.woff differ diff --git a/src/fonts/YandexSansDisplay-Bold.woff2 b/src/fonts/YandexSansDisplay-Bold.woff2 new file mode 100644 index 0000000..743b043 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Bold.woff2 differ diff --git a/src/fonts/YandexSansDisplay-Light.eot b/src/fonts/YandexSansDisplay-Light.eot new file mode 100644 index 0000000..f82d69f Binary files /dev/null and b/src/fonts/YandexSansDisplay-Light.eot differ diff --git a/src/fonts/YandexSansDisplay-Light.ttf b/src/fonts/YandexSansDisplay-Light.ttf new file mode 100644 index 0000000..ed6fb38 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Light.ttf differ diff --git a/src/fonts/YandexSansDisplay-Light.woff b/src/fonts/YandexSansDisplay-Light.woff new file mode 100644 index 0000000..23961fb Binary files /dev/null and b/src/fonts/YandexSansDisplay-Light.woff differ diff --git a/src/fonts/YandexSansDisplay-Light.woff2 b/src/fonts/YandexSansDisplay-Light.woff2 new file mode 100644 index 0000000..de8a8d0 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Light.woff2 differ diff --git a/src/fonts/YandexSansDisplay-Regular.eot b/src/fonts/YandexSansDisplay-Regular.eot new file mode 100644 index 0000000..3318d06 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Regular.eot differ diff --git a/src/fonts/YandexSansDisplay-Regular.ttf b/src/fonts/YandexSansDisplay-Regular.ttf new file mode 100644 index 0000000..7da2a17 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Regular.ttf differ diff --git a/src/fonts/YandexSansDisplay-Regular.woff b/src/fonts/YandexSansDisplay-Regular.woff new file mode 100644 index 0000000..8e5c1fc Binary files /dev/null and b/src/fonts/YandexSansDisplay-Regular.woff differ diff --git a/src/fonts/YandexSansDisplay-Regular.woff2 b/src/fonts/YandexSansDisplay-Regular.woff2 new file mode 100644 index 0000000..280490e Binary files /dev/null and b/src/fonts/YandexSansDisplay-Regular.woff2 differ diff --git a/src/fonts/YandexSansDisplay-RegularItalic.eot b/src/fonts/YandexSansDisplay-RegularItalic.eot new file mode 100644 index 0000000..3a1eb79 Binary files /dev/null and b/src/fonts/YandexSansDisplay-RegularItalic.eot differ diff --git a/src/fonts/YandexSansDisplay-RegularItalic.ttf b/src/fonts/YandexSansDisplay-RegularItalic.ttf new file mode 100644 index 0000000..5f56314 Binary files /dev/null and b/src/fonts/YandexSansDisplay-RegularItalic.ttf differ diff --git a/src/fonts/YandexSansDisplay-RegularItalic.woff b/src/fonts/YandexSansDisplay-RegularItalic.woff new file mode 100644 index 0000000..b9acebe Binary files /dev/null and b/src/fonts/YandexSansDisplay-RegularItalic.woff differ diff --git a/src/fonts/YandexSansDisplay-RegularItalic.woff2 b/src/fonts/YandexSansDisplay-RegularItalic.woff2 new file mode 100644 index 0000000..cf10259 Binary files /dev/null and b/src/fonts/YandexSansDisplay-RegularItalic.woff2 differ diff --git a/src/fonts/YandexSansDisplay-Thin.eot b/src/fonts/YandexSansDisplay-Thin.eot new file mode 100644 index 0000000..e6634df Binary files /dev/null and b/src/fonts/YandexSansDisplay-Thin.eot differ diff --git a/src/fonts/YandexSansDisplay-Thin.ttf b/src/fonts/YandexSansDisplay-Thin.ttf new file mode 100644 index 0000000..3b8e196 Binary files /dev/null and b/src/fonts/YandexSansDisplay-Thin.ttf differ diff --git a/src/fonts/YandexSansDisplay-Thin.woff b/src/fonts/YandexSansDisplay-Thin.woff new file mode 100644 index 0000000..0e732fe Binary files /dev/null and b/src/fonts/YandexSansDisplay-Thin.woff differ diff --git a/src/fonts/YandexSansDisplay-Thin.woff2 b/src/fonts/YandexSansDisplay-Thin.woff2 new file mode 100644 index 0000000..5b4034c Binary files /dev/null and b/src/fonts/YandexSansDisplay-Thin.woff2 differ diff --git a/src/fonts/YandexSansText-Bold.eot b/src/fonts/YandexSansText-Bold.eot new file mode 100644 index 0000000..5843277 Binary files /dev/null and b/src/fonts/YandexSansText-Bold.eot differ diff --git a/src/fonts/YandexSansText-Bold.ttf b/src/fonts/YandexSansText-Bold.ttf new file mode 100644 index 0000000..e267b3f Binary files /dev/null and b/src/fonts/YandexSansText-Bold.ttf differ diff --git a/src/fonts/YandexSansText-Bold.woff b/src/fonts/YandexSansText-Bold.woff new file mode 100644 index 0000000..484b6df Binary files /dev/null and b/src/fonts/YandexSansText-Bold.woff differ diff --git a/src/fonts/YandexSansText-Bold.woff2 b/src/fonts/YandexSansText-Bold.woff2 new file mode 100644 index 0000000..df7d6b5 Binary files /dev/null and b/src/fonts/YandexSansText-Bold.woff2 differ diff --git a/src/fonts/YandexSansText-Light.eot b/src/fonts/YandexSansText-Light.eot new file mode 100644 index 0000000..0971802 Binary files /dev/null and b/src/fonts/YandexSansText-Light.eot differ diff --git a/src/fonts/YandexSansText-Light.ttf b/src/fonts/YandexSansText-Light.ttf new file mode 100644 index 0000000..875cb32 Binary files /dev/null and b/src/fonts/YandexSansText-Light.ttf differ diff --git a/src/fonts/YandexSansText-Light.woff b/src/fonts/YandexSansText-Light.woff new file mode 100644 index 0000000..7fb8797 Binary files /dev/null and b/src/fonts/YandexSansText-Light.woff differ diff --git a/src/fonts/YandexSansText-Light.woff2 b/src/fonts/YandexSansText-Light.woff2 new file mode 100644 index 0000000..9bcbdcf Binary files /dev/null and b/src/fonts/YandexSansText-Light.woff2 differ diff --git a/src/fonts/YandexSansText-Medium.eot b/src/fonts/YandexSansText-Medium.eot new file mode 100644 index 0000000..6cf740f Binary files /dev/null and b/src/fonts/YandexSansText-Medium.eot differ diff --git a/src/fonts/YandexSansText-Medium.ttf b/src/fonts/YandexSansText-Medium.ttf new file mode 100644 index 0000000..5a29b85 Binary files /dev/null and b/src/fonts/YandexSansText-Medium.ttf differ diff --git a/src/fonts/YandexSansText-Medium.woff b/src/fonts/YandexSansText-Medium.woff new file mode 100644 index 0000000..be14025 Binary files /dev/null and b/src/fonts/YandexSansText-Medium.woff differ diff --git a/src/fonts/YandexSansText-Medium.woff2 b/src/fonts/YandexSansText-Medium.woff2 new file mode 100644 index 0000000..2a8c7ca Binary files /dev/null and b/src/fonts/YandexSansText-Medium.woff2 differ diff --git a/src/fonts/YandexSansText-Regular.eot b/src/fonts/YandexSansText-Regular.eot new file mode 100644 index 0000000..ce7d907 Binary files /dev/null and b/src/fonts/YandexSansText-Regular.eot differ diff --git a/src/fonts/YandexSansText-Regular.ttf b/src/fonts/YandexSansText-Regular.ttf new file mode 100644 index 0000000..990d16b Binary files /dev/null and b/src/fonts/YandexSansText-Regular.ttf differ diff --git a/src/fonts/YandexSansText-Regular.woff b/src/fonts/YandexSansText-Regular.woff new file mode 100644 index 0000000..83d206c Binary files /dev/null and b/src/fonts/YandexSansText-Regular.woff differ diff --git a/src/fonts/YandexSansText-Regular.woff2 b/src/fonts/YandexSansText-Regular.woff2 new file mode 100644 index 0000000..059480d Binary files /dev/null and b/src/fonts/YandexSansText-Regular.woff2 differ diff --git a/src/fonts/YandexSansText-RegularItalic.eot b/src/fonts/YandexSansText-RegularItalic.eot new file mode 100644 index 0000000..861fa0b Binary files /dev/null and b/src/fonts/YandexSansText-RegularItalic.eot differ diff --git a/src/fonts/YandexSansText-RegularItalic.ttf b/src/fonts/YandexSansText-RegularItalic.ttf new file mode 100644 index 0000000..8aaa251 Binary files /dev/null and b/src/fonts/YandexSansText-RegularItalic.ttf differ diff --git a/src/fonts/YandexSansText-RegularItalic.woff b/src/fonts/YandexSansText-RegularItalic.woff new file mode 100644 index 0000000..5b71263 Binary files /dev/null and b/src/fonts/YandexSansText-RegularItalic.woff differ diff --git a/src/fonts/YandexSansText-RegularItalic.woff2 b/src/fonts/YandexSansText-RegularItalic.woff2 new file mode 100644 index 0000000..9188ee7 Binary files /dev/null and b/src/fonts/YandexSansText-RegularItalic.woff2 differ diff --git a/src/fonts/YandexSansText-Thin.eot b/src/fonts/YandexSansText-Thin.eot new file mode 100644 index 0000000..9b5e478 Binary files /dev/null and b/src/fonts/YandexSansText-Thin.eot differ diff --git a/src/fonts/YandexSansText-Thin.ttf b/src/fonts/YandexSansText-Thin.ttf new file mode 100644 index 0000000..3ac9b03 Binary files /dev/null and b/src/fonts/YandexSansText-Thin.ttf differ diff --git a/src/fonts/YandexSansText-Thin.woff b/src/fonts/YandexSansText-Thin.woff new file mode 100644 index 0000000..9d35a5a Binary files /dev/null and b/src/fonts/YandexSansText-Thin.woff differ diff --git a/src/fonts/YandexSansText-Thin.woff2 b/src/fonts/YandexSansText-Thin.woff2 new file mode 100644 index 0000000..4fc6c4e Binary files /dev/null and b/src/fonts/YandexSansText-Thin.woff2 differ diff --git a/src/fonts/demo.html b/src/fonts/demo.html new file mode 100644 index 0000000..adcbe2e --- /dev/null +++ b/src/fonts/demo.html @@ -0,0 +1,489 @@ + + + + + + + + + Transfonter demo + + + + +
    +
    +

    Yandex Sans Text Thin

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: 100;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Display Regular

    + 
    .your-style {
+    font-family: 'Yandex Sans Display';
+    font-weight: normal;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Text Regular Italic

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: normal;
+    font-style: italic;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Display Regular Italic

    + 
    .your-style {
+    font-family: 'Yandex Sans Display';
+    font-weight: normal;
+    font-style: italic;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Display Light

    + 
    .your-style {
+    font-family: 'Yandex Sans Display';
+    font-weight: 300;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Text Regular

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: normal;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Text Light

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: 300;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Display Bold

    + 
    .your-style {
+    font-family: 'Yandex Sans Display';
+    font-weight: bold;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Display Thin

    + 
    .your-style {
+    font-family: 'Yandex Sans Display';
+    font-weight: 100;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Text Bold

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: bold;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    +

    Yandex Sans Text Medium

    + 
    .your-style {
+    font-family: 'Yandex Sans Text';
+    font-weight: 500;
+    font-style: normal;
+}
    +
    +

    + абвгдеёжзийклмнопрстуфхцчшщъыьэюя
    +АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
    +abcdefghijklmnopqrstuvwxyz
    +ABCDEFGHIJKLMNOPQRSTUVWXYZ
    + 0123456789.:,;()*!?'@#<>$%&^+-=~ +

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +

    Съешь же ещё этих мягких французских булок, да выпей чаю.

    +
    +
    +
    + + \ No newline at end of file diff --git a/src/fonts/stylesheet.css b/src/fonts/stylesheet.css new file mode 100644 index 0000000..701fdc3 --- /dev/null +++ b/src/fonts/stylesheet.css @@ -0,0 +1,129 @@ +@font-face { + font-family: 'Yandex Sans Text'; + font-style: normal; + font-weight: 100; + src: url('YandexSansText-Thin.eot'); + src: local('Yandex Sans Text Thin'), local('YandexSansText-Thin'), + url('YandexSansText-Thin.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-Thin.woff2') format('woff2'), url('YandexSansText-Thin.woff') format('woff'), + url('YandexSansText-Thin.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Display'; + font-style: normal; + font-weight: normal; + src: url('YandexSansDisplay-Regular.eot'); + src: local('Yandex Sans Display Regular'), local('YandexSansDisplay-Regular'), + url('YandexSansDisplay-Regular.eot?#iefix') format('embedded-opentype'), + url('YandexSansDisplay-Regular.woff2') format('woff2'), + url('YandexSansDisplay-Regular.woff') format('woff'), + url('YandexSansDisplay-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Text'; + font-style: italic; + font-weight: normal; + src: url('YandexSansText-RegularItalic.eot'); + src: local('Yandex Sans Text Regular Italic'), local('YandexSansText-RegularItalic'), + url('YandexSansText-RegularItalic.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-RegularItalic.woff2') format('woff2'), + url('YandexSansText-RegularItalic.woff') format('woff'), + url('YandexSansText-RegularItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Display'; + font-style: italic; + font-weight: normal; + src: url('YandexSansDisplay-RegularItalic.eot'); + src: local('Yandex Sans Display Regular Italic'), local('YandexSansDisplay-RegularItalic'), + url('YandexSansDisplay-RegularItalic.eot?#iefix') format('embedded-opentype'), + url('YandexSansDisplay-RegularItalic.woff2') format('woff2'), + url('YandexSansDisplay-RegularItalic.woff') format('woff'), + url('YandexSansDisplay-RegularItalic.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Display'; + font-style: normal; + font-weight: 300; + src: url('YandexSansDisplay-Light.eot'); + src: local('Yandex Sans Display Light'), local('YandexSansDisplay-Light'), + url('YandexSansDisplay-Light.eot?#iefix') format('embedded-opentype'), + url('YandexSansDisplay-Light.woff2') format('woff2'), + url('YandexSansDisplay-Light.woff') format('woff'), + url('YandexSansDisplay-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Text'; + font-style: normal; + font-weight: normal; + src: url('YandexSansText-Regular.eot'); + src: local('Yandex Sans Text Regular'), local('YandexSansText-Regular'), + url('YandexSansText-Regular.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-Regular.woff2') format('woff2'), + url('YandexSansText-Regular.woff') format('woff'), + url('YandexSansText-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Text'; + font-style: normal; + font-weight: 300; + src: url('YandexSansText-Light.eot'); + src: local('Yandex Sans Text Light'), local('YandexSansText-Light'), + url('YandexSansText-Light.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-Light.woff2') format('woff2'), + url('YandexSansText-Light.woff') format('woff'), + url('YandexSansText-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Display'; + font-style: normal; + font-weight: bold; + src: url('YandexSansDisplay-Bold.eot'); + src: local('Yandex Sans Display Bold'), local('YandexSansDisplay-Bold'), + url('YandexSansDisplay-Bold.eot?#iefix') format('embedded-opentype'), + url('YandexSansDisplay-Bold.woff2') format('woff2'), + url('YandexSansDisplay-Bold.woff') format('woff'), + url('YandexSansDisplay-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Display'; + font-style: normal; + font-weight: 100; + src: url('YandexSansDisplay-Thin.eot'); + src: local('Yandex Sans Display Thin'), local('YandexSansDisplay-Thin'), + url('YandexSansDisplay-Thin.eot?#iefix') format('embedded-opentype'), + url('YandexSansDisplay-Thin.woff2') format('woff2'), + url('YandexSansDisplay-Thin.woff') format('woff'), + url('YandexSansDisplay-Thin.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Text'; + font-style: normal; + font-weight: bold; + src: url('YandexSansText-Bold.eot'); + src: local('Yandex Sans Text Bold'), local('YandexSansText-Bold'), + url('YandexSansText-Bold.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-Bold.woff2') format('woff2'), url('YandexSansText-Bold.woff') format('woff'), + url('YandexSansText-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Yandex Sans Text'; + font-style: normal; + font-weight: 500; + src: url('YandexSansText-Medium.eot'); + src: local('Yandex Sans Text Medium'), local('YandexSansText-Medium'), + url('YandexSansText-Medium.eot?#iefix') format('embedded-opentype'), + url('YandexSansText-Medium.woff2') format('woff2'), + url('YandexSansText-Medium.woff') format('woff'), + url('YandexSansText-Medium.ttf') format('truetype'); +} diff --git a/src/images/Shape@4x.png b/src/images/Shape@4x.png new file mode 100644 index 0000000..08ba737 Binary files /dev/null and b/src/images/Shape@4x.png differ diff --git a/src/images/fe0abd829d.png b/src/images/fe0abd829d.png new file mode 100644 index 0000000..0b03e78 Binary files /dev/null and b/src/images/fe0abd829d.png differ diff --git a/src/index.css b/src/index.css index 2b6e525..66e6e23 100644 --- a/src/index.css +++ b/src/index.css @@ -1,6 +1,9 @@ +@import url('./fonts/stylesheet.css'); + body { padding: 0; margin: 0; + background-color: #e5eaf0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; diff --git a/src/index.jsx b/src/index.jsx index ffc72ee..05512fe 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { App } from './app'; +import { App } from './components/app'; import './index.css'; diff --git a/src/logos/behance.png b/src/logos/behance.png new file mode 100644 index 0000000..257f349 Binary files /dev/null and b/src/logos/behance.png differ diff --git a/src/logos/facebook.png b/src/logos/facebook.png new file mode 100644 index 0000000..3d8d2ef Binary files /dev/null and b/src/logos/facebook.png differ diff --git a/src/logos/flickr.png b/src/logos/flickr.png new file mode 100644 index 0000000..58ff4f7 Binary files /dev/null and b/src/logos/flickr.png differ diff --git a/src/logos/linkedin.png b/src/logos/linkedin.png new file mode 100644 index 0000000..866e607 Binary files /dev/null and b/src/logos/linkedin.png differ diff --git a/src/logos/skype.png b/src/logos/skype.png new file mode 100644 index 0000000..9d74062 Binary files /dev/null and b/src/logos/skype.png differ diff --git a/src/logos/twitter.png b/src/logos/twitter.png new file mode 100644 index 0000000..e924425 Binary files /dev/null and b/src/logos/twitter.png differ diff --git a/src/logos/yandex.png b/src/logos/yandex.png new file mode 100644 index 0000000..881b776 Binary files /dev/null and b/src/logos/yandex.png differ diff --git a/src/scripts/generator.js b/src/scripts/generator.js new file mode 100644 index 0000000..8900020 --- /dev/null +++ b/src/scripts/generator.js @@ -0,0 +1,60 @@ +import yandexLogo from '../logos/yandex.png'; +import twitterLogo from '../logos/twitter.png'; +import skypeLogo from '../logos/skype.png'; +import linkedinLogo from '../logos/linkedin.png'; +import flickrLogo from '../logos/flickr.png'; +import facebookLogo from '../logos/facebook.png'; +import behanceLogo from '../logos/behance.png'; + +const logoMap = [ + ['Yandex', yandexLogo], + ['Twitter', twitterLogo], + ['Skype', skypeLogo], + ['LinkedIn', linkedinLogo], + ['Flickr', flickrLogo], + ['Facebook', facebookLogo], + ['Behance', behanceLogo] +]; + +const month = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; +const xhr = new XMLHttpRequest(); +let out; + +function randomDate(start, end) { + return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); +} + +function getFishText(type, number) { + const params = `&type=${type}&format=html&number=${number}`; + + xhr.open('GET', `https://fish-text.ru/get?${params}`, false); + + xhr.onload = function() { + out = this.responseText; + }; + + xhr.send(); +} + +export function generateEmail() { + const id = new Date().getTime(); + const i = Math.floor(Math.random() * (logoMap.length - 1)); + const logo = logoMap[i][1]; + const title = logoMap[i][0]; + getFishText('title', 1); + const preview = out.substr(4, out.length - 9); + const generatedDate = randomDate(new Date(2012, 0, 1), new Date()); + const date = `${generatedDate.getDate()} ${month[generatedDate.getMonth()]}`; + getFishText('paragraph', Math.floor(Math.random() * 10)); + return { + id, + logo, + title, + preview, + date, + checked: false, + text: out.replace(/<\/p>/g, '').split('

    '), + highlighted: true, + visible: true + }; +}