gradients

src/app.tsx

@@ -9,9 +9,29 @@ const App = () => {
             <Global
                 styles={css`
                     * { box-sizing: border-box; }
+                    html {
+                        height: 100%;
+                        max-width: 100%;
+                        overflow: hidden;
+                    }
                     body {
                         color: white;
-                        background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56));
+                        /* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
+                        background: radial-gradient(
+                            farthest-side at bottom left,
+                            rgba(35, 235, 4, 0.709), 
+                            transparent 65%
+                        ),
+                        radial-gradient(
+                            farthest-corner at bottom center,
+                            rgba(244, 244, 8, 0.6), 
+                            transparent 40%
+                        ),
+                        radial-gradient(
+                            farthest-side at bottom right,
+                            rgba(0, 195, 255, 0.648), 
+                            transparent 65%
+                        );
                         height: 100vh;
                         /* font-family: "SB Sans Screen"; */
                         font-family: "SBSansScreenRegular";

src/pages/main.tsx

@@ -22,6 +22,8 @@ import {
     HideGroup,
     Circle,
     LineSvg,
+    Svg,
+    CircleDiv,
 } from './style';
 import { socket } from "../socket";
 
@@ -97,20 +99,30 @@ Line.defaultProps = {
 }
 
 const Start = () => {
-    // const socketRef = useRef({ sent: false });
     const [sended, setSend] = useState(false);
 
     const handleCheck = () => {
-        // if (!socketRef.current.sent) {
         if (!sended) {
             socket.emit('play')
-            // socketRef.current.sent = true
             setSend(true)
         }
     }
 
     return (
         <StartWrapper>
+            {/* <Svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1200"
+                height="1200"
+                viewBox="0 0 400 400">
+                <defs>
+                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="50%" stop-color="#f7f7f720" />
+                        <stop offset="100%" stop-color="#4aa9edca" />
+                    </linearGradient>
+                </defs>
+                <circle cx="200" cy="-100" r="90" stroke="url(#gradient)" stroke-width="46" fill="none" transform='rotate(90 50 50)'/>
+            </Svg> */}
             <Line
                 hide={sended}
                 speed={24}
@@ -185,6 +197,7 @@ const Start = () => {
             >
                 <StartI>СТАРТ</StartI>
             </StartLabel>
+            <CircleDiv />
         </StartWrapper>
     )
 }
@@ -195,8 +208,9 @@ export const MainPage = () => {
     return (
         <MainWrapper>
             <LogoImg src={logo} />
-            {!showStart && <Input onStart={() => setShowStart(true)} />}
+            <Start />
-            {showStart && <Start />}
+            {/* {!showStart && <Input onStart={() => setShowStart(true)} />}
+            {showStart && <Start />} */}
         </MainWrapper>
     );
 };

src/pages/style.ts

@@ -73,7 +73,8 @@ export const StartLabel = styled.label`
     border-radius: 50%;
     background: #b25244;
     /* background: linear-gradient(#f7f2f6, #b2ac9e); */
-    background: linear-gradient(#b52a2a, #e10ff1);
+    /* background: linear-gradient(#b52a2a, #e10ff1); */
+    background: linear-gradient(rgb(255 251 251), rgb(140 219 35));
     position: relative;
     color: #a5a39d;
     font-size: 70px;
@@ -143,7 +144,7 @@ export const StartI = styled.i`
     height: 70%;
     left: 50%;
     top: 50%;
-    z-index: -1;
+    z-index: 1;
     color: white;
     margin: -35% 0 0 -35%;
     border-radius: 50%;
@@ -216,6 +217,41 @@ const LineHideAnimation = keyframes`
     }
 `;
 
+export const Svg = styled.svg`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -50%);
+    /* stroke-dasharray: 600; */
+`;
+
+export const CircleDiv = styled.div`
+    width: 700px;
+    height: 700px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 50%;
+    transform: translate(-50%, -50%) rotate(270deg);
+    border-radius: 50%;
+    background: radial-gradient(
+        farthest-side at bottom center,
+        rgba(35, 235, 4, 0.709), 
+        transparent 65%
+    ),
+    radial-gradient(
+        farthest-corner at bottom left,
+        rgba(244, 244, 8, 0.9), 
+        transparent 40%
+    ),
+    radial-gradient(
+        farthest-side at bottom right,
+        rgba(0, 195, 255, 0.648), 
+        transparent 65%
+    );
+`;
+
 export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; reverse: boolean }>`
     animation: ${LineRotation} ${({ animationSpeed }) => animationSpeed}s linear infinite${({ reverse }) => reverse ? ' reverse' : ''};
     animation-delay: -${({ delay }) => delay}s;
@@ -223,7 +259,7 @@ export const LineSvg = styled.svg<{ animationSpeed: number; delay: number; rever
     top: 50%;
     left: 50%;
     transform-origin: 50% 50%;
-    transform: translate(-50%, -100%);
+    transform: translate(-50%, -50%);
 `;
 
 export const HideGroup = styled.g<{ hide: boolean; delay: number; }>`