diff --git a/package-lock.json b/package-lock.json index f869922..ae77dfd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "14.2.11", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "reactjs-popup": "^2.0.6" }, "devDependencies": { "@types/node": "^20", @@ -4203,6 +4204,19 @@ "dev": true, "license": "MIT" }, + "node_modules/reactjs-popup": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz", + "integrity": "sha512-A+tt+x9wdgZiZjv0e2WzYLD3IfFwJALaRaqwrCSXGjo0iQdsry/EtBEbQXRSmQs7cHmOi5eytCiSlOm8k4C+dg==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 4d46a6a..19e7ac8 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,19 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.11", "react": "^18", "react-dom": "^18", - "next": "14.2.11" + "reactjs-popup": "^2.0.6" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8", + "eslint-config-next": "14.2.11", "postcss": "^8", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.11" + "typescript": "^5" } } diff --git a/src/app/globals.css b/src/app/globals.css index eaf2dfd..dc0cd35 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; @@ -65,27 +54,107 @@ body { } .button { - border: 2px solid #101010; - background-color: #101010; + border: 2px solid #5353535c; + background-color: #1010105c; border-radius: 20px; margin: 10px; padding: 10px; } +.button:hover { + border: 2px solid #5353535c; + background-color: #5353535c; + border-radius: 20px; + margin: 10px; + 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%; +} + +.popup_bg { + width: 2000px; + padding: 20px; + box-shadow: 0 2px 10px #7c7c7c; + background: black; +} + +.popup-overlay { + background: rgba(0, 0, 0, 0.5); +} \ 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..6b5a122 --- /dev/null +++ b/src/app/modules.tsx @@ -0,0 +1,89 @@ +import { MouseEventHandler } from "react"; +import Popup from "reactjs-popup"; + +export function Box({title, placeholder, id}: + {title:string; placeholder:string; id:string}) { + return( +
+
+ {title} +
+
+ +
+
+ ); +} + +export function Button({title, className, onClickFunc}: + {title:string; className:string|undefined; onClickFunc: MouseEventHandler}) { + + return( + + + ); +} + +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}) { + + return( +
+
+ Output +
+
+

+

+
+
+ ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 8cc432b..5abd1ad 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, Popup_Button } from "./modules.tsx"; +import { calculate_click, import_click, export_click } from "./scripts.ts" export default function Home() { return ( @@ -14,153 +17,33 @@ export default function Home() { -
-
-
- Your optimization problem: -
- - -

-