Compare commits
33 Commits
dd
...
c7df4d248f
| Author | SHA1 | Date | |
|---|---|---|---|
c7df4d248f
|
|||
|
53af4d2b1b | ||
|
|
e756a3ab23 | ||
|
|
b90a082cc6 | ||
| 3c109d1619 | |||
|
|
949e186112 | ||
|
|
bffd070793 | ||
|
|
2ac1d34f1b | ||
|
|
d344619507 | ||
|
|
a08d4d3cdf | ||
| 9775e7b206 | |||
| 64c4bdae31 | |||
|
|
cc43f228d5 | ||
|
|
8f39b15ab4 | ||
|
|
64317df44c | ||
| 85afad5327 | |||
| 49f3a2be71 | |||
| 4dc1d1a12b | |||
| 3bfd4533b8 | |||
| 41a8372b96 | |||
| ed3bfab8ab | |||
| 3fa127445c | |||
| f508d170e0 | |||
| fdd898a3d9 | |||
| 43fe5e361e | |||
| 0d76b054f1 | |||
| 51e740fba6 | |||
| e0afab1420 | |||
| 80d594d789 | |||
| bb3f49c4ed | |||
| 80d7f405db | |||
| b694eb4a96 | |||
| ac7c5be419 |
59
.gitea/workflows/gitea-push-docker.yml
Normal file
59
.gitea/workflows/gitea-push-docker.yml
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
name: Create and publish a Docker image
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: ["main"]
|
||||||
|
|
||||||
|
env:
|
||||||
|
REGISTRY: git.zetcraft.ru
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
publish:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
name: Publish image
|
||||||
|
container: catthehacker/ubuntu:act-latest
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
packages: write
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
|
||||||
|
- name: Log in to the Container registry
|
||||||
|
uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
|
||||||
|
with:
|
||||||
|
registry: ${{ env.REGISTRY }}
|
||||||
|
username: ${{ gitea.actor }}
|
||||||
|
password: ${{ secrets.TOKEN }}
|
||||||
|
|
||||||
|
- name: Extract metadata (tags, labels) for Docker
|
||||||
|
id: meta
|
||||||
|
uses: https://github.com/docker/metadata-action@v4
|
||||||
|
with:
|
||||||
|
images: ${{ env.REGISTRY }}/${{ gitea.repository }}
|
||||||
|
|
||||||
|
- name: Build and push Docker image
|
||||||
|
uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
|
||||||
|
with:
|
||||||
|
context: ./
|
||||||
|
push: true
|
||||||
|
tags: ${{ steps.meta.outputs.tags }}
|
||||||
|
labels: ${{ steps.meta.outputs.labels }}
|
||||||
|
deploy:
|
||||||
|
needs: publish
|
||||||
|
name: Deploy image
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: install ssh keys
|
||||||
|
# check this thread to understand why its needed:
|
||||||
|
# <https://stackoverflow.com/a/70447517>
|
||||||
|
run: |
|
||||||
|
install -m 600 -D /dev/null ~/.ssh/id_rsa
|
||||||
|
echo "${{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/id_rsa
|
||||||
|
ssh-keyscan -H ${{ secrets.SSH_HOST }} > ~/.ssh/known_hosts
|
||||||
|
- name: connect and pull
|
||||||
|
run: ssh ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "cd ${{ secrets.WORK_DIR }} && docker compose pull && docker compose up -d && docker image prune && exit"
|
||||||
|
- name: cleanup
|
||||||
|
run: rm -rf ~/.ssh
|
||||||
17
Dockerfile
Normal file
17
Dockerfile
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
FROM node:20-alpine3.17 AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json .eslintrc.cjs vite.config.js index.html ./
|
||||||
|
COPY public/ public/
|
||||||
|
COPY src/ src/
|
||||||
|
RUN npm ci
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:1.25.2-alpine
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=builder /app/build /usr/share/nginx/html
|
||||||
|
RUN touch /var/run/nginx.pid
|
||||||
|
RUN chown -R nginx:nginx /var/run/nginx.pid /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d
|
||||||
|
USER nginx
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
27
README.md
27
README.md
@@ -1,8 +1,25 @@
|
|||||||
# React + Vite
|
# CyberBloomFrontend
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
# Docker
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
```bash
|
||||||
|
docker run -d -p 80:80 \
|
||||||
|
--name CyberBloom \
|
||||||
|
--restart=always \
|
||||||
|
-e TZ=Europe/Moscow \
|
||||||
|
git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main
|
||||||
|
```
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
# Docker Compose
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
```yml
|
||||||
|
services:
|
||||||
|
cyberbloomfrontend:
|
||||||
|
ports:
|
||||||
|
- '80:80'
|
||||||
|
container_name: CyberBloom
|
||||||
|
restart: always
|
||||||
|
environment:
|
||||||
|
- TZ=Europe/Moscow
|
||||||
|
image: 'git.zetcraft.ru/cyberbloom/ogeetocasecybergarden:main'
|
||||||
|
```
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;1,500&family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|||||||
9
nginx.conf
Normal file
9
nginx.conf
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
server_tokens off;
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
location / {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html index.htm;
|
||||||
|
try_files $uri /index.html;
|
||||||
|
}
|
||||||
|
}
|
||||||
102
package-lock.json
generated
102
package-lock.json
generated
@@ -14,10 +14,14 @@
|
|||||||
"@mui/icons-material": "^5.15.1",
|
"@mui/icons-material": "^5.15.1",
|
||||||
"@mui/material": "^5.15.1",
|
"@mui/material": "^5.15.1",
|
||||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||||
|
"@mui/x-date-pickers": "^6.18.6",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.1",
|
"react-router-dom": "^6.21.1",
|
||||||
|
"sass": "^1.69.5",
|
||||||
"styled-components": "^6.1.2"
|
"styled-components": "^6.1.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -28,7 +32,6 @@
|
|||||||
"eslint-plugin-react": "^7.33.2",
|
"eslint-plugin-react": "^7.33.2",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.5",
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
"sass": "^1.69.5",
|
|
||||||
"vite": "^5.0.8"
|
"vite": "^5.0.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -1370,6 +1373,71 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@mui/x-date-pickers": {
|
||||||
|
"version": "6.18.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.18.6.tgz",
|
||||||
|
"integrity": "sha512-pqOrGPUDVY/1xXrM1hofqwgquno/SB9aG9CVS1m2Rs8hKF1VWRC+jYlEa1Qk08xKmvkia5g7NsdV/BBb+tHUZw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.23.2",
|
||||||
|
"@mui/base": "^5.0.0-beta.22",
|
||||||
|
"@mui/utils": "^5.14.16",
|
||||||
|
"@types/react-transition-group": "^4.4.8",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"prop-types": "^15.8.1",
|
||||||
|
"react-transition-group": "^4.4.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.0.0"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "opencollective",
|
||||||
|
"url": "https://opencollective.com/mui"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.9.0",
|
||||||
|
"@emotion/styled": "^11.8.1",
|
||||||
|
"@mui/material": "^5.8.6",
|
||||||
|
"@mui/system": "^5.8.0",
|
||||||
|
"date-fns": "^2.25.0",
|
||||||
|
"date-fns-jalali": "^2.13.0-0",
|
||||||
|
"dayjs": "^1.10.7",
|
||||||
|
"luxon": "^3.0.2",
|
||||||
|
"moment": "^2.29.4",
|
||||||
|
"moment-hijri": "^2.1.2",
|
||||||
|
"moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
|
||||||
|
"react": "^17.0.0 || ^18.0.0",
|
||||||
|
"react-dom": "^17.0.0 || ^18.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@emotion/styled": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"date-fns": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"date-fns-jalali": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"dayjs": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"luxon": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment-hijri": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"moment-jalaali": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
"version": "2.1.5",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||||
@@ -1765,7 +1833,6 @@
|
|||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
|
||||||
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"normalize-path": "^3.0.0",
|
"normalize-path": "^3.0.0",
|
||||||
"picomatch": "^2.0.4"
|
"picomatch": "^2.0.4"
|
||||||
@@ -1958,7 +2025,6 @@
|
|||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
|
||||||
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
@@ -1977,7 +2043,6 @@
|
|||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"fill-range": "^7.0.1"
|
"fill-range": "^7.0.1"
|
||||||
},
|
},
|
||||||
@@ -2084,7 +2149,6 @@
|
|||||||
"version": "3.5.3",
|
"version": "3.5.3",
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
|
||||||
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
"type": "individual",
|
"type": "individual",
|
||||||
@@ -2111,7 +2175,6 @@
|
|||||||
"version": "5.1.2",
|
"version": "5.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-glob": "^4.0.1"
|
"is-glob": "^4.0.1"
|
||||||
},
|
},
|
||||||
@@ -2215,6 +2278,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/dayjs": {
|
||||||
|
"version": "1.11.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
|
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
|
||||||
|
},
|
||||||
"node_modules/debug": {
|
"node_modules/debug": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||||
@@ -2827,7 +2895,6 @@
|
|||||||
"version": "7.0.1",
|
"version": "7.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
|
||||||
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"to-regex-range": "^5.0.1"
|
"to-regex-range": "^5.0.1"
|
||||||
},
|
},
|
||||||
@@ -2927,7 +2994,6 @@
|
|||||||
"version": "2.3.3",
|
"version": "2.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -3185,8 +3251,7 @@
|
|||||||
"node_modules/immutable": {
|
"node_modules/immutable": {
|
||||||
"version": "4.3.4",
|
"version": "4.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
|
||||||
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
|
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/import-fresh": {
|
"node_modules/import-fresh": {
|
||||||
"version": "3.3.0",
|
"version": "3.3.0",
|
||||||
@@ -3292,7 +3357,6 @@
|
|||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
|
||||||
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"binary-extensions": "^2.0.0"
|
"binary-extensions": "^2.0.0"
|
||||||
},
|
},
|
||||||
@@ -3358,7 +3422,6 @@
|
|||||||
"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",
|
||||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -3394,7 +3457,6 @@
|
|||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-extglob": "^2.1.1"
|
"is-extglob": "^2.1.1"
|
||||||
},
|
},
|
||||||
@@ -3427,7 +3489,6 @@
|
|||||||
"version": "7.0.0",
|
"version": "7.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
}
|
}
|
||||||
@@ -3597,6 +3658,14 @@
|
|||||||
"set-function-name": "^2.0.1"
|
"set-function-name": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/js-cookie": {
|
||||||
|
"version": "3.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||||
|
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
@@ -3814,7 +3883,6 @@
|
|||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -4057,7 +4125,6 @@
|
|||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||||
"dev": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8.6"
|
"node": ">=8.6"
|
||||||
},
|
},
|
||||||
@@ -4236,7 +4303,6 @@
|
|||||||
"version": "3.6.0",
|
"version": "3.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
|
||||||
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"picomatch": "^2.2.1"
|
"picomatch": "^2.2.1"
|
||||||
},
|
},
|
||||||
@@ -4424,7 +4490,6 @@
|
|||||||
"version": "1.69.5",
|
"version": "1.69.5",
|
||||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
|
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
|
||||||
"integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
|
"integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chokidar": ">=3.0.0 <4.0.0",
|
"chokidar": ">=3.0.0 <4.0.0",
|
||||||
"immutable": "^4.0.0",
|
"immutable": "^4.0.0",
|
||||||
@@ -4705,7 +4770,6 @@
|
|||||||
"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",
|
||||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||||
"dev": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-number": "^7.0.0"
|
"is-number": "^7.0.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -16,10 +16,15 @@
|
|||||||
"@mui/icons-material": "^5.15.1",
|
"@mui/icons-material": "^5.15.1",
|
||||||
"@mui/material": "^5.15.1",
|
"@mui/material": "^5.15.1",
|
||||||
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
"@mui/styled-engine-sc": "^6.0.0-alpha.9",
|
||||||
|
"@mui/x-date-pickers": "^6.18.6",
|
||||||
"axios": "^1.6.2",
|
"axios": "^1.6.2",
|
||||||
|
"dayjs": "^1.11.10",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
|
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.21.1",
|
"react-router-dom": "^6.21.1",
|
||||||
|
"sass": "^1.69.5",
|
||||||
"styled-components": "^6.1.2"
|
"styled-components": "^6.1.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -30,7 +35,6 @@
|
|||||||
"eslint-plugin-react": "^7.33.2",
|
"eslint-plugin-react": "^7.33.2",
|
||||||
"eslint-plugin-react-hooks": "^4.6.0",
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
"eslint-plugin-react-refresh": "^0.4.5",
|
"eslint-plugin-react-refresh": "^0.4.5",
|
||||||
"sass": "^1.69.5",
|
|
||||||
"vite": "^5.0.8"
|
"vite": "^5.0.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
#root {
|
#root {
|
||||||
max-width: 1280px;
|
width: 79%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
30
src/App.jsx
30
src/App.jsx
@@ -1,22 +1,38 @@
|
|||||||
|
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
|
||||||
import BeingPage from "./Components/BeingPage/index.jsx";
|
|
||||||
import HomePage from "./Components/HomePage/index.jsx";
|
|
||||||
import './App.css'
|
import './App.css'
|
||||||
|
|
||||||
|
// import FetchUtils from './components/utils/FetchUtils.jsx'
|
||||||
|
|
||||||
|
// import FetchUtils from './components/fetchUtils/FetchUtils.jsx'
|
||||||
|
|
||||||
|
// import TableMeets from './components/fetchUtils/TableMeets.jsx'
|
||||||
|
import AddUsers from './Components/AddUsersPage/index.jsx'
|
||||||
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
|
import HomePage from "./Components/HomePage/index.jsx";
|
||||||
|
import MeetPage from "./Components/MeetPage/index.jsx";
|
||||||
|
import MeetAuthPage from "./Components/MeetAuthPage/index.jsx";
|
||||||
|
import ProfilePage from './Components/profilePage/index.jsx';
|
||||||
|
import MeetAuthPageAdmin from './Components/MeetAuthPageAdmin/index.jsx'
|
||||||
|
import HomeAuthPageAdmin from './Components/HomePageAdmin/index.jsx'
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
{/* <FetchUtils /> */}
|
||||||
|
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/being" element={<BeingPage />}/>
|
<Route path="/addUser" element={<AddUsers />}/>
|
||||||
<Route path="/" element={<HomePage />}/>
|
<Route path="/" element={<HomePage />}/>
|
||||||
|
<Route path="/firstMeet" element={<MeetPage />}/>
|
||||||
|
<Route path="/firstMeetAuth" element={<MeetAuthPage />}/>
|
||||||
|
<Route path='/profile' element={<ProfilePage />}/>
|
||||||
|
<Route path='/adminMeets' element={<MeetAuthPageAdmin/>}/>
|
||||||
|
<Route path='/admin' element={<HomeAuthPageAdmin/>}/>
|
||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
154
src/Components/AddUsersPage/index.jsx
Normal file
154
src/Components/AddUsersPage/index.jsx
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
import styles from './style.module.scss';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import avatar from '../../img/profilePage/avatar.png';
|
||||||
|
import Header from '../Header';
|
||||||
|
import Modal from '@mui/material/Modal';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import del from '../../img/AddUsers/delete.png';
|
||||||
|
import perm from '../../img/AddUsers/permission.png';
|
||||||
|
import newAvatar from '../../img/AddUsers/newAvatar.png';
|
||||||
|
const style = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: "46%",
|
||||||
|
height: "60vh",
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
borderRadius: '25px',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
const AddUsers = () => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const handleOpen = () => setOpen(true);
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
|
||||||
|
<section className={styles.addUsers__container}>
|
||||||
|
<input className={styles.addUsers__search} type='text' placeholder='Найти мероприятие'></input>
|
||||||
|
<div className={styles.select__container}>
|
||||||
|
<select className={styles.select} name="time__meeting">
|
||||||
|
<option value="">роль пользователя</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.addUser__container}>
|
||||||
|
<div className={styles.addUser__cards_container}>
|
||||||
|
<div className={styles.addUser__card_container}>
|
||||||
|
<div onClick={handleOpen} className={styles.round}>+</div>
|
||||||
|
<div className={styles.addUser__card_text}>Добавить пользователя</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_container}>
|
||||||
|
<div className={styles.profile__user_img_container}>
|
||||||
|
<img src={avatar} className={styles.profile__user_img}></img>
|
||||||
|
<div className={styles.profile__user_role}>Участник</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_info_container}>
|
||||||
|
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||||
|
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||||
|
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||||
|
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||||
|
<div className={styles.profile__user_progress_container}>
|
||||||
|
<span>0</span>
|
||||||
|
<span className={styles.profile__user_progress_line}></span>
|
||||||
|
<span>1</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||||
|
<div className={styles.feautures}>Отправлено</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_container}>
|
||||||
|
<div className={styles.profile__user_img_container}>
|
||||||
|
<img src={avatar} className={styles.profile__user_img}></img>
|
||||||
|
<div className={styles.profile__user_role}>Участник</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_info_container}>
|
||||||
|
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||||
|
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||||
|
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||||
|
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||||
|
<div className={styles.profile__user_progress_container}>
|
||||||
|
<span>0</span>
|
||||||
|
<span className={styles.profile__user_progress_line}></span>
|
||||||
|
<span>1</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||||
|
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_container}>
|
||||||
|
<div className={styles.profile__user_img_container}>
|
||||||
|
<img src={avatar} className={styles.profile__user_img}></img>
|
||||||
|
<div className={styles.profile__user_role}>Участник</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_info_container}>
|
||||||
|
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||||
|
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||||
|
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||||
|
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||||
|
<div className={styles.profile__user_progress_container}>
|
||||||
|
<span>0</span>
|
||||||
|
<span className={styles.profile__user_progress_line}></span>
|
||||||
|
<span>1</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.delete_container}><img src={del} className={styles.delete_img}></img></div>
|
||||||
|
<div className={styles.permission_container}><img src={perm} className={styles.permission_img}></img></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={style}>
|
||||||
|
<div className={styles.addModal__title_container}>
|
||||||
|
<div className={styles.addModal__title}>Добавление пользователя</div>
|
||||||
|
<div onClick={handleClose} className={styles.addModal__close}><div className={styles.addModal__close_img}>+</div></div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.addModal_user_container}>
|
||||||
|
<div className={styles.addModal_user_img_container}>
|
||||||
|
<form className={styles.addModal_form} method="post" encType="multipart/form-data">
|
||||||
|
<div className={styles.input_file_row}>
|
||||||
|
<label className={styles.input_file}>
|
||||||
|
<input type="file" name="file[]" multiple accept="image/*"/>
|
||||||
|
<span><img src={newAvatar}></img></span>
|
||||||
|
</label>
|
||||||
|
<div className={styles.input_file_list}></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div className={styles.addModal_user_input_container}>
|
||||||
|
<input placeholder='ФИО специалиста' className={styles.addModal_user}></input>
|
||||||
|
<input placeholder='Должность' className={styles.addModal_user}></input>
|
||||||
|
<select className={styles.addModal_user_select}>
|
||||||
|
<option>Пользователь</option>
|
||||||
|
<option>Администратор</option>
|
||||||
|
</select>
|
||||||
|
<input placeholder='Почта' className={styles.addModal_user}></input>
|
||||||
|
<input placeholder='TG' className={styles.addModal_user}></input>
|
||||||
|
<div className={styles.modal__question_button_container}>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.yellow}>Добавить</button>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default AddUsers;
|
||||||
538
src/Components/AddUsersPage/style.module.scss
Normal file
538
src/Components/AddUsersPage/style.module.scss
Normal file
@@ -0,0 +1,538 @@
|
|||||||
|
.select {
|
||||||
|
margin-right: 50px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 200px;
|
||||||
|
padding-left: 10px;
|
||||||
|
option {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
width: 93%;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addUsers {
|
||||||
|
|
||||||
|
|
||||||
|
&__search {
|
||||||
|
margin-top: 150px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
height: 70px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.profile {
|
||||||
|
&__container {
|
||||||
|
margin-top: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
&__user {
|
||||||
|
&_img {
|
||||||
|
width: 180px;
|
||||||
|
height: 180px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 50px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
width: 48%;
|
||||||
|
margin-bottom: 110px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&_info_container {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 18px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&_fullName {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 26px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
span {
|
||||||
|
color: #FD0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&_spaciality {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_socialMedia {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_email {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_role {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
&_progress {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
&_line {
|
||||||
|
height: 2px;
|
||||||
|
width: 140%;
|
||||||
|
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||||
|
padding: 0 30px 0 30px;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addUser {
|
||||||
|
|
||||||
|
|
||||||
|
&__cards_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 120px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__card {
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 48%;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
margin-bottom: 110px;
|
||||||
|
}
|
||||||
|
&_text {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.round {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 80%;
|
||||||
|
height: 50px;
|
||||||
|
border: 1px solid var(--yellow, #FD0);
|
||||||
|
background: var(--yellow, #FD0);
|
||||||
|
width: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.feautures {
|
||||||
|
width: 90px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
align-items: center;
|
||||||
|
color: #60AD1E;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
background: #E7FFD2;
|
||||||
|
height: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.permission {
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 40px;
|
||||||
|
}
|
||||||
|
&_img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.delete {
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
&_img {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addModal {
|
||||||
|
|
||||||
|
|
||||||
|
&__close {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: absolute;
|
||||||
|
height: 96px;
|
||||||
|
height: 45px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 78.625px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
line-height: normal;
|
||||||
|
top: 13px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_form {
|
||||||
|
margin-top: 100px;
|
||||||
|
height: 100%;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
&_user {
|
||||||
|
border-radius: 7.794px;
|
||||||
|
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
height: 35px;
|
||||||
|
width: 200px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-align: center;
|
||||||
|
&_select {
|
||||||
|
border-radius: 7.794px;
|
||||||
|
border: 0.779px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
height: 40px;
|
||||||
|
width: 210px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&_input_container {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
height: 96%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.input_file_row {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.input_file {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.input_file span {
|
||||||
|
margin-top: 159px;
|
||||||
|
padding-top: 200px;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
vertical-align: middle;
|
||||||
|
color: rgb(255 255 255);
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 22px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: none;
|
||||||
|
margin: 0;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
.input_file input[type=file] {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
opacity: 0;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus */
|
||||||
|
// .input_file input[type=file]:focus + span {
|
||||||
|
// box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
|
||||||
|
// }
|
||||||
|
|
||||||
|
/* Hover/active */
|
||||||
|
|
||||||
|
|
||||||
|
/* Disabled */
|
||||||
|
|
||||||
|
|
||||||
|
/* Список c превью */
|
||||||
|
.input_file_list {
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.input_file_list_item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 15px 15px;
|
||||||
|
width: 150px;
|
||||||
|
vertical-align: top;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.input_file_list_item img {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
.input_file_list_name {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.input_file_list_remove {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
background: #ff0202;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 16px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
height: 400px;
|
||||||
|
width: 300px;
|
||||||
|
&__container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
height: 5000px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 48px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__line {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
stroke-width: 1px;
|
||||||
|
background-color: #D0D2D8;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
&__close {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: absolute;
|
||||||
|
height: 96px;
|
||||||
|
height: 45px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 58.625px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
line-height: normal;
|
||||||
|
top: 0px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
&__question {
|
||||||
|
&_number {
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&_containerSecond {
|
||||||
|
width: 48%;
|
||||||
|
height: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&_user {
|
||||||
|
&_img {
|
||||||
|
margin-right: 25px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_like {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 5px 0 0 10px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_input {
|
||||||
|
margin-top: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 100%;
|
||||||
|
height: 235px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
&_containerThird {
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
&_button {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #60AD1E;
|
||||||
|
width: 190px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.gray {
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 140px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
1
src/Components/BeingPage/style.module.css
Normal file
1
src/Components/BeingPage/style.module.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/*# sourceMappingURL=style.module.css.map */
|
||||||
1
src/Components/BeingPage/style.module.css.map
Normal file
1
src/Components/BeingPage/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":[],"names":[],"mappings":"","file":"style.module.css"}
|
||||||
16
src/Components/Calendar/index.jsx
Normal file
16
src/Components/Calendar/index.jsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
|
||||||
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||||
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||||
|
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
|
||||||
|
|
||||||
|
export default function DateCalendarFormProps() {
|
||||||
|
return (
|
||||||
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||||
|
<DemoContainer components={['DateCalendar']}>
|
||||||
|
<DateCalendar defaultValue={dayjs('2023-12-24')} readOnly />
|
||||||
|
</DemoContainer>
|
||||||
|
</LocalizationProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
34
src/Components/Card/index.jsx
Normal file
34
src/Components/Card/index.jsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import './style.module.scss';
|
||||||
|
|
||||||
|
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
|
||||||
|
const httpApiMethods = new HttpApiMethods()
|
||||||
|
function extractDateTime(dateString) {
|
||||||
|
const dateTime = new Date(dateString);
|
||||||
|
const date = dateTime.toLocaleDateString();
|
||||||
|
const time = dateTime.toLocaleTimeString();
|
||||||
|
|
||||||
|
return { date, time };
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Card = (item) => {
|
||||||
|
|
||||||
|
console.log(item);
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='event_card' >
|
||||||
|
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||||
|
<div className="taggs">
|
||||||
|
<div className='tagged'>{item.tags}</div>
|
||||||
|
<div className="feautures">{item.type}</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="event-card__title">{item.title}</h4>
|
||||||
|
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default Card;
|
||||||
73
src/Components/Card/style.module.css
Normal file
73
src/Components/Card/style.module.css
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
.event_card {
|
||||||
|
width: 292px;
|
||||||
|
height: 626px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* max-width: 1521px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_date {
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
/* title */
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__photo {
|
||||||
|
width: 292px;
|
||||||
|
height: 340px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #D9D9D9;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feautures {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 8px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #E7FFD2;
|
||||||
|
height: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagged {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
}
|
||||||
|
|
||||||
|
.taggs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}/*# sourceMappingURL=style.module.css.map */
|
||||||
1
src/Components/Card/style.module.css.map
Normal file
1
src/Components/Card/style.module.css.map
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["style.module.scss","style.module.css"],"names":[],"mappings":"AAAA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;ACCJ;;ADEA;EACI,aAAA;EACA,2BAAA;EACA,uBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADEA;EACI,6BAAA;EAEJ,UAAA;EACA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,YAAA;EACA,aAAA;EACA,cAAA;EACJ,mBAAA;EACA,mBAAA;ACAA;;ADGA;EACI,WAAA;EAEA,uBAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;ACDJ;;ADGA;EAEA,aAAA;EACA,uBAAA;EACA,uBAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;EACA,mBAAA;EACA,mBAAA;EACA,YAAA;EACA,aAAA;ACDA;;ADIA;EACI,oBAAA;EACJ,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,wCAAA;ACDA;;ADGA;EACI,aAAA;EACA,8BAAA;ACAJ","file":"style.module.css"}
|
||||||
74
src/Components/Card/style.module.scss
Normal file
74
src/Components/Card/style.module.scss
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
.event_card {
|
||||||
|
width: 292px;
|
||||||
|
height: 626px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
/* max-width: 1521px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_date {
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
|
||||||
|
/* title */
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__photo {
|
||||||
|
width: 292px;
|
||||||
|
height: 340px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #D9D9D9;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_title {
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.feautures {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 8px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #E7FFD2;
|
||||||
|
height: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagged {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
}
|
||||||
|
.taggs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
@@ -1,21 +1,47 @@
|
|||||||
|
|
||||||
import styles from './style.module.scss';
|
import styles from './style.module.scss';
|
||||||
import logo from '../../img/headerImg/OgettoLogo.png';
|
import logo from '../../img/headerImg/header.png';
|
||||||
|
import google from '../../img/headerImg/google.png';
|
||||||
|
|
||||||
|
import icon from '../../img/headerImg/Icon.png';
|
||||||
|
import Menu from '../Menu'
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const handleHome = () => {
|
const handleHome = () => {
|
||||||
navigate('/');
|
navigate('/');
|
||||||
}
|
}
|
||||||
|
const isAuth = useState(true)[0];
|
||||||
|
console.log(isAuth)
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{(isAuth ? (
|
||||||
<div className={styles.header__container}>
|
<div className={styles.header__container}>
|
||||||
<header className={styles.header}>
|
<header className={styles.header}>
|
||||||
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||||
<button className={styles.header__button}>Вход</button>
|
<div className={styles.header_img_container}> <img className={styles.header_img} src={icon}></img> <Menu></Menu></div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
</div>
|
||||||
|
) :
|
||||||
|
(
|
||||||
|
<div className={styles.header__container}>
|
||||||
|
<header className={styles.header}>
|
||||||
|
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||||
|
<button className={styles.header__button}>ВХОД <img className={styles.header__button_img} src={google}></img></button>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,9 +12,11 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
background-color: #fff;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
&__logo {
|
&__logo {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -23,7 +25,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-radius: 100px;
|
border-radius: 10px;
|
||||||
background: #FFED00;
|
background: #FFED00;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
@@ -33,5 +35,12 @@
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
position: relative;
|
||||||
|
&_img {
|
||||||
|
|
||||||
|
width: 55px;
|
||||||
|
margin-right: 40px;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,13 +1,92 @@
|
|||||||
import Header from "../Header";
|
import Header from "../Header";
|
||||||
import styles from "./style.module.scss";
|
import styles from "./style.module.scss";
|
||||||
|
import TableMeets from '../TableMeets/TableMeets'
|
||||||
|
// import EditForm from "../edit/EditMeetsForm";
|
||||||
|
import PostForm from "../post/Meets";
|
||||||
|
import Users from "../post/Users";
|
||||||
|
// import User from "../get/User";
|
||||||
|
import Questions from "../post/Questions";
|
||||||
|
import { GetQuestions } from "../get/Questions";
|
||||||
|
|
||||||
|
|
||||||
|
import muza from '../../img/homePage/muza.png';
|
||||||
|
const APIURL = ''
|
||||||
|
|
||||||
|
// const events = [
|
||||||
|
// {
|
||||||
|
// id: 1,
|
||||||
|
// date: '10.10.2022',
|
||||||
|
// time: '14:00',
|
||||||
|
// title: 'Мероприятие 1',
|
||||||
|
// speaker: 'Спикер 1',
|
||||||
|
// avatar: 'speaker1.jpg',
|
||||||
|
// description: 'Описание мероприятия 1',
|
||||||
|
// isExpanded: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// date: '11.10.2022',
|
||||||
|
// time: '15:30',
|
||||||
|
// title: 'Мероприятие 2',
|
||||||
|
// speaker: 'Спикер 2',
|
||||||
|
// avatar: 'speaker2.jpg',
|
||||||
|
// description: 'Описание мероприятия 2',
|
||||||
|
// isExpanded: true,
|
||||||
|
// },
|
||||||
|
// // Добавьте другие мероприятия сюда
|
||||||
|
// ];
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header></Header>
|
|
||||||
|
|
||||||
<section></section>
|
<Header></Header>
|
||||||
|
<div className={styles.muza_img_container}><img src={muza} alt='muza' className={styles.muza_img}></img></div>
|
||||||
|
<section className={styles.muza__container}>
|
||||||
|
|
||||||
|
<div className={styles.muza__title}>МУЗА</div>
|
||||||
|
<div className={styles.muza__descr_container}>
|
||||||
|
<div className={styles.muza__descr}>Платформа для проведения well-being мероприятий</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.meeting__container}>
|
||||||
|
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.select__container}>
|
||||||
|
<select className={styles.select} name="time__meeting">
|
||||||
|
<option value="">Время мироприятия</option>
|
||||||
|
</select>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.NewContainer}>
|
||||||
|
<div className={styles.search_container}>
|
||||||
|
<div className={styles.search__descr}>100 мероприятий</div>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cards__container}>
|
||||||
|
<div className={styles.card}></div>
|
||||||
|
</div>
|
||||||
|
{/* <Questions></Questions> */}
|
||||||
|
{/* <Home></Home> */}
|
||||||
|
{/* <FetchUtils></FetchUtils> */}
|
||||||
|
{/* <PostForm /> */}
|
||||||
|
{/* <EditForm /> */}
|
||||||
|
{/* <Users></Users> */}
|
||||||
|
{/* <User></User> */}
|
||||||
|
{/* <GetQuestions></GetQuestions> */}
|
||||||
|
<Users></Users>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,96 @@
|
|||||||
|
|
||||||
|
|
||||||
.title {
|
.container {
|
||||||
font-size: 100px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.muza {
|
||||||
|
&__container {
|
||||||
|
height: 780px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&_img {
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
top: 300px;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
margin-top: 150px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 143.016px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-left: 70px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 46px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
width: 60%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.meeting {
|
||||||
|
&__container {
|
||||||
|
height: 1400px;
|
||||||
|
}
|
||||||
|
&__inputs {
|
||||||
|
width: 90%;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
margin-right: 50px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 200px;
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
width: 93%;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.NewContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.search_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.search__descr {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
|||||||
80
src/Components/HomePageAdmin/index.jsx
Normal file
80
src/Components/HomePageAdmin/index.jsx
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import Header from "../Header";
|
||||||
|
import styles from "./style.module.scss";
|
||||||
|
import TableMeets from '../TableMeets/TableMeets'
|
||||||
|
// import Home from "../Home/Home";
|
||||||
|
// import FetchUtils from "../utils/FetchUtils";
|
||||||
|
// import EditForm from "../edit/EditForm";
|
||||||
|
// import PostForm from "../post/PostForm";
|
||||||
|
|
||||||
|
const APIURL = ''
|
||||||
|
|
||||||
|
// const events = [
|
||||||
|
// {
|
||||||
|
// id: 1,
|
||||||
|
// date: '10.10.2022',
|
||||||
|
// time: '14:00',
|
||||||
|
// title: 'Мероприятие 1',
|
||||||
|
// speaker: 'Спикер 1',
|
||||||
|
// avatar: 'speaker1.jpg',
|
||||||
|
// description: 'Описание мероприятия 1',
|
||||||
|
// isExpanded: true,
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// id: 2,
|
||||||
|
// date: '11.10.2022',
|
||||||
|
// time: '15:30',
|
||||||
|
// title: 'Мероприятие 2',
|
||||||
|
// speaker: 'Спикер 2',
|
||||||
|
// avatar: 'speaker2.jpg',
|
||||||
|
// description: 'Описание мероприятия 2',
|
||||||
|
// isExpanded: true,
|
||||||
|
// },
|
||||||
|
// // Добавьте другие мероприятия сюда
|
||||||
|
// ];
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<Header></Header>
|
||||||
|
<section className={styles.muza__container}>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.meeting__container}>
|
||||||
|
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.select__container}>
|
||||||
|
<select className={styles.select} name="time__meeting">
|
||||||
|
<option value="">Время мироприятия</option>
|
||||||
|
</select>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.NewContainer}>
|
||||||
|
<div className={styles.search_container}>
|
||||||
|
<div className={styles.search__descr}>100 мероприятий</div>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cards__container}>
|
||||||
|
<div className={styles.card}></div>
|
||||||
|
</div>
|
||||||
|
{/* <Home></Home> */}
|
||||||
|
{/* <FetchUtils></FetchUtils> */}
|
||||||
|
{/* <PostForm /> */}
|
||||||
|
{/* <EditForm /> */}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default HomePage;
|
||||||
89
src/Components/HomePageAdmin/style.module.scss
Normal file
89
src/Components/HomePageAdmin/style.module.scss
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.muza {
|
||||||
|
&__container {
|
||||||
|
height: 700px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin-top: 150px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 143.016px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
width: 90%;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-left: 70px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 46px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
display: flex;
|
||||||
|
width: 60%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.meeting {
|
||||||
|
&__container {
|
||||||
|
height: 1400px;
|
||||||
|
}
|
||||||
|
&__inputs {
|
||||||
|
width: 90%;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
margin-right: 50px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 200px;
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
width: 93%;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.NewContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.search_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.search__descr {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
263
src/Components/MeetAuthPage/index.jsx
Normal file
263
src/Components/MeetAuthPage/index.jsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
import Header from "../Header";
|
||||||
|
import styles from './style.module.scss';
|
||||||
|
import clock from '../../img/MeetPage/Clock.png';
|
||||||
|
import globe from '../../img/MeetPage/Globe.png';
|
||||||
|
import avatar from '../../img/MeetPage/avatar.png';
|
||||||
|
import like from '../../img/MeetPage/Facebook.png';
|
||||||
|
import Card from "../Card";
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||||
|
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||||
|
import vk from '../../img/MeetPage/Vk.png';
|
||||||
|
import tg from '../../img/MeetPage/Telegram.png';
|
||||||
|
import book from '../../img/MeetPage/Book.png';
|
||||||
|
import * as React from 'react';
|
||||||
|
import Modal from '@mui/material/Modal';
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: "56%",
|
||||||
|
height: "80vh",
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
borderRadius: '25px',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
const MeetPage = () => {
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const handleOpen = () => setOpen(true);
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
<section className={styles.meets}>
|
||||||
|
<div className={styles.meets__mainInfo_container}>
|
||||||
|
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||||
|
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||||
|
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||||
|
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.meets__img}></div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<div className={styles.container}>
|
||||||
|
|
||||||
|
<div className={styles.meets__otziv_container}>
|
||||||
|
<div className={styles.newMeeting__container}>
|
||||||
|
<button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
|
||||||
|
<a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
|
||||||
|
<a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
|
||||||
|
</div>
|
||||||
|
<div onClick={handleOpen} className={styles.meets__otziv}>
|
||||||
|
<span className={styles.meets__otziv_title}>Оставить вопрос</span>
|
||||||
|
Оставьте вопрос первым
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className={styles.aboutMeet}>
|
||||||
|
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||||
|
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||||
|
</section>
|
||||||
|
<section className={styles.expert}>
|
||||||
|
<div className={styles.expert__title}>Специалист</div>
|
||||||
|
<div className={styles.newContainer}>
|
||||||
|
<div className={styles.expert__container}>
|
||||||
|
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||||
|
|
||||||
|
<div className={styles.expert__descr_container}>
|
||||||
|
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||||
|
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||||
|
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||||
|
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.container__links}>
|
||||||
|
<div className={styles.links__title}>Ссылки на материалы специалиста</div>
|
||||||
|
<div className={styles.links__img_container}>
|
||||||
|
<a href="#"><img src={vk} className={styles.links__img}></img></a>
|
||||||
|
<a href="#"><img src={tg} className={styles.links__img}></img></a>
|
||||||
|
<a href="#"><img src={book} className={styles.links__img}></img></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.comments}>
|
||||||
|
<div className={styles.comments__title}>Комментарии</div>
|
||||||
|
<div className={styles.newInputContainer}>
|
||||||
|
<div className={styles.comments__number}>3 КОММЕНТАРИЯ</div>
|
||||||
|
<div className={styles.comments__input_container}>
|
||||||
|
<div className={styles.comments__input_img_container}>
|
||||||
|
<img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
|
||||||
|
<textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
|
||||||
|
</div>
|
||||||
|
<div className={styles.comments__button_container}>
|
||||||
|
<button className={styles.comments__button}>ОТПРАВИТЬ</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.comments__all_container}>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.someMeetings}>
|
||||||
|
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||||
|
<Box sx={{ flexGrow: 1 }}>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</section>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={style}>
|
||||||
|
<div className={styles.modal__title}>Вопросы</div>
|
||||||
|
<div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
|
||||||
|
<div className={styles.modal__line}></div>
|
||||||
|
<div className={styles.modal__question_number}>Всего <span>1</span></div>
|
||||||
|
<div className={styles.modal__question_container}>
|
||||||
|
<div className={styles.modal__question_containerSecond}>
|
||||||
|
<div className={styles.modal__question_user}>
|
||||||
|
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||||
|
<div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
|
||||||
|
<div className={styles.modal__question_time_container}>
|
||||||
|
<div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
|
||||||
|
<div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.modal__question_containerThird}>
|
||||||
|
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||||
|
<textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
|
||||||
|
<div className={styles.modal__question_button_container}>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
export default MeetPage;
|
||||||
595
src/Components/MeetAuthPage/style.module.scss
Normal file
595
src/Components/MeetAuthPage/style.module.scss
Normal file
@@ -0,0 +1,595 @@
|
|||||||
|
.meets {
|
||||||
|
margin-top: 150px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&__img {
|
||||||
|
width: 44%;
|
||||||
|
height: 300px;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
&__mainInfo {
|
||||||
|
&_container {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 30px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&_type {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
width: 110px;
|
||||||
|
height: 35px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_status {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_status_img {
|
||||||
|
height: 26px;
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__otziv {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
width: 44%;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
&_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.aboutMeet {
|
||||||
|
margin-top: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 0, 0, 0.90);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 110%; /* 27.6px */
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
border-radius: 10000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
&_container {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&_fullname {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_speciality {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
&_phone {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
&_email {
|
||||||
|
color: #2C41FF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.someMeetings {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.cards_container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.newMeeting {
|
||||||
|
&__container {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__button {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--yellow, #FFED00);
|
||||||
|
height: 80px;
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
&__link {
|
||||||
|
margin-top: 30px;
|
||||||
|
color: #2C41FF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&__ling_video {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 140px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.container__links {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin-top: 128px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
margin-top: 45px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
border-radius: 10000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellowSpan {
|
||||||
|
color: #FD0
|
||||||
|
}
|
||||||
|
.comments {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__number {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
background: #FFF;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: start;
|
||||||
|
padding-left: 20px;
|
||||||
|
text-align: start;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
padding-top: 30px;
|
||||||
|
&_img {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&_img_container {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
&_img {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newInputContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__number {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 60px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__button {
|
||||||
|
border-radius: 5.833px;
|
||||||
|
background: var(--yellow, #FD0);
|
||||||
|
width: 200px;
|
||||||
|
height: 45px;
|
||||||
|
margin-top: 35px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__all_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.oneComment {
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 20px;
|
||||||
|
&_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-right: 12px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
height: 400px;
|
||||||
|
width: 300px;
|
||||||
|
&__container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
height: 5000px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 48px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__line {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
stroke-width: 1px;
|
||||||
|
background-color: #D0D2D8;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
&__close {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: absolute;
|
||||||
|
height: 96px;
|
||||||
|
height: 45px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 58.625px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
line-height: normal;
|
||||||
|
top: 0px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
&__question {
|
||||||
|
&_number {
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&_containerSecond {
|
||||||
|
width: 48%;
|
||||||
|
height: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&_user {
|
||||||
|
&_img {
|
||||||
|
margin-right: 25px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_like {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 5px 0 0 10px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_input {
|
||||||
|
margin-top: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 100%;
|
||||||
|
height: 235px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
&_containerThird {
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
&_button {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #FD0;
|
||||||
|
width: 190px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.gray {
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 140px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
263
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
263
src/Components/MeetAuthPageAdmin/index.jsx
Normal file
@@ -0,0 +1,263 @@
|
|||||||
|
import Header from "../Header";
|
||||||
|
import styles from './style.module.scss';
|
||||||
|
import clock from '../../img/MeetPage/Clock.png';
|
||||||
|
import globe from '../../img/MeetPage/Globe.png';
|
||||||
|
import avatar from '../../img/MeetPage/avatar.png';
|
||||||
|
import like from '../../img/MeetPage/Facebook.png';
|
||||||
|
import Card from "../Card";
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
// import { useState, CSSProperties, useEffect, useRef } from "react";
|
||||||
|
import newAvatar from '../../img/MeetPage/newAvatar.png';
|
||||||
|
import vk from '../../img/MeetPage/Vk.png';
|
||||||
|
import tg from '../../img/MeetPage/Telegram.png';
|
||||||
|
import book from '../../img/MeetPage/Book.png';
|
||||||
|
import * as React from 'react';
|
||||||
|
import Modal from '@mui/material/Modal';
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: "56%",
|
||||||
|
height: "80vh",
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
borderRadius: '25px',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
const MeetPage = () => {
|
||||||
|
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const handleOpen = () => setOpen(true);
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
<section className={styles.meets}>
|
||||||
|
<div className={styles.meets__mainInfo_container}>
|
||||||
|
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||||
|
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||||
|
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||||
|
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.meets__img}></div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<div className={styles.container}>
|
||||||
|
|
||||||
|
<div className={styles.meets__otziv_container}>
|
||||||
|
<div className={styles.newMeeting__container}>
|
||||||
|
<button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
|
||||||
|
<a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
|
||||||
|
<a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
|
||||||
|
</div>
|
||||||
|
<div onClick={handleOpen} className={styles.meets__otziv}>
|
||||||
|
<span className={styles.meets__otziv_title}>Оставить вопрос</span>
|
||||||
|
Оставьте вопрос первым
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className={styles.aboutMeet}>
|
||||||
|
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||||
|
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||||
|
</section>
|
||||||
|
<section className={styles.expert}>
|
||||||
|
<div className={styles.expert__title}>Специалист</div>
|
||||||
|
<div className={styles.newContainer}>
|
||||||
|
<div className={styles.expert__container}>
|
||||||
|
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||||
|
|
||||||
|
<div className={styles.expert__descr_container}>
|
||||||
|
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||||
|
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||||
|
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||||
|
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className={styles.container__links}>
|
||||||
|
<div className={styles.links__title}>Ссылки на материалы специалиста</div>
|
||||||
|
<div className={styles.links__img_container}>
|
||||||
|
<a href="#"><img src={vk} className={styles.links__img}></img></a>
|
||||||
|
<a href="#"><img src={tg} className={styles.links__img}></img></a>
|
||||||
|
<a href="#"><img src={book} className={styles.links__img}></img></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.comments}>
|
||||||
|
<div className={styles.comments__title}>Комментарии</div>
|
||||||
|
<div className={styles.newInputContainer}>
|
||||||
|
<div className={styles.comments__number}>3 КОММЕНТАРИЯ</div>
|
||||||
|
<div className={styles.comments__input_container}>
|
||||||
|
<div className={styles.comments__input_img_container}>
|
||||||
|
<img className={styles.comments__input_img} src={newAvatar} alt='avatar'></img>
|
||||||
|
<textarea placeholder="Дмитрий Кирканов" className={styles.comments__input}></textarea>
|
||||||
|
</div>
|
||||||
|
<div className={styles.comments__button_container}>
|
||||||
|
<button className={styles.comments__button}>ОТПРАВИТЬ</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.comments__all_container}>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__container}>
|
||||||
|
<div className={styles.oneComment__img}><img alt='avatar' src={newAvatar}></img></div>
|
||||||
|
<div className={styles.oneComment__descr_container}>
|
||||||
|
<div className={styles.oneComment__descr_title_container}>
|
||||||
|
<div className={styles.oneComment__descr_title}><span className={styles.yellowSpan}>Д</span>митрий Кирсанов</div>
|
||||||
|
<div className={styles.oneComment__descr_time}>4 мая 1990, 00:00</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.oneComment__descr}>
|
||||||
|
Хорошее мероприятие, специалист знает свое дело
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section className={styles.someMeetings}>
|
||||||
|
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||||
|
<Box sx={{ flexGrow: 1 }}>
|
||||||
|
<Grid container spacing={1}>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={4} lg={3} >
|
||||||
|
<Card></Card>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
</section>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={style}>
|
||||||
|
<div className={styles.modal__title}>Вопросы</div>
|
||||||
|
<div onClick={handleClose} className={styles.modal__close}><div className={styles.modal__close_img}>+</div></div>
|
||||||
|
<div className={styles.modal__line}></div>
|
||||||
|
<div className={styles.modal__question_number}>Всего <span>1</span></div>
|
||||||
|
<div className={styles.modal__question_container}>
|
||||||
|
<div className={styles.modal__question_containerSecond}>
|
||||||
|
<div className={styles.modal__question_user}>
|
||||||
|
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||||
|
<div className={styles.modal__question_user_descr}>Задача организации, в особенности же начало повседневной работы по формированию позиции обеспечивает актуальность приоретизации разума над эмоциями. </div>
|
||||||
|
<div className={styles.modal__question_time_container}>
|
||||||
|
<div className={styles.modal__question_time}>4 мая 1990, 00:00</div>
|
||||||
|
<div className={styles.modal__question_like_container}><img src={like} alt='like' className={styles.modal__question_like_container}></img> <span className={styles.modal__question_like}>0</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.modal__question_containerThird}>
|
||||||
|
<div className={styles.modal__question_user_img_container}><img src={newAvatar} alt='avatar' className={styles.modal__question_user_img}></img> Дмитрий Кирсанов</div>
|
||||||
|
<textarea placeholder="Дмитрий Кирканов" className={styles.modal__question_input}></textarea>
|
||||||
|
<div className={styles.modal__question_button_container}>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.yellow}>Задать вопрос</button>
|
||||||
|
<button className={styles.modal__question_button + ' ' + styles.gray}>Отменить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
export default MeetPage;
|
||||||
595
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
595
src/Components/MeetAuthPageAdmin/style.module.scss
Normal file
@@ -0,0 +1,595 @@
|
|||||||
|
.meets {
|
||||||
|
margin-top: 150px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&__img {
|
||||||
|
width: 44%;
|
||||||
|
height: 300px;
|
||||||
|
background-color: #D9D9D9;
|
||||||
|
}
|
||||||
|
&__mainInfo {
|
||||||
|
&_container {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 30px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&_type {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
width: 110px;
|
||||||
|
height: 35px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_status {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_status_img {
|
||||||
|
height: 26px;
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__otziv {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
width: 44%;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
&_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.aboutMeet {
|
||||||
|
margin-top: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 0, 0, 0.90);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 110%; /* 27.6px */
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
border-radius: 10000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
&_container {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&_fullname {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_speciality {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
&_phone {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
&_email {
|
||||||
|
color: #2C41FF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.someMeetings {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.cards_container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.newMeeting {
|
||||||
|
&__container {
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__button {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--yellow, #FFED00);
|
||||||
|
height: 80px;
|
||||||
|
width: 450px;
|
||||||
|
}
|
||||||
|
&__link {
|
||||||
|
margin-top: 30px;
|
||||||
|
color: #2C41FF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&__ling_video {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 140px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.container__links {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
.links {
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
margin-top: 128px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
margin-top: 45px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
border-radius: 10000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellowSpan {
|
||||||
|
color: #FD0
|
||||||
|
}
|
||||||
|
.comments {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__number {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__input {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
background: #FFF;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: start;
|
||||||
|
padding-left: 20px;
|
||||||
|
text-align: start;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
padding-left: 30px;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
padding-top: 30px;
|
||||||
|
&_img {
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&_img_container {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
&_img {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.newInputContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__number {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 60px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__button {
|
||||||
|
border-radius: 5.833px;
|
||||||
|
background: var(--yellow, #FD0);
|
||||||
|
width: 200px;
|
||||||
|
height: 45px;
|
||||||
|
margin-top: 35px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__all_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.oneComment {
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 20px;
|
||||||
|
&_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-right: 12px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal {
|
||||||
|
background-color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
height: 400px;
|
||||||
|
width: 300px;
|
||||||
|
&__container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
height: 5000px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 48px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__line {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
stroke-width: 1px;
|
||||||
|
background-color: #D0D2D8;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
&__close {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
position: absolute;
|
||||||
|
height: 96px;
|
||||||
|
height: 45px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 58.625px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 200;
|
||||||
|
line-height: normal;
|
||||||
|
top: 0px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
&__question {
|
||||||
|
&_number {
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
span {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&_containerSecond {
|
||||||
|
width: 48%;
|
||||||
|
height: 250px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
&_user {
|
||||||
|
&_img {
|
||||||
|
margin-right: 25px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_like {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 5px 0 0 10px;
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_input {
|
||||||
|
margin-top: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 100%;
|
||||||
|
height: 235px;
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
&_containerThird {
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
&_button {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #FD0;
|
||||||
|
width: 190px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
.gray {
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 140px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
108
src/Components/MeetPage/index.jsx
Normal file
108
src/Components/MeetPage/index.jsx
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
import Header from "../Header";
|
||||||
|
import styles from './style.module.scss';
|
||||||
|
import clock from '../../img/MeetPage/Clock.png';
|
||||||
|
import globe from '../../img/MeetPage/Globe.png';
|
||||||
|
import avatar from '../../img/MeetPage/avatar.png';
|
||||||
|
import {useState} from 'react'
|
||||||
|
import { style } from "@mui/system";
|
||||||
|
// import Card from "../Card";
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
|
||||||
|
|
||||||
|
// const httpApiMethods = new HttpApiMethods()
|
||||||
|
// const meets = await httpApiMethods.GetMeetings()
|
||||||
|
|
||||||
|
const MeetPage = () => {
|
||||||
|
|
||||||
|
// const filterMeet = meets.filter( (item, index) => index <= 3 )
|
||||||
|
// console.log(filterMeet)
|
||||||
|
// const id = 0
|
||||||
|
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||||
|
// const meetPng = (id) => {
|
||||||
|
// console.log(httpApiMethods.APIURL_FILES + meets[id].speackerImage)
|
||||||
|
// return httpApiMethods.APIURL_FILES + meets[id].speackerImage
|
||||||
|
|
||||||
|
// }
|
||||||
|
// console.log(meetPng(id))
|
||||||
|
// function extractDateTime(dateString) {
|
||||||
|
// const dateTime = new Date(dateString);
|
||||||
|
// const date = dateTime.toLocaleDateString();
|
||||||
|
// const time = dateTime.toLocaleTimeString();
|
||||||
|
|
||||||
|
// return { date, time };
|
||||||
|
// }
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
<section className={styles.meets}>
|
||||||
|
<div className={styles.meets__mainInfo_container}>
|
||||||
|
<span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
|
||||||
|
<span className={styles.meets__mainInfo_type}>Психология</span>
|
||||||
|
<div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
|
||||||
|
<div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
|
||||||
|
</div>
|
||||||
|
{/* <div className={styles.meets__img}><img src={meetPng(id)}></img></div> */}
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<div className={styles.meets__otziv_container}>
|
||||||
|
<div className={styles.meets__otziv}>
|
||||||
|
<span className={styles.meets__otziv_title}>Отзывы</span>
|
||||||
|
Оставьте первый отзыв
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section className={styles.aboutMeet}>
|
||||||
|
<div className={styles.aboutMeet__title}>О мероприятии</div>
|
||||||
|
<div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
|
||||||
|
</section>
|
||||||
|
<section className={styles.expert}>
|
||||||
|
<div className={styles.expert__title}>Специалист</div>
|
||||||
|
<div className={styles.expert__container}>
|
||||||
|
<div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>
|
||||||
|
<div className={styles.expert__descr_container}>
|
||||||
|
<div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
|
||||||
|
<div className={styles.expert__descr_speciality}>Психолог, таролог</div>
|
||||||
|
<div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
|
||||||
|
<a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className={styles.someMeetings}>
|
||||||
|
<div className={styles.someMeetings__title}>Еще мероприятия</div>
|
||||||
|
<Box sx={{ flexGrow: 1 }}>
|
||||||
|
{/* <Grid container spacing={1}>
|
||||||
|
{Array.isArray(meets) ? (
|
||||||
|
filterMeet.map((item, index) => (
|
||||||
|
|
||||||
|
|
||||||
|
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||||
|
<div className='event_card' >
|
||||||
|
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||||
|
<div className="taggs">
|
||||||
|
<div className='tagged'>{item.tags}</div>
|
||||||
|
<div className="feautures">{item.type}</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="event-card__title">{item.title}</h4>
|
||||||
|
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Неверный тип данных с сервера!</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</Grid> */}
|
||||||
|
</Box>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
export default MeetPage;
|
||||||
226
src/Components/MeetPage/style.module.scss
Normal file
226
src/Components/MeetPage/style.module.scss
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
.meets {
|
||||||
|
margin-top: 150px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&__img {
|
||||||
|
width: 44%;
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
|
|
||||||
|
img {
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__mainInfo {
|
||||||
|
&_container {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
&_descr {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 30px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
&_type {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 25px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
width: 110px;
|
||||||
|
height: 35px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_status {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_time {
|
||||||
|
margin-top: 40px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_status_img {
|
||||||
|
height: 26px;
|
||||||
|
width: 30px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__otziv {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 300px;
|
||||||
|
width: 44%;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
margin-top: 50px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
&_title {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.aboutMeet {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 0, 0, 0.90);
|
||||||
|
font-family: Inter;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 110%; /* 27.6px */
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
border-radius: 10000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.expert {
|
||||||
|
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
margin-top: 60px;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
&_container {
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&_fullname {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
&_speciality {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
&_phone {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
&_email {
|
||||||
|
color: #2C41FF;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.someMeetings {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 200px;
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 56px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.cards_container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
55
src/Components/Menu/index.jsx
Normal file
55
src/Components/Menu/index.jsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Menu from '@mui/material/Menu';
|
||||||
|
import MenuItem from '@mui/material/MenuItem';
|
||||||
|
import avatar from '../../img/headerImg/avatar.png'
|
||||||
|
import { useNavigate } from "react-router-dom";;
|
||||||
|
import styles from './style.module.scss';
|
||||||
|
export default function BasicMenu() {
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
const handleClick = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const handleHome = () => {
|
||||||
|
navigate('/');
|
||||||
|
setAnchorEl(null);
|
||||||
|
}
|
||||||
|
const handleProfile = () => {
|
||||||
|
navigate('/profile');
|
||||||
|
setAnchorEl(null);
|
||||||
|
}
|
||||||
|
const handleAtchive = () => {
|
||||||
|
navigate('/achievements');
|
||||||
|
setAnchorEl(null);
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
className={styles.header_img}
|
||||||
|
aria-controls={open ? 'basic-menu' : undefined}
|
||||||
|
aria-expanded={open ? 'true' : undefined}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
</img>
|
||||||
|
<Menu
|
||||||
|
id="basic-menu"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
MenuListProps={{
|
||||||
|
'aria-labelledby': 'basic-button',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={handleProfile}>Профиль</MenuItem>
|
||||||
|
<MenuItem onClick={handleAtchive}>Достижения</MenuItem>
|
||||||
|
<MenuItem onClick={handleHome}>Выйти</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
8
src/Components/Menu/style.module.scss
Normal file
8
src/Components/Menu/style.module.scss
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
.header {
|
||||||
|
&_img {
|
||||||
|
|
||||||
|
width: 55px;
|
||||||
|
margin-right: 40px;
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
61
src/Components/TableMeets/TableMeets.jsx
Normal file
61
src/Components/TableMeets/TableMeets.jsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
let Table = styled.div({
|
||||||
|
width: 1520,
|
||||||
|
border: '1px solid black'
|
||||||
|
});
|
||||||
|
|
||||||
|
let List = styled.div({
|
||||||
|
display: 'flex',
|
||||||
|
// justifyContent: 'center'
|
||||||
|
});
|
||||||
|
|
||||||
|
let Date = styled.span({
|
||||||
|
marginRight: 100
|
||||||
|
});
|
||||||
|
let Time = styled.span({
|
||||||
|
marginRight: 100
|
||||||
|
});
|
||||||
|
let Name = styled.span({
|
||||||
|
marginRight: 100
|
||||||
|
});
|
||||||
|
|
||||||
|
const TableMeets = ({ events }) => {
|
||||||
|
const [isOpenMap, setIsOpenMap] = useState({});
|
||||||
|
|
||||||
|
const toggleDropdown = (eventId) => {
|
||||||
|
setIsOpenMap((prevIsOpenMap) => ({
|
||||||
|
...prevIsOpenMap,
|
||||||
|
[eventId]: !prevIsOpenMap[eventId]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table>
|
||||||
|
<ul>
|
||||||
|
{events.map((event) => (
|
||||||
|
<li key={event.id}>
|
||||||
|
<div>
|
||||||
|
<Date>{event.date}</Date>
|
||||||
|
<Time>{event.time}</Time>
|
||||||
|
<Name>{event.title}</Name>
|
||||||
|
<span>
|
||||||
|
<button onClick={() => toggleDropdown(event.id)}>Показать список мероприятий</button>
|
||||||
|
</span>
|
||||||
|
{isOpenMap[event.id] && (
|
||||||
|
<div>
|
||||||
|
<span>{event.speaker}</span>
|
||||||
|
<img src={event.avatar} alt={event.speaker} />
|
||||||
|
<p>{event.description}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</Table>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableMeets;
|
||||||
54
src/Components/TableMeets/style.module.scss
Normal file
54
src/Components/TableMeets/style.module.scss
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
|
||||||
|
.container {
|
||||||
|
background: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
padding: 20px;
|
||||||
|
animation: fade-in 1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background: #000000;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting {
|
||||||
|
&__cards {
|
||||||
|
list-style-type: none;
|
||||||
|
width: 80%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
&__container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
// &__arrow {
|
||||||
|
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
22
src/Components/UserHeader/index.jsx
Normal file
22
src/Components/UserHeader/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
|
||||||
|
import styles from './style.module.scss';
|
||||||
|
import logo from '../../img/headerImg/OgettoLogo.png';
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const handleHome = () => {
|
||||||
|
navigate('/');
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.header__container}>
|
||||||
|
<header className={styles.header}>
|
||||||
|
<div className={styles.header__logo} onClick={handleHome} ><img onClick={handleHome} src={logo} alt="logo"></img></div>
|
||||||
|
<button className={styles.header__button}>ВХОД</button>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
export default Header;
|
||||||
39
src/Components/UserHeader/style.module.scss
Normal file
39
src/Components/UserHeader/style.module.scss
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 75px;
|
||||||
|
width: 80%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
background-color: #fff;
|
||||||
|
left: 0px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
&__logo {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
&__button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #FFED00;
|
||||||
|
width: 200px;
|
||||||
|
height: 42px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 25px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
.title{font-size:100px}/*# sourceMappingURL=module.style.css.map */
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"version":3,"sources":["../HomePage/module.style.scss"],"names":[],"mappings":"AAEA,OACI,eAAA","file":"module.style.css"}
|
|
||||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
|||||||
{"version":3,"sources":["../Header/style.module.scss"],"names":[],"mappings":"AAEA,QACI,WAAA,CACA,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,mBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,UAAA,CACA,YAAA,CACA,iBAAA,CACA,OAAA,CACA,QAAA,CAEJ,cACI,cAAA,CAEJ,gBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,mBAAA,CACA,kBAAA,CACA,WAAA,CACA,WAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA","file":"style.module.css"}
|
{"version":3,"sources":["../MeetAuthPage/style.module.scss"],"names":[],"mappings":"AAAA,OACI,gBAAA,CACA,UAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CACA,YACI,SAAA,CACA,YAAA,CACA,wBAAA,CAGA,2BACI,SAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,wBAAA,CAAA,mBAAA,CAEJ,uBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,sBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,kBAAA,CACA,uCAAA,CACA,WAAA,CACA,WAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,4BAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,wBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,sBACI,eAAA,CAEA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAEJ,4BACI,WAAA,CACA,UAAA,CACA,iBAAA,CAGR,cACI,iBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,kBAAA,CACA,YAAA,CACA,SAAA,CACA,4CAAA,CACA,eAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,oBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,iBAAA,CACA,SAAA,CACA,OAAA,CAEJ,wBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAKZ,WACI,gBAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,kBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,kBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,eAAA,CACA,oBAAA,CACA,iBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,gBAAA,CAIR,QAEI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,gBAAA,CACA,eACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,aACI,qBAAA,CAQJ,mBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAGJ,aACI,WAAA,CACA,YAAA,CACA,uBACI,iBAAA,CAQJ,yBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,eAAA,CAEA,uBAAA,CAAA,oBAAA,CAAA,sBAAA,CAEJ,wBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAEJ,0BACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,cAAA,CAEJ,qBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,qBACI,aAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAIZ,cAEI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CACA,gBAAA,CACA,qBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CAIR,iBACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CAGA,uBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,2BAAA,CAAA,4BAAA,CAAA,yBAAA,CAAA,qBAAA,CAEJ,oBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,kBAAA,CACA,iCAAA,CACA,WAAA,CACA,WAAA,CAEJ,kBACI,eAAA,CACA,aAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CAEJ,wBACI,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,gBAAA,CACA,eAAA,CAGR,cACI,mBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,wBAAA,CAAA,qBAAA,CAAA,6BAAA,CAEJ,kBACI,SAAA,CAIA,cACI,gBAAA,CACA,UAAA,CACA,sBAAA,CACA,cAAA,CACA,iBAAA,CACA,eAAA,CACA,kBAAA,CACA,eAAA,CACA,gBAAA,CAEJ,YACI,iBAAA,CAEA,sBACI,eAAA,CACA,mBAAA,CAAA,mBAAA,CAAA,YAAA","file":"style.module.css"}
|
||||||
42
src/Components/modal/index.jsx
Normal file
42
src/Components/modal/index.jsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import Typography from '@mui/material/Typography';
|
||||||
|
import Modal from '@mui/material/Modal';
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
width: 400,
|
||||||
|
bgcolor: 'background.paper',
|
||||||
|
border: '2px solid #000',
|
||||||
|
boxShadow: 24,
|
||||||
|
p: 4,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function BasicModal(open, close) {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
open={open}
|
||||||
|
onClose={close}
|
||||||
|
aria-labelledby="modal-modal-title"
|
||||||
|
aria-describedby="modal-modal-description"
|
||||||
|
>
|
||||||
|
<Box sx={style}>
|
||||||
|
<Typography id="modal-modal-title" variant="h6" component="h2">
|
||||||
|
Text in a modal
|
||||||
|
</Typography>
|
||||||
|
<Typography id="modal-modal-description" sx={{ mt: 2 }}>
|
||||||
|
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
74
src/Components/profilePage/index.jsx
Normal file
74
src/Components/profilePage/index.jsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import Header from "../Header";
|
||||||
|
import styles from "./style.module.scss"
|
||||||
|
import Calendar from "../Calendar";
|
||||||
|
import avatar from '../../img/profilePage/avatar.png';
|
||||||
|
import gift from '../../img/profilePage/gift.png';
|
||||||
|
// import Home from '../Home/Home';
|
||||||
|
const ProfilePage = () => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header></Header>
|
||||||
|
<section className={styles.profile__container}>
|
||||||
|
<div className={styles.profile__user_container}>
|
||||||
|
<div className={styles.profile__user_img_container}>
|
||||||
|
<img src={avatar} className={styles.profile__user_img}></img>
|
||||||
|
<div className={styles.profile__user_role}>Участник</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.profile__user_info_container}>
|
||||||
|
<div className={styles.profile__user_fullName}><span>К</span>ирсанов Дмитрий </div>
|
||||||
|
<div className={styles.profile__user_spaciality}>Junior PHP разработчик</div>
|
||||||
|
<div className={styles.profile__user_socialMedia}>TG: @dkir</div>
|
||||||
|
<div className={styles.profile__user_email}>gmail@gmail.com</div>
|
||||||
|
<div className={styles.profile__user_progress_container}>
|
||||||
|
<span>0</span>
|
||||||
|
<span className={styles.profile__user_progress_line}></span>
|
||||||
|
<span>1</span>
|
||||||
|
<img src={gift} className={styles.profile__user_progress_img}></img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.calendar__container}>
|
||||||
|
<Calendar></Calendar>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section className={styles.myMeets}>
|
||||||
|
<div className={styles.myMeets__title}>Ваши мероприятия</div>
|
||||||
|
<div className={styles.meeting__container}>
|
||||||
|
<input className={styles.meeting__inputs} placeholder="Найти мероприятие"></input>
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={styles.select__container}>
|
||||||
|
<select className={styles.select} name="time__meeting">
|
||||||
|
<option value="">Время мироприятия</option>
|
||||||
|
</select>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.NewContainer}>
|
||||||
|
<div className={styles.search_container}>
|
||||||
|
<div className={styles.search__descr}>100 мероприятий</div>
|
||||||
|
<select className={styles.select} name="type__meeting">
|
||||||
|
<option value="">Тип мероприятия</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.cards__container}>
|
||||||
|
<div className={styles.card}></div>
|
||||||
|
</div>
|
||||||
|
{/* <Home></Home> */}
|
||||||
|
{/* <FetchUtils></FetchUtils> */}
|
||||||
|
{/* <PostForm /> */}
|
||||||
|
{/* <EditForm /> */}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
export default ProfilePage;
|
||||||
154
src/Components/profilePage/style.module.scss
Normal file
154
src/Components/profilePage/style.module.scss
Normal file
@@ -0,0 +1,154 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.profile {
|
||||||
|
|
||||||
|
&__container {
|
||||||
|
margin-top: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
&__user {
|
||||||
|
&_img {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
&_info_container {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&_fullName {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 36px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
span {
|
||||||
|
color: #FD0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&_spaciality {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 32px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_socialMedia {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_email {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 20px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
&_role {
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
&_progress {
|
||||||
|
&_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
&_line {
|
||||||
|
height: 2px;
|
||||||
|
width: 140%;
|
||||||
|
background: linear-gradient(90deg, #ffdd00,#d0d2d8);
|
||||||
|
padding: 0 30px 0 30px;
|
||||||
|
margin: 0 10px 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.meeting {
|
||||||
|
&__container {
|
||||||
|
height: 1400px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
&__inputs {
|
||||||
|
width: 90%;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.select {
|
||||||
|
margin-right: 50px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_stroke, #D0D2D8);
|
||||||
|
width: 200px;
|
||||||
|
&__container {
|
||||||
|
display: flex;
|
||||||
|
width: 93%;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.NewContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.search_container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.search__descr {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
.myMeets {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: start;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: start;
|
||||||
|
&__title {
|
||||||
|
margin-top: 150px;
|
||||||
|
color: #000;
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 52px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
71
src/components/Home/Home.jsx
Normal file
71
src/components/Home/Home.jsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
// import React from 'react';
|
||||||
|
// import './style.css'
|
||||||
|
// import styled from 'styled-components';
|
||||||
|
// // import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
// import {useState} from 'react'
|
||||||
|
// import EditForm from '../post/Meets';
|
||||||
|
// import Grid from '@mui/material/Grid';
|
||||||
|
// import Card from '../Card';
|
||||||
|
// import Box from '@mui/material/Box';
|
||||||
|
|
||||||
|
// function extractDateTime(dateString) {
|
||||||
|
// const dateTime = new Date(dateString);
|
||||||
|
// const date = dateTime.toLocaleDateString();
|
||||||
|
// const time = dateTime.toLocaleTimeString();
|
||||||
|
|
||||||
|
// return { date, time };
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const httpApiMethods = new HttpApiMethods()
|
||||||
|
|
||||||
|
// const meets = await httpApiMethods.GetMeetings()
|
||||||
|
|
||||||
|
|
||||||
|
// const Home = () => {
|
||||||
|
// const [count, setCount] = useState(7)
|
||||||
|
|
||||||
|
// const filterMeet = meets.filter( (item, index) => index <= count )
|
||||||
|
// const allMeets = () => {
|
||||||
|
// setCount(meets.length)
|
||||||
|
// }
|
||||||
|
// return (
|
||||||
|
// <>
|
||||||
|
// <Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||||
|
// <Grid container sx={{width: '96%'}}>
|
||||||
|
|
||||||
|
|
||||||
|
// {Array.isArray(meets) ? (
|
||||||
|
// filterMeet.map((item, index) => (
|
||||||
|
|
||||||
|
|
||||||
|
// <Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||||
|
// <div className='event_card' >
|
||||||
|
// <div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||||
|
// <div className="taggs">
|
||||||
|
// <div className='tagged'>{item.tags}</div>
|
||||||
|
// <div className="feautures">{item.type}</div>
|
||||||
|
// </div>
|
||||||
|
// <h4 className="event-card__title">{item.title}</h4>
|
||||||
|
// <p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||||
|
// </div>
|
||||||
|
// </Grid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ))
|
||||||
|
// ) : (
|
||||||
|
// <p>Неверный тип данных с сервера!</p>
|
||||||
|
// )}
|
||||||
|
// {/* <EditForm></EditForm> */}
|
||||||
|
// </Grid>
|
||||||
|
// </Box>
|
||||||
|
// <div className='allButton__container'>
|
||||||
|
// <button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||||
|
// </div>
|
||||||
|
// </>
|
||||||
|
|
||||||
|
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
|
||||||
|
// export default Home;
|
||||||
110
src/components/Home/style.css
Normal file
110
src/components/Home/style.css
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
.event_card {
|
||||||
|
width: 292px;
|
||||||
|
height: 586px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-top: 100px;
|
||||||
|
margin-right: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-left: 40px;
|
||||||
|
/* max-width: 1521px; */
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_date {
|
||||||
|
color: var(--gray_text, #888);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
/* title */
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 22px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card__photo {
|
||||||
|
width: 292px;
|
||||||
|
height: 340px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: #D9D9D9;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.event-card_title {
|
||||||
|
color: #000;
|
||||||
|
|
||||||
|
font-family: Montserrat;
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 292px;
|
||||||
|
height: 340px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.feautures {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-family: Montserrat;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 8px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #E7FFD2;
|
||||||
|
height: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagged {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--gray_text, #888);
|
||||||
|
}
|
||||||
|
.taggs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.allButton {
|
||||||
|
color: var(--Black_Text, #151515);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
/* Buttom max */
|
||||||
|
font-family: Gilroy;
|
||||||
|
font-size: 28px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 125%; /* 35px */
|
||||||
|
letter-spacing: -0.84px;
|
||||||
|
border-radius: 1000px;
|
||||||
|
border: 1px solid var(--Gray_Line, #D0D2D8);
|
||||||
|
width: 300px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.allButton__container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
11
src/components/delete/Reactions.jsx
Normal file
11
src/components/delete/Reactions.jsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const DeleteReactions = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DeleteReactions;
|
||||||
109
src/components/edit/EditMeetsForm.jsx
Normal file
109
src/components/edit/EditMeetsForm.jsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import React, { useRef, useState, useEffect } from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
|
||||||
|
const EditMeetsForm = () => {
|
||||||
|
const formRef = useRef(null);
|
||||||
|
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||||
|
const httpApiMethods = new HttpApiMethods();
|
||||||
|
|
||||||
|
const post = async (event) => {
|
||||||
|
event.preventDefault(); // Предотвращение действия по умолчанию
|
||||||
|
let formData = new FormData(formRef.current);
|
||||||
|
setDataIsLoad(false);
|
||||||
|
const updatedMeets = await httpApiMethods.EditMeetings(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleData = (data) => {
|
||||||
|
if (Array.isArray(data) && data.length > 0) {
|
||||||
|
setData(data);
|
||||||
|
} else {
|
||||||
|
setData([]);
|
||||||
|
console.error('Неверный тип данных с сервера!');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
const data = await httpApiMethods.GetMeetings();
|
||||||
|
handleData(data);
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [selectedId, setSelectedId] = useState('');
|
||||||
|
const [selectedData, setSelectedData] = useState(null);
|
||||||
|
|
||||||
|
const handleDataClick = (id) => {
|
||||||
|
const selected = data.find((item) => item.id === id);
|
||||||
|
setSelectedData(selected);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setSelectedId(event.target.value);
|
||||||
|
const selected = data.find((item) => item.id === event.target.value);
|
||||||
|
setSelectedData(selected);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const FillInputs = () => {
|
||||||
|
httpApiMethods.GetByID()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Edit</h2>
|
||||||
|
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{Array.isArray(data) && data.length > 0 ? (
|
||||||
|
data.map((item, index) => (
|
||||||
|
<button style={{ border: '1px solid black' }} onClick={() => handleDataClick(item.id)} key={index}>
|
||||||
|
{/* {item.id} */}
|
||||||
|
<div>{item.title}</div>
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Неверный тип данных с сервера!</p>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
{/* автозаполнение инпутов */}
|
||||||
|
{selectedData && (
|
||||||
|
<>
|
||||||
|
<form ref={formRef}>
|
||||||
|
<select name="id" value={selectedData.id} onChange={handleChange}>
|
||||||
|
{data.map((item) => (
|
||||||
|
<option key={item.id} value={item.id}>
|
||||||
|
{item.id}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{/* <input type="text" placeholder='id' name='id' value={selectedData.id} onChange={handleChange} /> */}
|
||||||
|
<input type="text" placeholder='name' name='title' value={selectedData.title} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='time' name='time' value={selectedData.time} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='theme' name='theme' value={selectedData.theme} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='speakerName' name='speakerName' value={selectedData.speakerName} onChange={handleChange} />
|
||||||
|
<input type="file" placeholder='speackerImage' name='speackerImage' onChange={handleChange} />
|
||||||
|
<input type="file" placeholder='placeImages' name='placeImages' onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='splecializations' name='splecializations' value={selectedData.splecializations} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='speakerEmail' name='speakerEmail' value={selectedData.speakerEmail} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='tags' name='tags' value={selectedData.tags} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone' value={selectedData.speakerTelephone} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='type' name='type' value={selectedData.type} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='urls' name='urls' value={selectedData.urls} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='placeAdress' name='placeAdress' value={selectedData.placeAdress} onChange={handleChange} />
|
||||||
|
<input type="text" placeholder='duration' name='duration' value={selectedData.duration} onChange={handleChange} />
|
||||||
|
<button onClick={post}>Edit</button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditMeetsForm;
|
||||||
11
src/components/edit/EditQuestions.jsx
Normal file
11
src/components/edit/EditQuestions.jsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const EditQuestions = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditQuestions;
|
||||||
11
src/components/edit/EditReviews.jsx
Normal file
11
src/components/edit/EditReviews.jsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const EditReviews = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditReviews;
|
||||||
11
src/components/edit/EditUsers.jsx
Normal file
11
src/components/edit/EditUsers.jsx
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const EditUsers = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default EditUsers;
|
||||||
82
src/components/get/Meets.jsx
Normal file
82
src/components/get/Meets.jsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import './style.css'
|
||||||
|
import styled from 'styled-components';
|
||||||
|
// import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
import {useState} from 'react'
|
||||||
|
import EditMeetsForm from '../edit/EditMeetsForm';
|
||||||
|
import Grid from '@mui/material/Grid';
|
||||||
|
// import Card from '../Card';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function extractDateTime(dateString) {
|
||||||
|
const dateTime = new Date(dateString);
|
||||||
|
const date = dateTime.toLocaleDateString();
|
||||||
|
const time = dateTime.toLocaleTimeString();
|
||||||
|
|
||||||
|
return { date, time };
|
||||||
|
}
|
||||||
|
|
||||||
|
const httpApiMethods = new HttpApiMethods()
|
||||||
|
|
||||||
|
const meets = await httpApiMethods.GetMeetings()
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const MeetsGetByID = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const GetMeets = () => {
|
||||||
|
const [count, setCount] = useState(7)
|
||||||
|
|
||||||
|
const filterMeet = meets.filter( (item, index) => index <= count )
|
||||||
|
const allMeets = () => {
|
||||||
|
setCount(meets.length)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Box sx={{ flexGrow: 1, display: 'flex', justifyContent: 'flex-end', alignItems:'center'}}>
|
||||||
|
<Grid container sx={{width: '96%'}}>
|
||||||
|
|
||||||
|
|
||||||
|
{Array.isArray(meets) ? (
|
||||||
|
filterMeet.map((item, index) => (
|
||||||
|
|
||||||
|
|
||||||
|
<Grid item sm={6} xl={3} md={6} lg={4} key={index}>
|
||||||
|
<div className='event_card' >
|
||||||
|
<div className="event-card__photo"><img className='img' src={httpApiMethods.APIURL_FILES + item.speackerImage} alt="{item.speackerImage}" /></div>
|
||||||
|
<div className="taggs">
|
||||||
|
<div className='tagged'>{item.tags}</div>
|
||||||
|
<div className="feautures">{item.type}</div>
|
||||||
|
</div>
|
||||||
|
<h4 className="event-card__title">{item.title}</h4>
|
||||||
|
<p className="event-card__date">{extractDateTime(item.time).date}, в {extractDateTime(item.time).time} по Московскому времени</p>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Неверный тип данных с сервера!</p>
|
||||||
|
)}
|
||||||
|
{/* <EditForm></EditForm> */}
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
<div className='allButton__container'>
|
||||||
|
<button onClick={allMeets} className='allButton'>Все мероприятия</button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GetMeets;
|
||||||
53
src/components/get/Questions.jsx
Normal file
53
src/components/get/Questions.jsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
|
||||||
|
const httpApiMethods = new HttpApiMethods
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const GetQuestions = async () => {
|
||||||
|
const questions = await httpApiMethods.GetQuestions()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
{Array.isArray(questions) ? (
|
||||||
|
questions.map((item, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<div>{item.id}</div>
|
||||||
|
<div>{item.text}</div>
|
||||||
|
<div>{item.meetingId}</div>
|
||||||
|
<div>{item.userId}</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Неверный тип данных с сервера!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const GetQuestionsByID = async (id) => {
|
||||||
|
const question = await httpApiMethods.GetByIDQuestions(id)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{Array.isArray(question) ? (
|
||||||
|
question.map((item, index) => (
|
||||||
|
<div key={index}>
|
||||||
|
<div>{item.id}</div>
|
||||||
|
<div>{item.text}</div>
|
||||||
|
<div>{item.meetingId}</div>
|
||||||
|
<div>{item.userId}</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Неверный тип данных с сервера!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GetQuestionsByID;
|
||||||
19
src/components/get/Reactions.jsx
Normal file
19
src/components/get/Reactions.jsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const GetByIDReactions = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const getReactions = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Reactions;
|
||||||
19
src/components/get/Reviews.jsx
Normal file
19
src/components/get/Reviews.jsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const GetReviews = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const GetReviewsByID = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GetReviewsByID;
|
||||||
36
src/components/get/User.jsx
Normal file
36
src/components/get/User.jsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
const User = () => {
|
||||||
|
let id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||||
|
// Cookies.set('userId')
|
||||||
|
const user = new HttpApiMethods().GetUsers(id)
|
||||||
|
|
||||||
|
if (!Array.isArray(user)) {
|
||||||
|
return <p>Неверный тип данных с сервера!</p>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{user.map((item, index) => (
|
||||||
|
|
||||||
|
<div key={index}>
|
||||||
|
<p>{item.id}</p>
|
||||||
|
<img src={item.avatarUrl} alt={item.avatarUrl}/>
|
||||||
|
<p>{item.fio}</p>
|
||||||
|
<p>{item.specialities}</p>
|
||||||
|
<a>{item.telegramBotUrl}</a>
|
||||||
|
<p>{item.level}</p>
|
||||||
|
<p>{item.userName}</p>
|
||||||
|
<p>{item.normalizedUserName}</p>
|
||||||
|
<p>{item.email}</p>
|
||||||
|
<p>{item.phoneNumber}</p>
|
||||||
|
<p>{item.id}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default User;
|
||||||
48
src/components/post/Meets.jsx
Normal file
48
src/components/post/Meets.jsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
|
||||||
|
|
||||||
|
const PostForm = () => {
|
||||||
|
const formRef = useRef(null); // Добавление этой строки
|
||||||
|
const [dataIsLoad, setDataIsLoad] = useState(false)
|
||||||
|
|
||||||
|
let post = async () => {
|
||||||
|
const httpApiMethods = new HttpApiMethods();
|
||||||
|
let formData = new FormData(formRef.current); // Изменение этой строки
|
||||||
|
setDataIsLoad(false)
|
||||||
|
const updatedMeets = httpApiMethods.AddMeetings(formData)
|
||||||
|
.then(
|
||||||
|
() => {
|
||||||
|
setDataIsLoad(true)
|
||||||
|
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Post</h2>
|
||||||
|
<div>{dataIsLoad ? "ДАнные успешно загрузилисб" : ""}</div>
|
||||||
|
<form ref={formRef} action=''>
|
||||||
|
<input type="text" placeholder='title' name='title'/>
|
||||||
|
<input type="text" placeholder='time' name='time'/>
|
||||||
|
<input type="text" placeholder='theme' name='theme'/>
|
||||||
|
<input type="text" placeholder='speakerName' name='speakerName'/>
|
||||||
|
<input type="file" placeholder='speackerImage' name='speackerImage'/>
|
||||||
|
<input type="file" placeholder='placeImages' name='placeImages'/>
|
||||||
|
<input type="text" placeholder='splecializations' name='splecializations'/>
|
||||||
|
<input type="text" placeholder='speakerEmail' name='speakerEmail'/>
|
||||||
|
<input type="text" placeholder='type' name='type'/>
|
||||||
|
<input type="text" placeholder='SpeakerTelephone' name='speakerTelephone'/>
|
||||||
|
<input type="text" placeholder='tags' name='tags'/>
|
||||||
|
<input type="text" placeholder='urls' name='urls'/>
|
||||||
|
<input type="text" placeholder='placeAdress' name='placeAdress'/>
|
||||||
|
<input type="text" placeholder='duration' name='duration'/>
|
||||||
|
<button onClick={post}>Create</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PostForm;
|
||||||
13
src/components/post/PostReviews.jsx
Normal file
13
src/components/post/PostReviews.jsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const PostReviews = () => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PostReviews;
|
||||||
51
src/components/post/Questions.jsx
Normal file
51
src/components/post/Questions.jsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
const Questions = () => {
|
||||||
|
const formRef = useRef(null);
|
||||||
|
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||||
|
const [curentUser, setCurentUser] = useState(null);
|
||||||
|
|
||||||
|
let post = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const httpApiMethods = new HttpApiMethods();
|
||||||
|
const user_id = Cookies.get('userData')
|
||||||
|
let formData = new FormData(formRef.current);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('userId') || !formData.get('text') || !formData.get('meetingId')) {
|
||||||
|
console.error('Ошибка: Не все поля формы заполнены');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDataIsLoad(false);
|
||||||
|
httpApiMethods.PostQuestions(formData).then(response => {
|
||||||
|
console.log(response)
|
||||||
|
setDataIsLoad(true);
|
||||||
|
meets_id = '9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'
|
||||||
|
// let user_id = response.data.id;
|
||||||
|
// console.log(response)
|
||||||
|
// console.log(user_id)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Создание Questions, получение ID в Cookies</h2>
|
||||||
|
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||||
|
<form ref={formRef} action=''>
|
||||||
|
|
||||||
|
{/* <input type="text" placeholder='userId' name={Cookies.get('userData')} /> */}
|
||||||
|
<input type="text" placeholder='userId' name='userId' value={Cookies.get('userId')} />
|
||||||
|
<input type="text" placeholder='text' name='text' />
|
||||||
|
<input type="text" placeholder='meetingId' name='meetingId' value={'9c69d5e7-74ec-4f92-af3a-fef7d30c55bb'} />
|
||||||
|
<button onClick={post}>Create</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Questions;
|
||||||
13
src/components/post/UserAuth.jsx
Normal file
13
src/components/post/UserAuth.jsx
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const UserAuth = () => {
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserAuth;
|
||||||
58
src/components/post/Users.jsx
Normal file
58
src/components/post/Users.jsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
import { HttpApiMethods } from '../utils/FetchUtils';
|
||||||
|
import Cookies from 'js-cookie';
|
||||||
|
|
||||||
|
export const PostUserModerator = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const Users = () => {
|
||||||
|
const formRef = useRef(null);
|
||||||
|
const [dataIsLoad, setDataIsLoad] = useState(false);
|
||||||
|
const [curentUser, setCurentUser] = useState(null);
|
||||||
|
|
||||||
|
let post = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const httpApiMethods = new HttpApiMethods();
|
||||||
|
let formData = new FormData(formRef.current);
|
||||||
|
|
||||||
|
if (!formData.get('fio') || !formData.get('avatar') || !formData.get('username') || !formData.get('specialities') || !formData.get('telegramBotUrl')) {
|
||||||
|
console.error('Ошибка: Не все поля формы заполнены');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDataIsLoad(false);
|
||||||
|
httpApiMethods.PostUsers(formData).then(response => {
|
||||||
|
console.log(response)
|
||||||
|
setDataIsLoad(true);
|
||||||
|
// let user_id = response.data.id;
|
||||||
|
// console.log(response)
|
||||||
|
// console.log(user_id)
|
||||||
|
Cookies.set('userId', response.id);
|
||||||
|
Cookies.set('token', response.token)
|
||||||
|
// return user_id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2>Создание пользователя, получение ID в Cookies</h2>
|
||||||
|
<div>{dataIsLoad ? "Данные успешно загружены" : ""}</div>
|
||||||
|
<form ref={formRef} action=''>
|
||||||
|
<input type="text" placeholder='fio' name='fio' />
|
||||||
|
<input type="file" placeholder='avatar' name='avatar' />
|
||||||
|
<input type="text" placeholder='username' name='username' />
|
||||||
|
<input type="text" placeholder='specialities' name='specialities' />
|
||||||
|
<input type="text" placeholder='telegramBotUrl' name='telegramBotUrl' />
|
||||||
|
<button onClick={post}>Create</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Users;
|
||||||
0
src/components/post/postReactions.jsx
Normal file
0
src/components/post/postReactions.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
256
src/components/utils/FetchUtils.jsx
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
/* eslint-disable no-unused-vars */
|
||||||
|
import axios from "axios"
|
||||||
|
import { useState } from "react"
|
||||||
|
import './style.css'
|
||||||
|
import { Cookie } from "@mui/icons-material"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export class HttpApiMethods {
|
||||||
|
|
||||||
|
token;
|
||||||
|
HttpApiMethods()
|
||||||
|
{
|
||||||
|
token = Cookie,get('token')
|
||||||
|
}
|
||||||
|
// URL`s
|
||||||
|
user_id = '17e5fc7a-8f22-4c0b-8b33-5dc3a6937561'
|
||||||
|
APIURL = "https://cyberbloom.zetcraft.ru/api"
|
||||||
|
APIURL_FILES = "https://cyberbloom.zetcraft.ru/api/cyber-boom-files/"
|
||||||
|
// получение мероприятий по ID
|
||||||
|
GetByID = async (id) => {
|
||||||
|
|
||||||
|
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl)
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Получение всех мероприятий
|
||||||
|
//
|
||||||
|
GetMeetings = async () => {
|
||||||
|
let innerUrl = this.APIURL + `/meetings/list?offset=0&limit=20`;
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl);
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Создание мероприятия
|
||||||
|
AddMeetings = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/meetings`;
|
||||||
|
|
||||||
|
let response = await axios.postForm(innerUrl, data); //
|
||||||
|
return response.data;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Редактирование уже существующего мероприятия
|
||||||
|
EditMeetings = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/meetings`;
|
||||||
|
let response = await axios.putForm(innerUrl, data); //
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Удалить мероприятие, пока что не реализовано
|
||||||
|
DeleteMeetings = async (id) => {
|
||||||
|
let innerUrl = this.APIURL + `/meetings?id=${id}`
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl) //
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Users
|
||||||
|
//
|
||||||
|
PostUsers = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/users`
|
||||||
|
const responce = await axios.postForm(innerUrl, data)
|
||||||
|
return responce.data
|
||||||
|
}
|
||||||
|
PostUsersModerator = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/users/moderator`
|
||||||
|
const responce = await axios.postForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} })
|
||||||
|
return responce.data.id
|
||||||
|
}
|
||||||
|
EditUsers = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/users`
|
||||||
|
const responce = await axios.putForm(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }) //
|
||||||
|
return responce.data.id
|
||||||
|
}
|
||||||
|
GetUsers = async (id) => {
|
||||||
|
let innerUrl = this.APIURL + `/users?id=${id}`
|
||||||
|
|
||||||
|
const responce = await axios.get(innerUrl) //
|
||||||
|
|
||||||
|
return responce.data
|
||||||
|
}
|
||||||
|
GetUsersStats = async (id) => {
|
||||||
|
let innerUrl = this.APIURL + `/users/stats?id=${id}`
|
||||||
|
|
||||||
|
const responce = await axios.get(innerUrl) //
|
||||||
|
|
||||||
|
return responce.data
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Questions
|
||||||
|
//
|
||||||
|
GetByIDQuestions = async (id) => {
|
||||||
|
|
||||||
|
let innerUrl = this.APIURL + `/questions?id=${id}`
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl)
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Получение всех мероприятий
|
||||||
|
GetQuestions = async () => {
|
||||||
|
let innerUrl = this.APIURL + `/questions/list?offset=0&limit=20`;
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl);
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Создание мероприятия
|
||||||
|
PostQuestions = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/questions`;
|
||||||
|
|
||||||
|
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Редактирование уже существующего мероприятия
|
||||||
|
EditQuestions = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/questions`;
|
||||||
|
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reactions
|
||||||
|
//
|
||||||
|
GetByIDReactions = async (id) => {
|
||||||
|
|
||||||
|
let innerUrl = this.APIURL + `/reactions?id=${id}`
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl)
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Получение всех мероприятий
|
||||||
|
GetReactions = async () => {
|
||||||
|
let innerUrl = this.APIURL + `/reactions/list?offset=0&limit=20`;
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl);
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Создание мероприятия
|
||||||
|
PostReactions = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/reactions`;
|
||||||
|
|
||||||
|
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Редактирование уже существующего мероприятия
|
||||||
|
DeleteReactions = async (id) => {
|
||||||
|
let innerUrl = this.APIURL + `/reactions?id=${id}`;
|
||||||
|
let response = await axios.delete(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Reviews
|
||||||
|
//
|
||||||
|
GetByIDReviews = async (id) => {
|
||||||
|
|
||||||
|
let innerUrl = this.APIURL + `/reviews?id=${id}`
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl)
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
GetReviews = async () => {
|
||||||
|
let innerUrl = this.APIURL + `/reviews/list?offset=0&limit=20`;
|
||||||
|
|
||||||
|
const response = await axios.get(innerUrl);
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
// Создание мероприятия
|
||||||
|
PostReviews = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/reviews`;
|
||||||
|
|
||||||
|
let response = await axios.post(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
|
||||||
|
}
|
||||||
|
// Редактирование уже существующего мероприятия
|
||||||
|
EditReviews = async (data) => {
|
||||||
|
let innerUrl = this.APIURL + `/reviews`;
|
||||||
|
let response = await axios.put(innerUrl, data, { headers: {"Authorization" : `Bearer ${token}`} }); //
|
||||||
|
return response.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const FetchUtils = async () => {
|
||||||
|
const httpApiMethods = new HttpApiMethods() // Создание экземпляра класса HttpApiMethods
|
||||||
|
|
||||||
|
const meets = await httpApiMethods.GetMeetings()
|
||||||
|
const [user, setUser] = useState([])
|
||||||
|
|
||||||
|
// async function getData() {
|
||||||
|
// const response = await axios.get()
|
||||||
|
// console.log(response.data)
|
||||||
|
// setUser(response.data)
|
||||||
|
// }
|
||||||
|
|
||||||
|
const removeList = () => {
|
||||||
|
setUser([])
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button onClick={getData}>Click to Get Data</button>
|
||||||
|
<button onClick={removeList}>Click to Remove Data Listing</button>
|
||||||
|
{/* Mapping of data */}
|
||||||
|
<div>
|
||||||
|
{Array.isArray(meets) ? (
|
||||||
|
<ul>
|
||||||
|
{meets.map((item) => (
|
||||||
|
<ol key={item.id}>
|
||||||
|
<li>{item.title}</li>
|
||||||
|
<li>{item.time}</li>
|
||||||
|
<li>{item.speakerName}</li>
|
||||||
|
<li>{item.speackerImage}</li>
|
||||||
|
<li>{item.splecializations}</li>
|
||||||
|
<li>{item.type}</li>
|
||||||
|
<li>{item.speakerTelephone}</li>
|
||||||
|
<li>{item.speakerEmail}</li>
|
||||||
|
<li>{item.tags}</li>
|
||||||
|
<li>{item.videoUrl}</li>
|
||||||
|
</ol>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
|
<p>Bad data type from server!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default FetchUtils;
|
||||||
18
src/components/utils/style.css
Normal file
18
src/components/utils/style.css
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
/* justify-content: center; */
|
||||||
|
flex-direction: column;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
display: flex;
|
||||||
|
/* justify-content: center; */
|
||||||
|
/* align-items: center; */
|
||||||
|
/* text-align: left; */
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
BIN
src/img/AddUsers/delete.png
Normal file
BIN
src/img/AddUsers/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 B |
BIN
src/img/AddUsers/newAvatar.png
Normal file
BIN
src/img/AddUsers/newAvatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
src/img/AddUsers/permission.png
Normal file
BIN
src/img/AddUsers/permission.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 740 B |
BIN
src/img/MeetPage/Book.png
Normal file
BIN
src/img/MeetPage/Book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/img/MeetPage/Clock.png
Normal file
BIN
src/img/MeetPage/Clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 581 B |
BIN
src/img/MeetPage/Facebook.png
Normal file
BIN
src/img/MeetPage/Facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 710 B |
BIN
src/img/MeetPage/Globe.png
Normal file
BIN
src/img/MeetPage/Globe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 819 B |
BIN
src/img/MeetPage/Telegram.png
Normal file
BIN
src/img/MeetPage/Telegram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/img/MeetPage/VK.png
Normal file
BIN
src/img/MeetPage/VK.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/img/MeetPage/avatar.png
Normal file
BIN
src/img/MeetPage/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/img/MeetPage/newAvatar.png
Normal file
BIN
src/img/MeetPage/newAvatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/Icon.png
Normal file
BIN
src/img/headerImg/Icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
BIN
src/img/headerImg/avatar.png
Normal file
BIN
src/img/headerImg/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/img/headerImg/google.png
Normal file
BIN
src/img/headerImg/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
BIN
src/img/headerImg/header.png
Normal file
BIN
src/img/headerImg/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/img/homePage/downArrow.png
Normal file
BIN
src/img/homePage/downArrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 760 B |
BIN
src/img/homePage/muza.png
Normal file
BIN
src/img/homePage/muza.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
src/img/profilePage/avatar.png
Normal file
BIN
src/img/profilePage/avatar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
src/img/profilePage/gift.png
Normal file
BIN
src/img/profilePage/gift.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom/client'
|
|||||||
import App from './App.jsx'
|
import App from './App.jsx'
|
||||||
import './index.css'
|
import './index.css'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
|
|||||||
Reference in New Issue
Block a user