sheptikhinv/survey-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

styles for navigation and survey info

Browse source
This commit is contained in:
Tatiana Nikolaeva 2025-04-05 19:31:48 +05:00
parent 1bc96d830e
commit 2cbfb06b4a
30 changed files with 199 additions and 555 deletions
Download patch file Download diff file Expand all files Collapse all files

3
SurveyFrontend/index.html
View file

@ -3,6 +3,9 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="" /> <link rel="icon" type="image/svg+xml" href="" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey</title> <title>Survey</title>
</head> </head>

456
SurveyFrontend/package-lock.json generated
View file

@ -23,8 +23,7 @@
"globals": "^15.15.0", "globals": "^15.15.0",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",
"vite": "^6.2.0", "vite": "^6.2.0"
"vite-plugin-svgr": "^4.3.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -987,42 +986,6 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@rollup/pluginutils": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
"integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^2.0.2",
"picomatch": "^4.0.2"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils/node_modules/picomatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/@rollup/rollup-android-arm-eabi": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.35.0", "version": "4.35.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.35.0.tgz",
@ -1270,231 +1233,6 @@
"win32" "win32"
] ]
}, },
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
"integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
"integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
"integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
"integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-svg-dynamic-title": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
"integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
"integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
"integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-plugin-transform-svg-component": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
"integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/babel-preset": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
"integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
"dev": true,
"license": "MIT",
"dependencies": {
"@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
"@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
"@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
"@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
"@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
"@svgr/babel-plugin-transform-svg-component": "8.0.0"
},
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@svgr/core": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
"integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.21.3",
"@svgr/babel-preset": "8.1.0",
"camelcase": "^6.2.0",
"cosmiconfig": "^8.1.3",
"snake-case": "^3.0.4"
},
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/hast-util-to-babel-ast": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
"integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/types": "^7.21.3",
"entities": "^4.4.0"
},
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/plugin-jsx": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
"integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.21.3",
"@svgr/babel-preset": "8.1.0",
"@svgr/hast-util-to-babel-ast": "8.0.0",
"svg-parser": "^2.0.4"
},
"engines": {
"node": ">=14"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
},
"peerDependencies": {
"@svgr/core": "*"
}
},
"node_modules/@types/babel__core": { "node_modules/@types/babel__core": {
"version": "7.20.5", "version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1920,19 +1658,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/camelcase": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001704", "version": "1.0.30001704",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001704.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001704.tgz",
@ -1999,33 +1724,6 @@
"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
"dev": true "dev": true
}, },
"node_modules/cosmiconfig": {
"version": "8.3.6",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
"integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
"dev": true,
"license": "MIT",
"dependencies": {
"import-fresh": "^3.3.0",
"js-yaml": "^4.1.0",
"parse-json": "^5.2.0",
"path-type": "^4.0.0"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/d-fischer"
},
"peerDependencies": {
"typescript": ">=4.9.5"
},
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}
},
"node_modules/cross-spawn": { "node_modules/cross-spawn": {
"version": "7.0.6", "version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@ -2069,46 +1767,12 @@
"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
"dev": true "dev": true
}, },
"node_modules/dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
"dev": true,
"license": "MIT",
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.118", "version": "1.5.118",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.118.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.118.tgz",
"integrity": "sha512-yNDUus0iultYyVoEFLnQeei7LOQkL8wg8GQpkPCRrOlJXlcCwa6eGKZkxQ9ciHsqZyYbj8Jd94X1CTPzGm+uIA==", "integrity": "sha512-yNDUus0iultYyVoEFLnQeei7LOQkL8wg8GQpkPCRrOlJXlcCwa6eGKZkxQ9ciHsqZyYbj8Jd94X1CTPzGm+uIA==",
"dev": true "dev": true
}, },
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
"dev": true,
"license": "MIT",
"dependencies": {
"is-arrayish": "^0.2.1"
}
},
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.25.1", "version": "0.25.1",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@ -2329,13 +1993,6 @@
"node": ">=4.0" "node": ">=4.0"
} }
}, },
"node_modules/estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
"dev": true,
"license": "MIT"
},
"node_modules/esutils": { "node_modules/esutils": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@ -2555,13 +2212,6 @@
"node": ">=0.8.19" "node": ">=0.8.19"
} }
}, },
"node_modules/is-arrayish": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"dev": true,
"license": "MIT"
},
"node_modules/is-extglob": { "node_modules/is-extglob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -2634,13 +2284,6 @@
"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
"dev": true "dev": true
}, },
"node_modules/json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
"dev": true,
"license": "MIT"
},
"node_modules/json-schema-traverse": { "node_modules/json-schema-traverse": {
"version": "0.4.1", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@ -2687,13 +2330,6 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true,
"license": "MIT"
},
"node_modules/locate-path": { "node_modules/locate-path": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -2715,16 +2351,6 @@
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true "dev": true
}, },
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
"dev": true,
"license": "MIT",
"dependencies": {
"tslib": "^2.0.3"
}
},
"node_modules/lru-cache": { "node_modules/lru-cache": {
"version": "5.1.1", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -2798,17 +2424,6 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true "dev": true
}, },
"node_modules/no-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
"dev": true,
"license": "MIT",
"dependencies": {
"lower-case": "^2.0.2",
"tslib": "^2.0.3"
}
},
"node_modules/node-releases": { "node_modules/node-releases": {
"version": "2.0.19", "version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@ -2874,25 +2489,6 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/parse-json": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
"json-parse-even-better-errors": "^2.3.0",
"lines-and-columns": "^1.1.6"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/path-exists": { "node_modules/path-exists": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@ -2911,16 +2507,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/picocolors": { "node_modules/picocolors": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@ -3148,17 +2734,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/snake-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
"dev": true,
"license": "MIT",
"dependencies": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/source-map-js": { "node_modules/source-map-js": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@ -3192,13 +2767,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/svg-parser": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
"dev": true,
"license": "MIT"
},
"node_modules/to-regex-range": { "node_modules/to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@ -3223,13 +2791,6 @@
"typescript": ">=4.8.4" "typescript": ">=4.8.4"
} }
}, },
"node_modules/tslib": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"dev": true,
"license": "0BSD"
},
"node_modules/type-check": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -3400,21 +2961,6 @@
} }
} }
}, },
"node_modules/vite-plugin-svgr": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz",
"integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==",
"dev": true,
"license": "MIT",
"dependencies": {
"@rollup/pluginutils": "^5.1.3",
"@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0"
},
"peerDependencies": {
"vite": ">=2.6.0"
}
},
"node_modules/which": { "node_modules/which": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
SurveyFrontend/package.json
View file

@ -25,7 +25,6 @@
"globals": "^15.15.0", "globals": "^15.15.0",
"typescript": "~5.7.2", "typescript": "~5.7.2",
"typescript-eslint": "^8.24.1", "typescript-eslint": "^8.24.1",
"vite": "^6.2.0", "vite": "^6.2.0"
"vite-plugin-svgr": "^4.3.0"
} }
} }

2
SurveyFrontend/src/App.css
View file

@ -1,3 +1,3 @@
body{ #root {
width: 100%; width: 100%;
} }

9
SurveyFrontend/src/App.tsx
View file

@ -1,11 +1,12 @@
// import { useState } from 'react' import React from 'react';
import './App.css' import './App.css'
import Questions from "./pages/Questions.tsx"; import Questions from './pages/Questions.tsx'
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<Questions /> <Questions />
); )
} }
export default App
export default App

18
SurveyFrontend/src/components/Account/Account.module.css
View file

@ -1,10 +1,24 @@
/*Account.module.css*/ /*Account.module.css*/
.account { .account {
padding: 0; width: 15%;
margin: 31px 39px 25px 0; 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{ .accountImg{
vertical-align: middle;
width: 55px; width: 55px;
margin-right: 9px;
} }

8
SurveyFrontend/src/components/Account/Account.tsx
View file

@ -1,7 +1,5 @@
/// <reference types="vite-plugin-svgr/client" />
import React from 'react'; import React from 'react';
import styles from './Account.module.css' import styles from './Account.module.css'
import AccountSvg from '../../../public/account.svg?react'
interface AccountProps { interface AccountProps {
href: string; href: string;
@ -10,9 +8,9 @@ interface AccountProps {
const Account: React.FC<AccountProps> = ({href, user}) => { const Account: React.FC<AccountProps> = ({href, user}) => {
return ( return (
<div> <div className={styles.account}>
<a className={styles.account} href={href}> <a className={styles.accountText} href={href}>
<AccountSvg className={styles.accountImg}/> <img src='../../../public/account.svg' className={styles.accountImg} alt='account'/>
{user} {user}
</a> </a>
</div> </div>

5
SurveyFrontend/src/components/AddAnswerButton/AddAnswerButton.tsx
View file

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
import styles from './AddAnswerButton.module.css' import styles from './AddAnswerButton.module.css'
import AddAnswerSvg from '../../../public/add_answer.svg?react'
interface AddAnswerButtonProps { interface AddAnswerButtonProps {
onClick(): void; onClick(): void;
@ -10,8 +9,8 @@ interface AddAnswerButtonProps {
const AddAnswerButton: React.FC<AddAnswerButtonProps> = ({onClick}) => { const AddAnswerButton: React.FC<AddAnswerButtonProps> = ({onClick}) => {
return ( return (
<button className={styles.answerButton} onClick={onClick}> <button className={styles.answerButton} onClick={onClick}>
Добавить вариант ответа Добавить вариант ответа {' '}
<AddAnswerSvg className={styles.addAnswerImg} /> <img src='../../../public/add_answer.svg' className={styles.addAnswerImg} alt="add answer"/>
</button> </button>
); );
}; };

22
SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.module.css
View file

@ -1,18 +1,24 @@
/*AddQuestionButton.module.css*/ /*AddQuestionButton.module.css*/
.questionButton{ .questionButton{
background-color: #F6F6F6; display: block;
font-size: 24px; margin: 0 auto;
font-weight: 600;
border: none;
margin: 104px auto 80px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 80px;
align-items: center;
background-color: #F6F6F6;
border: none;
outline: none;
} }
.questionButtonImg{ .questionButtonImg{
vertical-align: middle;
margin: 0 auto;
margin-bottom: 16px;
width: 54px; width: 54px;
align-items: center;
}
.textButton{
font-size: 24px;
font-weight: 600;
text-align: center;
} }

5
SurveyFrontend/src/components/AddQuestionButton/AddQuestionButton.tsx
View file

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import styles from './AddQuestionButton.module.css' import styles from './AddQuestionButton.module.css'
import AddQuestionSvg from '../../../public/add_question.svg?react'
interface AddQuestionButtonProps { interface AddQuestionButtonProps {
onClick: () => void; onClick: () => void;
@ -9,8 +8,8 @@ interface AddQuestionButtonProps {
const AddQuestionButton: React.FC<AddQuestionButtonProps> = ({onClick}) => { const AddQuestionButton: React.FC<AddQuestionButtonProps> = ({onClick}) => {
return ( return (
<button className={styles.questionButton} onClick={onClick}> <button className={styles.questionButton} onClick={onClick}>
<AddQuestionSvg className={styles.questionButtonImg} /> <img src='../../../public/add_question.svg' className={styles.questionButtonImg} alt='add question' />
Добавить вопрос <span className={styles.textButton}>Добавить вопрос</span>
</button> </button>
); );
}; };

13
SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx
View file

@ -50,16 +50,15 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({src, index, value, onChange}
return ( return (
<div className={styles.answer}> <div className={styles.answer}>
{/*<div className={styles.answerIconContainer}> <Icon className={styles.answerIcon}/></div>*/}
<img className={styles.answerIcon} src={src} alt="" /> <img className={styles.answerIcon} src={src} alt="" />
{isEditing ? ( {isEditing ? (
<textarea className={styles.answerInput} <textarea className={styles.answerInput}
ref={textAreaRef} ref={textAreaRef}
value={currentValue} value={currentValue}
onChange={handleTextareaChange} onChange={handleTextareaChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onBlur={handleBlur} onBlur={handleBlur}
placeholder={`Ответ ${index}`} placeholder={`Ответ ${index}`}
/> />
) : ( ) : (
<button className={styles.textAnswer} onClick={handleSpanClick}> <button className={styles.textAnswer} onClick={handleSpanClick}>

4
SurveyFrontend/src/components/Header/Header.tsx
View file

@ -4,9 +4,7 @@ import Account from "../Account/Account.tsx";
import styles from './Header.module.css' import styles from './Header.module.css'
import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx"; import SurveyPagesList from "../SurveyPagesList/SurveyPagesList.tsx";
interface HeaderProps {} const Header: React.FC = () => {
const Header: React.FC<HeaderProps> = () => {
const [activePage, setActivePage] = useState('Создать опрос'); const [activePage, setActivePage] = useState('Создать опрос');
const handlePageClick = (name: string)=> { const handlePageClick = (name: string)=> {

2
SurveyFrontend/src/components/Logo/Logo.module.css
View file

@ -4,5 +4,5 @@
padding: 0; padding: 0;
height: 52px; height: 52px;
width: 52px; width: 52px;
margin: 31px auto 25px 40px; margin: 31px 77px 25px 40px;
} }

3
SurveyFrontend/src/components/Logo/Logo.tsx
View file

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import styles from './Logo.module.css' import styles from './Logo.module.css'
import LogoSvg from '../../../public/logo.svg?react'
interface LogoProps { interface LogoProps {
href: string; href: string;
@ -9,7 +8,7 @@ interface LogoProps {
const Logo: React.FC<LogoProps> = ({href}) => { const Logo: React.FC<LogoProps> = ({href}) => {
return ( return (
<a className={styles.logo} href={href}> <a className={styles.logo} href={href}>
<LogoSvg /> <img src='../../../public/logo.svg' alt="" />
</a> </a>
); );
}; };

2
SurveyFrontend/src/components/MainComponent/MainComponent.module.css
View file

@ -1,3 +1,5 @@
/*MainComponent.module.css*/
.mainPage{ .mainPage{
width: 100%; width: 100%;
display: flex; display: flex;

5
SurveyFrontend/src/components/Navigation/Navigation.module.css
View file

@ -1,5 +1,10 @@
/*Navigation.module.css*/ /*Navigation.module.css*/
.navContainer{
display: flex;
flex-direction: column;
}
.nav{ .nav{
margin: 34px 0 48px 40px; margin: 34px 0 48px 40px;
background-color: white; background-color: white;

2
SurveyFrontend/src/components/Navigation/Navigation.tsx
View file

@ -12,7 +12,7 @@ const Navigation: React.FC<NavigationProps> = ({onNavigationClick, activePage})
const items: string[] = ['Вопросы', 'Настройки', 'Результаты'] const items: string[] = ['Вопросы', 'Настройки', 'Результаты']
return ( return (
<div> <div className={styles.navContainer}>
<nav className={styles.nav}> <nav className={styles.nav}>
<ul className={styles.navList}> <ul className={styles.navList}>
{items.map(item => ( {items.map(item => (

12
SurveyFrontend/src/components/NavigationItem/NavigationItem.module.css
View file

@ -1,12 +1,18 @@
/*NavigationItem.module.css*/ /*NavigationItem.module.css*/
.navItem{ .navItem{
font-weight: 600; padding: 0;
font-size: 24px;
color: #AFAFAF;
margin-bottom: 42px; margin-bottom: 42px;
} }
.page{
background-color: white;
border: none;
font-size: 24px;
font-weight: 600;
color: #AFAFAF;
}
.active{ .active{
text-decoration: underline 2px #556FB7; text-decoration: underline 2px #556FB7;
color: #000000; color: #000000;

12
SurveyFrontend/src/components/PageSurvey/PageSurvey.module.css
View file

@ -1,12 +1,22 @@
/*PageSurvey.module.css*/
.pagesSurveyItem{ .pagesSurveyItem{
align-items: center;
}
.pageSurvey{
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #2A6DAE; color: #2A6DAE;
padding: 0;
border: none;
background-color: #ffffff;
padding-bottom: 5px;
white-space: nowrap;
} }
.active{ .active{
color: #000000; color: #000000;
text-decoration: underline; text-decoration: underline;
text-decoration-color: #3881C8; text-decoration-color: #3881C8;
} }

2
SurveyFrontend/src/components/QuestionItem/QuestionItem.module.css
View file

@ -11,4 +11,4 @@
.questionCard:last-child{ .questionCard:last-child{
margin-bottom: 0; margin-bottom: 0;
} }

7
SurveyFrontend/src/components/QuestionItem/QuestionItem.tsx
View file

@ -4,9 +4,6 @@ import AddAnswerButton from "../AddAnswerButton/AddAnswerButton.tsx";
import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx"; import TypeDropdown from "../TypeDropdown/TypeDropdown.tsx";
import styles from './QuestionItem.module.css' import styles from './QuestionItem.module.css'
import SingleChoiceIcon from '../../../public/radio_button_checked.svg?react';
import MultiplyChoiceIcon from '../../../public/check_box.svg?react';
interface QuestionItemProps { interface QuestionItemProps {
indexQuestion: number; indexQuestion: number;
@ -44,7 +41,9 @@ const QuestionItem: React.FC<QuestionItemProps> = ({indexQuestion, initialTextQu
{answerOption.map((answerText, index) => ( {answerOption.map((answerText, index) => (
<AnswerOption <AnswerOption
key={index} key={index}
src={questionType === "single" ? <SingleChoiceIcon /> : <MultiplyChoiceIcon />} src={questionType === "single" ?
'../../../public/radio_button_checked.svg' :
'../../../public/check_box.svg' }
index={index + 1} // Индекс ответа index={index + 1} // Индекс ответа
value={answerText} value={answerText}
onChange={(value) => handleAnswerChange(index, value)} onChange={(value) => handleAnswerChange(index, value)}

1
SurveyFrontend/src/components/SaveButton/SaveButton.module.css
View file

@ -11,4 +11,5 @@
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1); box-shadow: 0 0 7.4px 0 rgba(154, 202, 247, 1);
box-sizing: border-box;
} }

46
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.module.css
View file

@ -7,49 +7,64 @@
margin-top: 34px; margin-top: 34px;
margin-bottom: 49px; margin-bottom: 49px;
border-radius: 14px; border-radius: 14px;
height: 191px; min-height: 191px;
} }
.info{ .info{
min-width: 373px;
display: block; display: block;
padding: 35px 0; padding: 35px; /*подумать нужно ли справа слева отступы*/
} }
.titleSurvey{ .titleSurvey{
resize: none; display: block;
border: none;
margin: 0 auto;
background-color: white;
text-align: center; text-align: center;
margin: 0; font-size: 20px;
padding: 0 20px;
font-size: 40px;
font-weight: 600; font-weight: 600;
margin-bottom: 23px; margin-bottom: 23px;
word-break: break-word;
padding: 0;
} }
.textareaTitle{ .textareaTitle{
width: 80%;
padding-top: 35px;
resize: none; resize: none;
text-align: center; text-align: center;
font-size: 40px; font-size: 40px;
font-weight: 600; font-weight: 600;
margin: 0;
padding: 0;
border: none; border: none;
margin-bottom: 23px; outline: none;
line-height: 30px;
word-break: break-word;
} }
.description{ .description{
resize: none; border: none;
text-align: center;
margin: 0;
padding: 0 20px;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
text-align: center;
background-color: white;
display: block;
margin: 0 auto;
word-break: break-word;
padding: 0;
} }
.textareaDescrip{ .textareaDescrip{
width: 80%;
outline: none;
border: none;
resize: none; resize: none;
text-align: center; text-align: center;
margin: 0; margin: 0 auto;
font-size: 22px; font-size: 22px;
font-weight: 500;
word-break: break-word;
padding: 0;
} }
.descripButton{ .descripButton{
@ -60,11 +75,12 @@
} }
.descButtonImg{ .descButtonImg{
vertical-align: middle;
width: 28px; width: 28px;
} }
.textButton{ .textButton{
vertical-align: center; vertical-align: middle;
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
color: #7D7983; color: #7D7983;

61
SurveyFrontend/src/components/SurveyInfo/SurveyInfo.tsx
View file

@ -1,15 +1,13 @@
import React, {useState} from "react"; import React, {useState, useRef, useEffect} from "react";
import styles from './SurveyInfo.module.css' import styles from './SurveyInfo.module.css'
import DescripButtonSvg from '../../../public/add_circle.svg?react'
interface SurveyInfoProps {} const SurveyInfo: React.FC = () => {
const SurveyInfo: React.FC<SurveyInfoProps> = () => {
const [descriptionSurvey, setDescriptionSurvey] = useState(''); const [descriptionSurvey, setDescriptionSurvey] = useState('');
const [titleSurvey, setTitleSurvey] = useState('Название опроса'); const [titleSurvey, setTitleSurvey] = useState('Название опроса');
const [showDescriptionField, setShowDescriptionField] = useState(false); const [showDescriptionField, setShowDescriptionField] = useState(false);
const [showNewTitleField, setShowNewTitleField] = useState(false); const [showNewTitleField, setShowNewTitleField] = useState(false);
const titleTextareaRef = useRef<HTMLTextAreaElement>(null);
const descriptionTextareaRef = useRef<HTMLTextAreaElement>(null);
const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => { const handleDescriptionChange = (descripEvent: React.ChangeEvent<HTMLTextAreaElement>) => {
setDescriptionSurvey(descripEvent.target.value); setDescriptionSurvey(descripEvent.target.value);
@ -23,10 +21,22 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
setShowNewTitleField(true); setShowNewTitleField(true);
} }
useEffect(() => {
if (showNewTitleField && titleTextareaRef.current) {
titleTextareaRef.current.focus();
}
}, [showNewTitleField]);
const handleAddDescriptionClick = () => { const handleAddDescriptionClick = () => {
setShowDescriptionField(true); setShowDescriptionField(true);
} }
useEffect(() => {
if (showDescriptionField && descriptionTextareaRef.current){
descriptionTextareaRef.current.focus();
}
}, [showDescriptionField]);
const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => { const handleTitleKeyDown = (titleClickEnter: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (titleClickEnter.key === 'Enter'){ if (titleClickEnter.key === 'Enter'){
titleClickEnter.preventDefault(); titleClickEnter.preventDefault();
@ -45,22 +55,34 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
setShowDescriptionField(true); setShowDescriptionField(true);
} }
const handleTitleBlur = () => {
setShowNewTitleField(false);
};
const handleDescriptionBlur = () => {
setShowDescriptionField(false);
};
const renderDescription = ()=> { const renderDescription = ()=> {
if (descriptionSurvey && !showDescriptionField) { if (descriptionSurvey && !showDescriptionField) {
return ( return (
<button className={styles.description} onClick={handleParagraphClick}> <button className={styles.description} onClick={handleParagraphClick}>
<p>{descriptionSurvey}</p> {descriptionSurvey}
</button> </button>
); );
} else if (showDescriptionField) { } else if (showDescriptionField) {
return ( return (
<p className={styles.description}> <p className={styles.description}>
<textarea <textarea
className={styles.textareaDescrip} ref={descriptionTextareaRef}
value={descriptionSurvey} className={styles.textareaDescrip}
onChange={handleDescriptionChange} value={descriptionSurvey}
onKeyDown={handleDescriptionKeyDown} placeholder={'Добавить описание'}
/> onChange={handleDescriptionChange}
onKeyDown={handleDescriptionKeyDown}
onBlur={handleDescriptionBlur}
/>
</p> </p>
); );
} else { } else {
@ -70,7 +92,7 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
onClick={handleAddDescriptionClick} onClick={handleAddDescriptionClick}
> >
<span className={styles.textButton}>Добавить описание</span> <span className={styles.textButton}>Добавить описание</span>
<DescripButtonSvg className={styles.descButtonImg}/> <img src='../../../public/add_circle.svg' className={styles.descButtonImg} alt='add circle'/>
</button> </button>
); );
} }
@ -83,14 +105,17 @@ const SurveyInfo: React.FC<SurveyInfoProps> = () => {
showNewTitleField ? ( showNewTitleField ? (
<h1 className={styles.titleSurvey}> <h1 className={styles.titleSurvey}>
<textarea className={styles.textareaTitle} <textarea className={styles.textareaTitle}
value={titleSurvey} ref={titleTextareaRef}
onChange={handleNewTitleChange} value={titleSurvey === 'Название опроса' ? '' : titleSurvey}
onKeyDown={handleTitleKeyDown} placeholder={'Название опроса'}
onChange={handleNewTitleChange}
onKeyDown={handleTitleKeyDown}
onBlur={handleTitleBlur}
/> />
</h1> </h1>
) : ( ) : (
<button className={styles.titleSurvey} onClick={handleAddNewTitleClick}> <button className={styles.titleSurvey} onClick={handleAddNewTitleClick}>
<h1>{titleSurvey}</h1> <h1>{titleSurvey || 'Название опроса'}</h1>
</button> </button>
) )
} }

4
SurveyFrontend/src/components/SurveyPagesList/SurveyPagesList.module.css
View file

@ -1,7 +1,9 @@
/*SurveyPagesList.module.css*/
.listSurveyPages{ .listSurveyPages{
display: flex; display: flex;
gap: 61px; gap: 61px;
list-style: none; list-style: none;
align-items: center; align-items: center;
margin-right: 900px; margin-right: 40%;
} }

10
SurveyFrontend/src/components/TypeDropdown/TypeDropdown.tsx
View file

@ -58,11 +58,11 @@ const TypeDropdown: React.FC = () => {
<li> <li>
<button onClick={() => handleSelect("single")} <button onClick={() => handleSelect("single")}
className={styles.dropdownItem}> className={styles.dropdownItem}>
<img <img
className={styles.dropdownItemIcon} className={styles.dropdownItemIcon}
src={getImage("single")} src={getImage("single")}
alt=""/>{' '} alt=""/>{' '}
Одиночный выбор Одиночный выбор
</button> </button>
</li> </li>
<li> <li>

16
SurveyFrontend/src/index.css
View file

@ -0,0 +1,16 @@
:root {
font-family: Monserrat, sans-serif;
line-height: 100%;
font-weight: 600;
font-size: 24px;
color: #000000;
background-color: white;
}
body {
margin: 0;
display: flex;
place-items: center;
width: 100%;
}

6
SurveyFrontend/src/main.tsx
View file

@ -4,7 +4,7 @@ import './index.css'
import App from './App.tsx' import App from './App.tsx'
createRoot(document.getElementById('root')!).render( createRoot(document.getElementById('root')!).render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode>, </StrictMode>,
) )

13
SurveyFrontend/src/pages/Questions.tsx
View file

@ -1,13 +1,14 @@
import React from 'react';
import Header from '../components/Header/Header.tsx' import Header from '../components/Header/Header.tsx'
import MainComponents from '../components/MainComponent/MainComponent.tsx' import MainComponent from "../components/MainComponent/MainComponent.tsx";
const Questions = () => { const QuestionsPages: React.FC = () => {
return ( return (
<> <>
<Header /> <Header />
<MainComponents /> <MainComponent />
</> </>
); )
}; }
export default Questions; export default QuestionsPages;

2
SurveyFrontend/vite.config.ts
View file

@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react' import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()], plugins: [react()],
}) })