Sprint 1

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+
+*.local
+dist
+dist-ssr
+
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -7,77 +7,17 @@
 
 ### Также не забудьте проверить, что репозиторий публичный.
 ---
+Домен на Netlify: https://famous-alfajores-2b6ee4.netlify.app
+Ссылка github https://github.com/achuzhegin/middle.messenger.praktikum.yandex.git
 
+Схематичные макеты в папке: https://www.figma.com/file/CoUPn2Kxakd4gSwznciTcb/Untitled?type=design&node-id=0%3A1&mode=design&t=Zq1cMmWLw0LRr5Ln-1
 
-Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README.
+Главная станица http://localhost:3000/
+Станица логина http://localhost:3000/pages/login/login.html
+Станица регистрации http://localhost:3000/pages/registration/registration.html
+Станица профиля http://localhost:3000/pages/profiles/profile.html
+Станица изменить данные профиля http://localhost:3000/pages/profiles/accounting.html
+Станица изменить пароль http://localhost:3000/pages/profiles/pasword.html
+Станица чата http://localhost:3000/pages/chats/chat.html (заглушка)
 
-README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса:
 
-- Готов ли проект к использованию?
-- В чём его польза?
-- Как установить?
-- Как применять?
-
-## Бейджи
-
-Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода:
-
-![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png)
-
-Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея.
-
-Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат:
-
-![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png)
-
-В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. 
-
-Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта.
-
-## Описание
-
-Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк:
-
-![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png)
-
-Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию.
-
-Если у проекта есть сайт, добавьте ссылку в заголовок.
-
-## Установка
-
-Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию.
-
-Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например:
-
-- `npm install` — установка стабильной версии,
-- `npm start` — запуск версии для разработчика,
-- `npm run build:prod` — сборка стабильной версии.
-
-## **Примеры использования**
-
-Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования:
-
-![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png)
-
-Для более подробных инструкции добавьте новые разделы или ссылки:
-
-- на документацию,
-- вики проекта,
-- описание API.
-
-В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами.
-
-### **Команда**
-
-Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков.
-
-![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png)
-
-### **Примеры README**
-
-- «[Реакт](https://github.com/facebook/react)»,
-- «[Эхо](https://github.com/labstack/echo)»,
-- «[Вебпак](https://github.com/webpack/webpack)»,
-- «[ТДенгине](https://github.com/taosdata/TDengine)»,
-- «[Соул-хантинг](https://github.com/vladpereskokov/soul-hunting/)».

contact.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <link rel="stylesheet" href="css/login.css">
+</head>
+
+<body>
+    <section id="login">
+
+        <form class="container" name="contactForm" action="" method="get">
+            <h2 class="heading">Вход</h2>
+            <div class="row">
+                <div class="column-2">
+                    <p>
+                        <label for="username">Логин</label>
+                        <input type="text" id="username" name="username">
+                    </p>
+                    <p>
+                        <label for="password">Пароль</label>
+                        <input type="password" id="password" name="password">
+                    </p>
+
+                </div>
+
+            </div>
+            <div class="row-2">
+                <div class="column-2">
+                    <p class="text-center"><a href="index.html" class="btn">Авторизоваться</a></p>
+                    <p class="text-center"><a href="index.html" class="btn-2">Нет аккаунта?</a></p>
+                </div>
+            </div>
+        </form>
+
+
+
+    </section>
+</body>
+
+</html>
+

counter.js

@@ -0,0 +1,13 @@
+import { flatten } from 'lodash-es';
+
+export function setupCounter(element) {
+  console.log(flatten([[[1,2,3,4,5]]]));
+
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+} 

css/chat.css

@@ -0,0 +1,88 @@
+body {
+    margin: 0;
+    max-width: 1080px;
+    max-height: 754px;
+
+    font-family: Montserrat, Arial, sans-serif;
+    font-weight: 500;
+}
+.container-1 {
+    width: 310px;
+
+    border-right: solid;
+
+    border-color: #F5F5F5;
+    float: left;
+}
+.container-2 {
+    width: 310px;
+
+    margin: 0 auto;
+
+    border-right: solid;
+
+    border-color: #F5F5F5;
+}
+.profile {
+    text-align:right;
+    text-decoration: none;
+    color: #999999;
+}
+.profile a {color: #999999;
+    text-decoration: none;
+    margin-top: 21px;
+}
+input {
+	height: 32px;
+    width: 100%;
+
+	background-color:  #EFEFEF;
+	border: none;
+
+	box-shadow: none;
+
+	outline: none;
+    margin-top: 21px;
+}
+.row {
+    display: flex;
+
+    width: 310px;
+    height: 67px;
+    border-bottom:solid;
+    border-color: #F5F5F5;
+
+}
+
+.circle {
+    background: #EFEFEF;
+
+    border-radius: 50%;
+
+    height: 47px;
+    width:  47px;
+    margin: auto;
+
+}
+.item-1 {
+
+    width: 193px;
+
+    margin-left: 5px;
+    overflow: Hidden;
+    font-size: 12px;
+
+
+
+}
+.bold {
+    font-weight: bold;
+}
+.bold {
+    font-weight: bold;
+}
+.description {
+    color: #999999;
+}
+
+

css/login.css

@@ -0,0 +1,77 @@
+body {
+    margin: 0;
+    max-width: 1280px;
+    max-height: 720px;
+
+    font-family: Montserrat, Arial, sans-serif;
+    font-weight: 500;
+}
+.container {
+    width: 340px;
+
+    margin: 0 auto;
+    margin-top: 135px;
+    padding-left: 15px;
+    padding-right: 15px;
+    border: solid;
+    border-radius: 12px;
+    border-color: #F5F5F5;
+}
+.row {
+    display: flex;
+    flex-wrap: wrap;
+
+}
+.row-2 {
+    display: flex;
+    flex-wrap: wrap;
+    height: 200px;
+    align-content: flex-end;
+
+}
+.heading {
+    text-align: center;
+}
+input {
+	height: 38px;
+    width: 100%;
+
+	border: none;
+    border-bottom: 2px solid;
+    border-color: #3369F3;
+	box-shadow: none;
+
+	outline: none;
+}
+.column-2 {
+    flex: 0 0 100%;
+}
+
+label {
+    /* display: inline-block;  */
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: #999999;
+}
+.btn {
+	display: inline-block;
+	height: 38px;
+    width: 100%;
+	color: white;
+	text-align: center;
+    line-height: 38px;
+    text-decoration: none;
+	background: #3369F3;
+	border-radius: 12px;
+}
+.btn-2 {
+	display: inline-block;
+	height: 38px;
+    width: 100%;
+	color:  #3369F3;
+	text-align: center;
+    line-height: 38px;
+    text-decoration: none;
+
+	border-radius: 12px;
+}