diff --git a/images/cross.png b/images/cross.png new file mode 100644 index 0000000..7765268 Binary files /dev/null and b/images/cross.png differ diff --git a/images/header-logo.svg b/images/header-logo.svg new file mode 100644 index 0000000..db23b2d --- /dev/null +++ b/images/header-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..8743b99 Binary files /dev/null and b/images/logo.jpg differ diff --git a/images/moon.png b/images/moon.png new file mode 100644 index 0000000..71528cc Binary files /dev/null and b/images/moon.png differ diff --git a/images/tree.png b/images/tree.png new file mode 100644 index 0000000..640cd3a Binary files /dev/null and b/images/tree.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1f6673a --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + + Яндекс.Почта + + + +
+
+
+
+
+
+ +
+ + +
+
+
+ +
+ + +
+ +
+
+
+ + Переслать + Удалить + Это спам! + Прочитано +
+
+
+ +
+ +
+ +
+
+
+
+
+ © 2001-2018, Яндекс + Реклама + Помощь и обратная связь +
+ +
+
+ + + \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js new file mode 100644 index 0000000..45b33cf --- /dev/null +++ b/scripts/script.js @@ -0,0 +1,154 @@ +let names = [ + 'Фотин', 'Евтихий', 'Азарий', 'Фетис', 'Полиевкт', 'Борислав', 'Кассиан', 'Юст', 'Мартьян', 'Капитон', 'Никандр', 'Эрнест', + 'Петроний', 'Иезекииль', 'Харитон', 'Севастиан', 'Орест', 'Вит', 'Василий', 'Гордей', 'Максим', 'Павлин', 'Захар', + 'Владилен', 'Наум', 'Алипий', 'Меркурий', 'Феоктист', 'Овдоким', 'Феофил' +]; + +let surnames = [ + 'Чашников', 'Березников', 'Руликовский', 'Ляпишев', 'Оффенберг', 'Шипов', 'Арнаутов', 'Машковцев', 'Столыпин', + 'Шереметьев', 'Яворский', 'Рындин', 'Лонгинов', 'Ададуров', 'Нечаев', 'Габаев', 'Маткевич', 'Маковский', 'Юрасовский', + 'Ващенко', 'Кобылин', 'Карандеев', 'Золотарёв', 'Голицын', 'Игнатьев', 'Байчуров', 'Бурдуков', 'Болтенков', 'Михеев', 'Храпов' +]; + +months = ['янв', 'фев', 'мар', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; + +function generateRandomCount(from, to) { + return Math.floor(Math.random() * (to - from) + from) +} + +let previous = 300000; +let minTime = 10; +let maxTime = 600000; +let interval = 300000; +let counter = 0; +let maxAmountLetters = 30; + +function generateNewLetter() { + newMail(); + let time = Math.max(interval - previous, generateRandomCount(minTime, maxTime)); + previous = time; + setTimeout(generateNewLetter, time); +} + +setTimeout(generateNewLetter, 0); + +let invisibleLetters = []; +let lettersContent = new Map(); + +function takeRandomObj(list) { + return list[generateRandomCount(0, list.length)] +} + +async function generateContent() { + let amountBlocks = generateRandomCount(3, 10); + let content = await fetch("https://baconipsum.com/api/?type=meat&formaat=json¶s=" + amountBlocks); + let fullContent = await content.json(); + let ans = ''; + for (let i = 0; i < amountBlocks; i++) { + ans += '

' + fullContent[i] + '

'; + } + return ans; +} + +async function newMail() { + let text = await generateContent(); + + let id = counter++; + let name = takeRandomObj(names); + let surname = takeRandomObj(surnames); + let author = name + ' ' + surname; + let content = text.split('.')[0].substr(3); + let date = new Date(); + date = date.getDate() + ' ' + months[date.getMonth()]; + + lettersContent.set(id, text); + + let newLetter = `
+ + + + ${author} +
+ ${content} + ${date} + +
`; + + let newNode = new DOMParser().parseFromString(newLetter, "text/html"); + + newNode.addEventListener("webkitAnimationEnd", function () { + newNode.classList.remove('letter__animated-add-letter'); + }); + + newNode.querySelector("a").addEventListener("click", function () { + openLetter(id); + }); + + let letters = document.querySelector(".mem"); + letters.insertBefore(newNode.body.firstChild, letters.firstChild); + + invisibleLetters.push(id); + if (invisibleLetters.length > maxAmountLetters) { + letters.childNodes[maxAmountLetters].style.display = "none"; + } +} + +function openLetter(id) { + let contentLetter = document.querySelector(".content"); + contentLetter.querySelector(".content__text-letter").innerHTML = lettersContent.get(id); + contentLetter.style.display = "inline-block"; + + let letters = document.querySelector(".mem"); + letters.style.display = "none"; + + let letter = document.getElementById(id); + letter.querySelector(".letter__text-sender-letter").classList.remove("letter_is-bold"); + letter.querySelector(".letter__text-letter").classList.remove("letter_is-bold"); + letter.querySelector(".letter__mark-new-letter").classList.add("letter__mark-no-letter"); + letter.querySelector(".letter__mark-new-letter").classList.remove("letter__mark-new-letter"); +} + +function closeLetter() { + let letters = document.querySelector(".mem"); + letters.style.display = "inline"; + let closeContent = document.querySelector(".content"); + closeContent.style.display = "none"; +} + +function delOld() { + let letters = document.querySelectorAll(".letter"); + letters.forEach(elem => { + if (elem.querySelector(".main-part__checkbox").checked) { + elem.className += " letter__animated-delete-letter"; + elem.addEventListener("webkitAnimationEnd", function () { + elem.remove(); + }); + } + }); + let checkBoxLetter = document.querySelector(".main-title"); + checkBoxLetter.querySelector(".main-part__checkbox").checked = false; + + setTimeout(function () { + invisibleLetters = invisibleLetters.filter(id => document.getElementById(id) != null); + for (let i = invisibleLetters.length - 1; i >= Math.max(0, invisibleLetters.length - maxAmountLetters); i--) { + if (document.getElementById(invisibleLetters[i]).style.display !== "inline-block") { + document.getElementById(invisibleLetters[i]).style.display = "inline-block" + } + } + }, 1500); +} + +function selectAll() { + let checkBoxLetter = document.querySelector(".main-title"); + let letters = document.querySelectorAll(".letter"); + let isCheck = checkBoxLetter.querySelector(".main-part__checkbox").checked; + letters.forEach(elem => { + if (elem.style.display !== "none") elem.querySelector(".main-part__checkbox").checked = isCheck; + }) +} + +let useButtonAdd = document.getElementsByClassName("left-menu__button")[0]; +useButtonAdd.addEventListener('click', newMail); + +let useButtonDel = document.getElementsByClassName("main-title__text-title")[1]; +useButtonDel.addEventListener('click', delOld); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a1da883 --- /dev/null +++ b/style.css @@ -0,0 +1,366 @@ +@font-face { + font-family: HelveticaNeue; + src: url("txtStyle/HelveticaNeueCyr-Medium.otf"); +} + +@font-face { + font-family: HelveticaNeueLight; + src: url("txtStyle/HelveticaNeueCyr-Light.otf"); +} + +body { + padding: 2% 3%; + background-color: #e5eaf0; +} + +.letter__animated-add-letter { + animation-duration: 2s; + animation-name: add-new-letter; +} + +@keyframes add-new-letter { + from { + opacity: 0; + } + + to { + opacity: 100%; + } +} + +.letter__animated-delete-letter { + animation-duration: 1s; + animation-name: delete-letter; +} + +@keyframes delete-letter { + from { + opacity: 100%; + } + + to { + opacity: 0; + } +} + +.left-menu__text-menu { + width: 137px; + font-family: HelveticaNeue; + margin-left: -10px; + font-size: 11px; + color: #707070; + padding-top: 4px; + padding-left: 10px; + padding-bottom: 4px; + list-style-type: none; + margin-bottom: 8px; + height: 13px; + line-height: 16px; +} + +.content { + display: none; +} + +#show:target .content .mem { + display: inline-block; +} + +#show:target { + display: none; +} + +.header__yp-logo { + vertical-align: text-bottom; + margin-left: 11px; + font-size: 170%; + width: 200px; + display: inline-block; +} + +.left-menu__text-menu:hover { + border-radius: 3px; + background-color: #cdd6e4; + font-weight: bold; + color: #555555; +} + +.main-part_unhighlight { + color: inherit; +} + +.main-part__del-line { + text-decoration: none; +} + +.left-menu__actions-block { + margin-top: 0; + width: 100%; + margin-left: -30px; +} + +.left-menu { + display: inline-block; + vertical-align: top; + width: 147px; + height: 100%; +} + +.main-info { + display: inline-block; + vertical-align: top; + width: 78%; + min-height: 600px; + margin-left: 3%; + border-radius: 3px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34); + background-color: #ffffff; +} + +.header__text-search { + font-size: 15px; + -webkit-appearance: none; + outline: none; + border: none; + background: none; + padding-left: 10px; + width: 90%; + height: 100%; + color: #000000; +} + +.content__close { + float: right; + margin-top: 10px; + margin-right: 10px; +} + +.main-part { + display: inline-block; + padding-top: 13px; + width: 100%; + height: 90%; + min-width: 800px; +} + +.header { + min-width: 800px; + display: inline-block; + height: 5%; + width: 100%; +} + +.header__burger-menu { + display: inline-block; + margin-top: 7px; +} + +.header__search { + vertical-align: text-bottom; + border-width: 0; + display: inline-block; + margin-left: 14%; + width: 40%; + height: 32px; + opacity: 0.5; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); + background-color: #ffffff; +} + +.header__line { + margin-top: 5px; + width: 20px; + height: 3px; + margin-bottom: 5px; + background-color: #000000; +} + +.left-menu__button { + width: 147px; + height: 32px; + border-radius: 3px; + margin-bottom: 8px; + border: #6287bd; + background-color: #6287bd; +} + +.left-menu__text-write { + font-family: HelveticaNeue; + display: inline-block; + vertical-align: center; + margin-top: 7px; + margin-bottom: 10px; + width: 56px; + height: 15px; + font-size: 12px; + color: #ffffff; +} + +.header__cross { + width: 9px; + height: 9px; + opacity: 0.15; + float: right; + margin-top: 12px; + margin-right: 10px; +} + +.content__cross { + width: 9px; + height: 9px; + opacity: 0.15; + float: right; + margin-top: 12px; + margin-right: 10px; +} + +.main-title { + height: 37px; + width: 100%; + border-bottom: solid 1px #e2e2e2; +} + +.letter { + height: 37px; + width: 100%; + border-bottom: solid 1px #e2e2e2; +} + +.main-content { + height: 37px; + width: 100%; + border-bottom: solid 1px #e2e2e2; +} + +.main-title__text-title { + font-family: HelveticaNeue; + margin-top: 11px; + display: inline-block; + margin-left: 25px; + vertical-align: top; + line-height: 20px; + height: 16px; + font-size: 13px; + color: #cccccc; +} + +.end-title { + width: 100%; + height: 37px; + border-top: solid 1px #e2e2e2; +} + +.size-content { + min-height: 526px; + width: 100%; +} + +.content__text-letter { + margin: 25px; +} + +.end-title__text-endline { + font-family: HelveticaNeueLight; + float: right; + line-height: 40px; + margin-right: 45px; + height: 12px; + font-size: 11px; + color: #9b9b9b; +} + +.letter__y-logo { + margin-left: 10px; + display: inline-block; + width: 37px; + border-radius: 50%; +} + +.letter_is-bold { + font-weight: bold; +} + +.letter__text-sender-letter { + font-family: HelveticaNeue; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + margin-top: 12px; + margin-left: 10px; + width: 20%; + height: 15px; + vertical-align: top; + font-size: 13px; + color: #000000; +} + +.letter__text-letter { + font-family: HelveticaNeue; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + margin-top: 12px; + margin-left: 10px; + width: 40%; + height: 15px; + vertical-align: top; + font-size: 13px; + color: #000000; +} + +.letter__mark-new-letter { + display: inline-block; + margin-left: 20px; + margin-top: 15px; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #6287bd; + vertical-align: top; +} + +.letter__mark-no-letter { + display: inline-block; + margin-left: 20px; + margin-top: 15px; + width: 10px; + height: 10px; + border-radius: 50%; + background-color: #ffffff; + vertical-align: top; +} + +.letter__data { + font-family: HelveticaNeue; + float: right; + margin-top: 11px; + margin-right: 20px; + height: 15px; + width: 8%; + font-size: 13px; + text-align: right; + color: #9b9b9b; +} + +.main-part__checkbox { + display: inline-block; + margin-left: 20px; + margin-top: 11px; + width: 16px; + height: 16px; + border-radius: 3px; + padding: 2px; + border: solid 1px rgba(0, 0, 0, 0.15); + background-color: #ffffff; + -webkit-appearance: none; + outline: none; + vertical-align: top; +} + +.main-part__checkbox:checked { + display: inline-block; + background: #e2e2e2; + background-clip: content-box; +} \ No newline at end of file diff --git a/txtStyle/HelveticaNeueCyr-Light.otf b/txtStyle/HelveticaNeueCyr-Light.otf new file mode 100644 index 0000000..7ced49a Binary files /dev/null and b/txtStyle/HelveticaNeueCyr-Light.otf differ diff --git a/txtStyle/HelveticaNeueCyr-Medium.otf b/txtStyle/HelveticaNeueCyr-Medium.otf new file mode 100644 index 0000000..a2cde16 Binary files /dev/null and b/txtStyle/HelveticaNeueCyr-Medium.otf differ diff --git a/txtStyle/YandexSansDisplay-Bold.ttf b/txtStyle/YandexSansDisplay-Bold.ttf new file mode 100644 index 0000000..d901f4b Binary files /dev/null and b/txtStyle/YandexSansDisplay-Bold.ttf differ diff --git a/txtStyle/YandexSansDisplay-Thin.ttf b/txtStyle/YandexSansDisplay-Thin.ttf new file mode 100644 index 0000000..3b8e196 Binary files /dev/null and b/txtStyle/YandexSansDisplay-Thin.ttf differ