First version

.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+build
+node_modules
+package-lock.json

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "edna-task",
+  "version": "1.1.1",
+  "description": "yet another try to build damn app...",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve --config webpack/webpack.config.js --open"
+  },
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.4",
+    "styled-components": "^6.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.5.3",
+    "styled-components": "^6.0.7",
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

src/App.tsx

@@ -0,0 +1,58 @@
+import Wrapper from "./components/Wrapper";
+import Title from "./components/Title_component";
+import Window from "./components/Main_window";
+import edna_logo from  "../images/edna_logo.png";
+import Captcha from "../images/Captcha.png";
+
+import Image_Wrapper from "./components/Image_wrapper";
+import Login_Frame from "./components/Login_Frame";
+import Input_Field from "./components/Input_Field";
+import Small_Grey_Text from "./components/Small_Grey_Text";
+import Input_text from "./components/Input_text";
+import Bottom_Frame from "./components/Bottom_Frame";
+import Forgot_Password from "./components/Forgot_Password";
+import Entry_Button from "./components/Entry_Button";
+import Sign_In from "./components/Sign_In";
+import Footer from "./components/Footer";
+import Footer_Text from "./components/Footer_Text";
+
+export const App = () => {
+    return (
+        <div>
+            <Wrapper>
+                <Window>
+                    <Image_Wrapper>
+                        <img src={edna_logo}/>
+                    </Image_Wrapper>
+                    <Login_Frame>
+                        <Title>Вход в аккаунт</Title>
+                        <Input_Field>
+                            <Small_Grey_Text>Е-mail</Small_Grey_Text>
+                            <Input_text placeholder = "company.com"></Input_text>
+                            <div style={{height: '1px', alignSelf: 'stretch'}}></div>
+                        </Input_Field>
+                        <Input_Field>
+                            <Small_Grey_Text>Пароль</Small_Grey_Text>
+                            <Input_text placeholder = "●●●●●●●●●●●●●●●●"></Input_text>
+                            <div style={{height: '12px', alignSelf: 'stretch'}}></div>
+                        </Input_Field>
+                        <img src={Captcha} style={{position: 'relative',left: "-3px"}}/>
+                        <Input_Field>
+                            <Small_Grey_Text>Цифры с картинки</Small_Grey_Text>
+                            <Input_text placeholder = "00000"></Input_text>
+                            <div style={{height: '12px', alignSelf: 'stretch'}}></div>
+                        </Input_Field>
+                        <Bottom_Frame>
+                            <Forgot_Password href={'/'}>Забыли пароль?</Forgot_Password>
+                            <Entry_Button href={'/'}>Войти</Entry_Button>
+                        </Bottom_Frame>
+                        <Sign_In>Еще нет аккаунта?<a href={'/'} style={{color:'black', marginLeft: '3px'}}>Зарегистрируйтесь</a> </Sign_In>
+                    </Login_Frame>
+                </Window>
+            </Wrapper>
+            <Footer>
+                <Footer_Text>© 2005 – 2020 edna <a href={'/'} style={{color:'#E5E5E5', marginLeft: '3px', textDecoration:"none"}}>Поддержка</a></Footer_Text>
+            </Footer>
+        </div>
+    )
+}

src/components/Bottom_Frame.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Bottom_Frame = styled.div`
+  width: 320px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+
+export default Bottom_Frame

src/components/Entry_Button.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Entry_Button = styled.button`
+  cursor: pointer;
+  width: 85px;
+  height: 36px;
+  background: #121212;
+  color: #FFFFFF;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+  margin-left: 10px;
+`
+
+
+export default Entry_Button

src/components/Footer.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Footer = styled.div`
+  width: 100%;
+  height: 40px;
+  background: #121212;
+  display: flex;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+`
+
+
+export default Footer

src/components/Forgot_Password.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Forgot_Password = styled.a`
+  text-align: center;
+  color: #000000;
+  font-size: 12px;
+  font-weight: bold;
+  text-decoration: none;
+`
+
+
+export default Forgot_Password

src/components/Image_wrapper.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Image_Wrapper = styled.div`
+  width: 400px;
+  height: 400px;
+  margin-top: 148px;
+  margin-bottom: 200px;
+  margin-left: 38px;
+  margin-right: 103px;
+`
+
+
+export default Image_Wrapper

src/components/Input_Field.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const InputField = styled.div`
+  display: flex;
+  width: 320px;
+  flex-direction: column;
+  align-items: flex-start;
+`
+
+
+export default InputField

src/components/Input_text.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const InputText = styled.input`
+  background: #F4F4F4;
+  height: 36px;
+  width: 100%;
+  border-radius: 4px;
+  border: none ;
+  padding-left: 16px;
+  font-weight: 400;
+`
+
+
+export default InputText

src/components/Login_Frame.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Login_Frame = styled.div`
+  width: 320px;
+  height: 479px;
+  margin-top: 100px;
+  margin-bottom: 136px;
+  margin-right: 79px;
+  
+`
+
+
+export default Login_Frame

src/components/Main_window.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Window = styled.div`
+  width: 940px;
+  height: 690px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+
+export default Window

src/components/Sign_In.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Sing_In = styled.p`
+  width: 320px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #000;
+  font-weight: 400;
+`
+
+
+export default Sing_In

src/components/Small_Grey_Text.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const SmallGreyText = styled.p`
+  color: #5B5B5B;
+  font-size: 12px;
+  font-feature-settings: 'clig' off, 'liga' off;
+  font-weight: 400;
+`
+
+
+export default SmallGreyText

src/components/Spacer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Spacer24 = styled.div`
+  height: 24px;
+  align-self: stretch;
+`
+
+
+export default Spacer24

src/components/Title_component.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styled from "styled-components";
+
+const Title = styled.h1`
+    font-size: 24px;
+    text-align: center;
+`
+
+
+export default Title

src/components/Wrapper.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import styled from "styled-components";
+
+
+const Wrapper = styled.div`
+  width: 100%;
+  background: #ffffff;
+  font-family: 'League Spartan', sans-serif;
+  display: flex;
+  justify-content: center;
+`
+
+
+export default Wrapper