new content

frontend/src/App.jsx

@@ -1,12 +1,45 @@
 import "./styles/App.css"
-import "./styles/theme.css"
+import 'bootstrap/dist/css/bootstrap.min.css'
+
+import { useState } from "react"
+import { Button, Row, Form } from 'react-bootstrap'
+import { HttpMethod } from "@data/enums"
+import Fetch from "@API/Fetch"
 
 export default function App() {
 
+    var [predict, setPredict] = useState(0)
+
+    async function getPredict() {
+        var data = await Fetch({ action: `api/predict/`, method: HttpMethod.GET })
+
+        if (data && data.ok) {
+            console.log(data)
+            setPredict(data.predict)
+        }
+        setPredict(Math.random())
+    }
+
     return (
         <div className="App">
-            Hello
+            <br />
+            <h2>Сгенерить предикт на следующий день</h2>
+            <br />
+
+            <Form.Control type="date" />
+
+            <br />
+
+            <Button onClick={getPredict}>клик</Button>
+
+            <br />
+            <br />
+
+            {predict > 0 &&
+                <Row className="Row green text-large">
+                    {predict}
+                </Row>
+            }
         </div>
     )
-
 }

frontend/src/data/enums.js

@@ -4,9 +4,3 @@ export var HttpMethod = {
     PUT: "PUT",
     DELETE: "DELETE"
 }
-
-export var Theme = {
-    NAME: "theme",
-    LIGHT: "light",
-    DARK: "dark"
-}

frontend/src/styles/App.css

@@ -5,6 +5,22 @@
 }
 
 body {
-    padding: 0 150px;
+    padding: 0 20%;
     font-family: sans-serif;
+}
+
+
+.text-large {
+    font-size: x-large;
+}
+
+.green {
+    background-color: rgb(129, 235, 165);
+    border: 3px solid rgb(78, 215, 124);
+}
+
+.Row {
+    padding: 20px;
+    border-radius: 10px;
+    justify-content: center;
 }