save file

Author: javascript-2020

utils/misc/html/hdr-network/hdr-network.html

@@ -0,0 +1,131 @@
+
+
+<hdr-network>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  section
+    {margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;}
+  
+  .icon
+    {cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;
+      width:38px;height:38px;
+    }
+  
+  .item
+    {display:inline-flex;align-items:center;text-align:center;background:buttonface;
+      border-radius:3px;border:1px solid lightgray;padding:5px 7px;
+    }
+  
+  .item-label
+    {}
+  
+  #home
+    {cursor:pointer;
+      content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAb1BMVEVHcEw7mOJCmuBJnNtDmt88mOI9meJAmuBDmt8/meFEm95Hm90+meI/meFAmuFEnOE+muE+meE/muFyosRAmuFfodFMnNpEnOFAmuC92/89meK52v5aqelmruu+3P9CnON2t+5LoOWRxfSu1Pumz/lJEB4eAAAAGXRSTlMA/lcUSPnxfD1qLh7pxaVp1d+3AYcECmGSA8UKKQAAATBJREFUKM+tk+mOgyAUhQXZBHer1euCS9//GedCrHZqmkwyPT8U+DgHLoEg+J6UlKrCf6UZC99hKGOAWOI4jTkv37gugacph1LVJQwLZ6+wiQrIaV3THAMSu46EvlpTAqkOpQwNtvhv7D1RoxJCEtZkBcA8nNi0uKJ2O1sGELcQd2Et7LhiCQgZqgTsvG2zxQBfg6x8OTcBiXIDw9pPU7/6AJyMXwwuQbRGlc46dahpD3AuHTCRU78qWjuvZwDLBQ0aZer2sO4TMADS2qjG1xzbw3oELELtdTE+9N2b+vNY/oqnHvUR445Rc/8Bz0A4J+D5FW+LkEpFYnE1XvD0WAqDZ5zbx5fxdsHndTCFHUaUFSlK2NF3Cv28LTQmTrDLd+KsOi/iPUNFu1z7rqv/v6ofGyYrrUQwfuIAAAAASUVORK5CYII=);
+    }
+    
+  ::slotted(.title)
+    {text-align:center;position:absolute;left:0;right:0;top:0px;z-index:-1;margin:0 auto;}
+
+  .date
+    {position:absolute;top:5px;right:5px;
+    }
+  
+  a 
+    {color:blue;}
+  a:visited
+    {color:blue;}
+                  
+            
+            </style>
+            
+            <section>
+
+                  <img id=home class=icon>
+                  
+                  <img id=help class=icon style='padding:2px' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABANJREFUSEvNl2tsVEUUx39n224pEVNsTcGqAYM1gYYP0mCUaILGLqVptzVGKZCArxIU2VYTYpQapU2Mj9jWR9H6wUesUdcGWoRSJIQYjUhETUkkRUVIoGztLqB9bOm2OzL7urtst3eXhsT77c495/+bOXPmzLlCEk9JydOZKsNi8ws2QYqAW4DskOsF4IRC/WRRdIvP393V9fZFM1mZyqC0dONsX8aMZ0SpjUCOmVjou0eJbM/wjb65e/f284l8YsCqbNN8JK0Ii5JeJXN2IXVjkJskMMbMCu4yVP1tolyBD4ohrNftF+dLY/o1AlbljsUIh4CsKwEl5aPoks7mlbFg++bnQF5JSmA6RlbLTHE2eo0V22teANUwHc2kfK2+WeJsGYqABysc9dcotiblPB2jaLDO3rXp1uOrrjCRUpmH02ed+9Ce112BFRdX1NavVmrrOlRQ4/nH4YN2GDgP826AiuXQ1AY1a2B+vsE5dBRO9UF+Hjj3GeMr7wbbncH3f4fB+Q30HA+8Voml4fOdjXWii4PfmnamCnIi4A+3wcvvwck+WFwAj1WC41Vo2gKdB+HYX0HRwWG4747gZJo+NcCPVEBWJuw4AIULYF0ZrK+D8QkeQDyjYxP5sqLcUa5EOqqApMAfdcCvvQbEvnxy8MQEfLILROCrN+CJbXDuHyoRRpWyS7Hd8a4gT8aB/zwNwyOQfS1kzzJWrEPr8sDX3wZXnAicZoEvu6HwVtjwIDz6Ikz4A+ARVIvY7DU/AkvjwB93wlk3LLgJiu8ywEd+g1Nn4fBRGB1LDL7n9mCOXBiE9v3QezIQJQ32wmENHgByr1qoL0v5ENitwT4gPWnwd7/AidNBuf5LIS9aBEsWws4DwTGXG2zLILzHk4PHJwfrLNbh0WGamwv3LoW2PbC2FG7MM6R6foczf0PJMmPs52Mw7AW/H37oiTvioRUHwPGhTqUipGgbHer45EpRLBXzSHKFj9MqYH24cqWilKJtRSCrVUukgBQCr6GwpCiUirkumpsRRBeQcMnUrc1CYFF0dxClOhtFpQmlD9hr9BYx1l7goK6y4LHokqm/6ktClDK9Eh0oShLA9ZmsRfjDZHJKpGGfviS0nb4Wx9MzdSSm7K8ygWYU8yYRb0HoNI+7O338YoFuAiONgM1euxpUm5nvzcBbKGZEGX4P1CcIcayerOnuaPxMj8V0mSvKa95XQrUZ/P5Le/Vs6AT0A08hDJk4iaJ1b2fThrBZDHhJdXVGTn/WF4KY5VFgrwtQtCOECmhCtELt8OR5Hz7S2qpTIfDENfQafr1r5jvJrNwsMgGAonVgzsimaOik4LBYaM+bzRJuCrgbxBHe08vt/h+/MIlmfzV+2v4DHQu0lKRbJa4AAAAASUVORK5CYII='>
+
+                  <menu-network component=grp v2.0></menu-network>
+
+                  <slot></slot>
+                
+                  <div class=date>
+                        <slot name=date></slot>
+                  </div>
+                
+            </section>
+            
+      </template>
+      
+      <script>
+      
+(function hdr_network({mod,dom,host}){
+                                                                
+  var obj   = {};
+
+        var df=true,did='hdr-network'
+        ;
+      
+                                                              
+        var $,menu
+        ;
+          
+        obj.initmod   = function(params){
+          
+              $         = params.$;
+              menu      = params.menu;
+              
+        }//initmod
+
+  
+  //:
+
+
+        var net;
+
+        
+        obj.init    = async function(){
+        
+              net    = mod['menu-network'];
+              
+              net.initmod({$,menu});
+              
+              await net.init();
+      
+              
+        }//init
+
+
+  //:
+
+
+        obj.initdom   = function(rootnode){
+          
+              var root            = host.shadowRoot;
+              
+              net.initdom(root);
+              
+              
+              $(root,'#home').onclick   = e=>window.location    = 'https://javascript-2020.github.io/';
+
+
+
+              
+        }//initdom
+        
+
+  //:
+
+
+  return obj;
+
+})//hdr-network
+            
+      </script>
+      
+</hdr-network>
+
+