diff --git a/package-lock.json b/package-lock.json
index 6408366..608ceaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"qrcode.react": "^4.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-image-crop": "^11.0.7",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
@@ -16529,6 +16530,15 @@
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
"license": "MIT"
},
+ "node_modules/react-image-crop": {
+ "version": "11.0.7",
+ "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-11.0.7.tgz",
+ "integrity": "sha512-ZciKWHDYzmm366JDL18CbrVyjnjH0ojufGDmScfS4ZUqLHg4nm6ATY+K62C75W4ZRNt4Ii+tX0bSjNk9LQ2xzQ==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": ">=16.13.1"
+ }
+ },
"node_modules/react-is": {
"version": "17.0.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 3d5cf24..29415a1 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"qrcode.react": "^4.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-image-crop": "^11.0.7",
"react-leaflet": "^4.2.1",
"react-router-dom": "^6.26.2",
"react-scripts": "5.0.1",
diff --git a/public/index.html b/public/index.html
index 23d1da4..bd9c935 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- React App
+ YANDEX ZAKLADKI
diff --git a/public/logo192.png b/public/logo192.png
index fc44b0a..a7eba36 100644
Binary files a/public/logo192.png and b/public/logo192.png differ
diff --git a/public/logo512.png b/public/logo512.png
index a4e47a6..a7eba36 100644
Binary files a/public/logo512.png and b/public/logo512.png differ
diff --git a/src/UserAccount.scss b/src/UserAccount.scss
index eb5cf87..4a14435 100644
--- a/src/UserAccount.scss
+++ b/src/UserAccount.scss
@@ -1,87 +1,140 @@
.user-account {
- padding: 20px;
- background-color: #f4f4f4;
- border-radius: 10px;
- max-width: 400px;
- margin: 0 auto;
-
- h1 {
- text-align: center;
+ padding: 40px;
+ background-color: #ffffff;
+ border-radius: 15px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ max-width: 600px;
+ margin: 60px auto;
+ font-family: 'Arial', sans-serif;
+
+ h1 {
+ text-align: center;
+ font-size: 28px;
+ color: #333;
+ margin-bottom: 30px;
+ font-weight: 500;
+ }
+
+ .user-info, .edit-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
+ .avatar-container {
+ display: flex;
+ justify-content: flex-start;
margin-bottom: 20px;
+
+ .avatar {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ object-fit: cover;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ }
+
+ .avatar-placeholder {
+ width: 100px;
+ height: 100px;
+ background-color: #3498db;
+ color: white;
+ font-size: 36px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ }
}
-
- .user-info, .edit-form {
+
+ p, input {
+ font-size: 18px;
+ color: #333;
+ margin-bottom: 15px;
+ padding: 10px 15px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ background-color: #f9f9f9;
+ outline: none;
+ transition: border-color 0.3s ease;
+
+ &:focus {
+ border-color: #3498db;
+ }
+ }
+
+ label {
display: flex;
flex-direction: column;
- gap: 10px;
-
- label {
- display: flex;
- justify-content: space-between;
+ font-size: 16px;
+ color: #666;
+ margin-bottom: 15px;
+
+ input[type="text"], input[type="email"], input[type="tel"], input[type="file"] {
+ padding: 10px;
font-size: 16px;
+ border-radius: 8px;
+ background-color: #f9f9f9;
+ border: 1px solid #ddd;
+ margin-top: 10px;
+ transition: border-color 0.3s ease;
+
+ &:focus {
+ border-color: #3498db;
+ }
}
-
- input {
- padding: 8px;
- font-size: 14px;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
-
- p {
- font-size: 18px;
- margin: 10px 0;
- }
-
- .buttons {
- display: flex;
- justify-content: space-between;
-
- button {
- padding: 10px 20px;
- font-size: 14px;
- cursor: pointer;
- border: none;
- border-radius: 5px;
- background-color: #3498db;
- color: white;
- transition: background-color 0.3s ease;
-
+ }
+
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+
+ button {
+ padding: 14px 30px;
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ border-radius: 8px;
+ background-color: #3498db;
+ color: white;
+ transition: background-color 0.3s ease, transform 0.2s ease;
+
+ &:hover {
+ background-color: #2980b9;
+ transform: scale(1.03);
+ }
+
+ &:last-child {
+ background-color: #e74c3c;
+
&:hover {
- background-color: #2980b9;
- }
-
- &:last-child {
- background-color: #e74c3c;
-
- &:hover {
- background-color: #c0392b;
- }
+ background-color: #c0392b;
}
}
}
}
-
- .edit-button {
- margin-top: 20px;
- padding: 10px 25px;
- font-size: 16px;
- font-weight: bold;
- cursor: pointer;
- background-color: #2ecc71; /* Зелёный цвет */
- color: white;
- border: none;
- border-radius: 5px;
- transition: background-color 0.3s ease, transform 0.2s ease;
-
- &:hover {
- background-color: #27ae60;
- transform: scale(1.05); /* Небольшой зум при наведении */
- }
-
- &:active {
- background-color: #1e8449;
- transform: scale(0.98); /* Легкий уменьшенный эффект при нажатии */
- }
+ }
+
+ .edit-button {
+ margin-top: 30px;
+ padding: 14px 35px;
+ font-size: 18px;
+ font-weight: 600;
+ cursor: pointer;
+ background-color: #2ecc71;
+ color: white;
+ border: none;
+ border-radius: 8px;
+ transition: background-color 0.3s ease, transform 0.3s ease;
+
+ &:hover {
+ background-color: #27ae60;
+ transform: scale(1.05);
}
- }
\ No newline at end of file
+
+ &:active {
+ background-color: #1e8449;
+ transform: scale(0.98);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/UserAccount.js b/src/pages/UserAccount.js
index 0440cc8..24efdb6 100644
--- a/src/pages/UserAccount.js
+++ b/src/pages/UserAccount.js
@@ -6,6 +6,7 @@ const UserAccount = () => {
username: 'Мамут Рахал',
email: 'yatupoidayn@mail.ru',
phone: '+666',
+ avatar: '', // Новое поле для аватара
});
const [isEditing, setIsEditing] = useState(false);
@@ -19,6 +20,21 @@ const UserAccount = () => {
}));
};
+ // Функция для загрузки аватара
+ const handleAvatarChange = (e) => {
+ const file = e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ setFormData((prevData) => ({
+ ...prevData,
+ avatar: reader.result,
+ }));
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
const handleSave = () => {
setUserData(formData);
setIsEditing(false);
@@ -62,6 +78,14 @@ const UserAccount = () => {
onChange={handleChange}
/>
+
@@ -69,6 +93,13 @@ const UserAccount = () => {
) : (
+
+ {userData.avatar ? (
+
+ ) : (
+
A
+ )}
+
Имя: {userData.username}
Email: {userData.email}
Телефон: {userData.phone}