index.html (66 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECharts WWW SPA Boilerplate</title>
<style>
body {
padding: 0;
margin: 0;
}
#header {
position: relative;
background-color: #fff;
z-index: 10000;
height: 50px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
#header .logo {
height: 35px;
margin-top: 7px;
margin-left: 20px;;
}
#header .lang {
float: right;
margin-right: 20px;
line-height: 50px;
}
#page-main {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">
<img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" class="logo" />
<a class="lang" href="./">EN</a>
</div>
<div id="page-main">
<div id="echarts-spa-app"></div>
</div>
<script>
(function () {
var search = window.location.search.substr(1);
var parts = search.split('&');
var params = {};
parts.forEach(function (part) {
var kv = part.split('=');
params[kv[0]] = kv[1];
});
var locale = params.locale || navigator.language || navigator.userLanguage || 'en';
// zh / en
window.ECHARTS_WEBSITE_LANGUAGE = locale;
var otherLocale = locale === 'en' ? 'zh' : 'en';
document.querySelector('#header .lang').innerHTML = otherLocale.toUpperCase();
document.querySelector('#header .lang').href = 'index.html?locale=' + otherLocale;
})();
</script>
<script type="module" src="./src/main.ts"></script>
</body>
</html>