update

2025-08-13 15:42:35 +02:00
parent d2a11d65a7
commit ad458de818
4 changed files with 346 additions and 5 deletions
--- a/testing.html
+++ b/testing.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Office 2007 Ribbon</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: Segoe UI, Tahoma, sans-serif;
+    }
+
+    .ribbon {
+      display: flex;
+      background: linear-gradient(to bottom, #d0d8ec, #eef2fa);
+      border-bottom: 1px solid #a2a9b9;
+      padding: 10px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+
+    .ribbon-orb {
+      width: 50px !important;
+      height: 50px;
+      border-radius: 50%;
+      background: url(assets/icon512_maskable.png);
+      background-size: 50px 50px;
+      background-position: center middle;
+      border: 1px solid #a2a9b9;
+      margin-right: 10px;
+      margin-top: 0;
+    }
+
+    .ribbon-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 1px;
+      width: calc(100% - 60px);
+    }
+
+    .ribbon-tabs {
+      display: flex;
+      background: #c8d4eb;
+      border: 1px solid #a2a9b9;
+      height: 26px;
+      align-items: center;
+      padding: 0 5px;
+      border-radius: 3px 3px 0 0;
+    }
+
+    .ribbon-tab {
+      padding: 4px 15px;
+      cursor: pointer;
+      border-right: 1px solid #a2a9b9;
+      font-size: 13px;
+    }
+
+    .ribbon-tab.active {
+      background-color: #eaf0fb;
+      font-weight: bold;
+    }
+
+    .ribbon-panel {
+      display: flex;
+      gap: 10px;
+      padding: 10px 0;
+      background-color: #c8d4eb;
+      border: 1px solid #a2a9b9;
+    }
+
+    .ribbon-button {
+      width: 64px;
+      text-align: center;
+      cursor: pointer;
+      background: none;
+      border: none;
+    }
+
+    .ribbon-button img {
+      width: 48px;
+      height: 48px;
+      display: block;
+      margin: auto;
+    }
+
+    .ribbon-button .label {
+      font-size: 12px;
+      margin-top: 5px;
+    }
+
+    .ribbon-button.orange {
+      background-color: orange;
+      border-radius: 3px;
+      padding: 2px;
+      box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
+    }
+
+    .popup {
+      display: none;
+      position: fixed;
+      top: 40%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #fff;
+      border: 2px solid #ccc;
+      padding: 20px;
+      z-index: 9999;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+    }
+
+    .popup-content {
+      text-align: center;
+    }
+
+    .popup button {
+      margin-top: 10px;
+      padding: 5px 15px;
+    }
+
+    details {
+      margin: 0;
+    }
+
+    details[open] .ribbon-panel {
+      display: flex;
+    }
+
+    details:not([open]) .ribbon-panel {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+
+
+
+<!-- Popup Message Box -->
+<div class="popup" id="popup">
+  <div class="popup-content">
+    <p>Button "Save" Clicked.</p>
+    <button onclick="closePopup()">OK</button>
+  </div>
+</div>
+
+<script>
+  function showMessage() {
+    document.getElementById("popup").style.display = "block";
+  }
+
+  function closePopup() {
+    document.getElementById("popup").style.display = "none";
+  }
+
+  const tabs = document.querySelectorAll('.ribbon-tab');
+  const detailTabs = {
+    modulos: document.getElementById('tab-modulos'),
+    admin: document.getElementById('tab-admin')
+  };
+
+  tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+      const selected = tab.getAttribute('data-tab');
+
+      // Toggle details
+      for (const [key, detailsEl] of Object.entries(detailTabs)) {
+        if (key === selected) {
+          detailsEl.setAttribute('open', '');
+        } else {
+          detailsEl.removeAttribute('open');
+        }
+      }
+
+      // Toggle tab active class
+      tabs.forEach(t => t.classList.remove('active'));
+      tab.classList.add('active');
+    });
+  });
+</script>
+
+</body>
+</html>