update

src/app_modules.js

@@ -1006,10 +1006,15 @@ function SetPages() {
       return;
     }
     var a = document.createElement("a");
-    a.className = "button " + PAGES[key].navcss;
+    var img = document.createElement("img")
+    var label = document.createElement("div")
+    a.className = "ribbon-button";
     a.href = "#" + key;
-    a.innerText = PAGES[key].Title;
-    document.getElementById("appendApps").append(a);
+    label.innerText = PAGES[key].Title;
+    label.className = "label"
+    img.src = PAGES[key].icon
+    a.append(img, label)
+    document.getElementById("appendApps2").append(a);
   });
   var a = document.createElement("a");
   a.className = "button btn7";

src/index.html

@@ -57,6 +57,43 @@
           </fieldset>
         </details>
         <!-- <button onclick="displayPost('index')">Ir a la pagina de inicio</button> -->
+        <div class="ribbon">
+  <div class="ribbon-orb"></div>
+
+  <div class="ribbon-content">
+    <div class="ribbon-tabs">
+      <div class="ribbon-tab active" data-tab="modulos">Modulos</div>
+      <div class="ribbon-tab" data-tab="admin">Admin</div>
+    </div>
+
+    <!-- Tab: Modulos -->
+    <details id="tab-modulos" open>
+      <summary hidden>Modulos</summary>
+      <div class="ribbon-panel" id="appendApps2">
+        <button class="ribbon-button" onclick="showMessage()">
+          <img src="https://raw.githubusercontent.com/darealshinji/haiku-icons/refs/heads/master/svg/File_Person.svg">
+          <div class="label">Personas</div>
+        </button>
+      </div>
+    </details>
+
+    <!-- Tab: Admin -->
+    <details id="tab-admin">
+      <summary hidden>Admin</summary>
+      <div class="ribbon-panel">
+        <div class="ribbon-button orange">
+          <img src="https://raw.githubusercontent.com/darealshinji/haiku-icons/refs/heads/master/svg/Settings.svg">
+          <div class="label">Settings</div>
+        </div>
+        <div class="ribbon-button">
+          <img src="https://raw.githubusercontent.com/darealshinji/haiku-icons/refs/heads/master/svg/Lock_Lock.svg">
+          <div class="label">Security</div>
+        </div>
+      </div>
+    </details>
+
+  </div>
+</div>
         <div id="appendApps">
           <!--<a class="button nav-supercafe nav-disabled" disabled>SuperCafé</a>
                 <a class="button nav-comedor nav-disabled" disabled>Menú Comedor</a>