+`
diff --git a/src/components/title/index.ts b/src/components/title/index.ts
new file mode 100644
index 000000000..463181e71
--- /dev/null
+++ b/src/components/title/index.ts
@@ -0,0 +1,11 @@
+import HandleBars from "handlebars";
+import {title} from "./title.tmpl.ts";
+
+type TitleProps = {
+ title: string | number,
+}
+export const Title = (props: TitleProps) => {
+ return HandleBars.compile(title)({
+ title: props.title
+ })
+}
diff --git a/src/components/title/title.tmpl.ts b/src/components/title/title.tmpl.ts
new file mode 100644
index 000000000..afc2766fd
--- /dev/null
+++ b/src/components/title/title.tmpl.ts
@@ -0,0 +1,3 @@
+export const title = `
+
+ 
+ Alexandr Ivanov
+
+
+ Alexandr Ivanov
+ 
'
+ }),
+ linkToAuth: Link({
+ to: '/sign-in',
+ content: '
'
+ }),
+ title: Title({
+ title: "Music"
+ }),
+ input: Input(chatField),
+ });
+}
diff --git a/src/pages/chat/tmpl/content.tmpl.ts b/src/pages/chat/tmpl/content.tmpl.ts
new file mode 100644
index 000000000..e713f0837
--- /dev/null
+++ b/src/pages/chat/tmpl/content.tmpl.ts
@@ -0,0 +1,31 @@
+export const content = `
+
+
+
+
+
+ {{{logo}}}
+
+
+
+ 
+ {{{linkToSettings}}}
+ 
+ {{{linkToAuth}}}
+
+
+ {{{linkToSettings}}}
+
+ {{{linkToAuth}}}
+
+
+
+
+
+
+`
diff --git a/src/pages/error/not-found/index.ts b/src/pages/error/not-found/index.ts
new file mode 100644
index 000000000..b7b663b7c
--- /dev/null
+++ b/src/pages/error/not-found/index.ts
@@ -0,0 +1,12 @@
+import HandleBars from "handlebars";
+import {content} from "./tmpl/content.tmpl.ts";
+import {Link} from "../../../components/link";
+
+export const NotFoundPage = () => {
+ return HandleBars.compile(content)({
+ chatPageLink: Link({
+ to: '/chats',
+ content: 'назад к чатам'
+ })
+ });
+}
diff --git a/src/pages/error/not-found/tmpl/content.tmpl.ts b/src/pages/error/not-found/tmpl/content.tmpl.ts
new file mode 100644
index 000000000..1a8c58fe8
--- /dev/null
+++ b/src/pages/error/not-found/tmpl/content.tmpl.ts
@@ -0,0 +1,8 @@
+export const content = `
+
+
+`
diff --git a/src/pages/error/server-error/index.ts b/src/pages/error/server-error/index.ts
new file mode 100644
index 000000000..be83892f4
--- /dev/null
+++ b/src/pages/error/server-error/index.ts
@@ -0,0 +1,16 @@
+import HandleBars from "handlebars";
+import {content} from "./tmpl/content.tmpl.ts";
+import {Link} from "../../../components/link";
+import {Title} from "../../../components/title";
+
+export const ServerErrorPage = () => {
+ return HandleBars.compile(content)({
+ title: Title({
+ title: '500'
+ }),
+ chatPageLink: Link({
+ to: '/chats',
+ content: 'назад к чатам'
+ })
+ });
+}
diff --git a/src/pages/error/server-error/tmpl/content.tmpl.ts b/src/pages/error/server-error/tmpl/content.tmpl.ts
new file mode 100644
index 000000000..551ee9019
--- /dev/null
+++ b/src/pages/error/server-error/tmpl/content.tmpl.ts
@@ -0,0 +1,9 @@
+export const content = `
+
+ 
+ {{{ chatPageLink }}}
+
+
+ {{{ chatPageLink }}}
+
+
+`
diff --git a/src/pages/settings/index.ts b/src/pages/settings/index.ts
new file mode 100644
index 000000000..4a3a123a6
--- /dev/null
+++ b/src/pages/settings/index.ts
@@ -0,0 +1,43 @@
+import HandleBars from "handlebars";
+import {settings} from "./tmpl/settings.tmpl.ts";
+import {Logo} from "../../components/logo";
+import {Link} from "../../components/link";
+import {Button} from "../../components/button";
+import {Input, InputProps} from "../../components/input";
+
+const signUpFieldList =
+ [
+ {
+ placeholder: 'first name',
+ type: 'text'
+ },
+ {
+ placeholder: 'second name',
+ type: 'text'
+ },
+ {
+ placeholder: 'display name',
+ type: 'text'
+ },
+ {
+ placeholder: 'login',
+ type: 'text'
+ },
+ {
+ placeholder: 'email',
+ type: 'email'
+ },
+ {
+ placeholder: 'phone',
+ type: 'phone'
+ },
+
+ ] as InputProps
+export const SettingsPage = () => {
+ return HandleBars.compile(settings)({
+ logo: Logo(),
+ authPageLink: Link({to: '/sign-in', content: 'or Sign In'}),
+ button: Button({text: 'Save'}),
+ input: Input(signUpFieldList),
+ })
+}
diff --git a/src/pages/settings/tmpl/settings.tmpl.ts b/src/pages/settings/tmpl/settings.tmpl.ts
new file mode 100644
index 000000000..836c93ad3
--- /dev/null
+++ b/src/pages/settings/tmpl/settings.tmpl.ts
@@ -0,0 +1,20 @@
+export const settings = `
+
+ {{{ title }}}
+ Мы уже фиксим) еще немного
+ {{{ chatPageLink }}}
+
+
+
+ {{{ logo }}}
+
+
+`
diff --git a/src/pages/sign-in/index.ts b/src/pages/sign-in/index.ts
new file mode 100644
index 000000000..423a50d4e
--- /dev/null
+++ b/src/pages/sign-in/index.ts
@@ -0,0 +1,30 @@
+import HandleBars from 'handlebars';
+
+import { Link } from "../../components/link"
+import {Title} from "../../components/title";
+import {Logo} from "../../components/logo";
+import {content} from "./tmpl/content.tmpl.ts";
+import {Input, InputProps} from "../../components/input";
+import {Button} from "../../components/button";
+
+const signInFieldList =
+ [
+ {
+ placeholder: 'login',
+ type: 'text'
+ },
+ {
+ placeholder: 'password',
+ type: 'password'
+ },
+
+ ] as InputProps
+export const SignInPage = () => {
+ return HandleBars.compile(content)({
+ logo: Logo(),
+ signUpPageLink: Link({to: '/sign-up', content: 'or Sign Up'}),
+ title: Title({title: 'Log In'}),
+ input: Input(signInFieldList),
+ button: Button({text: 'Enter'})
+ });
+}
diff --git a/src/pages/sign-in/tmpl/content.tmpl.ts b/src/pages/sign-in/tmpl/content.tmpl.ts
new file mode 100644
index 000000000..af2a4fa94
--- /dev/null
+++ b/src/pages/sign-in/tmpl/content.tmpl.ts
@@ -0,0 +1,17 @@
+ export const content = `
+
+
+
+ 
+ 
+ avatar
+
+
+
+ {{{ authPageLink }}}
+
+
+ avatar
+
+
+ {{{ logo }}}
+
+
+
+ `
diff --git a/src/pages/sign-up/index.ts b/src/pages/sign-up/index.ts
new file mode 100644
index 000000000..926169bf4
--- /dev/null
+++ b/src/pages/sign-up/index.ts
@@ -0,0 +1,46 @@
+import HandleBars from "handlebars";
+import {content} from "./tmpl/content.tmpl.ts";
+import {Logo} from "../../components/logo";
+import {Link} from "../../components/link";
+import {Title} from "../../components/title";
+import {Input, InputProps} from "../../components/input";
+import {Button} from "../../components/button";
+
+const signUpFieldList =
+ [
+ {
+ placeholder: "first name",
+ type: 'text'
+ },
+ {
+ placeholder: 'second name',
+ type: 'text'
+ },
+ {
+ placeholder: 'login',
+ type: 'text'
+ },
+ {
+ placeholder: 'email',
+ type: 'email'
+ },
+ {
+ placeholder: 'phone',
+ type: 'phone'
+ },
+ {
+ placeholder: 'password(min.6 charact.)',
+ type: 'password'
+ },
+
+ ] as InputProps
+
+export const SignUpPage = () => {
+ return HandleBars.compile(content)({
+ logo: Logo(),
+ signUpPageLink: Link({to: '/sign-in', content: 'or Sign In'}),
+ title: Title({title: 'Let`s get started!'}),
+ input: Input(signUpFieldList),
+ button: Button({text: 'Create account'})
+ });
+}
diff --git a/src/pages/sign-up/tmpl/content.tmpl.ts b/src/pages/sign-up/tmpl/content.tmpl.ts
new file mode 100644
index 000000000..ddf3b904d
--- /dev/null
+++ b/src/pages/sign-up/tmpl/content.tmpl.ts
@@ -0,0 +1,17 @@
+export const content = `
+
+
+
+ {{{ signUpPageLink }}}
+
+
+
+ {{{ logo }}}
+
+
+
+`
diff --git a/src/style.sass b/src/style.sass
new file mode 100644
index 000000000..50a6b087c
--- /dev/null
+++ b/src/style.sass
@@ -0,0 +1,186 @@
+$background-color: #101E2B
+$width: 100%
+$height: 100%
+$white: #ffffff
+$regular: 14px
+$weight-regular: 400
+$indent-x2: 8px
+$border-radius-x2: 8px
+
+
+html,
+body
+ margin: 0
+ padding: 0
+ border: 0
+ outline: 0
+ min-height: $height
+
+body
+ font-family: Roboto, Arial, sans-serif
+ font-weight: $weight-regular
+ font-size: $regular
+
+div
+ box-sizing: border-box
+
+::-webkit-input-placeholder,
+::-moz-placeholder
+ color: #AB9F9F
+
+.input-styled
+ border: 1px solid rgba(0, 0, 0, 0.10)
+ border-radius: $border-radius-x2
+ padding: 20px
+
+.button-styled
+ border: none
+ border-radius: $border-radius-x2
+ padding: 20px
+ width: 100%
+ color: $white
+ background-color: #218FCD
+ font-size: 20px
+ font-weight: $weight-regular
+ cursor: pointer
+
+.link-styled
+ text-decoration: none
+
+.wrapper-chats-page
+ height: 100vh
+ width: $width
+ background-color: #0A151F
+
+ .header
+ height: 60px
+ background-color: $background-color
+ display: flex
+ align-items: center
+ justify-content: space-between
+ padding: 0 40px
+
+ .header-content-right,
+ .header-content-left,
+ .input-search-label
+ display: flex
+ align-items: center
+ gap: 20px
+
+ .header-content-right
+ .arrow-exit,
+ .settings-styled
+ cursor: pointer
+
+ .header-content-left
+ .logo
+ filter: sepia(100%) hue-rotate(190deg) saturate(500%)
+
+ .input-search-label
+ gap: $indent-x2
+
+ .input-styled
+ background: transparent
+ border: none
+ outline: none
+ color: $white
+
+ .wrapper-chats
+ padding: 40px
+ display: grid
+ gap: 30px
+ grid-template-columns: 280px auto
+ height: 95%
+
+ .preview-chats,
+ .main-chats
+ background-color: $background-color
+ border-radius: 10px
+ padding: 15px 20px
+
+ .preview-chats
+ .title-styled
+ color: $white
+ font-size: 20px
+ font-weight: 700
+ margin: 0
+
+ .main-chats
+ &-header
+ display: flex
+ align-items: center
+ gap: $indent-x2
+ color: $white
+ font-size: $regular
+ font-weight: 700
+
+.wrapper-sign-in-page,
+.wrapper-sign-up-page,
+.wrapper-settings-page,
+.wrapper-not-found-page,
+.wrapper-server-error-page
+ display: flex
+ justify-content: center
+ text-align: center
+ align-items: center
+ height: 100vh
+ position: relative
+
+ .wrapper-content
+ width: 360px
+ .fields-list
+ display: flex
+ flex-direction: column
+ gap: $indent-x2
+ margin-bottom: 20px
+ .title-styled
+ color: #504D4D
+ font-size: 36px
+ font-weight: $weight-regular
+ .link-styled
+ color: #ABABAB
+
+ .form
+ margin-bottom: 20px
+
+ .wrapper-avatar
+ font-size: 16px
+ color: #A5A7A9
+ font-weight: $weight-regular
+ margin-bottom: 20px
+
+ .header
+ height: 60px
+ padding: 0 40px
+ position: absolute
+ top: 0
+ left: 0
+ margin-top: 40px
+
+
+.wrapper-not-found-page
+ .wrapper-content
+ width: 600px
+ img
+ margin-bottom: 25px
+
+.wrapper-server-error-page
+ .wrapper-content
+ display: flex
+ flex-direction: column
+ width: 500px
+ .title-styled
+ font-size: 64px
+ font-weight: $weight-regular
+ margin-bottom: 35px
+ span
+ font-size: 20px
+ color: #8F8989
+ font-weight: $weight-regular
+ margin-bottom: 25px
+
+
+
+
+
+
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+ {{{ signUpPageLink }}}
+
+