src/app/globals.css

@@ -32,17 +32,6 @@ body {
   width: 100%; /* Optional: gibt dem Container eine Breite */
 }
 
-.textbox {
-  width: 100%; /* Nimmt die volle Breite des Containers ein */
-  margin: 10px; /* Optional: Abstand oberhalb der Textbox */
-  padding: 10px; /* Optional: Innenabstand für die Textbox */
-  border-radius: 20px; /* Abgerundete Ecken */
-  border: 2px solid #580000; /* Optional: Border-Farbe */
-  background-color: #ffffff; /* Hintergrundfarbe */
-  color: #0a0a0a; /* Textfarbe */
-  font-size: 16px; /* Schriftgröße */
-}
-
 .header {
   font-size: 36px;
   text-align: center;
@@ -72,20 +61,81 @@ body {
   padding: 10px;
 }
 
+.button_green {
+  border: 2px solid #4795475c;
+  background-color: #247d245c;
+  /* border-radius: 20px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_red {
+  border: 2px solid #9547475c;
+  background-color: #7d24245c;
+  /* border-radius: 20px 10px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_green:hover {
+  border: 2px solid #4795475c;
+  background-color: #4795475c;
+  /* border-radius: 20px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.button_red:hover {
+  border: 2px solid #9547475c;
+  background-color: #9547475c;
+  /* border-radius: 20px 10px; */
+  border-radius: 20px;
+  margin: 10px;
+  padding: 10px;
+}
+
+.box {
+  width: 100%;
+  padding: 10px;
+  height: 20px;
+}
+
+.main_div {
+  flex: 1;
+  border-width: 0px;
+}
+
 .body_box {
   flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
-  margin: 10px 10px; /* Optional: fügt einen horizontalen Abstand hinzu */
   padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  width: 100%;
   /* font-size: 16px; // Optional: definiert die Schriftgröße */
   border-radius: 20px;
-  /* border: 2px solid #580000; */
+  border: 2px solid #8d8d8d;
   background-color: #474747;
+  font-size: 10;
 }
 
 .body_title {
   font-size: 20px;
+  margin: 10px;
 }
 
 .text {
   margin: 10px;
 }
+
+.output_box {
+  flex: 1; /* Teilt den verfügbaren Platz auf die Textboxen auf */
+  padding: 10px; /* Optional: fügt einen inneren Abstand hinzu */
+  width: 100%;
+  /* font-size: 16px; // Optional: definiert die Schriftgröße */
+  border-radius: 20px;
+  border: 2px solid #8d8d8d;
+  background-color: #4dc3435c;
+  font-size: 10;
+  height: fit-content 100%;
+}

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import  Image from "next/image";
 import localFont from "next/font/local";
 import "./globals.css";
 
@@ -29,6 +30,40 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+          <footer className=" flex gap-6 flex-wrap items-center justify-center">
+            <a
+              className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+              href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="https://nextjs.org/icons/file.svg"
+                alt="File icon"
+                width={16}
+                height={16}
+              />
+              Go to our docs
+            </a>
+            <a
+              className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+              href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image
+                aria-hidden
+                src="https://nextjs.org/icons/globe.svg"
+                alt="Globe icon"
+                width={16}
+                height={16}
+              />
+              See the source code
+            </a>
+          </footer>
+        </div>
       </body>
     </html>
   );

src/app/modules.tsx

@@ -0,0 +1,56 @@
+import { MouseEventHandler } from "react";
+
+export function Box({title, placeholder, id}:
+  {title:string; placeholder:string; id:string}) {
+    return(
+      <div className="main_div">
+        <div className="body_title">
+          {title}
+        </div>
+        <div className="text">
+          <textarea
+            className="body_box"
+            id={id}
+            wrap="soft"
+            required
+            placeholder={placeholder}
+          ></textarea>
+        </div>
+      </div>
+    );
+}
+
+export function Button({title, className, onClickFunc}:
+  {title:string; className:string; onClickFunc: MouseEventHandler}) {
+
+  return(
+    <button
+      className={className}
+      onClick={onClickFunc}
+      type="submit"
+      >
+      {title}
+  </button>
+  
+  );
+}
+
+export function Output({id, text}:
+  {id:string; text:string}) {
+    
+  return(
+    <div className="main_div">
+      <div className="body_title"
+      >
+        Output
+      </div>
+      <div className="text">
+        <p
+          className="output_box"
+          id={id}
+          value={text}>
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,7 @@
-import Image from "next/image";
+'use client'
+
+import { Box, Button, Output } from "./modules.tsx";
+import { test, calculate } from "./scripts.ts"
 
 export default function Home() {
   return (
@@ -14,153 +17,22 @@ export default function Home() {
           </main>
         </div>
       </header>
-      <div className="grid grid-cols-2 grid-rows-1 p-6">
-        <div className="body_box">
-          <div className="body_title">
-            Your optimization problem:
-          </div>
-          <button className="button">
-            Maximize
-          </button>
-          <button className="button">
-            Minimize
-          </button>
-          <br></br>
-          <textarea
-            className="textbox"
-            placeholder="Function"
-          />
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
+      <Box
+        title={"Functions"}
+        placeholder={"Your Functions here"}
+        id="funcs"/>
+      <Box
+        title={"Variables"}
+        placeholder={"Your Variables here"}
+        id="vars" />
+      <Button
+        title={"Calculate"}
+        className={"button_green"}
+        onClickFunc={calculate} />
+      <Output
+        id="out"
+        text={"Ergebnis"}/>
 
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <div className="text">s.t.</div>
-            <textarea
-              className="textbox"
-              placeholder="Restriction"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-
-          <button className="button">
-            add
-          </button>
-          <br></br>
-          <button className="button">
-            Calculate
-          </button>
-        </div>
-        <div className="grid grid-cols-1 grod-rows-3">
-          <div className="body_box">
-            <div className="body_title">
-              Result
-            </div>
-          </div>
-          <div className="body_box">
-            <div className="body_title">
-              Variables
-            </div>
-
-            <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-          <div className="container">
-            <br></br>
-            <textarea
-              className="textbox"
-              placeholder="Variable"
-            />
-            <button className="button">
-              remove
-            </button>
-          </div>
-
-          <button className="button">
-            add
-          </button>
-
-          </div>
-          <div className="body_box">
-            <div className="body_title">
-              Logs
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-        <footer className=" flex gap-6 flex-wrap items-center justify-center">
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/wiki"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/file.svg"
-              alt="File icon"
-              width={16}
-              height={16}
-            />
-            Go to our docs
-          </a>
-          <a
-            className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-            href="https://github.com/Spaceholder-Programming/Operations-Research-Tool/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              aria-hidden
-              src="https://nextjs.org/icons/globe.svg"
-              alt="Globe icon"
-              width={16}
-              height={16}
-            />
-            See the source code
-          </a>
-        </footer>
-      </div>
     </>
   );
 }

src/app/scripts.ts

@@ -0,0 +1,17 @@
+export function test() {
+  console.log("Dies ist die Testfunktion.");
+}
+
+export function calculate() {
+  let functions:string = document.getElementById('funcs').value;
+  let variables:string = document.getElementById('vars').value;
+
+  let funcs:string[] = functions.split(/; */);
+  let vars:string[] = variables.split(/; */);
+
+  // Irgend ein Interface
+  // document.getElementById('out').innerHTML = funcs;
+
+  // output.innerHTML = functions.innerHTML;
+
+}