third_party/ot-br-posix/repo/third_party/mdl/repo/src/index.html

   1 <!doctype html>
   2 <html lang="">
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6     <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
   7     <meta name="viewport" content="width=device-width, initial-scale=1">
   8     <title>Material Design Lite</title>
   9
  10     <!-- Add to homescreen for Chrome on Android -->
  11     <meta name="mobile-web-app-capable" content="yes">
  12     <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
  13
  14     <!-- Add to homescreen for Safari on iOS -->
  15     <meta name="apple-mobile-web-app-capable" content="yes">
  16     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  17     <meta name="apple-mobile-web-app-title" content="Material Design Lite">
  18     <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
  19
  20     <!-- Tile icon for Win8 (144x144 + tile color) -->
  21     <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
  22     <meta name="msapplication-TileColor" content="#3372DF">
  23
  24     <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
  25     <!--
  26     <link rel="canonical" href="http://www.example.com/">
  27     -->
  28
  29     <!-- Page styles -->
  30     <link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
  31
  32     <link rel="stylesheet" href="styleguide.css">
  33   </head>
  34   <body>
  35     <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-styleguide">
  36
  37       <div class="mdl-layout__drawer">
  38         <span class="mdl-layout-title">Material Design Lite</span>
  39         <nav id="main-navigation" class="mdl-navigation">
  40         </nav>
  41       </div>
  42
  43       <div class="mdl-layout__content">
  44         <div class="styleguide-demo">
  45           <h1>Typography</h1>
  46           <iframe src="./typography/demo.html" scrolling="no"></iframe>
  47         </div>
  48
  49         <div class="styleguide-demo">
  50           <h1>List</h1>
  51           <iframe src="./list/demo.html" scrolling="no"></iframe>
  52         </div>
  53
  54         <div class="styleguide-demo">
  55           <h1>Palette</h1>
  56           <iframe src="./palette/demo.html" scrolling="no"></iframe>
  57         </div>
  58
  59         <div class="styleguide-demo">
  60           <h1>Shadows</h1>
  61           <iframe src="./shadow/demo.html" scrolling="no"></iframe>
  62         </div>
  63
  64         <div class="styleguide-demo">
  65           <h1>Cards</h1>
  66           <iframe src="./card/demo.html" scrolling="no"></iframe>
  67         </div>
  68
  69         <div class="styleguide-demo">
  70           <h1>Animation</h1>
  71           <iframe src="./animation/demo.html" scrolling="no"></iframe>
  72         </div>
  73
  74         <div class="styleguide-demo">
  75           <h1>Button</h1>
  76           <iframe src="./button/demo.html" scrolling="no"></iframe>
  77         </div>
  78
  79         <div class="styleguide-demo">
  80           <h1>Menu</h1>
  81           <iframe src="./menu/demo.html" scrolling="no"></iframe>
  82         </div>
  83
  84         <div class="styleguide-demo">
  85           <h1>Text Field</h1>
  86           <iframe src="./textfield/demo.html" scrolling="no"></iframe>
  87         </div>
  88
  89         <div class="styleguide-demo">
  90           <h1>Radio Buttons</h1>
  91           <iframe src="./radio/demo.html" scrolling="no"></iframe>
  92         </div>
  93
  94         <div class="styleguide-demo">
  95           <h1>Checkbox</h1>
  96           <iframe src="./checkbox/demo.html" scrolling="no"></iframe>
  97         </div>
  98
  99         <div class="styleguide-demo">
 100           <h1>Switch</h1>
 101           <iframe src="./switch/demo.html" scrolling="no"></iframe>
 102         </div>
 103
 104         <div class="styleguide-demo">
 105           <h1>Icon Toggle</h1>
 106           <iframe src="./icon-toggle/demo.html" scrolling="no"></iframe>
 107         </div>
 108
 109         <div class="styleguide-demo">
 110           <h1>Slider</h1>
 111           <iframe src="./slider/demo.html" scrolling="no"></iframe>
 112         </div>
 113
 114         <div class="styleguide-demo">
 115           <h1>Spinner</h1>
 116           <iframe src="./spinner/demo.html" scrolling="no"></iframe>
 117         </div>
 118
 119         <div class="styleguide-demo">
 120           <h1>Progress Bar</h1>
 121           <iframe src="./progress/demo.html" scrolling="no"></iframe>
 122         </div>
 123
 124         <div class="styleguide-demo">
 125           <h1>Layout</h1>
 126             <iframe src="./layout/demo.html" scrolling="no"></iframe>
 127         </div>
 128
 129         <div class="styleguide-demo">
 130           <h1>Content Tabs</h1>
 131           <iframe src="./tabs/demo.html" scrolling="no"></iframe>
 132         </div>
 133
 134         <div class="styleguide-demo">
 135           <h1>Icons</h1>
 136           <iframe src="./icons/demo.html" scrolling="no"></iframe>
 137         </div>
 138
 139
 140         <div class="styleguide-demo">
 141           <h1>Tooltip</h1>
 142           <iframe src="./tooltip/demo.html" scrolling="no"></iframe>
 143         </div>
 144
 145         <div class="styleguide-demo">
 146           <h1>Column Layout</h1>
 147             <iframe src="./column-layout/demo.html"></iframe>
 148         </div>
 149
 150         <div class="styleguide-demo">
 151           <h1>Footer</h1>
 152             <iframe src="./footer/demo.html"></iframe>
 153         </div>
 154       </div>
 155     </div>
 156     <!-- build:js scripts/main.min.js -->
 157     <script src="mdlComponentHandler.js"></script>
 158     <script src="layout/layout.js" async defer></script>
 159     <!-- endbuild -->
 160
 161     <!-- Script to handle sizing the iFrames -->
 162     <script>
 163       'use strict';
 164       var navList = document.getElementById('main-navigation');
 165       var totalDemosPendingLoading = 0;
 166       sizeDemos();
 167
 168       function sizeDemos() {
 169         var demos = document.querySelectorAll('.styleguide-demo');
 170         totalDemosPendingLoading = demos.length;
 171         for (var i = 0; i < demos.length; i++) {
 172           var demoTitle = demos[i].querySelector('h1').textContent;
 173           var anchorLink = 'demo-' + i;
 174
 175           // Add list item
 176           var navAnchor = document.createElement('a');
 177           navAnchor.classList.add('mdl-navigation__link');
 178           navAnchor.href = '#' + anchorLink;
 179           navAnchor.appendChild(document.createTextNode(demoTitle));
 180           navList.appendChild(navAnchor);
 181
 182           var anchor = document.createElement('a');
 183           anchor.id = anchorLink;
 184           demos[i].insertBefore(anchor , demos[i].querySelector('h1'));
 185
 186           // Size iframe
 187           sizeDemo(demos[i]);
 188         }
 189       }
 190
 191       function sizeDemo(rootDemoElement) {
 192         var iframe = rootDemoElement.querySelector('iframe');
 193         if (iframe === null) {
 194           totalDemosPendingLoading--;
 195           return;
 196         }
 197         iframe.onload = function() {
 198           var contentHeight = iframe.contentDocument.documentElement.scrollHeight;
 199           iframe.style.height = contentHeight + 'px';
 200           iframe.classList.add('heightSet');
 201           totalDemosPendingLoading--;
 202           if (totalDemosPendingLoading <= 0) {
 203             document.body.classList.add('demosLoaded');
 204           }
 205         };
 206       }
 207     </script>
 208   </body>
 209 </html>