<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Web</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="js/echarts.min.js"></script>
</head>
<body>
<h1>WebView Demo</h1>
<section class="contents">
<aside class="aside aside-show">
<menu class="menu">
<MenuItem name="home" class="actived">
<img src="./assets/home-outline.svg"></img>
<span>Home</span>
</MenuItem>
<MenuItem name="entries">
<img src="./assets/list-outline.svg"></img>
<span>Entries</span>
</MenuItem>
<MenuItem name="set">
<img src="./assets/settings-2-outline.svg"></img>
<span>Set</span>
</MenuItem>
</menu>
<div class="toolbar" title="隐藏">
<i class="icon left"></i>
<i class="icon right hidden"></i>
</div>
</aside>
<main class="main">
<div class="home-main">
<div id="barchart_1"></div>
<div id="barchart_2"></div>
<div id="barchart_3"></div>
</div>
<div class="entries-main hide">
<table class="table" border>
<thead>
<tr>
<th>
<div>日期</div>
</th>
<th>
<div>姓名</div>
</th>
<th>
<div>省份</div>
</th>
<th>
<div>市区</div>
</th>
<th>
<div>地址</div>
</th>
<th>
<div>邮编</div>
</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="set-main hide">
<div id="demo_controls">
<fieldset id="fx">
<legend>Effects</legend>
<div class="tight">
<input value="Shadow" data-fx="shadow" type="button" class="fx" />
</div>
<div class="tight">
<input value="Mirror" data-fx="mirror" type="button" class="fx" />
</div>
<div class="tight">
<input value="Resize" data-fx="resize" type="button" class="fx align-top" />
</div>
<div class="tight speical">
<input value="Spin" data-fx="spin" type="button" class="fx" />
<input type="range" value="0" min="-180" max="180" list="markers" id="rotation" />
<datalist id="markers">
<option value="-180"></option>
<option value="-135"></option>
<option value="-45"></option>
<option value="0"></option>
<option value="45"></option>
<option value="135"></option>
<option value="180"></option>
</datalist>
</div>
<div class="tight">
<input value="Device" data-fx="handheld" type="button" class="fx" />
</div>
</fieldset>
<fieldset id="interop">
<legend>JS Interop</legend>
<div class="interop">
<label for="screen-selector">
Screen
</label>
<select name="screen-select" id="screen-selector" class="screen">
<option value="counter">Counter</option>
<option value="textField">TextField</option>
<option value="custom">Custom</option>
</select>
</div>
<div class="interop">
<label for="value">
Value
</label>
<input id="value" value="" type="text" readonly />
<input id="increment" value="Increment" type="button" />
</div>
</fieldset>
</div>
<div class="set-main_content">
<div id="set_target">
<div id="counter" class="set_target--content">
<title>Counter</title>
<article>
<div class="counter--content">
<span>按钮点击次数：</span>
<p id="countBtn">0</p>
</div>
<button id="counter_increment">+</button>
</article>
</div>
<div id="textField" class="set_target--content hide">
<title>Note to Self</title>
<article>
<div class="textField--content">
<textarea rows="1" class="my-text-area" maxlength="1000"></textarea>
</div>
</article>
</div>
<div id="custom" class="set_target--content hide">
<title>Count as Input</title>
<article>
<div class="custom--content">
<div class="top--show">
<p style="position: absolute;left: 0;top: 0;">您输入了：</p>
<p class="top--show--p">
<strong id="customerInput"></strong>
<span>个字符</span>
</p>
</div>
<div class="bottom--input">
<input value="" oninput="customerOnInput(value)" maxlength="1000">
<img src="./assets/refresh-outline.svg" onclick="resetCustomerInput(event)"></img>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="settings">
<div class="settings-item">
<div class="settings-item-sys">
系统设置
</div>
</div>
<div class="settings-item">
<div class="settings-item-sys">
账户设置
</div>
</div>
<div class="settings-item">
<div class="settings-item-sys">
声音设置
</div>
</div>
<div class="settings-item">
<div class="settings-item-sys">
更多设置
</div>
</div>
</div>
</div>
</div>
</main>
</section>
<script type="text/javascript"></script>
<script src="js/home.js" defer></script>
<script src="js/aside.js" defer></script>
<script src="js/entries.js" defer></script>
<script src="js/control.js" defer></script>
<script src="js/interop.js" defer></script>
</body>
</html>