Viacheslav/hackaton-2025-web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some fixes

Browse Source
This commit is contained in:
Vyacheslav K
2025-04-30 14:27:13 +03:00
parent 2ea5523365
commit 7e131bf638
6 changed files with 102 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.css
View File

@@ -26,3 +26,17 @@
display: none;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Стилизация общего вида select */
select {
-webkit-appearance: none; /* Для Chrome, Safari */
-moz-appearance: none; /* Для Firefox */
appearance: none; /* Для остальных браузеров */
position: relative;
}

75
src/App.js
View File

@@ -3,19 +3,24 @@
import SendIcon from './img/paper-plane.png';
import { useState } from 'react';
import Message from './misc/Message';
import SendForm from './misc/SendForm';
import Spinner from './misc/Spinner';
import WaitResponse from './misc/WaitResponse';
import './App.css';
function App() {
const [Stage, setStage] = useState(0);
const [Loading, setLoading] = useState(false);
const [GenerationProcess, setGenerationProcess] = useState(false);
const [LoadingText, setLoadingText] = useState("");
const [formData, setFormData] = useState({
name: '',
work_place: '',
problem:'',
message:''
problem: '',
message: ''
});
const handleChange = (e) => {
@@ -26,32 +31,47 @@ function App() {
}));
};
const [messages, setMessages] = useState([]);
const addMessage = (text, self = true) => {
const newMessage = {
id: Date.now(), // уникальный ключ для нового элемента
text: text,
self: self
};
setMessages(prev => [...prev, newMessage]);
};
window.addMessage = addMessage;
const handleSubmit = (e) => {
e.preventDefault(); // Останавливаем стандартную отправку формы
console.log('Отправленные данные:', formData);
setLoading(true);
setTimeout(()=>{
setTimeout(() => {
setStage(1);
setLoading(false);
addMessage(formData.message);
},300)
setTimeout(() => {
addMessage("Ваш вопрос отправлен в службу поддержки. Уже подбираем варианты решения проблемы...", false);
setTimeout(() => {
setGenerationProcess(true);
}, 500);
}, 500);
}, 500)
};
return (
<div className="flex w-full h-full justify-center items-center">
<div className="relative flex md:h-[550px] h-full md:w-[500px] w-full flex-col justify-center rounded-xl bg-gray-50 p-5 text-sm/7 text-gray-800 shadow-sm shadow-orange-500/50 dark:bg-gray-900 dark:text-gray-200">
<div className="relative flex md:h-[550px] h-full md:w-[500px] w-full flex-col justify-center md:rounded-xl bg-gray-50 p-5 text-sm/7 text-gray-800 shadow-sm shadow-orange-500/50 dark:bg-gray-900 dark:text-gray-200">
{Loading &&
<div className="absolute inset-0 bg-black/10 backdrop-blur-[3px] flex flex-col items-center justify-center z-10 rounded-xl">
<div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" style={{ animationDuration: "0.5s" }} ></div>
<span className='block mt-2 text-gray-500 font-bold dark:text-gray-300'>{LoadingText}</span>
</div>
}
<Spinner show={Loading} />
{Stage == 0 &&
<div className="p-4">
<div className="p-0 md:p-4">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
Сообщить о проблеме
</h1>
@@ -85,7 +105,7 @@ function App() {
className="mt-10 block w-full rounded-xl border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500"
value={formData.problem}
onChange={handleChange}
>
>
<option value="0">Выберите тип проблемы *</option>
<option value="1">Ошибка в работе ПО</option>
<option value="2">Проблемы с доступом/паролями</option>
@@ -117,30 +137,11 @@ function App() {
<Message self={true} text={"Test message"}/>
<Message self={false} text={"Test message"}/>
<Message self={true} text={"Test message"}/>
<Message self={false} text={"Test message"}/>
<div className='flex items-start gap-2 justify-center px-2'>
<div className="flex space-x-1 h-full items-center">
<div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
style={{ animationDelay: "0.1s" }}
/>
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
style={{ animationDelay: "0.3s" }}
/>
</div>
<span className='text-gray-400 animate-pulse'>Генерация ответа...</span>
</div>
{messages.map(message => (
<Message key={message.id} self={message.self} text={message.text} />
))}
<WaitResponse show={GenerationProcess} />
</div>
<div className="pt-4">
@@ -153,7 +154,7 @@ function App() {
required=""
/>
<button type='submit' className='transition-transform duration-300 hover:rotate-45'>
<img src={SendIcon} className='h-6' />
<img src={SendIcon} className='h-6 w-6' />
</button>
</form>
</div>

6
src/misc/Message.js
View File

@@ -7,7 +7,7 @@ function Message(args) {
return (
<>
{args?.self &&
<div className='flex items-start gap-2 w-full flex-row-reverse'>
<div className='animate-[fadeIn_0.5s_ease-out] flex items-start gap-2 w-full flex-row-reverse'>
<img src={UserIcon} className='h-12' />
<span className='text-white px-4 py-2 text-md rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 break-normal leading-5 shadow-sm'>
@@ -16,9 +16,9 @@ function Message(args) {
</div>
}
{!args?.self &&
<div className='flex items-end gap-2'>
<div className='animate-[fadeIn_0.5s_ease-out] flex items-end gap-2'>
<img src={chatGptIcon} className='h-12' />
<span className='px-4 py-2 text-md rounded-xl bg-gray-200 break-normal w-full leading-5 shadow-sm'>
<span className='px-4 py-2 text-md rounded-xl dark:bg-gray-800 bg-gray-200 break-normal w-full leading-5 shadow-sm'>
{args?.text}
</span>
</div>

6
src/misc/SendForm.js Normal file
View File

@@ -0,0 +1,6 @@
async function SendForm(formData) {
}
export default SendForm;

14
src/misc/Spinner.js Normal file
View File

@@ -0,0 +1,14 @@
function Spinner(args) {
return (
<>
<div className={(args.show ? "flex":"hidden") + " animate-[fadeIn_0.5s_ease-out] absolute inset-0 bg-black/10 backdrop-blur-[3px] flex-col items-center justify-center z-10 rounded-xl"}>
<div className="w-10 h-10 border-4 border-orange-500 border-t-transparent rounded-full animate-spin" style={{ animationDuration: "0.5s" }} ></div>
<span className='block mt-2 text-gray-500 font-bold dark:text-gray-300'>{args?.text}</span>
</div>
</>
);
}
export default Spinner;

25
src/misc/WaitResponse.js Normal file
View File

@@ -0,0 +1,25 @@
function WaitResponse(args) {
return (
<>
<div className={(args.show ? "flex":"hidden")+ ' delay-300 animate-[fadeIn_0.5s_ease-out] items-start gap-2 justify-center px-2'}>
<div className="flex space-x-1 h-full items-center">
<div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" />
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
style={{ animationDelay: "0.1s" }}
/>
<div
className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"
style={{ animationDelay: "0.3s" }}
/>
</div>
<span className='text-gray-400 animate-pulse'>Генерация ответа...</span>
</div>
</>
);
}
export default WaitResponse;