1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <base href="/static/">
|
5 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
6 | <link rel="icon" href="/favicon.png" type="image/png">
|
7 | <title>Rekit portal</title>
|
8 | <style type="text/css">
|
9 | html, body {
|
10 | height: 100%;
|
11 | font-family: Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 'Microsoft Yahei';
|
12 | }
|
13 |
|
14 | #loading-wrapper {
|
15 | position: absolute;
|
16 | left: 0;
|
17 | top: 0;
|
18 | right: 0;
|
19 | bottom: 0;
|
20 | background-color: #f0f0f0;
|
21 | z-index: 9999;
|
22 | }
|
23 |
|
24 | #loading-node {
|
25 | width: 300px;
|
26 | box-sizing: border-box;
|
27 | height: 10px;
|
28 | border: 2px solid #fff;
|
29 | z-index: 9999;
|
30 | border-radius: 8px;
|
31 | background-color: #fff;
|
32 | position: absolute;
|
33 | top: 50%;
|
34 | left: 50%;
|
35 | transform: translate(-50%, -50%);
|
36 | text-align: center;
|
37 | font-size: 12px;
|
38 | }
|
39 |
|
40 | #loading-node img {
|
41 | width: 32px;
|
42 | position: absolute;
|
43 | left: 134px;
|
44 | top: -80px;
|
45 |
|
46 | -webkit-animation-name: spin;
|
47 | -webkit-animation-duration: 1500ms;
|
48 | -webkit-animation-iteration-count: infinite;
|
49 | -webkit-animation-timing-function: linear;
|
50 | -moz-animation-name: spin;
|
51 | -moz-animation-duration: 1500ms;
|
52 | -moz-animation-iteration-count: infinite;
|
53 | -moz-animation-timing-function: linear;
|
54 | -ms-animation-name: spin;
|
55 | -ms-animation-duration: 1500ms;
|
56 | -ms-animation-iteration-count: infinite;
|
57 | -ms-animation-timing-function: linear;
|
58 |
|
59 | animation-name: spin;
|
60 | animation-duration: 1500ms;
|
61 | animation-iteration-count: infinite;
|
62 | animation-timing-function: linear;
|
63 | }
|
64 | @-ms-keyframes spin {
|
65 | from { -ms-transform: rotate(0deg); }
|
66 | to { -ms-transform: rotate(360deg); }
|
67 | }
|
68 | @-moz-keyframes spin {
|
69 | from { -moz-transform: rotate(0deg); }
|
70 | to { -moz-transform: rotate(360deg); }
|
71 | }
|
72 | @-webkit-keyframes spin {
|
73 | from { -webkit-transform: rotate(0deg); }
|
74 | to { -webkit-transform: rotate(360deg); }
|
75 | }
|
76 | @keyframes spin {
|
77 | from { transform:rotate(0deg); }
|
78 | to { transform:rotate(360deg); }
|
79 | }
|
80 |
|
81 | #loading-node div {
|
82 | height: 100%;
|
83 | border-radius: 4px;
|
84 | background-color: #00bfff;
|
85 | position: absolute;
|
86 | left: 0;
|
87 | top: 0;
|
88 | }
|
89 |
|
90 | #loading-node label {
|
91 | font-size: 12px;
|
92 | color: #999;
|
93 | display: block;
|
94 | text-align: center;
|
95 | font-family: Arial;
|
96 | position: absolute;
|
97 | top: -28px;
|
98 | left: 0;
|
99 | width: 100%;
|
100 | line-height: 12px;
|
101 | }
|
102 | </style>
|
103 | </head>
|
104 | <body>
|
105 | <div id="loading-wrapper">
|
106 | <div id="loading-node"><label>Loading...0%</label><div></div><img src="/static/logo_small.png" /></div>
|
107 | </div>
|
108 | <div id="react-root" />
|
109 | <script src="/static/libs/d3.min.js"></script>
|
110 | <script>
|
111 |
|
112 | (function() {
|
113 | var loadingNode = document.getElementById('loading-node');
|
114 | var textNode = loadingNode.childNodes[0];
|
115 | var barNode = loadingNode.childNodes[1];
|
116 | var req = new XMLHttpRequest();
|
117 |
|
118 |
|
119 | req.addEventListener('progress', function(evt) {
|
120 | var percentComplete = (evt.loaded || 0) / (evt.total || 2348700);
|
121 | if (percentComplete > 1) percentComplete = 1;
|
122 | var percent = Math.round(percentComplete * 100, 10) + '%';
|
123 | textNode.innerHTML = 'Loading...' + percent;
|
124 | barNode.style.width = percent;
|
125 | }, false);
|
126 |
|
127 |
|
128 | req.addEventListener('load', function(evt) {
|
129 | window.setTimeout(function() {
|
130 |
|
131 | var scriptNode = document.createElement('script');
|
132 | scriptNode.innerHTML = evt.target.responseText;
|
133 | document.getElementsByTagName('head')[0].appendChild(scriptNode);
|
134 | }, 0);
|
135 | }, false);
|
136 |
|
137 |
|
138 |
|
139 | req.open('GET', '/static/main.js');
|
140 | req.send();
|
141 | })();
|
142 |
|
143 |
|
144 | function ON_REKIT_PORTAL_LOAD() {
|
145 | var node = document.getElementById('loading-wrapper');
|
146 | node && node.parentNode.removeChild(node);
|
147 | ON_REKIT_PORTAL_LOAD = null;
|
148 | }
|
149 | </script>
|
150 | <script>
|
151 |
|
152 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
153 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
154 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
155 | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
156 |
|
157 | ga('create', 'UA-91539219-1', 'auto');
|
158 | ga('send', 'pageview');
|
159 |
|
160 | </script>
|
161 | </body>
|
162 | </html>
|