added form

2025-04-30 12:46:28 +03:00
parent 577a2d0ab9
commit 2ea5523365
10 changed files with 242 additions and 57 deletions
--- 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",
--- a/package.json
+++ b/package.json
@@ -35,5 +35,8 @@
      "last 1 firefox version",
      "last 1 safari version"
    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.17"
  }
 }
--- 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);
-  }
-}
--- 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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <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">
+
+        {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>
+        }
+        {Stage == 0 &&
+          <div className="p-4">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+              Сообщить о проблеме
+            </h1>
+            <div className="space-y-6">
+              <p className="leading-5">
+                Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение
+              </p>
+              <form className="space-y-3" onSubmit={handleSubmit}>
+                <input
+                  type="text"
+                  name="name"
+                  className="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"
+                  placeholder="Ваше имя *"
+                  required={true}
+                  value={formData.name}
+                  onChange={handleChange}
+                />
+                <input
+                  type="text"
+                  name="work_place"
+                  className="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 disabled:text-gray-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"
+                  defaultValue="Рабочее место 192.168.0.24"
+                  placeholder="Адрес рабочего места *"
+                  required={true}
+                  disabled={false}
+                  value={formData.work_place}
+                  onChange={handleChange}
+                />
+                <select
+                  name="problem"
+                  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>
+                  <option value="3">Не работает оборудование</option>
+                  <option value="4">Другое</option>
+                </select>
+                <textarea
+                  name="message"
+                  rows={4}
+                  className="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"
+                  placeholder="Добавьте описание *"
+                  required={true}
+                  value={formData.message}
+                  onChange={handleChange}
+                />
+                <button
+                  type="submit"
+                  className="text-md dark:bg-orange-600dark:focus:ring-orange-900 mb-2 w-full cursor-pointer rounded-xl bg-orange-500 px-5 py-2.5 font-bold text-white shadow-md duration-300 hover:scale-105 focus:outline-none"
+                >
+                  Отправить
+                </button>
+              </form>
+            </div>
+          </div>
+        }
+        {Stage == 1 &&
+          <>
+            <div className="flex flex-col gap-3 w-full h-full items-start scroll-box">
+
+             
+
+            <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>
+
+
+            </div>
+            <div className="pt-4">
+              <form className='flex gap-3'>
+                <input
+                  type="text"
+                  id="name"
+                  className="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"
+                  placeholder="Сообщение"
+                  required=""
+                />
+                <button type='submit' className='transition-transform duration-300 hover:rotate-45'>
+                  <img src={SendIcon} className='h-6' />
+                </button>
+              </form>
+            </div>
+          </>
+        }
+
+      </div>
+    </div >
  );
 }

--- a/src/img/icon-chatgpt.png
+++ b/src/img/icon-chatgpt.png
--- a/src/img/icon-user.png
+++ b/src/img/icon-user.png
--- a/src/img/paper-plane.png
+++ b/src/img/paper-plane.png
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,7 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body,html, #root{
+  height: 100%;
+}
--- a/src/misc/Message.js
+++ b/src/misc/Message.js
@@ -0,0 +1,31 @@
+import chatGptIcon from '../img/icon-chatgpt.png';
+
+import UserIcon from '../img/icon-user.png';
+
+
+function Message(args) {
+    return (
+        <>
+            {args?.self &&
+                <div className='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'>
+                        {args?.text}
+                    </span>
+                </div>
+            }
+            {!args?.self &&
+                <div className='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'>
+                        {args?.text}
+                    </span>
+                </div>
+            }
+
+        </>
+    );
+}
+
+export default Message;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}