From 9141d9e6fb01002c923c40717dc6755940975ffd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20P=C3=B6ppe?= Date: Wed, 18 Sep 2024 13:24:55 +0200 Subject: [PATCH 1/3] Updated UI, Improved Style to be more "Reactly", added Functionality --- src/app/globals.css | 76 ++++++++++++++++---- src/app/layout.tsx | 35 ++++++++++ src/app/modules.tsx | 56 +++++++++++++++ src/app/page.tsx | 166 +++++--------------------------------------- src/app/scripts.ts | 17 +++++ 5 files changed, 190 insertions(+), 160 deletions(-) create mode 100644 src/app/modules.tsx create mode 100644 src/app/scripts.ts diff --git a/src/app/globals.css b/src/app/globals.css index eaf2dfd..05910fe 100644 --- a/src/app/globals.css +++ b/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%; +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a36cde0..dff2e22 100644 --- a/src/app/layout.tsx +++ b/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} +
+ +
); diff --git a/src/app/modules.tsx b/src/app/modules.tsx new file mode 100644 index 0000000..c753701 --- /dev/null +++ b/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( +
+
+ {title} +
+
+ +
+
+ ); +} + +export function Button({title, className, onClickFunc}: + {title:string; className:string; onClickFunc: MouseEventHandler}) { + + return( + + + ); +} + +export function Output({id, text}: + {id:string; text:string}) { + + return( +
+
+ Output +
+
+

+

+
+
+ ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 8cc432b..fa34531 100644 --- a/src/app/page.tsx +++ b/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() { -
-
-
- Your optimization problem: -
- - -

-
@@ -21,13 +22,12 @@ export function Box({title, placeholder, id}: } export function Button({title, className, onClickFunc}: - {title:string; className:string; onClickFunc: MouseEventHandler}) { + {title:string; className:string|undefined; onClickFunc: MouseEventHandler}) { return( @@ -35,6 +35,39 @@ export function Button({title, className, onClickFunc}: ); } +export function Popup_Button({title, className}: + {title:string; className:string|undefined;}) { + + return( + + {title} + } + position="right center" + modal + nested> + {close => ( +
+ +
{title}
+
+ This is a popup example. +
+
+ +
+
+ )} + + + + ); +} + export function Output({id, text}: {id:string; text:string}) { diff --git a/src/app/page.tsx b/src/app/page.tsx index fa34531..5abd1ad 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ 'use client' -import { Box, Button, Output } from "./modules.tsx"; -import { test, calculate } from "./scripts.ts" +import { Box, Button, Output, Popup_Button } from "./modules.tsx"; +import { calculate_click, import_click, export_click } from "./scripts.ts" export default function Home() { return ( @@ -28,10 +28,21 @@ export default function Home() {