first commit

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,24 @@
+# hookah
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

android/.gitignore

@@ -0,0 +1,101 @@
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
+
+# Built application files
+*.apk
+*.aar
+*.ap_
+*.aab
+
+# Files for the ART/Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# IntelliJ
+*.iml
+.idea/workspace.xml
+.idea/tasks.xml
+.idea/gradle.xml
+.idea/assetWizardSettings.xml
+.idea/dictionaries
+.idea/libraries
+# Android Studio 3 in .gitignore file.
+.idea/caches
+.idea/modules.xml
+# Comment next line if keeping position of elements in Navigation Editor is relevant for you
+.idea/navEditor.xml
+
+# Keystore files
+# Uncomment the following lines if you do not want to check your keystore files in.
+#*.jks
+#*.keystore
+
+# External native build folder generated in Android Studio 2.2 and later
+.externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
+
+# Freeline
+freeline.py
+freeline/
+freeline_project_description.json
+
+# fastlane
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+fastlane/test_output
+fastlane/readme.md
+
+# Version control
+vcs.xml
+
+# lint
+lint/intermediates/
+lint/generated/
+lint/outputs/
+lint/tmp/
+# lint/reports/
+
+# Android Profiling
+*.hprof
+
+# Cordova plugins for Capacitor
+capacitor-cordova-android-plugins
+
+# Copied web assets
+app/src/main/assets/public
+
+# Generated Config files
+app/src/main/assets/capacitor.config.json
+app/src/main/assets/capacitor.plugins.json
+app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -0,0 +1,2 @@
+/build/*
+!/build/.npmkeep

android/app/build.gradle

@@ -0,0 +1,53 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+    defaultConfig {
+        applicationId "ho.ooo.ka"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+        aaptOptions {
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+repositories {
+    flatDir{
+        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
+    }
+}
+
+dependencies {
+    implementation fileTree(include: ['*.jar'], dir: 'libs')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
+    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
+    implementation project(':capacitor-android')
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+    implementation project(':capacitor-cordova-android-plugins')
+}
+
+apply from: 'capacitor.build.gradle'
+
+try {
+    def servicesJSON = file('google-services.json')
+    if (servicesJSON.text) {
+        apply plugin: 'com.google.gms.google-services'
+    }
+} catch(Exception e) {
+    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
+}

android/app/capacitor.build.gradle

@@ -0,0 +1,19 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+
+android {
+  compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+  }
+}
+
+apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
+dependencies {
+
+
+}
+
+
+if (hasProperty('postBuildExtras')) {
+  postBuildExtras()
+}

android/app/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import android.content.Context;
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.platform.app.InstrumentationRegistry;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
+}

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="ho.ooo.ka">
+
+    <application
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+
+        <activity
+            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
+            android:name="ho.ooo.ka.MainActivity"
+            android:label="@string/title_activity_main"
+            android:theme="@style/AppTheme.NoActionBarLaunch"
+            android:launchMode="singleTask"
+            android:exported="true">
+
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+
+        </activity>
+
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.fileprovider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/file_paths"></meta-data>
+        </provider>
+    </application>
+
+    <!-- Permissions -->
+
+    <uses-permission android:name="android.permission.INTERNET" />
+</manifest>

android/app/src/main/java/ho/ooo/ka/MainActivity.java

@@ -0,0 +1,5 @@
+package ho.ooo.ka;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,34 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeColor="#00000000"
+        android:strokeWidth="1" />
+</vector>

android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108">
+    <path
+        android:fillColor="#26A69A"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeColor="#33FFFFFF"
+        android:strokeWidth="0.8" />
+</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <WebView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent" />
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

android/app/src/main/res/values/strings.xml

@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8'?>
+<resources>
+    <string name="app_name">hookah</string>
+    <string name="title_activity_main">hookah</string>
+    <string name="package_name">ho.ooo.ka</string>
+    <string name="custom_url_scheme">ho.ooo.ka</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:background">@null</item>
+    </style>
+
+
+    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
+        <item name="android:background">@drawable/splash</item>
+    </style>
+</resources>

android/app/src/main/res/xml/file_paths.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <external-path name="my_images" path="." />
+    <cache-path name="my_cache_images" path="." />
+</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -0,0 +1,18 @@
+package com.getcapacitor.myapp;
+
+import static org.junit.Assert.*;
+
+import org.junit.Test;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/build.gradle

@@ -0,0 +1,29 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:7.2.1'
+        classpath 'com.google.gms:google-services:4.3.13'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+apply from: "variables.gradle"
+
+allprojects {
+    repositories {
+        google()
+        mavenCentral()
+    }
+}
+
+task clean(type: Delete) {
+    delete rootProject.buildDir
+}

android/capacitor.settings.gradle

@@ -0,0 +1,3 @@
+// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
+include ':capacitor-android'
+project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -0,0 +1,24 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+org.gradle.jvmargs=-Xmx1536m
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists

android/gradlew

@@ -0,0 +1,234 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
+
+APP_NAME="Gradle"
+APP_BASE_NAME=${0##*/}
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+# Collect all arguments for the java command;
+#   * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
+#     shell script including quotes and variable substitutions, so put them in
+#     double quotes to make sure that they get re-expanded; and
+#   * put everything else in single quotes, so that it's not re-expanded.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        org.gradle.wrapper.GradleWrapperMain \
+        "$@"
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -0,0 +1,89 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/settings.gradle

@@ -0,0 +1,5 @@
+include ':app'
+include ':capacitor-cordova-android-plugins'
+project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
+
+apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -0,0 +1,16 @@
+ext {
+    minSdkVersion = 22
+    compileSdkVersion = 32
+    targetSdkVersion = 32
+    androidxActivityVersion = '1.4.0'
+    androidxAppCompatVersion = '1.4.2'
+    androidxCoordinatorLayoutVersion = '1.2.0'
+    androidxCoreVersion = '1.8.0'
+    androidxFragmentVersion = '1.4.1'
+    coreSplashScreenVersion = '1.0.0-rc01'
+    androidxWebkitVersion = '1.4.0'
+    junitVersion = '4.13.2'
+    androidxJunitVersion = '1.1.3'
+    androidxEspressoCoreVersion = '3.4.0'
+    cordovaAndroidVersion = '10.1.1'
+}

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

capacitor.config.ts

@@ -0,0 +1,10 @@
+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'ho.ooo.ka',
+  appName: 'hookah',
+  webDir: 'dist',
+  bundledWebRuntime: false
+};
+
+export default config;

package.json

@@ -0,0 +1,66 @@
+{
+    "name": "hookah",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "deploy": "upload-script.bat"
+    },
+    "dependencies": {
+        "@capacitor/android": "^4.6.2",
+        "@capacitor/cli": "^4.6.2",
+        "@capacitor/core": "^4.6.2",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
+        "@fortawesome/vue-fontawesome": "^3.0.0-5",
+        "core-js": "^3.8.3",
+        "pinia": "^2.0.13",
+        "vue": "^3.2.13",
+        "vue-router": "^4.0.3"
+    },
+    "devDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.4.0",
+        "@typescript-eslint/parser": "^5.4.0",
+        "@vue/cli-plugin-babel": "~5.0.0",
+        "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
+        "@vue/cli-plugin-typescript": "~5.0.0",
+        "@vue/cli-service": "~5.0.0",
+        "@vue/eslint-config-typescript": "^9.1.0",
+        "eslint": "^7.32.0",
+        "eslint-plugin-vue": "^8.0.3",
+        "sass": "^1.32.7",
+        "sass-loader": "^12.0.0",
+        "typescript": "~4.5.5",
+        "vue-cli-plugin-pinia": "^0.1.2"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/vue3-essential",
+            "eslint:recommended",
+            "@vue/typescript/recommended"
+        ],
+        "parserOptions": {
+            "ecmaVersion": 2020
+        },
+        "rules": {},
+        "globals": {
+            "defineProps": "readonly",
+            "defineEmits": "readonly",
+            "defineExpose": "readonly",
+            "withDefaults": "readonly"
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead",
+        "not ie 11"
+    ]
+}

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+        <title><%= htmlWebpackPlugin.options.title %></title>
+    </head>
+    <body>
+        <noscript>
+            <strong>
+                We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to
+                continue.
+            </strong>
+        </noscript>
+        <div id="app" class="app"></div>
+    </body>
+</html>

src/App.vue

@@ -0,0 +1,123 @@
+<template>
+    <RouterView />
+    <div id="modals"></div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore, useUIStore } from "@/store";
+
+const userStore = useUserStore();
+const uiStore = useUIStore();
+
+init();
+function init() {
+    userStore.loadData();
+
+    const savedTheme = localStorage.getItem("theme");
+    if (savedTheme) {
+        uiStore.setTheme(savedTheme);
+    } else {
+        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            uiStore.setTheme("dark");
+        } else {
+            uiStore.setTheme("light");
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import "@/styles/themes.scss";
+
+html,
+body {
+    height: 100%;
+}
+html {
+    font-size: 2vw;
+
+    @media (min-width: 500px) {
+        font-size: 10px;
+    }
+}
+body {
+    background: color("main-background");
+
+    font-size: r(22);
+    font-family: Roboto, sans-serif;
+    font-weight: normal;
+    color: color("main-color");
+
+    @media (min-width: 500px) {
+        width: 500px;
+        margin: 0 auto;
+        border: 1px solid grey;
+    }
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.fa-icon {
+    width: 100%;
+    height: 100%;
+}
+
+.app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    &__view {
+        $__view: &;
+        position: relative;
+        flex: 1;
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        &--transition-direction {
+            &--left {
+                #{$__view}--transition {
+                    &-enter-from {
+                        transform: translateX(-100vw);
+                    }
+                    &-leave-to {
+                        transform: translateX(100vw);
+                    }
+                }
+            }
+
+            &--right {
+                #{$__view}--transition {
+                    &-enter-from {
+                        transform: translateX(100vw);
+                    }
+                    &-leave-to {
+                        transform: translateX(-100vw);
+                    }
+                }
+            }
+        }
+
+        &--transition {
+            &-enter-active,
+            &-leave-active {
+                transition: all 0.18s linear;
+            }
+        }
+    }
+
+    &__navigation-bar {
+        flex: 0 1;
+    }
+}
+</style>

src/components.d.ts

@@ -0,0 +1,19 @@
+// components.d.ts
+declare module "@vue/runtime-core" {
+    export interface GlobalComponents {
+        RouterLink: typeof import("vue-router")["RouterLink"];
+        RouterView: typeof import("vue-router")["RouterView"];
+        Component: typeof import("vue")["component"];
+        FontAwesomeIcon: typeof import("@fortawesome/vue-fontawesome")["FontAwesomeIcon"];
+        FontAwesomeLayers: typeof import("@fortawesome/vue-fontawesome")["FontAwesomeLayers"];
+        InputComp: typeof import("@/components/UI/InputComp.vue");
+        InputFileComp: typeof import("@/components/UI/InputFileComp.vue");
+        ButtonComp: typeof import("@/components/UI/ButtonComp.vue");
+        ImageComp: typeof import("@/components/UI/ImageComp.vue");
+        ModalComp: typeof import("@/components/UI/ModalComp.vue");
+        SliderComp: typeof import("@/components/UI/Slider/SliderComp.vue");
+        SliderTabComp: typeof import("@/components/UI/Slider/SliderTabComp.vue");
+    }
+}
+
+export {};

src/components/Authorization/AuthorizationMain.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="authorization">
+        <div class="authorization__head">
+            <FontAwesomeIcon class="authorization__head-link" icon="chevron-left" @click="goToMain()" />
+            <div class="authorization__head-text" v-if="isLogin">Вход</div>
+            <div class="authorization__head-text" v-else>Регистрация</div>
+        </div>
+
+        <div class="authorization__content" v-if="isLogin">
+            <InputComp type="email" placeholder="Ваш email" :hasWarning="fieldHasErrors('Email')" v-model="dataLogin.email" />
+            <InputComp type="password" placeholder="Пароль" :hasWarning="fieldHasErrors('Пароль')" v-model="dataLogin.password" />
+
+            <ButtonComp class="authorization__button" value="Войти" type="primary" @click="submit()" />
+            <div class="authorization__toggler">
+                Ещё нет аккаунта?
+                <span class="authorization__toggler-link" @click="toggleType()">Зарегистрироваться</span>
+            </div>
+        </div>
+
+        <div class="authorization__content" v-else>
+            <SwitchableImage class="authorization__photo" :value="dataRegister.image" :edited="true" @change="setRegisterImage" />
+            <InputComp type="text" placeholder="Ваше имя *" :hasWarning="fieldHasErrors('Имя')" v-model="dataRegister.name" />
+            <InputComp type="text" placeholder="Ваша фамилия *" :hasWarning="fieldHasErrors('Фамилия')" v-model="dataRegister.surname" />
+            <InputComp type="email" placeholder="Ваш email *" :hasWarning="fieldHasErrors('Email')" v-model="dataRegister.email" />
+            <InputComp type="password" placeholder="Пароль *" :hasWarning="fieldHasErrors('Пароль')" v-model="dataRegister.password" />
+            <InputComp
+                type="password"
+                placeholder="Повторите пароль *"
+                :hasWarning="fieldHasErrors('Пароль')"
+                v-model="dataRegister.password2"
+            />
+
+            <ButtonComp class="authorization__button" value="Зарегистрироваться" type="primary" @click="submit()" />
+            <div class="authorization__toggler">
+                Уже есть аккаунт?
+                <span class="authorization__toggler-link" @click="toggleType()">Войти</span>
+            </div>
+        </div>
+
+        <NotificationsMain class="authorization__notifications" v-model="notifications" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import InputImage from "@/components/Authorization/InputImage.vue";
+import NotificationsMain from "@/components/Notifications/NotificationsMain.vue";
+import { useRouter } from "vue-router";
+import { useUserStore } from "@/store";
+import { useUserApi } from "@/composables/api";
+import { FieldsContainer, FieldChecks } from "@/modules/validator";
+import { notification } from "@/types";
+import SwitchableImage from "@/components/Common/SwitchableImage.vue";
+import { convertFileToBase64String } from "@/composables/utils";
+const router = useRouter();
+const userStore = useUserStore();
+const userApi = useUserApi();
+
+const props = defineProps<{ type: string }>();
+
+const isLogin = computed(() => props.type === "login");
+
+function toggleType() {
+    if (isLogin.value) {
+        router.push("/register");
+    } else {
+        router.push("/login");
+    }
+    notifications.value = [];
+
+    resetData();
+}
+
+function goToMain() {
+    router.push("/");
+}
+
+//#region login and registration
+const dataLogin = ref<{
+    email: string;
+    password: string;
+}>({ email: "", password: "" });
+
+const dataRegister = ref<{
+    name: string;
+    surname: string;
+    email: string;
+    password: string;
+    password2: string;
+    image: string;
+    imageFile?: File;
+}>({ name: "", surname: "", email: "", password: "", password2: "", image: "", imageFile: undefined });
+
+async function setRegisterImage(file: File) {
+    console.log(file);
+
+    dataRegister.value.imageFile = file;
+    dataRegister.value.image = await convertFileToBase64String(file);
+}
+
+const notifications = ref<notification[]>([]);
+
+async function submit() {
+    let errors = getFieldsErrors();
+
+    notifications.value = errors;
+
+    if (errors.length > 0) return;
+
+    if (isLogin.value) {
+        const resp = await userApi.login(dataLogin.value);
+        userStore.setData(resp);
+        router.push("/");
+    } else {
+        const resp = await userApi.register(dataRegister.value);
+        notifications.value.push({ text: "Регистрация прошла успешно. Теперь вы можете войти.", type: "success" });
+        router.push("/login");
+    }
+
+    resetData();
+}
+
+function getFieldsErrors() {
+    const container = new FieldsContainer();
+    if (isLogin.value) {
+        container.addField("Email", dataLogin.value.email, [FieldChecks.nonEmpty, FieldChecks.email]);
+        container.addField("Пароль", dataLogin.value.password, [FieldChecks.nonEmpty, FieldChecks.minLength(6), FieldChecks.maxLength(32)]);
+    } else {
+        container.addField("Имя", dataRegister.value.name, [
+            FieldChecks.nonEmpty,
+            FieldChecks.onlyLettersWhitespaces,
+            FieldChecks.minLength(2),
+            FieldChecks.maxLength(20),
+        ]);
+        container.addField("Фамилия", dataRegister.value.surname, [
+            FieldChecks.nonEmpty,
+            FieldChecks.onlyLettersWhitespaces,
+            FieldChecks.minLength(2),
+            FieldChecks.maxLength(20),
+        ]);
+        container.addField("Email", dataRegister.value.email, [FieldChecks.nonEmpty, FieldChecks.email]);
+        container.addField("Пароль", dataRegister.value.password, [
+            FieldChecks.nonEmpty,
+            FieldChecks.minLength(6),
+            FieldChecks.maxLength(32),
+        ]);
+    }
+
+    let errors: notification[] = [];
+    for (let [key, value] of container.fields) {
+        const error = value.tryGetFirstError();
+        if (error !== "") {
+            errors.push({ field: key, text: error, type: "warning" });
+        }
+    }
+
+    if (!isLogin.value) {
+        if (dataRegister.value.password !== dataRegister.value.password2) {
+            errors.push({ field: "Пароль", text: "Пароли не совпадают.", type: "warning" });
+        }
+    }
+    return errors;
+}
+
+function fieldHasErrors(field: string) {
+    return notifications.value.some((x) => x.field === field);
+}
+
+function resetData() {
+    dataLogin.value = { email: "", password: "" };
+    dataRegister.value = { name: "", surname: "", email: "", password: "", password2: "", image: "", imageFile: undefined };
+}
+//#endregion
+</script>
+
+<style lang="scss">
+.authorization {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: r(40) r(70);
+
+    &__head {
+        display: flex;
+        align-items: center;
+        gap: r(20);
+        font-size: r(20);
+    }
+
+    &__head-link {
+        cursor: pointer;
+    }
+
+    &__content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &__photo {
+        align-self: center;
+    }
+
+    &__button {
+        align-self: center;
+        margin-top: r(30);
+        min-width: 50%;
+    }
+
+    &__toggler {
+        display: flex;
+        justify-content: center;
+        gap: r(5);
+        margin-top: r(15);
+        color: color("ui-background");
+        font-size: r(19);
+    }
+
+    &__toggler-link {
+        color: color("theme-color");
+        cursor: pointer;
+    }
+
+    &__notifications {
+        position: fixed;
+        inset: auto 0 0 0;
+    }
+}
+</style>

src/components/Authorization/InputImage.vue

@@ -0,0 +1,68 @@
+<template>
+    <label class="input-image">
+        <img class="input-image__image" :src="imageSrc" v-if="imageFile" />
+        <FontAwesomeIcon class="input-image__icon" icon="user" v-else />
+        <input class="input-image__input" type="file" accept=".jpg, .jpeg, .png, image/png, image/jpg, image/jpeg" @change="valueChanged" />
+    </label>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { convertFileToBase64String } from "@/composables/utils";
+
+const emit = defineEmits(["change"]);
+
+const imageFile = ref<File | undefined>(undefined);
+const imageSrc = ref("");
+
+async function valueChanged(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+    const file = inputElement.files?.[0];
+
+    if (file) {
+        if (!file.type.includes("image")) {
+            alert("Необходимо выбрать изображение");
+            return;
+        }
+
+        imageFile.value = file;
+
+        const fileString = await convertFileToBase64String(file);
+
+        imageSrc.value = fileString;
+        emit("change", file);
+    }
+}
+</script>
+
+<style lang="scss">
+.input-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: r(100);
+    height: r(100);
+    margin: r(10);
+    border-radius: 50%;
+    border: r(1) solid color("ui-background");
+    overflow: hidden;
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border: none;
+        outline: none;
+    }
+
+    &__icon {
+        height: 30%;
+        width: 30%;
+        color: color("ui-background");
+    }
+
+    &__input {
+        display: none;
+    }
+}
+</style>

src/components/Common/SwitchableImage.vue

@@ -0,0 +1,84 @@
+<template>
+    <div class="switchable-image">
+        <img class="switchable-image__image" :src="value" v-if="value" />
+        <FontAwesomeIcon class="switchable-image__placeholder" icon="user" v-else />
+        <label class="switchable-image__input-field" v-if="edited">
+            <FontAwesomeIcon class="switchable-image__input-icon" icon="pen" />
+            <input
+                class="switchable-image__input"
+                type="file"
+                accept=".jpg, .jpeg, .png, image/png, image/jpg, image/jpeg"
+                @change="valueChanged"
+            />
+        </label>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ value: string; edited: boolean }>();
+const emit = defineEmits(["change"]);
+
+function valueChanged(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+    const file = inputElement.files?.[0];
+    if (file) {
+        emit("change", file);
+    }
+}
+</script>
+
+<style lang="scss">
+.switchable-image {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: r(150);
+    height: r(150);
+    border-radius: 50%;
+    border: r(1) solid color("theme-color");
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border: none;
+        outline: none;
+        border-radius: 50%;
+
+        &[src=""] {
+            display: none;
+        }
+    }
+
+    &__placeholder {
+        width: 50%;
+        height: 50%;
+        color: color("theme-color");
+    }
+
+    &__input-field {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        border-radius: 50%;
+    }
+
+    &__input {
+        display: none;
+    }
+
+    &__input-icon {
+        position: absolute;
+        top: r(5);
+        right: r(5);
+        width: 15%;
+        height: 15%;
+        border-radius: 50%;
+        padding: r(10);
+
+        background: color("theme-color");
+        color: color("ui-color-on-background");
+    }
+}
+</style>

src/components/Common/ThemeSwitcher.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="theme-switcher" @click="toggleTheme()">
+        <FontAwesomeIcon class="fa-icon" icon="sun" v-if="uiStore.theme === 'dark'" />
+        <FontAwesomeIcon class="fa-icon" icon="moon" v-else />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUIStore } from "@/store";
+
+const uiStore = useUIStore();
+
+function toggleTheme() {
+    const nextTheme = uiStore.theme === "light" ? "dark" : "light";
+    uiStore.setTheme(nextTheme);
+}
+</script>
+
+<style lang="scss">
+.theme-switcher {
+}
+</style>

src/components/HomeView/AuthorizationNeeded.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="authorization-needed">
+        <div class="authorization-needed__container">
+            <FontAwesomeIcon class="authorization-needed__icon" icon="user-lock" />
+            <div class="authorization-needed__title">Необходима авторизация</div>
+            <div class="authorization-needed__text">
+                Для просмотра этой страницы
+                <br />
+                вам необходимо
+                <RouterLink to="/login" class="authorization-needed__link">войти</RouterLink>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.authorization-needed {
+    position: absolute;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: r(20);
+
+    &__container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: r(15);
+    }
+
+    &__icon {
+        color: color("theme-color");
+        font-size: r(35);
+    }
+
+    &__title {
+        font-weight: 700;
+    }
+
+    &__text {
+        text-align: center;
+        font-size: r(18);
+        line-height: r(26);
+    }
+
+    &__link {
+        color: color("theme-color");
+        cursor: pointer;
+    }
+}
+</style>

src/components/HomeView/Header/HeaderMain.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="header" v-if="userStore.isLoggedIn" @click="goToUserPage()">
+        <div class="header__user-image">
+            <div class="header__image-container">
+                <img class="header__image" :src="userStore.userData.image" v-if="userStore.userData.image" />
+                <FontAwesomeIcon class="header__image-placeholder" icon="user" v-else />
+            </div>
+        </div>
+        <div class="header__name">{{ userStore.userData.name }} {{ userStore.userData.surname }}</div>
+        <div class="header__coins">
+            <FontAwesomeIcon icon="coins" />
+            {{ userStore.laCoins }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "@/store";
+import { useRouter } from "vue-router";
+
+const userStore = useUserStore();
+const router = useRouter();
+
+function goToUserPage() {
+    router.push("/user");
+}
+</script>
+
+<style lang="scss">
+.header {
+    display: flex;
+    align-items: center;
+    height: r(60);
+    padding: r(5) r(20);
+    color: color("ui-color-on-background");
+    background: linear-gradient(60deg, color("theme-color"), color("theme-color", $lightness: -13%));
+    box-shadow: 0 r(4) r(20) 0 hsla(0, 0%, 0%, 0.14), 0 r(7) r(12) r(-5) color("theme-color", $alpha: -0.54);
+    user-select: none;
+    z-index: 50;
+
+    &__user-image {
+        position: relative;
+        width: r(60);
+        z-index: 1;
+    }
+
+    &__image-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: r(50);
+        height: r(50);
+        border-radius: 50%;
+        background: white;
+    }
+
+    &__image {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+    }
+
+    &__image-placeholder {
+        width: 50%;
+        height: 50%;
+        color: color("theme-color");
+    }
+
+    &__name {
+        flex: 1;
+        line-height: r(21);
+    }
+}
+</style>

src/components/HomeView/HomeViewMain.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="home-view">
+        <HeaderMain />
+        <div class="home-view__view" :class="'home-view__view--transition-direction--' + navigationDirection">
+            <RouterView v-slot="{ Component }" class="home-view__page">
+                <Transition name="home-view__view--transition">
+                    <KeepAlive>
+                        <Component :is="Component" />
+                    </KeepAlive>
+                </Transition>
+            </RouterView>
+        </div>
+        <NavigationBarMain class="home-view__navigation-bar" @direction="setDirection" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import HeaderMain from "@/components/HomeView/Header/HeaderMain.vue";
+import NavigationBarMain from "@/components/HomeView/NavigationBar/NavigationBarMain.vue";
+import { ref } from "vue";
+
+const navigationDirection = ref("none");
+
+function setDirection(direction: string) {
+    navigationDirection.value = direction;
+}
+</script>
+
+<style lang="scss">
+.home-view {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    &__view {
+        $__view: &;
+
+        flex: 1;
+        position: relative;
+        width: 100%;
+        overflow-x: hidden;
+        overflow-y: auto;
+        background: color("second-background");
+
+        &--transition-direction {
+            &--left {
+                #{$__view}--transition {
+                    &-enter-from {
+                        transform: translateX(-100%);
+                        opacity: 0;
+                    }
+                    &-leave-to {
+                        transform: translateX(100%);
+                        opacity: 0;
+                    }
+                }
+            }
+
+            &--right {
+                #{$__view}--transition {
+                    &-enter-from {
+                        transform: translateX(100%);
+                        opacity: 0;
+                    }
+                    &-leave-to {
+                        transform: translateX(-100%);
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+
+        &--transition {
+            &-enter-active,
+            &-leave-active {
+                transition: all 0.1s ease-in-out;
+            }
+        }
+    }
+
+    &__page {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        min-height: 100%;
+    }
+
+    &__navigation-bar {
+        flex: 0 1 auto;
+    }
+}
+</style>

src/components/HomeView/NavigationBar/NavigationBarMain.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="navigation-bar">
+        <template v-for="tab in tabs" :key="tab.index">
+            <RouterLink
+                class="navigation-bar__item"
+                :class="{
+                    'navigation-bar__item--center': tab.isCenter,
+                }"
+                :to="tab.path"
+                :active-class="'navigation-bar__item--active'"
+            >
+                <div class="navigation-bar__icon-container">
+                    <FontAwesomeIcon class="navigation-bar__icon" :icon="tab.icon" />
+                    <div class="navigation-bar__icon-counter" v-if="tab.counter?.value">
+                        {{ tab.counter }}
+                    </div>
+                </div>
+                <div class="navigation-bar__item-name">
+                    {{ tab.name }}
+                </div>
+            </RouterLink>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useOrdersStore } from "@/store";
+import { ref, computed, nextTick } from "vue";
+// router
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+const router = useRouter();
+const route = useRoute();
+const emit = defineEmits(["direction"]);
+const ordersStore = useOrdersStore();
+
+const tabs = [
+    { path: "/home", name: "Лента", icon: "house" },
+    { path: "/menu", name: "Меню", icon: "bars" },
+    { path: "/hookah", name: "Кальян", isCenter: true, icon: "bottle-droplet" },
+    {
+        path: "/orders",
+        name: "Заказы",
+        icon: "file-lines",
+        counter: computed(() => ordersStore.orders.filter((x) => x.status !== "completed").length),
+    },
+    { path: "/user", name: "Профиль", icon: "user" },
+];
+
+const currentTabIndex = computed(() => {
+    let tab = tabs.find((x) => route.path.includes(x.path));
+    if (!tab) return -1;
+    return tabs.indexOf(tab);
+});
+
+onBeforeRouteUpdate((to) => {
+    const tabTo = tabs.find((x) => to.path.includes(x.path));
+    if (tabTo) {
+        if (currentTabIndex.value === tabs.indexOf(tabTo)) return;
+
+        if (currentTabIndex.value > tabs.indexOf(tabTo)) {
+            emit("direction", "left");
+        } else {
+            emit("direction", "right");
+        }
+
+        setTimeout(() => {
+            emit("direction", "none");
+        }, 200);
+    }
+});
+</script>
+
+<style lang="scss">
+.navigation-bar {
+    $p: &;
+
+    display: flex;
+    height: r(60);
+    font-size: r(16);
+    color: color("ui-background");
+    user-select: none;
+    box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);
+
+    z-index: 50;
+
+    &__item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
+        padding: r(5) 0;
+        cursor: pointer;
+
+        &--center {
+            #{$p}__icon {
+                width: r(40);
+                height: r(40);
+                padding: r(6);
+                color: color("main-background");
+                background: color("ui-background");
+                border-radius: 50%;
+            }
+
+            #{$p}__icon-container {
+                bottom: r(22);
+                width: r(60);
+                height: r(60);
+                background: color("main-background");
+                border-radius: 50%;
+                box-shadow: 0 r(-4) r(20) 0 hsla(0, 0%, 0%, 0.12), 0 r(-7) r(12) r(-5) hsla(0, 0%, 0%, 0.15);
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: r(22);
+                    width: 150%;
+                    height: r(58);
+                    background: color("main-background");
+                }
+            }
+        }
+
+        &--active {
+            #{$p}__item-name {
+                color: color("main-color");
+            }
+        }
+
+        &--active#{&}:not(&--center) {
+            #{$p}__icon {
+                color: color("theme-color");
+            }
+        }
+
+        &--active#{&}--center {
+            #{$p}__icon {
+                background: color("theme-color");
+            }
+        }
+    }
+
+    &__item-name {
+        transition: color 0.18s ease;
+        z-index: 2;
+    }
+
+    &__icon {
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        transition: background-color 0.18s ease, color 0.18s ease;
+    }
+
+    &__icon-counter {
+        z-index: 2;
+        position: absolute;
+        top: -25%;
+        right: -25%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: r(20);
+        height: r(20);
+        border-radius: 50%;
+        color: color("ui-color-on-background");
+        background: color("warning-color");
+    }
+
+    &__icon-container {
+        position: absolute;
+        bottom: r(25);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: r(28);
+        height: r(28);
+    }
+}
+</style>

src/components/HomeView/Tabs/Home/HomeMain.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="home">
+        <div class="home__slider-promo">
+            <div class="home__slider-promo-title">Акции</div>
+            <SliderComp type="infinite" :automatic="true">
+                <SliderTabComp>
+                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(0)" />
+                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
+                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
+                        <div class="home__slider-promo-text">Текст акции 1</div>
+                    </ModalComp>
+                </SliderTabComp>
+                <SliderTabComp>
+                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(1)" />
+                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
+                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
+                        <div class="home__slider-promo-text" home__slider-image>Текст акции 2</div>
+                    </ModalComp>
+                </SliderTabComp>
+                <SliderTabComp>
+                    <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" @click="openModal(2)" />
+                    <ModalComp :ref="(elem: any) => {refModal.push(elem as InstanceType<typeof ModalComp>)}">
+                        <ImageComp class="home__slider-promo-image" src="/media/images/promo.webp" />
+                        <div class="home__slider-promo-text">Текст акции 3</div>
+                    </ModalComp>
+                </SliderTabComp>
+            </SliderComp>
+        </div>
+        <div class="home__slider" v-if="ordersStore.orders.length > 0">
+            <div class="home__slider-title">Последние заказы</div>
+            <div class="home__slider-list">
+                <div class="home__slider-item" v-for="order in ordersStore.orders.sort((a, b) => b.id - a.id)" :key="order.id">
+                    <div>Заказ № {{ order.id }}</div>
+                    <div>Стол: {{ order.table }}</div>
+                    <div>Тяжесть: {{ order.heaviness.title }}</div>
+                    <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
+                </div>
+            </div>
+            <div class="home__slider-footer"></div>
+        </div>
+        <div class="home__slider" v-if="ordersStore.favouriteOrders.length > 0">
+            <div class="home__slider-title">Любимые кальяны</div>
+            <div class="home__slider-list">
+                <div class="home__slider-item" v-for="order in ordersStore.favouriteOrders.sort((a, b) => b.id - a.id)" :key="order.id">
+                    <div>Тяжесть: {{ order.heaviness.title }}</div>
+                    <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
+                </div>
+            </div>
+            <div class="home__slider-footer"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useOrdersStore } from "@/store";
+import { ref } from "vue";
+import ModalComp from "@/components/UI/ModalComp.vue";
+
+const refModal = ref<InstanceType<typeof ModalComp>[]>([]);
+
+const ordersStore = useOrdersStore();
+
+function openModal(index: number) {
+    refModal.value[index].open();
+}
+</script>
+
+<style lang="scss">
+.home {
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    gap: r(20);
+    min-height: 100%;
+    width: 100%;
+    padding: r(20) 0;
+
+    &__slider-promo {
+        background: color("main-background");
+        box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
+    }
+
+    &__slider-promo-title {
+        font-size: r(25);
+        padding: r(10) r(20);
+    }
+
+    &__slider-promo-image {
+        width: 100%;
+    }
+
+    &__slider-promo-text {
+        margin-top: r(20);
+    }
+
+    &__slider-title {
+        padding: r(10) r(30);
+        //background: color("main-background");
+        //box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
+    }
+
+    &__slider {
+        @include main-container;
+
+        display: flex;
+        flex-direction: column;
+        gap: r(1);
+        background: color("main-background");
+    }
+
+    &__slider-list {
+        display: flex;
+        gap: r(20);
+        padding: r(5) r(20);
+        overflow-x: auto;
+
+        @media (max-width: $mobileWidth) {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &__slider-footer {
+        height: r(15);
+        //background: color("main-background");
+        //box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
+    }
+
+    &__slider-item {
+        @include main-container;
+
+        min-width: 60%;
+        padding: r(10);
+        box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.34), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.5), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.32);
+    }
+}
+</style>

src/components/HomeView/Tabs/Hookah/HeavinessTab.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="hookah-heaviness">
+        <div class="hookah-heaviness__container">
+            <div
+                class="hookah-heaviness__item"
+                v-for="item in hookahStore.heavinessList"
+                :key="item.title"
+                :class="{ 'hookah-heaviness__item--active': hookahStore.selectedHeaviness === item }"
+                @click="changeHeaviness(item)"
+            >
+                {{ item.title }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useHookahStore } from "@/store";
+import { heaviness } from "@/types";
+
+const hookahStore = useHookahStore();
+
+function changeHeaviness(heaviness: heaviness) {
+    hookahStore.selectedHeaviness = heaviness;
+}
+</script>
+
+<style lang="scss">
+.hookah-heaviness {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: r(10);
+        width: 80%;
+        z-index: 10;
+    }
+
+    &__item {
+        @include main-container;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: r(10) r(10);
+        cursor: pointer;
+        transition: 0.18s ease;
+        transition-property: background-color, color, box-shadow;
+
+        &--active {
+            background: color("theme-color");
+            color: color("ui-color-on-background");
+            box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
+                0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
+        }
+    }
+}
+</style>

src/components/HomeView/Tabs/Hookah/HookahMain.vue

@@ -0,0 +1,416 @@
+<template>
+    <template v-if="userStore.isLoggedIn">
+        <div class="hookah" :class="'hookah--transition-direction--' + direction">
+            <div class="hookah__navigation">
+                <div class="hookah__navigation-title">Создаём заказ. {{ currentTabIndex < 3 ? "Выберите..." : "Проверьте..." }}</div>
+                <div class="hookah__navigation-buttons">
+                    <RouterLink
+                        class="hookah__navigation-item hookah-navigation-item"
+                        v-for="(tab, index) in tabs"
+                        :key="tab.name"
+                        :to="tab.path"
+                        active-class="hookah-navigation-item--active"
+                        :class="{ 'hookah-navigation-item--completed': isTabCompleted(index) }"
+                        @click.prevent="changeTab(index)"
+                    >
+                        <div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === 0"></div>
+                        <div class="hookah-navigation-item__side" v-html="getSideShape('left')" v-else></div>
+                        <div class="hookah-navigation-item__text">{{ tab.name }}</div>
+                        <div class="hookah-navigation-item__side" v-html="getSideShape('rect')" v-if="index === tabs.length - 1"></div>
+                        <div class="hookah-navigation-item__side" v-html="getSideShape('right')" v-else></div>
+                    </RouterLink>
+                </div>
+            </div>
+            <div class="hookah__view">
+                <RouterView v-slot="{ Component }" class="hookah__page">
+                    <Transition name="hookah--transition">
+                        <Component :is="Component" />
+                    </Transition>
+                </RouterView>
+
+                <Transition name="hookah__view-button-container--transition">
+                    <div class="hookah__view-button-container" v-show="navigationButtonShowed" @click="nextButtonClicked()">
+                        <ButtonComp class="hookah__view-button" type="primary" value="Далее" />
+                    </div>
+                </Transition>
+            </div>
+
+            <div
+                v-for="num in 3"
+                :key="num"
+                class="hookah__background-smoke"
+                :class="`hookah__background-smoke--${num}`"
+                :style="`opacity: ${getSmokeOpacity(num)}`"
+            ></div>
+            <div class="hookah__background-table" :style="`opacity: ${backgroundTableOpacity}`">
+                {{ backgroundTableNumber }}
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <AuthorizationNeeded />
+    </template>
+</template>
+
+<script setup lang="ts">
+import { computed, onActivated, ref, watch } from "vue";
+import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
+import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
+import { useHookahStore, useUIStore, useUserStore } from "@/store";
+const router = useRouter();
+const route = useRoute();
+
+const hookahStore = useHookahStore();
+const userStore = useUserStore();
+const uiStore = useUIStore();
+
+const html = (val: any) => val;
+
+const tabs = [
+    { name: "Стол", path: "/hookah/table" },
+    { name: "Тяжесть", path: "/hookah/heaviness" },
+    { name: "Вкус", path: "/hookah/taste" },
+    { name: "Итог", path: "/hookah/summary" },
+];
+
+const direction = ref("none");
+const currentTabIndex = computed(() => {
+    return getTabIndexByPath(route.path);
+});
+
+init();
+function init() {
+    router.push(getPreviousNotCompletedTab(3)?.path ?? tabs[3].path);
+}
+onActivated(() => init());
+
+function getTabIndexByPath(path: string) {
+    let tab = tabs.find((x) => path === x.path);
+    return tab ? tabs.indexOf(tab) : -1;
+}
+
+function changeTab(index: number) {
+    if (currentTabIndex.value === index) return;
+
+    if (currentTabIndex.value > index) {
+        direction.value = "left";
+    } else {
+        direction.value = "right";
+    }
+
+    router.push(tabs[index].path);
+
+    setTimeout(() => {
+        direction.value = "none";
+    }, 200);
+}
+
+function getSideShape(type: "right" | "left" | "rect") {
+    switch (type) {
+        case "right":
+            return html`
+                <svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
+                    <polygon points="0,0 5,0 55,50 5,100 0,100" />
+                </svg>
+            `;
+        case "left":
+            return html`
+                <svg class="hookah-navigation-item__shape" viewbox="0 0 55 100">
+                    <polygon points="0,0 55,0 55,100 0,100 50,50" />
+                </svg>
+            `;
+        case "rect":
+            return html`
+                <svg class="hookah-navigation-item__shape" viewbox="0 0 51 100">
+                    <polygon points="1,0 51,0 51,100 1,100" />
+                </svg>
+            `;
+    }
+}
+
+const navigationButtonLeftShowed = computed(() => {
+    if (direction.value != "none") return false;
+    return currentTabIndex.value > 0;
+});
+
+const navigationButtonRightShowed = computed(() => {
+    if (currentTabIndex.value >= tabs.length - 1) return false;
+    if (direction.value != "none") return false;
+
+    return isTabCompleted(currentTabIndex.value);
+});
+
+const navigationButtonShowed = computed(() => {
+    if (currentTabIndex.value >= tabs.length - 1) return false;
+    if (direction.value !== "none") return false;
+
+    return isTabCompleted(currentTabIndex.value);
+});
+
+function nextButtonClicked() {
+    const nextIncompletedTab = getNextNotCompletedTab(currentTabIndex.value);
+    changeTab(tabs.indexOf(nextIncompletedTab));
+}
+
+function isTabCompleted(index: number) {
+    switch (index) {
+        case 0:
+            return hookahStore.selectedTableNumber > 0;
+        case 1:
+            return hookahStore.selectedHeaviness != null;
+        case 2:
+            return hookahStore.selectedTastes.length > 0;
+    }
+}
+
+function getPreviousNotCompletedTab(index: number) {
+    for (let i = 0; i < index; i++) {
+        if (!isTabCompleted(i)) {
+            return tabs[i];
+        }
+    }
+    return undefined;
+}
+
+function getNextNotCompletedTab(index: number) {
+    for (let i = index; i < 3; i++) {
+        if (!isTabCompleted(i)) {
+            return tabs[i];
+        }
+    }
+    return tabs[3];
+}
+
+function getSmokeOpacity(num: number) {
+    if (hookahStore.selectedHeaviness && hookahStore.selectedHeaviness.id >= num - 1) {
+        return uiStore.theme === "light" ? 1 : 0.1;
+    }
+    return 0;
+}
+
+const backgroundTableOpacity = ref(0);
+const backgroundTableNumber = ref(0);
+
+let backgroundTableTimeout: number;
+
+function changeBackgroundTableNumber(to: number) {
+    clearTimeout(backgroundTableTimeout);
+    backgroundTableOpacity.value = 0;
+    backgroundTableTimeout = setTimeout(() => {
+        backgroundTableNumber.value = to;
+        backgroundTableOpacity.value = to > 0 ? 1 : 0;
+    }, 380);
+}
+
+watch(
+    () => hookahStore.selectedTableNumber,
+    (to) => {
+        changeBackgroundTableNumber(to);
+    }
+);
+
+onBeforeRouteUpdate((to) => {
+    const tab = getPreviousNotCompletedTab(getTabIndexByPath(to.path));
+    if (tab && to.path !== tab.path) {
+        return tab.path;
+    }
+});
+</script>
+
+<style lang="scss">
+.hookah {
+    $p: &;
+
+    display: flex;
+    flex-direction: column;
+
+    &__navigation {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: r(10) 0;
+        gap: r(10);
+
+        background: color("main-background");
+        box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
+        z-index: 10;
+    }
+
+    &__navigation-buttons {
+        --height: 4rem;
+
+        display: flex;
+        width: 100%;
+        height: var(--height);
+    }
+
+    &__navigation-item {
+        flex: 1 1 auto;
+    }
+
+    &__view {
+        flex: 1;
+        position: relative;
+        width: 100%;
+        z-index: 10;
+    }
+
+    &__view-button-container {
+        position: absolute;
+        inset: auto 0 r(40) 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        color: color("ui-color");
+        cursor: pointer;
+
+        &--transition {
+            &-enter-active,
+            &-leave-active {
+                transition: opacity 0.18s ease;
+            }
+
+            &-enter-from,
+            &-leave-to {
+                opacity: 0;
+            }
+        }
+    }
+
+    &__view-button {
+        width: 35%;
+    }
+
+    &__page {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        min-height: 100%;
+        padding: r(20);
+    }
+
+    &__background-smoke {
+        position: absolute;
+        inset: 0;
+        background-image: url("@/assets/images/smoke.webp");
+        background-size: r(1200);
+        background-repeat: no-repeat;
+        transition: opacity 0.38s ease;
+
+        &--1 {
+            background-position: 50% 40vh;
+            z-index: 3;
+        }
+
+        &--2 {
+            background-position: 25% 10vh;
+            z-index: 2;
+        }
+
+        &--3 {
+            background-position: 75% -20vh;
+            z-index: 1;
+        }
+    }
+
+    &__background-table {
+        position: absolute;
+        inset: auto 0 0 auto;
+        padding: r(20);
+
+        color: transparent;
+        font-size: 30vh;
+        font-style: italic;
+        text-shadow: 0 0 r(8) color("ui-color", $alpha: -0.9);
+
+        transition: opacity 0.38s ease;
+        z-index: 4;
+        user-select: none;
+    }
+
+    &--transition-direction {
+        &--left {
+            #{$p}--transition {
+                &-enter-from {
+                    transform: translateX(-100%);
+                }
+                &-leave-to {
+                    transform: translateX(100%);
+                }
+            }
+        }
+
+        &--right {
+            #{$p}--transition {
+                &-enter-from {
+                    transform: translateX(100%);
+                }
+                &-leave-to {
+                    transform: translateX(-100%);
+                }
+            }
+        }
+    }
+
+    &--transition {
+        &-enter-active,
+        &-leave-active {
+            transition: all 0.1s ease;
+        }
+    }
+}
+
+.hookah-navigation-item {
+    $p: &;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__side {
+        height: var(--height);
+        width: calc(var(--height + r(5)) / 2);
+        margin: 0 r(-1);
+    }
+
+    &__shape {
+        display: block;
+        height: 100%;
+        fill: color("ui-background");
+        transition: fill 0.18s ease;
+    }
+
+    &__text {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        background: color("ui-background");
+        color: color("ui-color-on-background");
+        font-size: r(24);
+        transition: background-color 0.18s ease;
+    }
+
+    &--completed {
+        #{$p}__text {
+            background: color("theme-color", $saturation: -50%);
+        }
+
+        #{$p}__shape {
+            fill: color("theme-color", $saturation: -50%);
+        }
+    }
+
+    &--active {
+        #{$p}__text {
+            background: color("theme-color");
+        }
+
+        #{$p}__shape {
+            fill: color("theme-color");
+        }
+    }
+}
+</style>

src/components/HomeView/Tabs/Hookah/SummaryTab.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="hookah-summary">
+        <div class="hookah-summary__container">
+            <div>Стол: {{ hookahStore.selectedTableNumber }}</div>
+            <div>Тяжесть: {{ hookahStore.selectedHeaviness?.title }}</div>
+            <div>Вкус: {{ hookahStore.selectedTastes.map((x) => x.title).join(", ") }}</div>
+            <div>Цена: {{ 123 }}</div>
+            <ButtonComp :type="'primary'" :value="'Заказать'" @click="createOrder()" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useHookahStore, useOrdersStore } from "@/store";
+import { useOrdersApi } from "@/composables/api";
+import { useRouter } from "vue-router";
+
+const hookahStore = useHookahStore();
+const ordersStore = useOrdersStore();
+const ordersApi = useOrdersApi();
+const router = useRouter();
+
+async function createOrder() {
+    const order = await tryCreateOrder();
+    if (order) {
+        ordersStore.createOrder(order);
+        setTimeout(() => {
+            hookahStore.clearSelected();
+        }, 200);
+
+        router.push("/orders");
+    }
+}
+
+async function tryCreateOrder() {
+    if (hookahStore.selectedHeaviness == null) return;
+
+    const resp = await ordersApi.createOrder({
+        table: hookahStore.selectedTableNumber,
+        heavinessId: hookahStore.selectedHeaviness.id,
+        tasteIds: hookahStore.selectedTastes.map((x) => x.id),
+    });
+
+    return resp;
+}
+</script>
+
+<style lang="scss">
+.hookah-summary {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__container {
+        @include main-container;
+
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: r(10);
+        width: 80%;
+        padding: r(15);
+        z-index: 10;
+    }
+}
+</style>

src/components/HomeView/Tabs/Hookah/TableTab.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="hookah-table">
+        <div class="hookah-table__container">
+            <div
+                class="hookah-table__item"
+                :class="{ 'hookah-table__item--active': hookahStore.selectedTableNumber === num }"
+                v-for="num in 15"
+                :key="num"
+                @click="setTable(num)"
+            >
+                {{ num }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useHookahStore } from "@/store";
+
+const hookahStore = useHookahStore();
+
+function setTable(num: number) {
+    hookahStore.selectedTableNumber = num;
+}
+</script>
+
+<style lang="scss">
+.hookah-table {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__container {
+        display: flex;
+        justify-content: center;
+
+        flex-wrap: wrap;
+        gap: r(10);
+        width: 80%;
+    }
+
+    &__item {
+        @include main-container;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: r(45);
+        height: r(45);
+        cursor: pointer;
+        transition: 0.18s ease;
+        transition-property: background-color, color, box-shadow;
+
+        &--active {
+            background: color("theme-color");
+            color: color("ui-color-on-background");
+            box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
+                0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
+        }
+    }
+}
+</style>

src/components/HomeView/Tabs/Hookah/TasteTab.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="hookah-taste">
+        <div class="hookah-taste__container">
+            <div
+                class="hookah-taste__item"
+                :class="{ 'hookah-taste__item--active': hookahStore.selectedTastes.includes(item) }"
+                v-for="item in hookahStore.tastesList"
+                :key="item.id"
+                @click="toggleTaste(item)"
+            >
+                {{ item.title }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useHookahStore } from "@/store";
+import { taste } from "@/types";
+
+const hookahStore = useHookahStore();
+
+let maxSelectedTastesCount = 2;
+
+function toggleTaste(taste: taste) {
+    if (hookahStore.selectedTastes.includes(taste)) {
+        hookahStore.selectedTastes = hookahStore.selectedTastes.filter((x) => x !== taste);
+    } else {
+        if (hookahStore.selectedTastes.length < maxSelectedTastesCount) {
+            hookahStore.selectedTastes.push(taste);
+        } else {
+            console.log("can't select more than ", maxSelectedTastesCount);
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.hookah-taste {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__container {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: r(10);
+        width: 80%;
+        z-index: 10;
+    }
+
+    &__item {
+        @include main-container;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: r(5) r(10);
+        cursor: pointer;
+        transition: 0.18s ease;
+        transition-property: background-color, color, box-shadow;
+
+        &--active {
+            background: color("theme-color");
+            color: color("ui-color-on-background");
+            box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
+                0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
+        }
+    }
+}
+</style>

src/components/HomeView/Tabs/Menu/MenuItem.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="menu-item" @click="openModal()">
+        <ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
+        <div class="menu-item__title">{{ item.title }}</div>
+        <div class="menu-item__description">{{ item.description }}</div>
+        <div class="menu-item__price">
+            {{ item.price }}
+            <FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
+        </div>
+        <ModalComp ref="refModal">
+            <div class="menu-item__modal">
+                <ImageComp class="menu-item__image" src="/media/images/tobaco1.webp" />
+                <div class="menu-item__title">{{ item.title }}</div>
+                <div class="menu-item__description">{{ item.description }}</div>
+                <div class="menu-item__price">
+                    {{ item.price }}
+                    <FontAwesomeIcon class="menu-item__price-icon" icon="ruble-sign" />
+                </div>
+            </div>
+        </ModalComp>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { menuItem } from "@/types";
+import { onDeactivated, ref } from "vue";
+import ModalComp from "@/components/UI/ModalComp.vue";
+
+const refModal = ref<InstanceType<typeof ModalComp> | undefined>();
+const props = defineProps<{ item: menuItem }>();
+
+onDeactivated(() => {
+    refModal.value?.close();
+});
+
+function openModal() {
+    refModal.value?.open();
+}
+</script>
+
+<style lang="scss">
+.menu-item {
+    display: flex;
+    flex-direction: column;
+    gap: r(10);
+    width: 90%;
+    margin: r(10) 0;
+    padding: r(15);
+    border-radius: r(6);
+    background: color("main-background");
+    box-shadow: 0 r(2) r(2) 0 rgba(0, 0, 0, 0.14), 0 r(3) r(1) r(-2) rgba(0, 0, 0, 0.2), 0 r(1) r(5) 0 rgba(0, 0, 0, 0.12);
+
+    &__image {
+        max-width: 100%;
+    }
+
+    &__title {
+        font-size: r(23);
+    }
+
+    &__price {
+        font-size: r(23);
+    }
+
+    &__price-icon {
+        font-size: r(20);
+    }
+
+    &__modal {
+        display: flex;
+        flex-direction: column;
+        gap: r(10);
+    }
+}
+</style>

src/components/HomeView/Tabs/Menu/MenuMain.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="menu">
+        <div class="menu__navigation">
+            <div class="menu__navigation-container">
+                <div
+                    class="menu__navigation-item"
+                    v-for="category in menuStore.categories"
+                    :class="{ 'menu__navigation-item--active': selectedCategory === category }"
+                    :key="category.id"
+                    @click="changeCategory(category)"
+                    :ref="(el)=>refCategories.push(el as Element)"
+                >
+                    {{ category.title }}
+                </div>
+            </div>
+        </div>
+        <div class="menu__list" ref="refMenuList">
+            <TransitionGroup name="menu__list-item--transition">
+                <MenuItem
+                    class="menu__list-item"
+                    v-for="item in selectedMenuItems"
+                    :key="Math.random() * (item.id + 1)"
+                    :item="item"
+                ></MenuItem>
+            </TransitionGroup>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { category } from "@/types";
+import { useMenuApi } from "@/composables/api";
+import { useMenuStore } from "@/store";
+import MenuItem from "./MenuItem.vue";
+
+const menuStore = useMenuStore();
+const menuApi = useMenuApi();
+
+const refCategories = ref<Element[]>([]);
+const refMenuList = ref<Element>();
+
+init();
+function init() {
+    menuStore.categories = menuApi.getCategories();
+    menuStore.menuItems = menuApi.getMenuItems();
+}
+
+const selectedMenuItems = computed(() =>
+    selectedCategory.value == null ? menuStore.menuItems : menuStore.menuItems.filter((x) => x.categoryId === selectedCategory.value?.id)
+);
+const selectedCategory = ref<category | undefined>(undefined);
+
+function changeCategory(category: category) {
+    if (selectedCategory.value === category) {
+        selectedCategory.value = undefined;
+    } else {
+        selectedCategory.value = category;
+        const selectedCategoryElement = refCategories.value[menuStore.categories.indexOf(selectedCategory.value)];
+        selectedCategoryElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+    }
+    setTimeout(() => {
+        refMenuList.value?.scroll(0, 0);
+    }, 180);
+}
+</script>
+
+<style lang="scss">
+.menu {
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+
+    &__navigation {
+        position: relative;
+        flex: 0 1 auto;
+        background: color("main-background");
+        box-shadow: 0 r(4) r(18) 0 rgba(0, 0, 0, 0.12), 0 r(7) r(10) r(-5) rgba(0, 0, 0, 0.15);
+        z-index: 1;
+        user-select: none;
+    }
+
+    &__navigation-container {
+        display: flex;
+        overflow-x: auto;
+        padding: 0 r(35);
+
+        @media (max-width: $mobileWidth) {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+
+    &__navigation-item {
+        position: relative;
+        padding: r(15);
+        font-size: r(24);
+        font-weight: 300;
+        text-transform: capitalize;
+        white-space: nowrap;
+
+        cursor: pointer;
+
+        &::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: r(4);
+            border-radius: r(2);
+            background: color("theme-color");
+            opacity: 0;
+            z-index: 1;
+            transition: opacity 0.18s ease;
+        }
+
+        &--active {
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    &__list {
+        flex: 1;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: r(10) 0 r(20) 0;
+        overflow: auto;
+    }
+
+    &__list-item {
+        flex: 0 0 auto;
+
+        --transition-duration: 0.18s;
+
+        &--transition {
+            &-enter-active {
+                transition: opacity var(--transition-duration) var(--transition-duration) ease;
+            }
+            &-leave-active {
+                transition: opacity var(--transition-duration) ease;
+            }
+
+            &-enter-from,
+            &-leave-to {
+                opacity: 0;
+            }
+        }
+    }
+}
+</style>

src/components/HomeView/Tabs/Orders/OrdersMain.vue

@@ -0,0 +1,159 @@
+<template>
+    <template v-if="userStore.isLoggedIn">
+        <div class="orders">
+            <div class="orders__list">
+                <div class="orders__item" v-for="(order, index) in ordersStore.orders" :key="order.id">
+                    <div class="orders__item-main">
+                        <div class="orders__item-head">
+                            <div>Заказ № {{ order.id }}</div>
+                            <div>статус: {{ order.status }}</div>
+                        </div>
+                        <div>Стол: {{ order.table }}</div>
+                        <div>Тяжесть: {{ order.heaviness.title }}</div>
+                        <div>Вкус: {{ order.tastes.map((x) => x.title).join(", ") }}</div>
+                        <div>Цена: {{ order.price }}</div>
+                        <div
+                            class="orders__item-favourite"
+                            :class="{ 'orders__item-favourite--active': order.favourite }"
+                            @click="toggleFavourite(order)"
+                        >
+                            <FontAwesomeIcon icon="star" />
+                        </div>
+                        <FontAwesomeIcon
+                            class="orders__item-expand"
+                            :class="{ 'orders__item-expand--active': index === expandedIndex }"
+                            icon="chevron-down"
+                            @click="toggleExpanded(index)"
+                        />
+                    </div>
+                    <div class="orders__item-add" v-show="index === expandedIndex">
+                        <ButtonComp type="primary" value="Повторить заказ" @click="repeatOrder(order)" />
+                    </div>
+                </div>
+                <div class="orders__item" v-if="ordersStore.orders.length === 0">
+                    У вас пока нет ни одного заказа...
+                    <RouterLink class="orders__item-link" to="/hookah/table">Сделать заказ</RouterLink>
+                </div>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <AuthorizationNeeded />
+    </template>
+</template>
+
+<script setup lang="ts">
+import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
+import { useOrdersApi } from "@/composables/api";
+import { useUserStore, useOrdersStore, useHookahStore } from "@/store";
+import { order } from "@/types";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const userStore = useUserStore();
+const ordersStore = useOrdersStore();
+const hookahStore = useHookahStore();
+const ordersApi = useOrdersApi();
+const router = useRouter();
+
+const expandedIndex = ref(-1);
+
+async function toggleFavourite(order: order) {
+    const resp = await ordersApi.toggleFavourite(order);
+
+    if (resp) {
+        order.favourite = !order.favourite;
+    }
+}
+
+function toggleExpanded(index: number) {
+    if (index === expandedIndex.value) {
+        expandedIndex.value = -1;
+    } else {
+        expandedIndex.value = index;
+    }
+}
+
+function repeatOrder(order: order) {
+    hookahStore.selectedHeaviness = order.heaviness;
+    hookahStore.selectedTastes = order.tastes;
+    router.push("/hookah/table");
+}
+</script>
+
+<style lang="scss">
+.orders {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+    padding: r(20);
+
+    &__list {
+        display: flex;
+        flex-direction: column;
+        gap: r(20);
+    }
+
+    &__item {
+        @include main-container;
+
+        position: relative;
+        padding: r(10);
+    }
+
+    &__item-main {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: r(5);
+    }
+
+    &__item-add {
+        margin-top: r(10);
+    }
+
+    &__item-head {
+        display: flex;
+        justify-content: space-between;
+        width: calc(100% - r(30));
+    }
+
+    &__item-favourite {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: r(20);
+        height: r(20);
+        color: color("ui-background");
+        transition: color 0.18s ease;
+        cursor: pointer;
+
+        &--active {
+            color: color("theme-color");
+        }
+    }
+
+    &__item-expand {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: r(20);
+        height: r(20);
+        color: color("ui-background");
+        transition: transform 0.18s ease;
+        cursor: pointer;
+
+        &--active {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__item-link {
+        color: color("theme-color");
+    }
+}
+</style>

src/components/HomeView/Tabs/User/UserMain.vue

@@ -0,0 +1,340 @@
+<template>
+    <template v-if="userStore.isLoggedIn">
+        <div class="user">
+            <div class="user__container">
+                <div class="user__user-data">
+                    <SwitchableImage
+                        class="user__image"
+                        :value="localUserData.image"
+                        :edited="userDataEdited"
+                        @change="changeLocalImageValue"
+                    />
+                    <InputComp
+                        class="user__name"
+                        v-model="localUserData.name"
+                        placeholder="Имя"
+                        :hasWarning="fieldHasErrors('Имя')"
+                        :readOnly="!userDataEdited"
+                    ></InputComp>
+                    <InputComp
+                        class="user__surname"
+                        v-model="localUserData.surname"
+                        placeholder="Фамилия"
+                        :hasWarning="fieldHasErrors('Фамилия')"
+                        :readOnly="!userDataEdited"
+                    ></InputComp>
+
+                    <InputComp class="user__email" v-model="userStore.userData.email" :placeholder="'Почта'" :readOnly="true"></InputComp>
+
+                    <ButtonComp
+                        class="user__button"
+                        v-if="userDataEdited"
+                        value="Сохранить изменения"
+                        type="primary"
+                        @click="tryChangeUserData()"
+                    />
+                </div>
+
+                <div class="user__password" v-if="userDataEdited">
+                    <template v-if="userPasswordEdited">
+                        <InputComp
+                            class="user__name"
+                            v-model="localPasswords.oldPassword"
+                            type="password"
+                            :hasWarning="fieldHasErrors('Старый пароль')"
+                            placeholder="Старый пароль"
+                        ></InputComp>
+                        <InputComp
+                            class="user__surname"
+                            v-model="localPasswords.newPassword"
+                            type="password"
+                            :hasWarning="fieldHasErrors('Новый пароль')"
+                            placeholder="Новый пароль"
+                        ></InputComp>
+                        <InputComp
+                            class="user__surname"
+                            v-model="localPasswords.newPassword2"
+                            type="password"
+                            :hasWarning="fieldHasErrors('Новый пароль')"
+                            placeholder="Повторите новый пароль"
+                        ></InputComp>
+                    </template>
+
+                    <ButtonComp
+                        class="user__button"
+                        value="Сменить пароль"
+                        :type="passwordButtonStyle"
+                        @click="changePasswordButtonHandler()"
+                    />
+                </div>
+
+                <div class="user__edit-toggle">
+                    <FontAwesomeIcon class="fa-icon" icon="user-pen" v-if="!userDataEdited" @click="startEdit()" />
+                    <FontAwesomeIcon class="fa-icon" icon="xmark" v-else @click="stopEdit()" />
+                </div>
+
+                <ButtonComp class="user__button" v-if="!userDataEdited" value="Выйти" type="primary" @click="tryLogout()" />
+                <ThemeSwitcher class="user__theme-switcher" />
+
+                <NotificationsMain class="user__notifications" v-model="notifications" />
+                <ModalComp ref="refModal">Вы действительно хотите выйти?</ModalComp>
+            </div>
+        </div>
+    </template>
+    <template v-else>
+        <AuthorizationNeeded />
+    </template>
+</template>
+
+<script setup lang="ts">
+import { computed, onDeactivated, ref, watch } from "vue";
+import SwitchableImage from "@/components/Common/SwitchableImage.vue";
+import AuthorizationNeeded from "@/components/HomeView/AuthorizationNeeded.vue";
+import NotificationsMain from "@/components/Notifications/NotificationsMain.vue";
+import { useUserStore } from "@/store";
+import { useRouter } from "vue-router";
+import { useUserApi } from "@/composables/api";
+import { convertFileToBase64String } from "@/composables/utils";
+import { FieldChecks, FieldsContainer } from "@/modules/validator";
+import { notification } from "@/types";
+import ModalComp from "@/components/UI/ModalComp.vue";
+import ThemeSwitcher from "@/components/Common/ThemeSwitcher.vue";
+
+const refModal = ref<InstanceType<typeof ModalComp> | undefined>();
+
+const router = useRouter();
+const userStore = useUserStore();
+const userApi = useUserApi();
+
+async function tryLogout() {
+    const result = await refModal.value?.open({ type: "cancel_leave" });
+    if (result === "leave") {
+        logout();
+    }
+}
+
+function logout() {
+    router.push("/login");
+    userStore.resetData();
+}
+
+const userDataEdited = ref(false);
+const userPasswordEdited = ref(false);
+
+const localUserData = ref<{ name: string; surname: string; image: string; imageFile?: File }>({
+    ...userStore.userData,
+    imageFile: undefined,
+});
+const localPasswords = ref({ oldPassword: "", newPassword: "", newPassword2: "" });
+
+const passwordButtonStyle = computed(() =>
+    !userPasswordEdited.value ||
+    (localPasswords.value.oldPassword !== "" && localPasswords.value.newPassword !== "" && localPasswords.value.newPassword2 !== "")
+        ? "primary"
+        : "disabled"
+);
+
+function startEdit() {
+    userDataEdited.value = true;
+}
+function stopEdit() {
+    userDataEdited.value = false;
+    userPasswordEdited.value = false;
+    localUserData.value = { ...userStore.userData };
+    localPasswords.value = { oldPassword: "", newPassword: "", newPassword2: "" };
+}
+
+const notifications = ref<notification[]>([]);
+
+async function tryChangeUserData() {
+    let errors = getUserDataFieldErrors();
+
+    notifications.value = errors;
+
+    if (errors.length > 0) return;
+
+    const resp = await userApi.changeUserData(localUserData.value);
+    userStore.setFieldValue("name", resp.name);
+    userStore.setFieldValue("surname", resp.surname);
+    userStore.setFieldValue("image", resp.image);
+
+    notifications.value = [{ text: "Данные успешно изменены", type: "success" }];
+
+    stopEdit();
+}
+
+async function changeLocalImageValue(file: File) {
+    console.log(file);
+    if (!file.type.includes("image")) {
+        alert("Необходимо выбрать изображение");
+        return;
+    }
+
+    localUserData.value.imageFile = file;
+    localUserData.value.image = await convertFileToBase64String(file);
+}
+
+function getUserDataFieldErrors() {
+    const container = new FieldsContainer();
+
+    container.addField("Имя", localUserData.value.name, [
+        FieldChecks.nonEmpty,
+        FieldChecks.onlyLettersWhitespaces,
+        FieldChecks.minLength(2),
+        FieldChecks.maxLength(20),
+    ]);
+    container.addField("Фамилия", localUserData.value.surname, [
+        FieldChecks.nonEmpty,
+        FieldChecks.onlyLettersWhitespaces,
+        FieldChecks.minLength(2),
+        FieldChecks.maxLength(20),
+    ]);
+
+    let errors: notification[] = [];
+    for (let [key, value] of container.fields) {
+        const error = value.tryGetFirstError();
+        if (error !== "") {
+            errors.push({ field: key, text: error, type: "warning" });
+        }
+    }
+
+    return errors;
+}
+
+function changePasswordButtonHandler() {
+    if (!userPasswordEdited.value) {
+        userPasswordEdited.value = true;
+    } else {
+        tryChangeUserPassword();
+    }
+}
+
+async function tryChangeUserPassword() {
+    let errors = getUserPasswordFieldErrors();
+
+    notifications.value = errors;
+
+    if (errors.length > 0) return;
+
+    const resp = await userApi.changeUserPassword(localPasswords.value);
+
+    notifications.value = [{ text: "Пароль успешно изменён", type: "success" }];
+
+    stopEdit();
+}
+
+function getUserPasswordFieldErrors() {
+    const container = new FieldsContainer();
+
+    container.addField("Старый пароль", localPasswords.value.oldPassword, [FieldChecks.nonEmpty]);
+
+    container.addField("Новый пароль", localPasswords.value.newPassword, [
+        FieldChecks.nonEmpty,
+        FieldChecks.minLength(6),
+        FieldChecks.maxLength(32),
+    ]);
+
+    let errors: notification[] = [];
+    for (let [key, value] of container.fields) {
+        const error = value.tryGetFirstError();
+        if (error !== "") {
+            errors.push({ field: key, text: error, type: "warning" });
+        }
+    }
+
+    if (localPasswords.value.newPassword !== localPasswords.value.newPassword2) {
+        errors.push({ field: "Новый пароль", text: "Пароли не совпадают.", type: "warning" });
+    }
+
+    return errors;
+}
+
+function fieldHasErrors(field: string) {
+    return notifications.value.some((x) => x.field === field);
+}
+
+watch(
+    () => userStore.userData.name,
+    (to) => (localUserData.value.name = to)
+);
+watch(
+    () => userStore.userData.surname,
+    (to) => (localUserData.value.surname = to)
+);
+
+onDeactivated(() => {
+    stopEdit();
+    notifications.value = [];
+});
+</script>
+
+<style lang="scss">
+.user {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    min-height: 100%;
+    padding: r(20);
+
+    &__container {
+        @include main-container;
+
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        padding: r(20);
+    }
+
+    &__user-data {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__image {
+        flex: 0 0 auto;
+        margin: 0 auto r(15) auto;
+    }
+
+    &__email {
+        //display: flex;
+        //align-items: center;
+    }
+
+    &__password {
+        display: flex;
+        flex-direction: column;
+        margin-top: r(25);
+    }
+
+    &__button {
+        align-self: center;
+        margin-top: r(15);
+    }
+
+    &__edit-toggle {
+        position: absolute;
+        top: r(20);
+        right: r(20);
+        width: r(30);
+        height: r(30);
+        color: color("ui-background");
+        cursor: pointer;
+    }
+
+    &__theme-switcher {
+        position: absolute;
+        top: r(20);
+        left: r(20);
+        width: r(30);
+        height: r(30);
+        color: color("ui-background");
+        cursor: pointer;
+    }
+
+    &__notifications {
+        position: fixed;
+        inset: auto 0 r(90) 0;
+    }
+}
+</style>

src/components/Intro/IntroMain.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="intro">
+        <SliderComp class="intro__slider" type="default" :automatic="false" @index="sliderIndexChanged">
+            <SliderTabComp>
+                <div class="intro__tab-content">
+                    <div class="intro__tab-image-container">
+                        <img class="intro__tab-image" src="/media/images/intro-image-1.webp" />
+                    </div>
+                    <div class="intro__tab-text">Подпись для первой картинки</div>
+                </div>
+            </SliderTabComp>
+            <SliderTabComp>
+                <div class="intro__tab-content">
+                    <div class="intro__tab-image-container">
+                        <img class="intro__tab-image" src="/media/images/intro-image-2.webp" />
+                    </div>
+                    <div class="intro__tab-text">Подпись для второй картинки</div>
+                </div>
+            </SliderTabComp>
+            <SliderTabComp>
+                <div class="intro__tab-content">
+                    <div class="intro__tab-image-container">
+                        <img class="intro__tab-image" src="/media/images/intro-image-3.webp" />
+                    </div>
+                    <div class="intro__tab-text">Подпись для третьей картинки</div>
+                </div>
+            </SliderTabComp>
+        </SliderComp>
+        <Transition name="intro__additional-container--transition">
+            <div class="intro__additional-container" v-show="isAdditionalShowed">
+                <div class="intro__additional-button" @click="additionalAction()">вход</div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from "@/store";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+const userStore = useUserStore();
+
+const isAdditionalShowed = ref(false);
+
+function sliderIndexChanged(index: number) {
+    isAdditionalShowed.value = index === 2;
+}
+
+function additionalAction() {
+    userStore.introWatched = true;
+    userStore.saveData();
+    router.push("/login");
+}
+</script>
+
+<style lang="scss">
+.intro {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &__slider {
+        width: 100%;
+    }
+
+    &__tab-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+        padding: r(60) 0;
+    }
+
+    &__tab-image-container {
+        flex: 8;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 0;
+    }
+
+    &__tab-image {
+        max-width: 80%;
+        max-height: 100%;
+    }
+
+    &__tab-text {
+        flex: 2;
+        display: flex;
+        align-items: center;
+        max-width: 90%;
+        text-align: center;
+    }
+
+    &__additional-container {
+        position: absolute;
+        bottom: r(60);
+        display: flex;
+        justify-content: center;
+        width: 100%;
+
+        &--transition {
+            &-enter-active,
+            &-leave-active {
+                transition: 0.28s ease;
+                transition-property: bottom, opacity;
+            }
+
+            &-enter-from,
+            &-leave-to {
+                bottom: r(30);
+                opacity: 0;
+            }
+        }
+    }
+
+    &__additional-button {
+        display: flex;
+        justify-content: center;
+        width: r(150);
+        padding: r(5) 0;
+        border: r(1) solid color("main-color");
+        border-radius: r(16);
+        color: color("main-color");
+        cursor: pointer;
+    }
+}
+</style>

src/components/Notifications/NotificationsMain.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="notifications">
+        <TransitionGroup name="notifications--transition">
+            <div
+                class="notifications__item"
+                :class="'notifications__item--' + notification.type"
+                v-for="notification in notifications"
+                :key="notification.field + notification.text"
+            >
+                <div class="notifications__item-name" v-if="notification.field">{{ notification.field }}:</div>
+                <div class="notifications__item-text">{{ notification.text }}</div>
+                <FontAwesomeIcon class="notifications__item-close" icon="xmark" @click="closeNotification(notification)" />
+                <div class="notifications__item-countdown"></div>
+            </div>
+        </TransitionGroup>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from "vue";
+import { notification } from "@/types";
+
+const props = defineProps<{ modelValue: notification[] }>();
+const emit = defineEmits(["update:modelValue"]);
+
+const notifications = computed({
+    get: () => props.modelValue,
+    set: (to) => {
+        emit("update:modelValue", to);
+    },
+});
+
+function setNotificationsTimeout() {
+    nextTick(() => {
+        notifications.value.forEach((x) => {
+            setTimeout(() => {
+                closeNotification(x);
+            }, 5000);
+        });
+    });
+}
+
+watch(
+    () => props.modelValue,
+    () => {
+        setNotificationsTimeout();
+    },
+    { deep: true }
+);
+
+watch(
+    () => notifications.value,
+    (to, from) => {
+        if (from.length > to.length) emit("update:modelValue", to);
+    },
+    { deep: true }
+);
+
+function closeNotification(notification: notification) {
+    notifications.value = notifications.value.filter((x) => x !== notification);
+}
+</script>
+
+<style lang="scss">
+.notifications {
+    z-index: 100;
+
+    &--transition {
+        &-enter-active {
+            transition: 0.18s 0.18s ease;
+        }
+        &-leave-active {
+            transition: 0.18s ease;
+        }
+
+        &-enter-from {
+            opacity: 0;
+            margin-bottom: r(-38);
+        }
+        &-leave-to {
+            opacity: 0;
+        }
+
+        &-move {
+            transition: all 0.18s ease;
+        }
+    }
+
+    &__item {
+        $__item: &;
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: r(5);
+        padding: r(10) r(20);
+        margin-top: r(1);
+        font-size: r(18);
+        color: color("ui-color-on-background");
+
+        &-field {
+            flex: 0 0 r(70);
+        }
+
+        &-text {
+            flex: 1 1;
+        }
+
+        &-close {
+            height: r(14);
+            width: r(20);
+            cursor: pointer;
+        }
+
+        &--success {
+            background: color("success-color");
+        }
+
+        &--warning {
+            background: color("warning-color");
+        }
+    }
+}
+</style>

src/components/UI/ButtonComp.vue

@@ -0,0 +1,152 @@
+<template>
+    <button class="button-comp" :class="type != null ? `button-comp--${type}` : `button-comp--default`">
+        <div class="button-comp__ripple" @mousedown="startWave" ref="refRipple">
+            <div class="button-comp__content">{{ value }}</div>
+        </div>
+        <TransitionGroup name="button-comp__ripple-wave--transition">
+            <div
+                class="button-comp__ripple-wave"
+                v-for="wave in waves"
+                :key="wave.id"
+                :style="{ left: `${wave.x}px`, top: `${wave.y}px` }"
+            ></div>
+        </TransitionGroup>
+    </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+interface wave {
+    x: number;
+    y: number;
+    id: number;
+}
+
+defineProps<{ value: string; type: "default" | "primary" | "disabled" | undefined }>();
+
+//#region handling ripple waves
+const refRipple = ref<HTMLDivElement | undefined>(undefined);
+const waves = ref<wave[]>([]);
+
+function startWave(event: MouseEvent | TouchEvent) {
+    if (!refRipple.value || (event.type !== "mousedown" && event.type !== "touchstart")) return;
+
+    const rect = refRipple.value.getBoundingClientRect();
+    let x, y;
+    const id = Math.random();
+
+    if (event instanceof MouseEvent) {
+        x = event.clientX - rect.left - 80;
+        y = event.clientY - rect.top - 80;
+    } else {
+        x = event.changedTouches[0].clientX - rect.left - 80;
+        y = event.changedTouches[0].clientY - rect.top - 80;
+    }
+
+    let wave = { x, y, id };
+    addWave(wave);
+
+    setTimeout(() => {
+        removeWave(wave);
+    }, 800);
+}
+
+function addWave(wave: wave) {
+    waves.value.push(wave);
+}
+
+function removeWave(wave: wave) {
+    waves.value = waves.value.filter((x) => x.id !== wave.id);
+}
+//#endregion
+</script>
+
+<style lang="scss">
+.button-comp {
+    position: relative;
+    border-radius: r(3);
+    height: auto;
+    min-width: r(88);
+    line-height: 1.4;
+    font-size: r(18);
+    text-transform: uppercase;
+    letter-spacing: 0;
+    color: color("ui-color-on-background");
+
+    cursor: pointer;
+
+    user-select: none;
+    overflow: hidden;
+    outline: none;
+    border: none;
+
+    transition: background-color 0.18s ease;
+
+    &--default {
+        background: color("main-background", $lightness: -0%);
+        // box-shadow: 0 r(2) r(2) 0 color("ui-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-color", $alpha: -0.8),
+        //     0 r(1) r(5) 0 color("ui-color", $alpha: -0.88);
+        color: color("main-color");
+
+        &:hover {
+            background: color("main-background", $lightness: -6%);
+        }
+    }
+
+    &--primary {
+        background: color("theme-color");
+        box-shadow: 0 r(2) r(2) 0 color("theme-color", $alpha: -0.86), 0 r(3) r(1) r(-2) color("theme-color", $alpha: -0.8),
+            0 r(1) r(5) 0 color("theme-color", $alpha: -0.88);
+
+        &:hover {
+            background: color("theme-color", $lightness: -3%);
+        }
+    }
+
+    &--disabled {
+        background: color("ui-background");
+        box-shadow: 0 r(2) r(2) 0 color("ui-background", $alpha: -0.86), 0 r(3) r(1) r(-2) color("ui-background", $alpha: -0.8),
+            0 r(1) r(5) 0 color("ui-background", $alpha: -0.88);
+
+        &:hover {
+            background: color("ui-background", $lightness: -3%);
+        }
+    }
+
+    &__ripple {
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: r(12) r(30);
+    }
+
+    &__ripple-wave {
+        position: absolute;
+        width: r(160);
+        height: r(160);
+        border-radius: 50%;
+        background: black;
+        pointer-events: none;
+        opacity: 0;
+        transform: scale(2);
+
+        &--transition {
+            &-enter-active {
+                transition: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
+                transition-property: opacity, transform;
+            }
+            &-enter-from {
+                opacity: 0.26;
+                transform: scale(0.26);
+            }
+        }
+    }
+
+    &__content {
+        color: inherit;
+    }
+}
+</style>

src/components/UI/ComboBoxComp.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="combo-box-comp" :class="{ 'combo-box-comp--opened': opened }" v-click-outside="closeList">
+        <div class="combo-box-comp__input" @click="toggleOpened()">
+            <div class="combo-box-comp__input-text">
+                {{ displayedItem?.title }}
+            </div>
+            <FontAwesomeIcon class="combo-box-comp__input-toggle" icon="chevron-down" />
+        </div>
+        <Transition name="combo-box-comp__list--transition">
+            <div class="combo-box-comp__list" v-if="opened">
+                <div class="combo-box-comp__item" v-for="item in props.list" :key="item" @click="selectItem(item.id)">
+                    {{ item.title }}
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { ComboBoxItem } from "@/types/index";
+import vClickOutside from "@/directives/ClickOutside";
+
+const props = defineProps<{ list: ComboBoxItem[]; modelValue: ComboBoxItem | undefined }>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const displayedItem = computed(() => props.modelValue);
+
+const opened = ref(false);
+
+function toggleOpened() {
+    opened.value ? closeList() : openList();
+}
+
+function openList() {
+    opened.value = true;
+}
+
+function closeList() {
+    opened.value = false;
+}
+
+function selectItem(id: number) {
+    emit(
+        "update:modelValue",
+        props.list.find((x) => x.id === id)
+    );
+    closeList();
+}
+</script>
+
+<style lang="scss">
+.combo-box-comp {
+    $p: &;
+
+    position: relative;
+    display: inline-block;
+    height: r(50);
+    min-width: r(200);
+    font-size: r(10);
+
+    &__input {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 r(15);
+        background: color("ui-background");
+        border-radius: r(10);
+        border: r(2) solid color("border");
+        cursor: pointer;
+        transition: border-color 0.18s ease;
+
+        &:hover {
+            border: r(2) solid color("border-hover");
+        }
+    }
+
+    &__input-toggle {
+        transition: transform 0.18s ease;
+    }
+
+    &__list {
+        position: relative;
+        margin: 0 r(8);
+        background: color("ui-background");
+        border: r(2) solid color("border-active");
+        border-top-width: 0;
+        z-index: 10;
+
+        &--transition {
+            &-enter-active,
+            &-leave-active {
+                transition: opacity 0.18s ease;
+            }
+            &-enter-from,
+            &-leave-to {
+                opacity: 0;
+            }
+        }
+    }
+
+    &__item {
+        cursor: pointer;
+        padding: r(7);
+
+        transition: background-color 0.18s ease;
+
+        &:hover {
+            background: color("ui-background-hover");
+        }
+    }
+
+    &--opened {
+        #{$p}__input {
+            border: r(2) solid color("border-active");
+        }
+        #{$p}__input-toggle {
+            transform: rotate(180deg);
+        }
+    }
+}
+</style>