diff --git a/SurveyFrontend/index.html b/SurveyFrontend/index.html index e4b78ea..7cebcf7 100644 --- a/SurveyFrontend/index.html +++ b/SurveyFrontend/index.html @@ -2,9 +2,12 @@ - + + + + - Vite + React + TS + Survey
diff --git a/SurveyFrontend/package-lock.json b/SurveyFrontend/package-lock.json index e34fc27..2129a70 100644 --- a/SurveyFrontend/package-lock.json +++ b/SurveyFrontend/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "uuid": "^11.1.0" }, "devDependencies": { "@eslint/js": "^9.21.0", @@ -2876,6 +2877,19 @@ "punycode": "^2.1.0" } }, + "node_modules/uuid": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz", + "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/esm/bin/uuid" + } + }, "node_modules/vite": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz", diff --git a/SurveyFrontend/package.json b/SurveyFrontend/package.json index e589ff7..8865293 100644 --- a/SurveyFrontend/package.json +++ b/SurveyFrontend/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "uuid": "^11.1.0" }, "devDependencies": { "@eslint/js": "^9.21.0", diff --git a/SurveyFrontend/public/add_answer.svg b/SurveyFrontend/public/add_answer.svg new file mode 100644 index 0000000..5690985 --- /dev/null +++ b/SurveyFrontend/public/add_answer.svg @@ -0,0 +1,4 @@ + + + + diff --git a/SurveyFrontend/public/add_question.svg b/SurveyFrontend/public/add_question.svg new file mode 100644 index 0000000..d74cec8 --- /dev/null +++ b/SurveyFrontend/public/add_question.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/SurveyFrontend/public/arrow_drop_down.svg b/SurveyFrontend/public/arrow_drop_down.svg new file mode 100644 index 0000000..1d700de --- /dev/null +++ b/SurveyFrontend/public/arrow_drop_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/SurveyFrontend/public/arrow_drop_up.svg b/SurveyFrontend/public/arrow_drop_up.svg new file mode 100644 index 0000000..d891272 --- /dev/null +++ b/SurveyFrontend/public/arrow_drop_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/SurveyFrontend/public/check_box.svg b/SurveyFrontend/public/check_box.svg new file mode 100644 index 0000000..080e32c --- /dev/null +++ b/SurveyFrontend/public/check_box.svg @@ -0,0 +1,3 @@ + + + diff --git a/SurveyFrontend/public/radio_button_checked.svg b/SurveyFrontend/public/radio_button_checked.svg new file mode 100644 index 0000000..9c32c52 --- /dev/null +++ b/SurveyFrontend/public/radio_button_checked.svg @@ -0,0 +1,3 @@ + + + diff --git a/SurveyFrontend/public/radio_button_unchecked.svg b/SurveyFrontend/public/radio_button_unchecked.svg new file mode 100644 index 0000000..a99050b --- /dev/null +++ b/SurveyFrontend/public/radio_button_unchecked.svg @@ -0,0 +1,3 @@ + + + diff --git a/SurveyFrontend/src/App.css b/SurveyFrontend/src/App.css index b9d355d..ce44332 100644 --- a/SurveyFrontend/src/App.css +++ b/SurveyFrontend/src/App.css @@ -1,42 +1,3 @@ #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} + width: 100%; +} \ No newline at end of file diff --git a/SurveyFrontend/src/App.tsx b/SurveyFrontend/src/App.tsx index 3d7ded3..f5a93c5 100644 --- a/SurveyFrontend/src/App.tsx +++ b/SurveyFrontend/src/App.tsx @@ -1,35 +1,12 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' +import React from 'react'; import './App.css' +import Questions from './pages/Questions.tsx' -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) +const App: React.FC = () => { + return ( + + ) } -export default App + +export default App \ No newline at end of file diff --git a/SurveyFrontend/src/components/Account/Account.module.css b/SurveyFrontend/src/components/Account/Account.module.css index 5254866..8619ffd 100644 --- a/SurveyFrontend/src/components/Account/Account.module.css +++ b/SurveyFrontend/src/components/Account/Account.module.css @@ -1,9 +1,24 @@ /*Account.module.css*/ .account { - margin: 0; - padding: 0; - width: 52px; - height: 52px; - margin: 31px 39px 25px 0; + width: 15%; + background-color: #F3F3F3; + border-radius: 40px; + align-items: center; + padding: 4.58px 13px 4.58px 4.58px; + margin: 26px 33px 27px 0; +} + +.accountText{ + font-size: 24px; + font-weight: 600; + color: black; + width: 100%; + text-decoration: none; +} + +.accountImg{ + vertical-align: middle; + width: 55px; + margin-right: 9px; } \ No newline at end of file diff --git a/SurveyFrontend/src/components/Account/Account.tsx b/SurveyFrontend/src/components/Account/Account.tsx index be12c02..b859db4 100644 --- a/SurveyFrontend/src/components/Account/Account.tsx +++ b/SurveyFrontend/src/components/Account/Account.tsx @@ -2,14 +2,18 @@ import React from 'react'; import styles from './Account.module.css' interface AccountProps { - href: string + href: string; + user: string; } -const Account: React.FC = ({href}) => { +const Account: React.FC = ({href, user}) => { return ( - - Личный кабинет - +
+ + account + {user} + +
); }; diff --git a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.module.css b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.module.css index 1f95821..297d221 100644 --- a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.module.css +++ b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.module.css @@ -1,6 +1,7 @@ /*AddAnswerButton.module.css*/ .answerButton { + margin-top: 18px; display: flex; gap: 10px; align-items: center; diff --git a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx index 7bb3b30..901ea80 100644 --- a/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx +++ b/SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx @@ -1,6 +1,7 @@ import React from "react"; import styles from './AddAnswerButton.module.css' + interface AddAnswerButtonProps { onClick(): void; } @@ -8,8 +9,8 @@ interface AddAnswerButtonProps { const AddAnswerButton: React.FC = ({onClick}) => { return ( ); }; diff --git a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css index 642abe1..aa8331c 100644 --- a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css +++ b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css @@ -1,18 +1,24 @@ /*AddQuestionButton.module.css*/ .questionButton{ - background-color: #F6F6F6; - font-size: 24px; - font-weight: 600; - border: none; - margin: 104px auto 80px; + display: block; + margin: 0 auto; display: flex; flex-direction: column; + margin-bottom: 80px; + align-items: center; + background-color: #F6F6F6; + border: none; + outline: none; } .questionButtonImg{ - vertical-align: middle; - margin: 0 auto; - margin-bottom: 16px; width: 54px; + align-items: center; +} + +.textButton{ + font-size: 24px; + font-weight: 600; + text-align: center; } \ No newline at end of file diff --git a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx index 9d71446..667ec93 100644 --- a/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx +++ b/SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx @@ -8,8 +8,8 @@ interface AddQuestionButtonProps { const AddQuestionButton: React.FC = ({onClick}) => { return ( ); }; diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css b/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css index b4ca193..265d390 100644 --- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css +++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.module.css @@ -7,17 +7,25 @@ } .textAnswer{ + border: none; + background-color: #ffffff; font-size: 18px; font-weight: 500; - align-items: center; } .answerIcon{ vertical-align: middle; + width: 24px; } .answerInput{ + vertical-align: middle; + font-size: 18px; + font-weight: 500; outline: none; border: none; resize: none; + display: flex; + align-items: center; + box-sizing: border-box; } \ No newline at end of file diff --git a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx index 944d187..03a1e6f 100644 --- a/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx +++ b/SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx @@ -1,16 +1,21 @@ import React, {useState, useRef, useEffect} from "react"; import styles from'./AnswerOption.module.css'; +const single_selected_response = '../../../public/radio_button_checked.svg'; +const multiple_selected_response = '../../../public/check_box.svg'; +// const single_response = +// const multiple_response = + interface AnswerOptionProps{ - src: string; index: number; value: string; onChange: (value: string) => void; + selectedType: 'single' | 'multiply'; } -const AnswerOption: React.FC = ({src, index, value, onChange}) => { +const AnswerOption: React.FC = ({index, value, onChange, selectedType}) => { const [currentValue, setCurrentValue] = useState(value); - const [isEditing, setIsEditing] = useState(false); //редактируется ли сейчас + const [isEditing, setIsEditing] = useState(false); const textAreaRef = useRef(null); @@ -48,22 +53,30 @@ const AnswerOption: React.FC = ({src, index, value, onChange} } }, [isEditing]); + const getImage = (typeValue: string): string => { + if (typeValue === 'multiply') { + return multiple_selected_response; + } else { + return single_selected_response; + } + }; + return (
- + {isEditing ? (