From 2ea552336589d62e5261e45cf2b4604b2029249f Mon Sep 17 00:00:00 2001 From: Vyacheslav K Date: Wed, 30 Apr 2025 12:46:28 +0300 Subject: [PATCH] added form --- package-lock.json | 14 ++++ package.json | 3 + src/App.css | 46 ++++------ src/App.js | 177 +++++++++++++++++++++++++++++++++++---- src/img/icon-chatgpt.png | Bin 0 -> 6544 bytes src/img/icon-user.png | Bin 0 -> 3220 bytes src/img/paper-plane.png | Bin 0 -> 1244 bytes src/index.css | 18 ++-- src/misc/Message.js | 31 +++++++ tailwind.config.js | 10 +++ 10 files changed, 242 insertions(+), 57 deletions(-) create mode 100644 src/img/icon-chatgpt.png create mode 100644 src/img/icon-user.png create mode 100644 src/img/paper-plane.png create mode 100644 src/misc/Message.js create mode 100644 tailwind.config.js diff --git a/package-lock.json b/package-lock.json index 512a818..e8afd66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,10 @@ "react-dom": "^19.1.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "daisyui": "^5.0.30", + "tailwindcss": "^3.4.17" } }, "node_modules/@adobe/css-tools": { @@ -6365,6 +6369,16 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "license": "MIT" }, + "node_modules/daisyui": { + "version": "5.0.30", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.30.tgz", + "integrity": "sha512-eLQsjeYC3qDTjapQa30BP/qhdZ9y1II4ZXOEzJ9j0UKJePP3Rnh79rwZkMefkfozW2dgcx65cXTyzAUHLNoCYg==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/saadeghi/daisyui?sponsor=1" + } + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", diff --git a/package.json b/package.json index 8a997ae..ae8fec0 100644 --- a/package.json +++ b/package.json @@ -35,5 +35,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "tailwindcss": "^3.4.17" } } diff --git a/src/App.css b/src/App.css index 74b5e05..e564177 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,28 @@ -.App { - text-align: center; +/* Основной блок с прокруткой */ +.scroll-box { + overflow-y: auto; + border: none; + background: transparent; + scrollbar-width: thin; /* Для Firefox */ + scrollbar-color: #bdbbbb transparent; /* Цвет скролла и фон для Firefox */ } -.App-logo { - height: 40vmin; - pointer-events: none; +/* Стили для WebKit-браузеров (Chrome, Edge, Safari) */ +.scroll-box::-webkit-scrollbar { + width: 6px; /* Толщина скроллбара */ } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.scroll-box::-webkit-scrollbar-track { + background: transparent; /* Прозрачный фон трека */ } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; +.scroll-box::-webkit-scrollbar-thumb { + background-color: #bdbbbb; /* Цвет ползунка */ + border-radius: 3px; /* Закругление краёв */ } -.App-link { - color: #61dafb; +/* Убираем стрелочки */ +.scroll-box::-webkit-scrollbar-button { + display: none; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..39d3fd0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,167 @@ -import logo from './logo.svg'; + + +import SendIcon from './img/paper-plane.png'; +import { useState } from 'react'; +import Message from './misc/Message'; + import './App.css'; function App() { + const [Stage, setStage] = useState(0); + const [Loading, setLoading] = useState(false); + const [LoadingText, setLoadingText] = useState(""); + + const [formData, setFormData] = useState({ + name: '', + work_place: '', + problem:'', + message:'' + }); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value + })); + }; + + + const handleSubmit = (e) => { + e.preventDefault(); // Останавливаем стандартную отправку формы + + console.log('Отправленные данные:', formData); + setLoading(true); + + setTimeout(()=>{ + setStage(1); + setLoading(false); + + },300) + + }; return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+
+
+ + {Loading && +
+
+ {LoadingText} +
+ } + {Stage == 0 && +
+

+ Сообщить о проблеме +

+
+

+ Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение +

+
+ + + +