diff --git a/frontend/index.html b/frontend/index.html index d63394a..4d81c80 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -21,7 +21,7 @@
- -
Loading...
- + + +
@@ -189,15 +191,40 @@
+ -

- Скоро будет... -

- +
+
+ Ваше фото + + +
+
+
+
+

Ваш ник

+ +
+
+ +
+
+
+
+

Ваше описание

+ +
+
+ +
+
+
+
+

Закрыть

- \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/css/_prifole.scss b/frontend/src/css/_prifole.scss new file mode 100644 index 0000000..d2cec1a --- /dev/null +++ b/frontend/src/css/_prifole.scss @@ -0,0 +1,104 @@ +@use "common/colors" as *; +@use "common/material" as *; + +.name-and-img{ + display: flex; + flex-direction: row; + gap: 20px; + + #icon-profile{ + display: flex; + flex-direction: column; + justify-content: center; + #preview { + width: 200px; + height: auto; + display: flex; + img{ + width: 96px; + height: 95px; + } + } + #uploadButton { + background-color: rgba(0,0,0,0.5); + color: #fff; + border: none; + padding: 8px 16px; + cursor: pointer; + border-radius: 4px; + font-size: 16px; + opacity: 0.8; + } + #uploadButton:hover { + opacity: 1; + } + /* скрываем чекбокс, чтобы он был только триггером */ + #fileInput { + display: none; + } + } + .name-and-discription{ + display: flex; + flex-direction: column; + gap: 0; + .name{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + #name-title{ + display: flex; + margin: 0; + #text-nik{ + display: flex; + } + p{ + display: flex; + color: $color-dark-surface; + align-items: center; + font-size: 24px; + } + } + #change-name{ + display: flex; + align-items: center; + cursor: pointer; + img{ + align-items: center; + width: 30px; + height: 30px; + + } + } + } + .discription{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + #discription-title{ + display: flex; + margin: 0; + p{ + display: flex; + color: $color-dark-surface; + align-items: center; + font-size: 18px; + } + } + #change-discription{ + display: flex; + align-items: center; + cursor: pointer; + img{ + align-items: center; + width: 30px; + height: 30px; + + } + } + } + } +} diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss index b5aeb78..1a3ba55 100644 --- a/frontend/src/css/style.scss +++ b/frontend/src/css/style.scss @@ -1,5 +1,6 @@ @use "auth"; @use "chat"; +@use "prifole"; @use "panelchat"; @use "common/animations"; @use "common/components"; @@ -25,6 +26,7 @@ body { } mdui-dialog { + > *:first-child { margin-block-start: 0; } diff --git a/frontend/src/images/pesel.svg b/frontend/src/images/pesel.svg new file mode 100644 index 0000000..7290bcc --- /dev/null +++ b/frontend/src/images/pesel.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/main.ts b/frontend/src/main.ts index ce8bbf8..14357ba 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -5,4 +5,5 @@ import "./links"; import "./material"; import "./chat"; import "./leftpanel"; -import "./init"; \ No newline at end of file +import "./init"; +import "./profile"; \ No newline at end of file diff --git a/frontend/src/profile.ts b/frontend/src/profile.ts new file mode 100644 index 0000000..946d004 --- /dev/null +++ b/frontend/src/profile.ts @@ -0,0 +1,63 @@ +const fileInput = document.getElementById('fileInput') as HTMLInputElement; +const preview = document.getElementById('preview') as HTMLImageElement; +const preview1 = document.getElementById('preview1') as HTMLImageElement; +const button = document.getElementById('uploadButton')!; + +if (fileInput && preview && button) { + // при клике по кнопке откроем диалог выбора файла + button.addEventListener('click', () => { + fileInput.click(); + }); + + // при выборе файла — показываем его + fileInput.addEventListener('change', () => { + const file: File | null = fileInput.files ? fileInput.files[0] : null; + if (file) { + const reader: FileReader = new FileReader(); + reader.onload = (e: ProgressEvent) => { + if (e.target && typeof e.target.result === 'string') { + preview.src = e.target.result; + preview1.src = e.target.result; + preview.style.display = 'block'; + } + }; + reader.readAsDataURL(file); + } + }); +} + +const textDiv = document.getElementById('text-nik')!; +const input = document.getElementById('nik') as HTMLInputElement; +const button1 = document.getElementById('change-name')!; + +button1.addEventListener('click', () => { + if (input.style.display === 'none') { + // Переводим в режим редактирования + input.value = textDiv.textContent || ''; + textDiv.style.display = 'none'; + input.style.display = 'flex'; + } else { + // Сохраняем изменения + textDiv.textContent = input.value; + textDiv.style.display = 'flex'; + input.style.display = 'none'; + } +}); + +const textDiv2 = document.getElementById('text-discr')!; +const input2 = document.getElementById('discr') as HTMLInputElement; +const button2 = document.getElementById('change-discription')!; + +button2.addEventListener('click', () => { + if (input2.style.display === 'none') { + // Переводим в режим редактирования + input2.value = textDiv2.textContent || ''; + textDiv2.style.display = 'none'; + input2.style.display = 'flex'; + } else { + // Сохраняем изменения + textDiv2.textContent = input2.value; + textDiv2.style.display = 'flex'; + input2.style.display = 'none'; + } +}); \ No newline at end of file