add logout button

src/renderer/App.css

@@ -24,6 +24,7 @@ body {
   align-items: center;
   padding: 0;
   margin: 0;
+  user-select: none;
 }
 
 p {

src/renderer/components/CapeCard.tsx

@@ -11,7 +11,7 @@ import {
   Box,
   Chip,
 } from '@mui/material';
-
+import CustomTooltip from './CustomTooltip';
 // Тип для плаща с необязательными полями для обоих вариантов использования
 export interface CapeCardProps {
   cape: {
@@ -60,13 +60,14 @@ export default function CapeCard({
   const capeDescription = cape.cape_description || cape.description || '';
 
   return (
-    <Tooltip arrow title={capeDescription}>
+    <CustomTooltip arrow title={capeDescription}>
       <Card
         sx={{
           bgcolor: 'rgba(255, 255, 255, 0.05)',
           width: 200,
           overflow: 'hidden',
           position: 'relative', // для позиционирования ценника
+          borderRadius: '1vw',
         }}
       >
         {/* Ценник для магазина */}
@@ -97,7 +98,13 @@ export default function CapeCard({
           }}
         />
 
-        <CardContent sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)', pt: '9vh' }}>
+        <CardContent
+          sx={{
+            bgcolor: 'rgba(255, 255, 255, 0.05)',
+            pt: '6vw',
+            minHeight: '5vw',
+          }}
+        >
           <Typography sx={{ color: 'white' }}>{capeName}</Typography>
         </CardContent>
 
@@ -108,8 +115,8 @@ export default function CapeCard({
             onClick={() => onAction(capeId)}
             disabled={actionDisabled}
             sx={{
-              borderRadius: '20px',
-              p: '5px 25px',
+              borderRadius: '2vw',
+              p: '0.5vw 2.5vw',
               color: 'white',
               backgroundColor: 'rgb(0, 134, 0)',
               '&:hover': {
@@ -122,6 +129,6 @@ export default function CapeCard({
           </Button>
         </CardActions>
       </Card>
-    </Tooltip>
+    </CustomTooltip>
   );
 }

src/renderer/components/CustomTooltip.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+import { styled } from '@mui/material/styles';
+import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
+
+// Создаем кастомный стилизованный Tooltip с правильной типизацией
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: 'rgba(0, 0, 0, 1)',
+    color: 'white',
+    maxWidth: 300,
+    fontSize: '0.9vw',
+    border: '1px solid rgba(255, 77, 77, 0.5)',
+    borderRadius: '1vw',
+    padding: '1vw',
+    boxShadow:
+      '0 0 1vw rgba(255, 77, 77, 0.3), inset 0.8vw -0.8vw 2vw rgba(255, 77, 77, 0.15)',
+    fontFamily: 'Benzin-Bold',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      borderRadius: '1vw',
+      // background: 'linear-gradient(45deg, rgba(255, 77, 77, 0.1), transparent)',
+      zIndex: -1,
+    },
+  },
+  [`& .${tooltipClasses.arrow}`]: {
+    color: 'rgba(255, 77, 77, 0.5)',
+  },
+}));
+
+export default CustomTooltip;

src/renderer/components/PlayerInventory.tsx

@@ -183,13 +183,13 @@ export default function PlayerInventory({
   };
 
   return (
-    <Box sx={{ mt: 4 }}>
+    <Box sx={{ mt: '1vw' }}>
       <Box
         sx={{
           display: 'flex',
-          justifyContent: 'space-between',
+          gap: '1vw',
           alignItems: 'center',
-          mb: 2,
+          mb: '2vw',
         }}
       >
         <Typography variant="h5" color="white">
@@ -199,6 +199,18 @@ export default function PlayerInventory({
           variant="outlined"
           onClick={fetchPlayerInventory}
           disabled={loading}
+          sx={{
+            borderRadius: '20px',
+            p: '10px 25px',
+            color: 'white',
+            borderColor: 'rgba(255, 77, 77, 1)',
+            '&:hover': {
+              backgroundColor: 'rgba(255, 77, 77, 1)',
+              borderColor: 'rgba(255, 77, 77, 1)',
+            },
+            fontFamily: 'Benzin-Bold',
+            fontSize: '1vw',
+          }}
         >
           Обновить
         </Button>
@@ -235,28 +247,33 @@ export default function PlayerInventory({
                         cursor: 'pointer',
                         transition: 'transform 0.2s',
                         '&:hover': { transform: 'scale(1.03)' },
+                        borderRadius: '1vw',
                       }}
                       onClick={() => handleOpenSellDialog(item)}
                     >
                       <CardMedia
                         component="img"
                         sx={{
-                          height: 100,
+                          minWidth: '10vw',
+                          minHeight: '10vw',
+                          maxHeight: '10vw',
                           objectFit: 'contain',
-                          bgcolor: 'rgba(0, 0, 0, 0.2)',
-                          p: 1,
+                          bgcolor: 'white',
+                          p: '1vw',
                           imageRendering: 'pixelated',
                         }}
                         image={`/minecraft/${item.material.toLowerCase()}.png`}
                         alt={item.material}
                       />
                       <CardContent sx={{ p: 1 }}>
-                        <Typography variant="body2" color="white" noWrap>
-                          {getItemDisplayName(item.material)}
-                        </Typography>
-                        <Typography variant="body2" color="white">
-                          x{item.amount}
-                        </Typography>
+                        <Box sx={{ display: 'flex', gap: '1vw', justifyContent: 'space-between' }}>
+                          <Typography variant="body2" color="white" noWrap>
+                            {getItemDisplayName(item.material)}
+                          </Typography>
+                          <Typography variant="body2" color="white">
+                            {item.amount > 1 ? `x${item.amount}` : ''}
+                          </Typography>
+                        </Box>
                         {Object.keys(item.enchants || {}).length > 0 && (
                           <Typography
                             variant="caption"

src/renderer/components/SkinViewer.tsx

@@ -33,7 +33,9 @@ export default function SkinViewer({
           canvas: canvasRef.current,
           width,
           height,
-          skin: skinUrl || undefined,
+          skin:
+            skinUrl ||
+            'https://static.planetminecraft.com/files/resource_media/skin/original-steve-15053860.png',
           model: 'auto-detect',
           cape: capeUrl || undefined,
         });

src/renderer/components/TopBar.tsx

@@ -5,7 +5,7 @@ import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { fetchCoins } from '../api';
-
+import CustomTooltip from './CustomTooltip';
 declare global {
   interface Window {
     electron: {
@@ -102,6 +102,11 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
     }
   }, [username]);
 
+  const logout = () => {
+    localStorage.removeItem('launcher_config');
+    navigate('/login');
+  };
+
   return (
     <Box
       sx={{
@@ -178,7 +183,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -197,7 +202,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -216,7 +221,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -235,7 +240,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -274,11 +279,34 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
           marginRight: '1vw',
         }}
       >
+        {!isLoginPage && !isRegistrationPage && username && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => logout()}
+          sx={{
+            width: '10em',
+            height: '3em',
+            borderRadius: '1.5vw',
+            color: 'white',
+            backgroundImage: 'linear-gradient(to right, #7BB8FF, #FFB7ED)',
+            border: 'unset',
+            '&:hover': {
+              backgroundImage: 'linear-gradient(to right, #6AA8EE, #EEA7DD)',
+            },
+            boxShadow: '0.5em 0.5em 0.5em 0px #00000040 inset',
+          }}
+        >
+            Выйти
+          </Button>
+        )}
         {/* Кнопка регистрации, если на странице логина */}
-        {username && (
-          <Tooltip
+        {!isLoginPage && !isRegistrationPage && username && (
+          <CustomTooltip
             title="Попы — внутриигровая валюта, начисляемая за время игры на серверах."
             arrow
+            placement="bottom"
+            TransitionProps={{ timeout: 300 }}
           >
             <Box
               sx={{
@@ -313,7 +341,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 {coins}
               </Typography>
             </Box>
-          </Tooltip>
+          </CustomTooltip>
         )}
         {isLoginPage && (
           <Button

src/renderer/pages/Marketplace.tsx

@@ -63,6 +63,19 @@ export default function Marketplace() {
     type: 'success',
   });
 
+  const translateServer = (server: Server) => {
+    switch (server.name) {
+      case 'Server minecraft.hub.popa-popa.ru':
+        return 'Хаб';
+      case 'Server survival.hub.popa-popa.ru':
+        return 'Выживание';
+      case 'Server minecraft.minigames.popa-popa.ru':
+        return 'Миниигры';
+      default:
+        return server.name;
+    }
+  };
+
   // Функция для проверки онлайн-статуса игрока и определения сервера
   const checkPlayerStatus = async () => {
     if (!username) return;
@@ -241,32 +254,96 @@ export default function Marketplace() {
   }
 
   return (
-    <Box sx={{ padding: 3 }}>
-      <Typography variant="h4" color="white" gutterBottom>
-        Рынок сервера {playerServer?.name || ''}
-      </Typography>
+    <Box sx={{ padding: 3, width: '95%', height: '80%' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
+        <Typography variant="h4" color="white" gutterBottom>
+          Рынок сервера{' '}
+        </Typography>
+        <Typography
+          style={{
+            color: 'white',
+            backgroundColor: 'rgba(255, 77, 77, 1)',
+            padding: '0vw 2vw',
+            borderRadius: '5vw',
+            fontFamily: 'Benzin-Bold',
+            textAlign: 'center',
+            fontSize: '2vw',
+          }}
+        >
+          {translateServer(playerServer || { name: '' })}
+        </Typography>
+      </Box>
 
       {/* Вкладки */}
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'transparent' }}>
         <Tabs
           value={tabValue}
           onChange={handleTabChange}
           aria-label="marketplace tabs"
+          disableRipple={true}
+          sx={{
+            '& .MuiTabs-indicator': {
+              backgroundColor: 'rgba(255, 77, 77, 1)',
+            },
+          }}
         >
-          <Tab label="Товары" />
-          <Tab label="Мой инвентарь" />
+          <Tab
+            label="Товары"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
+          <Tab
+            label="Мой инвентарь"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
+          <Tab
+            label="Мои товары"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
         </Tabs>
       </Box>
 
       {/* Содержимое вкладки "Товары" */}
       <TabPanel value={tabValue} index={0}>
         {marketLoading ? (
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: '50vw' }}>
             <CircularProgress />
           </Box>
         ) : !marketItems || marketItems.items.length === 0 ? (
           <Box sx={{ mt: 4, textAlign: 'center' }}>
-            <Typography variant="h6" color="white">
+            <Typography variant="h6" color="white" sx={{ mt: '10vw' }}>
               На данный момент на рынке нет предметов.
             </Typography>
             <Button
@@ -275,7 +352,18 @@ export default function Marketplace() {
               onClick={() =>
                 playerServer && loadMarketItems(playerServer.ip, 1)
               }
-              sx={{ mt: 2 }}
+              sx={{
+                mt: 2,
+                borderRadius: '20px',
+                p: '10px 25px',
+                color: 'white',
+                backgroundColor: 'rgb(255, 77, 77)',
+                '&:hover': {
+                  backgroundColor: 'rgba(255, 77, 77, 0.5)',
+                },
+                fontFamily: 'Benzin-Bold',
+                fontSize: '1vw',
+              }}
             >
               Обновить
             </Button>
@@ -285,14 +373,21 @@ export default function Marketplace() {
             <Grid container spacing={2} sx={{ mt: 2 }}>
               {marketItems.items.map((item) => (
                 <Grid item xs={12} sm={6} md={4} lg={3} key={item.id}>
-                  <Card sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)' }}>
+                  <Card
+                    sx={{
+                      bgcolor: 'rgba(255, 255, 255, 0.05)',
+                      borderRadius: '1vw',
+                    }}
+                  >
                     <CardMedia
                       component="img"
                       sx={{
-                        height: 140,
+                        minWidth: '10vw',
+                        minHeight: '10vw',
+                        maxHeight: '10vw',
                         objectFit: 'contain',
-                        bgcolor: 'rgba(0, 0, 0, 0.2)',
-                        p: 1,
+                        bgcolor: 'white',
+                        p: '1vw',
                         imageRendering: 'pixelated',
                       }}
                       image={`/minecraft/${item.material.toLowerCase()}.png`}
@@ -323,7 +418,18 @@ export default function Marketplace() {
                         variant="contained"
                         color="primary"
                         fullWidth
-                        sx={{ mt: 2 }}
+                        sx={{
+                          mt: '1vw',
+                          borderRadius: '20px',
+                          p: '0.3vw 0vw',
+                          color: 'white',
+                          backgroundColor: 'rgb(255, 77, 77)',
+                          '&:hover': {
+                            backgroundColor: 'rgba(255, 77, 77, 0.5)',
+                          },
+                          fontFamily: 'Benzin-Bold',
+                          fontSize: '1vw',
+                        }}
                         onClick={() => handleBuyItem(item.id)}
                       >
                         Купить

src/renderer/pages/Profile.tsx

@@ -41,6 +41,9 @@ export default function Profile() {
   const [uuid, setUuid] = useState<string>('');
   const [loading, setLoading] = useState<boolean>(false);
 
+  const [viewerWidth, setViewerWidth] = useState(500);
+  const [viewerHeight, setViewerHeight] = useState(600);
+
   useEffect(() => {
     const savedConfig = localStorage.getItem('launcher_config');
     if (savedConfig) {
@@ -54,6 +57,25 @@ export default function Profile() {
     }
   }, []);
 
+  useEffect(() => {
+    // Функция для обновления размеров
+    const updateDimensions = () => {
+      setViewerWidth(window.innerWidth * 0.4); // 25vw
+      setViewerHeight(window.innerWidth * 0.5); // 30vw
+    };
+
+    // Вызываем один раз при монтировании
+    updateDimensions();
+
+    // Добавляем слушатель изменения размера окна
+    window.addEventListener('resize', updateDimensions);
+
+    // Очистка при размонтировании
+    return () => {
+      window.removeEventListener('resize', updateDimensions);
+    };
+  }, []);
+
   const loadPlayerData = async (uuid: string) => {
     try {
       setLoading(true);
@@ -182,7 +204,6 @@ export default function Profile() {
               p: 0,
               borderRadius: 2,
               overflow: 'hidden',
-              mb: 4,
               bgcolor: 'transparent',
             }}
           >
@@ -193,17 +214,20 @@ export default function Profile() {
                 alignSelf: 'center',
                 justifySelf: 'center',
                 textAlign: 'center',
-                width: '100%',
-                mb: '5vw',
+                mb: '2vw',
                 fontSize: '3vw',
                 color: 'white',
+                borderRadius: '3vw',
+                p: '0.5vw 5vw',
+                bgcolor: 'rgb(255, 77, 77)',
+                boxShadow: '0 0 1vw 0 rgba(0, 0, 0, 0.5)',
               }}
             >
               {username}
             </Typography>
             <SkinViewer
-              width={300}
-              height={400}
+              width={viewerWidth}
+              height={viewerHeight}
               skinUrl={skin}
               capeUrl={cape}
               walkingSpeed={walkingSpeed}
@@ -215,25 +239,26 @@ export default function Profile() {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              gap: 2,
+              gap: '1vw',
             }}
           >
             <Box
               sx={{
-                width: '100%',
-                maxWidth: '500px',
+                width: '40vw',
+                maxWidth: '40vw',
                 bgcolor: 'rgba(255, 255, 255, 0.05)',
                 padding: '3vw',
                 borderRadius: '1vw',
+                flexShrink: 0,
               }}
             >
               <Box
                 sx={{
                   border: '2px dashed',
                   borderColor: isDragOver ? 'primary.main' : 'grey.400',
-                  borderRadius: 2,
-                  p: 3,
-                  mb: 2,
+                  borderRadius: '1vw',
+                  p: '1.5vw',
+                  mb: '1vw',
                   textAlign: 'center',
                   cursor: 'pointer',
                   bgcolor: isDragOver
@@ -266,24 +291,83 @@ export default function Profile() {
               <FormControl
                 color="primary"
                 fullWidth
-                sx={{ mb: 2, color: 'white' }}
+                sx={{
+                  mb: '1vw',
+                  color: 'white',
+                  '&:hover .MuiInputLabel-root': {
+                    color: 'rgb(255, 77, 77)',
+                    transition: 'all 0.3s ease-in-out',
+                  },
+                }}
               >
-                <InputLabel sx={{ color: 'white' }}>Модель скина</InputLabel>
+                <InputLabel
+                  sx={{
+                    fontFamily: 'Benzin-Bold',
+                    color: 'white',
+                    '&.Mui-focused': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    transform: 'translate(14px, -9px) scale(0.75)',
+                    '&.MuiInputLabel-shrink': {
+                      transform: 'translate(14px, -9px) scale(0.75)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                  }}
+                >
+                  Модель скина
+                </InputLabel>
                 <Select
                   value={skinModel}
                   label="Модель скина"
                   onChange={(e) => setSkinModel(e.target.value)}
+                  displayEmpty
                   sx={{
-                    color: 'white',
-                    borderColor: 'white',
-                    '& .MuiInputBase-input': {
-                      border: '1px solid white',
-                      transition: 'unset',
+                    border: 'none',
+                    '& .MuiSelect-select': {
+                      fontFamily: 'Benzin-Bold',
+                      color: 'white',
+                      paddingTop: '1vw',
+                      paddingBottom: '1vw',
+                      transition: 'all 0.3s ease-in-out',
                     },
-                    '&:focus': {
-                      borderRadius: 4,
-                      borderColor: '#80bdff',
-                      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+                    '&:hover': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '&.Mui-focused': {
+                      '& .MuiSelect-select': {
+                        color: 'rgb(255, 77, 77)',
+                        transition: 'all 0.3s ease-in-out',
+                      },
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderRadius: '5vw',
+                      borderColor: 'rgb(255, 255, 255)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: 'rgb(255, 77, 77)',
+                      borderWidth: '2px',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '& .MuiSelect-icon': {
+                      color: 'white',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&:hover .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
+                    },
+                    '&.Mui-focused .MuiSelect-icon': {
+                      color: 'rgb(255, 77, 77)',
+                      transition: 'all 0.3s ease-in-out',
                     },
                   }}
                 >
@@ -340,7 +424,7 @@ export default function Profile() {
                 display: 'flex',
                 justifyContent: 'center',
                 flexDirection: 'column',
-                gap: 2,
+                gap: '2vw',
               }}
             >
               <Typography>Ваши плащи</Typography>
@@ -348,7 +432,7 @@ export default function Profile() {
                 sx={{
                   display: 'flex',
                   flexDirection: 'row',
-                  gap: 2,
+                  gap: '2vw',
                   flexWrap: 'wrap',
                 }}
               >

src/renderer/pages/Registration.tsx

@@ -108,7 +108,8 @@ function ColorlibStepIcon(props: StepIconProps) {
 const qrCode = new QRCodeStyling({
   width: 300,
   height: 300,
-  // image: popalogo,
+  image: popalogo,
+  data: 'https://t.me/popa_popa_popa_bot?start=test',
   shape: 'square',
   margin: 10,
   dotsOptions: {
@@ -125,7 +126,7 @@ const qrCode = new QRCodeStyling({
         },
       ],
     },
-    type: 'rounded',
+    type: 'extra-rounded',
   },
   imageOptions: {
     crossOrigin: 'anonymous',
@@ -179,6 +180,51 @@ export const Registration = () => {
       handleGenerateVerificationCode(username);
       setUrl(`https://t.me/popa_popa_popa_bot?start=${username}`);
 
+      while (ref.current.firstChild) {
+        ref.current.removeChild(ref.current.firstChild);
+      }
+
+      const newQrCode = new QRCodeStyling({
+        width: 300,
+        height: 300,
+        image: popalogo,
+        data: 'https://t.me/popa_popa_popa_bot?start=test',
+        shape: 'square',
+        margin: 10,
+        dotsOptions: {
+          gradient: {
+            type: 'linear',
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgb(242,113,33)',
+              },
+              {
+                offset: 1,
+                color: 'rgb(233,64,87)',
+              },
+            ],
+          },
+          type: 'extra-rounded',
+        },
+        imageOptions: {
+          crossOrigin: 'anonymous',
+          margin: 20,
+          imageSize: 0.5,
+        },
+        backgroundOptions: {
+          color: 'transparent',
+        },
+      });
+
+      newQrCode.update({
+        data: `https://t.me/popa_popa_popa_bot?start=${username}`,
+      });
+
+      setUrl(`https://t.me/popa_popa_popa_bot?start=${username}`);
+
+      newQrCode.append(ref.current);
+
       const intervalId = setInterval(() => {
         handleVerifyCode();
       }, 5000);
@@ -340,7 +386,12 @@ export const Registration = () => {
           >
             Открыть бота
           </Button>
-          <div ref={ref} />
+          <div
+            ref={ref}
+            style={{
+              minHeight: 300,
+            }}
+          />
           <Typography variant="body1">
             Введите код верификации в боте
           </Typography>

src/renderer/pages/VersionsExplorer.tsx

@@ -25,14 +25,20 @@ interface VersionCardProps {
   imageUrl: string;
   version: string;
   onSelect: (id: string) => void;
+  isHovered: boolean;
+  onHover: (id: string | null) => void;
+  hoveredCardId: string | null;
 }
 
-const VersionCard: React.FC<VersionCardProps> = ({
+export const VersionCard: React.FC<VersionCardProps> = ({
   id,
   name,
   imageUrl,
   version,
   onSelect,
+  isHovered,
+  onHover,
+  hoveredCardId,
 }) => {
   return (
     <Card
@@ -47,11 +53,19 @@ const VersionCard: React.FC<VersionCardProps> = ({
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         cursor: 'pointer',
+        filter: hoveredCardId && !isHovered ? 'blur(5px)' : 'blur(0px)',
+        transform: isHovered ? 'scale(1.03)' : 'scale(1)',
+        zIndex: isHovered ? 10 : 1,
+        '&:hover': {
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        },
       }}
       onClick={() => onSelect(id)}
+      onMouseEnter={() => onHover(id)}
+      onMouseLeave={() => onHover(null)}
     >
       <CardContent
         sx={{
@@ -125,6 +139,7 @@ export const VersionsExplorer = () => {
   const [loading, setLoading] = useState(true);
   const [modalOpen, setModalOpen] = useState(false);
   const [downloadLoading, setDownloadLoading] = useState<string | null>(null);
+  const [hoveredCardId, setHoveredCardId] = useState<string | null>(null);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -220,13 +235,21 @@ export const VersionsExplorer = () => {
         flexDirection: 'column',
         borderRadius: '16px',
         boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-        transition: 'transform 0.3s, box-shadow 0.3s',
+        transition: 'transform 0.3s, box-shadow 0.3s, filter 0.3s',
         overflow: 'hidden',
         justifyContent: 'center',
         alignItems: 'center',
         cursor: 'pointer',
+        filter: hoveredCardId && hoveredCardId !== 'add' ? 'blur(5px)' : 'blur(0)',
+        transform: hoveredCardId === 'add' ? 'scale(1.03)' : 'scale(1)',
+        zIndex: hoveredCardId === 'add' ? 10 : 1,
+        '&:hover': {
+          boxShadow: '0 12px 40px rgba(0, 0, 0, 0.5)',
+        },
       }}
       onClick={handleAddVersion}
+      onMouseEnter={() => setHoveredCardId('add')}
+      onMouseLeave={() => setHoveredCardId(null)}
     >
       <AddIcon sx={{ fontSize: 60, color: '#fff' }} />
       <Typography
@@ -256,8 +279,27 @@ export const VersionsExplorer = () => {
         alignItems: 'center',
         paddingLeft: '5vw',
         paddingRight: '5vw',
+        position: 'relative',
+        flexGrow: 1,
+        height: 'calc(100vh - 64px)',
+        overflow: 'hidden',
       }}
     >
+      {/* Глобальный фоновый слой для размытия всего интерфейса */}
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backdropFilter: hoveredCardId ? 'blur(10px)' : 'blur(0)',
+          transition: 'backdrop-filter 0.3s ease-in-out',
+          zIndex: 5,
+          pointerEvents: 'none',
+        }}
+      />
+
       {loading ? (
         <Box display="flex" justifyContent="center" my={5}>
           <CircularProgress />
@@ -268,8 +310,13 @@ export const VersionsExplorer = () => {
           spacing={3}
           sx={{
             width: '100%',
+            height: '100%',
             overflowY: 'auto',
             justifyContent: 'center',
+            alignContent: 'center',
+            position: 'relative',
+            zIndex: 6,
+            padding: '2vh 0',
           }}
         >
           {/* Показываем установленные версии или дефолтную, если она есть */}
@@ -277,7 +324,15 @@ export const VersionsExplorer = () => {
             installedVersions.map((version) => (
               <Grid
                 key={version.id}
-                size={{ xs: 'auto', sm: 'auto', md: 'auto' }}
+                item
+                xs={12}
+                sm={6}
+                md={4}
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginBottom: '2vh',
+                }}
               >
                 <VersionCard
                   id={version.id}
@@ -288,19 +343,42 @@ export const VersionsExplorer = () => {
                   }
                   version={version.version}
                   onSelect={() => handleSelectVersion(version)}
+                  isHovered={hoveredCardId === version.id}
+                  onHover={setHoveredCardId}
+                  hoveredCardId={hoveredCardId}
                 />
               </Grid>
             ))
           ) : (
             // Если нет ни одной версии, показываем карточку добавления
-            <Grid size={{ xs: 'auto', sm: 'auto', md: 'auto' }}>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '2vh',
+              }}
+            >
               <AddVersionCard />
             </Grid>
           )}
 
           {/* Всегда добавляем карточку для добавления новых версий */}
           {installedVersions.length > 0 && (
-            <Grid size={{ xs: 'auto', sm: 'auto', md: 'auto' }}>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={4}
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '2vh',
+              }}
+            >
               <AddVersionCard />
             </Grid>
           )}