update

tinchox5 · tinchox5 · commit 4b4934fe4807 · 2023-10-04T10:15:47.000-03:00
diff --git a/examples/generic.html b/examples/generic.html
@@ -4,19 +4,34 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="../assets/css/index.min.css" type="text/css" defer/>
-    <title>Zumer CSS</title>
+    <title>°ⓩ CSS</title>
     <style>
       body {
         font-family: 'Lucida Sans', Verdana, sans-serif;
+        background-color: darkslategray;
       }
+      .content {
+        position:absolute;
+        z-index: 400;
+        width: 100%;
+        overflow: hidden;
+      }
+      dialog::backdrop {
+        background-color: rgba(0, 0, 0, 0.352);
+      }
+
     </style>
+   
   </head>
   <body>
     <div class="docker" >
+      
       <div class="core ">
         <div class="orbiter s" style="transform: translate(-50%, -50%);"></div>
       </div>
+      
       <div class="orbit">
+     
         <div class="orbit limit-180">
           <div class="sector"></div>
           <div class="sector"></div>
@@ -27,11 +42,12 @@
           <div class="orbiter s lower">w</div>
           <div class="orbiter s lower">w</div>
           <div class="orbiter s lower">w</div>
-          <div class="orbiter s lower">w</div>
+          <button id="dialogb" class="orbiter s">open dialog</button>
         </div>
       </div>
       
       <div class="orbit limit-90">
+       
          <div class=" orbiter m ">
           <div class="orbit ">
             <div class="sector" ></div>
@@ -56,7 +72,25 @@
           </div>
         </div>
       </div>
+      <dialog  id="dialog"   class="orb" style="  width: 200px;
+      height: 200px;">
+        esto modal es
+      </dialog>
+      
     </div>
   </body>
+  <script>
+    (function () {
+   var updateButton = document.getElementById("dialogb");
+
+   var favDialog = document.getElementById("dialog");
 
+   // Update button opens a modal dialog
+   updateButton.addEventListener("click", function () {
+     favDialog.showModal();
+   });
+
+ })();
+   </script>
 </html>
+
diff --git a/examples/index.html b/examples/index.html
@@ -5,33 +5,38 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="../assets/css/index.min.css" type="text/css" defer/>
-    <title>Zumer CSS</title>
+    <title>°ⓩ CSS</title>
     <style>
       body {
         font-family: 'Lucida Sans', Verdana, sans-serif;
         padding: 40px;
       }
+      ul, li {
+        margin: 0
+      }
     </style>
   </head>
   <body>
     <h2>Examples</h2>
     <div class="docker">
-
-      <ul class="orbit">
-        <li class="sector"></li>
-        <li class="sector"></li>
-        <li class="sector"></li>
-        <li class="sector"></li>
-        <li class="sector"></li>
-        <li class="orbiter m"><a href="./generic.html">Generic</a></li>
-        <li class="orbiter m"><a href="./watch.html">Watch</a></li>
-        <li class="orbiter m"><a href="./spread.html">Spread</a></li>
-        <li class="orbiter m"><a href="./form.html">Form</a></li>
-        <li class="orbiter m"><a href="./sectorgrid.html">sector</a></li>
-      </ul>
-      <ul class="orbit">
-        
-      </ul>
+<div class="orbit">
+  <ul class="orbit">
+    <li class="sector"></li>
+    <li class="sector"></li>
+    <li class="sector"></li>
+    <li class="sector"></li>
+    <li class="sector"></li>
+   
+  </ul>
+  <ul class="orbit">
+    <li class="orbiter m"><a href="./generic.html">Generic</a></li>
+    <li class="orbiter m"><a href="./watch.html">Watch</a></li>
+    <li class="orbiter m"><a href="./spread.html">Spread</a></li>
+    <li class="orbiter m"><a href="./form.html">Form</a></li>
+    <li class="orbiter m"><a href="./arcgrid.html">sector</a></li>
+  </ul>
+</div>
+      
     </div>
     
   </body>
