From 825694093e37b4a6c9ff2c114ef76f2defb6a0eb Mon Sep 17 00:00:00 2001
From: Cantuerk <21caog1bif@hft-stuttgart.de>
Date: Fri, 3 Jan 2025 15:59:36 +0000
Subject: [PATCH] Update public/index.html, public/previewImages/back-icon.png,
public/previewImages/delete-icon.png, public/previewImages/scale-icon.png,
public/previewImages/rotate-icon.png
---
public/index.html | 244 ++++++++++++++-------------
public/previewImages/back-icon.png | Bin 0 -> 12387 bytes
public/previewImages/delete-icon.png | Bin 0 -> 13900 bytes
public/previewImages/rotate-icon.png | Bin 0 -> 17367 bytes
public/previewImages/scale-icon.png | Bin 0 -> 14070 bytes
5 files changed, 128 insertions(+), 116 deletions(-)
create mode 100644 public/previewImages/back-icon.png
create mode 100644 public/previewImages/delete-icon.png
create mode 100644 public/previewImages/rotate-icon.png
create mode 100644 public/previewImages/scale-icon.png
diff --git a/public/index.html b/public/index.html
index 1b1a56b..067239d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -22,17 +22,18 @@
.container {
text-align: center;
- background-color: rgba(0, 0, 0, 0.5);
+ background-color: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 10px;
- color: white;
+ color: #333;
max-width: 80%;
- box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3em;
margin-bottom: 20px;
+ color: #444;
}
p {
@@ -44,50 +45,58 @@
position: absolute;
bottom: 0;
width: 100%;
- height: 70px;
+ height: 80px;
display: flex;
- justify-content: space-between;
+ justify-content: space-around;
align-items: center;
- background: rgba(0, 0, 0, 0.5);
+ background: #e0e0e0;
padding: 10px;
+ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
z-index: 10;
}
- .menu-section {
- width: 60px;
- height: 60px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
+ .menu-item:hover {
+ background-color: #d6d6d6;
+ /* Etwas dunkleres Grau beim Hover */
+ transform: scale(1.1);
+ /* Leichte Vergrößerung beim Hover */
}
- .menu-section img {
- width: 40px;
- height: 40px;
+ .menu-item img {
+ width: 50px;
+ height: 50px;
}
- #dynamic-menu {
+ .menu-placeholder {
+ display: none;
position: absolute;
- bottom: 70px;
+ bottom: 0;
width: 100%;
- height: 200px;
- background: rgba(0, 0, 0, 0.8);
- color: white;
- padding: 20px;
- z-index: 20;
- overflow-y: auto;
+ height: 80px;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ background: #e0e0e0;
+ /* Helles Grau */
+ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+ z-index: 15;
+ }
+
+ .menu-placeholder .menu-item img {
+ width: 50px;
+ height: 50px;
}
button {
background-color: #4CAF50;
color: white;
- font-size: 1.5em;
- padding: 15px 30px;
+ font-size: 1em;
+ padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
- transition: background-color 0.3s;
+ transition: background-color 0.3s ease-in-out, transform 0.2s;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
}
@@ -99,6 +108,7 @@
background-color: #387a39;
}
+ /* Confirmation Dialog */
#confirmation-dialog {
position: fixed;
top: 0;
@@ -153,25 +163,48 @@
-
-
- 
-
-
- 
-
-
-
+ 
+ 
+ 
+ 
+