diff --git a/frontend/react/graduation3/graduation3/package-lock.json b/frontend/react/graduation3/graduation3/package-lock.json index eacad40d5..beeab5c56 100644 --- a/frontend/react/graduation3/graduation3/package-lock.json +++ b/frontend/react/graduation3/graduation3/package-lock.json @@ -9,14 +9,18 @@ "version": "0.1.0", "dependencies": { "@ciar4n/izmir": "^1.0.1", + "@fortawesome/fontawesome-free": "^6.4.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "animate.css": "^4.1.1", "bootstrap": "^5.2.3", + "helmet": "^7.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.9.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", + "styled-components": "^5.3.11", "web-vitals": "^2.1.4" } }, @@ -316,11 +320,11 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", - "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "version": "7.21.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz", + "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==", "dependencies": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.21.4" }, "engines": { "node": ">=6.9.0" @@ -430,9 +434,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==", + "version": "7.21.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz", + "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==", "engines": { "node": ">=6.9.0" } @@ -1845,11 +1849,11 @@ } }, "node_modules/@babel/types": { - "version": "7.21.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz", - "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==", + "version": "7.22.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz", + "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==", "dependencies": { - "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-string-parser": "^7.21.5", "@babel/helper-validator-identifier": "^7.19.1", "to-fast-properties": "^2.0.0" }, @@ -2138,6 +2142,29 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz", @@ -2209,6 +2236,15 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz", + "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -4831,6 +4867,11 @@ "ajv": "^6.9.1" } }, + "node_modules/animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "node_modules/ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -5305,6 +5346,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz", + "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.21.4", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5636,6 +5697,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -6067,6 +6136,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -6248,6 +6325,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -8743,6 +8830,27 @@ "he": "bin/he" } }, + "node_modules/helmet": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/helmet/-/helmet-7.0.0.tgz", + "integrity": "sha512-MsIgYmdBh460ZZ8cJC81q4XJknjG567wzEmv46WOBblDb6TUd3z8/GhgmsM9pn8g2B80tAJ4m5/d3Bi1KrSUBQ==", + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -15194,6 +15302,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15580,6 +15693,35 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -17494,11 +17636,11 @@ } }, "@babel/helper-module-imports": { - "version": "7.18.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz", - "integrity": "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==", + "version": "7.21.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz", + "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==", "requires": { - "@babel/types": "^7.18.6" + "@babel/types": "^7.21.4" } }, "@babel/helper-module-transforms": { @@ -17578,9 +17720,9 @@ } }, "@babel/helper-string-parser": { - "version": "7.19.4", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz", - "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==" + "version": "7.21.5", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz", + "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==" }, "@babel/helper-validator-identifier": { "version": "7.19.1", @@ -18502,11 +18644,11 @@ } }, "@babel/types": { - "version": "7.21.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz", - "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==", + "version": "7.22.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz", + "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==", "requires": { - "@babel/helper-string-parser": "^7.19.4", + "@babel/helper-string-parser": "^7.21.5", "@babel/helper-validator-identifier": "^7.19.1", "to-fast-properties": "^2.0.0" } @@ -18647,6 +18789,29 @@ "integrity": "sha512-jwx+WCqszn53YHOfvFMJJRd/B2GqkCBt+1MJSG6o5/s8+ytHMvDZXsJgUEWLk12UnLd7HYKac4BYU5i/Ron1Cw==", "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "requires": { + "@emotion/memoize": "^0.8.1" + } + }, + "@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "@eslint/eslintrc": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz", @@ -18696,6 +18861,11 @@ "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz", "integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==" }, + "@fortawesome/fontawesome-free": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz", + "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==" + }, "@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -20651,6 +20821,11 @@ "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", "requires": {} }, + "animate.css": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", + "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" + }, "ansi-escapes": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", @@ -20987,6 +21162,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.3" } }, + "babel-plugin-styled-components": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz", + "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-module-imports": "^7.21.4", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -21237,6 +21429,11 @@ "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -21557,6 +21754,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -21664,6 +21866,16 @@ "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -23483,6 +23695,26 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "helmet": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/helmet/-/helmet-7.0.0.tgz", + "integrity": "sha512-MsIgYmdBh460ZZ8cJC81q4XJknjG567wzEmv46WOBblDb6TUd3z8/GhgmsM9pn8g2B80tAJ4m5/d3Bi1KrSUBQ==" + }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -27954,6 +28186,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -28247,6 +28484,23 @@ "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==", "requires": {} }, + "styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", diff --git a/frontend/react/graduation3/graduation3/package.json b/frontend/react/graduation3/graduation3/package.json index 03e3de120..c50271491 100644 --- a/frontend/react/graduation3/graduation3/package.json +++ b/frontend/react/graduation3/graduation3/package.json @@ -4,14 +4,18 @@ "private": true, "dependencies": { "@ciar4n/izmir": "^1.0.1", + "@fortawesome/fontawesome-free": "^6.4.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "animate.css": "^4.1.1", "bootstrap": "^5.2.3", + "helmet": "^7.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.9.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", + "styled-components": "^5.3.11", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/frontend/react/graduation3/graduation3/src/App.css b/frontend/react/graduation3/graduation3/src/App.css index 62bd5ece7..a8f54df31 100644 --- a/frontend/react/graduation3/graduation3/src/App.css +++ b/frontend/react/graduation3/graduation3/src/App.css @@ -47,14 +47,79 @@ box-sizing: border-box; height: 100px; } +#button { + outline: none; + height: 40px; + text-align: center; + width: 130px; + border-radius: 40px; + background: #fff; + border: 2px solid green; + color: green; + letter-spacing: 1px; + text-shadow: 0; + font-size: 12px; + font-weight: bold; + cursor: pointer; + transition: all 0.25s ease; +} +#button:hover { + color: white; + background: green; +} +button:active { + letter-spacing: 2px; +} +#button:after { + content: "SUBMIT"; +} + +.onclic { + width: 40px; + border-color: gray; + border-width: 3px; + font-size: 0; + border-left-color: green; + animation: rotating 2s 0.25s linear infinite; +} +.onclic:after { + content: ""; +} +.onclic:hover { + color: green; + background: white; +} + +.validate { + font-size: 13px; + color: white; + background: green; +} +.validate:after { + font-family: "FontAwesome"; + content: "\f00c"; +} + +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} /*End navbar*/ /*Home containg=ing nav*/ .Home{ - background: rgb(2,0,36); + /* background: rgb(2,0,36); background: linear-gradient(317deg, rgba(2,0,36,0.7170517865349264) 0%, rgba(74,74,185,0.9047268565629377) 41%, rgba(192,223,230,0) 46%); -margin-top: -85px; +margin-top: -85px; */ +} +.content{ + background-image:url('../../graduation3//src/images/svg.jpg'); +background-position: center center; +background-attachment: fixed; } - /* .Home .left-content h1::after{ content: ""; animation: move 2s infinite; @@ -79,6 +144,202 @@ margin-top: -85px; content: "Mem|"; } } */ + + + +/*Home part2*/ +.Home-part2{ + background-color: #EEE; + padding: 30px; +} +/*end Home part2*/ + +/*Home last part*/ +.last-part{ + background-color: #EEE; + padding: 30px; +} + +/*end Home last part*/ +/*Team section in Home page*/ + +/*test js*/ +.formbold-main-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding: 48px; +} + +.formbold-form-wrapper { + margin: 0 auto; + max-width: 550px; + width: 100%; + background: white; +} + +.formbold-steps { + padding-bottom: 18px; + margin-bottom: 35px; + border-bottom: 1px solid #DDE3EC; +} +.formbold-steps ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + gap: 40px; +} +.formbold-steps li { + display: flex; + align-items: center; + gap: 14px; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #536387; +} +.formbold-steps li span { + display: flex; + align-items: center; + justify-content: center; + background: #DDE3EC; + border-radius: 50%; + width: 36px; + height: 36px; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #536387; +} +.formbold-steps li.active { + color: #07074D;; +} +.formbold-steps li.active span { + background: #6A64F1; + color: #FFFFFF; +} + +.formbold-input-flex { + display: flex; + gap: 20px; + margin-bottom: 22px; +} +.formbold-input-flex > div { + width: 50%; +} +.formbold-form-input { + width: 100%; + padding: 13px 22px; + border-radius: 5px; + border: 1px solid #DDE3EC; + background: #FFFFFF; + font-weight: 500; + font-size: 16px; + color: #536387; + outline: none; + resize: none; +} +.formbold-form-input:focus { + border-color: #6a64f1; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} +.formbold-form-label { + color: #07074D; + font-weight: 500; + font-size: 14px; + line-height: 24px; + display: block; + margin-bottom: 10px; +} + +.formbold-form-confirm { + border-bottom: 1px solid #DDE3EC; + padding-bottom: 35px; +} +.formbold-form-confirm p { + font-size: 16px; + line-height: 24px; + color: #536387; + margin-bottom: 22px; + width: 75%; +} +.formbold-form-confirm > div { + display: flex; + gap: 15px; +} + +.formbold-confirm-btn { + display: flex; + align-items: center; + gap: 10px; + background: #FFFFFF; + border: 0.5px solid #DDE3EC; + border-radius: 5px; + font-size: 16px; + line-height: 24px; + color: #536387; + cursor: pointer; + padding: 10px 20px; + transition: all .3s ease-in-out; +} +.formbold-confirm-btn { + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12); +} +.formbold-confirm-btn.active { + background: #6A64F1; + color: #FFFFFF; +} + +.formbold-form-step-1, +.formbold-form-step-2, +.formbold-form-step-3 { + display: none; +} +.formbold-form-step-1.active, +.formbold-form-step-2.active, +.formbold-form-step-3.active { + display: block; +} + +.formbold-form-btn-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 25px; + margin-top: 25px; +} +.formbold-back-btn { + cursor: pointer; + background: #FFFFFF; + border: none; + color: #07074D; + font-weight: 500; + font-size: 16px; + line-height: 24px; + display: none; +} +.formbold-back-btn.active { + display: block; +} +.formbold-btn { + display: flex; + align-items: center; + gap: 5px; + font-size: 16px; + border-radius: 5px; + padding: 10px 25px; + border: none; + font-weight: 500; + background-color: #6A64F1; + color: white; + cursor: pointer; +} +.formbold-btn:hover { + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} +/*end test*/ + .swing div { border-radius: 50%; float: left; @@ -256,6 +517,24 @@ margin-left: 50px; .left-part3 img{ width: 415px; } +.newlog{ + --g:#0000 ,#000 .5deg 90deg,#0000 91deg; + --m: + conic-gradient(from 45deg ,var(--g)) 20px 0 no-repeat, + conic-gradient(from 135deg,var(--g)) 0 20px no-repeat, + conic-gradient(from 225deg,var(--g)) -20px 0 no-repeat, + conic-gradient(from 315deg,var(--g)) 0 -20px no-repeat; + -webkit-mask: var(--m); + mask: var(--m); + transition: .3s linear; + filter: grayscale(.5); + cursor: pointer; +} +.newlog:hover{ + -webkit-mask-position: 0 0; + mask-position: 0 0; +filter: grayscale(0); +} /* .left-part4 img{ width: 400px; } */ @@ -275,8 +554,19 @@ margin-left: 50px; flex-direction: column; margin-top: 400px; bottom: 0; + animation: color-change 5s ease-in-out infinite alternate; +} +@keyframes color-change { + 0% { + background-color: #3586ff; + } + 50% { + background-color: #ff5733; + } + 100% { + background-color: #3586ff; + } } - .social-icon, .menu { position: relative; @@ -1346,4 +1636,877 @@ bottom: 20px; margin-left: 0px; } } -/*end team page*/ \ No newline at end of file +/*end team page*/ + +/*start Contact us page */ +h2{ + + position:relative; + color: #fff; + letter-spacing:6px; + font-weight:900; + font-size:450%; + text-align:center; + margin-top:15rem; + filter: drop-shadow(2px 5px 10px #gf01ff); + animation-name:effect-glitch; + animation-duration:3s; + animation-iteration-count:infinite; + animation-timing-function:cubic-bezier(4, 0.7, 2, 0.1); + clip-path: content-box; +} +@keyframes effect-glitch{ + 100%{ + filter: drop-shadow(12px 0px 16px #fffff); + } + 50%{ + filter: drop-shadow(30px 13px 9px #a0ffff); + } + 25%{ + filter: drop-shadow(-20px 12px 4px #ff6eff); + } + 0%{ + filter: drop-shadow(-10px 6px 6px #fffff); + } +} + +/*end Contact us page*/ + +/*start solution page*/ +.animate-charcter +{ + text-transform: uppercase; + background-image: linear-gradient( + -225deg, + #231557 0%, + #44107a 29%, + #ff1361 67%, + #fff800 100% + ); + background-size: auto auto; + background-clip: border-box; + background-size: 200% auto; + color: #fff; + background-clip: text; + text-fill-color: transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: textclip 2s linear infinite; + display: inline-block; + font-size: 100px; +} + +@keyframes textclip { + to { + background-position: 200% center; + } +} + +ul { + list-style: none; + padding: 0; + margin: 0; + text-align: center; +} +.anim-ul{ + position: absolute; + left: 50%; + transform: translateX(-50%); + opacity: 0; + animation: slideIn 0.5s ease-in-out forwards; + +} + @keyframes slideIn { + from { + opacity: 0; + transform: translateX(-100%); + } + to { + opacity: 1; + transform: translateX(-50%); + } + } + +li { + display: inline-block; + margin: 0 10px; +} +li:hover { + font-weight: bold; + font-size: 22px; + transition: all 0.2s ease-in-out; +} +li a { + text-decoration: none; +} +.patient-p{ + font-size: 1.2rem; + color: #333; + line-height: 1.5; + margin-bottom: 1.5rem; + letter-spacing: 0.5px; +} +.animated-image { + animation-name: slide-in; + animation-duration: 1s; + animation-timing-function: ease-out; +} + +@keyframes slide-in { + from { + transform: translateX(-100%); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} +/*end solution page*/ + +/*start doctor section*/ +header { + background-color: #6c6ade; + color: #fff; + padding: 1rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +header h1 { + font-size: 2rem; + margin: 0; +} + +nav { + display: none; + margin: auto; +} + +nav ul { + list-style: none; + display: flex; +} + +nav ul li { + margin: 0 1rem; +} + +nav ul li a { + color: #fff; + text-decoration: none; +} + +main { + max-width: 800px; + margin: 2rem auto; + padding: 1rem; + background-color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} + +section { + margin-bottom: 2rem; +} + +section h2 { + font-size: 1.5rem; + margin-bottom: 1rem; +} + +section p { + margin-bottom: 0.5rem; +} + +section ul { + margin-left: 1.5rem; + margin-bottom: 0.5rem; +} + +section ul li { + margin-bottom: 0.3rem; +} + +@media only screen and (min-width: 768px) { + header { + padding: 1rem 2rem; + } + nav { + display: block; + } + .menu-icon { + display: none; + } + nav ul { + display: flex; + align-items: center; + } +} + +@media only screen and (min-width: 1024px) { + main { + padding: 2rem; + } + section { + padding: 1rem; + } + section ul { + margin-left: 2rem; + margin-bottom: 1rem; + } +} +main{ + background-color: #9c9ce140; +} +/*End Doctor Section*/ + +/*Start volunter section*/ + +/* .carousel-item { + height: 100%; +} +.carousel-item img { + object-fit: cover; + height: 100%; + width: 100%; +} +.carousel-text { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 1rem; + background-color: rgba(0, 0, 0, 0.5); + color: #fff; +} +.carousel-text h2 { + margin-bottom: 1rem; +} */ +.carousel-container { + margin: 0 auto; /* center the container horizontally */ + max-width: 800px; /* set the maximum width of the container */ +} +/* .carousel-control-prev-icon svg, +.carousel-control-next-icon svg { + fill: rgb(197, 9, 9); +} */ + +/*start donation section*/ +#alzheimers-donation { + background-color: #f9f9f9; + padding: 20px; + border: 1px solid #ddd; +} + +#alzheimers-donation h2 { + margin-top: 0; + animation: pulse 1s infinite alternate; +} + +#alzheimers-donation h3 { + margin-top: 20px; +} + +#alzheimers-donation h4 { + margin-top: 10px; +} + +#alzheimers-donation ol { + margin-left: 0; + padding-left: 20px; +} + +#alzheimers-donation li { + margin-bottom: 20px; + opacity: 0; +} + +#alzheimers-donation li.fade-in { + animation: fade-in 1s ease forwards; +} + +#alzheimers-donation a { + color: #0077cc; + text-decoration: none; + border-bottom: 1px dotted #0077cc; +} + +#alzheimers-donation a:hover { + border-bottom-style: solid; +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +#alzheimers-donation { + position: relative; + background-color: #f9f9f9; + padding: 20px; + border: 1px solid #ddd; +} + +/* #alzheimers-donation img { + position: absolute; + top: 200px; + left: 55%; + transform: translateX(-50%); + animation: pulse 5s infinite alternate; +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.1); + } + 100% { + transform: scale(1); + } +} */ +/*end donation section*/ + +/* start contributers section */ +.contributors { + background-color: #f9f9f9; + padding: 80px 0; +} + +.container { + max-width: 1200px; + margin: 0 auto; +} + +.title { + font-size: 36px; + text-align: center; + margin-bottom: 60px; +} + +.row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.col { + flex: 0 0 calc(33.33% - 20px); + margin-bottom: 40px; +} + +@media only screen and (max-width: 768px) { + .col { + flex: 0 0 100%; + } +} + +.category-title { + font-size: 24px; + margin-bottom: 20px; +} + +.card { + background-color: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + padding: 20px; + border-radius: 4px; + margin-bottom: 20px; + height: 100%; + transition: all 0.3s ease-in-out; +} + +.card:hover { + box-shadow: 0 8px 16px rgba(229, 109, 29, 0.604); + transition: box-shadow 0.3s ease; + transform: translateY(-5px); +} + +.card-title { + font-size: 20px; + margin-bottom: 10px; +} + +.card-text { + font-size: 16px; + margin-bottom: 5px; +} + +/*contributer Form*/ + +.formbold-main-wrapper { + display: flex; + align-items: center; + justify-content: center; + padding: 48px; +} + +.formbold-form-wrapper { + margin: 0 auto; + max-width: 550px; + width: 100%; + background: white; +} + +.formbold-steps { + padding-bottom: 18px; + margin-bottom: 35px; + border-bottom: 1px solid #DDE3EC; +} +.formbold-steps ul { + padding: 0; + margin: 0; + list-style: none; + display: flex; + gap: 40px; +} +.formbold-steps li { + display: flex; + align-items: center; + gap: 14px; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #536387; +} +.formbold-steps li span { + display: flex; + align-items: center; + justify-content: center; + background: #DDE3EC; + border-radius: 50%; + width: 36px; + height: 36px; + font-weight: 500; + font-size: 16px; + line-height: 24px; + color: #536387; +} +.formbold-steps li.active { + color: #07074D;; +} +.formbold-steps li.active span { + background: #6A64F1; + color: #FFFFFF; +} + +.formbold-input-flex { + display: flex; + gap: 20px; + margin-bottom: 22px; +} +.formbold-input-flex > div { + width: 50%; +} +.formbold-form-input { + width: 100%; + padding: 13px 22px; + border-radius: 5px; + border: 1px solid #DDE3EC; + background: #FFFFFF; + font-weight: 500; + font-size: 16px; + color: #536387; + outline: none; + resize: none; +} +.formbold-form-input:focus { + border-color: #6a64f1; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} +.formbold-form-label { + color: #07074D; + font-weight: 500; + font-size: 14px; + line-height: 24px; + display: block; + margin-bottom: 10px; +} + +.formbold-form-confirm { + border-bottom: 1px solid #DDE3EC; + padding-bottom: 35px; +} +.formbold-form-confirm p { + font-size: 16px; + line-height: 24px; + color: #536387; + margin-bottom: 22px; + width: 75%; +} +.formbold-form-confirm > div { + display: flex; + gap: 15px; +} + +.formbold-confirm-btn { + display: flex; + align-items: center; + gap: 10px; + background: #FFFFFF; + border: 0.5px solid #DDE3EC; + border-radius: 5px; + font-size: 16px; + line-height: 24px; + color: #536387; + cursor: pointer; + padding: 10px 20px; + transition: all .3s ease-in-out; +} +.formbold-confirm-btn { + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12); +} +.formbold-confirm-btn.active { + background: #6A64F1; + color: #FFFFFF; +} + +.formbold-form-step-1, +.formbold-form-step-2, +.formbold-form-step-3 { + display: none; +} +.formbold-form-step-1.active, +.formbold-form-step-2.active, +.formbold-form-step-3.active { + display: block; +} + +.formbold-form-btn-wrapper { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 25px; + margin-top: 25px; +} +.formbold-back-btn { + cursor: pointer; + background: #FFFFFF; + border: none; + color: #07074D; + font-weight: 500; + font-size: 16px; + line-height: 24px; + display: none; +} +.formbold-back-btn.active { + display: block; +} +.formbold-btn { + display: flex; + align-items: center; + gap: 5px; + font-size: 16px; + border-radius: 5px; + padding: 10px 25px; + border: none; + font-weight: 500; + background-color: #6A64F1; + color: white; + cursor: pointer; +} +.formbold-btn:hover { + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05); +} +/*end contributer Form*/ +/* end contributers section */ + +/* start chat Memory page*/ +.Chatmemory{ + background: #e8cbc0; + background: -webkit-linear-gradient(to right, #e8cbc0, #636fa4); + background: linear-gradient(to right, #e8cbc0, #465bb9); + min-height: 100vh; + margin-top: 100px; +} +.social-link-chat{ + width: 30px; + height: 30px; + border: 1px solid #ddd; + display: flex; + align-items: center; + justify-content: center; + color: #666; + border-radius: 50%; + transition: all 0.3s; + font-size: 0.9rem; +} +.social-link-chat:hover ,.social-link-chat:focus{ + background-color: #0077cc; + text-decoration: none; + color: #555; +} +.text-anim{ + width: 80%; + margin: auto; + text-align: center; + perspective: 800px; + min-width: 320px; + margin-top: 4em; +} +.text-anim span{ + display: inline-block; + color: #c33f31; + font-size: 4em; + transform-origin: 50% 70%; +} +.text-anim span:nth-child(2n) { + color: #0077cc; +} + +.text-anim span:nth-child(1) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both; +} + +.text-anim span:nth-child(2) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55).4s both; +} + +.text-anim span:nth-child(3) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55).6s both; +} + +.text-anim span:nth-child(4) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .8s both; +} + +.text-anim span:nth-child(5) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1s both; + padding: 0 20px; + display: block; +} + +.text-anim span:nth-child(6) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.2s both; +} + +.text-anim span:nth-child(7) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.4s both; +} + +.text-anim span:nth-child(8) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.6s both; +} + +.text-anim span:nth-child(9) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.6s both; +} + +.text-anim span:nth-child(10) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 1.8s both; +} + +.text-anim span:nth-child(11) { + animation: flipUp 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) 2s both; +} + +@keyframes flipUp { + from { + transform: rotateX(90deg); + } + to { + transform: rotateX(0deg); + } +} + + +/* RESPONSIVE STUFF */ + +@media screen and (min-width: 400px) { + .text-anim span { + font-size: 4em; + } + .text-anim span:nth-child(5) { + margin: 0; + } +} + +@media screen and (min-width: 600px) { + .text-anim span { + font-size: 5em; + } + .text-anim span:nth-child(5) { + margin: 0; + } +} + +@media screen and (min-width: 916px) { + .text-anim span { + font-size: 6.2em; + } + .text-anim span:nth-child(5) { + display: inline-block; + margin: 0; + + } +} +/* end chat Memory pGE*/ + +/*start memo-ai page */ +.overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + z-index: -10; + background-color: var(--contrast-color); +} + +.container-memo { + display: flex; + height: 100vh; + justify-content: space-around; + align-items: center; + color: #fff; + animation: expand .8s ease forwards; + background-color: var(--secondary-color); + position: relative; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + transition: all .8s ease; +} + +.container-memo .container_content { + width: 50%; +} + +.container-memo .container_content_inner { + width: 80%; + margin-left: 80px; +} + +.container-memo .container_outer_img { + margin: 50px; + width: 50%; + overflow: hidden; +} + +.container-memo .container_img { + width: 100%; + animation: slideIn 1.5s ease-in-out forwards; +} + +.par { + height: auto; + overflow: hidden; +} + +.container-memo p{ + line-height: 28px; + transform: translateY(300px); + animation: slideUp .8s ease-in-out forwards .8s; +} + +.container-memo .btns { + height: 100%; + position: relative; + width: 150px; + overflow: hidden; +} + +.btns_more { + background: transparent; + border: 1px solid var(--contrast-color); + border-radius: 50px; + padding: 8px 12px; + color: #BF307F; + font-size: 16px; + text-transform: uppercase; + position: relative; + margin-top: 15px; + outline: none; + transform: translateY(50px); + animation: slideUp .8s ease-in-out forwards 1s; +} + +.title { + overflow: hidden; + height: auto; +} + +.container-memo h1 { + font-size: 40px; + color: var(--contrast-color); + margin-bottom: 20px; + transform: translateY(100px); + animation: slideUp .8s ease forwards .5s; + margin-top: 50px; +} + +@keyframes slideIn { + 0% { + transform: translateX(500px) scale(.2); + } + 100% { + transform: translateX(0px) scale(1); + } +} + +@keyframes slideUp { + 0% { + transform: translateY(300px); + } + 100% { + transform: translateY(0px); + } +} + +@keyframes expand { + 0% { + transform: translateX(1400px); + } + 100% { + transform: translateX(0px); + } +} + +/** memory symptoms**/ +.sec-symptoms { + max-width: 800px; + margin: 0 auto; +} + +.sec-symptoms h2 { + text-align: center; + font-size: 36px; + margin-bottom: 1em; +} + +.sec-symptoms .disease { + margin-bottom: 2em; +} + +.sec-symptoms h3 { + font-size: 24px; + margin-bottom: 0.5em; +} + +.sec-symptoms ul { + list-style: disc; + margin-left: 1.5em; +} + +.sec-symptoms ul li { + margin-bottom: 0.5em; +} +/*end memo-ai page*/ \ No newline at end of file diff --git a/frontend/react/graduation3/graduation3/src/Components/ChatMemory/ChatMemory.jsx b/frontend/react/graduation3/graduation3/src/Components/ChatMemory/ChatMemory.jsx index 26d7c0c99..ee53a214d 100644 --- a/frontend/react/graduation3/graduation3/src/Components/ChatMemory/ChatMemory.jsx +++ b/frontend/react/graduation3/graduation3/src/Components/ChatMemory/ChatMemory.jsx @@ -1,10 +1,123 @@ -import React, { Component } from 'react' - -export default class ChatMemory extends Component { - render() { - return ( -
Chatting can help improve communication between patients, doctors, and volunteers, especially in cases where language or accessibility is a barrier.
+ +Video calls make it easier for patients to access medical care, especially those who live in remote or underserved areas. With video calls, patients can connect with doctors from the comfort of their own home
+as a patient to get help from Doctor +
++ This is personal information of Doctor : +
+ + {/* */} +Video calls can help stimulate patients' memories and provide a sense of familiarity. Volunteers can show patients photos or videos of familiar people or places, which can help trigger memories and improve cognitive function.
+As A Patient To contact with Volunter
++ This is personal information of volunter : +
+ + {/* */} +We’ll write rarely, but only the best content.
+//