+
+
Профиль {{{svg_arrow_right}}}
+
+ {{{input_search}}}
+
+
+ {{#each chat_list}}
+
+ {{#if this.active}}
+
+ {{else}}
+
+ {{/if}}
+
+
+
+
{{{this.name}}}
+
{{this.last_message.text}}
+
+
+
{{this.last_message.date}}
+ {{#if this.last_message.new_messages}}
+
+
{{this.last_message.new_messages}}
+
+ {{/if}}
+
+
+
+
+ {{/each}}
+
+
+
+
+
+
+
+
+ {{#each chat_messages}}
+ {{{this.text}}}
+
+
+ {{{this.date}}}
+
+ {{/each}}
+
+
+
+
+ {{{svg_file}}}
+
+
+
+
+
+ {{{svg_send}}}
+
+
+
+
+
+`
diff --git a/src/pages/profile/profile.js b/src/pages/profile/profile.js
new file mode 100644
index 000000000..465299c99
--- /dev/null
+++ b/src/pages/profile/profile.js
@@ -0,0 +1,42 @@
+import Handlebars from "handlebars";
+import { template } from "./profile.tmpl.js";
+import { template_edit } from "./profile_edit.tmpl.js";
+import { template_edit_password } from "./profile_edit_password.tmpl.js";
+import {button_blue, button, button_blue_static} from "../../components/Button/buttons.js";
+import {svg_arrow_right, svg_send} from "../../components/Svg/svg.js";
+
+const name = "Дмитрий";
+
+export const label = ({text, url}) => Handlebars.compile(`
+
{{ text }} `)({text, url})
+
+const params = [
+ {name: "Почта", value: "pochta@yandex.ru", value_name: "email"},
+ {name: "Логин", value: "ivanivanov", value_name: "login"},
+ {name: "Имя", value: "Иван", value_name: "first_name"},
+ {name: "Фамилия", value: "Иванов", value_name: "second_name"},
+ {name: "Имя в чате", value: "Иван", value_name: "display_name"},
+ {name: "Телефон", value: "+7 (909) 967 30 30", value_name: "phone"},
+];
+
+const params_password = [
+ {name: "Старый пароль", value: "", placeholder: "*******", value_name: "oldPassword"},
+ {name: "Новый пароль", value: "", placeholder: "*********", value_name: "newPassword"},
+ {name: "Повторите новый пароль", value: "", placeholder: "*********", value_name: "newPassword_2"},
+];
+
+const saveButton = button_blue_static({
+ url: "/profile",
+ text: "Сохранить",
+});
+
+export const showProfile = (edit = "") => {
+ if(edit === "edit") {
+ return Handlebars.compile(template_edit)({saveButton, params,name, svg_send: svg_send(28,28) });
+ } else if(edit === "password") {
+ return Handlebars.compile(template_edit_password)({saveButton, params: params_password,name, svg_send: svg_send(28,28) });
+ } else {
+ return Handlebars.compile(template)({ params,name, svg_send: svg_send(28,28) });
+ }
+}
+
diff --git a/src/pages/profile/profile.less b/src/pages/profile/profile.less
new file mode 100644
index 000000000..ef37055f8
--- /dev/null
+++ b/src/pages/profile/profile.less
@@ -0,0 +1,125 @@
+.page_profile {
+ display: flex;
+ flex-direction: row;
+ height: 100vh;
+
+ .button_back {
+ width: 64px;
+ height: 100%;
+ background-color: #FBFBFB;
+ border-right: 1px solid #EAEAEA;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background-color: #e8e5e5;
+ cursor: pointer;
+ }
+ }
+
+ .profile_content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .profile_logo {
+ background-color: #EFEFEF;
+ min-width: 130px;
+ min-height: 130px;
+ max-width: 130px;
+ border-radius: 50%;
+ margin-top: 60px;
+ margin-bottom: 21px;
+ }
+
+ .profile_name {
+ font-size: 16px;
+ color: #1E1E1E;
+ font-weight: 600;
+ }
+
+ .profile_params {
+ margin-top: 60px;
+
+ .profile_param {
+ margin-top: 10px;
+ width: 510px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #EAEAEA;
+
+ &_name {
+ color: #1E1E1E;
+ font-size: 13px;
+ font-weight: 600;
+ }
+ &_value {
+ color: #999999;
+ font-size: 13px;
+ }
+ &_value input {
+ color: #999999;
+ font-size: 13px;
+ border: none;
+ text-align: right;
+ }
+ }
+ }
+
+ .profile_buttons {
+ display: flex;
+ flex-direction: column;
+ margin-top: 60px;
+ align-items: center;
+
+ &_button {
+ margin-top: 10px;
+ padding-bottom: 10px;
+ width: 510px;
+ font-size: 13px;
+ color: #3369F3;
+ border-bottom: 1px solid #EAEAEA;
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ &_button__red {
+ border-bottom: none;
+ font-weight: 600;
+ color: #FF0000;
+ }
+ }
+
+ }
+
+ &__edit {
+ .profile_logo_input {
+ opacity: 0;
+ }
+ .profile_logo {
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ background-color: #000000;
+ &::before {
+ content: "Поменять аватар";
+ color: #fff;
+ font-weight: 600;
+ z-index: 1;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ text-align: center;
+ transform: translate(-50%, -50%);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/profile/profile.tmpl.js b/src/pages/profile/profile.tmpl.js
new file mode 100644
index 000000000..34581bdd9
--- /dev/null
+++ b/src/pages/profile/profile.tmpl.js
@@ -0,0 +1,30 @@
+export const template = `
+
+
+
+ {{{svg_send}}}
+
+
+
+
+
+
+
{{name}}
+
+
+ {{#each params}}
+
+
{{{this.name}}}
+
{{{this.value}}}
+
+ {{/each}}
+
+
+
+
+`
+
diff --git a/src/pages/profile/profile_edit.tmpl.js b/src/pages/profile/profile_edit.tmpl.js
new file mode 100644
index 000000000..cecbe9964
--- /dev/null
+++ b/src/pages/profile/profile_edit.tmpl.js
@@ -0,0 +1,37 @@
+export const template_edit = `
+
+
+
+ {{{svg_send}}}
+
+
+
+
+
+
+
+
+
+
+
{{name}}
+
+
+
+`
+
diff --git a/src/pages/profile/profile_edit_password.tmpl.js b/src/pages/profile/profile_edit_password.tmpl.js
new file mode 100644
index 000000000..b40451e61
--- /dev/null
+++ b/src/pages/profile/profile_edit_password.tmpl.js
@@ -0,0 +1,35 @@
+export const template_edit_password = `
+
+`
+
diff --git a/src/pages/register/register.js b/src/pages/register/register.js
new file mode 100644
index 000000000..5761f838e
--- /dev/null
+++ b/src/pages/register/register.js
@@ -0,0 +1,64 @@
+import Handlebars from "handlebars";
+import { template } from "./register.tmpl.js";
+import { button_blue } from "../../components/Button/buttons.js";
+import { input } from "../../components/Input/input.js";
+
+
+const title = "Регистрация";
+const registerButton = button_blue({
+ url: "/messages",
+ text: "Зарегистрироваться",
+});
+const inp_login = input({
+ text: "Логин",
+ type: "text",
+ name: "login",
+ placeholder: "ivanivavov",
+})
+
+const inp_email = input({
+ text: "Почта",
+ type: "text",
+ name: "email",
+ placeholder: "ivanivavov@gmail.com",
+})
+
+const inp_name = input({
+ text: "Имя",
+ type: "text",
+ name: "first_name",
+ placeholder: "Ivan",
+})
+
+const inp_last_name = input({
+ text: "Фамилия",
+ type: "text",
+ name: "second_name",
+ placeholder: "Ivanov",
+})
+
+const inp_phone = input({
+ text: "Телефон",
+ type: "tel",
+ name: "phone",
+ placeholder: "+7 (909) 967 30 30",
+})
+
+const inp_password = input({
+ text: "Пароль",
+ type: "password",
+ name: "password",
+ placeholder: "***************",
+})
+
+const inp_password_2 = input({
+ text: "Пароль (ещё раз)",
+ type: "password",
+ name: "password_2",
+ placeholder: "***************",
+})
+
+const inputs = [inp_email, inp_login, inp_name, inp_last_name,inp_phone, inp_password, inp_password_2];
+
+export const showRegister = () =>
+ Handlebars.compile(template)({ button: registerButton, title, inputs });
diff --git a/src/pages/register/register.tmpl.js b/src/pages/register/register.tmpl.js
new file mode 100644
index 000000000..aa6bfb841
--- /dev/null
+++ b/src/pages/register/register.tmpl.js
@@ -0,0 +1,18 @@
+export const template = `
+
+`
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 000000000..a796aa3a0
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,467 @@
+*:focus {
+ outline: none;
+}
+body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+}
+*:focus {
+ outline: none;
+}
+body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+}
+.messages {
+ display: flex;
+ height: 100vh;
+}
+.chats {
+ width: 24%;
+ border-right: 1px solid #EAEAEA;
+ min-width: 24%;
+ max-width: 24%;
+ overflow: hidden;
+}
+.chats .profile {
+ display: inline-block;
+ padding-right: 7.4%;
+ margin-top: 21px;
+ margin-bottom: 23px;
+ color: #999999;
+ font-size: 0.9375vw;
+ line-height: 0.9375vw;
+ text-align: right;
+ width: 100%;
+ box-sizing: border-box;
+ text-decoration: none;
+}
+.chats .profile:hover {
+ color: #726969;
+ text-decoration: underline;
+}
+.chats .search {
+ margin-left: 10px;
+ margin-right: 11px;
+ border-bottom: 1px solid #EAEAEA;
+ padding-bottom: 7px;
+}
+.chats .search input {
+ position: relative;
+ width: 100%;
+ background-color: #EFEFEF;
+ border-radius: 5px;
+ border: none;
+ height: 32px;
+ text-align: center;
+ font-size: 0.9375vw;
+ line-height: 0.9375vw;
+}
+.chat_list {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+}
+.chat {
+ display: flex;
+ justify-content: space-between;
+ margin-left: 10px;
+ padding-right: 10px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #EAEAEA;
+ padding-top: 12px;
+}
+.chat_active {
+ background-color: #E4EDFD;
+}
+.chat:hover {
+ background-color: #EFEFEF;
+ cursor: pointer;
+}
+.chat .image {
+ background-color: #EFEFEF;
+ width: 47px;
+ height: 47px;
+ border-radius: 50%;
+ margin-right: 10px;
+}
+.chat .data {
+ width: 77%;
+}
+.chat .name {
+ color: #1E1E1E;
+ font-size: 13px;
+ line-height: 13px;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+.chat .text {
+ color: #999999;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ font-size: 13px;
+ line-height: 15px;
+ width: 99%;
+}
+.chat .text b {
+ color: #1E1E1E;
+ font-size: 12px;
+ font-weight: 600;
+}
+.chat .info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+}
+.chat .info .date {
+ color: #999999;
+ font-size: 9px;
+}
+.chat .info .new {
+ width: 20px;
+ height: 20px;
+ background-color: #3369F3;
+ font-weight: 600;
+ color: #fff;
+ border-radius: 50%;
+ position: relative;
+}
+.chat .info .new p {
+ position: absolute;
+ font-size: 11px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 0;
+ margin: 0;
+}
+.content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.content .content_messages {
+ height: 100%;
+ display: flex;
+ flex-direction: column-reverse;
+}
+.content .chat_header {
+ position: relative;
+ margin-left: 20px;
+ margin-right: 20px;
+ height: 54px;
+ border-bottom: 1px solid #EAEAEA;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.content .chat_header .more {
+ position: absolute;
+ right: 11px;
+ top: 20px;
+ width: 10px;
+ padding-left: 10px;
+}
+.content .chat_header .more:hover {
+ cursor: pointer;
+}
+.content .chat_header .more:hover path {
+ color: red;
+ fill: #e80909;
+}
+.content .chat_header .chat_header_info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+.content .chat_header .chat_header_info .chat_header_name {
+ margin-left: 10px;
+ font-size: 13px;
+ font-weight: 600;
+}
+.content .chat_header .chat_header_info .image {
+ background-color: #EFEFEF;
+ width: 34px;
+ height: 34px;
+ border-radius: 50%;
+}
+.content .chat_bottom {
+ border-top: 1px solid #EAEAEA;
+ height: 54px;
+ margin-left: 20px;
+ margin-right: 20px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ box-sizing: border-box;
+ min-height: 54px;
+ max-height: 54px;
+ align-items: center;
+}
+.content .chat_bottom .file,
+.content .chat_bottom .send {
+ cursor: pointer;
+}
+.content .chat_bottom .file:hover,
+.content .chat_bottom .send:hover {
+ fill: red;
+}
+.content .chat_bottom .send_area {
+ border-radius: 30px;
+ font-size: 12px;
+ color: #999999;
+ padding: 10px 20px;
+ background-color: #EFEFEF;
+ width: 100%;
+ margin-right: 10px;
+ margin-left: 10px;
+ border: none;
+}
+.content .content_messages_message {
+ display: flex;
+ flex-direction: column-reverse;
+ margin-bottom: 30px;
+ margin-left: 20px;
+ padding: 11px;
+ max-width: 50%;
+ min-width: 404px;
+ background-color: #F8F8F8;
+ border-top-right-radius: 10px;
+ border-bottom-right-radius: 10px;
+ position: relative;
+}
+.content .content_messages_message .time {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ color: #999999;
+ font-size: 9px;
+}
+.page_profile {
+ display: flex;
+ flex-direction: row;
+ height: 100vh;
+}
+.page_profile .button_back {
+ width: 64px;
+ height: 100%;
+ background-color: #FBFBFB;
+ border-right: 1px solid #EAEAEA;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.page_profile .button_back:hover {
+ background-color: #e8e5e5;
+ cursor: pointer;
+}
+.page_profile .profile_content {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.page_profile .profile_content .profile_logo {
+ background-color: #EFEFEF;
+ min-width: 130px;
+ min-height: 130px;
+ max-width: 130px;
+ border-radius: 50%;
+ margin-top: 60px;
+ margin-bottom: 21px;
+}
+.page_profile .profile_content .profile_name {
+ font-size: 16px;
+ color: #1E1E1E;
+ font-weight: 600;
+}
+.page_profile .profile_content .profile_params {
+ margin-top: 60px;
+}
+.page_profile .profile_content .profile_params .profile_param {
+ margin-top: 10px;
+ width: 510px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #EAEAEA;
+}
+.page_profile .profile_content .profile_params .profile_param_name {
+ color: #1E1E1E;
+ font-size: 13px;
+ font-weight: 600;
+}
+.page_profile .profile_content .profile_params .profile_param_value {
+ color: #999999;
+ font-size: 13px;
+}
+.page_profile .profile_content .profile_params .profile_param_value input {
+ color: #999999;
+ font-size: 13px;
+ border: none;
+ text-align: right;
+}
+.page_profile .profile_content .profile_buttons {
+ display: flex;
+ flex-direction: column;
+ margin-top: 60px;
+ align-items: center;
+}
+.page_profile .profile_content .profile_buttons_button {
+ margin-top: 10px;
+ padding-bottom: 10px;
+ width: 510px;
+ font-size: 13px;
+ color: #3369F3;
+ border-bottom: 1px solid #EAEAEA;
+ text-decoration: none;
+}
+.page_profile .profile_content .profile_buttons_button:hover {
+ text-decoration: underline;
+}
+.page_profile .profile_content .profile_buttons_button__red {
+ border-bottom: none;
+ font-weight: 600;
+ color: #FF0000;
+}
+.page_profile__edit .profile_logo_input {
+ opacity: 0;
+}
+.page_profile__edit .profile_logo {
+ position: relative;
+ cursor: pointer;
+}
+.page_profile__edit .profile_logo:hover {
+ background-color: #000000;
+}
+.page_profile__edit .profile_logo:hover::before {
+ content: "Поменять аватар";
+ color: #fff;
+ font-weight: 600;
+ z-index: 1;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ text-align: center;
+ transform: translate(-50%, -50%);
+}
+.error_page {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ justify-content: flex-start;
+}
+.error_page h1 {
+ font-size: 120px;
+ color: #1E1E1E;
+ margin-top: 150px;
+ margin-bottom: 50px;
+}
+.error_page p {
+ font-size: 20px;
+ color: #1E1E1E;
+}
+.error_page a {
+ color: #3369F3;
+ font-size: 24px;
+ position: absolute;
+ bottom: 50%;
+ transform: translateY(-50%);
+ text-decoration: none;
+}
+.error_page a:hover {
+ color: #2a56c5;
+}
+.rotate_svg_180 > svg {
+ transform: rotate(180deg);
+}
+.form {
+ width: 340px;
+ height: 450px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 12px;
+ /* shadow */
+ -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+ -moz-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+ box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+}
+.form a {
+ font-size: 11px;
+ color: #3369F3;
+ text-align: center;
+ position: absolute;
+ bottom: 30px;
+ text-decoration: none;
+ width: 100%;
+}
+.form a:hover {
+ text-decoration: underline;
+}
+.form h1 {
+ color: #1E1E1E;
+ font-size: 20px;
+ line-height: 20px;
+ text-align: center;
+ margin-top: 50px;
+ margin-bottom: 40px;
+}
+.from__high {
+ height: 615px;
+}
+.inputs .input {
+ margin-left: 30px;
+ margin-right: 30px;
+ border-bottom: 1px solid #3369F3;
+ margin-top: 16px;
+ height: 36px;
+}
+.inputs .input .name {
+ color: #999999;
+ font-size: 9px;
+ line-height: 9px;
+ margin-bottom: 8px;
+}
+.inputs .input input {
+ color: #1E1E1E;
+ font-size: 13px;
+ margin-bottom: 7px;
+ border: none;
+ width: 100%;
+ font-weight: 600;
+ height: 13px;
+ padding: 0;
+}
+.button {
+ cursor: pointer;
+ margin-left: 30px;
+ width: 280px;
+ height: 37px;
+ border: none;
+ border-radius: 13px;
+ background-color: #7CDC85;
+ color: #FFFFFF;
+ font-size: 13px;
+}
+.button:hover {
+ background-color: #66bb6e;
+}
+.button__absolute {
+ position: absolute;
+ bottom: 55px;
+}
+.button__blue {
+ background-color: #466FDA;
+}
+/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/src/style.css.map b/src/style.css.map
new file mode 100644
index 000000000..b09872ec3
--- /dev/null
+++ b/src/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.less","pages/messages/messages.less","pages/profile/profile.less","pages/errors/style.less"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/src/style.less b/src/style.less
new file mode 100644
index 000000000..6fb9c63dd
--- /dev/null
+++ b/src/style.less
@@ -0,0 +1,114 @@
+*:focus {
+ outline: none;
+}
+
+body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+}
+
+// imports
+@import "./pages/messages/messages.less";
+@import "./pages/profile/profile.less";
+@import "./pages/errors/style.less";
+
+.rotate_svg_180 > svg {
+ transform: rotate(180deg);
+}
+
+.form {
+ width: 340px;
+ height: 450px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 12px;
+
+ /* shadow */
+ -webkit-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+ -moz-box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+ box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
+
+ a {
+ font-size: 11px;
+ color: #3369F3;
+ text-align: center;
+ position: absolute;
+ bottom: 30px;
+ text-decoration: none;
+ width: 100%;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ h1 {
+ color: #1E1E1E;
+ font-size: 20px;
+ line-height: 20px;
+ text-align: center;
+ margin-top: 50px;
+ margin-bottom: 40px;
+ }
+}
+
+.from__high {
+ height: 615px;
+}
+
+.inputs {
+
+ .input {
+ margin-left: 30px;
+ margin-right: 30px;
+ border-bottom: 1px solid #3369F3;
+ margin-top: 16px;
+ height: 36px;
+
+ .name {
+ color: #999999;
+ font-size: 9px;
+ line-height: 9px;
+ margin-bottom: 8px;
+ }
+
+ input {
+ color: #1E1E1E;
+ font-size: 13px;
+ margin-bottom: 7px;
+ border: none;
+ width: 100%;
+ font-weight: 600;
+ height: 13px;
+ padding: 0;
+ }
+ }
+}
+
+.button {
+ cursor: pointer;
+ margin-left: 30px;
+ width: 280px;
+ height: 37px;
+ border: none;
+ border-radius: 13px;
+ background-color: #7CDC85;
+ color: #FFFFFF;
+ font-size: 13px;
+
+ &:hover {
+ background-color: #66bb6e;
+ }
+}
+
+
+.button__absolute {
+ position: absolute;
+ bottom: 55px;
+}
+
+.button__blue {
+ background-color: #466FDA;
+}
\ No newline at end of file
diff --git a/src/units/mydash/util.js b/src/units/mydash/util.js
new file mode 100644
index 000000000..77389a93c
--- /dev/null
+++ b/src/units/mydash/util.js
@@ -0,0 +1,82 @@
+function identity(value) {
+ return value;
+}
+
+function rangeRight(start, end, step) {
+ return range(start, end, step, true);
+}
+
+function range(start, end, step, isRight) {
+ let newArr = [];
+ if(start !== undefined && end === undefined && step === undefined) {
+ if(start < 0) {
+ for (let p = 0; p > start; p--) {
+ newArr.push(p);
+ }
+ } else {
+ for (let p = 0; p < start; p++) {
+ newArr.push(p);
+ }
+ }
+
+ return isRight ? newArr.reverse() : newArr;
+ } else if(start !== undefined && end !== undefined && step === undefined) {
+ for (let p = start; p < end; p++) {
+ newArr.push(p);
+ }
+ return isRight ? newArr.reverse() : newArr;
+ } else if(start !== undefined && end !== undefined && step !== undefined) {
+ for (let p = start; p < end; p+=step) {
+ newArr.push(p);
+ }
+ return isRight ? newArr.reverse() : newArr;
+ } else {
+ return [];
+ }
+}
+
+
+function last(arr) {
+ if(arr.length > 0)
+ return arr[arr.length - 1];
+
+ return undefined;
+}
+
+function first(arr) {
+ if(arr.length > 0)
+ return arr[0];
+
+ return undefined;
+}
+
+function isEmpty(value) {
+ if(value !== undefined && value !== null) {
+ if(Array.isArray(value)) {
+ return false;
+ } else if(typeof value === "object" && Object.keys(value).length > 0) {
+ return false;
+ } else if(typeof value === "string" && value !== "") {
+ return false;
+ } else if((value.constructor === Map || value.constructor === Set) && value.size > 0) {
+ return false;
+ }
+ }
+
+ return true;
+}
+
+
+
+console.log(isEmpty(null)); // => true
+console.log(isEmpty(true)); // => true
+console.log(isEmpty(1)); // => true
+console.log(isEmpty([1, 2, 3])); // => false
+console.log(isEmpty({ 'a': 1 })); // => false
+console.log(isEmpty('123')); // => false
+console.log(isEmpty(123)); // => true
+console.log(isEmpty('')); // => true
+console.log(isEmpty(0)); // => true
+console.log(isEmpty(undefined)); // => true
+console.log(isEmpty(new Map([['1', 'str1'], [1, 'num1'], [true, 'bool1']]))); // => false
+console.log(isEmpty(new Set(['value1', 'value2', 'value3']))); // => false
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 000000000..b6bb4e2d2
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,24 @@
+import {defineConfig} from 'vite'
+import handlebars from 'vite-plugin-handlebars';
+
+
+export default defineConfig({
+ root: "./src",
+ build: {
+ rollupOptions: {
+ input: './src/index.html',
+ output:
+ {
+ format: 'es',
+ strict: false,
+ dir: 'dist/',
+ entryFileNames: `assets/[name].js`,
+ chunkFileNames: `assets/[name].js`,
+ assetFileNames: `assets/[name].[ext]`,
+ }
+ }
+ },
+ plugins: [
+ handlebars(),
+ ],
+})
\ No newline at end of file