added jackpot-history page

homelogoDuable

.gitignore

@@ -0,0 +1,363 @@
+## Ignore Visual Studio temporary files, build results, and
+## files generated by popular Visual Studio add-ons.
+##
+## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# User-specific files (MonoDevelop/Xamarin Studio)
+*.userprefs
+
+# Mono auto generated files
+mono_crash.*
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Oo]ut/
+[Ll]og/
+[Ll]ogs/
+
+# Visual Studio 2015/2017 cache/options directory
+.vs/
+# Uncomment if you have tasks that create the project's static files in wwwroot
+#wwwroot/
+
+# Visual Studio 2017 auto generated files
+Generated\ Files/
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
+
+# Build Results of an ATL Project
+[Dd]ebugPS/
+[Rr]eleasePS/
+dlldata.c
+
+# Benchmark Results
+BenchmarkDotNet.Artifacts/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# StyleCop
+StyleCopReport.xml
+
+# Files built by Visual Studio
+*_i.c
+*_p.c
+*_h.h
+*.ilk
+*.meta
+*.obj
+*.iobj
+*.pch
+*.pdb
+*.ipdb
+*.pgc
+*.pgd
+*.rsp
+*.sbr
+*.tlb
+*.tli
+*.tlh
+*.tmp
+*.tmp_proj
+*_wpftmp.csproj
+*.log
+*.vspscc
+*.vssscc
+.builds
+*.pidb
+*.svclog
+*.scc
+
+# Chutzpah Test files
+_Chutzpah*
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+# Visual Studio profiler
+*.psess
+*.vsp
+*.vspx
+*.sap
+
+# Visual Studio Trace Files
+*.e2e
+
+# TFS 2012 Local Workspace
+$tf/
+
+# Guidance Automation Toolkit
+*.gpState
+
+# ReSharper is a .NET coding add-in
+_ReSharper*/
+*.[Rr]e[Ss]harper
+*.DotSettings.user
+
+# TeamCity is a build add-in
+_TeamCity*
+
+# DotCover is a Code Coverage Tool
+*.dotCover
+
+# AxoCover is a Code Coverage Tool
+.axoCover/*
+!.axoCover/settings.json
+
+# Coverlet is a free, cross platform Code Coverage Tool
+coverage*.json
+coverage*.xml
+coverage*.info
+
+# Visual Studio code coverage results
+*.coverage
+*.coveragexml
+
+# NCrunch
+_NCrunch_*
+.*crunch*.local.xml
+nCrunchTemp_*
+
+# MightyMoose
+*.mm.*
+AutoTest.Net/
+
+# Web workbench (sass)
+.sass-cache/
+
+# Installshield output folder
+[Ee]xpress/
+
+# DocProject is a documentation generator add-in
+DocProject/buildhelp/
+DocProject/Help/*.HxT
+DocProject/Help/*.HxC
+DocProject/Help/*.hhc
+DocProject/Help/*.hhk
+DocProject/Help/*.hhp
+DocProject/Help/Html2
+DocProject/Help/html
+
+# Click-Once directory
+publish/
+
+# Publish Web Output
+*.[Pp]ublish.xml
+*.azurePubxml
+# Note: Comment the next line if you want to checkin your web deploy settings,
+# but database connection strings (with potential passwords) will be unencrypted
+*.pubxml
+*.publishproj
+
+# Microsoft Azure Web App publish settings. Comment the next line if you want to
+# checkin your Azure Web App publish settings, but sensitive information contained
+# in these scripts will be unencrypted
+PublishScripts/
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+# The packages folder can be ignored because of Package Restore
+**/[Pp]ackages/*
+# except build/, which is used as an MSBuild target.
+!**/[Pp]ackages/build/
+# Uncomment if necessary however generally it will be regenerated when needed
+#!**/[Pp]ackages/repositories.config
+# NuGet v3's project.json files produces more ignorable files
+*.nuget.props
+*.nuget.targets
+
+# Microsoft Azure Build Output
+csx/
+*.build.csdef
+
+# Microsoft Azure Emulator
+ecf/
+rcf/
+
+# Windows Store app package directories and files
+AppPackages/
+BundleArtifacts/
+Package.StoreAssociation.xml
+_pkginfo.txt
+*.appx
+*.appxbundle
+*.appxupload
+
+# Visual Studio cache files
+# files ending in .cache can be ignored
+*.[Cc]ache
+# but keep track of directories ending in .cache
+!?*.[Cc]ache/
+
+# Others
+ClientBin/
+~$*
+*~
+*.dbmdl
+*.dbproj.schemaview
+*.jfm
+*.pfx
+*.publishsettings
+orleans.codegen.cs
+
+# Including strong name files can present a security risk
+# (https://github.com/github/gitignore/pull/2483#issue-259490424)
+#*.snk
+
+# Since there are multiple workflows, uncomment next line to ignore bower_components
+# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
+#bower_components/
+
+# RIA/Silverlight projects
+Generated_Code/
+
+# Backup & report files from converting an old project file
+# to a newer Visual Studio version. Backup files are not needed,
+# because we have git ;-)
+_UpgradeReport_Files/
+Backup*/
+UpgradeLog*.XML
+UpgradeLog*.htm
+ServiceFabricBackup/
+*.rptproj.bak
+
+# SQL Server files
+*.mdf
+*.ldf
+*.ndf
+
+# Business Intelligence projects
+*.rdl.data
+*.bim.layout
+*.bim_*.settings
+*.rptproj.rsuser
+*- [Bb]ackup.rdl
+*- [Bb]ackup ([0-9]).rdl
+*- [Bb]ackup ([0-9][0-9]).rdl
+
+# Microsoft Fakes
+FakesAssemblies/
+
+# GhostDoc plugin setting file
+*.GhostDoc.xml
+
+# Node.js Tools for Visual Studio
+.ntvs_analysis.dat
+node_modules/
+
+# Visual Studio 6 build log
+*.plg
+
+# Visual Studio 6 workspace options file
+*.opt
+
+# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
+*.vbw
+
+# Visual Studio LightSwitch build output
+**/*.HTMLClient/GeneratedArtifacts
+**/*.DesktopClient/GeneratedArtifacts
+**/*.DesktopClient/ModelManifest.xml
+**/*.Server/GeneratedArtifacts
+**/*.Server/ModelManifest.xml
+_Pvt_Extensions
+
+# Paket dependency manager
+.paket/paket.exe
+paket-files/
+
+# FAKE - F# Make
+.fake/
+
+# CodeRush personal settings
+.cr/personal
+
+# Python Tools for Visual Studio (PTVS)
+__pycache__/
+*.pyc
+
+# Cake - Uncomment if you are using it
+# tools/**
+# !tools/packages.config
+
+# Tabs Studio
+*.tss
+
+# Telerik's JustMock configuration file
+*.jmconfig
+
+# BizTalk build output
+*.btp.cs
+*.btm.cs
+*.odx.cs
+*.xsd.cs
+
+# OpenCover UI analysis results
+OpenCover/
+
+# Azure Stream Analytics local run output
+ASALocalRun/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# NVidia Nsight GPU debugger configuration file
+*.nvuser
+
+# MFractors (Xamarin productivity tool) working folder
+.mfractor/
+
+# Local History for Visual Studio
+.localhistory/
+
+# BeatPulse healthcheck temp database
+healthchecksdb
+
+# Backup folder for Package Reference Convert tool in Visual Studio 2017
+MigrationBackup/
+
+# Ionide (cross platform F# VS Code tools) working folder
+.ionide/
+
+# Fody - auto-generated XML schema
+FodyWeavers.xsd

README.md

@@ -1,30 +1,45 @@
+![Lucky Diamond](https://github.com/danilt2000/LuckyDiamond/assets/96600211/26167263-51c4-4ae6-96e9-c941943c913f)
+# Проект "Lucky Diamond Casino"
+
+Сайт Онлайн-Казино на игровую валюту Майнкрафт сервера СПМ.
+
+## Вклад и Разработка
+
+Если вы хотите дополнить или улучшить визуал нашего сайта, то сделайте pull запрос к этому репозиторию.
+
+### Запуск Проекта
+
+- Переход к папке проекта:
+`cd LuckyDiamond/luckydiamond`
+
+- Установка всех зависимостей проекта:
+`npm i`
+
+- Запуск локального сервера:
+`npm run serve`
+
+### Добавление Куки-Файлов для локального сервера
+
+- Зайти на vercel страницу
+- Нажать сочетание клавиш ctrl + shift + i
+- Перейти в Application(Приложение)
+- Кликнуть на файлы Куки
+- Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName
+- Вставить значения и названия на Локальный хост
+- Обновить страницу
 
 
+## Важные ссылки
+
+[Документация SPWorlds](https://github.com/sp-worlds/api-docs)
+
+[DiscordAPI](https://discord.com/developers/docs/topics/oauth2#oauth2)
+
+[Отображение Скинов](https://visage.surgeplay.com/index.html)
+
+[Вдохновление](https://cs.fail/en/)
 
 
+## Наша Команда
 
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-  
-</head>
-<body>
-
-  
-<h1>Важные ссылки</h1> 
-<h2>Отображение головы</h2>
-https://visage.surgeplay.com/index.html
-
-   ![image](https://visage.surgeplay.com/head/512/Hepatir.png)
-<h2>Sp api</h2>
-https://github.com/sp-worlds/api-docs
-<h2>Discord api </h2>
-     https://discord.com/developers/docs/topics/oauth2#oauth2
-
-
-<h2>Откуда берём вдохновление </h2>
-     https://cs.fail/en/
-</body>
-</html>
- 
+![Group 65](https://github.com/danilt2000/LuckyDiamond/assets/96600211/fb41b4fa-24d4-4372-8b58-089d1c9d4ca4)

luckydiamond/package-lock.json

@@ -11,14 +11,18 @@
         "@popperjs/core": "^2.11.8",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "axios": "^1.6.7",
         "bootstrap": "^5.3.2",
         "core-js": "^3.8.3",
         "howler": "^2.2.4",
         "mitt": "^3.0.1",
+        "save": "^2.9.0",
         "swiper": "^11.0.5",
         "vue": "^3.2.13",
+        "vue-chart-3": "^3.1.8",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
+        "vue3-carousel": "^0.3.1",
         "vue3-recaptcha2": "^1.8.0"
       },
       "devDependencies": {
@@ -3810,6 +3814,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3856,6 +3865,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.3.0.tgz",
@@ -4305,6 +4324,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
+      "peer": true
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -4576,6 +4601,17 @@
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -5357,6 +5393,14 @@
       "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.3.tgz",
       "integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5521,8 +5565,7 @@
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "node_modules/easy-stack": {
       "version": "1.0.1",
@@ -6309,6 +6352,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "dependencies": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6596,10 +6653,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
-      "dev": true,
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "funding": [
         {
           "type": "individual",
@@ -6615,6 +6671,19 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -6646,6 +6715,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -7788,6 +7862,16 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -8111,6 +8195,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ=="
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -8204,7 +8293,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8213,7 +8301,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8230,6 +8317,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/mingo": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.4.10.tgz",
+      "integrity": "sha512-/pOGeZKcZrKKw8YkCMKn9+XPiUYeNhkfaVbTn9tqvZvfccxf1idk8ezSulecZmPdKJLibNDtp4UBfDK3nzvMrQ=="
+    },
     "node_modules/mini-css-extract-plugin": {
       "version": "2.7.6",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz",
@@ -9048,6 +9140,14 @@
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.1.tgz",
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q=="
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -9768,6 +9868,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -10194,6 +10299,22 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "dependencies": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      }
+    },
+    "node_modules/save/node_modules/async": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.5.tgz",
+      "integrity": "sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg=="
+    },
     "node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -10647,6 +10768,17 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -10692,6 +10824,15 @@
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.6.0.tgz",
       "integrity": "sha512-aFZ19IgVmhdB2uX599ve2kE6BIE3YMnQ6Gp6BURhW/oIzpXGKr878TQfAQZn1+i0Flcc/UKUy1gOlcfaUBCryg=="
     },
+    "node_modules/stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -11115,6 +11256,11 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
+    },
     "node_modules/thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -11478,6 +11624,21 @@
         }
       }
     },
+    "node_modules/vue-chart-3": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
+      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
+      "dependencies": {
+        "@vue/runtime-core": "latest",
+        "@vue/runtime-dom": "latest",
+        "csstype": "latest",
+        "lodash-es": "latest"
+      },
+      "peerDependencies": {
+        "chart.js": "=> ^3.1.0",
+        "vue": ">= 3"
+      }
+    },
     "node_modules/vue-demi": {
       "version": "0.14.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
@@ -11782,6 +11943,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
+      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue3-recaptcha2": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz",

luckydiamond/package.json

@@ -12,14 +12,18 @@
     "@popperjs/core": "^2.11.8",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "axios": "^1.6.7",
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
     "howler": "^2.2.4",
     "mitt": "^3.0.1",
+    "save": "^2.9.0",
     "swiper": "^11.0.5",
     "vue": "^3.2.13",
+    "vue-chart-3": "^3.1.8",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",
+    "vue3-carousel": "^0.3.1",
     "vue3-recaptcha2": "^1.8.0"
   },
   "devDependencies": {

luckydiamond/public/index.html

@@ -17,6 +17,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
+  <link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
   <title>LuckyDiamond</title>
 </head>
 
@@ -35,5 +38,5 @@
 <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/core"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/validators"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </html>

luckydiamond/src/assets/css/ComponentsStyles/Help.css

@@ -0,0 +1,109 @@
+.box_help {
+    margin-left: 36px;
+    margin-top: 35px;
+}
+.Heading_p1 {
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+}
+.heding2 {
+
+}
+.heding2_text {
+    width: 949px;
+    height: 132px;
+    margin-top: 17px;
+    margin-bottom: 17px;
+}
+.Heading_p1 a {
+    color: #5865F2 ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+}
+.questions {
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+}
+.questions1  {
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+    background-color:#3f3f3f;
+    width: 426px;
+    height: 30px;
+    border-radius: 8px ;
+    justify-content: center;
+    align-content: center;
+    display: flex;
+}
+.questions1 b {
+    margin-top: 4.3px;
+}
+.questions1 img {
+   margin-left: 30px;
+   width: 16px;
+   margin-top: 6px;
+}
+.text_questions {
+    width: 840px;
+    height: 132px;
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+    
+}
+.text_questions p {
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+}
+.questions2 {
+    font-size: 18px ;
+    font-family: Montserrat Alternates;
+    text-decoration: none;
+    width: 544px;
+    height: 27px;
+    
+    
+    align-items: flex-start;
+    display: flex;
+}
+.questions2 img {
+margin-left: 10px;
+width: 16px;
+margin-top: 3.5px;
+
+}
+.Social1text  {
+    margin-top: 0.5vh;
+    font-family: Montserrat Alternates;
+}
+.Social1where {
+    flex-direction: row;
+    width: 400px;
+    display: flex;
+    justify-content: space-around;
+    align-content: center;
+    margin-top: 3vh;
+}
+
+@media (max-height: 879px) {
+    .Social1where {
+        margin-top: 0; 
+    }
+}
+.questions_box {
+    margin-bottom: 24px;
+}
+.text_questions {
+    margin-left: 110px;
+}
+.questions1 {
+    margin-bottom: 20px;
+}
+.questions2 {
+    margin-top: 25px;
+    margin-right:40px ;
+}

luckydiamond/src/assets/css/ComponentsStyles/asidebar.css

@@ -9,6 +9,33 @@
     display: flex;
     align-items: center;
     flex-direction: column;
+    margin-top: 12%;
+}
+
+.menu__content--jackpot-icon{
+    margin-left: -5px;
+    transition: 250ms;
+    width: 125%;
+    height: 125%;
+}
+
+.menu__content--jackpot-icon:hover {
+    margin-left: -15px;
+    width: 175%;
+    height: 175%;
+}
+
+.menu__content--chest-icon {
+    margin-left: -1px;
+    transition: 250ms;
+    width: 80px;
+    height: 80px;
+}
+
+.menu__content--chest-icon:hover {
+    margin-left: -2px;
+    height: 100px;
+    width: 100px;
 }
 
 .menu__btn--home {
@@ -19,8 +46,22 @@
     display: flex;
     align-items: center;
     height: 100%;
+    width: 100%;
+}
+.fotosloti {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0.1vh;
+}
+.fotosloti a img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    max-width: 100%;
+    max-height: 100%;
 }
-
 .menu__content--gamemodes {
     background: rgba(217, 217, 217, 0.12);
     filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
@@ -36,11 +77,29 @@
 }
 
 .menu__content--cruch-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    transition: 250ms;
+    width: 100%;
+    height: 100%;
+}
+
+.menu__content--cruch-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--bomb-icon {
-    margin-left: 6px
+    margin-left: 6px;
+    width: 100%;
+    height: 100%;
+    transition: 250ms;
+}
+
+.menu__content--bomb-icon:hover {
+    margin-left: 0px;
+    width: 125%;
+    height: 125%;
 }
 
 .menu__content--gamemodes {
@@ -58,8 +117,6 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    max-width: 100%;
-    max-height: 100%;
 }
 
 .menu__btn--settings {

luckydiamond/src/assets/css/ComponentsStyles/chat.css

@@ -18,6 +18,7 @@
 
 .chat {
     margin: 1% 3.2% 0 0;
+    word-break: break-all;
 }
 
 .chat__content {
@@ -40,7 +41,11 @@
     font-size: 18px;
     font-weight: 700;
 }
-
+.chat__mute-button {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+  }
 /* .content p {
     width: 80%;
     word-wrap: break-word;
@@ -55,7 +60,8 @@
 }
 
 .chat__content--users {
-    height: 590px;
+    /* height: 590px; */
+    height: 70vh;
     width: auto;
     overflow-y: auto;
     overflow-x: auto;
@@ -153,9 +159,9 @@
     background: #22252F;
     color: #A9A99D;
     border: none;
-    width: 600px; /* или другое значение, которое вы хотите использовать */
+    width: 600px;
     box-sizing: border-box;
-    resize: none; /* Убирает ручку изменения размера */
+    resize: none;
 }
 
 .write__content textarea:focus {
@@ -181,4 +187,12 @@
 
 .write__content button:disabled {
     cursor: not-allowed;
+}
+
+.system-message {
+    background-color: rgb(1, 56, 74);
+}
+
+.mention-message {
+    background-color: rgb(169, 113, 0);
 }

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -0,0 +1,810 @@
+
+.info {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 732px;
+    margin-top: 10px;
+   
+}
+.bottom_card {
+    width: 1332px;
+    height: 269px;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+    margin-left: 295px;
+}
+.top_card {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-left: 287px;
+    
+}
+
+
+/*beginning Hepatir_card-2 2*/
+
+.Hepatir_card {
+    width: 250px;
+    height: 443px;
+    background-color: #413C3B;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.text_2 {
+    width: 244px;
+    height: 220px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.whatjob_2 p {
+    margin-left: 3px;
+}
+.whatjob2_2 p {
+    margin-left: 3px;
+}
+.whatjob_2 {
+    display: flex;
+    width: 206px;
+    height: 16px;
+    margin-left: 22px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.whatjob_2 img {
+    width: 21px;
+    height: 21px;
+}
+.whatjob2_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 22px;
+    
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.whatjob2_2 img {
+    width: 21px;
+    height: 21px;
+}
+.skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://avatar.spworlds.ru/front/212/Hepatir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+}
+.skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+ 
+/*the and Hepatir_card 1*/
+
+
+/*beginning Rafael1209_card 2*/
+.Rafael1209_card {
+    width: 250px;
+    height: 443px;
+    background-color: #636363;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.Rafael1209_text_2 {
+    width: 244px;
+    height: 220px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.Rafael1209_aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.Rafael1209_aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.Rafael1209_aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.Rafael1209_whatjob_2 {
+    display: flex;
+    width: 206px;
+    height: 16px;
+    margin-left: 22px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.Rafael1209_whatjob_2 img {
+    width: 21px;
+    height: 21px;
+}
+.Rafael1209_whatjob_2 p {
+    margin-left: 3px;
+}
+.Rafael1209_whatjob2_2 p {
+    margin-left: 3px;
+}
+.Rafael1209_whatjob2_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.Rafael1209_whatjob2_2 img {
+    width: 25px;
+    height: 24px;
+}
+.Rafael1209_skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.Rafael1209_skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://avatar.spworlds.ru/front/212/rafael1209.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+}
+.Rafael1209_skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and Rafael1209_card 1*/
+
+
+/*beginning Ckutls_card 2*/
+.Ckutls__card {
+    width: 250px;
+    height: 443px;
+    background-color: #B88484;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.Ckutls__text_2 {
+    width: 244px;
+    height: 219.7px;
+    display: inline-block;
+    flex-flow: column-reverse;
+   
+}
+
+.Ckutls__aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.Ckutls__aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.Ckutls__aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.Ckutls__whatjob_1 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+}
+.Ckutls__whatjob_1 img {
+    width: 15px;
+    height: 17px;
+}
+.Ckutls__whatjob_1 p {
+    margin-left: 3px;
+}
+.Ckutls__whatjob_2 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 10px;
+}
+.Ckutls__whatjob_2 img {
+    width: 15px;
+    height: 17px;
+}
+.Ckutls__whatjob_2 p {
+    margin-left: 3px;
+}
+.Ckutls__whatjob_3 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 9px;
+}
+.Ckutls__whatjob_3 img {
+    width: 17px;
+    height: 15px;
+}
+.Ckutls__whatjob_3 p {
+    margin-left: 3px;
+}
+.Ckutls__skin_2 {
+    width: 244px;
+    height: 221px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 3px;
+}
+.Ckutls__skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://avatar.spworlds.ru/front/212/Ckutls_.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+}
+.Ckutls__skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and Ckutls_card 1*/
+
+/*beginning FUpir_card 2*/
+.FUpir_card {
+    width: 250px;
+    height: 443px;
+    background-color: #C58E74;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.FUpir_text_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.FUpir_aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.FUpir_aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.FUpir_aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.FUpir_whatjob_1 {
+    display: flex;
+    width: 206px;
+    height: 24px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 24px;
+    
+}
+.FUpir_whatjob_1 img {
+    width: 25px;
+    height: 24px;
+}
+.FUpir_whatjob_1 p {
+    margin-left: 3px;
+    margin-top: 4px;
+}
+
+.FUpir_skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.FUpir_skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://avatar.spworlds.ru/front/212/FUpir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 3px;
+}
+.FUpir_skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and FUpir_card 1*/
+/*beginning Swino4ka_card 1*/
+.Swino4ka_card {
+    width: 250px;
+    height: 443px;
+    background-color: #6b4d3f;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    border-radius: 22px;
+}
+.Swino4ka_text_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    flex-flow: column-reverse;
+    
+}
+
+.Swino4ka_aboutinfo_2 {
+    margin-top: 30px;
+    margin-left: 19px;
+    
+}
+.Swino4ka_aboutinfo_2 p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 79px;
+    height: 19px;
+    margin-left: 4px;
+}
+.Swino4ka_aboutinfo_2 h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    width: 177px;
+    height: 37px;
+    line-height: 30px;
+}
+.Swino4ka_whatjob_1 {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    margin-left: 19px;
+    font-family: 'Montserrat';
+    margin-top: 30px;
+    
+}
+.Swino4ka_whatjob_1 img {
+    width: 15px;
+    height: 17px;
+}
+.Swino4ka_whatjob_1 p {
+    margin-left: 3px;
+    
+}
+
+.Swino4ka_skin_2 {
+    width: 244px;
+    height: 221.5px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.Swino4ka_skin_2_skin {
+    width: 212px;
+    height: 212px;
+    background-image: url(https://avatar.spworlds.ru/front/212/Swino4ka.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 3px;
+}
+.Swino4ka_skinicons1 {
+   justify-content: space-around;
+    display: flex;
+}
+/*the and Swino4ka_card 1*/
+/*beginning busha888_card 1*/
+.busha888_card {
+    width: 422px;
+    height: 269px;
+    flex-shrink: 0;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    background-color: #742271;
+    display: flex;
+    flex-direction: row;
+    
+}
+
+.text {
+    width: 211px;
+    height: 269px;
+
+ 
+}
+.aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 97px;
+    height: 16px;
+}
+.aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.whatjob p {
+    margin-left: 3px;
+}
+.whatjob img {
+    width: 15px;
+    height: 17px;
+}
+.icons {
+    width: 162px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    
+    margin-top: 95px;
+    margin-left: 27px;
+    margin-bottom: 11px;
+    
+}
+.icons img {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    
+    
+}
+.skin {
+    margin-right: 13px;
+    margin-top: 51px;
+    margin-bottom: 3px;
+    
+    
+}
+.skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and busha888_card 1*/
+
+/*beginning GEDPOOL31_card 1*/
+.GEDPOOL31_card {
+    width: 422px;
+    height: 269px;
+    flex-direction: row;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    background-color: #393A3A;
+    display: flex;
+  
+
+}
+
+.GEDPOOL31_text {
+    width: 200px;
+    height: 269px;
+
+ 
+}
+.GEDPOOL31_aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.GEDPOOL31_aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 200px;
+    height: 16px;
+   
+}
+.GEDPOOL31_aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.GEDPOOL31_whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.GEDPOOL31_whatjob p {
+    margin-left: 3px;
+    margin-top: 3px;
+}
+.GEDPOOL31_whatjob img {
+    width: 25px;
+    height: 25px;
+}
+.GEDPOOL31_icons {
+    width: 79px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    margin-top: 95px;
+    margin-left: 72px;
+    margin-bottom: 11px;
+}
+.GEDPOOL31_icons img {
+    display: flex;
+    width: 36px;
+    height: 36px;
+}
+.GEDPOOL31_skin {   
+    margin-top: 51px;
+    margin-bottom: 3px;
+    display: flex;
+    width: 212px;
+    height: 212px;
+}
+.GEDPOOL31_skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and GEDPOOL31_card 1*/
+
+/*beginning CLARFFY_card 1*/
+.CLARFFY_card {
+    width: 422px;
+    height: 269px;
+    flex-direction: row;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    border-color: #595959;
+    background-color: #E2B374;
+    display: flex;
+  
+
+}
+
+.CLARFFY_text {
+    width: 211px;
+    height: 269px;
+
+ 
+}
+.CLARFFY_aboutinfo {
+    margin-top: 30px;
+    margin-left: 15px;
+    
+    
+}
+.CLARFFY_aboutinfo p {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 14px;
+    width: 97px;
+    height: 16px;
+}
+.CLARFFY_aboutinfo h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+    
+}
+.CLARFFY_whatjob {
+    display: flex;
+    width: 183px;
+    height: 16px;
+    
+    margin-left: 15px;
+    font-family: 'Montserrat';
+   
+    margin-top: 30px;
+}
+.CLARFFY_whatjob p {
+    margin-left: 3px;
+    margin-top: 3px;
+}
+.CLARFFY_whatjob img {
+    width: 25px;
+    height: 24px;
+}
+.CLARFFY_icons {
+    width: 79px;
+    height: 36px; 
+    justify-content: space-around;
+    display: flex;
+    margin-top: 95px;
+    margin-left: 72px;
+    margin-bottom: 11px;
+}
+.CLARFFY_icons img {
+    width: 36px;
+    height: 36px;
+}
+.CLARFFY_skin {
+    margin-right: 13px;
+    margin-top: 51px;
+    margin-bottom: 3px;
+    display: flex;
+    width: 212px;
+    height: 212px;
+}
+.CLARFFY_skin img {
+    width: 212px;
+    height: 212px;
+}
+/*the and CLARFFY_card 1*/
+ 
+@media only screen and (min-width: 2048px) { 
+
+    .info {
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 732px;
+        margin-top: 80px;
+       
+        
+        
+    }
+    .top_card {
+        width: 90%;
+    }
+}
+
+@media (max-width: 1700px) {
+    .info {
+        flex-direction: column;
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        width: 1332px;
+        height: 732px;
+        margin-top: 10px;
+        margin-left: 1px;
+        /* overflow-y: auto; */
+    }
+    .bottom_card {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        width: 865px;
+        margin-right: 470px;
+        }
+        
+        .megatntmega_card {
+        margin: 0 auto;
+        }
+        
+        .busha888_card {
+        margin: 0 auto;
+        }
+        
+        .CLARFFY_card {
+        margin: 0 auto;
+        margin-top: 15px;
+        }
+        
+    .top_card {
+        width: 1200px;
+        height: 443px;
+        display: flex;
+        justify-content: center;
+        margin-right: 450px;
+        
+    }
+    .Hepatir_card {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    .FUpir_card {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+    
+    }
+
+
+
+
+
+
+

luckydiamond/src/assets/css/ComponentsStyles/header.css

@@ -24,6 +24,11 @@
     font-weight: 700;
     font-size: 18px;
     margin-right: 3em;
+    transition: 250ms;
+}
+
+.header__nav nav a:hover {
+    color: #EF4444;
 }
 
 .header__nav--now {
@@ -84,6 +89,7 @@
     padding: 20px 23px 20px 23px;
     text-decoration: none;
     margin-left: -15%;
+    transition: 200ms;
 }
 
 .header__auth--discord {

luckydiamond/src/assets/css/ComponentsStyles/notification.css

@@ -2,10 +2,12 @@
     position: absolute;
     top: 0%;
     left: 34%;
-    background: #000;
+    background: #232630;
     width: 20%;
     height: 5%;
     z-index: 1000;
+    border-radius: 10px;
+    font-family: Montserrat Alternates;
 }
 
 .notification__content  {

luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css

@@ -1,13 +1,3 @@
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input:focus {
-    outline: none;
-}
-
 .payment-modal {
     position: absolute;
     top: 20%;
@@ -63,6 +53,12 @@ input:focus {
     left: 10%;
 }
 
+.referal-icon-diamond img {
+    position: absolute;
+    top: 35.5%;
+    left: 10%;
+}
+
 .deposit-icon__input .promo-input,
 .deposit-icon__input .deposit-amount__input,
 .withdraw-input .with-input{
@@ -77,7 +73,41 @@ input:focus {
     font-size: 12px;
     padding-left: 40px;
 }
-
+.promo-input {
+    width: 284px;
+    height: 44px;
+    border-radius: 15px;
+    border: 2px solid #2B3458;
+    background: #22252F;
+    color: rgba(148, 148, 148, 0.95);
+    font-weight: 700;
+    font-family: Montserrat Alternates;
+    font-size: 12px;
+    padding-left: 40px;
+    flex: 3.5;
+    font-weight: 700px;
+}
+.vvod_promocoda {
+    flex: 1;
+    width: 52px;
+    height: 44px;
+    background-color: #EF4444;
+    margin-left: 10px;
+    margin-right: 16px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    border-radius: 10px;
+    font-family: Montserrat Alternates;
+    font-weight: 600;
+    font-size: 19px;
+    color: #fff;
+    border: none;
+}
+.promokods {
+    display: flex;
+    flex-wrap: nowrap;
+}
 .display-btns {
     display: flex;
     margin-top: 10px;
@@ -95,6 +125,7 @@ input:focus {
     border: none;
     margin-right: 6px;
     padding: 4px 19px;
+    
 }
 
 .deposit-promocode {
@@ -170,7 +201,7 @@ input[type="checkbox"]:checked::before {
 .btn-style-payments button {
     border-radius: 10px;
     background: #EF4444;
-    ont-family: Montserrat Alternates;
+    Font-family: Montserrat Alternates;
     font-size: 16px;
     color: #fff;
     font-weight: 700;

luckydiamond/src/assets/css/PagesStyles/BanPage.css

@@ -0,0 +1,29 @@
+.banpage--body {
+    background-color: rgb(17, 14, 32);
+    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
+    padding: 0px;
+    margin: 0;
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size:25px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+}
+.banpage--video {
+    border-radius: 10px;
+}
+
+.banpage--block {
+    width: 50%;
+    height: 100%;
+    display: block;
+    background-color: #ef4444;
+    margin: auto;
+    margin-top: 100px;
+    padding-top: 50px;
+    padding-bottom: 100px;
+    border-radius: 10px;
+    box-shadow: 12px 12px 2px 1px rgba(92, 12, 12, 0.2);
+}

luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css

@@ -0,0 +1,451 @@
+.classMenegerCrash {
+    display: flex;
+   
+   flex-direction: row;
+  }
+  .classNoMenegerCrash {
+    margin-top: 7.4vh;
+    margin-left: 1vh;
+  }
+.crash-content {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    gap: 0.625rem; /* 10px в рем */
+    grid-auto-flow: row;
+    grid-template-areas:
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"
+    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers";
+    background: #17181C;
+    box-shadow: 0 0.25rem #00000040;
+    border-radius: 1.25rem;
+
+.grid-crash .chat {
+    height: 96.8%;
+}
+
+.crash-game {
+    background: #22252F;
+    border-radius: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040;
+    width: 95%;
+    height: 29.6875rem;
+    margin: 2.5625rem auto 0 auto;
+}
+
+.crash-game__content {
+    display: flex;
+}
+
+/* Crash-Window */
+
+.crash-game__start-window {
+    margin-left: 30px;
+    height: 0;
+}
+
+.crash-game__start-window .crash__game-name {
+    margin: 62px 0 2px 0;
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 26px;
+    color: #fff;
+    box-shadow: 1px 1px 1px 0px #00000001;
+}
+
+.crash-game__start-window p {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 14px;
+    color: #FFFFFF85;
+}
+
+.crash-game-window__inputs {
+    margin-top: 29px;
+}
+
+.crash-label {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 13px;
+    color: #44C6EF54;
+    margin: 0 0 4px 4px;
+}
+
+.input-style-crash {
+    width: 347px;
+    height: 40px;
+    border: 2px solid #2B3458;
+    border-radius: 15px;
+    background: #22252F;
+}
+
+.diamond-input-crash {
+    margin-left: -25px;
+}
+
+.input-style-crash__text {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 12px;
+    color: #fff;
+    padding-left: 35px;
+}
+
+.crash-input-deposit .diamonds-btns__display {
+    margin: 8px 0 19px -22px;
+}
+
+.crash-input-deposit #max-button {
+    padding: 4px 10px;
+}
+
+.crash-input-deposit .diamond-icon {
+    left: 12px;
+}
+
+.crash-game-window__btn-start {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 23px;
+}
+
+.crash-game-window__btn-start button {
+    margin-bottom: 5px;
+    background: #EF4444;
+    border: unset;
+    border-radius: 10px;
+    width: 300px;
+    height: 60px;
+    font-family: 'Inter';
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.claim-btn-crash__prize {
+    background: #4E5EF2 !important;
+}
+
+.waiting-btn-crash {
+    background: #3D3F48 !important;
+}
+
+.crash-window__line {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.line-crash {
+    width: 2px;
+    height: 474px;
+    background: #30364F;
+    position: relative;
+    top: -342px;
+    left: 10%;
+    z-index: 1;
+}
+
+.crash-game__content .error-block {
+    top: 425px;
+}
+
+/* /Crash-Window */
+
+/* Crash-Graph */
+
+.crash-game__graph {
+    width: 800px;
+    top: 200px;
+    left: 600px;
+    position: fixed;
+}
+
+
+.chart-container canvas {
+    background-color: transparent !important;
+    width: 800px !important;
+    height: 400px !important;
+    transition: .3s ease;
+}
+
+.lost-ratio {
+    color: #EF4444;
+    font-weight: 700;
+}
+
+/* /Crash-Graph */
+
+/* Crash-Players */
+
+.user-crash {
+    display: flex;
+    justify-content: end;
+    margin-left: 400px;
+}
+
+.user-list {
+    overflow-y: auto;
+    height: 300px;
+}
+
+.user-crash-content {
+    background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%);
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(5, 50px) 100px;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+    "username username bid bid ... status";
+    margin: 10px auto;
+    width: 90%;
+    height: 70px;
+    border-radius: 18px;
+}
+
+.user-crash-content__lose {
+    background: linear-gradient(90deg, #22252F -0.54%, #322733 83.25%, #B53938 103.54%) !important;
+}
+
+.user-crash-content__win {
+    background: linear-gradient(90deg, #22252F -0.54%, #22252F 84.17%, rgba(42, 110, 57, 0.87) 103.54%);
+}
+
+.user-name-crash {
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    grid: 'username';
+}
+
+.user-name-crash h2 {
+    margin-left: 8px;
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.user-name-crash img {
+    width: 50px;
+}
+
+.user-bid-crash {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    grid-area: bid;
+}
+
+.user-bid-crash h2 {
+    color: #848484;
+    font-weight: 700;
+    font-family: 'Montserrat';
+    font-size: 24px;
+}
+
+.user-bid-crash img {
+    margin: 5px 0 0 5px;
+}
+
+.user-game-status-crash {
+    display: flex;
+    align-items: center;
+    grid-area: status;
+}
+
+.user-game-status-crash h2 {
+    font-size: 20px;
+}
+
+.wingame__win-bid-crash {
+    color: #28BD49 !important;
+}
+
+.ingame-crash {
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 12px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 5px;
+    width: 70px;
+    height: 24px;
+}
+
+.lostgame-crash {
+    color: #fff;
+    font-weight: 700;
+    font-family: 'Montserrat';
+    background: #EF4847;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 5px;
+    margin-left: -26px;
+    padding: 4px;
+}
+
+.wingame-crash {
+    box-shadow: 0px 4px 4px 0px #00000040;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    color: #28BD49;
+    border: 1px solid #28BD49;
+    border-radius: 5px;
+    padding: 6px;
+}
+
+.ratio {
+    position: relative;
+    left: 50%;
+    top: -390px;
+    font-size: 34px;
+    font-weight: 700;
+    font-family: 'Montserrat';
+}
+
+.time {
+    position: relative;
+    left: 50%;
+    font-size: 34px;
+    font-weight: 700;
+    font-family: 'Montserrat';
+}
+
+/* /Crash-Players */
+
+/* Notification */
+
+.notification-crash {
+    text-align: center;
+    top: 20%;
+    left: 50%;
+    position: absolute;
+    background: #000;
+    width: 200px;
+    height: 40px;
+}
+
+/* /Notification */
+
+/* Media */
+
+@media screen and (max-width: 1740px) and (min-width: 1400px) {
+    .crash-game__content .error-block{
+        top: 407px !important;
+    }
+    .crash-game__graph {
+        width: 500px;
+        height: 500px;
+        top: 190px;
+        left: 570px;
+    }
+    .crash-input-deposit .btn-style__diamonds button {
+        padding: 4px 18px !important;
+    }
+    .chart-container {
+        width: 500px !important;
+        height: 500px !important;
+    }
+}
+
+@media screen and (max-width: 1400px) and (min-width: 1200px) {
+    .header__nav nav a {
+        font-size: 16px;
+    }
+    .crash-game__content .error-block{
+        top: 405px !important;
+    }
+    .crash-game__graph {
+        width: 400px;
+        height: 400px;
+        top: 180px;
+        left: 550px;
+    }
+    .chart-container {
+        width: 400px !important;
+        height: 400px !important;
+    }
+    .crash-input-deposit .btn-style__diamonds button {
+        padding: 4px 18px !important;
+    }
+}
+
+@media screen and (max-height: 950px) and (min-height: 915px) {
+    .grid-crash .chat {
+        height: 92.5%;
+    }
+    .crash-game__players {
+        height: 270px;
+    }
+    .crash-game-players__content {
+        height: 230px;
+    }
+    .ratio {
+        top: -380px;
+    }
+    .time {
+        left: 45%;
+    }
+}
+
+@media screen and (max-height: 915px) and (min-height: 890px) {
+    .grid-crash .chat {
+        height: 100%;
+    }
+    .chat__content--users {
+        height: 58vh;
+    }
+    .crash-game {
+        height: 40vh;
+    }
+    .crash-game__players {
+        height: 290px;
+    }
+    .crash-game-players__content {
+        height: 250px;
+    }
+    .crash-game__graph {
+        height: 100px !important;
+        top: 200px;
+    }
+    #line-chart {
+        height: 300px !important;
+    }
+    .ratio {
+        top: -320px;
+    }
+    .time {
+        left: 40%;
+    }
+    .line-crash {
+        height: 366px;
+    }
+}}
+
+@media screen and (min-height: 950px) {
+  .chat {
+    height: 88vh !important;
+  }
+}
+
+/*.crash-game__graph {*/
+/*    width: 800px;*/
+/*    top: 200px;*/
+/*    left: 600px;*/
+/*    position: fixed;*/
+/*}*/
+
+
+/*.chart-container canvas {*/
+/*    background-color: transparent !important;*/
+/*    width: 800px !important;*/
+/*    height: 400px !important;*/
+/*    transition: .3s ease;*/
+/*}*/
+
+/* /Media */

luckydiamond/src/assets/css/PagesStyles/games-pages/double.css

@@ -0,0 +1,325 @@
+.bet-button {
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 10px;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+    outline: none;
+}
+
+/* Цвета для кнопок */
+.bet-button.red {
+    background-color: #863443;
+}
+
+.bet-button.green {
+    background-color: #2D4940;
+}
+
+.bet-button.black {
+    background-color: #202333;
+}
+
+/* Стили для нажатой кнопки */
+.bet-button:active {
+    transform: scale(0.95);
+    /* Уменьшение при нажатии */
+}
+
+.bet-button.active {
+    opacity: 0.7;
+    /* Пример изменения стиля активной кнопки */
+}
+
+/* Можно добавить тени для кнопок, чтобы они выглядели объемнее */
+.bet-button {
+    margin: 1.2% 0 0 5.8%;
+    margin-bottom: 1vh;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Стиль для тени при нажатии (опционально) */
+.bet-button:active {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.double-start {
+    z-index: 1;
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    height: 37vh;
+    border: 1px solid #262C55;
+    margin: 2.6%;
+    margin-top: 0px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-ui-component {
+    display: flex;
+    align-items: center;
+    background-color: #25325A;
+    border-radius: 15px;
+    /* padding: 10px 20px; */
+    padding-right: 2vh;
+    padding-bottom: 1vh;
+    padding-top: 1vh;
+    padding-left: 2vh;
+    margin-bottom: 1vh;
+    max-width: 300px;
+    color: white;
+    font-family: Arial, sans-serif;
+    /* background: linear-gradient(to right, #1C213390 50%, #2F5139); */
+}
+
+.double-ui-component-gradient {
+    background: linear-gradient(to right, #1C213390 50%, #2F5139);
+}
+
+/* .double-ui-component img {} */
+
+.double-ui-component .double-username {
+    flex-grow: 1;
+    text-align: left;
+    margin-left: 1vh;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #515D83;
+}
+
+.double-ui-component .double-score {
+    display: flex;
+    align-items: center;
+}
+
+.double-score {
+    font-size: 20px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #748985;
+}
+
+.double-img-user {
+    margin-top: 6px;
+}
+
+.double-ui-component .double-score img {
+    width: 3vh;
+    height: 3vh;
+    margin-left: 10px;
+}
+
+.double-members-ingame-red {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #A9373C,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-green {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #345D3B,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-black {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #1B1A1A,
+            #1C2133 26%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    margin-top: 1vh;
+    width: 100%;
+    /* height: 94%; */
+    height: 49vh;
+    padding: 2vh;
+}
+
+.double-members-flex-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-bottom: 2vh;
+}
+
+.double-red-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #B64848;
+}
+
+.double-white-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: FEEBEB;
+}
+
+.double-green-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #5EA25C;
+}
+
+.double-number-color {
+    color: #56629A;
+    font-weight: bold;
+    font-size: 18px;
+    font-family: Montserrat;
+}
+
+.double-red-box span {
+    font-size: larger;
+    /* Or any specific size */
+    margin-left: 5px;
+    /* Spacing between RED and X2 */
+}
+
+.double-user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.double-user-icon .double-user-icon-span {
+    background-image: url('../../../icons-games/double-game/MembersInGame.png');
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-game-main-box {
+    border-radius: 10px;
+    border: 1px solid #262C55;
+    padding-top: 4vh;
+    padding-bottom: 4vh;
+    padding-left: 0vh !important;
+    padding-right: 0vh !important;
+    background: #1A1F37;
+    margin-bottom: 1vh !important;
+}
+
+.double-carousel {
+    z-index: 1;
+    position: relative;
+    background: #2E2D37;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-top: 1px;
+    border: 1vh solid #2E2D37;
+    border-right: 0vh !important;
+    border-left: 0vh !important;
+    height: 95%;
+}
+
+.container-double-history-text {
+    display: flex;
+}
+
+.double-history-text {
+    background-color: #728DF8;
+    border: none;
+    color: #0E1220;
+    padding-right: 1vh;
+    padding-left: 1vh;
+    font-size: 16px;
+    margin: 4px 2px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+}
+
+.double-carousel-arrow {
+    position: absolute;
+    bottom: -3vh;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-carousel-arrow-animate {
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
+.double-carousel-arrow-upper {
+    position: absolute;
+    top: -3vh;
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-game-history-main-box {
+    border-radius: 20px;
+    border: 1px solid #262C55;
+    padding-top: 1vh;
+    padding-bottom: 0vh;
+    padding-left: 1vh;
+    padding-right: 0vh;
+    background: #1A1F37;
+}

luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css

@@ -0,0 +1,390 @@
+.jackpot-start {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    /* height: 480px; */
+    height: 32vh;
+    border: 1px solid #262C55;
+    /* margin-top: 2.6%; */
+    margin: 2.6%;
+}
+.classMeneger {
+    display: flex;
+   
+   flex-direction: row;
+  }
+  .classNoMeneger {
+    margin-left: 1vh;
+    margin-top: 2.4vh;
+  }
+
+.jackpot-loading-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 100%;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+}
+
+.jackpot-carousel {
+    z-index: 1;
+    position: relative;
+    /* margin-left: 5%; */
+    border-radius: 10px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-top: 1%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 95%;
+}
+
+.carousel-arrow {
+    position: absolute;
+    bottom: -20px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.jackpot-useringame-list{
+    margin-top: 3.5%;
+    overflow-y: auto;
+    height: 62vh
+}
+.jackpot-carousel-user {
+    z-index: 1;
+    position: relative;
+    /* margin-left: 5%; */
+    border-radius: 10px;
+    background: #1F2543;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-bottom: 1%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+}
+
+
+.jackpot-game {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    /* background: #1D223E; */
+    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
+    width: 69%;
+    /* height: 480px; */
+    height: 94%;
+    /* border: 1px solid #262C55; */
+    margin-top: 2.6%;
+}
+
+.jackpot-main-elements {
+    z-index: 1;
+}
+
+.jackpot-start__content p {
+    color: #FFFFFF84;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.padding-elements-jackpot {
+    padding-left: 1vh;
+    padding-right: 1vh;
+}
+
+.jackpot-start__btns {
+    margin-top: 5%;
+    display: flex;
+    flex-direction: column;
+}
+
+.jackpot-start__btns button {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 5px;
+    border: none;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 19px;
+    font-style: normal;
+    font-family: Inter;
+    font-size: 16px;
+}
+
+.bank-container {
+    display: flex;
+    align-items: center;
+    /* background-color: #000066; */
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    /* Choose your font */
+}
+
+.shield img {
+    width: 35px;
+    /* Adjust based on your shield size */
+    height: auto;
+    margin-left: 10px;
+    margin-bottom: -10px;
+}
+
+.bank-info {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.jackpot-last-game-bar-container {
+    /* margin-bottom: 3%; */
+    padding-top: 10px;
+}
+
+.jackpot-last-game-bar-container img {
+    /* margin-bottom: 3%; */
+    width: 3vh;
+    height: 3vh;
+}
+
+.jackpot-last-game-bar-container-text {
+    padding: 0px 0 5px 0;
+    color: #FFF;
+    font-weight: 200;
+    line-height: 15px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 8px;
+}
+
+.jackpot-last-game-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 100%;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+
+}
+
+.bank-value {
+    font-size: 24px;
+    /* Large text size */
+    font-weight: bold;
+    margin-left: 1%;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #FFFFFF84;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    /* Make the number bold */
+}
+
+.bank-name {
+    font-size: 24px;
+
+    font-family: Montserrat;
+    font-weight: bold;
+    /* Smaller text size for 'БАНК' */
+}
+
+.progress-text {
+    transition: opacity 0.5s ease;
+    opacity: 1;
+}
+
+.progress-bar {
+    width: 95%;
+    background-color: #D9D9D9;
+    /* Navy blue background */
+    border-radius: 10px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+    margin-left: 2vh;
+    margin-bottom: 3%;
+}
+
+.progress {
+    height: 40px;
+    background-color: #E13F3F;
+    /* Red for the progress */
+    border-radius: 10px;
+    /* Rounded corners on the left side */
+    line-height: 40px;
+    /* Same as height to vertically center text */
+    color: white;
+    text-align: start;
+    text-indent: 20px;
+    padding-right: 10px;
+    /* Add some padding to the right of the text */
+    transition: width 0.25s ease-in-out;
+}
+
+.no-pointer-events {
+    pointer-events: none;
+}
+
+.jackpot-player-info {
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 5px;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+
+.jackpot-player-avatar img {
+    width: 48px;
+    /* Adjust size as needed */
+    height: 48px;
+    margin-right: 10px;
+    margin-left: 1vh;
+}
+
+.jackpot-player-data {
+    display: flex;
+    flex-direction: column;
+}
+
+.jackpot-player-name {
+    font-size: 16px;
+    /* Adjust font size as needed */
+    font-weight: bold;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #515D83;
+}
+
+.jackpot-player-gems {
+    font-size: 15px;
+    /* Adjust font size as needed */
+    display: flex;
+    align-items: start;
+    color: #FFFFFF84;
+    /* font-weight: 700; */
+    /* line-height: 31px; */
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: bold;
+    /* font-size: 13px; */
+}
+
+
+.jackpot-gems-icon {
+   
+    margin-left: 5px;
+    height: 1vh;
+}
+
+.jackpot-gems-icon-extension{
+    margin-bottom: -10px !important;
+}
+
+.jackpot-player-chance {
+    background-color: #27345C;
+    /* Adjust background color as needed */
+    border-radius: 5px;
+    font-size: 14px;
+    /* Adjust font size as needed */
+    padding-left: 5px !important;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    border-radius: 5px;
+    margin-left: 10%;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-weight: bold;
+}
+.jackpot-chance-value {
+    color: #EF4444; /* Или любой другой оттенок красного, который вам нужен */
+  }
+  
+  .jackpot-banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #1e2749; /* Dark blue background */
+    padding: 5px;
+    border-radius: 5px;
+    color: white;
+    font-family: Montserrat;
+    font-weight: bold;
+
+  }
+  
+  .jackpot-content {
+    display: flex;
+    align-items: center;
+  }
+  
+  .jackpot-avatar {
+    width: 48px; /* Adjust based on your preference */
+    height: 48px;
+    margin-right: 10px;
+  }
+  
+  .jackpot-info {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .jackpot-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #515D83;
+  }
+  
+  .jackpot-gems {
+    font-size: 14px;
+    color: #FFFFFF84;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: bold;
+  }
+  
+  .jackpot-chance {
+    font-size: 16px;
+    background-color: transparent; /* Adjust if you want a different background */
+  }
+  
+  .jackpot-percentage {
+    color: #EF4444; /* Adjust if you want a different color */
+  }
+  
+
+@media (max-width: 1415px) {
+    .padding-elements-jackpot {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css

@@ -1,21 +1,3 @@
-#chat {
-    height: 95.65%;
-}
-
-button {
-    cursor: pointer;
-}
-
-button:focus {
-    outline: none;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
 .saper {
     display: flex;
     padding-top: 10%;
@@ -24,7 +6,15 @@ input[type="number"]::-webkit-outer-spin-button {
     backdrop-filter: blur(100px);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
-
+.classMenegerSaper {
+    display: flex;
+   
+   flex-direction: row;
+  }
+  .classNoMenegerSaper {
+    margin-left: 1vh;
+    margin-top: 2.4vh;
+  }
 .bg {
     background: #293561;
     filter: blur(120px);
@@ -56,7 +46,7 @@ input[type="number"]::-webkit-outer-spin-button {
     background: #22252F;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     width: 27%;
-    height: 74%;
+    height: 480px;
     margin-top: 2.6%;
 }
 
@@ -144,7 +134,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .crystal-icon,
-.diamond-icon  {
+.diamond-icon {
     position: relative;
     left: 25px;
     top: 2px;
@@ -154,9 +144,23 @@ input[type="number"]::-webkit-outer-spin-button {
     display: flex;
 }
 
+#diamonds-input-saper {
+    width: 37vh;
+    height: 4vh;
+}
+
+@media (max-width: 1630px) {
+    #diamonds-input-saper {
+        width: 30vh !important;
+    }
+}
+
 #diamonds-input {
-    width: 347px;
-    height: 38px;
+    /* width: 347px;
+    height: 38px; */
+    /* width: 37vh; */
+    width: 36vh;
+    height: 4vh;
 }
 
 .diamonds h3 {
@@ -194,7 +198,7 @@ input[type="number"]::-webkit-outer-spin-button {
     font-family: Inter;
     font-size: 16px;
     font-weight: 700;
-    padding: 4px 15px;
+    padding: 4px 13px;
 }
 
 .saper-start__btns {
@@ -257,7 +261,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .error-block {
     position: absolute;
-    top: 440px;
+    top: 445px;
 }
 
 .error-block h2 {
@@ -278,8 +282,9 @@ input[type="number"]::-webkit-outer-spin-button {
     position: absolute;
     top: 15%;
     left: 45%;
-    background: #000;
+    background: #262C48;
     padding: 20px;
+    border-radius: 10px;
 }
 
 .saper-game {
@@ -292,7 +297,7 @@ input[type="number"]::-webkit-outer-spin-button {
     background: #22252F;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     width: 85%;
-    height: 90%;
+    height: 580px;
 }
 
 .square {
@@ -342,6 +347,7 @@ input[type="number"]::-webkit-outer-spin-button {
     width: 110px;
     height: 110px;
     top: -70px;
+    user-select: none;
 }
 
 .crystal-img {
@@ -352,7 +358,8 @@ input[type="number"]::-webkit-outer-spin-button {
     pointer-events: unset !important;
 }
 
-.game-start__menu-off .crystals, .game-start__menu-off .diamonds,
+.game-start__menu-off .crystals,
+.game-start__menu-off .diamonds,
 .game-start__menu-off .saper-start__btns .btn-start {
     pointer-events: none;
 }
@@ -381,13 +388,46 @@ input[type="number"]::-webkit-outer-spin-button {
     margin: 13.5% 0 0 10.5%;
 }
 
+.info-crystals__count {
+    position: relative;
+}
+
+.card-style-count {
+    width: 40%;
+    text-align: center;
+    font-family: "Montserrat Alternates";
+    font-size: 18px;
+    font-weight: 700;
+    padding: 1% 1%;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 25px;
+    opacity: 0;
+}
+
+.on-element-card {
+    opacity: 1 !important;
+    transition: opacity .4s ease;
+}
+
+.emeralds-bg {
+    background: #6BC884;
+    top: -22%;
+    left: 12%;
+}
+
+.crystals-bg {
+    background: #EF4444;
+    top: -20%;
+    left: 12%;
+}
+
 .card-info {
     border-radius: 15px;
     border: 1px solid #2B4D6C;
     background: linear-gradient(180deg, #252C47 0%, #252C47 8.33%, rgba(37, 44, 71, 0.00) 100%);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     width: 85%;
-    height: 100%;
+    height: 250px;
 }
 
 .text-style__subtitle h2 {
@@ -420,7 +460,7 @@ input[type="number"]::-webkit-outer-spin-button {
     display: flex;
     justify-content: center;
     position: relative;
-    left: 7px;
+    left: 17px;
 }
 
 .circles {
@@ -451,54 +491,83 @@ input[type="number"]::-webkit-outer-spin-button {
     .saper-game__content {
         width: auto;
     }
+
+    .error-block {
+        top: 425px;
+    }
+
     .saper-start {
         width: 30%;
-        height: 80%;
+        height: 500px;
     }
+
     .btns-style__steps button {
         width: 60px;
         height: 50px;
     }
+
     .swiper-slide {
         margin-right: 29px !important;
     }
+
     .steps-btns__display {
         justify-content: center;
     }
+
     .margin-lines .firstline {
         margin-top: 2%;
     }
+
     .info-emeralds {
         margin-top: 6.5%;
     }
+
     .info-crystals {
         margin-top: 6.5%;
     }
-    .crystals-btns__choices button, .btn-style__diamonds button {
+
+    .crystals-btns__choices button,
+    .btn-style__diamonds button {
         padding: 4px 13px;
     }
+
     .diamond-icon {
         top: 12px;
         left: 35px;
     }
+
     #diamonds-input {
         width: 60%;
     }
+
     .btns-style__steps button {
         padding: 6px 9px;
     }
+
+    .emeralds-bg {
+        top: -23%;
+    }
+
+    .crystals-bg {
+        top: -21%;
+    }
+
     .card-info img {
         width: 100%;
     }
+
     .circles-1 {
         top: 110px;
     }
+
     .circles-2 {
         top: 220px;
     }
+
     .circles-3 {
         top: 330px;
     }
+
     .circles-4 {
         top: 440px;
     }
@@ -508,63 +577,95 @@ input[type="number"]::-webkit-outer-spin-button {
     .bg-two {
         left: 300px;
     }
+
+    .error-block {
+        top: 410px;
+    }
+
     .saper-game__content {
         width: auto;
     }
+
     .saper-start {
         width: 30%;
-        height: 75%;
+        height: 510px;
     }
+
     .steps-btns__display {
         justify-content: center;
     }
+
     .btns-style__steps button {
         width: 60px;
         height: 50px;
     }
+
     .swiper-slide {
         margin-right: 30px !important;
     }
+
     .margin-lines .firstline {
         margin-top: 2%;
     }
+
     .square {
         width: 75px;
     }
+
     .img-style-click {
         left: -15px;
     }
+
     .info-emeralds {
         margin-top: 6.5%;
     }
+
     .info-crystals {
         margin-top: 6.5%;
     }
+
     .text-style__subtitle h2 {
         font-size: 11px;
     }
+
     .text-style__comment p {
         font-size: 11px;
     }
-    .crystals-btns__choices button, .btn-style__diamonds button {
+
+    .crystals-btns__choices button,
+    .btn-style__diamonds button {
         padding: 4px 7px;
     }
+
     .diamonds-btns__display {
         margin-left: 3%;
     }
+
     .diamond-icon {
         top: 12px;
         left: 35px;
     }
+
     #diamonds-input {
         width: 60%;
     }
+
     .btns-style__steps button {
         padding: 6px 4px;
     }
+
+    .emeralds-bg {
+        top: -24%;
+    }
+
+    .crystals-bg {
+        top: -22%;
+    }
+
     .card-info img {
         width: 100%;
     }
+
     .circles__content {
         display: none;
     }
@@ -595,7 +696,8 @@ input[type="number"]::-webkit-outer-spin-button {
     object-fit: cover;
 }
 
-.swiper-button-prev:after, .swiper-button-next:after {
+.swiper-button-prev:after,
+.swiper-button-next:after {
     font-size: 30px;
     color: rgb(210 31 31 / 62%);
 }

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -37,6 +37,7 @@
     text-transform: uppercase;
 }
 
+
 @keyframes RaindowAnimate {
     from {
         color: #6EEB21;
@@ -90,11 +91,19 @@
 }
 
 .bg-card {
+   
     border-radius: 40px;
     background: #EF4444;
     box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
+.bg-early{
+    border-radius: 40px;
+    background: #EF4444;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    height: 21.5vh;
+}
+
 .gamemode__main {
     width: 32%;
     height: 100%;
@@ -117,17 +126,28 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 91px;
+    font-size:91px;
     font-weight: 700;
     text-transform: uppercase;
     text-align: center;
 }
 
+.title-jackpot {
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size:80px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 0px 0px 0px 28px;
+}
+
 .line__footer {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: 4.7%;
+    padding-top: 5.5%;
 }
 
 .line__content .line__btn--main .line__btn {
@@ -137,7 +157,6 @@
 }
 
 .line__footer img {
-    width: 60%;
     margin-bottom: 5%;
 }
 
@@ -157,10 +176,39 @@
     margin:  1% 6.6% 1% 4.7%;
 }
 
+.line__img__jackpot {
+    display: flex;
+    margin:  1% 6.6% 1% 0%;
+}
+
 .display-firstline {
     display: flex;
 }
 
+.cumming_soon_btn {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 5%;
+    left: 2%;
+    transition: 250ms;
+    cursor: default;
+}
+
+.cumming_soon_btn:hover {
+    background-color: #525252;
+    opacity: 0.75;
+}
+
 .line__btn {
     border-radius: 21px;
     background: #FFF;
@@ -170,17 +218,174 @@
     font-family: Montserrat Alternates;
     font-size: 36px;
     font-weight: 700;
-    padding: 11px 11px;
+    padding: 11px 0px 11px 11px;
     text-decoration: none;
     text-transform: uppercase;
     position: relative;
     bottom: 5%;
     left: 2%;
+    transition: 250ms;
 }
 
+.line__btn span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+    right: 20;
+  }
+
+.line__btn:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+.line__btn:active {
+    left: 5%;
+  }
+
+.line__btn--crash {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 5%;
+    left: 2%;
+    transition: 250ms;  
+    height: 7vh; 
+    
+}
+
+
+.line__btn--doubl {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 5%;
+    left: 2%;
+    height: 7.4vh;
+    width: 16vh;
+    transition: 250ms;   
+}
+
+.line__btn--crash span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+    right: 20;
+    
+  }
+
+.line__btn--crash:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn--crash:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+.line__btn--crash:active {
+    left: 2%;
+  }
+  .line__btn--doubl span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+    right: 0;
+  }
+
+.line__btn--doubl:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn--doubl:hover {
+    padding:11px 11px 11px 22px ;
+    width: 20vh;
+  }
+
+.line__btn--doubl-:active {
+    left: 2%;
+  }
+
+.line__btn__jackpot {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 0px 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 4%;
+    left: 6%;
+    transition: 250ms;
+}
+
+.line__btn__jackpot span:after {
+    content: '\00bb';
+    opacity: 0;
+    transition: 250ms;
+  }
+
+.line__btn__jackpot:hover span:after {
+    opacity: 1;
+    right: 0;
+    padding-right: 0px;
+  }
+
+.line__btn__jackpot:hover {
+    padding:11px 11px 11px 22px ;
+  }
+
+  .line__btn__jackpot:active {
+    left: 10%;
+  }
+
 .line__btn--elm {
     color: #000;
-    font-size: 38px;
+    font-size: 38px ;
+    
+}
+
+.line__btn--elm--saper {
+    color: #000;
+    font-size: 4vh !important;
+}
+
+@media (max-width: 1590px) {
+    .line__btn--elm--saper {
+        font-size: 2vh !important;
+        display: none;
+    }
 }
 
 .linecontent-2 {
@@ -201,7 +406,7 @@
 .gamemode__twoline--first__element {
     width: 100%;
     margin: 2% 3.6% 0 5.5%;
-    min-height: 180px;
+    min-height: 209px;
 }
 
 .linecontent-3 {
@@ -214,36 +419,60 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 87px;
+    font-size: 60px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 4.5% 2.2%;
 }
 
-.gamemode__twoline--first__element .container {
+
+
+.gamemode__twoline--two__element {
+    margin-top: 2%;
+    width: 100%;
+    min-height: 180px;
+    height:22.3vh ;
+    
+}
+.container {}
+.gamemode__twoline--two__element .container {
     display: flex;
     justify-content: center;
-    align-items: center;
+    
+   
+   
 }
-
-.gamemode__twoline--first__element .container a {
+.linecontent-4 {
+    
+}
+.iconsGame {
+    bottom:  20px;
+    height: 20vh;
+}
+.ButtonPlayDouble {
+    width: 20vh;
+    margin-top: 1.6vh;
+}
+.gamemode__twoline--two__element .container a {
     margin-right: 10%;
-    padding: 12px 10px;
-    margin-bottom: 3%;
 }
 
+.cumming_soon--img {
+    margin-bottom: 4%;
+}
 .gamemode__twoline--two__element {
     margin-top: 2%;
     width: 100%;
     min-height: 180px;
 }
 
-.gamemode__twoline--two__element .container {
+.gamemode__twoline--first__element .container {
     display: flex;
     justify-content: center;
+    
 }
 
-.gamemode__twoline--two__element .container a {
+.gamemode__twoline--first__element .container a {
     margin-right: 10%;
 }
 
@@ -251,158 +480,172 @@
 
 /* Media */
 
-@media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
-    .header__auth--discord {
-        width: 14%;
-    }
-    .header__balance {
-        width: auto;
-    }
-    .main {
-        width: 75% !important;
-    }
-    .main__content h1 {
-        font-size: 4.5em;
-    }
-    .gamemode__content--text div {
-        width: 75%;
-    }
-    .gamemode__main {
-        height: auto;
-        width: 25%;
-    }
-    .title-firstline {
-        font-size: 4.1em;
-    }
-    .line__footer {
-        flex-direction: column;
+@media only screen and (max-width:1800px) {
+    .line__img__jackpot {
+        width: 150px;
+        height: 150px;
     }
+
     .line__footer img {
-        margin-top: -2em;
-    }
-    .line__content .line__btn--main .line__btn {
-        left: 0;
-        top: -.4em;
-    }
-    .line__img {
-        margin: 1% -8% 0 30%;
-    }
-    .gamemode__firstline img {
-        width: 60%;
-    }
-    .gamemode__firstline .title-firstline {
-        font-size: 3.2em;
-    }
-    .gamemode__twolines img {
-        display: none;
-    }
-    .gamemode__twolines .title-twoline {
-        font-size: 3.238em;
-    }
-    .line__btn {
-        font-size: 28px;
-        padding: 6px 11px;
-    }
-    .gamemode__twoline--first__element .container a {
-        padding: 6px 11px;
-    }
-    .write {
-        position: static;
-        margin: -45% 87% 6% 2%;
-    }
-    .write__content input {
-        padding: 0.625em 1% 14px 0.75em;
-    }
-    .write__content input::placeholder {
-        font-size: 11.5px;
-    }
-    .write__content button {
-        margin-left: -15%;
-        padding: 0.375em 0.375em;
+        width: 55%;
+        margin-bottom: 5%;
     }
 }
 
-@media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
-    .header__auth--discord {
-        width: 14%;
+@media only screen and (max-width:1700px) {
+    .title-jackpot {
+        font-size:60px;
+        padding: 0px 0px 0px 28px;
     }
-    .header__balance {
-        width: auto;
+
+    .title-twoline {
+        font-size: 40px;
     }
-    .main__content h1 {
-        font-size: 4.5em;
-    }
-    .main {
-        width: 78% !important;
-    }
-    .gamemode__main {
-        height: auto;
-        width: 28.5%;
-    }
-    .gamemode__content--text div {
-        width: 78%;
-    }
-    .title-firstline {
-        font-size: 4.1em;
-    }
-    .line__footer {
-        flex-direction: column;
+
+    .line__img__jackpot {
+        height: 150px;
+        width: 150px;
     }
+
     .line__footer img {
-        margin-top: -2em;
+        width: 40%;
+        margin-bottom: 5%;
     }
-    .line__content .line__btn--main .line__btn {
-        left: 0;
-        top: -.4em;
-    }
-    .line__img {
-        margin: 1% -8% 0 15%;
-    }
-    .gamemode__firstline img {
-        width: 60%;
-    }
-    .gamemode__firstline .title-firstline {
-        font-size: 3.2em;
-    }
-    .gamemode__twolines img {
-        display: none;
-    }
-    .gamemode__twolines .title-twoline {
-        font-size: 3.238em;
+
+    .line__content {
+        width: 100%;
+        height: 100%;
     }
+
     .line__btn {
-        font-size: 28px;
-        padding: 6px 11px;
+        border-radius: 16px;
+        font-size: 30px;
+        padding: 11px 11px 11px 11px;
     }
-    .gamemode__twoline--first__element .container a {
-        padding: 6px 11px;
-    }
-    .write {
-        position: static;
-        margin: -45% 87% 6% 2%;
-    }
-    .write__content input {
-        padding: 0.625em 1% 14px 0.75em;
-    }
-    .write__content input::placeholder {
-        font-size: 11.5px;
-    }
-    .write__content button {
-        margin-left: -15%;
-        padding: 0.375em 0.375em;
-    }
-}
 
-@media screen and (max-width: 1100px) {
     .main__content h1 {
-        font-size: 3.5em;
+        font-size: 70px;
     }
+
     .title-firstline {
-        font-size: 3.4em;
+        font-size:80px;
     }
-    .line__img {
-        margin: -1% -18% 0 2%;
+
+    .cumming_soon_btn {
+        font-size: 30px;
+        border-radius: 16px;
+    }
+
+    .cumming_soon--img {
+        height: 40px;
+        width: 80px;
+    }
+
+    
+
+    .line__btn__jackpot {
+        border-radius: 16px;
+        font-size: 30px;
+    }
+
+    .line__btn--crash {
+        border-radius: 16px;
+        font-size: 30px;
+        padding: 7px 0px 11px 11px;
+    }
+
+    .crash--img {
+        height: 128px;
+        width: 128px;
+    }
+
+    .line__content {
+        height: 354px;
     }
 }
 
-/* /Media */
+@media only screen and (max-width:1300px) {
+    .title-jackpot {
+        font-size:40px;
+        padding: 0px 0px 0px 28px;
+    }
+
+    .title-twoline {
+        font-size: 20px;
+    }
+
+    .line__img__jackpot {
+        height: 125px;
+        width: 125px;
+    }
+
+    .line__footer img {
+        width: 40%;
+        margin-bottom: 5%;
+    }
+
+    .line__content {
+        width: 100%;
+        height: 100%;
+    }
+
+    .line__btn {
+        border-radius: 10px;
+        font-size: 20px;
+        padding: 11px 11px 11px 11px;
+    }
+
+    .main__content h1 {
+        font-size: 40px;
+    }
+
+    .title-firstline {
+        font-size:60px;
+    }
+
+    .cumming_soon_btn {
+        font-size: 20px;
+        border-radius: 10px;
+        height: 50px;
+    }
+
+    .cumming_soon--img {
+        height: 40px;
+        width: 80px;
+    }
+
+    
+
+    .line__btn__jackpot {
+        border-radius: 10px;
+        font-size: 20px;
+    }
+
+    .line__btn--crash {
+        border-radius: 10px;
+        font-size: 20px;
+        padding: 0px 0px 0px 16px;
+    }
+
+    .crash--img {
+        height: 50px;
+        width: 50px;
+    }
+
+    .line__content {
+        height: 265px;
+    }
+
+    
+
+    .gamemode__twoline--two__element {
+        margin-top: 0;
+        width: 100%;
+        min-height: 60px;
+    }
+    .gamemode__twoline--first__element {
+        margin-top: 0;
+        width: 100%;
+        min-height: 60px;
+    }
+}

luckydiamond/src/assets/css/PagesStyles/jackpot-history.css

@@ -0,0 +1,67 @@
+.jackpot-history__content {
+    display: flex;
+    max-height: 800px;
+    overflow-y: auto;
+    margin: 0 auto;
+}
+
+.jackpot-history__element {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin: 15px;
+}
+
+.abc {
+
+}
+
+.element-info {
+    display: flex;
+    align-items: center;
+}
+
+.element-info .element-info__icon img {
+    height: 50px;
+}
+
+.element-info .element-info__user-info {
+    margin-left: 4px;
+}
+
+.element-info .element-info__user-info .username {
+    color: #515D83;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.element-info .element-info__user-info .user-deposit {
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+
+}
+
+.element-info .element-info__user-info .img-width img {
+    width: 16px;
+    height: 16px;
+}
+
+.element-chance {
+    margin-top: 10px;
+}
+
+.element-chance h2 {
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 18px;
+    text-align: center;
+    background: #27345C;
+    border-radius: 7px;
+}
+
+.element-chance .chance-style {
+    color: #EF4444;
+    margin-left: 2px;
+}

luckydiamond/src/assets/css/PagesStyles/profile.css

@@ -1,12 +1,7 @@
-#chat-profile {
-    height: 95.6%;
-}
-
 .profile__content {
     width: 30%;
     margin-left: 3%;
 }
-
 .profile__content .profile__user--img {
     margin: 17.6% 8.4% 1% 0;
     background: #969C8D;
@@ -17,15 +12,20 @@
 .profile__card {
     display: flex;
     flex-direction: column;
+}.hisorypaymond {
+     /* height: 590px; */
+     height: 70vh;
+     width: auto;
+     overflow-y: auto;
+     overflow-x: auto;
+     overflow-y: auto;
 }
-
 .profile__card h1 {
     color: #FFF;
     font-weight: 700;
     font-family: Montserrat;
     font-size: 40px;
 }
-
 .profile__card h2 {
     border-radius: 20px;
     background: #22252F;
@@ -39,47 +39,38 @@
     font-size: 28px;
     padding-left: 11px;
 }
-
 .profile__card h2 img {
     margin-right: 4.4%;
 }
-
 .profile__btns--payments {
     margin-top: 7.9%;
     display: flex;
     flex-direction: column;
 }
-
 .icon-diamond h2 img {
     width: 33px;
     height: 33px;
 }
-
 .deposit-icon {
     margin: 3px 0 0 10px;
 }
-
 .withdraw-icon {
     margin-left: 33px;
 }
-
 .btn-bg {
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.12);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     width: 36%;
 }
-
 .btn-margin {
     padding: 3.8% 46% 3% 14%;
     margin-bottom: 11px;
     background: #62D4B2;
 }
-
 .btn-display {
     display: flex;
 }
-
 .text-btn {
     text-decoration: none;
     color: #000;
@@ -89,16 +80,34 @@
     font-size: 18px;
     margin-left: 4px;
 }
-
 .icon-margin-deposit-withdraw {
     margin-right: 4px;
 }
-
 .withdraw {
     padding: 3.8% 46% 3% 14%;
     background: #EF4444;
 }
 
+.referal {
+    padding: 3.8% 46% 3% 14%;
+    margin-top: 12px;
+    background: #2D6AE0;
+}
+
+.referal img {
+    height: 20px;
+    width: 22px;
+}
+
+.playerandvid {
+    margin-right: 10vh;
+}
+.data1 {
+    margin-right: 20vh;
+}
+.summa {
+    margin-right: 10vh;
+}
 
 .payments {
     margin: 2% 0 0 -4.25%;
@@ -106,41 +115,47 @@
 
 .types {
     display: flex;
+    
+
 }
 
 .types-margin h3 {
     margin-right: 7.813em;
+    
 }
-
 .types-text h3 {
     color: #ABABB4;
     font-weight: 600;
     font-family: Montserrat;
     font-size: 14px;
 }
-
 .types-line {
+    flex-grow: 1; /* Add this line */
     margin-top: 2.1%;
     background: #38383E;
-    width: 86%;
     height: 3px;
+    width: 100vh;
 }
-
 .payments__card {
     margin-top: 4.9%;
     display: flex;
+    align-items: center; /* Center vertically */
+    justify-content: space-between;
 }
 
 .user-info {
     display: flex;
+    align-items: center; /* Center vertically */
+    margin-right: 1em; /* Add margin for spacing */
+    width: 15vh;
 }
-
 .user-name {
     display: flex;
     flex-direction: column;
     margin-left: 0.625em;
+    align-items: center; /* Center horizontally */
+    margin-top: -0.5em; /* Adjust this value as needed */
 }
-
 .user-name__text h3 {
     color: #FFF;
     font-weight: 700;
@@ -148,26 +163,51 @@
     font-size: 20px;
 }
 
+.user-name1 {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.625em;
+    align-items: center; /* Center horizontally */
+    margin-top: -0.5em; /* Adjust this value as needed */
+}
+.user-name1__text h3 {
+    color: #FFF;
+    font-weight: 700;
+    font-family: Montserrat;
+    font-size: 20px;
+}
 .user-name__text p {
     color: #A9A9A9;
     font-weight: 400;
     font-family: Montserrat;
     font-size: 20px;
 }
-
 .data-info {
-    margin-left: 10%;
+    margin-left: 20vh; /* Push to the right */
+    margin-right: auto; /* Push to the left */
 }
-
 .data-info__text h3 {
     color: #A9A9A9;
     font-weight: 400;
     font-family: Montserrat;
     font-size: 17px;
+   
 }
 
 .transaction-info {
-    margin-left: 7%;
+    margin-right: 10em; /* Add margin for spacing */
+    margin-right: 6em; /* Add margin for spacing */
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 1vh;
+    margin-right: 13.5vh;
+}
+.transaction-info__text {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    width: 13vh;
 }
 
 .transaction-info__text h3 {
@@ -175,17 +215,56 @@
     font-family: Montserrat;
     font-size: 22px;
 }
-
 .deposit-color h3 {
     color: #32C966;
 }
-
 .withdraw-color h3 {
     color: #EA3D38;
+    margin-right: 1vh;
+}
+.withdraw-color1 {
+    margin-left: 1.35em;
+}
+.error-deposit {
+    position: absolute;
+    left: 190px;
+    top: 52px;
+}
+.error-deposit h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+.error-card {
+    position: absolute;
+    top: 130px;
+    left: 210px;
+}
+.error-card h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+.error-checkbox h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 11px;
+}
+.error-captcha {
+    top: 235px;
+    left: 45px;
+    position: absolute;
+}
+.error-captcha h2 {
+    color: #BA3636;
+    font-family: "Montserrat Alternates";
+    font-weight: 700;
+    font-size: 13px;
 }
-
 /* Media */
-
 @media screen and (min-device-width: 1400px) and (max-device-width: 1600px) {
     .profile__card h2 {
         width: 72%;
@@ -196,8 +275,66 @@
     .withdraw {
         padding-right: 56%;
     }
+    .withdraw-color h3 {
+        color: #EA3D38;
+        margin-right: 1vh;
+    }
+    .transaction-info {
+        margin-right: 10em; /* Add margin for spacing */
+        margin-right: 6em; /* Add margin for spacing */
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 1vh;
+        margin-right: 8.5vh;
+    }
+    .transaction-info__text {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 13vh;
+    }
+    .user-name {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .user-name1 {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name1__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .data-info {
+        margin-left: 22.5vh; /* Push to the right */
+        margin-right: auto; /* Push to the left */
+    }
+    .data-info__text h3 {
+        color: #A9A9A9;
+        font-weight: 400;
+        font-family: Montserrat;
+        font-size: 17px;
+       
+    }
+    .withdraw-color1 {
+        margin-left: 1.35em;
+    }
 }
-
 @media screen and (min-device-width: 1200px) and (max-device-width: 1399px) {
     .profile__card h2 {
         width: 80%;
@@ -208,6 +345,67 @@
     .withdraw {
         padding-right: 66%;
     }
+    
+}
+@media screen and (min-device-width: 1921px) {
+    .withdraw-color h3 {
+        color: #EA3D38;
+        margin-right: 1vh;
+    }
+    .transaction-info {
+        margin-right: 10em; /* Add margin for spacing */
+        margin-right: 6em; /* Add margin for spacing */
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 1vh;
+        margin-right: 20vh;
+    }
+    .transaction-info__text {
+        display: flex;
+        justify-content: center;
+        align-content: center;
+        width: 13vh;
+    }
+    .user-name {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .user-name1 {
+        display: flex;
+        flex-direction: column;
+        margin-left: 0.625em;
+        align-items: center; /* Center horizontally */
+        margin-top: -0.5em; /* Adjust this value as needed */
+    }
+    .user-name1__text h3 {
+        color: #FFF;
+        font-weight: 700;
+        font-family: Montserrat;
+        font-size: 20px;
+    }
+    .data-info {
+        margin-left: 17vh; /* Push to the right */
+        margin-right: auto; /* Push to the left */
+    }
+    .data-info__text h3 {
+        color: #A9A9A9;
+        font-weight: 400;
+        font-family: Montserrat;
+        font-size: 17px;
+       
+    }
+    .withdraw-color1 {
+        margin-left: 1.35em;
+    }
 }
-
 /* /Media */

luckydiamond/src/assets/css/PagesStyles/settings.css

@@ -0,0 +1,131 @@
+.settings {
+    /* display: flex; */
+    grid-area: profile;
+    /* height: 86vh; */
+    /* width: 86vh; */
+
+    border-radius: 50px;
+    background: #17181C;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin: 10px 39px 18px 13px;
+}
+
+#volume-control {
+  margin: 5vh;
+    /* display: flex; */
+    /* align-items: center; */
+    /* top: 0; 
+    left: 0; */
+    
+    /* z-index: 1000; */
+  }
+  .volume-section{
+  margin: 5vh;
+  }
+  .volume-text{
+
+    text-decoration: none;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    font-size: 25px;
+  }
+  .volume-text--grey{
+
+    text-decoration: none;
+    font-family: Montserrat Alternates;
+    font-weight: 700;
+    font-size: 25px;
+    color: #3D3F48;
+  }
+
+/* Стилизация трека ползунка */
+#volumeControl {
+  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
+  width: 40vh;
+
+  height: 8px; /* Можно изменить для изменения высоты трека */
+  background: #EF4444; /* Цвет фона трека */
+  outline: none; /* Убирает контур при выборе */
+  opacity: 1; /* Можно изменить для изменения прозрачности трека */
+  -webkit-transition: .2s; /* Плавное изменение для Webkit браузеров */
+  transition: opacity .2s;
+  border-radius: 10px;
+}
+
+/* Стилизация тумблера ползунка */
+#volumeControl::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Убирает стандартный стиль для Webkit браузеров */
+  appearance: none;
+  width: 15px; /* Ширина тумблера */
+  height: 15px; /* Высота тумблера */
+  background: #fff; /* Цвет фона тумблера */
+  cursor: pointer; /* Курсор в виде указателя */
+  border-radius: 60%; /* Круглый тумблер */
+}
+
+#volumeControl::-moz-range-thumb {
+  width: 25px; /* Ширина тумблера */
+  height: 25px; /* Высота тумблера */
+  background: #fff; /* Цвет фона тумблера */
+  cursor: pointer; /* Курсор в виде указателя */
+  border-radius: 50%; /* Круглый тумблер */
+  border: 2px solid red; /* Граница тумблера */
+}
+
+#volumeControl::-moz-range-track {
+  background: red; /* Цвет фона трека для Firefox */
+  height: 8px; /* Высота трека для Firefox */
+}
+
+
+     
+/* toggle in label designing */
+.toggle {
+  position : relative ;
+  display : flex;
+  width : 60px;
+  height : 32px;
+  background-color: #000413;
+  border-radius: 5px;
+  justify-content: center;
+ align-items: center;
+ 
+  
+}
+     
+/* After slide changes */
+.toggle:after {
+  content: '';
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+  background-color: #EF4444;
+  top: 5px; 
+  left: 6px;
+  transition:  all 0.5s;
+}
+     
+/* Toggle text */
+.toggle p {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+     
+/* Checkbox checked effect */
+.checkbox:checked + .toggle::after {
+  
+  left : 34px; 
+}
+     
+/* Checkbox checked toggle label bg color */
+
+     
+/* Checkbox vanished */
+.checkbox { 
+  display : none;
+}

luckydiamond/src/assets/css/global.css

@@ -11,68 +11,152 @@ ul {
     list-style: none;
 }
 
-body, html {
+body,
+html {
     background: #121212;
     height: 100%;
     margin: 0;
     overflow-y: hidden;
 }
 
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+button:focus {
+    outline: none;
+}
+
+button {
+    cursor: pointer;
+}
+
 /* /Global Settings */
 
 /* Content Grid */
 
 .content-grid {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
     grid-template-areas:
-    "menu header header header header header header"
-    "menu main main main main main chat"
-    "menu main main main main main chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat";
+        "menu header header header header header header"
+        "menu main main main main main chat"
+        "menu main main main main main chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat";
     height: 100%;
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 
 .content__grid-profile {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
     grid-template-areas:
-    "menu header header header header header header"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat";
-    grid-gap: 10px;
+        "menu header header header header header header"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat";
+    grid-gap: 0.625rem;
     height: 100%;
 }
 
 .content-grid--saper {
     display: grid;
     grid-auto-columns: 1fr;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-template-areas:
-    "menu header header header header header header"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat";
-    grid-gap: 10px;
+        "menu header header header header header header"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat";
+    grid-gap: 0.625rem;
 }
 
+.content-grid--jackpot {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat";
+    grid-gap: 0.625rem;
+}
+
+.content-grid--double {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat";
+    grid-gap: 0.625rem;
+}
+
+.jackpot-history__content-grid {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat"
+        "menu jackpot-history jackpot-history jackpot-history jackpot-history jackpot-history chat";
+    grid-gap: 0.625rem;
+}
+
+.grid-crash {
+    display: grid;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-auto-columns: 1fr;
+    gap: 0.625rem;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat";
+}
 
 /* /Content Grid */
 
@@ -80,9 +164,9 @@ body, html {
 
 .header {
     grid-area: header;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
     align-self: start;
 }
 
@@ -93,8 +177,8 @@ body, html {
 .menu {
     grid-area: menu;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    border-radius: 20px;
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    border-radius: 1.25rem;
     align-self: start;
 }
 
@@ -105,11 +189,13 @@ body, html {
 .chat {
     grid-area: chat;
     background: #16171B;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
-    border-radius: 20px;
-    height: 90%;
+    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
+    border-radius: 15px;
+    /* height: 100%; */
+    height: 86vh;
     position: relative;
     z-index: 3;
+
 }
 
 /* /Chat */
@@ -141,12 +227,41 @@ body, html {
     display: flex;
     grid-area: profile;
     height: 95%;
-    border-radius: 50px;
+    border-radius: 3.125rem;
     background: #17181C;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    margin: 10px 39px 18px 13px;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
 }
 
+.jackpot {
+    display: flex;
+    grid-area: jackpot;
+    /* height: 95%;
+    border-radius: 3.125rem;
+    background: #17181C;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
+}
+
+.jackpot-history {
+    grid-area: jackpot-history;
+    background: #17181C;
+    border-radius: 20px;
+    height: 97%;
+}
+
+.double {
+    display: flex;
+    grid-area: double;
+   
+}
+
+.about {
+    grid-area: about;
+
+}
+
+
 /* /Profile */
 
 /* Saper */
@@ -158,6 +273,95 @@ body, html {
 
 /* /Saper */
 
+/* Crash */
+
+.crash-content {
+    grid-area: crash;
+}
+
+.crash-game {
+    grid-area: crashgame;
+}
+
+.crash-game__players {
+    grid-area: crashplayers;
+}
+
+
+.content-grid--about {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat";
+    grid-gap: 0.625rem;
+}
+
+.content-grid--help {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat";
+    grid-gap: 0.625rem;
+}
+
+.help {
+    grid-area: help;
+    display: flex;
+    /* height:99%; */
+    height: 86vh;
+    border-radius: 3.125rem;
+    background: #17181C;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+    /*height: 96.2%;*/
+    width: 1000px;
+    margin: 0 auto;
+
+}
+
+
+.bg-gradient-left {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 250px;
+    transform: rotate(180deg);
+    left: 200px;
+    width: 40%;
+    height: 55%;
+    z-index: 0;
+}
+
+.bg-two-gradient-right {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 220px;
+    transform: rotate(330deg);
+    left: 600px;
+    width: 60%;
+    height: 35%;
+    z-index: 0;
+}
+
+/* /Crash */
+
 /* Media */
 
 /* /Media */

luckydiamond/src/assets/icons-games/double-game/info.svg

@@ -0,0 +1,9 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="20" height="20" fill="url(#pattern0_3764_2)"/>
+<defs>
+<pattern id="pattern0_3764_2" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_3764_2" transform="scale(0.0078125)"/>
+</pattern>
+<image id="image0_3764_2" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAHQklEQVR4nO1dS2xUVRhGBd8PLOLbrdG1iRtfRJuIBjRGgRgT1iaQYEw0gYXdYowLN0pBUUBdzKrOq7czNePCB9YRxYIuXbQ+VghLoFK/b3ponHY6M525Z/7/3PN/yZdBLNP7f9937z33nHPPWbPGYDAYDAaDwWAwGAwGg8FgMBgyg4mJiRuSJLkPfAB/fmh8fHwYfN5xmH/H/8ef4c9KH6+hR8DAIRj4DEx9HRzFf9fAv8D5VfJP928P8Lv4nfxu6foMS8Cz1Z3N+8E6TPq3B7O7Jb/7NIMFbqvVauul648SuVzuOhjwMswo4fOiR8PbEr/7Aj6L4A6E4VppXTIPnO2PQ/SPIPg5KdPbhOEsPg/h8zFpnTKF+fn5K2D8Vgh7XNrkVYThJ3zuHBkZuVJav2BB8Wg8hPxR2tA+gjDNIOD2sFZaz6AA45+EeL9JG5gi2XDcJK2rehSLxTsh1lGIdUmBaT6uCIVyuXyvtM7qwMs9xNmTKGzceQgBG4u72baR1l0FcEZshCjj0sYIcJJXPGn9RQHzn4D3fygwQ+pq8Dc7saR9GDh4yYcAb4Fz0iZIkx1Z4L5obgl8JELBh6WFV8hj9Xp9nbQ/XuH67csKxNbK6tjY2E3SPnkBihuC+d8oEFk7p/L5/G3SfqUKFoTCTisQNwiyB7FarW6Q9i0VwPzr7czvKQTfo710o7R/fYGNGrvn98VqLpe7WtrHnsDHGpj/iQIRgyY0/CzIUcVk4TlfXMAsECHYK+3nqsAevsQ6edIMwMVgJprgWf/2mLt3PXJG/eOhG9WbUCBWJskGter2gBvSFRcqy4TGu6R9bgkObbqxbnGRMs5z0Pkuab+XAQf2uQJxoiACcETa7yZwDp+0KF3wO77M0Q35swqOt10ALnGKvLTvDeRyuatwQL9Ki9IFc93WxJ9VcLydQjCtokGIg3lFWowYA+BCsN2ntx3hununpYWIOAA/i84kKpfLL0iLEHMASL4849PjTkJNSQsQewA4bOzT4xXBVqh08RaABeJK/KhPr1vCvaUrXrwFoHEVOOjT62Xgu/D4pf9IF24BWAzAWa6Z4NPzJrjFGcQLtwA0hWCbT8+bEOg0r6wHIO/T80WgwXGz5LIsxhUDcGEgk0jxy7ZIF2tckZsHEYB3FRRqbM23BxGAEwoKNbYgbgM/+DZ/KPG7Dp+xP84Vi8VbvQUADcBnFRRpbE9/7QAumaqgQGMbcl6mzwCMShdo7BiA970FAL/gK+kCjR0D8KXPAPSy6rZxsJz1Yj57mRQU1w9nkoUu3m44o+B4eyInjPKV/NQDwAUOpYvrk5keC1gSgvTfG6hUKg9KF2YB6I6lUun+1AOAL35YujALQHfk9jepByCQlz8sAEnjFrAp9QBwcyXpwiwAXQfgOQuABSBd2C0gHHq5BSTWCAyGXhqB9hgYDr08BlpHUDj00hGUga7gKALgrSvYCRPyYFAUAUh8DQY5YUIeDo4iAF6HgwOfEBJLAPxNCAl8SlgsAfA3JcxtoS5epAWgbQCe9haAJOxp4TEEwO+0cCdOqHv5xhCAKZ/eN4BLzDsKCrUAtCC82e/T+wYCfjkkhgD4u/9fBrc146vI0sVaAJbxPLfl8+n9/wUqKijYAtDMMZ+eLxVoh4KCLQDNfNGn502wRaJ0ceCLRDmRDkkXbgFY5AGfXrcENzFSULgFIGnMAHrEp9fthPpWuvjYA4AT8bhPj9sisJnCmQwAuMWnx23BpcpxAL8oECHKAIgvF08EtGpo5gKAe/9LPr3tCtwyJglja/isBeCkii1jCL6IwMmICkRpx0xtGiWyRHw74KA+lRYmIn4s7fcyTE5O3hFg72CIPMP9maX9bgkc3G4FAmWaOMlelfZ5RbhdxPLSImWYJfHHvk5A42QjDnRWgVhZo/7t4y+DG0rZngLpkVqK9ff3Chz0PmnhskJo+aa0n6uGaw8clhYvAzym/r6/Eur1+joUUFIgYpDECVSo1WprpX3sC5ypgkK+lhYzNHKYd2CTPH2jWq1uQFGnpEUNiBxhHZL2LVXwlSW7EnQmz/xgHvdWC65ckYQ5pXxQ5he8re6hBW74+ENpsbUR5h9ho1nan4HAPSLutc6ihU4e8I1gH/X6QbKw9uDv0iYIcia4Hr60wQZPEmFfAe/3fDqS1l8F3C1hVyTzCc5wSDfKS34n8IzgQlQBTC/r5YxnTUfVTubQBDeaOC1tWoo8qW4On3ZwxiuCsJX74SowsFeyR28nH32l9QwaCMFwonym7hKe4Oxiu8+nDF5GIexBpY1FNu5Go3+sGwTc+gTb+SglvFzNefALvqGDcF4jrUuUYN85bxFcIYuDTZ4DMYfvr+PzPV7i8dRyi3T9hiXgqCMM2gy+Bn7AxZOT3iapzrp/y+/YwxW4cOVZL12foUfwSlEoFO7hbhrcUgWX7Kf4ejvJP/Pv+P8qlcrdmR+RMxgMBoPBYDAYDAaDwWAwGAyR4T8v9J98K6ZdvgAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>

luckydiamond/src/assets/icons-menu/jackpot-icon.svg

@@ -0,0 +1,21 @@
+<svg width="57" height="36" viewBox="0 0 57 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_i_3187_2)">
+<rect width="56.8" height="36" fill="url(#pattern0)"/>
+</g>
+<defs>
+<filter id="filter0_i_3187_2" x="0" y="0" width="56.7998" height="40" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3187_2"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_3187_2" transform="matrix(0.00195312 0 0 0.0030816 0 -0.288889)"/>
+</pattern>
+<image id="image0_3187_2" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA70RE4n0h2gAAAAJ0Uk5TAP9bkSK1AAAKQUlEQVR4nO2cPc7mthGARahgF14gAK+RKrxSyhQBKMPFlnsEH8XqXO4RVqlcRkYKC7AgRvwZckiR1N9nG3Y4wL58X4l6RA5nOORI+3VdkyZNmjRp0qRJkyZNmjRp0qRJkyZNmjRp0qRJk0TY9BIgt3fX90oNrwBUqekVgCu1vAIIpdZXAKnUOy2qXd5cTzRg+D0BvQaMLwD0QwDTCwD7EMD8AsA/BPDGGYTa5EvAyl950357/sqbpJrZK4DSgDfuuFsRfQMgFjC8AYyv5uXeAsbHAN188gGA6THADOEHAJ67ozFj+RYgXrij0J74GvDGn81k8g4w66F47s/qJYAZG6KPDaFXAHjoDS4u9k/XCAIDHgyEiWp6LjFrhAdqUDHgdif6cJn9Nt4EsBRwtw8mrFoTkupJiJUp4O44qHCVCKzrQg6Am8PgAKbj3I/oDemR6tmTcaT2ogl9fwQY9HeCYJeF4WvoU4AfenHfFFk8cPcBPNZa/wQQXcCuOgPdAJCYrl9vniiTu4bz9IZwoD9pCYRinnaZuQtPogSBrhYBou5VPQx+ESDrXkXB74uAE6egYD5FJZ7YNAMHOsR0t8wgJxbFA+BgB+a6M5P0FsxTZasAqBmCAABLlE0cgF4ATA4w4hM9AtQmeIkAEz5Bw/FTANwp9UYPqNmyQoCoqzwot2rLPhb0SUvFNQDxAJK0FFxA1EMMCVNpciP4KdQvNcDe8K/uzrHX+QZJDRhrgC+upkgn1dUBfqoBdt1/9u6IDcEPitKA6XhlqEcDABkCg1/71TUAM4DBfUWGAO0hBlB2x33GhH0mjQwBNKL3gLUtEDcAU7WPDAHGpDeAsjvuOxQS7hXHxs61a6htgfQWB3SELc6bgQWU3VG3DgASjbc3A72RrG2BNAB0JNBweTPQcamSEzFjL4PfeW2zMCNulUBNzWQgXH9xPTAD42qsFBqIXQgJ59E0Boy2VzuAljxaWAB3C6o+XiMNbq212CKjR+IWg9ydJzEA7rC4NeixCdQdtws802EE2Dq3/p7dnY5a4BFg0GOKACusfufiHkq4O1PXlU5gwIKWm8rPnJHICDBFAVrYLTAGHLVoDm+hpfsFMYBD06SrWQWYJiPAlAIOwYFAw/wXlgAEaNd/yQO6OqArAXzLcwCz5PJd933JACa4wVYA6EO0AtDtYh6wHAGT13cKQElwkQcE88lm3NHihxQBMPgiD/C2wYy2+REwdOEW0xEw+B8yDwjXpEsoCwg/+gRgehNdI+stoLo7RwBy4YMOeKQWt9mdk9/BhUnqj0RFauF5QLikT42ZRvVhw58Ctrj+hAA8bqHMA4KaWVzf3TK0UBUAvtE8rp9OMiQF0BQgovqHXJPLPkTBNXYgGfcIrhiS+hpAp+QA6qNvUJRuQF3W9fmCANAnkjQoTXJwBDAPbQEAeu+TBsEt4YAIABLCKtI7TZScWp4MAOqTmljvB9Pm8QEVAFyFsBj0zlOAiFoIZgBBBAGGXP1wYItUpAHEFugI7mMAQKcjFenqzsk8YIr6uB0AA6hoNgf9csUDZujjFq+Flc3iuxa6CU8DLHmvvAUwLJ9EBJjDzg6+7J9gcRbg1229+YIfgZlb+plW2L7sF4LBEAPoUWCZ42nY3JIigFXM6MZ7tS3w6zYK60C4nkAGGwAulTqBci2gQ4AxBQx2OxMDfgLlf4EjHmDrx4AuAFZbHcmGTrjeHwHSA5Y8gHvAlgUID5gDYJPBapkHrAdAdwRYB1k4BixVgMwBJnoHMHa2q7MtjHtYa1xiwFEHJcDmdBEB+msACF/cu+ETwIQDKb8MWGxPVXhEcgmgYkAP9qOVMKKmXQUQ0B2HuSoAjqZsAQMG+NQhSjJeA6D06eBOr9cB/8AJXDdvR6leXgf0Gx5uF+uYU46xcRstigBm/rk7C6gAv02ImEsA49TaI1m8BAwCJysAk5iuAvSMSzJTmvukNkFQASgbLkoAYzM1QG/DRBEg7RRSBpiUaBlg84m0lCSBSFEGGAfcKoB/21iZB+zds7PYpzLgBxsriwArP5YBX+0Ma/y2DCgmflGo+f0BVR08BZAPBBQs8RLgawUg9LlfigC7fCwlujxgMtW6EmAN6fWjcHNvUQWYfGINsPlHDLnQBsm4Qt6XKUjG5QFCQSZrKgMml5bMAbjPI415AFWQR1qyAL9KLz1AcAt0V+8IsAtQ3ZD89brxS+eXtEdAD5xi2ldCGmjIAjprQKQ0irpxpnNiw1ehr+7VYj6UAL0LmnMBcE8aoAEa4E8N+Bd86iX51JmS6vLvMCWjOTsDIG5q3Ce/fVGs5zc52mSaCzgTfnSeAVAz5enPfd7mmz6xL45XV5qwxF1gzAPsvoDpxfCyX2B3DHJzpQGYyDqWAZP91G+rSL39MKVu1GxjN34vKAPgNoOoAasBULWYIGBLHZdkiP5ZwBwANpEF5UIQYD0FUPfoFEoWA7YzwGwvnEsAdRGwdABKAcM9wPIUsHZQpoDxGmDroATA6gDTNYB6DRgABIDlJmAEEABmByitD0qAEQDjTcAEpQXoKjrPUgf8DQF8GQPCu00ZAFEIsOQBvAbYp6MAWAF0A8B0IhUAG4BiAKsBdl8+ArYbAKEZAFBQwjBOVwALAnxy5WdkSCcAqf/fiQf8kACWc8DeYQT40ZVfkDPVR0FnkjOA/0SAmiH9Nwb87EqFJpQRXpbMAn7ea30XACoHIDVf0PK1Dqh7o5VfHzBdA3zvAN8/BXx3AKyn03oE+OwA370FfPaA5TQyRYBPDvDJA+bT4BoBvnWAbz1gOg3vEeCbBKCrnAO+BMDgAN+kgMoSR5l0GwCk8qAIUFni2PamAHmnCwQBhPJlBKiNwoYi0h4hfBkDKnaAQ9oelCNACK5jGWBsDQBUeVBsSFMZYF4rA0CvPAjNyrw6H0yGkgB67EwjqwJGk6NxAKJ8iQDw4DMP0AtrD+iUL9Gk2p8AegSQOQCpAswPDxAehONCDWDfXzsAxOXAYjZasLgazAFbYkAttOkzIuxYmAHYpy4BUF3ixAC71YkBGluyA+b2TCNstnKbrsH8ygNotO0z+8bZlGHbxw12KgKGLmw8zTtq6caTGexYANitr/7ct7xMawpKMxJmG2bGqSsA9nWuln/u3dgLfZu/7Cd1q/5qU+/uaFcE3JIGaIAGqAN0gr23UxuS1Z2h8ylA6Pd0/AuvXvQZ/dx7PQXItXPTWSRDOHMCsP9DOXp259YUuh9SXQLIPGC7AiC2monSWKZw5gygOpc/OwBUeEehAX7VUXhtByeWKM4Br31B+9wrb2RjcT4YL80Hl+VPBxj+3wHdoz8v0EeA6T6ARoAHfyIhfs20+Ky6LPg/Rj36M0wy867uTXkNOLyv/JsDDu9s/+aAYDzsvHIdQM8r52TygP68ck5GDyDnlXMyBLN8Bojs+oFg/xFPANiDH40jnkMeDcOIAE+0GE8hD/rw5g94NWnSpEmTJk2aNGnSpEmTJk2aNGnSpEmTJk2a/LHlf/vs4b0MR/1wAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>

luckydiamond/src/assets/icons-menu/slots-icon.svg

@@ -1,21 +0,0 @@
-<svg width="73" height="44" viewBox="0 0 73 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g id="sadasdad 1" filter="url(#filter0_d_644_4)">
-<rect width="65" height="36" fill="url(#pattern0)" shape-rendering="crispEdges"/>
-</g>
-<defs>
-<filter id="filter0_d_644_4" x="0" y="0" width="73" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="4" dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_644_4"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_644_4" result="shape"/>
-</filter>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0_644_4" transform="matrix(0.00193643 0 0 0.00354004 0 -0.40625)"/>
-</pattern>
-<image id="image0_644_4" width="512" height="512" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAAAXNSR0IB2cksfwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAZQTFRFAAAA70RE4n0h2gAAAAJ0Uk5TAP9bkSK1AAAET0lEQVR4nO3bTZKbMBAFYCgWLH2DcBQdDY7GUTgCSy8oFGP+W0J0q41xUu8tUnkV+qsZLH4mA0mCIAiCIAiCIAiCIAiCIAiCIAiCIAiC/JMpe918Zm2tAgprnyqgtFb1PaT2lUoB5APQKIDHALQKoBgAzV40A9ApgHIANB+DfSd+Ph2BKhrIRqCOBvIRaO4DHiMQv5LUQDEC8UtRDZgRiF/LaqAcgfiDYTihqU5qr+Em1wDDcZBpDsfhSEyVwPRHNNC/d8SdQPdeTQDuBe5fB+qlrAd0R6P6hPIC2ocS0J1U778uqIH7L67332Co75HUt3nqG001oL5X1t+tG91K/sBPLOofujLdMkjGj0EzP+xFzT58H06aHxvfe7EBAAAAAAAfB6bbHVYqD5AK5reXkgWQfAHbq+ECGBHQuoBofvM9zEAmA3oHyGXA+jnMQCEEagoYIdBQoBQCLQWE8+uN2QSI1uGQTgv0BBAuA7vemU2AdBk4gOxQGlJpgXoPFN8Hmj1gvg+0HwZKu79pp7fg+z6tGgK0xwNOL9fdsAJNYID24g10G8CSHx5PgMf6PaxAaID2aSdU0UC2roUF6EMDB0AbDUznn+cWCA4cAL0WsPcB81Wg0gK1FmhuB1ot8Lwd6H4OMMtBet7no2kHLCyrFw6QrQcpp+cOMN8kMPv4K7ItMF/jK15PD4Ga2R2gIBuc9fIIaJhdDRgKGHeDsw7gMqDm94uAit8vAgT9GqAXdAcYzlO9pDtAvjkLczo9H+w2OOte4EEGQt0D9MMGT253gAfZ4Kw7QD5er1pu9wBPMhDuDpC+/s0IugMkr78aQXeBP++LRc3tLpCQgZPuBcbDndcvAeZfxLP6VUCfcLsPyMhAsB8AXcLtPiAnA8F+CTAd7rw+n+Y/DbQJt/uAggwE+wHQJNzuAwwZCPYDoE64/RKgJAPBfgBUCbf7AEsGgv0ASBJuvwKYTzi8/jGgXjfIyEC4+4GODAT6DFQfBPL5v+1ZfQbYAwdArwW257zlcQZWN+uHEA0kc6YNiumEw+s/CcxnLF7/VaDidw9QkoFwvwgQdA9gyUC4XwP0gu4CKRk46dcAnaD/IpAtv4xldRcoyMBJdwFLFs5Jd4DN61Ws7gD5fLFn9s8Dm/ezWN0BiuVKx+s/CJhhg07U/zvg659CeTtgtceCAwiPxtQBNg/ucnq+/VVxzBnp4QCbV0453bpAIuh2XZb/NPC8HWgFA9cAjRaotUAVC6SfAiRfsg/o2QMHQLfdIPYxkjhg8yTMskHMszj1DqjkwG6D/WsQJ0BB96H0gSZDDiX3Df4w4Hl/prTy7B7iMrrxGKDZA8X3gXoPxD+fGA1UeyD/PrCflz9mSl+iin9Sdo4UeFKg1AJGCDQUKIRATQHpSqooIF0IdF76OTqfovRj8LzGVYgAZx8KF7P3bcBS9x0gCIIgCIIgCIIgCIIgCIIgCIIgCIIgt+UvVBu5EERv1u4AAAAASUVORK5CYII="/>
-</defs>
-</svg>

luckydiamond/src/assets/js/Profile/Referrals.js

@@ -0,0 +1,61 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+export async function GetReferralData () {
+    
+    const myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    
+    const userData = {
+      searchToken: GetCookie("SearchToken"),
+      authtoken: GetCookie("AUTHTOKEN"),
+    };
+  
+    const raw = JSON.stringify({
+      "userCredentials": {
+        "searchToken": userData.searchToken,
+        "authtoken": userData.authtoken
+      }
+    });
+  
+    const response = await fetch(`${BackendApiUrl}/PromoCode/GetReferralInfo`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: raw,
+        redirect: "follow"
+      });
+  
+      return await response.json();
+
+
+}
+
+export async function WithdrawReferralMoney () {
+  const myHeaders = new Headers();
+myHeaders.append("Content-Type", "application/json");
+
+const userData = {
+  searchToken: GetCookie("SearchToken"),
+  authtoken: GetCookie("AUTHTOKEN"),
+};
+
+const raw = JSON.stringify({
+  "userCredentials": {
+    "searchToken": userData.searchToken,
+    "authtoken": userData.authtoken
+  }
+});
+
+const requestOptions = {
+  method: "POST",
+  headers: myHeaders,
+  body: raw,
+  redirect: "follow"
+};
+
+fetch("https://spsystemcore20231122004605.azurewebsites.net/api/PromoCode/TakeMoneyReferral", requestOptions)
+  .then((response) => response.text())
+  .then((result) => console.log(result))
+  .catch((error) => console.error(error));
+}

luckydiamond/src/assets/js/chat/ChatLogic.js

@@ -8,6 +8,11 @@ let webSocket;
 
 export function ConnectToChat() {
     try {
+
+        if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+            return;
+        }
+
         webSocket = new WebSocket(BackendWebSocketUrl);
 
         webSocket.onopen = function () {
@@ -16,9 +21,32 @@ export function ConnectToChat() {
 
         webSocket.onmessage = function (event) {
 
-            eventBus.emit('dataChat', event.data)
+            try {
+                const dataObject = JSON.parse(event.data);
 
-            console.log('Message from Server:', event.data);
+                if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+                    eventBus.emit('dataChat', event.data);
+                    return;
+                }
+
+                if (dataObject.MessageType == 'DoubleGameState') {
+                    eventBus.emit('doubleGame', event.data)
+                    return;
+                }
+
+                if (dataObject.MessageType == "CrashGameState") {
+                    eventBus.emit('crash', event.data);
+                    return;
+                }
+
+                if (Array.isArray(dataObject.CurrentGame.PlayerList)) {
+                    eventBus.emit('jackpotGameTik', event.data);
+                    return;
+                }
+
+            } catch (error) {
+                void (error);
+            }
         };
 
         webSocket.onclose = function () {
@@ -43,12 +71,18 @@ export function SendMessageToChat(message) {
             return;
         }
 
-        const data = {
-            SpUserName: GetCookie("SpUserName"),
-            Message: message
+        const userCredentials = {
+            SearchToken: GetCookie("SearchToken"),
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
         };
 
-        webSocket.send(JSON.stringify(data));
+        const messageObject = {
+            UserCredentials: userCredentials,
+            Message: message,
+            MessageType: "Chat"
+        };
+
+        webSocket.send(JSON.stringify(messageObject));
 
     } catch (error) {
         console.error('Error in ConnectToChat:', error);

luckydiamond/src/assets/js/games/crash/CrashAPI.js

@@ -0,0 +1,63 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+export async function JoinCrashGame(userData, amount) {
+    const data = {
+        userCredentials: {
+            searchToken: userData.searchToken,
+            authtoken: userData.authtoken
+        },
+        bid: amount
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameCrash/JoinCrashGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
+
+export async function ExitAndTakeMoneyFromCrashGame(userData) {
+    const data = {
+        exitUserCredentials: {
+            searchToken: userData.searchToken,
+            authtoken: userData.authtoken
+        }
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameCrash/ExitAndTakeMoneyFromCrashGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+
+}

luckydiamond/src/assets/js/games/double/DoubleApi.js

@@ -0,0 +1,69 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
+
+export async function GetNewestDoubleGames() {
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/GetNewestDoubleGames`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
+
+export async function JoinGame(amount, betColor) {
+
+   let betColorInt = 0;
+    if (betColor == "red") {
+        betColorInt = 0;
+    }
+    if (betColor == "green") {
+        betColorInt = 1;
+    }
+    if (betColor == "black") {
+        betColorInt = 2;
+    }
+
+    const data = {
+        UserCredentials: {
+            SearchToken: GetCookie("SearchToken"),
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
+        },
+        bet: amount,
+        betColor: betColorInt
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/JoinGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}

luckydiamond/src/assets/js/games/saper/SaperAPI.js

@@ -115,4 +115,4 @@ export async function GetWinningAmount(UserInfo) {
     catch (error) {
         console.log('Fetch error', error)
     }
-}
+}

luckydiamond/src/assets/js/jackpot/JackpotLogic.js

@@ -0,0 +1,109 @@
+// import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js';
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+// import { eventBus } from "@/main";
+
+// import {
+//     GetCookie
+// } from "@/assets/js/storage/CookieStorage.js";
+
+// let webSocket;
+
+// export function ConnectToJackpotSocket() {
+//     try {
+
+//         if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+//             console.log('WebSocket connection already established.');
+//             return; 
+//         }
+
+//         webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+
+//         webSocket.onopen = function () {
+//             console.log('Connection established');
+//         };
+
+//         webSocket.onmessage = function (event) {
+
+//             // const dataObject = JSON.parse(event.data);
+            
+//             eventBus.emit('jackpotGameTik', event.data);
+            
+//             // console.log(dataObject)
+//             // if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+//             //     eventBus.emit('dataChat', event.data);
+//             //     console.log('CHAT')
+//             // }
+//             // else {
+//             //     eventBus.emit('crash', event.data)
+//             // }
+
+//         };
+
+//         webSocket.onclose = function () {
+
+//             webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+
+//             console.log('Connection closed and reconnected');
+//         };
+
+//         webSocket.onerror = function (event) {
+//             webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+//             console.error('WebSocket Error:', event);
+//         };
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }
+
+export async function JoinJackpotGame(userData, amount) {
+    const data = {
+        userCredentials: {
+            searchToken: userData.searchToken,
+            authtoken: userData.authtoken
+        },
+        bid: amount
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameJackpot/JoinJackpotGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
+
+export async function getJackpotHistoryGame () {
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameJackpot/GetNewestJackpotGames`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: "follow"
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}

luckydiamond/src/assets/js/moneyoperation/Claimmoney.js

@@ -4,7 +4,11 @@ import {GetCookie} from "@/assets/js/storage/CookieStorage";
 
 export async function GettingMoneyOperation(amount) {
     const data = {
-        Amount: amount
+        Amount: amount,
+        UserCredentials: {
+            searchToken: GetCookie('SearchToken'),
+            authtoken: GetCookie('AUTHTOKEN')
+        }
     };
     try {
         const response = await fetch(`${BackendApiUrl}/payment/donate`, {

luckydiamond/src/assets/js/rest/RestMethods.js

@@ -1,5 +1,5 @@
 import { BackendApiUrl } from '@/properties/Сonfig.js';
-
+import { DeleteAllCookie } from "@/assets/js/storage/CookieStorage";
 
 export async function Post(url = "", data = {}) {
   try {
@@ -40,6 +40,9 @@ export async function GetCurrentMoney(authToken, searchToken) {
     });
 
     if (!response.ok) {
+      
+      DeleteAllCookie()
+      
       console.log("Fetch error:", response.status);
     }
 
@@ -49,6 +52,53 @@ export async function GetCurrentMoney(authToken, searchToken) {
   }
 }
 
+export async function GetChatHistory() {
 
+  try {
+    const response = await fetch(`${BackendApiUrl}/Chat/GetChatHistory`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: "",
+      redirect: "follow"
+    });
 
+    if (!response.ok) {
+      console.log("Fetch error:", response.status);
+    }
 
+    return await response.json();
+  } catch (error) {
+    console.log("Fetch error:", error);
+  }
+}
+
+export async function ApplyPromoCode(authToken, searchToken, promoCode) {
+  const data = {
+    userCredentials: {
+      searchToken: searchToken,
+      authtoken: authToken
+    },
+    promoCode: promoCode
+  };
+
+  try {
+    const response = await fetch(`${BackendApiUrl}/PromoCode/ApplyPromo`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      redirect: "follow"
+    });
+
+    if (!response.ok) {
+      console.log("Fetch error:", response.status);
+    }
+
+    return await response.json();
+  } catch (error) {
+    console.log("Fetch error:", error);
+  }
+}

luckydiamond/src/assets/js/storage/LocalStorage.js

@@ -0,0 +1,15 @@
+export function SaveToLocalStorage(key, value) {
+    localStorage.setItem(key, value);
+}
+
+export function GetFromLocalStorage(key) {
+    return localStorage.getItem(key);
+}
+
+export function RemoveFromLocalStorage(key) {
+    localStorage.removeItem(key);
+}
+
+export function ClearLocalStorage() {
+    localStorage.clear();
+}

luckydiamond/src/components/AsidebarComponent.vue

@@ -6,32 +6,29 @@
       </div>
       <div class="menu__btns--gamemodes">
         <div class="menu__content--gamemodes">
-          <a href="#"><img class="menu__content--slots-icon" src="../assets/icons-menu/slots-icon.svg"></a>
-          <a href="#"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
-          <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
+          <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
+          <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-icon.svg"></a>
+          <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
+          <a href="#" @click="$router.push({ name: 'double' })"><img  class="menu__content--chest-icon" src="../assets/icons-menu/duable-icons.svg"></a>
+           <!-- <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a> -->
           <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
         </div>
       </div>
       <div class="menu__btn--settings">
-        <a @click="ChangeAnimation" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
+        <a @click="$router.push({ name: 'settings' })" href="#"><img width="73" height="73" src="../assets/icons-menu/settings-icon.svg"></a>
       </div>
     </div>
   </aside>
+  
 </template>
 
 
 <script>
 // import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
-
 export default {
   name: 'AsideBar-Element',
-  // components: { NotiicationwindowComponent },
-  data() {
-    return {
-      AnimationOff: false
-    }
-  },
+ 
   // emits: ['animationchange'],
   methods: {
     ChangeAnimation() {

luckydiamond/src/components/ChatComponent.vue

@@ -10,13 +10,16 @@
     <div class="chat__content--users">
       <ul>
         <transition-group name="fade">
-          <li
-              v-for="msg in array"
-              :key="msg"
-          >
-            <div class="card__user">
+          <li v-for="msg in array" :key="msg">
+            <div
+              class="card__user"
+              :class="{
+                'mention-message': isCurrentUser(msg),
+                'system-message': msg.username === '🛠️ System',
+              }"
+            >
               <div class="user__icon">
-                <img :src="msg.icon">
+                <img :src="msg.icon" />
               </div>
               <div class="content">
                 <h1>{{ msg.username }}</h1>
@@ -26,60 +29,112 @@
           </li>
         </transition-group>
       </ul>
+    
+    
     </div>
     <writechat-component @send="ClaimDatamsg"></writechat-component>
+    <!-- <div class="chat__mute-button">
+      <button @click="muteChat">Mute</button>
+    </div> -->
   </aside>
 </template>
 
 <script>
-import '@/assets/css/ComponentsStyles/chat.css'
+import "@/assets/css/ComponentsStyles/chat.css";
+import { GetChatHistory } from "@/assets/js/rest/RestMethods.js";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
 
 import WritechatComponent from "@/components/WritechatComponent.vue";
 import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
-import {eventBus} from "@/main";
+import { eventBus } from "@/main";
 
 export default {
   components: { WritechatComponent },
-  inject: [ 'eventBus' ],
+  inject: ["eventBus"],
   data() {
     return {
       array: [],
       id: 0,
-    }
+      lastMsgTime: null,
+    };
   },
   methods: {
+    ScrollToBottom() {
+      this.$nextTick(() => {
+        const chatContent = this.$el.querySelector(".chat__content--users");
+        chatContent.scrollTop = chatContent.scrollHeight;
+      });
+    },
+    isCurrentUser(msg) {
+      return msg.msg.includes(GetCookie("SpUserName"));
+    },
     ClaimDatamsg(msg) {
-
-      SendMessageToChat(msg[0]);
-
-      // if(this.array.length > 7) {
-      //   this.array.shift()
-      // }
-    }
+      const now = Date.now();
+      if (!this.lastMsgTime || now - this.lastMsgTime >= 1000) {
+        SendMessageToChat(msg[0]);
+        this.lastMsgTime = now;
+      } else {
+        alert("Вы не можете отправлять сообщения так часто");
+      }
+    },
+    muteChat() {
+      // Mute the chat by disabling the event listener for incoming messages.
+      this.eventBus.$off("dataChat");
+    },
   },
   mounted() {
-    eventBus.on('dataChat', (dataFromServer) => {
+    eventBus.on("dataChat", (dataFromServer) => {
       try {
-      // Attempt to parse the JSON string
-      const dataObject = JSON.parse(dataFromServer);
-      let imageUrl = "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
+        const dataObject = JSON.parse(dataFromServer);
 
-      const MsgUser = {
-        id: this.id + 1,
-        msg: dataObject.Message,
-        username: dataObject.SpUserName,
-        icon: imageUrl
-      };
+        let imageUrl =
+          "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
 
-      this.array.push(MsgUser);
-    } catch (error) {
-      console.error('Error parsing JSON data:', error);
-    }
-    })
-  }
-}
+        const MsgUser = {
+          id: this.id + 1,
+          msg: dataObject.Message,
+          username: dataObject.SpUserName,
+          icon: imageUrl,
+        };
+
+        if (MsgUser.username === "🛠️ System") {
+          MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
+        }
+
+        this.array.push(MsgUser);
+
+        this.ScrollToBottom();
+      } catch (error) {
+        console.error("Error parsing JSON data:", error);
+      }
+    });
+  },
+  created() {
+    GetChatHistory().then((response) => {
+      if (response && response.length) {
+        response.forEach((element) => {
+          let imageUrl =
+            "https://avatar.spworlds.ru/face/55/" + element.userName;
+
+          const MsgUser = {
+            id: this.id + 1,
+            msg: element.message,
+            username: element.userName,
+            icon: imageUrl,
+          };
+
+          if (MsgUser.username === "🛠️ System") {
+            MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
+          }
+
+          this.array.push(MsgUser);
+        });
+        this.ScrollToBottom();
+      }
+    });
+  },
+};
 </script>
 
 <style scoped>
-
-</style>
+</style>

luckydiamond/src/components/DevelopComponent.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="info">
+    <div class="top_card">
+    <div class="Rafael1209_card">
+      <div class="Rafael1209_text_2">
+        <div class="Rafael1209_aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Rafael1209</h1>
+        </div>
+        <div class="Rafael1209_whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="Rafael1209_whatjob2_2">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="Rafael1209_skin_2">
+          <div class="Rafael1209_skin_2_skin">
+            
+            <div class="Rafael1209_skinicons1">
+            <a href="https://t.me/RafaelloChas" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/773259384095768657" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/rafael1209" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Hepatir_card">
+      <div class="text_2">
+        <div class="aboutinfo_2">
+          <p>Бэкендер</p>
+          <h1>Hepatir</h1>
+        </div>
+        <div class="whatjob_2">
+          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <p>ASP, .NET, MongoDB</p>
+        </div>
+        <div class="whatjob2_2">
+          <img src="@/assets/icons-developcard/sql-logo.png" alt="html">
+          <p>SQL</p>
+        </div>
+        </div>
+        <div class="skin_2">
+          <div class="skin_2_skin">
+            <div class="skinicons1">
+            <a href="https://t.me/Hepatacor" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/293977705815343105" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/danilt2000/" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="Ckutls__card">
+      <div class="Ckutls__text_2">
+        <div class="Ckutls__aboutinfo_2">
+          <p>Фронтэндер</p>
+          <h1>Ckutls_</h1>
+        </div>
+        <div class="Ckutls__whatjob_1">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="Ckutls__whatjob_2">
+          <img src="@/assets/icons-developcard/js.png" alt="html">
+          <p>JavaScript</p>
+        </div>
+        <div class="Ckutls__whatjob_3">
+          <img src="@/assets/icons-developcard/Vue.png" alt="html">
+          <p>Vue 3</p>
+        </div>
+        </div>
+        <div class="Ckutls__skin_2">
+          <div class="Ckutls__skin_2_skin">
+            
+            <div class="Ckutls__skinicons1">
+            <a href="https://t.me/Ckutls" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/531420425255911424" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/CkutlsGit" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+            </div>
+          </div>
+        </div>
+      
+    </div>
+    <div class="FUpir_card">
+      <div class="FUpir_text_2">
+        <div class="FUpir_aboutinfo_2">
+          <p>Дизайнер</p>
+          <h1>FUpir</h1>
+        </div>
+        <div class="FUpir_whatjob_1">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        </div>
+        <div class="FUpir_skin_2">
+          <div class="FUpir_skin_2_skin">
+            
+            <div class="FUpir_skinicons1">
+            <a href="https://t.me/Ykropmaha" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/1126752682183503942" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+           
+            </div>
+          </div>
+        </div>
+      
+    </div>
+    <div class="Swino4ka_card">
+      <div class="Swino4ka_text_2">
+        <div class="Swino4ka_aboutinfo_2">
+          <p>Фронтэндер</p>
+          <h1>Swino4ka</h1>
+        </div>
+        <div class="Swino4ka_whatjob_1">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        </div>
+        <div class="Swino4ka_skin_2">
+          <div class="Swino4ka_skin_2_skin">
+            
+            <div class="Swino4ka_skinicons1">
+            <a href="https://t.me/Swino4ka_pon" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+            <a href="https://discordapp.com/users/472393576010088449" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+            <a href="https://github.com/swino4ka/" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+           
+            </div>
+          </div>
+        </div>
+      
+    </div>
+  </div>
+  <div class="bottom_card">
+    <div class="GEDPOOL31_card">
+      <div class="GEDPOOL31_text">
+        <div class="GEDPOOL31_aboutinfo">
+          <p>Техническая поддержка</p>
+          <h1>GEDPOOL31</h1>
+        </div>
+        <div class="GEDPOOL31_whatjob">
+          <img src="@/assets/icons-developcard/tech-support.svg" alt="html">
+          <p>Tech-Support</p>
+        </div>
+        <div class="GEDPOOL31_icons">
+          <a href="https://t.me/GEDPOOL31" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://discord.com/users/1044186204884701227" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="GEDPOOL31_skin">
+        <img src="https://avatar.spworlds.ru/front/212/GEDPOOL31.png" alt="">
+        </div>
+    </div>
+    <div class="busha888_card">
+      <div class="text">
+        <div class="aboutinfo">
+          <p>Фронтэндер</p>
+          <h1>busha888</h1>
+        </div>
+        <div class="whatjob">
+          <img src="@/assets/icons-developcard/html.png" alt="html">
+          <p>HTML 5,CSS</p>
+        </div>
+        <div class="icons">
+          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" ><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
+          <a href="https://t.me/Slayyyyyyyyyyyyyyyyy" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://www.youtube.com/@busha1/featured" target="_blank" ><img src="@/assets/icons-developcard/like.png" alt=""></a>
+          <a href="https://github.com/Madara0330E" target="_blank" ><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        </div>
+      </div>
+      <div class="skin">
+        <img src="https://avatar.spworlds.ru/front/212/busha888.png" alt="">
+        </div>
+    </div>
+    <div class="CLARFFY_card">
+      <div class="CLARFFY_text">
+        <div class="CLARFFY_aboutinfo">
+          <p>Дизайнер</p>
+          <h1>CLARFFY</h1>
+        </div>
+        <div class="CLARFFY_whatjob">
+          <img src="@/assets/icons-developcard/Figma.png" alt="html">
+          <p>Designer</p>
+        </div>
+        <div class="CLARFFY_icons">
+          <a href="https://t.me/LDpoko" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+          <a href="https://discordapp.com/users/784873585852284938" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+        </div>
+      </div>
+      <div class="CLARFFY_skin">
+        <img src="https://avatar.spworlds.ru/front/212//CLARFFY.png" alt="">
+        </div>
+    </div>
+  </div>
+  </div>
+
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/developer.css'
+
+export default {
+
+}
+</script>

luckydiamond/src/components/HeaderComponent.vue

@@ -4,7 +4,7 @@ import "@/assets/css/ComponentsStyles/header.css";
 import { LogIn } from "@/assets/js/authentication/AuthService.js";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
 
-import {eventBus} from "@/main";
+import { eventBus } from "@/main";
 
 import {
   SetCookie,
@@ -18,27 +18,31 @@ export default {
     logout() {
       this.auth = false;
       this.balance = 0;
+      this.authtoken = "";
       DeleteAllCookie();
     },
     updateBalanceMethod() {
-      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
-          .then(response => {
-            this.balance = response.currentMoney
-          })
-    }
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
+        (response) => {
+          this.balance = response.currentMoney;
+        }
+      );
+      eventBus.emit("Updatebalance-saper");
+    },
   },
   data() {
     return {
       balance: 0,
       auth: false,
+      authtoken: "",
       imageUrl: "https://avatar.spworlds.ru/face/55/",
       userName: "",
     };
   },
   mounted() {
-    eventBus.on('Updatebalance', () => {
-      this.updateBalanceMethod()
-    })
+    eventBus.on("Updatebalance", () => {
+      this.updateBalanceMethod();
+    });
   },
   created() {
     try {
@@ -47,7 +51,6 @@ export default {
       if (authCode) {
         LogIn(authCode)
           .then((response) => {
-            console.log("Auth Data:", response);
             SetCookie("UserId", response.userId);
             SetCookie("SpUserName", response.spUserName);
             SetCookie("AUTHTOKEN", response.authtoken);
@@ -56,10 +59,10 @@ export default {
             this.imageUrl = this.imageUrl + `${response.spUserName}.png`;
             this.userName = response.spUserName;
             this.auth = true;
+            this.authtoken = response.authtoken;
             GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
               .then((response) => {
                 this.balance = response.currentMoney;
-                console.log(response);
               })
               .catch((error) => {
                 console.error(error);
@@ -80,6 +83,7 @@ export default {
               this.imageUrl = this.imageUrl + `${currentUserName}.png`;
               this.userName = GetCookie("SpUserName");
               this.auth = true;
+              this.authtoken = GetCookie("AUTHTOKEN");
             } else {
               this.auth = false;
               this.balance = 0;
@@ -90,7 +94,6 @@ export default {
         GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
           .then((response) => {
             this.balance = response.currentMoney;
-            console.log(response);
           })
           .catch((error) => {
             // Обработка ошибки
@@ -101,6 +104,7 @@ export default {
           this.imageUrl = this.imageUrl + `${currentUserName}.png`;
           this.userName = GetCookie("SpUserName");
           this.auth = true;
+          this.authtoken = GetCookie("AUTHTOKEN");
         } else {
           this.auth = false;
           this.balance = 0;
@@ -116,17 +120,43 @@ export default {
   <header class="header">
     <div class="header__content">
       <div class="header__logo">
-        <img @click="$router.push({ name: 'home' })" src="../assets/logo.svg" alt="" />
+        <img
+          @click="$router.push({ name: 'home' })"
+          src="../assets/logo.svg"
+          alt=""
+        />
       </div>
       <div class="header__nav">
         <nav>
-          <a href="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
-          <a href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
-          <a href="#">Помощь</a>
+          <a
+            href="#"
+            @click="$router.push({ name: 'home' })"
+            :class="{ 'header__nav--now': $route.name === 'home' }"
+            >Главная</a
+          >
+          <a
+            v-if="authtoken !== ''"
+            href="#"
+            @click="$router.push({ name: 'profile' })"
+            :class="{ 'header__nav--now': $route.name === 'profile' }"
+            >Профиль</a
+          >
+          <a
+            href="#"
+            @click="$router.push({ name: 'help' })"
+            :class="{ 'header__nav--now': $route.name === 'help' }"
+            >Помощь</a
+          >
+          <a
+            href="#"
+            @click="$router.push({ name: 'about' })"
+            :class="{ 'header__nav--now': $route.name === 'about' }"
+            >О нас</a
+          >
         </nav>
       </div>
       <div class="header__balance">
-        <div class="header__content--balance">
+        <div class="header__content--balance" v-if="authtoken">
           <div class="header__card--balance">
             <h2>
               <img src="../assets/icons-header/diamond-ore-icon.png" />{{
@@ -155,7 +185,7 @@ export default {
           <!-- <div class="header__card--auth">  -->
           <div class="auth__card--content">
             <a
-              href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              href="https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify"
               @click="auth = true"
               ><span
                 ><img
@@ -164,6 +194,8 @@ export default {
                   src="../assets/icons-header/discord-icon.svg" /></span
               >Вход</a
             >
+            <!-- https://media.discordapp.net/attachments/1175674631684898866/1214143880073842698/Undwadtitled.png?ex=65f80a9a&is=65e5959a&hm=9cb0ffffa2bfc6ee9302f8d96be7f8c3049dc04df478dd05cdd94f697c662e1d&=&format=webp&quality=lossless -->
+            <!-- https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify-->
           </div>
         </div>
       </div>
@@ -171,4 +203,4 @@ export default {
   </header>
 </template>
 <style scoped>
-</style>
+</style>

luckydiamond/src/components/HelpComponent.vue

@@ -0,0 +1,56 @@
+
+<template>
+    <div class="box_help">
+        <div class="Heading_p1">
+        <div class="heding2"><h3>Добро пожаловать на Lucky Diamond Casino</h3></div>
+        <div class="heding2_text">
+        <p><b>Проект "Lucky Diamond Casino" - Представляет собой сайт онлайн-казино на игровую валюту Майнкрафт сервера СПМ.
+          В дальнейшем времени возможно будет и на сервере СП.</b></p>
+          </div>
+        </div>
+          <div class="Heading_p1">
+            <div class="heding2"><h3>Поддержка</h3></div>
+            <div class="heding2_text">
+            <p><b>При вопросах или проблемах на сайте обращайтесь в поддержку которая находиться в <a href="https://discord.gg/4ybrEqFzYh">Discord</a></b></p>
+                </div>
+                <div class="heding2"><h3>Спасибо за помощь</h3></div>
+            <div class="heding2_text">
+            <p><b>Отдельно хочется выразить благодарность Tsybry и всем кто помогал нам в этом не легком пути</b></p>
+            <p><b></b></p>
+                </div>
+            </div>
+              <!-- <div class="questions">
+                <div class="questions_box">
+                <h3>Спасибо за помощь</h3>
+              </div> -->
+                <!-- <div class="questions1">
+                  <b>Вилкой в глаз, или маму твою ебал?</b>
+                  <img src="@\assets\icons-test\lest.png" alt="">
+                </div> -->
+                <!-- <div class="text_questions">
+                 <p><b>Отдельно хочется выразить благодарность всем кто помогал нам в этом не легком пути</b></p> 
+                </div> -->
+                <!-- <div class="questions2">
+                  <b>Вилкой в глаз, или маму твою ебал?</b>
+                  <img src="@\assets\icons-test\lest.png" alt="">
+                </div> -->
+                <div class="Social1where">
+                  <div class="Social1text">
+                    <b>Наши соц-сети:</b>
+                  </div>
+                  <div class="Social1icons">
+                    <a href="https://t.me/lucky_diamond_spm" target="_blank" ><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+                    <a href="https://discord.gg/4HhZFY2PEv" target="_blank" ><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+                  </div>
+                </div>
+
+              </div>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/Help.css'
+
+export default {
+
+}
+</script>

luckydiamond/src/components/NotiicationwindowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="notification" v-if="notification">
     <div class="notification__content">
-      <h3>Успешный вывод!</h3>
+      <h3>Операция вывода отправлена</h3>
     </div>
   </div>
 </template>

luckydiamond/src/components/PaymentsModal.vue

@@ -8,19 +8,27 @@
       />
     </div>
     <div v-if="payments" class="payments-modal__deposit">
+      <div class="error-deposit" v-if="errorDeposit">
+        <h2>Ошибка с суммой депозита</h2>
+      </div>
       <div
         class="deposit-input deposit-text deposit-icon-diamond deposit-icon__input"
       >
         <h3>Сумма пополнения</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="deposit-amount__input" v-model="amount" type="number" />
+        <input
+          :class="{ 'animate-start-btn': errorDeposit }"
+          class="deposit-amount__input"
+          v-model="amount"
+          type="number"
+        />
         <div class="deposit-btns">
           <ul class="display-btns btns-style-diamonds">
-            <li v-for="number in PaymentsModalNumbers" :key="number">
+            <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
               <button
-                @click="clickedBtnChoice(number, number.diamonds)"
+                @click="clickedBtnChoice(index, number.diamonds)"
                 :class="{
-                  'btn-click': clickedBtn === number,
+                  'btn-click': clickedBtn === index,
                   [number]: clickedBtn === number,
                 }"
               >
@@ -30,16 +38,37 @@
           </ul>
         </div>
         <div v-if="showPromocodeStatus" class="error-promocode">
-          <h2 v-if="errorPromocode" class="error-text__promocode">Промокод не найден</h2>
-          <h2 v-else class="correct-text__promocode">Промокод успешно применён</h2>
+          <h2 v-if="errorPromocode" class="error-text__promocode">
+            {{ promoResponse }}
+          </h2>
+          <h2 v-else class="correct-text__promocode">
+            Промокод успешно применён
+          </h2>
         </div>
         <div class="deposit-promocode deposit-promocode__padding--input">
           <h3>Промокод</h3>
-          <input @focusout="checkValidationPromocode" v-model="promocode" class="promo-input" type="text" />
+          <div class="promokods">
+            <input
+              @focusout="checkValidationPromocode"
+              v-model="promocode"
+              class="promo-input"
+              type="text"
+            />
+            <button class="vvod_promocoda" @click="handleApplyPromoCode">
+              Ввод
+            </button>
+          </div>
+        </div>
+        <div class="error-checkbox" v-if="errorAgree">
+          <h2>Подтвердите согласие!</h2>
         </div>
         <div class="deposit-checkbox checkbox-styles">
-          <input @click="agreeUser = !agreeUser" type="checkbox" />
-          <h3>Я согласен с пользовательским соглашением.</h3>
+          <input
+            @click="agreeUser = !agreeUser"
+            type="checkbox"
+            :class="{ 'animate-start-btn': errorAgree }"
+          />
+          <h3>Я согласен с <a href="https://docs.google.com/document/d/1lU_zTWJdD1lcMlIAFDIVz-DlZAoq3a-OFkoO8WBIkzo/edit?usp=sharing">пользовательским соглашением</a></h3>
         </div>
         <div
           class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
@@ -47,13 +76,7 @@
           <p>
             Вы подтверждаете правильность введенных данных при создании вывода.
           </p>
-          <button
-            type="submit"
-            :disabled="checkOffBtn"
-            @click="RedirectedMethodDep"
-          >
-            Пополнить
-          </button>
+          <button type="submit" @click="RedirectedMethodDep">Пополнить</button>
           <p>
             Перед пополнение прочитайте политику конфиденциальности и
             пользовательское соглашение.
@@ -62,30 +85,53 @@
       </div>
     </div>
     <div v-else class="payments-modal__withdraw deposit-text withdraw-input">
+      <div class="error-deposit" v-if="errorDeposit">
+        <h2>Ошибка с суммой депозита</h2>
+      </div>
       <div class="count-withdraw deposit-icon-diamond">
         <h3>Сумма вывода</h3>
         <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
-        <input class="with-input" v-model="amountWithdraw" type="number" />
+        <input
+          :class="{ 'animate-start-btn': errorDeposit }"
+          class="with-input"
+          v-model="amountWithdraw"
+          type="number"
+        />
+      </div>
+      <div class="error-card" v-if="errorCard">
+        <h2>Ошибка с вводом карты</h2>
       </div>
       <div class="number-card deposit-promocode__padding--input">
         <h3>Введите номер карты</h3>
-        <input class="with-input" v-model="card" type="text" />
+        <input
+          :class="{ 'animate-start-btn': errorCard }"
+          class="with-input"
+          v-model="card"
+          type="text"
+        />
       </div>
-      <div v-if="offAgree" class="error-checkbox">
-        <h2 v-show="errorAgree">Введите сначало карту</h2>
+      <div class="error-checkbox" v-if="errorAgree">
+        <h2>Подтвердите согласие!</h2>
       </div>
       <div class="withdraw-checkbox checkbox-styles">
-        <input :disabled="offAgree" @mouseover="errorAgree = true" @mouseleave="errorAgree = false" @click="agreeUser = !agreeUser" type="checkbox"/>
-        <h3>Я согласен с пользовательским соглашением.</h3>
+        <input @click="agreeUser = !agreeUser" type="checkbox" />
+        <h3>Я согласен <a href="https://docs.google.com/document/d/1lU_zTWJdD1lcMlIAFDIVz-DlZAoq3a-OFkoO8WBIkzo/edit?usp=sharing">пользовательским соглашением</a></h3>
       </div>
-      <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component>
+      <div class="error-captcha" v-if="errorCaptcha && agreeUser === true">
+        <h2>Пройдите проверку!</h2>
+      </div>
+      <captcha-component
+        @captchatokendata="claimCaptchaToken"
+        :showcaptcha="agreeUser"
+      ></captcha-component>
+      <!-- <captcha-component @captchatokendata="claimCaptchaToken" :showcaptcha="agreeUser" @captchadata="closeModal"></captcha-component> -->
       <div
         class="btn-withdraw btn-text-style btn-display-deposit btn-style-payments"
       >
         <p>
           Вы подтверждаете правильность введенных данных при создании вывода.
         </p>
-        <button type="submit" :disabled="checkOffBtn" @click="RedirectedMethodTransferMoneyToSp">
+        <button type="submit" @click="RedirectedMethodTransferMoneyToSp">
           Вывод
         </button>
         <p>
@@ -100,142 +146,269 @@
 <script>
 import "@/assets/css/ComponentsStyles/payments-modal.css";
 import PaymentsModalNumbers from "@/mocks/PaymentsModalNumbers";
-import { GettingMoneyOperation, WithdrawMoneyOperation } from "@/assets/js/moneyoperation/Claimmoney";
+import {
+  GettingMoneyOperation,
+  WithdrawMoneyOperation,
+} from "@/assets/js/moneyoperation/Claimmoney";
 import CaptchaComponent from "@/components/CaptchaComponent.vue";
 
+import { eventBus } from "@/main";
+
+import { useVuelidate } from "@vuelidate/core";
+import {
+  maxValue,
+  minValue,
+  required,
+  numeric,
+  integer,
+  minLength,
+  maxLength,
+} from "@vuelidate/validators";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+import { ApplyPromoCode } from "@/assets/js/rest/RestMethods.js"; // Замените на правильный путь к файлу с функцией ApplyPromoCode
+
 export default {
   components: { CaptchaComponent },
   props: ["payments"],
   data() {
     return {
       amount: 0,
-      amountWithdraw: 1,
-      amountSave: 1,
-      card: '',
-      promocode: '',
-      promocodeBase: ['ANTI-GRIF'],
+      amountWithdraw: 0,
+      balance: 0,
+      card: "",
+      promocode: "",
+      promocodeBase: ["ANTI-GRIF"],
       errorPromocode: false,
       showPromocodeStatus: false,
       errorAgree: false,
+      errorDeposit: false,
+      errorCard: false,
+      errorCaptcha: false,
       captchaToken: null,
       clickedBtn: "",
       url: "",
-      offBtn: true,
-      offAgree: true,
       completeValidtaion: {
         amountsaving: true,
         cardsaving: false,
         agreesaving: false,
-        captchatokensaving: false
+        captchatokensaving: false,
       },
       agreeUser: false,
       PaymentsModalNumbers,
     };
   },
+  created() {
+    GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
+      (response) => {
+        this.balance = response.currentMoney;
+      }
+    );
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  validations() {
+    return {
+      amount: { required, numeric, minValue: minValue(1), integer },
+      amountWithdraw: {
+        required,
+        numeric,
+        minValue: minValue(1),
+        maxValue: maxValue(this.balance),
+        integer,
+      },
+      card: {
+        required,
+        numeric,
+        minLength: minLength(5),
+        maxLength: maxLength(5),
+        integer,
+      },
+    };
+  },
   watch: {
-    amount(newAmount) {
-      this.offBtn = true;
-      if (this.amount > 0 && this.amount !== "") {
-        setTimeout(() => {
-          try {
-            GettingMoneyOperation(newAmount).then((response) => {
-              console.log("Payments Modal Working!: ", response);
-              this.url = response;
-              this.offBtn = false;
-            });
-          } catch (e) {
-            console.error("Error in PaymentModal!", e);
-          }
-        }, 2000);
-      }
-    },
-    amountWithdraw(newAmount) {
-      this.completeValidtaion.amountsaving = false
-      if (newAmount > 0) {
-        this.amountSave = newAmount
-        this.completeValidtaion.amountsaving = true
-        console.log(this.completeValidtaion)
-      }
-    },
-    card(newAmount) {
-      this.completeValidtaion.cardsaving = false
-      const cardPattern = /^\d{5}$/;
-      if(cardPattern.test(newAmount)) {
-        this.offAgree = false
-        this.completeValidtaion.cardsaving = true
-      }
-    },
-    agreeUser(newAgree) {
-      this.completeValidtaion.agreesaving = false
-      if (newAgree !== false) {
-        this.completeValidtaion.agreesaving = true
+    amount(DepositCount) {
+      console.log(DepositCount);
+      if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
+        this.clickedBtn = null;
+      } else {
+        let index;
+        switch (DepositCount) {
+          case 1:
+            index = 0;
+            break;
+          case 5:
+            index = 1;
+            break;
+          case 10:
+            index = 2;
+            break;
+          case 50:
+            index = 3;
+            break;
+          case 100:
+            index = 4;
+            break;
+          case 1000:
+            index = 5;
+            break;
+        }
+        this.clickedBtnChoice(index, DepositCount);
       }
     },
     completeValidtaion: {
       handler() {
-        this.completeValidationCheck()
+        this.completeValidationCheck();
       },
-      deep: true
-    }
-  },
-  computed: {
-    checkOffBtn() {
-      return this.checkBtn();
+      deep: true,
     },
   },
   methods: {
     closeModal() {
       return this.$emit("closemodal");
     },
-    checkValidationPromocode() {
-      this.errorPromocode = !this.promocodeBase.includes(this.promocode);
-      this.showPromocodeStatus = true
-    },
+    // checkValidationPromocode() {
+    //   this.errorPromocode = !this.promocodeBase.includes(this.promocode);
+    //   this.showPromocodeStatus = true
+    // },
     completeValidationCheck() {
-      this.offBtn = true
+      this.offBtn = true;
 
       if (
-          this.completeValidtaion.amountsaving &&
-          this.completeValidtaion.cardsaving &&
-          this.completeValidtaion.agreesaving &&
-          this.completeValidtaion.captchatokensaving
+        this.completeValidtaion.amountsaving &&
+        this.completeValidtaion.cardsaving &&
+        this.completeValidtaion.agreesaving &&
+        this.completeValidtaion.captchatokensaving
       ) {
-        this.offBtn = false
+        this.offBtn = false;
       }
     },
     claimCaptchaToken(Token) {
-      this.captchaToken = Token
-      this.completeValidtaion.captchatokensaving = true
+      this.captchaToken = Token;
+      this.completeValidtaion.captchatokensaving = true;
     },
-    RedirectedMethodDep() {
-      console.log(`From /profile to - ${this.url} url`)
-      window.location.href = this.url
+    async handleApplyPromoCode() {
+      const authToken = GetCookie("AUTHTOKEN");
+      const searchToken = GetCookie("SearchToken");
+
+      try {
+        const response = await ApplyPromoCode(
+          authToken,
+          searchToken,
+          this.promocode
+        );
+
+        console.log(response);
+
+        if (response === "Promo dont exist.") {
+          this.showPromocodeStatus = true;
+          this.errorPromocode = true;
+          this.promoResponse = "Промокод не найден";
+        } else if (response === "promotional code has expired") {
+          this.showPromocodeStatus = true;
+          this.errorPromocode = true;
+          this.promoResponse = "Не действителен";
+        } else if (response === "User is alredy use the promo") {
+          this.showPromocodeStatus = true;
+          this.errorPromocode = true;
+          this.promoResponse = "Уже использован";
+        } else {
+          this.showPromocodeStatus = true;
+          this.errorPromocode = false;
+          this.promoResponse = response;
+        }
+      } catch (error) {
+        console.error("Ошибка при применении промокода:", error);
+      }
     },
-    async RedirectedMethodTransferMoneyToSp() {
-      setTimeout(async () => {
+    async RedirectedMethodDep() {
+      this.v$.$touch();
+
+      if (this.v$.amount.$error) {
+        this.errorDeposit = true;
+
+        setTimeout(() => {
+          this.errorDeposit = false;
+        }, 1500);
+      }
+      if (this.agreeUser !== true) {
+        this.errorAgree = true;
+        setTimeout(() => {
+          this.errorAgree = false;
+        }, 1500);
+      }
+      if (!this.v$.amount.$error && this.agreeUser === true) {
         try {
-          WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
-            console.log(`work withdraw - ${response}`)
-          })
-        }
-        catch (e) {
-          console.error(`Error in wihdrawmoney operation - ${e}`)
-        }
-        await this.$emit('notifacetionmoney')
-      }, 4000)
-    },
-    checkBtn() {
-      if (this.offBtn === false) {
-        if (this.agreeUser !== false) {
-          return false;
+          GettingMoneyOperation(this.amount).then((response) => {
+            console.log("Payments Modal Working!: ", response);
+            this.url = response;
+            this.offBtn = false;
+
+            window.location.href = this.url;
+          });
+        } catch (e) {
+          console.error("Error in PaymentModal!", e);
         }
       }
-      return true;
+    },
+    async RedirectedMethodTransferMoneyToSp() {
+      this.v$.$touch();
+
+      if (this.v$.amountWithdraw.$error) {
+        this.errorDeposit = true;
+
+        setTimeout(() => {
+          this.errorDeposit = false;
+        }, 1500);
+      }
+      if (this.v$.card.$error) {
+        this.errorCard = true;
+
+        setTimeout(() => {
+          this.errorCard = false;
+        }, 1500);
+      }
+      if (this.agreeUser !== true) {
+        this.errorAgree = true;
+
+        setTimeout(() => {
+          this.errorAgree = false;
+        }, 1500);
+      }
+      if (this.captchaToken === null) {
+        this.errorCaptcha = true;
+
+        setTimeout(() => {
+          this.errorCaptcha = false;
+        }, 1500);
+      }
+      if (
+        !this.v$.amountWithdraw.$error &&
+        !this.v$.card.$error &&
+        this.agreeUser === true &&
+        this.captchaToken !== null
+      ) {
+        WithdrawMoneyOperation(
+          this.amountWithdraw,
+          this.card.toString(),
+          this.captchaToken
+        ).then(async (response) => {
+          try {
+            console.log("work", response);
+          } catch (e) {
+            console.error(e);
+          }
+          await this.$emit("notifacetionmoney");
+          eventBus.emit("Updatebalance");
+        });
+      }
     },
     clickedBtnChoice(index, content) {
       this.clickedBtn = index;
       this.amount = content;
+      console.log(index);
     },
   },
 };
-</script>
+</script>

luckydiamond/src/components/ReferalModal.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="payment-modal withdraw-modal">
+    <div class="payments-modal__content close-modal__icon text-styles__margin">
+      <h1>Рефералы</h1>
+      <img @click="closeModal" src="@/assets/icons-other/icon-payments-modal-close.svg" />
+    </div>
+    <div class="payments-modal__deposit">
+      <div class="error-deposit" v-if="errorDeposit">
+      <h2>Ошибка с суммой депозита</h2>
+    </div>
+    <div
+      class="deposit-input deposit-text referal-icon-diamond deposit-icon__input"
+    >
+    <br>
+    <h3>Ваш реферальный код</h3>
+    <input
+  :class="{ 'animate-start-btn': errorDeposit }"
+  readonly
+  class="deposit-amount__input"
+  v-if="referralData.referralCode"
+  :value="referralData.referralCode"
+/>
+      <br>
+      <br>
+      <h3>Доступно к выводу</h3>
+      <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" />
+      <input
+      :class="{ 'animate-start-btn': errorDeposit }"
+      readonly
+      class="deposit-amount__input"
+      v-if="referralData.avalibleAmount !== 0"
+      :value="referralData.avalibleAmount" 
+    />
+    <input
+      :class="{ 'animate-start-btn': errorDeposit }"
+      readonly
+      class="deposit-amount__input"
+      v-else 
+      :value="'0'"
+    />
+      <div class="deposit-btns">
+        <ul class="display-btns btns-style-diamonds">
+          <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
+            <button
+              @click="clickedBtnChoice(index, number.diamonds)"
+              :class="{
+                'btn-click': clickedBtn === index,
+                [number]: clickedBtn === number,
+              }"
+            >
+              {{ number.diamonds }}
+            </button>
+          </li>
+        </ul>
+      </div>
+      <div class="deposit-promocode deposit-promocode__padding--input">
+        <h3>Всего привели рефералов</h3>
+        <div class="promokods">
+          <input
+      :class="{ 'animate-start-btn': errorDeposit }"
+      readonly
+      class="deposit-amount__input"
+      v-if="referralData.activationsAmount !== 0" 
+      :value="referralData.activationsAmount" 
+    />
+    <input
+      :class="{ 'animate-start-btn': errorDeposit }"
+      readonly
+      class="deposit-amount__input"
+      v-else 
+      :value="'0'"
+    />
+        </div>
+      </div>
+      <div class="error-checkbox" v-if="errorAgree">
+        <h2>Подтвердите согласие!</h2>
+      </div>
+      <div class="deposit-checkbox checkbox-styles">
+        <input
+          @click="agreeUser = !agreeUser"
+          type="checkbox"
+          :class="{ 'animate-start-btn': errorAgree }"
+        />
+        <h3>Я согласен с <a href="https://docs.google.com/document/d/1lU_zTWJdD1lcMlIAFDIVz-DlZAoq3a-OFkoO8WBIkzo/edit?usp=sharing">пользовательским соглашением</a></h3>
+      </div>
+      <div
+        class="btn-deposit btn-text-style btn-display-deposit btn-style-payments"
+      >
+        <p>
+          Вы подтверждаете правильность введенных данных при создании вывода.
+        </p>
+        <button type="submit" @click="handleWithdraw">Вывести</button>
+        <p>
+          Перед пополнение прочитайте политику конфиденциальности и
+          пользовательское соглашение.
+        </p>
+      </div>
+      </div>
+    </div>
+    </div>
+</template>
+
+<script>
+import "@/assets/css/ComponentsStyles/payments-modal.css";
+import { GetReferralData } from "@/assets/js/Profile/Referrals";
+import { WithdrawReferralMoney } from "@/assets/js/Profile/Referrals";
+import { eventBus } from "@/main";
+
+export default {
+  data() {
+    return {
+      referralData: {},
+      errorDeposit: false,
+      errorAgree: false,
+      agreeUser: false,
+      amount: 0,
+      PaymentsModalNumbers: [],
+    };
+  },
+  props: ["payments"],
+  async created() {
+    this.referralData = await GetReferralData();
+  },
+  computed: {
+    avalibleAmountValue() {
+      return this.referralData.avalibleAmount !== 0 ? this.referralData.avalibleAmount : '0';
+    },
+    activationsAmountValue() {
+      return this.referralData.activationsAmount !== 0 ? this.referralData.activationsAmount : '0';
+    }
+  },
+  methods: {
+    async handleWithdraw() {
+      try {
+        if (!this.agreeUser) {
+          this.errorAgree = true;
+          setTimeout(() => {
+            this.errorAgree = false;
+          }, 1500);
+          return;
+        }
+
+        if (this.referralData.avalibleAmount == 0) {
+          window.alert("У вас нет денег на вывод :(");
+          return;
+        }
+
+        await WithdrawReferralMoney().then(async (response) => {
+          try {
+            console.log("work", response);
+          } catch (e) {
+            console.error(e);
+          }
+          await this.$emit("notifacetionmoney");
+          eventBus.emit("Updatebalance");
+          this.$emit("closemodal");
+        });
+      } catch (error) {
+        console.error("Error withdrawing referral money:", error);
+      }
+    },
+    closeModal() {
+      this.$emit("closemodal");
+    },
+  },
+};
+</script>

luckydiamond/src/components/WritechatComponent.vue

@@ -42,18 +42,21 @@ export default {
       }
     },
     SendmsgData() {
-      const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
-      this.$emit("send", [formattedWord, this.username, this.icon]);
+      // const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
+      this.$emit("send", [this.msg, this.username, this.icon]);
       this.msg = "";
     },
-    
-    InsertSpaceEvery24Chars(word) {
-      let result = "";
-      for (let i = 0; i < word.length; i += 22) {
-        result += word.substring(i, i + 22) + " ";
-      }
-      return result.trim();
-    },
+
+    // InsertSpaceEvery24Chars(text) {
+    //   let result = "";
+    //   for (let i = 0; i < text.length; i++) {
+    //     if (i > 0 && i % 24 === 0) {
+    //       result += " ";
+    //     }
+    //     result += text[i];
+    //   }
+    //   return result;
+    // },
   },
 };
 </script>

luckydiamond/src/components/games-components/CrashGraphComponent.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="time" v-if="crashdata.Status === 'WaitingForPlayers'">
+    <h2>
+      {{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : "" }} сек.
+    </h2>
+  </div>
+  <LineChart :chart-data="data" :options="options" v-else />
+  <h2 class="ratio" :class="{ 'lost-ratio': crashdata.Status === 'GameEnd' }">
+    {{ crashdata.CurrentX ? crashdata.CurrentX.toFixed(2) : "" }}x
+  </h2>
+</template>
+
+<script>
+import { LineChart } from "vue-chart-3";
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from "chart.js";
+
+Chart.register(
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+);
+
+export default {
+  components: { LineChart },
+  props: {
+    crashdata: Object,
+  },
+  mounted() {
+    this.data = this.chartData;
+    this.updateData();
+  },
+  data() {
+    return {
+      dataValues: [],
+      numberGraph: 1,
+      labels: [" "],
+      data: null,
+      options: {
+        plugins: {
+          title: {
+            text: "Line",
+          },
+        },
+        scales: {
+          x: {
+            grid: {
+              display: false,
+            },
+          },
+          y: {
+            grid: {
+              display: false,
+            },
+          },
+        },
+        animation: false,
+      },
+    };
+  },
+
+  computed: {
+    chartData() {
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: "Foo",
+            data: this.dataValues,
+            borderColor: "#4E5EF2",
+            pointStyle: "circle",
+            pointRadius: 0,
+            pointHoverRadius: 2,
+          },
+        ],
+      };
+    },
+  },
+
+  watch: {
+    crashdata: {
+      handler: "updateData",
+      immediate: true,
+    },
+  },
+
+  methods: {
+    updateData() {
+      let nextDataValue;
+      if (this.crashdata.Status === "WaitingForPlayers") {
+        this.data = this.chartData;
+        this.labels = [""];
+        this.dataValues = [this.numberGraph, this.numberGraph];
+      } else if (this.crashdata.Status === "InGame") {
+        if (this.dataValues.length === 0) {
+          this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX];
+          nextDataValue = this.crashdata.CurrentX;
+          this.numberGraph = this.crashdata.CurrentX;
+
+          this.data = this.chartData;
+          this.labels.push("");
+          this.dataValues.push(nextDataValue);
+        }
+
+        this.numberGraph = this.numberGraph + 0.01;
+        nextDataValue = this.numberGraph;
+
+        this.data = this.chartData;
+        this.labels.push("");
+        this.dataValues.push(nextDataValue);
+      } else if (this.crashdata.Status === "GameEnd") {
+        this.dataValues = [];
+        this.numberGraph = 1;
+      } else {
+        console.log("Error game");
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

luckydiamond/src/main.js

@@ -1,9 +1,17 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+const SiteOff = {
+    template: `<div style="text-align: center; margin-top: 20%;">
+                   <h1>Site is currently unavailable.</h1>
+                   <p>We are currently performing maintenance. We will be back shortly!</p>
+               </div>`
+};
+const siteIsOff = false; 
+
 import router from "@/router/router";
 import mitt from 'mitt'
-import { Mixins } from "@/mixins/mixin";
+import { Mixins } from "@/mixins/mixin";    
 import {
     ConnectToChat
 } from "@/assets/js/chat/ChatLogic.js";
@@ -11,12 +19,35 @@ import '@/assets/css/global.css'
 
 export const eventBus = mitt()
 
-const app = createApp(App)
+// const app = createApp(App)
+const app = createApp(siteIsOff ? SiteOff : App);
+
+
+if (!siteIsOff) {
+    app.use(router);
+    app.mixin(Mixins);
+    app.provide(eventBus);
+    // ConnectToChat(); // Uncomment if chat should also be disabled when the site is off.
+}
+
+// app.use(router)
+// app.mixin(Mixins)
+
+app.config.warnHandler = (msg) => {
+    // Intercept specific warning message and suppress it
+    if (msg.includes('Property or method "clickedBtn" is not defined on the instance but referenced during render.')) {
+      // You can simply return to ignore it, or even better, log it somewhere if you have a logging system
+      return;
+    }
+  
+    // Log or handle other warnings as you see fit
+  };
 
 app.use(router)
 app.mixin(Mixins)
 
+
 app.mount('#app')
-app.provide(eventBus)
+// app.provide(eventBus)
 
 ConnectToChat();

luckydiamond/src/mocks/DevelopersOptions.js

@@ -0,0 +1,66 @@
+export default [
+    {
+        id: 1,
+        username: "Rafael1209",
+        userRole: "Бэкендер",
+        background: "#636363",
+        technologyText: ["ASP,.NET,MongoDB", "Designer"],
+        technologyIcons: ["csharp-logo", "figma"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 2,
+        username: "Hepatir",
+        userRole: "Бэкендер",
+        background: "#413C3B",
+        technologyText: ["ASP,.NET,MongoDB", "SQL"],
+        technologyIcons: ["csharp-logo", "sql-logo"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 3,
+        username: "Ckutls_",
+        userRole: "Фронтэндер",
+        background: "#B88484",
+        technologyText: ["html 5, css", "JavaScript", "Vue 3"],
+        technologyIcons: ["html", "js", "vue"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 4,
+        username: "FUpir",
+        userRole: "Дизайнер",
+        background: "#C58E74",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"],
+    },
+    {
+        id: 5,
+        username: "megatntmega",
+        userRole: "Дизайнер",
+        background: "#393A3A",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
+    },
+    {
+        id: 6,
+        username: "busha888",
+        userRole: "Фронтэндер",
+        background: "#742271",
+        technologyText: ["html 5, css"],
+        technologyIcons: ["html"],
+        socialIcons: ["odniclasniki", "telegram", "like", "github"],
+    },
+    {
+        id: 7,
+        username: "CLARFFY",
+        userRole: "Дизайнер",
+        background: "#E2B374",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
+    }
+]
+    

luckydiamond/src/mocks/GameModes.js

@@ -6,7 +6,7 @@ export default [
     },
     {
         id: 2,
-        title: 'кейсы',
+        title: 'джекпот',
         players: 0
     },
     {

luckydiamond/src/mocks/JackpotNumbers.js

@@ -0,0 +1,20 @@
+export default [
+    {
+        diamonds: 1,
+    },
+    {
+        diamonds: 5,
+    },
+    {
+        diamonds: 10,
+    },
+    {
+        diamonds: 50,
+    },
+    {
+        diamonds: 100,
+    },
+    {
+        diamonds: 'max',
+    }
+]

luckydiamond/src/pages/AboutPage.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="content-grid--about">
+    <aside-bar-component></aside-bar-component>
+
+    <section class="about">
+
+    <develop-component></develop-component>
+
+    </section>
+    <header-component></header-component>
+
+  </div>
+</template>
+<script>
+import DevelopComponent from "@/components/DevelopComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+
+export default {
+  data() {
+    return {
+      Object: {
+        bg: "value",
+        nickname: "value",
+        icons: {},
+        textTacholgy: { text1: "text2" },
+      },
+    };
+  },
+  name: "HelpPage",
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    DevelopComponent,
+  },
+};
+</script>

luckydiamond/src/pages/BanPage.vue

@@ -0,0 +1,20 @@
+<template>
+
+<body class="banpage--body">
+    <div class="banpage--block">
+    <center><h1>Вы были заблокированны на проекте LuckyDiamond</h1></center>
+    <center><iframe class="banpage--video" width="560" height="315" src="https://www.youtube.com/embed/XeoS-zsGVCs?si=zLlKqDQIzvqOzFjW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
+</div>
+</body>
+
+</template>
+  
+  
+  <script>
+  import '@/assets/css/PagesStyles/BanPage.css'
+  </script>
+  
+  <style scoped>
+  
+  </style>
+  

luckydiamond/src/pages/HelpPage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="content-grid--help">
+    <aside-bar-component></aside-bar-component>
+
+    
+    <header-component></header-component>
+
+    <section class="help">
+
+      <Help-component></Help-component>
+
+    </section>
+
+    <chat-component></chat-component>
+
+    
+  </div>
+</template>
+  <script>
+import HelpComponent from "@/components/HelpComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+
+
+export default {
+  data() {
+    return {
+      Object: {
+        bg: "value",
+        nickname: "value",
+        icons: {},
+        textTacholgy: { text1: "text2" },
+      },
+     
+    };
+    
+  },
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    HelpComponent,
+    ChatComponent,
+  },
+  
+};
+</script>

luckydiamond/src/pages/HomePage.vue

@@ -11,7 +11,16 @@
       <div class="main__content">
         <h3>онлайн-казино</h3>
         <h1>lucky diamond</h1>
-        <h4>minecraft casino - <span :class="{ 'animate__text--main__block': !AnimationOff, 'default__text--main__block': AnimationOff }">spm</span></h4>
+        <h4>
+          minecraft casino -
+          <span
+            :class="{
+              'animate__text--main__block': !AnimationOff,
+              'default__text--main__block': AnimationOff,
+            }"
+            >spm</span
+          >
+        </h4>
       </div>
     </main>
 
@@ -23,16 +32,18 @@
       <div class="gamemode__content--card">
         <div class="gamemode__main bg-card">
           <ul>
-            <li
-                v-for="mode in mainGameMode"
-                :key="mode.id"
-            >
+            <li v-for="mode in mainGameMode" :key="mode.id">
               <div class="line__content">
                 <h3 class="title-firstline">{{ mode.title }}</h3>
                 <div class="line__footer">
-                  <img src="../assets/icons-gamemodes/bomb-icon.svg">
-                  <div class="line__btn--main">
-                    <a href="#" @click="$router.push({ name: 'saper' })" class="line__btn">play <span class="line__btn--elm">></span></a>
+                  <img src="../assets/icons-gamemodes/bomb-icon.svg" />
+                  <div>
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'saper' })"
+                      class="line__btn"
+                      >play <span class="line__btn--elm--saper"></span></a
+                    >
                   </div>
                 </div>
               </div>
@@ -43,58 +54,75 @@
           <div class="gamemode__firstline bg-card">
             <ul>
               <li
-                  v-for="mode in firstlineGameMode"
-                  :key="mode.id"
-                  class="display-firstline"
+                v-for="mode in firstlineGameMode"
+                :key="mode.id"
+                class="display-firstline"
               >
                 <div :class="'linecontent-' + mode.id">
                   <div class="container">
-                    <h1 class="title-firstline">{{ mode.title }}</h1>
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <h1 class="title-jackpot">{{ mode.title }}</h1>
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'jackpot' })"
+                      class="line__btn__jackpot"
+                      >   play <span class="line__btn--elm"></span></a
+                    >
                   </div>
                 </div>
-                <div class="line__img">
-                  <img src="@/assets/icons-gamemodes/case-icon.png">
+                <div class="line__img__jackpot">
+                  <img src="@/assets/icons-gamemodes/jackpot_icon.svg" />
                 </div>
               </li>
             </ul>
           </div>
           <div class="gamemode__twolines">
-            <div class="gamemode__twoline--first__element bg-card">
+            <div class="gamemode__twoline--first__element bg-early">
               <ul>
-                <li
-                    v-for="mode in twolinefirstelementGameMode"
-                    :key="mode"
-                >
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
                   <div :class="'linecontent-' + mode.id">
-                    <h3 class="title-twoline">{{ mode.title }}</h3>
+                    <h3 class="title-twoline">рулетка</h3>
                   </div>
                   <div class="container">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm ">></span></a>
-                    <img src="@/assets/icons-gamemodes/slots-icon.png">
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                     
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'double' })"
+                      class="line__btn--crash"
+                      >play <span class="line__btn--elm"></span></a
+                    >
+                 
+                    
+                    <img class="double--img" src="@/assets/icons-games/double-game/DoubleLogo.svg" />
+                 
                   </div>
                 </li>
               </ul>
             </div>
             <div class="gamemode__twoline--two__element bg-card">
               <ul>
-                <li
-                    v-for="mode in twolinetwoelementGameMode"
-                    :key="mode.id"
-                >
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
                   <div :class="'linecontent-' + mode.id">
                     <h3 class="title-twoline">{{ mode.title }}</h3>
                   </div>
                   <div class="container">
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
-                    <img src="@/assets/icons-gamemodes/crush-icon.svg">
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'crash' })"
+                      class="line__btn--crash"
+                      >play <span class="line__btn--elm"></span></a
+                    >
+                    
+                    <img class="crash--img" src="@/assets/icons-gamemodes/crush-icon.svg" />
                   </div>
                 </li>
               </ul>
             </div>
           </div>
         </div>
-        </div>
+      </div>
     </section>
   </div>
 </template>
@@ -102,20 +130,25 @@
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
-import ChatComponent from "@/components/ChatComponent.vue";
 import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
 import GameModes from "@/mocks/GameModes";
-import '@/assets/css/PagesStyles/home.css'
+import "@/assets/css/PagesStyles/home.css";
 
 export default {
-  name: 'HomePage',
-  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
+  name: "HomePage",
+  components: {
+    AsideBarComponent,
+    HeaderComponent,
+    ChatComponent,
+    HomemobilePage,
+  },
   data() {
     return {
       GameModes,
       AnimationOff: false,
       mobile: false,
-    }
+    };
   },
   methods: {
     // claimSettings(value) {
@@ -128,30 +161,29 @@ export default {
     // }
   },
   mounted() {
-    this.checkWindowSize()
+    this.checkWindowSize();
 
-    this.AddWindowListener()
+    this.AddWindowListener();
   },
   beforeUnmount() {
-    this.RemoveWindowListener()
+    this.RemoveWindowListener();
   },
   computed: {
     mainGameMode() {
-      return this.GameModes.filter(mode => [1].includes(mode.id))
+      return this.GameModes.filter((mode) => [1].includes(mode.id));
     },
     firstlineGameMode() {
-      return this.GameModes.filter(mode => [2].includes(mode.id))
+      return this.GameModes.filter((mode) => [2].includes(mode.id));
     },
     twolinefirstelementGameMode() {
-      return this.GameModes.filter(mode => [3].includes(mode.id))
+      return this.GameModes.filter((mode) => [3].includes(mode.id));
     },
     twolinetwoelementGameMode() {
-      return this.GameModes.filter(mode => [4].includes(mode.id))
-    }
-  }
-}
+      return this.GameModes.filter((mode) => [4].includes(mode.id));
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 </style>

luckydiamond/src/pages/JackopthistoryPage.vue

@@ -0,0 +1,70 @@
+t<template>
+  <div class="jackpot-history__content-grid">
+    <aside-bar-element/>
+
+    <chat-component/>
+
+    <header-element-page/>
+
+    <div class="jackpot-history">
+      <div class="jackpot-history__content">
+        <ul class="jackpot-history__element">
+          <li v-for="(game, index) in historyGame" :key="index">
+            <div class="abc">
+              <div class="jackpot-history__element">
+                <div class="element-info">
+                  <div class="element-info__icon">
+                    <img :src="`https://avatar.spworlds.ru/face/55/${game.winnerUserName}`">
+                  </div>
+                  <div class="element-info__user-info">
+                    <h2 class="username">{{ game.winnerUserName }}</h2>
+                    <h2 class="user-deposit">
+                      {{ game.winStake.toFixed(2) }}
+                      <span class="img-width"><img src="@/assets/icons-profile/icon-diamond-ore.png"></span>
+                    </h2>
+                  </div>
+                </div>
+                <div class="element-chance">
+                  <h2>
+                    Шанс <span class="chance-style">{{ game.winnerPercentage.toFixed(2) }}%</span>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive } from "vue";
+
+import ChatComponent from "@/components/ChatComponent.vue";
+import AsideBarElement from "@/components/AsidebarComponent.vue";
+import HeaderElementPage from "@/components/HeaderComponent.vue";
+
+import '@/assets/css/PagesStyles/jackpot-history.css'
+import {getJackpotHistoryGame} from "@/assets/js/jackpot/JackpotLogic";
+
+export default {
+  components: {HeaderElementPage, ChatComponent, AsideBarElement},
+  setup() {
+    let historyGame = reactive({})
+
+    onMounted(() => {
+      getJackpotHistoryGame()
+          .then(response => {
+            Object.assign(historyGame, response)
+          })
+    })
+
+    return { historyGame }
+  }
+}
+</script>
+
+<style>
+
+</style>

luckydiamond/src/pages/JackpothistoryPage.vue

@@ -0,0 +1,70 @@
+t<template>
+  <div class="jackpot-history__content-grid">
+    <aside-bar-element/>
+
+    <chat-component/>
+
+    <header-element-page/>
+
+    <div class="jackpot-history">
+      <div class="jackpot-history__content">
+        <ul class="jackpot-history__element">
+          <li v-for="(game, index) in historyGame" :key="index">
+            <div class="abc">
+              <div class="jackpot-history__element">
+                <div class="element-info">
+                  <div class="element-info__icon">
+                    <img :src="`https://avatar.spworlds.ru/face/55/${game.winnerUserName}`">
+                  </div>
+                  <div class="element-info__user-info">
+                    <h2 class="username">{{ game.winnerUserName }}</h2>
+                    <h2 class="user-deposit">
+                      {{ game.winStake.toFixed(2) }}
+                      <span class="img-width"><img src="@/assets/icons-profile/icon-diamond-ore.png"></span>
+                    </h2>
+                  </div>
+                </div>
+                <div class="element-chance">
+                  <h2>
+                    Шанс <span class="chance-style">{{ game.winnerPercentage.toFixed(2) }}%</span>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { onMounted, reactive } from "vue";
+
+import ChatComponent from "@/components/ChatComponent.vue";
+import AsideBarElement from "@/components/AsidebarComponent.vue";
+import HeaderElementPage from "@/components/HeaderComponent.vue";
+
+import '@/assets/css/PagesStyles/jackpot-history.css'
+import {getJackpotHistoryGame} from "@/assets/js/jackpot/JackpotLogic";
+
+export default {
+  components: {HeaderElementPage, ChatComponent, AsideBarElement},
+  setup() {
+    let historyGame = reactive({})
+
+    onMounted(() => {
+      getJackpotHistoryGame()
+          .then(response => {
+            Object.assign(historyGame, response)
+          })
+    })
+
+    return { historyGame }
+  }
+}
+</script>
+
+<style>
+
+</style>

luckydiamond/src/pages/ProfilePage.vue

@@ -2,11 +2,8 @@
   <profilemobile-page v-if="mobile"></profilemobile-page>
   <div class="content__grid-profile" v-else>
     <aside-bar-component></aside-bar-component>
-
-    <chat-component id="chat-profile"></chat-component>
-
+    <chat-component></chat-component>
     <header-component></header-component>
-
   <section class="profile">
     <div class="profile__content">
       <img class="profile__user--img" :src="imageUrl">
@@ -17,25 +14,35 @@
       <div class="profile__btns--payments">
         <a href="#" class="text-btn btn-bg btn-margin btn-display" @click="depositClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
         <a href="#" class="withdraw text-btn btn-bg btn-display" @click="withdrawClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
+        <a href="#" class="referal text-btn btn-bg btn-display" @click="referalClick"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-referal.png"> Рефералы</a>
       </div>
     </div>
     <div class="payments">
       <div class="payments__content">
         <div class="payments__types">
           <div class="types types-margin types-text">
-            <h3>Игрок и вид транзакции</h3>
+            <div class="playerandvid">
+            <h3>Вид транзакции</h3>
+          </div>
+            <div class="data1">
             <h3>Дата</h3>
+          </div>
+            <div class="summa1">
             <h3>Сумма</h3>
           </div>
+          </div>
           <div class="types-line"></div>
         </div>
+        <div class="hisorypaymond">
         <div class="payments__history">
           <div class="payments__card" v-for="payment in arrayHistory" :key="payment.id">
             <div class="user-info">
               <img src="@/assets/icons-test/person-icon-profile-userinfo.png">
-              <div class="user-name user-name__text">
+              <div class="user-name user-name__text" :class="{ 'withdraw-color1': payment.name }">
                 <h3>{{ payment.name }}</h3>
-                <p>{{ payment.comment }}</p>
+              </div>
+              <div class="user-name1 user-name1__text">
+                <h3>{{ payment.name1 }}</h3>
               </div>
             </div>
             <div class="data-info data-info__text">
@@ -45,29 +52,31 @@
               <h3>{{ payment.amount }} АР</h3>
             </div>
           </div>
-        </div>
+          </div>
+        
+      </div>
       </div>
     </div>
   </section>
+    <referal-modal v-if="openRef" @notifacetionmoney="NotificationEventListener" @closemodal="openRef = false"></referal-modal>
     <payments-modal v-if="openModal" @notifacetionmoney="NotificationEventListener" @closemodal="openModal = false" :payments="payments"></payments-modal>
     <notiicationwindow-component @notificationremove="NotificationMethod" :notification="notification"></notiicationwindow-component>
   </div>
 </template>
-
 <script>
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import axios from 'axios';
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import PaymentsModal from "@/components/PaymentsModal.vue";
+import ReferalModal from "@/components/ReferalModal.vue";
 import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
 import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
-
 import { GetCookie } from "@/assets/js/storage/CookieStorage";
 import '@/assets/css/PagesStyles/profile.css'
 import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
-
 export default {
-  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, NotiicationwindowComponent },
+  components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal, ReferalModal, NotiicationwindowComponent },
   data() {
     return {
       username: 'Artemka',
@@ -76,22 +85,91 @@ export default {
       balance: 0,
       mobile: false,
       openModal: false,
+      openRef: false,
       payments: true,
       arrayHistory: [],
     }
   },
+
   emits: ['notificationremove'],
   mounted() {
     this.checkWindowSize()
-
     this.AddWindowListener()
   },
   beforeUnmount() {
     this.RemoveWindowListener()
   },
   created() {
-    this.username = GetCookie('SpUserName')
 
+    const myHeaders = new Headers();
+  myHeaders.append("Content-Type", "application/json");
+  myHeaders.append("Cookie", "ARRAffinity=a6e48b9e9d2653435be7b61998d8624b44115214104213d6c8b8c526cc56dc70; ARRAffinitySameSite=a6e48b9e9d2653435be7b61998d8624b44115214104213d6c8b8c526cc56dc70");
+
+  const userData = {
+    searchToken: GetCookie("SearchToken"),
+    authtoken: GetCookie("AUTHTOKEN"),
+  };
+
+  const raw = JSON.stringify({
+    "userCredentials": {
+      "searchToken": userData.searchToken,
+      "authtoken": userData.authtoken
+    }
+  });
+
+  const requestOptions = {
+    method: "POST",
+    headers: myHeaders,
+    body: raw,
+    redirect: "follow"
+  };
+
+  fetch("https://spsystemcore20231122004605.azurewebsites.net/api/PromoCode/GetReferralInfo", requestOptions)
+    .then((response) => response.text())
+    .then((result) => {
+      console.log(result);
+      if (result == "\"The Referral is not created\"") {
+        const raw = JSON.stringify({
+          "userCredentials": {
+            "searchToken": userData.searchToken,
+            "authtoken": userData.authtoken
+          }
+        });
+
+        const requestOptions = {
+          method: "POST",
+          headers: myHeaders,
+          body: raw,
+          redirect: "follow"
+        };
+
+        fetch("https://spsystemcore20231122004605.azurewebsites.net/api/PromoCode/CreateReferal", requestOptions)
+          .then((response) => response.text())
+          .then((result) => console.log(result))
+          .catch((error) => console.error(error));
+      }
+    })
+    .catch((error) => console.error(error));
+
+    axios.post('https://spsystemcore20231122004605.azurewebsites.net/api/Payment/GetPaymentHistory', {
+      searchToken: GetCookie('SearchToken'),
+      authtoken: GetCookie('AUTHTOKEN')
+    })
+    .then(response => {
+      // Обработка полученных данных
+      const paymentHistory = response.data.paymentHistory;
+      paymentHistory.forEach(payment => {
+        if (payment.amount > 0) {
+          this.claimDataDeposit(payment.amount,payment.utcDate); // Добавление депозита в историю
+        } else {
+          this.claimDataWithdraw(-payment.amount,payment.utcDate); // Добавление вывода в историю
+        }
+      });
+    })
+    .catch(error => {
+      console.error('Error fetching hisorypaymond:', error);
+    });
+    this.username = GetCookie('SpUserName')
     GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
         .then((response) => {
           this.balance = response.currentMoney
@@ -100,17 +178,22 @@ export default {
         .catch((error) => {
           console.error('error in profile, get money', error)
         })
-
     this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
   },
   methods: {
     depositClick() {
       this.openModal = true
       this.payments = true
+      this.openRef = false
     },
     withdrawClick() {
       this.openModal = true
       this.payments = false
+      this.openRef = false
+    },
+   referalClick() {
+      this.openModal = false
+      this.openRef = true
     },
     NotificationEventListener() {
       this.notification = true
@@ -118,34 +201,63 @@ export default {
     },
     NotificationMethod() {
       this.notification = false
+    },
+    formatNumber(number) {
+      return number < 10 ? `0${number}` : number;
+    },
+    getCurrentFormattedDate() {
+      const currentDate = new Date();
+      return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
+    },
+    claimDataDeposit(amount, utcDate) {
+  const historyPayments = {
+    name1: 'Пополнение',
+    data: this.formatTime(utcDate),
+    amount: amount
+  }
+
+  this.arrayHistory.unshift(historyPayments);
+},
+
+claimDataWithdraw(amount, utcDate) {
+  const historyPayments = {
+    name: 'Вывод',
+    data: this.formatTime(utcDate),
+    amount: -amount
+  }
+
+  this.arrayHistory.unshift(historyPayments);
+},
+
+formatTime(utcDate) {
+  const dateUTC = new Date(utcDate);
+  const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const currentTime = new Date();
+  const diffTime = currentTime - dateUTC;
+  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
+  const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+  const diffMinuts = Math.floor(diffTime/(1000*60));
+
+  if (diffDays < 7)
+  {
+    if (diffDays > 0)
+    {
+      return `${diffDays} ${diffDays === 1 ? 'день' : 'дня'} назад`;
     }
-    // formatNumber(number) {
-    //   return number < 10 ? `0${number}` : number;
-    // },
-    // getCurrentFormattedDate() {
-    //   const currentDate = new Date();
-    //   return `${this.formatNumber(currentDate.getDate())}.${this.formatNumber(currentDate.getMonth() + 1)}.${currentDate.getFullYear()}, ${this.formatNumber(currentDate.getHours())}:${this.formatNumber(currentDate.getMinutes())}`;
-    // },
-    // claimDataDeposit(amount) {
-    //   const historyPayments = {
-    //     name: 'TEST USER',
-    //     comment: 'test',
-    //     data: this.getCurrentFormattedDate(),
-    //     amount: amount
-    //   }
-    //
-    //   this.arrayHistory.unshift(historyPayments)
-    // },
-    // claimDataWithdraw(amount) {
-    //   const historyPayments = {
-    //     name: 'TEST USER',
-    //     comment: 'test',
-    //     data: this.getCurrentFormattedDate(),
-    //     amount: -amount
-    //   }
-    //
-    //   this.arrayHistory.unshift(historyPayments)
-    // }
+    else if(diffHours >0)
+    {
+      return `${diffHours} ${diffHours === 1 ? 'час' : 'часа'} назад`;
+    }
+    else{
+      return `${diffMinuts} ${diffMinuts === 1 ? 'минута' : 'минут'} назад`;
+    }
+  }
+  else
+  {
+    return dateUTC.toLocaleString('ru-RU', { timeZone: userTimeZone });
   }
 }
-</script>
+
+  }
+}
+</script>

luckydiamond/src/pages/SettingsPage.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="content__grid-profile">
+    <aside-bar-component></aside-bar-component>
+
+    <chat-component></chat-component>
+
+    <header-component></header-component>
+
+    <section class="settings">
+      <!-- <div id="volume-control">
+    <button id="volume-up" @click="volumeUp">+</button>
+    <button id="volume-down" @click="volumeDown">-</button>
+  </div>
+     -->
+      <div class="classssboxxxx">
+        <div class="volume-section">
+          <h1 class="volume-text">Звук</h1>
+          <input
+            id="volumeControl"
+            type="range"
+            min="0"
+            max="10"
+            v-model="volume"
+            @input="handleVolumeChange"
+            ref="volumeControl"
+          />
+        </div>
+
+        <!-- 3/23/2024 DT I turned off the chat off button because it wasn't working and wasn't displaying correctly on the frontend  -->
+        <!-- <div class="buttonbox">
+        <input type="checkbox"
+               id="switch"
+               class="checkbox" />
+                
+        <label for="switch"
+               class="toggle">
+            
+        </label>
+        <p>скрыть чат</p>
+      </div> -->
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import {
+  SaveToLocalStorage,
+  GetFromLocalStorage,
+} from "@/assets/js/storage/LocalStorage";
+
+import "@/assets/css/PagesStyles/settings.css";
+export default {
+  components: {
+    ChatComponent,
+    HeaderComponent,
+    AsideBarComponent,
+  },
+  data() {
+    return {
+      volume: 5, // Значение по умолчанию, на случай, если в LocalStorage ничего нет
+    };
+  },
+  methods: {
+    handleVolumeChange() {
+      const volume = this.$refs.volumeControl.value;
+      SaveToLocalStorage("volume", volume);
+
+      // Транслировать изменение громкости глобально
+    },
+  },
+  created() {
+    const storedVolume = GetFromLocalStorage("volume"); // Убедитесь, что этот метод существует и правильно работает
+    if (storedVolume !== null) {
+      this.volume = storedVolume;
+    }
+  },
+};
+</script>