predix-ui.github.io/index.html at source · randyaskin/predix-ui.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#2D2D30">
    <title>Predix UI</title>

    <noscript>JavaScript is off. Please enable to view full site.</noscript>

    <link rel="preload" href="type/GEInspiraSans-Regular-v01.woff" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="elements/px-catalog/navigation.json" type="application/json" crossorigin>

    <!--
      Fast bootstrapping of the webcomponents-lite library. Only loads the library
      if the browser doesn't natively support web components.
    -->
    <script type="text/javascript">
    (function() {
      'use strict';

      var onload = function() {
        // For native Imports, manually fire WebComponentsReady so user code
        // can use the same code path for native and polyfill'd imports.
        if (!window.HTMLImports) {
          document.dispatchEvent(
            new CustomEvent('WebComponentsReady', {bubbles: true})
          );
        }
      };

      var webComponentsSupported = (
        'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
      );

      if (!webComponentsSupported) {
        var script = document.createElement('script');
        script.async = true;
        script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
        script.onload = onload;
        document.head.appendChild(script);
      } else {
        onload();
      }
    })();
    </script>

    <!--
      Asynchronously import the px-catalog element, which is the entrypoint
      for our application.
    -->
    <link
        async
        id="main-element-import"
        rel="import"
        href="elements/px-catalog/px-catalog.html">

    <!--
      Load the app icon and manifest for Android devices.
    -->
    <link defer rel="icon" href="img/favicon.ico" type="image/x-icon" />
    <link defer rel="manifest" href="manifest.json">

    <!--
      Basic page styles.
    -->
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow-y: hidden;
      }
      body.loading .splash__header {
        position: fixed;
        top: 0;
        left: 0;
        height: 80px;
        width: 100vw;
        background-color: #eaeaea;
      }
      body.loading .splash__sidebar {
        position: fixed;
        top: 80px;
        left: 0;
        height: calc(100vh - 80px);
        width: 300px;
        background-color: #f0f0f0;
      }
    /*#spinner{position:absolute;z-index:999;width:100%;height:100%;background:#fff;}
    #spinner px-spinner {margin:25% 36%;vertical-align: middle;}*/
    </style>
  </head>

  <!--
    'loading' class on <body> avoids "Flash of Unstyled Concent"
     and a "Flash of No Content"
  -->
  <body class="loading">

    <!--
      #splash div outside of Polymer/imports and styled by the main page.
      First paint is instant, even on polyfilled browsers.
    -->
    <div class="splash">
      <div class="splash__header"></div>
      <div class="splash__sidebar"></div>
      <div class="splash__content"></div>
    </div>

    <!-- Elements wait on the page and are upgraded after elements.html is loaded. -->
    <px-catalog></px-catalog>

    <!--
      Defer loading and sending a Google Analytics page view event to avoid blocking
      render on the page.
    -->
    <script async>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments);},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m);
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-80996379-1', 'auto');
      ga('send', 'pageview');
    </script>

    <!--
      Attempt to register a service worker with the correct scope. Fail quietly
      if this doesn't work, but log the result to the console.
    -->
    <script type="text/javascript">
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>