fix adaptive

package-lock.json

@@ -16,6 +16,7 @@
                 "express": "^4.18.2",
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
+                "react-helmet": "^6.1.0",
                 "socket.io-client": "^4.5.4",
                 "typescript": "^4.9.3"
             },
@@ -6381,7 +6382,6 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
@@ -6701,6 +6701,25 @@
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
             "dev": true
         },
+        "node_modules/react-fast-compare": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+            "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        },
+        "node_modules/react-helmet": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+            "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+            "dependencies": {
+                "object-assign": "^4.1.1",
+                "prop-types": "^15.7.2",
+                "react-fast-compare": "^3.1.1",
+                "react-side-effect": "^2.1.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.3.0"
+            }
+        },
         "node_modules/react-hot-loader": {
             "version": "4.13.0",
             "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -6790,6 +6809,14 @@
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
             "dev": true
         },
+        "node_modules/react-side-effect": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+            "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+            "peerDependencies": {
+                "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/rechoir": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
@@ -13350,7 +13377,6 @@
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
             "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-            "dev": true,
             "requires": {
                 "loose-envify": "^1.4.0",
                 "object-assign": "^4.1.1",
@@ -13592,6 +13618,22 @@
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
             "dev": true
         },
+        "react-fast-compare": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+            "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        },
+        "react-helmet": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+            "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+            "requires": {
+                "object-assign": "^4.1.1",
+                "prop-types": "^15.7.2",
+                "react-fast-compare": "^3.1.1",
+                "react-side-effect": "^2.1.0"
+            }
+        },
         "react-hot-loader": {
             "version": "4.13.0",
             "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -13657,6 +13699,12 @@
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
             "dev": true
         },
+        "react-side-effect": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+            "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+            "requires": {}
+        },
         "rechoir": {
             "version": "0.7.1",
             "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",

package.json

@@ -28,6 +28,7 @@
         "express": "^4.18.2",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-helmet": "^6.1.0",
         "socket.io-client": "^4.5.4",
         "typescript": "^4.9.3"
     }

src/app.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Global, css  } from '@emotion/react'
 
 import { MainPage } from './pages/main';
@@ -6,6 +7,9 @@ import { MainPage } from './pages/main';
 const App = () => {
     return(
         <>
+            <Helmet>
+                <meta name="viewport" content="width=device-width, user-scalable=no" />
+            </Helmet>
             <Global
                 styles={css`
                     * { box-sizing: border-box; }

src/assets/logo.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="33" viewBox="0 0 120 33" fill="none">
 <path d="M28.9083 6.35486C29.6749 7.35932 30.3239 8.45058 30.8421 9.60673L16.1419 20.5889L9.99829 16.6859V11.9904L16.1419 15.8934L28.9083 6.35486Z" fill="#21A038"/>
 <path d="M3.72827 16.3545C3.72827 16.1438 3.73334 15.9345 3.74348 15.7264L0.0202772 15.5415C0.00760464 15.8112 4.49933e-06 16.0835 4.49933e-06 16.3583C-0.00157962 18.5055 0.415154 20.6318 1.22631 22.6153C2.03746 24.5989 3.22706 26.4006 4.72687 27.9171L7.36783 25.2419C6.21333 24.0766 5.29746 22.6915 4.67286 21.1663C4.04826 19.6411 3.72725 18.0058 3.72827 16.3545Z" fill="url(#paint0_linear)"/>
 <path d="M16.1385 3.77747C16.3463 3.77747 16.5528 3.78518 16.7581 3.79545L16.9444 0.0208629C16.6775 0.00801981 16.4088 0.00159904 16.1385 0.00159904C14.0188 -0.00102064 11.9196 0.420712 9.96126 1.24258C8.00291 2.06445 6.22405 3.27027 4.72681 4.7908L7.36777 7.4673C8.51766 6.29688 9.8845 5.36835 11.3897 4.73512C12.8949 4.10189 14.5087 3.77643 16.1385 3.77747Z" fill="url(#paint1_linear)"/>
@@ -8,10 +8,10 @@
 <path d="M16.1386 28.9318C14.4045 28.9324 12.6896 28.5639 11.1049 27.8502C9.52028 27.1365 8.10119 26.0934 6.93956 24.7886L4.17188 27.3264C5.68303 29.0233 7.52923 30.3793 9.59077 31.3066C11.6523 32.2338 13.8831 32.7116 16.1386 32.7089V28.9318Z" fill="url(#paint4_linear)"/>
 <path d="M7.81645 7.0329L5.31235 4.22668C3.63776 5.75806 2.29948 7.62906 1.3843 9.71834C0.469132 11.8076 -0.00249507 14.0685 9.92663e-06 16.3544H3.72828C3.72751 14.5972 4.09104 12.8593 4.79529 11.2535C5.49955 9.64775 6.52883 8.20981 7.81645 7.0329Z" fill="url(#paint5_linear)"/>
 <g clip-path="url(#clip0)">
-<!-- <path d="M93.1298 9.35282L97.7473 5.94421H82.2935V26.427H97.7473V23.0184H86.7031V17.7717H96.1243V14.3631H86.7031V9.35282H93.1298Z" fill="#21A038"/> -->
+<path d="M93.1298 9.35282L97.7473 5.94421H82.2935V26.427H97.7473V23.0184H86.7031V17.7717H96.1243V14.3631H86.7031V9.35282H93.1298Z" fill="#21A038"/>
-<!-- <path d="M71.8952 13.9236H66.53V9.35147H75.0927L79.7074 5.9325H62.123V26.4153H71.3277C76.4883 26.4153 79.45 24.0717 79.45 19.9845C79.45 16.0744 76.7674 13.9236 71.8952 13.9236ZM71.1292 23.0056H66.53V17.3301H71.1292C73.9204 17.3301 75.2291 18.2812 75.2291 20.1679C75.2291 22.0545 73.8366 23.0056 71.1292 23.0056Z" fill="#21A038"/> -->
+<path d="M71.8952 13.9236H66.53V9.35147H75.0927L79.7074 5.9325H62.123V26.4153H71.3277C76.4883 26.4153 79.45 24.0717 79.45 19.9845C79.45 16.0744 76.7674 13.9236 71.8952 13.9236ZM71.1292 23.0056H66.53V17.3301H71.1292C73.9204 17.3301 75.2291 18.2812 75.2291 20.1679C75.2291 22.0545 73.8366 23.0056 71.1292 23.0056Z" fill="#21A038"/>
-<!-- <path d="M109.107 5.94128H100.695V26.424H105.104V20.6216H109.107C114.474 20.6216 117.794 17.7919 117.794 13.2705C117.794 8.74923 114.474 5.94128 109.107 5.94128ZM109.014 17.2104H105.104V9.35249H109.014C111.837 9.35249 113.395 10.7487 113.395 13.283C113.395 15.8173 111.837 17.2104 109.014 17.2104Z" fill="#21A038"/> -->
+<path d="M109.107 5.94128H100.695V26.424H105.104V20.6216H109.107C114.474 20.6216 117.794 17.7919 117.794 13.2705C117.794 8.74923 114.474 5.94128 109.107 5.94128ZM109.014 17.2104H105.104V9.35249H109.014C111.837 9.35249 113.395 10.7487 113.395 13.283C113.395 15.8173 111.837 17.2104 109.014 17.2104Z" fill="#21A038"/>
-<!-- <path d="M55.5064 21.5902C54.3674 22.2082 53.0913 22.5282 51.7962 22.5206C47.9198 22.5206 45.1077 19.7477 45.1077 15.9294C45.1077 12.111 47.9198 9.33209 51.7962 9.33209C53.1941 9.3083 54.563 9.73303 55.7029 10.5443L58.7871 8.2684L58.5785 8.11991C56.7794 6.53499 54.3755 5.69556 51.6239 5.69556C48.6394 5.69556 45.9332 6.70166 44.001 8.53205C43.024 9.47449 42.2514 10.6086 41.7311 11.8636C41.2109 13.1186 40.9542 14.4675 40.9773 15.8263C40.9566 17.1989 41.2121 18.5616 41.7285 19.8331C42.2449 21.1046 43.0116 22.2587 43.9829 23.2267C45.9241 25.1298 48.6243 26.1783 51.5876 26.1783C54.6839 26.1783 57.3902 25.0964 59.2226 23.1267L56.4619 21.066L55.5064 21.5902Z" fill="#21A038"/> -->
+<path d="M55.5064 21.5902C54.3674 22.2082 53.0913 22.5282 51.7962 22.5206C47.9198 22.5206 45.1077 19.7477 45.1077 15.9294C45.1077 12.111 47.9198 9.33209 51.7962 9.33209C53.1941 9.3083 54.563 9.73303 55.7029 10.5443L58.7871 8.2684L58.5785 8.11991C56.7794 6.53499 54.3755 5.69556 51.6239 5.69556C48.6394 5.69556 45.9332 6.70166 44.001 8.53205C43.024 9.47449 42.2514 10.6086 41.7311 11.8636C41.2109 13.1186 40.9542 14.4675 40.9773 15.8263C40.9566 17.1989 41.2121 18.5616 41.7285 19.8331C42.2449 21.1046 43.0116 22.2587 43.9829 23.2267C45.9241 25.1298 48.6243 26.1783 51.5876 26.1783C54.6839 26.1783 57.3902 25.0964 59.2226 23.1267L56.4619 21.066L55.5064 21.5902Z" fill="#21A038"/>
 <!-- <path d="M135.277 13.9236H129.914V9.35147H141.439V5.9325H125.504V26.4153H134.697C139.857 26.4153 142.819 24.0717 142.819 19.9845C142.831 16.0744 140.149 13.9236 135.277 13.9236ZM134.511 23.0056H129.914V17.3301H134.511C137.302 17.3301 138.61 18.2812 138.61 20.1679C138.61 22.0545 137.23 23.0056 134.511 23.0056Z" fill="#21A038"/> -->
 <!-- <path d="M192.947 26.386H188.477V5.9032H192.947V14.5061H195.38L201.95 5.9032H207.016L199.223 15.6471L208.272 26.386H202.341L195.69 18.3303H192.947V26.386Z" fill="#21A038"/> -->
 <!-- <path d="M159.059 22.4934H149.603L148 26.4709H143.243L152.112 5.98816H156.868L165.593 26.4709H160.662L159.059 22.4934ZM157.578 18.7821L154.359 10.827L151.122 18.7821H157.578Z" fill="#21A038"/> -->

src/components/keyboard.style.ts

@@ -25,8 +25,9 @@ export const BackspaceBtn = styled.img`
 
 export const Key = styled.button`
     margin: 4px;
-    width: 64px;
+    width: 8vw;
-    height: 64px;
+    height: 7vw;
+    min-height: 40px;
     font-size: 24px;
     display: flex;
     align-items: center;
@@ -42,4 +43,4 @@ export const Key = styled.button`
         box-shadow: inset 1px 2px 6px #5c7cc9,
             0px 6px 16px #5c7cc9;
     }
-`;
+`;

src/pages/main.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useCallback, useRef, useMemo} from 'react';
 import { getFeatures } from '@ijl/cli';
 
-import logo from '../assets/logo-white.svg';
+import logo from '../assets/logo.svg';
 import arrow from '../assets/36-arrow-right.svg';
 
 import { Keyboard } from '../components/keyboard';
@@ -34,7 +34,7 @@ const fullScreenFeature = getFeatures('hub-video-start')?.fullScreen;
 
 const Input = ({ onStart }) => {
     const [value, setValue] = useState('');
-    const [inFocuse, setInfocuse] = useState(false);
+    const [inFocuse, setInfocuse] = useState(true);
     const handleChange = useCallback(event => {
         setValue(event.target.value.toUpperCase())
     }, [setValue]);

src/pages/style.ts

@@ -13,6 +13,10 @@ export const InputWrapper = styled.div`
     padding: 12px;
     display: flex;
     align-items: center;
+
+    @media screen and (max-width: 600px) {
+        flex-direction: column;
+    }
 `;
 export const InputLabel = styled.label`
     position: absolute;
@@ -26,6 +30,7 @@ export const InputElement = styled.input`
     font-size: 24px;
     border-radius: 8px;
     color: #117623;
+    max-width: 90vw;
 `;
 
 export const LogoImg = styled.img`