From 63d840ac10ce6b9d254ad5fc781fb29565a1d134 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Fri, 5 Aug 2022 13:20:08 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D1=81=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=B0=D0=BF=D0=BE=D0=BC=20=D0=B4=D0=BB=D1=8F=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |   3 +
 src/App.css                                   |   1 +
 src/App.tsx                                   |   6 +-
 src/components/connectWindow/LogoFull.svg     |  18 +++
 .../connectWindow/connectWindow.css           |  29 +++++
 .../connectWindow/connectWindow.tsx           |  39 ++++++
 src/components/connectWindow/popup/popup.css  | 122 ++++++++++++++++++
 src/components/connectWindow/popup/popup.tsx  |  44 +++++++
 src/components/mainPart/contentContainer.tsx  |   8 +-
 src/components/mainPart/mainPart.css          |  19 ++-
 src/components/mainPart/mainPart.tsx          |   7 +-
 src/components/mainPart/pinkButton.css        |  51 ++++++++
 src/components/mainPart/pinkButton.tsx        |   1 +
 13 files changed, 331 insertions(+), 17 deletions(-)
 create mode 100644 src/components/connectWindow/LogoFull.svg
 create mode 100644 src/components/connectWindow/connectWindow.css
 create mode 100644 src/components/connectWindow/connectWindow.tsx
 create mode 100644 src/components/connectWindow/popup/popup.css
 create mode 100644 src/components/connectWindow/popup/popup.tsx
 create mode 100644 src/components/mainPart/pinkButton.css

diff --git a/public/index.html b/public/index.html
index ce64ae3..94a66ac 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,9 @@
       name="description"
       content="Web site created using create-react-app"
     />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
index dbc852e..905cdfe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,4 @@
 .App {
   font-family: inter;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index f296c7c..3b1d0f1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { MainPart } from './components/mainPart/mainPart';
 import { Ws } from './connections/ws';
 import { ContextWs } from './ContextWs';
 import { ConnectData } from './connections/connectData';
+import { ConnectWindow } from './components/connectWindow/connectWindow';
 
 type WsData = {
   message: string
@@ -80,8 +81,9 @@ function App() {
     <div className="App">
       <ContextWs.Provider value={{ws: ws, wsEvent: wsEvent}}>
         <ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
-          <MainPart createSess={createSess} connectSess={connectSess}/>
-          <Footer />
+          {/* <MainPart createSess={createSess} connectSess={connectSess}/>
+          <Footer /> */}
+          <ConnectWindow />
         </ContextLang.Provider>
       </ContextWs.Provider>
     </div>
diff --git a/src/components/connectWindow/LogoFull.svg b/src/components/connectWindow/LogoFull.svg
new file mode 100644
index 0000000..82cf873
--- /dev/null
+++ b/src/components/connectWindow/LogoFull.svg
@@ -0,0 +1,18 @@
+<svg width="267" height="78" viewBox="0 0 267 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.0237 47.8577L46.9372 43.7538C45.2694 44.1903 43.6108 44.653 41.9614 45.142C41.1498 42.396 40.2703 39.6743 39.3228 36.9768C34.7008 23.91 28.4234 11.4841 20.6429 0L17.1096 2.37321C24.6896 13.5599 30.8035 25.6652 35.3026 38.3952C36.2379 41.0442 37.1012 43.7165 37.8924 46.4119C30.6884 48.7484 23.6574 51.5842 16.8509 54.8984L28.5464 31.5303L24.7361 29.639L10.4325 58.196C6.88807 60.1176 3.41055 62.1725 0 64.3608L2.30987 67.9282C3.86197 66.932 5.43032 65.9631 7.01488 65.0216L1.62208 75.7903L5.43537 77.6846L13.6523 61.2906C21.7827 56.9665 30.2764 53.3572 39.0367 50.5036C41.3925 59.4069 42.9658 68.4975 43.7386 77.6725L47.9993 77.3118C47.2012 67.8309 45.5719 58.4378 43.13 49.2398C44.7531 48.7589 46.3924 48.3022 48.048 47.8698" fill="white"/>
+<path d="M212.437 47.8485H214.807V29.9481H212.437V47.8485ZM222.884 29.9481L215.151 38.5043L215.078 38.574L215.157 38.6467L224.455 47.8394H227.477L218.021 38.4891L225.751 29.939L222.884 29.9481Z" fill="white"/>
+<path d="M196.006 38.9196C195.997 37.0812 196.721 35.3144 198.019 34.0073C199.317 32.7003 201.083 31.9598 202.929 31.9486C204.507 31.9381 206.067 32.281 207.494 32.9518V30.4331C206.034 29.8904 204.488 29.6152 202.929 29.6208C201.692 29.5986 200.463 29.8221 199.313 30.2782C198.163 30.7344 197.117 31.4141 196.234 32.2776C195.351 33.1412 194.649 34.1713 194.171 35.3078C193.692 36.4443 193.445 37.6644 193.445 38.8969C193.445 40.1293 193.692 41.3494 194.171 42.4859C194.649 43.6224 195.351 44.6525 196.234 45.5161C197.117 46.3797 198.163 47.0594 199.313 47.5155C200.463 47.9717 201.692 48.1952 202.929 48.1729C204.488 48.1785 206.034 47.9033 207.494 47.3606V44.8723C206.068 45.5455 204.508 45.8895 202.929 45.8785C201.083 45.8673 199.317 45.1268 198.019 43.8197C196.721 42.5127 195.997 40.7459 196.006 38.9075" fill="white"/>
+<path d="M74.9239 34.6096L78.0737 41.0442H71.771L74.9239 34.6096ZM66.0039 47.8485H68.4386L70.7332 43.1658H79.1145L81.4062 47.8485H83.8408L74.9209 29.6329L66.0039 47.8485Z" fill="white"/>
+<path d="M101.982 29.6275L89.2184 42.6967V29.9488H86.8477V48.1705L99.6083 35.1013V47.8492H101.982V29.6275ZM102.919 22.317L101.821 20.4985C98.6648 22.4041 96.0468 25.0771 94.2125 28.2666L96.0659 29.3183C97.7205 26.4429 100.082 24.0336 102.929 22.317" fill="white"/>
+<path d="M172.098 38.9197C172.083 40.2801 171.664 41.6057 170.894 42.7296C170.124 43.8535 169.038 44.7255 167.771 45.2358C166.505 45.7461 165.115 45.8719 163.777 45.5973C162.439 45.3228 161.213 44.6601 160.252 43.6929C159.291 42.7256 158.64 41.4969 158.379 40.1615C158.118 38.826 158.259 37.4435 158.785 36.188C159.311 34.9325 160.199 33.86 161.336 33.1056C162.473 32.3513 163.808 31.9487 165.174 31.9486C167.02 31.9599 168.786 32.7003 170.084 34.0074C171.382 35.3145 172.107 37.0812 172.098 38.9197ZM174.487 38.9197C174.487 37.0845 173.941 35.2904 172.918 33.7642C171.895 32.2381 170.44 31.0485 168.737 30.3459C167.035 29.6433 165.162 29.4593 163.354 29.8172C161.547 30.1751 159.887 31.0588 158.584 32.3564C157.281 33.6541 156.394 35.3075 156.034 37.1074C155.675 38.9074 155.86 40.7731 156.565 42.4684C157.271 44.1638 158.465 45.6127 159.998 46.6319C161.53 47.6511 163.331 48.1948 165.174 48.1942C167.644 48.1942 170.013 47.217 171.759 45.4777C173.506 43.7384 174.487 41.3794 174.487 38.9197Z" fill="white"/>
+<path d="M152.066 34.5673C152.066 31.8395 149.702 29.6269 146.783 29.6269C145.28 29.6131 143.79 29.9039 142.404 30.4817V32.8882L142.562 32.7882C143.814 32.109 145.224 31.7703 146.649 31.8062C148.375 31.8062 149.775 33.0973 149.775 34.6885C149.775 36.2797 148.375 37.5679 146.649 37.5679H144.972V39.6895H147.407C149.254 39.6895 150.755 41.0867 150.755 42.8052C150.755 44.5237 149.132 45.921 147.133 45.921C144.875 45.921 142.906 45.2784 141.871 44.3328V46.8424C143.472 47.7412 145.284 48.1995 147.121 48.1699C150.405 48.1699 153.067 45.8907 153.067 43.075C153.067 40.8412 151.85 39.1348 150.088 38.4135C150.693 37.9685 151.187 37.3893 151.528 36.7218C151.87 36.0542 152.051 35.3166 152.057 34.5673" fill="white"/>
+<path d="M117.503 42.7081C117.503 43.5093 117.184 44.2779 116.617 44.8459C116.05 45.4139 115.279 45.735 114.475 45.739H109.715V39.7014H114.475C115.279 39.7054 116.05 40.0266 116.617 40.5945C117.184 41.1625 117.503 41.9311 117.503 42.7323V42.7081ZM115.552 34.852C115.552 35.5811 115.261 36.2803 114.744 36.7959C114.226 37.3114 113.524 37.601 112.792 37.601H109.715V32.0697H112.792C113.524 32.0705 114.225 32.3604 114.743 32.8757C115.26 33.3911 115.551 34.0898 115.552 34.8187V34.852ZM116.417 38.1526C116.886 37.72 117.262 37.1955 117.52 36.612C117.777 36.0286 117.911 35.3985 117.914 34.7611C117.914 32.1121 115.619 29.9632 112.792 29.9632H107.354V47.8636H114.484C117.43 47.8303 119.804 45.5905 119.804 42.8293C119.786 41.8003 119.453 40.8012 118.849 39.9659C118.245 39.1306 117.4 38.499 116.426 38.1557" fill="white"/>
+<path d="M266.066 29.6269L253.302 42.6961V29.9482H250.932V48.1699L263.692 35.1007V47.8486H266.066V29.6269ZM267 21.5496L265.15 20.4979C263.495 23.3734 261.134 25.7826 258.287 27.4993L259.383 29.3178C262.539 27.4122 265.157 24.7392 266.991 21.5496" fill="white"/>
+<path d="M130.523 34.6096L133.672 41.0442H127.37L130.523 34.6096ZM121.603 47.8485H124.037L126.329 43.1658H134.71L137.002 47.8485H139.436L130.516 29.6329L121.603 47.8485Z" fill="white"/>
+<path d="M188.735 42.7083C188.735 43.5121 188.414 44.283 187.844 44.8514C187.273 45.4198 186.499 45.7391 185.692 45.7391H180.932V39.7016H185.692C186.499 39.7016 187.273 40.0209 187.844 40.5893C188.414 41.1577 188.735 41.9287 188.735 42.7325V42.7083ZM186.781 34.8522C186.781 35.5813 186.491 36.2805 185.973 36.796C185.455 37.3116 184.753 37.6012 184.021 37.6012H180.944V32.0699H184.021C184.753 32.0707 185.454 32.3605 185.972 32.8759C186.489 33.3913 186.781 34.09 186.781 34.8189V34.8522ZM187.646 38.1528C188.116 37.7201 188.491 37.1957 188.749 36.6122C189.006 36.0287 189.14 35.3987 189.143 34.7613C189.143 32.1123 186.851 29.9634 184.021 29.9634H178.567V47.8638H185.698C188.644 47.8305 191.021 45.5906 191.021 42.8295C191.002 41.8002 190.669 40.8011 190.064 39.9658C189.46 39.1306 188.614 38.4991 187.64 38.1559" fill="white"/>
+<path d="M245.572 29.6268L232.811 42.696V29.9481H230.438V48.1698L243.198 35.0976V47.8455H245.572V29.6268Z" fill="white"/>
+<path d="M87.197 59.772H84.8232V77.6542H87.197V59.772Z" fill="white"/>
+<path d="M104.639 61.8937V59.772H91.2666V61.8937H96.769V77.6542H99.1397V61.8937H104.639Z" fill="white"/>
+<path d="M120.394 59.757L115.095 67.5797H115.074L109.776 59.757H106.973L113.899 69.9832V77.6544H116.27V69.9832L123.197 59.757H120.394Z" fill="white"/>
+<path d="M68.3985 68.7135C68.3896 66.875 69.1137 65.1082 70.4119 63.8011C71.7101 62.4941 73.4761 61.7537 75.3221 61.7424C76.9004 61.7307 78.461 62.0747 79.887 62.7487V60.2603C78.4271 59.7174 76.8805 59.4422 75.3221 59.448C72.881 59.492 70.5548 60.4886 68.844 62.2234C67.1333 63.9582 66.1748 66.2925 66.1748 68.724C66.1748 71.1556 67.1333 73.4899 68.844 75.2247C70.5548 76.9595 72.881 77.9561 75.3221 78.0001C76.8805 78.0059 78.4271 77.7307 79.887 77.1878V74.6843C78.461 75.3582 76.9004 75.7023 75.3221 75.6906C73.4763 75.6785 71.7108 74.9378 70.4128 73.6309C69.1148 72.324 68.3904 70.5577 68.3985 68.7195" fill="white"/>
+</svg>
diff --git a/src/components/connectWindow/connectWindow.css b/src/components/connectWindow/connectWindow.css
new file mode 100644
index 0000000..688c824
--- /dev/null
+++ b/src/components/connectWindow/connectWindow.css
@@ -0,0 +1,29 @@
+.connect-window-container {
+    width: 100%;
+    height: 100vh;
+    overflow-y: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.background-image {
+    z-index: -1;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: url('../mainPart/backgroundJpgImage.jpg') 50% 50% no-repeat;
+    background-color: #B196AF;
+}
+
+.background-image::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    background: rgba(17, 13, 28, 0.8);
+    backdrop-filter: blur(15px);
+}
\ No newline at end of file
diff --git a/src/components/connectWindow/connectWindow.tsx b/src/components/connectWindow/connectWindow.tsx
new file mode 100644
index 0000000..78a85e4
--- /dev/null
+++ b/src/components/connectWindow/connectWindow.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import './connectWindow.css';
+import { Popup } from "./popup/popup";
+import logo from './LogoFull.svg';
+
+export const ConnectWindow:React.FC = React.memo(() => {
+    const [currentView, setCurrentView] = useState<number>(0);
+
+    function connectToNew() {
+
+    }
+
+    function connectToExisting() {
+        setCurrentView(1)
+    }
+
+    function backToSelect() {
+        setCurrentView(currentView - 1)
+    }
+
+    return <div className="connect-window-container">
+        <div className="background-image"></div>
+        {
+            currentView === 0
+            ? <Popup 
+                logo={logo}
+                type="title-button"
+                onClickFirst={connectToNew}
+                onClickSecond={connectToExisting}
+            />
+            : <Popup 
+                onClickFirst={connectToNew}
+                onClickChange={backToSelect}
+                type='title-input-button'                
+            />
+        }
+        
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/connectWindow/popup/popup.css b/src/components/connectWindow/popup/popup.css
new file mode 100644
index 0000000..66c5dc3
--- /dev/null
+++ b/src/components/connectWindow/popup/popup.css
@@ -0,0 +1,122 @@
+.popup-container {
+    width: 494px;
+    padding: 48px;
+    box-sizing: border-box;
+    background-color: #333333;
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #4F4F4F;
+    border-radius: 32px;
+    gap: 50px;
+}
+
+.popup-logo {
+    width: 267px;
+    height: 78px;
+}
+
+.popup-title-button-title {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+}
+
+.popup-line {
+    width: 280px;
+    height: 1px;
+    background-color: #4F4F4F;
+    align-self: center;
+}
+
+.popup-title-button {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.popup-title-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.popup-title-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 26px;
+}
+
+.popup-title-input-title {
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 130%;
+}
+
+.popup-title-input-input-container {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.popup-title-input-input {
+    width: 100%;
+    height: 60px;
+    box-sizing: border-box;
+    padding: 20px 24px;
+    background-color: transparent;
+    border: 1px solid #828282;
+    border-radius: 8px;
+    outline: none;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: #FFFFFF;
+}
+
+.popup-title-input-back-button {
+    background-color: transparent;
+    border: none;
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 20px;
+    color: #FFFFFF;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 640px) {
+    .popup-container {
+        width: 100%;
+        height: 100%;
+        padding: 0 10px;
+        border: none;
+        border-radius: 0px;
+        justify-content: center;
+    }
+
+    .popup-logo {
+        width: 166px;
+        height: 48px;
+    }
+
+    .popup-title-button-title {
+        font-size: 16px;
+        line-height: 19px;
+    }
+    
+    .popup-line {
+        width: 260px;        
+    }
+
+    .popup-title-input-title {
+        font-size: 18px;
+    }
+
+    .popup-title-input-input {
+        height: 48px;       
+    }
+
+    .popup-title-input-back-button {        
+        font-size: 14px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/connectWindow/popup/popup.tsx b/src/components/connectWindow/popup/popup.tsx
new file mode 100644
index 0000000..7de8a14
--- /dev/null
+++ b/src/components/connectWindow/popup/popup.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { PinkButton } from "../../mainPart/pinkButton";
+import './popup.css';
+
+type TProps = {
+    logo?: string
+    onClickFirst: () => void
+    onClickSecond?: () => void
+    onClickChange?: () => void
+    type: 'title-button' | 'title-input-button'
+}
+
+export const Popup:React.FC<TProps> = React.memo((props) => {
+    return <div className="popup-container">
+        {
+            props.logo
+            ? <img className="popup-logo" alt="logo" src={props.logo} />
+            : null
+        }
+        {            
+            props.type === 'title-button' && props?.onClickSecond
+            ? <div className="popup-title-button">
+                <div className="popup-title-button-container">
+                    <span className="popup-title-button-title">Начать новую демонстрацию</span>
+                    <PinkButton textButton="Начать" onClick={props.onClickFirst} width='100%' />
+                </div>
+                <span className="popup-line"></span>
+                <div className="popup-title-button-container">
+                    <span className="popup-title-button-title">Подключиться к существующей</span>
+                    <PinkButton textButton="Подключиться" onClick={props.onClickSecond} width='100%' />
+                </div>
+            </div>
+            : <div className="popup-title-input-container">
+                <span className="popup-title-input-title">Укажите код подключения или вставьте ссылку</span>
+                <div className="popup-title-input-input-container">
+                    <input type={'text'} className='popup-title-input-input' />
+                    <PinkButton textButton="Продолжить" onClick={props.onClickFirst} width='100%' />
+                    <span className="popup-line"></span>
+                </div>
+                <button className="popup-title-input-back-button" onClick={() => props.onClickChange()}>Выбор способа демонстрации</button>
+            </div>
+        }
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainPart/contentContainer.tsx b/src/components/mainPart/contentContainer.tsx
index 73cb237..da779fe 100644
--- a/src/components/mainPart/contentContainer.tsx
+++ b/src/components/mainPart/contentContainer.tsx
@@ -8,7 +8,7 @@ type TProps = {
         ru: string,
         en: string
     }
-    onClickButton: () => void
+    onClickButton: (accessCode?: string) => void
     titleText?: {
         ru: string,
         en: string
@@ -63,7 +63,11 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
             <span className="main-part-text-access-code">{accessCode}</span>
         }
         <PinkButton
-            onClick={props.onClickButton}
+            onClick={
+                props.isAccessCode
+                ? () => props.onClickButton(accessCode)
+                : props.onClickButton
+            }
             textButton={props.textButton[lang]}
         />
     </div>
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index c221288..246af5f 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -107,7 +107,7 @@
     letter-spacing: 16px;
 }
 
-.main-part-text-button {
+/* .main-part-text-button {
     width: 320px;
     height: 60px;
     display: flex;
@@ -119,8 +119,7 @@
     background: #CE56C2;
     border-radius: 8px;
     border: none;
-    color: #FFFFFF;
-    /* transition: .3s; */
+    color: #FFFFFF;    
     cursor: pointer;
 }
 
@@ -130,7 +129,7 @@
     color: #CE56C2;
     border: 2px solid #CE56C2;
     transition: .3s;
-}
+} */
 
 .main-part-content-or-line-container {
     display: flex;
@@ -343,11 +342,11 @@
         max-width: 80%;
     }
 
-    .main-part-text-button {
+    /* .main-part-text-button {
         width: 50%;
         height: 3.5vw;
         font-size: 1vw;
-    }
+    } */
 
     .main-part-content-or-line-container {
         width: 25%;    
@@ -453,7 +452,7 @@
 }
 
 @media screen and (max-width: 640px) {
-    .main-part-text-button:hover {
+    /* .main-part-text-button:hover {
         background-color: #CE56C2;
         color: #FFFFFF;
         border: none;
@@ -463,7 +462,7 @@
         background-color: #FFFFFF;
         color: #CE56C2 ;
         border: none;
-    }
+    } */
 
     .main-part-container {    
         padding: 10px 10px 8px 10px;
@@ -488,10 +487,10 @@
         max-width: 300px;
     }
 
-    .main-part-text-button {
+    /* .main-part-text-button {
         width: 100%;
         height: 48px;
-    }
+    } */
 
     .main-part-content-or-line-container {        
         width: 100%;
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index bb203d8..23e34cd 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -109,7 +109,7 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
             <ContentContainer 
                 titleText={LangDict.demoStartedTitle}
                 descriptText={LangDict.demoStartedDescription}
-                onClickButton={() => onClickConnect()}
+                onClickButton={(accessCode) => onClickConnect(accessCode)}
                 textButton={LangDict.connectToDemoButton}
                 isAccessCode={true}
             />
@@ -132,8 +132,9 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
         setCurrentContent(<></>);
     }
 
-    function onClickConnect() {
-        props.connectSess()
+    function onClickConnect(accessCode: string) {
+        console.log(accessCode)
+        // props.connectSess()
         // ws.send('{ "message" : "NEW_SESS" }');
     }
 
diff --git a/src/components/mainPart/pinkButton.css b/src/components/mainPart/pinkButton.css
new file mode 100644
index 0000000..aa25900
--- /dev/null
+++ b/src/components/mainPart/pinkButton.css
@@ -0,0 +1,51 @@
+.main-part-text-button {
+    width: 320px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 700;
+    font-size: 17px;
+    line-height: 21px;
+    background: #CE56C2;
+    border-radius: 8px;
+    border: none;
+    color: #FFFFFF;
+    /* transition: .3s; */
+    cursor: pointer;
+}
+
+.main-part-text-button:hover,
+.main-part-text-button:active {
+    background-color: #FFFFFF;
+    color: #CE56C2;
+    border: 2px solid #CE56C2;
+    transition: .3s;
+}
+
+@media screen and (min-width: 2000px) {
+    .main-part-text-button {
+        width: 50%;
+        height: 3.5vw;
+        font-size: 1vw;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .main-part-text-button:hover {
+        background-color: #CE56C2;
+        color: #FFFFFF;
+        border: none;
+    }
+
+    .main-part-text-button:active {
+        background-color: #FFFFFF;
+        color: #CE56C2 ;
+        border: none;
+    }
+
+    .main-part-text-button {
+        width: 100%;
+        height: 48px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/mainPart/pinkButton.tsx b/src/components/mainPart/pinkButton.tsx
index 4c83171..5d4c13f 100644
--- a/src/components/mainPart/pinkButton.tsx
+++ b/src/components/mainPart/pinkButton.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Style } from "util";
+import './pinkButton.css';
 
 type TProps = {
     textButton: string