UNPKG

5 kBHTMLView Raw
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>
110 /* eslint-disable */
111 (function() {
112 var loadingNode = document.getElementById('loading-node');
113 var textNode = loadingNode.childNodes[0];
114 var barNode = loadingNode.childNodes[1];
115 var req = new XMLHttpRequest();
116
117 // report progress events
118 req.addEventListener('progress', function(evt) {
119 var percentComplete = (evt.loaded || 0) / (evt.total || 2348700);
120 if (percentComplete > 1) percentComplete = 1;
121 var percent = Math.round(percentComplete * 100, 10) + '%';
122 textNode.innerHTML = 'Loading...' + percent;
123 barNode.style.width = percent;
124 }, false);
125
126 // load responseText into a new script element
127 req.addEventListener('load', function(evt) {
128 window.setTimeout(function() {
129 // timeout to ensure 100% progress bar.
130 var scriptNode = document.createElement('script');
131 scriptNode.innerHTML = evt.target.responseText;
132 document.getElementsByTagName('head')[0].appendChild(scriptNode);
133 }, 0);
134 }, false);
135
136 // TODO: handle load error
137
138 req.open('GET', '/static/main.js');
139 req.send();
140 })();
141
142 // Call this function when the initialization finishes
143 function ON_REKIT_PORTAL_LOAD() {
144 var node = document.getElementById('loading-wrapper');
145 node && node.parentNode.removeChild(node);
146 ON_REKIT_PORTAL_LOAD = null; // This func could not be called multiple times
147 }
148 </script>
149 <script>
150 /* eslint-disable */
151 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
152 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
153 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
154 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
155
156 ga('create', 'UA-91539219-1', 'auto');
157 ga('send', 'pageview');
158
159 </script>
160 </body>
161</html>