Initial frontend commit

2024-11-18 16:33:44 +03:00 · 2024-11-18 16:33:44 +03:00 · 4352fcd884
commit 4352fcd884
parent c1869e90c2
233 changed files with 35100 additions and 0 deletions
--- a/frontend/.DS_Store
+++ b/frontend/.DS_Store
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@ -0,0 +1,22 @@
 module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: "plugin:react/recommended",
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint"],
  rules: {
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        additionalHooks: "(useRecoilCallback|useRecoilTransaction_UNSTABLE)",
      },
    ],
  },
 };
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1 @@
 /node_modules
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -0,0 +1,12 @@
 FROM node:16.20.0
 WORKDIR /opt/project
 COPY package.json /opt/project
 COPY package-lock.json /opt/project
 RUN npm install
 EXPOSE 3000
 CMD [ "npm", "run", "dev" ]
--- a/frontend/bin/dev.js
+++ b/frontend/bin/dev.js
@ -0,0 +1,75 @@
 const webpack = require("webpack");
 const [webpackClientConfig, webpackServerConfig] = require("../webpack.config");
 const nodemon = require("nodemon");
 const path = require("path");
 const webpackDevMiddleware = require("webpack-dev-middleware");
 const webpackHotMiddleware = require("webpack-hot-middleware");
 const express = require("express");
 const cors = require("cors");
 const hmrServer = express();
 const clientCompiler = webpack(webpackClientConfig);
 const allowedOrigins = ["http://localhost:3000", "http://localhost:3001"];
 hmrServer.use(
  cors({
    origin: function (origin, callback) {
      // allow requests with no origin
      // (like mobile apps or curl requests)
      if (!origin) return callback(null, true);
      if (allowedOrigins.indexOf(origin) === -1) {
        var msg =
          "The CORS policy for this site does not " +
          "allow access from the specified Origin.";
        return callback(new Error(msg), false);
      }
      return callback(null, true);
    },
  })
 );
 hmrServer.use(
  webpackDevMiddleware(clientCompiler, {
    publicPath: webpackClientConfig.output.publicPath,
    serverSideRender: true,
    noInfo: true,
    watchOptions: {
      ignore: /dist/,
    },
    writeToDisk: true,
    stats: "errors-only",
  })
 );
 hmrServer.use(
  webpackHotMiddleware(clientCompiler, {
    path: "/static/__webpack_hmr",
  })
 );
 hmrServer.listen(3001, () => {
  console.log("Hmr Server successfully started");
 });
 const compiler = webpack(webpackServerConfig);
 compiler.run((err) => {
  if (err) {
    console.log(`compilation failed:`, err);
  }
  compiler.watch({}, (err) => {
    if (err) {
      console.log(`compilation failed:`, err);
    }
    console.log("Compilation was successfully");
  });
  nodemon({
    script: path.resolve(__dirname, "../dist/server/server.js"),
    watch: [
      path.resolve(__dirname, "../dist/server"),
      path.resolve(__dirname, "../dist/client"),
    ],
  });
 });
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta
    name="viewport"
    content="minimum-scale=1, initial-scale=1, width=device-width"
  />
  <meta name="theme-color" content="#000000" />
  <meta
    name="description"
    content="Clicker"
  />
  <link rel="manifest" href="/manifest.json" />
  <link rel="preconnect" href="/fonts/">
  <title>Clicker</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <div id="modal_root"></div>
 <script type="module" src="/src/index.tsx"></script>
 </body>
 </html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,77 @@
 {
  "name": "gpnevent",
  "version": "1.0.0",
  "description": "",
  "main": "vite.config.js",
  "type": "module",
  "engines": {
    "node": "16.x"
  },
  "scripts": {
    "predeploy": "npm run build:dev",
    "deploy": "gh-pages -d build:dev",
    "build": "vite build",
    "preview": "vite preview",
    "dev": "vite serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Anna Efremova",
  "license": "ISC",
  "dependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "@redux-devtools/extension": "^3.2.5",
    "@types/crypto-js": "^4.1.1",
    "@types/intl-tel-input": "^18.1.1",
    "@types/jest": "^28.1.6",
    "@types/react": "^17.0.50",
    "@types/react-dom": "^18.0.11",
    "@types/react-linkify": "^1.0.4",
    "@typescript-eslint/eslint-plugin": "^5.59.5",
    "@typescript-eslint/parser": "^5.59.5",
    "@vitejs/plugin-react": "^4.0.4",
    "axios": "^1.4.0",
    "clean-webpack-plugin": "^4.0.0",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "crypto-js": "^4.1.1",
    "css-loader": "^3.4.2",
    "eslint": "^8.40.0",
    "eslint-plugin-react": "^7.32.2",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "gh-pages": "^4.0.0",
    "html-webpack-plugin": "^4.5.2",
    "intl-tel-input": "^18.2.1",
    "js-sha256": "^0.9.0",
    "less": "^3.13.1",
    "less-loader": "^5.0.0",
    "nodemon": "^2.0.12",
    "react": "^17.0.1",
    "react-confetti": "^6.1.0",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "react-linkify": "^1.0.0-alpha",
    "react-player": "^2.12.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.11.1",
    "react-select": "^5.7.3",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "style-loader": "^1.1.3",
    "swiper": "^11.1.1",
    "ts-jest": "^28.0.7",
    "ts-loader": "^6.2.1",
    "typescript": "4.6.4",
    "usehooks-ts": "^3.1.0",
    "vite": "^4.4.9",
    "vite-plugin-html": "^3.2.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.3",
    "webpack-dev-server": "^3.10.3",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-node-externals": "^3.0.0"
  }
 }
--- a/frontend/public/.DS_Store
+++ b/frontend/public/.DS_Store
--- a/frontend/public/assets/.DS_Store
+++ b/frontend/public/assets/.DS_Store
--- a/frontend/public/assets/Angry.png
+++ b/frontend/public/assets/Angry.png
--- a/frontend/public/assets/Biceps.png
+++ b/frontend/public/assets/Biceps.png
--- a/frontend/public/assets/Chain.png
+++ b/frontend/public/assets/Chain.png
--- a/frontend/public/assets/Fire.png
+++ b/frontend/public/assets/Fire.png
--- a/frontend/public/assets/Gift.png
+++ b/frontend/public/assets/Gift.png
--- a/frontend/public/assets/Money.png
+++ b/frontend/public/assets/Money.png
--- a/frontend/public/assets/Monocle.png
+++ b/frontend/public/assets/Monocle.png
--- a/frontend/public/assets/Rocket.png
+++ b/frontend/public/assets/Rocket.png
--- a/frontend/public/assets/Volt.png
+++ b/frontend/public/assets/Volt.png
--- a/frontend/public/assets/dev.png
+++ b/frontend/public/assets/dev.png
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/fonts/Inter-Bold.woff
+++ b/frontend/public/fonts/Inter-Bold.woff
--- a/frontend/public/fonts/Inter-Bold.woff2
+++ b/frontend/public/fonts/Inter-Bold.woff2
--- a/frontend/public/fonts/Inter-ExtraBold.woff
+++ b/frontend/public/fonts/Inter-ExtraBold.woff
--- a/frontend/public/fonts/Inter-ExtraBold.woff2
+++ b/frontend/public/fonts/Inter-ExtraBold.woff2
--- a/frontend/public/fonts/Inter-Regular.woff
+++ b/frontend/public/fonts/Inter-Regular.woff
--- a/frontend/public/fonts/Inter-Regular.woff2
+++ b/frontend/public/fonts/Inter-Regular.woff2
--- a/frontend/public/fonts/Inter-SemiBold.woff
+++ b/frontend/public/fonts/Inter-SemiBold.woff
--- a/frontend/public/fonts/Inter-SemiBold.woff2
+++ b/frontend/public/fonts/Inter-SemiBold.woff2
--- a/frontend/public/fonts/Raleway-Regular.woff
+++ b/frontend/public/fonts/Raleway-Regular.woff
--- a/frontend/public/fonts/Raleway-Regular.woff2
+++ b/frontend/public/fonts/Raleway-Regular.woff2
--- a/frontend/public/fonts/Raleway-SemiBold.woff
+++ b/frontend/public/fonts/Raleway-SemiBold.woff
--- a/frontend/public/fonts/Raleway-SemiBold.woff2
+++ b/frontend/public/fonts/Raleway-SemiBold.woff2
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@ -0,0 +1,15 @@
 {
  "short_name": "Clicker",
  "name": "Clicker",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#222222",
  "background_color": "#222222"
 }
--- a/frontend/public/robots.txt
+++ b/frontend/public/robots.txt
@ -0,0 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -0,0 +1,44 @@
 import React, { useEffect, useState } from "react";
 import './main.global.css';
 import { hot } from "react-hot-loader/root";
 import { Layout } from "./shared/Layout";
 import { applyMiddleware, createStore } from "redux";
 import { rootReducer } from "./store/reducer";
 import { composeWithDevTools } from '@redux-devtools/extension';
 import thunk from 'redux-thunk';
 import { Provider } from 'react-redux';
 import { Route, Routes, BrowserRouter } from "react-router-dom";
 import { AuctionMainPopups } from "./shared/Auction/AuctionMainPopups";
 import { RoutePage } from "./shared/Pages/RoutePage";
 const store = createStore(rootReducer, composeWithDevTools(
  applyMiddleware(thunk)
 ));
 function AppComponent() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => {
    setMounted(true);
  }, []);
  return (
    <Provider store={store}>
      {mounted && (<BrowserRouter>
        <Layout>
          <Routes>
            <Route path='/' element={<RoutePage page='main' />} />
            <Route path='/rating' element={<RoutePage page='rating' />} />
            <Route path='/referral' element={<RoutePage page='referral' />} />
            <Route path='/auction' element={<RoutePage page='auction' />} />
            <Route path='/styles' element={<RoutePage page='styles' />} />
          </Routes>
          <AuctionMainPopups />
        </Layout>
      </BrowserRouter>)}
    </Provider>
  )
 };
 export const App = hot(() => <AppComponent />);
--- a/frontend/src/assets/Angry.png
+++ b/frontend/src/assets/Angry.png
--- a/frontend/src/assets/Biceps.png
+++ b/frontend/src/assets/Biceps.png
--- a/frontend/src/assets/Chain.png
+++ b/frontend/src/assets/Chain.png
--- a/frontend/src/assets/Fire.png
+++ b/frontend/src/assets/Fire.png
--- a/frontend/src/assets/Gift.png
+++ b/frontend/src/assets/Gift.png
--- a/frontend/src/assets/Money.png
+++ b/frontend/src/assets/Money.png
--- a/frontend/src/assets/Monocle.png
+++ b/frontend/src/assets/Monocle.png
--- a/frontend/src/assets/Rocket.png
+++ b/frontend/src/assets/Rocket.png
--- a/frontend/src/assets/Volt.png
+++ b/frontend/src/assets/Volt.png
--- a/frontend/src/assets/btnIcon.png
+++ b/frontend/src/assets/btnIcon.png
--- a/frontend/src/assets/coin.png
+++ b/frontend/src/assets/coin.png
--- a/frontend/src/assets/dev.png
+++ b/frontend/src/assets/dev.png
--- a/frontend/src/assets/imgBtn1.png
+++ b/frontend/src/assets/imgBtn1.png
--- a/frontend/src/assets/imgBtn2.png
+++ b/frontend/src/assets/imgBtn2.png
--- a/frontend/src/assets/style1.png
+++ b/frontend/src/assets/style1.png
--- a/frontend/src/assets/style2.png
+++ b/frontend/src/assets/style2.png
--- a/frontend/src/assets/style3.png
+++ b/frontend/src/assets/style3.png
--- a/frontend/src/assets/style4.png
+++ b/frontend/src/assets/style4.png
--- a/frontend/src/client/index.jsx
+++ b/frontend/src/client/index.jsx
@ -0,0 +1,7 @@
 import * as React from "react";
 import * as ReactDom from "react-dom";
 import { App } from "../App";
 window.addEventListener("load", () => {
  ReactDom.hydrate(<App />, document.getElementById("main_root"));
 });
--- a/frontend/src/fonts/Inter-Bold.woff
+++ b/frontend/src/fonts/Inter-Bold.woff
--- a/frontend/src/fonts/Inter-Bold.woff2
+++ b/frontend/src/fonts/Inter-Bold.woff2
--- a/frontend/src/fonts/Inter-ExtraBold.woff
+++ b/frontend/src/fonts/Inter-ExtraBold.woff
--- a/frontend/src/fonts/Inter-ExtraBold.woff2
+++ b/frontend/src/fonts/Inter-ExtraBold.woff2
--- a/frontend/src/fonts/Inter-Regular.woff
+++ b/frontend/src/fonts/Inter-Regular.woff
--- a/frontend/src/fonts/Inter-Regular.woff2
+++ b/frontend/src/fonts/Inter-Regular.woff2
--- a/frontend/src/fonts/Inter-SemiBold.woff
+++ b/frontend/src/fonts/Inter-SemiBold.woff
--- a/frontend/src/fonts/Inter-SemiBold.woff2
+++ b/frontend/src/fonts/Inter-SemiBold.woff2
--- a/frontend/src/fonts/Raleway-Regular.woff
+++ b/frontend/src/fonts/Raleway-Regular.woff
--- a/frontend/src/fonts/Raleway-Regular.woff2
+++ b/frontend/src/fonts/Raleway-Regular.woff2
--- a/frontend/src/fonts/Raleway-SemiBold.woff
+++ b/frontend/src/fonts/Raleway-SemiBold.woff
--- a/frontend/src/fonts/Raleway-SemiBold.woff2
+++ b/frontend/src/fonts/Raleway-SemiBold.woff2
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -0,0 +1,10 @@
 import React from "react";
 import ReactDOM from 'react-dom';
 import { App } from "./App";
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
 );
--- a/frontend/src/main.global.css
+++ b/frontend/src/main.global.css
@ -0,0 +1,182 @@
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-Regular.woff2') format("woff2"),
        url('./fonts/Inter-Regular.woff') format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-SemiBold.woff2') format("woff2"),
        url('./fonts/Inter-SemiBold.woff') format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-Bold.woff2') format("woff2"),
        url('./fonts/Inter-Bold.woff') format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter-ExtraBold.woff2') format("woff2"),
        url('./fonts/Inter-ExtraBold.woff') format("woff");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/Raleway-Regular.woff2') format("woff2"),
        url('./fonts/Raleway-Regular.woff') format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
 }
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/Raleway-SemiBold.woff2') format("woff2"),
        url('./fonts/Raleway-SemiBold.woff') format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
 }
 :root {
    --primary: #7EB4DB;
    --gradientPrimary: linear-gradient(90deg, #90D7ED 13.05%, #6887C4 91.06%, #8085C0 172.24%);
    --black: #000000;
    --white: #FFFFFF;
    --elBackround: #383838;
    --textColor: #FFFFFF;
    --textColor2: #8F8F8F;
    --pink: #FC4848;
    --red: #FF0000;
    --blue: #7EB4DB;
    --purple: #9747FF;
    --gradientBlue: linear-gradient(90deg, #90D7ED 13.05%, #6887C4 91.06%, #8085C0 172.24%);
    --gradientOrange: linear-gradient(302deg, #FF5421 -59.57%, #FF7248 43.7%, #FF9576 163.26%);
    --gradientYellow: linear-gradient(302deg, #6ACB54 -59.57%, #DCBB5A 43.7%, #E2883D 163.26%);
    --gradientOrangeYellow: linear-gradient(302deg, #FF805A -1.15%, #DEAE53 83.89%);
    --grey6F: #6F6F6F;
    --grey6C: #6C6C6C;
    --grey35: #353535;
    --grey34: #343434;
    --grey1B: #1B1B1B;
    --greyA4: #A4A4A4;
    --grey46: #464646;
    --grey12: #121212;
    --grey19: #191919;
    --grey77: #777777;
    --grey24: #242424;
    --grey22: #222222;
    --grey9A: #9A9A9A;
    --grey93: #939393;
 }
 body {
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 120%;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    box-sizing: border-box;
    color: var(--textColor);
 }
 html {
    scroll-behavior: smooth;
 }
 p, h1, h2, h3 {
    margin: 0;
    padding: 0;
 }
 h1,
 h2,
 h3 {
    font-weight: 700;
    line-height: 120%;
 }
 * {
    color: var(--textColor);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
 }
 ul {
    margin: 0;
    padding: 0;
    list-style: none;
 }
 a {
    text-decoration: none;
 }
 input::placeholder {
    white-space: pre-wrap;
 }
 button {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
 }
 .main-header {
    font-size: 65px;
    line-height: 120%;
    font-weight: 500;
 }
 #root {
    height: 100%;
 }
 .background {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
 }
 /* slider */
 .swiper-pagination-bullet {
    margin: 0 2px !important;
    height: 5px !important;
    width: 5px !important;
    background-color: var(--white) !important;
    opacity: 1 !important;
 }
 .swiper-pagination-bullet-active {
    width: 20px !important;
    border-radius: 5px !important;
    background: var(--gradientPrimary) !important;
 }
 .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
 }
--- a/frontend/src/server/indexTemplate.js
+++ b/frontend/src/server/indexTemplate.js
@ -0,0 +1,19 @@
 export const indexTemplate = (content) => `
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Clicker</title>
  <script src="/static/client.js" type="application/javascript"></script>
 </head>
 <body>
  <div id="main_root">${content}</div>
  <div id="modal_root"></div>
 </body>
 </html>
 `;
--- a/frontend/src/server/server.js
+++ b/frontend/src/server/server.js
@ -0,0 +1,20 @@
 import express from "express";
 import ReactDOM from "react-dom/server";
 import { App } from "../App";
 import { indexTemplate } from "./indexTemplate";
 import compression from 'compression';
 const app = express();
 app.use(compression());
 app.use("/static", express.static("./dist/client"));
 app.get("*", (req, res) => {
  res.send(indexTemplate(ReactDOM.renderToString(App())));
 });
 const port = process.env.PORT || 3000;
 app.listen(port, () => {
  console.log(`server started on port ${port}`);
 });
--- a/frontend/src/shared/Auction/AuctionCard/AuctionCard.tsx
+++ b/frontend/src/shared/Auction/AuctionCard/AuctionCard.tsx
@ -0,0 +1,73 @@
 import React, { useState } from 'react';
 import styles from './auctioncard.module.css';
 import { ETextStyles } from '../../texts';
 import { PointsBlock } from '../../Elements/PointsBlock';
 import { PersonIcon } from '../../Elements/PersonIcon';
 import { UsersIcons } from '../../Elements/UsersIcons';
 import { Button } from '../../Button';
 import { EIcons } from '../../Icons';
 import { Timer } from '../Timer';
 import { formatNumber } from '../../../utils/formatNumber';
 import { Slider } from '../../Elements/Slider';
 import { ModalWindow } from '../../ModalWindow';
 import { AuctionPopup } from '../AuctionPopup';
 import { ResultAuctionPopup } from '../ResultAuctionPopup';
 interface IAuctionCard {
  name: string,
  imgs: Array<string>,
  minBet: string,
  users: number,
  prevBet: string,
  myBetInit: string,
  time: number,
  isLead: boolean
 }
 export function AuctionCard({ name, imgs, users, prevBet, myBetInit, time, isLead }: IAuctionCard) {
  const [myBet, setBet] = useState(Number(myBetInit));
  const [myNewBet, setMyNewBet] = useState(0);
  const [initPrevBet, setPrevBet] = useState(prevBet);
  const [initLead, setLead] = useState(isLead);
  const [closeWindow, setClose] = useState(true);
  const [closeAnim, setCloseAnim] = useState(false);
  const [closeresultPopup, setCloseResultPopup] = useState(true);
  const styleIndex = Number(localStorage.getItem('selectedStyle'));
  return (
    <div className={`${styles.container} ${styleIndex===0 ? styles.darkContainer : styles.opacityContainer}`}>
      <Slider className={styles.slider} imgs={imgs}/>
      <h2 style={ETextStyles.InBd18120} className={styles.title}>{name}</h2>
      <h3 style={ETextStyles.RwSb16120} className={styles.title2}>Подробности аукциона</h3>
      <div className={`${styles.card} ${styles.cardFlex} ${styles.card1}`}>
        <p style={ETextStyles.RwRg14100}>Минимальная ставка</p>
        <PointsBlock points={initPrevBet} sizeIcon={20}/>
      </div>
      <div className={`${styles.card} ${styles.cardFlex} ${styles.card2}`}>
        <p style={ETextStyles.RwRg14100}>{users === 0 ? 'Ты единственный участник' : 'Участники аукциона'}</p>
        {users === 0 ? <PersonIcon /> : <div className={styles.usersBlock}><UsersIcons/> {users > 3 && <div className={styles.userCount} style={ETextStyles.InSb10120}>{users-3}</div>}</div>}
      </div>
      <div className={`${styles.card} ${initLead && styles.leadCard}`}>
        <div className={styles.cardTop}>
          <div className={styles.cardLeft} style={ETextStyles.RwSb14120}>{!initLead ? 'Успей сделать ставку! До конца осталось:' 
            : <p><span>Ты в числе победителей! </span>Но все может поменяться</p>}</div>
          <Timer initTime={time}/>
        </div>
        <Button onClick={() => setClose(false)} text={myBet === 0 ? 'Сделать первую ставку' : <div className={styles.newBtn}>
          <p>Увеличить ставку</p>
          <div className={styles.prevText}>
            <p style={ETextStyles.InRg12140}>{`Предыдущая ставка — ${formatNumber(myBet)}`}</p>
            <div className={styles.icon} style={{ backgroundImage: "url('assets/btnIcon.png')"}}></div>
          </div>
        </div>} 
        icon={EIcons.UpPriceIcon}/>
      </div>
      {!closeWindow && <ModalWindow closeAnimOut={closeAnim} setCloseAnimOut={setCloseAnim} setClose={setClose} removeBtn={true} modalBlock={
        <AuctionPopup setLead={setLead} setClose={setCloseAnim} img={imgs[0]} name={name} prevBet={initPrevBet} prevUserImg={''} setBet={setMyNewBet} setCloseResultPopup={setCloseResultPopup}/>
      } />}
      {!closeresultPopup && <ModalWindow closeAnimOut={closeAnim} setCloseAnimOut={setCloseAnim} setClose={setCloseResultPopup} removeBtn={true} modalBlock={
        <ResultAuctionPopup prevBet={initPrevBet} prevMyBet={myBet} newBet={myNewBet} setBet={setBet} setClose={setCloseAnim} setCloseBetWindow={setClose} setPrevBet={setPrevBet}/>
      } />}
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionCard/auctioncard.module.css
+++ b/frontend/src/shared/Auction/AuctionCard/auctioncard.module.css
@ -0,0 +1,116 @@
 .container {
    padding: 6px;
    border-radius: 20px;
    box-shadow: 0px 0px 130px 0px rgba(124, 173, 216, 0.20);
 }
 .darkContainer {
    background-color: var(--grey22);
 }
 .darkContainer .card {
    background-color: var(--grey12);
 }
 .opacityContainer {
    background: rgba(0, 0, 0, 0.4);
 }
 .opacityContainer .card {
    background: rgba(0, 0, 0, 0.5);
 }
 .title {
    margin-bottom: 18px;
 }
 .title2 {
    margin-bottom: 8px;
 }
 .card {
    padding: 15px 8px;
    border-radius: 16px;
    border: 1px solid var(--grey35);
 }
 .cardFlex {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    align-items: center;
 }
 .card1 {
    margin-bottom: 4px;
 }
 .card2 {
    margin-bottom: 24px;
 }
 .cardTop {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
 }
 .cardLeft {
    max-width: 187px;
 }
 .cardLeft p span {
    color: var(--primary);
 }
 .usersBlock {
    display: flex;
    align-items: center;
 }
 .userCount {
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--grey35);
    border-radius: 50%;
    width: 25px;
    height: 25px;
 }
 .newBtn {
    text-align: left;
 }
 .newBtn p {
    color: var(--grey35);
 }
 .prevText {
    display: flex;
    align-items: center;
    gap: 2px;
 }
 .icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
 }
 .leadCard {
    box-shadow: 0px 0px 15px 0px rgba(122, 170, 214, 0.48);
    border: 1px solid var(--primary);
 }
 .slider {
    margin-bottom: 12px;
    width: 100%;
    aspect-ratio: 340/237;
    border-radius: 15px;
    overflow: hidden;
 }
--- a/frontend/src/shared/Auction/AuctionCard/index.ts
+++ b/frontend/src/shared/Auction/AuctionCard/index.ts
@ -0,0 +1 @@
 export * from './AuctionCard';
--- a/frontend/src/shared/Auction/AuctionLosePopup/AuctionLosePopup.tsx
+++ b/frontend/src/shared/Auction/AuctionLosePopup/AuctionLosePopup.tsx
@ -0,0 +1,38 @@
 import React from 'react';
 import styles from './auctionlosepopup.module.css';
 import { useNavigate } from 'react-router-dom';
 import { ETextStyles } from '../../texts';
 import { ProductCard } from '../ProductCard';
 import { Button } from '../../Button';
 interface IProduct {
  name: string,
  img: string,
  bet: string
 }
 interface IAuctionLosePopup {
  items: Array<IProduct>,
  setClose(a: boolean): void
 }
 export function AuctionLosePopup({ items, setClose }: IAuctionLosePopup) {
  const navigate = useNavigate();
  return (
    <div>
      <div className={styles.iconBlock}>
        <div className={styles.icon} style={{ backgroundImage: "url('assets/Angry.png')" }}></div>
      </div>
      <h2 className={styles.title} style={ETextStyles.RwSb24100}>Вы больше не в топе...</h2>
      <p className={styles.descr} style={ETextStyles.RwSb14120}>Чтобы сохранить лидерство, повысьте свою ставку в&nbsp;аукционе.</p>
      <h3 className={styles.title2} style={ETextStyles.RwSb18120}>Аукционы, в&nbsp;которых нужно увеличить ставку:</h3>
      <div className={styles.cards}>
        {items.map(item => {
          return <ProductCard name={item.name} img={item.img} bet={item.bet} />
        })}
      </div>
      <Button text='Увеличить ставку' onClick={() => { navigate('/auction'); setClose(true) }} />
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionLosePopup/auctionlosepopup.module.css
+++ b/frontend/src/shared/Auction/AuctionLosePopup/auctionlosepopup.module.css
@ -0,0 +1,38 @@
 .iconBlock {
    margin-top: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .icon {
    width: 64px;
    height: 64px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
 }
 .title {
    margin-bottom: 12px;
    text-align: center;
    color: var(--primary);
 }
 .descr {
    text-align: center;
    margin-bottom: 32px;
 }
 .title2 {
    margin-bottom: 12px;
    text-align: center;
 }
 .cards {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
 }
--- a/frontend/src/shared/Auction/AuctionLosePopup/index.ts
+++ b/frontend/src/shared/Auction/AuctionLosePopup/index.ts
@ -0,0 +1 @@
 export * from './AuctionLosePopup';
--- a/frontend/src/shared/Auction/AuctionMainPopups/AuctionMainPopups.tsx
+++ b/frontend/src/shared/Auction/AuctionMainPopups/AuctionMainPopups.tsx
@ -0,0 +1,40 @@
 import React, { useState } from 'react';
 import styles from './auctionmainpopups.module.css';
 import { ModalWindow } from '../../ModalWindow';
 import { AuctionWinPopup } from '../AuctionWinPopup';
 import { AuctionTopPopup } from '../AuctionTopPopup';
 import { AuctionLosePopup } from '../AuctionLosePopup';
 export function AuctionMainPopups() {
  const [closeWin, setCloseWin] = useState(true);
  const [closeTop, setCloseTop] = useState(true);
  const [closeLose, setCloseLose] = useState(true);
  const [closeAnim, setCloseAnim] = useState(false);
  const items = [
    {
      name: 'iPhone 15 Pro Max',
      img: '',
      bet: '788'
    },
    {
      name: 'iPhone 13 Pro',
      img: '',
      bet: '200'
    }
  ];
  return (
    <div>
      {!closeWin && <ModalWindow closeAnimOut={closeAnim} setCloseAnimOut={setCloseAnim} setClose={setCloseWin} removeBtn={true} modalBlock={
        <AuctionWinPopup name='iPhone 15 Pro Max ' img='' setClose={setCloseAnim}/>
      } />}
      {!closeTop && <ModalWindow closeAnimOut={closeAnim} setCloseAnimOut={setCloseAnim} setClose={setCloseTop} removeBtn={true} modalBlock={
        <AuctionTopPopup items={items} setClose={setCloseAnim}/>
      } />}
      {!closeLose && <ModalWindow closeAnimOut={closeAnim} setCloseAnimOut={setCloseAnim} setClose={setCloseLose} removeBtn={true} modalBlock={
        <AuctionLosePopup items={items} setClose={setCloseAnim} />
      } />}
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionMainPopups/auctionmainpopups.module.css
+++ b/frontend/src/shared/Auction/AuctionMainPopups/auctionmainpopups.module.css
--- a/frontend/src/shared/Auction/AuctionMainPopups/index.ts
+++ b/frontend/src/shared/Auction/AuctionMainPopups/index.ts
@ -0,0 +1 @@
 export * from './AuctionMainPopups';
--- a/frontend/src/shared/Auction/AuctionPopup/AuctionPopup.tsx
+++ b/frontend/src/shared/Auction/AuctionPopup/AuctionPopup.tsx
@ -0,0 +1,89 @@
 import React, { useState } from 'react';
 import styles from './auctionpopup.module.css';
 import { ETextStyles } from '../../texts';
 import { PersonIcon } from '../../Elements/PersonIcon';
 import { PointsBlock } from '../../Elements/PointsBlock';
 import { Button } from '../../Button';
 import { EIcons } from '../../Icons';
 import { declension } from '../../../utils/declension';
 import { useNavigate } from 'react-router-dom';
 import { ProductCard } from '../ProductCard';
 interface IAuctionPopup {
  setClose(a: boolean): void,
  setLead(a: boolean): void,
  img: string,
  name: string,
  prevBet: string,
  prevUserImg: string,
  setBet(a: number): void,
  setCloseResultPopup(a: boolean): void
 }
 export function AuctionPopup({ setClose, img, name, prevBet, prevUserImg, setBet, setLead, setCloseResultPopup }: IAuctionPopup) {
  const [value, setValue] = useState<string>('');
  const [disabled, setDis] = useState(true);
  const [autoBet, setAutoBet] = useState(false);
  const navigate = useNavigate();
  const percent = 5;
  const userPoints = 1000;
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    let newValue = event.target.value;
    newValue = newValue.replace(/[^0-9]/g, '');
    setValue(newValue);
    if (newValue.length != 0) {
      setDis(false);
    } else {
      setDis(true);
    }
  }
  const newBet = () => {
    setBet(Math.floor((1 + percent / 100) * Number(value)));
    setClose(true);
    setLead(true);
    const timer = setInterval(() => {
      setCloseResultPopup(false);
      clearTimeout(timer);
    }, 400);
  };
  return (
    <div>
      <h2 className={styles.title} style={ETextStyles.RwSb24100}>Сделать ставку</h2>
      <ProductCard name={name} img={img} bet={prevBet} personImg={prevUserImg} className={styles.card} />
      {!autoBet ? <Button onClick={() => { setAutoBet(true), setValue((Number(prevBet) + 5).toString()), setDis(false) }} text='Сразу перебить ставку' className={styles.btnFirst} icon={<div className={styles.icon} style={{ backgroundImage: "url('assets/Rocket.png')" }}></div>} /> :
        <button style={ETextStyles.InBd14120} className={styles.btnCancel} onClick={() => setClose(true)}>Не перебивать</button>
      }
      <p className={styles.descr} style={ETextStyles.RwRg10140}>Наши алгоритмы автоматически рассчитают стоимость, чтобы ваша ставка стала самой высокой</p>
      <h3 className={styles.title2} style={ETextStyles.InSb14120}>{!autoBet ? 'Ввести свою цену' : 'Цена, чтобы перебить ставку'}</h3>
      <input style={ETextStyles.InSb14120} className={styles.input} value={value} type="text" onChange={handleChange} inputMode="numeric" />
      {(Math.floor((1 + percent / 100) * Number(value)) < userPoints) ? ((Number(value) < Number(prevBet) && value.length > 0) ? 
        <button className={styles.btnForbidden}>
          <p style={ETextStyles.InBd14120}>Ставка должна быть больше</p>
          <p style={ETextStyles.InRg12140} className={styles.textForbidden}>Нельзя сделать ставку меньше предыдущей</p>
        </button>
      : <Button onClick={() => newBet()} disabled={disabled} text={disabled ? 'Перебить ставку' : <div className={styles.newBtn}>
          <p>Перебить ставку</p>
          <div className={styles.btnText}>
            <p style={ETextStyles.InRg12140}>{`${declension(value, 'коин', 'коина', 'коинов', true)} + ${percent}% = ${declension(Math.floor((1 + percent / 100) * Number(value)), 'коин', 'коина', 'коинов', true)}`}</p>
            <div className={styles.icon} style={{ backgroundImage: "url('assets/btnIcon.png')" }}></div>
          </div>
        </div>}
          icon={EIcons.UpPriceIcon} />
    ) :
        <button className={styles.btnForbidden} onClick={() => navigate('/')}>
          <p style={ETextStyles.InBd14120}>Тебе не хватает очков</p>
          <div className={styles.btnText}>
            <p style={ETextStyles.InRg12140} className={styles.textForbidden}>Нажми сюда, чтобы накопить еще</p>
            <div className={styles.icon} style={{ backgroundImage: "url('assets/btnIcon.png')" }}></div>
          </div>
        </button>
      }
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionPopup/auctionpopup.module.css
+++ b/frontend/src/shared/Auction/AuctionPopup/auctionpopup.module.css
@ -0,0 +1,95 @@
 .title {
    margin-bottom: 24px;
 }
 .card {
    margin-bottom: 12px;
 }
 .btnFirst {
    margin-bottom: 8px;
 }
 .icon {
    width: 28px;
    height: 28px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
 }
 .descr {
    margin-bottom: 24px;
    color: var(--grey9A)
 }
 .title2 {
    margin-bottom: 16px;
 }
 .input {
    margin-bottom:16px;
    padding: 6px;
    width: 100%;
    background-color: var(--grey22);
    border: none;
    border-bottom: 1px solid var(--grey93);
    color: var(--white);
 }
 .input:focus {
    outline: none;
    border-bottom: 1px solid var(--primary);
 }
 .btnText {
    text-align: left;
 }
 .newBtn {
    text-align: left;
 }
 .newBtn p {
    color: var(--grey35);
 }
 .btnText {
    display: flex;
    align-items: center;
    gap: 2px;
 }
 .icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
 }
 .btnForbidden {
    padding: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    border: 2px solid var(--red);
 }
 .textForbidden {
    opacity: 0.7;
 }
 .btnCancel {
    margin-bottom: 8px;
    padding: 14px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    border: 2px solid var(--primary);
 }
--- a/frontend/src/shared/Auction/AuctionPopup/index.ts
+++ b/frontend/src/shared/Auction/AuctionPopup/index.ts
@ -0,0 +1 @@
 export * from './AuctionPopup';
--- a/frontend/src/shared/Auction/AuctionTopPopup/AuctionTopPopup.tsx
+++ b/frontend/src/shared/Auction/AuctionTopPopup/AuctionTopPopup.tsx
@ -0,0 +1,38 @@
 import React from 'react';
 import styles from './auctiontoppopup.module.css';
 import { ETextStyles } from '../../texts';
 import { ProductCard } from '../ProductCard';
 import { Button } from '../../Button';
 import { useNavigate } from 'react-router-dom';
 interface IProduct {
  name: string,
  img: string,
  bet: string
 }
 interface IAuctionTopPopup {
  items: Array<IProduct>,
  setClose(a: boolean): void
 }
 export function AuctionTopPopup({ items, setClose }: IAuctionTopPopup) {
  const navigate = useNavigate();
  return (
    <div>
      <div className={styles.iconBlock}>
        <div className={styles.icon} style={{ backgroundImage: "url('assets/Fire.png')" }}></div>
      </div>
      <h2 className={styles.title} style={ETextStyles.RwSb24100}>Вы в топе</h2>
      <p className={styles.descr} style={ETextStyles.RwSb14120}>Кликайте, чтобы заработать больше очков и&nbsp;потратить их&nbsp;на&nbsp;ставку в&nbsp;аукционе.</p>
      <h3 className={styles.title2} style={ETextStyles.RwSb18120}>Аукционы, в которых вы лидируете:</h3>
      <div className={styles.cards}>
        {items.map(item => {
          return <ProductCard name={item.name} img={item.img} bet={item.bet} />
        })}
      </div>
      <Button text='Продолжить кликать' onClick={() => { navigate('/'); setClose(true)}}/>
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionTopPopup/auctiontoppopup.module.css
+++ b/frontend/src/shared/Auction/AuctionTopPopup/auctiontoppopup.module.css
@ -0,0 +1,38 @@
 .iconBlock {
    margin-top: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .icon {
    width: 64px;
    height: 64px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
 }
 .title {
    margin-bottom: 12px;
    text-align: center;
    color: var(--primary);
 }
 .descr {
    text-align: center;
    margin-bottom: 32px;
 }
 .title2 {
    margin-bottom: 12px;
    text-align: center;
 }
 .cards {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
 }
--- a/frontend/src/shared/Auction/AuctionTopPopup/index.ts
+++ b/frontend/src/shared/Auction/AuctionTopPopup/index.ts
@ -0,0 +1 @@
 export * from './AuctionTopPopup';
--- a/frontend/src/shared/Auction/AuctionWinPopup/AuctionWinPopup.tsx
+++ b/frontend/src/shared/Auction/AuctionWinPopup/AuctionWinPopup.tsx
@ -0,0 +1,33 @@
 import React, { useState } from 'react';
 import styles from './auctionwinpopup.module.css';
 import { ETextStyles } from '../../texts';
 import { Button } from '../../Button';
 import { PersonIcon } from '../../Elements/PersonIcon';
 import { useNavigate } from 'react-router-dom';
 import { ConfettiAnim } from '../Confetti';
 interface IAuctionWinPopup {
  name: string,
  img: string,
  setClose(a: boolean): void
 }
 export function AuctionWinPopup({ name, img, setClose }: IAuctionWinPopup) {
  const navigate = useNavigate();
  const [startConfetti, setStartConfetti] = useState(0);
  const [removeConfetti, setRemoveConfetti] = useState(false);
  return (
    <div>
      <div className={styles.iconBlock}>
        <div className={styles.icon} style={{backgroundImage: "url('assets/Gift.png')"}}></div>
      </div>
      <h2 className={styles.title} style={ETextStyles.RwSb24100}>Вы выиграли в аукционе!</h2>
      <p className={styles.descr} style={ETextStyles.RwSb14120}>Поздравляем!!! Приз, за&nbsp;который вы&nbsp;так упорно боролись, теперь ваш. Ожидайте сообщение в&nbsp;Telegram от&nbsp;нашей команды.</p>
      <h3 className={styles.title2} style={ETextStyles.RwSb18120}>Ваш приз</h3>
      <Button className={styles.productWin} text={name} icon={<PersonIcon img={img} />} onClick={() => setStartConfetti(1)}/>
      <Button text='Продолжить кликать' stroke={true} onClick={() => { navigate('/'); setClose(true); setRemoveConfetti(true)}}/>
      {!removeConfetti && <ConfettiAnim opacity={startConfetti} setOpacity={setStartConfetti}/>}
    </div>
  );
 }
--- a/frontend/src/shared/Auction/AuctionWinPopup/auctionwinpopup.module.css
+++ b/frontend/src/shared/Auction/AuctionWinPopup/auctionwinpopup.module.css
@ -0,0 +1,35 @@
 .iconBlock {
    margin-top: 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .icon {
    width: 64px;
    height: 64px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
 }
 .title {
    margin-bottom: 12px;
    text-align: center;
    color: var(--primary);
 }
 .descr {
    text-align: center;
    margin-bottom: 32px;
 }
 .title2 {
    margin-bottom: 12px;
    text-align: center;
 }
 .productWin {
    margin-bottom: 24px;
 }
--- a/frontend/src/shared/Auction/AuctionWinPopup/index.ts
+++ b/frontend/src/shared/Auction/AuctionWinPopup/index.ts
@ -0,0 +1 @@
 export * from './AuctionWinPopup';
--- a/frontend/src/shared/Auction/Confetti/ConfettiAnim.tsx
+++ b/frontend/src/shared/Auction/Confetti/ConfettiAnim.tsx
@ -0,0 +1,37 @@
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import styles from './confetti.module.css';
 import { useWindowSize } from 'usehooks-ts'
 import Confetti from 'react-confetti';
 interface IConfettiAnim {
  opacity: number,
  setOpacity(a: number): void
 }
 export function ConfettiAnim({ opacity, setOpacity }: IConfettiAnim) {
  const node = document.querySelector('#modal_root');
  const { width, height } = useWindowSize();
  if (!node) return null;
  useEffect(() => {
    if(opacity === 1) {
      const timer = setInterval(() => {
        setOpacity(0);
        clearInterval(timer);
      }, 5000);
    }
  }, [opacity]);
  return (
    ReactDOM.createPortal((
      <Confetti
        width={width}
        height={height}
        className={`${styles.confetti} ${opacity === 1 && styles.animation}`}
        opacity={opacity}
      />
    ), node)
  );
 }
--- a/frontend/src/shared/Auction/Confetti/confetti.module.css
+++ b/frontend/src/shared/Auction/Confetti/confetti.module.css
@ -0,0 +1,21 @@
 .confetti {
    z-index: 500 !important;
 }
 .animation {
    animation: 5s 1 confetti;
 }
@keyframes confetti {
    0% {
        opacity: 1;
    }
    80% {
            opacity: 1;
    }
    100% {
        opacity: 0;
    }
 }
--- a/frontend/src/shared/Auction/Confetti/index.ts
+++ b/frontend/src/shared/Auction/Confetti/index.ts
@ -0,0 +1 @@
 export * from './ConfettiAnim';
--- a/frontend/src/shared/Auction/ProductCard/ProductCard.tsx
+++ b/frontend/src/shared/Auction/ProductCard/ProductCard.tsx
@ -0,0 +1,28 @@
 import React from 'react';
 import styles from './productcard.module.css';
 import { PersonIcon } from '../../Elements/PersonIcon';
 import { PointsBlock } from '../../Elements/PointsBlock';
 import { ETextStyles } from '../../texts';
 interface IProductCard {
  name: string,
  img: string,
  bet: string,
  personImg ?: boolean | string,
  className ?: string
 }
 export function ProductCard({ name, img, bet, personImg=false, className }: IProductCard) {
  return (
    <div className={`${styles.card} ${className}`} >
      <div className={styles.left} style={{ width: `calc(100% - ${55 + bet.length * 9.5}px)` }}>
        <PersonIcon img={img} className={styles.productImg} />
        <p style={{ ...ETextStyles.InSb14120 }} className={styles.productName}>{name}</p>
      </div>
      <div className={styles.right}>
        <PointsBlock points={bet} left={true} className={styles.points} />
        {personImg && typeof personImg === 'string' && <PersonIcon img={personImg} />}
      </div>
    </div>
  );
 }
--- a/frontend/src/shared/Auction/ProductCard/index.ts
+++ b/frontend/src/shared/Auction/ProductCard/index.ts
@ -0,0 +1 @@
 export * from './ProductCard';
--- a/frontend/src/shared/Auction/ProductCard/productcard.module.css
+++ b/frontend/src/shared/Auction/ProductCard/productcard.module.css
@ -0,0 +1,36 @@
 .card {
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 30px;
    border: 1px solid var(--grey46);
    gap: 5px;
 }
 .left {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
 }
 .right {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 .productName {
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
 }
 .points div {
    color: var(--primary);
 }
 .productImg {
    flex-shrink: 0;
 }
--- a/frontend/src/shared/Auction/ResultAuctionPopup/ResultAuctionPopup.tsx
+++ b/frontend/src/shared/Auction/ResultAuctionPopup/ResultAuctionPopup.tsx
@ -0,0 +1,58 @@
 import React, { useEffect, useState } from 'react';
 import styles from './resultauctionpopup.module.css';
 import { declension } from '../../../utils/declension';
 import { ETextStyles } from '../../texts';
 import { PointsBlock } from '../../Elements/PointsBlock';
 import { Button } from '../../Button';
 interface IResultAuctionPopup {
  prevBet: string,
  prevMyBet: number,
  newBet: number,
  setBet(a: number): void,
  setClose(a: boolean): void,
  setCloseBetWindow(a: boolean): void
  setPrevBet(a: string): void,
 }
 export function ResultAuctionPopup({ prevBet, prevMyBet, newBet, setBet, setClose, setCloseBetWindow, setPrevBet }: IResultAuctionPopup) {
  const [diff, setDiff] = useState(0);
  const [prevBetOld, setPrevBetOld] = useState(prevBet);
  useEffect(() => {
    setDiff(newBet - prevMyBet);
    setBet(newBet);
    setPrevBet(newBet.toString())
  }, []);
  const onClick = () => {
    setClose(true);
    const timer = setInterval(() => {
      setCloseBetWindow(false);
      clearInterval(timer);
    }, 400);
  };
  return (
    <div>
      <div className={styles.topIcon}>
        <div className={styles.icon} style={{backgroundImage: 'url("assets/Money.png")'}}></div>
      </div>
      <div className={styles.text} style={ETextStyles.InSb24100}>
        Вы <span>увеличили</span> ставку <span>{`на ${diff}`}</span> {declension(diff, 'коин', 'коина', 'коинов')}
      </div>
      <div className={styles.cards}>
        <div className={styles.card}>
          <p style={ETextStyles.RwSb16120}>Сколько вы потратили</p>
          <PointsBlock left={true} points={newBet.toString()} className={styles.colorPoints}/>
        </div>
        <div className={styles.card}>
          <p style={ETextStyles.RwSb16120}>Предыдущая ставка</p>
          <PointsBlock left={true} points={prevBetOld.toString()} />
        </div>
      </div>
      <Button text='Увеличить шанс на выигрыш' onClick={() => onClick()}/>
    </div>
  );
 }
--- a/frontend/src/shared/Auction/ResultAuctionPopup/index.ts
+++ b/frontend/src/shared/Auction/ResultAuctionPopup/index.ts
@ -0,0 +1 @@
 export * from './ResultAuctionPopup';
--- a/frontend/src/shared/Auction/ResultAuctionPopup/resultauctionpopup.module.css
+++ b/frontend/src/shared/Auction/ResultAuctionPopup/resultauctionpopup.module.css
@ -0,0 +1,50 @@
 .icon {
    margin-bottom: 12px;
    width: 64px;
    height: 64px;
    background-position: center;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
 }
 .topIcon {
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .text {
    margin-bottom: 32px;
    width: 100%;
    text-align: center;
 }
 .text span {
    color: var(--primary);
 }
 .cards {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
 }
 .card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    height: 112px;
    background-color: var(--grey12);
    border-radius: 10px;
 }
 .card p {
    color: var(--greyA4);
 }
 .colorPoints div {
    color: var(--primary);
 }
--- a/frontend/src/shared/Auction/Timer/Timer.tsx
+++ b/frontend/src/shared/Auction/Timer/Timer.tsx
@ -0,0 +1,53 @@
 import React, { useEffect, useState } from 'react';
 import styles from './timer.module.css';
 import { ETextStyles } from '../../texts';
 import { declension } from '../../../utils/declension';
 import { secondsToHMS } from '../../../utils/secondsToHMS';
 interface ITimer {
  initTime: number
 }
 export function Timer({initTime}: ITimer) {
  const timeValue: Array<number> = secondsToHMS(initTime);
  const [[hour, min, sec], setTime] = useState([timeValue[0], timeValue[1], timeValue[2]]);
  const [over, setOver] = useState(false);
  const tick = () => {
    if (hour === 0 && min === 0 && sec === 0) {
      setOver(true);
    } else if (min === 0 && sec === 0) {
      setTime([hour - 1, 59, 59]);
    } else if (sec == 0) {
      setTime([hour, min - 1, 59]);
    } else {
      setTime([hour, min, sec - 1]);
    }
  };
  useEffect(() => {
    if (!over) {
      const timerID = setInterval(() => tick(), 1000);
      return () => clearInterval(timerID);
    }
  });
  return (
    <div className={styles.container}>
      <div className={styles.block}>
        <p className={styles.value} style={ETextStyles.InSb14120}>{hour}</p>
        <p className={styles.text} style={ETextStyles.RwRg12120}>{declension(hour, 'час', 'часа', 'часов')}</p>
      </div>
      <div className={styles.dot}></div>
      <div className={styles.block}>
        <p className={styles.value} style={ETextStyles.InSb14120}>{min}</p>
        <p className={styles.text} style={ETextStyles.RwRg12120}>мин</p>
      </div>
      <div className={styles.dot}></div>
      <div className={styles.block}>
        <p className={styles.value} style={ETextStyles.InSb14120}>{sec.toString().length === 1 ? `0${sec}` : sec}</p>
        <p className={styles.text} style={ETextStyles.RwRg12120}>сек</p>
      </div>
    </div>
  );
 }
--- a/frontend/src/shared/Auction/Timer/index.ts
+++ b/frontend/src/shared/Auction/Timer/index.ts
@ -0,0 +1 @@
 export * from './Timer';
--- a/Show More
+++ b/Show More