diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md index bcd1a13..c0af86c 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,30 @@ -### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её. +## Веб мессенджер -### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main. -### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта). - -### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание». - -### Также не забудьте проверить, что репозиторий публичный. --- +### При разработке были использованы следующие технологии: -Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README. - -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** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. - -Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта. - -## Описание - -Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк: +- Vite +- Шаблонизатор Handlebars +- Препроцессор Less -![Описание](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. +### Макет веб мессенджера - [Figma](https://www.figma.com/design/nQd8AZRwSvq3ykmQsQ8euM/Messanger-(Community)?node-id=0-1&t=CCL9PUHjO5FaLwJF-0) -В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами. +--- -### **Команда** +### Установка -Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков. +#### Для установки нужно выполнить следующие действия: -![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png) +- Склонировать данный репозиторий (git clone *ссылка на репозиторий*) +- В корне проекта запустить команду **npm install**, для установки зависимостей +- **npm run dev** запуск проекта в режиме разработчика +- В браузере откройте страницу [localhost:3000](localhost:3000) +- **npm run build** сборка билда +- **npm run start** запуск проекта в режиме сборки -### **Примеры 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/)». +### [Ссылка на Netlify](https://legendary-cat-a62c0e.netlify.app/main-page) diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..df9f053 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,8 @@ +[build] + command = "npm run build" + publish = "dist" + +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..bf3f12c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,534 @@ +{ + "name": "practikum_project", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", + "optional": true + }, + "@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", + "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "optional": true + }, + "@rollup/rollup-android-arm-eabi": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", + "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==", + "optional": true + }, + "@rollup/rollup-android-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz", + "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==", + "optional": true + }, + "@rollup/rollup-darwin-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", + "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", + "optional": true + }, + "@rollup/rollup-darwin-x64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz", + "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==", + "optional": true + }, + "@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz", + "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==", + "optional": true + }, + "@rollup/rollup-linux-arm-musleabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz", + "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==", + "optional": true + }, + "@rollup/rollup-linux-arm64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz", + "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==", + "optional": true + }, + "@rollup/rollup-linux-arm64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz", + "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==", + "optional": true + }, + "@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz", + "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==", + "optional": true + }, + "@rollup/rollup-linux-riscv64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz", + "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==", + "optional": true + }, + "@rollup/rollup-linux-s390x-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz", + "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==", + "optional": true + }, + "@rollup/rollup-linux-x64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", + "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", + "optional": true + }, + "@rollup/rollup-linux-x64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz", + "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==", + "optional": true + }, + "@rollup/rollup-win32-arm64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz", + "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==", + "optional": true + }, + "@rollup/rollup-win32-ia32-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz", + "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==", + "optional": true + }, + "@rollup/rollup-win32-x64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz", + "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==", + "optional": true + }, + "@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" + }, + "copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "requires": { + "is-what": "^3.14.1" + } + }, + "errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "optional": true, + "requires": { + "prr": "~1.0.1" + } + }, + "esbuild": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", + "requires": { + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" + } + }, + "fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "optional": true + }, + "graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "optional": true + }, + "handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "requires": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "uglify-js": "^3.1.4", + "wordwrap": "^1.0.0" + } + }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "optional": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "optional": true + }, + "is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, + "less": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", + "dev": true, + "requires": { + "copy-anything": "^2.0.1", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "parse-node-version": "^1.0.1", + "source-map": "~0.6.0", + "tslib": "^2.3.0" + } + }, + "make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "optional": true, + "requires": { + "pify": "^4.0.1", + "semver": "^5.6.0" + } + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "optional": true + }, + "minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" + }, + "nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" + }, + "needle": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "optional": true, + "requires": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + } + }, + "neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" + }, + "parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true + }, + "picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "optional": true + }, + "postcss": { + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", + "requires": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" + } + }, + "prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "optional": true + }, + "rollup": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", + "requires": { + "@rollup/rollup-android-arm-eabi": "4.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", + "@types/estree": "1.0.5", + "fsevents": "~2.3.2" + } + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "optional": true + }, + "sax": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==", + "dev": true, + "optional": true + }, + "semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" + }, + "tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", + "dev": true + }, + "uglify-js": { + "version": "3.18.0", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.18.0.tgz", + "integrity": "sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A==", + "optional": true + }, + "vite": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz", + "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==", + "requires": { + "esbuild": "^0.21.3", + "fsevents": "~2.3.3", + "postcss": "^8.4.39", + "rollup": "^4.13.0" + } + }, + "vite-plugin-handlebars": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vite-plugin-handlebars/-/vite-plugin-handlebars-2.0.0.tgz", + "integrity": "sha512-+J3It0nyhPzx4nT1I+fnWH+jShTEXzm6X0Tgsggdm9IYFD7/eJ6a3ROI13HTe0CVoyaxm/fPxH5HDAKyfz7T0g==", + "requires": { + "handlebars": "^4.7.6", + "vite": "^5.0.0" + } + }, + "wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f9e1429 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "practikum_project", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "vite build", + "preview": "vite preview", + "start": "vite build && vite preview --port 3000" + }, + "devDependencies": { + "vite": "^5.3.1", + "less": "^4.2.0" + }, + "dependencies": { + "handlebars": "^4.7.8", + "vite-plugin-handlebars": "^2.0.0" + }, + "engines": { + "node": "^17.4.0" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs new file mode 100644 index 0000000..66c4e6c --- /dev/null +++ b/src/components/button/button.hbs @@ -0,0 +1 @@ + diff --git a/src/components/button/button.less b/src/components/button/button.less new file mode 100644 index 0000000..6896b43 --- /dev/null +++ b/src/components/button/button.less @@ -0,0 +1,45 @@ +@import '../../utils.less'; + +.button ( + @border-radius: 8px; + @border: 1px solid transparent; + @font-size: 1em; + @padding: 0.5rem; + @margin: 0 0 1.5rem 0; + @width: 15rem; + @font-weight: 500; + @font-family: inherit; + @background: @main__button-background-color; + @cursor: pointer; + @transition: border-color 0.25s; + @color: @main__font-color; +){ + border-radius: @border-radius; + border: @border; + font-size: @font-size; + padding: @padding; + margin: @margin; + width: @width; + font-weight: @font-weight; + font-family: @font-family; + background: @background; + cursor: @cursor; + transition: @transition; + color: @color; +} + +.custom-button-hover( + @background: none; + @color: @main__button-background-hover; +){ + background: @background !important; + color: @color; +} + +.button { + .button(); + + &:hover { + background-color: @main__button-background-hover !important; + } +} diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 0000000..e10c3ea --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1,2 @@ +import './button.less'; +export { default as Button } from './button.hbs?raw'; diff --git a/src/components/error/error.hbs b/src/components/error/error.hbs new file mode 100644 index 0000000..cd2bc36 --- /dev/null +++ b/src/components/error/error.hbs @@ -0,0 +1,6 @@ +
+

{{errorTitle}}

+ {{errorText}} + {{> Button class="error back-button" label="Chat" page="chatPage" }} + +
diff --git a/src/components/error/error.less b/src/components/error/error.less new file mode 100644 index 0000000..bbde5b8 --- /dev/null +++ b/src/components/error/error.less @@ -0,0 +1,25 @@ +@import '../../utils.less'; + +.error { + &.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 5rem 0; + + .title { + + } + + .text { + .back-button { + .button(@background: none, @margin: 0, @padding: 0, @width: auto, @color: @main__button-background-color); + + &:hover { + .custom-button-hover(@color: @main__button-background-hover); + } + } + } + } +} diff --git a/src/components/error/index.js b/src/components/error/index.js new file mode 100644 index 0000000..5af10fd --- /dev/null +++ b/src/components/error/index.js @@ -0,0 +1,2 @@ +import './error.less'; +export { default as Error } from './error.hbs?raw'; diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..e1e2c83 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,3 @@ +export { Input } from './input'; +export { Button } from './button'; +export { Error } from './error'; diff --git a/src/components/input/index.js b/src/components/input/index.js new file mode 100644 index 0000000..19fc34a --- /dev/null +++ b/src/components/input/index.js @@ -0,0 +1,2 @@ +import './input.less'; +export { default as Input } from './input.hbs?raw'; diff --git a/src/components/input/input.hbs b/src/components/input/input.hbs new file mode 100644 index 0000000..2af695e --- /dev/null +++ b/src/components/input/input.hbs @@ -0,0 +1,2 @@ + + diff --git a/src/components/input/input.less b/src/components/input/input.less new file mode 100644 index 0000000..faa1807 --- /dev/null +++ b/src/components/input/input.less @@ -0,0 +1,32 @@ +@import '../../utils.less'; + +.input( + @width: 100%; + @height: 2rem; + @margin: 0 0 0 0; + @background: @main__input-background-color; + @color: @main__font-color; + @padding: 5px; + @border: 1px solid transparent; + @border-radius: 5px; + @font-size: 18px; +){ + width: @width; + margin: @margin; + height: @height; + background: @background; + color: @color; + padding: @padding; + border: @border; + border-radius: @border-radius; + font-size: @font-size; +} + +.input { + .input(); + + &:hover, &:active, &:focus-visible { + border: 1px solid @main__button-background-color !important; + outline: none; + } +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..bbc0a4f --- /dev/null +++ b/src/index.html @@ -0,0 +1,14 @@ + + + + + + Web Messenger + + + +
+
+
+ + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..fc1ada5 --- /dev/null +++ b/src/main.js @@ -0,0 +1,94 @@ +import Handlebars from 'handlebars'; +import * as Components from './components'; +import * as Pages from './pages'; +import './style.less'; + +const pages = { + 'mainPage': [Pages.MainPage], + 'loginPage': [Pages.LoginForm], + 'registrationPage': [Pages.RegistrationForm], + 'chatPage': [Pages.ChatPage], + 'profilePage': [Pages.ProfilePage], + 'profileEditPage': [Pages.ProfileEditPage], + 'profileEditPasswordPage': [Pages.ProfileEditPasswordPage], + 'error404': [Pages.Error404Page], + 'error500': [Pages.Error500Page] +} + +Object.entries(Components).forEach(([ name, component ]) => { + Handlebars.registerPartial(name, component); +}); + +const navigator = (page) => { + const [src, args] = pages[page]; + const handlebars = Handlebars.compile(src); + document.getElementById('app').innerHTML = handlebars(args); +} + +document.addEventListener('DOMContentLoaded', (e) => { + const path = e.target.location.pathname; + + switch (path) { + case '/main-page': { + navigator('mainPage'); + break; + } + + case '/login': { + navigator('loginPage'); + break; + } + + case '/registration': { + navigator('registrationPage'); + break; + } + + case '/chat': { + navigator('chatPage'); + break; + } + + case '/profile': { + navigator('profilePage'); + break; + } + + case '/profile-edit': { + navigator('profileEditPage'); + break; + } + + case '/profile-edit-password': { + navigator('profileEditPasswordPage'); + break; + } + + case '/error404': { + navigator('error404'); + break; + } + + case '/error500': { + navigator('error500'); + break; + } + + default: { + window.location.pathname = '/main-page'; + break; + } + } +}); + + +document.addEventListener('click', (event) => { + const page = event.target.getAttribute('page'); + + if (page) { + navigator(page); + + event.preventDefault(); + event.stopImmediatePropagation(); + } +}); diff --git a/src/pages/chat/chat.hbs b/src/pages/chat/chat.hbs new file mode 100644 index 0000000..b83c3e4 --- /dev/null +++ b/src/pages/chat/chat.hbs @@ -0,0 +1,52 @@ +
+
+
+
+
+ {{> Button class="profile-button" type="button" label='Profile' page="profilePage"}} +
+
+ {{> Input type='search' name='search' class="chat-search" placeholder="Search" }} +
+
+ +
+
+
Andrew
+
17:25
+
+
+
Agag agas a gagsaga ags
+
3
+
+ + +
+
+
Andrew
+
17:25
+
+
+
Agag agas a gagsaga ags
+
+
+ + +
+
+
Andrew
+
17:25
+
+
+
Agag agas a gagsaga ags
+
1
+
+ +
+
+
+
+ Select a chat to send a message +
+
+
diff --git a/src/pages/chat/chat.less b/src/pages/chat/chat.less new file mode 100644 index 0000000..b20b9f0 --- /dev/null +++ b/src/pages/chat/chat.less @@ -0,0 +1,115 @@ +@import '../../utils.less'; + +.chat { + display: flex; + + .sidebar { + flex: 1; + + .list { + display: flex; + flex-direction: column; + width: 100%; + + .list-header { + display: flex; + flex-direction: column; + height: 5rem; + border-right: 1px solid @secondary__background-color; + border-bottom: 1px solid @secondary__background-color; + + .profile { + align-self: flex-end; + padding: 0.25rem 0.1rem; + + .profile-button { + .button(@background: none, @width: 100%, @margin: 0); + + &:hover { + background: none !important; + color: @main__button-background-hover; + } + } + } + + .search { + display: block; + width: 95%; + margin: 0 auto; + + .chat-search { + .input(@background: @secondary__background-color, @margin: 0 auto); + } + } + } + + .item { + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-inline: 1rem .75rem; + border-bottom: 1px solid @secondary__background-color; + min-height: 4.5rem; + padding-inline-start: 4.5rem !important; + text-decoration: none; + color: @main__font-color; + + .avatar { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset-inline-start: .5625rem !important; + width: 3.375rem !important; + height: 3.375rem !important; + + &:after { + content: ''; + border: 25px solid @secondary__background-color; + border-radius: 100%; + } + } + + .dialog { + display: flex; + justify-content: space-between; + align-items: center; + + &.title { + height: 1.375rem; + } + + &.subtitle { + height: 1.375rem; + margin-top: .125rem; + color: @secondary__font-color; + + &.unread { + color: @main__font-color; + transform-style: preserve-3d; + + &:after { + content: ''; + right: -5px; + position: absolute; + border: 10px solid @secondary__font-color; + border-radius: 100%; + transform: translateZ(-1px); + } + } + } + } + } + } + } + + .messenger { + flex: 2; + display: flex; + justify-content: center; + align-items: center; + background: @secondary__background-color; + } +} diff --git a/src/pages/chat/index.js b/src/pages/chat/index.js new file mode 100644 index 0000000..9ac4212 --- /dev/null +++ b/src/pages/chat/index.js @@ -0,0 +1,2 @@ +import './chat.less'; +export { default as ChatPage } from './chat.hbs?raw'; diff --git a/src/pages/error404/error404.hbs b/src/pages/error404/error404.hbs new file mode 100644 index 0000000..4da0a8b --- /dev/null +++ b/src/pages/error404/error404.hbs @@ -0,0 +1 @@ +{{> Error errorTitle="Error 404" errorText="Take a breath. That page does not exist but you back to "}} diff --git a/src/pages/error404/index.js b/src/pages/error404/index.js new file mode 100644 index 0000000..333b90e --- /dev/null +++ b/src/pages/error404/index.js @@ -0,0 +1,2 @@ +import '../../components/error/error.less'; +export { default as Error404Page } from './error404.hbs?raw'; diff --git a/src/pages/error500/error500.hbs b/src/pages/error500/error500.hbs new file mode 100644 index 0000000..5853bba --- /dev/null +++ b/src/pages/error500/error500.hbs @@ -0,0 +1 @@ +{{> Error errorTitle="Error 505" errorText="Oooops! Something went wrong. Back to "}} diff --git a/src/pages/error500/index.js b/src/pages/error500/index.js new file mode 100644 index 0000000..0332baa --- /dev/null +++ b/src/pages/error500/index.js @@ -0,0 +1,2 @@ +import '../../components/error/error.less'; +export { default as Error500Page } from './error500.hbs?raw'; diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..f024075 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,9 @@ +export { MainPage } from './main-page'; +export { LoginForm } from './login-form'; +export { RegistrationForm } from './registration-form'; +export { ChatPage } from './chat'; +export { ProfilePage } from './profile'; +export { ProfileEditPage } from './profile-edit'; +export { ProfileEditPasswordPage } from './profile-edit-password'; +export { Error404Page } from './error404'; +export { Error500Page } from './error500'; diff --git a/src/pages/login-form/index.js b/src/pages/login-form/index.js new file mode 100644 index 0000000..cb9d1ce --- /dev/null +++ b/src/pages/login-form/index.js @@ -0,0 +1,2 @@ +import './login-form.less'; +export { default as LoginForm } from './login-form.hbs?raw'; diff --git a/src/pages/login-form/login-form.hbs b/src/pages/login-form/login-form.hbs new file mode 100644 index 0000000..e2ad30a --- /dev/null +++ b/src/pages/login-form/login-form.hbs @@ -0,0 +1,17 @@ +
+

Sign In

+
+ + + +
+
+ {{> Button class="login button-create-account" type="button" label='Create Account' page="registrationPage"}} +
+
diff --git a/src/pages/login-form/login-form.less b/src/pages/login-form/login-form.less new file mode 100644 index 0000000..afc7bd0 --- /dev/null +++ b/src/pages/login-form/login-form.less @@ -0,0 +1,62 @@ +@import '../../utils.less'; + +.login { + &.title { + margin: 1.5rem 0; + } + + &.container { + .container-styles(); + } + + &.form { + display: flex; + flex-direction: column; + width: 100%; + + .field-login, .field-password { + display: flex; + flex-direction: column; + margin: 0 auto; + width: 80%; + + label { + margin-bottom: 0.25rem; + } + + .input { + &.login, &.password { + .input( + @margin: 0 0 2rem 0; + @width: auto; + ); + } + } + } + + .confirm { + margin: 7rem auto 1rem; + width: 80%; + + .button { + &.button-login { + .button(@margin: 0, @padding: 1rem, @width: 100%); + } + } + } + } + + .create-account { + .button { + &.button-create-account { + background: none; + color: @main__button-background-color; + + &:hover { + text-decoration: underline; + background: none !important; + } + } + } + } +} diff --git a/src/pages/main-page/index.js b/src/pages/main-page/index.js new file mode 100644 index 0000000..0627707 --- /dev/null +++ b/src/pages/main-page/index.js @@ -0,0 +1 @@ +export { default as MainPage } from './main-page.hbs?raw'; diff --git a/src/pages/main-page/main-page.hbs b/src/pages/main-page/main-page.hbs new file mode 100644 index 0000000..832574c --- /dev/null +++ b/src/pages/main-page/main-page.hbs @@ -0,0 +1,12 @@ +
+ +
diff --git a/src/pages/profile-edit-password/index.js b/src/pages/profile-edit-password/index.js new file mode 100644 index 0000000..9af45a7 --- /dev/null +++ b/src/pages/profile-edit-password/index.js @@ -0,0 +1,2 @@ +import '../profile/profile.less'; +export { default as ProfileEditPasswordPage } from './profile-edit-password.hbs?raw'; diff --git a/src/pages/profile-edit-password/profile-edit-password.hbs b/src/pages/profile-edit-password/profile-edit-password.hbs new file mode 100644 index 0000000..b031ddc --- /dev/null +++ b/src/pages/profile-edit-password/profile-edit-password.hbs @@ -0,0 +1,21 @@ +
+
+ {{> Button class="back-button" type="button" id="button" page="profilePage" }} +
+
+
+
+
+
+ {{> Input type='password' name='oldPassword' class="profile old-password" id="old-password" label='Old Password' }} +
+
+ {{> Input type='password' name='newPassword' class="profile new-password" id="new-password" label='New Password' }} +
+
+
+ {{> Button class="profile button-save" type="submit" label="Save" page="profilePage" }} +
+
+
+
diff --git a/src/pages/profile-edit/index.js b/src/pages/profile-edit/index.js new file mode 100644 index 0000000..fcc34f2 --- /dev/null +++ b/src/pages/profile-edit/index.js @@ -0,0 +1,2 @@ +import '../profile/profile.less'; +export { default as ProfileEditPage } from './profile-edit.hbs?raw'; diff --git a/src/pages/profile-edit/profile-edit.hbs b/src/pages/profile-edit/profile-edit.hbs new file mode 100644 index 0000000..5e53578 --- /dev/null +++ b/src/pages/profile-edit/profile-edit.hbs @@ -0,0 +1,28 @@ +
+
+ {{> Button class="back-button" type="button" id="button" page="profilePage" }} +
+
+
+
+
+ {{> Input type='email' name='email' class="email" id="email" label='Email' value="ivan@gmail.com" }} +
+
+ {{> Input type='input' name='login' class="login" id="login" label='Login' value="ivanivanov" }} +
+
+ {{> Input type='input' name='first_name' class="first_name" id="first_name" label='First Name' value="Ivan" }} +
+
+ {{> Input type='input' name='second_name' class="second_name" id="second_name" label='Second Name' value="Ivanov" }} +
+
+ {{> Input type='tel' name='phone' class="phone" id="phone" label='Phone Number' value="+78005553535" }} +
+
+ {{> Button class="profile button-save" type="submit" label="Save" page="profilePage" }} +
+
+
+
diff --git a/src/pages/profile/index.js b/src/pages/profile/index.js new file mode 100644 index 0000000..4e55059 --- /dev/null +++ b/src/pages/profile/index.js @@ -0,0 +1,2 @@ +import './profile.less'; +export { default as ProfilePage } from './profile.hbs?raw'; diff --git a/src/pages/profile/profile.hbs b/src/pages/profile/profile.hbs new file mode 100644 index 0000000..9fae64e --- /dev/null +++ b/src/pages/profile/profile.hbs @@ -0,0 +1,33 @@ +
+
+ {{> Button class="back-button" type="button" id="button" page="chatPage" }} +
+
+
+
+
+ Email +
+
+ Login +
+
+ First NameIvan +
+
+ Second NameIvanov +
+
+ Phone +
+
+
+
+ {{> Button class="profile button-edit-profile" label="Change Profile" page="profileEditPage"}} +
+
+ {{> Button class="profile button-edit-password" label="Change Password" page="profileEditPasswordPage"}} +
+
+
+
diff --git a/src/pages/profile/profile.less b/src/pages/profile/profile.less new file mode 100644 index 0000000..e92fadb --- /dev/null +++ b/src/pages/profile/profile.less @@ -0,0 +1,107 @@ +@import '../../utils.less'; + +.profile { + display: flex; + + .sidebar { + width: 5%; + + .back-button { + .button(@background: none, @margin: 0, @padding: 0); + + &:after { + content: '<'; + border: 1px solid white; + border-radius: 100%; + color: @main__font-color; + } + + &:hover { + .custom-button-hover(); + } + } + } + + .main-content { + display: flex; + flex: auto; + flex-direction: column; + justify-content: center; + align-items: center; + background: @secondary__background-color; + padding: 3rem; + + .avatar { + margin: 5rem 0; + + &:after { + content: ''; + border: 70px solid @main__background-color; + border-radius: 100%; + } + } + + .info { + flex-direction: column; + width: 60%; + margin-bottom: 2rem; + + .item { + justify-content: space-between; + margin-bottom: 1rem; + border-bottom: 2px solid @profile__info-underline-color; + + .label, label { + color: @secondary__font-color; + } + + &.editable { + .input { + .input(@border: none, @background: none, @width: 60%); + + text-align: right; + + &:hover, &:active, &:focus-visible { + border: none !important; + } + } + + &:hover { + border-bottom: 2px solid @profile__info-underline-hover-color; + } + } + } + + .edit-password { + width: 100%; + } + + .save-profile { + margin: 2rem auto 0 auto; + + .button-save { + display: block; + } + } + } + + .edit-buttons { + flex-direction: column; + width: 60%; + + .edit-profile, .edit-password { + .button-edit-profile, .button-edit-password { + .button(@margin: 0.5rem 0, @background: none, @padding: 0, @color: @main__button-background-color); + + &:hover { + .custom-button-hover(); + } + } + + padding: 0; + margin: 0; + border-bottom: 2px solid @profile__info-underline-color; + } + } + } +} diff --git a/src/pages/registration-form/index.js b/src/pages/registration-form/index.js new file mode 100644 index 0000000..c0580f9 --- /dev/null +++ b/src/pages/registration-form/index.js @@ -0,0 +1,2 @@ +import './registration-form.less'; +export { default as RegistrationForm } from './registration-form.hbs?raw'; diff --git a/src/pages/registration-form/registration-form.hbs b/src/pages/registration-form/registration-form.hbs new file mode 100644 index 0000000..db69e26 --- /dev/null +++ b/src/pages/registration-form/registration-form.hbs @@ -0,0 +1,26 @@ +
+

Create Account

+
+
+ {{> Input type='text' name='first_name' class="first_name" id="first_name" label='First Name' }} +
+
+ {{> Input type='text' name='second_name' class="second_name" id="second_name" label='Second Name' }} +
+
+ {{> Input type='text' name='login' class="login" id="login" label='Login' }} +
+
+ {{> Input type='email' name='email' class="email" id="email" label='Email' }} +
+
+ {{> Input type='password' name='password' class="password" id="password" label='Password' }} +
+
+ {{> Input type='tel' name='phone' class="phone" id="phone" label='Phone Number' }} +
+
+ {{> Button class="registration__button-registration" type="submit" label='Create account' page="chatPage"}} +
+
+
diff --git a/src/pages/registration-form/registration-form.less b/src/pages/registration-form/registration-form.less new file mode 100644 index 0000000..d10d39c --- /dev/null +++ b/src/pages/registration-form/registration-form.less @@ -0,0 +1,33 @@ +@import '../../utils.less'; + +.registration { + &.container { + .container-styles(); + } + + .title { + margin: 1.5rem 0; + padding: 0; + } + + &.form { + width: 80%; + display: flex; + flex-direction: column; + + .item { + display: flex; + flex-direction: column; + margin: 0 auto; + width: 80%; + + .input { + .input(@width: auto, @margin: 0 0 0.25rem 0); + } + } + + .submit { + margin: 2rem auto 0 auto; + } + } +} diff --git a/src/style.less b/src/style.less new file mode 100644 index 0000000..751b7e1 --- /dev/null +++ b/src/style.less @@ -0,0 +1,34 @@ +@import 'variables.less'; +@import 'utils.less'; + +body { + margin: 0; +} + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color: @main__font-color; + background-color: @main__background-color; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + + + +.main-page { + &.container { + display: flex; + width: 50%; + margin: 0 auto; + + .items { + .container-styles() + } + } +} diff --git a/src/utils.less b/src/utils.less new file mode 100644 index 0000000..4e71d4d --- /dev/null +++ b/src/utils.less @@ -0,0 +1,25 @@ +@import 'variables.less'; +@import './components/input/input.less'; +@import './components/button/button.less'; + +.container-styles( + @background: @secondary__background-color; + @width: 25rem; + @height: auto; + @display: flex; + @flex-direction: column; + @align-items: center; + @margin: 5% auto 0 auto; + @padding: 1.5rem 0; + @border-radius: 12px; +){ + display: @display; + flex-direction: @flex-direction; + align-items: @align-items; + margin: @margin; + height: @height; + padding: @padding; + width: @width; + border-radius: @border-radius; + background: @background; +} diff --git a/src/variables.less b/src/variables.less new file mode 100644 index 0000000..609591f --- /dev/null +++ b/src/variables.less @@ -0,0 +1,12 @@ +@main__background-color: #252838; +@main__font-color: #E2E2E4; +@secondary__font-color: #9898B0; +@main__button-background-color: #3369F3; +@main__button-background-hover: #3369f39e; + +@main__input-background-color: #252838; + +@secondary__background-color: #343A4F; + +@profile__info-underline-color: #4C546F; +@profile__info-underline-hover-color: #3369F3; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..c1b6185 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,25 @@ +import { defineConfig } from 'vite' +import { resolve } from 'path'; +import Handlebars from 'vite-plugin-handlebars'; + +export default defineConfig({ + plugins: [Handlebars({})], + root: resolve(__dirname, 'src'), + build: { + outDir: resolve(__dirname, 'dist'), + rollupOptions: { + input: { + index: resolve(__dirname, 'src/index.html'), + }, + }, + }, + css: { + preprocessorOptions: { + less: { + math: 'always', + relativeUrls: true, + javascriptEnabled: true + }, + }, + } +})