diff --git a/public/index.html b/public/index.html
index fddc1b5c33b07c4611de41f76f3c6fd5886c58bb..030cc8fedb25b32178754a348b32e1c2cdd2f117 100644
--- a/public/index.html
+++ b/public/index.html
@@ -41,7 +41,8 @@
margin-bottom: 30px;
}
- #menu-bar {
+ #menu-bar,
+ .menu-placeholder {
position: absolute;
bottom: 0;
width: 100%;
@@ -49,40 +50,34 @@
display: flex;
justify-content: space-around;
align-items: center;
- background: #e0e0e0;
+ background: #121212;
padding: 10px;
- box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.8);
+ color: white;
z-index: 10;
+ border-top: 1px solid #2a2a2a;
+ }
+
+ .menu-item {
+ background: #2c2c2c;
+ border-radius: 8px;
+ padding: 10px;
+ transition: background-color 0.3s, transform 0.2s;
}
.menu-item:hover {
- background-color: #d6d6d6;
- /* Etwas dunkleres Grau beim Hover */
+ background-color: #3a3a3a;
transform: scale(1.1);
- /* Leichte Vergrößerung beim Hover */
}
.menu-item img {
+ filter: invert(100%);
width: 50px;
height: 50px;
}
- .menu-placeholder {
- display: none;
- position: absolute;
- bottom: 0;
- width: 100%;
- 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 {
+ filter: none;
width: 50px;
height: 50px;
}
@@ -161,24 +156,39 @@
#dynamic-menu {
position: absolute;
- bottom: 70px;
+ bottom: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
- background: rgba(0, 0, 0, 0.8);
- box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
+ background: #1e1e1e;
+ box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8);
color: white;
width: 100%;
height: 200px;
z-index: 20;
overflow-y: auto;
+ padding: 20px;
+ border-radius: 8px;
}
#dynamic-menu input[type="range"] {
- width: 100%;
+ width: calc(100% - 40px);
margin: 10px 0;
+ background: #3a3a3a;
+ border-radius: 5px;
+ }
+
+ #dynamic-menu input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 20px;
+ height: 20px;
+ background: #fff;
+ border: 2px solid #555;
+ border-radius: 50%;
+ cursor: pointer;
}
</style>
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
@@ -188,9 +198,6 @@
<body>
<!-- Standardmenü -->
<div id="menu-bar" style="display: none;">
- <div class="menu-item" id="edit-section" onclick="showMenu('edit-menu')">
- <img src="previewImages/edit-icon.png" alt="Bearbeiten" />
- </div>
<div class="menu-item" id="add-section" onclick="showMenu('add-menu')">
<img src="previewImages/add-icon.png" alt="Hinzufügen" />
</div>
@@ -213,8 +220,8 @@
<div class="menu-item" onclick="deleteModel()">
<img src="previewImages/delete-icon.png" alt="Löschen" />
</div>
- <div class="menu-item" onclick="showMenu('menu-bar')">
- <img src="previewImages/back-icon.png" alt="Zurück" />
+ <div class="menu-item" onclick="completeEditing()">
+ <img src="previewImages/check-icon.png" alt="Fertigstellen" />
</div>
</div>
@@ -374,11 +381,8 @@
function removeHighlightFromSelectedModel() {
if (selectedPlacedModel) {
selectedPlacedModel.traverse((child) => {
- if (child.isMesh) {
- child.material.emissive.setHex(0x000000); // Markierung entfernen
- }
+ if (child.isMesh) child.material.emissive.setHex(0x000000); // Markierung entfernen
});
- selectedPlacedModel = null; // Kein Modell mehr ausgewählt
}
}
@@ -408,6 +412,12 @@
}
}
+ function completeEditing() {
+ removeHighlightFromSelectedModel();
+ selectedPlacedModel = null;
+ document.getElementById('edit-menu').style.display = 'none';
+ document.getElementById('menu-bar').style.display = 'flex';
+ }
function openRotationMenu() {
if (!selectedPlacedModel) {
diff --git a/public/previewImages/add-icon.png b/public/previewImages/add-icon.png
index a2ead82ceffef7ebac110fc0412a7fc32b1ec2f7..7cddac46b3fcb6a31e82560615d362fe2a4390c5 100644
Binary files a/public/previewImages/add-icon.png and b/public/previewImages/add-icon.png differ
diff --git a/public/previewImages/back-icon.png b/public/previewImages/back-icon.png
index 06606960c8dc3e7e0e8d437ac01ef8f50f29bc22..e9fb45cd7cfafbb490fb3813e791388c879f9a21 100644
Binary files a/public/previewImages/back-icon.png and b/public/previewImages/back-icon.png differ
diff --git a/public/previewImages/check-icon.png b/public/previewImages/check-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..f21da22c01010404c23b17142a137f59a3141058
Binary files /dev/null and b/public/previewImages/check-icon.png differ
diff --git a/public/previewImages/delete-icon.png b/public/previewImages/delete-icon.png
index bf9b124eabd2a8410f8b34b879f90a93428c234c..d1f9dc2a4d0e395f5dfac75b0177b4acbebbe17b 100644
Binary files a/public/previewImages/delete-icon.png and b/public/previewImages/delete-icon.png differ
diff --git a/public/previewImages/edit-icon.png b/public/previewImages/edit-icon.png
index 81a62e792fa1f47ce6be5b9398af701f51b2d714..3b6e2d8249d6c2964b54b663638dd8a74b494a42 100644
Binary files a/public/previewImages/edit-icon.png and b/public/previewImages/edit-icon.png differ
diff --git a/public/previewImages/options-icon.png b/public/previewImages/options-icon.png
index 89b450e71e85cc2a62b865457676f375be868397..692626af2eada9be2b2684dec1a992e212244757 100644
Binary files a/public/previewImages/options-icon.png and b/public/previewImages/options-icon.png differ
diff --git a/public/previewImages/rotate-icon.png b/public/previewImages/rotate-icon.png
index 48ae4e330fd92b66d1444c44da79d0d7a951f4e1..a8a130d054ec0e1b777103022b11ec63024a74f0 100644
Binary files a/public/previewImages/rotate-icon.png and b/public/previewImages/rotate-icon.png differ
diff --git a/public/previewImages/scale-icon.png b/public/previewImages/scale-icon.png
index 02f057458e5e4d26c548ed9e362fdaeb6170a148..f63243bb05b7a7968108a7d2bc112a9988a69c34 100644
Binary files a/public/previewImages/scale-icon.png and b/public/previewImages/scale-icon.png differ