Update public/previewImages/edit-icon.png,...

Update public/previewImages/edit-icon.png, public/previewImages/scale-icon.png, public/previewImages/delete-icon.png, public/previewImages/back-icon.png, public/previewImages/rotate-icon.png, public/previewImages/options-icon.png, public/previewImages/add-icon.png, public/previewImages/check-icon.png, public/index.html Deleted public/previewImages/add-icon.png, public/previewImages/back-icon.png, public/previewImages/delete-icon.png, public/previewImages/edit-icon.png, public/previewImages/options-icon.png, public/previewImages/rotate-icon.png, public/previewImages/scale-icon.png

Update public/previewImages/edit-icon.png,...
Update public/previewImages/edit-icon.png, public/previewImages/scale-icon.png, public/previewImages/delete-icon.png, public/previewImages/back-icon.png, public/previewImages/rotate-icon.png, public/previewImages/options-icon.png, public/previewImages/add-icon.png, public/previewImages/check-icon.png, public/index.html Deleted public/previewImages/add-icon.png, public/previewImages/back-icon.png, public/previewImages/delete-icon.png, public/previewImages/edit-icon.png, public/previewImages/options-icon.png, public/previewImages/rotate-icon.png, public/previewImages/scale-icon.png
f36f729f · Cantuerk · d0e3422a · f36f729f · d0e3422a · f36f729f
Commit f36f729f authored 3 months ago by Cantuerk
Hide whitespace changes
Inline Side-by-side

Showing

with 44 additions and 34 deletions
+44 -34
--- 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) {

--- a/public/previewImages/add-icon.png
+++ b/public/previewImages/add-icon.png
--- a/public/previewImages/back-icon.png
+++ b/public/previewImages/back-icon.png
--- a/public/previewImages/check-icon.png
+++ b/public/previewImages/check-icon.png
--- a/public/previewImages/delete-icon.png
+++ b/public/previewImages/delete-icon.png
--- a/public/previewImages/edit-icon.png
+++ b/public/previewImages/edit-icon.png
--- a/public/previewImages/options-icon.png
+++ b/public/previewImages/options-icon.png
--- a/public/previewImages/rotate-icon.png
+++ b/public/previewImages/rotate-icon.png
--- a/public/previewImages/scale-icon.png
+++ b/public/previewImages/scale-icon.png