diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..d247105 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,24 @@ + +.mail-footer { + position: absolute; + bottom: 0; + width: 100%; + overflow: hidden; + height: 40px; + border-top: 1px solid #e2e2e2;; + font-family: HelveticaNeueLight, serif; + font-size: 11px; + color: #9b9b9b; + line-height: 15px; + text-align: right; + vertical-align: bottom; +} + +.mail-footer__item { + margin-left: 20px; +} + +.mail-footer__body { + display: inline-block; + padding: 10px 20px; +} \ No newline at end of file diff --git a/css/header.css b/css/header.css new file mode 100644 index 0000000..2ea34c5 --- /dev/null +++ b/css/header.css @@ -0,0 +1,57 @@ +.menu-hamburger { + display: inline-block; + width: 16px; + height: 16px; + padding-bottom: 5px; + margin-right: 6px; +} + +.menu-hamburger__plank { + width: 22px; + height: 2px; + margin: 5px; + background: #000; +} + +.search__input { + display: inline-block; + padding-left: 16px; + opacity: 0.5; + background-color: #fff; + font-family: YandexSansRegular, serif; + font-size: 15px; + line-height: 2.13; + color: #000; + width: 80%; + border: 1px solid #ccc; + outline: 0; + padding-right: 24px; +} + +.search { + margin-left: 130px; + display: inline-block; + position: relative; + width: 300px; + height: 32px; +} + +.sidebar__logo { + display: inline-block; + vertical-align: middle; + margin-left: 11px; + font-weight: 100; +} +.search__cross-button { + position: absolute; + right: 20px; + top: 4px; + width: 12px; + height: 12px; + padding: 0 8px; + font-style: normal; + font-size: 1.5em; + user-select: none; + cursor: pointer; + opacity: 0.15; +} diff --git a/css/letter.css b/css/letter.css new file mode 100644 index 0000000..6da212b --- /dev/null +++ b/css/letter.css @@ -0,0 +1,171 @@ +.letter_unread span:not(.letter__receive-time) { + font-family: HelveticaNeue, serif; + font-weight: bold; +} + +.latter { + white-space: nowrap; + padding: 2px 20px; + vertical-align: middle; + + line-height: normal; + font-family: HelveticaNeueLight, serif; + font-size: 0; + color: #000; + background-color: white; + border-bottom: 1px solid #e2e2e2; +} + +.letter__read-mark { + vertical-align: middle; + display: inline-block; + border-radius: 50%; + width: 10px; + height: 10px; + background-color: #fff; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + outline: 0; +} + +.letter__sender-ico { + margin: 5px 10px; + box-sizing: border-box; + padding: 4px 8px; + width: 30px; + font-size: 20px; + height: 30px; + display: inline-block; + vertical-align: middle; + color: #fff; + background: #f22; + align-content: center; + border-radius: 50%; + font-weight: bold; + font-family: HelveticaNeue, serif; +} + +.letter__read-mark:checked { + background-color: #6287bd; +} + +.letter__read-mark:hover { + background-color: #e5eaf0; +} + +.letter__receive-time { + overflow: hidden; + max-width: 40px; + font-size: 13px; + display: inline-block; + vertical-align: middle; + float: right; + color: #9b9b9b; + line-height: 40px; + font-weight: normal; +} + +.letter__message-title { + font-size: 13px; + display: inline-block; + max-width: calc(80% - 200px); + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; +} + +.letter__mail-user-avatar { + margin: 5px; + vertical-align: middle; + width: 30px; + height: 30px; + border-radius: 15px; + padding-right: 5px; + padding-left: 5px; +} + +.letter__mail-sender { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + width: 185px; + max-height: 16px; + font-size: 13px; + vertical-align: middle; +} + +.letter__opener { + display: none; +} + +.letter__opener:checked ~ .letter__message { + display: block; + z-index: 6; +} + +.letter__message { + font-family: HelveticaNeueLight, serif; + vertical-align: middle; + display: none; + padding: 15px; + font-size: 16px; + + position: absolute; + left: 0; + right: 0; + top: 43px; + height: calc(100% - 84px - 20px); + background-color: white; + overflow-x: hidden; + overflow-y: hidden; + z-index: -1; +} + +.letter__message-close { + float: right; + width: 15px; + height: 15px; + font-weight: 100; + text-align: center; + vertical-align: middle; +} + +.letter__message-text { + word-wrap: break-word; + white-space: initial; + vertical-align: middle; +} + +.letter__img { + width: 140px; + height: 140px; + float: left; + border-radius: 50%; + shape-outside: circle(); +} + +.letter_new { + +opacity: 0; +} + +.letter_showed { +transition: all 1000ms; + +opacity: 1; +} + + +.letter_removed { + opacity: 0; + transition: opacity 400ms; + +} + + + + + + + diff --git a/css/mail.css b/css/mail.css new file mode 100644 index 0000000..5dc2738 --- /dev/null +++ b/css/mail.css @@ -0,0 +1,104 @@ +@font-face { + font-family: YandexSansBold; + src: url("../fonts/YandexSansDisplay-Bold.ttf"); +} + +@font-face { + font-family: YandexSansThin; + src: url("../fonts/YandexSansDisplay-Thin.ttf"); +} + +@font-face { + font-family: YandexSansLight; + src: url("../fonts/YandexSansDisplay-Light.ttf"); +} + +@font-face { + font-family: YandexSansRegular; + src: url("../fonts/YandexSansDisplay-Regular.ttf"); +} + +@font-face { + font-family: HelveticaNeue; + src: url("../fonts/HelveticaNeueCyr-Medium.otf"); +} + +@font-face { + font-family: HelveticaNeueLight; + src: url("../fonts/HelveticaNeueCyr-Light.otf"); +} + +body { + background-color: #e5eaf0; + height: 100%; + min-width: 900px; + padding-left: 20px; + padding-right: 14px; + +} + +html { + height: 100%; +} + + +.mail__link { + color: unset; + text-decoration: none; +} + +.mail__body { + display: inline-block; + position: relative; + width: 80%; + min-height: 500px; + border-radius: 3px; + box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.34); + background-color: #fff; + margin-bottom: 30px; + padding-bottom: 40px; +} + +.mail__action { + vertical-align: middle; + display: inline-block; + margin-right: 26px; +} + +.mails__actions { + padding: 10px 20px; + font-family: HelveticaNeue, serif; + font-size: 13px; + color: #ccc; + border-bottom: 1px solid #e2e2e2;; +} + +.letters { + height: calc(100% - 71px); + overflow: auto; +} + +.mail__checkbox { + display: inline-block; + vertical-align: middle; + filter: brightness(1.2); + width: 16px; + height: 16px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 50%; + cursor: pointer; +} + +#checkbox-that-rules { + margin-right: 20px; +} + +.mail__main-container { + height: 100%; +} + + + + + diff --git a/css/navigation.css b/css/navigation.css new file mode 100644 index 0000000..3cfb4a6 --- /dev/null +++ b/css/navigation.css @@ -0,0 +1,45 @@ + +.navigation-list { + list-style-type: none; + margin-top: 0; + padding: 0; +} + +.navigation-list__item { + height: 22px; + margin-left: 0; + padding-left: 10px; + text-align: left; + line-height: 22px; + border-radius: 3px; +} + +.navigation-list__item:hover { + background-color: #cdd6e4; +} + +.navigation-bar__button { + height: 32px; + border-radius: 3px; + background-color: #6287bd; + font-family: HelveticaNeue, serif; + font-size: 12px; + font-weight: 500; + color: #fff; + width: 100%; + text-align: center; + cursor: pointer; + margin-bottom: 8px; + border: solid 1px #e5eaf0; +} + +.navigation-bar { + display: inline-block; + width: 147px; + margin-right: 22px; + vertical-align: top; + font-family: HelveticaNeue, serif; + font-size: 11px; + font-weight: 500; + color: #707070; +} diff --git a/img/sidebar__img-yandex.svg b/img/sidebar__img-yandex.svg new file mode 100644 index 0000000..95df5b0 --- /dev/null +++ b/img/sidebar__img-yandex.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/img/sidebar_img-mail.svg b/img/sidebar_img-mail.svg new file mode 100644 index 0000000..13f18c6 --- /dev/null +++ b/img/sidebar_img-mail.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..2151c5b --- /dev/null +++ b/index.html @@ -0,0 +1,159 @@ + + + + Яндекс.Почта + + + + + + + + + + +
+
+
+
+
+
+ +
+ + × +
+
+
+
+ + +
+
+
+ +
Переслать
+
Удалить
+
Это спам!
+
Прочитано
+
+
+
+ + +
+ +

+ crug + В Горящих Источниках я свернул вправо и тенью пронесся через Горную + Страну Артайна. Шерн пришлось лишить главаря кертов, поскольку ее банда + назойливо досаждала мне с высоких карнизов местных каньонов. В конце + концов нас оставили в покое, и мы оказались под синевато-серым небом, из + которого лился зеленый дождь. Теперь вниз, на равнины, туда, где вьются + песчаные дьяволы, напевая в камнях, которыми они были когда-то, унылые + мелодии загробных миров.

+ +
+
+
+ + +
+ +

+ qwerty +

+ +
+
+
+ + +
+ +

+ ps

+
+
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/js/mail.js b/js/mail.js new file mode 100644 index 0000000..c536daa --- /dev/null +++ b/js/mail.js @@ -0,0 +1,139 @@ +let ind = 123; +let letterNumber = 3; + +const maxNumber = 30; +const minTimeout = 10; +const maxTimeout = 10 * 60 * 1000; +const delay = 5 * 60 * 1000; + + +const queue = []; + +window.onload = function () { + + setTimeout(autoMail, getRandomInt(minTimeout, maxTimeout)); + + document.getElementById("write-button") + .addEventListener("click", newMail); + document.getElementById("checkbox-that-rules") + .addEventListener("click", selectAll); + document.getElementById("delete") + .addEventListener("click", deleteLetters); +}; + +function autoMail() { + newMail(); + const timeout = getRandomInt(delay, maxTimeout); + setTimeout(autoMail, timeout); +} + +function newMail() { + queue.push(getLetter(ind++)); + if (letterNumber < maxNumber) { + addLetters(); + } +} + +function addLetters() { + const mails = document.querySelector(".letters"); + let ins; + if (mails.children.length === 0) { + ins = null; + } else { + ins = mails.firstChild; + } + while (queue.length > 0 && letterNumber < maxNumber) { + letterNumber++; + const letter = queue.shift(); + mails.insertBefore(letter, ins); + const magic = letter.offsetHeight; + letter.classList.add("letter_showed"); + ins = letter; + } +} + +function getLetter(i) { + const template = document.importNode(document.getElementById("letter__template"), true); + const letter = template.content.querySelector(".latter"); + const id = "letter_open_" + i; + letter.querySelector("#letter_open_").setAttribute("id", id); + letter.querySelectorAll('label[for="letter_open_"]').forEach( + (it) => it.setAttribute("for", id) + ); + const sender = getRandomElement(senders); + letter.querySelector(".letter__mail-sender").innerText = sender; + letter.querySelector(".letter__sender-ico").innerText = sender[0]; + letter.querySelector(".letter__receive-time").innerText = getDate(); + letter.querySelector(".letter__message-title").innerText = getRandomElement(themes); + letter.querySelector(".letter__message-text").innerText = getMessage(); + + return letter; +} + +function selectAll() { + let bigCheckbox = document.getElementById("checkbox-that-rules"); + + const letters = document.querySelector(".letters"); + let selectAll = bigCheckbox.checked; + + Array.from(letters.getElementsByClassName("mail__checkbox")).forEach( + (elem) => elem.checked = selectAll + ); +} + +function deleteLetters() { + const letters = document.querySelector(".letters"); + + const checked = Array.from(letters.getElementsByClassName("mail__checkbox")) + .filter((it) => it.checked) + .map((it) => it.parentElement.parentElement); + checked.forEach((it) => { + it.classList.add("letter_removed"); + }); + let selectAllCheckBox = document.getElementById("checkbox-that-rules"); + selectAllCheckBox.checked = false; + + function tmp() { + checked.forEach((it) => { + letters.removeChild(it); + }); + letters.removeEventListener("transitionend", tmp); + } + + letters.addEventListener("transitionend", tmp); + + letterNumber -= checked.length; + addLetters(); + +} + +const month = ['янв', 'фев', 'март', 'апр', 'май', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; + +const senders = ["Удивительные факты", "Настоящие новости", "Правдивые рассказы"]; + +const themes = ["Ты не поверишь", "Этого никто не мог предскозать", "Это действительно случилось"]; + +const subject = ["Омич", "Кот", "Студент"]; +const action = ["спас", "ограбил", "убил"]; +const object = ["собаку", "пенсионерку", "барнаульца"]; +const smth = ["ночью", "в морге", "во славу Сатане"]; + +function getMessage() { + return getRandomElement(subject) + " " + + getRandomElement(action) + " " + + getRandomElement(object) + " " + + getRandomElement(smth) + "!"; +} + +function getRandomElement(arr) { + return arr[getRandomInt(0, arr.length)]; +} + +function getDate() { + let temp = new Date(); + return temp.getDate() + ' ' + month[temp.getMonth()]; +} + +function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min)) + min; +} \ No newline at end of file